@etsoo/react 1.1.83 → 1.1.84

package/lib/mu/SearchBar.d.ts

@@ -11,6 +11,11 @@ export interface SearchBarProps {
      * Fields
      */
     fields: React.ReactElement[];
+    /**
+     * Inner height
+     * @default 40
+     */
+    innerHeight?: number;
     /**
      * On submit callback
      */

package/lib/mu/SearchBar.js

@@ -53,7 +53,7 @@ const setChildState = (child, enabled) => {
  */
 export function SearchBar(props) {
     // Destruct
-    const { className, fields, onSubmit } = props;
+    const { className, fields, innerHeight = 40, onSubmit } = props;
     // Labels
     const labels = Labels.CommonPage;
     // Spacing
@@ -235,7 +235,7 @@ export function SearchBar(props) {
                 if (form)
                     forms.form = form;
             } },
-            React.createElement(Stack, { ref: dimensions[0][0], justifyContent: "center", alignItems: "center", direction: "row", spacing: 1, sx: {
+            React.createElement(Stack, { ref: dimensions[0][0], justifyContent: "center", alignItems: "center", direction: "row", spacing: 1, height: innerHeight, sx: {
                     '& > :not(style)': {
                         flexBasis: 'auto',
                         flexGrow: 0,

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, pageProps = {}, ...rest } = props;
+    const { adjustHeight, fields, 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) => {
@@ -38,7 +38,7 @@ export function DataGridPage(props) {
         return loadData({ ...json, ...rest });
     };
     // Watch container
-    const { dimensions } = useDimensions(1, undefined, 50);
+    const { dimensions } = useDimensions(1, undefined, sizeReadyMiliseconds);
     const rect = dimensions[0][2];
     React.useEffect(() => {
         if (rect != null && rect.height > 50 && height == null) {

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, pageProps = {}, ...rest } = props;
+    const { adjustHeight, fields, loadData, mRef, sizeReadyMiliseconds = 100, pageProps = {}, ...rest } = props;
     (_a = pageProps.paddings) !== null && _a !== void 0 ? _a : (pageProps.paddings = MUGlobal.pagePaddings);
     // States
     const [states] = React.useState({});
@@ -44,7 +44,7 @@ export function FixedListPage(props) {
         return loadData({ ...json, ...rest });
     };
     // Watch container
-    const { dimensions } = useDimensions(1, undefined, 100);
+    const { dimensions } = useDimensions(1, undefined, sizeReadyMiliseconds);
     const rect = dimensions[0][2];
     const list = React.useMemo(() => {
         if (rect != null && rect.height > 50) {

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, pageProps = {}, ...rest } = props;
+    const { adjustHeight, columns, dataGridMinWidth = DataGridExCalColumns(columns).total, fields, 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) => {
@@ -39,7 +39,7 @@ export function ResponsivePage(props) {
         setStates({ data });
     };
     // Watch container
-    const { dimensions } = useDimensions(1, undefined, 50);
+    const { dimensions } = useDimensions(1, undefined, sizeReadyMiliseconds);
     const rect = dimensions[0][2];
     const showDataGrid = ((_b = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _b !== void 0 ? _b : 0) >= dataGridMinWidth;
     React.useEffect(() => {

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

@@ -17,4 +17,9 @@ export interface SearchPageProps<T> extends Omit<GridLoader<T>, 'loadData'> {
      * Page props
      */
     pageProps?: CommonPageProps;
+    /**
+     * Size ready to read miliseconds span
+     * @default 100
+     */
+    sizeReadyMiliseconds?: number;
 }

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, pageProps = {}, ...rest } = props;
+    const { columns, fields, loadData, mRef, sizeReadyMiliseconds = 100, pageProps = {}, ...rest } = props;
     (_a = pageProps.paddings) !== null && _a !== void 0 ? _a : (pageProps.paddings = MUGlobal.pagePaddings);
     // States
     const [states] = React.useState({});
@@ -47,7 +47,7 @@ export function TablePage(props) {
         return previousValue + ((_a = width !== null && width !== void 0 ? width : minWidth) !== null && _a !== void 0 ? _a : TableExMinWidth);
     }, 0), [columns]);
     // Watch container
-    const { dimensions } = useDimensions(1, undefined, 100);
+    const { dimensions } = useDimensions(1, undefined, sizeReadyMiliseconds);
     const rect = dimensions[0][2];
     const list = React.useMemo(() => {
         if (rect != null && rect.height > 50 && rect.width >= totalWidth) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.1.83",
+    "version": "1.1.84",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",

package/src/mu/SearchBar.tsx

@@ -20,6 +20,12 @@ export interface SearchBarProps {
      */
     fields: React.ReactElement[];
 
+    /**
+     * Inner height
+     * @default 40
+     */
+    innerHeight?: number;
+
     /**
      * On submit callback
      */
@@ -78,7 +84,7 @@ const setChildState = (child: Element, enabled: boolean) => {
  */
 export function SearchBar(props: SearchBarProps) {
     // Destruct
-    const { className, fields, onSubmit } = props;
+    const { className, fields, innerHeight = 40, onSubmit } = props;
 
     // Labels
     const labels = Labels.CommonPage;
@@ -316,6 +322,7 @@ export function SearchBar(props: SearchBarProps) {
                     alignItems="center"
                     direction="row"
                     spacing={1}
+                    height={innerHeight}
                     sx={{
                         '& > :not(style)': {
                             flexBasis: 'auto',

package/src/mu/pages/DataGridPage.tsx

@@ -30,6 +30,7 @@ export function DataGridPage<T>(props: DataGridPageProps<T>) {
         height,
         loadData,
         mRef,
+        sizeReadyMiliseconds = 100,
         pageProps = {},
         ...rest
     } = props;
@@ -63,7 +64,7 @@ export function DataGridPage<T>(props: DataGridPageProps<T>) {
     };
 
     // Watch container
-    const { dimensions } = useDimensions(1, undefined, 50);
+    const { dimensions } = useDimensions(1, undefined, sizeReadyMiliseconds);
     const rect = dimensions[0][2];
 
     React.useEffect(() => {

package/src/mu/pages/FixedListPage.tsx

@@ -30,6 +30,7 @@ export function FixedListPage<T>(
         fields,
         loadData,
         mRef,
+        sizeReadyMiliseconds = 100,
         pageProps = {},
         ...rest
     } = props;
@@ -74,7 +75,7 @@ export function FixedListPage<T>(
     };
 
     // Watch container
-    const { dimensions } = useDimensions(1, undefined, 100);
+    const { dimensions } = useDimensions(1, undefined, sizeReadyMiliseconds);
     const rect = dimensions[0][2];
     const list = React.useMemo(() => {
         if (rect != null && rect.height > 50) {

package/src/mu/pages/ResponsivePage.tsx

@@ -35,6 +35,7 @@ export function ResponsivePage<T>(props: ResponsePageProps<T>) {
         innerItemRenderer,
         itemSize,
         mRef,
+        sizeReadyMiliseconds = 100,
         pageProps = {},
         ...rest
     } = props;
@@ -68,7 +69,7 @@ export function ResponsivePage<T>(props: ResponsePageProps<T>) {
     };
 
     // Watch container
-    const { dimensions } = useDimensions(1, undefined, 50);
+    const { dimensions } = useDimensions(1, undefined, sizeReadyMiliseconds);
     const rect = dimensions[0][2];
     const showDataGrid = (rect?.width ?? 0) >= dataGridMinWidth;
 

package/src/mu/pages/SearchPageProps.ts

@@ -19,4 +19,10 @@ export interface SearchPageProps<T> extends Omit<GridLoader<T>, 'loadData'> {
      * Page props
      */
     pageProps?: CommonPageProps;
+
+    /**
+     * Size ready to read miliseconds span
+     * @default 100
+     */
+    sizeReadyMiliseconds?: number;
 }

package/src/mu/pages/TablePage.tsx

@@ -20,7 +20,15 @@ import { TablePageProps } from './TablePageProps';
  */
 export function TablePage<T>(props: TablePageProps<T>) {
     // Destruct
-    const { columns, fields, loadData, mRef, pageProps = {}, ...rest } = props;
+    const {
+        columns,
+        fields,
+        loadData,
+        mRef,
+        sizeReadyMiliseconds = 100,
+        pageProps = {},
+        ...rest
+    } = props;
 
     pageProps.paddings ??= MUGlobal.pagePaddings;
 
@@ -66,7 +74,7 @@ export function TablePage<T>(props: TablePageProps<T>) {
     );
 
     // Watch container
-    const { dimensions } = useDimensions(1, undefined, 100);
+    const { dimensions } = useDimensions(1, undefined, sizeReadyMiliseconds);
     const rect = dimensions[0][2];
     const list = React.useMemo(() => {
         if (rect != null && rect.height > 50 && rect.width >= totalWidth) {