xmlui 0.4.0

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

@@ -0,0 +1,357 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentRegistry = void 0;
+exports.ComponentProvider = ComponentProvider;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Stack_1 = require("@components/Stack/Stack");
+const SpaceFiller_1 = require("@components/SpaceFiller/SpaceFiller");
+const TextArea_1 = require("@components/TextArea/TextArea");
+const NavLink_1 = require("@components/NavLink/NavLink");
+const Link_1 = require("@components/Link/Link");
+const TreeComponent_1 = require("@components/Tree/TreeComponent");
+const Button_1 = require("@components/Button/Button");
+const Heading_1 = require("@components/Heading/Heading");
+const Text_1 = require("@components/Text/Text");
+const Fragment_1 = require("@components-core/Fragment");
+const Table_1 = require("@components/Table/Table");
+const StickyBox_1 = require("@components/StickyBox/StickyBox");
+const Badge_1 = require("@components/Badge/Badge");
+const Avatar_1 = require("@components/Avatar/Avatar");
+const ContentSeparator_1 = require("@components/ContentSeparator/ContentSeparator");
+const Card_1 = require("@components/Card/Card");
+const FlowLayout_1 = require("@components/FlowLayout/FlowLayout");
+const ModalDialog_1 = require("@components/ModalDialog/ModalDialog");
+const NoResult_1 = require("@components/NoResult/NoResult");
+const Combobox_1 = require("@components/Combobox/Combobox");
+const FileUploadDropZone_1 = require("@components/FileUploadDropZone/FileUploadDropZone");
+const Icon_1 = require("@components/Icon/Icon");
+const Items_1 = require("@components/Items/Items");
+const SelectionStore_1 = require("@components/SelectionStore/SelectionStore");
+const Image_1 = require("@components/Image/Image");
+const LazyPdf_1 = require("@components/Pdf/LazyPdf");
+const PageMetaTitle_1 = require("@components/PageMetaTitle/PageMetaTitle");
+const ProgressBar_1 = require("@components/ProgressBar/ProgressBar");
+const Splitter_1 = require("@components/Splitter/Splitter");
+const Queue_1 = require("@components/Queue/Queue");
+const CompoundComponent_1 = require("@components-core/CompoundComponent");
+const List_1 = require("@components/List/List");
+const PositionedContainer_1 = require("@components/PositionedContainer/PositionedContainer");
+const ChangeListener_1 = require("@components/ChangeListener/ChangeListener");
+const FormItem_1 = require("@components/FormItem/FormItem");
+const TextBox_1 = require("@components/TextBox/TextBox");
+const RealTimeAdapter_1 = require("@components/RealTimeAdapter/RealTimeAdapter");
+const Form_1 = require("@components/Form/Form");
+const EmojiSelector_1 = require("@components/EmojiSelector/EmojiSelector");
+const NumberBox_1 = require("@components/NumberBox/NumberBox");
+const MultiSelect_1 = require("@components/MultiSelect/MultiSelect");
+const HoverCard_1 = require("@components/HoverCard/HoverCard");
+const App_1 = require("@components/App/App");
+const NavPanel_1 = require("@components/NavPanel/NavPanel");
+const Pages_1 = require("@components/Pages/Pages");
+const Footer_1 = require("@components/Footer/Footer");
+const NavGroup_1 = require("@components/NavGroup/NavGroup");
+const Logo_1 = require("@components/Logo/Logo");
+const RadioGroup_1 = require("@components/RadioGroup/RadioGroup");
+const ChildrenSlot_1 = require("@components-core/ChildrenSlot");
+const FileInput_1 = require("@components/FileInput/FileInput");
+const Chart_1 = require("@components/Chart/Chart");
+const Spinner_1 = require("@components/Spinner/Spinner");
+const Markdown_1 = require("@components/Markdown/Markdown");
+const Select_1 = require("@components/Select/Select");
+const ThemeChanger_1 = require("@components/ThemeChanger/ThemeChanger");
+const MultiCombobox_1 = require("@components/MultiCombobox/MultiCombobox");
+const FormSection_1 = require("@components/FormSection/FormSection");
+const Checkbox_1 = require("@components/Checkbox/Checkbox");
+const Switch_1 = require("@components/Switch/Switch");
+const AppHeader_1 = require("@components/AppHeader/AppHeader");
+const DropdownMenu_1 = require("@components/DropdownMenu/DropdownMenu");
+const Theme_1 = require("@components/Theme/Theme");
+const lodash_es_1 = require("lodash-es");
+const ViewComponentRegistryContext_1 = require("@components/ViewComponentRegistryContext");
+const TableColumnDef_1 = require("@components/TableColumnDef/TableColumnDef");
+const Option_1 = require("@components/Option/Option");
+const ApiAction_1 = require("@components-core/action/ApiAction");
+const DownloadFileAction_1 = require("@components-core/action/DownloadFileAction");
+const UploadAction_1 = require("@components-core/action/UploadAction");
+const NavigateAction_1 = require("@components-core/action/NavigateAction");
+const TimedAction_1 = require("@components-core/action/TimedAction");
+const ApiLoader_1 = require("@components-core/loader/ApiLoader");
+const ExternalDataLoader_1 = require("@components-core/loader/ExternalDataLoader");
+const MockLoaderRenderer_1 = require("@components-core/loader/MockLoaderRenderer");
+const DataLoader_1 = require("@components-core/loader/DataLoader");
+const DatePicker_1 = require("@components/DatePicker/DatePicker");
+const Redirect_1 = require("@components/Redirect/Redirect");
+const PieChart_1 = require("@components/PieChart/PieChart");
+const BarChart_1 = require("@components/BarChart/BarChart");
+const Map_1 = require("@components/Map/Map");
+const Tabs_1 = require("@components/Tabs/Tabs");
+const Bookmark_1 = require("@components/Bookmark/Bookmark");
+const AppState_1 = require("@components/AppState/AppState");
+class ComponentRegistry {
+    constructor(contributes) {
+        var _a, _b, _c;
+        this.pool = new Map();
+        this.themeVars = new Set();
+        this.defaultThemeVars = {};
+        this.actionFns = new Map();
+        // --- The pool of available loader renderers
+        this.loaders = new Map();
+        if (process.env.VITE_USED_COMPONENTS_Stack !== "false") {
+            this.registerComponentRenderer(Stack_1.stackComponentRenderer);
+            this.registerComponentRenderer(Stack_1.vStackComponentRenderer);
+            this.registerComponentRenderer(Stack_1.hStackComponentRenderer);
+            this.registerComponentRenderer(Stack_1.cvStackComponentRenderer);
+            this.registerComponentRenderer(Stack_1.chStackComponentRenderer);
+        }
+        this.registerComponentRenderer(ChildrenSlot_1.childrenSlotHolder);
+        if (process.env.VITE_USED_COMPONENTS_SpaceFiller !== "false") {
+            this.registerComponentRenderer(SpaceFiller_1.spaceFillerComponentRenderer);
+        }
+        if (process.env.VITE_USED_COMPONENTS_Textarea !== "false") {
+            this.registerComponentRenderer(TextArea_1.textAreaComponentRenderer);
+        }
+        if (process.env.VITE_USED_COMPONENTS_AppHeader !== "false") {
+            this.registerComponentRenderer(AppHeader_1.appHeaderComponentRenderer);
+        }
+        if (process.env.VITE_USED_COMPONENTS_Footer !== "false") {
+            this.registerComponentRenderer(Footer_1.footerRenderer);
+        }
+        if (process.env.VITE_USED_COMPONENTS_Logo !== "false") {
+            this.registerComponentRenderer(Logo_1.logoComponentRenderer);
+        }
+        if (process.env.VITE_USED_COMPONENTS_NavLink !== "false") {
+            this.registerComponentRenderer(NavLink_1.navLinkComponentRenderer);
+        }
+        if (process.env.VITE_USED_COMPONENTS_NavGroup !== "false") {
+            this.registerComponentRenderer(NavGroup_1.navGroupComponentRenderer);
+        }
+        if (process.env.VITE_USED_COMPONENTS_Link !== "false") {
+            this.registerComponentRenderer(Link_1.localLinkComponentRenderer);
+        }
+        if (process.env.VITE_USED_COMPONENTS_Form !== "false") {
+            this.registerComponentRenderer(Form_1.formComponentRenderer);
+            this.registerComponentRenderer(FormItem_1.formItemComponentRenderer);
+        }
+        if (process.env.VITE_USED_COMPONENTS_Tree !== "false") {
+            this.registerComponentRenderer(TreeComponent_1.treeComponentRenderer);
+        }
+        if (process.env.VITE_USED_COMPONENTS_Button !== "false") {
+            this.registerComponentRenderer(Button_1.buttonComponentRenderer);
+        }
+        if (process.env.VITE_USED_COMPONENTS_Checkbox !== "false") {
+            this.registerComponentRenderer(Checkbox_1.checkboxComponentRenderer);
+        }
+        if (process.env.VITE_USED_COMPONENTS_Switch !== "false") {
+            this.registerComponentRenderer(Switch_1.switchComponentRenderer);
+        }
+        if (process.env.VITE_USED_COMPONENTS_Heading !== "false") {
+            this.registerComponentRenderer(Heading_1.headingComponentRenderer);
+            this.registerComponentRenderer(Heading_1.h1ComponentRenderer);
+            this.registerComponentRenderer(Heading_1.h2ComponentRenderer);
+            this.registerComponentRenderer(Heading_1.h3ComponentRenderer);
+            this.registerComponentRenderer(Heading_1.h4ComponentRenderer);
+            this.registerComponentRenderer(Heading_1.h5ComponentRenderer);
+            this.registerComponentRenderer(Heading_1.h6ComponentRenderer);
+        }
+        if (process.env.VITE_USED_COMPONENTS_Text !== "false") {
+            this.registerComponentRenderer(Text_1.textComponentRenderer);
+        }
+        if (process.env.VITE_USED_COMPONENTS_Fragment !== "false") {
+            this.registerComponentRenderer(Fragment_1.fragmentComponentRenderer);
+        }
+        if (process.env.VITE_USED_COMPONENTS_Table !== "false") {
+            this.registerComponentRenderer(Table_1.tableComponentRenderer);
+            this.registerComponentRenderer(TableColumnDef_1.tableColumnDefComponentRenderer);
+        }
+        if (process.env.VITE_USED_COMPONENTS_List !== "false") {
+            this.registerComponentRenderer(List_1.dynamicHeightListComponentRenderer);
+        }
+        if (process.env.VITE_USED_COMPONENTS_App !== "false") {
+            this.registerComponentRenderer(App_1.appRenderer);
+        }
+        if (process.env.VITE_USED_COMPONENTS_NavPanel !== "false") {
+            this.registerComponentRenderer(NavPanel_1.navPanelRenderer);
+        }
+        if (process.env.VITE_USED_COMPONENTS_Pages !== "false") {
+            this.registerComponentRenderer(Pages_1.pagesRenderer);
+            this.registerComponentRenderer(Pages_1.pageRenderer);
+        }
+        if (process.env.VITE_USED_COMPONENTS_Redirect !== "false") {
+            this.registerComponentRenderer(Redirect_1.redirectRenderer);
+        }
+        if (process.env.VITE_USED_COMPONENTS_StickyBox !== "false") {
+            this.registerComponentRenderer(StickyBox_1.stickyBoxComponentRenderer);
+        }
+        if (process.env.VITE_USED_COMPONENTS_Badge !== "false") {
+            this.registerComponentRenderer(Badge_1.badgeComponentRenderer);
+        }
+        if (process.env.VITE_USED_COMPONENTS_Avatar !== "false") {
+            this.registerComponentRenderer(Avatar_1.avatarComponentRenderer);
+        }
+        if (process.env.VITE_USED_COMPONENTS_ContentSeparator !== "false") {
+            this.registerComponentRenderer(ContentSeparator_1.contentSeparatorComponentRenderer);
+        }
+        if (process.env.VITE_USED_COMPONENTS_Card !== "false") {
+            this.registerComponentRenderer(Card_1.cardComponentRenderer);
+        }
+        if (process.env.VITE_USED_COMPONENTS_FlowLayout !== "false") {
+            this.registerComponentRenderer(FlowLayout_1.flowLayoutComponentRenderer);
+        }
+        if (process.env.VITE_USED_COMPONENTS_ModalDialog !== "false") {
+            this.registerComponentRenderer(ModalDialog_1.modalViewComponentRenderer);
+        }
+        if (process.env.VITE_USED_COMPONENTS_NoResult !== "false") {
+            this.registerComponentRenderer(NoResult_1.noResultComponentRenderer);
+        }
+        if (process.env.VITE_USED_COMPONENTS_Option !== "false") {
+            this.registerComponentRenderer(Option_1.optionComponentRenderer);
+        }
+        if (process.env.VITE_USED_COMPONENTS_FileUploadDropZone !== "false") {
+            this.registerComponentRenderer(FileUploadDropZone_1.fileUploadDropZoneComponentRenderer);
+        }
+        if (process.env.VITE_USED_COMPONENTS_Icon !== "false") {
+            this.registerComponentRenderer(Icon_1.iconComponentRenderer);
+        }
+        if (process.env.VITE_USED_COMPONENTS_Items !== "false") {
+            this.registerComponentRenderer(Items_1.itemsComponentRenderer);
+        }
+        if (process.env.VITE_USED_COMPONENTS_SelectionStore !== "false") {
+            this.registerComponentRenderer(SelectionStore_1.selectionStoreComponentRenderer);
+        }
+        if (process.env.VITE_USED_COMPONENTS_Image !== "false") {
+            this.registerComponentRenderer(Image_1.imageComponentRenderer);
+        }
+        if (process.env.VITE_USED_COMPONENTS_Pdf !== "false") {
+            this.registerComponentRenderer(LazyPdf_1.pdfComponentRenderer);
+        }
+        if (process.env.VITE_INCLUDE_REST_COMPONENTS !== "false") {
+            //TODO, if it proves to be a working solution, make these components skippable, too
+            this.registerComponentRenderer(PageMetaTitle_1.pageMetaTitleComponentRenderer);
+            this.registerComponentRenderer(ProgressBar_1.progressBarComponentRenderer);
+            this.registerComponentRenderer(Splitter_1.splitterComponentRenderer);
+            this.registerComponentRenderer(Splitter_1.vSplitterComponentRenderer);
+            this.registerComponentRenderer(Splitter_1.hSplitterComponentRenderer);
+            this.registerComponentRenderer(Queue_1.queueComponentRenderer);
+            this.registerComponentRenderer(PositionedContainer_1.positionedContainerComponentRenderer);
+            this.registerComponentRenderer(ChangeListener_1.changeListenerComponentRenderer);
+            this.registerComponentRenderer(RealTimeAdapter_1.realTimeAdapterComponentRenderer);
+            this.registerComponentRenderer(TextBox_1.textBoxComponentRenderer);
+            this.registerComponentRenderer(TextBox_1.passwordInputComponentRenderer);
+            this.registerComponentRenderer(EmojiSelector_1.emojiSelectorRenderer);
+            this.registerComponentRenderer(NumberBox_1.numberBoxComponentRenderer);
+            this.registerComponentRenderer(MultiSelect_1.multiSelectComponentRenderer);
+            this.registerComponentRenderer(HoverCard_1.hoverCardComponentRenderer);
+            this.registerComponentRenderer(RadioGroup_1.radioGroupRenderer);
+            this.registerComponentRenderer(RadioGroup_1.radioGroupOptionRenderer);
+            this.registerComponentRenderer(FileInput_1.fileInputRenderer);
+            this.registerComponentRenderer(DatePicker_1.datePickerComponentRenderer);
+            this.registerComponentRenderer(Spinner_1.spinnerComponentRenderer);
+            this.registerComponentRenderer(Markdown_1.markdownComponentRenderer);
+            this.registerComponentRenderer(Select_1.selectComponentRenderer);
+            this.registerComponentRenderer(DropdownMenu_1.dropdownMenuComponentRenderer);
+            this.registerComponentRenderer(ThemeChanger_1.themeChangerButtonComponentRenderer);
+            this.registerCompoundComponentRenderer(FormSection_1.formSectionRenderer);
+            this.registerComponentRenderer(DropdownMenu_1.dropdownMenuComponentRenderer);
+            this.registerComponentRenderer(DropdownMenu_1.menuItemRenderer);
+            this.registerComponentRenderer(DropdownMenu_1.subMenuItemRenderer);
+            this.registerComponentRenderer(DropdownMenu_1.menuSeparatorRenderer);
+            this.registerComponentRenderer(MultiCombobox_1.multiComboboxComponentRenderer);
+            this.registerComponentRenderer(Combobox_1.comboboxComponentRenderer);
+            this.registerComponentRenderer(PieChart_1.pieChartComponentRenderer);
+            this.registerComponentRenderer(BarChart_1.barChartComponentRenderer);
+            this.registerComponentRenderer(Map_1.mapComponentRenderer);
+            this.registerComponentRenderer(Tabs_1.tabsComponentRenderer);
+            this.registerComponentRenderer(Bookmark_1.bookmarkComponentRenderer);
+        }
+        this.registerComponentRenderer(Theme_1.themeComponentRenderer);
+        this.registerComponentRenderer(AppState_1.appStateComponentRenderer);
+        if (process.env.VITE_USED_COMPONENTS_Chart !== "false") {
+            this.registerComponentRenderer(Chart_1.chartRenderer);
+        }
+        (_a = contributes.components) === null || _a === void 0 ? void 0 : _a.forEach((renderer) => {
+            this.registerComponentRenderer(renderer);
+        });
+        (_b = contributes.compoundComponents) === null || _b === void 0 ? void 0 : _b.forEach((componentDef) => {
+            this.registerCompoundComponentRenderer(componentDef);
+        });
+        this.registerActionFn(ApiAction_1.apiAction);
+        this.registerActionFn(DownloadFileAction_1.downloadAction);
+        this.registerActionFn(UploadAction_1.uploadAction);
+        this.registerActionFn(NavigateAction_1.navigateAction);
+        this.registerActionFn(TimedAction_1.timedAction);
+        (_c = contributes.actions) === null || _c === void 0 ? void 0 : _c.forEach((actionRenderer) => {
+            this.registerActionFn(actionRenderer);
+        });
+        this.registerLoaderRenderer(ApiLoader_1.apiLoaderRenderer);
+        this.registerLoaderRenderer(ExternalDataLoader_1.externalDataLoaderRenderer);
+        this.registerLoaderRenderer(MockLoaderRenderer_1.mockLoaderRenderer);
+        this.registerLoaderRenderer(DataLoader_1.dataLoaderRenderer);
+    }
+    get componentThemeVars() {
+        return this.themeVars;
+    }
+    get componentDefaultThemeVars() {
+        return this.defaultThemeVars;
+    }
+    get actionFunctions() {
+        return this.actionFns;
+    }
+    getRegisteredComponentKeys() {
+        return Array.from(this.pool.keys());
+    }
+    lookupComponentRenderer(viewComponentType) {
+        return this.pool.get(viewComponentType);
+    }
+    /**
+     * This method retrieves the registry entry of a loader registered with the specified key.
+     * @param type The unique ID of the loader
+     * @returns The loader registry entry, if found; otherwise, undefined.
+     */
+    lookupLoaderRenderer(type) {
+        return this.loaders.get(type);
+    }
+    registerComponentRenderer({ type, renderer, metadata: hints }) {
+        this.pool.set(type, { renderer, descriptor: hints });
+        if (hints === null || hints === void 0 ? void 0 : hints.themeVars) {
+            Object.keys(hints.themeVars).forEach((key) => this.themeVars.add(key));
+        }
+        if (hints === null || hints === void 0 ? void 0 : hints.defaultThemeVars) {
+            (0, lodash_es_1.merge)(this.defaultThemeVars, hints === null || hints === void 0 ? void 0 : hints.defaultThemeVars);
+        }
+    }
+    registerCompoundComponentRenderer(compoundComponentDef) {
+        this.pool.set(compoundComponentDef.name, {
+            renderer: (rendererContext) => {
+                return ((0, jsx_runtime_1.jsx)(CompoundComponent_1.CompoundComponent, Object.assign({ api: compoundComponentDef.api, scriptCollected: compoundComponentDef.scriptCollected, compound: compoundComponentDef.component }, rendererContext)));
+            },
+            isCompoundComponent: true,
+        });
+    }
+    registerActionFn({ actionName: functionName, actionFn }) {
+        this.actionFns.set(functionName, actionFn);
+    }
+    /**
+     * This method registers a loader in the registry through its loader renderer definition.
+     * @param type The loader's unique ID
+     * @param renderer The renderer function that creates a React node according to the loader definition
+     */
+    registerLoaderRenderer({ type, renderer }) {
+        this.loaders.set(type, renderer);
+    }
+}
+exports.ComponentRegistry = ComponentRegistry;
+// This React component provides a context in which components can access the component registry. The
+// component takes care that child component are rendered only when the component registry is initialized
+// (filled with the definition of available components).
+function ComponentProvider({ children, contributes }) {
+    const [componentRegistry, setComponentRegistry] = (0, react_1.useState)(() => new ComponentRegistry(contributes));
+    //sync up the changed contributes (HMR)
+    (0, react_1.useEffect)(() => {
+        setComponentRegistry(new ComponentRegistry(contributes));
+    }, [contributes]);
+    (0, react_1.useEffect)(() => {
+        setComponentRegistry(new ComponentRegistry(contributes));
+    }, [contributes]);
+    return ((0, jsx_runtime_1.jsx)(ViewComponentRegistryContext_1.ViewComponentRegistryContext.Provider, { value: componentRegistry, children: children }));
+}

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

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.contentSeparatorComponentRenderer = exports.ContentSeparator = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ContentSeparator_module_scss_1 = __importDefault(require("./ContentSeparator.module.scss"));
+const renderers_1 = require("@components-core/renderers");
+const descriptorHelper_1 = require("@components-core/descriptorHelper");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const ContentSeparator = ({ orientation = "horizontal", size, style }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(ContentSeparator_module_scss_1.default.separator, {
+            [ContentSeparator_module_scss_1.default.horizontal]: orientation === "horizontal",
+            [ContentSeparator_module_scss_1.default.vertical]: orientation === "vertical",
+        }), style: Object.assign({ height: orientation === "horizontal" ? size : undefined, width: orientation === "horizontal" ? "100%" : size }, style) }));
+};
+exports.ContentSeparator = ContentSeparator;
+const metadata = {
+    displayName: "ContentSeparator",
+    description: "A component that indicates a separation between adjacent components",
+    props: {
+        size: (0, descriptorHelper_1.desc)("Width or height of the separator, depending on it orientation"),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(ContentSeparator_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        "color-bg-ContentSeparator": "$color-border",
+        "size-ContentSeparator": "1px",
+        light: {
+        // --- No light-specific theme vars
+        },
+        dark: {
+        // --- No dark-specific theme vars
+        },
+    },
+};
+exports.contentSeparatorComponentRenderer = (0, renderers_1.createComponentRenderer)("ContentSeparator", ({ node, layoutCss, layoutNonCss, extractValue }) => {
+    return ((0, jsx_runtime_1.jsx)(exports.ContentSeparator, { orientation: layoutNonCss.orientation, size: extractValue.asSize(node.props.size), style: layoutCss }));
+}, metadata);

package/dist/scripts/src/components/DatePicker/DatePicker.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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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.datePickerComponentRenderer = exports.DatePicker = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = 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 descriptorHelper_1 = require("@components-core/descriptorHelper");
+const renderers_1 = require("@components-core/renderers");
+const input_abstractions_1 = require("@components/Input/input-abstractions");
+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 themeVars_1 = require("@components-core/theming/themeVars");
+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;
+};
+const 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 = [], }) => {
+    const _weekStartsOn = weekStartsOn >= 0 && weekStartsOn <= 6 ? weekStartsOn : WeekDays.Sunday;
+    const [isButtonFocused, setIsButtonFocused] = (0, react_1.useState)(false);
+    const [isMenuFocused, setIsMenuFocused] = (0, react_1.useState)(false);
+    const selected = (0, react_1.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_1.useEffect)(() => {
+        if (!dateFormats.includes(dateFormat)) {
+            throw new Error(`Invalid dateFormat: ${dateFormat}. Supported formats are: ${dateFormats.join(", ")}`);
+        }
+    }, [dateFormat]);
+    const startDate = (0, react_1.useMemo)(() => {
+        return fromDate ? (0, date_fns_1.parse)(fromDate, dateFormat, new Date()) : undefined;
+    }, [fromDate, dateFormat]);
+    const endDate = (0, react_1.useMemo)(() => {
+        return toDate ? (0, date_fns_1.parse)(toDate, dateFormat, new Date()) : undefined;
+    }, [toDate, dateFormat]);
+    const disabled = (0, react_1.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_1.useState)(false);
+    const { root } = (0, ThemeContext_1.useTheme)();
+    const handleOnButtonFocus = () => {
+        setIsButtonFocused(true);
+    };
+    const handleOnButtonBlur = () => {
+        setIsButtonFocused(false);
+    };
+    const handleOnMenuFocus = () => {
+        setIsMenuFocused(true);
+    };
+    const handleOnMenuBlur = () => {
+        setIsMenuFocused(false);
+    };
+    (0, react_1.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_1.useEffect)(() => {
+        updateState({ value: initialValue });
+    }, [initialValue, updateState]);
+    const handleSelect = (0, react_1.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, 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) }))) : ((0, jsx_runtime_1.jsx)("span", { className: DatePicker_module_scss_1.default.placeholder, children: placeholder })) }) }), (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 }) }) })] }));
+};
+exports.DatePicker = DatePicker;
+const metadata = {
+    displayName: "DatePicker",
+    description: "A datepicker component",
+    props: Object.assign(Object.assign({}, input_abstractions_1.inputComponentPropertyDescriptors), { mode: (0, descriptorHelper_1.desc)("The mode of the datepicker (single or range)"), dateFormat: (0, descriptorHelper_1.desc)("The format of the date displayed in the input field"), showWeekNumber: (0, descriptorHelper_1.desc)("Whether to show the week number in the calendar"), weekStartsOn: (0, descriptorHelper_1.desc)("The first day of the week. 0 is Sunday, 1 is Monday, etc."), fromDate: (0, descriptorHelper_1.desc)("The start date of the range of selectable dates"), toDate: (0, descriptorHelper_1.desc)("The end date of the range of selectable dates"), disabledDates: (0, descriptorHelper_1.desc)("An array of dates that are disabled") }),
+    events: input_abstractions_1.inputComponentEventDescriptors,
+    themeVars: (0, themeVars_1.parseScssVar)(DatePicker_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        "shadow-menu-DatePicker": "$shadow-md",
+        "radius-menu-DatePicker": "$radius",
+        "color-text-value-DatePicker": "$color-text-primary",
+        "color-bg-menu-DatePicker": "$color-bg-primary",
+        "color-bg-item-DatePicker--hover": "$color-bg-dropdown-item--active",
+        "color-bg-item-DatePicker--active": "$color-bg-dropdown-item--active",
+        light: {
+            "color-bg-menu-DatePicker": "$color-bg-primary",
+        },
+        dark: {
+            "color-bg-menu-DatePicker": "$color-bg-primary",
+        },
+    },
+};
+exports.datePickerComponentRenderer = (0, renderers_1.createComponentRenderer)("DatePicker", ({ node, state, updateState, extractValue, layoutCss, lookupEventHandler, registerComponentApi }) => {
+    var _a;
+    return ((0, jsx_runtime_1.jsx)(exports.DatePicker, { layout: 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) }));
+}, metadata);