xmlui 0.7.14 → 0.7.15

package/dist/scripts/src/components/Column/TableContext.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableContext = void 0;
+exports.useTableContext = useTableContext;
+const react_1 = require("react");
+exports.TableContext = (0, react_1.createContext)({
+    registerColumn: (col, id) => { },
+    unRegisterColumn: (id) => { },
+});
+function useTableContext() {
+    return (0, react_1.useContext)(exports.TableContext);
+}

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

@@ -0,0 +1,503 @@
+"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 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 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 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 Slot_1 = require("@components-core/Slot");
+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 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 ComponentRegistryContext_1 = require("@components/ComponentRegistryContext");
+const Column_1 = require("@components/Column/Column");
+const APICall_1 = require("@components-core/action/APICall");
+const FileDownloadAction_1 = require("@components-core/action/FileDownloadAction");
+const FileUploadAction_1 = require("@components-core/action/FileUploadAction");
+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");
+const PageHeader_1 = require("./PageHeader/PageHeader");
+const TrendLabel_1 = require("./TrendLabel/TrendLabel");
+const IconInfoCard_1 = require("./IconInfoCard/IconInfoCard");
+const TableHeader_1 = require("./TableHeader/TableHeader");
+const Toolbar_1 = require("./Toolbar/Toolbar");
+const ToolbarButton_1 = require("./ToolbarButton/ToolbarButton");
+const TableOfContents_1 = require("@components/TableOfContents/TableOfContents");
+const Accordion_1 = require("./Accordion/Accordion");
+const Alert_1 = require("./Alert/Alert");
+const OffCanvas_1 = require("./OffCanvas/OffCanvas");
+const XmluiCodeHighlighter_1 = require("@components-core/XmluiCodeHighlighter");
+const TabItem_1 = require("@components/Tabs/TabItem");
+const Range_1 = require("./Range/Range");
+const AccordionItem_1 = require("@components/Accordion/AccordionItem");
+const Slider_1 = require("./Slider/Slider");
+const ButtonGroup_1 = require("./ButtonGroup/ButtonGroup");
+const Carousel_1 = require("@components/Carousel/Carousel");
+const CarouselItem_1 = require("@components/Carousel/CarouselItem");
+const renderers_1 = require("@components-core/renderers");
+const Breakout_1 = require("@components/Breakout/Breakout");
+const ToneChangerButton_1 = require("@components/ThemeChanger/ToneChangerButton");
+const APICall_2 = require("@components/APICall/APICall");
+const Option_1 = require("@components/Option/Option");
+const AutoComplete_1 = require("@components/AutoComplete/AutoComplete");
+const Backdrop_1 = require("./Backdrop/Backdrop");
+const Animation_1 = require("@components/Animation/Animation");
+/**
+ * The framework has a specialized component concept, the "property holder
+ * component." These components only hold property values but do not render
+ * anything. The framework processes each of them in a particular way.
+ *
+ * The property holder components must be registered along with other
+ * components, as apps may use them in their markup. The following constant
+ * values declare renderer functions for the built-in property holders.
+ */
+const dataSourcePropHolder = (0, renderers_1.createPropHolderComponent)("DataSource");
+const textNodePropHolder = (0, renderers_1.createPropHolderComponent)("TextNode");
+const textNodeCDataPropHolder = (0, renderers_1.createPropHolderComponent)("TextNodeCData");
+/**
+ * This class implements the registry that holds the components available
+ * in xmlui. Any component in this registry can be used in the xmlui markup.
+ * An error is raised when the markup processor does not find a particular
+ * component within the registry.
+ */
+class ComponentRegistry {
+    /**
+     * The component constructor registers all xmlui core components, so each
+     * registry instance incorporates the framework's core. It also receives a
+     * `contributes` argument with information about accompanying (app-specific)
+     * components that come with a particular app using the registry.
+     * @param contributes Information about the components that come with the app
+     * @param componentManager Optional manager object that receives a notification
+     * about component registrations
+     */
+    constructor(contributes = {}, componentManager) {
+        var _a, _b, _c, _d;
+        this.componentManager = componentManager;
+        // --- The pool of available components
+        this.pool = new Map();
+        // --- The pool of available theme variable names
+        this.themeVars = new Set();
+        // --- Default theme variable values collected from the registered components
+        this.defaultThemeVars = {};
+        // --- The pool of available action functions
+        this.actionFns = new Map();
+        // --- The pool of available loader renderers
+        this.loaders = new Map();
+        // --- Registers a renderable component using its renderer function
+        // --- and metadata
+        this.registerComponentRenderer = ({ type, renderer, metadata, }) => {
+            this.pool.set(type, { renderer, descriptor: metadata });
+            if (metadata === null || metadata === void 0 ? void 0 : metadata.themeVars) {
+                Object.keys(metadata.themeVars).forEach((key) => this.themeVars.add(key));
+            }
+            if (metadata === null || metadata === void 0 ? void 0 : metadata.defaultThemeVars) {
+                (0, lodash_es_1.merge)(this.defaultThemeVars, metadata === null || metadata === void 0 ? void 0 : metadata.defaultThemeVars);
+            }
+        };
+        this.componentManager = componentManager;
+        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(Slot_1.SlotHolder);
+        this.registerComponentRenderer(dataSourcePropHolder);
+        this.registerComponentRenderer(textNodePropHolder);
+        this.registerComponentRenderer(textNodeCDataPropHolder);
+        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(Column_1.columnComponentRenderer);
+        }
+        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_TabItem !== "false") {
+            this.registerComponentRenderer(TabItem_1.tabItemComponentRenderer);
+        }
+        if (process.env.VITE_USED_COMPONENTS_AccordionItem !== "false") {
+            this.registerComponentRenderer(AccordionItem_1.accordionItemComponentRenderer);
+        }
+        if (process.env.VITE_USED_COMPONENTS_CarouselItem !== "false") {
+            this.registerComponentRenderer(CarouselItem_1.carouselItemComponentRenderer);
+        }
+        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_USER_COMPONENTS_XmluiCodeHightlighter !== "false") {
+            this.registerComponentRenderer(XmluiCodeHighlighter_1.codeComponentRenderer);
+        }
+        if (process.env.VITE_USER_COMPONENTS_Markdown !== "false") {
+            this.registerComponentRenderer(Markdown_1.markdownComponentRenderer);
+        }
+        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(HoverCard_1.hoverCardComponentRenderer);
+            this.registerComponentRenderer(RadioGroup_1.radioGroupRenderer);
+            this.registerComponentRenderer(FileInput_1.fileInputRenderer);
+            this.registerComponentRenderer(DatePicker_1.datePickerComponentRenderer);
+            this.registerComponentRenderer(Spinner_1.spinnerComponentRenderer);
+            this.registerComponentRenderer(Select_1.selectComponentRenderer);
+            this.registerComponentRenderer(AutoComplete_1.autoCompleteComponentRenderer);
+            this.registerComponentRenderer(DropdownMenu_1.dropdownMenuComponentRenderer);
+            this.registerComponentRenderer(ThemeChanger_1.themeChangerButtonComponentRenderer);
+            this.registerComponentRenderer(ToneChangerButton_1.toneChangerButtonComponentRenderer);
+            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(Tabs_1.tabsComponentRenderer);
+            this.registerComponentRenderer(Bookmark_1.bookmarkComponentRenderer);
+            this.registerComponentRenderer(TableOfContents_1.tableOfContentsRenderer);
+            this.registerComponentRenderer(Breakout_1.breakoutComponentRenderer);
+        }
+        this.registerComponentRenderer(Theme_1.themeComponentRenderer);
+        this.registerComponentRenderer(AppState_1.appStateComponentRenderer);
+        this.registerComponentRenderer(APICall_2.apiCallRenderer);
+        this.registerComponentRenderer(Animation_1.animationComponentRenderer);
+        this.registerComponentRenderer(Animation_1.fadeInAnimationRenderer);
+        this.registerComponentRenderer(Animation_1.slideInAnimationRenderer);
+        // --- Added after tabler-clone review
+        this.registerCompoundComponentRenderer(PageHeader_1.pageHeaderRenderer);
+        this.registerCompoundComponentRenderer(TrendLabel_1.trendLabelRenderer);
+        this.registerCompoundComponentRenderer(IconInfoCard_1.iconInfoCardRenderer);
+        this.registerCompoundComponentRenderer(TableHeader_1.tableHeaderRenderer);
+        this.registerCompoundComponentRenderer(Toolbar_1.toolbarRenderer);
+        this.registerCompoundComponentRenderer(ToolbarButton_1.toolbarButtonRenderer);
+        // --- New Bootstrap-inspired components
+        this.registerComponentRenderer(Carousel_1.carouselComponentRenderer);
+        this.registerComponentRenderer(Accordion_1.accordionComponentRenderer);
+        this.registerComponentRenderer(Alert_1.alertComponentRenderer);
+        this.registerComponentRenderer(OffCanvas_1.offCanvasComponentRenderer);
+        this.registerComponentRenderer(Range_1.rangeComponentRenderer);
+        this.registerComponentRenderer(Slider_1.sliderComponentRenderer);
+        this.registerComponentRenderer(ButtonGroup_1.buttonGroupComponentRenderer);
+        this.registerComponentRenderer(Backdrop_1.backdropComponentRenderer);
+        if (process.env.VITE_USED_COMPONENTS_Chart !== "false") {
+            this.registerComponentRenderer(Chart_1.chartRenderer);
+            this.registerComponentRenderer(PieChart_1.pieChartComponentRenderer);
+            this.registerComponentRenderer(BarChart_1.barChartComponentRenderer);
+            this.registerComponentRenderer(Map_1.mapComponentRenderer);
+        }
+        (_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((def) => {
+            this.registerCompoundComponentRenderer({ compoundComponentDef: def });
+        });
+        this.registerActionFn(APICall_1.apiAction);
+        this.registerActionFn(FileDownloadAction_1.downloadAction);
+        this.registerActionFn(FileUploadAction_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);
+        (_d = this.componentManager) === null || _d === void 0 ? void 0 : _d.subscribeToRegistrations(this.registerComponentRenderer);
+    }
+    /**
+     * All theme variables used by the registered components.
+     */
+    get componentThemeVars() {
+        return this.themeVars;
+    }
+    /**
+     * The default values of theme variables used by the registered components.
+     */
+    get componentDefaultThemeVars() {
+        return this.defaultThemeVars;
+    }
+    /**
+     * All action functions registered in the component registry.
+     */
+    get actionFunctions() {
+        return this.actionFns;
+    }
+    /**
+     * @returns The keys of all components registered in the component registry.
+     */
+    getRegisteredComponentKeys() {
+        return Array.from(this.pool.keys());
+    }
+    /**
+     * This method retrieves the registry entry of a component registered
+     * with the specified key.
+     * @param componentName The unique ID of the component
+     * @returns The component registry entry, if found; otherwise, undefined.
+     */
+    lookupComponentRenderer(componentName) {
+        return this.pool.get(componentName);
+    }
+    /**
+     * This method retrieves the registry entry of an action registered
+     * with the specified key.
+     * @param actionType The unique ID of the action
+     * @returns The action registry entry, if found; otherwise, undefined.
+     */
+    lookupAction(actionType) {
+        return this.actionFns.get(actionType);
+    }
+    /**
+     * 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);
+    }
+    /**
+     * This method checks whether a component with the specified key is
+     * registered in the component registry.
+     * @param componentName The unique ID of the component
+     * @returns True if the component is registered; otherwise, false.
+     */
+    hasComponent(componentName) {
+        return (this.pool.get(componentName) !== undefined ||
+            this.loaders.get(componentName) !== undefined ||
+            this.actionFns.get(componentName) !== undefined);
+    }
+    // --- Registers a compound component using its definition and metadata
+    registerCompoundComponentRenderer({ compoundComponentDef, metadata, }) {
+        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,
+        });
+        if (metadata === null || metadata === void 0 ? void 0 : metadata.themeVars) {
+            Object.keys(metadata.themeVars).forEach((key) => this.themeVars.add(key));
+        }
+        if (metadata === null || metadata === void 0 ? void 0 : metadata.defaultThemeVars) {
+            (0, lodash_es_1.merge)(this.defaultThemeVars, metadata === null || metadata === void 0 ? void 0 : metadata.defaultThemeVars);
+        }
+    }
+    // --- Registers an action function using its definition
+    registerActionFn({ actionName: functionName, actionFn }) {
+        this.actionFns.set(functionName, actionFn);
+    }
+    // --- Registers a loader renderer using its definition
+    registerLoaderRenderer({ type, renderer }) {
+        this.loaders.set(type, renderer);
+    }
+    /**
+     * This method destroys the component registry; It unsubscribes from the component manager.
+     * This method is called when the component registry is no longer needed, e.g., when the
+     * component provider is unmounted (HMR).
+     */
+    destroy() {
+        var _a;
+        (_a = this.componentManager) === null || _a === void 0 ? void 0 : _a.unSubscribeFromRegistrations(this.registerComponentRenderer);
+    }
+}
+exports.ComponentRegistry = ComponentRegistry;
+/**
+ * This React component provides a context in which components can access the
+ * component registry. The component ensures that child components are not
+ * rendered before the component registry is initialized.
+ */
+function ComponentProvider({ children, contributes, componentManager, }) {
+    const [componentRegistry, setComponentRegistry] = (0, react_1.useState)(() => new ComponentRegistry(contributes, componentManager));
+    // --- Make sure the component registry is updated when the contributes or
+    // --- component manager changes (e.g., due to HMR).
+    (0, react_1.useEffect)(() => {
+        setComponentRegistry((prev) => {
+            prev.destroy();
+            return new ComponentRegistry(contributes, componentManager);
+        });
+    }, [componentManager, contributes]);
+    return ((0, jsx_runtime_1.jsx)(ComponentRegistryContext_1.ComponentRegistryContext.Provider, { value: componentRegistry, children: children }));
+}

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

