xmlui 0.9.40 → 0.9.42

package/dist/scripts/package.json

@@ -1,6 +1,6 @@
 {
     "name": "xmlui",
-    "version": "0.9.40",
+    "version": "0.9.42",
     "sideEffects": false,
     "scripts": {
         "start-test-bed": "cd src/testing/infrastructure && xmlui start",
@@ -111,7 +111,7 @@
         "@babel/core": "7.19.6",
         "@babel/preset-env": "7.19.4",
         "@babel/preset-typescript": "7.18.6",
-        "@playwright/test": "1.50.1",
+        "@playwright/test": "1.52.0",
         "@rollup/pluginutils": "5.1.0",
         "@types/adm-zip": "0.5.4",
         "@types/glob": "7.2.0",

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

@@ -50,7 +50,7 @@ const AppHeader = ({ children, profileMenu, style = constants_1.EMPTY_OBJECT, lo
     }, []);
     return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(AppHeader_module_scss_1.default.header, className), style: style, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(AppHeader_module_scss_1.default.headerInner, {
                 [AppHeader_module_scss_1.default.full]: !canRestrictContentWidth,
-            }), children: [!navPanelVisible && hasRegisteredNavPanel && ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: toggleDrawer, icon: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: "hamburger" }), variant: "ghost", style: { color: "inherit", flexShrink: 0 } })), (0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.logoAndTitle, children: (showLogo || !navPanelVisible) &&
+            }), children: [hasRegisteredNavPanel && ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: toggleDrawer, icon: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: "hamburger" }), variant: "ghost", className: AppHeader_module_scss_1.default.drawerToggle, style: { color: "inherit", flexShrink: 0 } })), (0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.logoAndTitle, children: (showLogo || !navPanelVisible) &&
                         (logoContent ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.customLogoContainer, children: logoContent }), safeLogoTitle] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!!logoUrl && ((0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.logoContainer, children: (0, jsx_runtime_1.jsx)(NavLinkNative_1.NavLink, { to: "/", displayActive: false, style: { padding: 0, height: "100%" }, children: (0, jsx_runtime_1.jsx)(LogoNative_1.Logo, {}) }) })), safeLogoTitle] }))) }), (0, jsx_runtime_1.jsx)("div", { ref: subNavPanelSlot, className: AppHeader_module_scss_1.default.subNavPanelSlot }), (0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.childrenWrapper, children: children }), profileMenu && (0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.rightItems, children: profileMenu })] }) }));
 };
 exports.AppHeader = AppHeader;

package/dist/scripts/src/components/Card/CardNative.js

@@ -24,5 +24,5 @@ exports.Card = (0, react_1.forwardRef)(function Card({ children, orientation = e
             [Card_module_scss_1.default.isClickable]: !!onClick,
             [Card_module_scss_1.default.vertical]: orientation === "vertical",
             [Card_module_scss_1.default.horizontal]: orientation === "horizontal",
-        }), style: style, onClick: onClick, children: [[title, subtitle, avatarUrl, showAvatar].some(Boolean) && ((0, jsx_runtime_1.jsxs)("div", { className: Card_module_scss_1.default.avatarWrapper, children: [showAvatar && (0, jsx_runtime_1.jsx)(AvatarNative_1.Avatar, { url: avatarUrl, name: title, size: avatarSize }), (0, jsx_runtime_1.jsxs)("div", { className: Card_module_scss_1.default.titleWrapper, children: [linkTo ? (title ? ((0, jsx_runtime_1.jsx)(LinkNative_1.LocalLink, { to: linkTo + "", children: (0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, Object.assign({}, titleProps, { children: title })) })) : null) : title ? ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, Object.assign({}, titleProps, { children: title }))) : null, subtitle !== undefined && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(TextNative_1.Text, { variant: "small", children: subtitle }) }))] })] })), children] }));
+        }), style: style, onClick: onClick, children: [[title, subtitle, avatarUrl, showAvatar].some(Boolean) && ((0, jsx_runtime_1.jsxs)("div", { className: Card_module_scss_1.default.avatarWrapper, children: [showAvatar && (0, jsx_runtime_1.jsx)(AvatarNative_1.Avatar, { url: avatarUrl, name: title, size: avatarSize }), (0, jsx_runtime_1.jsxs)("div", { className: Card_module_scss_1.default.titleWrapper, children: [linkTo ? (title ? ((0, jsx_runtime_1.jsx)(LinkNative_1.LinkNative, { to: linkTo + "", children: (0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, Object.assign({}, titleProps, { children: title })) })) : null) : title ? ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, Object.assign({}, titleProps, { children: title }))) : null, subtitle !== undefined && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(TextNative_1.Text, { variant: "small", children: subtitle }) }))] })] })), children] }));
 });

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

