@etsoo/materialui 1.0.98 → 1.1.0

package/__tests__/ComboBox.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ComboBox } from '../src';
 import { fireEvent, render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+//import '@testing-library/jest-dom/extend-expect';
 
 it('Render ComboBox', async () => {
     // Arrange

package/__tests__/SelectEx.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { SelectEx } from '../src';
 import { findByText, fireEvent, render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
 import { ListType1, Utils } from '@etsoo/shared';
 import { act } from 'react-dom/test-utils';
 

package/babel.config.json

@@ -1,5 +1,9 @@
 {
-    "presets": [["@babel/env"]],
+    "presets": [
+        ["@babel/env"],
+        "@babel/preset-typescript",
+        "@babel/preset-react"
+    ],
     "plugins": [
         [
             "@babel/plugin-transform-runtime",

package/lib/DataSteps.js

@@ -5,9 +5,9 @@ import NavigateBeforeIcon from '@mui/icons-material/NavigateBefore';
 import CheckIcon from '@mui/icons-material/Check';
 import StartIcon from '@mui/icons-material/Start';
 import React from 'react';
+import { HBox } from './FlexBox';
 import { globalApp } from './app/ReactApp';
 import { MUGlobal } from './MUGlobal';
-import { HBox } from './FlexBox';
 /**
  * Data collecting steps component
  * @param props Props
@@ -27,7 +27,8 @@ export function DataSteps(props) {
     const indexRef = React.useRef(-1);
     // Current Json data
     const jsonRef = React.useRef(jsonValue);
-    if (jsonValue != jsonRef.current)
+    // Ignore empty value case
+    if (jsonValue !== jsonRef.current && valueFormatter(jsonValue))
         jsonRef.current = jsonValue;
     // Current value
     const [localValue, setLocalValue] = React.useState(value);
@@ -72,8 +73,8 @@ export function DataSteps(props) {
     };
     React.useEffect(() => {
         setLocalValue(valueFormatter(jsonRef.current));
-    }, [jsonRef.current]);
-    return (React.createElement(TextField, { InputLabelProps: InputLabelProps, inputProps: { style: { cursor: 'pointer' } }, InputProps: {
+    }, [valueFormatter]);
+    return (React.createElement(TextField, { autoComplete: "new-password", InputLabelProps: InputLabelProps, inputProps: { style: { cursor: 'pointer' } }, InputProps: {
             onKeyDown: (event) => {
                 if (event.key === 'Tab')
                     return;

package/lib/NotifierMU.d.ts

@@ -17,7 +17,7 @@ export declare class NotificationMU extends NotificationReact {
      * @param className Style class name
      * @param classes Style classes
      */
-    render(props: NotificationRenderProps, className: string): JSX.Element;
+    render(props: NotificationRenderProps, className?: string): JSX.Element;
 }
 /**
  * Antd notifier

package/lib/OptionGroup.js

@@ -1,6 +1,6 @@
 import { DataTypes, Utils } from '@etsoo/shared';
 import { Box, Checkbox, FormControl, FormControlLabel, FormGroup, FormHelperText, InputLabel, Radio, RadioGroup, useTheme } from '@mui/material';
-import NotchedOutline from '@mui/material/OutlinedInput/NotchedOutline';
+import NotchedOutline from '@mui/material/OutlinedInput';
 import React from 'react';
 /**
  * OptionGroup

package/lib/app/ReactApp.d.ts

@@ -98,7 +98,7 @@ export declare class ReactApp<S extends IAppSettings, D extends IUser, P extends
     /**
      * Get notifier provider
      */
-    static get notifierProvider(): React.FunctionComponent<object>;
+    static get notifierProvider(): React.FunctionComponent<DataTypes.StringRecord>;
     private static createNotifier;
     /**
      * Culture state

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/materialui",
-    "version": "1.0.98",
+    "version": "1.1.0",
     "description": "TypeScript Material-UI Implementation",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -18,11 +18,10 @@
         ],
         "testEnvironment": "jsdom",
         "transform": {
-            ".+\\.jsx?$": "babel-jest",
-            ".+\\.tsx?$": "ts-jest"
+            "^.+\\.[t|j]sx?$": "babel-jest"
         },
         "transformIgnorePatterns": [
-            "/node_modules/(?!@etsoo/).+\\.js$"
+            "/node_modules/(?!(@etsoo)/)"
         ]
     },
     "repository": {
@@ -46,17 +45,17 @@
     },
     "homepage": "https://github.com/ETSOO/ReactMU#readme",
     "dependencies": {
-        "@dnd-kit/core": "^6.0.5",
+        "@dnd-kit/core": "^6.0.6",
         "@dnd-kit/sortable": "^7.0.1",
         "@emotion/css": "^11.10.5",
         "@emotion/react": "^11.10.5",
         "@emotion/styled": "^11.10.5",
-        "@etsoo/appscript": "^1.3.44",
-        "@etsoo/notificationbase": "^1.1.18",
-        "@etsoo/react": "^1.6.35",
-        "@etsoo/shared": "^1.1.79",
-        "@mui/icons-material": "^5.10.16",
-        "@mui/material": "^5.10.16",
+        "@etsoo/appscript": "^1.3.49",
+        "@etsoo/notificationbase": "^1.1.20",
+        "@etsoo/react": "^1.6.36",
+        "@etsoo/shared": "^1.1.84",
+        "@mui/icons-material": "^5.11.0",
+        "@mui/material": "^5.11.1",
         "@types/pica": "^9.0.1",
         "@types/pulltorefreshjs": "^0.1.5",
         "@types/react": "^18.0.26",
@@ -71,27 +70,28 @@
         "react-dom": "^18.2.0",
         "react-draggable": "^4.4.5",
         "react-imask": "^6.4.3",
-        "react-router-dom": "^6.4.4",
+        "react-router-dom": "^6.6.0",
         "react-window": "^1.8.8"
     },
     "devDependencies": {
         "@babel/cli": "^7.19.3",
         "@babel/core": "^7.20.5",
         "@babel/plugin-transform-runtime": "^7.19.6",
+        "@babel/preset-typescript": "^7.18.6",
         "@babel/preset-env": "^7.20.2",
+        "@babel/preset-react": "^7.18.6",
         "@babel/runtime-corejs3": "^7.20.6",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
-        "@types/jest": "^29.2.3",
-        "@typescript-eslint/eslint-plugin": "^5.45.0",
-        "@typescript-eslint/parser": "^5.45.0",
-        "eslint": "^8.29.0",
+        "@types/jest": "^29.2.4",
+        "@typescript-eslint/eslint-plugin": "^5.47.0",
+        "@typescript-eslint/parser": "^5.47.0",
+        "eslint": "^8.30.0",
         "eslint-config-airbnb-base": "^15.0.0",
         "eslint-plugin-import": "^2.26.0",
         "eslint-plugin-react": "^7.31.11",
         "jest": "^29.3.1",
         "jest-environment-jsdom": "^29.3.1",
-        "ts-jest": "^29.0.3",
-        "typescript": "^4.9.3"
+        "typescript": "^4.9.4"
     }
 }

package/src/DataSteps.tsx

@@ -12,9 +12,9 @@ import CheckIcon from '@mui/icons-material/Check';
 import StartIcon from '@mui/icons-material/Start';
 import { InputDialogProps } from '@etsoo/react';
 import React from 'react';
+import { HBox } from './FlexBox';
 import { globalApp } from './app/ReactApp';
 import { MUGlobal } from './MUGlobal';
-import { HBox } from './FlexBox';
 
 /**
  * Data step
@@ -85,7 +85,10 @@ export function DataSteps<T extends object>(props: DataStepsProps<T>) {
 
     // Current Json data
     const jsonRef = React.useRef<T>(jsonValue);
-    if (jsonValue != jsonRef.current) jsonRef.current = jsonValue;
+
+    // Ignore empty value case
+    if (jsonValue !== jsonRef.current && valueFormatter(jsonValue))
+        jsonRef.current = jsonValue;
 
     // Current value
     const [localValue, setLocalValue] = React.useState(value);
@@ -174,10 +177,11 @@ export function DataSteps<T extends object>(props: DataStepsProps<T>) {
 
     React.useEffect(() => {
         setLocalValue(valueFormatter(jsonRef.current));
-    }, [jsonRef.current]);
+    }, [valueFormatter]);
 
     return (
         <TextField
+            autoComplete="new-password"
             InputLabelProps={InputLabelProps}
             inputProps={{ style: { cursor: 'pointer' } }}
             InputProps={{

package/src/NotifierMU.tsx

@@ -59,7 +59,7 @@ const IconDialogTitle = styled(DialogTitle)`
  */
 export class NotificationMU extends NotificationReact {
     // Create alert
-    private createAlert(_props: NotificationRenderProps, className: string) {
+    private createAlert(_props: NotificationRenderProps, className?: string) {
         const labels = Labels.NotificationMU;
 
         const {
@@ -140,7 +140,7 @@ export class NotificationMU extends NotificationReact {
     }
 
     // Create confirm
-    private createConfirm(_props: NotificationRenderProps, className: string) {
+    private createConfirm(_props: NotificationRenderProps, className?: string) {
         const labels = Labels.NotificationMU;
         const title = this.title ?? labels.confirmTitle;
 
@@ -222,7 +222,7 @@ export class NotificationMU extends NotificationReact {
     }
 
     // Create message
-    private createMessage(_props: NotificationRenderProps, className: string) {
+    private createMessage(_props: NotificationRenderProps, className?: string) {
         if (!this.open) return <React.Fragment key={this.id}></React.Fragment>;
 
         const setupProps: AlertProps = {
@@ -248,7 +248,7 @@ export class NotificationMU extends NotificationReact {
     }
 
     // Create prompt
-    private createPrompt(_props: NotificationRenderProps, className: string) {
+    private createPrompt(_props: NotificationRenderProps, className?: string) {
         const labels = Labels.NotificationMU;
         const title = this.title ?? labels.promptTitle;
 
@@ -431,7 +431,7 @@ export class NotificationMU extends NotificationReact {
     }
 
     // Create loading
-    private createLoading(_props: NotificationRenderProps, className: string) {
+    private createLoading(_props: NotificationRenderProps, className?: string) {
         // Properties
         const setupProps: CircularProgressProps = { color: 'primary' };
 
@@ -487,7 +487,7 @@ export class NotificationMU extends NotificationReact {
      * @param className Style class name
      * @param classes Style classes
      */
-    render(props: NotificationRenderProps, className: string) {
+    render(props: NotificationRenderProps, className?: string) {
         // Loading bar
         if (this.type === NotificationType.Loading) {
             return this.createLoading(props, className);

package/src/OptionGroup.tsx

@@ -18,7 +18,7 @@ import {
     RadioGroup,
     useTheme
 } from '@mui/material';
-import NotchedOutline from '@mui/material/OutlinedInput/NotchedOutline';
+import NotchedOutline from '@mui/material/OutlinedInput';
 import React from 'react';
 
 /**