xmlui 0.9.13 → 0.9.15

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/Card/Card.js

@@ -26,6 +26,11 @@ exports.CardMd = (0, ComponentDefs_1.createMetadata)({
             valueType: "boolean",
             defaultValue: CardNative_1.defaultProps.showAvatar,
         },
+        avatarSize: {
+            description: `This prop sets the size of the avatar. The default value is \`sm\`.`,
+            availableValues: ["xs", "sm", "md", "lg"],
+            valueType: "string",
+        },
         title: {
             description: `This prop sets the prestyled title.`,
             valueType: "string",
@@ -58,10 +63,21 @@ exports.CardMd = (0, ComponentDefs_1.createMetadata)({
         [`borderRadius-${COMP}`]: "$borderRadius",
         [`boxShadow-${COMP}`]: "none",
         [`backgroundColor-${COMP}`]: "$color-surface-raised",
+        [`gap-${COMP}`]: "var(--stack-gap-default)",
+        [`gap-title-${COMP}`]: "$gap-normal",
+        [`gap-avatar-${COMP}`]: "$gap-normal",
+        [`verticalAlignment-title-${COMP}`]: "center",
     },
+    themeVarDescriptions: {
+        [`gap-${COMP}`]: "The gap between the component's children.",
+        [`gap-title-${COMP}`]: "The gap between the title and the subtitle",
+        [`gap-avatar-${COMP}`]: "The gap between the avatar and the title panel",
+        [`horizontalAlignment-title-${COMP}`]: "The horizontal alignment of panel with the title and subtitle",
+        [`verticalAlignment-title-${COMP}`]: "The vertical alignment of the title and subtitle to the avatar",
+    }
 });
 exports.cardComponentRenderer = (0, renderers_1.createComponentRenderer)("Card", exports.CardMd, ({ node, extractValue, renderChild, layoutCss }) => {
-    return ((0, jsx_runtime_1.jsx)(CardNative_1.Card, { style: layoutCss, title: extractValue.asOptionalString(node.props.title), linkTo: extractValue.asOptionalString(node.props.linkTo), subtitle: extractValue.asOptionalString(node.props.subtitle), avatarUrl: extractValue.asOptionalString(node.props.avatarUrl), showAvatar: extractValue.asOptionalBoolean(node.props.showAvatar), orientation: extractValue.asOptionalString(node.props.orientation), children: renderChild(node.children, {
+    return ((0, jsx_runtime_1.jsx)(CardNative_1.Card, { style: layoutCss, title: extractValue.asOptionalString(node.props.title), linkTo: extractValue.asOptionalString(node.props.linkTo), subtitle: extractValue.asOptionalString(node.props.subtitle), avatarUrl: extractValue.asOptionalString(node.props.avatarUrl), showAvatar: extractValue.asOptionalBoolean(node.props.showAvatar), avatarSize: extractValue.asOptionalString(node.props.avatarSize), orientation: extractValue.asOptionalString(node.props.orientation), children: renderChild(node.children, {
             type: "Stack",
             orientation: "vertical",
         }) }));

package/dist/scripts/src/components/Card/CardNative.js

@@ -11,13 +11,12 @@ const Card_module_scss_1 = __importDefault(require("./Card.module.scss"));
 const AvatarNative_1 = require("../Avatar/AvatarNative");
 const LinkNative_1 = require("../Link/LinkNative");
 const HeadingNative_1 = require("../Heading/HeadingNative");
-const StackNative_1 = require("../Stack/StackNative");
 const TextNative_1 = require("../Text/TextNative");
 exports.defaultProps = {
     orientation: "vertical",
     showAvatar: false,
 };
-exports.Card = (0, react_1.forwardRef)(function Card({ children, orientation = exports.defaultProps.orientation, style, title, subtitle, linkTo, avatarUrl, showAvatar = !!avatarUrl || exports.defaultProps.showAvatar, onClick, }, forwardedRef) {
+exports.Card = (0, react_1.forwardRef)(function Card({ children, orientation = exports.defaultProps.orientation, style, title, subtitle, linkTo, avatarUrl, showAvatar = !!avatarUrl || exports.defaultProps.showAvatar, avatarSize, onClick, }, forwardedRef) {
     const titleProps = {
         level: "h2",
     };
@@ -25,5 +24,5 @@ exports.Card = (0, react_1.forwardRef)(function Card({ children, orientation = e
             [Card_module_scss_1.default.isClickable]: !!onClick,
             [Card_module_scss_1.default.vertical]: orientation === "vertical",
             [Card_module_scss_1.default.horizontal]: orientation === "horizontal",
-        }), style: style, onClick: onClick, children: [[title, subtitle, avatarUrl, showAvatar].some(Boolean) && ((0, jsx_runtime_1.jsxs)(StackNative_1.Stack, { orientation: "horizontal", verticalAlignment: "center", style: { gap: "1rem" }, children: [showAvatar && (0, jsx_runtime_1.jsx)(AvatarNative_1.Avatar, { url: avatarUrl, name: title }), (0, jsx_runtime_1.jsxs)(StackNative_1.Stack, { orientation: "vertical", children: [linkTo ? (title ? ((0, jsx_runtime_1.jsx)(LinkNative_1.LocalLink, { to: linkTo + "", children: (0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, Object.assign({}, titleProps, { children: title })) })) : null) : title ? ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, Object.assign({}, titleProps, { children: title }))) : null, subtitle !== undefined && (0, jsx_runtime_1.jsx)(TextNative_1.Text, { variant: "small", children: subtitle })] })] })), children] }));
+        }), style: style, onClick: onClick, children: [[title, subtitle, avatarUrl, showAvatar].some(Boolean) && ((0, jsx_runtime_1.jsxs)("div", { className: Card_module_scss_1.default.avatarWrapper, children: [showAvatar && (0, jsx_runtime_1.jsx)(AvatarNative_1.Avatar, { url: avatarUrl, name: title, size: avatarSize }), (0, jsx_runtime_1.jsxs)("div", { className: Card_module_scss_1.default.titleWrapper, children: [linkTo ? (title ? ((0, jsx_runtime_1.jsx)(LinkNative_1.LocalLink, { to: linkTo + "", children: (0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, Object.assign({}, titleProps, { children: title })) })) : null) : title ? ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, Object.assign({}, titleProps, { children: title }))) : null, subtitle !== undefined && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(TextNative_1.Text, { variant: "small", children: subtitle }) }))] })] })), children] }));
 });

