@etsoo/materialui 1.2.54 → 1.2.57

package/lib/HiSelector.js

@@ -44,7 +44,7 @@ export function HiSelector(props) {
             React.createElement(FormLabel, { required: required, sx: { fontSize: (theme) => theme.typography.caption } }, label))),
         React.createElement("input", { type: "hidden", name: name, value: `${currentValue !== null && currentValue !== void 0 ? currentValue : ""}` }),
         React.createElement(Grid, { item: true, ...breakPoints },
-            React.createElement(SelectEx, { idField: idField, labelField: labelField, name: "tab1", search: search, fullWidth: true, loadData: () => loadData(), value: values[0], onChange: (event) => doChange(event, 0), onItemChange: doItemChange, inputRequired: required, error: error, helperText: helperText })),
+            React.createElement(SelectEx, { idField: idField, labelField: labelField, name: "tab1", search: search, fullWidth: true, loadData: () => loadData(), value: values[0], onChange: (event) => doChange(event, 0), onItemChange: doItemChange, required: required, error: error, helperText: helperText })),
         localValues[0] != null && (React.createElement(Grid, { item: true, ...breakPoints },
             React.createElement(SelectEx, { key: `${localValues[0]}`, idField: idField, labelField: labelField, name: "tab2", search: search, fullWidth: true, loadData: () => loadData(localValues[0]), value: values[1], onChange: (event) => doChange(event, 1), onItemChange: doItemChange }))),
         localValues[1] != null && (React.createElement(Grid, { item: true, ...breakPoints },

package/lib/SelectEx.d.ts

@@ -13,10 +13,6 @@ export type SelectExProps<T extends object, D extends DataTypes.Keys<T> = IdDefa
      * The helper text content.
      */
     helperText?: React.ReactNode;
-    /**
-     * Input required
-     */
-    inputRequired?: boolean;
     /**
      * Id field
      */

package/lib/SelectEx.js

@@ -12,7 +12,7 @@ import { ReactUtils } from "@etsoo/react";
  */
 export function SelectEx(props) {
     // Destruct
-    const { defaultValue, idField = "id", error, helperText, inputRequired, itemIconRenderer, itemStyle, label, labelField = "label", loadData, onItemChange, onItemClick, onLoadData, multiple = false, name, options, refresh, search = false, autoAddBlankItem = search, value, onChange, fullWidth, ...rest } = props;
+    const { defaultValue, idField = "id", error, helperText, itemIconRenderer, itemStyle, label, labelField = "label", loadData, onItemChange, onItemClick, onLoadData, multiple = false, name, options, refresh, search = false, autoAddBlankItem = search, value, onChange, fullWidth, required, variant = "outlined", ...rest } = props;
     // Options state
     const [localOptions, setOptions] = React.useState([]);
     const isMounted = React.useRef(false);
@@ -128,12 +128,12 @@ export function SelectEx(props) {
     // Layout
     return (React.createElement(Stack, { direction: "row" },
         React.createElement(FormControl, { size: search ? MUGlobal.searchFieldSize : MUGlobal.inputFieldSize, fullWidth: fullWidth, error: error },
-            React.createElement(InputLabel, { id: labelId, shrink: search ? MUGlobal.searchFieldShrink : MUGlobal.inputFieldShrink }, label),
+            React.createElement(InputLabel, { id: labelId, variant: variant, shrink: search ? MUGlobal.searchFieldShrink : MUGlobal.inputFieldShrink, required: required }, label),
             React.createElement(Select, { ref: divRef, value: multiple
                     ? valueState
                     : localOptions.some((o) => o[idField] === valueState)
                         ? valueState
-                        : "", input: React.createElement(OutlinedInput, { notched: true, label: label, required: inputRequired }), labelId: labelId, name: name, multiple: multiple, onChange: (event, child) => {
+                        : "", input: React.createElement(OutlinedInput, { notched: true, label: label, required: required }), labelId: labelId, name: name, multiple: multiple, onChange: (event, child) => {
                     if (onChange) {
                         onChange(event, child);
                         // event.preventDefault() will block executing
@@ -159,7 +159,7 @@ export function SelectEx(props) {
                     })
                         .map((option) => getLabel(option))
                         .join(", ");
-                }, sx: { minWidth: "150px" }, fullWidth: fullWidth, ...rest }, localOptions.map((option) => {
+                }, sx: { minWidth: "150px" }, fullWidth: fullWidth, required: required, variant: variant, ...rest }, localOptions.map((option) => {
                 // Option id
                 const id = getId(option);
                 // Option label

package/lib/pages/ViewPage.d.ts

@@ -73,6 +73,10 @@ export interface ViewPageProps<T extends DataTypes.StringRecord> extends Omit<Co
      * Grid container reference
      */
     gridRef?: React.Ref<HTMLDivElement>;
+    /**
+     * Refresh seed
+     */
+    refreshSeed?: number;
 }
 /**
  * View page

package/lib/pages/ViewPage.js

@@ -78,7 +78,7 @@ function getItemField(field, data) {
  */
 export function ViewPage(props) {
     // Destruct
-    const { actions, children, fields, loadData, paddings = MUGlobal.pagePaddings, spacing = MUGlobal.half(MUGlobal.pagePaddings), supportRefresh = true, fabColumnDirection = true, fabTop = true, supportBack = true, pullToRefresh = true, gridRef, ...rest } = props;
+    const { actions, children, fields, loadData, paddings = MUGlobal.pagePaddings, spacing = MUGlobal.half(MUGlobal.pagePaddings), supportRefresh = true, fabColumnDirection = true, fabTop = true, supportBack = true, pullToRefresh = true, gridRef, refreshSeed = 0, ...rest } = props;
     // Data
     const [data, setData] = React.useState();
     // Labels
@@ -86,12 +86,18 @@ export function ViewPage(props) {
     // Container
     const pullContainer = "#page-container";
     // Load data
-    const refresh = async () => {
+    const refresh = React.useCallback(async () => {
         const result = await loadData();
         if (result == null)
             return;
         setData(result);
-    };
+    }, [loadData]);
+    React.useEffect(() => {
+        // Only refresh after the first data load
+        if (refreshSeed === 0 || data == null)
+            return;
+        refresh();
+    }, [refreshSeed]);
     return (React.createElement(CommonPage, { paddings: paddings, onRefresh: supportRefresh ? refresh : undefined, onUpdate: supportRefresh ? undefined : refresh, ...rest, scrollContainer: globalThis, fabColumnDirection: fabColumnDirection, fabTop: fabTop, supportBack: supportBack }, data == null ? (React.createElement(LinearProgress, null)) : (React.createElement(React.Fragment, null,
         React.createElement(Grid, { container: true, justifyContent: "left", spacing: spacing, className: "ET-ViewPage", ref: gridRef, sx: {
                 ".MuiTypography-subtitle2": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.2.54",
+  "version": "1.2.57",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -50,18 +50,18 @@
     "@emotion/css": "^11.11.0",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@etsoo/appscript": "^1.4.15",
+    "@etsoo/appscript": "^1.4.19",
     "@etsoo/notificationbase": "^1.1.25",
     "@etsoo/react": "^1.6.90",
     "@etsoo/shared": "^1.2.5",
     "@mui/icons-material": "^5.11.16",
-    "@mui/material": "^5.13.4",
+    "@mui/material": "^5.13.5",
     "@mui/x-data-grid": "^6.7.0",
     "@types/pica": "^9.0.1",
     "@types/pulltorefreshjs": "^0.1.5",
-    "@types/react": "^18.2.11",
+    "@types/react": "^18.2.12",
     "@types/react-avatar-editor": "^13.0.0",
-    "@types/react-dom": "^18.2.4",
+    "@types/react-dom": "^18.2.5",
     "@types/react-input-mask": "^3.0.2",
     "chart.js": "^4.3.0",
     "chartjs-plugin-datalabels": "^2.2.0",
@@ -85,8 +85,8 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@types/jest": "^29.5.2",
-    "@typescript-eslint/eslint-plugin": "^5.59.9",
-    "@typescript-eslint/parser": "^5.59.9",
+    "@typescript-eslint/eslint-plugin": "^5.59.11",
+    "@typescript-eslint/parser": "^5.59.11",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "typescript": "^5.1.3"

package/src/HiSelector.tsx

@@ -175,7 +175,7 @@ export function HiSelector<
           value={values[0]}
           onChange={(event) => doChange(event, 0)}
           onItemChange={doItemChange}
-          inputRequired={required}
+          required={required}
           error={error}
           helperText={helperText}
         />

package/src/SelectEx.tsx

@@ -43,11 +43,6 @@ export type SelectExProps<
    */
   helperText?: React.ReactNode;
 
-  /**
-   * Input required
-   */
-  inputRequired?: boolean;
-
   /**
    * Id field
    */
@@ -120,7 +115,6 @@ export function SelectEx<
     idField = "id" as D,
     error,
     helperText,
-    inputRequired,
     itemIconRenderer,
     itemStyle,
     label,
@@ -138,6 +132,8 @@ export function SelectEx<
     value,
     onChange,
     fullWidth,
+    required,
+    variant = "outlined",
     ...rest
   } = props;
 
@@ -278,9 +274,11 @@ export function SelectEx<
       >
         <InputLabel
           id={labelId}
+          variant={variant}
           shrink={
             search ? MUGlobal.searchFieldShrink : MUGlobal.inputFieldShrink
           }
+          required={required}
         >
           {label}
         </InputLabel>
@@ -293,9 +291,7 @@ export function SelectEx<
               ? valueState
               : ""
           }
-          input={
-            <OutlinedInput notched label={label} required={inputRequired} />
-          }
+          input={<OutlinedInput notched label={label} required={required} />}
           labelId={labelId}
           name={name}
           multiple={multiple}
@@ -330,6 +326,8 @@ export function SelectEx<
           }}
           sx={{ minWidth: "150px" }}
           fullWidth={fullWidth}
+          required={required}
+          variant={variant}
           {...rest}
         >
           {localOptions.map((option) => {

package/src/pages/ViewPage.tsx

@@ -115,6 +115,11 @@ export interface ViewPageProps<T extends DataTypes.StringRecord>
    * Grid container reference
    */
   gridRef?: React.Ref<HTMLDivElement>;
+
+  /**
+   * Refresh seed
+   */
+  refreshSeed?: number;
 }
 
 function formatItemData(fieldData: unknown): string | undefined {
@@ -214,6 +219,7 @@ export function ViewPage<T extends DataTypes.StringRecord>(
     supportBack = true,
     pullToRefresh = true,
     gridRef,
+    refreshSeed = 0,
     ...rest
   } = props;
 
@@ -227,11 +233,17 @@ export function ViewPage<T extends DataTypes.StringRecord>(
   const pullContainer = "#page-container";
 
   // Load data
-  const refresh = async () => {
+  const refresh = React.useCallback(async () => {
     const result = await loadData();
     if (result == null) return;
     setData(result);
-  };
+  }, [loadData]);
+
+  React.useEffect(() => {
+    // Only refresh after the first data load
+    if (refreshSeed === 0 || data == null) return;
+    refresh();
+  }, [refreshSeed]);
 
   return (
     <CommonPage