xmlui 0.7.17 → 0.7.19

package/dist/scripts/package.json

@@ -1,6 +1,6 @@
 {
     "name": "xmlui",
-    "version": "0.7.17",
+    "version": "0.7.19",
     "sideEffects": false,
     "scripts": {
         "start-test-bed": "cd src/testing/infrastructure && xmlui start",

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

@@ -12,7 +12,7 @@ const themeVars_1 = require("@components-core/theming/themeVars");
 const base_utils_1 = require("@components-core/theming/themes/base-utils");
 const AppHeaderNative_1 = require("./AppHeaderNative");
 const metadata_helpers_1 = require("@components/metadata-helpers");
-const slot_helpers_1 = require("@components/slot-helpers");
+const SlotItem_1 = require("@components/SlotItem");
 const COMP = "AppHeader";
 exports.AppHeaderMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
@@ -49,7 +49,7 @@ exports.appHeaderComponentRenderer = (0, renderers_1.createComponentRenderer)(CO
     // --- Convert the plain (text) logo template into component definition
     const logoTemplate = node.props.logoTemplate || ((_a = node.slots) === null || _a === void 0 ? void 0 : _a.logoSlot);
     const titleTemplate = node.props.titleTemplate || ((_b = node.slots) === null || _b === void 0 ? void 0 : _b.titleSlot);
-    return ((0, jsx_runtime_1.jsx)(AppHeaderNative_1.AppContextAwareAppHeader, { profileMenu: renderChild(extractValue(node.props.profileMenuTemplate, true)), title: extractValue(node.props.title), showLogo: extractValue.asOptionalBoolean(node.props.showLogo, true), titleContent: titleTemplate && ((0, jsx_runtime_1.jsx)(slot_helpers_1.SlotItem, { node: titleTemplate, renderChild: renderChild, slotProps: { title: extractValue(node.props.title) } })), logoContent: renderChild(logoTemplate, {
+    return ((0, jsx_runtime_1.jsx)(AppHeaderNative_1.AppContextAwareAppHeader, { profileMenu: renderChild(extractValue(node.props.profileMenuTemplate, true)), title: extractValue(node.props.title), showLogo: extractValue.asOptionalBoolean(node.props.showLogo, true), titleContent: titleTemplate && ((0, jsx_runtime_1.jsx)(SlotItem_1.SlotItem, { node: titleTemplate, renderChild: renderChild, slotProps: { title: extractValue(node.props.title) } })), logoContent: renderChild(logoTemplate, {
             type: "Stack",
             orientation: "horizontal",
         }), style: layoutCss, className: layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.themeClassName, renderChild: renderChild, children: renderChild(node.children, {

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

@@ -19,6 +19,10 @@ exports.AppStateMd = (0, ComponentDefs_1.createMetadata)({
             `value, that value is immediately set. Multiple initial values may result in ` +
             `undesired initialization.`),
     },
+    apis: {
+        update: (0, ComponentDefs_1.d)("This method updates the application state object bound to the `AppState` instance. The " +
+            "function's single argument is an object that specifies the new state value."),
+    },
     nonVisual: true,
 });
 exports.appStateComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.AppStateMd, ({ node, extractValue, updateState, registerComponentApi }) => {

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

@@ -23,6 +23,9 @@ exports.CarouselMd = (0, ComponentDefs_1.createMetadata)({
         autoplay: (0, ComponentDefs_1.d)("This property indicates whether the carousel automatically scrolls.", null, null, "false"),
         loop: (0, ComponentDefs_1.d)("This property indicates whether the carousel loops.", null, null, "false"),
         startIndex: (0, ComponentDefs_1.d)("This property indicates the index of the first slide to display.", null, null, "0"),
+        transitionDuration: (0, ComponentDefs_1.d)("This property specifies the duration of the transition between slides."),
+        autoplayInterval: (0, ComponentDefs_1.d)("This property specifies the interval between autoplay transitions."),
+        stopAutoplayOnInteraction: (0, ComponentDefs_1.d)("This property indicates whether autoplay stops on interaction."),
         prevIcon: (0, ComponentDefs_1.d)("This property specifies the icon to display for the previous control."),
         nextIcon: (0, ComponentDefs_1.d)("This property specifies the icon to display for the next control."),
         keyboard: (0, ComponentDefs_1.d)("This property indicates whether the carousel responds to keyboard events."),
@@ -40,9 +43,9 @@ exports.CarouselMd = (0, ComponentDefs_1.createMetadata)({
     themeVars: (0, themeVars_1.parseScssVar)(Carousel_module_scss_1.default.themeVars),
     defaultThemeVars: {
         [`color-bg-control-${COMP}`]: "$color-primary",
-        [`color-text-control-${COMP}`]: "$color-primary",
+        [`color-text-control-${COMP}`]: "$color-text",
         [`color-bg-control-hover-${COMP}`]: "$color-primary",
-        [`color-text-control-hover-${COMP}`]: "$color-primary",
+        [`color-text-control-hover-${COMP}`]: "$color-text",
         [`color-bg-control-active-${COMP}`]: "$color-primary",
         [`color-bg-control-disabled-${COMP}`]: "$color-surface-200",
         [`color-text-control-disabled-${COMP}`]: "$color-text-disabled",
@@ -63,6 +66,6 @@ exports.CarouselMd = (0, ComponentDefs_1.createMetadata)({
     },
 });
 exports.carouselComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.CarouselMd, ({ node, renderChild, layoutCss, extractValue, lookupEventHandler, registerComponentApi }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    return ((0, jsx_runtime_1.jsx)(CarouselNative_1.CarouselComponent, { style: layoutCss, indicators: extractValue.asOptionalBoolean((_a = node.props) === null || _a === void 0 ? void 0 : _a.indicators), controls: extractValue.asOptionalBoolean((_b = node.props) === null || _b === void 0 ? void 0 : _b.controls), orientation: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.orientation), onDisplayDidChange: lookupEventHandler("displayDidChange"), autoplay: extractValue.asOptionalBoolean((_d = node.props) === null || _d === void 0 ? void 0 : _d.autoplay), registerComponentApi: registerComponentApi, loop: extractValue.asOptionalBoolean((_e = node.props) === null || _e === void 0 ? void 0 : _e.loop), startIndex: extractValue.asOptionalNumber((_f = node.props) === null || _f === void 0 ? void 0 : _f.startIndex), prevIcon: extractValue((_g = node.props) === null || _g === void 0 ? void 0 : _g.prevIcon), nextIcon: extractValue((_h = node.props) === null || _h === void 0 ? void 0 : _h.nextIcon), keyboard: extractValue.asOptionalBoolean((_j = node.props) === null || _j === void 0 ? void 0 : _j.keyboard), children: renderChild(node.children) }));
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    return ((0, jsx_runtime_1.jsx)(CarouselNative_1.CarouselComponent, { style: layoutCss, stopAutoplayOnInteraction: extractValue.asOptionalBoolean((_a = node.props) === null || _a === void 0 ? void 0 : _a.stopAutoplayOnInteraction), autoplayInterval: extractValue.asOptionalNumber((_b = node.props) === null || _b === void 0 ? void 0 : _b.autoplayInterval), transitionDuration: extractValue.asOptionalNumber((_c = node.props) === null || _c === void 0 ? void 0 : _c.transitionDuration), indicators: extractValue.asOptionalBoolean((_d = node.props) === null || _d === void 0 ? void 0 : _d.indicators), controls: extractValue.asOptionalBoolean((_e = node.props) === null || _e === void 0 ? void 0 : _e.controls), orientation: extractValue((_f = node.props) === null || _f === void 0 ? void 0 : _f.orientation), onDisplayDidChange: lookupEventHandler("displayDidChange"), autoplay: extractValue.asOptionalBoolean((_g = node.props) === null || _g === void 0 ? void 0 : _g.autoplay), registerComponentApi: registerComponentApi, loop: extractValue.asOptionalBoolean((_h = node.props) === null || _h === void 0 ? void 0 : _h.loop), startIndex: extractValue.asOptionalNumber((_j = node.props) === null || _j === void 0 ? void 0 : _j.startIndex), prevIcon: extractValue((_k = node.props) === null || _k === void 0 ? void 0 : _k.prevIcon), nextIcon: extractValue((_l = node.props) === null || _l === void 0 ? void 0 : _l.nextIcon), keyboard: extractValue.asOptionalBoolean((_m = node.props) === null || _m === void 0 ? void 0 : _m.keyboard), children: renderChild(node.children) }));
 });

package/dist/scripts/src/components/Carousel/CarouselContext.js

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCarousel = exports.CarouselContext = void 0;
+exports.useCarouselContextValue = useCarouselContextValue;
+const react_1 = require("react");
+const immer_1 = __importDefault(require("immer"));
+exports.CarouselContext = (0, react_1.createContext)({
+    register: (column) => { },
+    unRegister: (id) => { },
+});
+const useCarousel = () => {
+    const context = (0, react_1.useContext)(exports.CarouselContext);
+    if (!context) {
+        throw new Error("useCarousel must be used within a Carousel");
+    }
+    return context;
+};
+exports.useCarousel = useCarousel;
+function useCarouselContextValue() {
+    const [carouselItems, setCarouselItems] = (0, react_1.useState)([]);
+    const carouselContextValue = (0, react_1.useMemo)(() => {
+        return {
+            register: (column) => {
+                setCarouselItems((0, immer_1.default)((draft) => {
+                    const existing = draft.findIndex((col) => col.id === column.id);
+                    if (existing < 0) {
+                        draft.push(column);
+                    }
+                    else {
+                        draft[existing] = column;
+                    }
+                }));
+            },
+            unRegister: (id) => {
+                setCarouselItems((0, immer_1.default)((draft) => {
+                    return draft.filter((col) => col.id !== id);
+                }));
+            },
+        };
+    }, [setCarouselItems]);
+    return {
+        carouselItems,
+        carouselContextValue,
+    };
+}

package/dist/scripts/src/components/Carousel/CarouselItem.js

@@ -9,8 +9,5 @@ const COMP = "CarouselItem";
 exports.CarouselItemMd = (0, ComponentDefs_1.createMetadata)({});
 exports.carouselItemComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.CarouselItemMd, (rendererContext) => {
     const { node, renderChild } = rendererContext;
-    return (0, jsx_runtime_1.jsx)(CarouselItemNative_1.CarouselItemComponent, { content: renderChild(node.children, {
-            type: "Stack",
-            orientation: "vertical",
-        }) });
+    return (0, jsx_runtime_1.jsx)(CarouselItemNative_1.CarouselItemComponent, { children: renderChild(node.children) });
 });

package/dist/scripts/src/components/Carousel/CarouselItemNative.js

@@ -1,13 +1,23 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CarouselItemComponent = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
-const Carousel_module_scss_1 = __importDefault(require("@components/Carousel/Carousel.module.scss"));
-exports.CarouselItemComponent = (0, react_1.forwardRef)(function CarouselItemComponent({ content, style }, forwardedRef) {
-    return ((0, jsx_runtime_1.jsx)("div", { style: style, ref: forwardedRef, role: "group", "aria-roledescription": "slide", className: (0, classnames_1.default)(Carousel_module_scss_1.default.carouselItem), children: (0, jsx_runtime_1.jsx)("div", { className: Carousel_module_scss_1.default.innerWrapper, children: content }) }));
+const CarouselContext_1 = require("@components/Carousel/CarouselContext");
+exports.CarouselItemComponent = (0, react_1.forwardRef)(function CarouselItemComponent({ children, style }, forwardedRef) {
+    const id = (0, react_1.useId)();
+    const { register, unRegister } = (0, CarouselContext_1.useCarousel)();
+    (0, react_1.useEffect)(() => {
+        register({
+            children,
+            style,
+            ref: forwardedRef,
+            id,
+        });
+    }, [id, children, style, register, forwardedRef]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            unRegister(id);
+        };
+    }, [id, unRegister]);
+    return null;
 });

package/dist/scripts/src/components/Carousel/CarouselNative.js

@@ -47,24 +47,32 @@ const IconNative_1 = __importDefault(require("@components/Icon/IconNative"));
 const constants_1 = require("@components-core/constants");
 const embla_carousel_autoplay_1 = __importDefault(require("embla-carousel-autoplay"));
 const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
-exports.CarouselComponent = (0, react_1.forwardRef)(function CarouselComponent({ orientation = "horizontal", children, style, indicators = true, onDisplayDidChange = constants_1.noop, autoplay = false, controls = true, loop = false, startIndex = 0, prevIcon, nextIcon, registerComponentApi, }, forwardedRef) {
+const CarouselContext_1 = require("@components/Carousel/CarouselContext");
+exports.CarouselComponent = (0, react_1.forwardRef)(function CarouselComponent({ orientation = "horizontal", children, style, indicators = true, onDisplayDidChange = constants_1.noop, autoplay = false, controls = true, loop = false, startIndex = 0, prevIcon, nextIcon, transitionDuration = 25, autoplayInterval = 5000, stopAutoplayOnInteraction = true, registerComponentApi, }, forwardedRef) {
     const referenceElement = (0, react_1.useRef)(null);
     const [activeSlide, setActiveSlide] = (0, react_1.useState)(0);
     const [plugins, setPlugins] = (0, react_1.useState)([]);
     const [isPlaying, setIsPlaying] = (0, react_1.useState)(false);
+    const { carouselContextValue, carouselItems } = (0, CarouselContext_1.useCarouselContextValue)();
     const ref = forwardedRef ? (0, react_compose_refs_1.composeRefs)(referenceElement, forwardedRef) : referenceElement;
     const [carouselRef, api] = (0, embla_carousel_react_1.default)({
         axis: orientation === "horizontal" ? "x" : "y",
         loop,
         startIndex,
+        duration: transitionDuration,
     }, plugins);
     const prevIconName = prevIcon || orientation === "horizontal" ? "arrowleft" : "arrowup";
     const nextIconName = nextIcon || orientation === "horizontal" ? "arrowright" : "arrowdown";
     (0, react_1.useEffect)(() => {
         if (autoplay) {
-            setPlugins([(0, embla_carousel_autoplay_1.default)()]);
+            setPlugins([
+                (0, embla_carousel_autoplay_1.default)({
+                    delay: autoplayInterval,
+                    stopOnInteraction: stopAutoplayOnInteraction,
+                }),
+            ]);
         }
-    }, [autoplay]);
+    }, [autoplayInterval, autoplay, stopAutoplayOnInteraction]);
     const toggleAutoplay = (0, react_1.useCallback)(() => {
         var _a;
         const autoplay = (_a = api === null || api === void 0 ? void 0 : api.plugins()) === null || _a === void 0 ? void 0 : _a.autoplay;
@@ -98,7 +106,7 @@ exports.CarouselComponent = (0, react_1.forwardRef)(function CarouselComponent({
         setActiveSlide(activeIndex);
         setCanScrollPrev(api.canScrollPrev());
         setCanScrollNext(api.canScrollNext());
-    }, []);
+    }, [onDisplayDidChange]);
     const scrollPrev = (0, react_1.useCallback)(() => {
         if (api) {
             api === null || api === void 0 ? void 0 : api.scrollPrev();
@@ -128,7 +136,7 @@ exports.CarouselComponent = (0, react_1.forwardRef)(function CarouselComponent({
                 scrollNext();
             }
         }
-    }, [scrollPrev, scrollNext]);
+    }, [orientation, scrollPrev, scrollNext]);
     (0, react_1.useEffect)(() => {
         registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
             scrollTo,
@@ -143,6 +151,7 @@ exports.CarouselComponent = (0, react_1.forwardRef)(function CarouselComponent({
             return;
         }
         onSelect(api);
+        api.on("init", onSelect);
         api.on("reInit", onSelect);
         api.on("select", onSelect);
         return () => {
@@ -154,10 +163,10 @@ exports.CarouselComponent = (0, react_1.forwardRef)(function CarouselComponent({
             referenceElement.current.addEventListener("keydown", handleKeyDown);
         }
     }, [ref, handleKeyDown]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: style, ref: ref, className: (0, classnames_1.default)(Carousel_module_scss_1.default.carousel), role: "region", tabIndex: -1, "aria-roledescription": "carousel", children: [(0, jsx_runtime_1.jsx)("div", { ref: carouselRef, className: Carousel_module_scss_1.default.carouselContentWrapper, children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(Carousel_module_scss_1.default.carouselContent, {
-                        [Carousel_module_scss_1.default.horizontal]: orientation === "horizontal",
-                        [Carousel_module_scss_1.default.vertical]: orientation === "vertical",
-                    }), children: children }) }), controls && ((0, jsx_runtime_1.jsxs)("div", { className: Carousel_module_scss_1.default.controls, children: [autoplay && ((0, jsx_runtime_1.jsx)("button", { className: Carousel_module_scss_1.default.controlButton, onClick: toggleAutoplay, children: isPlaying ? (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "pause" }) : (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "play" }) })), (0, jsx_runtime_1.jsx)("button", { className: Carousel_module_scss_1.default.controlButton, disabled: !canScrollPrev, onClick: scrollPrev, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: prevIconName }) }), (0, jsx_runtime_1.jsx)("button", { className: Carousel_module_scss_1.default.controlButton, onClick: scrollNext, disabled: !canScrollNext, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: nextIconName }) })] })), indicators && ((0, jsx_runtime_1.jsx)("div", { className: Carousel_module_scss_1.default.indicators, children: React.Children.map(children, (_, index) => ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => scrollTo(index), className: (0, classnames_1.default)(Carousel_module_scss_1.default.indicator, {
-                        [Carousel_module_scss_1.default.active]: index === activeSlide,
-                    }), "aria-current": index === activeSlide }, index))) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(CarouselContext_1.CarouselContext.Provider, { value: carouselContextValue, children: [children, (0, jsx_runtime_1.jsxs)("div", { style: style, ref: ref, className: (0, classnames_1.default)(Carousel_module_scss_1.default.carousel), role: "region", tabIndex: -1, "aria-roledescription": "carousel", children: [(0, jsx_runtime_1.jsx)("div", { ref: carouselRef, className: Carousel_module_scss_1.default.carouselContentWrapper, children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(Carousel_module_scss_1.default.carouselContent, {
+                                [Carousel_module_scss_1.default.horizontal]: orientation === "horizontal",
+                                [Carousel_module_scss_1.default.vertical]: orientation === "vertical",
+                            }), children: carouselItems.map((item, index) => ((0, jsx_runtime_1.jsx)("div", { role: "group", "aria-roledescription": "slide", className: (0, classnames_1.default)(Carousel_module_scss_1.default.carouselItem), children: (0, jsx_runtime_1.jsx)("div", { className: Carousel_module_scss_1.default.innerWrapper, ref: item.ref, style: item.style, children: item.children }) }, item.id))) }) }), controls && ((0, jsx_runtime_1.jsxs)("div", { className: Carousel_module_scss_1.default.controls, children: [autoplay && ((0, jsx_runtime_1.jsx)("button", { className: Carousel_module_scss_1.default.controlButton, onClick: toggleAutoplay, children: isPlaying ? (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "pause" }) : (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "play" }) })), (0, jsx_runtime_1.jsx)("button", { className: Carousel_module_scss_1.default.controlButton, disabled: !canScrollPrev, onClick: scrollPrev, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: prevIconName }) }), (0, jsx_runtime_1.jsx)("button", { className: Carousel_module_scss_1.default.controlButton, onClick: scrollNext, disabled: !canScrollNext, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: nextIconName }) })] })), indicators && ((0, jsx_runtime_1.jsx)("div", { className: Carousel_module_scss_1.default.indicators, children: carouselItems.map((_, index) => ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => scrollTo(index), className: (0, classnames_1.default)(Carousel_module_scss_1.default.indicator, {
+                                [Carousel_module_scss_1.default.active]: index === activeSlide,
+                            }), "aria-current": index === activeSlide }, index))) }))] })] }));
 });

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

@@ -108,7 +108,6 @@ const APICall_2 = require("@components/APICall/APICall");
 const Option_1 = require("@components/Option/Option");
 const AutoComplete_1 = require("@components/AutoComplete/AutoComplete");
 const Backdrop_1 = require("./Backdrop/Backdrop");
-const Animation_1 = require("@components/Animation/Animation");
 /**
  * The framework has a specialized component concept, the "property holder
  * component." These components only hold property values but do not render
@@ -343,9 +342,6 @@ class ComponentRegistry {
         this.registerComponentRenderer(Theme_1.themeComponentRenderer);
         this.registerComponentRenderer(AppState_1.appStateComponentRenderer);
         this.registerComponentRenderer(APICall_2.apiCallRenderer);
-        this.registerComponentRenderer(Animation_1.animationComponentRenderer);
-        this.registerComponentRenderer(Animation_1.fadeInAnimationRenderer);
-        this.registerComponentRenderer(Animation_1.slideInAnimationRenderer);
         // --- Added after tabler-clone review
         this.registerCompoundComponentRenderer(PageHeader_1.pageHeaderRenderer);
         this.registerCompoundComponentRenderer(TrendLabel_1.trendLabelRenderer);

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

@@ -40,6 +40,15 @@ exports.MarkdownMd = (0, ComponentDefs_1.createMetadata)({
     },
 });
 exports.markdownComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.MarkdownMd, ({ node, extractValue, renderChild, layoutCss }) => {
-    const content = extractValue.asString(node.props.content);
-    return ((0, jsx_runtime_1.jsx)(MarkdownNative_1.Markdown, { style: layoutCss, removeIndents: extractValue.asOptionalBoolean(node.props.removeIndents, false), children: content || renderChild(node.children) }));
+    var _a;
+    let renderedChildren = extractValue.asString(node.props.content);
+    if (!renderedChildren) {
+        ((_a = node.children) !== null && _a !== void 0 ? _a : []).forEach((child) => {
+            const renderedChild = renderChild(child);
+            if (typeof renderedChild === "string") {
+                renderedChildren += renderedChild;
+            }
+        });
+    }
+    return ((0, jsx_runtime_1.jsx)(MarkdownNative_1.Markdown, { style: layoutCss, removeIndents: extractValue.asOptionalBoolean(node.props.removeIndents, false), children: renderedChildren }));
 });

package/dist/scripts/src/components/NumberBox/NumberBoxNative.js

@@ -288,7 +288,7 @@ exports.NumberBox = (0, react_1.forwardRef)(function NumberBox({ id, value, init
             }), 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: NumberBox_module_scss_1.default.adornment }), (0, jsx_runtime_1.jsx)("input", { id: id, type: "text", inputMode: "numeric", className: (0, classnames_1.default)(NumberBox_module_scss_1.default.input, { [NumberBox_module_scss_1.default.readOnly]: readOnly }), disabled: !enabled, value: valueStrRep, step: step, placeholder: placeholder, onChange: onInputChange, onFocus: handleOnFocus, onBlur: handleOnBlur, onBeforeInput: handleOnBeforeInput, onKeyDown: handleOnKey, readOnly: readOnly, ref: inputRef, autoFocus: autoFocus, maxLength: maxLength, required: required, "aria-required": required }), (0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: endText, iconName: endIcon, className: NumberBox_module_scss_1.default.adornment }), hasSpinBox && ((0, jsx_runtime_1.jsxs)("div", { className: NumberBox_module_scss_1.default.spinnerBox, children: [(0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { "data-spinner": "up", type: "button", variant: "ghost", themeColor: "secondary", tabIndex: -1, className: NumberBox_module_scss_1.default.spinnerButton, disabled: !enabled || readOnly, ref: upButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: "chevronup", size: "sm" }) }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { "data-spinner": "down", type: "button", tabIndex: -1, variant: "ghost", themeColor: "secondary", className: NumberBox_module_scss_1.default.spinnerButton, disabled: !enabled || readOnly, ref: downButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: "chevrondown", size: "sm" }) })] }))] }) }));
+            }, children: [(0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: startText, iconName: startIcon, className: NumberBox_module_scss_1.default.adornment }), (0, jsx_runtime_1.jsx)("input", { id: id, type: "text", inputMode: "numeric", className: (0, classnames_1.default)(NumberBox_module_scss_1.default.input, { [NumberBox_module_scss_1.default.readOnly]: readOnly }), disabled: !enabled, value: valueStrRep, step: step, placeholder: placeholder, onChange: onInputChange, onFocus: handleOnFocus, onBlur: handleOnBlur, onBeforeInput: handleOnBeforeInput, onKeyDown: handleOnKey, readOnly: readOnly, ref: inputRef, autoFocus: autoFocus, maxLength: maxLength, required: required }), (0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: endText, iconName: endIcon, className: NumberBox_module_scss_1.default.adornment }), hasSpinBox && ((0, jsx_runtime_1.jsxs)("div", { className: NumberBox_module_scss_1.default.spinnerBox, children: [(0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { "data-spinner": "up", type: "button", variant: "ghost", themeColor: "secondary", tabIndex: -1, className: NumberBox_module_scss_1.default.spinnerButton, disabled: !enabled || readOnly, ref: upButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: "chevronup", size: "sm" }) }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { "data-spinner": "down", type: "button", tabIndex: -1, variant: "ghost", themeColor: "secondary", className: NumberBox_module_scss_1.default.spinnerButton, disabled: !enabled || readOnly, ref: downButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: "chevrondown", size: "sm" }) })] }))] }) }));
 });
 function applyStep(valueStrRep, step, min, max, integersOnly) {
     const currentValue = (0, numberbox_abstractions_1.toUsableNumber)(valueStrRep, integersOnly);

package/dist/scripts/src/components/{slot-helpers.js → SlotItem.js}

@@ -5,18 +5,27 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const constants_1 = require("@components-core/constants");
 const hooks_1 = require("@components-core/utils/hooks");
+/**
+ * This React component wraps the slot content defined in a parent component into a container.
+ * This container may contain context values pushed from a compound component back to
+ * the parent.
+ */
 exports.SlotItem = (0, react_1.memo)(({ node, renderChild, layoutContext, slotProps = constants_1.EMPTY_OBJECT }) => {
     const shallowMemoedSlotProps = (0, hooks_1.useShallowCompareMemoize)(slotProps);
+    // --- Transform all Slot properties into context values so that they can be 
+    // --- used in the slot content (in the parent component)
     const nodeWithItem = (0, react_1.useMemo)(() => {
         const templateProps = {};
         Object.entries(shallowMemoedSlotProps).forEach(([key, value]) => {
             templateProps["$" + key] = value;
         });
+        // --- Create a container for the slot content with the cotext values
         return {
             type: "Container",
             contextVars: templateProps,
             children: Array.isArray(node) ? node : [node],
         };
     }, [node, shallowMemoedSlotProps]);
+    // --- Render the slot content
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: renderChild(nodeWithItem, layoutContext) });
 });

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

