xmlui 0.7.16 → 0.7.18

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

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Text = exports.VariantPropsKeys = exports.variantOptionsMd = void 0;
+exports.Text = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("react");
@@ -22,95 +22,15 @@ const Text_module_scss_1 = __importDefault(require("./Text.module.scss"));
 const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
 const css_utils_1 = require("@components-core/utils/css-utils");
 const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
-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
-];
-const 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];
+const abstractions_1 = require("@components/abstractions");
 exports.Text = (0, react_1.forwardRef)(function Text(_a, forwardedRef) {
     var { uid, variant, maxLines = 0, style, children, preserveLinebreaks, ellipses = true } = _a, variantSpecificProps = __rest(_a, ["uid", "variant", "maxLines", "style", "children", "preserveLinebreaks", "ellipses"]);
     const innerRef = (0, react_2.useRef)(null);
     const ref = forwardedRef ? (0, react_compose_refs_1.composeRefs)(innerRef, forwardedRef) : innerRef;
     const Element = (0, react_2.useMemo)(() => {
-        if (!variant || !TextVariantElement[variant])
+        if (!variant || !abstractions_1.TextVariantElement[variant])
             return "div"; //todo illesg, could be a span?
-        return TextVariantElement[variant];
+        return abstractions_1.TextVariantElement[variant];
     }, [variant]);
     return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Element, Object.assign({}, variantSpecificProps, { ref: ref, className: (0, classnames_1.default)([
                 Text_module_scss_1.default.text,

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

@@ -102,8 +102,5 @@ exports.TextBox = (0, react_1.forwardRef)(function TextBox({ id, type = "text",
                 [TextBox_module_scss_1.default.error]: validationStatus === "error",
                 [TextBox_module_scss_1.default.warning]: validationStatus === "warning",
                 [TextBox_module_scss_1.default.valid]: validationStatus === "valid",
-            }), tabIndex: -1, onFocus: () => {
-                var _a;
-                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            }, children: [(0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: startText, iconName: startIcon, className: TextBox_module_scss_1.default.adornment }), (0, jsx_runtime_1.jsx)("input", { id: id, type: type, className: (0, classnames_1.default)(TextBox_module_scss_1.default.input, { [TextBox_module_scss_1.default.readOnly]: readOnly }), disabled: !enabled, value: localValue, maxLength: maxLength, placeholder: placeholder, onChange: onInputChange, onFocus: handleOnFocus, onBlur: handleOnBlur, ref: inputRef, readOnly: readOnly, autoFocus: autoFocus, tabIndex: tabIndex, required: required }), (0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: endText, iconName: endIcon, className: TextBox_module_scss_1.default.adornment })] }) }));
+            }), tabIndex: -1, onFocus: focus, children: [(0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: startText, iconName: startIcon, className: TextBox_module_scss_1.default.adornment }), (0, jsx_runtime_1.jsx)("input", { id: id, type: type, className: (0, classnames_1.default)(TextBox_module_scss_1.default.input, { [TextBox_module_scss_1.default.readOnly]: readOnly }), disabled: !enabled, value: localValue, maxLength: maxLength, placeholder: placeholder, onChange: onInputChange, onFocus: handleOnFocus, onBlur: handleOnBlur, ref: inputRef, readOnly: readOnly, autoFocus: autoFocus, tabIndex: enabled ? tabIndex : -1, required: required }), (0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: endText, iconName: endIcon, className: TextBox_module_scss_1.default.adornment })] }) }));
 });

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";