@etsoo/materialui 1.0.2 → 1.0.5

package/lib/SelectEx.d.ts

@@ -9,6 +9,14 @@ export declare type SelectExProps<T extends object, D extends DataTypes.Keys<T>
      * Auto add blank item
      */
     autoAddBlankItem?: boolean;
+    /**
+     * The helper text content.
+     */
+    helperText?: React.ReactNode;
+    /**
+     * Input required
+     */
+    inputRequired?: boolean;
     /**
      * Id field
      */
@@ -17,6 +25,10 @@ export declare type SelectExProps<T extends object, D extends DataTypes.Keys<T>
      * Item icon renderer
      */
     itemIconRenderer?: (id: T[D]) => React.ReactNode;
+    /**
+     * Item style
+     */
+    itemStyle?: (option: T) => React.CSSProperties;
     /**
      * Label field
      */

package/lib/SelectEx.js

@@ -1,4 +1,4 @@
-import { Checkbox, FormControl, InputLabel, ListItemText, MenuItem, OutlinedInput, Select } from '@mui/material';
+import { Checkbox, FormControl, FormHelperText, InputLabel, ListItemText, MenuItem, OutlinedInput, Select } from '@mui/material';
 import React from 'react';
 import { MUGlobal } from './MUGlobal';
 import { ListItemRightIcon } from './ListItemRightIcon';
@@ -12,7 +12,7 @@ import { ReactUtils } from '@etsoo/react';
 export function SelectEx(props) {
     var _a;
     // Destruct
-    const { defaultValue, idField = 'id', itemIconRenderer, label, labelField = 'label', loadData, onItemClick, onLoadData, multiple = false, name, options = [], search = false, autoAddBlankItem = search, value, onChange, fullWidth, ...rest } = props;
+    const { defaultValue, idField = 'id', error, helperText, inputRequired, itemIconRenderer, itemStyle, label, labelField = 'label', loadData, onItemClick, onLoadData, multiple = false, name, options = [], search = false, autoAddBlankItem = search, value, onChange, fullWidth, ...rest } = props;
     // Options state
     const [localOptions, setOptions] = React.useState(options);
     const isMounted = React.useRef(true);
@@ -112,13 +112,13 @@ export function SelectEx(props) {
         };
     }, []);
     // Layout
-    return (React.createElement(FormControl, { size: search ? MUGlobal.searchFieldSize : MUGlobal.inputFieldSize, fullWidth: fullWidth },
+    return (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(Select, { ref: divRef, value: localOptions.some((option) => itemChecked(getId(option)))
                 ? valueState !== null && valueState !== void 0 ? valueState : ''
-                : '', input: React.createElement(OutlinedInput, { notched: true, label: label }), labelId: labelId, name: name, multiple: multiple, onChange: (event, child) => {
+                : '', input: React.createElement(OutlinedInput, { notched: true, label: label, required: inputRequired }), labelId: labelId, name: name, multiple: multiple, onChange: (event, child) => {
                 if (onChange)
                     onChange(event, child);
                 if (multiple)
@@ -148,9 +148,12 @@ export function SelectEx(props) {
                     }
                     if (!multiple)
                         setItemValue(id);
-                } },
+                }, style: itemStyle == null
+                    ? undefined
+                    : itemStyle(option) },
                 multiple && React.createElement(Checkbox, { checked: itemChecked(id) }),
                 React.createElement(ListItemText, { primary: label }),
                 itemIconRenderer && (React.createElement(ListItemRightIcon, null, itemIconRenderer(option[idField])))));
-        }))));
+        })),
+        helperText != null && (React.createElement(FormHelperText, null, helperText))));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/materialui",
-    "version": "1.0.2",
+    "version": "1.0.5",
     "description": "TypeScript Material-UI Implementation",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -49,17 +49,17 @@
         "@dnd-kit/core": "^6.0.5",
         "@dnd-kit/sortable": "^7.0.1",
         "@emotion/css": "^11.10.0",