@@ -12,9 +12,11 @@ const constants_1 = require("@components-core/constants");
 exports.TabContext = (0, react_1.createContext)({
     register: (tabItem) => { },
     unRegister: (id) => { },
+    activeTabId: "",
 });
 function useTabContextValue() {
     const [tabItems, setTabItems] = (0, react_1.useState)(constants_1.EMPTY_ARRAY);
+    const [activeTabId, setActiveTabId] = (0, react_1.useState)("");
     const tabContextValue = (0, react_1.useMemo)(() => {
         return {
             register: (column) => {
@@ -33,8 +35,10 @@ function useTabContextValue() {
                     return draft.filter((col) => col.id !== id);
                 }));
             },
+            activeTabId,
+            setActiveTabId,
         };
-    }, [setTabItems]);
+    }, [activeTabId]);
     return {
         tabItems,
         tabContextValue,

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

@@ -16,5 +16,5 @@ exports.TabItemMd = (0, ComponentDefs_1.createMetadata)({
 });
 exports.tabItemComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.TabItemMd, (rendererContext) => {
     const { node, renderChild, extractValue } = rendererContext;
-    return ((0, jsx_runtime_1.jsx)(TabItemNative_1.TabItemComponent, { label: extractValue(node.props.label), content: renderChild(node.children) }));
+    return ((0, jsx_runtime_1.jsx)(TabItemNative_1.TabItemComponent, { label: extractValue(node.props.label), children: renderChild(node.children) }));
 });

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

