xmlui 0.11.4 → 0.11.6

package/dist/scripts/src/components/TableOfContents/TableOfContentsNative.js

@@ -1,81 +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.TableOfContents = exports.defaultProps = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_2 = require("@remix-run/react");
-const scroll_into_view_if_needed_1 = __importDefault(require("scroll-into-view-if-needed"));
-const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
-const classnames_1 = __importDefault(require("classnames"));
-const TableOfContents_module_scss_1 = __importDefault(require("./TableOfContents.module.scss"));
-const TableOfContentsContext_1 = require("../../components-core/TableOfContentsContext");
-const hooks_1 = require("../../components-core/utils/hooks");
-exports.defaultProps = {
-    smoothScrolling: false,
-    maxHeadingLevel: 6,
-    omitH1: false,
-};
-exports.TableOfContents = (0, react_1.forwardRef)(function TableOfContents(_a, forwardedRef) {
-    var { style, smoothScrolling = exports.defaultProps.smoothScrolling, maxHeadingLevel = exports.defaultProps.maxHeadingLevel, omitH1 = exports.defaultProps.omitH1, className } = _a, rest = __rest(_a, ["style", "smoothScrolling", "maxHeadingLevel", "omitH1", "className"]);
-    const tocRef = (0, react_1.useRef)(null);
-    const { headings, scrollToAnchor, subscribeToActiveAnchorChange, activeAnchorId: initialActiveAnchorId, } = (0, TableOfContentsContext_1.useTableOfContents)();
-    const [activeAnchorId, setActiveId] = (0, react_1.useState)(initialActiveAnchorId);
-    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
-        return subscribeToActiveAnchorChange((id) => {
-            const foundHeading = headings.find((heading) => heading.id === id);
-            if ((foundHeading === null || foundHeading === void 0 ? void 0 : foundHeading.level) <= maxHeadingLevel) {
-                setActiveId(id);
-            }
-        });
-    }, [headings, maxHeadingLevel, subscribeToActiveAnchorChange]);
-    const ref = forwardedRef ? (0, react_compose_refs_1.composeRefs)(tocRef, forwardedRef) : tocRef;
-    (0, react_1.useEffect)(() => {
-        if (activeAnchorId && (tocRef === null || tocRef === void 0 ? void 0 : tocRef.current)) {
-            const activeAnchor = tocRef.current.querySelector(`#${activeAnchorId}`);
-            if (activeAnchor) {
-                (0, scroll_into_view_if_needed_1.default)(activeAnchor, {
-                    block: "center",
-                    inline: "center",
-                    behavior: "smooth",
-                    scrollMode: "always",
-                    boundary: tocRef.current,
-                });
-            }
-        }
-    }, [activeAnchorId, headings]);
-    return ((0, jsx_runtime_1.jsx)("nav", Object.assign({}, rest, { "aria-label": "Table of Contents", className: (0, classnames_1.default)(TableOfContents_module_scss_1.default.nav, className), ref: ref, style: style, children: (0, jsx_runtime_1.jsx)("ul", { className: TableOfContents_module_scss_1.default.list, children: headings.map((value) => {
-                if (value.level <= maxHeadingLevel && (!omitH1 || value.level !== 1)) {
-                    return ((0, jsx_runtime_1.jsx)("li", { className: (0, classnames_1.default)(TableOfContents_module_scss_1.default.listItem, {
-                            [TableOfContents_module_scss_1.default.active]: value.id === activeAnchorId,
-                        }), children: (0, jsx_runtime_1.jsx)(react_2.Link, { "aria-current": value.id === activeAnchorId ? "page" : "false", className: (0, classnames_1.default)(TableOfContents_module_scss_1.default.link, {
-                                [TableOfContents_module_scss_1.default.head_1]: value.level === 1,
-                                [TableOfContents_module_scss_1.default.head_2]: value.level === 2,
-                                [TableOfContents_module_scss_1.default.head_3]: value.level === 3,
-                                [TableOfContents_module_scss_1.default.head_4]: value.level === 4,
-                                [TableOfContents_module_scss_1.default.head_5]: value.level === 5,
-                                [TableOfContents_module_scss_1.default.head_6]: value.level === 6,
-                            }), to: `#${value.id}`, onClick: (event) => {
-                                // cmd/ctrl + click - open in new tab, don't prevent that
-                                if (!event.ctrlKey && !event.metaKey && !event.metaKey) {
-                                    event.preventDefault();
-                                }
-                                scrollToAnchor(value.id, smoothScrolling);
-                            }, id: value.id, children: value.text }) }, value.id));
-                }
-                return null;
-            }) }) })));
-});

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

