xmlui 0.9.15 → 0.9.16

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

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

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

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

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

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

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

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

package/dist/scripts/src/components-core/theming/layout-resolver.js

@@ -25,7 +25,7 @@ function resolveLayoutProps(layoutProps = constants_1.EMPTY_OBJECT, layoutContex
     }
     // --- Dimensions
     collectCss("width");
-    const horizontalStarSize = getHorizontalStartSize(result.cssProps.width, layoutContext);
+    const horizontalStarSize = getHorizontalStarSize(result.cssProps.width, layoutContext);
     if (horizontalStarSize !== null) {
         // --- We use "flex" when width is in start-size and allow shrinking
         result.cssProps.flex = horizontalStarSize;
@@ -34,7 +34,7 @@ function resolveLayoutProps(layoutProps = constants_1.EMPTY_OBJECT, layoutContex
     collectCss("minWidth");
     collectCss("maxWidth");
     collectCss("height");
-    const verticalStarSize = getVerticalStartSize(result.cssProps.height, layoutContext);
+    const verticalStarSize = getVerticalStarSize(result.cssProps.height, layoutContext);
     if (verticalStarSize !== null) {
         // --- We use "flex" when width is in start-size and allow shrinking
         result.cssProps.flex = verticalStarSize;
@@ -236,7 +236,7 @@ function resolveLayoutProps(layoutProps = constants_1.EMPTY_OBJECT, layoutContex
         }
     }
     // --- Checks if the specified size is a star size and the orientation is horizontal
-    function getHorizontalStartSize(size, layoutContext) {
+    function getHorizontalStarSize(size, layoutContext) {
         if (!size)
             return null;
         const orientation = getOrientation(layoutContext);
@@ -245,7 +245,7 @@ function resolveLayoutProps(layoutProps = constants_1.EMPTY_OBJECT, layoutContex
             : null;
     }
     // --- Checks if the specified size is a star size and the orientation is vertical
-    function getVerticalStartSize(size, layoutContext) {
+    function getVerticalStarSize(size, layoutContext) {
         if (!size)
             return null;
         const orientation = getOrientation(layoutContext);

package/dist/scripts/src/components-core/utils/extractParam.js

@@ -188,6 +188,13 @@ function resolveAndCleanProps(props, extractValue, layoutCss = {}, resourceExtra
     delete resultProps.radiusTopRight;
     delete resultProps.radiusBottomLeft;
     delete resultProps.radiusBottomRight;
+    // --- Delete pseudo CSS properties
+    delete resultProps.paddingHorizontal;
+    delete resultProps.paddingVertical;
+    delete resultProps.marginHorizontal;
+    delete resultProps.marginVertical;
+    delete resultProps.borderHorizontal;
+    delete resultProps.borderVertical;
     return result;
 }
 /**

package/dist/xmlui-metadata.mjs

@@ -5224,7 +5224,7 @@ function resolveLayoutProps(layoutProps = EMPTY_OBJECT, layoutContext) {
     result.cssProps.flexShrink = 0;
   }
   collectCss("width");
-  const horizontalStarSize = getHorizontalStartSize(result.cssProps.width, layoutContext);
+  const horizontalStarSize = getHorizontalStarSize(result.cssProps.width, layoutContext);
   if (horizontalStarSize !== null) {
     result.cssProps.flex = horizontalStarSize;
     result.cssProps.flexShrink = 1;
@@ -5232,7 +5232,7 @@ function resolveLayoutProps(layoutProps = EMPTY_OBJECT, layoutContext) {
   collectCss("minWidth");
   collectCss("maxWidth");
   collectCss("height");
-  const verticalStarSize = getVerticalStartSize(result.cssProps.height, layoutContext);
+  const verticalStarSize = getVerticalStarSize(result.cssProps.height, layoutContext);
   if (verticalStarSize !== null) {
     result.cssProps.flex = verticalStarSize;
     result.cssProps.flexShrink = 1;
@@ -5416,12 +5416,12 @@ function resolveLayoutProps(layoutProps = EMPTY_OBJECT, layoutContext) {
       result.cssProps[propCssName || prop] = value;
     }
   }
-  function getHorizontalStartSize(size, layoutContext2) {
+  function getHorizontalStarSize(size, layoutContext2) {
     if (!size) return null;
     const orientation = getOrientation(layoutContext2);
     return orientation === "horizontal" && starSizeRegex.test(size.toString()) ? getStarSizeNumber(size.toString()) : null;
   }
-  function getVerticalStartSize(size, layoutContext2) {
+  function getVerticalStarSize(size, layoutContext2) {
     if (!size) return null;
     const orientation = getOrientation(layoutContext2);
     return orientation === "vertical" && starSizeRegex.test(size.toString()) ? getStarSizeNumber(size.toString()) : null;
@@ -12680,7 +12680,7 @@ const ComboboxOption = forwardRef(function Combobox(option, forwardedRef) {
       },
       "data-state": selected2 ? "checked" : void 0,
       keywords,
-      children: /* @__PURE__ */ jsx("div", { className: styles$o.multiComboboxOptionContent, children: optionRenderer ? optionRenderer({ label: label2, value, enabled: enabled2, keywords }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      children: /* @__PURE__ */ jsx("div", { className: styles$o.multiComboboxOptionContent, children: optionRenderer ? optionRenderer({ label: label2, value, enabled: enabled2, keywords }, selectedValue, false) : /* @__PURE__ */ jsxs(Fragment, { children: [
         optionLabelRenderer ? optionLabelRenderer({ label: label2, value }) : label2,
         selected2 && /* @__PURE__ */ jsx(Icon, { name: "checkmark" })
       ] }) })
@@ -12708,7 +12708,7 @@ const SelectOption = React__default.forwardRef(
   (option, ref) => {
     const { value, label: label2, enabled: enabled2 = true } = option;
     const { onOptionRemove, onOptionAdd } = useOption();
-    const { optionLabelRenderer, optionRenderer } = useSelect();
+    const { optionLabelRenderer, optionRenderer, value: selectedValue } = useSelect();
     useLayoutEffect(() => {
       onOptionAdd(option);
       return () => onOptionRemove(option);
@@ -12717,7 +12717,7 @@ const SelectOption = React__default.forwardRef(
       label: label2,
       value,
       enabled: enabled2
-    }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    }, selectedValue, false) : /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(ItemText, { className: styles$o.selectItemContent, children: optionLabelRenderer ? optionLabelRenderer({ value, label: label2 }) : label2 }),
       /* @__PURE__ */ jsx("span", { className: styles$o.selectItemIndicator, children: /* @__PURE__ */ jsx(ItemIndicator, { children: /* @__PURE__ */ jsx(Icon, { name: "checkmark" }) }) })
     ] }) }) });
@@ -18297,6 +18297,10 @@ const DataSourceMd = createMetadata({
     },
     nextPageSelector: {
       description: `When using \`${COMP$a}\` with paging, the response may contain information about the previous and next page. This property defines the selector that extracts the next page information from the response deserialized to an object.`
+    },
+    structuralSharing: {
+      description: "This property allows structural sharing. When turned on, `DataSource` will keep the original reference if nothing has changed in the data. If a subset has changed, `DataSource` will keep the unchanged parts and only replace the changed parts. If you do not need this behavior, set this property to `false`.",
+      defaultValue: "true"
     }
   },
   events: {
@@ -18306,7 +18310,9 @@ const DataSourceMd = createMetadata({
     error: d(`This event fires when a request results in an error.`)
   },
   apis: {
-    value: d("This property retrieves the data queried from the source after optional transformations."),
+    value: d(
+      "This property retrieves the data queried from the source after optional transformations."
+    ),
     inProgress: d("This property indicates if the data is being fetched."),
     isRefetching: d("This property indicates if the data is being re-fetched."),
     loaded: d("This property indicates if the data has been loaded."),

package/dist/xmlui-metadata.umd.js

@@ -5221,7 +5221,7 @@
       result.cssProps.flexShrink = 0;
     }
     collectCss("width");
-    const horizontalStarSize = getHorizontalStartSize(result.cssProps.width, layoutContext);
+    const horizontalStarSize = getHorizontalStarSize(result.cssProps.width, layoutContext);
     if (horizontalStarSize !== null) {
       result.cssProps.flex = horizontalStarSize;
       result.cssProps.flexShrink = 1;
@@ -5229,7 +5229,7 @@
     collectCss("minWidth");
     collectCss("maxWidth");
     collectCss("height");
-    const verticalStarSize = getVerticalStartSize(result.cssProps.height, layoutContext);
+    const verticalStarSize = getVerticalStarSize(result.cssProps.height, layoutContext);
     if (verticalStarSize !== null) {
       result.cssProps.flex = verticalStarSize;
       result.cssProps.flexShrink = 1;
@@ -5413,12 +5413,12 @@
         result.cssProps[propCssName || prop] = value;
       }
     }
-    function getHorizontalStartSize(size, layoutContext2) {
+    function getHorizontalStarSize(size, layoutContext2) {
       if (!size) return null;
       const orientation = getOrientation(layoutContext2);
       return orientation === "horizontal" && starSizeRegex.test(size.toString()) ? getStarSizeNumber(size.toString()) : null;
     }
-    function getVerticalStartSize(size, layoutContext2) {
+    function getVerticalStarSize(size, layoutContext2) {
       if (!size) return null;
       const orientation = getOrientation(layoutContext2);
       return orientation === "vertical" && starSizeRegex.test(size.toString()) ? getStarSizeNumber(size.toString()) : null;
@@ -12677,7 +12677,7 @@
         },
         "data-state": selected2 ? "checked" : void 0,
         keywords,
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$o.multiComboboxOptionContent, children: optionRenderer ? optionRenderer({ label: label2, value, enabled: enabled2, keywords }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$o.multiComboboxOptionContent, children: optionRenderer ? optionRenderer({ label: label2, value, enabled: enabled2, keywords }, selectedValue, false) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           optionLabelRenderer ? optionLabelRenderer({ label: label2, value }) : label2,
           selected2 && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "checkmark" })
         ] }) })
@@ -12705,7 +12705,7 @@
     (option, ref) => {
       const { value, label: label2, enabled: enabled2 = true } = option;
       const { onOptionRemove, onOptionAdd } = useOption();
-      const { optionLabelRenderer, optionRenderer } = useSelect();
+      const { optionLabelRenderer, optionRenderer, value: selectedValue } = useSelect();
       React.useLayoutEffect(() => {
         onOptionAdd(option);
         return () => onOptionRemove(option);
@@ -12714,7 +12714,7 @@
         label: label2,
         value,
         enabled: enabled2
-      }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      }, selectedValue, false) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(reactSelect.ItemText, { className: styles$o.selectItemContent, children: optionLabelRenderer ? optionLabelRenderer({ value, label: label2 }) : label2 }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$o.selectItemIndicator, children: /* @__PURE__ */ jsxRuntime.jsx(reactSelect.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "checkmark" }) }) })
       ] }) }) });
@@ -18294,6 +18294,10 @@
       },
       nextPageSelector: {
         description: `When using \`${COMP$a}\` with paging, the response may contain information about the previous and next page. This property defines the selector that extracts the next page information from the response deserialized to an object.`
+      },
+      structuralSharing: {
+        description: "This property allows structural sharing. When turned on, `DataSource` will keep the original reference if nothing has changed in the data. If a subset has changed, `DataSource` will keep the unchanged parts and only replace the changed parts. If you do not need this behavior, set this property to `false`.",
+        defaultValue: "true"
       }
     },
     events: {
@@ -18303,7 +18307,9 @@
       error: d(`This event fires when a request results in an error.`)
     },
     apis: {
-      value: d("This property retrieves the data queried from the source after optional transformations."),
+      value: d(
+        "This property retrieves the data queried from the source after optional transformations."
+      ),
       inProgress: d("This property indicates if the data is being fetched."),
       isRefetching: d("This property indicates if the data is being re-fetched."),
       loaded: d("This property indicates if the data has been loaded."),