xmlui 0.7.13 → 0.7.15

package/dist/scripts/src/components/List/ListNative.js

@@ -0,0 +1,425 @@
+"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.DynamicHeightList = exports.ListContext = void 0;
+exports.useListData = useListData;
+exports.MemoizedSection = MemoizedSection;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const react_virtual_1 = require("@tanstack/react-virtual");
+const List_module_scss_1 = __importDefault(require("./List.module.scss"));
+const lodash_es_1 = require("lodash-es");
+const constants_1 = require("@components-core/constants");
+const ScrollContext_1 = require("@components-core/ScrollContext");
+const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
+const CardNative_1 = require("@components/Card/CardNative");
+const TextNative_1 = require("@components/Text/TextNative");
+const SpinnerNative_1 = require("@components/Spinner/SpinnerNative");
+const hooks_1 = require("@components-core/utils/hooks");
+const container_helpers_1 = require("@components/container-helpers");
+const misc_1 = require("@components-core/utils/misc");
+const classnames_1 = __importDefault(require("classnames"));
+exports.ListContext = react_1.default.createContext({
+    isExpanded: (id) => false,
+    toggleExpanded: (id, isExpanded) => { },
+});
+const Item = ({ children, onHeightChanged, rowIndex, itemType }) => {
+    const ref = (0, react_1.useRef)(null);
+    (0, hooks_1.useResizeObserver)(ref, (0, react_1.useCallback)(() => {
+        onHeightChanged === null || onHeightChanged === void 0 ? void 0 : onHeightChanged(ref.current);
+    }, [onHeightChanged]));
+    return ((0, jsx_runtime_1.jsx)("div", { ref: (divElement) => {
+            onHeightChanged === null || onHeightChanged === void 0 ? void 0 : onHeightChanged(divElement);
+            ref.current = divElement;
+        }, className: (0, classnames_1.default)({
+            [List_module_scss_1.default.row]: itemType === RowType.ITEM,
+            [List_module_scss_1.default.section]: itemType === RowType.SECTION,
+            [List_module_scss_1.default.sectionFooter]: itemType === RowType.SECTION_FOOTER,
+        }), "data-list-item-type": itemType, "data-index": rowIndex, children: children }));
+};
+var RowType;
+(function (RowType) {
+    RowType["SECTION"] = "SECTION";
+    RowType["SECTION_FOOTER"] = "SECTION_FOOTER";
+    RowType["ITEM"] = "ITEM";
+})(RowType || (RowType = {}));
+function useListData({ groupsInitiallyExpanded = true, expanded = constants_1.EMPTY_OBJECT, items, limit, groupBy, orderBy, availableGroups, defaultGroups = constants_1.EMPTY_ARRAY, }) {
+    const sortedItems = (0, react_1.useMemo)(() => {
+        if (!orderBy) {
+            return items;
+        }
+        let arrayOrderBy = orderBy;
+        if (!Array.isArray(orderBy)) {
+            arrayOrderBy = [orderBy];
+        }
+        const fieldSelectorsToOrderBy = arrayOrderBy.map((ob) => {
+            return (item) => {
+                return (0, lodash_es_1.get)(item, ob.field);
+            };
+        });
+        const fieldDirectionsToOrderBy = arrayOrderBy.map((ob) => ob.direction);
+        return (0, lodash_es_1.orderBy)(items, fieldSelectorsToOrderBy, fieldDirectionsToOrderBy);
+    }, [items, orderBy]);
+    const cappedItems = (0, react_1.useMemo)(() => {
+        if (!limit) {
+            return sortedItems;
+        }
+        return sortedItems.slice(0, limit - 1);
+    }, [sortedItems, limit]);
+    const sectionedItems = (0, react_1.useMemo)(() => {
+        if (groupBy === undefined) {
+            return constants_1.EMPTY_OBJECT;
+        }
+        return (0, lodash_es_1.groupBy)(cappedItems, (item) => item[groupBy]);
+    }, [cappedItems, groupBy]);
+    const sections = (0, react_1.useMemo)(() => {
+        if (groupBy === undefined) {
+            return constants_1.EMPTY_ARRAY;
+        }
+        let foundSectionKeys = (0, lodash_es_1.uniq)([...defaultGroups, ...Object.keys(sectionedItems)]);
+        if (availableGroups) {
+            foundSectionKeys = (0, lodash_es_1.sortBy)(foundSectionKeys, (item) => {
+                return availableGroups.indexOf(item);
+            });
+        }
+        return foundSectionKeys;
+    }, [groupBy, sectionedItems, defaultGroups, availableGroups]);
+    const rows = (0, react_1.useMemo)(() => {
+        if (groupBy === undefined) {
+            return cappedItems;
+        }
+        const ret = [];
+        sections.forEach((section) => {
+            ret.push({
+                id: section,
+                items: sectionedItems[section],
+                _row_type: RowType.SECTION,
+                key: section,
+            });
+            if (expanded[section] || (expanded[section] === undefined && groupsInitiallyExpanded)) {
+                ret.push(...(sectionedItems[section] || []));
+                ret.push({
+                    id: `${section}_footer`,
+                    items: sectionedItems[section],
+                    _row_type: RowType.SECTION_FOOTER,
+                    key: section,
+                });
+            }
+        });
+        return ret;
+    }, [groupBy, sections, cappedItems, expanded, groupsInitiallyExpanded, sectionedItems]);
+    return {
+        rows,
+        sectionedItems,
+        sections,
+    };
+}
+const defaultItemRenderer = (item, id) => {
+    if (!item) {
+        return null;
+    }
+    let title;
+    let subtitle;
+    if (typeof item === "object") {
+        const values = Object.values((0, lodash_es_1.omit)(item, "id"));
+        if (!values.length) {
+            return null;
+        }
+        title = values[0];
+        subtitle = undefined;
+        if (values.length > 1) {
+            subtitle = values[1];
+        }
+    }
+    else if (typeof item === "string" || typeof item === "number") {
+        title = item + "";
+        subtitle = undefined;
+    }
+    else {
+        return null;
+    }
+    return (0, jsx_runtime_1.jsx)(CardNative_1.Card, { title: title, subtitle: subtitle });
+};
+// TODO check this out: https://github.com/TanStack/virtual/discussions/195#discussioncomment-11170421
+exports.DynamicHeightList = (0, react_1.forwardRef)(function DynamicHeightList({ items = constants_1.EMPTY_ARRAY, itemRenderer = defaultItemRenderer, sectionRenderer, sectionFooterRenderer, loading, limit, groupBy, orderBy, availableGroups, scrollAnchor = "top", requestFetchPrevPage = lodash_es_1.noop, requestFetchNextPage = lodash_es_1.noop, selectedIndex, resetSelectedIndex = lodash_es_1.noop, pageInfo, idKey = "id", style, emptyListPlaceholder, groupsInitiallyExpanded = true, defaultGroups = constants_1.EMPTY_ARRAY, registerComponentApi, borderCollapse = true }, ref) {
+    var _a;
+    // The scrollable element for your list
+    const scrollRef = (0, react_1.useContext)(ScrollContext_1.ScrollContext);
+    const parentRef = (0, react_1.useRef)(null);
+    const rootRef = ref ? (0, react_compose_refs_1.composeRefs)(parentRef, ref) : parentRef;
+    const rowsContainerRef = (0, react_1.useRef)(null);
+    const [suspendInfiniteLoad, setSuspendInfiniteLoad] = (0, react_1.useState)(scrollAnchor === "bottom");
+    const [expanded, setExpanded] = (0, react_1.useState)(constants_1.EMPTY_OBJECT);
+    const toggleExpanded = (0, react_1.useCallback)((id, isExpanded) => {
+        setExpanded((prev) => (Object.assign(Object.assign({}, prev), { [id]: isExpanded })));
+    }, []);
+    const expandContextValue = (0, react_1.useMemo)(() => {
+        return {
+            isExpanded: (id) => expanded[id] || (expanded[id] === undefined && groupsInitiallyExpanded),
+            toggleExpanded,
+        };
+    }, [expanded, groupsInitiallyExpanded, toggleExpanded]);
+    const { rows } = useListData({
+        groupsInitiallyExpanded,
+        defaultGroups,
+        expanded,
+        items,
+        limit,
+        groupBy,
+        orderBy,
+        availableGroups,
+    });
+    const hasOutsideScroll = scrollRef &&
+        (style === null || style === void 0 ? void 0 : style.maxHeight) === undefined &&
+        (style === null || style === void 0 ? void 0 : style.height) === undefined &&
+        (style === null || style === void 0 ? void 0 : style.flex) === undefined;
+    const scrollElementRef = hasOutsideScroll ? scrollRef : parentRef;
+    const overscan = 5;
+    const rowVirtualizer = (0, react_virtual_1.useVirtualizer)({
+        count: rows.length,
+        // paddingStart: scrollPaddingStart,
+        // paddingEnd: scrollPaddingEnd,
+        scrollMargin: !hasOutsideScroll ? 0 : ((_a = parentRef.current) === null || _a === void 0 ? void 0 : _a.offsetTop) || 0,
+        getScrollElement: (0, react_1.useCallback)(() => {
+            return scrollElementRef.current;
+        }, [scrollElementRef]),
+        estimateSize: (0, react_1.useCallback)(() => {
+            return 10;
+        }, []),
+        rangeExtractor: (0, react_1.useCallback)((range) => {
+            return (0, react_virtual_1.defaultRangeExtractor)(range);
+        }, []),
+        getItemKey: (0, react_1.useCallback)((index) => {
+            var _a;
+            return (_a = rows[index][idKey]) !== null && _a !== void 0 ? _a : index;
+        }, [idKey, rows]),
+        overscan: overscan,
+    });
+    const tryToScrollToIndex = (0, react_1.useCallback)((index, onFinished) => {
+        // console.log("SCROLLING TO INDEX", index);
+        rowVirtualizer.scrollToIndex(index);
+        requestAnimationFrame(() => {
+            onFinished === null || onFinished === void 0 ? void 0 : onFinished();
+        });
+    }, [rowVirtualizer]);
+    const scrollToBottom = (0, misc_1.useEvent)(() => {
+        if (rows.length) {
+            tryToScrollToIndex(rows.length - 1);
+        }
+    });
+    const scrollToTop = (0, misc_1.useEvent)(() => {
+        if (rows.length) {
+            tryToScrollToIndex(0);
+        }
+    });
+    (0, react_1.useLayoutEffect)(() => {
+        registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
+            scrollToBottom,
+            scrollToTop,
+        });
+    }, [registerComponentApi, scrollToBottom, scrollToTop]);
+    const virtualItems = rowVirtualizer.getVirtualItems();
+    const totalSize = rowVirtualizer.getTotalSize();
+    (0, react_1.useEffect)(() => {
+        if (selectedIndex && rowVirtualizer) {
+            const index = virtualItems.findIndex((item) => item.key === selectedIndex);
+            tryToScrollToIndex(index);
+            resetSelectedIndex();
+        }
+    }, [resetSelectedIndex, rowVirtualizer, selectedIndex, tryToScrollToIndex, virtualItems]);
+    const prevTotalSize = (0, hooks_1.usePrevious)(totalSize);
+    const firstRenderedItem = virtualItems[0];
+    const lastRenderedItem = virtualItems[virtualItems.length - 1];
+    const initiallyScrolledToBottom = (0, react_1.useRef)(false);
+    (0, react_1.useLayoutEffect)(() => {
+        if (rows.length && scrollAnchor === "bottom" && !initiallyScrolledToBottom.current) {
+            initiallyScrolledToBottom.current = true;
+            tryToScrollToIndex(rows.length - 1);
+        }
+    }, [rows.length, scrollAnchor, tryToScrollToIndex]);
+    // restore scroll position when total size changes
+    (0, react_1.useLayoutEffect)(() => {
+        if (prevTotalSize &&
+            prevTotalSize !== totalSize &&
+            scrollAnchor === "bottom" //&&
+        ) {
+            const delta2 = totalSize - prevTotalSize;
+            setSuspendInfiniteLoad(true);
+            queueMicrotask(() => {
+                scrollElementRef.current.scrollBy({ left: 0, top: delta2 });
+                // console.log("scrolled to", scrollElementRef.current.scrollTop);
+                setSuspendInfiniteLoad(false);
+            });
+        }
+    }, [
+        firstRenderedItem === null || firstRenderedItem === void 0 ? void 0 : firstRenderedItem.index,
+        prevTotalSize,
+        rowVirtualizer,
+        scrollAnchor,
+        scrollElementRef,
+        totalSize,
+    ]);
+    const suspendTimerRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        // console.log({
+        //   suspendState: suspendInfiniteLoad,
+        //   pageInfo,
+        //   firstRenderedItem,
+        //   // visibleRange
+        // });
+        if (suspendInfiniteLoad) {
+            return;
+        }
+        if (!pageInfo) {
+            return;
+        }
+        if (!firstRenderedItem) {
+            return;
+        }
+        if (firstRenderedItem.index === 0 && pageInfo.hasPrevPage && !pageInfo.isFetchingPrevPage) {
+            (() => __awaiter(this, void 0, void 0, function* () {
+                setSuspendInfiniteLoad(true);
+                if (suspendTimerRef.current) {
+                    clearTimeout(suspendTimerRef.current);
+                }
+                // console.log("fetching prev page START", pageInfo);
+                yield requestFetchPrevPage();
+                // console.log("fetching prev page END", pageInfo);
+                suspendTimerRef.current = setTimeout(() => {
+                    setSuspendInfiniteLoad(false);
+                }, 500);
+            }))();
+        }
+    }, [firstRenderedItem, pageInfo, requestFetchPrevPage, suspendInfiniteLoad]);
+    (0, react_1.useEffect)(() => {
+        // console.log({
+        //   suspendState: suspendInfiniteLoad,
+        //   pageInfo,
+        //   lastRenderedItem,
+        //   itemsLength: items.length
+        //   // visibleRange
+        // });
+        if (suspendInfiniteLoad) {
+            return;
+        }
+        if (!pageInfo) {
+            return;
+        }
+        if (!lastRenderedItem) {
+            return;
+        }
+        if (lastRenderedItem.index === items.length - 1 &&
+            pageInfo.hasNextPage &&
+            !pageInfo.isFetchingNextPage) {
+            (() => __awaiter(this, void 0, void 0, function* () {
+                setSuspendInfiniteLoad(true);
+                if (suspendTimerRef.current) {
+                    clearTimeout(suspendTimerRef.current);
+                }
+                // console.log("fetching prev page START", pageInfo);
+                yield requestFetchNextPage();
+                // console.log("fetching prev page END", pageInfo);
+                suspendTimerRef.current = setTimeout(() => {
+                    setSuspendInfiniteLoad(false);
+                }, 500);
+            }))();
+        }
+    }, [items.length, lastRenderedItem, pageInfo, requestFetchNextPage, suspendInfiniteLoad]);
+    const listContainerTransformY = !firstRenderedItem
+        ? 0
+        : firstRenderedItem.start - rowVirtualizer.options.scrollMargin;
+    return ((0, jsx_runtime_1.jsx)(exports.ListContext.Provider, { value: expandContextValue, children: (0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: List_module_scss_1.default.scrollParent, style: Object.assign({ overflow: hasOutsideScroll ? "initial" : "auto", maxHeight: "100%" }, style), children: [loading && virtualItems.length === 0 && ((0, jsx_runtime_1.jsx)("div", { className: List_module_scss_1.default.loadingWrapper, children: (0, jsx_runtime_1.jsx)(SpinnerNative_1.Spinner, {}) })), !loading &&
+                    virtualItems.length === 0 &&
+                    (emptyListPlaceholder !== null && emptyListPlaceholder !== void 0 ? emptyListPlaceholder : ((0, jsx_runtime_1.jsx)("div", { className: List_module_scss_1.default.noRows, children: (0, jsx_runtime_1.jsx)(TextNative_1.Text, { children: "No data available" }) }))), ((!loading && virtualItems.length > 0) || items.length > 0) && ((0, jsx_runtime_1.jsx)("div", { ref: rowsContainerRef, style: {
+                        height: `${totalSize}px`,
+                        width: "100%",
+                        position: "relative",
+                    }, children: (0, jsx_runtime_1.jsx)("div", { "data-list-container": true, className: (0, classnames_1.default)({
+                            [List_module_scss_1.default.sectioned]: groupBy !== undefined,
+                            [List_module_scss_1.default.borderCollapse]: borderCollapse,
+                        }), style: {
+                            position: "absolute",
+                            top: 0,
+                            left: 0,
+                            width: "100%",
+                            transform: `translateY(${listContainerTransformY}px)`,
+                        }, children: virtualItems.map((virtualItem) => {
+                            var _a, _b;
+                            const item = rows[virtualItem.index];
+                            let key = virtualItem.key;
+                            let itemContent;
+                            switch (item._row_type) {
+                                case RowType.SECTION:
+                                    itemContent = (_a = sectionRenderer === null || sectionRenderer === void 0 ? void 0 : sectionRenderer(item, item[idKey])) !== null && _a !== void 0 ? _a : null;
+                                    key = `section_${key}`;
+                                    break;
+                                case RowType.SECTION_FOOTER:
+                                    itemContent = sectionFooterRenderer === null || sectionFooterRenderer === void 0 ? void 0 : sectionFooterRenderer(item, item[idKey]);
+                                    key = `section_footer_${key}`;
+                                    break;
+                                default:
+                                    itemContent = (_b = itemRenderer(item, item[idKey])) !== null && _b !== void 0 ? _b : null;
+                                    break;
+                            }
+                            return ((0, jsx_runtime_1.jsx)(Item, { onHeightChanged: rowVirtualizer.measureElement, rowIndex: virtualItem.index, itemType: item._row_type || RowType.ITEM, children: itemContent }, key));
+                        }) }) }))] }) }));
+});
+// --- Helper function for List item rendering
+function MemoizedSection({ node, renderChild, item, }) {
+    const { isExpanded, toggleExpanded } = (0, react_1.useContext)(exports.ListContext);
+    const id = item.id;
+    const expanded = isExpanded(id);
+    const sectionContext = (0, react_1.useMemo)(() => {
+        return {
+            isExpanded: expanded,
+            toggle: () => {
+                toggleExpanded(id, !expanded);
+            },
+        };
+    }, [expanded, id, toggleExpanded]);
+    return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node, renderChild: renderChild, item: item, context: sectionContext, itemKey: "$group", contextKey: "$group" }));
+}

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.logoComponentRenderer = exports.LogoMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const renderers_1 = require("@components-core/renderers");
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const LogoNative_1 = require("./LogoNative");
+const COMP = "Logo";
+exports.LogoMd = (0, ComponentDefs_1.createMetadata)({
+    status: "experimental",
+    description: `The \`${COMP}\` component represents a logo or a brand symbol. Usually, you use ` +
+        `this component in the [\`AppHeader\`](./AppHeader.mdx#logotemplate).`,
+});
+exports.logoComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.LogoMd, ({ node, layoutCss, extractValue }) => {
+    return (0, jsx_runtime_1.jsx)(LogoNative_1.Logo, { style: layoutCss });
+});