@@ -1,58 +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.TabContext = void 0;
-exports.useTabContextValue = useTabContextValue;
-exports.useTabContext = useTabContext;
-const react_1 = require("react");
-const immer_1 = __importDefault(require("immer"));
-const constants_1 = require("../../components-core/constants");
-exports.TabContext = (0, react_1.createContext)({
-    register: (tabItem) => { },
-    unRegister: (innerId) => { },
-    activeTabId: "",
-    getTabItems: () => [],
-});
-function useTabContextValue() {
-    const [tabItems, setTabItems] = (0, react_1.useState)(constants_1.EMPTY_ARRAY);
-    const tabItemsRef = (0, react_1.useRef)(constants_1.EMPTY_ARRAY);
-    tabItemsRef.current = tabItems;
-    const [activeTabId, setActiveTabId] = (0, react_1.useState)("");
-    const register = (0, react_1.useCallback)((tabItem) => {
-        setTabItems((0, immer_1.default)((draft) => {
-            const existing = draft.findIndex((col) => col.innerId === tabItem.innerId);
-            if (existing < 0) {
-                draft.push(tabItem);
-            }
-            else {
-                draft[existing] = tabItem;
-            }
-        }));
-    }, []);
-    const unRegister = (0, react_1.useCallback)((innerId) => {
-        setTabItems((0, immer_1.default)((draft) => {
-            return draft.filter((col) => col.innerId !== innerId);
-        }));
-    }, []);
-    const getTabItems = (0, react_1.useCallback)(() => {
-        return tabItemsRef.current;
-    }, []);
-    const tabContextValue = (0, react_1.useMemo)(() => {
-        return {
-            register,
-            unRegister,
-            activeTabId,
-            setActiveTabId,
-            getTabItems,
-        };
-    }, [register, unRegister, activeTabId, getTabItems]);
-    return {
-        tabItems,
-        tabContextValue,
-    };
-}
-function useTabContext() {
-    return (0, react_1.useContext)(exports.TabContext);
-}

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

@@ -1,44 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.tabItemComponentRenderer = exports.TabItemMd = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const renderers_1 = require("../../components-core/renderers");
-const TabItemNative_1 = require("./TabItemNative");
-const metadata_helpers_1 = require("../metadata-helpers");
-const container_helpers_1 = require("../container-helpers");
-const COMP = "TabItem";
-exports.TabItemMd = (0, metadata_helpers_1.createMetadata)({
-    status: "stable",
-    description: "`TabItem` defines individual tabs within a [Tabs](/components/Tabs) component, " +
-        "providing both the tab header label and the content that displays when the tab " +
-        "is selected. As a non-visual structural component, it serves as a container that " +
-        "organizes content into distinct, switchable sections.",
-    docFolder: "Tabs",
-    props: {
-        label: (0, metadata_helpers_1.dLabel)(),
-        headerTemplate: (0, metadata_helpers_1.dComponent)("This property allows the customization of the TabItem header."),
-    },
-    events: {
-        activated: {
-            description: "This event is triggered when the tab is activated.",
-        },
-    },
-    contextVars: {
-        $header: (0, metadata_helpers_1.d)("This context value represents the header context with props: id (optional), index, label, isActive."),
-    },
-});
-exports.tabItemComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.TabItemMd, (rendererContext) => {
-    const { node, renderChild, extractValue, lookupEventHandler } = rendererContext;
-    return ((0, jsx_runtime_1.jsx)(TabItemNative_1.TabItemComponent, { id: extractValue(node.uid), label: extractValue(node.props.label), activated: lookupEventHandler("activated"), headerRenderer: node.props.headerTemplate
-            ? (item) => {
-                return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.props.headerTemplate, itemKey: "$header", contextVars: {
-                        $header: {
-                            id: item.id,
-                            index: item.index,
-                            label: item.label,
-                            isActive: item.isActive,
-                        },
-                    }, renderChild: renderChild }));
-            }
-            : undefined, children: renderChild(node.children) }));
-});

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

