xmlui 0.11.4 → 0.11.7

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

@@ -1,331 +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)("renders with basic props", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDropdownMenuDriver }) {
-    yield initTestBed(`<DropdownMenu label="Menu" />`);
-    const driver = yield createDropdownMenuDriver();
-    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-}));
-(0, fixtures_1.test)("renders with menu items", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDropdownMenuDriver, page }) {
-    yield initTestBed(`
-    <DropdownMenu label="Menu">
-      <MenuItem>Item 1</MenuItem>
-      <MenuItem>Item 2</MenuItem>
-    </DropdownMenu>
-  `);
-    const driver = yield createDropdownMenuDriver();
-    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    yield driver.open();
-    yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "Item 1" })).toBeVisible();
-    yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "Item 2" })).toBeVisible();
-}));
-(0, fixtures_1.test)("opens and closes menu correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDropdownMenuDriver, page }) {
-    yield initTestBed(`
-    <DropdownMenu label="Menu">
-      <MenuItem>Item 1</MenuItem>
-    </DropdownMenu>
-  `);
-    const driver = yield createDropdownMenuDriver();
-    yield (0, fixtures_1.expect)(page.getByRole("menuitem")).not.toBeVisible();
-    yield driver.open();
-    yield (0, fixtures_1.expect)(page.getByRole("menuitem")).toBeVisible();
-    yield driver.close();
-    yield (0, fixtures_1.expect)(page.getByRole("menuitem")).not.toBeVisible();
-}));
-(0, fixtures_1.test)("handles menu item clicks", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDropdownMenuDriver, page }) {
-    const { testStateDriver } = yield initTestBed(`
-    <DropdownMenu label="Menu">
-      <MenuItem onClick="testState = 'item1-clicked'">Item 1</MenuItem>
-      <MenuItem onClick="testState = 'item2-clicked'">Item 2</MenuItem>
-    </DropdownMenu>
-  `);
-    const driver = yield createDropdownMenuDriver();
-    yield driver.open();
-    yield driver.clickMenuItem("Item 1");
-    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("item1-clicked");
-    // Menu should close after click
-    yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "Item 1" })).not.toBeVisible();
-    yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "Item 2" })).not.toBeVisible();
-}));
-(0, fixtures_1.test)("alignment='start' aligns popup menu left", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDropdownMenuDriver, page, }) {
-    yield initTestBed(`
-    <HStack width="50%">
-      <DropdownMenu alignment="start" label="Menu">
-        <MenuItem >Item 1</MenuItem>
-        <MenuItem >Item 2</MenuItem>
-      </DropdownMenu>
-    </HStack>
-  `);
-    const driver = yield createDropdownMenuDriver();
-    yield driver.open();
-    const { x: triggerX } = yield driver.component.boundingBox();
-    const { x: menuX } = yield page.getByRole("menu").boundingBox();
-    (0, fixtures_1.expect)(menuX).toBeCloseTo(triggerX);
-}));
-(0, fixtures_1.test)("alignment='end' aligns popup menu right", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDropdownMenuDriver, page, }) {
-    yield initTestBed(`
-    <HStack width="50%" reverse="true">
-      <DropdownMenu alignment="end" label="Menu">
-        <MenuItem >Item 1</MenuItem>
-        <MenuItem >Item 2</MenuItem>
-      </DropdownMenu>
-    </HStack>
-  `);
-    const driver = yield createDropdownMenuDriver();
-    yield driver.open();
-    const { width: triggerWidth, x: triggerX } = yield driver.component.boundingBox();
-    const { width: menuWidth, x: menuX } = yield page.getByRole("menu").boundingBox();
-    const menuEndX = menuX + menuWidth;
-    const triggerEndX = triggerX + triggerWidth;
-    (0, fixtures_1.expect)(menuEndX).toBeCloseTo(triggerEndX);
-}));
-(0, fixtures_1.test)("supports submenu functionality", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDropdownMenuDriver, page }) {
-    yield initTestBed(`
-    <DropdownMenu label="Menu">
-      <MenuItem>Regular Item</MenuItem>
-      <SubMenuItem label="Submenu">
-        <MenuItem>Submenu Item 1</MenuItem>
-        <MenuItem>Submenu Item 2</MenuItem>
-      </SubMenuItem>
-    </DropdownMenu>
-  `);
-    const driver = yield createDropdownMenuDriver();
-    // Open main menu
-    yield driver.open();
-    yield (0, fixtures_1.expect)(page.getByText("Regular Item")).toBeVisible();
-    yield (0, fixtures_1.expect)(page.getByText("Submenu")).toBeVisible();
-    // Open submenu using driver method
-    yield driver.openSubMenu("Submenu");
-    yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "Submenu Item 1" })).toBeVisible();
-    yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "Submenu Item 2" })).toBeVisible();
-}));
-(0, fixtures_1.test)("supports menu separators", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDropdownMenuDriver, page }) {
-    yield initTestBed(`
-    <DropdownMenu label="Menu">
-      <MenuItem>Item 1</MenuItem>
-      <MenuSeparator />
-      <MenuItem>Item 2</MenuItem>
-    </DropdownMenu>
-  `);
-    const driver = yield createDropdownMenuDriver();
-    yield driver.open();
-    yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "Item 1" })).toBeVisible();
-    yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "Item 2" })).toBeVisible();
-    // Check that separator is rendered using driver method
-    const separators = driver.getMenuSeparators();
-    yield (0, fixtures_1.expect)(separators).toHaveCount(1);
-}));
-// =============================================================================
-// ACCESSIBILITY TESTS
-// =============================================================================
-(0, fixtures_1.test)("has correct accessibility attributes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDropdownMenuDriver, page, }) {
-    yield initTestBed(`
-    <DropdownMenu label="Accessible Menu">
-      <MenuItem>Item 1</MenuItem>
-    </DropdownMenu>
-  `);
-    const driver = yield createDropdownMenuDriver();
-    let btn = page.getByRole("button", { name: "Accessible Menu" });
-    yield (0, fixtures_1.expect)(btn).toHaveAttribute("aria-haspopup", "menu");
-    yield (0, fixtures_1.expect)(btn).toHaveAttribute("aria-expanded", "false");
-    yield driver.open();
-    yield page.getByRole("button", { includeHidden: true, expanded: true }).waitFor();
-    yield page.getByRole("menu").waitFor();
-}));
-(0, fixtures_1.test)("is keyboard accessible", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDropdownMenuDriver, page }) {
-    const { testStateDriver } = yield initTestBed(`
-    <DropdownMenu label="Keyboard Menu">
-      <MenuItem onClick="testState = 'keyboard-activated'">Item 1</MenuItem>
-    </DropdownMenu>
-  `);
-    const btn = page.getByRole("button");
-    yield page.keyboard.press("Tab");
-    yield (0, fixtures_1.expect)(btn).toBeFocused();
-    // Open with Enter
-    yield page.keyboard.press("Enter");
-    yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "Item 1" })).toBeVisible();
-    // Navigate and select with keyboard
-    yield page.keyboard.press("ArrowDown");
-    yield page.keyboard.press("Enter");
-    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("keyboard-activated");
-}));
-(0, fixtures_1.test)("disabled DropdownMenu can't be focused", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-    yield initTestBed(`<DropdownMenu label="Disabled Menu" enabled="false" />`);
-    const btn = page.getByRole("button");
-    yield (0, fixtures_1.expect)(btn).toBeDisabled();
-    // Should not be focusable when disabled
-    yield btn.focus();
-    yield (0, fixtures_1.expect)(btn).not.toBeFocused();
-}));
-// =============================================================================
-// VISUAL STATE TESTS
-// =============================================================================
-(0, fixtures_1.test)("applies theme variables correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDropdownMenuDriver }) {
-    yield initTestBed(`<DropdownMenu label="Themed Menu">
-      <MenuItem>Item 1</MenuItem>
-    </DropdownMenu>`, {
-        testThemeVars: {
-            "backgroundColor-DropdownMenu": "rgb(255, 0, 0)",
-            "minWidth-DropdownMenu": "200px",
-        },
-    });
-    const driver = yield createDropdownMenuDriver();
-    // Open menu to see styled content
-    yield driver.open();
-    // Check theme variables are applied to menu content
-    const menuContent = driver.getMenuContent();
-    yield (0, fixtures_1.expect)(menuContent).toBeVisible();
-    yield (0, fixtures_1.expect)(menuContent).toHaveCSS("background-color", "rgb(255, 0, 0)");
-    yield (0, fixtures_1.expect)(menuContent).toHaveCSS("min-width", "200px");
-}));
-// =============================================================================
-// EDGE CASE TESTS
-// =============================================================================
-(0, fixtures_1.test)("handles null label gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-    yield initTestBed(`<DropdownMenu label="{null}" />`);
-    yield (0, fixtures_1.expect)(page.getByRole("button")).toBeVisible();
-}));
-(0, fixtures_1.test)("handles special characters in labels", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDropdownMenuDriver, page, }) {
-    yield initTestBed(`
-    <DropdownMenu label="Menu with émojis 🚀">
-      <MenuItem>Item with ñ and ü</MenuItem>
-      <MenuItem>Item with &amp; &lt; &gt; quotes</MenuItem>
-    </DropdownMenu>
-  `);
-    const driver = yield createDropdownMenuDriver();
-    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    yield (0, fixtures_1.expect)(driver.component).toContainText("Menu with émojis 🚀");
-    yield driver.open();
-    yield (0, fixtures_1.expect)(page.getByText("Item with ñ and ü")).toBeVisible();
-    yield (0, fixtures_1.expect)(page.getByText("Item with & < > quotes")).toBeVisible();
-}));
-(0, fixtures_1.test)("doesn't show empty menu with no MenuItem", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDropdownMenuDriver, page, }) {
-    yield initTestBed(`<DropdownMenu label="Empty Menu" />`);
-    const driver = yield createDropdownMenuDriver();
-    yield driver.open();
-    yield (0, fixtures_1.expect)(page.getByRole("menu")).not.toBeVisible();
-}));
-(0, fixtures_1.test)("handles disabled menu items", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDropdownMenuDriver, page }) {
-    const { testStateDriver } = yield initTestBed(`
-    <DropdownMenu label="Menu">
-      <MenuItem enabled="true" onClick="testState = 'enabled-clicked'">Enabled Item</MenuItem>
-      <MenuItem enabled="false" onClick="testState = 'disabled-clicked'">Disabled Item</MenuItem>
-    </DropdownMenu>
-  `);
-    const driver = yield createDropdownMenuDriver();
-    yield driver.open();
-    // Enabled item should work
-    yield driver.clickMenuItem("Enabled Item");
-    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("enabled-clicked");
-    // Reopen menu
-    yield driver.open();
-    yield page.getByText("Disabled Item").click();
-    yield fixtures_1.expect.poll(testStateDriver.testState).not.toEqual("disabled-clicked");
-}));
-// =============================================================================
-// INTEGRATION TESTS
-// =============================================================================
-(0, fixtures_1.test)("supports custom trigger template", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-    yield initTestBed(`
-    <DropdownMenu>
-      <property name="triggerTemplate">
-        <Button variant="solid" themeColor="secondary">Custom Trigger</Button>
-      </property>
-      <MenuItem>Item 1</MenuItem>
-      <MenuItem>Item 2</MenuItem>
-    </DropdownMenu>
-  `);
-    const btn = page.getByRole("button", { name: "Custom Trigger" });
-    yield (0, fixtures_1.expect)(btn).toBeVisible();
-    yield btn.click();
-    yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "Item 1" })).toBeVisible();
-    yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "Item 2" })).toBeVisible();
-}));
-(0, fixtures_1.test)("handles onWillOpen event correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDropdownMenuDriver, page, }) {
-    const { testStateDriver } = yield initTestBed(`
-    <DropdownMenu label="Event Menu" onWillOpen="testState = 'willOpen-fired'">
-      <MenuItem>Item 1</MenuItem>
-    </DropdownMenu>
-  `);
-    const driver = yield createDropdownMenuDriver();
-    // Click to trigger onWillOpen event
-    yield driver.open();
-    // Event should have fired
-    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("willOpen-fired");
-    // Menu should be open
-    yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "Item 1" })).toBeVisible();
-}));
-(0, fixtures_1.test)("prevents opening when onWillOpen returns false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDropdownMenuDriver, page, }) {
-    yield initTestBed(`
-    <DropdownMenu label="Prevented Menu" onWillOpen="return false">
-      <MenuItem>Item 1</MenuItem>
-    </DropdownMenu>
-  `);
-    const driver = yield createDropdownMenuDriver();
-    // Click should not open menu due to onWillOpen returning false
-    yield driver.open();
-    yield (0, fixtures_1.expect)(page.getByText("Item 1")).not.toBeVisible();
-}));
-(0, fixtures_1.test)("API methods work correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDropdownMenuDriver, page }) {
-    yield initTestBed(`
-    <HStack>
-      <DropdownMenu id="apiMenu" label="API Menu">
-        <MenuItem>Item 1</MenuItem>
-        <MenuItem><Button testId="closeBtn" onGotFocus="apiMenu.close()" label="Close Menu" /></MenuItem>
-      </DropdownMenu>
-      <Button testId="openBtn" onClick="apiMenu.open()">Open Menu</Button>
-    </HStack>
-  `);
-    const menuItem = page.getByRole("menuitem", { name: "Item 1" });
-    yield (0, fixtures_1.expect)(menuItem).not.toBeVisible();
-    yield page.getByTestId("openBtn").click();
-    yield (0, fixtures_1.expect)(menuItem).toBeVisible();
-    yield page.getByTestId("closeBtn").focus();
-    yield (0, fixtures_1.expect)(menuItem).not.toBeVisible();
-}));
-(0, fixtures_1.test)("works with nested menu structures", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDropdownMenuDriver, page, }) {
-    yield initTestBed(`
-    <DropdownMenu label="Main Menu">
-      <MenuItem>Top Level Item</MenuItem>
-      <SubMenuItem label="Category 1">
-        <MenuItem>Category 1 Item 1</MenuItem>
-        <SubMenuItem label="Subcategory">
-          <MenuItem>Deep Item 1</MenuItem>
-          <MenuItem>Deep Item 2</MenuItem>
-        </SubMenuItem>
-      </SubMenuItem>
-      <MenuSeparator />
-      <SubMenuItem label="Category 2">
-        <MenuItem>Category 2 Item 1</MenuItem>
-        <MenuItem>Category 2 Item 2</MenuItem>
-      </SubMenuItem>
-    </DropdownMenu>
-  `);
-    const driver = yield createDropdownMenuDriver();
-    // Open main menu
-    yield driver.open();
-    yield (0, fixtures_1.expect)(page.getByText("Top Level Item")).toBeVisible();
-    yield (0, fixtures_1.expect)(page.getByText("Category 1")).toBeVisible();
-    // Navigate to submenu using driver method
-    yield (0, fixtures_1.expect)(page.getByText("Category 1 Item 1")).not.toBeVisible();
-    yield driver.openSubMenu("Category 1");
-    yield (0, fixtures_1.expect)(page.getByText("Category 1 Item 1")).toBeVisible();
-    yield (0, fixtures_1.expect)(page.getByText("Subcategory")).toBeVisible();
-    // Navigate to nested submenu
-    yield (0, fixtures_1.expect)(page.getByText("Deep Item 1")).not.toBeVisible();
-    yield driver.openSubMenu("Subcategory");
-    yield (0, fixtures_1.expect)(page.getByText("Deep Item 1")).toBeVisible();
-    yield (0, fixtures_1.expect)(page.getByText("Deep Item 2")).toBeVisible();
-}));

