xmlui 0.7.23 → 0.7.25

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

@@ -7,18 +7,22 @@ exports.Markdown = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_markdown_1 = __importDefault(require("react-markdown"));
+const remark_gfm_1 = __importDefault(require("remark-gfm"));
+const unist_util_visit_1 = require("unist-util-visit");
 const Markdown_module_scss_1 = __importDefault(require("./Markdown.module.scss"));
+const HtmlTags_module_scss_1 = __importDefault(require("../HtmlTags/HtmlTags.module.scss"));
 const HeadingNative_1 = require("../Heading/HeadingNative");
 const TextNative_1 = require("../Text/TextNative");
 const LinkNative_1 = require("../Link/LinkNative");
 const ImageNative_1 = require("../Image/ImageNative");
-exports.Markdown = (0, react_1.memo)(function Markdown({ removeIndents = false, children, style }) {
+const Toggle_1 = require("../Toggle/Toggle");
+exports.Markdown = (0, react_1.memo)(function Markdown({ extractValue, removeIndents = false, children, style, }) {
     if (typeof children !== "string") {
         return null;
     }
     children = removeIndents ? removeTextIndents(children) : children;
     const textLayoutToUse = { textAlign: style === null || style === void 0 ? void 0 : style.textAlign };
-    return ((0, jsx_runtime_1.jsx)(react_markdown_1.default, { components: {
+    return ((0, jsx_runtime_1.jsx)(react_markdown_1.default, { remarkPlugins: [remark_gfm_1.default, [bindingExpression, { extractValue }]], components: {
             h1({ id, children }) {
                 return ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, { uid: id, style: textLayoutToUse, level: "h1", sx: { lineHeight: "initial" }, children: children }));
             },
@@ -38,7 +42,7 @@ exports.Markdown = (0, react_1.memo)(function Markdown({ removeIndents = false,
                 return ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, { uid: id, level: "h6", sx: { lineHeight: "initial" }, children: children }));
             },
             p({ id, children }) {
-                return (0, jsx_runtime_1.jsx)(TextNative_1.Text, { uid: id, style: textLayoutToUse, children: children });
+                return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, { uid: id, style: textLayoutToUse, children: children }));
             },
             code({ id, children }) {
                 return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, { uid: id, variant: "code", children: children }));
@@ -52,6 +56,9 @@ exports.Markdown = (0, react_1.memo)(function Markdown({ removeIndents = false,
             em({ id, children }) {
                 return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, { uid: id, variant: "em", children: children }));
             },
+            del({ id, children }) {
+                return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, { uid: id, variant: "deleted", children: children }));
+            },
             blockquote({ children }) {
                 return (0, jsx_runtime_1.jsx)(Blockquote, { style: textLayoutToUse, children: children });
             },
@@ -64,9 +71,6 @@ exports.Markdown = (0, react_1.memo)(function Markdown({ removeIndents = false,
             li({ children }) {
                 return (0, jsx_runtime_1.jsx)(ListItem, { style: textLayoutToUse, children: children });
             },
-            // This needs a parser plugin for the ~ and ~~ signs that are available via react-markdown-gfm
-            // or we implement our own parser?
-            // del: variant="deleted"
             hr() {
                 return (0, jsx_runtime_1.jsx)(HorizontalRule, {});
             },
@@ -75,7 +79,32 @@ exports.Markdown = (0, react_1.memo)(function Markdown({ removeIndents = false,
             },
             img({ src, alt }) {
                 return (0, jsx_runtime_1.jsx)(ImageNative_1.Image, { src: src, alt: alt });
-            }
+            },
+            // TODO: somehow get the label from the containing li element
+            input({ disabled, checked }) {
+                return ((0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { variant: "checkbox", readOnly: disabled, value: checked }));
+            },
+            table({ children }) {
+                return (0, jsx_runtime_1.jsx)("table", { className: HtmlTags_module_scss_1.default.htmlTable, children: children });
+            },
+            tr({ children }) {
+                return (0, jsx_runtime_1.jsx)("tr", { className: HtmlTags_module_scss_1.default.htmlTr, children: children });
+            },
+            td({ children }) {
+                return (0, jsx_runtime_1.jsx)("td", { className: HtmlTags_module_scss_1.default.htmlTd, children: children });
+            },
+            th({ children }) {
+                return (0, jsx_runtime_1.jsx)("th", { className: HtmlTags_module_scss_1.default.htmlTh, children: children });
+            },
+            thead({ children }) {
+                return (0, jsx_runtime_1.jsx)("thead", { className: HtmlTags_module_scss_1.default.htmlThead, children: children });
+            },
+            tbody({ children }) {
+                return (0, jsx_runtime_1.jsx)("tbody", { className: HtmlTags_module_scss_1.default.htmlTbody, children: children });
+            },
+            tfoot({ children }) {
+                return (0, jsx_runtime_1.jsx)("tfoot", { className: HtmlTags_module_scss_1.default.htmlTfoot, children: children });
+            },
         }, children: children }));
 });
 function removeTextIndents(input) {
@@ -94,14 +123,79 @@ const HorizontalRule = () => {
     return (0, jsx_runtime_1.jsx)("hr", { className: Markdown_module_scss_1.default.horizontalRule });
 };
 const Blockquote = ({ children, style }) => {
-    return (0, jsx_runtime_1.jsx)("blockquote", { className: Markdown_module_scss_1.default.blockquote, style: style, children: children });
+    return ((0, jsx_runtime_1.jsx)("blockquote", { className: Markdown_module_scss_1.default.blockquote, style: style, children: children }));
 };
 const UnorderedList = ({ children, style }) => {
-    return (0, jsx_runtime_1.jsx)("ul", { className: Markdown_module_scss_1.default.unorderedList, style: style, children: children });
+    return ((0, jsx_runtime_1.jsx)("ul", { className: Markdown_module_scss_1.default.unorderedList, style: style, children: children }));
 };
 const OrderedList = ({ children, style }) => {
-    return (0, jsx_runtime_1.jsx)("ol", { className: Markdown_module_scss_1.default.orderedList, style: style, children: children });
+    return ((0, jsx_runtime_1.jsx)("ol", { className: Markdown_module_scss_1.default.orderedList, style: style, children: children }));
 };
 const ListItem = ({ children, style }) => {
-    return (0, jsx_runtime_1.jsx)("li", { className: Markdown_module_scss_1.default.listItem, style: style, children: children });
+    return ((0, jsx_runtime_1.jsx)("li", { className: Markdown_module_scss_1.default.listItem, style: style, children: children }));
 };
+/**
+ * Finds and evaluates given binding expressions in markdown text.
+ * The binding expressions are of the form `${...}$`.
+ * @param extractValue The function to resolve binding expressions
+ * @returns visitor function that processes the binding expressions
+ */
+function bindingExpression({ extractValue }) {
+    return (tree) => {
+        (0, unist_util_visit_1.visit)(tree, "text", (node) => {
+            return detectBindingExpression(node);
+        });
+    };
+    function detectBindingExpression(node) {
+        // Remove empty ${} expressions first
+        node.value = node.value.replace(/\$\{\s*\}/g, "");
+        const regex = /\$\{((?:[^{}]|\{(?:[^{}]|\{(?:[^{}]|\{[^{}]*\})*\})*\})*)\}/g;
+        const parts = node.value.split(regex);
+        if (parts.length > 1) {
+            node.type = "html";
+            node.value = parts
+                .map((part, index) => {
+                const extracted = index % 2 === 0 ? part : extractValue(`{${part}}`);
+                const resultExpr = mapByType(extracted);
+                // The result expression might be an object, in that case we stringify it here,
+                // at the last step, so that there are no unnecessary apostrophes
+                return typeof resultExpr === "object" && resultExpr !== null
+                    ? JSON.stringify(resultExpr)
+                    : resultExpr;
+            })
+                .join("");
+        }
+    }
+    function mapByType(extracted) {
+        if (extracted === null) {
+            return null;
+        }
+        else if (extracted === undefined || typeof extracted === "undefined") {
+            return undefined;
+        }
+        else if (typeof extracted === "object") {
+            const arrowFuncResult = parseArrowFunc(extracted);
+            if (arrowFuncResult) {
+                return arrowFuncResult;
+            }
+            if (Array.isArray(extracted)) {
+                return extracted;
+            }
+            return Object.fromEntries(Object.entries(extracted).map(([key, value]) => {
+                return [key, mapByType(value)];
+            }));
+        }
+        else {
+            return extracted;
+        }
+    }
+    function parseArrowFunc(extracted) {
+        if (extracted.hasOwnProperty("type") &&
+            extracted.type === "ArrowE" &&
+            (extracted === null || extracted === void 0 ? void 0 : extracted._ARROW_EXPR_) &&
+            extracted.hasOwnProperty("source")) {
+            return extracted.source;
+        }
+        return "";
+    }
+}

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

@@ -7,6 +7,7 @@ const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
 const metadata_helpers_1 = require("../metadata-helpers");
 const OptionTypeProvider_1 = require("../Option/OptionTypeProvider");
+const container_helpers_1 = require("../container-helpers");
 const COMP = "Option";
 exports.OptionMd = (0, ComponentDefs_1.createMetadata)({
     description: `\`${COMP}\` is a non-visual component describing a selection option. Other components ` +
@@ -18,6 +19,7 @@ exports.OptionMd = (0, ComponentDefs_1.createMetadata)({
         value: (0, ComponentDefs_1.d)(`This property defines the value of the option. If \`value\` is not defined, ` +
             `\`Option\` will use the \`label\` as the value.`),
         enabled: (0, metadata_helpers_1.dEnabled)(),
+        optionTemplate: (0, ComponentDefs_1.d)("This property is used to define a custom option template"),
     },
 });
 const OptionNative = (0, react_1.memo)((props) => {
@@ -28,6 +30,9 @@ const OptionNative = (0, react_1.memo)((props) => {
     return (0, jsx_runtime_1.jsx)(OptionType, Object.assign({}, props));
 });
 OptionNative.displayName = "OptionNative";
-exports.optionComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.OptionMd, ({ node, extractValue, layoutCss, renderChild }) => {
-    return ((0, jsx_runtime_1.jsx)(OptionNative, { value: extractValue(node.props.value), label: extractValue.asOptionalString(node.props.label) || renderChild(node.children), enabled: extractValue.asOptionalBoolean(node.props.enabled), style: layoutCss }));
+exports.optionComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.OptionMd, ({ node, extractValue, layoutCss, renderChild, layoutContext }) => {
+    const optionTemplate = node.children || node.props.optionTemplate;
+    return ((0, jsx_runtime_1.jsx)(OptionNative, { optionRenderer: optionTemplate
+            ? (contextVars) => ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: optionTemplate, renderChild: renderChild, contextVars: contextVars, layoutContext: layoutContext }))
+            : undefined, value: extractValue(node.props.value), label: extractValue.asOptionalString(node.props.label) || renderChild(node.children), enabled: extractValue.asOptionalBoolean(node.props.enabled), style: layoutCss }));
 });

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

@@ -89,15 +89,18 @@ exports.RadioGroup = (0, react_1.forwardRef)(function RadioGroup({ id, value = "
                         [RadioGroup_module_scss_1.default.disabled]: !enabled,
                     }), children: children }) }) }) }));
 });
