xmlui 0.11.3 → 0.11.6

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

@@ -1,40 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-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 react_2 = require("react");
-const classnames_1 = __importDefault(require("classnames"));
-const Carousel_module_scss_1 = __importDefault(require("./Carousel.module.scss"));
-const CarouselContext_1 = require("./CarouselContext");
-exports.CarouselItemComponent = (0, react_2.forwardRef)(function CarouselItemComponent(_a, forwardedRef) {
-    var { children, style } = _a, rest = __rest(_a, ["children", "style"]);
-    const id = (0, react_2.useId)();
-    const { register, unRegister, itemProps } = (0, CarouselContext_1.useCarousel)();
-    (0, react_2.useEffect)(() => {
-        register({
-            id,
-        });
-    }, [id, children, style, register, forwardedRef]);
-    (0, react_2.useEffect)(() => {
-        return () => {
-            unRegister(id);
-        };
-    }, [id, unRegister]);
-    return ((0, react_1.createElement)("div", Object.assign({}, rest, { key: id }, itemProps, { className: (0, classnames_1.default)(Carousel_module_scss_1.default.carouselItem) }),
-        (0, jsx_runtime_1.jsx)("div", { className: Carousel_module_scss_1.default.innerWrapper, ref: forwardedRef, style: style, children: children })));
-});

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

