xmlui 0.9.59 → 0.9.60

package/dist/scripts/src/components/Pages/PagesNative.js

@@ -23,17 +23,12 @@ const react_2 = require("@remix-run/react");
 const classnames_1 = __importDefault(require("classnames"));
 const constants_1 = require("../../components-core/constants");
 const Pages_module_scss_1 = __importDefault(require("./Pages.module.scss"));
-const AppLayoutContext_1 = require("../App/AppLayoutContext");
 // Default props for Pages component
 exports.defaultProps = {
-    fallbackPath: "/",
+    defaultRoute: "/"
 };
 function RouteWrapper({ childRoute = constants_1.EMPTY_ARRAY, renderChild, layoutContext, style, uid, }) {
-    var _a;
     const params = (0, react_2.useParams)();
-    const location = (0, react_2.useLocation)();
-    const appLayoutContext = (0, AppLayoutContext_1.useAppLayoutContext)();
-    const linkInfo = ((_a = appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.linkMap) === null || _a === void 0 ? void 0 : _a.get(location.pathname)) || {};
     //we need to wrap the child route in a container to make sure the route params are available.
     // we do this wrapping by providing an empty object to vars.
     // this way it becomes an 'implicit' container (vars/state inside this container is propagated to the parent)
@@ -59,7 +54,7 @@ function RouteWrapper({ childRoute = constants_1.EMPTY_ARRAY, renderChild, layou
     }, [style]);
     return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(Pages_module_scss_1.default.wrapper, "xmlui-page-root"), style: wrapperStyle, children: renderChild(wrappedWithContainer, layoutContext) }, JSON.stringify(params)));
 }
-function Pages({ node, renderChild, extractValue, fallbackPath }) {
+function Pages({ node, renderChild, extractValue, defaultRoute }) {
     var _a;
     const routes = [];
     const restChildren = [];
@@ -73,5 +68,5 @@ function Pages({ node, renderChild, extractValue, fallbackPath }) {
     });
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Routes, { children: [routes.map((child, i) => {
                         return ((0, jsx_runtime_1.jsx)(react_2.Route, { path: extractValue(child.props.url), element: renderChild(child) }, i));
-                    }), !!fallbackPath && (0, jsx_runtime_1.jsx)(react_2.Route, { path: "*", element: (0, jsx_runtime_1.jsx)(react_2.Navigate, { to: fallbackPath, replace: true }) })] }), renderChild(restChildren)] }));
+                    }), !!defaultRoute && (0, jsx_runtime_1.jsx)(react_2.Route, { path: "*", element: (0, jsx_runtime_1.jsx)(react_2.Navigate, { to: defaultRoute, replace: true }) })] }), renderChild(restChildren)] }));
 }

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

@@ -41,21 +41,20 @@ exports.RadioGroupMd = (0, ComponentDefs_1.createMetadata)({
     defaultThemeVars: {
         [`gap-${RGOption}`]: "$space-1_5",
         [`borderWidth-${RGOption}`]: "1px",
-        [`borderWidth-${RGOption}-validation`]: `2px`,
+        [`backgroundColor-checked-${RGOption}-indicator`]: `$backgroundColor-primary`,
+        [`backgroundColor-checked-${RGOption}--disabled]`]: `$borderColor-${RGOption}--disabled`,
+        [`backgroundColor-checked-${RGOption}-error`]: `$borderColor-${RGOption}-error`,
+        [`backgroundColor-checked-${RGOption}-warning`]: `$borderColor-${RGOption}-warning`,
+        [`backgroundColor-checked-${RGOption}-success`]: `$borderColor-${RGOption}-success`,
+        [`fontSize-${RGOption}`]: "$fontSize-small",
+        [`fontWeight-${RGOption}`]: "$fontWeight-bold",
+        [`textColor-${RGOption}-error`]: `$borderColor-${RGOption}-error`,
+        [`textColor-${RGOption}-warning`]: `$borderColor-${RGOption}-warning`,
+        [`textColor-${RGOption}-success`]: `$borderColor-${RGOption}-success`,
+        [`backgroundColor-checked-${RGOption}-default`]: "$color-primary-500",
         [`borderColor-${RGOption}-default`]: "$color-surface-500",
-        [`borderColor-checked-${RGOption}`]: "$color-primary-500",
         [`borderColor-${RGOption}-default--hover`]: "$color-surface-700",
         [`borderColor-${RGOption}-default--active`]: "$color-primary-500",
-        [`backgroundColor-${RGOption}--disabled`]: "$backgroundColor--disabled",
-        [`backgroundColor-checked-${RGOption}`]: "$color-primary-500",
-        [`backgroundColor-${RGOption}-checked--disabled`]: `$textColor--disabled`,
-        [`backgroundColor-checked-indicator-${RGOption}`]: `transparent`,
-        [`backgroundColor-${RGOption}-checked-indicator--disabled`]: `transparent`,
-        [`backgroundColor-checked-${RGOption}-error`]: `$borderColor-error`,
-        [`backgroundColor-checked-${RGOption}-warning`]: `$borderColor-warning`,
-        [`backgroundColor-checked-${RGOption}-success`]: `$borderColor-success`,
-        [`fontSize-${RGOption}`]: "$fontSize-small",
-        [`fontWeight-${RGOption}`]: "$fontWeight-bold",
     },
 });
 exports.radioGroupRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.RadioGroupMd, ({ node, extractValue, layoutCss, state, updateState, lookupEventHandler, renderChild, registerComponentApi, }) => {

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

@@ -37,6 +37,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RadioGroupOption = exports.RadioGroup = exports.defaultProps = void 0;
+exports.useRadioGroupValue = useRadioGroupValue;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const InnerRadioGroup = __importStar(require("@radix-ui/react-radio-group"));
@@ -53,9 +54,8 @@ exports.defaultProps = {
     validationStatus: "none",
     required: false,
 };
-const RadioGroupStatusContext = (0, react_1.createContext)({
+const RadioGroupValidationStatusContext = (0, react_1.createContext)({
     status: "none",
-    enabled: exports.defaultProps.enabled,
 });
 exports.RadioGroup = (0, react_1.forwardRef)(function RadioGroup({ 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, }, forwardedRef) {
     const [focused, setFocused] = react_1.default.useState(false);
@@ -90,25 +90,40 @@ exports.RadioGroup = (0, react_1.forwardRef)(function RadioGroup({ id, value = e
         });
     }, [/* focus, */ registerComponentApi, setValue]);
     const contextValue = (0, react_1.useMemo)(() => {
-        return { value, status: validationStatus, enabled };
-    }, [value, validationStatus, enabled]);
-    return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { ref: forwardedRef, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, children: (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)(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 { value, status: validationStatus };
+    }, [value, validationStatus]);
+    return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { ref: forwardedRef, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, children: (0, jsx_runtime_1.jsx)(OptionTypeProvider_1.default, { Component: exports.RadioGroupOption, children: (0, jsx_runtime_1.jsx)(RadioGroupValidationStatusContext.Provider, { value: contextValue, 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, {
                         [RadioGroup_module_scss_1.default.focused]: focused,
                         [RadioGroup_module_scss_1.default.disabled]: !enabled,
                     }), children: children }) }) }) }));
 });