@@ -0,0 +1,44 @@
+"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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentRegistryContext = void 0;
+exports.useComponentRegistry = useComponentRegistry;
+const react_1 = __importStar(require("react"));
+// Context object that makes the component registry available
+exports.ComponentRegistryContext = react_1.default.createContext(null);
+// Use this hook within a component to access the component registry
+function useComponentRegistry() {
+    return (0, react_1.useContext)(exports.ComponentRegistryContext);
+}

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

@@ -0,0 +1,38 @@
+"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.ContentSeparatorMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ContentSeparator_module_scss_1 = __importDefault(require("./ContentSeparator.module.scss"));
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const renderers_1 = require("@components-core/renderers");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const abstractions_1 = require("@components/abstractions");
+const ContentSeparatorNative_1 = require("./ContentSeparatorNative");
+const COMP = "ContentSeparator";
+exports.ContentSeparatorMd = (0, ComponentDefs_1.createMetadata)({
+    description: `A \`${COMP}\` is a component that divides or separates content visually within a layout. ` +
+        `It serves as a visual cue to distinguish between different sections or groups of content, ` +
+        `helping to improve readability and organization.`,
+    props: {
+        size: (0, ComponentDefs_1.d)(`This property defines the component's height (if the \`orientation\` is horizontal) ` +
+            `or the width (if the \`orientation\` is vertical).`),
+        orientation: (0, ComponentDefs_1.d)("Sets the main axis of the component", abstractions_1.orientationOptionMd),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(ContentSeparator_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        [`color-bg-${COMP}`]: "$color-border",
+        [`size-${COMP}`]: "1px",
+        light: {
+        // --- No light-specific theme vars
+        },
+        dark: {
+        // --- No dark-specific theme vars
+        },
+    },
+});
+exports.contentSeparatorComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.ContentSeparatorMd, ({ node, layoutCss, layoutNonCss, extractValue }) => {
+    return ((0, jsx_runtime_1.jsx)(ContentSeparatorNative_1.ContentSeparator, { orientation: layoutNonCss.orientation, size: extractValue.asSize(node.props.size), style: layoutCss }));
+});

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

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentSeparator = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ContentSeparator_module_scss_1 = __importDefault(require("./ContentSeparator.module.scss"));
+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;