xmlui 0.11.3 → 0.11.6

package/dist/scripts/src/components/DatePicker/DatePickerNative.js

@@ -1,326 +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.DatePicker = exports.defaultProps = exports.dateFormats = exports.WeekDays = exports.DatePickerModeValues = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_2 = require("react");
-const react_day_picker_1 = require("react-day-picker");
-const date_fns_1 = require("date-fns");
-const classnames_1 = __importDefault(require("classnames"));
-const DatePicker_module_scss_1 = __importDefault(require("./DatePicker.module.scss"));
-const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
-const constants_1 = require("../../components-core/constants");
-const misc_1 = require("../../components-core/utils/misc");
-const InputAdornment_1 = require("../Input/InputAdornment");
-const react_popover_1 = require("@radix-ui/react-popover");
-const IconNative_1 = __importDefault(require("../Icon/IconNative"));
-const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
-exports.DatePickerModeValues = ["single", "range"];
-var WeekDays;
-(function (WeekDays) {
-    WeekDays[WeekDays["Sunday"] = 0] = "Sunday";
-    WeekDays[WeekDays["Monday"] = 1] = "Monday";
-    WeekDays[WeekDays["Tuesday"] = 2] = "Tuesday";
-    WeekDays[WeekDays["Wednesday"] = 3] = "Wednesday";
-    WeekDays[WeekDays["Thursday"] = 4] = "Thursday";
-    WeekDays[WeekDays["Friday"] = 5] = "Friday";
-    WeekDays[WeekDays["Saturday"] = 6] = "Saturday";
-})(WeekDays || (exports.WeekDays = WeekDays = {}));
-exports.dateFormats = [
-    "MM/dd/yyyy",
-    "MM-dd-yyyy",
-    "yyyy/MM/dd",
-    "yyyy-MM-dd",
-    "dd/MM/yyyy",
-    "dd-MM-yyyy",
-    "yyyyMMdd",
-    "MMddyyyy",
-];
-exports.defaultProps = {
-    mode: "single",
-    validationStatus: "none",
-    enabled: true,
-    inline: false,
-    dateFormat: "MM/dd/yyyy",
-    showWeekNumber: false,
-    weekStartsOn: WeekDays.Sunday,
-    disabledDates: undefined,
-};
-const Chevron = (_a) => {
-    var props = __rest(_a, []);
-    const { orientation = "left" } = props;
-    if (orientation === "up") {
-        return (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevronup", size: "sm" });
-    }
-    else if (orientation === "down") {
-        return (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown", size: "sm" });
-    }
-    else if (orientation === "left") {
-        return (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevronleft", size: "lg" });
-    }
-    else if (orientation === "right") {
-        return (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevronright", size: "lg" });
-    }
-};
-exports.DatePicker = (0, react_2.forwardRef)(function DatePicker(_a, forwardedRef) {
-    var { id, initialValue, value, mode = exports.defaultProps.mode, enabled = exports.defaultProps.enabled, placeholder, updateState = constants_1.noop, validationStatus = exports.defaultProps.validationStatus, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, dateFormat = exports.defaultProps.dateFormat, showWeekNumber = exports.defaultProps.showWeekNumber, weekStartsOn = exports.defaultProps.weekStartsOn, startDate, endDate, disabledDates = exports.defaultProps.disabledDates, style, className, registerComponentApi, inline = exports.defaultProps.inline, startText, startIcon, endText, endIcon, label, labelPosition, labelWidth, labelBreak, readOnly = false, required, autoFocus = false } = _a, rest = __rest(_a, ["id", "initialValue", "value", "mode", "enabled", "placeholder", "updateState", "validationStatus", "onDidChange", "onFocus", "onBlur", "dateFormat", "showWeekNumber", "weekStartsOn", "startDate", "endDate", "disabledDates", "style", "className", "registerComponentApi", "inline", "startText", "startIcon", "endText", "endIcon", "label", "labelPosition", "labelWidth", "labelBreak", "readOnly", "required", "autoFocus"]);
-    const _weekStartsOn = weekStartsOn >= 0 && weekStartsOn <= 6 ? weekStartsOn : WeekDays.Sunday;
-    const [_, setIsMenuFocused] = (0, react_2.useState)(false);
-    const [referenceElement, setReferenceElement] = (0, react_2.useState)(null);
-    const [inlineMonth, setInlineMonth] = (0, react_2.useState)();
-    const inputRef = (0, react_1.useRef)(null);
-    const ref = forwardedRef ? (0, react_compose_refs_1.composeRefs)(forwardedRef, inputRef) : inputRef;
-    const selected = (0, react_2.useMemo)(() => {
-        if (mode === "single" && typeof value === "string") {
-            return parseISODate(value) || parseDate(value);
-        }
-        else if (mode === "range" && typeof value === "object") {
-            return {
-                from: parseISODate(value === null || value === void 0 ? void 0 : value.from) || parseDate(value === null || value === void 0 ? void 0 : value.from),
-                to: parseISODate(value === null || value === void 0 ? void 0 : value.to) || parseDate(value === null || value === void 0 ? void 0 : value.to),
-            };
-        }
-        return undefined;
-    }, [value, mode]);
-    (0, react_2.useEffect)(() => {
-        if (!exports.dateFormats.includes(dateFormat)) {
-            throw new Error(`Invalid dateFormat: ${dateFormat}. Supported formats are: ${exports.dateFormats.join(", ")}`);
-        }
-    }, [dateFormat]);
-    const _startDate = (0, react_2.useMemo)(() => {
-        return startDate ? (0, date_fns_1.parse)(startDate, dateFormat, new Date()) : undefined;
-    }, [startDate, dateFormat]);
-    const _endDate = (0, react_2.useMemo)(() => {
-        return endDate ? (0, date_fns_1.parse)(endDate, dateFormat, new Date()) : undefined;
-    }, [endDate, dateFormat]);
-    const defaultMonth = (0, react_2.useMemo)(() => {
-        if (mode === "single" && selected) {
-            return selected;
-        }
-        else if (mode === "range" && selected && typeof selected === "object" && selected.from) {
-            return selected.from;
-        }
-        return undefined;
-    }, [selected, mode]);
-    const disabled = (0, react_2.useMemo)(() => {
-        if (!disabledDates) {
-            return undefined;
-        }
-        const convertStringToDate = (dateValue) => {
-            if (dateValue instanceof Date) {
-                return dateValue;
-            }
-            if (typeof dateValue === "string") {
-                // Try to parse as ISO date first
-                const isoDate = parseISODate(dateValue);
-                if (isoDate) {
-                    return isoDate;
-                }
-                // Parse using the specified dateFormat
-                const parsedDate = (0, date_fns_1.parse)(dateValue, dateFormat, new Date());
-                if ((0, date_fns_1.isValid)(parsedDate)) {
-                    return parsedDate;
-                }
-            }
-            return undefined;
-        };
-        const convertMatcher = (matcher) => {
-            // Handle boolean - disable all dates
-            if (typeof matcher === "boolean") {
-                return matcher;
-            }
-            // Handle function matcher - pass through as is
-            if (typeof matcher === "function") {
-                return matcher;
-            }
-            // Handle single Date or string
-            if (matcher instanceof Date || typeof matcher === "string") {
-                const convertedDate = convertStringToDate(matcher);
-                return convertedDate || undefined;
-            }
-            // Handle array of mixed matchers (combines multiple disable patterns)
-            if (Array.isArray(matcher)) {
-                const convertedMatchers = [];
-                for (const item of matcher) {
-                    if (typeof item === "object" &&
-                        item !== null &&
-                        !Array.isArray(item) &&
-                        !(item instanceof Date)) {
-                        // Handle nested matcher objects in array (e.g., {dayOfWeek: [0,6]}, {from: date, to: date})
-                        const nestedResult = convertMatcher(item);
-                        if (nestedResult) {
-                            convertedMatchers.push(nestedResult);
-                        }
-                    }
-                    else if (item instanceof Date || typeof item === "string") {
-                        // Handle individual dates in the array
-                        const convertedDate = convertStringToDate(item);
-                        if (convertedDate) {
-                            convertedMatchers.push(convertedDate);
-                        }
-                    }
-                }
-                // Return array of all matchers to combine their effects
-                return convertedMatchers.length > 0 ? convertedMatchers : undefined;
-            }
-            // Handle object matchers (DateRange, DateBefore, DateAfter, DateInterval, DayOfWeek)
-            if (typeof matcher === "object" && matcher !== null) {
-                // Handle DateRange: { from: Date, to?: Date }
-                if ("from" in matcher) {
-                    const fromDate = convertStringToDate(matcher.from);
-                    const toDate = matcher.to ? convertStringToDate(matcher.to) : undefined;
-                    if (fromDate) {
-                        return { from: fromDate, to: toDate };
-                    }
-                }
-                // Handle DateBefore: { before: Date }
-                if ("before" in matcher && !("after" in matcher)) {
-                    const beforeDate = convertStringToDate(matcher.before);
-                    if (beforeDate) {
-                        return { before: beforeDate };
-                    }
-                }
-                // Handle DateAfter: { after: Date }
-                if ("after" in matcher && !("before" in matcher)) {
-                    const afterDate = convertStringToDate(matcher.after);
-                    if (afterDate) {
-                        return { after: afterDate };
-                    }
-                }
-                // Handle DateInterval: { before: Date, after: Date }
-                if ("before" in matcher && "after" in matcher) {
-                    const beforeDate = convertStringToDate(matcher.before);
-                    const afterDate = convertStringToDate(matcher.after);
-                    if (beforeDate && afterDate) {
-                        return { before: beforeDate, after: afterDate };
-                    }
-                }
-                // Handle DayOfWeek: { dayOfWeek: number | number[] }
-                if ("dayOfWeek" in matcher) {
-                    return { dayOfWeek: matcher.dayOfWeek };
-                }
-            }
-            return undefined;
-        };
-        return convertMatcher(disabledDates);
-    }, [disabledDates, dateFormat]);
-    const [open, setOpen] = (0, react_2.useState)(false);
-    const { root } = (0, ThemeContext_1.useTheme)();
-    const handleOnMenuFocus = () => {
-        setIsMenuFocused(true);
-    };
-    const handleOnMenuBlur = () => {
-        setIsMenuFocused(false);
-    };
-    // Register component API for external interactions
-    const focus = (0, react_2.useCallback)(() => {
-        referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.focus();
-    }, [referenceElement]);
-    const setValue = (0, misc_1.useEvent)((newValue) => {
-        updateState({ value: newValue });
-    });
-    (0, react_2.useEffect)(() => {
-        registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
-            focus,
-            setValue,
-        });
-    }, [focus, registerComponentApi, setValue]);
-    // useEffect(() => {
-    //   if (!isButtonFocused && !isMenuFocused) {
-    //     onBlur?.();
-    //   }
-    //   if (isButtonFocused || isMenuFocused) {
-    //     onFocus?.();
-    //   }
-    // }, [isButtonFocused, isMenuFocused, onFocus, onBlur]);
-    (0, react_2.useEffect)(() => {
-        updateState({ value: initialValue }, { initial: true });
-    }, [initialValue, updateState]);
-    // Update inline month when selected value changes
-    (0, react_2.useEffect)(() => {
-        if (inline) {
-            if (mode === "single" && selected) {
-                setInlineMonth(selected);
-            }
-            else if (mode === "range" && selected && typeof selected === "object" && selected.from) {
-                setInlineMonth(selected.from);
-            }
-            else if (!selected) {
-                // Reset to defaultMonth logic when no selection
-                setInlineMonth(defaultMonth);
-            }
-        }
-    }, [selected, mode, inline, defaultMonth]);
-    const handleSelect = (0, react_2.useCallback)((dateOrRange) => {
-        if (readOnly) {
-            return;
-        }
-        if (!dateOrRange) {
-            updateState({ value: undefined });
-            onDidChange("");
-        }
-        else if (mode === "single") {
-            const date = dateOrRange;
-            const formattedDate = (0, date_fns_1.format)(date, dateFormat);
-            updateState({ value: formattedDate });
-            onDidChange(formattedDate);
-        }
-        else {
-            const range = dateOrRange;
-            const formattedRange = {
-                from: range.from ? (0, date_fns_1.format)(range.from, dateFormat) : "",
-                to: range.to ? (0, date_fns_1.format)(range.to, dateFormat) : "",
-            };
-            updateState({ value: formattedRange });
-            onDidChange(formattedRange);
-        }
-        if (mode === "single") {
-            setOpen(false);
-        }
-    }, [onDidChange, updateState, mode, dateFormat, readOnly]);
-    return inline ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref }, rest, { style: style, className: (0, classnames_1.default)(DatePicker_module_scss_1.default.inlinePickerMenu, className), tabIndex: 0, children: (0, jsx_runtime_1.jsx)(react_day_picker_1.DayPicker, { id: id, required: undefined, captionLayout: "dropdown", fixedWeeks: true, startMonth: _startDate, endMonth: _endDate, month: inlineMonth, onMonthChange: setInlineMonth, disabled: disabled, weekStartsOn: _weekStartsOn, showWeekNumber: showWeekNumber, showOutsideDays: true, classNames: DatePicker_module_scss_1.default, mode: mode === "single" ? "single" : "range", selected: selected, onSelect: handleSelect, autoFocus: autoFocus, numberOfMonths: mode === "range" ? 2 : 1, components: {
-                Chevron,
-            } }) }))) : ((0, jsx_runtime_1.jsxs)(react_popover_1.Popover, { open: open, onOpenChange: setOpen, modal: false, children: [(0, jsx_runtime_1.jsxs)(react_popover_1.PopoverTrigger, { id: id, ref: (0, react_compose_refs_1.composeRefs)(setReferenceElement, ref), "aria-haspopup": true, disabled: !enabled, style: style, "aria-expanded": open, className: (0, classnames_1.default)(className, DatePicker_module_scss_1.default.datePicker, {
-                    [DatePicker_module_scss_1.default.disabled]: !enabled,
-                    [DatePicker_module_scss_1.default.error]: validationStatus === "error",
-                    [DatePicker_module_scss_1.default.warning]: validationStatus === "warning",
-                    [DatePicker_module_scss_1.default.valid]: validationStatus === "valid",
-                }, className), autoFocus: autoFocus, onFocus: onFocus, onBlur: onBlur, children: [(0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: startText, iconName: startIcon, className: DatePicker_module_scss_1.default.adornment }), (0, jsx_runtime_1.jsx)("div", { className: DatePicker_module_scss_1.default.datePickerValue, children: mode === "single" && selected ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, date_fns_1.format)(selected, dateFormat) })) : mode === "range" && typeof selected === "object" && selected.from ? (selected.to ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, date_fns_1.format)(selected.from, dateFormat), " - ", (0, date_fns_1.format)(selected.to, dateFormat)] })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, date_fns_1.format)(selected.from, dateFormat) }))) : placeholder ? ((0, jsx_runtime_1.jsx)("span", { className: DatePicker_module_scss_1.default.placeholder, placeholder: placeholder, children: placeholder })) : ((0, jsx_runtime_1.jsx)("span", { children: "\u00A0" })) }), (0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: endText, iconName: endIcon, className: DatePicker_module_scss_1.default.adornment })] }), (0, jsx_runtime_1.jsx)(react_popover_1.PopoverPortal, { container: root, children: (0, jsx_runtime_1.jsx)(react_popover_1.PopoverContent, { role: "menu", align: "start", sideOffset: 5, className: DatePicker_module_scss_1.default.datePickerMenu, onFocus: handleOnMenuFocus, onBlur: handleOnMenuBlur, onInteractOutside: handleOnMenuBlur, children: (0, jsx_runtime_1.jsx)(react_day_picker_1.DayPicker, { required: undefined, animate: true, fixedWeeks: true, autoFocus: autoFocus, classNames: DatePicker_module_scss_1.default, captionLayout: "dropdown", startMonth: _startDate, endMonth: _endDate, defaultMonth: defaultMonth, disabled: disabled, weekStartsOn: _weekStartsOn, showWeekNumber: showWeekNumber, showOutsideDays: true, mode: mode === "single" ? "single" : "range", selected: selected, onSelect: handleSelect, numberOfMonths: mode === "range" ? 2 : 1, components: {
-                            Chevron,
-                        } }) }) })] }));
-});
-const isoRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z$/;
-const parseISODate = (dateString) => {
-    if (dateString && isoRegex.test(dateString)) {
-        const parsedDate = (0, date_fns_1.parseISO)(dateString);
-        if ((0, date_fns_1.isValid)(parsedDate)) {
-            return parsedDate;
-        }
-    }
-    return undefined;
-};
-const parseDate = (dateString) => {
-    if (dateString) {
-        for (const format of exports.dateFormats) {
-            const parsedDate = (0, date_fns_1.parse)(dateString, format, new Date());
-            if ((0, date_fns_1.isValid)(parsedDate)) {
-                return parsedDate;
-            }
-        }
-    }
-    return undefined;
-};

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

