xmlui 0.7.13 → 0.7.15

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

@@ -0,0 +1,62 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.datePickerComponentRenderer = exports.DatePickerMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const renderers_1 = require("@components-core/renderers");
+const DatePicker_module_scss_1 = __importDefault(require("./DatePicker.module.scss"));
+const themeVars_1 = require("@components-core/theming/themeVars");
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const DatePickerNative_1 = require("./DatePickerNative");
+const metadata_helpers_1 = require("@components/metadata-helpers");
+const COMP = "DatePicker";
+exports.DatePickerMd = (0, ComponentDefs_1.createMetadata)({
+    status: "experimental",
+    description: "A datepicker component enables the selection of a date or a range of dates in a specified format from an interactive display.",
+    props: {
+        placeholder: (0, metadata_helpers_1.dPlaceholder)(),
+        initialValue: (0, metadata_helpers_1.dInitialValue)(),
+        autoFocus: (0, metadata_helpers_1.dAutoFocus)(),
+        readOnly: (0, metadata_helpers_1.dReadonly)(),
+        enabled: (0, metadata_helpers_1.dEnabled)(),
+        validationStatus: (0, metadata_helpers_1.dValidationStatus)(),
+        mode: (0, ComponentDefs_1.d)("The mode of the datepicker (single or range)"),
+        dateFormat: (0, ComponentDefs_1.d)("The format of the date displayed in the input field"),
+        showWeekNumber: (0, ComponentDefs_1.d)("Whether to show the week number in the calendar"),
+        weekStartsOn: (0, ComponentDefs_1.d)("The first day of the week. 0 is Sunday, 1 is Monday, etc."),
+        fromDate: (0, ComponentDefs_1.d)("The start date of the range of selectable dates"),
+        toDate: (0, ComponentDefs_1.d)("The end date of the range of selectable dates"),
+        disabledDates: (0, ComponentDefs_1.d)("An array of dates that are disabled"),
+    },
+    events: {
+        didChange: (0, metadata_helpers_1.dDidChange)(COMP),
+        gotFocus: (0, metadata_helpers_1.dGotFocus)(COMP),
+        lostFocus: (0, metadata_helpers_1.dLostFocus)(COMP),
+    },
+    apis: {
+        focus: (0, metadata_helpers_1.dFocus)(COMP),
+        value: (0, ComponentDefs_1.d)(`You can query the component's value. If no value is set, it will retrieve \`undefined\`.`),
+        setValue: (0, metadata_helpers_1.dSetValueApi)(),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(DatePicker_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        [`shadow-menu-${COMP}`]: "$shadow-md",
+        [`radius-menu-${COMP}`]: "$radius",
+        [`color-text-value-${COMP}`]: "$color-text-primary",
+        [`color-bg-menu-${COMP}`]: "$color-bg-primary",
+        [`color-bg-item-${COMP}--hover`]: "$color-bg-dropdown-item--active",
+        [`color-bg-item-${COMP}--active`]: "$color-bg-dropdown-item--active",
+        light: {
+            [`color-bg-menu-${COMP}`]: "$color-bg-primary",
+        },
+        dark: {
+            [`color-bg-menu-${COMP}`]: "$color-bg-primary",
+        },
+    },
+});
+exports.datePickerComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.DatePickerMd, ({ node, state, updateState, extractValue, layoutCss, lookupEventHandler, registerComponentApi, }) => {
+    var _a;
+    return ((0, jsx_runtime_1.jsx)(DatePickerNative_1.DatePicker, { style: layoutCss, mode: extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.mode), value: state === null || state === void 0 ? void 0 : state.value, initialValue: extractValue(node.props.initialValue), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue.asOptionalString(node.props.placeholder), validationStatus: extractValue(node.props.validationStatus), updateState: updateState, onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, dateFormat: extractValue(node.props.dateFormat), showWeekNumber: extractValue.asOptionalBoolean(node.props.showWeekNumber), weekStartsOn: extractValue(node.props.weekStartsOn), fromDate: extractValue(node.props.fromDate), toDate: extractValue(node.props.toDate), disabledDates: extractValue(node.props.disabledDates) }));
+});

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

