xmlui 0.9.12 → 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/Form/FormNative.js

@@ -140,7 +140,6 @@ const formReducer = (0, immer_1.default)((state, action) => {
             break;
         }
         case formActions_1.FormActionKind.BACKEND_VALIDATION_ARRIVED: {
-            //console.log(state.validationResults[field]) //action.payload.fieldValidationResults
             state.submitInProgress = false;
             state.generalValidationResults = action.payload.generalValidationResults;
             Object.keys(state.validationResults).forEach((key) => {
@@ -241,7 +240,14 @@ const Form = (0, react_2.forwardRef)(function ({ formState, dispatch, initialVal
         const prevFocused = document.activeElement;
         dispatch((0, formActions_1.formSubmitting)());
         try {
-            yield (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(formState.subject, {
+            // --- Remove the properties from formState.subject where the property name ends with UNBOUND_FIELD_SUFFIX
+            const filteredSubject = Object.entries(formState.subject).reduce((acc, [key, value]) => {
+                if (!key.endsWith(formActions_1.UNBOUND_FIELD_SUFFIX)) {
+                    acc[key] = value;
+                }
+                return acc;
+            }, {});
+            yield (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(filteredSubject, {
                 passAsDefaultBody: true,
             }));
             dispatch((0, formActions_1.formSubmitted)());

package/dist/scripts/src/components/Form/formActions.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormActionKind = void 0;
+exports.FormActionKind = exports.UNBOUND_FIELD_SUFFIX = void 0;
 exports.fieldInitialized = fieldInitialized;
 exports.fieldChanged = fieldChanged;
 exports.fieldFocused = fieldFocused;
@@ -12,6 +12,7 @@ exports.formSubmitting = formSubmitting;
 exports.formSubmitted = formSubmitted;
 exports.formReset = formReset;
 exports.backendValidationArrived = backendValidationArrived;
+exports.UNBOUND_FIELD_SUFFIX = "__UNBOUND_FIELD__";
 var FormActionKind;
 (function (FormActionKind) {
     FormActionKind["FIELD_LOST_FOCUS"] = "FormActionKind:FIELD_LOST_FOCUS";
@@ -99,16 +100,16 @@ function formReset(originalSubject) {
     return {
         type: FormActionKind.RESET,
         payload: {
-            originalSubject
+            originalSubject,
         },
     };
 }
-function backendValidationArrived({ generalValidationResults = [], fieldValidationResults = {} }) {
+function backendValidationArrived({ generalValidationResults = [], fieldValidationResults = {}, }) {
     return {
         type: FormActionKind.BACKEND_VALIDATION_ARRIVED,
         payload: {
             generalValidationResults,
-            fieldValidationResults
+            fieldValidationResults,
         },
     };
 }

package/dist/scripts/src/components/FormItem/FormItemNative.js

@@ -47,32 +47,36 @@ exports.defaultProps = {
 };
 exports.FormItem = (0, react_1.memo)(function FormItem(_a) {
     var { style, bindTo, type = exports.defaultProps.type, label, enabled = exports.defaultProps.enabled, labelPosition, labelWidth, labelBreak = exports.defaultProps.labelBreak, children, validations, onValidate, customValidationsDebounce = exports.defaultProps.customValidationsDebounce, validationMode, registerComponentApi, maxTextLength, inputRenderer } = _a, rest = __rest(_a, ["style", "bindTo", "type", "label", "enabled", "labelPosition", "labelWidth", "labelBreak", "children", "validations", "onValidate", "customValidationsDebounce", "validationMode", "registerComponentApi", "maxTextLength", "inputRenderer"]);
+    const defaultId = (0, react_1.useId)();
+    const [formItemId, setFormItemId] = (0, react_1.useState)(bindTo);
     const labelWidthValue = (0, FormContext_1.useFormContextPart)((value) => labelWidth || value.itemLabelWidth);
     const labelBreakValue = (0, FormContext_1.useFormContextPart)((value) => labelBreak !== undefined ? labelBreak : value.itemLabelBreak);
     const labelPositionValue = (0, FormContext_1.useFormContextPart)((value) => labelPosition || value.itemLabelPosition || DEFAULT_LABEL_POSITIONS[type]);
-    const initialValueFromSubject = (0, FormContext_1.useFormContextPart)((value) => (0, FormNative_1.getByPath)(value.originalSubject, bindTo));
+    const initialValueFromSubject = (0, FormContext_1.useFormContextPart)((value) => (0, FormNative_1.getByPath)(value.originalSubject, formItemId));
     const initialValue = initialValueFromSubject === undefined ? rest.initialValue : initialValueFromSubject;
-    const value = (0, FormContext_1.useFormContextPart)((value) => (0, FormNative_1.getByPath)(value.subject, bindTo));
-    const validationResult = (0, FormContext_1.useFormContextPart)((value) => value.validationResults[bindTo]);
+    const value = (0, FormContext_1.useFormContextPart)((value) => (0, FormNative_1.getByPath)(value.subject, formItemId));
+    const validationResult = (0, FormContext_1.useFormContextPart)((value) => value.validationResults[formItemId]);
     const dispatch = (0, FormContext_1.useFormContextPart)((value) => value.dispatch);
     const formEnabled = (0, FormContext_1.useFormContextPart)((value) => value.enabled);
     const isEnabled = enabled && formEnabled;
     (0, react_1.useEffect)(() => {
-        dispatch((0, formActions_1.fieldInitialized)(bindTo, initialValue));
+        const newId = bindTo || `${defaultId}${formActions_1.UNBOUND_FIELD_SUFFIX}`;
+        setFormItemId(newId);
+        dispatch((0, formActions_1.fieldInitialized)(newId, initialValue));
     }, [bindTo, dispatch, initialValue]);
-    (0, Validations_1.useValidation)(validations, onValidate, value, dispatch, bindTo, customValidationsDebounce);
+    (0, Validations_1.useValidation)(validations, onValidate, value, dispatch, formItemId, customValidationsDebounce);
     const onStateChange = (0, react_1.useCallback)(({ value }, options) => {
         //we already handled the initial value in the useEffect with fieldInitialized(...);
         if (!(options === null || options === void 0 ? void 0 : options.initial)) {
-            dispatch((0, formActions_1.fieldChanged)(bindTo, value));
+            dispatch((0, formActions_1.fieldChanged)(formItemId, value));
         }
-    }, [bindTo, dispatch]);
+    }, [formItemId, dispatch]);
     (0, react_1.useEffect)(() => {
         return () => {
-            dispatch((0, formActions_1.fieldRemoved)(bindTo));
+            dispatch((0, formActions_1.fieldRemoved)(formItemId));
         };
-    }, [bindTo, dispatch]);
-    const { validationStatus, isHelperTextShown } = (0, Validations_1.useValidationDisplay)(bindTo, value, validationResult, validationMode);
+    }, [formItemId, dispatch]);
+    const { validationStatus, isHelperTextShown } = (0, Validations_1.useValidationDisplay)(formItemId, value, validationResult, validationMode);
     let formControl = null;
     switch (type) {
         case "select": {
@@ -150,10 +154,10 @@ exports.FormItem = (0, react_1.memo)(function FormItem(_a) {
         }
     }
     const onFocus = (0, misc_1.useEvent)(() => {
-        dispatch((0, formActions_1.fieldFocused)(bindTo));
+        dispatch((0, formActions_1.fieldFocused)(formItemId));
     });
     const onBlur = (0, misc_1.useEvent)(() => {
-        dispatch((0, formActions_1.fieldLostFocus)(bindTo));
+        dispatch((0, formActions_1.fieldLostFocus)(formItemId));
     });
     const [animateContainerRef] = (0, react_2.useAutoAnimate)({ duration: 100 });
     return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { labelPosition: labelPositionValue, label: label, labelWidth: labelWidthValue, labelBreak: labelBreakValue, enabled: isEnabled, required: validations.required, validationInProgress: validationResult === null || validationResult === void 0 ? void 0 : validationResult.partial, onFocus: onFocus, onBlur: onBlur, style: style, validationResult: (0, jsx_runtime_1.jsx)("div", { ref: animateContainerRef, children: isHelperTextShown &&

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

@@ -28,17 +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",
+        "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/Markdown/MarkdownNative.js

@@ -27,7 +27,6 @@ const HtmlTags_module_scss_1 = __importDefault(require("../HtmlTags/HtmlTags.mod
 const HeadingNative_1 = require("../Heading/HeadingNative");
 const TextNative_1 = require("../Text/TextNative");
 const LinkNative_1 = require("../Link/LinkNative");
-const ImageNative_1 = require("../Image/ImageNative");
 const Toggle_1 = require("../Toggle/Toggle");
 const ScriptingSourceTree_1 = require("../../abstractions/scripting/ScriptingSourceTree");
 exports.Markdown = (0, react_1.memo)(function Markdown({ extractValue, removeIndents = true, children, style, }) {
@@ -44,6 +43,10 @@ exports.Markdown = (0, react_1.memo)(function Markdown({ extractValue, removeInd
                     var { children, node } = _a, props = __rest(_a, ["children", "node"]);
                     return (0, jsx_runtime_1.jsx)("video", Object.assign({ className: HtmlTags_module_scss_1.default.htmlVideo }, props, { children: children }));
                 },
+                img(_a) {
+                    var { children, node } = _a, props = __rest(_a, ["children", "node"]);
+                    return (0, jsx_runtime_1.jsx)("img", Object.assign({ className: HtmlTags_module_scss_1.default.htmlImage }, props, { children: children }));
+                },
                 h1({ children }) {
                     return (0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, { level: "h1", children: children });
                 },
@@ -83,14 +86,17 @@ exports.Markdown = (0, react_1.memo)(function Markdown({ extractValue, removeInd
                 blockquote({ children }) {
                     return (0, jsx_runtime_1.jsx)(Blockquote, { children: children });
                 },
-                ol({ children }) {
-                    return (0, jsx_runtime_1.jsx)("ol", { className: HtmlTags_module_scss_1.default.htmlOl, children: children });
+                ol(_a) {
+                    var { children, node } = _a, props = __rest(_a, ["children", "node"]);
+                    return (0, jsx_runtime_1.jsx)("ol", Object.assign({ className: HtmlTags_module_scss_1.default.htmlOl }, props, { children: children }));
                 },
-                ul({ children }) {
-                    return (0, jsx_runtime_1.jsx)("ul", { className: HtmlTags_module_scss_1.default.htmlUl, children: children });
+                ul(_a) {
+                    var { children, node } = _a, props = __rest(_a, ["children", "node"]);
+                    return (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: HtmlTags_module_scss_1.default.htmlUl }, props, { children: children }));
                 },
-                li({ children }) {
-                    return (0, jsx_runtime_1.jsx)("li", { children: children }); // No custom styling for li elements
+                li(_a) {
+                    var { children, node } = _a, props = __rest(_a, ["children", "node"]);
+                    return (0, jsx_runtime_1.jsx)("li", Object.assign({ className: HtmlTags_module_scss_1.default.htmlLi }, props, { children: children }));
                 },
                 hr() {
                     return (0, jsx_runtime_1.jsx)(HorizontalRule, {});
@@ -100,9 +106,6 @@ exports.Markdown = (0, react_1.memo)(function Markdown({ extractValue, removeInd
                     const allowedProps = ['style', 'disabled', 'active', 'icon', 'onClick'];
                     return ((0, jsx_runtime_1.jsx)(LinkNative_1.LocalLink, Object.assign({ to: href }, allowedProps, { children: children })));
                 },
-                img({ src, alt }) {
-                    return (0, jsx_runtime_1.jsx)(ImageNative_1.Image, { src: src, alt: alt });
-                },
                 // TODO: somehow get the label from the containing li element
                 input({ disabled, checked }) {
                     return ((0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { variant: "checkbox", readOnly: disabled, value: checked }));

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

@@ -7,7 +7,7 @@ const renderers_1 = require("../../components-core/renderers");
 const SelectionStoreNative_1 = require("./SelectionStoreNative");
 const COMP = "SelectionStore";
 exports.SelectionStoreMd = (0, ComponentDefs_1.createMetadata)({
-    status: "deprecated",
+    status: "experimental",
     description: `The \`${COMP}\` is a non-visual component that may wrap components (items) and manage ` +
         `their selection state to accommodate the usage of other actions.`,
     props: {

package/dist/scripts/src/components/SelectionStore/SelectionStoreNative.js

@@ -41,28 +41,31 @@ const lodash_es_1 = require("lodash-es");
 const misc_1 = require("../../components-core/utils/misc");
 const constants_1 = require("../../components-core/constants");
 const EMPTY_SELECTION_STATE = {
-    value: constants_1.EMPTY_ARRAY
+    value: constants_1.EMPTY_ARRAY,
 };
 const StandaloneSelectionStore = ({ children }) => {
     const [selection, setSelection] = (0, react_1.useState)(EMPTY_SELECTION_STATE);
-    return (0, jsx_runtime_1.jsx)(exports.SelectionStore, { updateState: setSelection, selectedItems: selection.value, children: children });
+    return ((0, jsx_runtime_1.jsx)(exports.SelectionStore, { updateState: setSelection, selectedItems: selection.value, children: children }));
 };
 exports.StandaloneSelectionStore = StandaloneSelectionStore;
 const SelectionStore = ({ updateState = lodash_es_1.noop, idKey = "id", children, selectedItems = constants_1.EMPTY_ARRAY, registerComponentApi = lodash_es_1.noop, }) => {
     const [items, setItems] = (0, react_1.useState)(selectedItems);
     const valueInitializedRef = (0, react_1.useRef)(false);
     const refreshSelection = (0, misc_1.useEvent)((allItems = constants_1.EMPTY_ARRAY) => {
-        setItems(allItems);
-        let value = allItems.filter((item) => !!selectedItems.find((si) => si[idKey] === item[idKey]));
-        if (!(0, lodash_es_1.isEqual)(selectedItems, value) || !valueInitializedRef.current) {
+        const safeAllItems = allItems || constants_1.EMPTY_ARRAY;
+        const safeSelectedItems = selectedItems || constants_1.EMPTY_ARRAY;
+        setItems(safeAllItems);
+        let value = safeAllItems.filter((item) => !!safeSelectedItems.find((si) => si && item && si[idKey] === item[idKey]));
+        if (!(0, lodash_es_1.isEqual)(safeSelectedItems, value) || !valueInitializedRef.current) {
             valueInitializedRef.current = true;
             updateState({
-                value: value,
+                value,
             });
         }
     });
     const setSelectedRowIds = (0, misc_1.useEvent)((rowIds) => {
-        updateState({ value: items.filter((item) => rowIds.includes(item[idKey])) });
+        const safeItems = items || constants_1.EMPTY_ARRAY;
+        updateState({ value: safeItems.filter((item) => rowIds.includes(item[idKey])) });
     });
     const clearSelection = (0, misc_1.useEvent)(() => {
         setSelectedRowIds(constants_1.EMPTY_ARRAY);

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