@etsoo/react 1.4.43 → 1.4.47

package/lib/mu/ComboBox.js

@@ -16,6 +16,10 @@ export function ComboBox(props) {
     // Options state
     const [localOptions, setOptions] = React.useState(options);
     const isMounted = React.useRef(true);
+    // When options change
+    React.useEffect(() => {
+        setOptions(options);
+    }, [options]);
     // Local default value
     let localValue = idValue != null
         ? localOptions.find((o) => Reflect.get(o, idField) === idValue)

package/lib/mu/ResponsibleContainer.d.ts

@@ -23,7 +23,7 @@ export interface ResponsibleContainerProps<T extends {}, F extends DataTypes.Bas
     /**
      * Container box SX (dataGrid determines the case)
      */
-    containerBoxSx?: (paddings: {}, dataGrid?: boolean) => SxProps<Theme>;
+    containerBoxSx?: (paddings: {}, hasFields: boolean, dataGrid?: boolean) => SxProps<Theme>;
     /**
      * Min width to show Datagrid
      */

package/lib/mu/ResponsibleContainer.js

@@ -9,11 +9,11 @@ import { MUGlobal } from './MUGlobal';
 import { PullToRefreshUI } from './PullToRefreshUI';
 import { ScrollerListEx } from './ScrollerListEx';
 import { SearchBar } from './SearchBar';
-function defaultContainerBoxSx(paddings, _dataGrid) {
+function defaultContainerBoxSx(paddings, hasField, _dataGrid) {
     const half = MUGlobal.half(paddings);
     return {
         '& .SearchBox': {
-            marginBottom: half
+            marginBottom: hasField ? half : 0
         }
     };
 }
@@ -145,9 +145,9 @@ export function ResponsibleContainer(props) {
     // Layout
     return (React.createElement(Box, { sx: containerBoxSx == null
             ? undefined
-            : containerBoxSx(paddings, showDataGrid) },
+            : containerBoxSx(paddings, hasFields, showDataGrid) },
         React.createElement(Stack, null,
-            React.createElement(Box, { ref: dimensions[0][0], className: "SearchBox" }, searchBar),
+            React.createElement(Box, { ref: dimensions[0][0], className: "SearchBox", sx: { height: hasFields ? 40 : 0 } }, searchBar),
             list),
         pullToRefresh && pullContainer && (React.createElement(PullToRefreshUI, { mainElement: pullContainer, triggerElement: pullContainer, instructionsPullToRefresh: labels.pullToRefresh, instructionsReleaseToRefresh: labels.releaseToRefresh, instructionsRefreshing: labels.refreshing, onRefresh: () => { var _a; return (_a = state.ref) === null || _a === void 0 ? void 0 : _a.reset(); }, shouldPullToRefresh: () => {
                 const container = document.querySelector(pullContainer);

package/lib/mu/SelectEx.js

@@ -15,6 +15,10 @@ export function SelectEx(props) {
     // Options state
     const [localOptions, setOptions] = React.useState(options);
     const isMounted = React.useRef(true);
+    // When options change
+    React.useEffect(() => {
+        setOptions(options);
+    }, [options]);
     // Local value
     const valueSource = (_a = defaultValue !== null && defaultValue !== void 0 ? defaultValue : value) !== null && _a !== void 0 ? _a : '';
     let localValue;

package/lib/mu/pages/ResponsivePage.js

@@ -18,16 +18,16 @@ export function ResponsivePage(props) {
     const [direction, setDirection] = React.useState(fabColumnDirection);
     // Layout
     return (React.createElement(CommonPage, { ...pageRest, paddings: {}, scrollContainer: scrollContainer, fabColumnDirection: direction },
-        React.createElement(ResponsibleContainer, { paddings: paddings, containerBoxSx: (paddings, _dataGrid) => {
+        React.createElement(ResponsibleContainer, { paddings: paddings, containerBoxSx: (paddings, hasField, _dataGrid) => {
                 // Half
                 const half = MUGlobal.half(paddings);
                 // .SearchBox keep the same to avoid flick when switching between DataGrid and List
                 return {
+                    paddingTop: paddings,
                     '& .SearchBox': {
                         marginLeft: paddings,
-                        marginTop: paddings,
                         marginRight: paddings,
-                        marginBottom: half
+                        marginBottom: hasField ? half : 0
                     },
                     '& .ListBox': {
                         marginBottom: paddings

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.4.43",
+    "version": "1.4.47",
     "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.23",
+        "@etsoo/appscript": "^1.2.24",
         "@etsoo/notificationbase": "^1.1.0",
         "@etsoo/shared": "^1.1.3",
         "@mui/icons-material": "^5.2.5",
@@ -85,13 +85,13 @@
         "@types/react-test-renderer": "^17.0.1",
         "@typescript-eslint/eslint-plugin": "^5.9.1",
         "@typescript-eslint/parser": "^5.9.1",
-        "eslint": "^8.6.0",
+        "eslint": "^8.7.0",
         "eslint-config-airbnb-base": "^15.0.0",
         "eslint-plugin-import": "^2.25.4",
         "eslint-plugin-react": "^7.28.0",
         "jest": "^27.4.7",
         "react-test-renderer": "^17.0.2",
-        "ts-jest": "^27.1.2",
+        "ts-jest": "^27.1.3",
         "typescript": "^4.5.4"
     }
 }

package/src/mu/ComboBox.tsx

@@ -72,6 +72,11 @@ export function ComboBox<T extends {} = IdLabelDto>(props: ComboBoxProps<T>) {
     const [localOptions, setOptions] = React.useState(options);
     const isMounted = React.useRef(true);
 
+    // When options change
+    React.useEffect(() => {
+        setOptions(options);
+    }, [options]);
+
     // Local default value
     let localValue =
         idValue != null

package/src/mu/ResponsibleContainer.tsx

@@ -55,7 +55,11 @@ export interface ResponsibleContainerProps<
     /**
      * Container box SX (dataGrid determines the case)
      */
-    containerBoxSx?: (paddings: {}, dataGrid?: boolean) => SxProps<Theme>;
+    containerBoxSx?: (
+        paddings: {},
+        hasFields: boolean,
+        dataGrid?: boolean
+    ) => SxProps<Theme>;
 
     /**
      * Min width to show Datagrid
@@ -135,12 +139,13 @@ interface LocalRefs {
 
 function defaultContainerBoxSx(
     paddings: {},
+    hasField: boolean,
     _dataGrid?: boolean
 ): SxProps<Theme> {
     const half = MUGlobal.half(paddings);
     return {
         '& .SearchBox': {
-            marginBottom: half
+            marginBottom: hasField ? half : 0
         }
     };
 }
@@ -345,11 +350,15 @@ export function ResponsibleContainer<
             sx={
                 containerBoxSx == null
                     ? undefined
-                    : containerBoxSx(paddings, showDataGrid)
+                    : containerBoxSx(paddings, hasFields, showDataGrid)
             }
         >
             <Stack>
-                <Box ref={dimensions[0][0]} className="SearchBox">
+                <Box
+                    ref={dimensions[0][0]}
+                    className="SearchBox"
+                    sx={{ height: hasFields ? 40 : 0 }}
+                >
                     {searchBar}
                 </Box>
                 {list}

package/src/mu/SelectEx.tsx

@@ -90,6 +90,11 @@ export function SelectEx<T extends {} = IdLabelDto>(props: SelectExProps<T>) {
     const [localOptions, setOptions] = React.useState(options);
     const isMounted = React.useRef(true);
 
+    // When options change
+    React.useEffect(() => {
+        setOptions(options);
+    }, [options]);
+
     // Local value
     const valueSource = defaultValue ?? value ?? '';
     let localValue: unknown | unknown[];

package/src/mu/pages/ResponsivePage.tsx

@@ -34,17 +34,17 @@ export function ResponsivePage<
         >
             <ResponsibleContainer<T, F>
                 paddings={paddings}
-                containerBoxSx={(paddings, _dataGrid) => {
+                containerBoxSx={(paddings, hasField, _dataGrid) => {
                     // Half
                     const half = MUGlobal.half(paddings);
 
                     // .SearchBox keep the same to avoid flick when switching between DataGrid and List
                     return {
+                        paddingTop: paddings,
                         '& .SearchBox': {
                             marginLeft: paddings,
-                            marginTop: paddings,
                             marginRight: paddings,
-                            marginBottom: half
+                            marginBottom: hasField ? half : 0
                         },
                         '& .ListBox': {
                             marginBottom: paddings