@etsoo/react 1.4.10 → 1.4.14

package/lib/app/ReactApp.js

@@ -96,7 +96,7 @@ export class ReactApp extends CoreApp {
             if (startPos > 0) {
                 const main = message.substring(0, startPos).trim();
                 const tip = message.substring(startPos);
-                const titleNode = React.createElement(React.Fragment, null, main, React.createElement('div', { style: { fontSize: '9px' } }, tip));
+                const titleNode = React.createElement(React.Fragment, null, main, React.createElement('br'), React.createElement('span', { style: { fontSize: '9px' } }, tip));
                 this.notifier.alert(titleNode, callback);
                 return;
             }

package/lib/index.d.ts

@@ -48,6 +48,7 @@ export * from './mu/ItemList';
 export * from './mu/ListItemRightIcon';
 export * from './mu/LoadingButton';
 export * from './mu/MaskInput';
+export * from './mu/MobileListItemRenderer';
 export * from './mu/MoreFab';
 export * from './mu/MUGlobal';
 export * from './mu/NotifierMU';
@@ -55,6 +56,7 @@ export * from './mu/OptionGroup';
 export * from './mu/PList';
 export * from './mu/ProgressCount';
 export * from './mu/PullToRefreshUI';
+export * from './mu/ResponsibleContainer';
 export * from './mu/RLink';
 export * from './mu/ScrollerListEx';
 export * from './mu/ScrollTopFab';

package/lib/index.js

@@ -51,6 +51,7 @@ export * from './mu/ItemList';
 export * from './mu/ListItemRightIcon';
 export * from './mu/LoadingButton';
 export * from './mu/MaskInput';
+export * from './mu/MobileListItemRenderer';
 export * from './mu/MoreFab';
 export * from './mu/MUGlobal';
 export * from './mu/NotifierMU';
@@ -58,6 +59,7 @@ export * from './mu/OptionGroup';
 export * from './mu/PList';
 export * from './mu/ProgressCount';
 export * from './mu/PullToRefreshUI';
+export * from './mu/ResponsibleContainer';
 export * from './mu/RLink';
 export * from './mu/ScrollerListEx';
 export * from './mu/ScrollTopFab';

package/lib/mu/DnDList.d.ts

@@ -36,10 +36,14 @@ export interface DnDListProps<D extends {}, E extends React.ElementType> {
      * Data change handler
      */
     onChange?: (items: D[]) => void;
+    /**
+     * Drag end handler
+     */
+    onDragEnd?: (items: D[]) => void;
     /**
      * Top and bottom sides renderer
      */
-    sideRenderer?: (top: boolean, addItem: (item: D) => boolean, addItems: (items: D[]) => number) => React.ReactNode;
+    sideRenderer?: (top: boolean, addItem: (item: D) => boolean, addItems: (items: D[]) => number, reloadItems: () => void) => React.ReactNode;
     /**
      * Name for hidden form input
      */

package/lib/mu/DnDList.js

@@ -9,7 +9,7 @@ import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
  */
 export function DnDList(props) {
     // Destruct
-    const { children, Component = 'div', componentProps, getItemStyle = (_isDragging) => ({}), getListStyle = () => undefined, labelField, loadData, name, onChange, sideRenderer } = props;
+    const { children, Component = 'div', componentProps, getItemStyle = (_isDragging) => ({}), getListStyle = () => undefined, labelField, loadData, name, onChange, onDragEnd, sideRenderer } = props;
     // State
     const [items, setItems] = React.useState([]);
     const changeItems = (items) => {
@@ -20,7 +20,7 @@ export function DnDList(props) {
         setItems(items);
     };
     // Drag end handler
-    const onDragEnd = (result) => {
+    const onDragEndLocal = (result) => {
         // Dropped outside the list
         if (!result.destination) {
             return;
@@ -33,6 +33,9 @@ export function DnDList(props) {
         newItems.splice(result.destination.index, 0, removed);
         // Update the state
         changeItems(newItems);
+        // Drag end handler
+        if (onDragEnd)
+            onDragEnd(newItems);
     };
     // Add item
     const addItem = (newItem) => {
@@ -87,15 +90,20 @@ export function DnDList(props) {
         // Update the state
         changeItems(newItems);
     };
-    React.useEffect(() => {
+    // Reload items
+    const reloadItems = () => {
         // Load data
         loadData(name).then((items) => setItems(items));
+    };
+    React.useEffect(() => {
+        // Load data
+        reloadItems();
     }, [name]);
     // Layout
     return (React.createElement(React.Fragment, null,
-        sideRenderer && sideRenderer(true, addItem, addItems),
+        sideRenderer && sideRenderer(true, addItem, addItems, reloadItems),
         React.createElement(Component, { ...componentProps },
-            React.createElement(DragDropContext, { onDragEnd: onDragEnd },
+            React.createElement(DragDropContext, { onDragEnd: onDragEndLocal },
                 React.createElement(Droppable, { droppableId: name }, (provided, snapshot) => (React.createElement("div", { ...provided.droppableProps, ref: provided.innerRef, style: getListStyle(snapshot.isDraggingOver) },
                     items.map((item, index) => {
                         // Id
@@ -110,5 +118,6 @@ export function DnDList(props) {
                             } }, children(item, index, deleteItem, editItem)))));
                     }),
                     provided.placeholder))))),
-        sideRenderer && sideRenderer(false, addItem, addItems)));
+        sideRenderer &&
+            sideRenderer(false, addItem, addItems, reloadItems)));
 }

package/lib/mu/MobileListItemRenderer.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ListItemReact } from '../components/ListItemReact';
+import { ScrollerListExInnerItemRendererProps } from './ScrollerListEx';
+/**
+ * Default mobile list item renderer
+ * @param param0 List renderer props
+ * @param margin Margin
+ * @param renderer Renderer for card content
+ * @returns Component
+ */
+export declare function MobileListItemRenderer<T>({ data, itemHeight }: ScrollerListExInnerItemRendererProps<T>, margin: {}, renderer: (data: T) => [
+    string,
+    string | undefined,
+    React.ReactNode | (ListItemReact | boolean)[],
+    React.ReactNode
+]): JSX.Element;

package/lib/mu/MobileListItemRenderer.js

@@ -0,0 +1,70 @@
+import { Card, CardContent, CardHeader, LinearProgress } from '@mui/material';
+import React from 'react';
+import { MoreFab } from './MoreFab';
+import { MUGlobal } from './MUGlobal';
+function getActions(input) {
+    // Actions
+    const actions = [];
+    input.forEach((action) => {
+        if (typeof action === 'boolean')
+            return;
+        actions.push(action);
+    });
+    return actions;
+}
+/**
+ * Default mobile list item renderer
+ * @param param0 List renderer props
+ * @param margin Margin
+ * @param renderer Renderer for card content
+ * @returns Component
+ */
+export function MobileListItemRenderer({ data, itemHeight }, margin, renderer) {
+    // Loading
+    if (data == null)
+        return React.createElement(LinearProgress, null);
+    // Elements
+    const [title, subheader, actions, children] = renderer(data);
+    // Half
+    const halfMargin = MUGlobal.half(margin);
+    return (React.createElement(Card, { sx: {
+            height: (theme) => MUGlobal.adjustWithTheme(itemHeight, margin, theme.spacing),
+            marginLeft: margin,
+            marginRight: margin,
+            marginTop: halfMargin,
+            marginBottom: halfMargin
+        } },
+        React.createElement(CardHeader, { sx: { paddingBottom: 0.5 }, action: Array.isArray(actions) ? (React.createElement(MoreFab, { iconButton: true, size: "small", anchorOrigin: {
+                    vertical: 'bottom',
+                    horizontal: 'right'
+                }, transformOrigin: {
+                    vertical: 'top',
+                    horizontal: 'right'
+                }, actions: getActions(actions), PaperProps: {
+                    elevation: 0,
+                    sx: {
+                        overflow: 'visible',
+                        filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
+                        mt: -0.4,
+                        '& .MuiAvatar-root': {
+                            width: 32,
+                            height: 32,
+                            ml: -0.5,
+                            mr: 1
+                        },
+                        '&:before': {
+                            content: '""',
+                            display: 'block',
+                            position: 'absolute',
+                            top: 0,
+                            right: 14,
+                            width: 10,
+                            height: 10,
+                            bgcolor: 'background.paper',
+                            transform: 'translateY(-50%) rotate(45deg)',
+                            zIndex: 0
+                        }
+                    }
+                } })) : (actions), title: title, titleTypographyProps: { variant: 'body2' }, subheader: subheader, subheaderTypographyProps: { variant: 'caption' } }),
+        React.createElement(CardContent, { sx: { paddingTop: 0 } }, children)));
+}

package/lib/mu/ResponsibleContainer.d.ts

@@ -0,0 +1,69 @@
+import { DataTypes } from '@etsoo/shared';
+import { SxProps, Theme } from '@mui/material';
+import React from 'react';
+import { ListChildComponentProps } from 'react-window';
+import { GridColumn } from '../components/GridColumn';
+import { GridJsonData } from '../components/GridLoader';
+import { DataGridExProps } from './DataGridEx';
+import { GridMethodRef } from './GridMethodRef';
+import { ScrollerListExInnerItemRendererProps } from './ScrollerListEx';
+export interface ResponsibleContainerProps<T extends {}, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate> extends Omit<DataGridExProps<T>, 'height' | 'itemKey' | 'loadData' | 'mRef' | 'onScroll' | 'onItemsRendered'> {
+    /**
+     * Height will be deducted
+     * @param height Current calcuated height
+     */
+    adjustHeight?: (height: number) => number;
+    /**
+     * Columns
+     */
+    columns: GridColumn<T>[];
+    /**
+     * Min width to show Datagrid
+     */
+    dataGridMinWidth?: number;
+    /**
+     * Search fields
+     */
+    fields?: React.ReactElement[];
+    /**
+     * Search field template
+     */
+    fieldTemplate?: F;
+    /**
+     * Grid height
+     */
+    height?: number;
+    /**
+     * Inner item renderer
+     */
+    innerItemRenderer: (props: ScrollerListExInnerItemRendererProps<T>) => React.ReactNode;
+    /**
+     * Item renderer
+     */
+    itemRenderer?: (props: ListChildComponentProps<T>) => React.ReactElement;
+    /**
+     * Item size, a function indicates its a variable size list
+     */
+    itemSize: ((index: number) => number) | number;
+    /**
+     * Listbox SX (dataGrid determines the case)
+     */
+    listBoxSx?: (dataGrid: boolean) => SxProps<Theme>;
+    /**
+     * Load data callback
+     */
+    loadData: (data: GridJsonData & DataTypes.BasicTemplateType<F>) => PromiseLike<T[] | null | undefined>;
+    /**
+     * Methods
+     */
+    mRef?: React.MutableRefObject<GridMethodRef | undefined>;
+    /**
+     * Searchbox SX
+     */
+    searchBoxSx?: SxProps<Theme>;
+    /**
+     * Size ready to read miliseconds span
+     */
+    sizeReadyMiliseconds?: number;
+}
+export declare function ResponsibleContainer<T extends {}, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate>(props: ResponsibleContainerProps<T, F>): JSX.Element;

package/lib/mu/ResponsibleContainer.js

@@ -0,0 +1,78 @@
+import { Box, Stack } from '@mui/material';
+import React from 'react';
+import { GridDataGet } from '../components/GridLoader';
+import useCombinedRefs from '../uses/useCombinedRefs';
+import { useDimensions } from '../uses/useDimensions';
+import { DataGridEx, DataGridExCalColumns } from './DataGridEx';
+import { ScrollerListEx } from './ScrollerListEx';
+import { SearchBar } from './SearchBar';
+export function ResponsibleContainer(props) {
+    var _a;
+    // Destruct
+    const { adjustHeight, columns, dataGridMinWidth = DataGridExCalColumns(columns).total, fields, fieldTemplate, height, listBoxSx, loadData, mRef, searchBoxSx, sizeReadyMiliseconds = 0, ...rest } = props;
+    // Refs
+    const refs = React.useRef({});
+    const mRefs = useCombinedRefs(mRef, (ref) => {
+        if (ref == null)
+            return;
+        refs.current.ref = ref;
+    });
+    // Has fields
+    const hasFields = fields != null && fields.length > 0;
+    // Watch container
+    const { dimensions } = useDimensions(1, undefined, sizeReadyMiliseconds);
+    const rect = dimensions[0][2];
+    const showDataGrid = ((_a = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _a !== void 0 ? _a : 0) >= dataGridMinWidth;
+    React.useEffect(() => {
+        if (rect != null && rect.height > 50 && height == null) {
+            let gridHeight = window.innerHeight - Math.round(rect.top + rect.height + 1);
+            const style = window.getComputedStyle(dimensions[0][1]);
+            const boxPadding = parseFloat(style.paddingLeft);
+            if (!isNaN(boxPadding))
+                gridHeight -= 2 * boxPadding;
+            if (adjustHeight != null) {
+                gridHeight -= adjustHeight(gridHeight);
+            }
+            if (gridHeight !== refs.current.height) {
+                refs.current.height = gridHeight;
+            }
+        }
+    }, [rect]);
+    const localLoadData = (props) => {
+        const data = GridDataGet(props, fieldTemplate);
+        return loadData(data);
+    };
+    const gridHeight = refs.current.height;
+    const list = React.useMemo(() => {
+        if (gridHeight == null)
+            return;
+        if (showDataGrid) {
+            // Delete
+            delete rest.itemRenderer;
+            return (React.createElement(Box, { sx: listBoxSx == null ? undefined : listBoxSx(true) },
+                React.createElement(DataGridEx, { autoLoad: !hasFields, height: gridHeight, loadData: localLoadData, mRef: mRefs, columns: columns, ...rest })));
+        }
+        // Delete
+        delete rest.checkable;
+        delete rest.borderRowsCount;
+        delete rest.bottomHeight;
+        delete rest.footerItemRenderer;
+        delete rest.headerHeight;
+        delete rest.hideFooter;
+        delete rest.hoverColor;
+        delete rest.selectable;
+        return (React.createElement(Box, { sx: listBoxSx == null ? undefined : listBoxSx(false) },
+            React.createElement(ScrollerListEx, { autoLoad: !hasFields, height: gridHeight, loadData: localLoadData, mRef: mRefs, ...rest })));
+    }, [gridHeight, showDataGrid]);
+    // On submit callback
+    const onSubmit = (data, _reset) => {
+        if (data == null || rect == null || refs.current.ref == null)
+            return;
+        refs.current.ref.reset({ data });
+    };
+    // Layout
+    return (React.createElement(Stack, null,
+        hasFields && (React.createElement(Box, { ref: dimensions[0][0], sx: searchBoxSx },
+            React.createElement(SearchBar, { fields: fields, onSubmit: onSubmit }))),
+        list));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.4.10",
+    "version": "1.4.14",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -50,7 +50,7 @@
         "@emotion/react": "^11.7.1",
         "@emotion/style": "^0.8.0",
         "@emotion/styled": "^11.6.0",
-        "@etsoo/appscript": "^1.2.18",
+        "@etsoo/appscript": "^1.2.20",
         "@etsoo/notificationbase": "^1.1.0",
         "@etsoo/shared": "^1.1.0",
         "@mui/icons-material": "^5.2.5",
@@ -89,7 +89,7 @@
         "eslint-config-airbnb-base": "^15.0.0",
         "eslint-plugin-import": "^2.25.4",
         "eslint-plugin-react": "^7.28.0",
-        "jest": "^27.4.5",
+        "jest": "^27.4.7",
         "react-test-renderer": "^17.0.2",
         "ts-jest": "^27.1.2",
         "typescript": "^4.5.4"

package/src/app/ReactApp.ts

@@ -223,8 +223,9 @@ export class ReactApp<
                     React.Fragment,
                     null,
                     main,
+                    React.createElement('br'),
                     React.createElement(
-                        'div',
+                        'span',
                         { style: { fontSize: '9px' } },
                         tip
                     )

package/src/index.ts

@@ -55,6 +55,7 @@ export * from './mu/ItemList';
 export * from './mu/ListItemRightIcon';
 export * from './mu/LoadingButton';
 export * from './mu/MaskInput';
+export * from './mu/MobileListItemRenderer';
 export * from './mu/MoreFab';
 export * from './mu/MUGlobal';
 export * from './mu/NotifierMU';
@@ -62,6 +63,7 @@ export * from './mu/OptionGroup';
 export * from './mu/PList';
 export * from './mu/ProgressCount';
 export * from './mu/PullToRefreshUI';
+export * from './mu/ResponsibleContainer';
 export * from './mu/RLink';
 export * from './mu/ScrollerListEx';
 export * from './mu/ScrollTopFab';

package/src/mu/DnDList.tsx

@@ -57,13 +57,19 @@ export interface DnDListProps<D extends {}, E extends React.ElementType> {
      */
     onChange?: (items: D[]) => void;
 
+    /**
+     * Drag end handler
+     */
+    onDragEnd?: (items: D[]) => void;
+
     /**
      * Top and bottom sides renderer
      */
     sideRenderer?: (
         top: boolean,
         addItem: (item: D) => boolean,
-        addItems: (items: D[]) => number
+        addItems: (items: D[]) => number,
+        reloadItems: () => void
     ) => React.ReactNode;
 
     /**
@@ -93,6 +99,7 @@ export function DnDList<
         loadData,
         name,
         onChange,
+        onDragEnd,
         sideRenderer
     } = props;
 
@@ -108,7 +115,7 @@ export function DnDList<
     };
 
     // Drag end handler
-    const onDragEnd = (result: DropResult) => {
+    const onDragEndLocal = (result: DropResult) => {
         // Dropped outside the list
         if (!result.destination) {
             return;
@@ -125,6 +132,9 @@ export function DnDList<
 
         // Update the state
         changeItems(newItems);
+
+        // Drag end handler
+        if (onDragEnd) onDragEnd(newItems);
     };
 
     // Add item
@@ -201,17 +211,23 @@ export function DnDList<
         changeItems(newItems);
     };
 
-    React.useEffect(() => {
+    // Reload items
+    const reloadItems = () => {
         // Load data
         loadData(name).then((items) => setItems(items));
+    };
+
+    React.useEffect(() => {
+        // Load data
+        reloadItems();
     }, [name]);
 
     // Layout
     return (
         <React.Fragment>
-            {sideRenderer && sideRenderer(true, addItem, addItems)}
+            {sideRenderer && sideRenderer(true, addItem, addItems, reloadItems)}
             <Component {...componentProps}>
-                <DragDropContext onDragEnd={onDragEnd}>
+                <DragDropContext onDragEnd={onDragEndLocal}>
                     <Droppable droppableId={name}>
                         {(provided, snapshot) => (
                             <div
@@ -265,7 +281,8 @@ export function DnDList<
                     </Droppable>
                 </DragDropContext>
             </Component>
-            {sideRenderer && sideRenderer(false, addItem, addItems)}
+            {sideRenderer &&
+                sideRenderer(false, addItem, addItems, reloadItems)}
         </React.Fragment>
     );
 }

package/src/mu/MobileListItemRenderer.tsx

@@ -0,0 +1,113 @@
+import { Card, CardContent, CardHeader, LinearProgress } from '@mui/material';
+import React from 'react';
+import { ListItemReact } from '../components/ListItemReact';
+import { MoreFab } from './MoreFab';
+import { MUGlobal } from './MUGlobal';
+import { ScrollerListExInnerItemRendererProps } from './ScrollerListEx';
+
+function getActions(input: (ListItemReact | boolean)[]): ListItemReact[] {
+    // Actions
+    const actions: ListItemReact[] = [];
+    input.forEach((action) => {
+        if (typeof action === 'boolean') return;
+        actions.push(action);
+    });
+    return actions;
+}
+
+/**
+ * Default mobile list item renderer
+ * @param param0 List renderer props
+ * @param margin Margin
+ * @param renderer Renderer for card content
+ * @returns Component
+ */
+export function MobileListItemRenderer<T>(
+    { data, itemHeight }: ScrollerListExInnerItemRendererProps<T>,
+    margin: {},
+    renderer: (
+        data: T
+    ) => [
+        string,
+        string | undefined,
+        React.ReactNode | (ListItemReact | boolean)[],
+        React.ReactNode
+    ]
+) {
+    // Loading
+    if (data == null) return <LinearProgress />;
+
+    // Elements
+    const [title, subheader, actions, children] = renderer(data);
+
+    // Half
+    const halfMargin = MUGlobal.half(margin);
+
+    return (
+        <Card
+            sx={{
+                height: (theme) =>
+                    MUGlobal.adjustWithTheme(itemHeight, margin, theme.spacing),
+                marginLeft: margin,
+                marginRight: margin,
+                marginTop: halfMargin,
+                marginBottom: halfMargin
+            }}
+        >
+            <CardHeader
+                sx={{ paddingBottom: 0.5 }}
+                action={
+                    Array.isArray(actions) ? (
+                        <MoreFab
+                            iconButton
+                            size="small"
+                            anchorOrigin={{
+                                vertical: 'bottom',
+                                horizontal: 'right'
+                            }}
+                            transformOrigin={{
+                                vertical: 'top',
+                                horizontal: 'right'
+                            }}
+                            actions={getActions(actions)}
+                            PaperProps={{
+                                elevation: 0,
+                                sx: {
+                                    overflow: 'visible',
+                                    filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
+                                    mt: -0.4,
+                                    '& .MuiAvatar-root': {
+                                        width: 32,
+                                        height: 32,
+                                        ml: -0.5,
+                                        mr: 1
+                                    },
+                                    '&:before': {
+                                        content: '""',
+                                        display: 'block',
+                                        position: 'absolute',
+                                        top: 0,
+                                        right: 14,
+                                        width: 10,
+                                        height: 10,
+                                        bgcolor: 'background.paper',
+                                        transform:
+                                            'translateY(-50%) rotate(45deg)',
+                                        zIndex: 0
+                                    }
+                                }
+                            }}
+                        />
+                    ) : (
+                        actions
+                    )
+                }
+                title={title}
+                titleTypographyProps={{ variant: 'body2' }}
+                subheader={subheader}
+                subheaderTypographyProps={{ variant: 'caption' }}
+            />
+            <CardContent sx={{ paddingTop: 0 }}>{children}</CardContent>
+        </Card>
+    );
+}

package/src/mu/ResponsibleContainer.tsx

@@ -0,0 +1,240 @@
+import { DataTypes } from '@etsoo/shared';
+import { Box, Stack, SxProps, Theme } from '@mui/material';
+import React from 'react';
+import { ListChildComponentProps } from 'react-window';
+import { GridColumn } from '../components/GridColumn';
+import {
+    GridDataGet,
+    GridJsonData,
+    GridLoadDataProps
+} from '../components/GridLoader';
+import useCombinedRefs from '../uses/useCombinedRefs';
+import { useDimensions } from '../uses/useDimensions';
+import {
+    DataGridEx,
+    DataGridExCalColumns,
+    DataGridExProps
+} from './DataGridEx';
+import { GridMethodRef } from './GridMethodRef';
+import {
+    ScrollerListEx,
+    ScrollerListExInnerItemRendererProps
+} from './ScrollerListEx';
+import { SearchBar } from './SearchBar';
+
+export interface ResponsibleContainerProps<
+    T extends {},
+    F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate
+> extends Omit<
+        DataGridExProps<T>,
+        | 'height'
+        | 'itemKey'
+        | 'loadData'
+        | 'mRef'
+        | 'onScroll'
+        | 'onItemsRendered'
+    > {
+    /**
+     * Height will be deducted
+     * @param height Current calcuated height
+     */
+    adjustHeight?: (height: number) => number;
+
+    /**
+     * Columns
+     */
+    columns: GridColumn<T>[];
+
+    /**
+     * Min width to show Datagrid
+     */
+    dataGridMinWidth?: number;
+
+    /**
+     * Search fields
+     */
+    fields?: React.ReactElement[];
+
+    /**
+     * Search field template
+     */
+    fieldTemplate?: F;
+
+    /**
+     * Grid height
+     */
+    height?: number;
+
+    /**
+     * Inner item renderer
+     */
+    innerItemRenderer: (
+        props: ScrollerListExInnerItemRendererProps<T>
+    ) => React.ReactNode;
+
+    /**
+     * Item renderer
+     */
+    itemRenderer?: (props: ListChildComponentProps<T>) => React.ReactElement;
+
+    /**
+     * Item size, a function indicates its a variable size list
+     */
+    itemSize: ((index: number) => number) | number;
+
+    /**
+     * Listbox SX (dataGrid determines the case)
+     */
+    listBoxSx?: (dataGrid: boolean) => SxProps<Theme>;
+
+    /**
+     * Load data callback
+     */
+    loadData: (
+        data: GridJsonData & DataTypes.BasicTemplateType<F>
+    ) => PromiseLike<T[] | null | undefined>;
+
+    /**
+     * Methods
+     */
+    mRef?: React.MutableRefObject<GridMethodRef | undefined>;
+
+    /**
+     * Searchbox SX
+     */
+    searchBoxSx?: SxProps<Theme>;
+
+    /**
+     * Size ready to read miliseconds span
+     */
+    sizeReadyMiliseconds?: number;
+}
+
+interface LocalRefs {
+    height?: number;
+    ref?: GridMethodRef;
+}
+
+export function ResponsibleContainer<
+    T extends {},
+    F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate
+>(props: ResponsibleContainerProps<T, F>) {
+    // Destruct
+    const {
+        adjustHeight,
+        columns,
+        dataGridMinWidth = DataGridExCalColumns(columns).total,
+        fields,
+        fieldTemplate,
+        height,
+        listBoxSx,
+        loadData,
+        mRef,
+        searchBoxSx,
+        sizeReadyMiliseconds = 0,
+        ...rest
+    } = props;
+
+    // Refs
+    const refs = React.useRef<LocalRefs>({});
+
+    const mRefs = useCombinedRefs(mRef, (ref: GridMethodRef) => {
+        if (ref == null) return;
+        refs.current.ref = ref;
+    });
+
+    // Has fields
+    const hasFields = fields != null && fields.length > 0;
+
+    // Watch container
+    const { dimensions } = useDimensions(1, undefined, sizeReadyMiliseconds);
+    const rect = dimensions[0][2];
+    const showDataGrid = (rect?.width ?? 0) >= dataGridMinWidth;
+
+    React.useEffect(() => {
+        if (rect != null && rect.height > 50 && height == null) {
+            let gridHeight =
+                window.innerHeight - Math.round(rect.top + rect.height + 1);
+
+            const style = window.getComputedStyle(dimensions[0][1]!);
+            const boxPadding = parseFloat(style.paddingLeft);
+            if (!isNaN(boxPadding)) gridHeight -= 2 * boxPadding;
+
+            if (adjustHeight != null) {
+                gridHeight -= adjustHeight(gridHeight);
+            }
+
+            if (gridHeight !== refs.current.height) {
+                refs.current.height = gridHeight;
+            }
+        }
+    }, [rect]);
+
+    const localLoadData = (props: GridLoadDataProps) => {
+        const data = GridDataGet(props, fieldTemplate);
+        return loadData(data);
+    };
+
+    const gridHeight = refs.current.height;
+    const list = React.useMemo(() => {
+        if (gridHeight == null) return;
+
+        if (showDataGrid) {
+            // Delete
+            delete rest.itemRenderer;
+
+            return (
+                <Box sx={listBoxSx == null ? undefined : listBoxSx(true)}>
+                    <DataGridEx<T>
+                        autoLoad={!hasFields}
+                        height={gridHeight}
+                        loadData={localLoadData}
+                        mRef={mRefs}
+                        columns={columns}
+                        {...rest}
+                    />
+                </Box>
+            );
+        }
+
+        // Delete
+        delete rest.checkable;
+        delete rest.borderRowsCount;
+        delete rest.bottomHeight;
+        delete rest.footerItemRenderer;
+        delete rest.headerHeight;
+        delete rest.hideFooter;
+        delete rest.hoverColor;
+        delete rest.selectable;
+
+        return (
+            <Box sx={listBoxSx == null ? undefined : listBoxSx(false)}>
+                <ScrollerListEx<T>
+                    autoLoad={!hasFields}
+                    height={gridHeight}
+                    loadData={localLoadData}
+                    mRef={mRefs}
+                    {...rest}
+                />
+            </Box>
+        );
+    }, [gridHeight, showDataGrid]);
+
+    // On submit callback
+    const onSubmit = (data: FormData, _reset: boolean) => {
+        if (data == null || rect == null || refs.current.ref == null) return;
+        refs.current.ref.reset({ data });
+    };
+
+    // Layout
+    return (
+        <Stack>
+            {hasFields && (
+                <Box ref={dimensions[0][0]} sx={searchBoxSx}>
+                    <SearchBar fields={fields} onSubmit={onSubmit} />
+                </Box>
+            )}
+            {list}
+        </Stack>
+    );
+}