@etsoo/materialui 1.1.36 → 1.1.38

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";
 /**
@@ -10,11 +10,18 @@ import React from "react";
 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();
+    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, sx = {}, ...rest } = props;
     // Outlined
     const outlined = variant === "outlined";
+    if (sx) {
+        Object.assign(sx, {
+            height: outlined
+                ? row
+                    ? `${itemHeight}px`
+                    : `${options.length * itemHeight + 14}px`
+                : undefined
+        });
+    }
     // Get option value
     // D type should be the source id type
     const getOptionValue = (option) => {
@@ -94,7 +101,7 @@ export function OptionGroup(props) {
         } }, list));
     // Layout
     return (React.createElement(React.Fragment, null,
-        React.createElement(FormControl, { component: "fieldset", fullWidth: fullWidth, ...rest },
+        React.createElement(FormControl, { component: "fieldset", fullWidth: fullWidth, sx: sx, ...rest },
             label && (React.createElement(InputLabel, { required: required, variant: variant, shrink: true }, label)),
             outlined && (React.createElement(NotchedOutline, { label: label && required ? label + " *" : label, notched: true, sx: {
                     cursor: "default",
@@ -104,10 +111,6 @@ export function OptionGroup(props) {
                         visibility: "hidden"
                     }
                 } })),
-            React.createElement(Box, { paddingLeft: 2, paddingY: "7px", position: outlined ? "absolute" : undefined, height: outlined
-                    ? row
-                        ? `${itemHeight}px`
-                        : `${options.length * itemHeight + 14}px`
-                    : undefined }, group)),
+            React.createElement(Box, { paddingLeft: 2, paddingY: "7px", position: outlined ? "absolute" : undefined }, group)),
         helperText && React.createElement(FormHelperText, null, helperText)));
 }

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.36",
+  "version": "1.1.38",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -47,12 +47,12 @@
   "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.65",
+    "@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.9",
     "@mui/material": "^5.11.9",
@@ -82,7 +82,7 @@
     "@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.52.0",
     "@typescript-eslint/parser": "^5.52.0",

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";
@@ -146,15 +145,23 @@ export function OptionGroup<
     variant,
     required,
     fullWidth,
+    sx = {},
     ...rest
   } = props;
 
-  // Theme
-  const theme = useTheme();
-
   // Outlined
   const outlined = variant === "outlined";
 
+  if (sx) {
+    Object.assign(sx, {
+      height: outlined
+        ? row
+          ? `${itemHeight}px`
+          : `${options.length * itemHeight + 14}px`
+        : undefined
+    });
+  }
+
   // Get option value
   // D type should be the source id type
   const getOptionValue = (option: T): T[D] | null => {
@@ -285,7 +292,7 @@ export function OptionGroup<
   // Layout
   return (
     <React.Fragment>
-      <FormControl component="fieldset" fullWidth={fullWidth} {...rest}>
+      <FormControl component="fieldset" fullWidth={fullWidth} sx={sx} {...rest}>
         {label && (
           <InputLabel required={required} variant={variant} shrink>
             {label}
@@ -309,13 +316,6 @@ export function OptionGroup<
           paddingLeft={2}
           paddingY="7px"
           position={outlined ? "absolute" : undefined}
-          height={
-            outlined
-              ? row
-                ? `${itemHeight}px`
-                : `${options.length * itemHeight + 14}px`
-              : undefined
-          }
         >
           {group}
         </Box>

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";