-const RadioGroupOption = ({ value, label, enabled = true }) => {
+const RadioGroupOption = ({ value, label, enabled = true, optionRenderer, style, }) => {
     const id = (0, react_1.useId)();
     const validationContext = (0, react_1.useContext)(RadioGroupValidationStatusContext);
-    const statusStyles = {
+    const statusStyles = (0, react_1.useMemo)(() => ({
         [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",
-    };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: RadioGroup_module_scss_1.default.radioOptionContainer, 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 })] }, id));
+    }), [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), 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 === validationContext.value,
+                })] }) : item }, id));
 };
 exports.RadioGroupOption = RadioGroupOption;

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

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.radioItemComponentRenderer = exports.RadioItemMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const renderers_1 = require("../../components-core/renderers");
+const RadioItemNative_1 = require("./RadioItemNative");
+const COMP = "RadioItem";
+exports.RadioItemMd = (0, ComponentDefs_1.createMetadata)({
+    status: "experimental",
+    description: `The \`${COMP}\` component is a radio button that is part of a group of radio buttons.`,
+    props: {
+        checked: (0, ComponentDefs_1.d)("This property specifies whether the radio button is checked."),
+        value: (0, ComponentDefs_1.d)("This property specifies the value of the radio button."),
+    },
+});
+exports.radioItemComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.RadioItemMd, ({ node, extractValue }) => {
+    return ((0, jsx_runtime_1.jsx)(RadioItemNative_1.RadioItem, { checked: extractValue(node.props.checked), value: extractValue(node.props.value) }));
+});

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