@@ -22,6 +22,10 @@ exports.DatePickerMd = (0, ComponentDefs_1.createMetadata)({
         readOnly: (0, metadata_helpers_1.dReadonly)(),
         enabled: (0, metadata_helpers_1.dEnabled)(DatePickerNative_1.defaultProps.enabled),
         validationStatus: (0, metadata_helpers_1.dValidationStatus)(DatePickerNative_1.defaultProps.validationStatus),
+        label: (0, metadata_helpers_1.dLabel)(),
+        labelPosition: (0, metadata_helpers_1.dLabelPosition)("top"),
+        labelWidth: (0, metadata_helpers_1.dLabelWidth)(COMP),
+        labelBreak: (0, metadata_helpers_1.dLabelBreak)(COMP),
         mode: {
             description: "The mode of the datepicker (single or range)",
             valueType: "string",
@@ -119,5 +123,5 @@ exports.DatePickerMd = (0, ComponentDefs_1.createMetadata)({
 });
 exports.datePickerComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.DatePickerMd, ({ node, state, updateState, extractValue, layoutCss, lookupEventHandler, registerComponentApi, }) => {
     var _a;
-    return ((0, jsx_runtime_1.jsx)(DatePickerNative_1.DatePicker, { style: layoutCss, mode: extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.mode), value: state === null || state === void 0 ? void 0 : state.value, initialValue: extractValue(node.props.initialValue), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue.asOptionalString(node.props.placeholder), validationStatus: extractValue(node.props.validationStatus), updateState: updateState, onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, dateFormat: extractValue(node.props.dateFormat), showWeekNumber: extractValue.asOptionalBoolean(node.props.showWeekNumber), weekStartsOn: extractValue(node.props.weekStartsOn), fromDate: extractValue(node.props.fromDate), toDate: extractValue(node.props.toDate), disabledDates: extractValue(node.props.disabledDates), inline: extractValue.asOptionalBoolean(node.props.inline), startText: extractValue.asOptionalString(node.props.startText), startIcon: extractValue.asOptionalString(node.props.startIcon), endText: extractValue.asOptionalString(node.props.endText), endIcon: extractValue.asOptionalString(node.props.endIcon) }));
+    return ((0, jsx_runtime_1.jsx)(DatePickerNative_1.DatePicker, { id: node.uid, style: layoutCss, mode: extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.mode), value: state === null || state === void 0 ? void 0 : state.value, initialValue: extractValue(node.props.initialValue), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue.asOptionalString(node.props.placeholder), validationStatus: extractValue(node.props.validationStatus), updateState: updateState, onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, dateFormat: extractValue(node.props.dateFormat), showWeekNumber: extractValue.asOptionalBoolean(node.props.showWeekNumber), weekStartsOn: extractValue(node.props.weekStartsOn), fromDate: extractValue(node.props.fromDate), toDate: extractValue(node.props.toDate), disabledDates: extractValue(node.props.disabledDates), inline: extractValue.asOptionalBoolean(node.props.inline), startText: extractValue.asOptionalString(node.props.startText), startIcon: extractValue.asOptionalString(node.props.startIcon), endText: extractValue.asOptionalString(node.props.endText), endIcon: extractValue.asOptionalString(node.props.endIcon), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), label: extractValue(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak) }));
 });

package/dist/scripts/src/components/DatePicker/DatePickerNative.js

@@ -1,37 +1,4 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -42,8 +9,6 @@ const react_1 = require("react");
 const react_2 = require("react");
 const react_day_picker_1 = require("react-day-picker");
 const date_fns_1 = require("date-fns");
-const ReactDropdownMenu = __importStar(require("@radix-ui/react-dropdown-menu"));
-const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
 const classnames_1 = __importDefault(require("classnames"));
 const DatePicker_module_scss_1 = __importDefault(require("./DatePicker.module.scss"));
 const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