package/dist/scripts/src/components/DatePicker/DatePickerNative.js

@@ -176,12 +176,12 @@ exports.DatePicker = (0, react_1.forwardRef)(function DatePicker({ id, initialVa
             setOpen(false);
         }
     }, [onDidChange, updateState, mode, dateFormat]);
-    return inline ? ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", { className: DatePicker_module_scss_1.default.inlinePickerMenu, children: (0, jsx_runtime_1.jsx)(react_day_picker_1.DayPicker, { fixedWeeks: true, fromDate: startDate, toDate: endDate, disabled: disabled, weekStartsOn: _weekStartsOn, showWeekNumber: showWeekNumber, showOutsideDays: true, classNames: DatePicker_module_scss_1.default, mode: mode === "single" ? "single" : "range", selected: selected, onSelect: handleSelect, initialFocus: !inline, numberOfMonths: mode === "range" ? 2 : 1 }) }) })) : ((0, jsx_runtime_1.jsxs)(ReactDropdownMenu.Root, { open: open, onOpenChange: setOpen, modal: false, children: [(0, jsx_runtime_1.jsx)(ReactDropdownMenu.Trigger, { asChild: true, children: (0, jsx_runtime_1.jsxs)("button", { disabled: !enabled, id: id, ref: ref, style: style, className: (0, classnames_1.default)(DatePicker_module_scss_1.default.datePicker, {
+    return inline ? ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", { className: DatePicker_module_scss_1.default.inlinePickerMenu, children: (0, jsx_runtime_1.jsx)(react_day_picker_1.DayPicker, { required: undefined, captionLayout: "dropdown", fixedWeeks: true, startMonth: startDate, endMonth: endDate, disabled: disabled, weekStartsOn: _weekStartsOn, showWeekNumber: showWeekNumber, showOutsideDays: true, classNames: DatePicker_module_scss_1.default, mode: mode === "single" ? "single" : "range", selected: selected, onSelect: handleSelect, autoFocus: !inline, numberOfMonths: mode === "range" ? 2 : 1 }) }) })) : ((0, jsx_runtime_1.jsxs)(ReactDropdownMenu.Root, { open: open, onOpenChange: setOpen, modal: false, children: [(0, jsx_runtime_1.jsx)(ReactDropdownMenu.Trigger, { asChild: true, children: (0, jsx_runtime_1.jsxs)("button", { disabled: !enabled, id: id, ref: ref, style: style, className: (0, classnames_1.default)(DatePicker_module_scss_1.default.datePicker, {
                         [DatePicker_module_scss_1.default.disabled]: !enabled,
                         [DatePicker_module_scss_1.default.error]: validationStatus === "error",
                         [DatePicker_module_scss_1.default.warning]: validationStatus === "warning",
                         [DatePicker_module_scss_1.default.valid]: validationStatus === "valid",