package/dist/scripts/src/components/Logo/LogoNative.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Logo = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ImageNative_1 = require("@components/Image/ImageNative");
+const AppHeaderNative_1 = require("@components/AppHeader/AppHeaderNative");
+const Logo = ({ style }) => {
+    const logoUrl = (0, AppHeaderNative_1.useLogoUrl)();
+    if (!logoUrl) {
+        return null;
+    }
+    //width auto for safari
+    return ((0, jsx_runtime_1.jsx)(ImageNative_1.Image, { src: logoUrl, alt: "Logo", style: Object.assign({ width: "auto", boxShadow: "none" }, style) }));
+};
+exports.Logo = Logo;

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

@@ -0,0 +1,75 @@
+"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.mapComponentRenderer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const PieChart_module_scss_1 = __importDefault(require("@components/PieChart/PieChart.module.scss"));
+const renderers_1 = require("@components-core/renderers");
+const react_1 = __importStar(require("react"));
+const world_countries_json_1 = __importDefault(require("./world_countries.json"));
+const lodash_es_1 = require("lodash-es");
+const ResponsiveChoropleth = react_1.default.lazy(() => Promise.resolve().then(() => __importStar(require("@nivo/geo"))).then((module) => ({ default: module.ResponsiveChoropleth })));
+const Map = ({ data = [], style }) => {
+    // lot of extra props, the issue is here: https://github.com/plouc/nivo/issues/2634
+    return ((0, jsx_runtime_1.jsx)("div", { style: style, children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { children: (0, jsx_runtime_1.jsx)(ResponsiveChoropleth, { data: data, margin: { top: 0, right: 0, bottom: 0, left: 0 }, colors: "blues", domain: [0, 1000000], unknownColor: "transparent", label: "properties.name", valueFormat: ".2s", projectionTranslation: [0.5, 0.6], projectionRotation: [0, 0, 0], enableGraticule: true, graticuleLineColor: "#dddddd", borderWidth: 0.1, borderColor: "#152538", features: world_countries_json_1.default.features, 
+                // projectionType={"mercator"}
+                projectionType: "equirectangular", projectionScale: 100, fillColor: "transparent", graticuleLineWidth: 0, isInteractive: true, onMouseEnter: lodash_es_1.noop, onMouseMove: lodash_es_1.noop, onMouseLeave: lodash_es_1.noop, onClick: lodash_es_1.noop, role: "", match: "id", value: "value", 
+                // @ts-ignore
+                layers: ["graticule", "features"] }) }) }));
+};
+const MapMd = (0, ComponentDefs_1.createMetadata)({
+    description: "(*** OBSOLETE ***) A simple map component",
+    props: {
+        data: (0, ComponentDefs_1.d)("The data to be displayed in the map"),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(PieChart_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        light: {
+        ///
+        },
+        dark: {
+        ///
+        },
+    },
+});
+exports.mapComponentRenderer = (0, renderers_1.createComponentRenderer)("Map", MapMd, ({ extractValue, node, layoutCss }) => {
+    var _a;
+    return (0, jsx_runtime_1.jsx)(Map, { data: extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.data), style: layoutCss });
+});