xmlui 0.4.0

package/dist/scripts/src/components/Input/input-abstractions.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.inputComponentEventDescriptors = exports.inputComponentPropertyDescriptors = exports.inputViewPropertyDescriptors = void 0;
+const descriptorHelper_1 = require("@components-core/descriptorHelper");
+// Use these property descriptor in concrete input view component metadata
+exports.inputViewPropertyDescriptors = {
+    placeholder: (0, descriptorHelper_1.desc)("Placeholder text to sign the input is empty"),
+    initialValue: (0, descriptorHelper_1.desc)("The initial value to display"),
+    maxLength: (0, descriptorHelper_1.desc)("The maximum length of the input text"),
+    autoFocus: (0, descriptorHelper_1.desc)("Should the component be automatically focused?"),
+    helperText: (0, descriptorHelper_1.desc)("Helper text to display with the component"),
+    required: (0, descriptorHelper_1.desc)("Is the component value required (use for indication)?"),
+    label: (0, descriptorHelper_1.desc)("Optional label to display"),
+    readOnly: (0, descriptorHelper_1.desc)("Is the component read-only?"),
+    allowCopy: (0, descriptorHelper_1.desc)("Allow copying the component value to the clipboard?"),
+    validators: (0, descriptorHelper_1.desc)("Optional list of validators to check the component's value"),
+    enabled: (0, descriptorHelper_1.desc)("Is the component enabled?"),
+    hideHelperText: (0, descriptorHelper_1.desc)("Indicate that the component should hide its helper text"),
+    status: (0, descriptorHelper_1.desc)("The validation status of the component"),
+};
+// --- Use these property descriptor in concrete input view component metadata
+exports.inputComponentPropertyDescriptors = {
+    placeholder: (0, descriptorHelper_1.desc)("Placeholder text to sign the input is empty"),
+    value: (0, descriptorHelper_1.desc)("The current value to display"),
+    initialValue: (0, descriptorHelper_1.desc)("The initial value to display"),
+    labelId: (0, descriptorHelper_1.desc)("ID of the label attached to this input"),
+    maxLength: (0, descriptorHelper_1.desc)("The maximum length of the input text"),
+    autoFocus: (0, descriptorHelper_1.desc)("Should the component be automatically focused?"),
+    required: (0, descriptorHelper_1.desc)("Is the component value required (use for indication)?"),
+    readOnly: (0, descriptorHelper_1.desc)("Is the component read-only?"),
+    allowCopy: (0, descriptorHelper_1.desc)("Allow copying the component value to the clipboard?"),
+    enabled: (0, descriptorHelper_1.desc)("Is the component enabled?"),
+    validationStatus: (0, descriptorHelper_1.desc)("The validation status of the component"),
+    // --- Adornment props
+    startText: (0, descriptorHelper_1.desc)("Text rendered at the start of the input"),
+    startIcon: (0, descriptorHelper_1.desc)("Icon rendered at the start of the input"),
+    endText: (0, descriptorHelper_1.desc)("Text rendered at the end of the input"),
+    endIcon: (0, descriptorHelper_1.desc)("Icon rendered at the end of the input"),
+};
+exports.inputComponentEventDescriptors = {
+    change: (0, descriptorHelper_1.desc)("Triggered when the input value changes"),
+    gotFocus: (0, descriptorHelper_1.desc)("Triggered when the input gains focus"),
+    lostFocus: (0, descriptorHelper_1.desc)("triggered when the input has lost focus"),
+};

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

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.itemsComponentRenderer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const container_helpers_1 = require("../container-helpers");
+const lodash_es_1 = require("lodash-es");
+const renderers_1 = require("@components-core/renderers");
+// =====================================================================================================================
+// React Items component implementation
+function Items({ items, renderItem, reverse = false, }) {
+    const itemsToRender = (0, react_1.useMemo)(() => {
+        if (!items) {
+            return [];
+        }
+        let normalizedItems = items;
+        if ((0, lodash_es_1.isPlainObject)(items)) {
+            normalizedItems = Object.values(items);
+        }
+        return reverse ? [...normalizedItems].reverse() : normalizedItems;
+    }, [items, reverse]);
+    if (!itemsToRender) {
+        return null;
+    }
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: itemsToRender.map((item, index) => renderItem({
+            $item: item,
+            $itemIndex: index,
+            $isFirst: index === 0,
+            $isLast: index === itemsToRender.length - 1
+        }, index)) });
+}
+const metadata = {
+    displayName: "Items",
+    description: "A component displaying a list of items",
+    props: {
+        itemTemplate: {
+            description: "The component template to display a single item",
+            valueType: "ComponentDef",
+        },
+    },
+    opaque: true,
+};
+exports.itemsComponentRenderer = (0, renderers_1.createComponentRenderer)("Items", (rendererContext) => {
+    const { node, renderChild, extractValue, layoutContext } = rendererContext;
+    return ((0, jsx_runtime_1.jsx)(Items, { items: extractValue(node.props.items) || extractValue(node.props.data), reverse: extractValue(node.props.reverse), renderItem: (contextVars, key) => {
+            return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { contextVars: contextVars, node: node.children || node.props.itemTemplate, renderChild: renderChild, layoutContext: layoutContext }, key));
+        } }));
+}, metadata);

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