@@ -0,0 +1,49 @@
+"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 };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const RadioGroup_module_scss_1 = __importDefault(require("./RadioGroup.module.scss"));
+const InnerRadioGroup = __importStar(require("@radix-ui/react-radio-group"));
+const classnames_1 = __importDefault(require("classnames"));
+const RadioItem = ({ checked, style, value }) => {
+    const id = (0, react_1.useId)();
+    return ((0, jsx_runtime_1.jsx)("div", { className: RadioGroup_module_scss_1.default.radioOptionContainer, style: style, children: (0, jsx_runtime_1.jsx)(InnerRadioGroup.Item, { className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.radioOption), id: id, value: value, checked: checked, children: (0, jsx_runtime_1.jsx)(InnerRadioGroup.Indicator, { className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.indicator) }) }) }, id));
+};
+exports.RadioItem = RadioItem;

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

@@ -29,6 +29,9 @@ const baseSplitterMd = (0, ComponentDefs_1.createMetadata)({
             `value is in pixels or percentages.`),
         floating: (0, ComponentDefs_1.d)(`Toggles whether the resizer is visible (\`false\`) or not (\`true\`) when not hovered ` +
             `or dragged. The default value is \`false\`, meaning the resizer is visible all the time.`),
+        orientation: (0, ComponentDefs_1.d)(`Sets whether the \`Splitter\` divides the container horizontally and lays out the ` +
+            `section on top of each other (\`vertical\`), or vertically by placing the sections ` +
+            `next to each other (\`horizontal\`).`),
     },
     events: {
         resize: (0, ComponentDefs_1.d)(`This event fires when the component is resized.`),
@@ -41,47 +44,42 @@ const baseSplitterMd = (0, ComponentDefs_1.createMetadata)({
         [`cursor-resizer-vertical-${COMP}`]: "ns-resize",
     },
 });
