@etsoo/materialui 1.4.35 → 1.4.37

package/lib/DataGridEx.js

@@ -91,7 +91,7 @@ export function DataGridEx(props) {
                     });
                 }
                 else if (sortable && field != null) {
-                    const active = orderBy != null && orderBy[field] != null;
+                    const active = orderBy?.has(field);
                     sortLabel = (_jsx(TableSortLabel, { active: active, direction: sortAsc ? "asc" : "desc", onClick: (_event) => {
                             if (active)
                                 column.sortAsc = !sortAsc;
@@ -165,7 +165,7 @@ export function DataGridEx(props) {
     });
     // New sort
     const handleSort = (field, asc) => {
-        reset({ queryPaging: { orderBy: { [field]: asc ?? true } } });
+        reset({ queryPaging: { orderBy: new Map([[field, !(asc ?? true)]]) } });
     };
     // Reset
     const reset = (add) => {

package/lib/GridUtils.d.ts

@@ -1,6 +1,7 @@
 import { GridLoadDataProps, GridLoaderStates } from "@etsoo/react";
 import { DataTypes } from "@etsoo/shared";
 import { GridDataCacheType } from "./GridDataCacheType";
+import { QueryPagingData } from "@etsoo/appscript";
 /**
  * Grid utilities
  */
@@ -13,7 +14,7 @@ export declare namespace GridUtils {
      * @returns Request data
      */
     function createLoader<F extends DataTypes.BasicTemplate>(props: GridLoadDataProps, template?: F, cacheKey?: string): DataTypes.BasicTemplateType<F> & {
-        queryPaging: import("@etsoo/appscript").QueryPagingData;
+        queryPaging: QueryPagingData;
     };
     /**
      * Get cache data
@@ -40,4 +41,11 @@ export declare namespace GridUtils {
      * @param searchData Search data
      */
     function mergeSearchData<T, F extends DataTypes.BasicTemplate>(state: GridLoaderStates<T>, searchData?: DataTypes.BasicTemplateType<F>): void;
+    /**
+     * Setup paging keysets
+     * @param data Paging data
+     * @param lastItem Last item of the query
+     * @param idField Id field
+     */
+    function setupPagingKeysets<T>(data: QueryPagingData, lastItem: T | undefined, idField: keyof T & string): void;
 }

package/lib/GridUtils.js

@@ -83,4 +83,26 @@ export var GridUtils;
         Object.assign(state.data, searchData);
     }
     GridUtils.mergeSearchData = mergeSearchData;
+    /**
+     * Setup paging keysets
+     * @param data Paging data
+     * @param lastItem Last item of the query
+     * @param idField Id field
+     */
+    function setupPagingKeysets(data, lastItem, idField) {
+        // If the id field is not set for ordering, add it with descending
+        if (data.orderBy == null) {
+            data.orderBy = new Map([[idField, true]]);
+        }
+        else if (!data.orderBy.has(idField)) {
+            data.orderBy.set(idField, true);
+        }
+        // Set the paging keysets
+        if (lastItem) {
+            const keysets = [];
+            data.orderBy.forEach((_value, key) => keysets.push(Reflect.get(lastItem, key)));
+            data.keysets = keysets;
+        }
+    }
+    GridUtils.setupPagingKeysets = setupPagingKeysets;
 })(GridUtils || (GridUtils = {}));

package/lib/MUGlobal.js

@@ -158,7 +158,10 @@ export class MUGlobal {
                 const mediaRaw = theme.breakpoints.up(key);
                 const mediaQuery = mediaRaw.substring(mediaRaw.indexOf("("));
                 if (window.matchMedia(mediaQuery).matches) {
-                    return parseInt(theme.spacing(value), 10);
+                    let space = parseInt(theme.spacing(value), 10);
+                    if (isNaN(space))
+                        space = 8 * value;
+                    return space;
                 }
             }
         }

package/lib/ResponsibleContainer.d.ts

@@ -61,7 +61,7 @@ export type ResponsibleContainerProps<T extends object, F extends DataTypes.Basi
     /**
      * Load data callback
      */
-    loadData: (data: GridJsonData & DataTypes.BasicTemplateType<F>) => PromiseLike<T[] | null | undefined>;
+    loadData: (data: GridJsonData & DataTypes.BasicTemplateType<F>, lastItem?: T) => PromiseLike<T[] | null | undefined>;
     /**
      * Methods
      */

package/lib/ResponsibleContainer.js

@@ -44,9 +44,9 @@ export function ResponsibleContainer(props) {
     // Has fields
     const hasFields = fields != null && fields.length > 0;
     // Load data
-    const localLoadData = (props) => {
+    const localLoadData = (props, lastItem) => {
         state.mounted = true;
-        return loadData(GridUtils.createLoader(props, fieldTemplate, cacheKey));
+        return loadData(GridUtils.createLoader(props, fieldTemplate, cacheKey), lastItem);
     };
     // Search data
     const searchData = GridUtils.getSearchData(cacheKey);

package/lib/SearchBar.d.ts

@@ -7,6 +7,10 @@ export interface SearchBarProps {
      * Style class name
      */
     className?: string;
+    /**
+     * Item gap
+     */
+    itemGap?: number;
     /**
      * Item width
      */

package/lib/SearchBar.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Drawer, IconButton, Stack, useTheme } from "@mui/material";
+import { Button, Drawer, IconButton, Stack } from "@mui/material";
 import React from "react";
 import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
 import { DomUtils } from "@etsoo/shared";
@@ -54,12 +54,9 @@ const setChildState = (child, enabled) => {
  */
 export function SearchBar(props) {
     // Destruct
-    const { className, fields, onSubmit, itemWidth = 160 } = props;
+    const { className, fields, onSubmit, itemGap = 6, itemWidth = 160 } = props;
     // Labels
     const labels = Labels.CommonPage;
-    // Spacing
-    const theme = useTheme();
-    const gap = parseFloat(theme.spacing(1));
     // Menu index
     const [index, updateIndex] = React.useState();
     // Drawer open / close
@@ -68,7 +65,7 @@ export function SearchBar(props) {
     const state = React.useRef({ hasMore: true, lastMaxWidth: 9999 }).current;
     // Watch container
     const { dimensions } = useDimensions(1, (target, rect) => {
-        // Same logic from resetButtonRef
+        // Same logic from resetButtonRefe);
         if (rect.width === state.lastMaxWidth ||
             (!state.hasMore && rect.width > state.lastMaxWidth))
             return false;
@@ -114,7 +111,7 @@ export function SearchBar(props) {
             // More button rect
             const buttonMoreRect = buttonMore.getBoundingClientRect();
             // Total
-            const totalButtonWidth = resetButtonRect.width + buttonMoreRect.width + 3 * gap;
+            const totalButtonWidth = resetButtonRect.width + buttonMoreRect.width + 3 * itemGap;
             // Cache
             container.setAttribute(cachedWidthName, totalButtonWidth.toString());
             maxWidth -= totalButtonWidth;
@@ -136,7 +133,7 @@ export function SearchBar(props) {
             }
             else {
                 const childD = child.getBoundingClientRect();
-                childWidth = childD.width + gap;
+                childWidth = childD.width + itemGap;
                 child.setAttribute(cachedWidthName, childWidth.toString());
             }
             // No gap here, child width includes the gap
@@ -224,7 +221,7 @@ export function SearchBar(props) {
     return (_jsxs(React.Fragment, { children: [_jsx("form", { id: "SearchBarForm", className: className, onChange: handleForm, ref: (form) => {
                     if (form)
                         state.form = form;
-                }, children: _jsxs(Stack, { ref: dimensions[0][0], className: "SearchBarContainer", justifyContent: "center", alignItems: "center", direction: "row", spacing: 1, width: "100%", overflow: "hidden", paddingTop: "6px", sx: {
+                }, children: _jsxs(Stack, { ref: dimensions[0][0], className: "SearchBarContainer", justifyContent: "center", alignItems: "center", direction: "row", spacing: `${itemGap}px`, width: "100%", overflow: "hidden", paddingTop: "6px", sx: {
                         "& > :not(style)": {
                             flexBasis: "auto",
                             flexGrow: 0,

package/lib/TableEx.js

@@ -171,7 +171,7 @@ export function TableEx(props) {
     };
     // New sort
     const handleSort = (field, asc) => {
-        reset({ queryPaging: { orderBy: { [field]: asc ?? true } } });
+        reset({ queryPaging: { orderBy: new Map([[field, !(asc ?? true)]]) } });
     };
     // Set items for rerenderer
     const setItems = (callback) => {
@@ -218,8 +218,7 @@ export function TableEx(props) {
                                         // Sortable
                                         let sortLabel;
                                         if (sortable && field != null) {
-                                            const active = queryPaging.orderBy != null &&
-                                                queryPaging.orderBy[field] != null;
+                                            const active = queryPaging.orderBy?.has(field);
                                             sortLabel = (_jsx(TableSortLabel, { active: active, direction: sortAsc ? "asc" : "desc", onClick: (_event) => {
                                                     if (active)
                                                         column.sortAsc = !sortAsc;

package/lib/pages/DataGridPage.js

@@ -33,8 +33,8 @@ export function DataGridPage(props) {
     const onSubmit = (data, _reset) => {
         setStates({ data });
     };
-    const localLoadData = (props) => {
-        return loadData(GridUtils.createLoader(props, fieldTemplate, cacheKey));
+    const localLoadData = (props, lastItem) => {
+        return loadData(GridUtils.createLoader(props, fieldTemplate, cacheKey), lastItem);
     };
     // Search data
     const searchData = GridUtils.getSearchData(cacheKey);

package/lib/pages/SearchPageProps.d.ts

@@ -24,7 +24,7 @@ export type SearchPageProps<T extends object, F extends DataTypes.BasicTemplate>
     /**
      * Load data callback
      */
-    loadData: (data: GridJsonData & DataTypes.BasicTemplateType<F>) => PromiseLike<T[] | null | undefined>;
+    loadData: (data: GridJsonData & DataTypes.BasicTemplateType<F>, lastItem?: T) => PromiseLike<T[] | null | undefined>;
     /**
      * Page props
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.4.35",
+  "version": "1.4.37",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "type": "module",
@@ -35,9 +35,9 @@
     "@emotion/css": "^11.13.5",
     "@emotion/react": "^11.13.5",
     "@emotion/styled": "^11.13.5",
-    "@etsoo/appscript": "^1.5.76",
+    "@etsoo/appscript": "^1.5.77",
     "@etsoo/notificationbase": "^1.1.54",
-    "@etsoo/react": "^1.8.3",
+    "@etsoo/react": "^1.8.6",
     "@etsoo/shared": "^1.2.55",
     "@mui/icons-material": "^6.1.9",
     "@mui/material": "^6.1.9",
@@ -73,6 +73,6 @@
     "@vitejs/plugin-react": "^4.3.4",
     "jsdom": "^25.0.1",
     "typescript": "^5.7.2",
-    "vitest": "^2.1.6"
+    "vitest": "^2.1.8"
   }
 }

package/src/DataGridEx.tsx

@@ -258,7 +258,7 @@ export function DataGridEx<T extends object>(props: DataGridExProps<T>) {
               states
             });
           } else if (sortable && field != null) {
-            const active = orderBy != null && orderBy[field] != null;
+            const active = orderBy?.has(field);
 
             sortLabel = (
               <TableSortLabel
@@ -438,7 +438,7 @@ export function DataGridEx<T extends object>(props: DataGridExProps<T>) {
 
   // New sort
   const handleSort = (field: string, asc?: boolean) => {
-    reset({ queryPaging: { orderBy: { [field]: asc ?? true } } });
+    reset({ queryPaging: { orderBy: new Map([[field, !(asc ?? true)]]) } });
   };
 
   // Reset

package/src/GridUtils.ts

@@ -5,6 +5,7 @@ import {
 } from "@etsoo/react";
 import { DataTypes } from "@etsoo/shared";
 import { GridDataCacheType } from "./GridDataCacheType";
+import { QueryPagingData } from "@etsoo/appscript";
 
 /**
  * Grid utilities
@@ -98,4 +99,32 @@ export namespace GridUtils {
     state.data ??= {};
     Object.assign(state.data, searchData);
   }
+
+  /**
+   * Setup paging keysets
+   * @param data Paging data
+   * @param lastItem Last item of the query
+   * @param idField Id field
+   */
+  export function setupPagingKeysets<T>(
+    data: QueryPagingData,
+    lastItem: T | undefined,
+    idField: keyof T & string
+  ) {
+    // If the id field is not set for ordering, add it with descending
+    if (data.orderBy == null) {
+      data.orderBy = new Map<string, boolean>([[idField, true]]);
+    } else if (!data.orderBy.has(idField)) {
+      data.orderBy.set(idField, true);
+    }
+
+    // Set the paging keysets
+    if (lastItem) {
+      const keysets: unknown[] = [];
+      data.orderBy.forEach((_value, key) =>
+        keysets.push(Reflect.get(lastItem, key))
+      );
+      data.keysets = keysets;
+    }
+  }
 }

package/src/MUGlobal.ts

@@ -187,7 +187,9 @@ export class MUGlobal {
         const mediaRaw = theme.breakpoints.up(key as Breakpoint);
         const mediaQuery = mediaRaw.substring(mediaRaw.indexOf("("));
         if (window.matchMedia(mediaQuery).matches) {
-          return parseInt(theme.spacing(value), 10);
+          let space = parseInt(theme.spacing(value), 10);
+          if (isNaN(space)) space = 8 * value;
+          return space;
         }
       }
     }

package/src/ResponsibleContainer.tsx

@@ -123,7 +123,8 @@ export type ResponsibleContainerProps<
    * Load data callback
    */
   loadData: (
-    data: GridJsonData & DataTypes.BasicTemplateType<F>
+    data: GridJsonData & DataTypes.BasicTemplateType<F>,
+    lastItem?: T
   ) => PromiseLike<T[] | null | undefined>;
 
   /**
@@ -238,9 +239,12 @@ export function ResponsibleContainer<
   const hasFields = fields != null && fields.length > 0;
 
   // Load data
-  const localLoadData = (props: GridLoadDataProps) => {
+  const localLoadData = (props: GridLoadDataProps, lastItem?: T) => {
     state.mounted = true;
-    return loadData(GridUtils.createLoader<F>(props, fieldTemplate, cacheKey));
+    return loadData(
+      GridUtils.createLoader<F>(props, fieldTemplate, cacheKey),
+      lastItem
+    );
   };
 
   // Search data

package/src/SearchBar.tsx

@@ -1,4 +1,4 @@
-import { Button, Drawer, IconButton, Stack, useTheme } from "@mui/material";
+import { Button, Drawer, IconButton, Stack } from "@mui/material";
 import React from "react";
 import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
 import { DomUtils } from "@etsoo/shared";
@@ -14,6 +14,11 @@ export interface SearchBarProps {
    */
   className?: string;
 
+  /**
+   * Item gap
+   */
+  itemGap?: number;
+
   /**
    * Item width
    */
@@ -83,15 +88,11 @@ const setChildState = (child: Element, enabled: boolean) => {
  */
 export function SearchBar(props: SearchBarProps) {
   // Destruct
-  const { className, fields, onSubmit, itemWidth = 160 } = props;
+  const { className, fields, onSubmit, itemGap = 6, itemWidth = 160 } = props;
 
   // Labels
   const labels = Labels.CommonPage;
 
-  // Spacing
-  const theme = useTheme();
-  const gap = parseFloat(theme.spacing(1));
-
   // Menu index
   const [index, updateIndex] = React.useState<number>();
 
@@ -110,7 +111,7 @@ export function SearchBar(props: SearchBarProps) {
   const { dimensions } = useDimensions(
     1,
     (target, rect) => {
-      // Same logic from resetButtonRef
+      // Same logic from resetButtonRefe);
       if (
         rect.width === state.lastMaxWidth ||
         (!state.hasMore && rect.width > state.lastMaxWidth)
@@ -170,7 +171,7 @@ export function SearchBar(props: SearchBarProps) {
 
       // Total
       const totalButtonWidth =
-        resetButtonRect.width + buttonMoreRect.width + 3 * gap;
+        resetButtonRect.width + buttonMoreRect.width + 3 * itemGap;
 
       // Cache
       container.setAttribute(cachedWidthName, totalButtonWidth.toString());
@@ -196,7 +197,7 @@ export function SearchBar(props: SearchBarProps) {
         childWidth = Number.parseFloat(cachedWidth);
       } else {
         const childD = child.getBoundingClientRect();
-        childWidth = childD.width + gap;
+        childWidth = childD.width + itemGap;
         child.setAttribute(cachedWidthName, childWidth.toString());
       }
 
@@ -312,7 +313,7 @@ export function SearchBar(props: SearchBarProps) {
           justifyContent="center"
           alignItems="center"
           direction="row"
-          spacing={1}
+          spacing={`${itemGap}px`}
           width="100%"
           overflow="hidden"
           paddingTop="6px"
@@ -336,7 +337,6 @@ export function SearchBar(props: SearchBarProps) {
           {fields.map((item, index) => (
             <React.Fragment key={index}>{item}</React.Fragment>
           ))}
-
           <IconButton
             title={labels.more}
             size="medium"

package/src/TableEx.tsx

@@ -306,7 +306,7 @@ export function TableEx<
 
   // New sort
   const handleSort = (field: string, asc?: boolean) => {
-    reset({ queryPaging: { orderBy: { [field]: asc ?? true } } });
+    reset({ queryPaging: { orderBy: new Map([[field, !(asc ?? true)]]) } });
   };
 
   // Set items for rerenderer
@@ -400,9 +400,7 @@ export function TableEx<
                 // Sortable
                 let sortLabel: React.ReactNode;
                 if (sortable && field != null) {
-                  const active =
-                    queryPaging.orderBy != null &&
-                    queryPaging.orderBy[field] != null;
+                  const active = queryPaging.orderBy?.has(field);
 
                   sortLabel = (
                     <TableSortLabel

package/src/pages/DataGridPage.tsx

@@ -76,8 +76,11 @@ export function DataGridPage<
     setStates({ data });
   };
 
-  const localLoadData = (props: GridLoadDataProps) => {
-    return loadData(GridUtils.createLoader<F>(props, fieldTemplate, cacheKey));
+  const localLoadData = (props: GridLoadDataProps, lastItem?: T) => {
+    return loadData(
+      GridUtils.createLoader<F>(props, fieldTemplate, cacheKey),
+      lastItem
+    );
   };
 
   // Search data

package/src/pages/SearchPageProps.ts

@@ -35,7 +35,8 @@ export type SearchPageProps<
    * Load data callback
    */
   loadData: (
-    data: GridJsonData & DataTypes.BasicTemplateType<F>
+    data: GridJsonData & DataTypes.BasicTemplateType<F>,
+    lastItem?: T
   ) => PromiseLike<T[] | null | undefined>;
 
   /**