xmlui 0.11.4 → 0.11.7

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

@@ -1,304 +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");
-fixtures_1.test.describe("smoke tests", { tag: "@smoke" }, () => {
-    (0, fixtures_1.test)("displays menuitems after click", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-        <NavGroup label="Pages">
-          <NavLink label="Page 1" />
-          <NavGroup label="subpages">
-            <NavLink label="inner page 2" />
-            <NavLink label="inner page 3" />
-          </NavGroup>
-          <NavLink label="Page 4" />
-        </NavGroup>
-      `);
-        yield page.getByRole("button", { name: "Pages", exact: true }).click();
-        yield (0, fixtures_1.expect)(page.getByRole("menuitem")).toHaveCount(3);
-        yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "Page 1" })).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "subpages" })).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "Page 4" })).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "inner page 2" })).not.toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "inner page 3" })).not.toBeVisible();
-    }));
-    (0, fixtures_1.test)("disabled navgroup can't open", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-        <NavGroup label="Pages" enabled="false">
-          <NavLink label="Page 1" />
-          <NavGroup label="subpages">
-            <NavLink label="inner page 2" />
-            <NavLink label="inner page 3" />
-          </NavGroup>
-          <NavLink label="Page 4" />
-        </NavGroup>
-      `);
-        const pagesBtn = page.getByRole("button", { name: "Pages", exact: true });
-        yield (0, fixtures_1.expect)(pagesBtn).toBeDisabled();
-        yield pagesBtn.click({ force: true });
-        yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "Page 1" })).not.toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "inner page 2" })).not.toBeVisible();
-    }));
-    (0, fixtures_1.test)("component trigger has correct aria labels", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NavGroup testId="navGroup" label="NavGroup"/>`);
-        const button = page.getByTestId("navGroup");
-        yield (0, fixtures_1.expect)(button).toBeVisible();
-        yield (0, fixtures_1.expect)(button).toHaveAttribute("aria-expanded", "false");
-        yield button.click();
-        yield (0, fixtures_1.expect)(button).toHaveAttribute("aria-expanded", "true");
-    }));
-    (0, fixtures_1.test)("expanded in vertical layout to show link of current page", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-        yield initTestBed(`
-      <App layout="vertical">
-        <NavPanel>
-          <NavGroup label="Current-upper">
-            <NavGroup label="Current">
-              <NavLink label="link-to-current-page" to="/" />
-            </NavGroup>
-          </NavGroup>
-        </NavPanel>
-      </App>`);
-        yield (0, fixtures_1.expect)(page.getByText("link-to-current-page")).toBeVisible();
-    }));
-});
-(0, fixtures_1.test)("nested disabled navgroup can't open", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-    yield initTestBed(`
-        <NavGroup label="Pages" >
-          <NavLink label="Page 1" />
-          <NavGroup label="subpages" enabled="false">
-            <NavLink label="inner page 2" />
-            <NavLink label="inner page 3" />
-          </NavGroup>
-          <NavLink label="Page 4" />
-        </NavGroup>
-      `);
-    const pagesBtn = page.getByRole("button", { name: "Pages", exact: true });
-    yield pagesBtn.click();
-    yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "Page 1" })).toBeVisible();
-    const subpagesBtn = page.getByRole("menuitem", { name: "subpages" });
-    yield (0, fixtures_1.expect)(subpagesBtn).toBeDisabled();
-    yield subpagesBtn.click({ force: true });
-    yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "inner page 2" })).not.toBeVisible();
-}));
-(0, fixtures_1.test)("initiallyExpanded works", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-    yield initTestBed(`
-    <NavGroup label="Pages" initiallyExpanded="true">
-      <NavLink label="Page 1" />
-      <NavGroup label="subpages">
-        <NavLink label="inner page 2" />
-        <NavLink label="inner page 3" />
-      </NavGroup>
-      <NavLink label="Page 4" />
-    </NavGroup>
-  `);
-    yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "Page 1" })).toBeVisible();
-    yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "inner page 2" })).not.toBeVisible();
-}));
-(0, fixtures_1.test)("nested initiallyExpanded works", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-    yield initTestBed(`
-    <Stack testId="stack">
-      <NavGroup label="Pages" initiallyExpanded="true">
-        <NavLink label="Page 1" />
-        <NavGroup label="subpages" initiallyExpanded="true">
-          <NavLink label="inner page 2" />
-          <NavLink label="inner page 3" />
-        </NavGroup>
-        <NavLink label="Page 4" />
-      </NavGroup>
-    </Stack>
-  `);
-    const stack = page.getByTestId("stack");
-    yield (0, fixtures_1.expect)(stack).toBeVisible();
-    const items = page.getByRole("menuitem");
-    yield (0, fixtures_1.expect)(items).toHaveCount(3);
-    (0, fixtures_1.expect)(items.nth(0)).toHaveText("Page 1");
-    (0, fixtures_1.expect)(items.nth(1)).toHaveText("subpages");
-    (0, fixtures_1.expect)(items.nth(2)).toHaveText("Page 4");
-}));
-(0, fixtures_1.test)("expands even without label", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-    yield initTestBed(`
-    <NavGroup >
-      <NavLink label="Page 1" />
-      <NavGroup label="subpages">
-        <NavLink label="inner page 2" />
-        <NavLink label="inner page 3" />
-      </NavGroup>
-      <NavLink label="Page 4" />
-    </NavGroup>
-  `);
-    yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "Page 1" })).not.toBeVisible();
-    yield page.getByRole("button").click();
-    yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "Page 1" })).toBeVisible();
-}));
-fixtures_1.test.describe("icon props", () => {
-    (0, fixtures_1.test)("icon appears", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testIcons } = yield initTestBed(`<App layout="vertical">
-        <NavPanel>
-          <NavGroup icon="bell" label="NavGroup">
-            <NavLink label="link" to="/" />
-          </NavGroup>
-        </NavPanel>
-      </App>`);
-        yield (0, fixtures_1.expect)(testIcons.bellIcon).toBeVisible();
-    }));
-    (0, fixtures_1.test)("iconHorizontal shows in horizontal layout submenu", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testIcons } = yield initTestBed(`
-      <App layout="horizontal">
-        <NavPanel>
-          <NavGroup label="Send To">
-            <NavGroup icon="users" label="Team"
-              iconHorizontalExpanded="bell" iconHorizontalCollapsed="eye">
-              <NavLink label="Jane" />
-            </NavGroup>
-          </NavGroup>
-        </NavPanel>
-      </App>
-    `);
-        const bell = testIcons.bellIcon;
-        const eye = testIcons.eyeIcon;
-        yield (0, fixtures_1.expect)(bell).not.toBeVisible();
-        yield (0, fixtures_1.expect)(eye).not.toBeVisible();
-        yield page.getByRole("button", { name: "Send to" }).click();
-        yield (0, fixtures_1.expect)(bell).not.toBeVisible();
-        yield (0, fixtures_1.expect)(eye).toBeVisible();
-        yield page.getByRole("menuitem", { name: "Team" }).hover();
-        yield (0, fixtures_1.expect)(bell).toBeVisible();
-        yield (0, fixtures_1.expect)(eye).not.toBeVisible();
-    }));
-    (0, fixtures_1.test)("iconVertical shows in horizontal layout top lvl navgroup", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-        const { testIcons } = yield initTestBed(`
-      <App layout="horizontal">
-        <NavPanel>
-          <NavGroup icon="users" label="Team"
-            iconVerticalExpanded="bell" iconVerticalCollapsed="eye">
-            <NavLink label="Jane" />
-          </NavGroup>
-        </NavPanel>
-      </App>
-    `);
-        const bell = testIcons.bellIcon;
-        const eye = testIcons.eyeIcon;
-        yield (0, fixtures_1.expect)(bell).not.toBeVisible();
-        yield (0, fixtures_1.expect)(eye).toBeVisible();
-        yield page.getByText("Team").click();
-        yield (0, fixtures_1.expect)(bell).toBeVisible();
-        yield (0, fixtures_1.expect)(eye).not.toBeVisible();
-    }));
-    (0, fixtures_1.test)("iconVertical shows in vertical layout submenu", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testIcons } = yield initTestBed(`
-      <App layout="vertical">
-        <NavPanel>
-          <NavGroup label="Send To">
-            <NavGroup icon="users" label="Team"
-              iconVerticalExpanded="bell" iconVerticalCollapsed="eye">
-              <NavLink label="Jane" />
-            </NavGroup>
-          </NavGroup>
-        </NavPanel>
-      </App>
-    `);
-        const bell = testIcons.bellIcon;
-        const eye = testIcons.eyeIcon;
-        yield (0, fixtures_1.expect)(bell).not.toBeVisible();
-        yield page.getByText("Send to").click();
-        yield (0, fixtures_1.expect)(bell).not.toBeVisible();
-        yield (0, fixtures_1.expect)(eye).toBeVisible();
-        yield page.getByText("Team").click();
-        yield (0, fixtures_1.expect)(bell).toBeVisible();
-        yield (0, fixtures_1.expect)(eye).not.toBeVisible();
-    }));
-});
-// =============================================================================
-// DRAWER INTERACTION TESTS
-// =============================================================================
-fixtures_1.test.describe("Drawer Interaction", () => {
-    (0, fixtures_1.test)("clicking NavGroup toggle in drawer does not close drawer", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-        // Set small viewport to trigger drawer mode
-        yield page.setViewportSize({ width: 400, height: 600 });
-        yield initTestBed(`
-      <App layout="condensed">
-        <AppHeader testId="appHeader"/>
-        <NavPanel>
-          <NavGroup label="Pages">
-            <NavLink label="Page 1" to="/page1"/>
-            <NavLink label="Page 2" to="/page2"/>
-          </NavGroup>
-        </NavPanel>
-        <Pages fallbackPath="/">
-          <Page url="/">
-            <Text value="Home" />
-          </Page>
-          <Page url="/page1">
-            <Text value="Page 1" />
-          </Page>
-          <Page url="/page2">
-            <Text value="Page 2" />
-          </Page>
-        </Pages>
-      </App>
-    `);
-        // Open drawer by clicking hamburger button
-        const appHeader = page.getByTestId("appHeader");
-        const hamburgerButton = appHeader.locator('[data-part-id="hamburger"]').first();
-        yield hamburgerButton.click();
-        const dialog = page.getByRole("dialog");
-        yield (0, fixtures_1.expect)(dialog).toBeVisible();
-        // finst the first element in the dialog with a text of "Pages"
-        const navGroupToggle = dialog.getByRole("button", { name: "Pages" });
-        yield navGroupToggle.click();
-        yield page.waitForTimeout(200);
-        yield (0, fixtures_1.expect)(dialog).toBeVisible();
-        // There must be a text "Page1"
-        yield (0, fixtures_1.expect)(dialog).toContainText("Page 1");
-        yield (0, fixtures_1.expect)(dialog).toContainText("Page 2");
-    }));
-    (0, fixtures_1.test)("clicking NavLink in drawer closes drawer", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        // Set small viewport to trigger drawer mode
-        yield page.setViewportSize({ width: 400, height: 600 });
-        yield initTestBed(`
-      <App layout="condensed">
-        <AppHeader />
-        <NavPanel>
-          <NavGroup label="Pages">
-            <NavLink label="Page 1" to="/page1"/>
-            <NavLink label="Page 2" to="/page2"/>
-          </NavGroup>
-        </NavPanel>
-        <Pages fallbackPath="/">
-          <Page url="/">
-            <Text value="Home" />
-          </Page>
-          <Page url="/page1">
-            <Text value="Page 1 Content" />
-          </Page>
-          <Page url="/page2">
-            <Text value="Page 2" />
-          </Page>
-        </Pages>
-      </App>
-    `);
-        // Open drawer
-        const hamburgerButton = page.locator('[data-part-id="hamburger"]');
-        yield hamburgerButton.click();
-        const dialog = page.getByRole("dialog");
-        yield (0, fixtures_1.expect)(dialog).toBeVisible();
-        // Expand NavGroup
-        const navGroupToggle = dialog.getByRole("button", { name: "Pages" });
-        yield navGroupToggle.click();
-        yield page.waitForTimeout(200);
-        // Click a NavLink to navigate
-        yield dialog.getByRole("link", { name: "Page 1" }).click();
-        // Verify navigation occurred
-        yield (0, fixtures_1.expect)(page.getByText("Page 1 Content")).toBeVisible();
-        // Verify drawer is closed
-        yield (0, fixtures_1.expect)(dialog).not.toBeVisible();
-    }));
-});

package/dist/scripts/src/components/NavGroup/NavGroupContext.js

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NavGroupContext = void 0;
-const react_1 = require("react");
-const NavGroupNative_1 = require("./NavGroupNative");
-exports.NavGroupContext = (0, react_1.createContext)({
-    level: -1,
-    layoutIsVertical: false,
-    iconHorizontalCollapsed: NavGroupNative_1.defaultProps.iconHorizontalCollapsed,
-    iconHorizontalExpanded: NavGroupNative_1.defaultProps.iconHorizontalExpanded,
-    iconVerticalCollapsed: NavGroupNative_1.defaultProps.iconVerticalCollapsed,
-    iconVerticalExpanded: NavGroupNative_1.defaultProps.iconVerticalExpanded,
-});

package/dist/scripts/src/components/NavGroup/NavGroupNative.js

@@ -1,133 +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.NavGroup = exports.defaultProps = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_dropdown_menu_1 = require("@radix-ui/react-dropdown-menu");
-const NavGroup_module_scss_1 = __importDefault(require("./NavGroup.module.scss"));
-const constants_1 = require("../../components-core/constants");
-const mergeProps_1 = require("../../components-core/utils/mergeProps");
-const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
-const IconNative_1 = require("../Icon/IconNative");
-const NavLinkNative_1 = require("../NavLink/NavLinkNative");
-const AppLayoutContext_1 = require("../App/AppLayoutContext");
-const NavPanelNative_1 = require("../NavPanel/NavPanelNative");
-const react_2 = require("@remix-run/react");
-const classnames_1 = __importDefault(require("classnames"));
-const NavGroupContext_1 = require("./NavGroupContext");
-const AppNative_1 = require("../App/AppNative");
-exports.defaultProps = {
-    iconHorizontalExpanded: "chevronright",
-    iconHorizontalCollapsed: "chevronright",
-    iconVerticalExpanded: "chevrondown",
-    iconVerticalCollapsed: "chevronright",
-};
-exports.NavGroup = (0, react_1.forwardRef)(function NavGroup(_a, ref) {
-    var { node, style, label, icon, renderChild, to, disabled = false, initiallyExpanded = false, iconHorizontalCollapsed, iconHorizontalExpanded, iconVerticalCollapsed, iconVerticalExpanded } = _a, rest = __rest(_a, ["node", "style", "label", "icon", "renderChild", "to", "disabled", "initiallyExpanded", "iconHorizontalCollapsed", "iconHorizontalExpanded", "iconVerticalCollapsed", "iconVerticalExpanded"]);
-    const { level } = (0, react_1.useContext)(NavGroupContext_1.NavGroupContext);
-    const appLayoutContext = (0, AppLayoutContext_1.useAppLayoutContext)();
-    const navPanelContext = (0, react_1.useContext)(NavPanelNative_1.NavPanelContext);
-    const layoutIsVertical = !!appLayoutContext && (0, AppNative_1.getAppLayoutOrientation)(appLayoutContext.layout).includes("vertical");
-    let inline = (appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === "vertical" ||
-        (appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === "vertical-sticky" ||
-        (appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === "vertical-full-header";
-    if (navPanelContext !== null) {
-        inline = navPanelContext.inDrawer;
-    }
-    const navGroupContextValue = (0, react_1.useMemo)(() => {
-        return {
-            level: level + 1,
-            layoutIsVertical,
-            iconHorizontalCollapsed: iconHorizontalCollapsed !== null && iconHorizontalCollapsed !== void 0 ? iconHorizontalCollapsed : exports.defaultProps.iconHorizontalCollapsed,
-            iconHorizontalExpanded: iconHorizontalExpanded !== null && iconHorizontalExpanded !== void 0 ? iconHorizontalExpanded : exports.defaultProps.iconHorizontalExpanded,
-            iconVerticalCollapsed: iconVerticalCollapsed !== null && iconVerticalCollapsed !== void 0 ? iconVerticalCollapsed : (level < 0 && !inline
-                ? exports.defaultProps.iconVerticalExpanded
-                : exports.defaultProps.iconVerticalCollapsed),
-            iconVerticalExpanded: iconVerticalExpanded !== null && iconVerticalExpanded !== void 0 ? iconVerticalExpanded : exports.defaultProps.iconVerticalExpanded,
-        };
-    }, [
-        iconHorizontalCollapsed,
-        iconHorizontalExpanded,
-        iconVerticalCollapsed,
-        iconVerticalExpanded,
-        level,
-        layoutIsVertical,
-        inline,
-    ]);
-    return ((0, jsx_runtime_1.jsx)(NavGroupContext_1.NavGroupContext.Provider, { value: navGroupContextValue, children: inline ? ((0, jsx_runtime_1.jsx)(ExpandableNavGroup, Object.assign({}, rest, { to: to, style: style, label: label, icon: icon, node: node, renderChild: renderChild, ref: ref, initiallyExpanded: initiallyExpanded, disabled: disabled }))) : ((0, jsx_runtime_1.jsx)(DropDownNavGroup, Object.assign({}, rest, { label: label, icon: icon, node: node, renderChild: renderChild, ref: ref, to: to, initiallyExpanded: initiallyExpanded, disabled: disabled }))) }));
-});
-const ExpandableNavGroup = (0, react_1.forwardRef)(function ExpandableNavGroup(_a, ref) {
-    var { style = constants_1.EMPTY_OBJECT, label, icon, renderChild, node, to, initiallyExpanded = false, disabled = false } = _a, rest = __rest(_a, ["style", "label", "icon", "renderChild", "node", "to", "initiallyExpanded", "disabled"]);
-    const { level, iconVerticalCollapsed, iconVerticalExpanded, layoutIsVertical } = (0, react_1.useContext)(NavGroupContext_1.NavGroupContext);
-    const [expanded, setExpanded] = (0, react_1.useState)(initiallyExpanded);
-    const groupContentInnerRef = (0, react_1.useRef)(null);
-    const { pathname } = (0, react_2.useLocation)();
-    (0, react_1.useEffect)(() => {
-        const hasActiveNavLink = groupContentInnerRef.current.querySelector(".xmlui-navlink-active") !== null;
-        if (hasActiveNavLink) {
-            setExpanded(true);
-        }
-    }, [pathname]);
-    const toggleStyle = Object.assign(Object.assign({}, style), { "--nav-link-level": layoutIsVertical ? level : 0 });
-    const handleClick = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        setExpanded((prev) => !prev);
-    };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(NavLinkNative_1.NavLink, Object.assign({}, rest, { style: toggleStyle, onClick: handleClick, icon: icon, to: to, disabled: disabled, "aria-expanded": expanded, children: [label, (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } }), (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: expanded ? iconVerticalExpanded : iconVerticalCollapsed })] })), (0, jsx_runtime_1.jsx)("div", { "aria-hidden": !expanded, className: (0, classnames_1.default)(NavGroup_module_scss_1.default.groupContent, {
-                    [NavGroup_module_scss_1.default.expanded]: expanded,
-                }), children: (0, jsx_runtime_1.jsx)("div", { className: NavGroup_module_scss_1.default.groupContentInner, ref: groupContentInnerRef, children: renderChild(node.children) }) })] }));
-});
-const DropDownNavGroup = (0, react_1.forwardRef)(function DropDownNavGroup(_a, ref) {
-    var { label, icon, renderChild, node, to, disabled = false, initiallyExpanded = false } = _a, rest = __rest(_a, ["label", "icon", "renderChild", "node", "to", "disabled", "initiallyExpanded"]);
-    const { level, iconHorizontalCollapsed, iconHorizontalExpanded, iconVerticalCollapsed, iconVerticalExpanded, } = (0, react_1.useContext)(NavGroupContext_1.NavGroupContext);
-    const { root } = (0, ThemeContext_1.useTheme)();
-    let Wrapper = react_dropdown_menu_1.DropdownMenu;
-    let Trigger = react_dropdown_menu_1.DropdownMenuTrigger;
-    let Content = react_dropdown_menu_1.DropdownMenuContent;
-    if (level >= 1) {
-        Wrapper = react_dropdown_menu_1.DropdownMenuSub;
-        Trigger = react_dropdown_menu_1.DropdownMenuSubTrigger;
-        Content = react_dropdown_menu_1.DropdownMenuSubContent;
-    }
-    const [expanded, setExpanded] = (0, react_1.useState)(initiallyExpanded);
-    const [renderCount, setRenderCount] = (0, react_1.useState)(false);
-    (0, react_1.useEffect)(() => setRenderCount(true), []);
-    return ((0, jsx_runtime_1.jsxs)(Wrapper, Object.assign({}, rest, { open: expanded, onOpenChange: (open) => {
-            if (renderCount)
-                setExpanded(open);
-        }, children: [(0, jsx_runtime_1.jsx)(Trigger, { asChild: true, disabled: disabled, children: (0, jsx_runtime_1.jsxs)(NavLinkNative_1.NavLink, { icon: icon, style: { flexShrink: 0 }, vertical: level >= 1, to: to, disabled: disabled, children: [label, (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } }), level === 0 && (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: expanded ? iconVerticalExpanded : iconVerticalCollapsed }), level >= 1 && ((0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: expanded ? iconHorizontalExpanded : iconHorizontalCollapsed }))] }) }), (0, jsx_runtime_1.jsx)(react_dropdown_menu_1.DropdownMenuPortal, { container: root, children: (0, jsx_runtime_1.jsx)(Content, { className: NavGroup_module_scss_1.default.dropdownList, style: { display: "flex", flexDirection: "column" }, side: "bottom", align: "start", children: renderChild(node.children, {
-                        wrapChild: ({ node }, renderedChild, hints) => {
-                            if (hints === null || hints === void 0 ? void 0 : hints.opaque) {
-                                return renderedChild;
-                            }
-                            if (node.type === "List") {
-                                return renderedChild;
-                            }
-                            if (node.type === "NavGroup") {
-                                return renderedChild;
-                            }
-                            let child = renderedChild;
-                            if (node.type === "NavLink") {
-                                child = (0, react_1.cloneElement)(renderedChild, Object.assign({}, (0, mergeProps_1.mergeProps)(renderedChild.props, {
-                                    vertical: true,
-                                })));
-                            }
-                            return (0, jsx_runtime_1.jsx)(react_dropdown_menu_1.DropdownMenuItem, { asChild: true, children: child });
-                        },
-                    }) }) })] })));
-});

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

@@ -1,86 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.navLinkComponentRenderer = exports.NavLinkMd = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const NavLink_module_scss_1 = __importDefault(require("./NavLink.module.scss"));
-const renderers_1 = require("../../components-core/renderers");
-const themeVars_1 = require("../../components-core/theming/themeVars");
-const metadata_helpers_1 = require("../metadata-helpers");
-const IconNative_1 = require("../Icon/IconNative");
-const NavLinkNative_1 = require("./NavLinkNative");
-const abstractions_1 = require("../abstractions");
-const COMP = "NavLink";
-exports.NavLinkMd = (0, metadata_helpers_1.createMetadata)({
-    status: "stable",
-    description: "`NavLink` creates interactive navigation items that connect users to different " +
-        "destinations within an app or external URLs. It automatically indicates active " +
-        "states, supports custom icons and labels, and can execute custom actions instead " +
-        "of navigation when needed.",
-    props: {
-        to: (0, metadata_helpers_1.d)(`This property defines the URL of the link.`),
-        enabled: (0, metadata_helpers_1.dEnabled)(),
-        active: {
-            description: `This property indicates if the particular navigation is an active link. An active link ` +
-                `has a particular visual appearance, provided its [\`displayActive\`](#displayactive) ` +
-                `property is set to \`true\`.`,
-            valueType: "boolean",
-            defaultValue: NavLinkNative_1.defaultProps.active,
-        },
-        target: {
-            description: `This optionally property specifies how to open the clicked link.`,
-            availableValues: abstractions_1.LinkTargetMd,
-            type: "string",
-        },
-        label: (0, metadata_helpers_1.dLabel)(),
-        vertical: {
-            description: `This property sets how the active status is displayed on the \`${COMP}\` component. If ` +
-                `set to true, the indicator is displayed on the side which lends itself to a vertically ` +
-                `aligned navigation menu. By default, it displays a horizontal indicator.`,
-            valueType: "boolean",
-        },
-        displayActive: {
-            description: `This Boolean property indicates if the active state of a link should have a visual ` +
-                `indication. Setting it to \`false\` removes the visual indication of an active link.`,
-            valueType: "boolean",
-            defaultValue: NavLinkNative_1.defaultProps.displayActive,
-        },
-        icon: (0, metadata_helpers_1.d)(`This property allows you to add an optional icon (specify the icon's name) to the navigation link.`),
-    },
-    events: {
-        click: (0, metadata_helpers_1.dClick)(COMP),
-    },
-    themeVars: (0, themeVars_1.parseScssVar)(NavLink_module_scss_1.default.themeVars),
-    themeVarDescriptions: {
-        [`color-indicator-${COMP}`]: "Provides the following states: `--hover`, `--active`, `--pressed`",
-    },
-    defaultThemeVars: {
-        [`border-${COMP}`]: "0px solid $borderColor",
-        [`borderRadius-${COMP}`]: "$borderRadius",
-        [`backgroundColor-${COMP}`]: "transparent",
-        [`paddingHorizontal-${COMP}`]: "$space-4",
-        [`paddingVertical-${COMP}`]: "$space-2",
-        [`fontSize-${COMP}`]: "$fontSize-sm",
-        [`fontWeight-${COMP}`]: "$fontWeight-normal",
-        [`fontFamily-${COMP}`]: "$fontFamily",
-        [`textColor-${COMP}`]: "$textColor-primary",
-        [`fontWeight-${COMP}--pressed`]: "$fontWeight-normal",
-        [`thickness-indicator-${COMP}`]: "$space-0_5",
-        [`outlineColor-${COMP}--focus`]: "$outlineColor--focus",
-        [`outlineWidth-${COMP}--focus`]: "$outlineWidth--focus",
-        [`outlineStyle-${COMP}--focus`]: "$outlineStyle--focus",
-        [`outlineOffset-${COMP}--focus`]: "-1px",
-        [`borderRadius-indicator-${COMP}`]: "$borderRadius",
-        [`color-icon-${COMP}`]: "$color-surface-500",
-        [`color-indicator-${COMP}--active`]: "$color-primary-500",
-        [`color-indicator-${COMP}--pressed`]: "$color-primary-500",
-        [`color-indicator-${COMP}--hover`]: "$color-primary-600",
-    },
-});
-exports.navLinkComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.NavLinkMd, ({ node, extractValue, renderChild, className }) => {
-    var _a, _b;
-    const iconName = extractValue.asString(node.props.icon);
-    return ((0, jsx_runtime_1.jsx)(NavLinkNative_1.NavLink, { uid: node.uid, to: extractValue(node.props.to), disabled: !extractValue.asOptionalBoolean((_a = node.props.enabled) !== null && _a !== void 0 ? _a : true), vertical: extractValue.asOptionalBoolean(node.props.vertical), displayActive: extractValue.asOptionalBoolean(node.props.displayActive), forceActive: extractValue.asOptionalBoolean(node.props.active), className: className, target: extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.target), icon: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: iconName, className: NavLink_module_scss_1.default.icon }), children: extractValue.asDisplayText(node.props.label) || renderChild(node.children) }));
-});