-                    }), onFocus: handleOnButtonFocus, onBlur: handleOnButtonBlur, children: [(0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: startText, iconName: startIcon, className: DatePicker_module_scss_1.default.adornment }), (0, jsx_runtime_1.jsx)("div", { className: DatePicker_module_scss_1.default.datePickerValue, children: mode === "single" && selected ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, date_fns_1.format)(selected, dateFormat) })) : mode === "range" && typeof selected === "object" && selected.from ? (selected.to ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, date_fns_1.format)(selected.from, dateFormat), " - ", (0, date_fns_1.format)(selected.to, dateFormat)] })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, date_fns_1.format)(selected.from, dateFormat) }))) : placeholder ? ((0, jsx_runtime_1.jsx)("span", { className: DatePicker_module_scss_1.default.placeholder, children: placeholder })) : ((0, jsx_runtime_1.jsx)("span", { children: "\u00A0" })) }), (0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: endText, iconName: endIcon, className: DatePicker_module_scss_1.default.adornment })] }) }), (0, jsx_runtime_1.jsx)(ReactDropdownMenu.Portal, { container: root, children: (0, jsx_runtime_1.jsx)(ReactDropdownMenu.Content, { align: "start", className: DatePicker_module_scss_1.default.datePickerMenu, onFocus: handleOnMenuFocus, onBlur: handleOnMenuBlur, onInteractOutside: handleOnMenuBlur, children: (0, jsx_runtime_1.jsx)(react_day_picker_1.DayPicker, { fixedWeeks: true, fromDate: startDate, toDate: endDate, disabled: disabled, weekStartsOn: _weekStartsOn, showWeekNumber: showWeekNumber, showOutsideDays: true, classNames: DatePicker_module_scss_1.default, mode: mode === "single" ? "single" : "range", selected: selected, onSelect: handleSelect, initialFocus: true, numberOfMonths: mode === "range" ? 2 : 1 }) }) })] }));
+                    }), onFocus: handleOnButtonFocus, onBlur: handleOnButtonBlur, children: [(0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: startText, iconName: startIcon, className: DatePicker_module_scss_1.default.adornment }), (0, jsx_runtime_1.jsx)("div", { className: DatePicker_module_scss_1.default.datePickerValue, children: mode === "single" && selected ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, date_fns_1.format)(selected, dateFormat) })) : mode === "range" && typeof selected === "object" && selected.from ? (selected.to ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, date_fns_1.format)(selected.from, dateFormat), " - ", (0, date_fns_1.format)(selected.to, dateFormat)] })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, date_fns_1.format)(selected.from, dateFormat) }))) : placeholder ? ((0, jsx_runtime_1.jsx)("span", { className: DatePicker_module_scss_1.default.placeholder, children: placeholder })) : ((0, jsx_runtime_1.jsx)("span", { children: "\u00A0" })) }), (0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: endText, iconName: endIcon, className: DatePicker_module_scss_1.default.adornment })] }) }), (0, jsx_runtime_1.jsx)(ReactDropdownMenu.Portal, { container: root, children: (0, jsx_runtime_1.jsx)(ReactDropdownMenu.Content, { align: "start", sideOffset: 5, className: DatePicker_module_scss_1.default.datePickerMenu, onFocus: handleOnMenuFocus, onBlur: handleOnMenuBlur, onInteractOutside: handleOnMenuBlur, children: (0, jsx_runtime_1.jsx)(react_day_picker_1.DayPicker, { required: undefined, fixedWeeks: true, classNames: DatePicker_module_scss_1.default, captionLayout: "dropdown", startMonth: startDate, endMonth: endDate, disabled: disabled, weekStartsOn: _weekStartsOn, showWeekNumber: showWeekNumber, showOutsideDays: true, mode: mode === "single" ? "single" : "range", selected: selected, onSelect: handleSelect, autoFocus: !inline, numberOfMonths: mode === "range" ? 2 : 1 }) }) })] }));
 });
 const isoRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z$/;
 const parseISODate = (dateString) => {

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/Markdown/Markdown.js

@@ -28,18 +28,19 @@ exports.MarkdownMd = (0, ComponentDefs_1.createMetadata)({
     defaultThemeVars: {
         "backgroundColor-Admonition": "$color-warn-300",
         "borderRadius-Admonition": "$space-4",
-        "iconSize-Admonition": "1.5rem",
-        "padding-Admonition": "1rem",
-        "marginBottom-Admonition": "1rem",
-        "marginLeft-Admonition-content": ".5rem",
+        "iconSize-Admonition": "$space-6",
+        "padding-Admonition": "$space-4",
+        "marginBottom-Admonition": "$space-4",
+        "marginLeft-Admonition-content": "$space-2",
         "backgroundColor-Blockquote": "$color-warn-200",
         "accentWidth-Blockquote": "3px",
         "accentColor-Blockquote": "$color-surface-500",
-        "padding-Blockquote": ".5rem",
-        "marginBottom-Blockquote": "1rem",
-        "marginBottom-Text-codefence": ".5rem",
-        "marginBottom-Text-markdown": ".5rem",
-        "marginTop-HtmlLi": "-0.5rem",
+        "padding-Blockquote": "$space-2",
+        "marginBottom-Blockquote": "$space-4",
+        "marginBottom-Text-codefence": "$space-2",
+        "marginBottom-Text-markdown": "$space-2",
+        "marginTop-HtmlLi": "$space-2",
+        "marginBottom-HtmlLi": "$space-2",
         light: {
         // --- No light-specific theme vars
         },

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

@@ -21,7 +21,6 @@ exports.OptionMd = (0, ComponentDefs_1.createMetadata)({
         enabled: (0, metadata_helpers_1.dEnabled)(),
         optionTemplate: (0, ComponentDefs_1.d)("This property is used to define a custom option template"),
     },
-    childrenAsTemplate: "optionTemplate"
 });
 const OptionNative = (0, react_1.memo)((props) => {
     const OptionType = (0, OptionTypeProvider_1.useOptionType)();

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

@@ -11,7 +11,8 @@ const renderers_1 = require("../../components-core/renderers");
 const themeVars_1 = require("../../components-core/theming/themeVars");
 const metadata_helpers_1 = require("../metadata-helpers");
 const container_helpers_1 = require("../container-helpers");
-const SelectNative_1 = require("../Select/SelectNative");
+const SelectNative_1 = require("./SelectNative");
+const react_select_1 = require("@radix-ui/react-select");
 const COMP = "Select";
 exports.SelectMd = (0, ComponentDefs_1.createMetadata)({
     description: "Provides a dropdown with a list of options to choose from.",
@@ -88,7 +89,7 @@ exports.selectComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP,
             }
             : undefined, optionRenderer: node.props.optionTemplate
             ? (item) => {
-                return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.props.optionTemplate, item: item, renderChild: renderChild }));
+                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) })) }));
             }
             : undefined, valueRenderer: node.props.valueTemplate
             ? (item, removeItem) => {

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

@@ -224,7 +224,7 @@ const SelectOption = react_1.default.forwardRef((option, ref) => {
         return () => onOptionRemove(option);
     }, [option, onOptionAdd, onOptionRemove]);
     return ((0, jsx_runtime_1.jsx)(react_select_1.Item, { ref: ref, className: Select_module_scss_1.default.selectItem, value: value + "", disabled: !enabled, children: (0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.selectItemContent, children: optionRenderer ? (optionRenderer({
-                label: (0, jsx_runtime_1.jsx)(react_select_1.ItemText, { children: label }),
+                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" }) }) })] })) }) }));

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

@@ -74,6 +74,12 @@ exports.TableMd = (0, ComponentDefs_1.createMetadata)({
             valueType: "boolean",
             defaultValue: false,
         },
+        noBottomBorder: {
+            description: `This property indicates whether the table should have a bottom border. When set to ` +
+                `\`true\`, the table does not have a bottom border. Otherwise, it has a bottom border.`,
+            valueType: "boolean",
+            defaultValue: false,
+        }
     },
     events: {
         sortingDidChange: (0, ComponentDefs_1.d)(`This event is fired when the table data sorting has changed. It has two arguments: ` +
@@ -175,7 +181,7 @@ const TableWithColumns = (0, react_1.forwardRef)(({ extractValue, node, renderCh
     const tableContent = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TableContext_1.TableContext.Provider, { value: tableContextValue, children: renderChild(node.children) }, tableKey), (0, jsx_runtime_1.jsx)(TableContext_1.TableContext.Provider, { value: columnRefresherContextValue, children: renderChild(node.children) }), (0, jsx_runtime_1.jsx)(TableNative_1.Table, { ref: ref, data: data, columns: columns, pageSizes: extractValue(node.props.pageSizes), rowsSelectable: extractValue.asOptionalBoolean(node.props.rowsSelectable), registerComponentApi: registerComponentApi, noDataRenderer: node.props.noDataTemplate &&
                     (() => {
                         return renderChild(node.props.noDataTemplate);
-                    }), hideNoDataView: node.props.noDataTemplate === null || node.props.noDataTemplate === "", loading: extractValue.asOptionalBoolean(node.props.loading), isPaginated: extractValue.asOptionalBoolean((_a = node.props) === null || _a === void 0 ? void 0 : _a.isPaginated), headerHeight: extractValue.asSize(node.props.headerHeight), rowDisabledPredicate: lookupSyncCallback(node.props.rowDisabledPredicate), sortBy: extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.sortBy), sortingDirection: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.sortDirection), iconSortAsc: extractValue.asOptionalString((_d = node.props) === null || _d === void 0 ? void 0 : _d.iconSortAsc), iconSortDesc: extractValue.asOptionalString((_e = node.props) === null || _e === void 0 ? void 0 : _e.iconSortDesc), iconNoSort: extractValue.asOptionalString((_f = node.props) === null || _f === void 0 ? void 0 : _f.iconNoSort), sortingDidChange: lookupEventHandler("sortingDidChange"), onSelectionDidChange: lookupEventHandler("selectionDidChange"), willSort: lookupEventHandler("willSort"), style: layoutCss, uid: node.uid, autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), hideHeader: extractValue.asOptionalBoolean(node.props.hideHeader), enableMultiRowSelection: extractValue.asOptionalBoolean(node.props.enableMultiRowSelection), alwaysShowSelectionHeader: extractValue.asOptionalBoolean(node.props.alwaysShowSelectionHeader) })] }));
+                    }), hideNoDataView: node.props.noDataTemplate === null || node.props.noDataTemplate === "", loading: extractValue.asOptionalBoolean(node.props.loading), isPaginated: extractValue.asOptionalBoolean((_a = node.props) === null || _a === void 0 ? void 0 : _a.isPaginated), headerHeight: extractValue.asSize(node.props.headerHeight), rowDisabledPredicate: lookupSyncCallback(node.props.rowDisabledPredicate), sortBy: extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.sortBy), sortingDirection: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.sortDirection), iconSortAsc: extractValue.asOptionalString((_d = node.props) === null || _d === void 0 ? void 0 : _d.iconSortAsc), iconSortDesc: extractValue.asOptionalString((_e = node.props) === null || _e === void 0 ? void 0 : _e.iconSortDesc), iconNoSort: extractValue.asOptionalString((_f = node.props) === null || _f === void 0 ? void 0 : _f.iconNoSort), sortingDidChange: lookupEventHandler("sortingDidChange"), onSelectionDidChange: lookupEventHandler("selectionDidChange"), willSort: lookupEventHandler("willSort"), style: layoutCss, uid: node.uid, autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), hideHeader: extractValue.asOptionalBoolean(node.props.hideHeader), enableMultiRowSelection: extractValue.asOptionalBoolean(node.props.enableMultiRowSelection), alwaysShowSelectionHeader: extractValue.asOptionalBoolean(node.props.alwaysShowSelectionHeader), noBottomBorder: extractValue.asOptionalBoolean(node.props.noBottomBorder) })] }));
     if (selectionContext === null) {
         return (0, jsx_runtime_1.jsx)(SelectionStoreNative_1.StandaloneSelectionStore, { children: tableContent });
     }