package/dist/scripts/src/components/DropdownMenu/DropdownMenuNative.js

@@ -1,146 +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 __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());
-    });
-};
-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.MenuSeparator = exports.SubMenuItem = exports.MenuItem = exports.defaultMenuItemProps = exports.DropdownMenu = exports.defaultDropdownMenuProps = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_2 = require("react");
-const ReactDropdownMenu = __importStar(require("@radix-ui/react-dropdown-menu"));
-const classnames_1 = __importDefault(require("classnames"));
-const DropdownMenu_module_scss_1 = __importDefault(require("./DropdownMenu.module.scss"));
-const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
-const constants_1 = require("../../components-core/constants");
-const ButtonNative_1 = require("../Button/ButtonNative");
-const IconNative_1 = require("../Icon/IconNative");
-exports.defaultDropdownMenuProps = {
-    alignment: "start",
-    triggerButtonVariant: "ghost",
-    triggerButtonThemeColor: "primary",
-    triggerButtonIcon: "triggerButton:DropdownMenu", // Use component-specific icon resource pattern
-    triggerButtonIconPosition: "end",
-};
-exports.DropdownMenu = (0, react_1.forwardRef)(function DropdownMenu(_a, ref) {
-    var { triggerTemplate, children, label, registerComponentApi, style, className, onWillOpen, alignment = exports.defaultDropdownMenuProps.alignment, disabled = false, triggerButtonVariant = exports.defaultDropdownMenuProps.triggerButtonVariant, triggerButtonThemeColor = exports.defaultDropdownMenuProps.triggerButtonThemeColor, triggerButtonIcon = exports.defaultDropdownMenuProps.triggerButtonIcon, triggerButtonIconPosition = exports.defaultDropdownMenuProps.triggerButtonIconPosition } = _a, rest = __rest(_a, ["triggerTemplate", "children", "label", "registerComponentApi", "style", "className", "onWillOpen", "alignment", "disabled", "triggerButtonVariant", "triggerButtonThemeColor", "triggerButtonIcon", "triggerButtonIconPosition"]);
-    const { root } = (0, ThemeContext_1.useTheme)();
-    const [open, setOpen] = (0, react_2.useState)(false);
-    const closeTimeoutRef = (0, react_2.useRef)();
-    (0, react_2.useEffect)(() => {
-        registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
-            open: () => setOpen(true),
-            close: () => setOpen(false),
-        });
-    }, [registerComponentApi]);
-    // Cleanup timeout on unmount
-    (0, react_2.useEffect)(() => {
-        return () => {
-            if (closeTimeoutRef.current) {
-                clearTimeout(closeTimeoutRef.current);
-            }
-        };
-    }, []);
-    return ((0, jsx_runtime_1.jsxs)(ReactDropdownMenu.Root, { open: open, onOpenChange: (isOpen) => __awaiter(this, void 0, void 0, function* () {
-            if (isOpen) {
-                // Clear any pending close timeout when opening
-                if (closeTimeoutRef.current) {
-                    clearTimeout(closeTimeoutRef.current);
-                    closeTimeoutRef.current = undefined;
-                }
-                const willOpenResult = yield (onWillOpen === null || onWillOpen === void 0 ? void 0 : onWillOpen());
-                if (willOpenResult === false) {
-                    return;
-                }
-                setOpen(isOpen);
-            }
-            else {
-                // When closing, add a small delay to allow child components (like Select)
-                // to handle their click-outside events first before the DropdownMenu closes
-                closeTimeoutRef.current = setTimeout(() => {
-                    setOpen(false);
-                    closeTimeoutRef.current = undefined;
-                }, 0);
-            }
-        }), children: [(0, jsx_runtime_1.jsx)(ReactDropdownMenu.Trigger, Object.assign({}, rest, { asChild: true, disabled: disabled, ref: ref, children: triggerTemplate ? (triggerTemplate) : ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { icon: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: triggerButtonIcon, fallback: "chevrondown" }), iconPosition: triggerButtonIconPosition, type: "button", variant: triggerButtonVariant, themeColor: triggerButtonThemeColor, disabled: disabled, children: label })) })), (0, jsx_runtime_1.jsx)(ReactDropdownMenu.Portal, { container: root, children: (0, jsx_runtime_1.jsx)(ReactDropdownMenu.Content, { align: alignment, style: style, className: (0, classnames_1.default)(DropdownMenu_module_scss_1.default.DropdownMenuContent, className), children: children }) })] }));
-});
-exports.defaultMenuItemProps = {
-    iconPosition: "start",
-    active: false,
-};
-exports.MenuItem = (0, react_1.forwardRef)(function MenuItem({ children, onClick = constants_1.noop, label, style, className, icon, iconPosition = exports.defaultMenuItemProps.iconPosition, active = exports.defaultMenuItemProps.active, enabled = true, }, ref) {
-    const iconToStart = iconPosition === "start";
-    return ((0, jsx_runtime_1.jsxs)(ReactDropdownMenu.Item, { style: style, className: (0, classnames_1.default)(className, DropdownMenu_module_scss_1.default.DropdownMenuItem, {
-            [DropdownMenu_module_scss_1.default.active]: active,
-            [DropdownMenu_module_scss_1.default.disabled]: !enabled,
-        }), onClick: (event) => {
-            if (!enabled) {
-                event.preventDefault();
-                event.stopPropagation();
-                return;
-            }
-            event.stopPropagation();
-            if (enabled) {
-                onClick(event);
-            }
-        }, ref: ref, children: [iconToStart && icon, (0, jsx_runtime_1.jsx)("div", { className: DropdownMenu_module_scss_1.default.wrapper, children: label !== null && label !== void 0 ? label : children }), !iconToStart && icon] }));
-});
-exports.SubMenuItem = (0, react_1.forwardRef)(function SubMenuItem({ children, label, triggerTemplate }, ref) {
-    const { root } = (0, ThemeContext_1.useTheme)();
-    return ((0, jsx_runtime_1.jsxs)(ReactDropdownMenu.Sub, { children: [(0, jsx_runtime_1.jsx)(ReactDropdownMenu.SubTrigger, { className: DropdownMenu_module_scss_1.default.DropdownMenuSubTrigger, asChild: true, ref: ref, children: triggerTemplate ? triggerTemplate : (0, jsx_runtime_1.jsx)("div", { children: label }) }), (0, jsx_runtime_1.jsx)(ReactDropdownMenu.Portal, { container: root, children: (0, jsx_runtime_1.jsx)(ReactDropdownMenu.SubContent, { className: DropdownMenu_module_scss_1.default.DropdownMenuSubContent, children: children }) })] }));
-});
-exports.MenuSeparator = (0, react_1.forwardRef)(function MenuSeparator(props, ref) {
-    return (0, jsx_runtime_1.jsx)(ReactDropdownMenu.Separator, Object.assign({ ref: ref, className: DropdownMenu_module_scss_1.default.DropdownMenuSeparator }, props));
-});

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

