@etsoo/react 1.2.32 → 1.2.36

package/.github/workflows/main.yml

@@ -28,7 +28,7 @@ jobs:
       # Setup .npmrc file to publish to npm
       - uses: actions/setup-node@v1
         with:
-          node-version: '14.8'
+          node-version: '14.18'
           registry-url: 'https://registry.npmjs.org'
 
       # Named after Continuous Integration, installs dependencies directly from package-lock.json

package/__tests__/tsconfig.json

@@ -1,6 +1,6 @@
 {
     "compilerOptions": {
-        "target": "ES2020",
+        "target": "ES2019",
         "module": "ESNext",
         "allowJs": true,
         "skipLibCheck": true,

package/lib/app/Labels.d.ts

@@ -50,14 +50,14 @@ export declare namespace Labels {
      * setLabelReference key reference
      */
     interface setLabelsReference {
-        commonPage?: DataTypes.ReadonlyStringDictionary;
-        notificationMU?: DataTypes.ReadonlyStringDictionary;
-        userAvatarEditor?: DataTypes.ReadonlyStringDictionary;
+        commonPage?: DataTypes.StringDictionary;
+        notificationMU?: DataTypes.StringDictionary;
+        userAvatarEditor?: DataTypes.StringDictionary;
     }
     /**
      * Set components' labels
      * @param labels Labels
      * @param reference Key reference
      */
-    const setLabels: (labels: DataTypes.ReadonlySimpleObject, reference?: setLabelsReference) => void;
+    const setLabels: (labels: {}, reference?: setLabelsReference) => void;
 }

package/lib/components/GridColumn.d.ts

@@ -4,7 +4,7 @@ import { GridLoaderStates } from './GridLoader';
 /**
  * Grid data type
  */
-import GridDataType = DataTypes.DataType;
+import GridDataType = DataTypes.CombinedEnum;
 export { GridDataType };
 /**
  * Grid align
@@ -15,7 +15,7 @@ export declare type GridAlign = 'center' | 'inherit' | 'justify' | 'left' | 'rig
  * @param align Align
  * @param type Data type
  */
-export declare const GridAlignGet: (align?: GridAlign | undefined, type?: DataTypes.DataType | undefined) => GridAlign | undefined;
+export declare const GridAlignGet: (align?: GridAlign | undefined, type?: DataTypes.CombinedEnum | undefined) => GridAlign | undefined;
 /**
  * Grid cell value type
  */

package/lib/components/GridColumn.js

@@ -2,7 +2,7 @@ import { DataTypes } from '@etsoo/shared';
 /**
  * Grid data type
  */
-var GridDataType = DataTypes.DataType;
+var GridDataType = DataTypes.CombinedEnum;
 export { GridDataType };
 /**
  * Data align get

package/lib/components/GridLoader.d.ts

@@ -1,3 +1,4 @@
+import { DataTypes } from '@etsoo/shared';
 /**
  * Grid size
  */
@@ -11,17 +12,17 @@ export declare const GridSizeGet: (size: GridSize, input: number) => number;
 /**
  * Grid data type
  */
-export declare type GridData = FormData | Record<string, any>;
+export declare type GridData = FormData | DataTypes.StringRecord;
 /**
- * Grid data get as Json
+ * Grid data get with format
  * @param data Data
  * @returns Json data
  */
-export declare const GridDataGet: (data?: GridData | undefined) => Record<string, any> | undefined;
+export declare function GridDataGet<F extends DataTypes.BasicTemplate>(props: GridLoadDataProps, template?: F): GridJsonData & DataTypes.BasicTemplateType<F>;
 /**
  * Grid Json data
  */
-export interface GridJsonData extends Omit<GridLoadDataProps, 'data'>, Record<string, any> {
+export interface GridJsonData extends Omit<GridLoadDataProps, 'data'> {
 }
 /**
  * Grid data load props

package/lib/components/GridLoader.js

@@ -10,16 +10,24 @@ export const GridSizeGet = (size, input) => {
     return size;
 };
 /**
- * Grid data get as Json
+ * Grid data get with format
  * @param data Data
  * @returns Json data
  */
-export const GridDataGet = (data) => {
-    if (data instanceof FormData) {
-        // Clear empty value
-        DomUtils.clearFormData(data);
-        // Transfer to Json
-        return DomUtils.formDataToObject(data);
+export function GridDataGet(props, template) {
+    // Destruct
+    const { data, ...rest } = props;
+    // Conditions
+    let conditions = {};
+    // Cast data
+    if (data != null && template != null) {
+        if (data instanceof FormData) {
+            // Clear empty value
+            DomUtils.clearFormData(data);
+        }
+        // Set keepSource to true to hold form data, even they are invisible from the conditions
+        conditions = DomUtils.dataAs(data, template, true);
     }
-    return data;
-};
+    // DomUtils.dataAs(data, template);
+    return { ...conditions, ...rest };
+}

package/lib/mu/pages/DataGridPage.d.ts

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

package/lib/mu/pages/DataGridPage.js

@@ -15,7 +15,7 @@ import { CommonPage } from './CommonPage';
 export function DataGridPage(props) {
     var _a, _b;
     // Destruct
-    const { adjustHeight, fields, height, loadData, mRef, sizeReadyMiliseconds = 100, pageProps = {}, ...rest } = props;
+    const { adjustHeight, fields, fieldTemplate, height, loadData, mRef, sizeReadyMiliseconds = 100, pageProps = {}, ...rest } = props;
     (_a = pageProps.paddings) !== null && _a !== void 0 ? _a : (pageProps.paddings = MUGlobal.pagePaddings);
     // States
     const [states, setStates] = React.useReducer((currentState, newState) => {
@@ -33,9 +33,9 @@ export function DataGridPage(props) {
     const onSubmit = (data, _reset) => {
         setStates({ data });
     };
-    const localLoadData = ({ data, ...rest }) => {
-        const json = GridDataGet(data);
-        return loadData({ ...json, ...rest });
+    const localLoadData = (props) => {
+        const data = GridDataGet(props, fieldTemplate);
+        return loadData(data);
     };
     // Watch container
     const { dimensions } = useDimensions(1, undefined, sizeReadyMiliseconds);

package/lib/mu/pages/DataGridPageProps.d.ts

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

package/lib/mu/pages/FixedListPage.d.ts

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

package/lib/mu/pages/FixedListPage.js

@@ -15,7 +15,7 @@ import { CommonPage } from './CommonPage';
 export function FixedListPage(props) {
     var _a;
     // Destruct
-    const { adjustHeight, fields, loadData, mRef, sizeReadyMiliseconds = 100, pageProps = {}, ...rest } = props;
+    const { adjustHeight, fields, fieldTemplate, loadData, mRef, sizeReadyMiliseconds = 100, pageProps = {}, ...rest } = props;
     (_a = pageProps.paddings) !== null && _a !== void 0 ? _a : (pageProps.paddings = MUGlobal.pagePaddings);
     // States
     const [states] = React.useState({});
@@ -39,9 +39,9 @@ export function FixedListPage(props) {
         states.data = data;
         reset();
     };
-    const localLoadData = ({ data, ...rest }) => {
-        const json = GridDataGet(data);
-        return loadData({ ...json, ...rest });
+    const localLoadData = (props) => {
+        const data = GridDataGet(props, fieldTemplate);
+        return loadData(data);
     };
     // Watch container
     const { dimensions } = useDimensions(1, undefined, sizeReadyMiliseconds);

package/lib/mu/pages/ListPage.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
+import { DataTypes } from '@etsoo/shared';
 import { ListPageProps } from './ListPageProps';
 /**
  * List page
  * @param props Props
  * @returns Component
  */
-export declare function ListPage<T>(props: ListPageProps<T>): JSX.Element;
+export declare function ListPage<T, F extends DataTypes.BasicTemplate>(props: ListPageProps<T, F>): JSX.Element;

package/lib/mu/pages/ListPage.js

@@ -14,7 +14,7 @@ import { CommonPage, CommonPagePullContainer, CommonPageScrollContainer } from '
 export function ListPage(props) {
     var _a;
     // Destruct
-    const { fields, loadData, mRef, pageProps = {}, ...rest } = props;
+    const { fields, fieldTemplate, loadData, mRef, pageProps = {}, ...rest } = props;
     (_a = pageProps.paddings) !== null && _a !== void 0 ? _a : (pageProps.paddings = MUGlobal.pagePaddings);
     // States
     const [states] = React.useState({});
@@ -36,9 +36,9 @@ export function ListPage(props) {
         states.data = data;
         reset();
     };
-    const localLoadData = ({ data, ...rest }) => {
-        const json = GridDataGet(data);
-        return loadData({ ...json, ...rest });
+    const localLoadData = (props) => {
+        const data = GridDataGet(props, fieldTemplate);
+        return loadData(data);
     };
     // Layout
     return (React.createElement(CommonPage, { ...pageProps, scrollContainer: CommonPageScrollContainer, pullContainer: CommonPagePullContainer },

package/lib/mu/pages/ListPageProps.d.ts

@@ -1,7 +1,8 @@
+import { DataTypes } from '@etsoo/shared';
 import { ScrollerListExProps } from '../ScrollerListEx';
 import { SearchPageProps } from './SearchPageProps';
 /**
  * List page props
  */
-export interface ListPageProps<T> extends SearchPageProps<T>, Omit<ScrollerListExProps<T>, 'loadData'> {
+export interface ListPageProps<T, F extends DataTypes.BasicTemplate> extends SearchPageProps<T, F>, Omit<ScrollerListExProps<T>, 'loadData'> {
 }

package/lib/mu/pages/ResponsivePage.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
+import { DataTypes } from '@etsoo/shared';
 import { ResponsePageProps } from './ResponsivePageProps';
 /**
  * Fixed height list page
  * @param props Props
  * @returns Component
  */
-export declare function ResponsivePage<T>(props: ResponsePageProps<T>): JSX.Element;
+export declare function ResponsivePage<T, F extends DataTypes.BasicTemplate>(props: ResponsePageProps<T, F>): JSX.Element;

package/lib/mu/pages/ResponsivePage.js

@@ -16,7 +16,7 @@ import { CommonPage } from './CommonPage';
 export function ResponsivePage(props) {
     var _a, _b;
     // Destruct
-    const { adjustHeight, columns, dataGridMinWidth = DataGridExCalColumns(columns).total, fields, height, loadData, innerItemRenderer, itemSize, mRef, sizeReadyMiliseconds = 100, pageProps = {}, ...rest } = props;
+    const { adjustHeight, columns, dataGridMinWidth = DataGridExCalColumns(columns).total, fields, fieldTemplate, height, loadData, innerItemRenderer, itemSize, mRef, sizeReadyMiliseconds = 100, pageProps = {}, ...rest } = props;
     (_a = pageProps.paddings) !== null && _a !== void 0 ? _a : (pageProps.paddings = MUGlobal.pagePaddings);
     // States
     const [states, setStates] = React.useReducer((currentState, newState) => {
@@ -24,9 +24,9 @@ export function ResponsivePage(props) {
     }, {
         height
     });
-    const localLoadData = ({ data, ...rest }) => {
-        const json = GridDataGet(data);
-        return loadData({ ...json, ...rest });
+    const localLoadData = (props) => {
+        const data = GridDataGet(props, fieldTemplate);
+        return loadData(data);
     };
     const refs = useCombinedRefs(mRef, (ref) => {
         if (ref == null)

package/lib/mu/pages/ResponsivePageProps.d.ts

@@ -1,13 +1,13 @@
 /// <reference types="react" />
+import { DataTypes } from '@etsoo/shared';
 import { ListChildComponentProps } from 'react-window';
 import { GridMethodRef } from '../GridMethodRef';
 import { ScrollerListExInnerItemRendererProps } from '../ScrollerListEx';
 import { DataGridPageProps } from './DataGridPageProps';
-import { SearchPageProps } from './SearchPageProps';
 /**
  * Response page props
  */
-export interface ResponsePageProps<T> extends SearchPageProps<T>, Omit<DataGridPageProps<T>, 'mRef' | 'itemKey' | 'onScroll' | 'onItemsRendered'> {
+export interface ResponsePageProps<T, F extends DataTypes.BasicTemplate> extends Omit<DataGridPageProps<T, F>, 'mRef' | 'itemKey' | 'onScroll' | 'onItemsRendered'> {
     /**
      * Min width to show Datagrid
      */

package/lib/mu/pages/SearchPageProps.d.ts

@@ -1,18 +1,23 @@
 /// <reference types="react" />
+import { DataTypes } from '@etsoo/shared';
 import { GridJsonData, GridLoader } from '../../components/GridLoader';
 import { CommonPageProps } from './CommonPageProps';
 /**
  * Search page props
  */
-export interface SearchPageProps<T> extends Omit<GridLoader<T>, 'loadData'> {
+export interface SearchPageProps<T, F extends DataTypes.BasicTemplate> extends Omit<GridLoader<T>, 'loadData'> {
     /**
-     * Fields
+     * Search fields
      */
     fields: React.ReactElement[];
+    /**
+     * Search field template
+     */
+    fieldTemplate?: F;
     /**
      * Load data callback
      */
-    loadData: (data: GridJsonData) => PromiseLike<T[] | null | undefined>;
+    loadData: (data: GridJsonData & DataTypes.BasicTemplateType<F>) => PromiseLike<T[] | null | undefined>;
     /**
      * Page props
      */

package/lib/mu/pages/TablePage.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
+import { DataTypes } from '@etsoo/shared';
 import { TablePageProps } from './TablePageProps';
 /**
  * Table page
  * @param props Props
  * @returns Component
  */
-export declare function TablePage<T>(props: TablePageProps<T>): JSX.Element;
+export declare function TablePage<T, F extends DataTypes.BasicTemplate>(props: TablePageProps<T, F>): JSX.Element;

package/lib/mu/pages/TablePage.js

@@ -15,7 +15,7 @@ import { CommonPage, CommonPagePullContainer, CommonPageScrollContainer } from '
 export function TablePage(props) {
     var _a;
     // Destruct
-    const { columns, fields, loadData, mRef, sizeReadyMiliseconds = 100, pageProps = {}, ...rest } = props;
+    const { columns, fields, fieldTemplate, loadData, mRef, sizeReadyMiliseconds = 100, pageProps = {}, ...rest } = props;
     (_a = pageProps.paddings) !== null && _a !== void 0 ? _a : (pageProps.paddings = MUGlobal.pagePaddings);
     // States
     const [states] = React.useState({});
@@ -37,9 +37,9 @@ export function TablePage(props) {
         states.data = data;
         reset();
     };
-    const localLoadData = ({ data, ...rest }) => {
-        const json = GridDataGet(data);
-        return loadData({ ...json, ...rest });
+    const localLoadData = (props) => {
+        const data = GridDataGet(props, fieldTemplate);
+        return loadData(data);
     };
     // Total width
     const totalWidth = React.useMemo(() => columns.reduce((previousValue, { width, minWidth }) => {

package/lib/mu/pages/TablePageProps.d.ts

@@ -1,7 +1,8 @@
+import { DataTypes } from '@etsoo/shared';
 import { TableExProps } from '../TableEx';
 import { SearchPageProps } from './SearchPageProps';
 /**
  * Table page props
  */
-export interface TablePageProps<T> extends SearchPageProps<T>, Omit<TableExProps<T>, 'loadData'> {
+export interface TablePageProps<T, F extends DataTypes.BasicTemplate> extends SearchPageProps<T, F>, Omit<TableExProps<T>, 'loadData'> {
 }

package/lib/states/CultureState.d.ts

@@ -15,7 +15,7 @@ export interface CultureCalls extends IUpdate<ICulture, CultureAction> {
      * Key value
      * @param key Item key
      */
-    get<T extends DataTypes.SimpleType = string>(key: string): T | undefined;
+    get<T = string>(key: string): T | undefined;
 }
 /**
  * Culture provider props

package/lib/states/RouterProps.d.ts

@@ -15,7 +15,7 @@ export declare type IdStateRouterProps<T extends DataTypes.IdType = number> = St
 /**
  * State router props, include data in location.state
  */
-export declare type StateRouterProps<T extends Readonly<Record<string, any>>> = RouteComponentProps<{
+export declare type StateRouterProps<T extends Readonly<DataTypes.StringRecord>> = RouteComponentProps<{
     location: {
         state: T;
     };

package/lib/uses/useCombinedRefs.d.ts

@@ -4,4 +4,4 @@
  * @param refs Refs
  * @returns Callback
  */
-export default function useCombinedRefs(...refs: (React.Ref<any> | undefined)[]): (target: any) => void;
+export default function useCombinedRefs(...refs: (React.Ref<unknown> | undefined)[]): (target: unknown) => void;

package/lib/uses/useCombinedRefs.js

@@ -19,7 +19,7 @@ export default function useCombinedRefs(...refs) {
             }
             else {
                 // as any to update readonly property
-                ref.current = target;
+                Reflect.set(ref, 'current', target);
             }
         });
     };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.2.32",
+    "version": "1.2.36",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -44,16 +44,16 @@
         "@emotion/react": "^11.4.1",
         "@emotion/style": "^0.8.0",
         "@emotion/styled": "^11.3.0",
-        "@etsoo/appscript": "^1.1.6",
-        "@etsoo/notificationbase": "^1.0.79",
-        "@etsoo/shared": "^1.0.46",
-        "@mui/icons-material": "^5.0.3",
-        "@mui/material": "^5.0.3",
+        "@etsoo/appscript": "^1.1.9",
+        "@etsoo/notificationbase": "^1.0.84",
+        "@etsoo/shared": "^1.0.51",
+        "@mui/icons-material": "^5.0.4",
+        "@mui/material": "^5.0.4",
         "@reach/router": "^1.3.4",
         "@types/pica": "^5.1.3",
         "@types/pulltorefreshjs": "^0.1.5",
         "@types/reach__router": "^1.3.9",
-        "@types/react": "^17.0.27",
+        "@types/react": "^17.0.30",
         "@types/react-avatar-editor": "^10.3.6",
         "@types/react-dom": "^17.0.9",
         "@types/react-input-mask": "^3.0.1",
@@ -77,13 +77,13 @@
         "@types/react-test-renderer": "^17.0.1",
         "@typescript-eslint/eslint-plugin": "^5.0.0",
         "@typescript-eslint/parser": "^5.0.0",
-        "eslint": "^8.0.0",
+        "eslint": "^8.0.1",
         "eslint-config-airbnb-base": "^14.2.1",
-        "eslint-plugin-import": "^2.25.1",
+        "eslint-plugin-import": "^2.25.2",
         "eslint-plugin-react": "^7.26.1",
         "jest": "^27.2.5",
         "react-test-renderer": "^17.0.2",
-        "ts-jest": "^27.0.5",
-        "typescript": "^4.4.3"
+        "ts-jest": "^27.0.6",
+        "typescript": "^4.4.4"
     }
 }

package/src/app/Labels.ts

@@ -54,9 +54,9 @@ export namespace Labels {
      * setLabelReference key reference
      */
     export interface setLabelsReference {
-        commonPage?: DataTypes.ReadonlyStringDictionary;
-        notificationMU?: DataTypes.ReadonlyStringDictionary;
-        userAvatarEditor?: DataTypes.ReadonlyStringDictionary;
+        commonPage?: DataTypes.StringDictionary;
+        notificationMU?: DataTypes.StringDictionary;
+        userAvatarEditor?: DataTypes.StringDictionary;
     }
 
     /**
@@ -65,7 +65,7 @@ export namespace Labels {
      * @param reference Key reference
      */
     export const setLabels = (
-        labels: DataTypes.ReadonlySimpleObject,
+        labels: {},
         reference: setLabelsReference = {}
     ) => {
         Utils.setLabels(CommonPage, labels, reference.commonPage);

package/src/app/ReactApp.ts

@@ -7,7 +7,6 @@ import {
 } from '@etsoo/appscript';
 import { DataTypes } from '@etsoo/shared';
 import React from 'react';
-import { NotifierPromptProps } from '../mu/NotifierPromptProps';
 import { NotificationReactCallProps } from '../notifier/Notifier';
 import { CultureAction } from '../states/CultureState';
 import { IStateProps } from '../states/IState';

package/src/components/GridColumn.ts

@@ -5,7 +5,7 @@ import { GridLoaderStates } from './GridLoader';
 /**
  * Grid data type
  */
-import GridDataType = DataTypes.DataType;
+import GridDataType = DataTypes.CombinedEnum;
 export { GridDataType };
 
 /**

package/src/components/GridLoader.ts

@@ -1,4 +1,4 @@
-import { DomUtils } from '@etsoo/shared';
+import { DataTypes, DomUtils } from '@etsoo/shared';
 
 /**
  * Grid size
@@ -18,31 +18,42 @@ export const GridSizeGet = (size: GridSize, input: number) => {
 /**
  * Grid data type
  */
-export type GridData = FormData | Record<string, any>;
+export type GridData = FormData | DataTypes.StringRecord;
 
 /**
- * Grid data get as Json
+ * Grid data get with format
  * @param data Data
  * @returns Json data
  */
-export const GridDataGet = (data?: GridData) => {
-    if (data instanceof FormData) {
-        // Clear empty value
-        DomUtils.clearFormData(data);
-
-        // Transfer to Json
-        return DomUtils.formDataToObject(data);
+export function GridDataGet<F extends DataTypes.BasicTemplate>(
+    props: GridLoadDataProps,
+    template?: F
+): GridJsonData & DataTypes.BasicTemplateType<F> {
+    // Destruct
+    const { data, ...rest } = props;
+
+    // Conditions
+    let conditions: DataTypes.BasicTemplateType<F> = {};
+
+    // Cast data
+    if (data != null && template != null) {
+        if (data instanceof FormData) {
+            // Clear empty value
+            DomUtils.clearFormData(data);
+        }
+
+        // Set keepSource to true to hold form data, even they are invisible from the conditions
+        conditions = DomUtils.dataAs(data, template, true);
     }
 
-    return data;
-};
+    // DomUtils.dataAs(data, template);
+    return { ...conditions, ...rest };
+}
 
 /**
  * Grid Json data
  */
-export interface GridJsonData
-    extends Omit<GridLoadDataProps, 'data'>,
-        Record<string, any> {}
+export interface GridJsonData extends Omit<GridLoadDataProps, 'data'> {}
 
 /**
  * Grid data load props

package/src/mu/pages/DataGridPage.tsx

@@ -1,3 +1,4 @@
+import { DataTypes } from '@etsoo/shared';
 import { Box, Stack } from '@mui/material';
 import React from 'react';
 import { GridDataGet, GridLoadDataProps } from '../../components/GridLoader';
@@ -22,11 +23,14 @@ interface LocalStates {
  * @param props Props
  * @returns Component
  */
-export function DataGridPage<T>(props: DataGridPageProps<T>) {
+export function DataGridPage<T, F extends DataTypes.BasicTemplate>(
+    props: DataGridPageProps<T, F>
+) {
     // Destruct
     const {
         adjustHeight,
         fields,
+        fieldTemplate,
         height,
         loadData,
         mRef,
@@ -58,9 +62,9 @@ export function DataGridPage<T>(props: DataGridPageProps<T>) {
         setStates({ data });
     };
 
-    const localLoadData = ({ data, ...rest }: GridLoadDataProps) => {
-        const json = GridDataGet(data);
-        return loadData({ ...json, ...rest });
+    const localLoadData = (props: GridLoadDataProps) => {
+        const data = GridDataGet(props, fieldTemplate);
+        return loadData(data);
     };
 
     // Watch container

package/src/mu/pages/DataGridPageProps.ts

@@ -1,11 +1,12 @@
+import { DataTypes } from '@etsoo/shared';
 import { DataGridExProps } from '../DataGridEx';
 import { SearchPageProps } from './SearchPageProps';
 
 /**
  * DataGrid page props
  */
-export interface DataGridPageProps<T>
-    extends SearchPageProps<T>,
+export interface DataGridPageProps<T, F extends DataTypes.BasicTemplate>
+    extends SearchPageProps<T, F>,
         Omit<DataGridExProps<T>, 'loadData' | 'height'> {
     /**
      * Height will be deducted

package/src/mu/pages/FixedListPage.tsx

@@ -1,3 +1,4 @@
+import { DataTypes } from '@etsoo/shared';
 import { Box, Stack } from '@mui/material';
 import React from 'react';
 import { GridDataGet, GridLoadDataProps } from '../../components/GridLoader';
@@ -15,8 +16,8 @@ import { ListPageProps } from './ListPageProps';
  * @param props Props
  * @returns Component
  */
-export function FixedListPage<T>(
-    props: ListPageProps<T> & {
+export function FixedListPage<T, F extends DataTypes.BasicTemplate>(
+    props: ListPageProps<T, F> & {
         /**
          * Height will be deducted
          * @param height Current calcuated height
@@ -28,6 +29,7 @@ export function FixedListPage<T>(
     const {
         adjustHeight,
         fields,
+        fieldTemplate,
         loadData,
         mRef,
         sizeReadyMiliseconds = 100,
@@ -69,9 +71,9 @@ export function FixedListPage<T>(
         reset();
     };
 
-    const localLoadData = ({ data, ...rest }: GridLoadDataProps) => {
-        const json = GridDataGet(data);
-        return loadData({ ...json, ...rest });
+    const localLoadData = (props: GridLoadDataProps) => {
+        const data = GridDataGet(props, fieldTemplate);
+        return loadData(data);
     };
 
     // Watch container

package/src/mu/pages/ListPage.tsx

@@ -1,3 +1,4 @@
+import { DataTypes } from '@etsoo/shared';
 import { Box, Stack } from '@mui/material';
 import React from 'react';
 import { GridDataGet, GridLoadDataProps } from '../../components/GridLoader';
@@ -18,9 +19,18 @@ import { ListPageProps } from './ListPageProps';
  * @param props Props
  * @returns Component
  */
-export function ListPage<T>(props: ListPageProps<T>) {
+export function ListPage<T, F extends DataTypes.BasicTemplate>(
+    props: ListPageProps<T, F>
+) {
     // Destruct
-    const { fields, loadData, mRef, pageProps = {}, ...rest } = props;
+    const {
+        fields,
+        fieldTemplate,
+        loadData,
+        mRef,
+        pageProps = {},
+        ...rest
+    } = props;
 
     pageProps.paddings ??= MUGlobal.pagePaddings;
 
@@ -51,9 +61,9 @@ export function ListPage<T>(props: ListPageProps<T>) {
         reset();
     };
 
-    const localLoadData = ({ data, ...rest }: GridLoadDataProps) => {
-        const json = GridDataGet(data);
-        return loadData({ ...json, ...rest });
+    const localLoadData = (props: GridLoadDataProps) => {
+        const data = GridDataGet(props, fieldTemplate);
+        return loadData(data);
     };
 
     // Layout

package/src/mu/pages/ListPageProps.ts

@@ -1,9 +1,10 @@
+import { DataTypes } from '@etsoo/shared';
 import { ScrollerListExProps } from '../ScrollerListEx';
 import { SearchPageProps } from './SearchPageProps';
 
 /**
  * List page props
  */
-export interface ListPageProps<T>
-    extends SearchPageProps<T>,
+export interface ListPageProps<T, F extends DataTypes.BasicTemplate>
+    extends SearchPageProps<T, F>,
         Omit<ScrollerListExProps<T>, 'loadData'> {}

package/src/mu/pages/ResponsivePage.tsx

@@ -1,3 +1,4 @@
+import { DataTypes } from '@etsoo/shared';
 import { Box, Stack } from '@mui/material';
 import React from 'react';
 import { GridDataGet, GridLoadDataProps } from '../../components/GridLoader';
@@ -23,13 +24,16 @@ interface LocalStates {
  * @param props Props
  * @returns Component
  */
-export function ResponsivePage<T>(props: ResponsePageProps<T>) {
+export function ResponsivePage<T, F extends DataTypes.BasicTemplate>(
+    props: ResponsePageProps<T, F>
+) {
     // Destruct
     const {
         adjustHeight,
         columns,
         dataGridMinWidth = DataGridExCalColumns(columns).total,
         fields,
+        fieldTemplate,
         height,
         loadData,
         innerItemRenderer,
@@ -52,9 +56,9 @@ export function ResponsivePage<T>(props: ResponsePageProps<T>) {
         }
     );
 
-    const localLoadData = ({ data, ...rest }: GridLoadDataProps) => {
-        const json = GridDataGet(data);
-        return loadData({ ...json, ...rest });
+    const localLoadData = (props: GridLoadDataProps) => {
+        const data = GridDataGet(props, fieldTemplate);
+        return loadData(data);
     };
 
     const refs = useCombinedRefs(mRef, (ref: GridMethodRef) => {

package/src/mu/pages/ResponsivePageProps.ts

@@ -1,18 +1,17 @@
+import { DataTypes } from '@etsoo/shared';
 import { ListChildComponentProps } from 'react-window';
 import { GridMethodRef } from '../GridMethodRef';
 import { ScrollerListExInnerItemRendererProps } from '../ScrollerListEx';
 import { DataGridPageProps } from './DataGridPageProps';
-import { SearchPageProps } from './SearchPageProps';
 
 /**
  * Response page props
  */
-export interface ResponsePageProps<T>
-    extends SearchPageProps<T>,
-        Omit<
-            DataGridPageProps<T>,
-            'mRef' | 'itemKey' | 'onScroll' | 'onItemsRendered'
-        > {
+export interface ResponsePageProps<T, F extends DataTypes.BasicTemplate>
+    extends Omit<
+        DataGridPageProps<T, F>,
+        'mRef' | 'itemKey' | 'onScroll' | 'onItemsRendered'
+    > {
     /**
      * Min width to show Datagrid
      */

package/src/mu/pages/SearchPageProps.ts

@@ -1,19 +1,28 @@
+import { DataTypes } from '@etsoo/shared';
 import { GridJsonData, GridLoader } from '../../components/GridLoader';
 import { CommonPageProps } from './CommonPageProps';
 
 /**
  * Search page props
  */
-export interface SearchPageProps<T> extends Omit<GridLoader<T>, 'loadData'> {
+export interface SearchPageProps<T, F extends DataTypes.BasicTemplate>
+    extends Omit<GridLoader<T>, 'loadData'> {
     /**
-     * Fields
+     * Search fields
      */
     fields: React.ReactElement[];
 
+    /**
+     * Search field template
+     */
+    fieldTemplate?: F;
+
     /**
      * Load data callback
      */
-    loadData: (data: GridJsonData) => PromiseLike<T[] | null | undefined>;
+    loadData: (
+        data: GridJsonData & DataTypes.BasicTemplateType<F>
+    ) => PromiseLike<T[] | null | undefined>;
 
     /**
      * Page props

package/src/mu/pages/TablePage.tsx

@@ -1,3 +1,4 @@
+import { DataTypes } from '@etsoo/shared';
 import { Box, Stack } from '@mui/material';
 import React from 'react';
 import { GridDataGet, GridLoadDataProps } from '../../components/GridLoader';
@@ -18,11 +19,14 @@ import { TablePageProps } from './TablePageProps';
  * @param props Props
  * @returns Component
  */
-export function TablePage<T>(props: TablePageProps<T>) {
+export function TablePage<T, F extends DataTypes.BasicTemplate>(
+    props: TablePageProps<T, F>
+) {
     // Destruct
     const {
         columns,
         fields,
+        fieldTemplate,
         loadData,
         mRef,
         sizeReadyMiliseconds = 100,
@@ -59,9 +63,9 @@ export function TablePage<T>(props: TablePageProps<T>) {
         reset();
     };
 
-    const localLoadData = ({ data, ...rest }: GridLoadDataProps) => {
-        const json = GridDataGet(data);
-        return loadData({ ...json, ...rest });
+    const localLoadData = (props: GridLoadDataProps) => {
+        const data = GridDataGet(props, fieldTemplate);
+        return loadData(data);
     };
 
     // Total width

package/src/mu/pages/TablePageProps.ts

@@ -1,9 +1,10 @@
+import { DataTypes } from '@etsoo/shared';
 import { TableExProps } from '../TableEx';
 import { SearchPageProps } from './SearchPageProps';
 
 /**
  * Table page props
  */
-export interface TablePageProps<T>
-    extends SearchPageProps<T>,
+export interface TablePageProps<T, F extends DataTypes.BasicTemplate>
+    extends SearchPageProps<T, F>,
         Omit<TableExProps<T>, 'loadData'> {}

package/src/states/CultureState.ts

@@ -16,7 +16,7 @@ export interface CultureCalls extends IUpdate<ICulture, CultureAction> {
      * Key value
      * @param key Item key
      */
-    get<T extends DataTypes.SimpleType = string>(key: string): T | undefined;
+    get<T = string>(key: string): T | undefined;
 }
 
 /**
@@ -30,7 +30,7 @@ const calls = {
      * Key value
      * @param key Item key
      */
-    get<T extends DataTypes.SimpleType = string>(key: string) {
+    get<T = string>(key: string) {
         const value = this.state.resources[key];
         if (value == null) return undefined;
         return value as T;

package/src/states/RouterProps.ts

@@ -16,7 +16,7 @@ export type IdStateRouterProps<T extends DataTypes.IdType = number> =
 /**
  * State router props, include data in location.state
  */
-export type StateRouterProps<T extends Readonly<Record<string, any>>> =
+export type StateRouterProps<T extends Readonly<DataTypes.StringRecord>> =
     RouteComponentProps<{
         location: { state: T };
     }>;

package/src/uses/useCombinedRefs.ts

@@ -4,9 +4,9 @@
  * @returns Callback
  */
 export default function useCombinedRefs(
-    ...refs: (React.Ref<any> | undefined)[]
+    ...refs: (React.Ref<unknown> | undefined)[]
 ) {
-    return (target: any) => {
+    return (target: unknown) => {
         // Ignore null reference
         if (target == null) return;
 
@@ -20,7 +20,7 @@ export default function useCombinedRefs(
                 ref(target);
             } else {
                 // as any to update readonly property
-                (ref as any).current = target;
+                Reflect.set(ref, 'current', target);
             }
         });
     };