+function useRadioGroupValue() {
+    const context = (0, react_1.useContext)(RadioGroupValidationStatusContext);
+    if (!context) {
+        throw new Error("useRadioGroupValue must be used within a RadioGroup");
+    }
+    const { value } = context;
+    const isChecked = (0, react_1.useCallback)((optionValue) => value === optionValue, [value]);
+    return {
+        value,
+        isChecked,
+    };
+}
 const RadioGroupOption = ({ value, label, enabled = true, optionRenderer, style, }) => {
     const id = (0, react_1.useId)();
-    const radioGroupContext = (0, react_1.useContext)(RadioGroupStatusContext);
+    const validationContext = (0, react_1.useContext)(RadioGroupValidationStatusContext);
+    const { isChecked } = useRadioGroupValue();
     const statusStyles = (0, react_1.useMemo)(() => ({
-        [RadioGroup_module_scss_1.default.disabled]: radioGroupContext.enabled === false ? true : !enabled,
-        [RadioGroup_module_scss_1.default.error]: value === radioGroupContext.value && radioGroupContext.status === "error",
-        [RadioGroup_module_scss_1.default.warning]: value === radioGroupContext.value && radioGroupContext.status === "warning",
-        [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)(InnerRadioGroup.Item, { className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.radioOption, statusStyles), value: value, disabled: !enabled, id: id, children: (0, jsx_runtime_1.jsx)(InnerRadioGroup.Indicator, { className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.indicator, 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]);
+        [RadioGroup_module_scss_1.default.disabled]: !enabled,
+        [RadioGroup_module_scss_1.default.error]: value === validationContext.value && validationContext.status === "error",
+        [RadioGroup_module_scss_1.default.warning]: value === validationContext.value && validationContext.status === "warning",
+        [RadioGroup_module_scss_1.default.valid]: value === validationContext.value && validationContext.status === "valid",
+    }), [enabled, validationContext.status, validationContext.value, value]);
+    const item = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(InnerRadioGroup.Item, { className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.radioOption, statusStyles, {
+                    [RadioGroup_module_scss_1.default.checked]: isChecked(value),
+                }), value: value, disabled: !enabled, id: id, children: (0, jsx_runtime_1.jsx)(InnerRadioGroup.Indicator, { className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.indicator, 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]);
     return ((0, jsx_runtime_1.jsx)("div", { className: RadioGroup_module_scss_1.default.radioOptionContainer, 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({
-                    $checked: value === radioGroupContext.value,
+                    $checked: value === validationContext.value,
                 })] })) : (item) }, id));
 };
 exports.RadioGroupOption = RadioGroupOption;

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

