@etsoo/materialui 1.4.44 → 1.4.46

package/lib/GridUtils.d.ts

@@ -10,9 +10,10 @@ export declare namespace GridUtils {
      * @param props Props
      * @param template Field template
      * @param cacheKey Cache key
+     * @param keepSource Keep source or not
      * @returns Request data
      */
-    function createLoader<F extends DataTypes.BasicTemplate>(props: GridLoadDataProps, template?: F, cacheKey?: string): DataTypes.BasicTemplateType<F> & {
+    function createLoader(props: GridLoadDataProps, template?: object, cacheKey?: string, keepSource?: boolean): {
         queryPaging: import("@etsoo/appscript").QueryPagingData;
     };
     /**
@@ -27,7 +28,7 @@ export declare namespace GridUtils {
      * @param cacheKey Cache key
      * @returns Result
      */
-    function getSearchData<F extends DataTypes.BasicTemplate>(cacheKey?: string): DataTypes.BasicTemplateType<F> | undefined;
+    function getSearchData(cacheKey?: string): any;
     /**
      * Get update rows handler
      * @param cacheKey Cache key

package/lib/GridUtils.js

@@ -9,11 +9,12 @@ export var GridUtils;
      * @param props Props
      * @param template Field template
      * @param cacheKey Cache key
+     * @param keepSource Keep source or not
      * @returns Request data
      */
-    function createLoader(props, template, cacheKey) {
+    function createLoader(props, template, cacheKey, keepSource) {
         const { data, ...rest } = props;
-        const formData = GridDataGetData(data, template);
+        const formData = GridDataGetData(data, template, keepSource);
         if (cacheKey)
             sessionStorage.setItem(`${cacheKey}-searchbar`, JSON.stringify(formData));
         return { ...formData, ...rest };

package/lib/ListMoreDisplay.d.ts

@@ -1,11 +1,10 @@
-import { DataTypes } from "@etsoo/shared";
 import { CardProps } from "@mui/material";
 import React from "react";
 import { GridData, GridLoader } from "@etsoo/react";
 /**
  * ListMoreDisplay props
  */
-export interface ListMoreDisplayProps<T extends object, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate> extends Omit<CardProps, "children">, GridLoader<T> {
+export interface ListMoreDisplayProps<T extends object> extends Omit<CardProps, "children">, GridLoader<T> {
     /**
      * Batch size to load
      */
@@ -17,7 +16,7 @@ export interface ListMoreDisplayProps<T extends object, F extends DataTypes.Basi
     /**
      * Search field template
      */
-    fieldTemplate?: F;
+    readonly fieldTemplate: object;
     /**
      * Header renderer
      */
@@ -36,4 +35,4 @@ export interface ListMoreDisplayProps<T extends object, F extends DataTypes.Basi
  * @param props Props
  * @returns Component
  */
-export declare function ListMoreDisplay<T extends object, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate>(props: ListMoreDisplayProps<T, F>): import("react/jsx-runtime").JSX.Element;
+export declare function ListMoreDisplay<T extends object>(props: ListMoreDisplayProps<T>): import("react/jsx-runtime").JSX.Element;

package/lib/ResponsibleContainer.d.ts

@@ -1,14 +1,13 @@
-import { DataTypes } from "@etsoo/shared";
 import { SxProps, Theme } from "@mui/material";
 import React from "react";
 import { ListChildComponentProps } from "react-window";
-import { GridColumn, GridJsonData, GridMethodRef } from "@etsoo/react";
+import { GridColumn, GridJsonData, GridMethodRef, GridTemplateType } from "@etsoo/react";
 import { DataGridExProps } from "./DataGridEx";
 import { ScrollerListExInnerItemRendererProps, ScrollerListExItemSize } from "./ScrollerListEx";
 /**
  * ResponsibleContainer props
  */
-export type ResponsibleContainerProps<T extends object, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate> = Omit<DataGridExProps<T>, "height" | "itemKey" | "loadData" | "mRef" | "onScroll" | "onItemsRendered" | "onInitLoad" | "onUpdateRows"> & {
+export type ResponsibleContainerProps<T extends object> = Omit<DataGridExProps<T>, "height" | "itemKey" | "loadData" | "mRef" | "onScroll" | "onItemsRendered" | "onInitLoad" | "onUpdateRows"> & {
     /**
      * Height will be deducted
      * @param height Current calcuated height
@@ -30,18 +29,14 @@ export type ResponsibleContainerProps<T extends object, F extends DataTypes.Basi
      * Container box SX (dataGrid determines the case)
      */
     containerBoxSx?: (paddings: number | Record<string, string | number>, hasFields: boolean, dataGrid?: boolean) => SxProps<Theme>;
-    /**
-     * Min width to show Datagrid
-     */
-    dataGridMinWidth?: number;
     /**
      * Search fields
      */
-    fields?: React.ReactElement[] | ((data: DataTypes.BasicTemplateType<F>) => React.ReactElement[]);
+    fields?: React.ReactElement[] | ((data: GridTemplateType<ResponsibleContainerProps<T>["fieldTemplate"]>) => React.ReactElement[]);
     /**
      * Search field template
      */
-    fieldTemplate?: F;
+    fieldTemplate: object;
     /**
      * Grid height
      */
@@ -61,7 +56,7 @@ export type ResponsibleContainerProps<T extends object, F extends DataTypes.Basi
     /**
      * Load data callback
      */
-    loadData: (data: GridJsonData & DataTypes.BasicTemplateType<F>, lastItem?: T) => PromiseLike<T[] | null | undefined>;
+    loadData: (data: GridJsonData & GridTemplateType<ResponsibleContainerProps<T>["fieldTemplate"]>, lastItem?: T) => PromiseLike<T[] | null | undefined>;
     /**
      * Methods
      */
@@ -90,10 +85,14 @@ export type ResponsibleContainerProps<T extends object, F extends DataTypes.Basi
      * SearchBar height
      */
     searchBarHeight?: number;
+    /**
+     * SearchBar bottom padding
+     */
+    searchBarBottom?: number;
 };
 /**
  * Responsible container
  * @param props Props
  * @returns Layout
  */
-export declare function ResponsibleContainer<T extends object, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate>(props: ResponsibleContainerProps<T, F>): import("react/jsx-runtime").JSX.Element;
+export declare function ResponsibleContainer<T extends object>(props: ResponsibleContainerProps<T>): import("react/jsx-runtime").JSX.Element;

package/lib/ResponsibleContainer.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Stack } from "@mui/material";
+import { Box, Stack, useMediaQuery } from "@mui/material";
 import React from "react";
 import { ReactUtils, useCombinedRefs, useDimensions } from "@etsoo/react";
-import { DataGridEx, DataGridExCalColumns } from "./DataGridEx";
+import { DataGridEx } from "./DataGridEx";
 import { MUGlobal } from "./MUGlobal";
 import { PullToRefreshUI } from "./PullToRefreshUI";
 import { ScrollerListEx } from "./ScrollerListEx";
@@ -24,7 +24,7 @@ function defaultContainerBoxSx(paddings, hasField, _dataGrid) {
  */
 export function ResponsibleContainer(props) {
     // Destruct
-    const { adjustHeight, adjustFabHeight, cacheKey, cacheMinutes = 15, columns, containerBoxSx = defaultContainerBoxSx, dataGridMinWidth = Math.max(576, DataGridExCalColumns(columns).total), elementReady, fields, fieldTemplate, height, loadData, mRef, paddings = MUGlobal.pagePaddings, pullToRefresh = true, quickAction, sizeReadyMiliseconds = 0, searchBarHeight = 45.6, ...rest } = props;
+    const { adjustHeight, adjustFabHeight, cacheKey, cacheMinutes = 15, columns, containerBoxSx = defaultContainerBoxSx, elementReady, fields, fieldTemplate, height, loadData, mRef, paddings = MUGlobal.pagePaddings, pullToRefresh = true, quickAction, sizeReadyMiliseconds = 0, searchBarHeight = 45.6, searchBarBottom = 8, ...rest } = props;
     // Labels
     const labels = Labels.CommonPage;
     // Refs
@@ -35,6 +35,8 @@ export function ResponsibleContainer(props) {
             return;
         state.ref = ref;
     });
+    // Screen size detection
+    const showDataGrid = useMediaQuery("(min-width:600px)");
     // Update mounted state
     React.useEffect(() => {
         return () => {
@@ -46,7 +48,7 @@ export function ResponsibleContainer(props) {
     // Load data
     const localLoadData = (props, lastItem) => {
         state.mounted = true;
-        return loadData(GridUtils.createLoader(props, fieldTemplate, cacheKey), lastItem);
+        return loadData(GridUtils.createLoader(props, fieldTemplate, cacheKey, false), lastItem);
     };
     // Search data
     const searchData = GridUtils.getSearchData(cacheKey);
@@ -114,14 +116,10 @@ export function ResponsibleContainer(props) {
     // Rect
     const rect = dimensions[0][2];
     // Create list
-    const [list, showDataGrid] = (() => {
+    const list = (() => {
         // No layout
         if (rect == null)
             return [null, undefined];
-        // Width
-        const width = rect.width;
-        // Show DataGrid or List dependng on width
-        const showDataGrid = width >= dataGridMinWidth;
         // Height
         let heightLocal;
         if (height != null) {
@@ -134,7 +132,7 @@ export function ResponsibleContainer(props) {
             const style = window.getComputedStyle(dimensions[0][1]);
             const boxMargin = parseFloat(style.marginBottom);
             if (!isNaN(boxMargin))
-                heightLocal -= 3 * boxMargin; // 1 - Box, 2 - Page bottom
+                heightLocal -= boxMargin;
             if (adjustHeight != null)
                 heightLocal -=
                     typeof adjustHeight === "number"
@@ -146,13 +144,10 @@ export function ResponsibleContainer(props) {
         if (showDataGrid) {
             // Delete
             delete rest.itemRenderer;
-            return [
-                _jsx(Box, { className: "DataGridBox", children: _jsx(DataGridEx, { autoLoad: !hasFields, height: heightLocal, width: rect.width, loadData: localLoadData, mRef: mRefs, onDoubleClick: (_, data) => quickAction && quickAction(data), outerRef: (element) => {
-                            if (element != null && elementReady)
-                                elementReady(element, true);
-                        }, onScroll: onGridScroll, columns: columns, onUpdateRows: GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, ...rest }) }),
-                true
-            ];
+            return (_jsx(Box, { className: "DataGridBox", children: _jsx(DataGridEx, { autoLoad: !hasFields, height: heightLocal, width: rect.width, loadData: localLoadData, mRef: mRefs, onDoubleClick: (_, data) => quickAction && quickAction(data), outerRef: (element) => {
+                        if (element != null && elementReady)
+                            elementReady(element, true);
+                    }, onScroll: onGridScroll, columns: columns, onUpdateRows: GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, ...rest }) }));
         }
         // Delete
         delete rest.checkable;
@@ -163,13 +158,10 @@ export function ResponsibleContainer(props) {
         delete rest.hideFooter;
         delete rest.hoverColor;
         delete rest.selectable;
-        return [
-            _jsx(Box, { className: "ListBox", sx: { height: heightLocal }, children: _jsx(ScrollerListEx, { autoLoad: !hasFields, height: heightLocal, loadData: localLoadData, onUpdateRows: GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, mRef: mRefs, onClick: (event, data) => quickAction && ReactUtils.isSafeClick(event) && quickAction(data), oRef: (element) => {
-                        if (element != null && elementReady)
-                            elementReady(element, false);
-                    }, onScroll: onListScroll, ...rest }) }),
-            false
-        ];
+        return (_jsx(Box, { className: "ListBox", sx: { height: heightLocal }, children: _jsx(ScrollerListEx, { autoLoad: !hasFields, height: heightLocal, loadData: localLoadData, onUpdateRows: GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, mRef: mRefs, onClick: (event, data) => quickAction && ReactUtils.isSafeClick(event) && quickAction(data), oRef: (element) => {
+                    if (element != null && elementReady)
+                        elementReady(element, false);
+                }, onScroll: onListScroll, ...rest }) }));
     })();
     const searchBar = React.useMemo(() => {
         if (!hasFields ||
@@ -189,7 +181,9 @@ export function ResponsibleContainer(props) {
     // Layout
     return (_jsxs(Box, { sx: containerBoxSx == null
             ? undefined
-            : containerBoxSx(paddings, hasFields, showDataGrid), children: [_jsxs(Stack, { children: [_jsx(Box, { ref: dimensions[0][0], className: "SearchBox", sx: { height: hasFields ? searchBarHeight : 0 }, children: searchBar }), list] }), pullToRefresh && pullContainer && (_jsx(PullToRefreshUI, { mainElement: pullContainer, triggerElement: pullContainer, instructionsPullToRefresh: labels.pullToRefresh, instructionsReleaseToRefresh: labels.releaseToRefresh, instructionsRefreshing: labels.refreshing, onRefresh: () => state.ref?.reset(), shouldPullToRefresh: () => {
+            : containerBoxSx(paddings, hasFields, showDataGrid), children: [_jsxs(Stack, { children: [_jsx(Box, { ref: dimensions[0][0], className: "SearchBox", sx: {
+                            height: hasFields ? searchBarHeight : 0
+                        }, marginBottom: hasFields ? `${searchBarBottom}px!important` : undefined, children: searchBar }), list] }), pullToRefresh && pullContainer && (_jsx(PullToRefreshUI, { mainElement: pullContainer, triggerElement: pullContainer, instructionsPullToRefresh: labels.pullToRefresh, instructionsReleaseToRefresh: labels.releaseToRefresh, instructionsRefreshing: labels.refreshing, onRefresh: () => state.ref?.reset(), shouldPullToRefresh: () => {
                     const container = document.querySelector(pullContainer);
                     return !container?.scrollTop;
                 } }))] }));

package/lib/pages/DataGridPage.d.ts

@@ -1,8 +1,7 @@
-import { DataTypes } from "@etsoo/shared";
 import type { DataGridPageProps } from "./DataGridPageProps";
 /**
  * DataGrid page
  * @param props Props
  * @returns Component
  */
-export declare function DataGridPage<T extends object, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate>(props: DataGridPageProps<T, F>): import("react/jsx-runtime").JSX.Element;
+export declare function DataGridPage<T extends object>(props: DataGridPageProps<T>): import("react/jsx-runtime").JSX.Element;

package/lib/pages/DataGridPage.js

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

package/lib/pages/DataGridPageProps.d.ts

@@ -1,10 +1,9 @@
-import type { DataTypes } from "@etsoo/shared";
 import type { DataGridExProps } from "../DataGridEx";
 import type { SearchPageProps } from "./SearchPageProps";
 /**
  * DataGrid page props
  */
-export type DataGridPageProps<T extends object, F extends DataTypes.BasicTemplate> = SearchPageProps<T, F> & Omit<DataGridExProps<T>, "loadData"> & {
+export type DataGridPageProps<T extends object> = SearchPageProps<T> & Omit<DataGridExProps<T>, "loadData"> & {
     /**
      * Height will be deducted
      * @param height Current calcuated height

package/lib/pages/FixedListPage.d.ts

@@ -1,11 +1,10 @@
-import { DataTypes } from "@etsoo/shared";
 import type { ListPageProps } from "./ListPage";
 /**
  * Fixed height list page
  * @param props Props
  * @returns Component
  */
-export declare function FixedListPage<T extends object, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate>(props: ListPageProps<T, F> & {
+export declare function FixedListPage<T extends object>(props: ListPageProps<T> & {
     /**
      * Height will be deducted
      * @param height Current calcuated height

package/lib/pages/FixedListPage.js

@@ -40,7 +40,7 @@ export function FixedListPage(props) {
         reset();
     };
     const localLoadData = (props, lastItem) => {
-        return loadData(GridUtils.createLoader(props, fieldTemplate, cacheKey), lastItem);
+        return loadData(GridUtils.createLoader(props, fieldTemplate, cacheKey, false), lastItem);
     };
     // Search data
     const searchData = GridUtils.getSearchData(cacheKey);

package/lib/pages/ListPage.d.ts

@@ -1,13 +1,12 @@
-import { DataTypes } from "@etsoo/shared";
 import { ScrollerListExProps } from "../ScrollerListEx";
 import type { SearchPageProps } from "./SearchPageProps";
 /**
  * List page props
  */
-export type ListPageProps<T extends object, F extends DataTypes.BasicTemplate> = SearchPageProps<T, F> & Omit<ScrollerListExProps<T>, "loadData">;
+export type ListPageProps<T extends object> = SearchPageProps<T> & Omit<ScrollerListExProps<T>, "loadData">;
 /**
  * List page
  * @param props Props
  * @returns Component
  */
-export declare function ListPage<T extends object, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate>(props: ListPageProps<T, F>): import("react/jsx-runtime").JSX.Element;
+export declare function ListPage<T extends object>(props: ListPageProps<T>): import("react/jsx-runtime").JSX.Element;

package/lib/pages/ListPage.js

@@ -38,7 +38,7 @@ export function ListPage(props) {
         reset();
     };
     const localLoadData = (props, lastItem) => {
-        return loadData(GridUtils.createLoader(props, fieldTemplate, cacheKey), lastItem);
+        return loadData(GridUtils.createLoader(props, fieldTemplate, cacheKey, false), lastItem);
     };
     // Search data
     const searchData = GridUtils.getSearchData(cacheKey);

package/lib/pages/ResponsivePage.d.ts

@@ -1,4 +1,3 @@
-import { DataTypes } from "@etsoo/shared";
 import React from "react";
 import type { DataGridPageProps } from "./DataGridPageProps";
 import type { ScrollerListExInnerItemRendererProps, ScrollerListExItemSize } from "../ScrollerListEx";
@@ -8,7 +7,7 @@ import type { OperationMessageHandlerAll } from "../messages/OperationMessageHan
 /**
  * Response page props
  */
-export type ResponsePageProps<T extends object, F extends DataTypes.BasicTemplate> = DataGridPageProps<T, F> & {
+export type ResponsePageProps<T extends object> = DataGridPageProps<T> & {
     /**
      *
      * @param height Current height
@@ -54,4 +53,4 @@ export type ResponsePageProps<T extends object, F extends DataTypes.BasicTemplat
  * @param props Props
  * @returns Component
  */
-export declare function ResponsivePage<T extends object, F extends DataTypes.BasicTemplate = {}>(props: ResponsePageProps<T, F>): import("react/jsx-runtime").JSX.Element;
+export declare function ResponsivePage<T extends object>(props: ResponsePageProps<T>): import("react/jsx-runtime").JSX.Element;

package/lib/pages/SearchPageProps.d.ts

@@ -1,10 +1,9 @@
-import type { GridJsonData, GridLoader } from "@etsoo/react";
-import type { DataTypes } from "@etsoo/shared";
+import type { GridJsonData, GridLoader, GridTemplateType } from "@etsoo/react";
 import type { CommonPageProps } from "./CommonPage";
 /**
  * Search page props
  */
-export type SearchPageProps<T extends object, F extends DataTypes.BasicTemplate> = Omit<GridLoader<T>, "loadData"> & {
+export type SearchPageProps<T extends object> = Omit<GridLoader<T>, "loadData"> & {
     /**
      * Cache key
      */
@@ -16,15 +15,15 @@ export type SearchPageProps<T extends object, F extends DataTypes.BasicTemplate>
     /**
      * Search fields
      */
-    fields: React.ReactElement[] | ((data: DataTypes.BasicTemplateType<F>) => React.ReactElement[]);
+    fields: React.ReactElement[] | ((data: GridTemplateType<SearchPageProps<T>["fieldTemplate"]>) => React.ReactElement[]);
     /**
      * Search field template
      */
-    fieldTemplate?: F;
+    readonly fieldTemplate: object;
     /**
      * Load data callback
      */
-    loadData: (data: GridJsonData & DataTypes.BasicTemplateType<F>, lastItem?: T) => PromiseLike<T[] | null | undefined>;
+    loadData: (data: GridJsonData & GridTemplateType<SearchPageProps<T>["fieldTemplate"]>, lastItem?: T) => PromiseLike<T[] | null | undefined>;
     /**
      * Page props
      */

package/lib/pages/TablePage.d.ts

@@ -4,10 +4,10 @@ import type { SearchPageProps } from "./SearchPageProps";
 /**
  * Table page props
  */
-export type TablePageProps<T extends object, F extends DataTypes.BasicTemplate, D extends DataTypes.Keys<T>> = SearchPageProps<T, F> & Omit<TableExProps<T, D>, "loadData">;
+export type TablePageProps<T extends object, D extends DataTypes.Keys<T>> = SearchPageProps<T> & Omit<TableExProps<T, D>, "loadData">;
 /**
  * Table page
  * @param props Props
  * @returns Component
  */
-export declare function TablePage<T extends object, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate, D extends DataTypes.Keys<T> = IdDefaultType<T>>(props: TablePageProps<T, F, D>): import("react/jsx-runtime").JSX.Element;
+export declare function TablePage<T extends object, D extends DataTypes.Keys<T> = IdDefaultType<T>>(props: TablePageProps<T, D>): import("react/jsx-runtime").JSX.Element;

package/lib/pages/TablePage.js

@@ -37,7 +37,7 @@ export function TablePage(props) {
         reset();
     };
     const localLoadData = (props, lastItem) => {
-        return loadData(GridUtils.createLoader(props, fieldTemplate, cacheKey), lastItem);
+        return loadData(GridUtils.createLoader(props, fieldTemplate, cacheKey, false), lastItem);
     };
     // Search data
     const searchData = GridUtils.getSearchData(cacheKey);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.4.44",
+  "version": "1.4.46",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "type": "module",
@@ -30,18 +30,18 @@
   },
   "homepage": "https://github.com/ETSOO/ReactMU#readme",
   "dependencies": {
-    "@dnd-kit/core": "^6.2.0",
-    "@dnd-kit/sortable": "^9.0.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
     "@emotion/css": "^11.13.5",
     "@emotion/react": "^11.13.5",
     "@emotion/styled": "^11.13.5",
     "@etsoo/appscript": "^1.5.78",
     "@etsoo/notificationbase": "^1.1.54",
-    "@etsoo/react": "^1.8.8",
+    "@etsoo/react": "^1.8.10",
     "@etsoo/shared": "^1.2.55",
-    "@mui/icons-material": "^6.1.9",
-    "@mui/material": "^6.1.9",
-    "@mui/x-data-grid": "^7.23.0",
+    "@mui/icons-material": "^6.1.10",
+    "@mui/material": "^6.1.10",
+    "@mui/x-data-grid": "^7.23.1",
     "chart.js": "^4.4.7",
     "chartjs-plugin-datalabels": "^2.2.0",
     "eventemitter3": "^5.0.1",
@@ -55,17 +55,17 @@
     "react-imask": "7.6.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.25.9",
+    "@babel/cli": "^7.26.4",
     "@babel/core": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.25.9",
     "@babel/preset-env": "^7.26.0",
-    "@babel/preset-react": "^7.25.9",
+    "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.26.0",
     "@babel/runtime-corejs3": "^7.26.0",
-    "@testing-library/react": "^16.0.1",
+    "@testing-library/react": "^16.1.0",
     "@types/pica": "^9.0.4",
     "@types/pulltorefreshjs": "^0.1.7",
-    "@types/react": "^18.3.12",
+    "@types/react": "^18.3.13",
     "@types/react-avatar-editor": "^13.0.3",
     "@types/react-dom": "^18.3.1",
     "@types/react-input-mask": "^3.0.6",

package/src/GridUtils.ts

@@ -15,15 +15,17 @@ export namespace GridUtils {
    * @param props Props
    * @param template Field template
    * @param cacheKey Cache key
+   * @param keepSource Keep source or not
    * @returns Request data
    */
-  export function createLoader<F extends DataTypes.BasicTemplate>(
+  export function createLoader(
     props: GridLoadDataProps,
-    template?: F,
-    cacheKey?: string
+    template?: object,
+    cacheKey?: string,
+    keepSource?: boolean
   ) {
     const { data, ...rest } = props;
-    const formData = GridDataGetData(data, template);
+    const formData = GridDataGetData(data, template, keepSource);
 
     if (cacheKey)
       sessionStorage.setItem(`${cacheKey}-searchbar`, JSON.stringify(formData));
@@ -55,13 +57,11 @@ export namespace GridUtils {
    * @param cacheKey Cache key
    * @returns Result
    */
-  export function getSearchData<F extends DataTypes.BasicTemplate>(
-    cacheKey?: string
-  ) {
+  export function getSearchData(cacheKey?: string) {
     if (cacheKey) {
       const data = sessionStorage.getItem(`${cacheKey}-searchbar`);
       if (data) {
-        return JSON.parse(data) as DataTypes.BasicTemplateType<F>;
+        return JSON.parse(data);
       }
     }
   }

package/src/ListMoreDisplay.tsx

@@ -21,10 +21,8 @@ import { globalApp } from "./app/ReactApp";
 /**
  * ListMoreDisplay props
  */
-export interface ListMoreDisplayProps<
-  T extends object,
-  F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate
-> extends Omit<CardProps, "children">,
+export interface ListMoreDisplayProps<T extends object>
+  extends Omit<CardProps, "children">,
     GridLoader<T> {
   /**
    * Batch size to load
@@ -39,7 +37,7 @@ export interface ListMoreDisplayProps<
   /**
    * Search field template
    */
-  fieldTemplate?: F;
+  readonly fieldTemplate: object;
 
   /**
    * Header renderer
@@ -67,10 +65,9 @@ type states<T> = {
  * @param props Props
  * @returns Component
  */
-export function ListMoreDisplay<
-  T extends object,
-  F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate
->(props: ListMoreDisplayProps<T, F>) {
+export function ListMoreDisplay<T extends object>(
+  props: ListMoreDisplayProps<T>
+) {
   // Destruct
   const {
     batchSize = 6,

package/src/ResponsibleContainer.tsx

@@ -1,5 +1,4 @@
-import { DataTypes } from "@etsoo/shared";
-import { Box, Stack, SxProps, Theme } from "@mui/material";
+import { Box, Stack, SxProps, Theme, useMediaQuery } from "@mui/material";
 import React from "react";
 import {
   GridOnScrollProps,
@@ -13,16 +12,13 @@ import {
   GridLoadDataProps,
   GridLoaderStates,
   GridMethodRef,
+  GridTemplateType,
   ReactUtils,
   ScrollerListRef,
   useCombinedRefs,
   useDimensions
 } from "@etsoo/react";
-import {
-  DataGridEx,
-  DataGridExCalColumns,
-  DataGridExProps
-} from "./DataGridEx";
+import { DataGridEx, DataGridExProps } from "./DataGridEx";
 import { MUGlobal } from "./MUGlobal";
 import { PullToRefreshUI } from "./PullToRefreshUI";
 import {
@@ -37,10 +33,7 @@ import { GridUtils } from "./GridUtils";
 /**
  * ResponsibleContainer props
  */
-export type ResponsibleContainerProps<
-  T extends object,
-  F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate
-> = Omit<
+export type ResponsibleContainerProps<T extends object> = Omit<
   DataGridExProps<T>,
   | "height"
   | "itemKey"
@@ -80,22 +73,19 @@ export type ResponsibleContainerProps<
     dataGrid?: boolean
   ) => SxProps<Theme>;
 
-  /**
-   * Min width to show Datagrid
-   */
-  dataGridMinWidth?: number;
-
   /**
    * Search fields
    */
   fields?:
     | React.ReactElement[]
-    | ((data: DataTypes.BasicTemplateType<F>) => React.ReactElement[]);
+    | ((
+        data: GridTemplateType<ResponsibleContainerProps<T>["fieldTemplate"]>
+      ) => React.ReactElement[]);
 
   /**
    * Search field template
    */
-  fieldTemplate?: F;
+  fieldTemplate: object;
 
   /**
    * Grid height
@@ -123,7 +113,8 @@ export type ResponsibleContainerProps<
    * Load data callback
    */
   loadData: (
-    data: GridJsonData & DataTypes.BasicTemplateType<F>,
+    data: GridJsonData &
+      GridTemplateType<ResponsibleContainerProps<T>["fieldTemplate"]>,
     lastItem?: T
   ) => PromiseLike<T[] | null | undefined>;
 
@@ -161,6 +152,11 @@ export type ResponsibleContainerProps<
    * SearchBar height
    */
   searchBarHeight?: number;
+
+  /**
+   * SearchBar bottom padding
+   */
+  searchBarBottom?: number;
 };
 
 interface LocalRefs<T> {
@@ -189,10 +185,9 @@ function defaultContainerBoxSx(
  * @param props Props
  * @returns Layout
  */
-export function ResponsibleContainer<
-  T extends object,
-  F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate
->(props: ResponsibleContainerProps<T, F>) {
+export function ResponsibleContainer<T extends object>(
+  props: ResponsibleContainerProps<T>
+) {
   // Destruct
   const {
     adjustHeight,
@@ -201,7 +196,6 @@ export function ResponsibleContainer<
     cacheMinutes = 15,
     columns,
     containerBoxSx = defaultContainerBoxSx,
-    dataGridMinWidth = Math.max(576, DataGridExCalColumns(columns).total),
     elementReady,
     fields,
     fieldTemplate,
@@ -213,6 +207,7 @@ export function ResponsibleContainer<
     quickAction,
     sizeReadyMiliseconds = 0,
     searchBarHeight = 45.6,
+    searchBarBottom = 8,
     ...rest
   } = props;
 
@@ -228,6 +223,9 @@ export function ResponsibleContainer<
     state.ref = ref;
   });
 
+  // Screen size detection
+  const showDataGrid = useMediaQuery("(min-width:600px)");
+
   // Update mounted state
   React.useEffect(() => {
     return () => {
@@ -242,13 +240,13 @@ export function ResponsibleContainer<
   const localLoadData = (props: GridLoadDataProps, lastItem?: T) => {
     state.mounted = true;
     return loadData(
-      GridUtils.createLoader<F>(props, fieldTemplate, cacheKey),
+      GridUtils.createLoader(props, fieldTemplate, cacheKey, false),
       lastItem
     );
   };
 
   // Search data
-  const searchData = GridUtils.getSearchData<F>(cacheKey);
+  const searchData = GridUtils.getSearchData(cacheKey);
 
   // On submit callback
   const onSubmit = (data: FormData, _reset: boolean) => {
@@ -339,16 +337,10 @@ export function ResponsibleContainer<
   const rect = dimensions[0][2];
 
   // Create list
-  const [list, showDataGrid] = (() => {
+  const list = (() => {
     // No layout
     if (rect == null) return [null, undefined];
 
-    // Width
-    const width = rect.width;
-
-    // Show DataGrid or List dependng on width
-    const showDataGrid = width >= dataGridMinWidth;
-
     // Height
     let heightLocal: number;
     if (height != null) {
@@ -360,7 +352,7 @@ export function ResponsibleContainer<
 
       const style = window.getComputedStyle(dimensions[0][1]!);
       const boxMargin = parseFloat(style.marginBottom);
-      if (!isNaN(boxMargin)) heightLocal -= 3 * boxMargin; // 1 - Box, 2 - Page bottom
+      if (!isNaN(boxMargin)) heightLocal -= boxMargin;
 
       if (adjustHeight != null)
         heightLocal -=
@@ -376,7 +368,7 @@ export function ResponsibleContainer<
       // Delete
       delete rest.itemRenderer;
 
-      return [
+      return (
         <Box className="DataGridBox">
           <DataGridEx<T>
             autoLoad={!hasFields}
@@ -394,9 +386,8 @@ export function ResponsibleContainer<
             onInitLoad={onInitLoad}
             {...rest}
           />
-        </Box>,
-        true
-      ];
+        </Box>
+      );
     }
 
     // Delete
@@ -409,7 +400,7 @@ export function ResponsibleContainer<
     delete rest.hoverColor;
     delete rest.selectable;
 
-    return [
+    return (
       <Box className="ListBox" sx={{ height: heightLocal }}>
         <ScrollerListEx<T>
           autoLoad={!hasFields}
@@ -427,9 +418,8 @@ export function ResponsibleContainer<
           onScroll={onListScroll}
           {...rest}
         />
-      </Box>,
-      false
-    ];
+      </Box>
+    );
   })();
 
   const searchBar = React.useMemo(() => {
@@ -473,7 +463,12 @@ export function ResponsibleContainer<
         <Box
           ref={dimensions[0][0]}
           className="SearchBox"
-          sx={{ height: hasFields ? searchBarHeight : 0 }}
+          sx={{
+            height: hasFields ? searchBarHeight : 0
+          }}
+          marginBottom={
+            hasFields ? `${searchBarBottom}px!important` : undefined
+          }
         >
           {searchBar}
         </Box>

package/src/pages/DataGridPage.tsx

@@ -7,7 +7,6 @@ import {
   useCombinedRefs,
   useDimensions
 } from "@etsoo/react";
-import { DataTypes } from "@etsoo/shared";
 import { Box, Stack } from "@mui/material";
 import React from "react";
 import { DataGridEx } from "../DataGridEx";
@@ -29,10 +28,7 @@ interface LocalStates<T> {
  * @param props Props
  * @returns Component
  */
-export function DataGridPage<
-  T extends object,
-  F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate
->(props: DataGridPageProps<T, F>) {
+export function DataGridPage<T extends object>(props: DataGridPageProps<T>) {
   // Destruct
   const {
     adjustHeight,
@@ -78,13 +74,13 @@ export function DataGridPage<
 
   const localLoadData = (props: GridLoadDataProps, lastItem?: T) => {
     return loadData(
-      GridUtils.createLoader<F>(props, fieldTemplate, cacheKey),
+      GridUtils.createLoader(props, fieldTemplate, cacheKey, false),
       lastItem
     );
   };
 
   // Search data
-  const searchData = GridUtils.getSearchData<F>(cacheKey);
+  const searchData = GridUtils.getSearchData(cacheKey);
 
   const onInitLoad = (
     ref: VariableSizeGrid<T>

package/src/pages/DataGridPageProps.ts

@@ -1,14 +1,10 @@
-import type { DataTypes } from "@etsoo/shared";
 import type { DataGridExProps } from "../DataGridEx";
 import type { SearchPageProps } from "./SearchPageProps";
 
 /**
  * DataGrid page props
  */
-export type DataGridPageProps<
-  T extends object,
-  F extends DataTypes.BasicTemplate
-> = SearchPageProps<T, F> &
+export type DataGridPageProps<T extends object> = SearchPageProps<T> &
   Omit<DataGridExProps<T>, "loadData"> & {
     /**
      * Height will be deducted

package/src/pages/FixedListPage.tsx

@@ -7,7 +7,6 @@ import {
   useCombinedRefs,
   useDimensions
 } from "@etsoo/react";
-import { DataTypes } from "@etsoo/shared";
 import { Box, Stack } from "@mui/material";
 import React from "react";
 import { MUGlobal } from "../MUGlobal";
@@ -22,11 +21,8 @@ import type { ListPageProps } from "./ListPage";
  * @param props Props
  * @returns Component
  */
-export function FixedListPage<
-  T extends object,
-  F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate
->(
-  props: ListPageProps<T, F> & {
+export function FixedListPage<T extends object>(
+  props: ListPageProps<T> & {
     /**
      * Height will be deducted
      * @param height Current calcuated height
@@ -90,13 +86,13 @@ export function FixedListPage<
 
   const localLoadData = (props: GridLoadDataProps, lastItem?: T) => {
     return loadData(
-      GridUtils.createLoader<F>(props, fieldTemplate, cacheKey),
+      GridUtils.createLoader(props, fieldTemplate, cacheKey, false),
       lastItem
     );
   };
 
   // Search data
-  const searchData = GridUtils.getSearchData<F>(cacheKey);
+  const searchData = GridUtils.getSearchData(cacheKey);
 
   const onInitLoad = (
     ref: ScrollerListRef

package/src/pages/ListPage.tsx

@@ -6,7 +6,6 @@ import {
   ScrollerListRef,
   useCombinedRefs
 } from "@etsoo/react";
-import { DataTypes } from "@etsoo/shared";
 import { Box, Stack } from "@mui/material";
 import React from "react";
 import { MUGlobal } from "../MUGlobal";
@@ -19,20 +18,15 @@ import type { SearchPageProps } from "./SearchPageProps";
 /**
  * List page props
  */
-export type ListPageProps<
-  T extends object,
-  F extends DataTypes.BasicTemplate
-> = SearchPageProps<T, F> & Omit<ScrollerListExProps<T>, "loadData">;
+export type ListPageProps<T extends object> = SearchPageProps<T> &
+  Omit<ScrollerListExProps<T>, "loadData">;
 
 /**
  * List page
  * @param props Props
  * @returns Component
  */
-export function ListPage<
-  T extends object,
-  F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate
->(props: ListPageProps<T, F>) {
+export function ListPage<T extends object>(props: ListPageProps<T>) {
   // Destruct
   const {
     fields,
@@ -78,13 +72,13 @@ export function ListPage<
 
   const localLoadData = (props: GridLoadDataProps, lastItem?: T) => {
     return loadData(
-      GridUtils.createLoader<F>(props, fieldTemplate, cacheKey),
+      GridUtils.createLoader(props, fieldTemplate, cacheKey, false),
       lastItem
     );
   };
 
   // Search data
-  const searchData = GridUtils.getSearchData<F>(cacheKey);
+  const searchData = GridUtils.getSearchData(cacheKey);
 
   const onInitLoad = (
     ref: ScrollerListRef

package/src/pages/ResponsivePage.tsx

@@ -1,4 +1,3 @@
-import { DataTypes } from "@etsoo/shared";
 import React from "react";
 import { MUGlobal } from "../MUGlobal";
 import { ResponsibleContainer } from "../ResponsibleContainer";
@@ -16,10 +15,7 @@ import type { OperationMessageHandlerAll } from "../messages/OperationMessageHan
 /**
  * Response page props
  */
-export type ResponsePageProps<
-  T extends object,
-  F extends DataTypes.BasicTemplate
-> = DataGridPageProps<T, F> & {
+export type ResponsePageProps<T extends object> = DataGridPageProps<T> & {
   /**
    *
    * @param height Current height
@@ -76,10 +72,7 @@ export type ResponsePageProps<
  * @param props Props
  * @returns Component
  */
-export function ResponsivePage<
-  T extends object,
-  F extends DataTypes.BasicTemplate = {}
->(props: ResponsePageProps<T, F>) {
+export function ResponsivePage<T extends object>(props: ResponsePageProps<T>) {
   // Destruct
   const { pageProps = {}, operationMessageHandler, ...rest } = props;
 
@@ -101,7 +94,7 @@ export function ResponsivePage<
       {operationMessageHandler && (
         <OperationMessageContainer handler={operationMessageHandler} />
       )}
-      <ResponsibleContainer<T, F>
+      <ResponsibleContainer<T>
         paddings={paddings}
         containerBoxSx={(paddings, hasField, _dataGrid) => {
           // Half

package/src/pages/SearchPageProps.ts

@@ -1,14 +1,13 @@
-import type { GridJsonData, GridLoader } from "@etsoo/react";
-import type { DataTypes } from "@etsoo/shared";
+import type { GridJsonData, GridLoader, GridTemplateType } from "@etsoo/react";
 import type { CommonPageProps } from "./CommonPage";
 
 /**
  * Search page props
  */
-export type SearchPageProps<
-  T extends object,
-  F extends DataTypes.BasicTemplate
-> = Omit<GridLoader<T>, "loadData"> & {
+export type SearchPageProps<T extends object> = Omit<
+  GridLoader<T>,
+  "loadData"
+> & {
   /**
    * Cache key
    */
@@ -24,18 +23,20 @@ export type SearchPageProps<
    */
   fields:
     | React.ReactElement[]
-    | ((data: DataTypes.BasicTemplateType<F>) => React.ReactElement[]);
+    | ((
+        data: GridTemplateType<SearchPageProps<T>["fieldTemplate"]>
+      ) => React.ReactElement[]);
 
   /**
    * Search field template
    */
-  fieldTemplate?: F;
+  readonly fieldTemplate: object;
 
   /**
    * Load data callback
    */
   loadData: (
-    data: GridJsonData & DataTypes.BasicTemplateType<F>,
+    data: GridJsonData & GridTemplateType<SearchPageProps<T>["fieldTemplate"]>,
     lastItem?: T
   ) => PromiseLike<T[] | null | undefined>;
 

package/src/pages/TablePage.tsx

@@ -23,9 +23,8 @@ import type { SearchPageProps } from "./SearchPageProps";
  */
 export type TablePageProps<
   T extends object,
-  F extends DataTypes.BasicTemplate,
   D extends DataTypes.Keys<T>
-> = SearchPageProps<T, F> & Omit<TableExProps<T, D>, "loadData">;
+> = SearchPageProps<T> & Omit<TableExProps<T, D>, "loadData">;
 
 /**
  * Table page
@@ -34,9 +33,8 @@ export type TablePageProps<
  */
 export function TablePage<
   T extends object,
-  F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate,
   D extends DataTypes.Keys<T> = IdDefaultType<T>
->(props: TablePageProps<T, F, D>) {
+>(props: TablePageProps<T, D>) {
   // Destruct
   const {
     columns,
@@ -85,13 +83,13 @@ export function TablePage<
 
   const localLoadData = (props: GridLoadDataProps, lastItem?: T) => {
     return loadData(
-      GridUtils.createLoader<F>(props, fieldTemplate, cacheKey),
+      GridUtils.createLoader(props, fieldTemplate, cacheKey, false),
       lastItem
     );
   };
 
   // Search data
-  const searchData = GridUtils.getSearchData<F>(cacheKey);
+  const searchData = GridUtils.getSearchData(cacheKey);
 
   // Total width
   const totalWidth = React.useMemo(