@@ -51,6 +16,7 @@ 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");
+const react_popover_1 = require("@radix-ui/react-popover");
 exports.DatePickerModeValues = ["single", "range"];
 var WeekDays;
 (function (WeekDays) {
@@ -82,12 +48,11 @@ exports.defaultProps = {
     weekStartsOn: WeekDays.Sunday,
     disabledDates: [],
 };
-exports.DatePicker = (0, react_2.forwardRef)(function DatePicker({ id, initialValue, value, mode = exports.defaultProps.mode, enabled = exports.defaultProps.enabled, placeholder, updateState = constants_1.noop, validationStatus = exports.defaultProps.validationStatus, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, dateFormat = exports.defaultProps.dateFormat, showWeekNumber = exports.defaultProps.showWeekNumber, weekStartsOn = exports.defaultProps.weekStartsOn, fromDate, toDate, disabledDates = exports.defaultProps.disabledDates, style, registerComponentApi, inline = exports.defaultProps.inline, startText, startIcon, endText, endIcon, label, labelPosition, labelWidth, labelBreak, inProgress, inProgressNotificationMessage, readOnly, required, }, forwardedRef) {
+exports.DatePicker = (0, react_2.forwardRef)(function DatePicker({ id, initialValue, value, mode = exports.defaultProps.mode, enabled = exports.defaultProps.enabled, placeholder, updateState = constants_1.noop, validationStatus = exports.defaultProps.validationStatus, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, dateFormat = exports.defaultProps.dateFormat, showWeekNumber = exports.defaultProps.showWeekNumber, weekStartsOn = exports.defaultProps.weekStartsOn, fromDate, toDate, disabledDates = exports.defaultProps.disabledDates, style, registerComponentApi, inline = exports.defaultProps.inline, startText, startIcon, endText, endIcon, label, labelPosition, labelWidth, labelBreak, readOnly = false, required, autoFocus = false, }, ref) {
     const _weekStartsOn = weekStartsOn >= 0 && weekStartsOn <= 6 ? weekStartsOn : WeekDays.Sunday;
     const [isButtonFocused, setIsButtonFocused] = (0, react_2.useState)(false);
     const [isMenuFocused, setIsMenuFocused] = (0, react_2.useState)(false);
-    const referenceElement = (0, react_2.useRef)(null);
-    const ref = forwardedRef ? (0, react_compose_refs_1.composeRefs)(referenceElement, forwardedRef) : referenceElement;
+    const [referenceElement, setReferenceElement] = (0, react_2.useState)(null);
     const generatedId = (0, react_1.useId)();
     const inputId = id || generatedId;
     const selected = (0, react_2.useMemo)(() => {
@@ -132,9 +97,8 @@ exports.DatePicker = (0, react_2.forwardRef)(function DatePicker({ id, initialVa
     };
     // Register component API for external interactions
     const focus = (0, react_2.useCallback)(() => {
-        var _a;
-        (_a = referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, [referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.current]);
+        referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.focus();
+    }, [referenceElement]);
     const setValue = (0, misc_1.useEvent)((newValue) => {
         const parsedDate = parseDate(newValue);
         handleSelect(parsedDate);
@@ -157,6 +121,9 @@ exports.DatePicker = (0, react_2.forwardRef)(function DatePicker({ id, initialVa
         updateState({ value: initialValue }, { initial: true });
     }, [initialValue, updateState]);
     const handleSelect = (0, react_2.useCallback)((dateOrRange) => {
+        if (readOnly) {
+            return;
+        }
         if (!dateOrRange) {
             updateState({ value: undefined });
             onDidChange("");
@@ -180,12 +147,12 @@ exports.DatePicker = (0, react_2.forwardRef)(function DatePicker({ id, initialVa
             setOpen(false);
         }
     }, [onDidChange, updateState, mode, dateFormat]);
-    return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { id: inputId, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, children: inline ? ((0, jsx_runtime_1.jsx)("div", { className: DatePicker_module_scss_1.default.inlinePickerMenu, children: (0, jsx_runtime_1.jsx)(react_day_picker_1.DayPicker, { required: undefined, captionLayout: "dropdown", fixedWeeks: true, startMonth: startDate, endMonth: endDate, disabled: disabled, weekStartsOn: _weekStartsOn, showWeekNumber: showWeekNumber, showOutsideDays: true, classNames: DatePicker_module_scss_1.default, mode: mode === "single" ? "single" : "range", selected: selected, onSelect: handleSelect, autoFocus: !inline, numberOfMonths: mode === "range" ? 2 : 1 }) })) : ((0, jsx_runtime_1.jsxs)(ReactDropdownMenu.Root, { open: open, onOpenChange: setOpen, modal: false, children: [(0, jsx_runtime_1.jsx)(ReactDropdownMenu.Trigger, { asChild: true, children: (0, jsx_runtime_1.jsxs)("button", { disabled: !enabled, id: id, style: style, className: (0, classnames_1.default)(DatePicker_module_scss_1.default.datePicker, {
-                            [DatePicker_module_scss_1.default.disabled]: !enabled,
-                            [DatePicker_module_scss_1.default.error]: validationStatus === "error",
-                            [DatePicker_module_scss_1.default.warning]: validationStatus === "warning",
-                            [DatePicker_module_scss_1.default.valid]: validationStatus === "valid",
-                        }), onFocus: handleOnButtonFocus, onBlur: handleOnButtonBlur, children: [(0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: startText, iconName: startIcon, className: DatePicker_module_scss_1.default.adornment }), (0, jsx_runtime_1.jsx)("div", { className: DatePicker_module_scss_1.default.datePickerValue, children: mode === "single" && selected ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, date_fns_1.format)(selected, dateFormat) })) : mode === "range" && typeof selected === "object" && selected.from ? (selected.to ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, date_fns_1.format)(selected.from, dateFormat), " - ", (0, date_fns_1.format)(selected.to, dateFormat)] })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, date_fns_1.format)(selected.from, dateFormat) }))) : placeholder ? ((0, jsx_runtime_1.jsx)("span", { className: DatePicker_module_scss_1.default.placeholder, children: placeholder })) : ((0, jsx_runtime_1.jsx)("span", { children: "\u00A0" })) }), (0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: endText, iconName: endIcon, className: DatePicker_module_scss_1.default.adornment })] }) }), (0, jsx_runtime_1.jsx)(ReactDropdownMenu.Portal, { container: root, children: (0, jsx_runtime_1.jsx)(ReactDropdownMenu.Content, { align: "start", sideOffset: 5, className: DatePicker_module_scss_1.default.datePickerMenu, onFocus: handleOnMenuFocus, onBlur: handleOnMenuBlur, onInteractOutside: handleOnMenuBlur, children: (0, jsx_runtime_1.jsx)(react_day_picker_1.DayPicker, { required: undefined, animate: true, fixedWeeks: true, classNames: DatePicker_module_scss_1.default, captionLayout: "dropdown", startMonth: startDate, endMonth: endDate, disabled: disabled, weekStartsOn: _weekStartsOn, showWeekNumber: showWeekNumber, showOutsideDays: true, mode: mode === "single" ? "single" : "range", selected: selected, onSelect: handleSelect, autoFocus: !inline, numberOfMonths: mode === "range" ? 2 : 1 }) }) })] })) }));
+    return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { id: inputId, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, ref: ref, children: inline ? ((0, jsx_runtime_1.jsx)("div", { className: DatePicker_module_scss_1.default.inlinePickerMenu, ref: (ref) => setReferenceElement(ref), children: (0, jsx_runtime_1.jsx)(react_day_picker_1.DayPicker, { id: inputId, required: undefined, captionLayout: "dropdown", fixedWeeks: true, startMonth: startDate, endMonth: endDate, disabled: disabled, weekStartsOn: _weekStartsOn, showWeekNumber: showWeekNumber, showOutsideDays: true, classNames: DatePicker_module_scss_1.default, mode: mode === "single" ? "single" : "range", selected: selected, onSelect: handleSelect, autoFocus: autoFocus, numberOfMonths: mode === "range" ? 2 : 1 }) })) : ((0, jsx_runtime_1.jsxs)(react_popover_1.Popover, { open: open, onOpenChange: setOpen, modal: false, children: [(0, jsx_runtime_1.jsxs)(react_popover_1.PopoverTrigger, { ref: setReferenceElement, id: inputId, "aria-haspopup": true, disabled: !enabled, style: style, "aria-expanded": open, className: (0, classnames_1.default)(DatePicker_module_scss_1.default.datePicker, {
+                        [DatePicker_module_scss_1.default.disabled]: !enabled,
+                        [DatePicker_module_scss_1.default.error]: validationStatus === "error",
+                        [DatePicker_module_scss_1.default.warning]: validationStatus === "warning",
+                        [DatePicker_module_scss_1.default.valid]: validationStatus === "valid",
+                    }), autoFocus: autoFocus, onFocus: onFocus, onBlur: onBlur, children: [(0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: startText, iconName: startIcon, className: DatePicker_module_scss_1.default.adornment }), (0, jsx_runtime_1.jsx)("div", { className: DatePicker_module_scss_1.default.datePickerValue, children: mode === "single" && selected ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, date_fns_1.format)(selected, dateFormat) })) : mode === "range" && typeof selected === "object" && selected.from ? (selected.to ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, date_fns_1.format)(selected.from, dateFormat), " - ", (0, date_fns_1.format)(selected.to, dateFormat)] })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, date_fns_1.format)(selected.from, dateFormat) }))) : placeholder ? ((0, jsx_runtime_1.jsx)("span", { className: DatePicker_module_scss_1.default.placeholder, placeholder: placeholder, children: placeholder })) : ((0, jsx_runtime_1.jsx)("span", { children: "\u00A0" })) }), (0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: endText, iconName: endIcon, className: DatePicker_module_scss_1.default.adornment })] }), (0, jsx_runtime_1.jsx)(react_popover_1.PopoverPortal, { container: root, children: (0, jsx_runtime_1.jsx)(react_popover_1.PopoverContent, { role: "menu", align: "start", sideOffset: 5, className: DatePicker_module_scss_1.default.datePickerMenu, onFocus: handleOnMenuFocus, onBlur: handleOnMenuBlur, onInteractOutside: handleOnMenuBlur, children: (0, jsx_runtime_1.jsx)(react_day_picker_1.DayPicker, { required: undefined, animate: true, fixedWeeks: true, autoFocus: autoFocus, classNames: DatePicker_module_scss_1.default, captionLayout: "dropdown", startMonth: startDate, endMonth: endDate, disabled: disabled, weekStartsOn: _weekStartsOn, showWeekNumber: showWeekNumber, showOutsideDays: true, mode: mode === "single" ? "single" : "range", selected: selected, onSelect: handleSelect, numberOfMonths: mode === "range" ? 2 : 1 }) }) })] })) }));
 });
 const isoRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z$/;
 const parseISODate = (dateString) => {

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

@@ -47,7 +47,7 @@ exports.htmlATagRenderer = (0, renderers_1.createComponentRenderer)("a", exports
     const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
     const { disabled } = p.asOptionalBoolean("disabled");
     const _a = p.asRest(), { href } = _a, rest = __rest(_a, ["href"]);
-    return ((0, jsx_runtime_1.jsx)(LinkNative_1.LocalLink, Object.assign({ to: href, disabled: disabled !== null && disabled !== void 0 ? disabled : false, style: layoutCss }, rest, { children: renderChild(node.children) })));
+    return ((0, jsx_runtime_1.jsx)(LinkNative_1.LinkNative, Object.assign({ to: href, disabled: disabled !== null && disabled !== void 0 ? disabled : false, style: layoutCss }, rest, { children: renderChild(node.children) })));
 });
 exports.HtmlAbbrMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",