@@ -75,6 +75,7 @@ exports.SelectMd = (0, ComponentDefs_1.createMetadata)({
         [`borderRadius-menu-${COMP}`]: "$borderRadius",
         [`borderWidth-menu-${COMP}`]: "1px",
         [`borderColor-menu-${COMP}`]: "$borderColor",
+        [`minHeight-Input`]: "39px",
         [`backgroundColor-${COMP}-badge`]: "$color-primary-500",
         [`fontSize-${COMP}-badge`]: "$fontSize-small",
         [`paddingHorizontal-${COMP}-badge`]: "$space-1",
@@ -90,8 +91,6 @@ exports.SelectMd = (0, ComponentDefs_1.createMetadata)({
         [`backgroundColor-item-${COMP}`]: "$backgroundColor-dropdown-item",
         [`backgroundColor-item-${COMP}--hover`]: "$backgroundColor-dropdown-item--hover",
         [`backgroundColor-item-${COMP}--active`]: "$backgroundColor-dropdown-item--active",
-        // Default borderColor-Input--disabled is too light so the disabled component is barely visible
-        [`borderColor-${COMP}--disabled`]: "initial",
     },
 });
 exports.selectComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.SelectMd, ({ node, state, updateState, extractValue, renderChild, lookupEventHandler, layoutCss, registerComponentApi, }) => {

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

@@ -212,7 +212,7 @@ exports.Select = (0, react_1.forwardRef)(function Select({ id, initialValue, val
                                                 }, children: [searchable ? ((0, jsx_runtime_1.jsxs)("div", { className: Select_module_scss_1.default.commandInputContainer, children: [(0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "search" }), (0, jsx_runtime_1.jsx)(cmdk_1.CommandInput, { className: (0, classnames_1.default)(Select_module_scss_1.default.commandInput), placeholder: "Search..." })] })) : (
                                                     // https://github.com/pacocoursey/cmdk/issues/322#issuecomment-2444703817
                                                     (0, jsx_runtime_1.jsx)("button", { autoFocus: true, "aria-hidden": "true", className: Select_module_scss_1.default.srOnly })), (0, jsx_runtime_1.jsxs)(cmdk_1.CommandList, { className: Select_module_scss_1.default.commandList, children: [inProgress && ((0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.loading, children: inProgressNotificationMessage })), Array.from(options).map(({ value, label, enabled, keywords }) => ((0, jsx_runtime_1.jsx)(exports.ComboboxOption, { readOnly: readOnly, value: value, label: label, enabled: enabled, keywords: keywords }, value))), !inProgress && (0, jsx_runtime_1.jsx)(cmdk_1.CommandEmpty, { children: emptyListNode })] })] }) }) }) }))] })) : ((0, jsx_runtime_1.jsx)(SimpleSelect, { readOnly: !!readOnly, ref: ref, value: value, options: options, onValueChange: toggleOption, id: inputId, style: style, onFocus: onFocus, onBlur: onBlur, enabled: enabled, validationStatus: validationStatus, triggerRef: setReferenceElement, autoFocus: autoFocus, placeholder: placeholder, height: dropdownHeight, children: options.size > 0
-                                ? Array.from(options).map((option, idx) => ((0, jsx_runtime_1.jsx)(SelectOption, { value: option.value, label: option.label, enabled: option.enabled }, `${option.value}-${idx}`)))
+                                ? Array.from(options).map((option) => ((0, jsx_runtime_1.jsx)(SelectOption, { value: option.value, label: option.label, enabled: option.enabled }, option.value)))
                                 : emptyListNode })) }), children] }) }) }));
 });
 exports.ComboboxOption = (0, react_1.forwardRef)(function Combobox(option, forwardedRef) {

package/dist/scripts/src/components/StickyBox/StickyBoxNative.js

@@ -11,8 +11,6 @@ const classnames_1 = __importDefault(require("classnames"));
 const react_sticky_el_1 = require("react-sticky-el");
 const StickyBox_module_scss_1 = __importDefault(require("./StickyBox.module.scss"));
 const hooks_1 = require("../../components-core/utils/hooks");
-// --- NOTE: React.StrictMode produces error logs using this component. Deployed apps are okay.
-// See here: https://github.com/gm0t/react-sticky-el/issues/82 
 // =====================================================================================================================
 // React StickyBox component implementation
 exports.defaultProps = {

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

@@ -47,18 +47,14 @@ exports.SwitchMd = (0, ComponentDefs_1.createMetadata)({
         [`backgroundColor-checked-${COMP}-warning`]: `$borderColor-${COMP}-warning`,
         [`borderColor-checked-${COMP}-success`]: `$borderColor-${COMP}-success`,
         [`backgroundColor-checked-${COMP}-success`]: `$borderColor-${COMP}-success`,
-        [`backgroundColor-${COMP}`]: "$color-surface-0",
+        [`backgroundColor-${COMP}`]: "$backgroundColor-primary",
         [`borderColor-${COMP}`]: "$color-surface-200",
         [`borderWidth-${COMP}`]: "1px",
-        [`backgroundColor-indicator-${COMP}`]: "$color-surface-400",
-        [`backgroundColor-${COMP}-indicator--disabled`]: "$backgroundColor-primary",
+        [`backgroundColor-indicator-${COMP}`]: "$color-surface-200",
         [`backgroundColor-indicator-checked-${COMP}`]: "$backgroundColor-primary",
         [`borderColor-checked-${COMP}`]: "$color-primary-500",
         [`backgroundColor-checked-${COMP}`]: "$color-primary-500",
         [`backgroundColor-${COMP}--disabled`]: "$color-surface-200",
-        dark: {
-            [`backgroundColor-indicator-${COMP}`]: "$color-surface-500",
-        }
     },
 });
 exports.switchComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.SwitchMd, ({ node, extractValue, layoutCss, updateState, state, lookupEventHandler, registerComponentApi, }) => {

package/dist/scripts/src/components/Table/TableNative.js

@@ -106,7 +106,6 @@ exports.Table = (0, react_1.forwardRef)(({ data = exports.defaultProps.data, col
         visibleItems,
         rowsSelectable,
         enableMultiRowSelection,
-        rowDisabledPredicate,
         onSelectionDidChange,
     });
     // --- Create data with order information whenever the items in the table change
@@ -222,11 +221,8 @@ exports.Table = (0, react_1.forwardRef)(({ data = exports.defaultProps.data, col
                 }),
                 value: table.getIsAllRowsSelected(),
                 indeterminate: table.getIsSomeRowsSelected(),
-                onDidChange: () => {
-                    const allSelected = table
-                        .getRowModel()
-                        .rows.every((row) => rowDisabledPredicate(row.original) || row.getIsSelected());
-                    checkAllRows(!allSelected);
+                onDidChange: (checked) => {
+                    checkAllRows(checked);
                 } })) : null,
             cell: ({ row }) => ((0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { className: Table_module_scss_1.default.checkBoxWrapper,
                 value: row.getIsSelected(),

package/dist/scripts/src/components/Table/useRowSelection.js

@@ -7,7 +7,7 @@ const misc_1 = require("../../components-core/utils/misc");
 const constants_1 = require("../../components-core/constants");
 const hooks_1 = require("../../components-core/utils/hooks");
 const SelectionStoreNative_1 = require("../SelectionStore/SelectionStoreNative");
-function useRowSelection({ items = constants_1.EMPTY_ARRAY, visibleItems = items, rowsSelectable, enableMultiRowSelection, rowDisabledPredicate, onSelectionDidChange, }) {
+function useRowSelection({ items = constants_1.EMPTY_ARRAY, visibleItems = items, rowsSelectable, enableMultiRowSelection, onSelectionDidChange, }) {
     // --- The focused index in the row source (if there is any)
     const [focusedIndex, setFocusedIndex] = (0, react_1.useState)(-1);
     // --- The current selection interval
@@ -187,11 +187,7 @@ function useRowSelection({ items = constants_1.EMPTY_ARRAY, visibleItems = items
         if (!enableMultiRowSelection && checked) {
             return;
         }
-        setSelectedRowIds(checked
-            ? items
-                .filter((item) => (rowDisabledPredicate ? !rowDisabledPredicate(item) : true))
-                .map((item) => item[idKey])
-            : []);
+        setSelectedRowIds(checked ? items.map((item) => item[idKey]) : []);
     });
     /**
      * This operation creates a hash object that indicates the selected status of selected row IDs

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

@@ -10,6 +10,7 @@ const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const themeVars_1 = require("../../components-core/theming/themeVars");
 const renderers_1 = require("../../components-core/renderers");
 const container_helpers_1 = require("../container-helpers");
+const metadata_helpers_1 = require("../metadata-helpers");
 const TabsNative_1 = require("./TabsNative");
 const COMP = "Tabs";
 exports.TabsMd = (0, ComponentDefs_1.createMetadata)({
@@ -29,11 +30,7 @@ exports.TabsMd = (0, ComponentDefs_1.createMetadata)({
             defaultValue: TabsNative_1.defaultProps.orientation,
             valueType: "string",
         },
-        tabTemplate: {
-            description: `This property declares the template for the clickable tab area.`,
-            valueType: "ComponentDef",
-            isInternal: true,
-        },
+        tabTemplate: (0, metadata_helpers_1.dComponent)(`This property declares the template for the clickable tab area.`),
     },
     apis: {
         next: (0, ComponentDefs_1.d)(`This method selects the next tab.`),

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

@@ -83,9 +83,9 @@ exports.TextMd = (0, ComponentDefs_1.createMetadata)({
         [`fontFamily-${COMP}-sample`]: "$fontFamily-monospace",
         [`fontSize-${COMP}-sample`]: "$fontSize-small",
         [`fontSize-${COMP}-sup`]: "$fontSize-smaller",
-        [`verticalAlignment-${COMP}-sup`]: "super",
+        [`verticalAlign-${COMP}-sup`]: "super",
         [`fontSize-${COMP}-sub`]: "$fontSize-smaller",
-        [`verticalAlignment-${COMP}-sub`]: "sub",
+        [`verticalAlign-${COMP}-sub`]: "sub",
         [`fontStyle-${COMP}-var`]: "italic",
         [`fontStyle-${COMP}-em`]: "italic",
         [`fontFamily-${COMP}-mono`]: "$fontFamily-monospace",

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

@@ -64,7 +64,7 @@ exports.TextBoxMd = (0, ComponentDefs_1.createMetadata)({
         "borderColor-Input-error": "$borderColor-Input-default--error",
         "borderColor-Input-warning": "$borderColor-Input-default--warning",
         "borderColor-Input-success": "$borderColor-Input-default--success",
-        "textColor-placeholder-Input": "$textColor-subtitle",
+        "color-placeholder-Input": "$textColor-subtitle",
         "color-adornment-Input": "$textColor-subtitle",
         "outlineColor-Input--focus": "$outlineColor--focus",
         "outlineWidth-Input--focus": "$outlineWidth--focus",

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

@@ -35,7 +35,6 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NotificationToast = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
 const react_hot_toast_1 = __importStar(require("react-hot-toast"));
 const TOASTER_CONTAINER_STYLE = {
     top: 40,
@@ -45,17 +44,7 @@ const TOASTER_CONTAINER_STYLE = {
     position: "absolute",
     overflowY: "hidden",
 };
-let toasterMounted = false;
 const NotificationToast = ({ toastDuration }) => {
-    const [shouldRender, setShouldRender] = (0, react_1.useState)(false);
-    (0, react_1.useEffect)(() => {
-        if (!toasterMounted) {
-            toasterMounted = true;
-            setShouldRender(true);
-        }
-    }, []);
-    if (!shouldRender)
-        return null;
     return ((0, jsx_runtime_1.jsx)(react_hot_toast_1.Toaster, { position: "top-right", containerStyle: TOASTER_CONTAINER_STYLE, toastOptions: { style: { padding: "12px 16px" }, duration: toastDuration }, children: (t) => ((0, jsx_runtime_1.jsx)("div", { onClick: () => react_hot_toast_1.default.dismiss(t.id), children: (0, jsx_runtime_1.jsx)(react_hot_toast_1.ToastBar, { position: t.position, toast: t, style: { wordBreak: "break-word" }, children: ({ icon, message }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon, message] })) }) })) }));
 };
 exports.NotificationToast = NotificationToast;

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

@@ -46,7 +46,7 @@ function Theme({ id, isRoot = exports.defaultProps.isRoot, renderChild, node, to
         var _a, _b, _c;
         const themeToExtend = id ? themes.find((theme) => theme.id === id) : activeTheme;
         if (!themeToExtend) {
-            throw new Error(`Theme not found: requested="${id}", available=[${themes.map((t) => t.id).join(", ")}]`);
+            throw new Error("Theme not found");
         }
         const foundTheme = Object.assign(Object.assign({}, themeToExtend), { id: generatedId, tones: Object.assign(Object.assign({}, themeToExtend.tones), { [themeTone]: Object.assign(Object.assign({}, (_a = themeToExtend.tones) === null || _a === void 0 ? void 0 : _a[themeTone]), { themeVars: Object.assign(Object.assign({}, (_c = (_b = themeToExtend.tones) === null || _b === void 0 ? void 0 : _b[themeTone]) === null || _c === void 0 ? void 0 : _c.themeVars), themeVars) }) }) });
         return foundTheme;
@@ -75,15 +75,15 @@ function Theme({ id, isRoot = exports.defaultProps.isRoot, renderChild, node, to
       @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;
       }

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

@@ -40,8 +40,6 @@ exports.TreeDisplayMd = (0, ComponentDefs_1.createMetadata)({
         [`fontFamily-${COMP}`]: "$fontFamily-monospace",
         [`color-${COMP}`]: "$textColor-primary",
         [`color-connect-${COMP}`]: "$color-surface-200",
-        [`boxShadow-${COMP}`]: "none",
-        [`border-${COMP}`]: "0.5px solid $borderColor",
     },
 });
 exports.treeDisplayComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.TreeDisplayMd, ({ node, extractValue, renderChild, layoutCss }) => {

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

@@ -7,12 +7,9 @@ const ComponentDefs_1 = require("../abstractions/ComponentDefs");
 const renderers_1 = require("./renderers");
 const COMP = "Fragment";
 exports.FragmentMd = (0, ComponentDefs_1.createMetadata)({
-    description: "`Fragment` provides conditional rendering. You can use `when=` on any " +
-        "component to render it conditionally, use `Fragment` to apply `when` to a group of components.",
+    description: "`Fragment` provides conditional rendering and grouping of components. It's often " +
+        "used to hide components until their dependent variables are available.",
     opaque: true,
-    props: {
-    // Note: 'when' is a universal property defined in ComponentDefCore, no need to redefine it here
-    },
 });
 exports.fragmentComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.FragmentMd, ({ node, extractValue, renderChild, layoutContext }) => {
     return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: renderChild(node.children, layoutContext) }, extractValue(node.uid)));

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

@@ -51,8 +51,8 @@ const process_statement_sync_1 = require("./script-runner/process-statement-sync
 function isAxiosResponse(response) {
     return "data" in response;
 }
-function parseResponseJson(response_1) {
-    return __awaiter(this, arguments, void 0, function* (response, logError = false) {
+function parseResponseJson(response) {
+    return __awaiter(this, void 0, void 0, function* () {
         let resp;
         if (isAxiosResponse(response)) {
             resp = response.data;
@@ -66,9 +66,7 @@ function parseResponseJson(response_1) {
                     resp = yield response.clone().text();
                 }
                 catch (e) {
-                    if (logError) {
-                        console.error("Failed to parse response as text or JSON", response.body);
-                    }
+                    console.error("Failed to parse response as text or JSON", response.body);
                 }
             }
         }
@@ -232,7 +230,6 @@ class RestApiProxy {
             return value;
         };
         this.executeOperation = (_a) => __awaiter(this, [_a], void 0, function* ({ operation, contextParams, abortSignal, resolveBindingExpressions, relativePath = this.extractParam(resolveBindingExpressions, operation.url, contextParams), method = this.extractParam(resolveBindingExpressions, operation.method, contextParams), queryParams = this.extractParam(resolveBindingExpressions, operation.queryParams, contextParams), body = this.extractParam(resolveBindingExpressions, operation.body, contextParams, true), rawBody = this.extractParam(resolveBindingExpressions, operation.rawBody, contextParams), headers = this.extractParam(resolveBindingExpressions, operation.headers, contextParams), payloadType = this.extractParam(resolveBindingExpressions, operation.payloadType, contextParams) || "json", onUploadProgress, parseResponse = this.tryParseResponse, transactionId, }) {
-            var _b, _c, _d, _e, _f, _g;
             const includeClientTxId = method && method !== "get" && !!transactionId;
             const headersWithoutContentType = Object.assign(Object.assign({}, this.getHeaders()), { ["Content-Type"]: undefined });
             const aggregatedHeaders = (0, lodash_es_1.omitBy)(Object.assign(Object.assign({}, (body ? this.getHeaders() : headersWithoutContentType)), headers), lodash_es_1.isUndefined);
@@ -281,7 +278,7 @@ class RestApiProxy {
                         data: options.body,
                         onUploadProgress,
                     });
-                    return yield parseResponse(response, (_d = (_c = (_b = this.appContext) === null || _b === void 0 ? void 0 : _b.appGlobals) === null || _c === void 0 ? void 0 : _c.logRestApiErrors) !== null && _d !== void 0 ? _d : false);
+                    return yield parseResponse(response);
                 }
                 catch (error) {
                     if (axios.isAxiosError(error) && error.response) {
@@ -297,12 +294,12 @@ class RestApiProxy {
                 if (!response.clone().ok) {
                     throw yield this.raiseError(response);
                 }
-                const parsedResponse = yield parseResponse(response.clone(), (_g = (_f = (_e = this.appContext) === null || _e === void 0 ? void 0 : _e.appGlobals) === null || _f === void 0 ? void 0 : _f.logRestApiErrors) !== null && _g !== void 0 ? _g : false);
+                const parsedResponse = yield parseResponse(response.clone());
                 return parsedResponse;
             }
         });
-        this.tryParseResponse = (response_1, ...args_1) => __awaiter(this, [response_1, ...args_1], void 0, function* (response, logError = false) {
-            return yield parseResponseJson(response, logError);
+        this.tryParseResponse = (response) => __awaiter(this, void 0, void 0, function* () {
+            return yield parseResponseJson(response);
         });
         this.raiseError = (response) => __awaiter(this, void 0, void 0, function* () {
             if ("config" in response) {

package/dist/scripts/src/components-core/appContext/date-functions.js

@@ -20,5 +20,4 @@ exports.dateFunctions = {
     differenceInMinutes: date_fns_1.differenceInMinutes,
     isSameDay: date_fns_1.isSameDay,
     isThisYear: date_fns_1.isThisYear,
-    formatHumanElapsedTime: date_utils_1.formatHumanElapsedTime
 };

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

@@ -83,13 +83,4 @@ exports.layoutOptionKeys = [
     "outlineColor",
     "outlineStyle",
     "outlineOffset",
-    "fontVariant",
-    "lineBreak",
-    "textIndent",
-    "textShadow",
-    "wordBreak",
-    "wordSpacing",
-    "wordWrap",
-    "writingMode",
-    "transition",
 ];

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

@@ -48,7 +48,7 @@ const react_1 = require("react");
 const misc_1 = require("../utils/misc");
 const useApiInterceptorContext_1 = require("./useApiInterceptorContext");
 // This React component injects the API interceptor into the application's context
-function ApiInterceptorProvider({ interceptor, children, apiWorker, useHashBasedRouting, waitForApiInterceptor = false }) {
+function ApiInterceptorProvider({ interceptor, children, apiWorker, useHashBasedRouting, }) {
     const [initialized, setInitialized] = (0, react_1.useState)(!interceptor);
     const [interceptorWorker, setInterceptorWorker] = (0, react_1.useState)(null);
     // --- Whenever the interceptor changes, update the provider accordingly
@@ -94,5 +94,5 @@ function ApiInterceptorProvider({ interceptor, children, apiWorker, useHashBased
             isMocked: (url) => interceptor !== undefined && !!process.env.VITE_MOCK_ENABLED,
         };
     }, [interceptorWorker, initialized, interceptor]);
-    return ((0, jsx_runtime_1.jsx)(useApiInterceptorContext_1.ApiInterceptorContext.Provider, { value: contextValue, children: waitForApiInterceptor && !initialized ? null : children }));
+    return ((0, jsx_runtime_1.jsx)(useApiInterceptorContext_1.ApiInterceptorContext.Provider, { value: contextValue, children: children }));
 }

package/dist/scripts/src/components-core/rendering/AppContent.js

@@ -130,8 +130,8 @@ function AppContent({ rootContainer, routerBaseName, globalProps, standalone, tr
     const isViewportTablet = (0, hooks_1.useMediaQuery)(`(min-width: ${maxWidthLandscapePhone}) and (max-width: ${maxWidthTabletLower})`);
     const isViewportDesktop = (0, hooks_1.useMediaQuery)(`(min-width: ${maxWidthTablet}) and (max-width: ${maxWidthDesktopLower})`);
     const isViewportLargeDesktop = (0, hooks_1.useMediaQuery)(`(min-width: ${maxWidthDesktop}) and (max-width: ${maxWidthLargeDesktopLower})`);
-    let vpSize;
-    let vpSizeIndex;
+    let vpSize = "xs";
+    let vpSizeIndex = 0;
     const isViewportXlDesktop = (0, hooks_1.useMediaQuery)(`(min-width: ${maxWidthLargeDesktop})`);
     if (isViewportXlDesktop) {
         vpSize = "xxl";
@@ -153,10 +153,6 @@ function AppContent({ rootContainer, routerBaseName, globalProps, standalone, tr
         vpSize = "sm";
         vpSizeIndex = 1;
     }
-    else if (isViewportPhone) {
-        vpSize = "xs";
-        vpSizeIndex = 0;
-    }
     // --- Collect information about the current environment
     const isInIFrame = (0, hooks_1.useIsInIFrame)();
     const isWindowFocused = (0, hooks_1.useIsWindowFocused)();

package/dist/scripts/src/components-core/rendering/AppRoot.js

@@ -27,7 +27,7 @@ exports.queryClient = new react_query_1.QueryClient({
  * from either code-behind files or inlined markup expressions) and executes
  * the app accordingly.
  */
-function AppRoot({ apiInterceptor, contributes, node, decorateComponentsWithTestId, debugEnabled, defaultTheme, defaultTone, resources, globalProps, standalone, trackContainerHeight, routerBaseName, previewMode, resourceMap, sources, extensionManager, children, projectCompilation, isNested = false, }) {
+function AppRoot({ apiInterceptor, contributes, node, decorateComponentsWithTestId, debugEnabled, defaultTheme, defaultTone, resources, globalProps, standalone, trackContainerHeight, routerBaseName, previewMode, resourceMap, sources, extensionManager, children, projectCompilation, }) {
     // --- Make sure, the root node is wrapped in a `Theme` component. Also,
     // --- the root node must be wrapped in a `Container` component managing
     // --- the app's top-level state.
@@ -54,11 +54,9 @@ function AppRoot({ apiInterceptor, contributes, node, decorateComponentsWithTest
     }
     // --- Start with an error-free state
     (0, reportEngineError_1.resetErrors)();
-    // --- Add isNested to global props so it can be accessed throughout the app
-    const enhancedGlobalProps = (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, globalProps), { isNested })), [globalProps, isNested]);
     // --- Render the app providing a component registry (in which the engine finds a
     // --- component definition by its name). Ensure the app has a context for debugging.
-    return ((0, jsx_runtime_1.jsx)(ComponentProvider_1.ComponentProvider, { contributes: contributes, extensionManager: extensionManager, children: (0, jsx_runtime_1.jsx)(DebugViewProvider_1.DebugViewProvider, { debugConfig: globalProps === null || globalProps === void 0 ? void 0 : globalProps.debug, children: (0, jsx_runtime_1.jsx)(AppWrapper_1.AppWrapper, { projectCompilation: projectCompilation, resourceMap: resourceMap, apiInterceptor: apiInterceptor, node: rootNode, contributes: contributes, resources: resources, routerBaseName: routerBaseName, decorateComponentsWithTestId: decorateComponentsWithTestId, debugEnabled: debugEnabled, defaultTheme: defaultTheme, defaultTone: defaultTone, globalProps: enhancedGlobalProps, standalone: standalone, trackContainerHeight: trackContainerHeight, previewMode: previewMode, sources: sources, children: children }) }) }));
+    return ((0, jsx_runtime_1.jsx)(ComponentProvider_1.ComponentProvider, { contributes: contributes, extensionManager: extensionManager, children: (0, jsx_runtime_1.jsx)(DebugViewProvider_1.DebugViewProvider, { debugConfig: globalProps === null || globalProps === void 0 ? void 0 : globalProps.debug, children: (0, jsx_runtime_1.jsx)(AppWrapper_1.AppWrapper, { projectCompilation: projectCompilation, resourceMap: resourceMap, apiInterceptor: apiInterceptor, node: rootNode, contributes: contributes, resources: resources, routerBaseName: routerBaseName, decorateComponentsWithTestId: decorateComponentsWithTestId, debugEnabled: debugEnabled, defaultTheme: defaultTheme, defaultTone: defaultTone, globalProps: globalProps, standalone: standalone, trackContainerHeight: trackContainerHeight, previewMode: previewMode, sources: sources, children: children }) }) }));
 }
 /**
  *

package/dist/scripts/src/components-core/rendering/StateContainer.js

@@ -37,7 +37,6 @@ const ParameterParser_1 = require("../script-runner/ParameterParser");
 const eval_tree_sync_1 = require("../script-runner/eval-tree-sync");
 const extractParam_1 = require("../utils/extractParam");
 const misc_1 = require("../utils/misc");
-const AppLayoutContext_1 = require("../../components/App/AppLayoutContext");
 // A React component that wraps a view container into an error boundary
 // (it's a named function inside the memo, this way it will be visible with that name in the react devtools)
 exports.StateContainer = (0, react_1.memo)((0, react_1.forwardRef)(function StateContainer(_a, ref) {
@@ -146,8 +145,6 @@ exports.StateContainer = (0, react_1.memo)((0, react_1.forwardRef)(function Stat
 const useRoutingParams = () => {
     const [queryParams] = (0, react_2.useSearchParams)();
     const routeParams = (0, react_2.useParams)();
-    const location = (0, react_2.useLocation)();
-    const appLayoutContext = (0, AppLayoutContext_1.useAppLayoutContext)();
     const queryParamsMap = (0, react_1.useMemo)(() => {
         const result = {};
         for (const [key, value] of Array.from(queryParams.entries())) {
@@ -156,12 +153,9 @@ const useRoutingParams = () => {
         return result;
     }, [queryParams]);
     return (0, react_1.useMemo)(() => {
-        var _a;
         return {
-            $pathname: location.pathname,
             $routeParams: routeParams,
             $queryParams: queryParamsMap,
-            $linkInfo: ((_a = appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.linkMap) === null || _a === void 0 ? void 0 : _a.get(location.pathname)) || {},
         };
     }, [queryParamsMap, routeParams]);
 };

package/dist/scripts/src/components-core/theming/layout-resolver.js

@@ -111,15 +111,11 @@ function resolveLayoutProps(layoutProps = constants_1.EMPTY_OBJECT, layoutContex
     collectCss("fontSize");
     collectCss("fontWeight");
     collectCss("fontStyle");
-    collectCss("fontVariant");
-    collectCss("lineBreak");
     collectCss("textDecoration");
     collectCss("textDecorationLine");
     collectCss("textDecorationColor");
     collectCss("textDecorationStyle");
     collectCss("textDecorationThickness");
-    collectCss("textIndent");
-    collectCss("textShadow");
     collectCss("textUnderlineOffset");
     collectCss("userSelect");
     collectCss("letterSpacing");
@@ -128,10 +124,6 @@ function resolveLayoutProps(layoutProps = constants_1.EMPTY_OBJECT, layoutContex
     collectCss("textAlign");
     collectCss("textAlignLast");
     collectCss("textWrap");
-    collectCss("wordBreak");
-    collectCss("wordSpacing");
-    collectCss("wordWrap");
-    collectCss("writingMode");
     // --- Other
     collectCss("backgroundColor");
     collectCss("background");
@@ -347,8 +339,6 @@ const layoutPatterns = {
     fontSize: [],
     fontWeight: [],
     fontStyle: [booleanRegex],
-    fontVariant: [],
-    lineBreak: [],
     textDecoration: [],
     userSelect: [],
     letterSpacing: [],
@@ -357,12 +347,6 @@ const layoutPatterns = {
     textAlign: [],
     textWrap: [],
     textAlignLast: [],
-    textIndent: [],
-    textShadow: [],
-    wordBreak: [],
-    wordSpacing: [],
-    wordWrap: [],
-    writingMode: [],
     // --- Content rendering
     wrapContent: [],
     canShrink: [],
@@ -381,6 +365,4 @@ const layoutPatterns = {
     outlineColor: [],
     outlineStyle: [],
     outlineOffset: [],
-    // --- Animation
-    transition: [],
 };

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

@@ -208,9 +208,6 @@ exports.RootThemeDefinition = {
         "textColor-secondary": $colorSurface600,
         // --- Input is an abstract component, so we define its default theme variables here
         "backgroundColor-Input-default": $colorSurface0,
-        "backgroundColor-Input-success": $colorSurface0,
-        "backgroundColor-Input-warning": $colorSurface0,
-        "backgroundColor-Input-error": $colorSurface0,
         "borderColor-Input-default": $colorSurface200,
         "borderColor-Input-default--hover": $colorSurface600,
         "borderColor-Input-default--focus": $colorSurface600,