xmlui 0.9.15 → 0.9.17

package/dist/index.css

@@ -968,7 +968,7 @@
  * 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.
  */
-._wrapper_qcc08_13 {
+._wrapper_1c9ty_13 {
   --footer-height: 0px;
   --header-height: 0px;
   width: 100%;
@@ -978,138 +978,191 @@
   flex-direction: column;
   isolation: isolate;
 }
-._wrapper_qcc08_13._vertical_qcc08_23 {
+._wrapper_1c9ty_13._vertical_1c9ty_23 {
   flex-direction: row;
   overflow: initial;
 }
-._wrapper_qcc08_13._vertical_qcc08_23 ._contentWrapper_qcc08_27 {
+._wrapper_1c9ty_13._vertical_1c9ty_23 ._contentWrapper_1c9ty_27 {
   overflow: auto;
   scroll-padding-block: var(--xmlui-scroll-padding-block-Pages);
   position: relative;
   scrollbar-gutter: stable both-edges;
 }
-._wrapper_qcc08_13._vertical_qcc08_23 ._navPanelWrapper_qcc08_33 {
+._wrapper_1c9ty_13._vertical_1c9ty_23 ._navPanelWrapper_1c9ty_33 {
   width: var(--xmlui-width-navPanel-App);
   flex-shrink: 0;
 }
-._wrapper_qcc08_13._vertical_qcc08_23 ._PagesWrapper_qcc08_37 {
+._wrapper_1c9ty_13._vertical_1c9ty_23 ._PagesWrapper_1c9ty_37 {
   min-height: initial;
   flex: 1;
 }
-._wrapper_qcc08_13._vertical_qcc08_23 ._footerWrapper_qcc08_41 {
+._wrapper_1c9ty_13._vertical_1c9ty_23 ._footerWrapper_1c9ty_41 {
   position: static;
 }
-._wrapper_qcc08_13._vertical_qcc08_23._sticky_qcc08_44 ._contentWrapper_qcc08_27 {
+._wrapper_1c9ty_13._vertical_1c9ty_23._sticky_1c9ty_44 ._contentWrapper_1c9ty_27 {
   scroll-padding-top: var(--header-height);
 }
-._wrapper_qcc08_13._vertical_qcc08_23._sticky_qcc08_44 ._footerWrapper_qcc08_41 {
+._wrapper_1c9ty_13._vertical_1c9ty_23._sticky_1c9ty_44 ._footerWrapper_1c9ty_41 {
   position: sticky;
   bottom: 0;
 }
-._wrapper_qcc08_13._horizontal_qcc08_51 {
+._wrapper_1c9ty_13._horizontal_1c9ty_51 {
   overflow: auto;
   scroll-padding-block: var(--xmlui-scroll-padding-block-Pages);
 }
-._wrapper_qcc08_13._horizontal_qcc08_51 ._PagesWrapper_qcc08_37 {
+._wrapper_1c9ty_13._horizontal_1c9ty_51 ._PagesWrapper_1c9ty_37 {
   min-height: initial;
 }
-._wrapper_qcc08_13._horizontal_qcc08_51 ._footerWrapper_qcc08_41 {
+._wrapper_1c9ty_13._horizontal_1c9ty_51 ._footerWrapper_1c9ty_41 {
   position: static;
 }
-._wrapper_qcc08_13._horizontal_qcc08_51._sticky_qcc08_44 {
+._wrapper_1c9ty_13._horizontal_1c9ty_51._sticky_1c9ty_44 {
   scroll-padding-top: var(--header-height);
   min-height: 100%;
 }
-._wrapper_qcc08_13._horizontal_qcc08_51._sticky_qcc08_44 ._footerWrapper_qcc08_41 {
+._wrapper_1c9ty_13._horizontal_1c9ty_51._sticky_1c9ty_44 ._footerWrapper_1c9ty_41 {
   position: sticky;
   bottom: 0;
 }
-._wrapper_qcc08_13._horizontal_qcc08_51 ._navPanelWrapper_qcc08_33 {
+._wrapper_1c9ty_13._horizontal_1c9ty_51 ._navPanelWrapper_1c9ty_33 {
   border-bottom: var(--xmlui-borderBottom-AppHeader);
   justify-content: end;
 }
-._wrapper_qcc08_13._verticalFullHeader_qcc08_73 {
+._wrapper_1c9ty_13._verticalFullHeader_1c9ty_73 {
   min-height: 100%;
   height: 100%;
   overflow: auto;
   scroll-padding-block: var(--xmlui-scroll-padding-block-Pages);
 }
-._wrapper_qcc08_13._verticalFullHeader_qcc08_73 ._navPanelWrapper_qcc08_33 {
+._wrapper_1c9ty_13._verticalFullHeader_1c9ty_73 ._navPanelWrapper_1c9ty_33 {
   width: var(--xmlui-width-navPanel-App);
   position: sticky;
   height: calc(var(--containerHeight, 100vh) - var(--footer-height) - var(--header-height));
   top: var(--header-height);
 }
-._wrapper_qcc08_13._verticalFullHeader_qcc08_73 ._PagesWrapper_qcc08_37 {
+._wrapper_1c9ty_13._verticalFullHeader_1c9ty_73 ._PagesWrapper_1c9ty_37 {
   overflow: initial;
   min-height: calc(var(--containerHeight, 100vh) - var(--header-height) - var(--footer-height));
   height: 100%;
 }
-._wrapper_qcc08_13._verticalFullHeader_qcc08_73 ._PagesWrapperInner_qcc08_90 {
+._wrapper_1c9ty_13._verticalFullHeader_1c9ty_73 ._PagesWrapperInner_1c9ty_90 {
   height: 100%;
 }
-._wrapper_qcc08_13._verticalFullHeader_qcc08_73 ._PagesWrapperInner_qcc08_90 > .xmlui-page-root {
+._wrapper_1c9ty_13._verticalFullHeader_1c9ty_73 ._PagesWrapperInner_1c9ty_90 > .xmlui-page-root {
   height: 100%;
 }
-._wrapper_qcc08_13._verticalFullHeader_qcc08_73 ._footerWrapper_qcc08_41 {
+._wrapper_1c9ty_13._verticalFullHeader_1c9ty_73 ._footerWrapper_1c9ty_41 {
   position: sticky;
   left: 0;
   right: 0;
   bottom: 0;
 }
-._wrapper_qcc08_13._scrollWholePage_qcc08_102 {
+._wrapper_1c9ty_13._verticalConstrained_1c9ty_102 {
+  min-height: 100%;
+  height: 100%;
+  overflow: auto;
+  scroll-padding-block: var(--xmlui-scroll-padding-block-Pages);
+}
+._wrapper_1c9ty_13._verticalConstrained_1c9ty_102 ._header_1c9ty_108 {
+  max-width: var(--xmlui-maxWidth-App);
+  margin: auto;
+}
+._wrapper_1c9ty_13._verticalConstrained_1c9ty_102 ._navPanelWrapper_1c9ty_33 {
+  width: var(--xmlui-width-navPanel-App);
+  position: sticky;
+  height: calc(var(--containerHeight, 100vh) - var(--footer-height) - var(--header-height));
+  top: var(--header-height);
+}
+._wrapper_1c9ty_13._verticalConstrained_1c9ty_102 ._PagesWrapper_1c9ty_37 {
+  overflow: initial;
+  min-height: calc(var(--containerHeight, 100vh) - var(--header-height) - var(--footer-height));
+  height: 100%;
+}
+._wrapper_1c9ty_13._verticalConstrained_1c9ty_102 ._PagesWrapperInner_1c9ty_90 {
+  height: 100%;
+}
+._wrapper_1c9ty_13._verticalConstrained_1c9ty_102 ._PagesWrapperInner_1c9ty_90 > .xmlui-page-root {
+  height: 100%;
+}
+._wrapper_1c9ty_13._verticalConstrained_1c9ty_102 ._footerWrapper_1c9ty_41 {
+  position: sticky;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+._wrapper_1c9ty_13._scrollWholePage_1c9ty_135 {
   scrollbar-gutter: stable both-edges;
 }
-._wrapper_qcc08_13._scrollWholePage_qcc08_102 ._headerWrapper_qcc08_105 {
+._wrapper_1c9ty_13._scrollWholePage_1c9ty_135 ._headerWrapper_1c9ty_138 {
   margin-inline: calc(-1 * var(--scrollbar-width));
 }
-._wrapper_qcc08_13._scrollWholePage_qcc08_102 ._headerWrapper_qcc08_105 > div {
+._wrapper_1c9ty_13._scrollWholePage_1c9ty_135 ._headerWrapper_1c9ty_138 > div {
   padding-inline: var(--scrollbar-width);
 }
-._wrapper_qcc08_13._scrollWholePage_qcc08_102 ._footerWrapper_qcc08_41 {
+._wrapper_1c9ty_13._scrollWholePage_1c9ty_135 ._footerWrapper_1c9ty_41 {
   margin-inline: calc(-1 * var(--scrollbar-width));
 }
-._wrapper_qcc08_13._scrollWholePage_qcc08_102 ._footerWrapper_qcc08_41 > div {
+._wrapper_1c9ty_13._scrollWholePage_1c9ty_135 ._footerWrapper_1c9ty_41 > div {
   padding-inline: var(--scrollbar-width);
 }
-._wrapper_qcc08_13._scrollWholePage_qcc08_102._verticalFullHeader_qcc08_73 {
+._wrapper_1c9ty_13._scrollWholePage_1c9ty_135._verticalFullHeader_1c9ty_73 {
   scroll-padding-top: var(--header-height);
 }
-._wrapper_qcc08_13._scrollWholePage_qcc08_102._verticalFullHeader_qcc08_73 ._content_qcc08_27 {
+._wrapper_1c9ty_13._scrollWholePage_1c9ty_135._verticalFullHeader_1c9ty_73 ._content_1c9ty_27 {
+  margin-inline: calc(-1 * var(--scrollbar-width));
+}
+._wrapper_1c9ty_13._scrollWholePage_1c9ty_135._verticalFullHeader_1c9ty_73 ._contentWrapper_1c9ty_27 {
+  padding-inline: var(--scrollbar-width);
+}
+._wrapper_1c9ty_13._scrollWholePage_1c9ty_135._verticalConstrained_1c9ty_102 {
+  scroll-padding-top: var(--header-height);
+}
+._wrapper_1c9ty_13._scrollWholePage_1c9ty_135._verticalConstrained_1c9ty_102 ._content_1c9ty_27 {
+  width: var(--xmlui-maxWidth-App);
+  margin-inline: calc(-1 * var(--scrollbar-width));
+  margin: auto;
+}
+._wrapper_1c9ty_13._scrollWholePage_1c9ty_135._verticalConstrained_1c9ty_102 ._contentWrapper_1c9ty_27 {
+  padding-inline: var(--scrollbar-width);
+}
+._wrapper_1c9ty_13._scrollWholePage_1c9ty_135._verticalConstrained_1c9ty_102 ._headerWrapper_1c9ty_138 > div {
+  width: var(--xmlui-maxWidth-App);
+}
+._wrapper_1c9ty_13._scrollWholePage_1c9ty_135._verticalConstrained_1c9ty_102 ._footerWrapper_1c9ty_41 {
   margin-inline: calc(-1 * var(--scrollbar-width));
 }
-._wrapper_qcc08_13._scrollWholePage_qcc08_102._verticalFullHeader_qcc08_73 ._contentWrapper_qcc08_27 {
+._wrapper_1c9ty_13._scrollWholePage_1c9ty_135._verticalConstrained_1c9ty_102 ._footerWrapper_1c9ty_41 > div {
   padding-inline: var(--scrollbar-width);
 }
-._wrapper_qcc08_13:not(._scrollWholePage_qcc08_102) {
+._wrapper_1c9ty_13:not(._scrollWholePage_1c9ty_135) {
   overflow: hidden;
 }
-._wrapper_qcc08_13:not(._scrollWholePage_qcc08_102) ._content_qcc08_27 {
+._wrapper_1c9ty_13:not(._scrollWholePage_1c9ty_135) ._content_1c9ty_27 {
   min-height: 0;
   height: 100%;
 }
-._wrapper_qcc08_13:not(._scrollWholePage_qcc08_102) ._contentWrapper_qcc08_27 {
+._wrapper_1c9ty_13:not(._scrollWholePage_1c9ty_135) ._contentWrapper_1c9ty_27 {
   overflow: initial;
 }
-._wrapper_qcc08_13:not(._scrollWholePage_qcc08_102) ._PagesWrapper_qcc08_37 {
+._wrapper_1c9ty_13:not(._scrollWholePage_1c9ty_135) ._PagesWrapper_1c9ty_37 {
   overflow: auto;
   scroll-padding-block: var(--xmlui-scroll-padding-block-Pages);
   min-height: 0;
   height: 100%;
   scrollbar-gutter: stable both-edges;
 }
-._wrapper_qcc08_13:not(._scrollWholePage_qcc08_102) ._PagesWrapperInner_qcc08_90 {
+._wrapper_1c9ty_13:not(._scrollWholePage_1c9ty_135) ._PagesWrapperInner_1c9ty_90 {
   min-height: 100%;
   height: 0;
 }
-._wrapper_qcc08_13._noScrollbarGutters_qcc08_147 {
+._wrapper_1c9ty_13._noScrollbarGutters_1c9ty_200 {
   scrollbar-gutter: auto;
 }
-._wrapper_qcc08_13._noScrollbarGutters_qcc08_147 ._PagesWrapper_qcc08_37 {
+._wrapper_1c9ty_13._noScrollbarGutters_1c9ty_200 ._PagesWrapper_1c9ty_37 {
   scrollbar-gutter: auto;
 }
 
-._headerWrapper_qcc08_105 {
+._headerWrapper_1c9ty_138 {
   z-index: 1;
   min-height: 0;
   flex-shrink: 0;
@@ -1118,17 +1171,17 @@
   box-shadow: var(--xmlui-boxShadow-header-App);
   background-color: var(--xmlui-backgroundColor-AppHeader);
 }
-._headerWrapper_qcc08_105._sticky_qcc08_44 {
+._headerWrapper_1c9ty_138._sticky_1c9ty_44 {
   position: sticky;
 }
 
-._content_qcc08_27 {
+._content_1c9ty_27 {
   display: flex;
   flex-direction: row;
   isolation: isolate;
 }
 
-._contentWrapper_qcc08_27 {
+._contentWrapper_1c9ty_27 {
   position: relative;
   min-width: 0;
   flex: 1;
@@ -1139,21 +1192,21 @@
   border-left: var(--xmlui-borderLeft-content-App);
 }
 
-._navPanelWrapper_qcc08_33 {
+._navPanelWrapper_1c9ty_33 {
   display: flex;
   position: sticky;
   top: 0;
 }
-._navPanelWrapper_qcc08_33:empty {
+._navPanelWrapper_1c9ty_33:empty {
   display: none;
 }
 
-._PagesWrapper_qcc08_37 {
+._PagesWrapper_1c9ty_37 {
   flex: 1;
   isolation: isolate;
 }
 
-._PagesWrapperInner_qcc08_90 {
+._PagesWrapperInner_1c9ty_90 {
   --page-padding-left: var(--xmlui-space-4);
   --page-padding-right: var(--xmlui-space-4);
   --page-padding-top: var(--xmlui-space-5);
@@ -1171,7 +1224,7 @@
   display: flex;
   flex-direction: column;
 }
-._PagesWrapperInner_qcc08_90 > .xmlui-page-root {
+._PagesWrapperInner_1c9ty_90 > .xmlui-page-root {
   padding-top: var(--page-padding-top-override, var(--page-padding-top));
   padding-bottom: var(--page-padding-bottom-override, var(--page-padding-bottom));
   padding-right: var(--page-padding-right-override, var(--page-padding-right));
@@ -1183,7 +1236,7 @@
   margin-right: calc(-1 * var(--page-padding-right));
 }
 
-._footerWrapper_qcc08_41 {
+._footerWrapper_1c9ty_41 {
   flex-shrink: 0;
 }/*
  * This file contains all CSS variables AppEngine uses for styling the UI, including individual visual components.

package/dist/scripts/src/components/App/AppLayoutContext.js

@@ -7,6 +7,7 @@ const appLayoutNames = [
     "vertical",
     "vertical-sticky",
     "vertical-full-header",
+    "vertical-constrained-width",
     "condensed",
     "condensed-sticky",
     "horizontal",

package/dist/scripts/src/components/App/AppNative.js

@@ -185,6 +185,9 @@ function App({ children, style, layout, loggedInUser, scrollWholePage, noScrollb
         case "vertical-full-header":
             content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(wrapperBaseClasses, App_module_scss_1.default.verticalFullHeader), style: styleWithHelpers, ref: scrollPageContainerRef, children: [(0, jsx_runtime_1.jsx)("header", { className: (0, classnames_1.default)(App_module_scss_1.default.headerWrapper, App_module_scss_1.default.sticky), ref: headerRefCallback, children: header }), (0, jsx_runtime_1.jsxs)("div", { className: App_module_scss_1.default.content, children: [navPanelVisible && (0, jsx_runtime_1.jsx)("aside", { className: App_module_scss_1.default.navPanelWrapper, children: navPanel }), (0, jsx_runtime_1.jsx)("main", { className: App_module_scss_1.default.contentWrapper, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapper, ref: noScrollPageContainerRef, children: (0, jsx_runtime_1.jsx)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapperInner, style: pagesWrapperInnerStyle, children: children }) }) }) })] }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.footerWrapper, ref: footerRefCallback, children: footer })] }));
             break;
+        case "vertical-constrained-width":
+            content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(wrapperBaseClasses, App_module_scss_1.default.verticalConstrained), style: styleWithHelpers, ref: scrollPageContainerRef, children: [(0, jsx_runtime_1.jsx)("header", { className: (0, classnames_1.default)(App_module_scss_1.default.headerWrapper, App_module_scss_1.default.sticky), ref: headerRefCallback, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.header, style: { paddingInline: 0 }, children: header }) }), (0, jsx_runtime_1.jsxs)("div", { className: App_module_scss_1.default.content, children: [navPanelVisible && (0, jsx_runtime_1.jsx)("aside", { className: App_module_scss_1.default.navPanelWrapper, children: navPanel }), (0, jsx_runtime_1.jsx)("main", { className: App_module_scss_1.default.contentWrapper, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapper, ref: noScrollPageContainerRef, children: (0, jsx_runtime_1.jsx)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapperInner, style: pagesWrapperInnerStyle, children: children }) }) }) })] }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.footerWrapper, ref: footerRefCallback, children: footer })] }));
+            break;
         case "condensed":
         case "condensed-sticky":
             content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(wrapperBaseClasses, App_module_scss_1.default.horizontal, {
@@ -210,6 +213,7 @@ function getAppLayoutOrientation(appLayout) {
         case "vertical":
         case "vertical-sticky":
         case "vertical-full-header":
+        case "vertical-constrained-width":
             return "vertical";
         default:
             return "horizontal";

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-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