@@ -1,26 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.emojiSelectorRenderer = exports.EmojiSelectorMd = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const renderers_1 = require("../../components-core/renderers");
-const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
-const metadata_helpers_1 = require("../metadata-helpers");
-const EmojiSelectorNative_1 = require("./EmojiSelectorNative");
-const EmojiSelectorNative_2 = require("./EmojiSelectorNative");
-const COMP = "EmojiSelector";
-exports.EmojiSelectorMd = (0, metadata_helpers_1.createMetadata)({
-    status: "experimental",
-    description: "`EmojiSelector` enables users to browse, search and select emojis from " +
-        "their system's native emoji set.",
-    props: {
-        autoFocus: Object.assign(Object.assign({}, (0, metadata_helpers_1.dAutoFocus)()), { defaultValue: EmojiSelectorNative_2.defaultProps.autoFocus }),
-    },
-    events: {
-        select: (0, metadata_helpers_1.d)(`This event is fired when the user selects an emoticon from this component.`),
-    },
-});
-exports.emojiSelectorRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.EmojiSelectorMd, ({ node, lookupEventHandler, extractValue }) => {
-    const onActionSelect = lookupEventHandler("select");
-    const theme = (0, ThemeContext_1.useTheme)();
-    return ((0, jsx_runtime_1.jsx)(EmojiSelectorNative_1.EmojiSelector, { select: onActionSelect, theme: theme.activeThemeTone, autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus) }));
-});

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

