xmlui 0.7.17 → 0.7.18

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

@@ -76,7 +76,6 @@ exports.Toggle = (0, react_1.forwardRef)(function Toggle({ id, initialValue = fa
     }, [indeterminate]);
     const focus = (0, react_1.useCallback)(() => {
         var _a;
-        console.log("kakakaka", innerRef.current);
         (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }, []);
     const setValue = (0, misc_1.useEvent)((newValue) => {
@@ -88,11 +87,11 @@ exports.Toggle = (0, react_1.forwardRef)(function Toggle({ id, initialValue = fa
             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, readOnly: readOnly, "aria-readonly": readOnly, onChange: onInputChange, onFocus: handleOnFocus, onBlur: handleOnBlur, className: (0, classnames_1.default)(Toggle_module_scss_1.default.resetAppearance, className, {
+    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",
-            }), "aria-checked": value }) }));
+            }) }) }));
 });

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.orderingValues = exports.scrollAnchoringNames = exports.scrollAnchoringValues = exports.validationStatusMd = exports.validationStatusNames = exports.validationStatusValues = exports.triggerPositionNames = exports.labelPositionMd = exports.labelPositionNames = exports.labelPositionValues = exports.placementMd = exports.placementNames = exports.statusColorMd = exports.statusColorNames = exports.iconPositionMd = exports.iconPositionNames = exports.iconPositionValues = exports.orientationOptionMd = exports.orientationOptionNames = exports.alignmentOptionMd = exports.alignmentOptionNames = exports.alignmentOptionValues = exports.buttonAriaNames = exports.buttonVariantMd = exports.buttonVariantNames = exports.defaultButtonType = exports.buttonTypesMd = exports.buttonTypeNames = exports.buttonTypeValues = exports.buttonThemeMd = exports.buttonThemeNames = exports.sizeNames = exports.sizeMd = exports.viewportSizeNames = exports.viewportSizeMd = exports.LinkTargetMd = exports.LinkTargetNames = void 0;
+exports.VariantPropsKeys = exports.variantOptionsMd = exports.TextVariantElement = exports.orderingValues = exports.scrollAnchoringNames = exports.scrollAnchoringValues = exports.validationStatusMd = exports.validationStatusNames = exports.validationStatusValues = exports.triggerPositionNames = exports.labelPositionMd = exports.labelPositionNames = exports.labelPositionValues = exports.placementMd = exports.placementNames = exports.statusColorMd = exports.statusColorNames = exports.iconPositionMd = exports.iconPositionNames = exports.iconPositionValues = exports.orientationOptionMd = exports.orientationOptionNames = exports.alignmentOptionMd = exports.alignmentOptionNames = exports.alignmentOptionValues = exports.buttonAriaNames = exports.buttonVariantMd = exports.buttonVariantNames = exports.defaultButtonType = exports.buttonTypesMd = exports.buttonTypeNames = exports.buttonTypeValues = exports.buttonThemeMd = exports.buttonThemeNames = exports.sizeNames = exports.sizeMd = exports.viewportSizeNames = exports.viewportSizeMd = exports.LinkTargetMd = exports.LinkTargetNames = void 0;
 exports.LinkTargetNames = ["_self", "_blank", "_parent", "_top"];
 exports.LinkTargetMd = [
     {
@@ -18,7 +18,7 @@ exports.LinkTargetMd = [
     {
         value: "_top",
         description: "The topmost browsing context. The link will open in the full body of the window. If no ancestors, behaves as _self.",
-    }
+    },
 ];
 // --- Available view sizes
 exports.viewportSizeMd = [
@@ -54,9 +54,18 @@ exports.buttonThemeMd = [
 exports.buttonTypeValues = ["button", "submit", "reset"];
 exports.buttonTypeNames = [...exports.buttonTypeValues];
 exports.buttonTypesMd = [
-    { value: "button", description: "Regular behavior that only executes logic if explicitly determined." },
-    { value: "submit", description: "The button submits the form data to the server. This is the default for buttons in a Form or NativeForm component." },
-    { value: "reset", description: "Resets all the controls to their initial values. Using it is ill advised for UX reasons." },
+    {
+        value: "button",
+        description: "Regular behavior that only executes logic if explicitly determined.",
+    },
+    {
+        value: "submit",
+        description: "The button submits the form data to the server. This is the default for buttons in a Form or NativeForm component.",
+    },
+    {
+        value: "reset",
+        description: "Resets all the controls to their initial values. Using it is ill advised for UX reasons.",
+    },
 ];
 exports.defaultButtonType = "button";
 // --- Available button variants
@@ -64,8 +73,14 @@ const buttonVariantValues = ["solid", "outlined", "ghost"];
 exports.buttonVariantNames = [...buttonVariantValues];
 exports.buttonVariantMd = [
     { value: "solid", description: "A button with a border and a filled background." },
-    { value: "outlined", description: "The button is displayed with a border and a transparent background." },
-    { value: "ghost", description: "A button with no border and fill. Only the label is visible; the background is colored when hovered or clicked." },
+    {
+        value: "outlined",
+        description: "The button is displayed with a border and a transparent background.",
+    },
+    {
+        value: "ghost",
+        description: "A button with no border and fill. Only the label is visible; the background is colored when hovered or clicked.",
+    },
 ];
 // --- Available button aria attributes
 const buttonAriaValues = ["aria-controls", "aria-expanded", "aria-disabled", "aria-label"];
@@ -75,8 +90,14 @@ exports.alignmentOptionValues = ["start", "center", "end"];
 exports.alignmentOptionNames = [...exports.alignmentOptionValues];
 exports.alignmentOptionMd = [
     { value: "center", description: "Place the content in the middle" },
-    { value: "start", description: "Justify the content to the left (to the right if in right-to-left)" },
-    { value: "end", description: "Justify the content to the right (to the left if in right-to-left)" },
+    {
+        value: "start",
+        description: "Justify the content to the left (to the right if in right-to-left)",
+    },
+    {
+        value: "end",
+        description: "Justify the content to the right (to the left if in right-to-left)",
+    },
 ];
 // --- Available orientation options
 const orientationOptionValues = ["horizontal", "vertical"];
@@ -89,8 +110,14 @@ exports.orientationOptionMd = [
 exports.iconPositionValues = ["start", "end"];
 exports.iconPositionNames = [...exports.iconPositionValues];
 exports.iconPositionMd = [
-    { value: "start", description: "The icon will appear at the start (left side when the left-to-right direction is set)" },
-    { value: "end", description: "The icon will appear at the end (right side when the left-to-right direction is set)" },
+    {
+        value: "start",
+        description: "The icon will appear at the start (left side when the left-to-right direction is set)",
+    },
+    {
+        value: "end",
+        description: "The icon will appear at the end (right side when the left-to-right direction is set)",
+    },
 ];
 // --- Available status colors
 const statusColorValues = [
@@ -107,10 +134,10 @@ exports.statusColorNames = [...statusColorValues];
 exports.statusColorMd = [
     { value: "primary", description: "Primary theme color, no default icon" },
     { value: "secondary", description: "Secondary theme color, no default icon" },
-    { value: "success", description: "Success theme color, \"success\" icon" },
-    { value: "danger", description: "Warning theme color, \"warning\" icon" },
-    { value: "warning", description: "Danger theme color, \"danger\" icon" },
-    { value: "info", description: "Info theme color, \"info\" icon" },
+    { value: "success", description: 'Success theme color, "success" icon' },
+    { value: "danger", description: 'Warning theme color, "warning" icon' },
+    { value: "warning", description: 'Danger theme color, "danger" icon' },
+    { value: "info", description: 'Info theme color, "info" icon' },
     { value: "light", description: "Light theme color, no default icon" },
     { value: "dark", description: "Dark theme color, no default icon" },
 ];
@@ -118,8 +145,14 @@ exports.statusColorMd = [
 const placementValues = ["start", "end", "top", "bottom"];
 exports.placementNames = [...placementValues];
 exports.placementMd = [
-    { value: "start", description: "The left side of the window (left-to-right) or the right side of the window (right-to-left)" },
-    { value: "end", description: "The right side of the window (left-to-right) or the left side of the window (right-to-left)" },
+    {
+        value: "start",
+        description: "The left side of the window (left-to-right) or the right side of the window (right-to-left)",
+    },
+    {
+        value: "end",
+        description: "The right side of the window (left-to-right) or the left side of the window (right-to-left)",
+    },
     { value: "top", description: "The top of the window" },
     { value: "bottom", description: "The bottom of the window" },
 ];
@@ -127,8 +160,14 @@ exports.placementMd = [
 exports.labelPositionValues = ["top", "start", "end", "bottom"];
 exports.labelPositionNames = [...exports.labelPositionValues];
 exports.labelPositionMd = [
-    { value: "start", description: "The left side of the input (left-to-right) or the right side of the input (right-to-left)" },
-    { value: "end", description: "The right side of the input (left-to-right) or the left side of the input (right-to-left)" },
+    {
+        value: "start",
+        description: "The left side of the input (left-to-right) or the right side of the input (right-to-left)",
+    },
+    {
+        value: "end",
+        description: "The right side of the input (left-to-right) or the left side of the input (right-to-left)",
+    },
     { value: "top", description: "The top of the input" },
     { value: "bottom", description: "The bottom of the input" },
 ];
@@ -149,3 +188,103 @@ exports.scrollAnchoringValues = ["top", "bottom"];
 exports.scrollAnchoringNames = [...exports.scrollAnchoringValues];
 // --- ordering
 exports.orderingValues = ["asc", "desc"];
+// --- text variants
+const TextVariantKeys = [
+    "abbr", // use <abbr>
+    "cite", // use <cite>
+    "code", // use <code>
+    "codefence", // use uniquely styled <![CDATA[
+    "deleted", // use <del>
+    "inserted", // use <ins>
+    "keyboard", // use <kbd>,
+    "marked", // use <mark>
+    "sample", // use <samp>
+    "sub", // use <sub>
+    "sup", // use <sup>
+    "var", // use <var>
+    "strong", // use <strong> element for content that is of greater importance (used in Markdown)
+    "em", // use <em> element changes the meaning of a sentence - as spoken emphasis does (used in Markdown)
+    "mono", // use monospace font with <![CDATA[
+    "title", // Title text in the particular context
+    "subtitle", // Subtitle text in the particular context
+    "small", // Small text in the particular context
+    "caption", // Caption text in the particular context
+    "placeholder", // Placeholder text in the particular context
+    "paragraph", // use <p>
+    "subheading", // use a H6 with some specific defaults
+    "tableheading", // use a H3 with some specific defaults
+    "secondary", // use a secondary text style
+];
+exports.TextVariantElement = {
+    abbr: "abbr",
+    cite: "cite",
+    code: "code",
+    codefence: "pre",
+    deleted: "del",
+    inserted: "ins",
+    keyboard: "kbd",
+    marked: "mark",
+    sample: "samp",
+    sub: "sub",
+    sup: "sup",
+    var: "var",
+    mono: "pre",
+    strong: "strong",
+    em: "em",
+    title: "span",
+    subtitle: "span",
+    small: "span",
+    caption: "span",
+    placeholder: "span",
+    paragraph: "p",
+    subheading: "h6",
+    tableheading: "h6",
+    secondary: "span",
+};
+exports.variantOptionsMd = [
+    { value: "abbr", description: "Represents an abbreviation or acronym" },
+    { value: "caption", description: "Represents the caption (or title) of a table" },
+    { value: "cite", description: "Is used to mark up the title of a cited work" },
+    { value: "code", description: "Represents a line of code" },
+    {
+        value: "codefence",
+        description: "Handles the display of code blocks if combined with a `code` variant",
+    },
+    { value: "deleted", description: "Represents text that has been deleted" },
+    { value: "em", description: "Marks text to stress emphasis" },
+    {
+        value: "inserted",
+        description: "Represents a range of text that has been added to a document",
+    },
+    {
+        value: "keyboard",
+        description: "Represents a span of text denoting textual user input from a keyboard or voice input",
+    },
+    {
+        value: "marked",
+        description: "Represents text which is marked or highlighted for reference or notation",
+    },
+    { value: "mono", description: "Text using a mono style font family" },
+    { value: "paragraph", description: "Represents a paragraph" },
+    {
+        value: "placeholder",
+        description: "Text that is mostly used as the placeholder style in input controls",
+    },
+    { value: "sample", description: "Represents sample (or quoted) output from a computer program" },
+    { value: "secondary", description: "Represents a bit dimmed secondary text" },
+    { value: "small", description: "Represents side-comments and small print" },
+    { value: "sub", description: "Specifies inline text as subscript" },
+    { value: "strong", description: "Contents have strong importance" },
+    { value: "subheading", description: "Indicates that the text is the subtitle in a heading" },
+    {
+        value: "subtitle",
+        description: "Indicates that the text is the subtitle of some other content",
+    },
+    { value: "sup", description: "Specifies inline text as superscript" },
+    { value: "tableheading", description: "Indicates that the text is a table heading" },
+    { value: "title", description: "Indicates that the text is the title of some other content" },
+    { value: "var", description: "Represents the name of a variable in a mathematical expression" },
+];
+const AbbreviationKeys = ["title"];
+const InsertedKeys = ["cite", "dateTime"];
+exports.VariantPropsKeys = [...AbbreviationKeys, ...InsertedKeys];

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

@@ -64,36 +64,10 @@ const ApiBoundComponent_1 = require("@components-core/ApiBoundComponent");
 const hooks_1 = require("./utils/hooks");
 const containers_1 = require("./abstractions/containers");
 const InspectorContext_1 = require("@components-core/InspectorContext");
-const slot_helpers_1 = require("@components/slot-helpers");
+const SlotItem_1 = require("@components/SlotItem");
 const descriptorHelper_1 = require("@components-core/descriptorHelper");
 const style_compiler_1 = require("../parsers/style-parser/style-compiler");
-function useEventHandler(eventName, lookupEvent, shouldSkip) {
-    const onEvent = shouldSkip
-        ? undefined
-        : lookupEvent(eventName);
-    const eventHandler = (0, react_1.useCallback)((event) => {
-        if (onEvent) {
-            event.stopPropagation();
-            onEvent(event);
-        }
-    }, [onEvent]);
-    return !onEvent ? undefined : eventHandler;
-}
-function useMouseEventHandlers(lookupEvent, shouldSkip) {
-    const onClick = useEventHandler("click", lookupEvent, shouldSkip);
-    const onMouseLeave = useEventHandler("mouseLeave", lookupEvent, shouldSkip);
-    const onMouseEnter = useEventHandler("mouseEnter", lookupEvent, shouldSkip);
-    const onDoubleClick = useEventHandler("doubleClick", lookupEvent, shouldSkip);
-    if (shouldSkip) {
-        return constants_1.EMPTY_OBJECT;
-    }
-    return {
-        onClick,
-        onMouseLeave,
-        onMouseEnter,
-        onDoubleClick,
-    };
-}
+const event_handlers_1 = require("./event-handlers");
 /**
  * This component's primary responsibility is to transform a particular component definition
  * into its React representation using the current rendering context.
@@ -125,7 +99,13 @@ const ComponentBed = (0, react_1.forwardRef)(function ComponentBed(_a, ref) {
     }, [registerComponentApi, uid]);
     // --- Obtain a function to update the component state
     const memoedUpdateState = (0, react_1.useCallback)((componentState) => {
-        dispatch(componentStateChanged(uid, componentState));
+        dispatch({
+            type: containers_1.ContainerActionKind.COMPONENT_STATE_CHANGED,
+            payload: {
+                uid,
+                state: componentState,
+            },
+        });
     }, [dispatch, uid]);
     // --- Get the tracked APIs of the compomnent
     const referenceTrackedApi = (0, hooks_1.useReferenceTrackedApi)(state);
@@ -142,6 +122,24 @@ const ComponentBed = (0, react_1.forwardRef)(function ComponentBed(_a, ref) {
     const memoedLookupAction = (0, react_1.useCallback)((action, actionOptions) => {
         return lookupAction(action, uid, actionOptions);
     }, [lookupAction, uid]);
+    // --- Obtain the component renderer and descriptor from the component registry
+    // --- Memoizes the renderChild function
+    const memoedRenderChild = (0, react_1.useCallback)((children, layoutContext, pRenderContext) => {
+        return renderChild(children, layoutContext, pRenderContext || parentRenderContext, uidInfoRef);
+    }, [renderChild, parentRenderContext, uidInfoRef]);
+    // --- Collect the API-bound properties and events of the component to determine
+    // --- if the component should be wrapped in an `ApiBoundComponent`
+    const apiBoundProps = (0, react_1.useMemo)(() => getApiBoundItems(safeNode.props, "DataSource", "DataSourceRef"), [safeNode.props]);
+    const apiBoundEvents = (0, react_1.useMemo)(() => getApiBoundItems(safeNode.events, "APICall", "FileDownload", "FileUpload"), [safeNode.events]);
+    const isApiBound = apiBoundProps.length > 0 || apiBoundEvents.length > 0;
+    // --- API-bound components provide helpful behavior out of the box, such as transforming API-bound
+    // --- events and properties. This extra functionality is implemented in `ApiBoundComponent`.
+    if (isApiBound) {
+        return ((0, jsx_runtime_1.jsx)(ApiBoundComponent_1.ApiBoundComponent, { uid: uid, renderChild: memoedRenderChild, node: safeNode, apiBoundEvents: apiBoundEvents, apiBoundProps: apiBoundProps, layoutContextRef: layoutContextRef, parentRendererContext: parentRenderContext }, safeNode.uid));
+    }
+    // --- Obtain the component renderer and descriptor from the component registry
+    const componentRegistry = (0, ComponentRegistryContext_1.useComponentRegistry)();
+    const { renderer, descriptor, isCompoundComponent } = componentRegistry.lookupComponentRenderer(safeNode.type) || {};
     // --- Obtain a function that can lookup an event handler, which is bound to a
     // --- particular event of this component instance
     const memoedLookupEventHandler = (0, react_1.useCallback)((eventName, actionOptions) => {
@@ -149,6 +147,8 @@ const ComponentBed = (0, react_1.forwardRef)(function ComponentBed(_a, ref) {
         const action = ((_a = safeNode.events) === null || _a === void 0 ? void 0 : _a[eventName]) || (actionOptions === null || actionOptions === void 0 ? void 0 : actionOptions.defaultHandler);
         return lookupAction(action, uid, Object.assign({ eventName }, actionOptions));
     }, [lookupAction, safeNode.events, uid]);
+    // --- Set up the mouse event handlers for the component
+    const mouseEventHandlers = (0, event_handlers_1.useMouseEventHandlers)(memoedLookupEventHandler, (descriptor === null || descriptor === void 0 ? void 0 : descriptor.nonVisual) || isApiBound);
     // --- Use the current theme to obtain resources and collect theme variables
     const { getResourceUrl, themeVars } = (0, ThemeContext_1.useTheme)();
     // --- Obtain a function that can extract a resource URL from a logical URL
@@ -156,14 +156,6 @@ const ComponentBed = (0, react_1.forwardRef)(function ComponentBed(_a, ref) {
         const extractedUrl = valueExtractor(url);
         return getResourceUrl(extractedUrl);
     }, [getResourceUrl, valueExtractor]);
-    // --- Obtain the component renderer and descriptor from the component registry
-    // --- Memoizes the renderChild function
-    const memoedRenderChild = (0, react_1.useCallback)((children, layoutContext, pRenderContext) => {
-        return renderChild(children, layoutContext, pRenderContext || parentRenderContext, uidInfoRef);
-    }, [renderChild, parentRenderContext, uidInfoRef]);
-    const apiBoundProps = (0, react_1.useMemo)(() => getApiBoundItems(safeNode.props, "DataSource", "DataSourceRef"), [safeNode.props]);
-    const apiBoundEvents = (0, react_1.useMemo)(() => getApiBoundItems(safeNode.events, "APICall", "FileDownload", "FileUpload"), [safeNode.events]);
-    const isApiBound = apiBoundProps.length > 0 || apiBoundEvents.length > 0;
     // --- Collect and compile the layout property values
     const { cssProps, nonCssProps } = (0, react_1.useMemo)(() => {
         const resolvedLayoutProps = {};
@@ -178,14 +170,6 @@ const ComponentBed = (0, react_1.forwardRef)(function ComponentBed(_a, ref) {
     // --- memoize them using shallow comparison to avoid unnecessary re-renders.
     const stableLayoutCss = (0, hooks_1.useShallowCompareMemoize)(cssProps);
     const stableLayoutNonCss = (0, hooks_1.useShallowCompareMemoize)(nonCssProps);
-    // --- API-bound components provide helpful behavior out of the box, such as transforming API-bound
-    // --- events and properties. This extra functionality is implemented in `ApiBoundComponent`.
-    if (isApiBound) {
-        return ((0, jsx_runtime_1.jsx)(ApiBoundComponent_1.ApiBoundComponent, { uid: uid, renderChild: memoedRenderChild, node: safeNode, apiBoundEvents: apiBoundEvents, apiBoundProps: apiBoundProps, layoutContextRef: layoutContextRef, parentRendererContext: parentRenderContext }, safeNode.uid));
-    }
-    const componentRegistry = (0, ComponentRegistryContext_1.useComponentRegistry)();
-    const { renderer, descriptor, isCompoundComponent } = componentRegistry.lookupComponentRenderer(safeNode.type) || {};
-    const mouseEventHandlers = useMouseEventHandlers(memoedLookupEventHandler, (descriptor === null || descriptor === void 0 ? void 0 : descriptor.nonVisual) || isApiBound);
     // --- No special behavior, let's render the component according to its definition.
     let renderedNode = null;
     let renderingError = null;
@@ -209,6 +193,8 @@ const ComponentBed = (0, react_1.forwardRef)(function ComponentBed(_a, ref) {
             uid,
         };
         if (safeNode.type === "Slot") {
+            // --- Transpose the children from the parent component to the slot in
+            // --- the compound component
             renderedNode = slotRenderer(rendererContext, parentRenderContext);
         }
         else {
@@ -252,8 +238,8 @@ const ComponentBed = (0, react_1.forwardRef)(function ComponentBed(_a, ref) {
     if (renderingError) {
         return ((0, jsx_runtime_1.jsx)(InvalidComponent_1.default, { errors: [renderingError], node: safeNode, children: renderedNode }));
     }
-    // --- If we have a single React node with forwarded reference, let's merge the "rest"
-    // --- properties with it.
+    // --- If we have a single React node with forwarded reference, or mouse events
+    // --- let's merge the "rest" properties with it.
     if ((ref || !(0, lodash_es_1.isEmpty)(mouseEventHandlers)) && renderedNode && react_1.default.isValidElement(renderedNode)) {
         // --- For radix UI/accessibility, read more here:
         // --- https://www.radix-ui.com/primitives/docs/guides/composition
@@ -262,35 +248,63 @@ const ComponentBed = (0, react_1.forwardRef)(function ComponentBed(_a, ref) {
     // --- If the rendering resulted in multiple React nodes, wrap them in a fragment.
     return react_1.default.isValidElement(renderedNode) ? renderedNode : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: renderedNode });
 });
+/**
+ * This function renders the content of a slot. If the slot is named, it looks for a template
+ * in the parent component to render. If the template is not found, it renders the default content
+ * of the slot.
+ */
 function slotRenderer({ node, extractValue, renderChild, lookupAction, layoutContext }, parentRenderContext) {
-    if (!parentRenderContext) {
-        return undefined;
+    // --- Get the template name from the slot
+    const templateName = extractValue.asOptionalString(node.props.name);
+    if (templateName && !templateName.endsWith("Template")) {
+        return ((0, jsx_runtime_1.jsx)(InvalidComponent_1.default, { node: node, errors: [
+                `Slot name '${templateName}' is not valid. ` +
+                    "A named slot should use a name ending with 'Template'.",
+            ] }));
     }
-    const templateName = extractValue(node.props.name);
-    if (templateName === undefined) {
-        return parentRenderContext.renderChild(parentRenderContext.children, layoutContext);
-    }
-    else {
-        let slotProps;
-        if (!(0, lodash_es_1.isEmpty)(node.props)) {
-            slotProps = {};
-            Object.keys(node.props).forEach((key) => {
-                if (key !== "name") {
-                    let extractedValue = extractValue(node.props[key], true);
-                    if (extractedValue === null || extractedValue === void 0 ? void 0 : extractedValue._ARROW_EXPR_) {
-                        extractedValue = lookupAction(extractedValue);
-                    }
-                    slotProps[key] = extractedValue;
+    let slotProps = null;
+    if (!(0, lodash_es_1.isEmpty)(node.props)) {
+        slotProps = {};
+        Object.keys(node.props).forEach((key) => {
+            if (key !== "name") {
+                let extractedValue = extractValue(node.props[key], true);
+                if (extractedValue === null || extractedValue === void 0 ? void 0 : extractedValue._ARROW_EXPR_) {
+                    extractedValue = lookupAction(extractedValue);
                 }
-            });
-        }
-        if (parentRenderContext.props[templateName]) {
-            return ((0, jsx_runtime_1.jsx)(slot_helpers_1.SlotItem, { node: parentRenderContext.props[templateName], renderChild: parentRenderContext.renderChild, slotProps: slotProps, layoutContext: layoutContext }));
+                slotProps[key] = extractedValue;
+            }
+        });
+    }
+    if (parentRenderContext) {
+        // --- We may use a named slot to get the content from the parent
+        if (templateName === undefined) {
+            // --- The slot is not named
+            if (!slotProps) {
+                // --- simply render the children from the parent
+                return parentRenderContext.renderChild(parentRenderContext.children, layoutContext);
+            }
+            else {
+                // --- The slot has properties; let's render the children with the slot properties
+                return ((0, jsx_runtime_1.jsx)(SlotItem_1.SlotItem, { node: parentRenderContext.children, renderChild: parentRenderContext.renderChild, slotProps: slotProps, layoutContext: layoutContext }));
+            }
         }
         else {
-            return ((0, jsx_runtime_1.jsx)(slot_helpers_1.SlotItem, { node: node.children, renderChild: renderChild, slotProps: slotProps, layoutContext: layoutContext }));
+            // --- We have a named slot with optional other properties; let's collect them
+            if (parentRenderContext.props[templateName]) {
+                // --- The parent provides a template to put into the slot. Let's use
+                // --- the parent's context to render the slot content.
+                return ((0, jsx_runtime_1.jsx)(SlotItem_1.SlotItem, { node: parentRenderContext.props[templateName], renderChild: parentRenderContext.renderChild, slotProps: slotProps, layoutContext: layoutContext }));
+            }
         }
     }
+    // --- No parent context, render the default slot content
+    if (node.children && node.children.length > 0) {
+        // --- The parent does not provide a template for the slot. Let's render
+        // --- the slot's default children.
+        return ((0, jsx_runtime_1.jsx)(SlotItem_1.SlotItem, { node: node.children, renderChild: renderChild, slotProps: slotProps !== null && slotProps !== void 0 ? slotProps : constants_1.EMPTY_OBJECT, layoutContext: layoutContext }));
+    }
+    // --- We do not render the named slots with names not ending with "Template"
+    return undefined;
 }
 /**
  * This function gets the API-bound component properties. A property is API-bound if its value is a
@@ -313,13 +327,4 @@ function getApiBoundItems(items, ...type) {
     }
     return ret;
 }
-function componentStateChanged(uid, state) {
-    return {
-        type: containers_1.ContainerActionKind.COMPONENT_STATE_CHANGED,
-        payload: {
-            uid,
-            state,
-        },
-    };
-}
 exports.default = ComponentBed;

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

@@ -121,7 +121,7 @@ exports.CompoundComponent = (0, react_1.forwardRef)(({ node, lookupSyncCallback,
         });
     }, [node.props]);
     const memoedParentRenderContext = (0, react_1.useMemo)(() => {
-        if ((!node.children || node.children.length === 0) && !hasTemplateProps) {
+        if (!hasTemplateProps && (!node.children || node.children.length === 0)) {
             return undefined;
         }
         return {
@@ -141,4 +141,5 @@ exports.CompoundComponent = (0, react_1.forwardRef)(({ node, lookupSyncCallback,
     }
     return react_1.default.isValidElement(ret) ? ret : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: ret });
 });
+// --- Display a name for the component in developer tools
 exports.CompoundComponent.displayName = "CompoundComponent";

package/dist/scripts/src/components-core/appContext/misc-utils.js

@@ -9,4 +9,5 @@ exports.miscellaneousUtils = {
     defaultTo: lodash_es_1.defaultTo,
     toHashObject: misc_1.toHashObject,
     findByField: misc_1.findByField,
+    distinct: misc_1.distinct
 };

package/dist/scripts/src/components-core/container/Container.js

@@ -463,7 +463,7 @@ const MemoizedContainer = (0, react_1.memo)((0, react_1.forwardRef)(function Con
             if (wrapWithFragment) {
                 // --- Add the `key` attribute to the child
                 if (react_1.default.isValidElement(renderedChild)) {
-                    // --- React can display this element                  
+                    // --- React can display this element
                     rendered = react_1.default.cloneElement(renderedChild, { key });
                 }
                 else {
@@ -476,7 +476,7 @@ const MemoizedContainer = (0, react_1.memo)((0, react_1.forwardRef)(function Con
         });
         // --- At this point we have a React node for each child
         if (renderedChildren.length === 1) {
-            // --- If we have a single (and valid React element) child, we compose its 
+            // --- If we have a single (and valid React element) child, we compose its
             // --- `ref` with the parent's `ref`. This allows the parent to access the child's
             // --- DOM node. Otherwise, we use the child as is.
             return ref && renderedChildren[0] && (0, react_1.isValidElement)(renderedChildren[0])
@@ -747,30 +747,13 @@ const ComponentContainer = (0, react_1.memo)((0, react_1.forwardRef)(function Co
  * nested components recursively.
  */
 function renderChild({ node, state, dispatch, appContext, lookupAction, lookupSyncCallback, registerComponentApi, renderChild, stateFieldPartChanged, layoutContext, parentRenderContext, memoedVarsRef, cleanup, uidInfoRef, }) {
-    var _a, _b;
+    var _a, _b, _c;
     // --- Render only visible components
     if (!(0, extractParam_1.shouldKeep)(node.when, state, appContext)) {
         return null;
     }
-    // --- There is a special case for rendering text. If we have a Slot with a
-    // --- single text node child, we want to render that in the context of the
-    // --- parent component. Otherwise, we would not be able to render this:
-    //
-    //  <Component name='MyComponent'>
-    //    <Markdown><Slot/></Markdown>
-    //  </Component>
-    //
-    //  and then
-    //
-    //  <MyComponent>hey lorem ipsum</MyComponent>
-    if (node.type === "Slot" && ((_a = parentRenderContext === null || parentRenderContext === void 0 ? void 0 : parentRenderContext.children) === null || _a === void 0 ? void 0 : _a.length) === 1) {
-        if (parentRenderContext.children[0].type === "TextNodeCData" ||
-            parentRenderContext.children[0].type === "TextNode") {
-            return parentRenderContext.renderChild(parentRenderContext.children);
-        }
-    }
     // --- We do not parse text nodes specified with CDATA to avoid whitespace collapsing
-    const nodeValue = (_b = node.props) === null || _b === void 0 ? void 0 : _b.value;
+    const nodeValue = (_a = node.props) === null || _a === void 0 ? void 0 : _a.value;
     if (node.type === "TextNodeCData") {
         return nodeValue !== null && nodeValue !== void 0 ? nodeValue : "";
     }
@@ -778,6 +761,45 @@ function renderChild({ node, state, dispatch, appContext, lookupAction, lookupSy
     if (node.type === "TextNode") {
         return (0, extractParam_1.extractParam)(state, nodeValue, appContext, true);
     }
+    // --- Rendering a Slot requires some preparations, as TextNode and
+    // --- TextNodeCData are virtual nodes. Also, slots may have default templates
+    // --- to render when no slot children are specified. The following section
+    // --- handles these cases.
+    if (node.type === "Slot") {
+        // --- Check for special Slot cases
+        let slotChildren;
+        const templateName = (_b = node.props) === null || _b === void 0 ? void 0 : _b.name;
+        console.log("templateName", templateName);
+        if (templateName) {
+            // --- Let's check the validity of the slot name
+            if (!templateName.endsWith("Template")) {
+                throw new Error(`Slot name '${templateName}' is not valid. ` +
+                    "A named slot should use a name ending with 'Template'.");
+            }
+            // --- Named slot: use a template property from the parent component
+            slotChildren = (_c = parentRenderContext === null || parentRenderContext === void 0 ? void 0 : parentRenderContext.props) === null || _c === void 0 ? void 0 : _c[templateName];
+        }
+        else {
+            // --- Children slot: use the children of the parent component
+            slotChildren = parentRenderContext === null || parentRenderContext === void 0 ? void 0 : parentRenderContext.children;
+        }
+        if (!slotChildren) {
+            // --- No children to render, let's try the default slot template (if there is any)
+            slotChildren = node.children;
+        }
+        if (slotChildren) {
+            const toRender = Array.isArray(slotChildren) ? slotChildren : [slotChildren];
+            // --- Check for the virtual nodes. At this point, parentRendererContext is
+            // --- undefined when the parent does not provide slot children. In this case,
+            // --- the ComponentBed component will render the default slot template.
+            if (toRender.length === 1 && parentRenderContext) {
+                if (toRender[0].type === "TextNodeCData" || toRender[0].type === "TextNode") {
+                    // --- Preserve the text and render it in the parent context
+                    return parentRenderContext.renderChild(toRender);
+                }
+            }
+        }
+    }
     // --- In other cases, we extract the component ID, and then render the component.
     // --- A component's ID is generally a string with identifier syntax. However, some
     // --- internal components have IDs with expressions, so we evaluate them.