@etsoo/materialui 1.3.35 → 1.3.36

package/lib/HiSelector.d.ts

@@ -65,6 +65,10 @@ export type HiSelectorProps<T extends object, D extends DataTypes.Keys<T> = IdDe
      * Values
      */
     values?: T[D][];
+    /**
+     * Variant
+     */
+    variant?: "outlined" | "standard" | "filled";
 };
 /**
  * Hierarchy selector

package/lib/HiSelector.js

@@ -8,7 +8,7 @@ import { SelectEx } from "./SelectEx";
  */
 export function HiSelector(props) {
     // Destruct
-    const { breakPoints = { xs: 6, md: 4, lg: 3 }, idField = "id", error, helperText, name, label, labelField = "name", labels = ["1", "2", "3", "4"], loadData, onChange, onSelectChange, onItemChange, required, search = true, values = [] } = props;
+    const { breakPoints = { xs: 6, md: 4, lg: 3 }, idField = "id", error, helperText, name, label, labelField = "name", labels = ["1", "2", "3", "4"], loadData, onChange, onSelectChange, onItemChange, required, search = true, values = [], variant = "outlined" } = props;
     const [localValues, setValues] = React.useState(values);
     const updateValue = (value) => {
         if (onChange)
@@ -43,11 +43,11 @@ 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, label: labels[0], 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 })),
+            React.createElement(SelectEx, { idField: idField, label: labels[0], 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, variant: variant })),
         localValues[0] != null && (React.createElement(Grid, { item: true, ...breakPoints },
-            React.createElement(SelectEx, { key: `${localValues[0]}`, idField: idField, label: labels[1], labelField: labelField, name: "tab2", search: search, fullWidth: true, loadData: () => loadData(localValues[0]), value: values[1], onChange: (event) => doChange(event, 1), onItemChange: doItemChange }))),
+            React.createElement(SelectEx, { key: `${localValues[0]}`, idField: idField, label: labels[1], labelField: labelField, name: "tab2", search: search, fullWidth: true, loadData: () => loadData(localValues[0]), value: values[1], onChange: (event) => doChange(event, 1), onItemChange: doItemChange, variant: variant }))),
         localValues[1] != null && (React.createElement(Grid, { item: true, ...breakPoints },
-            React.createElement(SelectEx, { key: `${localValues[1]}`, idField: idField, label: labels[2], labelField: labelField, name: "tab3", search: search, fullWidth: true, loadData: () => loadData(localValues[1]), value: values[2], onChange: (event) => doChange(event, 2), onItemChange: doItemChange }))),
+            React.createElement(SelectEx, { key: `${localValues[1]}`, idField: idField, label: labels[2], labelField: labelField, name: "tab3", search: search, fullWidth: true, loadData: () => loadData(localValues[1]), value: values[2], onChange: (event) => doChange(event, 2), onItemChange: doItemChange, variant: variant }))),
         localValues[2] != null && (React.createElement(Grid, { item: true, ...breakPoints },
-            React.createElement(SelectEx, { key: `${localValues[2]}`, idField: idField, label: labels[3], labelField: labelField, name: "tab4", search: search, fullWidth: true, loadData: () => loadData(localValues[2]), value: values[3], onChange: (event) => doChange(event, 3), onItemChange: doItemChange })))));
+            React.createElement(SelectEx, { key: `${localValues[2]}`, idField: idField, label: labels[3], labelField: labelField, name: "tab4", search: search, fullWidth: true, loadData: () => loadData(localValues[2]), value: values[3], onChange: (event) => doChange(event, 3), onItemChange: doItemChange, variant: variant })))));
 }

package/lib/MaskInput.d.ts

@@ -1,9 +1,10 @@
-import { TextFieldProps } from '@mui/material';
-import React from 'react';
+import { TextFieldProps } from "@mui/material";
+import React from "react";
+import { type InputMask, type FactoryOpts } from "imask";
 /**
  * Mask input props
  */