@@ -1,53 +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.TabItemComponent = void 0;
-const react_1 = require("react");
-const react_2 = require("react");
-const react_tabs_1 = require("@radix-ui/react-tabs");
-const Tabs_module_scss_1 = __importDefault(require("../Tabs/Tabs.module.scss"));
-const TabContext_1 = require("./TabContext");
-exports.TabItemComponent = (0, react_2.forwardRef)(function TabItemComponent(_a, forwardedRef) {
-    var _b;
-    var { children, label, headerRenderer, style, id, activated } = _a, rest = __rest(_a, ["children", "label", "headerRenderer", "style", "id", "activated"]);
-    const innerId = (0, react_2.useId)();
-    const { register, unRegister, activeTabId, getTabItems } = (0, TabContext_1.useTabContext)();
-    (0, react_2.useEffect)(() => {
-        register({
-            label,
-            headerRenderer,
-            innerId,
-            id, // Store the external id (can be undefined)
-        });
-    }, [innerId, id, label, headerRenderer, register]);
-    (0, react_2.useEffect)(() => {
-        return () => {
-            unRegister(innerId);
-        };
-    }, [innerId, unRegister]);
-    (0, react_2.useEffect)(() => {
-        if (activeTabId === innerId && activated) {
-            activated();
-        }
-    }, [activeTabId, innerId, activated]);
-    if (activeTabId !== innerId)
-        return null;
-    // Find the index of this tab for ordering
-    const tabItems = getTabItems();
-    const tabIndex = (_b = tabItems === null || tabItems === void 0 ? void 0 : tabItems.findIndex(item => item.innerId === innerId)) !== null && _b !== void 0 ? _b : 0;
-    const contentOrder = tabIndex * 2 + 1;
-    return ((0, react_1.createElement)(react_tabs_1.Content, Object.assign({}, rest, { key: innerId, value: innerId, className: Tabs_module_scss_1.default.tabsContent, ref: forwardedRef, style: Object.assign(Object.assign({}, style), { order: contentOrder }) }), children));
-});

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