package/dist/scripts/src/components/Table/TableNative.js

@@ -73,7 +73,7 @@ const getCommonPinningStyles = (column) => {
     };
 };
 // eslint-disable-next-line react/display-name
-exports.Table = (0, react_1.forwardRef)(({ data = constants_1.EMPTY_ARRAY, columns = constants_1.EMPTY_ARRAY, isPaginated = false, loading = false, headerHeight, rowsSelectable = false, enableMultiRowSelection = true, pageSizes = DEFAULT_PAGE_SIZES, rowDisabledPredicate = defaultIsRowDisabled, sortBy, sortingDirection = "ascending", iconSortAsc, iconSortDesc, iconNoSort, sortingDidChange, willSort, style, noDataRenderer, autoFocus = false, hideHeader = false, hideNoDataView = false, alwaysShowSelectionHeader = false, registerComponentApi, onSelectionDidChange,
+exports.Table = (0, react_1.forwardRef)(({ data = constants_1.EMPTY_ARRAY, columns = constants_1.EMPTY_ARRAY, isPaginated = false, loading = false, headerHeight, rowsSelectable = false, enableMultiRowSelection = true, pageSizes = DEFAULT_PAGE_SIZES, rowDisabledPredicate = defaultIsRowDisabled, sortBy, sortingDirection = "ascending", iconSortAsc, iconSortDesc, iconNoSort, sortingDidChange, willSort, style, noDataRenderer, autoFocus = false, hideHeader = false, hideNoDataView = false, alwaysShowSelectionHeader = false, registerComponentApi, onSelectionDidChange, noBottomBorder = false,
 // cols
  }, forwardedRef) => {
     var _a, _b, _c, _d;
@@ -423,6 +423,7 @@ exports.Table = (0, react_1.forwardRef)(({ data = constants_1.EMPTY_ARRAY, colum
                                         [Table_module_scss_1.default.selected]: row.getIsSelected(),
                                         [Table_module_scss_1.default.focused]: focusedIndex === rowIndex,
                                         [Table_module_scss_1.default.disabled]: rowDisabledPredicate(row.original),
+                                        [Table_module_scss_1.default.noBottomBorder]: noBottomBorder,
                                     }), ref: (el) => {
                                         if (el && estimatedHeightRef.current === null) {
                                             estimatedHeightRef.current = Math.round(el.getBoundingClientRect().height);

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/LoaderComponent.js

@@ -38,6 +38,9 @@ function LoaderComponent({ node, state, dispatch, lookupAction, lookupSyncCallba
     const memoedLoaderInProgressChanged = (0, react_1.useCallback)((isInProgress) => {
         dispatch(loaderInProgressChanged(uid, isInProgress));
     }, [dispatch, uid]);
+    const memoedLoaderIsRefetchingChanged = (0, react_1.useCallback)((isRefetching) => {
+        dispatch(loaderIsRefetchingChanged(uid, isRefetching));
+    }, [dispatch, uid]);
     const memoedLoaderLoaded = (0, react_1.useCallback)((data, pageInfo) => {
         dispatch(loaderLoaded(uid, data, pageInfo));
     }, [dispatch, uid]);
@@ -54,6 +57,7 @@ function LoaderComponent({ node, state, dispatch, lookupAction, lookupSyncCallba
         state,
         dispatch,
         loaderInProgressChanged: memoedLoaderInProgressChanged,
+        loaderIsRefetchingChanged: memoedLoaderIsRefetchingChanged,
         loaderLoaded: memoedLoaderLoaded,
         loaderError: memoedLoaderError,
         extractValue: valueExtractor,
@@ -72,6 +76,16 @@ function loaderInProgressChanged(uid, isInProgress) {
         },
     };
 }
+// Signs that a particular loader (`uid`) has just started refetching its data (or executing its operation).
+function loaderIsRefetchingChanged(uid, isRefetching) {
+    return {
+        type: containers_1.ContainerActionKind.LOADER_IS_REFETCHING_CHANGED,
+        payload: {
+            uid,
+            isRefetching,
+        },
+    };
+}
 // Signs that a particular loader (`uid`) has just fetched its data (`pageInfo`) successfully.
 function loaderLoaded(uid, data, pageInfo) {
     return {

package/dist/scripts/src/components-core/abstractions/containers.js

@@ -9,6 +9,7 @@ var ContainerActionKind;
 (function (ContainerActionKind) {
     ContainerActionKind["LOADER_LOADED"] = "ContainerActionKind:LOADER_LOADED";
     ContainerActionKind["LOADER_IN_PROGRESS_CHANGED"] = "ContainerActionKind:LOADER_IN_PROGRESS_CHANGED";
+    ContainerActionKind["LOADER_IS_REFETCHING_CHANGED"] = "ContainerActionKind:LOADER_IS_REFETCHING_CHANGED";
     ContainerActionKind["LOADER_ERROR"] = "ContainerActionKind:LOADER_ERROR";
     ContainerActionKind["EVENT_HANDLER_STARTED"] = "ContainerActionKind:EVENT_HANDLER_STARTED";
     ContainerActionKind["EVENT_HANDLER_COMPLETED"] = "ContainerActionKind:EVENT_HANDLER_COMPLETED";

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, loaderLoaded, loaderError, state, doNotRemoveNulls, }) {
+function ApiLoader({ loader, loaderInProgressChanged, loaderIsRefetchingChanged, loaderLoaded, loaderError, state, doNotRemoveNulls, }) {
     const appContext = (0, AppContext_1.useAppContext)();
     const url = (0, extractParam_1.extractParam)(state, loader.props.url, appContext);
     const loadable = !!url;
@@ -29,7 +29,6 @@ function ApiLoader({ loader, loaderInProgressChanged, loaderLoaded, loaderError,
         if (!loadable) {
             return;
         }
-        console.log("doLoad ", url);
         const response = yield fetch(url);
         if (loader.props.raw) {
             return yield response.text();
@@ -40,7 +39,7 @@ function ApiLoader({ loader, loaderInProgressChanged, loaderLoaded, loaderError,
         }
         return responseObj;
     }), [doNotRemoveNulls, loadable, loader.props.raw, url]);
-    return ((0, jsx_runtime_1.jsx)(Loader_1.Loader, { state: state, loader: loader, loaderInProgressChanged: loaderInProgressChanged, 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 }));
 }
 const ApiLoaderMd = (0, ComponentDefs_1.createMetadata)({
     description: `Represents a loader that calls an API through an HTTP/HTTPS GET request`,
@@ -49,6 +48,6 @@ const ApiLoaderMd = (0, ComponentDefs_1.createMetadata)({
         raw: (0, ComponentDefs_1.d)("If true, the loader returns the raw text response instead of parsing it as JSON"),
     },
 });
-exports.apiLoaderRenderer = (0, renderers_1.createLoaderRenderer)("ApiLoader", ({ loader, state, dispatch, loaderInProgressChanged, loaderLoaded, loaderError }) => {
-    return ((0, jsx_runtime_1.jsx)(ApiLoader, { loader: loader, state: state, loaderInProgressChanged: loaderInProgressChanged, loaderLoaded: loaderLoaded, loaderError: loaderError }));
+exports.apiLoaderRenderer = (0, renderers_1.createLoaderRenderer)("ApiLoader", ({ loader, state, loaderInProgressChanged, loaderIsRefetchingChanged, loaderLoaded, loaderError }) => {
+    return ((0, jsx_runtime_1.jsx)(ApiLoader, { loader: loader, state: state, loaderInProgressChanged: loaderInProgressChanged, loaderIsRefetchingChanged: loaderIsRefetchingChanged, loaderLoaded: loaderLoaded, loaderError: loaderError }));
 }, ApiLoaderMd);

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, loaderLoaded, loaderError, transformResult, }) {
+function DataLoader({ loader, state, registerComponentApi, onLoaded, onError, loaderInProgressChanged, loaderIsRefetchingChanged, loaderLoaded, loaderError, transformResult, }) {
     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, 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, 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 }, 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("")));
 }
 exports.DataLoaderMd = (0, ComponentDefs_1.createMetadata)({
     description: "This component manages data fetching from a web API",
@@ -316,11 +316,11 @@ exports.DataLoaderMd = (0, ComponentDefs_1.createMetadata)({
         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, loaderError, registerComponentApi, lookupAction, lookupSyncCallback, }) => {
+exports.dataLoaderRenderer = (0, renderers_1.createLoaderRenderer)("DataLoader", ({ loader, state, loaderLoaded, loaderInProgressChanged, loaderIsRefetchingChanged, loaderError, registerComponentApi, lookupAction, lookupSyncCallback, }) => {
     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, 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" }) }));
 }, exports.DataLoaderMd);

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

@@ -21,19 +21,17 @@ const Loader_1 = require("./Loader");
 /**
  * Represents a non-displayed React component, which handles the specified API loader
  */
-function ExternalDataLoader({ loader, loaderInProgressChanged, loaderError, loaderLoaded, state, doNotRemoveNulls, }) {
+function ExternalDataLoader({ loader, loaderInProgressChanged, loaderIsRefetchingChanged, loaderError, loaderLoaded, state, doNotRemoveNulls, }) {
     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);
     const data = (0, extractParam_1.extractParam)(state, loader.props.data, appContext);
-    console.log("resolve");
     const url = (0, extractParam_1.extractParam)(state, loader.props.url, appContext);
     const urlLoadable = !!url;
     const doLoad = (0, react_1.useCallback)(() => __awaiter(this, void 0, void 0, function* () {
         if (!urlLoadable) {
             return;
         }
-        console.log("doLoad ", url, data);
         const response = yield fetch(url, {
             method: method || "POST",
             headers: Object.assign({ "Content-Type": "application/json" }, headers),
@@ -43,10 +41,9 @@ function ExternalDataLoader({ loader, loaderInProgressChanged, loaderError, load
         if (!doNotRemoveNulls) {
             (0, misc_1.removeNullProperties)(responseObj);
         }
-        console.log("result", responseObj);
         return responseObj;
     }), [urlLoadable, headers, data, url, method, doNotRemoveNulls]);
-    return ((0, jsx_runtime_1.jsx)(Loader_1.Loader, { state: state, loader: loader, loaderInProgressChanged: loaderInProgressChanged, 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 }));
 }
 exports.ExternalDataLoaderMd = (0, ComponentDefs_1.createMetadata)({
     description: `Represents a loader that calls an API through an HTTP/HTTPS GET request`,
@@ -57,6 +54,6 @@ exports.ExternalDataLoaderMd = (0, ComponentDefs_1.createMetadata)({
         data: (0, ComponentDefs_1.d)("The body of the request to be sent as JSON"),
     },
 });
-exports.externalDataLoaderRenderer = (0, renderers_1.createLoaderRenderer)("ExternalDataLoader", ({ loader, state, loaderInProgressChanged, loaderError, loaderLoaded }) => {
-    return ((0, jsx_runtime_1.jsx)(ExternalDataLoader, { loader: loader, state: state, loaderInProgressChanged: loaderInProgressChanged, loaderLoaded: loaderLoaded, loaderError: loaderError }));
+exports.externalDataLoaderRenderer = (0, renderers_1.createLoaderRenderer)("ExternalDataLoader", ({ loader, state, loaderInProgressChanged, loaderIsRefetchingChanged, loaderError, loaderLoaded }) => {
+    return ((0, jsx_runtime_1.jsx)(ExternalDataLoader, { loader: loader, state: state, loaderInProgressChanged: loaderInProgressChanged, loaderIsRefetchingChanged: loaderIsRefetchingChanged, loaderLoaded: loaderLoaded, loaderError: loaderError }));
 }, exports.ExternalDataLoaderMd);

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

@@ -16,9 +16,10 @@ 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, loaderError, transformResult }) {
+function Loader({ state, loader, loaderFn, queryId, pollIntervalInSeconds, registerComponentApi, onLoaded, loaderLoaded, loaderInProgressChanged, loaderIsRefetchingChanged, loaderError, transformResult, }) {
     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
@@ -26,9 +27,10 @@ function Loader({ state, loader, loaderFn, queryId, pollIntervalInSeconds, regis
     // --- 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)({
-        queryKey: (0, react_1.useMemo)(() => queryId ? queryId : [uid, (0, extractParam_1.extractParam)(state, loader.props, appContext)], [appContext, loader.props, queryId, state, uid]),
+        queryKey: (0, react_1.useMemo)(() => (queryId ? queryId : [uid, (0, extractParam_1.extractParam)(state, loader.props, appContext)]), [appContext, loader.props, queryId, state, uid]),
+        structuralSharing: false,
         queryFn: (0, react_1.useCallback)((_a) => __awaiter(this, [_a], void 0, function* ({ signal }) {
-            //("[Loader queryFn] Starting to fetch data...");
+            // console.log("[Loader queryFn] Starting to fetch data...");
             try {
                 const newVar = yield loaderFn(signal);
                 //console.log("[Loader queryFn] Data received:", newVar);
@@ -58,12 +60,13 @@ function Loader({ state, loader, loaderFn, queryId, pollIntervalInSeconds, regis
             //console.log("[Loader select] Final result:", finalResult);
             return finalResult;
         }, [loader.props.resultSelector, transformResult]),
-        retry: false
+        retry: false,
     });
     (0, react_1.useEffect)(() => {
         let intervalId;
         if (pollIntervalInSeconds) {
             intervalId = setInterval(() => {
+                setIsRefetching(true);
                 refetch();
             }, pollIntervalInSeconds * 1000);
         }
@@ -79,10 +82,14 @@ function Loader({ state, loader, loaderFn, queryId, pollIntervalInSeconds, regis
         loaderInProgressChanged(isFetching);
     }, [isFetching, loaderInProgressChanged]);
     (0, react_1.useLayoutEffect)(() => {
-        // console.log("[Loader] useLayoutEffect status:", status);
-        // console.log("[Loader] useLayoutEffect data:", data);
-        // console.log("[Loader] useLayoutEffect prevData:", prevData);
-        // console.log("[Loader] useLayoutEffect data !== prevData:", data !== prevData);
+        loaderIsRefetchingChanged(isRefetching);
+    }, [isRefetching, loaderIsRefetchingChanged]);
+    (0, react_1.useLayoutEffect)(() => {
+        //console.log("isRefetching", isRefetching);
+        //console.log("[Loader] useLayoutEffect status:", status);
+        //console.log("[Loader] useLayoutEffect data:", data);
+        //console.log("[Loader] useLayoutEffect prevData:", prevData);
+        //console.log("[Loader] useLayoutEffect data !== prevData:", data !== prevData);
         if (status === "success" && data !== prevData) {
             //console.log("[Loader] Calling loaderLoaded with data:", data);
             loaderLoaded(data);
@@ -92,14 +99,16 @@ function Loader({ state, loader, loaderFn, queryId, pollIntervalInSeconds, regis
             setTimeout(() => {
                 // console.log("[Loader] Calling onLoaded with data:", data);
                 // console.log("[Loader] onLoaded function exists:", !!onLoaded);
-                onLoaded === null || onLoaded === void 0 ? void 0 : onLoaded(data);
+                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]);
+    }, [data, error, loaderError, loaderLoaded, onLoaded, prevData, prevError, status, isRefetching]);
     (0, react_1.useLayoutEffect)(() => {
         return () => {
             loaderLoaded(undefined);
@@ -107,7 +116,10 @@ function Loader({ state, loader, loaderFn, queryId, pollIntervalInSeconds, regis
     }, [loaderLoaded, uid]);
     (0, react_1.useEffect)(() => {
         registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
-            refetch,
+            refetch: (options) => __awaiter(this, void 0, void 0, function* () {
+                setIsRefetching(true);
+                refetch(options);
+            }),
             update: (updater) => __awaiter(this, void 0, void 0, function* () {
                 var _a, _b;
                 const oldData = (_a = appContext.queryClient) === null || _a === void 0 ? void 0 : _a.getQueryData(queryId);