@@ -9,16 +9,22 @@ const react_1 = require("react");
 const Tabs_module_scss_1 = __importDefault(require("@components/Tabs/Tabs.module.scss"));
 const react_tabs_1 = require("@radix-ui/react-tabs");
 const TabContext_1 = require("@components/Tabs/TabContext");
-exports.TabItemComponent = (0, react_1.forwardRef)(function TabItemComponent(props, forwardedRef) {
+exports.TabItemComponent = (0, react_1.forwardRef)(function TabItemComponent({ children, label, style }, forwardedRef) {
     const id = (0, react_1.useId)();
-    const { register, unRegister } = (0, TabContext_1.useTabContext)();
+    const { register, unRegister, activeTabId } = (0, TabContext_1.useTabContext)();
     (0, react_1.useEffect)(() => {
-        register(Object.assign(Object.assign({}, props), { id }));
-    }, [id, props, register]);
+        register({
+            children,
+            label,
+            id,
+        });
+    }, [id, children, label, register]);
     (0, react_1.useEffect)(() => {
         return () => {
             unRegister(id);
         };
     }, [id, unRegister]);
-    return ((0, jsx_runtime_1.jsx)(react_tabs_1.Content, { value: id, className: Tabs_module_scss_1.default.tabsContent, ref: forwardedRef, children: props.content }, id));
+    if (activeTabId !== id)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(react_tabs_1.Content, { value: id, className: Tabs_module_scss_1.default.tabsContent, ref: forwardedRef, style: style, children: children }, id));
 });

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