@@ -1,195 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CarouselComponent = exports.defaultProps = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const React = __importStar(require("react"));
-const react_1 = require("react");
-const embla_carousel_react_1 = __importDefault(require("embla-carousel-react"));
-const embla_carousel_autoplay_1 = __importDefault(require("embla-carousel-autoplay"));
-const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
-const classnames_1 = __importDefault(require("classnames"));
-const Carousel_module_scss_1 = __importDefault(require("./Carousel.module.scss"));
-const constants_1 = require("../../components-core/constants");
-const CarouselContext_1 = require("./CarouselContext");
-const IconNative_1 = __importDefault(require("../Icon/IconNative"));
-exports.defaultProps = {
-    orientation: "horizontal",
-    indicators: true,
-    autoplay: false,
-    controls: true,
-    loop: false,
-    startIndex: 0,
-    transitionDuration: 25,
-    autoplayInterval: 5000,
-    stopAutoplayOnInteraction: true,
-};
-exports.CarouselComponent = (0, react_1.forwardRef)(function CarouselComponent(_a, forwardedRef) {
-    var { orientation = exports.defaultProps.orientation, children, style, className, indicators = exports.defaultProps.indicators, onDisplayDidChange = constants_1.noop, autoplay = exports.defaultProps.autoplay, controls = exports.defaultProps.controls, loop = exports.defaultProps.loop, startIndex = exports.defaultProps.startIndex, prevIcon, nextIcon, transitionDuration = exports.defaultProps.transitionDuration, autoplayInterval = exports.defaultProps.autoplayInterval, stopAutoplayOnInteraction = exports.defaultProps.stopAutoplayOnInteraction, registerComponentApi } = _a, rest = __rest(_a, ["orientation", "children", "style", "className", "indicators", "onDisplayDidChange", "autoplay", "controls", "loop", "startIndex", "prevIcon", "nextIcon", "transitionDuration", "autoplayInterval", "stopAutoplayOnInteraction", "registerComponentApi"]);
-    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)(indicators);
-    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)({
-                    delay: autoplayInterval,
-                    stopOnInteraction: stopAutoplayOnInteraction,
-                }),
-            ]);
-        }
-    }, [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;
-        if (!autoplay)
-            return;
-        const playOrStop = autoplay.isPlaying() ? autoplay.stop : autoplay.play;
-        playOrStop();
-    }, [api]);
-    (0, react_1.useEffect)(() => {
-        var _a;
-        const autoplay = (_a = api === null || api === void 0 ? void 0 : api.plugins()) === null || _a === void 0 ? void 0 : _a.autoplay;
-        if (!autoplay)
-            return;
-        setIsPlaying(autoplay.isPlaying());
-        api
-            .on("autoplay:play", () => setIsPlaying(true))
-            .on("autoplay:stop", () => setIsPlaying(false))
-            .on("reInit", () => setIsPlaying(autoplay.isPlaying()));
-    }, [api]);
-    const scrollTo = (0, react_1.useCallback)((index) => {
-        api === null || api === void 0 ? void 0 : api.scrollTo(index);
-    }, [api]);
-    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
-    const [canScrollNext, setCanScrollNext] = React.useState(false);
-    const onSelect = React.useCallback((api) => {
-        if (!api) {
-            return;
-        }
-        const activeIndex = api.selectedScrollSnap();
-        onDisplayDidChange(activeIndex);
-        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();
-        }
-    }, [api]);
-    const scrollNext = (0, react_1.useCallback)(() => {
-        api === null || api === void 0 ? void 0 : api.scrollNext();
-    }, [api]);
-    const handleKeyDown = (0, react_1.useCallback)((event) => {
-        if (orientation === "horizontal") {
-            if (event.key === "ArrowLeft") {
-                event.preventDefault();
-                scrollPrev();
-            }
-            else if (event.key === "ArrowRight") {
-                event.preventDefault();
-                scrollNext();
-            }
-        }
-        else {
-            if (event.key === "ArrowUp") {
-                event.preventDefault();
-                scrollPrev();
-            }
-            else if (event.key === "ArrowDown") {
-                event.preventDefault();
-                scrollNext();
-            }
-        }
-    }, [orientation, scrollPrev, scrollNext]);
-    (0, react_1.useEffect)(() => {
-        registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
-            scrollTo,
-            scrollPrev,
-            scrollNext,
-            canScrollPrev: () => canScrollPrev,
-            canScrollNext: () => canScrollNext,
-        });
-    }, [registerComponentApi, scrollTo, scrollPrev, scrollNext, canScrollPrev, canScrollNext]);
-    React.useEffect(() => {
-        if (!api) {
-            return;
-        }
-        onSelect(api);
-        api.on("init", onSelect);
-        api.on("reInit", onSelect);
-        api.on("select", onSelect);
-        return () => {
-            api === null || api === void 0 ? void 0 : api.off("select", onSelect);
-        };
-    }, [api, onSelect]);
-    (0, react_1.useEffect)(() => {
-        if (referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.current) {
-            referenceElement.current.addEventListener("keydown", handleKeyDown);
-        }
-    }, [ref, handleKeyDown]);
-    return ((0, jsx_runtime_1.jsx)(CarouselContext_1.CarouselContext.Provider, { value: carouselContextValue, children: (0, jsx_runtime_1.jsxs)("div", Object.assign({}, rest, { style: style, ref: ref, className: (0, classnames_1.default)(Carousel_module_scss_1.default.carousel, className), 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, "aria-label": isPlaying ? "Pause Autoplay" : "Start Autoplay", 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, "aria-label": "Previous Slide", 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, "aria-label": "Next Slide", 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, role: "tablist", "aria-label": "Select slide", children: carouselItems.map((_, index) => ((0, jsx_runtime_1.jsx)("button", { type: "button", role: "tab", "aria-label": `Go to slide ${index + 1}`, "aria-controls": "carousel", tabIndex: index === activeSlide ? 0 : -1, 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/ChangeListener/ChangeListener.js

@@ -1,34 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.changeListenerComponentRenderer = exports.ChangeListenerMd = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const renderers_1 = require("../../components-core/renderers");
-const metadata_helpers_1 = require("../metadata-helpers");
-const ChangeListenerNative_1 = require("./ChangeListenerNative");
-const COMP = "ChangeListener";
-exports.ChangeListenerMd = (0, metadata_helpers_1.createMetadata)({
-    status: "stable",
-    description: "`ChangeListener` is an invisible component that watches for changes in values " +
-        "and triggers actions in response. It's essential for creating reactive behavior " +
-        "when you need to respond to data changes, state updates, or component property " +
-        "modifications outside of normal event handlers.",
-    props: {
-        listenTo: {
-            description: "Value to the changes of which this component listens. If this property is not set, " +
-                "the `ChangeListener` is inactive.",
-            valueType: "any",
-        },
-        throttleWaitInMs: {
-            description: `This variable sets a throttling time (in milliseconds) to apply when executing the \`didChange\` ` +
-                `event handler. All changes within that throttling time will only fire the \`didChange\` event once.`,
-            valueType: "number",
-            defaultValue: ChangeListenerNative_1.defaultProps.throttleWaitInMs,
-        },
-    },
-    events: {
-        didChange: (0, metadata_helpers_1.dDidChange)(COMP),
-    },
-});
-exports.changeListenerComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.ChangeListenerMd, ({ node, lookupEventHandler, extractValue }) => {
-    return ((0, jsx_runtime_1.jsx)(ChangeListenerNative_1.ChangeListener, { listenTo: extractValue(node.props.listenTo), throttleWaitInMs: extractValue(node.props.throttleWaitInMs), onChange: lookupEventHandler("didChange") }));
-});

package/dist/scripts/src/components/ChangeListener/ChangeListener.spec.js

@@ -1,169 +0,0 @@
-"use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const fixtures_1 = require("../../testing/fixtures");
-// =============================================================================
-// BASIC FUNCTIONALITY TESTS
-// =============================================================================
-(0, fixtures_1.test)("component fires didChange event when listenTo value changes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed, }) {
-    yield initTestBed(`<App var.counter="{0}" var.oneBigger="{1}">
-      <Button label="Increment" onClick="{counter++}" />
-      <ChangeListener
-        listenTo="{counter}"
-        onDidChange="oneBigger = counter + 1" />
-      <Text testId="counterText">{counter}</Text>
-      <Text testId="oneBiggerText">{oneBigger}</Text>
-    </App>`);
-    const counterText = page.getByTestId("counterText");
-    const oneBiggerText = page.getByTestId("oneBiggerText");
-    yield (0, fixtures_1.expect)(counterText).toHaveText("0");
-    yield (0, fixtures_1.expect)(oneBiggerText).toHaveText("1");
-    yield page.getByRole("button", { name: "Increment" }).click();
-    yield (0, fixtures_1.expect)(counterText).toHaveText("1");
-    yield (0, fixtures_1.expect)(oneBiggerText).toHaveText("2");
-}));
-(0, fixtures_1.test)("component does not fire event when unrelated values change", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed, }) {
-    yield initTestBed(`<App var.a="{0}" var.counter="{0}" var.oneBigger="{1}">
-      <Button label="Increment" onClick="{counter++}" />
-      <ChangeListener
-        listenTo="{a}"
-        onDidChange="oneBigger = counter + 1" />
-      <Text testId="counterText">{counter}</Text>
-      <Text testId="oneBiggerText">{oneBigger}</Text>
-    </App>`);
-    const counterText = page.getByTestId("counterText");
-    const oneBiggerText = page.getByTestId("oneBiggerText");
-    yield (0, fixtures_1.expect)(counterText).toHaveText("0");
-    yield (0, fixtures_1.expect)(oneBiggerText).toHaveText("1");
-    yield page.getByRole("button", { name: "Increment" }).click();
-    yield (0, fixtures_1.expect)(counterText).toHaveText("1");
-    yield (0, fixtures_1.expect)(oneBiggerText).toHaveText("1");
-}));
-(0, fixtures_1.test)("component passes both previous and new values to the handler", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed, }) {
-    yield initTestBed(`
-    <VStack var.counter="{0}" var.clone="{0}">
-      <Button testId="button" onClick="counter++">Increment</Button>
-      <Text testId="text">{clone}</Text>
-      <ChangeListener
-        listenTo="{counter}"
-        onDidChange="chg => clone = chg.prevValue + '|' + chg.newValue" />
-    </VStack>
-  `);
-    // Click the button to change the counter value
-    yield page.locator("button").click();
-    // Check that the event fired and testState was updated
-    yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("0|1");
-}));
-// =============================================================================
-// EDGE CASE TESTS
-// =============================================================================
-(0, fixtures_1.test)("component handles complex data types", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`
-    <VStack var.data="{{ a: 1, b: [2, { counter: 10}] }}" var.clone="{0}">
-      <Button testId="incRelevant" onClick="data.b[1].counter++">Increment</Button>
-      <Button testId="incIrrelevant" onClick="data.a++">Increment irrelevant</Button>
-      <Text testId="text">{clone}</Text>
-      <ChangeListener
-        listenTo="{data.b[1].counter}"
-        onDidChange="chg => clone = chg.newValue" />
-    </VStack>
-  `);
-    yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("10");
-    // make sure the irrelevant parts of the data doesn't get listenedTo
-    yield page.getByTestId("incIrrelevant").click();
-    yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("10");
-    yield page.getByTestId("incRelevant").click();
-    // Check that the event fired and testState was updated
-    yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("11");
-}));
-(0, fixtures_1.test)("component handles undefined and null values", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`
-    <VStack var.counter="{0}" var.clone="{0}">
-      <Button testId="setNull" onClick="counter = null">Set Null</Button>
-      <Button testId="setUndefined" onClick="counter = undefined">Set Undefined</Button>
-      <Button testId="setValue" onClick="counter = 3">Set Value</Button>
-      <Text testId="text">
-        {clone === undefined ? 'undefined' : JSON.stringify(clone)}
-      </Text>
-      <ChangeListener listenTo="{counter}" onDidChange="chg => clone = chg.newValue" />
-    </VStack>`);
-    yield page.getByTestId("setNull").click();
-    yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("null");
-    yield page.getByTestId("setUndefined").click();
-    yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("undefined");
-    yield page.getByTestId("setValue").click();
-    yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("3");
-}));
-(0, fixtures_1.test)("component doesn't fire on identical primitive values", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`
-    <VStack var.counter="{0}" var.clicked="{0}" var.data="{1}">
-      <Button testId="setToPrimitive" onClick="clicked++; data = data + 1 - 1">
-        Set The Same Primitive
-      </Button>
-      <Text testId="text">{clicked}|{counter}|{data}</Text>
-      <ChangeListener listenTo="{data}" onDidChange="counter++" />
-    </VStack>
-  `);
-    yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("0|1|1");
-    yield page.locator("button").click();
-    yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("1|1|1");
-    yield page.locator("button").click();
-    yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("2|1|1");
-}));
-// =============================================================================
-// INTEGRATION TESTS
-// =============================================================================
-(0, fixtures_1.test)("component works with multiple listeners on the same value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`
-    <VStack var.counter1="{0}" var.counter2="{0}" var.clicked="{0}">
-      <Button testId="setToPrimitive" onClick="clicked++;">
-        Set The Same Primitive
-      </Button>
-      <Text testId="text">{clicked}|{counter1}|{counter2}</Text>
-      <ChangeListener listenTo="{clicked}" onDidChange="counter1++" />
-      <ChangeListener listenTo="{clicked}" onDidChange="counter2++" />
-    </VStack>
-  `);
-    yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("0|1|1");
-    yield page.locator("button").click();
-    yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("1|2|2");
-    yield page.locator("button").click();
-    yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("2|3|3");
-}));
-(0, fixtures_1.test)("component works with conditional rendering", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`
-    <VStack var.counter="{0}" var.clone="{0}" var.show="{false}">
-      <Button testId="button" onClick="counter++">Increment</Button>
-      <Button testId="showButton" onClick="show = !show">Toggle Show</Button>
-      <Text testId="text">
-        {clone}
-      </Text>
-      <ChangeListener
-        when="{show}"
-        listenTo="{counter}"
-        onDidChange="clone = counter" />
-    </VStack>
-  `);
-    // Click the button to change the counter value
-    yield page.getByTestId("button").click();
-    yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("0");
-    yield page.getByTestId("button").click();
-    yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("0");
-    yield page.getByTestId("button").click();
-    yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("0");
-    yield page.getByTestId("showButton").click();
-    yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("3");
-    yield page.getByTestId("button").click();
-    yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("4");
-    yield page.getByTestId("showButton").click();
-    yield page.getByTestId("button").click();
-    yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("4");
-}));

package/dist/scripts/src/components/ChangeListener/ChangeListenerNative.js

@@ -1,30 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultProps = void 0;
-exports.ChangeListener = ChangeListener;
-const react_1 = require("react");
-const lodash_es_1 = require("lodash-es");
-const hooks_1 = require("../../components-core/utils/hooks");
-exports.defaultProps = {
-    throttleWaitInMs: 0,
-};
-function ChangeListener({ listenTo, onChange, throttleWaitInMs = exports.defaultProps.throttleWaitInMs }) {
-    const prevValue = (0, hooks_1.usePrevious)(listenTo);
-    const throttledOnChange = (0, react_1.useMemo)(() => {
-        if (throttleWaitInMs !== 0 && onChange) {
-            return (0, lodash_es_1.throttle)(onChange, throttleWaitInMs, {
-                leading: true,
-            });
-        }
-        return onChange;
-    }, [onChange, throttleWaitInMs]);
-    (0, react_1.useEffect)(() => {
-        if (throttledOnChange && !(0, lodash_es_1.isEqual)(prevValue, listenTo)) {
-            throttledOnChange === null || throttledOnChange === void 0 ? void 0 : throttledOnChange({
-                prevValue,
-                newValue: listenTo,
-            });
-        }
-    }, [listenTo, throttledOnChange, prevValue]);
-    return null;
-}

package/dist/scripts/src/components/Charts/AreaChart/AreaChart.js

@@ -1,92 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.areaChartComponentRenderer = exports.AreaChartMd = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const AreaChartNative_1 = require("./AreaChartNative");
-const renderers_1 = require("../../../components-core/renderers");
-const metadata_helpers_1 = require("../../metadata-helpers");
-const container_helpers_1 = require("../../container-helpers");
-const COMP = "AreaChart";
-exports.AreaChartMd = (0, metadata_helpers_1.createMetadata)({
-    status: "experimental",
-    description: "Interactive area chart for showing data trends over time with filled areas under the curve",
-    docFolder: "Charts/AreaChart",
-    props: {
-        data: {
-            description: "This property is used to provide the component with data to display. " +
-                "The data needs to be an array of objects.",
-        },
-        dataKeys: {
-            description: "This property specifies the keys in the data objects that should be used for rendering the chart elements. " +
-                "E.g. 'value' or 'amount'.",
-            valueType: "string",
-        },
-        nameKey: {
-            description: "Specifies the key in the data objects that will be used to label the different data series.",
-            valueType: "string",
-        },
-        hideX: {
-            description: "Determines whether the X-axis should be hidden. If set to `true`, the axis will not be rendered.",
-            valueType: "boolean",
-            defaultValue: AreaChartNative_1.defaultProps.hideX,
-        },
-        hideY: {
-            description: "Determines whether the Y-axis should be hidden. If set to `true`, the axis will not be rendered.",
-            valueType: "boolean",
-            defaultValue: AreaChartNative_1.defaultProps.hideY,
-        },
-        hideTickX: {
-            description: "Determines whether the X-axis tick labels should be hidden. If set to `true`, the tick labels will not be rendered.",
-            valueType: "boolean",
-            defaultValue: AreaChartNative_1.defaultProps.hideTickX,
-        },
-        hideTickY: {
-            description: "Determines whether the Y-axis tick labels should be hidden. If set to `true`, the tick labels will not be rendered.",
-            valueType: "boolean",
-            defaultValue: AreaChartNative_1.defaultProps.hideTickY,
-        },
-        hideTooltip: {
-            description: "Determines whether the tooltip should be hidden. If set to `true`, the tooltip will not be rendered.",
-            valueType: "boolean",
-            defaultValue: AreaChartNative_1.defaultProps.hideTooltip,
-        },
-        showLegend: {
-            description: "Determines whether the legend should be shown. If set to `true`, the legend will be rendered.",
-            valueType: "boolean",
-            defaultValue: AreaChartNative_1.defaultProps.showLegend,
-        },
-        stacked: {
-            description: "Determines whether multiple areas should be stacked on top of each other. If set to `true`, areas will be stacked.",
-            valueType: "boolean",
-            defaultValue: AreaChartNative_1.defaultProps.stacked,
-        },
-        curved: {
-            description: "Determines whether the area lines should be curved (smooth) or straight. If set to `true`, lines will be curved.",
-            valueType: "boolean",
-            defaultValue: AreaChartNative_1.defaultProps.curved,
-        },
-        tooltipTemplate: {
-            description: "This property allows replacing the default template to display a tooltip.",
-        },
-    },
-    events: {
-    // Standard chart events - customize based on chart type
-    },
-    apis: {
-    // Chart-specific APIs if needed
-    },
-    contextVars: {
-    // Add context variables if needed
-    },
-});
-// Component renderer
-exports.areaChartComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.AreaChartMd, ({ extractValue, node, className, lookupSyncCallback, renderChild }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-    return ((0, jsx_runtime_1.jsx)(AreaChartNative_1.AreaChart, { className: className, tickFormatterX: lookupSyncCallback((_a = node.props) === null || _a === void 0 ? void 0 : _a.tickFormatterX), tickFormatterY: lookupSyncCallback((_b = node.props) === null || _b === void 0 ? void 0 : _b.tickFormatterY), data: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.data), nameKey: extractValue((_d = node.props) === null || _d === void 0 ? void 0 : _d.nameKey), dataKeys: extractValue((_e = node.props) === null || _e === void 0 ? void 0 : _e.dataKeys), hideX: extractValue.asOptionalBoolean((_f = node.props) === null || _f === void 0 ? void 0 : _f.hideX), hideY: extractValue.asOptionalBoolean((_g = node.props) === null || _g === void 0 ? void 0 : _g.hideY), hideTickX: extractValue.asOptionalBoolean((_h = node.props) === null || _h === void 0 ? void 0 : _h.hideTickX), hideTickY: extractValue.asOptionalBoolean((_j = node.props) === null || _j === void 0 ? void 0 : _j.hideTickY), hideTooltip: extractValue.asOptionalBoolean((_k = node.props) === null || _k === void 0 ? void 0 : _k.hideTooltip), showLegend: extractValue.asOptionalBoolean((_l = node.props) === null || _l === void 0 ? void 0 : _l.showLegend), stacked: extractValue.asOptionalBoolean((_m = node.props) === null || _m === void 0 ? void 0 : _m.stacked), curved: extractValue.asOptionalBoolean((_o = node.props) === null || _o === void 0 ? void 0 : _o.curved), tooltipRenderer: node.props.tooltipTemplate
-            ? (tooltipData) => {
-                return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.props.tooltipTemplate, item: tooltipData, contextVars: {
-                        $tooltip: tooltipData,
-                    }, renderChild: renderChild }));
-            }
-            : undefined, children: renderChild(node.children) }));
-});