-exports.SplitterMd = Object.assign(Object.assign({}, baseSplitterMd), { props: Object.assign(Object.assign({}, baseSplitterMd.props), { orientation: (0, ComponentDefs_1.d)(`Sets whether the \`Splitter\` divides the container horizontally and lays out the ` +
-            `section on top of each other (\`vertical\`), or vertically by placing the sections ` +
-            `next to each other (\`horizontal\`).`) }) });
+exports.SplitterMd = Object.assign(Object.assign({}, baseSplitterMd), { props: Object.assign({}, baseSplitterMd.props) });
 exports.HSplitterMd = Object.assign(Object.assign({}, baseSplitterMd), { specializedFrom: COMP });
 exports.VSplitterMd = Object.assign(Object.assign({}, baseSplitterMd), { specializedFrom: COMP });
 const DEFAULT_ORIENTATION = "vertical";
 function renderSplitter(_a) {
     var _b, _c, _d, _e, _f, _g, _h;
-    var { node, extractValue, layoutNonCss, layoutCss, renderChild, lookupEventHandler, orientation = (_b = layoutNonCss.orientation) !== null && _b !== void 0 ? _b : DEFAULT_ORIENTATION, } = _a;
+    var { node, extractValue, layoutCss, renderChild, lookupEventHandler, orientation = (_b = extractValue(node.props.orientation)) !== null && _b !== void 0 ? _b : DEFAULT_ORIENTATION, } = _a;
     if (!(0, misc_1.isComponentDefChildren)(node.children)) {
         throw new EngineError_1.NotAComponentDefError();
     }
     return ((0, jsx_runtime_1.jsx)(SplitterNative_1.Splitter, { style: layoutCss, swapped: extractValue.asOptionalBoolean((_c = node.props) === null || _c === void 0 ? void 0 : _c.swapped), orientation: orientation, splitterTemplate: renderChild((_d = node.props) === null || _d === void 0 ? void 0 : _d.splitterTemplate), initialPrimarySize: extractValue((_e = node.props) === null || _e === void 0 ? void 0 : _e.initialPrimarySize), minPrimarySize: extractValue((_f = node.props) === null || _f === void 0 ? void 0 : _f.minPrimarySize), maxPrimarySize: extractValue((_g = node.props) === null || _g === void 0 ? void 0 : _g.maxPrimarySize), floating: extractValue.asOptionalBoolean((_h = node.props) === null || _h === void 0 ? void 0 : _h.floating), resize: lookupEventHandler("resize"), children: renderChild(node.children) }));
 }
-exports.splitterComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.SplitterMd, ({ node, extractValue, renderChild, layoutCss, layoutNonCss, lookupEventHandler }) => {
+exports.splitterComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.SplitterMd, ({ node, extractValue, renderChild, layoutCss, lookupEventHandler }) => {
     return renderSplitter({
         node,
         extractValue,
         layoutCss,
-        layoutNonCss,
         renderChild,
         lookupEventHandler: lookupEventHandler,
     });
 });