@@ -49,17 +49,24 @@ exports.Tabs = (0, react_1.forwardRef)(function Tabs({ activeTab = 0, orientatio
     const currentTab = (0, react_1.useMemo)(() => {
         var _a;
         return (_a = tabItems[activeIndex]) === null || _a === void 0 ? void 0 : _a.id;
-    }, [activeIndex]);
+    }, [activeIndex, tabItems]);
     (0, react_1.useEffect)(() => {
-        const _activeTab = activeTab - 1;
-        const maxIndex = tabItems.length > 0 ? tabItems.length - 1 : 0;
-        const _newActiveTab = _activeTab < 0 ? 0 : _activeTab > maxIndex ? maxIndex : _activeTab;
-        setActiveIndex(_newActiveTab);
-    }, [tabItems, activeTab]);
+        tabContextValue.setActiveTabId(currentTab);
+    }, [currentTab, tabContextValue]);
+    (0, react_1.useEffect)(() => {
+        if (activeTab !== undefined) {
+            setActiveIndex(() => {
+                const maxIndex = tabItems.length - 1;
+                const newIndex = activeTab - 1;
+                return newIndex < 0 ? 0 : newIndex > maxIndex ? maxIndex : newIndex;
+            });
+        }
+    }, [activeTab, tabItems.length]);
     const next = (0, misc_1.useEvent)(() => {
-        const nextIndex = parseInt(currentTab) + 1;
-        const maxIndex = tabItems.length > 0 ? tabItems.length - 1 : 0;
-        setActiveIndex(nextIndex > maxIndex ? 0 : nextIndex);
+        setActiveIndex((prevIndex) => {
+            const maxIndex = tabItems.length - 1;
+            return prevIndex >= maxIndex ? 0 : prevIndex + 1;
+        });
     });
     (0, react_1.useEffect)(() => {
         registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
@@ -67,6 +74,10 @@ exports.Tabs = (0, react_1.forwardRef)(function Tabs({ activeTab = 0, orientatio
         });
     }, [next, registerComponentApi]);
     return ((0, jsx_runtime_1.jsx)(TabContext_1.TabContext.Provider, { value: tabContextValue, children: (0, jsx_runtime_1.jsxs)(RTabs.Root, { ref: forwardedRef, className: Tabs_module_scss_1.default.tabs, value: `${currentTab}`, onValueChange: (tab) => {
-                setActiveIndex(tabItems.findIndex((item) => item.id === tab));
+                const newIndex = tabItems.findIndex((item) => item.id === tab);
+                if (newIndex !== activeIndex) {
+                    tabContextValue.setActiveTabId(tab);
+                    setActiveIndex(newIndex);
+                }
             }, orientation: orientation, style: style, children: [(0, jsx_runtime_1.jsxs)(RTabs.List, { className: Tabs_module_scss_1.default.tabsList, children: [tabItems.map((tab) => tabRenderer ? ((0, jsx_runtime_1.jsx)(RTabs.Trigger, { value: tab.id, children: tabRenderer({ label: tab.label, isActive: tab.id === currentTab }) }, tab.id)) : ((0, jsx_runtime_1.jsx)(RTabs.Trigger, { className: Tabs_module_scss_1.default.tabTrigger, value: tab.id, children: tab.label }, tab.id))), (0, jsx_runtime_1.jsx)("div", { className: Tabs_module_scss_1.default.filler, "data-orientation": orientation })] }), children] }) }));
 });

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

