@etsoo/materialui 1.4.46 → 1.4.48

package/__tests__/ResponsePage.tsx

@@ -8,7 +8,7 @@ globalThis.ResizeObserver = vi.fn().mockImplementation(() => ({
   disconnect: vi.fn()
 }));
 
-type Data = { id: number; name: string };
+type Data = { id: number; name: string; value?: string };
 
 // Timer mock
 // https://jestjs.io/docs/en/timer-mocks
@@ -28,7 +28,12 @@ it("Render ResponsePage", async () => {
         fields={[]}
         columns={[
           { field: "id", header: "ID" },
-          { field: "name", header: "Name" }
+          { field: "name", header: "Name" },
+          {
+            field: "value",
+            header: "Value",
+            valueFormatter: ({ data }) => data?.value ?? data?.name
+          }
         ]}
         height={200}
         itemSize={[118, MUGlobal.pagePaddings]}

package/lib/GridUtils.d.ts

@@ -13,7 +13,7 @@ export declare namespace GridUtils {
      * @param keepSource Keep source or not
      * @returns Request data
      */
-    function createLoader(props: GridLoadDataProps, template?: object, cacheKey?: string, keepSource?: boolean): {
+    function createLoader<const F>(props: GridLoadDataProps, template?: F, cacheKey?: string, keepSource?: boolean): DataTypes.BasicTemplateType<{ [k in keyof F]: F[k] extends "date" ? "string" | "date" : F[k] extends "string" | "number" | "bigint" | "boolean" | "date" | "number[]" | "bigint[]" | "date[]" | "boolean[]" | "string[]" | "unknown[]" ? F[k] : never; }> & {
         queryPaging: import("@etsoo/appscript").QueryPagingData;
     };
     /**

package/lib/ResponsibleContainer.d.ts

@@ -7,7 +7,7 @@ import { ScrollerListExInnerItemRendererProps, ScrollerListExItemSize } from "./
 /**
  * ResponsibleContainer props
  */
-export type ResponsibleContainerProps<T extends object> = Omit<DataGridExProps<T>, "height" | "itemKey" | "loadData" | "mRef" | "onScroll" | "onItemsRendered" | "onInitLoad" | "onUpdateRows"> & {
+export type ResponsibleContainerProps<T extends object, F> = Omit<DataGridExProps<T>, "height" | "itemKey" | "loadData" | "mRef" | "onScroll" | "onItemsRendered" | "onInitLoad" | "onUpdateRows"> & {
     /**
      * Height will be deducted
      * @param height Current calcuated height
@@ -32,11 +32,11 @@ export type ResponsibleContainerProps<T extends object> = Omit<DataGridExProps<T
     /**
      * Search fields
      */
-    fields?: React.ReactElement[] | ((data: GridTemplateType<ResponsibleContainerProps<T>["fieldTemplate"]>) => React.ReactElement[]);
+    fields?: React.ReactElement[] | ((data: GridTemplateType<F>) => React.ReactElement[]);
     /**
      * Search field template
      */
-    fieldTemplate: object;
+    readonly fieldTemplate: F;
     /**
      * Grid height
      */
@@ -56,7 +56,7 @@ export type ResponsibleContainerProps<T extends object> = Omit<DataGridExProps<T
     /**
      * Load data callback
      */
-    loadData: (data: GridJsonData & GridTemplateType<ResponsibleContainerProps<T>["fieldTemplate"]>, lastItem?: T) => PromiseLike<T[] | null | undefined>;
+    loadData: (data: GridJsonData & GridTemplateType<F>, lastItem?: T) => PromiseLike<T[] | null | undefined>;
     /**
      * Methods
      */
@@ -95,4 +95,4 @@ export type ResponsibleContainerProps<T extends object> = Omit<DataGridExProps<T
  * @param props Props
  * @returns Layout
  */
-export declare function ResponsibleContainer<T extends object>(props: ResponsibleContainerProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function ResponsibleContainer<T extends object, F>(props: ResponsibleContainerProps<T, F>): import("react/jsx-runtime").JSX.Element;

package/lib/pages/DataGridPage.d.ts

@@ -4,4 +4,4 @@ import type { DataGridPageProps } from "./DataGridPageProps";
  * @param props Props
  * @returns Component
  */
-export declare function DataGridPage<T extends object>(props: DataGridPageProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function DataGridPage<T extends object, F>(props: DataGridPageProps<T, F>): import("react/jsx-runtime").JSX.Element;

package/lib/pages/DataGridPageProps.d.ts

@@ -2,8 +2,9 @@ import type { DataGridExProps } from "../DataGridEx";
 import type { SearchPageProps } from "./SearchPageProps";
 /**
  * DataGrid page props
+ * Change it to interface extends can find the conflicts quickly
  */
-export type DataGridPageProps<T extends object> = SearchPageProps<T> & Omit<DataGridExProps<T>, "loadData"> & {
+export type DataGridPageProps<T extends object, F> = SearchPageProps<T, F> & Omit<DataGridExProps<T>, "loadData" | "cacheKey" | "cacheMinutes" | "height"> & {
     /**
      * Height will be deducted
      * @param height Current calcuated height

package/lib/pages/FixedListPage.d.ts

@@ -4,7 +4,7 @@ import type { ListPageProps } from "./ListPage";
  * @param props Props
  * @returns Component
  */
-export declare function FixedListPage<T extends object>(props: ListPageProps<T> & {
+export declare function FixedListPage<T extends object, F>(props: ListPageProps<T, F> & {
     /**
      * Height will be deducted
      * @param height Current calcuated height

package/lib/pages/ListPage.d.ts

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

package/lib/pages/ResponsivePage.d.ts

@@ -7,7 +7,7 @@ import type { OperationMessageHandlerAll } from "../messages/OperationMessageHan
 /**
  * Response page props
  */
-export type ResponsePageProps<T extends object> = DataGridPageProps<T> & {
+export type ResponsePageProps<T extends object, F> = DataGridPageProps<T, F> & {
     /**
      *
      * @param height Current height
@@ -53,4 +53,4 @@ export type ResponsePageProps<T extends object> = DataGridPageProps<T> & {
  * @param props Props
  * @returns Component
  */
-export declare function ResponsivePage<T extends object>(props: ResponsePageProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function ResponsivePage<T extends object, F>(props: ResponsePageProps<T, F>): import("react/jsx-runtime").JSX.Element;

package/lib/pages/SearchPageProps.d.ts

@@ -3,7 +3,7 @@ import type { CommonPageProps } from "./CommonPage";
 /**
  * Search page props
  */
-export type SearchPageProps<T extends object> = Omit<GridLoader<T>, "loadData"> & {
+export type SearchPageProps<T extends object, F> = Omit<GridLoader<T>, "loadData"> & {
     /**
      * Cache key
      */
@@ -15,15 +15,15 @@ export type SearchPageProps<T extends object> = Omit<GridLoader<T>, "loadData">
     /**
      * Search fields
      */
-    fields: React.ReactElement[] | ((data: GridTemplateType<SearchPageProps<T>["fieldTemplate"]>) => React.ReactElement[]);
+    fields: React.ReactElement[] | ((data: GridTemplateType<F>) => React.ReactElement[]);
     /**
      * Search field template
      */
-    readonly fieldTemplate: object;
+    readonly fieldTemplate: F;
     /**
      * Load data callback
      */
-    loadData: (data: GridJsonData & GridTemplateType<SearchPageProps<T>["fieldTemplate"]>, lastItem?: T) => PromiseLike<T[] | null | undefined>;
+    loadData: (data: GridJsonData & GridTemplateType<F>, 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, D extends DataTypes.Keys<T>> = SearchPageProps<T> & Omit<TableExProps<T, D>, "loadData">;
+export type TablePageProps<T extends object, F, D extends DataTypes.Keys<T>> = SearchPageProps<T, F> & Omit<TableExProps<T, D>, "loadData">;
 /**
  * Table page
  * @param props Props
  * @returns Component
  */
-export declare function TablePage<T extends object, D extends DataTypes.Keys<T> = IdDefaultType<T>>(props: TablePageProps<T, D>): import("react/jsx-runtime").JSX.Element;
+export declare function TablePage<T extends object, F, D extends DataTypes.Keys<T> = IdDefaultType<T>>(props: TablePageProps<T, F, D>): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.4.46",
+  "version": "1.4.48",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "type": "module",
@@ -37,7 +37,7 @@
     "@emotion/styled": "^11.13.5",
     "@etsoo/appscript": "^1.5.78",
     "@etsoo/notificationbase": "^1.1.54",
-    "@etsoo/react": "^1.8.10",
+    "@etsoo/react": "^1.8.11",
     "@etsoo/shared": "^1.2.55",
     "@mui/icons-material": "^6.1.10",
     "@mui/material": "^6.1.10",

package/src/GridUtils.ts

@@ -18,9 +18,9 @@ export namespace GridUtils {
    * @param keepSource Keep source or not
    * @returns Request data
    */
-  export function createLoader(
+  export function createLoader<const F>(
     props: GridLoadDataProps,
-    template?: object,
+    template?: F,
     cacheKey?: string,
     keepSource?: boolean
   ) {

package/src/ResponsibleContainer.tsx

@@ -33,7 +33,7 @@ import { GridUtils } from "./GridUtils";
 /**
  * ResponsibleContainer props
  */
-export type ResponsibleContainerProps<T extends object> = Omit<
+export type ResponsibleContainerProps<T extends object, F> = Omit<
   DataGridExProps<T>,
   | "height"
   | "itemKey"
@@ -78,14 +78,12 @@ export type ResponsibleContainerProps<T extends object> = Omit<
    */
   fields?:
     | React.ReactElement[]
-    | ((
-        data: GridTemplateType<ResponsibleContainerProps<T>["fieldTemplate"]>
-      ) => React.ReactElement[]);
+    | ((data: GridTemplateType<F>) => React.ReactElement[]);
 
   /**
    * Search field template
    */
-  fieldTemplate: object;
+  readonly fieldTemplate: F;
 
   /**
    * Grid height
@@ -113,8 +111,7 @@ export type ResponsibleContainerProps<T extends object> = Omit<
    * Load data callback
    */
   loadData: (
-    data: GridJsonData &
-      GridTemplateType<ResponsibleContainerProps<T>["fieldTemplate"]>,
+    data: GridJsonData & GridTemplateType<F>,
     lastItem?: T
   ) => PromiseLike<T[] | null | undefined>;
 
@@ -185,8 +182,8 @@ function defaultContainerBoxSx(
  * @param props Props
  * @returns Layout
  */
-export function ResponsibleContainer<T extends object>(
-  props: ResponsibleContainerProps<T>
+export function ResponsibleContainer<T extends object, F>(
+  props: ResponsibleContainerProps<T, F>
 ) {
   // Destruct
   const {

package/src/pages/DataGridPage.tsx

@@ -28,7 +28,9 @@ interface LocalStates<T> {
  * @param props Props
  * @returns Component
  */
-export function DataGridPage<T extends object>(props: DataGridPageProps<T>) {
+export function DataGridPage<T extends object, F>(
+  props: DataGridPageProps<T, F>
+) {
   // Destruct
   const {
     adjustHeight,

package/src/pages/DataGridPageProps.ts

@@ -3,9 +3,13 @@ import type { SearchPageProps } from "./SearchPageProps";
 
 /**
  * DataGrid page props
+ * Change it to interface extends can find the conflicts quickly
  */
-export type DataGridPageProps<T extends object> = SearchPageProps<T> &
-  Omit<DataGridExProps<T>, "loadData"> & {
+export type DataGridPageProps<T extends object, F> = SearchPageProps<T, F> &
+  Omit<
+    DataGridExProps<T>,
+    "loadData" | "cacheKey" | "cacheMinutes" | "height"
+  > & {
     /**
      * Height will be deducted
      * @param height Current calcuated height

package/src/pages/FixedListPage.tsx

@@ -21,8 +21,8 @@ import type { ListPageProps } from "./ListPage";
  * @param props Props
  * @returns Component
  */
-export function FixedListPage<T extends object>(
-  props: ListPageProps<T> & {
+export function FixedListPage<T extends object, F>(
+  props: ListPageProps<T, F> & {
     /**
      * Height will be deducted
      * @param height Current calcuated height

package/src/pages/ListPage.tsx

@@ -18,7 +18,7 @@ import type { SearchPageProps } from "./SearchPageProps";
 /**
  * List page props
  */
-export type ListPageProps<T extends object> = SearchPageProps<T> &
+export type ListPageProps<T extends object, F> = SearchPageProps<T, F> &
   Omit<ScrollerListExProps<T>, "loadData">;
 
 /**
@@ -26,7 +26,7 @@ export type ListPageProps<T extends object> = SearchPageProps<T> &
  * @param props Props
  * @returns Component
  */
-export function ListPage<T extends object>(props: ListPageProps<T>) {
+export function ListPage<T extends object, F>(props: ListPageProps<T, F>) {
   // Destruct
   const {
     fields,

package/src/pages/ResponsivePage.tsx

@@ -15,7 +15,7 @@ import type { OperationMessageHandlerAll } from "../messages/OperationMessageHan
 /**
  * Response page props
  */
-export type ResponsePageProps<T extends object> = DataGridPageProps<T> & {
+export type ResponsePageProps<T extends object, F> = DataGridPageProps<T, F> & {
   /**
    *
    * @param height Current height
@@ -72,7 +72,9 @@ export type ResponsePageProps<T extends object> = DataGridPageProps<T> & {
  * @param props Props
  * @returns Component
  */
-export function ResponsivePage<T extends object>(props: ResponsePageProps<T>) {
+export function ResponsivePage<T extends object, F>(
+  props: ResponsePageProps<T, F>
+) {
   // Destruct
   const { pageProps = {}, operationMessageHandler, ...rest } = props;
 
@@ -94,7 +96,7 @@ export function ResponsivePage<T extends object>(props: ResponsePageProps<T>) {
       {operationMessageHandler && (
         <OperationMessageContainer handler={operationMessageHandler} />
       )}
-      <ResponsibleContainer<T>
+      <ResponsibleContainer<T, F>
         paddings={paddings}
         containerBoxSx={(paddings, hasField, _dataGrid) => {
           // Half

package/src/pages/SearchPageProps.ts

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

package/src/pages/TablePage.tsx

@@ -23,8 +23,9 @@ import type { SearchPageProps } from "./SearchPageProps";
  */
 export type TablePageProps<
   T extends object,
+  F,
   D extends DataTypes.Keys<T>
-> = SearchPageProps<T> & Omit<TableExProps<T, D>, "loadData">;
+> = SearchPageProps<T, F> & Omit<TableExProps<T, D>, "loadData">;
 
 /**
  * Table page
@@ -33,8 +34,9 @@ export type TablePageProps<
  */
 export function TablePage<
   T extends object,
+  F,
   D extends DataTypes.Keys<T> = IdDefaultType<T>
->(props: TablePageProps<T, D>) {
+>(props: TablePageProps<T, F, D>) {
   // Destruct
   const {
     columns,