xmlui 0.7.21 → 0.7.22

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

@@ -5,10 +5,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.iconComponentRenderer = exports.IconMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const ComponentDefs_1 = require("@abstractions/ComponentDefs");
-const renderers_1 = require("@components-core/renderers");
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const renderers_1 = require("../../components-core/renderers");
 const Icon_module_scss_1 = __importDefault(require("./Icon.module.scss"));
-const themeVars_1 = require("@components-core/theming/themeVars");
+const themeVars_1 = require("../../components-core/theming/themeVars");
 const IconNative_1 = __importDefault(require("./IconNative"));
 const COMP = "Icon";
 exports.IconMd = (0, ComponentDefs_1.createMetadata)({

package/dist/scripts/src/components/Icon/IconNative.js

@@ -18,9 +18,9 @@ exports.Icon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Icon_module_scss_1 = __importDefault(require("./Icon.module.scss"));
-const IconRegistryContext_1 = require("@components/IconRegistryContext");
-const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
-const ThemeContext_1 = require("@components-core/theming/ThemeContext");
+const IconRegistryContext_1 = require("../IconRegistryContext");
+const classnames_1 = __importDefault(require("classnames"));
+const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
 const StyleParser_1 = require("../../parsers/style-parser/StyleParser");
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 exports.Icon = (0, react_1.forwardRef)(function Icon(_a, ref) {

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

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.iconInfoCardRenderer = exports.IconInfoCardMd = void 0;
-const ComponentDefs_1 = require("@abstractions/ComponentDefs");
-const compound_utils_1 = require("@components-core/utils/compound-utils");
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const compound_utils_1 = require("../../components-core/utils/compound-utils");
 // --- We cannot use this with nextra
 // import componentSource from "./IconInfoCard.xmlui?raw";
 const COMP = "IconInfoCard";
@@ -20,11 +20,12 @@ const componentSource = `
   <Card height="{$props.height}" width="{$props.width}">
     <HStack verticalAlignment="center">
       <CHStack 
-        backgroundColor="{$props.iconBackgroundColor}"
+        backgroundColor="{$props.iconBackgroundColor}" 
+        color="white"
         width="$space-10"
         height="$space-10"
         radius="$radius">
-        <Icon name="{$props.iconName}" size="$space-6" />
+        <Icon name="{$props.iconName}" size="$space-6"  />
       </CHStack>
       <VStack gap="0">
         <Slot />

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

@@ -12,7 +12,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.IconProvider = IconProvider;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const IconRegistryContext_1 = require("@components/IconRegistryContext");
 const fi_1 = require("react-icons/fi");
 const ai_1 = require("react-icons/ai");
 const bs_1 = require("react-icons/bs");
@@ -25,54 +24,55 @@ const rx_1 = require("react-icons/rx");
 const hi2_1 = require("react-icons/hi2");
 const tfi_1 = require("react-icons/tfi");
 const hi_1 = require("react-icons/hi");
-const ApiIcon_1 = require("@components/Icon/ApiIcon");
-const Attach_1 = require("@components/Icon/Attach");
-const Binding_1 = require("@components/Icon/Binding");
-const BoardIcon_1 = require("@components/Icon/BoardIcon");
-const BoxIcon_1 = require("@components/Icon/BoxIcon");
-const CheckIcon_1 = require("@components/Icon/CheckIcon");
-const ChevronLeft_1 = require("@components/Icon/ChevronLeft");
-const ChevronRight_1 = require("@components/Icon/ChevronRight");
-const CodeFileIcon_1 = require("@components/Icon/CodeFileIcon");
-const CodeSandbox_1 = require("@components/Icon/CodeSandbox");
-const CompactListIcon_1 = require("@components/Icon/CompactListIcon");
-const ContentCopyIcon_1 = require("@components/Icon/ContentCopyIcon");
-const DatabaseIcon_1 = require("@components/Icon/DatabaseIcon");
-const DocFileIcon_1 = require("@components/Icon/DocFileIcon");
-const DocIcon_1 = require("@components/Icon/DocIcon");
-const DotMenuHorizontalIcon_1 = require("@components/Icon/DotMenuHorizontalIcon");
-const DotMenuIcon_1 = require("@components/Icon/DotMenuIcon");
-const EmailIcon_1 = require("@components/Icon/EmailIcon");
-const EmptyFolderIcon_1 = require("@components/Icon/EmptyFolderIcon");
-const ExpressionIcon_1 = require("@components/Icon/ExpressionIcon");
-const FillPlusCricleIcon_1 = require("@components/Icon/FillPlusCricleIcon");
-const FilterIcon_1 = require("@components/Icon/FilterIcon");
-const FolderIcon_1 = require("@components/Icon/FolderIcon");
-const GlobeIcon_1 = require("@components/Icon/GlobeIcon");
-const HomeIcon_1 = require("@components/Icon/HomeIcon");
-const HyperLinkIcon_1 = require("@components/Icon/HyperLinkIcon");
-const ImageFileIcon_1 = require("@components/Icon/ImageFileIcon");
-const LinkIcon_1 = require("@components/Icon/LinkIcon");
-const ListIcon_1 = require("@components/Icon/ListIcon");
-const LooseListIcon_1 = require("@components/Icon/LooseListIcon");
-const MoonIcon_1 = require("@components/Icon/MoonIcon");
-const MoreOptionsIcon_1 = require("@components/Icon/MoreOptionsIcon");
-const PDFIcon_1 = require("@components/Icon/PDFIcon");
-const PenIcon_1 = require("@components/Icon/PenIcon");
-const PhoneIcon_1 = require("@components/Icon/PhoneIcon");
-const PhotoIcon_1 = require("@components/Icon/PhotoIcon");
-const PlusIcon_1 = require("@components/Icon/PlusIcon");
-const SearchIcon_1 = require("@components/Icon/SearchIcon");
-const ShareIcon_1 = require("@components/Icon/ShareIcon");
-const SunIcon_1 = require("@components/Icon/SunIcon");
-const TrashIcon_1 = require("@components/Icon/TrashIcon");
-const TxtIcon_1 = require("@components/Icon/TxtIcon");
-const UnknownFileIcon_1 = require("@components/Icon/UnknownFileIcon");
-const UnlinkIcon_1 = require("@components/Icon/UnlinkIcon");
-const UserIcon_1 = require("@components/Icon/UserIcon");
-const WarningIcon_1 = require("@components/Icon/WarningIcon");
-const XlsIcon_1 = require("@components/Icon/XlsIcon");
-const ErrorIcon_1 = require("@components/Icon/ErrorIcon");
+const IconRegistryContext_1 = require("./IconRegistryContext");
+const ApiIcon_1 = require("./Icon/ApiIcon");
+const Attach_1 = require("./Icon/Attach");
+const Binding_1 = require("./Icon/Binding");
+const BoardIcon_1 = require("./Icon/BoardIcon");
+const BoxIcon_1 = require("./Icon/BoxIcon");
+const CheckIcon_1 = require("./Icon/CheckIcon");
+const ChevronLeft_1 = require("./Icon/ChevronLeft");
+const ChevronRight_1 = require("./Icon/ChevronRight");
+const CodeFileIcon_1 = require("./Icon/CodeFileIcon");
+const CodeSandbox_1 = require("./Icon/CodeSandbox");
+const CompactListIcon_1 = require("./Icon/CompactListIcon");
+const ContentCopyIcon_1 = require("./Icon/ContentCopyIcon");
+const DatabaseIcon_1 = require("./Icon/DatabaseIcon");
+const DocFileIcon_1 = require("./Icon/DocFileIcon");
+const DocIcon_1 = require("./Icon/DocIcon");
+const DotMenuHorizontalIcon_1 = require("./Icon/DotMenuHorizontalIcon");
+const DotMenuIcon_1 = require("./Icon/DotMenuIcon");
+const EmailIcon_1 = require("./Icon/EmailIcon");
+const EmptyFolderIcon_1 = require("./Icon/EmptyFolderIcon");
+const ExpressionIcon_1 = require("./Icon/ExpressionIcon");
+const FillPlusCricleIcon_1 = require("./Icon/FillPlusCricleIcon");
+const FilterIcon_1 = require("./Icon/FilterIcon");
+const FolderIcon_1 = require("./Icon/FolderIcon");
+const GlobeIcon_1 = require("./Icon/GlobeIcon");
+const HomeIcon_1 = require("./Icon/HomeIcon");
+const HyperLinkIcon_1 = require("./Icon/HyperLinkIcon");
+const ImageFileIcon_1 = require("./Icon/ImageFileIcon");
+const LinkIcon_1 = require("./Icon/LinkIcon");
+const ListIcon_1 = require("./Icon/ListIcon");
+const LooseListIcon_1 = require("./Icon/LooseListIcon");
+const MoonIcon_1 = require("./Icon/MoonIcon");
+const MoreOptionsIcon_1 = require("./Icon/MoreOptionsIcon");
+const PDFIcon_1 = require("./Icon/PDFIcon");
+const PenIcon_1 = require("./Icon/PenIcon");
+const PhoneIcon_1 = require("./Icon/PhoneIcon");
+const PhotoIcon_1 = require("./Icon/PhotoIcon");
+const PlusIcon_1 = require("./Icon/PlusIcon");
+const SearchIcon_1 = require("./Icon/SearchIcon");
+const ShareIcon_1 = require("./Icon/ShareIcon");
+const SunIcon_1 = require("./Icon/SunIcon");
+const TrashIcon_1 = require("./Icon/TrashIcon");
+const TxtIcon_1 = require("./Icon/TxtIcon");
+const UnknownFileIcon_1 = require("./Icon/UnknownFileIcon");
+const UnlinkIcon_1 = require("./Icon/UnlinkIcon");
+const UserIcon_1 = require("./Icon/UserIcon");
+const WarningIcon_1 = require("./Icon/WarningIcon");
+const XlsIcon_1 = require("./Icon/XlsIcon");
+const ErrorIcon_1 = require("./Icon/ErrorIcon");
 const TrendingUpIcon_1 = require("./Icon/TrendingUpIcon");
 const TrendingDownIcon_1 = require("./Icon/TrendingDownIcon");
 const SortAscendingIcon_1 = require("./Icon/SortAscendingIcon");

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

@@ -5,12 +5,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.imageComponentRenderer = exports.ImageMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const ComponentDefs_1 = require("@abstractions/ComponentDefs");
-const renderers_1 = require("@components-core/renderers");
 const Image_module_scss_1 = __importDefault(require("./Image.module.scss"));
-const themeVars_1 = require("@components-core/theming/themeVars");
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const themeVars_1 = require("../../components-core/theming/themeVars");
+const renderers_1 = require("../../components-core/renderers");
+const metadata_helpers_1 = require("../metadata-helpers");
 const ImageNative_1 = require("./ImageNative");
-const metadata_helpers_1 = require("@components/metadata-helpers");
 const COMP = "Image";
 exports.ImageMd = (0, ComponentDefs_1.createMetadata)({
     description: `The \`${COMP}\` component represents or depicts an object, scene, idea, or other concept ` +

package/dist/scripts/src/components/Image/ImageNative.js

@@ -5,9 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Image = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const Image_module_scss_1 = __importDefault(require("./Image.module.scss"));
 const react_1 = require("react");
-const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const classnames_1 = __importDefault(require("classnames"));
+const Image_module_scss_1 = __importDefault(require("./Image.module.scss"));
 exports.Image = (0, react_1.forwardRef)(function Img({ src, alt, fit = "contain", style, onClick, aspectRatio, lazyLoad }, ref) {
     return ((0, jsx_runtime_1.jsx)("img", { src: src, ref: ref, alt: alt, loading: lazyLoad ? "lazy" : "eager", className: (0, classnames_1.default)(Image_module_scss_1.default.img, {
             [Image_module_scss_1.default.clickable]: !!onClick,

package/dist/scripts/src/components/Input/InputAdornment.js

@@ -5,10 +5,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Adornment = Adornment;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const IconNative_1 = require("@components/Icon/IconNative");
-const TextNative_1 = require("../Text/TextNative");
+const classnames_1 = __importDefault(require("classnames"));
 const InputAdornment_module_scss_1 = __importDefault(require("./InputAdornment.module.scss"));
-const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const IconNative_1 = require("../Icon/IconNative");
+const TextNative_1 = require("../Text/TextNative");
 function Adornment({ iconName, text, className }) {
     return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: iconName || text ? ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(InputAdornment_module_scss_1.default.wrapper, className), children: [(0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: iconName, style: { color: "inherit" } }), text && ((0, jsx_runtime_1.jsx)("div", { style: { display: "flex", userSelect: "none" }, children: (0, jsx_runtime_1.jsx)(TextNative_1.Text, { style: { fontSize: "inherit" }, children: text }) }))] })) : null }));
 }

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

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.itemsComponentRenderer = exports.ItemsMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const renderers_1 = require("../../components-core/renderers");
 const container_helpers_1 = require("../container-helpers");
-const ComponentDefs_1 = require("@abstractions/ComponentDefs");
-const renderers_1 = require("@components-core/renderers");
+const metadata_helpers_1 = require("../metadata-helpers");
 const ItemsNative_1 = require("./ItemsNative");
-const metadata_helpers_1 = require("@components/metadata-helpers");
 const COMP = "Items";
 exports.ItemsMd = (0, ComponentDefs_1.createMetadata)({
     description: `The \`${COMP}\` component maps sequential data items into component instances, representing ` +

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

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.localLinkComponentRenderer = exports.LinkMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Link_module_scss_1 = __importDefault(require("./Link.module.scss"));
-const ComponentDefs_1 = require("@abstractions/ComponentDefs");
-const renderers_1 = require("@components-core/renderers");
-const themeVars_1 = require("@components-core/theming/themeVars");
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const renderers_1 = require("../../components-core/renderers");
+const themeVars_1 = require("../../components-core/theming/themeVars");
+const metadata_helpers_1 = require("../metadata-helpers");
+const abstractions_1 = require("../abstractions");
 const LinkNative_1 = require("./LinkNative");
-const metadata_helpers_1 = require("@components/metadata-helpers");
-const abstractions_1 = require("@components/abstractions");
 const COMP = "Link";
 exports.LinkMd = (0, ComponentDefs_1.createMetadata)({
     description: `A \`${COMP}\` component represents a navigation target within the app or a ` +
@@ -56,7 +56,7 @@ exports.LinkMd = (0, ComponentDefs_1.createMetadata)({
 /**
  * This function define the renderer for the Limk component.
  */
-exports.localLinkComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.LinkMd, ({ node, extractValue, lookupEventHandler, renderChild, layoutCss }) => {
+exports.localLinkComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.LinkMd, ({ node, extractValue, renderChild, layoutCss }) => {
     var _a, _b;
     return ((0, jsx_runtime_1.jsx)(LinkNative_1.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)

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

@@ -1,26 +1,44 @@
 "use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 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 react_3 = require("react");
+const react_1 = require("react");
+const react_2 = require("@remix-run/react");
+const classnames_1 = __importDefault(require("classnames"));
 const Link_module_scss_1 = __importDefault(require("./Link.module.scss"));
-const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
-const IconNative_1 = require("@components/Icon/IconNative");
-const component_utils_1 = require("@components/component-utils");
-exports.LocalLink = (0, react_2.forwardRef)(function LocalLink({ to, children, icon, active, onClick, target, disabled, style }, forwardedRef) {
+const component_utils_1 = require("../component-utils");
+const IconNative_1 = require("../Icon/IconNative");
+exports.LocalLink = (0, react_1.forwardRef)(function LocalLink(props, forwardedRef) {
+    const _a = specifyTypes(props), { to, children, icon, active, onClick, target, disabled, style } = _a, anchorProps = __rest(_a, ["to", "children", "icon", "active", "onClick", "target", "disabled", "style"]);
     const iconLink = !!icon && !children;
-    const smartTo = (0, react_3.useMemo)(() => {
+    const smartTo = (0, react_1.useMemo)(() => {
         return (0, component_utils_1.createUrlWithQueryParams)(to);
     }, [to]);
-    const Node = !to ? "div" : react_1.Link;
-    return ((0, jsx_runtime_1.jsxs)(Node, { ref: forwardedRef, to: smartTo, style: style, target: target, onClick: onClick, className: (0, classnames_1.default)(Link_module_scss_1.default.container, {
+    const Node = !to ? "div" : react_2.Link;
+    return ((0, jsx_runtime_1.jsxs)(Node, Object.assign({ ref: forwardedRef, 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)(IconNative_1.Icon, { name: icon }) })), children] }));
+        }) }, anchorProps, { children: [icon && ((0, jsx_runtime_1.jsx)("div", { className: Link_module_scss_1.default.iconWrapper, children: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: icon }) })), children] })));
 });
+/**
+ * Converts generic types to more specific ones.
+ */
+function specifyTypes(props) {
+    const { target, referrerPolicy } = props;
+    return Object.assign(Object.assign({}, props), { target: target, referrerPolicy: referrerPolicy });
+}

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

@@ -6,13 +6,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.dynamicHeightListComponentRenderer = exports.ListMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const List_module_scss_1 = __importDefault(require("./List.module.scss"));
-const container_helpers_1 = require("@components/container-helpers");
-const ComponentDefs_1 = require("@abstractions/ComponentDefs");
-const renderers_1 = require("@components-core/renderers");
-const themeVars_1 = require("@components-core/theming/themeVars");
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const renderers_1 = require("../../components-core/renderers");
+const themeVars_1 = require("../../components-core/theming/themeVars");
+const container_helpers_1 = require("../container-helpers");
+const metadata_helpers_1 = require("../metadata-helpers");
+const abstractions_1 = require("../abstractions");
 const ListNative_1 = require("./ListNative");
-const metadata_helpers_1 = require("@components/metadata-helpers");
-const abstractions_1 = require("@components/abstractions");
 const COMP = "List";
 exports.ListMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
@@ -46,7 +46,6 @@ exports.ListMd = (0, ComponentDefs_1.createMetadata)({
         pageInfo: (0, ComponentDefs_1.d)(`This property contains the current page information. Setting this property also enures the ` +
             `\`${COMP}\` uses pagination.`),
         idKey: (0, ComponentDefs_1.d)(`Denotes which attribute of an item acts as the ID or key of the item. Default is \`"id"\`.`),
-        selectedIndex: (0, ComponentDefs_1.d)(`This property scrolls to a specific item indicated by its index.`),
         groupsInitiallyExpanded: (0, ComponentDefs_1.d)(`This Boolean property defines whether the list groups are initially expanded.`),
         defaultGroups: (0, ComponentDefs_1.d)(`This property adds a list of default groups for the \`${COMP}\` and displays the group ` +
             `headers in the specified order. If the data contains group headers not in this list, ` +
@@ -60,22 +59,21 @@ exports.ListMd = (0, ComponentDefs_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(List_module_scss_1.default.themeVars),
 });
-exports.dynamicHeightListComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.ListMd, ({ node, extractValue, renderChild, lookupAction, layoutCss, layoutContext, lookupEventHandler, registerComponentApi, }) => {
-    var _a;
+exports.dynamicHeightListComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.ListMd, ({ node, extractValue, renderChild, layoutCss, layoutContext, lookupEventHandler, registerComponentApi, }) => {
     const itemTemplate = node.props.itemTemplate || node.children;
     const hideEmptyGroups = extractValue.asOptionalBoolean(node.props.hideEmptyGroups, true);
-    return ((0, jsx_runtime_1.jsx)(ListNative_1.DynamicHeightList, { registerComponentApi: registerComponentApi, style: layoutCss, loading: extractValue.asOptionalBoolean(node.props.loading), items: extractValue(node.props.items) || extractValue(node.props.data), limit: extractValue(node.props.limit), groupBy: extractValue(node.props.groupBy), orderBy: extractValue(node.props.orderBy), availableGroups: extractValue(node.props.availableGroups), scrollAnchor: node.props.scrollAnchor, pageInfo: extractValue(node.props.pageInfo), idKey: extractValue(node.props.idKey), requestFetchPrevPage: lookupEventHandler("requestFetchPrevPage"), requestFetchNextPage: lookupEventHandler("requestFetchNextPage"), selectedIndex: extractValue(node.props.selectedIndex), resetSelectedIndex: lookupAction((_a = node.events) === null || _a === void 0 ? void 0 : _a.resetSelectedIndex), emptyListPlaceholder: renderChild(node.props.emptyListTemplate), groupsInitiallyExpanded: extractValue.asOptionalBoolean(node.props.groupsInitiallyExpanded), defaultGroups: extractValue(node.props.defaultGroups), borderCollapse: extractValue.asOptionalBoolean(node.props.borderCollapse, true), itemRenderer: itemTemplate &&
-            ((item) => {
-                return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: itemTemplate, item: item, renderChild: renderChild, layoutContext: layoutContext }));
+    return ((0, jsx_runtime_1.jsx)(ListNative_1.ListNative, { registerComponentApi: registerComponentApi, style: layoutCss, loading: extractValue.asOptionalBoolean(node.props.loading), items: extractValue(node.props.items) || extractValue(node.props.data), limit: extractValue(node.props.limit), groupBy: extractValue(node.props.groupBy), orderBy: extractValue(node.props.orderBy), availableGroups: extractValue(node.props.availableGroups), scrollAnchor: node.props.scrollAnchor, pageInfo: extractValue(node.props.pageInfo), idKey: extractValue(node.props.idKey), requestFetchPrevPage: lookupEventHandler("requestFetchPrevPage"), requestFetchNextPage: lookupEventHandler("requestFetchNextPage"), emptyListPlaceholder: renderChild(node.props.emptyListTemplate), groupsInitiallyExpanded: extractValue.asOptionalBoolean(node.props.groupsInitiallyExpanded), defaultGroups: extractValue(node.props.defaultGroups), borderCollapse: extractValue.asOptionalBoolean(node.props.borderCollapse, true), itemRenderer: itemTemplate &&
+            ((item, key) => {
+                return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: itemTemplate, item: item, renderChild: renderChild, layoutContext: layoutContext }, key));
             }), sectionRenderer: node.props.groupBy
-            ? (item) => {
+            ? (item, key) => {
                 var _a, _b, _c;
-                return ((_b = (_a = item.items) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0 || !hideEmptyGroups ? ((0, jsx_runtime_1.jsx)(ListNative_1.MemoizedSection, { node: (_c = node.props.groupHeaderTemplate) !== null && _c !== void 0 ? _c : { type: "Fragment" }, renderChild: renderChild, item: item })) : null;
+                return ((_b = (_a = item.items) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0 || !hideEmptyGroups ? ((0, jsx_runtime_1.jsx)(ListNative_1.MemoizedSection, { node: (_c = node.props.groupHeaderTemplate) !== null && _c !== void 0 ? _c : { type: "Fragment" }, renderChild: renderChild, item: item }, key)) : null;
             }
             : undefined, sectionFooterRenderer: node.props.groupFooterTemplate
-            ? (item) => {
+            ? (item, key) => {
                 var _a, _b, _c;
-                return ((_b = (_a = item.items) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0 || !hideEmptyGroups ? ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: (_c = node.props.groupFooterTemplate) !== null && _c !== void 0 ? _c : { type: "Fragment" }, item: item, renderChild: renderChild, itemKey: "$group", contextKey: "$group" })) : null;
+                return ((_b = (_a = item.items) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0 || !hideEmptyGroups ? ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: (_c = node.props.groupFooterTemplate) !== null && _c !== void 0 ? _c : { type: "Fragment" }, item: item, renderChild: renderChild, itemKey: "$group", contextKey: "$group" }, key)) : null;
             }
             : undefined }));
 });