@@ -20,6 +20,7 @@ const Text_module_scss_1 = __importDefault(require("./Text.module.scss"));
 const ComponentDefs_1 = require("@abstractions/ComponentDefs");
 const renderers_1 = require("@components-core/renderers");
 const themeVars_1 = require("@components-core/theming/themeVars");
+const abstractions_1 = require("@components/abstractions");
 const TextNative_1 = require("./TextNative");
 const COMP = "Text";
 exports.TextMd = (0, ComponentDefs_1.createMetadata)({
@@ -29,7 +30,7 @@ exports.TextMd = (0, ComponentDefs_1.createMetadata)({
         value: (0, ComponentDefs_1.d)(`The text to be displayed. This value can also be set via nesting the text into ` +
             `the \`${COMP}\` component.`),
         variant: (0, ComponentDefs_1.d)(`Optional string value that provides named presets for text variants with a ` +
-            `unique combination of font style, weight, size, color and other parameters.`, TextNative_1.variantOptionsMd),
+            `unique combination of font style, weight, size, color and other parameters.`, abstractions_1.variantOptionsMd),
         maxLines: (0, ComponentDefs_1.d)(`This property determines the maximum number of lines the component can wrap to. ` +
             `If there is no space to display all the contents, the component displays up to ` +
             `as many lines as specified in this property.`),
@@ -116,7 +117,7 @@ exports.TextMd = (0, ComponentDefs_1.createMetadata)({
 exports.textComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.TextMd, ({ node, extractValue, layoutCss, renderChild }) => {
     const _a = node.props, { variant, maxLines, preserveLinebreaks, ellipses, value } = _a, variantSpecific = __rest(_a, ["variant", "maxLines", "preserveLinebreaks", "ellipses", "value"]);
     const variantSpecificProps = Object.fromEntries(Object.entries(variantSpecific)
-        .filter(([key, _]) => TextNative_1.VariantPropsKeys.includes(key))
+        .filter(([key, _]) => abstractions_1.VariantPropsKeys.includes(key))
         .map(([key, value]) => [key, extractValue(value)]));
     return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, Object.assign({ variant: extractValue(variant), maxLines: extractValue.asOptionalNumber(maxLines), style: layoutCss, preserveLinebreaks: extractValue.asOptionalBoolean(preserveLinebreaks, false), ellipses: extractValue.asOptionalBoolean(ellipses, true) }, variantSpecificProps, { children: extractValue.asDisplayText(value) || renderChild(node.children) })));
 });

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 })] }) }));
 });