package/dist/scripts/src/components/Input/InputAdornment.js

@@ -10,5 +10,5 @@ const InputAdornment_module_scss_1 = __importDefault(require("./InputAdornment.m
 const IconNative_1 = require("../Icon/IconNative");
 const TextNative_1 = require("../Text/TextNative");
 function Adornment({ iconName, text, className }) {
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: iconName || text ? ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(InputAdornment_module_scss_1.default.wrapper, className), children: [(0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: iconName, style: { color: "inherit" } }), text && ((0, jsx_runtime_1.jsx)("div", { style: { display: "flex", userSelect: "none" }, children: (0, jsx_runtime_1.jsx)(TextNative_1.Text, { style: { fontSize: "inherit" }, children: text }) }))] })) : null }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: iconName || text ? ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(InputAdornment_module_scss_1.default.wrapper, className), role: "presentation", children: [(0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: iconName, style: { color: "inherit" } }), text && ((0, jsx_runtime_1.jsx)("div", { style: { display: "flex", userSelect: "none" }, children: (0, jsx_runtime_1.jsx)(TextNative_1.Text, { style: { fontSize: "inherit" }, children: text }) }))] })) : null }));
 }

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

@@ -65,7 +65,7 @@ exports.LinkMd = (0, ComponentDefs_1.createMetadata)({
  */
 exports.localLinkComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.LinkMd, ({ node, extractValue, renderChild, layoutCss }) => {
     var _a, _b;
-    return ((0, jsx_runtime_1.jsx)(LinkNative_1.LocalLink, { to: extractValue(node.props.to), icon: extractValue(node.props.icon), active: extractValue.asOptionalBoolean(node.props.active, false), target: extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.target), style: layoutCss, disabled: !extractValue.asOptionalBoolean((_b = node.props.enabled) !== null && _b !== void 0 ? _b : true), children: node.props.label
+    return ((0, jsx_runtime_1.jsx)(LinkNative_1.LinkNative, { to: extractValue(node.props.to), icon: extractValue(node.props.icon), active: extractValue.asOptionalBoolean(node.props.active, false), target: extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.target), style: layoutCss, disabled: !extractValue.asOptionalBoolean((_b = node.props.enabled) !== null && _b !== void 0 ? _b : true), children: node.props.label
             ? extractValue.asDisplayText(node.props.label)
             : renderChild(node.children) }));
 });

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

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LocalLink = void 0;
+exports.LinkNative = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@remix-run/react");
@@ -22,7 +22,7 @@ const classnames_1 = __importDefault(require("classnames"));
 const Link_module_scss_1 = __importDefault(require("./Link.module.scss"));
 const component_utils_1 = require("../component-utils");
 const IconNative_1 = require("../Icon/IconNative");
-exports.LocalLink = (0, react_1.forwardRef)(function LocalLink(props, forwardedRef) {
+exports.LinkNative = (0, react_1.forwardRef)(function LinkNative(props, forwardedRef) {
     const _a = specifyTypes(props), { to, children, icon, active, onClick, target, disabled, style } = _a, anchorProps = __rest(_a, ["to", "children", "icon", "active", "onClick", "target", "disabled", "style"]);
     const iconLink = !!icon && !children;
     const smartTo = (0, react_1.useMemo)(() => {

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

@@ -82,7 +82,7 @@ exports.markdownComponentRenderer = (0, renderers_1.createComponentRenderer)(COM
         renderedChildren = extractValue.asString(node.props.content);
     }
     // 2. "data" property fallback
-    if (!renderedChildren) {
+    if (!renderedChildren && typeof node.props.data === "string") {
         renderedChildren = extractValue.asString(node.props.data);
     }
     // 3. Children fallback

package/dist/scripts/src/components/Markdown/MarkdownNative.js

@@ -138,7 +138,17 @@ exports.Markdown = (0, react_1.memo)(function Markdown({ removeIndents = true, c
                 },
                 a(_a) {
                     var { children, href } = _a, props = __rest(_a, ["children", "href"]);
-                    return ((0, jsx_runtime_1.jsx)(LinkNative_1.LocalLink, Object.assign({ to: href }, props, { children: children })));
+                    let target = undefined;
+                    let label = children;
+                    // --- Extract the optional target
+                    if (typeof children === "string") {
+                        const match = children.match(/^(.*)\|\s*target\s*=\s*([_a-zA-Z0-9-]+)\s*$/);
+                        if (match) {
+                            label = match[1].trim();
+                            target = match[2];
+                        }
+                    }
+                    return ((0, jsx_runtime_1.jsx)(LinkNative_1.LinkNative, Object.assign({ to: href, target: target }, props, { children: label })));
                 },
                 // TODO: somehow get the label from the containing li element
                 input({ disabled, checked }) {

package/dist/scripts/src/components/Select/SelectNative.js

@@ -180,7 +180,7 @@ exports.Select = (0, react_1.forwardRef)(function Select({ id, initialValue, val
     return ((0, jsx_runtime_1.jsx)(SelectContext_1.SelectContext.Provider, { value: selectContextValue, children: (0, jsx_runtime_1.jsx)(OptionContext_1.OptionContext.Provider, { value: optionContextValue, children: (0, jsx_runtime_1.jsxs)(OptionTypeProvider_1.default, { Component: HiddenOption, children: [(0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { ref: ref, id: inputId, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, children: searchable || multiSelect ? ((0, jsx_runtime_1.jsxs)(react_popover_1.Popover, { open: open, onOpenChange: setOpen, modal: false, children: [(0, jsx_runtime_1.jsxs)(react_popover_1.PopoverTrigger, { id: inputId, "aria-haspopup": "listbox", style: style, ref: setReferenceElement, onFocus: onFocus, onBlur: onBlur, disabled: !enabled, "aria-expanded": open, onClick: () => setOpen((prev) => !prev), className: (0, classnames_1.default)(Select_module_scss_1.default.selectTrigger, Select_module_scss_1.default[validationStatus], {
                                         [Select_module_scss_1.default.disabled]: !enabled,
                                         [Select_module_scss_1.default.multi]: multiSelect,
-                                    }), placeholder: placeholder, autoFocus: autoFocus, children: [multiSelect ? (Array.isArray(value) && value.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.badgeListContainer, children: (0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.badgeList, children: value.map((v) => {
+                                    }), autoFocus: autoFocus, children: [multiSelect ? (Array.isArray(value) && value.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.badgeListContainer, children: (0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.badgeList, children: value.map((v) => {
                                                     var _a;
                                                     return valueRenderer ? (valueRenderer(Array.from(options).find((o) => o.value === `${v}`), () => {
                                                         toggleOption(v);
@@ -188,7 +188,7 @@ exports.Select = (0, react_1.forwardRef)(function Select({ id, initialValue, val
                                                                     event.stopPropagation();
                                                                     toggleOption(v);
                                                                 } })] }, v));
-                                                }) }) })) : ((0, jsx_runtime_1.jsx)("span", { "aria-placeholder": placeholder, className: Select_module_scss_1.default.placeholder, children: placeholder }))) : value !== undefined && value !== null ? ((0, jsx_runtime_1.jsx)("div", { children: (_a = Array.from(options).find((o) => o.value === value)) === null || _a === void 0 ? void 0 : _a.label })) : ((0, jsx_runtime_1.jsx)("span", { "aria-placeholder": placeholder, className: Select_module_scss_1.default.placeholder, children: placeholder || "" })), (0, jsx_runtime_1.jsxs)("div", { className: Select_module_scss_1.default.actions, children: [multiSelect && Array.isArray(value) && value.length > 0 && ((0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "close", onClick: (event) => {
+                                                }) }) })) : ((0, jsx_runtime_1.jsx)("span", { placeholder: placeholder, className: Select_module_scss_1.default.placeholder, children: placeholder }))) : value !== undefined && value !== null ? ((0, jsx_runtime_1.jsx)("div", { children: (_a = Array.from(options).find((o) => o.value === value)) === null || _a === void 0 ? void 0 : _a.label })) : ((0, jsx_runtime_1.jsx)("span", { "aria-placeholder": placeholder, className: Select_module_scss_1.default.placeholder, children: placeholder || "" })), (0, jsx_runtime_1.jsxs)("div", { className: Select_module_scss_1.default.actions, children: [multiSelect && Array.isArray(value) && value.length > 0 && ((0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "close", onClick: (event) => {
                                                         event.stopPropagation();
                                                         clearValue();
                                                     } })), (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" })] })] }), open && ((0, jsx_runtime_1.jsx)(react_select_1.Portal, { container: root, children: (0, jsx_runtime_1.jsx)(react_focus_scope_1.FocusScope, { asChild: true, loop: true, trapped: true, children: (0, jsx_runtime_1.jsx)(react_popover_1.PopoverContent, { style: { width, height: dropdownHeight }, className: Select_module_scss_1.default.selectContent, children: (0, jsx_runtime_1.jsxs)(cmdk_1.Command, { className: Select_module_scss_1.default.command, shouldFilter: searchable, filter: (value, search, keywords) => {

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

@@ -11,6 +11,7 @@ const renderers_1 = require("../../components-core/renderers");
 const themeVars_1 = require("../../components-core/theming/themeVars");
 const TableOfContentsNative_1 = require("./TableOfContentsNative");
 const COMP = "TableOfContents";
+const COMP_CHILD = "TableOfContentsItem";
 exports.TableOfContentsMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: `The \`${COMP}\` component collects headings and bookmarks within the current page ` +
@@ -33,43 +34,16 @@ exports.TableOfContentsMd = (0, ComponentDefs_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(TableOfContents_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        [`width-${COMP}`]: "auto",
-        [`height-${COMP}`]: "auto",
-        [`fontSize-${COMP}Item`]: "$fontSize-smaller",
-        [`fontWeight-${COMP}Item`]: "$fontWeight-normal",
-        [`fontFamily-${COMP}Item`]: "$fontFamily",
-        [`borderRadius-${COMP}Item`]: "0",
-        [`border-width-${COMP}Item`]: "$space-0_5",
-        [`border-style-${COMP}Item`]: "solid",
-        [`borderRadius-${COMP}Item--active`]: "0",
-        [`border-width-${COMP}Item--active`]: "$space-0_5",
-        [`border-style-${COMP}Item--active`]: "solid",
-        [`fontWeight-${COMP}Item--active`]: "$fontWeight-bold",
-        [`backgroundColor-${COMP}`]: "transparent",
-        [`paddingHorizontal-${COMP}`]: "$space-8",
-        [`paddingVertical-${COMP}`]: "$space-4",
-        [`paddingHorizontal-${COMP}Item`]: "$space-2",
-        [`paddingVertical-${COMP}Item`]: "$space-2",
-        [`paddingHorizontal-${COMP}Item-level-1`]: "unset",
-        [`paddingHorizontal-${COMP}Item-level-2`]: "unset",
-        [`paddingHorizontal-${COMP}Item-level-3`]: "unset",
-        [`paddingHorizontal-${COMP}Item-level-4`]: "unset",
-        [`paddingHorizontal-${COMP}Item-level-5`]: "unset",
-        [`paddingHorizontal-${COMP}Item-level-6`]: "unset",
-        [`marginTop-${COMP}`]: "0",
-        [`marginBottom-${COMP}`]: "0",
-        [`borderRadius-${COMP}`]: "0",
-        [`border-width-${COMP}`]: "0",
-        [`borderColor-${COMP}`]: "transparent",
-        [`border-style-${COMP}`]: "solid",
-        [`paddingLeft-${COMP}Item`]: "$space-1",
-        [`textTransform-${COMP}Item`]: "none",
-        [`verticalAlign-${COMP}Item`]: "baseline",
-        [`letterSpacing-${COMP}Item`]: "0",
-        [`color-${COMP}Item`]: "$textColor-primary",
-        [`borderColor-${COMP}Item`]: "$borderColor",
-        [`borderColor-${COMP}Item--active`]: "$color-primary-500",
-        [`color-${COMP}Item--active`]: "$color-primary-500",
+        [`padding-${COMP}`]: "$space-2",
+        [`textColor-${COMP_CHILD}`]: "$color-secondary-500",
+        [`textColor-${COMP_CHILD}--hover`]: "$textColor-primary",
+        [`fontSize-${COMP_CHILD}`]: "$fontSize-small",
+        [`wordWrap-${COMP_CHILD}`]: "break-word",
+        [`paddingVertical-${COMP_CHILD}`]: "$space-1",
+        [`paddingHorizontal-${COMP_CHILD}`]: "$space-1",
+        [`fontWeight-${COMP_CHILD}`]: "$fontWeight-bold",
+        [`fontStyle-${COMP_CHILD}-level-6`]: "italic",
+        [`color-${COMP_CHILD}--active`]: "$color-primary-500",
     },
 });
 exports.tableOfContentsRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.TableOfContentsMd, ({ layoutCss, node, extractValue }) => {

package/dist/scripts/src/components/TableOfContents/TableOfContentsNative.js

@@ -20,7 +20,7 @@ exports.TableOfContents = (0, react_1.forwardRef)(function TableOfContents({ sty
     (0, hooks_1.useIsomorphicLayoutEffect)(() => {
         return subscribeToActiveAnchorChange((id) => {
             const foundHeading = headings.find((heading) => heading.id === id);
-            if (foundHeading.level <= maxHeadingLevel) {
+            if ((foundHeading === null || foundHeading === void 0 ? void 0 : foundHeading.level) <= maxHeadingLevel) {
                 setActiveId(id);
             }
         });

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

@@ -63,6 +63,35 @@ function Theme({ id, isRoot = false, renderChild, node, tone, toastDuration = 50
             rangeClassName = `${fromClass} ~ *:has(~ .${toClass})`;
             css += `color: var(${(0, themeVars_1.getVarKey)("textColor-primary")});`;
         }
+        else {
+            css += `--screenSize: 0;`;
+            const maxWidthPhone = getThemeVar("maxWidth-phone");
+            const maxWidthLandscapePhone = getThemeVar("maxWidth-landscape-phone");
+            const maxWidthTablet = getThemeVar("maxWidth-tablet");
+            const maxWidthDesktop = getThemeVar("maxWidth-desktop");
+            const maxWidthLargeDesktop = getThemeVar("maxWidth-large-desktop");
+            const mediaClasses = ` @media (min-width: calc(${maxWidthPhone} + 1px)) {
+        --screenSize: 1;
+      }
+
+      @media (min-width: calc(${maxWidthLandscapePhone} + 1px)) {
+          --screenSize: 2;
+      }
+  
+      @media (min-width: calc(${maxWidthTablet} + 1px)) {
+          --screenSize: 3;
+      }
+  
+      @media (min-width: calc(${maxWidthDesktop} + 1px)) {
+          --screenSize: 4;
+      }
+  
+      @media (min-width: calc(${maxWidthLargeDesktop} + 1px)) {
+          --screenSize: 5;
+      }
+    `;
+            css += mediaClasses;
+        }
         return {
             className,
             rangeClassName,
@@ -70,7 +99,7 @@ function Theme({ id, isRoot = false, renderChild, node, tone, toastDuration = 50
             toClass,
             css,
         };
-    }, [isRoot, themeCssVars, themeTone]);
+    }, [isRoot, themeCssVars, themeTone, getThemeVar]);
     // useInsertionEffect(() => {
     //   //PERF OPT IDEA: don't inject the css content that we already have
     //   // (e.g. in Items component we inject and generate classes for all items if we use a theme for an item, but they have the same content.

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

@@ -129,7 +129,7 @@ function ApiBoundComponent({ uid, node, apiBoundProps, apiBoundEvents, renderChi
             }
         });
         apiBoundProps.forEach((key) => {
-            var _a;
+            var _a, _b, _c;
             const isDatasourceRef = ((_a = node.props[key]) === null || _a === void 0 ? void 0 : _a.type) === "DataSourceRef";
             const loaderUid = node.props[key].uid || generateloaderUid(key);
             const operation = node.props[key].props || node.props[key];
@@ -160,8 +160,10 @@ function ApiBoundComponent({ uid, node, apiBoundProps, apiBoundEvents, renderChi
                     props._data_url = operation.url;
                 }
             }
-            props[key] = `{ ${loaderUid}.value }`;
-            props.loading = `{${loaderUid}.inProgress === undefined ? true : ${loaderUid}.inProgress}`;
+            //illesg really experimental brutal hack
+            const prefetchPathWithoutBindingExpression = ((_b = operation.url) === null || _b === void 0 ? void 0 : _b.trim().startsWith("{")) ? (_c = operation.url) === null || _c === void 0 ? void 0 : _c.trim().substring(1, operation.url.length - 1) : `'${operation.url}'`;
+            props[key] = `{ ${loaderUid}.value || ( appGlobals.prefetchedContent[${prefetchPathWithoutBindingExpression}] || appGlobals.prefetchedContent['/' + ${prefetchPathWithoutBindingExpression}] ) }`;
+            props.loading = `{ ${loaderUid}.inProgress === undefined ? true : ${loaderUid}.inProgress}`;
             props.pageInfo = `{${loaderUid}.pageInfo}`;
             events.requestFetchPrevPage = `${loaderUid}.fetchPrevPage()`;
             events.requestFetchNextPage = `${loaderUid}.fetchNextPage()`;