@@ -0,0 +1,196 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatePicker = 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 ReactDropdownMenu = __importStar(require("@radix-ui/react-dropdown-menu"));
+const ThemeContext_1 = require("@components-core/theming/ThemeContext");
+const constants_1 = require("@components-core/constants");
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const DatePicker_module_scss_1 = __importDefault(require("./DatePicker.module.scss"));
+const misc_1 = require("@components-core/utils/misc");
+const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
+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 || (WeekDays = {}));
+const dateFormats = [
+    "MM/dd/yyyy",
+    "MM-dd-yyyy",
+    "yyyy/MM/dd",
+    "yyyy-MM-dd",
+    "dd/MM/yyyy",
+    "dd-MM-yyyy",
+    "yyyyMMdd",
+    "MMddyyyy",
+];
+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 dateFormats) {
+            const parsedDate = (0, date_fns_1.parse)(dateString, format, new Date());
+            if ((0, date_fns_1.isValid)(parsedDate)) {
+                return parsedDate;
+            }
+        }
+    }
+    return undefined;
+};
+exports.DatePicker = (0, react_1.forwardRef)(function DatePicker({ id, initialValue, value, mode = "single", enabled = true, placeholder, updateState = constants_1.noop, validationStatus = "none", onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, dateFormat = "MM/dd/yyyy", // Default dateFormat
+showWeekNumber = false, weekStartsOn = WeekDays.Sunday, fromDate, toDate, disabledDates = [], style, registerComponentApi, }, forwardedRef) {
+    const _weekStartsOn = weekStartsOn >= 0 && weekStartsOn <= 6 ? weekStartsOn : WeekDays.Sunday;
+    const [isButtonFocused, setIsButtonFocused] = (0, react_2.useState)(false);
+    const [isMenuFocused, setIsMenuFocused] = (0, react_2.useState)(false);
+    const referenceElement = (0, react_1.useRef)(null);
+    const ref = forwardedRef ? (0, react_compose_refs_1.composeRefs)(referenceElement, forwardedRef) : referenceElement;
+    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 (!dateFormats.includes(dateFormat)) {
+            throw new Error(`Invalid dateFormat: ${dateFormat}. Supported formats are: ${dateFormats.join(", ")}`);
+        }
+    }, [dateFormat]);
+    const startDate = (0, react_2.useMemo)(() => {
+        return fromDate ? (0, date_fns_1.parse)(fromDate, dateFormat, new Date()) : undefined;
+    }, [fromDate, dateFormat]);
+    const endDate = (0, react_2.useMemo)(() => {
+        return toDate ? (0, date_fns_1.parse)(toDate, dateFormat, new Date()) : undefined;
+    }, [toDate, dateFormat]);
+    const disabled = (0, react_2.useMemo)(() => {
+        return disabledDates === null || disabledDates === void 0 ? void 0 : disabledDates.map((date) => (0, date_fns_1.parse)(date, dateFormat, new Date()));
+    }, [disabledDates, dateFormat]);
+    const [open, setOpen] = (0, react_2.useState)(false);
+    const { root } = (0, ThemeContext_1.useTheme)();
+    const handleOnButtonFocus = () => {
+        setIsButtonFocused(true);
+    };
+    const handleOnButtonBlur = () => {
+        setIsButtonFocused(false);
+    };
+    const handleOnMenuFocus = () => {
+        setIsMenuFocused(true);
+    };
+    const handleOnMenuBlur = () => {
+        setIsMenuFocused(false);
+    };
+    // Register component API for external interactions
+    const focus = (0, react_2.useCallback)(() => {
+        var _a;
+        (_a = referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.current]);
+    const setValue = (0, misc_1.useEvent)((newValue) => {
+        const parsedDate = parseDate(newValue);
+        handleSelect(parsedDate);
+    });
+    (0, react_2.useEffect)(() => {
+        registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
+            focus,
+            setValue,
+        });
+    }, [focus, registerComponentApi, setValue]);
+    (0, react_2.useEffect)(() => {
+        if (!isButtonFocused && !isMenuFocused) {
+            onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+        }
+        if (isButtonFocused || isMenuFocused) {
+            onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+        }
+    }, [isButtonFocused, isMenuFocused, onFocus, onBlur]);
+    (0, react_2.useEffect)(() => {
+        updateState({ value: initialValue }, { initial: true });
+    }, [initialValue, updateState]);
+    const handleSelect = (0, react_2.useCallback)((dateOrRange) => {
+        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]);
+    return ((0, jsx_runtime_1.jsxs)(ReactDropdownMenu.Root, { open: open, onOpenChange: setOpen, modal: false, children: [(0, jsx_runtime_1.jsx)(ReactDropdownMenu.Trigger, { asChild: true, children: (0, jsx_runtime_1.jsx)("button", { disabled: !enabled, id: id, ref: ref, style: style, className: (0, classnames_1.default)(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",
+                    }), onFocus: handleOnButtonFocus, onBlur: handleOnButtonBlur, 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, children: placeholder })) : ((0, jsx_runtime_1.jsx)("span", { children: "\u00A0" })) }) }), (0, jsx_runtime_1.jsx)(ReactDropdownMenu.Portal, { container: root, children: (0, jsx_runtime_1.jsx)(ReactDropdownMenu.Content, { align: "start", className: DatePicker_module_scss_1.default.datePickerMenu, onFocus: handleOnMenuFocus, onBlur: handleOnMenuBlur, onInteractOutside: handleOnMenuBlur, children: (0, jsx_runtime_1.jsx)(react_day_picker_1.DayPicker, { fixedWeeks: true, fromDate: startDate, toDate: endDate, disabled: disabled, weekStartsOn: _weekStartsOn, showWeekNumber: showWeekNumber, showOutsideDays: true, classNames: DatePicker_module_scss_1.default, mode: mode === "single" ? "single" : "range", selected: selected, onSelect: handleSelect, initialFocus: true, numberOfMonths: mode === "range" ? 2 : 1 }) }) })] }));
+});

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