@@ -1,95 +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.tabsComponentRenderer = exports.TabsMd = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Tabs_module_scss_1 = __importDefault(require("./Tabs.module.scss"));
-const themeVars_1 = require("../../components-core/theming/themeVars");
-const renderers_1 = require("../../components-core/renderers");
-const container_helpers_1 = require("../container-helpers");
-const TabsNative_1 = require("./TabsNative");
-const metadata_helpers_1 = require("../metadata-helpers");
-const COMP = "Tabs";
-exports.TabsMd = (0, metadata_helpers_1.createMetadata)({
-    status: "experimental",
-    description: "`Tabs` enables users to switch among content panels using clickable tab headers. " +
-        "It provides an efficient way to present multiple related sections in a single " +
-        "interface area, with each tab containing distinct content defined by " +
-        "[TabItem](/components/TabItem) components.",
-    props: {
-        activeTab: (0, metadata_helpers_1.d)(`This property indicates the index of the active tab. The indexing starts from 0, ` +
-            `representing the starting (leftmost) tab. If not set, the first tab is selected by default.`),
-        orientation: {
-            description: `This property indicates the orientation of the component. In horizontal orientation, ` +
-                `the tab sections are laid out on the left side of the content panel, while in vertical ` +
-                `orientation, the buttons are at the top. Note: This property is ignored when ` +
-                `accordionView is set to true.`,
-            availableValues: ["horizontal", "vertical"],
-            defaultValue: TabsNative_1.defaultProps.orientation,
-            valueType: "string",
-        },
-        tabAlignment: {
-            description: `This property controls how tabs are aligned within the tab header container in ` +
-                `horizontal orientation. Use 'start' to align tabs to the left, 'end' to align to the ` +
-                `right, 'center' to center the tabs, and 'stretch' to make tabs fill the full width ` +
-                `of the header. Note: This property is ignored when orientation is set to 'vertical' ` +
-                `or when accordionView is enabled.`,
-            availableValues: ["start", "end", "center", "stretch"],
-            defaultValue: TabsNative_1.defaultProps.tabAlignment,
-            valueType: "string",
-        },
-        accordionView: {
-            description: `When enabled, displays tabs in an accordion-like view where tab headers are stacked ` +
-                `vertically and only the active tab's content is visible. Each tab header remains visible ` +
-                `and clicking a header opens its content while closing others. When enabled, the ` +
-                `orientation property is ignored.`,
-            defaultValue: TabsNative_1.defaultProps.accordionView,
-            valueType: "boolean",
-        },
-        headerTemplate: Object.assign({}, (0, metadata_helpers_1.dComponent)(`This property declares the template for the clickable tab area.`)),
-    },
-    events: {
-        didChange: (0, metadata_helpers_1.dDidChange)(COMP),
-    },
-    apis: {
-        next: {
-            description: `This method selects the next tab. If the current tab is the last one, it wraps around to the first tab.`,
-            signature: "next(): void",
-        },
-        prev: {
-            description: `This method selects the previous tab. If the current tab is the first one, it wraps around to the last tab.`,
-            signature: "prev(): void",
-        },
-        setActiveTabIndex: {
-            description: `This method sets the active tab by index (0-based).`,
-            signature: "setActiveTabIndex(index: number): void",
-        },
-        setActiveTabById: {
-            description: `This method sets the active tab by its ID.`,
-            signature: "setActiveTabById(id: string): void",
-        },
-    },
-    themeVars: (0, themeVars_1.parseScssVar)(Tabs_module_scss_1.default.themeVars),
-    defaultThemeVars: {
-        // [`backgroundColor-${COMP}`]: "transparent",
-        [`borderStyle-${COMP}`]: "solid",
-        [`borderColor-${COMP}`]: "$borderColor",
-        [`borderColor-active-${COMP}`]: "$color-primary",
-        [`borderWidth-${COMP}`]: "2px",
-        // [`backgroundColor-trigger-${COMP}`]: "transparent",
-        [`backgroundColor-trigger-${COMP}--hover`]: "$color-surface-100",
-        [`padding-trigger-${COMP}`]: "$space-4",
-        // [`backgroundColor-list-${COMP}`]: "$color-primary-50",
-        // [`textColor-trigger-${COMP}`]: "$color-primary-100",
-    },
-});
-exports.tabsComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.TabsMd, ({ extractValue, node, renderChild, className, registerComponentApi, lookupEventHandler }) => {
-    var _a, _b, _c, _d, _e;
-    return ((0, jsx_runtime_1.jsx)(TabsNative_1.Tabs, { id: node === null || node === void 0 ? void 0 : node.uid, className: className, headerRenderer: ((_a = node === null || node === void 0 ? void 0 : node.props) === null || _a === void 0 ? void 0 : _a.headerTemplate)
-            ? (item) => ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.props.headerTemplate, itemKey: "$header", contextVars: {
-                    $header: item,
-                }, renderChild: renderChild }))
-            : undefined, activeTab: extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.activeTab), orientation: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.orientation), tabAlignment: extractValue((_d = node.props) === null || _d === void 0 ? void 0 : _d.tabAlignment), accordionView: extractValue((_e = node.props) === null || _e === void 0 ? void 0 : _e.accordionView), onDidChange: lookupEventHandler("didChange"), registerComponentApi: registerComponentApi, children: renderChild(node.children) }));
-});