@@ -1,196 +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.menuSeparatorRenderer = exports.MenuSeparatorMd = exports.subMenuItemRenderer = exports.SubMenuItemMd = exports.menuItemRenderer = exports.MenuItemMd = exports.dropdownMenuComponentRenderer = exports.DropdownMenuMd = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const DropdownMenu_module_scss_1 = __importDefault(require("./DropdownMenu.module.scss"));
-const renderers_1 = require("../../components-core/renderers");
-const themeVars_1 = require("../../components-core/theming/themeVars");
-const abstractions_1 = require("../abstractions");
-const metadata_helpers_1 = require("../metadata-helpers");
-const IconNative_1 = require("../Icon/IconNative");
-const DropdownMenuNative_1 = require("./DropdownMenuNative");
-const DDMCOMP = "DropdownMenu";
-exports.DropdownMenuMd = (0, metadata_helpers_1.createMetadata)({
-    status: "stable",
-    description: "`DropdownMenu` provides a space-efficient way to present multiple options or " +
-        "actions through a collapsible interface. When clicked, the trigger button reveals " +
-        "a menu that can include items, separators, and nested submenus, making it ideal " +
-        "for navigation, action lists, or any situation requiring many options without " +
-        "permanent screen space.",
-    props: {
-        label: (0, metadata_helpers_1.dLabel)(),
-        triggerTemplate: (0, metadata_helpers_1.dTriggerTemplate)(DDMCOMP),
-        alignment: {
-            description: "This property allows you to determine the alignment of the dropdown panel with " +
-                "the displayed menu items.",
-            valueType: "string",
-            availableValues: abstractions_1.alignmentOptionMd,
-            defaultValue: DropdownMenuNative_1.defaultDropdownMenuProps.alignment,
-        },
-        enabled: (0, metadata_helpers_1.dEnabled)(),
-        triggerButtonVariant: {
-            description: `This property defines the theme variant of the \`Button\` as the dropdown menu's trigger. ` +
-                `It has no effect when a custom trigger is defined with \`triggerTemplate\`.`,
-            valueType: "string",
-            availableValues: abstractions_1.buttonVariantMd,
-            defaultValue: DropdownMenuNative_1.defaultDropdownMenuProps.triggerButtonVariant,
-        },
-        triggerButtonThemeColor: {
-            description: `This property defines the theme color of the \`Button\` as the dropdown menu's trigger. ` +
-                `It has no effect when a custom trigger is defined with \`triggerTemplate\`.`,
-            valueType: "string",
-            availableValues: abstractions_1.buttonThemeMd,
-            defaultValue: DropdownMenuNative_1.defaultDropdownMenuProps.triggerButtonThemeColor,
-        },
-        triggerButtonIcon: {
-            description: `This property defines the icon to display on the trigger button. You can change the default icon ` +
-                `for all ${DDMCOMP} instances with the "icon.triggerButton:DropdownMenu" declaration in the app ` +
-                `configuration file.`,
-            defaultValue: DropdownMenuNative_1.defaultDropdownMenuProps.triggerButtonIcon,
-            valueType: "string",
-        },
-        triggerButtonIconPosition: {
-            description: `This property defines the position of the icon on the trigger button.`,
-            defaultValue: DropdownMenuNative_1.defaultDropdownMenuProps.triggerButtonIconPosition,
-            valueType: "string",
-            availableValues: abstractions_1.iconPositionMd,
-        },
-    },
-    events: {
-        willOpen: (0, metadata_helpers_1.d)(`This event fires when the \`${DDMCOMP}\` component is about to be opened. ` +
-            `You can prevent opening the menu by returning \`false\` from the event handler. ` +
-            `Otherwise, the menu will open at the end of the event handler like normal.`),
-    },
-    apis: {
-        close: {
-            description: `This method command closes the dropdown.`,
-            signature: "close(): void",
-        },
-        open: {
-            description: `This method command opens the dropdown.`,
-            signature: "open(): void",
-        },
-    },
-    themeVars: (0, themeVars_1.parseScssVar)(DropdownMenu_module_scss_1.default.themeVars),
-    limitThemeVarsToComponent: true,
-    defaultThemeVars: {
-        [`backgroundColor-${DDMCOMP}`]: "$color-surface-raised",
-        [`minWidth-${DDMCOMP}`]: "160px",
-        [`boxShadow-${DDMCOMP}`]: "$boxShadow-xl",
-        [`borderStyle-${DDMCOMP}-content`]: "solid",
-        [`borderRadius-${DDMCOMP}`]: "$borderRadius",
-    },
-});
-exports.dropdownMenuComponentRenderer = (0, renderers_1.createComponentRenderer)(DDMCOMP, exports.DropdownMenuMd, ({ node, extractValue, renderChild, registerComponentApi, className, lookupEventHandler }) => {
-    var _a, _b, _c;
-    return ((0, jsx_runtime_1.jsx)(DropdownMenuNative_1.DropdownMenu, { triggerTemplate: renderChild((_a = node.props) === null || _a === void 0 ? void 0 : _a.triggerTemplate), label: extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.label), registerComponentApi: registerComponentApi, onWillOpen: lookupEventHandler("willOpen"), className: className, alignment: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.alignment), disabled: !extractValue.asOptionalBoolean(node.props.enabled, true), triggerButtonThemeColor: extractValue(node.props.triggerButtonThemeColor), triggerButtonVariant: extractValue(node.props.triggerButtonVariant), triggerButtonIcon: extractValue(node.props.triggerButtonIcon), triggerButtonIconPosition: extractValue(node.props.triggerButtonIconPosition), children: renderChild(node.children) }));
-});
-const MICOMP = "MenuItem";
-exports.MenuItemMd = (0, metadata_helpers_1.createMetadata)({
-    status: "stable",
-    description: "`MenuItem` represents individual clickable items within dropdown menus and other " +
-        "menu components. Each menu item can display text, icons, and respond to clicks " +
-        "with either navigation or custom actions, making it the building block for " +
-        "interactive menu systems.",
-    docFolder: DDMCOMP,
-    props: {
-        iconPosition: {
-            description: `This property allows you to determine the position of the icon displayed in the menu item.`,
-            valueType: "string",
-            availableValues: abstractions_1.iconPositionMd,
-            defaultValue: DropdownMenuNative_1.defaultMenuItemProps.iconPosition,
-        },
-        icon: {
-            description: `This property names an optional icon to display with the menu item. You can use component-specific icons in the format "iconName:MenuItem".`,
-            valueType: "string",
-        },
-        label: (0, metadata_helpers_1.dLabel)(),
-        to: {
-            description: `This property defines the URL of the menu item. If this property is defined (and the \`click\` ` +
-                `event does not have an event handler), clicking the menu item navigates to this link.`,
-            valueType: "string",
-        },
-        active: {
-            description: `This property indicates if the specified menu item is active.`,
-            valueType: "boolean",
-            defaultValue: DropdownMenuNative_1.defaultMenuItemProps.active,
-        },
-        enabled: (0, metadata_helpers_1.dEnabled)(),
-    },
-    events: {
-        click: (0, metadata_helpers_1.dClick)(MICOMP),
-    },
-    themeVars: (0, themeVars_1.parseScssVar)(DropdownMenu_module_scss_1.default.themeVars),
-    limitThemeVarsToComponent: true,
-    defaultThemeVars: {
-        [`backgroundColor-${MICOMP}`]: "$backgroundColor-dropdown-item",
-        [`color-${MICOMP}`]: "$textColor-primary",
-        [`color-${MICOMP}--disabled`]: "$textColor--disabled",
-        [`fontFamily-${MICOMP}`]: "$fontFamily",
-        [`fontSize-${MICOMP}`]: "$fontSize-sm",
-        [`paddingVertical-${MICOMP}`]: "$space-2",
-        [`paddingHorizontal-${MICOMP}`]: "$space-3",
-        [`backgroundColor-${MICOMP}--hover`]: "$backgroundColor-dropdown-item--hover",
-        [`color-${MICOMP}--hover`]: "inherit",
-        [`gap-${MICOMP}`]: "$space-2",
-        [`color-${MICOMP}--active`]: "$color-primary",
-        [`backgroundColor-${MICOMP}--active`]: "$backgroundColor-dropdown-item--active",
-        light: {},
-        dark: {},
-    },
-});
-exports.menuItemRenderer = (0, renderers_1.createComponentRenderer)(MICOMP, exports.MenuItemMd, ({ node, renderChild, lookupEventHandler, lookupAction, extractValue, className }) => {
-    var _a, _b;
-    const clickEventHandler = lookupEventHandler("click");
-    let clickHandler;
-    const to = extractValue(node.props.to);
-    if (!clickEventHandler && (to === null || to === void 0 ? void 0 : to.trim())) {
-        const navigateAction = lookupAction("navigate", { signError: false });
-        clickHandler = () => {
-            navigateAction === null || navigateAction === void 0 ? void 0 : navigateAction({ pathname: to });
-        };
-    }
-    return ((0, jsx_runtime_1.jsx)(DropdownMenuNative_1.MenuItem, { onClick: clickHandler, label: extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.label), className: className, iconPosition: extractValue(node.props.iconPosition), icon: ((_b = node.props) === null || _b === void 0 ? void 0 : _b.icon) && ((0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: extractValue(node.props.icon), fallback: extractValue(node.props.icon) })), active: extractValue.asOptionalBoolean(node.props.active, false), enabled: extractValue.asOptionalBoolean(node.props.enabled, true), children: renderChild(node.children) }));
-});
-const SMCOMP = "SubMenuItem";
-exports.SubMenuItemMd = (0, metadata_helpers_1.createMetadata)({
-    status: "stable",
-    description: "`SubMenuItem` creates hierarchical menu structures by acting as both a menu " +
-        "item and a container for nested menu items. When clicked or hovered, it reveals " +
-        "a submenu containing additional [MenuItem](/components/MenuItem), " +
-        "[MenuSeparator](/components/MenuSeparator), or other " +
-        "[SubMenuItem](/components/SubMenuItems) components, enabling complex multi-level " +
-        "navigation and action organization.",
-    docFolder: DDMCOMP,
-    props: {
-        label: (0, metadata_helpers_1.dLabel)(),
-        triggerTemplate: (0, metadata_helpers_1.dTriggerTemplate)(SMCOMP),
-    },
-});
-exports.subMenuItemRenderer = (0, renderers_1.createComponentRenderer)(SMCOMP, exports.SubMenuItemMd, ({ node, renderChild, extractValue }) => {
-    var _a, _b;
-    return ((0, jsx_runtime_1.jsx)(DropdownMenuNative_1.SubMenuItem, { label: extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.label), triggerTemplate: renderChild((_b = node.props) === null || _b === void 0 ? void 0 : _b.triggerTemplate), children: renderChild(node.children) }));
-});
-const MSEP = "MenuSeparator";
-exports.MenuSeparatorMd = (0, metadata_helpers_1.createMetadata)({
-    status: "stable",
-    description: "`MenuSeparator` displays a separator line between menu items to group related " +
-        "menu options within `DropdownMenu`.",
-    docFolder: DDMCOMP,
-    themeVars: (0, themeVars_1.parseScssVar)(DropdownMenu_module_scss_1.default.themeVars),
-    limitThemeVarsToComponent: true,
-    defaultThemeVars: {
-        [`marginTop-${MSEP}`]: "$space-1",
-        [`marginBottom-${MSEP}`]: "$space-1",
-        [`width-${MSEP}`]: "100%",
-        [`height-${MSEP}`]: "1px",
-        [`color-${MSEP}`]: "$borderColor-dropdown-item",
-        [`marginHorizontal-${MSEP}`]: "12px",
-    },
-});
-exports.menuSeparatorRenderer = (0, renderers_1.createComponentRenderer)(MSEP, exports.MenuSeparatorMd, () => {
-    return (0, jsx_runtime_1.jsx)(DropdownMenuNative_1.MenuSeparator, {});
-});