xmlui 0.9.13 → 0.9.14

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/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-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);

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, loaderError, loaderLoaded, state, }) {
+function ApiLoader({ loader, loaderInProgressChanged, loaderIsRefetchingChanged, loaderError, loaderLoaded, state, }) {
     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, loaderError, loaderLoaded,
         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, 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.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, loaderLoaded: loaderLoaded, loaderError: loaderError }));
+    return ((0, jsx_runtime_1.jsx)(ApiLoader, { loader: loader, state: state, loaderInProgressChanged: loaderInProgressChanged, loaderIsRefetchingChanged: loaderInProgressChanged, loaderLoaded: loaderLoaded, loaderError: loaderError }));
 }, exports.MockLoaderMd);

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

@@ -49,16 +49,17 @@ 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, loaderLoaded, loaderError, transformResult, }) {
+function PageableLoader({ state, loader, loaderFn, queryId, registerComponentApi, pollIntervalInSeconds, onLoaded, loaderInProgressChanged, loaderIsRefetchingChanged, loaderLoaded, loaderError, transformResult, }) {
     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;
         if (prevPageSelector) {
-            prevPageParam = (0, extractParam_1.extractParam)({ $response: firstPage.filter(item => !item._optimisticValue) }, prevPageSelector.startsWith("{") ? prevPageSelector : `{$response.${prevPageSelector}}`);
+            prevPageParam = (0, extractParam_1.extractParam)({ $response: firstPage.filter((item) => !item._optimisticValue) }, prevPageSelector.startsWith("{") ? prevPageSelector : `{$response.${prevPageSelector}}`);
         }
         if (!prevPageParam) {
             return undefined;
@@ -130,6 +131,9 @@ function PageableLoader({ state, loader, loaderFn, queryId, registerComponentApi
     (0, react_1.useLayoutEffect)(() => {
         loaderInProgressChanged(isFetching); //TODO isFetchingPrevPage / nextPage
     }, [isFetching, loaderInProgressChanged]);
+    (0, react_1.useLayoutEffect)(() => {
+        loaderIsRefetchingChanged(isRefetching); //TODO isFetchingPrevPage / nextPage
+    }, [isRefetching, loaderIsRefetchingChanged]);
     const pageInfo = (0, react_1.useMemo)(() => {
         return {
             hasPrevPage: hasPreviousPage,
@@ -151,11 +155,13 @@ function PageableLoader({ state, loader, loaderFn, queryId, registerComponentApi
             // It works, because useLayoutEffect will run synchronously after the render, and the onLoaded callback will have
             // access to the latest loader value
             setTimeout(() => {
-                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" && prevError !== error) {
             loaderError(error);
+            setIsRefetching(false);
         }
     }, [
         data,
@@ -173,6 +179,7 @@ function PageableLoader({ state, loader, loaderFn, queryId, registerComponentApi
         let intervalId;
         if (pollIntervalInSeconds) {
             intervalId = setInterval(() => {
+                setIsRefetching(true);
                 refetch();
             }, pollIntervalInSeconds * 1000);
         }
@@ -192,7 +199,10 @@ function PageableLoader({ state, loader, loaderFn, queryId, registerComponentApi
         registerComponentApi({
             fetchPrevPage,
             fetchNextPage: stableFetchNextPage,
-            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);

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

@@ -44,6 +44,11 @@ function createContainerReducer(debugView) {
                 storeNextValue(state[uid]);
                 break;
             }
+            case containers_1.ContainerActionKind.LOADER_IS_REFETCHING_CHANGED: {
+                state[uid] = Object.assign(Object.assign({}, state[uid]), { isRefetching: action.payload.isRefetching });
+                storeNextValue(state[uid]);
+                break;
+            }
             case containers_1.ContainerActionKind.LOADER_LOADED: {
                 const { data, pageInfo } = action.payload;
                 state[uid] = {
@@ -98,7 +103,9 @@ function createContainerReducer(debugView) {
                     let tempValueInLocalVars = localVars;
                     (0, lodash_es_1.setWith)(state, path, value, (nsValue, key, nsObject) => {
                         tempValueInLocalVars = tempValueInLocalVars === null || tempValueInLocalVars === void 0 ? void 0 : tempValueInLocalVars[key];
-                        if (nsValue === undefined && tempValueInLocalVars === undefined && (0, lodash_es_1.isPlainObject)(target)) {
+                        if (nsValue === undefined &&
+                            tempValueInLocalVars === undefined &&
+                            (0, lodash_es_1.isPlainObject)(target)) {
                             // if we are setting a new object's key, lodash defaults it to an array, if the key is a number.
                             // This way we can force it to be an object.
                             // (example: we have an empty object in vars called usersTyped: {}, we set usersTyped[1] = Date.now().
@@ -126,10 +133,9 @@ function createContainerReducer(debugView) {
                 prevState,
                 nextState,
             };
-            // TODO: Logging to the console is a temporary solution. We should use a proper 
+            // TODO: Logging to the console is a temporary solution. We should use a proper
             // logging mechanism. Nonetheless, this works only with state transition logging
             // enabled (which is disabled by default).
-            console.log("Transition", loggedTransition);
             if (debugView.stateTransitions) {
                 if (debugView.stateTransitions.length >= MAX_STATE_TRANSITION_LENGTH) {
                     debugView.stateTransitions.shift();