-        "@emotion/react": "^11.10.0",
-        "@emotion/styled": "^11.10.0",
+        "@emotion/react": "^11.10.4",
+        "@emotion/styled": "^11.10.4",
         "@etsoo/appscript": "^1.2.88",
         "@etsoo/notificationbase": "^1.1.7",
-        "@etsoo/react": "^1.5.85",
+        "@etsoo/react": "^1.5.86",
         "@etsoo/shared": "^1.1.51",
         "@mui/icons-material": "^5.10.3",
         "@mui/material": "^5.10.3",
         "@types/pica": "^9.0.1",
         "@types/pulltorefreshjs": "^0.1.5",
-        "@types/react": "^18.0.17",
+        "@types/react": "^18.0.18",
         "@types/react-avatar-editor": "^13.0.0",
         "@types/react-dom": "^18.0.6",
         "@types/react-input-mask": "^3.0.1",
@@ -83,8 +83,8 @@
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.3.0",
         "@types/jest": "^29.0.0",
-        "@typescript-eslint/eslint-plugin": "^5.36.0",
-        "@typescript-eslint/parser": "^5.36.0",
+        "@typescript-eslint/eslint-plugin": "^5.36.1",
+        "@typescript-eslint/parser": "^5.36.1",
         "eslint": "^8.23.0",
         "eslint-config-airbnb-base": "^15.0.0",
         "eslint-plugin-import": "^2.26.0",

package/src/SelectEx.tsx

@@ -1,6 +1,7 @@
 import {
     Checkbox,
     FormControl,
+    FormHelperText,
     InputLabel,
     ListItemText,
     MenuItem,
@@ -34,6 +35,16 @@ export type SelectExProps<
      */
     autoAddBlankItem?: boolean;
 
+    /**
+     * The helper text content.
+     */
+    helperText?: React.ReactNode;
+
+    /**
+     * Input required
+     */
+    inputRequired?: boolean;
+
     /**
      * Id field
      */
@@ -44,6 +55,11 @@ export type SelectExProps<
      */
     itemIconRenderer?: (id: T[D]) => React.ReactNode;
 
+    /**
+     * Item style
+     */
+    itemStyle?: (option: T) => React.CSSProperties;
+
     /**
      * Label field
      */
@@ -89,7 +105,11 @@ export function SelectEx<
     const {
         defaultValue,
         idField = 'id' as D,
+        error,
+        helperText,
+        inputRequired,
         itemIconRenderer,
+        itemStyle,
         label,
         labelField = 'label' as L,
         loadData,
@@ -212,6 +232,7 @@ export function SelectEx<
         <FormControl
             size={search ? MUGlobal.searchFieldSize : MUGlobal.inputFieldSize}
             fullWidth={fullWidth}
+            error={error}
         >
             <InputLabel
                 id={labelId}
@@ -230,7 +251,13 @@ export function SelectEx<
                         ? valueState ?? ''
                         : ''
                 }
-                input={<OutlinedInput notched label={label} />}
+                input={
+                    <OutlinedInput
+                        notched
+                        label={label}
+                        required={inputRequired}
+                    />
+                }
                 labelId={labelId}
                 name={name}
                 multiple={multiple}
@@ -273,6 +300,11 @@ export function SelectEx<
                                 }
                                 if (!multiple) setItemValue(id);
                             }}
+                            style={
+                                itemStyle == null
+                                    ? undefined
+                                    : itemStyle(option)
+                            }
                         >
                             {multiple && <Checkbox checked={itemChecked(id)} />}
                             <ListItemText primary={label} />
@@ -285,6 +317,9 @@ export function SelectEx<
                     );
                 })}
             </Select>
+            {helperText != null && (
+                <FormHelperText>{helperText}</FormHelperText>
+            )}
         </FormControl>
     );
 }