xmlui 0.9.14 → 0.9.16

package/dist/index.css

@@ -78,23 +78,15 @@
   }
   button {
     -webkit-appearance: button;
-    background-color: transparent;
-    background-image: none;
   }
   [type=button] {
     -webkit-appearance: button;
-    background-color: transparent;
-    background-image: none;
   }
   [type=reset] {
     -webkit-appearance: button;
-    background-color: transparent;
-    background-image: none;
   }
   [type=submit] {
     -webkit-appearance: button;
-    background-color: transparent;
-    background-image: none;
   }
   :-moz-focusring {
     outline: auto;
@@ -7132,76 +7124,86 @@ li .htmlOl {
  * This function allows other CSS modules to get the value of the CSS variable specified in $componentVariable.
  Optionally, you can provide a $fallbackValue to set the variable's value if that is not defined.
  */
-._tabs_1mgc2_13 {
+._tabs_1ggvi_13 {
   display: flex;
-  flex: 1 1 auto;
   width: 100%;
   background-color: var(--xmlui-backgroundColor-Tabs);
   overflow: hidden;
 }
-._tabs_1mgc2_13[data-orientation=horizontal] {
+._tabs_1ggvi_13[data-orientation=vertical] {
   flex-direction: row;
 }
-._tabs_1mgc2_13[data-orientation=vertical] {
+._tabs_1ggvi_13[data-orientation=horizontal] {
   flex-direction: column;
 }
 
-._filler_1mgc2_27 {
+._filler_1ggvi_26 {
   flex: 1 1 auto;
 }
-._filler_1mgc2_27[data-orientation=horizontal] {
+._filler_1ggvi_26[data-orientation=vertical] {
   border-right-width: var(--xmlui-borderWidth-Tabs);
   border-right-style: solid;
   border-right-color: var(--xmlui-borderColor-Tabs);
 }
-._filler_1mgc2_27[data-orientation=vertical] {
+._filler_1ggvi_26[data-orientation=horizontal] {
   border-bottom-width: var(--xmlui-borderWidth-Tabs);
   border-bottom-style: solid;
   border-bottom-color: var(--xmlui-borderColor-Tabs);
 }
 
-._tabTrigger_1mgc2_41 {
-  font-family: inherit;
+._tabTrigger_1ggvi_40 {
+  padding: var(--xmlui-padding-trigger-Tabs);
+  padding-left: var(--xmlui-paddingLeft-trigger-Tabs, var(--xmlui-paddingHorizontal-trigger-Tabs, var(--xmlui-padding-trigger-Tabs)));
+  padding-right: var(--xmlui-paddingRight-trigger-Tabs, var(--xmlui-paddingHorizontal-trigger-Tabs, var(--xmlui-padding-trigger-Tabs)));
+  padding-top: var(--xmlui-paddingTop-trigger-Tabs, var(--xmlui-paddingVertical-trigger-Tabs, var(--xmlui-padding-trigger-Tabs)));
+  padding-bottom: var(--xmlui-paddingBottom-trigger-Tabs, var(--xmlui-paddingVertical-trigger-Tabs, var(--xmlui-padding-trigger-Tabs)));
   color: var(--xmlui-textColor-trigger-Tabs);
   background-color: var(--xmlui-backgroundColor-trigger-Tabs);
-  padding: var(--xmlui-space-4);
+  border-radius: var(--xmlui-borderRadius-trigger-Tabs);
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 15px;
+  font-size: var(--xmlui-fontSize-normal);
   line-height: 1;
   user-select: none;
-  border-color: transparent;
+  border: var(--xmlui-border-trigger-Tabs);
+}
+._tabTrigger_1ggvi_40._distributeEvenly_1ggvi_57 {
+  flex: 1 1 auto;
 }
-._tabTrigger_1mgc2_41:hover {
+._tabTrigger_1ggvi_40:hover {
   background-color: var(--xmlui-backgroundColor-trigger-Tabs--hover);
 }
-._tabTrigger_1mgc2_41[data-orientation=horizontal] {
+._tabTrigger_1ggvi_40[data-orientation=vertical] {
   border-right-width: var(--xmlui-borderWidth-Tabs);
   border-right-style: solid;
   border-right-color: var(--xmlui-borderColor-Tabs);
 }
-._tabTrigger_1mgc2_41[data-orientation=horizontal][data-state=active] {
+._tabTrigger_1ggvi_40[data-orientation=vertical][data-state=active] {
   border-right-width: var(--xmlui-borderWidth-Tabs);
   border-right-style: solid;
   border-right-color: var(--xmlui-borderColor-active-Tabs);
+  background-color: var(--xmlui-backgroundColor-trigger-Tabs--active);
 }
-._tabTrigger_1mgc2_41[data-orientation=vertical] {
+._tabTrigger_1ggvi_40[data-orientation=horizontal] {
   border-bottom-width: var(--xmlui-borderWidth-Tabs);
   border-bottom-style: solid;
   border-bottom-color: var(--xmlui-borderColor-Tabs);
 }
-._tabTrigger_1mgc2_41[data-orientation=vertical][data-state=active] {
+._tabTrigger_1ggvi_40[data-orientation=horizontal][data-state=active] {
   border-bottom-width: var(--xmlui-borderWidth-Tabs);
   border-bottom-style: solid;
   border-bottom-color: var(--xmlui-borderColor-active-Tabs);
+  background-color: var(--xmlui-backgroundColor-trigger-Tabs--active);
 }
-._tabTrigger_1mgc2_41:hover {
+._tabTrigger_1ggvi_40:hover {
   cursor: pointer;
 }
 
-._tabsList_1mgc2_81 {
+._tabsList_1ggvi_89 {
   background-color: var(--xmlui-backgroundColor-list-Tabs);
+  border-radius: var(--xmlui-borderRadius-list-Tabs);
+  border: var(--xmlui-border-list-Tabs);
   position: relative;
   z-index: 99;
   overflow: hidden;
@@ -7209,18 +7211,18 @@ li .htmlOl {
   flex-shrink: 0;
   scrollbar-width: thin;
 }
-._tabsList_1mgc2_81[data-orientation=horizontal] {
+._tabsList_1ggvi_89[data-orientation=vertical] {
   flex-direction: column;
 }
-._tabsList_1mgc2_81[data-orientation=vertical] {
+._tabsList_1ggvi_89[data-orientation=horizontal] {
   flex-direction: row;
 }
 
-._tabsList_1mgc2_81:hover {
+._tabsList_1ggvi_89:hover {
   overflow: auto;
 }
 
-._tabsContent_1mgc2_101 {
+._tabsContent_1ggvi_111 {
   flex-grow: 1;
   outline: none;
 }/*

package/dist/scripts/bin/build-lib.js

@@ -99,7 +99,7 @@ const buildLib = (_a) => __awaiter(void 0, [_a], void 0, function* ({ watchMode,
                 output: {
                     footer: (chunk) => {
                         if (chunk.name === "index" && chunk.fileName === umdFileName) {
-                            return `if(typeof window.xmlui !== "undefined"){window.xmlui.standalone.registerExtension(window['${env.npm_package_name}']);}`;
+                            return `if(typeof window.xmlui !== "undefined"){window.xmlui.standalone.registerExtension(window['${env.npm_package_name}'].default || window['${env.npm_package_name}']);}`;
                         }
                         return "";
                     },

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

@@ -71,7 +71,7 @@ exports.ListMd = (0, ComponentDefs_1.createMetadata)({
             defaultValue: true,
         },
     },
-    childrenAsTemplate: 'itemTemplate',
+    childrenAsTemplate: "itemTemplate",
     apis: {
         scrollToTop: (0, ComponentDefs_1.d)("This method scrolls the list to the top."),
         scrollToBottom: (0, ComponentDefs_1.d)("This method scrolls the list to the bottom."),
@@ -80,6 +80,9 @@ exports.ListMd = (0, ComponentDefs_1.createMetadata)({
     },
     contextVars: {
         $item: (0, ComponentDefs_1.d)(`This property represents the value of an item in the data list.`),
+        $itemIndex: (0, metadata_helpers_1.dComponent)("This integer value represents the current row index (zero-based) while rendering children."),
+        $isFirst: (0, metadata_helpers_1.dComponent)("This boolean value indicates if the component renders its first item."),
+        $isLast: (0, metadata_helpers_1.dComponent)("This boolean value indicates if the component renders its last item."),
     },
     themeVars: (0, themeVars_1.parseScssVar)(List_module_scss_1.default.themeVars),
 });
@@ -87,8 +90,12 @@ exports.dynamicHeightListComponentRenderer = (0, renderers_1.createComponentRend
     const itemTemplate = node.props.itemTemplate;
     const hideEmptyGroups = extractValue.asOptionalBoolean(node.props.hideEmptyGroups, true);
     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));
+            ((item, key, rowIndex, count) => {
+                return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: itemTemplate, item: item, renderChild: renderChild, layoutContext: layoutContext, contextVars: {
+                        $itemIndex: rowIndex,
+                        $isFirst: rowIndex === 0,
+                        $isLast: rowIndex === count - 1,
+                    } }, key));
             }), sectionRenderer: node.props.groupBy
             ? (item, key) => {
                 var _a, _b, _c;

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

@@ -334,7 +334,7 @@ exports.ListNative = (0, react_1.forwardRef)(function DynamicHeightList({ items
         if (rows.length) {
             (_a = virtualizerRef.current) === null || _a === void 0 ? void 0 : _a.scrollToIndex(rows.length + 1, {
                 align: "end",
-                offset: scrollPaddingTop
+                offset: scrollPaddingTop,
             });
         }
     });
@@ -367,6 +367,7 @@ exports.ListNative = (0, react_1.forwardRef)(function DynamicHeightList({ items
         });
     }, [registerComponentApi, scrollToBottom, scrollToId, scrollToIndex, scrollToTop]);
     const rowTypeContextValue = (0, react_1.useCallback)((index) => rows[index]._row_type, [rows]);
+    const rowCount = (_a = rows === null || rows === void 0 ? void 0 : rows.length) !== null && _a !== void 0 ? _a : 0;
     return ((0, jsx_runtime_1.jsx)(ListItemTypeContext.Provider, { value: rowTypeContextValue, children: (0, jsx_runtime_1.jsx)(exports.ListContext.Provider, { value: expandContextValue, children: (0, jsx_runtime_1.jsxs)("div", { ref: rootRef, style: style, className: (0, classnames_1.default)(List_module_scss_1.default.outerWrapper, {
                     [List_module_scss_1.default.hasOutsideScroll]: hasOutsideScroll,
                 }), children: [loading && rows.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 &&
@@ -375,7 +376,9 @@ exports.ListNative = (0, react_1.forwardRef)(function DynamicHeightList({ items
                             [List_module_scss_1.default.reverse]: scrollAnchor === "bottom",
                             [List_module_scss_1.default.borderCollapse]: borderCollapse,
                             [List_module_scss_1.default.sectioned]: groupBy !== undefined,
-                        }), "data-list-container": true, children: (0, jsx_runtime_1.jsx)(virtua_1.Virtualizer, { ref: virtualizerRef, scrollRef: scrollElementRef, shift: shift, onScroll: onScroll, startMargin: hasOutsideScroll ? ((((_a = parentRef.current) === null || _a === void 0 ? void 0 : _a.offsetTop) - ((_b = scrollRef.current) === null || _b === void 0 ? void 0 : _b.offsetTop)) || 0) : 0, item: Item, count: (_c = rows.length) !== null && _c !== void 0 ? _c : 0, children: (rowIndex) => {
+                        }), "data-list-container": true, children: (0, jsx_runtime_1.jsx)(virtua_1.Virtualizer, { ref: virtualizerRef, scrollRef: scrollElementRef, shift: shift, onScroll: onScroll, startMargin: hasOutsideScroll
+                                ? ((_b = parentRef.current) === null || _b === void 0 ? void 0 : _b.offsetTop) - ((_c = scrollRef.current) === null || _c === void 0 ? void 0 : _c.offsetTop) || 0
+                                : 0, item: Item, count: rowCount, children: (rowIndex) => {
                                 const row = rows[rowIndex];
                                 const key = row[idKey];
                                 switch (row._row_type) {
@@ -384,12 +387,12 @@ exports.ListNative = (0, react_1.forwardRef)(function DynamicHeightList({ items
                                     case RowType.SECTION_FOOTER:
                                         return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (sectionFooterRenderer === null || sectionFooterRenderer === void 0 ? void 0 : sectionFooterRenderer(row, key)) || (0, jsx_runtime_1.jsx)("div", {}) }, key));
                                     default:
-                                        return (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: itemRenderer(row, key) || (0, jsx_runtime_1.jsx)("div", {}) }, key);
+                                        return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: itemRenderer(row, key, rowIndex, rowCount) || (0, jsx_runtime_1.jsx)("div", {}) }, key));
                                 }
                             } }) }))] }) }) }));
 });
 // --- Helper function for List item rendering
-function MemoizedSection({ node, renderChild, item, }) {
+function MemoizedSection({ node, renderChild, item, contextVars = constants_1.EMPTY_OBJECT, }) {
     const { isExpanded, toggleExpanded } = (0, react_1.useContext)(exports.ListContext);
     const id = item.id;
     const expanded = isExpanded(id);
@@ -401,5 +404,5 @@ function MemoizedSection({ node, renderChild, item, }) {
             },
         };
     }, [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" }));
+    return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node, renderChild: renderChild, item: item, context: sectionContext, itemKey: "$group", contextKey: "$group", contextVars: Object.assign(Object.assign({}, contextVars), { $isFirst: item.index === 0, $isLast: item.index === item.count - 1 }) }));
 }

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

@@ -88,8 +88,11 @@ exports.selectComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP,
                 return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.props.optionLabelTemplate, item: item, renderChild: renderChild }));
             }
             : undefined, optionRenderer: node.props.optionTemplate
-            ? (item) => {
-                return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.props.optionTemplate, item: item, renderChild: (...args) => ((0, jsx_runtime_1.jsx)(react_select_1.SelectItemText, { children: renderChild(...args) })) }));
+            ? (item, val, inTrigger) => {
+                return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.props.optionTemplate, item: item, contextVars: {
+                        $selectedValue: val,
+                        $inTrigger: inTrigger
+                    }, renderChild: (...args) => ((0, jsx_runtime_1.jsx)(react_select_1.SelectItemText, { children: renderChild(...args) })) }));
             }
             : undefined, valueRenderer: node.props.valueTemplate
             ? (item, removeItem) => {

package/dist/scripts/src/components/Select/SelectNative.js

@@ -200,7 +200,7 @@ exports.ComboboxOption = (0, react_1.forwardRef)(function Combobox(option, forwa
     }, [selectedValue, value, multiSelect]);
     return ((0, jsx_runtime_1.jsx)(cmdk_1.CommandItem, { id: id, ref: forwardedRef, disabled: !enabled, value: `${value}`, className: Select_module_scss_1.default.multiComboboxOption, onSelect: () => {
             onChange(value);
-        }, "data-state": selected ? "checked" : undefined, keywords: keywords, children: (0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.multiComboboxOptionContent, children: optionRenderer ? (optionRenderer({ label, value, enabled, keywords })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [optionLabelRenderer ? optionLabelRenderer({ label, value }) : label, selected && (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "checkmark" })] })) }) }, id));
+        }, "data-state": selected ? "checked" : undefined, keywords: keywords, children: (0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.multiComboboxOptionContent, children: optionRenderer ? (optionRenderer({ label, value, enabled, keywords }, selectedValue, false)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [optionLabelRenderer ? optionLabelRenderer({ label, value }) : label, selected && (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "checkmark" })] })) }) }, id));
 });
 function HiddenOption(option) {
     const { onOptionRemove, onOptionAdd } = (0, OptionContext_1.useOption)();
@@ -218,7 +218,7 @@ function HiddenOption(option) {
 const SelectOption = react_1.default.forwardRef((option, ref) => {
     const { value, label, enabled = true } = option;
     const { onOptionRemove, onOptionAdd } = (0, OptionContext_1.useOption)();
-    const { optionLabelRenderer, optionRenderer } = (0, SelectContext_1.useSelect)();
+    const { optionLabelRenderer, optionRenderer, value: selectedValue, multiSelect } = (0, SelectContext_1.useSelect)();
     (0, react_1.useLayoutEffect)(() => {
         onOptionAdd(option);
         return () => onOptionRemove(option);
@@ -227,6 +227,6 @@ const SelectOption = react_1.default.forwardRef((option, ref) => {
                 label,
                 value,
                 enabled,
-            })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_select_1.ItemText, { className: Select_module_scss_1.default.selectItemContent, children: optionLabelRenderer ? optionLabelRenderer({ value, label }) : label }), (0, jsx_runtime_1.jsx)("span", { className: Select_module_scss_1.default.selectItemIndicator, children: (0, jsx_runtime_1.jsx)(react_select_1.ItemIndicator, { children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "checkmark" }) }) })] })) }) }));
+            }, selectedValue, false)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_select_1.ItemText, { className: Select_module_scss_1.default.selectItemContent, children: optionLabelRenderer ? optionLabelRenderer({ value, label }) : label }), (0, jsx_runtime_1.jsx)("span", { className: Select_module_scss_1.default.selectItemIndicator, children: (0, jsx_runtime_1.jsx)(react_select_1.ItemIndicator, { children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "checkmark" }) }) })] })) }) }));
 });
 SelectOption.displayName = "SelectOption";

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

@@ -34,15 +34,16 @@ exports.TabsMd = (0, ComponentDefs_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(Tabs_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        [`backgroundColor-${COMP}`]: "$backgroundColor-primary",
+        // [`backgroundColor-${COMP}`]: "transparent",
         [`borderStyle-${COMP}`]: "solid",
         [`borderColor-${COMP}`]: "$borderColor",
         [`borderColor-active-${COMP}`]: "$color-primary",
         [`borderWidth-${COMP}`]: "2px",
-        [`backgroundColor-trigger-${COMP}`]: "$backgroundColor-primary",
-        [`backgroundColor-trigger-${COMP}--hover`]: "$color-primary-50",
-        [`backgroundColor-list-${COMP}`]: "$color-primary-50",
-        [`textColor-trigger-${COMP}`]: "$color-primary-100",
+        // [`backgroundColor-trigger-${COMP}`]: "transparent",
+        [`backgroundColor-trigger-${COMP}--hover`]: "$color-surface-100",
+        [`padding-trigger-${COMP}`]: "$space-4",
+        // [`backgroundColor-list-${COMP}`]: "$color-primary-50",
+        // [`textColor-trigger-${COMP}`]: "$color-primary-100",
     },
 });
 exports.tabsComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.TabsMd, ({ extractValue, node, renderChild, layoutCss, registerComponentApi }) => {

package/dist/scripts/src/components/Tabs/TabsNative.js

@@ -43,7 +43,8 @@ const RTabs = __importStar(require("@radix-ui/react-tabs"));
 const Tabs_module_scss_1 = __importDefault(require("./Tabs.module.scss"));
 const misc_1 = require("../../components-core/utils/misc");
 const TabContext_1 = require("../Tabs/TabContext");
-exports.Tabs = (0, react_1.forwardRef)(function Tabs({ activeTab = 0, orientation = "vertical", tabRenderer, style, children, registerComponentApi, }, forwardedRef) {
+const classnames_1 = __importDefault(require("classnames"));
+exports.Tabs = (0, react_1.forwardRef)(function Tabs({ activeTab = 0, orientation = "horizontal", tabRenderer, style, children, registerComponentApi, className, distributeEvenly = false, }, forwardedRef) {
     const { tabItems, tabContextValue } = (0, TabContext_1.useTabContextValue)();
     const [activeIndex, setActiveIndex] = (0, react_1.useState)(activeTab);
     const currentTab = (0, react_1.useMemo)(() => {
@@ -73,11 +74,13 @@ exports.Tabs = (0, react_1.forwardRef)(function Tabs({ activeTab = 0, orientatio
             next,
         });
     }, [next, registerComponentApi]);
-    return ((0, jsx_runtime_1.jsx)(TabContext_1.TabContext.Provider, { value: tabContextValue, children: (0, jsx_runtime_1.jsxs)(RTabs.Root, { ref: forwardedRef, className: Tabs_module_scss_1.default.tabs, value: `${currentTab}`, onValueChange: (tab) => {
+    return ((0, jsx_runtime_1.jsx)(TabContext_1.TabContext.Provider, { value: tabContextValue, children: (0, jsx_runtime_1.jsxs)(RTabs.Root, { ref: forwardedRef, className: (0, classnames_1.default)(Tabs_module_scss_1.default.tabs, className), value: `${currentTab}`, onValueChange: (tab) => {
                 const newIndex = tabItems.findIndex((item) => item.id === tab);
                 if (newIndex !== activeIndex) {
                     tabContextValue.setActiveTabId(tab);
                     setActiveIndex(newIndex);
                 }
-            }, orientation: orientation, style: style, children: [(0, jsx_runtime_1.jsxs)(RTabs.List, { className: Tabs_module_scss_1.default.tabsList, children: [tabItems.map((tab) => tabRenderer ? ((0, jsx_runtime_1.jsx)(RTabs.Trigger, { value: tab.id, children: tabRenderer({ label: tab.label, isActive: tab.id === currentTab }) }, tab.id)) : ((0, jsx_runtime_1.jsx)(RTabs.Trigger, { className: Tabs_module_scss_1.default.tabTrigger, value: tab.id, children: tab.label }, tab.id))), (0, jsx_runtime_1.jsx)("div", { className: Tabs_module_scss_1.default.filler, "data-orientation": orientation })] }), children] }) }));
+            }, orientation: orientation, style: style, children: [(0, jsx_runtime_1.jsxs)(RTabs.List, { className: Tabs_module_scss_1.default.tabsList, children: [tabItems.map((tab) => tabRenderer ? ((0, jsx_runtime_1.jsx)(RTabs.Trigger, { value: tab.id, asChild: true, children: tabRenderer({ label: tab.label, isActive: tab.id === currentTab }) }, tab.id)) : ((0, jsx_runtime_1.jsx)(RTabs.Trigger, { className: (0, classnames_1.default)(Tabs_module_scss_1.default.tabTrigger, {
+                                [Tabs_module_scss_1.default.distributeEvenly]: distributeEvenly
+                            }), value: tab.id, children: tab.label }, tab.id))), (!distributeEvenly && !tabRenderer) && (0, jsx_runtime_1.jsx)("div", { className: Tabs_module_scss_1.default.filler, "data-orientation": orientation })] }), children] }) }));
 });

package/dist/scripts/src/components-core/InspectorContext.js

@@ -19,7 +19,7 @@ const InspectorButton_module_scss_1 = __importDefault(require("./InspectorButton
 const ComponentRegistryContext_1 = require("../components/ComponentRegistryContext");
 // --- The context object that is used to store the inspector information.
 exports.InspectorContext = (0, react_1.createContext)(null);
-function InspectorProvider({ children, sources, }) {
+function InspectorProvider({ children, sources, projectCompilation, }) {
     const { root } = (0, ThemeContext_1.useTheme)();
     const [inspectable, setInspectable] = (0, react_1.useState)({});
     const [inspectedNode, setInspectedNode] = (0, react_1.useState)(null);
@@ -60,8 +60,9 @@ function InspectorProvider({ children, sources, }) {
             devToolsSide,
             setDevToolsSide,
             devToolsEnabled: showCode,
+            projectCompilation: projectCompilation,
         };
-    }, [devToolsSide, devToolsSize, sources, inspectedNode, showCode]);
+    }, [devToolsSide, devToolsSize, sources, inspectedNode, showCode, projectCompilation]);
     return ((0, jsx_runtime_1.jsxs)(exports.InspectorContext.Provider, { value: contextValue, children: [children, process.env.VITE_USER_COMPONENTS_Inspect !== "false" &&
                 showCode &&
                 inspectedNode !== null &&
@@ -145,6 +146,7 @@ function InspectButton({ inspectId, node, setInspectedNode, setShowCode, }) {
 function useDevTools() {
     const context = (0, react_1.useContext)(exports.InspectorContext);
     return {
+        projectCompilation: context === null || context === void 0 ? void 0 : context.projectCompilation,
         inspectedNode: context === null || context === void 0 ? void 0 : context.inspectedNode,
         sources: context === null || context === void 0 ? void 0 : context.sources,
         setIsOpen: context === null || context === void 0 ? void 0 : context.setIsOpen,

package/dist/scripts/src/components-core/loader/ApiLoader.js

@@ -21,7 +21,7 @@ const Loader_1 = require("./Loader");
 /**
  * Represents a non-displayed React component, which handles the specified API loader
  */
-function ApiLoader({ loader, loaderInProgressChanged, loaderIsRefetchingChanged, loaderLoaded, loaderError, state, doNotRemoveNulls, }) {
+function ApiLoader({ loader, loaderInProgressChanged, loaderIsRefetchingChanged, loaderLoaded, loaderError, state, doNotRemoveNulls, structuralSharing = true, }) {
     const appContext = (0, AppContext_1.useAppContext)();
     const url = (0, extractParam_1.extractParam)(state, loader.props.url, appContext);
     const loadable = !!url;
@@ -39,7 +39,7 @@ function ApiLoader({ loader, loaderInProgressChanged, loaderIsRefetchingChanged,
         }
         return responseObj;
     }), [doNotRemoveNulls, loadable, loader.props.raw, url]);
-    return ((0, jsx_runtime_1.jsx)(Loader_1.Loader, { state: state, loader: loader, loaderInProgressChanged: loaderInProgressChanged, loaderIsRefetchingChanged: loaderIsRefetchingChanged, loaderLoaded: loaderLoaded, loaderError: loaderError, loaderFn: doLoad }));
+    return ((0, jsx_runtime_1.jsx)(Loader_1.Loader, { state: state, loader: loader, loaderInProgressChanged: loaderInProgressChanged, loaderIsRefetchingChanged: loaderIsRefetchingChanged, loaderLoaded: loaderLoaded, loaderError: loaderError, loaderFn: doLoad, structuralSharing: structuralSharing }));
 }
 const ApiLoaderMd = (0, ComponentDefs_1.createMetadata)({
     description: `Represents a loader that calls an API through an HTTP/HTTPS GET request`,

package/dist/scripts/src/components-core/loader/DataLoader.js

@@ -26,7 +26,7 @@ const PageableLoader_1 = require("../loader/PageableLoader");
 const Loader_1 = require("../loader/Loader");
 const AppContext_1 = require("../AppContext");
 const hooks_1 = require("../utils/hooks");
-function DataLoader({ loader, state, registerComponentApi, onLoaded, onError, loaderInProgressChanged, loaderIsRefetchingChanged, loaderLoaded, loaderError, transformResult, }) {
+function DataLoader({ loader, state, registerComponentApi, onLoaded, onError, loaderInProgressChanged, loaderIsRefetchingChanged, loaderLoaded, loaderError, transformResult, structuralSharing = true, }) {
     const appContext = (0, AppContext_1.useAppContext)();
     const url = (0, extractParam_1.extractParam)(state, loader.props.url, appContext);
     const queryParamsInner = (0, react_1.useMemo)(() => {
@@ -290,7 +290,7 @@ function DataLoader({ loader, state, registerComponentApi, onLoaded, onError, lo
         }
     }), [appContext, loader.props.errorNotificationMessage, loaderError, onError]);
     const pollIntervalInSeconds = (0, extractParam_1.extractParam)(state, loader.props.pollIntervalInSeconds, appContext);
-    return hasPaging ? ((0, jsx_runtime_1.jsx)(PageableLoader_1.PageableLoader, { queryId: queryId, state: state, loader: loader, loaderInProgressChanged: inProgress, loaderIsRefetchingChanged: loaderIsRefetchingChanged, loaderLoaded: loaded, loaderError: error, loaderFn: doLoad, registerComponentApi: registerComponentApi, pollIntervalInSeconds: pollIntervalInSeconds, onLoaded: onLoaded, transformResult: transformResult }, queryId === null || queryId === void 0 ? void 0 : queryId.join(""))) : ((0, jsx_runtime_1.jsx)(Loader_1.Loader, { queryId: queryId, state: state, loader: loader, loaderInProgressChanged: inProgress, loaderIsRefetchingChanged: loaderIsRefetchingChanged, loaderLoaded: loaded, loaderError: error, loaderFn: doLoad, pollIntervalInSeconds: pollIntervalInSeconds, registerComponentApi: registerComponentApi, onLoaded: onLoaded, transformResult: transformResult }, queryId === null || queryId === void 0 ? void 0 : queryId.join("")));
+    return hasPaging ? ((0, jsx_runtime_1.jsx)(PageableLoader_1.PageableLoader, { queryId: queryId, state: state, loader: loader, loaderInProgressChanged: inProgress, loaderIsRefetchingChanged: loaderIsRefetchingChanged, loaderLoaded: loaded, loaderError: error, loaderFn: doLoad, registerComponentApi: registerComponentApi, pollIntervalInSeconds: pollIntervalInSeconds, onLoaded: onLoaded, transformResult: transformResult, structuralSharing: structuralSharing }, queryId === null || queryId === void 0 ? void 0 : queryId.join(""))) : ((0, jsx_runtime_1.jsx)(Loader_1.Loader, { queryId: queryId, state: state, loader: loader, loaderInProgressChanged: inProgress, loaderIsRefetchingChanged: loaderIsRefetchingChanged, loaderLoaded: loaded, loaderError: error, loaderFn: doLoad, pollIntervalInSeconds: pollIntervalInSeconds, registerComponentApi: registerComponentApi, onLoaded: onLoaded, transformResult: transformResult, structuralSharing: structuralSharing }, queryId === null || queryId === void 0 ? void 0 : queryId.join("")));
 }
 exports.DataLoaderMd = (0, ComponentDefs_1.createMetadata)({
     description: "This component manages data fetching from a web API",
@@ -310,17 +310,18 @@ exports.DataLoaderMd = (0, ComponentDefs_1.createMetadata)({
         errorNotificationMessage: (0, ComponentDefs_1.d)("The message to show when an error occurs"),
         transformResult: (0, ComponentDefs_1.d)("Function for transforming the datasource result"),
         dataType: (0, ComponentDefs_1.d)("Type of data to fetch (default: json, or csv, or sql)"),
+        structuralSharing: (0, ComponentDefs_1.d)("Whether to use structural sharing for the data"),
     },
     events: {
         loaded: (0, ComponentDefs_1.d)("Event to trigger when the data is loaded"),
         error: (0, ComponentDefs_1.d)("This event fires when an error occurs while fetching data"),
     },
 });
-exports.dataLoaderRenderer = (0, renderers_1.createLoaderRenderer)("DataLoader", ({ loader, state, loaderLoaded, loaderInProgressChanged, loaderIsRefetchingChanged, loaderError, registerComponentApi, lookupAction, lookupSyncCallback, }) => {
+exports.dataLoaderRenderer = (0, renderers_1.createLoaderRenderer)("DataLoader", ({ loader, state, loaderLoaded, loaderInProgressChanged, loaderIsRefetchingChanged, loaderError, registerComponentApi, lookupAction, lookupSyncCallback, extractValue }) => {
     var _a, _b, _c;
     // --- Check for required properties
     if (!((_a = loader.props) === null || _a === void 0 ? void 0 : _a.url) || !loader.props.url.trim()) {
         throw new Error("You must specify a non-empty (not whitespace-only) 'url' property for DataSource");
     }
-    return ((0, jsx_runtime_1.jsx)(DataLoader, { loader: loader, state: state, loaderInProgressChanged: loaderInProgressChanged, loaderIsRefetchingChanged: loaderIsRefetchingChanged, loaderLoaded: loaderLoaded, loaderError: loaderError, registerComponentApi: registerComponentApi, transformResult: lookupSyncCallback(loader.props.transformResult), onLoaded: lookupAction((_b = loader.events) === null || _b === void 0 ? void 0 : _b.loaded, { eventName: "loaded" }), onError: lookupAction((_c = loader.events) === null || _c === void 0 ? void 0 : _c.error, { eventName: "error" }) }));
+    return ((0, jsx_runtime_1.jsx)(DataLoader, { loader: loader, state: state, loaderInProgressChanged: loaderInProgressChanged, loaderIsRefetchingChanged: loaderIsRefetchingChanged, loaderLoaded: loaderLoaded, loaderError: loaderError, registerComponentApi: registerComponentApi, transformResult: lookupSyncCallback(loader.props.transformResult), onLoaded: lookupAction((_b = loader.events) === null || _b === void 0 ? void 0 : _b.loaded, { eventName: "loaded" }), onError: lookupAction((_c = loader.events) === null || _c === void 0 ? void 0 : _c.error, { eventName: "error" }), structuralSharing: extractValue.asOptionalBoolean(loader.props.structuralSharing) }));
 }, exports.DataLoaderMd);

package/dist/scripts/src/components-core/loader/ExternalDataLoader.js

@@ -21,7 +21,7 @@ const Loader_1 = require("./Loader");
 /**
  * Represents a non-displayed React component, which handles the specified API loader
  */
-function ExternalDataLoader({ loader, loaderInProgressChanged, loaderIsRefetchingChanged, loaderError, loaderLoaded, state, doNotRemoveNulls, }) {
+function ExternalDataLoader({ loader, loaderInProgressChanged, loaderIsRefetchingChanged, loaderError, loaderLoaded, state, doNotRemoveNulls, structuralSharing = true, }) {
     const appContext = (0, AppContext_1.useAppContext)();
     const method = (0, extractParam_1.extractParam)(state, loader.props.method, appContext);
     const headers = (0, extractParam_1.extractParam)(state, loader.props.headers, appContext);
@@ -43,7 +43,7 @@ function ExternalDataLoader({ loader, loaderInProgressChanged, loaderIsRefetchin
         }
         return responseObj;
     }), [urlLoadable, headers, data, url, method, doNotRemoveNulls]);
-    return ((0, jsx_runtime_1.jsx)(Loader_1.Loader, { state: state, loader: loader, loaderInProgressChanged: loaderInProgressChanged, loaderIsRefetchingChanged: loaderIsRefetchingChanged, loaderLoaded: loaderLoaded, loaderError: loaderError, loaderFn: doLoad }));
+    return ((0, jsx_runtime_1.jsx)(Loader_1.Loader, { state: state, loader: loader, loaderInProgressChanged: loaderInProgressChanged, loaderIsRefetchingChanged: loaderIsRefetchingChanged, loaderLoaded: loaderLoaded, loaderError: loaderError, loaderFn: doLoad, structuralSharing: structuralSharing }));
 }
 exports.ExternalDataLoaderMd = (0, ComponentDefs_1.createMetadata)({
     description: `Represents a loader that calls an API through an HTTP/HTTPS GET request`,

package/dist/scripts/src/components-core/loader/Loader.js

@@ -16,19 +16,18 @@ const immer_1 = require("immer");
 const extractParam_1 = require("../utils/extractParam");
 const AppContext_1 = require("../AppContext");
 const hooks_1 = require("../utils/hooks");
-function Loader({ state, loader, loaderFn, queryId, pollIntervalInSeconds, registerComponentApi, onLoaded, loaderLoaded, loaderInProgressChanged, loaderIsRefetchingChanged, loaderError, transformResult, }) {
+function Loader({ state, loader, loaderFn, queryId, pollIntervalInSeconds, registerComponentApi, onLoaded, loaderLoaded, loaderInProgressChanged, loaderIsRefetchingChanged, loaderError, transformResult, structuralSharing = true }) {
     const { uid } = loader;
     const appContext = (0, AppContext_1.useAppContext)();
-    const [isRefetching, setIsRefetching] = (0, react_1.useState)(false);
     // --- Rely on react-query to decide when data fetching should use the cache or when is should fetch the data from
     // --- its data source.
     // --- data: The data obtained by the query
     // --- status: Query execution status
     // --- error: Error information about the current query error (in "error" state)
     // --- refetch: The function that can be used to re-fetch the data (because of data/state changes)
-    const { data, status, isFetching, error, refetch } = (0, react_query_1.useQuery)({
+    const { data, status, isFetching, error, refetch, isRefetching } = (0, react_query_1.useQuery)({
         queryKey: (0, react_1.useMemo)(() => (queryId ? queryId : [uid, (0, extractParam_1.extractParam)(state, loader.props, appContext)]), [appContext, loader.props, queryId, state, uid]),
-        structuralSharing: false,
+        structuralSharing,
         queryFn: (0, react_1.useCallback)((_a) => __awaiter(this, [_a], void 0, function* ({ signal }) {
             // console.log("[Loader queryFn] Starting to fetch data...");
             try {
@@ -66,7 +65,6 @@ function Loader({ state, loader, loaderFn, queryId, pollIntervalInSeconds, regis
         let intervalId;
         if (pollIntervalInSeconds) {
             intervalId = setInterval(() => {
-                setIsRefetching(true);
                 refetch();
             }, pollIntervalInSeconds * 1000);
         }
@@ -100,13 +98,11 @@ function Loader({ state, loader, loaderFn, queryId, pollIntervalInSeconds, regis
                 // console.log("[Loader] Calling onLoaded with data:", data);
                 // console.log("[Loader] onLoaded function exists:", !!onLoaded);
                 onLoaded === null || onLoaded === void 0 ? void 0 : onLoaded(data, isRefetching);
-                setIsRefetching(false);
             }, 0);
         }
         else if (status === "error" && error !== prevError) {
             // console.log("[Loader] Calling loaderError with error:", error);
             loaderError(error);
-            setIsRefetching(false);
         }
     }, [data, error, loaderError, loaderLoaded, onLoaded, prevData, prevError, status, isRefetching]);
     (0, react_1.useLayoutEffect)(() => {
@@ -117,7 +113,6 @@ function Loader({ state, loader, loaderFn, queryId, pollIntervalInSeconds, regis
     (0, react_1.useEffect)(() => {
         registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
             refetch: (options) => __awaiter(this, void 0, void 0, function* () {
-                setIsRefetching(true);
                 refetch(options);
             }),
             update: (updater) => __awaiter(this, void 0, void 0, function* () {

package/dist/scripts/src/components-core/loader/MockLoaderRenderer.js

@@ -18,7 +18,7 @@ const extractParam_1 = require("../utils/extractParam");
 const renderers_1 = require("../renderers");
 const AppContext_1 = require("../AppContext");
 const Loader_1 = require("./Loader");
-function ApiLoader({ loader, loaderInProgressChanged, loaderIsRefetchingChanged, loaderError, loaderLoaded, state, }) {
+function MockLoader({ loader, loaderInProgressChanged, loaderIsRefetchingChanged, loaderError, loaderLoaded, state, structuralSharing }) {
     const appContext = (0, AppContext_1.useAppContext)();
     const waitTime = (0, extractParam_1.extractParam)(state, loader.props.waitTime, appContext);
     const responseObj = (0, extractParam_1.extractParam)(state, loader.props.data, appContext);
@@ -26,7 +26,7 @@ function ApiLoader({ loader, loaderInProgressChanged, loaderIsRefetchingChanged,
         waitTime && (yield (0, misc_1.asyncWait)(waitTime));
         return responseObj;
     }), [responseObj, waitTime]);
-    return ((0, jsx_runtime_1.jsx)(Loader_1.Loader, { state: state, loader: loader, loaderInProgressChanged: loaderInProgressChanged, loaderIsRefetchingChanged: loaderIsRefetchingChanged, loaderLoaded: loaderLoaded, loaderError: loaderError, loaderFn: doLoad }));
+    return ((0, jsx_runtime_1.jsx)(Loader_1.Loader, { state: state, loader: loader, loaderInProgressChanged: loaderInProgressChanged, loaderIsRefetchingChanged: loaderIsRefetchingChanged, loaderLoaded: loaderLoaded, loaderError: loaderError, loaderFn: doLoad, structuralSharing: structuralSharing }));
 }
 exports.MockLoaderMd = (0, ComponentDefs_1.createMetadata)({
     description: "A loader that simulates a delay and returns a predefined response",
@@ -36,5 +36,5 @@ exports.MockLoaderMd = (0, ComponentDefs_1.createMetadata)({
     },
 });
 exports.mockLoaderRenderer = (0, renderers_1.createLoaderRenderer)("MockLoader", ({ loader, state, loaderInProgressChanged, loaderLoaded, loaderError }) => {
-    return ((0, jsx_runtime_1.jsx)(ApiLoader, { loader: loader, state: state, loaderInProgressChanged: loaderInProgressChanged, loaderIsRefetchingChanged: loaderInProgressChanged, loaderLoaded: loaderLoaded, loaderError: loaderError }));
+    return ((0, jsx_runtime_1.jsx)(MockLoader, { loader: loader, state: state, loaderInProgressChanged: loaderInProgressChanged, loaderIsRefetchingChanged: loaderInProgressChanged, loaderLoaded: loaderLoaded, loaderError: loaderError }));
 }, exports.MockLoaderMd);

package/dist/scripts/src/components-core/loader/PageableLoader.js

@@ -49,12 +49,11 @@ const immer_1 = __importStar(require("immer"));
 const extractParam_1 = require("../utils/extractParam");
 const AppContext_1 = require("../AppContext");
 const hooks_1 = require("../utils/hooks");
-function PageableLoader({ state, loader, loaderFn, queryId, registerComponentApi, pollIntervalInSeconds, onLoaded, loaderInProgressChanged, loaderIsRefetchingChanged, loaderLoaded, loaderError, transformResult, }) {
+function PageableLoader({ state, loader, loaderFn, queryId, registerComponentApi, pollIntervalInSeconds, onLoaded, loaderInProgressChanged, loaderIsRefetchingChanged, loaderLoaded, loaderError, transformResult, structuralSharing = true, }) {
     const { uid } = loader;
     const appContext = (0, AppContext_1.useAppContext)();
     const queryKey = (0, react_1.useMemo)(() => (queryId ? queryId : [uid, (0, extractParam_1.extractParam)(state, loader.props, appContext)]), [appContext, loader.props, queryId, state, uid]);
     const thizRef = (0, react_1.useRef)(queryKey);
-    const [isRefetching, setIsRefetching] = (0, react_1.useState)(false);
     const getPreviousPageParam = (0, react_1.useCallback)((firstPage) => {
         let prevPageParam = undefined;
         const prevPageSelector = loader.props.prevPageSelector;
@@ -84,11 +83,12 @@ function PageableLoader({ state, loader, loaderFn, queryId, registerComponentApi
     // useEffect(()=>{
     //   console.log("TRANSFORM RESULT CHANGED", transformResult);
     // }, [transformResult]);
-    const { data, status, error, hasNextPage, isFetchingNextPage, hasPreviousPage, isFetchingPreviousPage, isFetching, refetch, fetchPreviousPage, fetchNextPage, } = (0, react_query_1.useInfiniteQuery)({
+    const { data, status, error, hasNextPage, isFetchingNextPage, hasPreviousPage, isFetchingPreviousPage, isFetching, refetch, fetchPreviousPage, fetchNextPage, isRefetching, } = (0, react_query_1.useInfiniteQuery)({
         queryKey,
         queryFn: (0, react_1.useCallback)((_a) => __awaiter(this, [_a], void 0, function* ({ signal, pageParam }) {
             return yield loaderFn(signal, pageParam);
         }), [loaderFn]),
+        structuralSharing,
         select: (0, react_1.useCallback)((data) => {
             let result = [];
             if (data) {
@@ -156,12 +156,10 @@ function PageableLoader({ state, loader, loaderFn, queryId, registerComponentApi
             // access to the latest loader value
             setTimeout(() => {
                 onLoaded === null || onLoaded === void 0 ? void 0 : onLoaded(data, isRefetching);
-                setIsRefetching(false);
             }, 0);
         }
         else if (status === "error" && prevError !== error) {
             loaderError(error);
-            setIsRefetching(false);
         }
     }, [
         data,
@@ -179,7 +177,6 @@ function PageableLoader({ state, loader, loaderFn, queryId, registerComponentApi
         let intervalId;
         if (pollIntervalInSeconds) {
             intervalId = setInterval(() => {
-                setIsRefetching(true);
                 refetch();
             }, pollIntervalInSeconds * 1000);
         }
@@ -200,7 +197,6 @@ function PageableLoader({ state, loader, loaderFn, queryId, registerComponentApi
             fetchPrevPage,
             fetchNextPage: stableFetchNextPage,
             refetch: (options) => __awaiter(this, void 0, void 0, function* () {
-                setIsRefetching(true);
                 refetch(options);
             }),
             update: (updater) => __awaiter(this, void 0, void 0, function* () {

package/dist/scripts/src/components-core/rendering/renderChild.js

@@ -32,7 +32,8 @@ function renderChild({ node, state, dispatch, appContext, lookupAction, lookupSy
     }
     // --- A TextNode value may contain nexted expressions, so we extract it.
     if (node.type === "TextNode") {
-        return (0, extractParam_1.extractParam)(state, nodeValue, appContext, true);
+        const extractedValue = (0, extractParam_1.extractParam)(state, nodeValue, appContext, true);
+        return typeof extractedValue === "boolean" ? extractedValue.toString() : extractedValue;
     }
     // --- Rendering a Slot requires some preparations, as TextNode and
     // --- TextNodeCData are virtual nodes. Also, slots may have default templates