-exports.vSplitterComponentRenderer = (0, renderers_1.createComponentRenderer)("VSplitter", exports.VSplitterMd, ({ node, extractValue, renderChild, layoutCss, layoutNonCss, lookupEventHandler }) => {
+exports.vSplitterComponentRenderer = (0, renderers_1.createComponentRenderer)("VSplitter", exports.VSplitterMd, ({ node, extractValue, renderChild, layoutCss, lookupEventHandler }) => {
     return renderSplitter({
         node,
         extractValue,
         layoutCss,
-        layoutNonCss,
         renderChild,
         orientation: "vertical",
         lookupEventHandler: lookupEventHandler,
     });
 });
-exports.hSplitterComponentRenderer = (0, renderers_1.createComponentRenderer)("HSplitter", exports.HSplitterMd, ({ node, extractValue, renderChild, layoutCss, layoutNonCss, lookupEventHandler }) => {
+exports.hSplitterComponentRenderer = (0, renderers_1.createComponentRenderer)("HSplitter", exports.HSplitterMd, ({ node, extractValue, renderChild, layoutCss, lookupEventHandler }) => {
     return renderSplitter({
         node,
         extractValue,
         layoutCss,
-        layoutNonCss,
         renderChild,
         orientation: "horizontal",
         lookupEventHandler: lookupEventHandler,

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

@@ -23,6 +23,10 @@ const stackMd = (0, ComponentDefs_1.createMetadata)({
         reverse: (0, ComponentDefs_1.d)(`Optional boolean property to reverse the order of child elements.`),
         wrapContent: (0, ComponentDefs_1.d)(`Optional boolean which wraps the content if set to true and the available space is not big ` +
             `enough. Works in all orientations.`),
+        orientation: (0, ComponentDefs_1.d)(`An optional property that governs the Stack's orientation (whether the Stack lays out its ` +
+            `children in a row or a column).`),
+        horizontalAlignment: HORIZONTAL_ALIGNMENT,
+        verticalAlignment: VERTICAL_ALIGNMENT,
         hoverContainer: (0, ComponentDefs_1.d)("Reserved for future use"),
         visibleOnHover: (0, ComponentDefs_1.d)("Reserved for future use"),
     },
@@ -32,15 +36,14 @@ const stackMd = (0, ComponentDefs_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(Stack_module_scss_1.default.themeVars),
 });
-exports.StackMd = Object.assign(Object.assign({}, stackMd), { props: Object.assign(Object.assign({}, stackMd.props), { orientation: (0, ComponentDefs_1.d)(`An optional property that governs the Stack's orientation (whether the Stack lays out its ` +
-            `children in a row or a column).`), horizontalAlignment: HORIZONTAL_ALIGNMENT, verticalAlignment: VERTICAL_ALIGNMENT }) });
-exports.VStackMd = Object.assign(Object.assign({}, exports.StackMd), { specializedFrom: COMP, description: `This component represents a stack rendering its contents vertically.`, props: Object.assign(Object.assign({}, stackMd.props), { horizontalAlignment: HORIZONTAL_ALIGNMENT, verticalAlignment: VERTICAL_ALIGNMENT }) });
-exports.HStackMd = Object.assign(Object.assign({}, exports.StackMd), { specializedFrom: COMP, description: `This component represents a stack rendering its contents horizontally.`, props: Object.assign(Object.assign({}, stackMd.props), { horizontalAlignment: HORIZONTAL_ALIGNMENT, verticalAlignment: VERTICAL_ALIGNMENT }) });
+exports.StackMd = Object.assign(Object.assign({}, stackMd), { props: Object.assign({}, stackMd.props) });
+exports.VStackMd = Object.assign(Object.assign({}, exports.StackMd), { specializedFrom: COMP, description: `This component represents a stack rendering its contents vertically.`, props: Object.assign({}, stackMd.props) });
+exports.HStackMd = Object.assign(Object.assign({}, exports.StackMd), { specializedFrom: COMP, description: `This component represents a stack rendering its contents horizontally.`, props: Object.assign({}, stackMd.props) });
 exports.CVStackMd = Object.assign(Object.assign({}, exports.StackMd), { specializedFrom: COMP, description: `This component represents a stack that renders its contents vertically ` +
         `and aligns that in the center along both axes.` });
 exports.CHStackMd = Object.assign(Object.assign({}, exports.StackMd), { specializedFrom: COMP, description: `This component represents a stack that renders its contents horizontally ` +
         `and aligns that in the center along both axes.` });
-function renderStack({ node, layoutNonCss, extractValue, layoutCss, lookupEventHandler, renderChild, orientation = layoutNonCss.orientation || StackNative_1.DEFAULT_ORIENTATION, horizontalAlignment = layoutNonCss.horizontalAlignment, verticalAlignment = layoutNonCss.verticalAlignment, }) {
+function renderStack({ node, extractValue, layoutCss, orientation, horizontalAlignment, verticalAlignment, lookupEventHandler, renderChild, }) {
     var _a, _b, _c;
     if (!(0, misc_1.isComponentDefChildren)(node.children)) {
         throw new EngineError_1.NotAComponentDefError();
@@ -50,42 +53,55 @@ function renderStack({ node, layoutNonCss, extractValue, layoutCss, lookupEventH
             orientation,
         }) }));
 }
-exports.stackComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.StackMd, ({ node, extractValue, renderChild, layoutCss, layoutNonCss, lookupEventHandler }) => {
+exports.stackComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.StackMd, ({ node, extractValue, renderChild, layoutCss, lookupEventHandler }) => {
+    var _a, _b, _c;
+    const orientation = extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.orientation) || StackNative_1.DEFAULT_ORIENTATION;
+    const horizontalAlignment = extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.horizontalAlignment);
+    const verticalAlignment = extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.verticalAlignment);
     return renderStack({
         node,
-        layoutNonCss,
         extractValue,
         layoutCss,
+        orientation,
+        horizontalAlignment,
+        verticalAlignment,
         lookupEventHandler,
         renderChild,
     });
 });
-exports.vStackComponentRenderer = (0, renderers_1.createComponentRenderer)("VStack", exports.VStackMd, ({ node, extractValue, renderChild, layoutCss, layoutNonCss, lookupEventHandler }) => {
+exports.vStackComponentRenderer = (0, renderers_1.createComponentRenderer)("VStack", exports.VStackMd, ({ node, extractValue, renderChild, layoutCss, lookupEventHandler }) => {
+    var _a, _b;
+    const horizontalAlignment = extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.horizontalAlignment);
+    const verticalAlignment = extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.verticalAlignment);
     return renderStack({
         node,
-        layoutNonCss,
         extractValue,
         layoutCss,
         lookupEventHandler,
         renderChild,
         orientation: "vertical",
+        horizontalAlignment,
+        verticalAlignment,
     });
 });
-exports.hStackComponentRenderer = (0, renderers_1.createComponentRenderer)("HStack", exports.HStackMd, ({ node, extractValue, renderChild, layoutCss, layoutNonCss, lookupEventHandler }) => {
+exports.hStackComponentRenderer = (0, renderers_1.createComponentRenderer)("HStack", exports.HStackMd, ({ node, extractValue, renderChild, layoutCss, lookupEventHandler }) => {
+    var _a, _b;
+    const horizontalAlignment = extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.horizontalAlignment);
+    const verticalAlignment = extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.verticalAlignment);
     return renderStack({
         node,
-        layoutNonCss,
         extractValue,
         layoutCss,
         lookupEventHandler,
         renderChild,
         orientation: "horizontal",
+        horizontalAlignment,
+        verticalAlignment,
     });
 });
-exports.cvStackComponentRenderer = (0, renderers_1.createComponentRenderer)("CVStack", exports.CVStackMd, ({ node, extractValue, renderChild, layoutCss, layoutNonCss, lookupEventHandler }) => {
+exports.cvStackComponentRenderer = (0, renderers_1.createComponentRenderer)("CVStack", exports.CVStackMd, ({ node, extractValue, renderChild, layoutCss, lookupEventHandler }) => {
     return renderStack({
         node,
-        layoutNonCss,
         extractValue,
         layoutCss,
         lookupEventHandler,
@@ -95,10 +111,9 @@ exports.cvStackComponentRenderer = (0, renderers_1.createComponentRenderer)("CVS
         verticalAlignment: "center",
     });
 });
-exports.chStackComponentRenderer = (0, renderers_1.createComponentRenderer)("CHStack", exports.CHStackMd, ({ node, extractValue, renderChild, layoutCss, layoutNonCss, lookupEventHandler }) => {
+exports.chStackComponentRenderer = (0, renderers_1.createComponentRenderer)("CHStack", exports.CHStackMd, ({ node, extractValue, renderChild, layoutCss, lookupEventHandler }) => {
     return renderStack({
         node,
-        layoutNonCss,
         extractValue,
         layoutCss,
         lookupEventHandler,

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

@@ -87,7 +87,6 @@ exports.TableMd = (0, ComponentDefs_1.createMetadata)({
         [`padding-horizontal-cell-first-${COMP}`]: "$space-5",
         [`padding-horizontal-cell-last-${COMP}`]: "$space-5",
         [`padding-vertical-cell-${COMP}`]: "$space-2",
-        [`padding-cell-${COMP}`]: `$padding-vertical-cell-${COMP} $padding-horizontal-cell-${COMP}`,
         [`thickness-border-cell-${COMP}`]: "1px",
         [`style-border-cell-${COMP}`]: "solid",
         [`border-cell-${COMP}`]: `$thickness-border-cell-${COMP} $style-border-cell-${COMP} $color-border-cell-${COMP}`,

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

@@ -38,60 +38,78 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Toggle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
+const react_1 = require("react");
+const react_2 = require("react");
+const react_3 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const Toggle_module_scss_1 = __importDefault(require("./Toggle.module.scss"));
 const constants_1 = require("../../components-core/constants");
 const misc_1 = require("../../components-core/utils/misc");
 const ItemWithLabel_1 = require("../FormItem/ItemWithLabel");
-exports.Toggle = (0, react_1.forwardRef)(function Toggle({ id, initialValue = false, value = false, enabled = true, style, readOnly, validationStatus = "none", updateState = constants_1.noop, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, variant = "checkbox", indeterminate = false, className, label, labelPosition = "start", labelWidth, labelBreak, required, registerComponentApi, }, forwardedRef) {
-    const innerRef = react_1.default.useRef(null);
-    (0, react_1.useEffect)(() => {
+exports.Toggle = (0, react_3.forwardRef)(function Toggle({ id, initialValue = false, value = false, enabled = true, style, readOnly, validationStatus = "none", updateState = constants_1.noop, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, variant = "checkbox", indeterminate = false, className, label, labelPosition = "start", labelWidth, labelBreak, required, registerComponentApi, inputRenderer, }, forwardedRef) {
+    const generatedId = (0, react_1.useId)();
+    const inputId = id || generatedId;
+    const innerRef = react_3.default.useRef(null);
+    (0, react_3.useEffect)(() => {
         updateState({ value: initialValue }, { initial: true });
     }, [initialValue, updateState]);
-    const updateValue = (0, react_1.useCallback)((value) => {
+    const updateValue = (0, react_3.useCallback)((value) => {
         var _a;
         if (((_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.checked) === value)
             return;
         updateState({ value });
         onDidChange(value);
     }, [onDidChange, updateState]);
-    const onInputChange = (0, react_1.useCallback)((event) => {
+    const onInputChange = (0, react_3.useCallback)((event) => {
         if (readOnly) {
             return;
         }
         updateState({ value: event.target.checked });
         onDidChange(event.target.checked);
     }, [onDidChange, readOnly, updateState]);
-    const handleOnFocus = (0, react_1.useCallback)(() => {
+    const handleOnFocus = (0, react_3.useCallback)(() => {
         onFocus === null || onFocus === void 0 ? void 0 : onFocus();
     }, [onFocus]);
-    const handleOnBlur = (0, react_1.useCallback)(() => {
+    const handleOnBlur = (0, react_3.useCallback)(() => {
         onBlur === null || onBlur === void 0 ? void 0 : onBlur();
     }, [onBlur]);
-    (0, react_1.useEffect)(() => {
+    (0, react_3.useEffect)(() => {
         if (typeof indeterminate === "boolean" && innerRef.current) {
             innerRef.current.indeterminate = indeterminate;
         }
     }, [indeterminate]);
-    const focus = (0, react_1.useCallback)(() => {
+    const focus = (0, react_3.useCallback)(() => {
         var _a;
         (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }, []);
     const setValue = (0, misc_1.useEvent)((newValue) => {
         updateValue(newValue);
     });
-    (0, react_1.useEffect)(() => {
+    (0, react_3.useEffect)(() => {
         registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
             focus,
             setValue,
         });
     }, [focus, registerComponentApi, setValue]);
-    return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { ref: forwardedRef, id: id, label: label, style: style, labelPosition: labelPosition, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, shrinkToLabel: true, labelStyle: { pointerEvents: readOnly ? "none" : undefined }, children: (0, jsx_runtime_1.jsx)("input", { ref: innerRef, type: "checkbox", role: variant, checked: value, disabled: !enabled, required: required, readOnly: readOnly, "aria-readonly": readOnly, "aria-checked": value, onChange: onInputChange, onFocus: handleOnFocus, onBlur: handleOnBlur, className: (0, classnames_1.default)(Toggle_module_scss_1.default.resetAppearance, className, {
-                [Toggle_module_scss_1.default.checkbox]: variant === "checkbox",
-                [Toggle_module_scss_1.default.switch]: variant === "switch",
-                [Toggle_module_scss_1.default.error]: validationStatus === "error",
-                [Toggle_module_scss_1.default.warning]: validationStatus === "warning",
-                [Toggle_module_scss_1.default.valid]: validationStatus === "valid",
-            }) }) }));
+    const input = (0, react_2.useMemo)(() => ((0, jsx_runtime_1.jsx)("input", { id: inputId, ref: innerRef, type: "checkbox", role: variant, checked: value, disabled: !enabled, required: required, readOnly: readOnly, "aria-readonly": readOnly, "aria-checked": value, onChange: onInputChange, onFocus: handleOnFocus, onBlur: handleOnBlur, className: (0, classnames_1.default)(Toggle_module_scss_1.default.resetAppearance, className, {
+            [Toggle_module_scss_1.default.checkbox]: variant === "checkbox",
+            [Toggle_module_scss_1.default.switch]: variant === "switch",
+            [Toggle_module_scss_1.default.error]: validationStatus === "error",
+            [Toggle_module_scss_1.default.warning]: validationStatus === "warning",
+            [Toggle_module_scss_1.default.valid]: validationStatus === "valid",
+        }) })), [
+        className,
+        enabled,
+        handleOnBlur,
+        handleOnFocus,
+        onInputChange,
+        readOnly,
+        required,
+        validationStatus,
+        value,
+        variant,
+    ]);
+    return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { ref: forwardedRef, id: inputId, label: label, style: style, labelPosition: labelPosition, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, isInputTemplateUsed: !!inputRenderer, shrinkToLabel: true, labelStyle: { pointerEvents: readOnly ? "none" : undefined }, children: inputRenderer ? ((0, jsx_runtime_1.jsxs)("label", { className: Toggle_module_scss_1.default.label, children: [(0, jsx_runtime_1.jsx)("div", { className: Toggle_module_scss_1.default.inputContainer, children: input }), inputRenderer({
+                    $checked: value,
+                })] })) : (input) }));
 });

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

@@ -157,7 +157,7 @@ const ComponentAdapter = (0, react_1.forwardRef)(function ComponentAdapter(_a, r
         return getResourceUrl(extractedUrl);
     }, [getResourceUrl, valueExtractor]);
     // --- Collect and compile the layout property values
-    const { cssProps, nonCssProps } = (0, react_1.useMemo)(() => {
+    const { cssProps } = (0, react_1.useMemo)(() => {
         const resolvedLayoutProps = {};
         descriptorHelper_1.layoutOptionKeys.forEach((key) => {
             if (safeNode.props && key in safeNode.props) {
@@ -175,7 +175,6 @@ const ComponentAdapter = (0, react_1.forwardRef)(function ComponentAdapter(_a, r
     // --- As compileLayout generates new cssProps and nonCssProps objects every time, we need to
     // --- memoize them using shallow comparison to avoid unnecessary re-renders.
     const stableLayoutCss = (0, hooks_1.useShallowCompareMemoize)(cssProps);
-    const stableLayoutNonCss = (0, hooks_1.useShallowCompareMemoize)(nonCssProps);
     // --- No special behavior, let's render the component according to its definition.
     let renderedNode = null;
     let renderingError = null;
@@ -194,7 +193,6 @@ const ComponentAdapter = (0, react_1.forwardRef)(function ComponentAdapter(_a, r
             renderChild: memoedRenderChild,
             registerComponentApi: memoedRegisterComponentApi,
             layoutCss: stableLayoutCss,
-            layoutNonCss: stableLayoutNonCss,
             layoutContext: layoutContextRef === null || layoutContextRef === void 0 ? void 0 : layoutContextRef.current,
             uid,
         };