@@ -1,29 +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
-// =============================================================================
-fixtures_1.test.describe("Basic Functionality", () => {
-    (0, fixtures_1.test)("component renders with default properties", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`<EmojiSelector testId="emoji-selector" />`, {});
-        yield (0, fixtures_1.expect)(page.getByTestId("emoji-selector")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("display selected emoji", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        const EXPECTED_EMOTICON = "😀";
-        const { testStateDriver } = yield initTestBed(`
-    <EmojiSelector onSelect="(emoji) => { testState = emoji }" />
-  `);
-        yield page.getByText(EXPECTED_EMOTICON).click();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(EXPECTED_EMOTICON);
-    }));
-});

package/dist/scripts/src/components/EmojiSelector/EmojiSelectorNative.js

@@ -1,71 +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 __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());
-    });
-};
-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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.EmojiSelector = exports.defaultProps = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const emoji_picker_react_1 = __importStar(require("emoji-picker-react"));
-const constants_1 = require("../../components-core/constants");
-exports.defaultProps = {
-    theme: "light",
-    select: constants_1.noop,
-    autoFocus: false,
-};
-exports.EmojiSelector = (0, react_1.forwardRef)((_a, ref) => {
-    var { select = exports.defaultProps.select, theme = exports.defaultProps.theme, autoFocus = exports.defaultProps.autoFocus } = _a, rest = __rest(_a, ["select", "theme", "autoFocus"]);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, rest, { ref: ref, style: { display: "inline-block", width: "fit-content", height: "fit-content" }, children: (0, jsx_runtime_1.jsx)(emoji_picker_react_1.default, { autoFocusSearch: autoFocus, onEmojiClick: (emojiObject) => __awaiter(void 0, void 0, void 0, function* () {
-                yield select(emojiObject.emoji);
-            }), lazyLoadEmojis: true, theme: theme, previewConfig: { showPreview: false }, skinTonesDisabled: true, height: 360, emojiStyle: emoji_picker_react_1.EmojiStyle.NATIVE }) })));
-});