-export type MaskInputProps<T extends IMask.AnyMaskedOptions> = TextFieldProps & {
+export type MaskInputProps<T extends FactoryOpts> = TextFieldProps & {
     /**
      * Mask props
      */
@@ -11,11 +12,11 @@ export type MaskInputProps<T extends IMask.AnyMaskedOptions> = TextFieldProps &
     /**
      * Accept hanlder
      */
-    onAccept?: (value: unknown, maskRef: IMask.InputMask<T>, e?: InputEvent) => void;
+    onAccept?: (value: unknown, maskRef: InputMask<T>, e?: InputEvent) => void;
     /**
      * Complete handler
      */
-    onComplete?: (value: unknown, maskRef: IMask.InputMask<T>, e?: InputEvent) => void;
+    onComplete?: (value: unknown, maskRef: InputMask<T>, e?: InputEvent) => void;
     /**
      * Is the field read only?
      */
@@ -31,4 +32,4 @@ export type MaskInputProps<T extends IMask.AnyMaskedOptions> = TextFieldProps &
  * @param props Props
  * @returns Component
  */
-export declare function MaskInput<T extends IMask.AnyMaskedOptions = IMask.AnyMaskedOptions>(props: MaskInputProps<T>): React.JSX.Element;
+export declare function MaskInput<T extends FactoryOpts = FactoryOpts>(props: MaskInputProps<T>): React.JSX.Element;

package/lib/MaskInput.js

@@ -1,7 +1,7 @@
-import { TextField } from '@mui/material';
-import React from 'react';
-import { MUGlobal } from './MUGlobal';
-import { useIMask } from 'react-imask';
+import { TextField } from "@mui/material";
+import React from "react";
+import { MUGlobal } from "./MUGlobal";
+import { useIMask } from "react-imask";
 /**
  * Mask input
  * https://imask.js.org/
@@ -11,9 +11,7 @@ import { useIMask } from 'react-imask';
 export function MaskInput(props) {
     var _a;
     // Destruct
-    const { defaultValue, mask, InputLabelProps = {}, InputProps = {}, onAccept, onComplete, readOnly, search = false, size = search ? MUGlobal.searchFieldSize : MUGlobal.inputFieldSize, value, variant = search
-        ? MUGlobal.searchFieldVariant
-        : MUGlobal.inputFieldVariant, ...rest } = props;
+    const { defaultValue, mask, InputLabelProps = {}, InputProps = {}, onAccept, onComplete, readOnly, search = false, size = search ? MUGlobal.searchFieldSize : MUGlobal.inputFieldSize, value, variant = search ? MUGlobal.searchFieldVariant : MUGlobal.inputFieldVariant, ...rest } = props;
     const { ref, maskRef } = useIMask(mask, {
         onAccept: (value, maskRef, event) => {
             if (onAccept)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.3.35",
+  "version": "1.3.36",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -48,47 +48,47 @@
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@emotion/css": "^11.11.2",
-    "@emotion/react": "^11.11.1",
+    "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
-    "@etsoo/appscript": "^1.4.73",
-    "@etsoo/notificationbase": "^1.1.32",
-    "@etsoo/react": "^1.7.24",
-    "@etsoo/shared": "^1.2.22",
-    "@mui/icons-material": "^5.14.19",
-    "@mui/material": "^5.14.19",
-    "@mui/x-data-grid": "^6.18.2",
+    "@etsoo/appscript": "^1.4.74",
+    "@etsoo/notificationbase": "^1.1.35",
+    "@etsoo/react": "^1.7.25",
+    "@etsoo/shared": "^1.2.26",
+    "@mui/icons-material": "^5.15.11",
+    "@mui/material": "^5.15.11",
+    "@mui/x-data-grid": "^6.19.5",
     "@types/pica": "^9.0.4",
     "@types/pulltorefreshjs": "^0.1.7",
-    "@types/react": "^18.2.40",
+    "@types/react": "^18.2.58",
     "@types/react-avatar-editor": "^13.0.2",
-    "@types/react-dom": "^18.2.17",
+    "@types/react-dom": "^18.2.19",
     "@types/react-input-mask": "^3.0.5",
-    "chart.js": "^4.4.0",
+    "chart.js": "^4.4.1",
     "chartjs-plugin-datalabels": "^2.2.0",
     "pica": "^9.0.1",
     "pulltorefreshjs": "^0.1.22",
     "react": "^18.2.0",
-    "react-avatar-editor": "^13.0.0",
+    "react-avatar-editor": "^13.0.2",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",
     "react-draggable": "^4.4.6",
-    "react-imask": "6.6.3"
+    "react-imask": "7.4.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.23.4",
-    "@babel/core": "^7.23.5",
-    "@babel/plugin-transform-runtime": "^7.23.4",
-    "@babel/preset-env": "^7.23.5",
+    "@babel/cli": "^7.23.9",
+    "@babel/core": "^7.23.9",
+    "@babel/plugin-transform-runtime": "^7.23.9",
+    "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
-    "@babel/runtime-corejs3": "^7.23.5",
-    "@testing-library/jest-dom": "^6.1.5",
-    "@testing-library/react": "^14.1.2",
-    "@types/jest": "^29.5.10",
-    "@typescript-eslint/eslint-plugin": "^6.13.1",
-    "@typescript-eslint/parser": "^6.13.1",
+    "@babel/runtime-corejs3": "^7.23.9",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.1",
+    "@types/jest": "^29.5.12",
+    "@typescript-eslint/eslint-plugin": "^7.0.2",
+    "@typescript-eslint/parser": "^7.0.2",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "typescript": "^5.3.2"
+    "typescript": "^5.3.3"
   }
 }

package/src/HiSelector.tsx

@@ -90,6 +90,11 @@ export type HiSelectorProps<
    * Values
    */
   values?: T[D][];
+
+  /**
+   * Variant
+   */
+  variant?: "outlined" | "standard" | "filled";
 };
 
 /**
@@ -118,7 +123,8 @@ export function HiSelector<
     onItemChange,
     required,
     search = true,
-    values = []
+    values = [],
+    variant = "outlined"
   } = props;
 
   // Value type
@@ -184,6 +190,7 @@ export function HiSelector<
           required={required}
           error={error}
           helperText={helperText}
+          variant={variant}
         />
       </Grid>
       {localValues[0] != null && (
@@ -200,6 +207,7 @@ export function HiSelector<
             value={values[1]}
             onChange={(event) => doChange(event, 1)}
             onItemChange={doItemChange}
+            variant={variant}
           />
         </Grid>
       )}
@@ -217,6 +225,7 @@ export function HiSelector<
             value={values[2]}
             onChange={(event) => doChange(event, 2)}
             onItemChange={doItemChange}
+            variant={variant}
           />
         </Grid>
       )}
@@ -234,6 +243,7 @@ export function HiSelector<
             value={values[3]}
             onChange={(event) => doChange(event, 3)}
             onItemChange={doItemChange}
+            variant={variant}
           />
         </Grid>
       )}

package/src/MaskInput.tsx

@@ -1,46 +1,38 @@
-import { TextField, TextFieldProps } from '@mui/material';
-import React from 'react';
-import { MUGlobal } from './MUGlobal';
-import { useIMask } from 'react-imask';
+import { TextField, TextFieldProps } from "@mui/material";
+import React from "react";
+import { MUGlobal } from "./MUGlobal";
+import { type InputMask, type FactoryOpts } from "imask";
+import { useIMask } from "react-imask";
 
 /**
  * Mask input props
  */
-export type MaskInputProps<T extends IMask.AnyMaskedOptions> =
-    TextFieldProps & {
-        /**
-         * Mask props
-         */
-        mask: T;
+export type MaskInputProps<T extends FactoryOpts> = TextFieldProps & {
+  /**
+   * Mask props
+   */
+  mask: T;
 
-        /**
-         * Accept hanlder
-         */
-        onAccept?: (
-            value: unknown,
-            maskRef: IMask.InputMask<T>,
-            e?: InputEvent
-        ) => void;
+  /**
+   * Accept hanlder
+   */
+  onAccept?: (value: unknown, maskRef: InputMask<T>, e?: InputEvent) => void;
 
-        /**
-         * Complete handler
-         */
-        onComplete?: (
-            value: unknown,
-            maskRef: IMask.InputMask<T>,
-            e?: InputEvent
-        ) => void;
+  /**
+   * Complete handler
+   */
+  onComplete?: (value: unknown, maskRef: InputMask<T>, e?: InputEvent) => void;
 
-        /**
-         * Is the field read only?
-         */
-        readOnly?: boolean;
+  /**
+   * Is the field read only?
+   */
+  readOnly?: boolean;
 
-        /**
-         * Search case
-         */
-        search?: boolean;
-    };
+  /**
+   * Search case
+   */
+  search?: boolean;
+};
 
 /**
  * Mask input
@@ -48,60 +40,58 @@ export type MaskInputProps<T extends IMask.AnyMaskedOptions> =
  * @param props Props
  * @returns Component
  */
-export function MaskInput<
-    T extends IMask.AnyMaskedOptions = IMask.AnyMaskedOptions
->(props: MaskInputProps<T>) {
-    // Destruct
-    const {
-        defaultValue,
-        mask,
-        InputLabelProps = {},
-        InputProps = {},
-        onAccept,
-        onComplete,
-        readOnly,
-        search = false,
-        size = search ? MUGlobal.searchFieldSize : MUGlobal.inputFieldSize,
-        value,
-        variant = search
-            ? MUGlobal.searchFieldVariant
-            : MUGlobal.inputFieldVariant,
-        ...rest
-    } = props;
+export function MaskInput<T extends FactoryOpts = FactoryOpts>(
+  props: MaskInputProps<T>
+) {
+  // Destruct
+  const {
+    defaultValue,
+    mask,
+    InputLabelProps = {},
+    InputProps = {},
+    onAccept,
+    onComplete,
+    readOnly,
+    search = false,
+    size = search ? MUGlobal.searchFieldSize : MUGlobal.inputFieldSize,
+    value,
+    variant = search ? MUGlobal.searchFieldVariant : MUGlobal.inputFieldVariant,
+    ...rest
+  } = props;
 
-    const { ref, maskRef } = useIMask(mask, {
-        onAccept: (value, maskRef, event) => {
-            if (onAccept) onAccept(value, maskRef, event);
-        },
-        onComplete: (value, maskRef, event) => {
-            if (onComplete) onComplete(value, maskRef, event);
-        }
-    });
-    const localValue = defaultValue ?? value;
+  const { ref, maskRef } = useIMask(mask, {
+    onAccept: (value, maskRef, event) => {
+      if (onAccept) onAccept(value, maskRef, event);
+    },
+    onComplete: (value, maskRef, event) => {
+      if (onComplete) onComplete(value, maskRef, event);
+    }
+  });
+  const localValue = defaultValue ?? value;
 
-    // Shrink
-    InputLabelProps.shrink ??= search
-        ? MUGlobal.searchFieldShrink
-        : MUGlobal.inputFieldShrink;
+  // Shrink
+  InputLabelProps.shrink ??= search
+    ? MUGlobal.searchFieldShrink
+    : MUGlobal.inputFieldShrink;
 
-    // Read only
-    if (readOnly != null) InputProps.readOnly = readOnly;
-    InputProps.inputRef = ref;
+  // Read only
+  if (readOnly != null) InputProps.readOnly = readOnly;
+  InputProps.inputRef = ref;
 
-    React.useEffect(() => {
-        if (maskRef.current == null || localValue == null) return;
-        maskRef.current.value = String(localValue);
-        maskRef.current.updateValue();
-    }, [maskRef.current, localValue]);
+  React.useEffect(() => {
+    if (maskRef.current == null || localValue == null) return;
+    maskRef.current.value = String(localValue);
+    maskRef.current.updateValue();
+  }, [maskRef.current, localValue]);
 
-    // Layout
-    return (
-        <TextField
-            InputLabelProps={InputLabelProps}
-            InputProps={InputProps}
-            size={size}
-            variant={variant}
-            {...rest}
-        />
-    );
+  // Layout
+  return (
+    <TextField
+      InputLabelProps={InputLabelProps}
+      InputProps={InputProps}
+      size={size}
+      variant={variant}
+      {...rest}
+    />
+  );
 }