@@ -0,0 +1,72 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.localLinkComponentRenderer = exports.LocalLink = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@remix-run/react");
+const react_2 = require("react");
+const Link_module_scss_1 = __importDefault(require("./Link.module.scss"));
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const Icon_1 = require("@components/Icon/Icon");
+const renderers_1 = require("@components-core/renderers");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const descriptorHelper_1 = require("@components-core/descriptorHelper");
+const component_utils_1 = require("@components/component-utils");
+const LocalLink = ({ to, children, icon, active, onClick, target, disabled, style }) => {
+    const iconLink = !!icon && !children;
+    const smartTo = (0, react_2.useMemo)(() => {
+        return (0, component_utils_1.createUrlWithQueryParams)(to);
+    }, [to]);
+    const Node = !to ? "div" : react_1.Link;
+    return ((0, jsx_runtime_1.jsxs)(Node, { to: smartTo, style: style, target: target, onClick: onClick, className: (0, classnames_1.default)(Link_module_scss_1.default.container, {
+            [Link_module_scss_1.default.iconLink]: iconLink,
+            [Link_module_scss_1.default.active]: active,
+            [Link_module_scss_1.default.disabled]: disabled,
+        }), children: [icon && ((0, jsx_runtime_1.jsx)("div", { className: Link_module_scss_1.default.iconWrapper, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: icon }) })), (0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)(Link_module_scss_1.default.inner, Link_module_scss_1.default.actions), children: children })] }));
+};
+exports.LocalLink = LocalLink;
+const metadata = {
+    displayName: "Link",
+    description: "Represents a local link the user can use to navigate within the application",
+    props: {
+        to: (0, descriptorHelper_1.desc)("The target URL"),
+        enabled: (0, descriptorHelper_1.desc)("Is the link enabled?"),
+        active: (0, descriptorHelper_1.desc)("Indicates if the link is active"),
+        target: (0, descriptorHelper_1.desc)("the target type of the link: '_self', '_blank', '_parent', '_top'"),
+        label: (0, descriptorHelper_1.desc)("Optional text label for the component, indicates hover and active states"),
+        icon: (0, descriptorHelper_1.desc)("Optional icon for the component, indicates hover and active states"),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(Link_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        "color-text-Link--hover--active": "$color-text-Link--active",
+        "color-text-decoration-Link--hover": "$color-surface-400A80",
+        "color-text-decoration-Link--active": "$color-surface200",
+        "font-weight-Link--active": "$font-weight-bold",
+        "color-decoration-Link": "$color-surface-400",
+        "offset-decoration-Link": "$space-1",
+        "line-decoration-Link": "underline",
+        "style-decoration-Link": "dashed",
+        "thickness-decoration-Link": "$space-0_5",
+        "color-outline-Link--focus": "$color-outline--focus",
+        "thickness-outline-Link--focus": "$thickness-outline--focus",
+        "style-outline-Link--focus": "$style-outline--focus",
+        "offset-outline-Link--focus": "$offset-outline--focus",
+        light: {
+            "color-text-Link": "$color-surface-950",
+            "color-text-Link--active": "$color-primary-700",
+        },
+        dark: {
+            "color-text-Link": "$color-surface-50",
+            "color-text-Link--active": "$color-primary-300",
+        },
+    },
+};
+/**
+ * This function define the renderer for the Limk component.
+ */
+exports.localLinkComponentRenderer = (0, renderers_1.createComponentRenderer)("Link", ({ node, extractValue, lookupEventHandler, renderChild, layoutCss }) => {
+    var _a, _b;
+    return ((0, jsx_runtime_1.jsx)(exports.LocalLink, { to: extractValue(node.props.to), icon: extractValue(node.props.icon), active: extractValue.asOptionalBoolean(node.props.active, false), target: extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.target), style: layoutCss, disabled: !extractValue.asOptionalBoolean((_b = node.props.enabled) !== null && _b !== void 0 ? _b : true), children: node.props.label ? extractValue.asDisplayText(node.props.label) : renderChild(node.children) }));
+}, metadata);

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