@@ -0,0 +1,125 @@
+"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 ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const abstractions_1 = require("@components/abstractions");
+const renderers_1 = require("@components-core/renderers");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const IconNative_1 = require("@components/Icon/IconNative");
+const DropdownMenuNative_1 = require("./DropdownMenuNative");
+const metadata_helpers_1 = require("@components/metadata-helpers");
+const DDMCOMP = "DropdownMenu";
+exports.DropdownMenuMd = (0, ComponentDefs_1.createMetadata)({
+    description: `This component represents a dropdown menu with a trigger. When the user clicks the trigger, ` +
+        `the dropdown menu displays its items.`,
+    props: {
+        label: (0, metadata_helpers_1.dLabel)(),
+        triggerTemplate: (0, metadata_helpers_1.dTriggerTemplate)(DDMCOMP),
+        alignment: (0, ComponentDefs_1.d)(`This property allows you to determine the alignment of the displayed menu items.`),
+        enabled: (0, metadata_helpers_1.dEnabled)(),
+        triggerButtonVariant: (0, ComponentDefs_1.d)(`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\`.`),
+        triggerButtonThemeColor: (0, ComponentDefs_1.d)(`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\`.`),
+        triggerButtonIcon: (0, ComponentDefs_1.d)(`This property defines the icon to display on the trigger button.`),
+        triggerButtonIconPosition: (0, ComponentDefs_1.d)(`This property defines the position of the icon on the trigger button.`, abstractions_1.iconPositionNames),
+    },
+    events: {
+        willOpen: (0, ComponentDefs_1.d)(`This event fires when the \`${DDMCOMP}\` component is opened.`),
+    },
+    apis: {
+        close: (0, ComponentDefs_1.d)(`This method command closes the dropdown.`),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(DropdownMenu_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        [`color-bg-${DDMCOMP}`]: "$color-bg-primary",
+        [`min-width-${DDMCOMP}`]: "160px",
+        [`shadow-${DDMCOMP}`]: "$shadow-xl",
+        [`style-border-${DDMCOMP}-content`]: "solid",
+        [`radius-${DDMCOMP}`]: "$radius",
+    },
+});
+exports.dropdownMenuComponentRenderer = (0, renderers_1.createComponentRenderer)(DDMCOMP, exports.DropdownMenuMd, ({ node, extractValue, renderChild, registerComponentApi, layoutCss, 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"), style: layoutCss, 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, ComponentDefs_1.createMetadata)({
+    description: `This property represents a leaf item in a menu hierarchy. Clicking the item triggers an action.`,
+    docFolder: DDMCOMP,
+    props: {
+        iconPosition: (0, ComponentDefs_1.d)(`This property allows you to determine the position of the icon displayed in the menu item.`, abstractions_1.iconPositionMd.filter(p => p.value === "start" || p.value === "end")),
+        icon: (0, ComponentDefs_1.d)(`This property names an optional icon to display with the menu item.`),
+        label: (0, metadata_helpers_1.dLabel)(),
+        to: (0, ComponentDefs_1.d)(`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.`),
+        active: (0, ComponentDefs_1.d)(`This property indicates if the specified menu item is active.`),
+    },
+    events: {
+        click: (0, metadata_helpers_1.dClick)(MICOMP),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(DropdownMenu_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        [`color-bg-${MICOMP}`]: "$color-bg-dropdown-item",
+        [`color-${MICOMP}`]: "$color-text-primary",
+        [`font-family-${MICOMP}`]: "$font-family",
+        [`font-size-${MICOMP}`]: "$font-size-small",
+        [`padding-vertical-${MICOMP}`]: "$space-2",
+        [`padding-horizontal-${MICOMP}`]: "$space-3",
+        [`color-bg-${MICOMP}--hover`]: "$color-bg-dropdown-item--hover",
+        [`color-${MICOMP}--hover`]: "inherit",
+        [`gap-${MICOMP}`]: "$space-2",
+        [`color-${MICOMP}--active`]: "$color-primary",
+        [`color-bg-${MICOMP}--active`]: "$color-bg-dropdown-item--active",
+        light: {},
+        dark: {},
+    },
+});
+exports.menuItemRenderer = (0, renderers_1.createComponentRenderer)(MICOMP, exports.MenuItemMd, ({ node, renderChild, lookupEventHandler, lookupAction, extractValue, layoutCss }) => {
+    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), style: layoutCss, 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) }), active: extractValue.asOptionalBoolean(node.props.active, false), children: renderChild(node.children) }));
+});
+const SMCOMP = "SubMenuItem";
+exports.SubMenuItemMd = (0, ComponentDefs_1.createMetadata)({
+    description: "This component represents a nested menu item within another menu or menu item.",
+    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, ComponentDefs_1.createMetadata)({
+    description: "This component displays a separator line between menu items.",
+    docFolder: DDMCOMP,
+    themeVars: (0, themeVars_1.parseScssVar)(DropdownMenu_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        [`margin-top-${MSEP}`]: "$space-1",
+        [`margin-bottom-${MSEP}`]: "$space-1",
+        [`width-${MSEP}`]: "100%",
+        [`height-${MSEP}`]: "1px",
+        [`color-${MSEP}`]: "$color-border-dropdown-item",
+        [`margin-horizontal-${MSEP}`]: "12px",
+    },
+});
+exports.menuSeparatorRenderer = (0, renderers_1.createComponentRenderer)(MSEP, exports.MenuSeparatorMd, () => {
+    return (0, jsx_runtime_1.jsx)(DropdownMenuNative_1.MenuSeparator, {});
+});

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

@@ -0,0 +1,95 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropdownMenu = void 0;
+exports.MenuItem = MenuItem;
+exports.SubMenuItem = SubMenuItem;
+exports.MenuSeparator = MenuSeparator;
+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 DropdownMenu_module_scss_1 = __importDefault(require("./DropdownMenu.module.scss"));
+const ButtonNative_1 = require("@components/Button/ButtonNative");
+const ThemeContext_1 = require("@components-core/theming/ThemeContext");
+const IconNative_1 = require("@components/Icon/IconNative");
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const constants_1 = require("@components-core/constants");
+exports.DropdownMenu = (0, react_1.forwardRef)(function DropdownMenu({ triggerTemplate, children, label, registerComponentApi, style, onWillOpen, alignment = "start", disabled = false, triggerButtonVariant = "ghost", triggerButtonThemeColor = "primary", triggerButtonIcon = "chevrondown", triggerButtonIconPosition = "end", }, ref) {
+    const { root } = (0, ThemeContext_1.useTheme)();
+    const [open, setOpen] = (0, react_2.useState)(false);
+    (0, react_2.useEffect)(() => {
+        registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
+            close: () => setOpen(false),
+        });
+    }, [registerComponentApi]);
+    return ((0, jsx_runtime_1.jsxs)(ReactDropdownMenu.Root, { open: open, onOpenChange: (isOpen) => __awaiter(this, void 0, void 0, function* () {
+            if (isOpen) {
+                const willOpenResult = yield (onWillOpen === null || onWillOpen === void 0 ? void 0 : onWillOpen());
+                if (willOpenResult === false) {
+                    return;
+                }
+            }
+            setOpen(isOpen);
+        }), children: [(0, jsx_runtime_1.jsx)(ReactDropdownMenu.Trigger, { 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 }), 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: DropdownMenu_module_scss_1.default.DropdownMenuContent, children: children }) })] }));
+});
+function MenuItem({ children, onClick = constants_1.noop, label, style, icon, iconPosition = "start", active = false, }) {
+    const iconToStart = iconPosition === "start";
+    return ((0, jsx_runtime_1.jsxs)(ReactDropdownMenu.Item, { style: style, className: (0, classnames_1.default)(DropdownMenu_module_scss_1.default.DropdownMenuItem, {
+            [DropdownMenu_module_scss_1.default.active]: active,
+        }), onClick: (event) => {
+            event.stopPropagation();
+            onClick(event);
+        }, 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] }));
+}
+function SubMenuItem({ children, label, triggerTemplate }) {
+    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, 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 }) })] }));
+}
+function MenuSeparator() {
+    return (0, jsx_runtime_1.jsx)(ReactDropdownMenu.Separator, { className: DropdownMenu_module_scss_1.default.DropdownMenuSeparator });
+}

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

