@etsoo/materialui 1.1.35 → 1.1.37

package/lib/ComboBox.js

@@ -60,9 +60,10 @@ export function ComboBox(props) {
     // null for controlled
     const [stateValue, setStateValue] = React.useState(null);
     React.useEffect(() => {
-        if (localValue != null)
+        if (localValue != null && localValue != stateValue) {
             setStateValue(localValue);
-    }, [JSON.stringify(localValue) != JSON.stringify(stateValue)]);
+        }
+    }, [localValue]);
     // Add readOnly
     const addReadOnly = (params) => {
         if (readOnly != null) {

package/lib/OptionBool.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { ListType1 } from "@etsoo/shared";
+import { OptionGroupProps } from "./OptionGroup";
+/**
+ * OptionBool props
+ */
+export type OptionBoolProps = Omit<OptionGroupProps<ListType1, "id", "label">, "options" | "row" | "multiple">;
+/**
+ * OptionBool (yes/no)
+ * @param props Props
+ * @returns Component
+ */
+export declare function OptionBool(props: OptionBoolProps): JSX.Element;

package/lib/OptionBool.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { globalApp } from "./app/ReactApp";
+import { OptionGroup } from "./OptionGroup";
+/**
+ * OptionBool (yes/no)
+ * @param props Props
+ * @returns Component
+ */
+export function OptionBool(props) {
+    // Options
+    const options = globalApp.getBools();
+    // Layout
+    return (React.createElement(OptionGroup, { options: options, row: true, multiple: false, ...props }));
+}

package/lib/OptionGroup.js

@@ -1,5 +1,5 @@
 import { DataTypes, Utils } from "@etsoo/shared";
-import { Box, Checkbox, FormControl, FormControlLabel, FormGroup, FormHelperText, InputLabel, Radio, RadioGroup, useTheme } from "@mui/material";
+import { Box, Checkbox, FormControl, FormControlLabel, FormGroup, FormHelperText, InputLabel, Radio, RadioGroup } from "@mui/material";
 import NotchedOutline from "@mui/material/OutlinedInput";
 import React from "react";
 /**
@@ -11,8 +11,6 @@ export function OptionGroup(props) {
     var _a;
     // Destruct
     const { getOptionLabel, defaultValue, idField = "id", label, labelField = "label", multiple = false, mRef, name, onValueChange, options, readOnly, row, itemSize, itemHeight = row ? 56 : 42, helperText, variant, required, fullWidth, ...rest } = props;
-    // Theme
-    const theme = useTheme();
     // Outlined
     const outlined = variant === "outlined";
     // Get option value

package/lib/SelectBool.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
-import { ListType1 } from '@etsoo/shared';
-import { SelectExProps } from './SelectEx';
+import { ListType1 } from "@etsoo/shared";
+import { SelectExProps } from "./SelectEx";
 /**
  * SelectBool props
  */
-export type SelectBoolProps = Omit<SelectExProps<ListType1>, 'options' | 'loadData'>;
+export type SelectBoolProps = Omit<SelectExProps<ListType1>, "options" | "loadData">;
 /**
  * SelectBool (yes/no)
  * @param props Props

package/lib/SelectBool.js

@@ -1,7 +1,7 @@
-import { Utils } from '@etsoo/shared';
-import React from 'react';
-import { globalApp } from './app/ReactApp';
-import { SelectEx } from './SelectEx';
+import { Utils } from "@etsoo/shared";
+import React from "react";
+import { globalApp } from "./app/ReactApp";
+import { SelectEx } from "./SelectEx";
 /**
  * SelectBool (yes/no)
  * @param props Props
@@ -11,10 +11,7 @@ export function SelectBool(props) {
     // Destruct
     const { search = true, autoAddBlankItem = search, ...rest } = props;
     // Options
-    const options = [
-        { id: 'false', label: globalApp.get('no') },
-        { id: 'true', label: globalApp.get('yes') }
-    ];
+    const options = globalApp.getBools();
     if (autoAddBlankItem)
         Utils.addBlankItem(options);
     // Layout

package/lib/index.d.ts

@@ -61,6 +61,7 @@ export * from "./MoneyInputField";
 export * from "./MoreFab";
 export * from "./MUGlobal";
 export * from "./NotifierMU";
+export * from "./OptionBool";
 export * from "./OptionGroup";
 export * from "./PList";
 export * from "./ProgressCount";

package/lib/index.js

@@ -61,6 +61,7 @@ export * from "./MoneyInputField";
 export * from "./MoreFab";
 export * from "./MUGlobal";
 export * from "./NotifierMU";
+export * from "./OptionBool";
 export * from "./OptionGroup";
 export * from "./PList";
 export * from "./ProgressCount";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.1.35",
+  "version": "1.1.37",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -47,20 +47,20 @@
   "dependencies": {
     "@dnd-kit/core": "^6.0.7",
     "@dnd-kit/sortable": "^7.0.2",
-    "@emotion/css": "^11.10.5",
-    "@emotion/react": "^11.10.5",
-    "@emotion/styled": "^11.10.5",
-    "@etsoo/appscript": "^1.3.64",
+    "@emotion/css": "^11.10.6",
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "@etsoo/appscript": "^1.3.66",
     "@etsoo/notificationbase": "^1.1.23",
-    "@etsoo/react": "^1.6.47",
+    "@etsoo/react": "^1.6.48",
     "@etsoo/shared": "^1.1.88",
-    "@mui/icons-material": "^5.11.0",
-    "@mui/material": "^5.11.8",
+    "@mui/icons-material": "^5.11.9",
+    "@mui/material": "^5.11.9",
     "@types/pica": "^9.0.1",
     "@types/pulltorefreshjs": "^0.1.5",
     "@types/react": "^18.0.28",
     "@types/react-avatar-editor": "^13.0.0",
-    "@types/react-dom": "^18.0.10",
+    "@types/react-dom": "^18.0.11",
     "@types/react-input-mask": "^3.0.2",
     "@types/react-window": "^1.8.5",
     "pica": "^9.0.1",
@@ -82,12 +82,12 @@
     "@babel/preset-typescript": "^7.18.6",
     "@babel/runtime-corejs3": "^7.20.13",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
+    "@testing-library/react": "^14.0.0",
     "@types/jest": "^29.4.0",
-    "@typescript-eslint/eslint-plugin": "^5.51.0",
-    "@typescript-eslint/parser": "^5.51.0",
-    "jest": "^29.4.2",
-    "jest-environment-jsdom": "^29.4.2",
+    "@typescript-eslint/eslint-plugin": "^5.52.0",
+    "@typescript-eslint/parser": "^5.52.0",
+    "jest": "^29.4.3",
+    "jest-environment-jsdom": "^29.4.3",
     "typescript": "^4.9.5"
   }
 }

package/src/ComboBox.tsx

@@ -173,8 +173,10 @@ export function ComboBox<
   const [stateValue, setStateValue] = React.useState<T | T[] | null>(null);
 
   React.useEffect(() => {
-    if (localValue != null) setStateValue(localValue);
-  }, [JSON.stringify(localValue) != JSON.stringify(stateValue)]);
+    if (localValue != null && localValue != stateValue) {
+      setStateValue(localValue);
+    }
+  }, [localValue]);
 
   // Add readOnly
   const addReadOnly = (params: AutocompleteRenderInputParams) => {

package/src/OptionBool.tsx

@@ -0,0 +1,27 @@
+import { ListType1 } from "@etsoo/shared";
+import React from "react";
+import { globalApp } from "./app/ReactApp";
+import { OptionGroup, OptionGroupProps } from "./OptionGroup";
+
+/**
+ * OptionBool props
+ */
+export type OptionBoolProps = Omit<
+  OptionGroupProps<ListType1, "id", "label">,
+  "options" | "row" | "multiple"
+>;
+
+/**
+ * OptionBool (yes/no)
+ * @param props Props
+ * @returns Component
+ */
+export function OptionBool(props: OptionBoolProps) {
+  // Options
+  const options = globalApp.getBools();
+
+  // Layout
+  return (
+    <OptionGroup<ListType1> options={options} row multiple={false} {...props} />
+  );
+}

package/src/OptionGroup.tsx

@@ -15,8 +15,7 @@ import {
   FormHelperText,
   InputLabel,
   Radio,
-  RadioGroup,
-  useTheme
+  RadioGroup
 } from "@mui/material";
 import NotchedOutline from "@mui/material/OutlinedInput";
 import React from "react";
@@ -149,9 +148,6 @@ export function OptionGroup<
     ...rest
   } = props;
 
-  // Theme
-  const theme = useTheme();
-
   // Outlined
   const outlined = variant === "outlined";
 

package/src/SelectBool.tsx

@@ -1,14 +1,14 @@
-import { ListType1, Utils } from '@etsoo/shared';
-import React from 'react';
-import { globalApp } from './app/ReactApp';
-import { SelectEx, SelectExProps } from './SelectEx';
+import { ListType1, Utils } from "@etsoo/shared";
+import React from "react";
+import { globalApp } from "./app/ReactApp";
+import { SelectEx, SelectExProps } from "./SelectEx";
 
 /**
  * SelectBool props
  */
 export type SelectBoolProps = Omit<
-    SelectExProps<ListType1>,
-    'options' | 'loadData'
+  SelectExProps<ListType1>,
+  "options" | "loadData"
 >;
 
 /**
@@ -17,17 +17,14 @@ export type SelectBoolProps = Omit<
  * @returns Component
  */
 export function SelectBool(props: SelectBoolProps) {
-    // Destruct
-    const { search = true, autoAddBlankItem = search, ...rest } = props;
+  // Destruct
+  const { search = true, autoAddBlankItem = search, ...rest } = props;
 
-    // Options
-    const options: ListType1[] = [
-        { id: 'false', label: globalApp.get('no')! },
-        { id: 'true', label: globalApp.get('yes')! }
-    ];
+  // Options
+  const options = globalApp.getBools();
 
-    if (autoAddBlankItem) Utils.addBlankItem(options);
+  if (autoAddBlankItem) Utils.addBlankItem(options);
 
-    // Layout
-    return <SelectEx<ListType1> options={options} search={search} {...rest} />;
+  // Layout
+  return <SelectEx<ListType1> options={options} search={search} {...rest} />;
 }

package/src/index.ts

@@ -64,6 +64,7 @@ export * from "./MoneyInputField";
 export * from "./MoreFab";
 export * from "./MUGlobal";
 export * from "./NotifierMU";
+export * from "./OptionBool";
 export * from "./OptionGroup";
 export * from "./PList";
 export * from "./ProgressCount";