@@ -0,0 +1,442 @@
+"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 __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.dynamicHeightListComponentRenderer = exports.metadata = void 0;
+exports.useListData = useListData;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = __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 container_helpers_1 = require("@components/container-helpers");
+const renderers_1 = require("@components-core/renderers");
+const constants_1 = require("@components-core/constants");
+const ScrollContext_1 = require("@components-core/ScrollContext");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const descriptorHelper_1 = require("@components-core/descriptorHelper");
+const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
+const Card_1 = require("@components/Card/Card");
+const Text_1 = require("@components/Text/Text");
+const Spinner_1 = require("@components/Spinner/Spinner");
+const hooks_1 = require("@components-core/utils/hooks");
+const ListContext = react_2.default.createContext({
+    isExpanded: (id) => false,
+    toggleExpanded: (id, isExpanded) => { },
+});
+const Item = ({ children, onHeightChanged, rowIndex, itemType }) => {
+    const ref = (0, react_2.useRef)(null);
+    (0, hooks_1.useResizeObserver)(ref, (0, react_2.useCallback)((entries) => {
+        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;
+        }, "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({ sectionsInitiallyExpanded = true, expanded = constants_1.EMPTY_OBJECT, items, limit, sectionBy, orderBy, availableSections, defaultSections = constants_1.EMPTY_ARRAY, }) {
+    const sortedItems = (0, react_2.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_2.useMemo)(() => {
+        if (!limit) {
+            return sortedItems;
+        }
+        return sortedItems.slice(0, limit - 1);
+    }, [sortedItems, limit]);
+    const sectionedItems = (0, react_2.useMemo)(() => {
+        if (sectionBy === undefined) {
+            return constants_1.EMPTY_OBJECT;
+        }
+        return (0, lodash_es_1.groupBy)(cappedItems, (item) => item[sectionBy]);
+    }, [cappedItems, sectionBy]);
+    const sections = (0, react_2.useMemo)(() => {
+        if (sectionBy === undefined) {
+            return constants_1.EMPTY_ARRAY;
+        }
+        let foundSectionKeys = (0, lodash_es_1.uniq)([...defaultSections, ...Object.keys(sectionedItems)]);
+        if (availableSections) {
+            foundSectionKeys = (0, lodash_es_1.sortBy)(foundSectionKeys, (item) => {
+                return availableSections.indexOf(item);
+            });
+        }
+        return foundSectionKeys;
+    }, [sectionBy, sectionedItems, defaultSections, availableSections]);
+    const rows = (0, react_2.useMemo)(() => {
+        if (sectionBy === undefined) {
+            return cappedItems;
+        }
+        const ret = [];
+        sections.forEach((section) => {
+            ret.push({
+                id: section,
+                sectionItems: sectionedItems[section],
+                _row_type: RowType.SECTION,
+                sectionKey: section,
+            });
+            if (expanded[section] || (expanded[section] === undefined && sectionsInitiallyExpanded)) {
+                ret.push(...(sectionedItems[section] || []));
+                ret.push({
+                    id: `${section}_footer`,
+                    sectionItems: sectionedItems[section],
+                    _row_type: RowType.SECTION_FOOTER,
+                    sectionKey: section,
+                });
+            }
+        });
+        return ret;
+    }, [sectionBy, sections, cappedItems, expanded, sectionsInitiallyExpanded, 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)(Card_1.Card, { title: title, subTitle: subTitle });
+};
+const DynamicHeightList = (0, react_2.forwardRef)(function DynamicHeightList({ items = constants_1.EMPTY_ARRAY, itemRenderer = defaultItemRenderer, sectionRenderer, sectionFooterRenderer, loading, limit, sectionBy, orderBy, availableSections, scrollAnchor = "top", requestFetchPrevPage = lodash_es_1.noop, selectedIndex, resetSelectedIndex = lodash_es_1.noop, pageInfo, idKey = "id", layout, emptyListPlaceholder, scrollPaddingStart = 0, scrollPaddingEnd = 0, sectionsInitiallyExpanded = true, defaultSections = constants_1.EMPTY_ARRAY, }, ref) {
+    var _a;
+    // The scrollable element for your list
+    const scrollRef = (0, react_2.useContext)(ScrollContext_1.ScrollContext);
+    const parentRef = (0, react_2.useRef)(null);
+    const rootRef = ref ? (0, react_compose_refs_1.composeRefs)(parentRef, ref) : parentRef;
+    const rowsContainerRef = (0, react_2.useRef)(null);
+    const [suspendInfiniteLoad, setSuspendInfiniteLoad] = (0, react_2.useState)(true);
+    const [expanded, setExpanded] = (0, react_2.useState)({});
+    const toggleExpanded = (0, react_2.useCallback)((id, isExpanded) => {
+        setExpanded((prev) => (Object.assign(Object.assign({}, prev), { [id]: isExpanded })));
+    }, []);
+    const expandContextValue = (0, react_2.useMemo)(() => {
+        return {
+            isExpanded: (id) => expanded[id] || (expanded[id] === undefined && sectionsInitiallyExpanded),
+            toggleExpanded,
+        };
+    }, [expanded, sectionsInitiallyExpanded, toggleExpanded]);
+    const { rows } = useListData({
+        sectionsInitiallyExpanded,
+        defaultSections,
+        expanded,
+        items,
+        limit,
+        sectionBy,
+        orderBy,
+        availableSections,
+    });
+    const hasOutsideScroll = scrollRef && (layout === null || layout === void 0 ? void 0 : layout.maxHeight) === undefined && (layout === null || layout === void 0 ? void 0 : layout.height) === undefined && (layout === null || layout === void 0 ? void 0 : layout.flex) === undefined;
+    const scrollElementRef = hasOutsideScroll ? scrollRef : parentRef;
+    const overscan = 5;
+    const myObserveElementOffset = (0, react_2.useCallback)((instance, cb) => {
+        return (0, react_virtual_1.observeElementOffset)(instance, (offset, isScrolling) => {
+            var _a;
+            //based on this: https://github.com/TanStack/virtual/issues/387
+            const parentContainerOffset = !hasOutsideScroll ? 0 : ((_a = parentRef.current) === null || _a === void 0 ? void 0 : _a.offsetTop) || 0;
+            cb(offset - parentContainerOffset, isScrolling);
+        });
+    }, [hasOutsideScroll]);
+    const rowVirtualizer = (0, react_virtual_1.useVirtualizer)({
+        count: rows.length,
+        // paddingStart: scrollPaddingStart,
+        // paddingEnd: scrollPaddingEnd,
+        observeElementOffset: myObserveElementOffset,
+        getScrollElement: (0, react_2.useCallback)(() => {
+            return scrollElementRef.current;
+        }, [scrollElementRef]),
+        estimateSize: (0, react_2.useCallback)(() => {
+            return 30;
+        }, []),
+        rangeExtractor: (0, react_2.useCallback)((range) => {
+            return (0, react_virtual_1.defaultRangeExtractor)(range);
+        }, []),
+        getItemKey: (0, react_2.useCallback)((index) => {
+            var _a;
+            return (_a = rows[index][idKey]) !== null && _a !== void 0 ? _a : index;
+        }, [idKey, rows]),
+        overscan: overscan,
+    });
+    // useSyncListViewState({
+    //   offsetTop: offsetTopRef.current,
+    //   rowVirtualizer: rowVirtualizer,
+    //   estimateRowSize,
+    //   estimatedRowSize: estimatedRowSizeRef.current,
+    //   uid,
+    //   scrollElementRef,
+    //   trackViewState,
+    //   setExpanded,
+    //   expanded,
+    // });
+    const prevRows = (0, hooks_1.usePrevious)(rows);
+    const tryToScrollToIndex = (0, react_2.useCallback)((index, onFinished) => {
+        rowVirtualizer.scrollToIndex(index);
+        requestAnimationFrame(() => {
+            onFinished === null || onFinished === void 0 ? void 0 : onFinished();
+        });
+        // requestAnimationFrame(() => {
+        //   requestAnimationFrame(() => {
+        //     const {startIndex, endIndex} = visibleRangeRef.current;
+        //     const isVisible = index >= startIndex && index <= endIndex;
+        //
+        //     if (!isVisible) {
+        //       tryToScrollToIndex(index, onFinished);
+        //     } else {
+        //       onFinished?.();
+        //     }
+        //   });
+        // });
+    }, [rowVirtualizer]);
+    (0, react_2.useEffect)(() => {
+        if (scrollAnchor === "bottom") {
+            if (rows.length &&
+                (!prevRows || !prevRows.length || rows[rows.length - 1][idKey] !== prevRows[prevRows.length - 1][idKey])) {
+                setSuspendInfiniteLoad(true);
+                // console.log("TRying to scroll to index");
+                tryToScrollToIndex(rows.length - 1, () => {
+                    setSuspendInfiniteLoad(false);
+                });
+            }
+        }
+    }, [idKey, prevRows, rows, scrollAnchor, tryToScrollToIndex]);
+    const virtualItems = rowVirtualizer.getVirtualItems();
+    const totalSize = rowVirtualizer.getTotalSize();
+    (0, react_2.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];
+    (0, react_1.useLayoutEffect)(() => {
+        if (prevTotalSize && prevTotalSize !== totalSize && scrollAnchor === "bottom" && (firstRenderedItem === null || firstRenderedItem === void 0 ? void 0 : firstRenderedItem.index) === 0) {
+            const delta2 = totalSize - prevTotalSize;
+            // console.log("restore scroll pos", {
+            //   prevTotalSize: prevTotalSize,
+            //   totalSize: totalSize,
+            //   scrollTop: scrollElementRef.current.scrollTop,
+            //   delta: delta2,
+            //   newScrollTop: scrollElementRef.current.scrollTop + delta2,
+            // });
+            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_2.useRef)(null);
+    (0, react_2.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]);
+    return ((0, jsx_runtime_1.jsx)(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%" }, layout), children: [loading && virtualItems.length === 0 && ((0, jsx_runtime_1.jsx)("div", { className: List_module_scss_1.default.loadingWrapper, children: (0, jsx_runtime_1.jsx)(Spinner_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)(Text_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, style: {
+                            position: "absolute",
+                            top: 0,
+                            left: 0,
+                            width: "100%",
+                            transform: `translateY(${(_a = firstRenderedItem === null || firstRenderedItem === void 0 ? void 0 : firstRenderedItem.start) !== null && _a !== void 0 ? _a : 0}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));
+                        }) }) }))] }) }));
+});
+exports.metadata = {
+    displayName: "List",
+    description: "A virtualized list component",
+    props: {
+        items: (0, descriptorHelper_1.desc)("The items to display in the list"),
+        loading: (0, descriptorHelper_1.desc)("Is the list being loaded?"),
+        limit: (0, descriptorHelper_1.desc)("The maximum number of items to display"),
+        scrollAnchor: (0, descriptorHelper_1.desc)("Anchor point of the scroll (top, bottom)"),
+        sectionBy: (0, descriptorHelper_1.desc)("the name of the data field to create sections within the list"),
+        orderBy: (0, descriptorHelper_1.desc)("The name of the data field the items are ordered by"),
+        availableSections: (0, descriptorHelper_1.desc)("List of available sections"),
+        sectionTemplate: {
+            description: "Component template for a section header",
+            valueType: "ComponentDef",
+        },
+        sectionFooterTemplate: {
+            description: "Component template for a section footer",
+            valueType: "ComponentDef",
+        },
+        itemTemplate: {
+            description: "Component template for a list item",
+            valueType: "ComponentDef",
+        },
+        emptyListTemplate: {
+            description: "Component template representing an empty list item",
+            valueType: "ComponentDef",
+        },
+        pageInfo: (0, descriptorHelper_1.desc)("Information about a particular page"),
+        idKey: (0, descriptorHelper_1.desc)("The field of data items to use as the identifier of the item."),
+        selectedIndex: (0, descriptorHelper_1.desc)("The index of the list item selected by default"),
+        scrollPaddingStart: (0, descriptorHelper_1.desc)("padding to use at the start of the scrolling area"),
+        scrollPaddingEnd: (0, descriptorHelper_1.desc)("padding to use at the end of the scrolling area"),
+        sectionsInitiallyExpanded: (0, descriptorHelper_1.desc)("Indicates if table sections should be initially expanded"),
+        defaultSections: (0, descriptorHelper_1.desc)("Use these sections as the default ones"),
+    },
+    events: {
+        resetSelectedIndex: (0, descriptorHelper_1.desc)("Triggered when the selected index is reset"),
+        requestFetchNextPage: (0, descriptorHelper_1.desc)("Triggered when the component asks for the previous page's data"),
+        requestFetchPrevPage: (0, descriptorHelper_1.desc)("Triggered when the component asks for the next page's data"),
+        itemsLoaded: (0, descriptorHelper_1.desc)("Triggered when the items have been loaded"),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(List_module_scss_1.default.themeVars),
+};
+// --- Helper function for List item rendering
+function MemoizedSection({ node, renderChild, item }) {
+    const { isExpanded, toggleExpanded } = (0, react_2.useContext)(ListContext);
+    const id = item.id;
+    const expanded = isExpanded(id);
+    const sectionContext = (0, react_2.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 });
+}
+exports.dynamicHeightListComponentRenderer = (0, renderers_1.createComponentRenderer)("List", ({ node, extractValue, renderChild, lookupAction, layoutCss, layoutContext, lookupEventHandler }) => {
+    var _a;
+    return ((0, jsx_runtime_1.jsx)(DynamicHeightList, { layout: layoutCss, loading: extractValue.asOptionalBoolean(node.props.loading), items: extractValue(node.props.items) || extractValue(node.props.data), limit: extractValue(node.props.limit), sectionBy: extractValue(node.props.sectionBy), orderBy: extractValue(node.props.orderBy), availableSections: extractValue(node.props.availableSections), scrollAnchor: node.props.scrollAnchor, pageInfo: extractValue(node.props.pageInfo), idKey: extractValue(node.props.idKey), requestFetchPrevPage: lookupEventHandler("requestFetchPrevPage"), selectedIndex: extractValue(node.props.selectedIndex), resetSelectedIndex: lookupAction((_a = node.events) === null || _a === void 0 ? void 0 : _a.resetSelectedIndex), emptyListPlaceholder: renderChild(node.props.emptyListTemplate), scrollPaddingStart: extractValue.asOptionalNumber(node.props.scrollPaddingStart), scrollPaddingEnd: extractValue.asOptionalNumber(node.props.scrollPaddingEnd), sectionsInitiallyExpanded: extractValue.asOptionalBoolean(node.props.sectionsInitiallyExpanded), defaultSections: extractValue(node.props.defaultSections), itemRenderer: node.props.itemTemplate &&
+            ((item) => {
+                return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.props.itemTemplate, item: item, renderChild: renderChild, layoutContext: layoutContext }));
+            }), sectionRenderer: node.props.sectionBy
+            ? (item) => {
+                var _a;
+                return ((0, jsx_runtime_1.jsx)(MemoizedSection, { node: (_a = node.props.sectionTemplate) !== null && _a !== void 0 ? _a : { type: "Fragment" }, renderChild: renderChild, item: item }));
+            }
+            : undefined, sectionFooterRenderer: node.props.sectionFooterTemplate
+            ? (item) => {
+                var _a;
+                return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: (_a = node.props.sectionFooterTemplate) !== null && _a !== void 0 ? _a : { type: "Fragment" }, item: item, renderChild: renderChild }));
+            }
+            : undefined }));
+}, exports.metadata);

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

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.logoComponentRenderer = exports.Logo = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const NavLink_1 = require("@components/NavLink/NavLink");
+const Image_1 = require("@components/Image/Image");
+const renderers_1 = require("@components-core/renderers");
+const AppHeader_1 = require("@components/AppHeader/AppHeader");
+// =====================================================================================================================
+// React Logo component implementation
+const Logo = ({ inDrawer, style, title }) => {
+    const logoUrl = (0, AppHeader_1.useLogoUrl)(inDrawer);
+    if (!logoUrl) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)(NavLink_1.NavLink, { to: "/", displayActive: false, style: Object.assign({ padding: 0, height: "100%", fontWeight: '500' }, style), children: [(0, jsx_runtime_1.jsx)(Image_1.Image, { src: logoUrl, alt: "Logo" }), " ", title] }));
+};
+exports.Logo = Logo;
+const metadata = {
+    displayName: "Logo",
+    description: "Displays the application logo",
+};
+exports.logoComponentRenderer = (0, renderers_1.createComponentRenderer)("Logo", ({ node, layoutCss, extractValue }) => {
+    return (0, jsx_runtime_1.jsx)(exports.Logo, { style: layoutCss, title: extractValue(node.props.title) });
+}, metadata);