@@ -0,0 +1,26 @@
+"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 ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const ThemeContext_1 = require("@components-core/theming/ThemeContext");
+const EmojiSelectorNative_1 = require("./EmojiSelectorNative");
+const metadata_helpers_1 = require("@components/metadata-helpers");
+const COMP = "EmojiSelector";
+exports.EmojiSelectorMd = (0, ComponentDefs_1.createMetadata)({
+    status: "experimental",
+    description: `The \`${COMP}\` component provides users with a graphical interface to browse, search and ` +
+        `select emojis to insert into text fields, messages, or other forms of communication.`,
+    props: {
+        autoFocus: (0, metadata_helpers_1.dAutoFocus)(),
+    },
+    events: {
+        select: (0, ComponentDefs_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/EmojiSelectorNative.js

@@ -0,0 +1,52 @@
+"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());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EmojiSelector = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const constants_1 = require("@components-core/constants");
+const emoji_picker_react_1 = __importStar(require("emoji-picker-react"));
+const EmojiSelector = ({ select = constants_1.noop, theme = emoji_picker_react_1.Theme.LIGHT, autoFocus = false, }) => ((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 }));
+exports.EmojiSelector = EmojiSelector;

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

@@ -0,0 +1,64 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fileInputRenderer = exports.FileInputMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const IconNative_1 = require("@components/Icon/IconNative");
+const FileInput_module_scss_1 = __importDefault(require("./FileInput.module.scss"));
+const renderers_1 = require("@components-core/renderers");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const abstractions_1 = require("@components/abstractions");
+const FileInputNative_1 = require("./FileInputNative");
+const metadata_helpers_1 = require("@components/metadata-helpers");
+const COMP = "FileInput";
+exports.FileInputMd = (0, ComponentDefs_1.createMetadata)({
+    description: `The \`${COMP}\` is a user interface component that allows users to select files from their ` +
+        `device's file system for upload (or processing its content otherwise).`,
+    status: "experimental",
+    props: {
+        placeholder: (0, metadata_helpers_1.dPlaceholder)(),
+        initialValue: (0, metadata_helpers_1.dInitialValue)(),
+        autoFocus: (0, metadata_helpers_1.dAutoFocus)(),
+        required: (0, metadata_helpers_1.dRequired)(),
+        readOnly: (0, metadata_helpers_1.dReadonly)(),
+        enabled: (0, metadata_helpers_1.dEnabled)(),
+        validationStatus: (0, metadata_helpers_1.dValidationStatus)(),
+        label: (0, metadata_helpers_1.dLabel)(),
+        labelPosition: (0, metadata_helpers_1.dLabelPosition)("top"),
+        labelWidth: (0, metadata_helpers_1.dLabelWidth)(COMP),
+        labelBreak: (0, metadata_helpers_1.dLabelBreak)(COMP),
+        buttonVariant: (0, ComponentDefs_1.d)("The button variant to use", abstractions_1.buttonVariantNames),
+        buttonLabel: (0, ComponentDefs_1.d)(`This property is an optional string to set a label for the button part.`),
+        buttonIcon: (0, ComponentDefs_1.d)("The ID of the icon to display in the button"),
+        buttonIconPosition: (0, ComponentDefs_1.d)(`This optional string determines the location of the button icon.`, abstractions_1.iconPositionNames),
+        acceptsFileType: (0, ComponentDefs_1.d)(`A list of file types the input controls accepts provided as a string array.`),
+        multiple: (0, ComponentDefs_1.d)(`This boolean property enables to add not just one (\`false\`), but multiple files to the field ` +
+            `(\`true\`). This is done either by dragging onto the field or by selecting multiple files ` +
+            `in the browser menu after clicking the input field button.`, null, "boolean", false),
+        directory: (0, ComponentDefs_1.d)(`This boolean property indicates whether the component allows selecting directories (\`true\`) ` +
+            `or files only (\`false\`).`, null, "boolean", false),
+        buttonSize: (0, ComponentDefs_1.d)("The size of the button (small, medium, large)", abstractions_1.sizeMd),
+        buttonThemeColor: (0, ComponentDefs_1.d)("The button color scheme (primary, secondary, attention)", abstractions_1.buttonThemeNames),
+    },
+    events: {
+        didChange: (0, metadata_helpers_1.dDidChange)(COMP),
+        gotFocus: (0, metadata_helpers_1.dGotFocus)(COMP),
+        lostFocus: (0, metadata_helpers_1.dLostFocus)(COMP),
+    },
+    apis: {
+        value: (0, ComponentDefs_1.d)(`By setting an ID for the component, you can refer to the value of the field if set. ` +
+            `If no value is set, the value will be undefined.`),
+        setValue: (0, ComponentDefs_1.d)(`(**NOT IMPLEMENTED YET**) You can use this method to set the component's ` +
+            `current value programmatically.`),
+        focus: (0, metadata_helpers_1.dFocus)(COMP),
+        open: (0, ComponentDefs_1.d)(`This API command triggers the file browsing dialog to open.`),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(FileInput_module_scss_1.default.themeVars),
+});
+exports.fileInputRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.FileInputMd, ({ node, state, updateState, extractValue, lookupEventHandler, registerComponentApi }) => {
+    const iconName = extractValue.asString(node.props.buttonIcon);
+    return ((0, jsx_runtime_1.jsx)(FileInputNative_1.FileInput, { enabled: extractValue.asOptionalBoolean(node.props.enabled), variant: extractValue(node.props.buttonVariant), buttonThemeColor: extractValue(node.props.buttonThemeColor), buttonSize: extractValue(node.props.buttonSize), buttonIcon: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: iconName }), buttonIconPosition: extractValue(node.props.buttonIconPosition), buttonLabel: extractValue.asOptionalString(node.props.buttonLabel), updateState: updateState, value: (0, FileInputNative_1.isFileArray)(state === null || state === void 0 ? void 0 : state.value) ? state === null || state === void 0 ? void 0 : state.value : undefined, autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), validationStatus: extractValue(node.props.validationStatus), registerComponentApi: registerComponentApi, multiple: extractValue.asOptionalBoolean(node.props.multiple), directory: extractValue.asOptionalBoolean(node.props.directory), initialValue: extractValue(node.props.initialValue), acceptsFileType: extractValue(node.props.acceptsFileType), label: extractValue.asOptionalString(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue.asOptionalString(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), required: extractValue.asOptionalBoolean(node.props.required) }));
+});