@etsoo/materialui 1.5.14 → 1.5.16

package/lib/cjs/ScrollerListEx.d.ts

@@ -27,9 +27,9 @@ export interface ScrollerListExInnerItemRendererProps<T> extends ListChildCompon
  * Extended ScrollerList ItemSize type
  * 1. Callback function
  * 2. Static sets
- * 3. Dynamic calculation
+ * 3. Dynamic left & right margin calculation
  */
-export type ScrollerListExItemSize = ((index: number) => [number, number] | [number, number, object]) | [number, number] | [number, object, boolean?];
+export type ScrollerListExItemSize = ((index: number) => [number, number] | [number, number, object]) | [number, number] | [number, object, number?];
 /**
  * Extended ScrollerList Props
  */

package/lib/cjs/ScrollerListEx.js

@@ -46,9 +46,10 @@ const createGridStyle = (alternatingColors, selectedColor) => {
     });
 };
 // Default margin
-const defaultMargin = (margin, isNarrow) => {
+// horizon: null means full horizontal margin, -1 means all half, >=0 means left/right
+const defaultMargin = (margin, horizon) => {
     const half = MUGlobal_1.MUGlobal.half(margin);
-    if (isNarrow == null) {
+    if (horizon == null) {
         const half = MUGlobal_1.MUGlobal.half(margin);
         return {
             marginLeft: margin,
@@ -57,10 +58,10 @@ const defaultMargin = (margin, isNarrow) => {
             marginBottom: half
         };
     }
-    if (isNarrow) {
+    if (horizon >= 0) {
         return {
-            marginLeft: 0,
-            marginRight: 0,
+            marginLeft: horizon,
+            marginRight: horizon,
             marginTop: half,
             marginBottom: half
         };
@@ -137,14 +138,10 @@ function ScrollerListEx(props) {
     const itemSizeResult = react_2.default.useMemo(() => {
         if (typeof itemSize === "function")
             return undefined;
-        const [size, spaces, isNarrow] = itemSize;
+        const [size, spaces, h] = itemSize;
         if (typeof spaces === "number")
             return [size, spaces, defaultMargin(MUGlobal_1.MUGlobal.pagePaddings, undefined)];
-        return [
-            size,
-            MUGlobal_1.MUGlobal.getSpace(spaces, theme),
-            defaultMargin(spaces, isNarrow)
-        ];
+        return [size, MUGlobal_1.MUGlobal.getSpace(spaces, theme), defaultMargin(spaces, h)];
     }, [itemSize]);
     // Calculate size
     const calculateItemSize = (index) => {

package/lib/cjs/SearchField.js

@@ -7,8 +7,8 @@ exports.SearchField = SearchField;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@etsoo/react");
 const react_2 = __importDefault(require("react"));
-const TextField_1 = __importDefault(require("@mui/material/TextField"));
 const MUGlobal_1 = require("./MUGlobal");
+const TextField_1 = __importDefault(require("@mui/material/TextField"));
 /**
  * Search field
  * @param props Props
@@ -16,13 +16,14 @@ const MUGlobal_1 = require("./MUGlobal");
  */
 function SearchField(props) {
     // Destruct
-    const { changeDelay, onChange, readOnly, slotProps = {}, size = MUGlobal_1.MUGlobal.searchFieldSize, variant = MUGlobal_1.MUGlobal.searchFieldVariant, minChars = 0, ...rest } = props;
+    const { changeDelay, InputLabelProps = {}, InputProps = {}, inputProps = {}, onChange, readOnly, size = MUGlobal_1.MUGlobal.searchFieldSize, variant = MUGlobal_1.MUGlobal.searchFieldVariant, minChars = 0, ...rest } = props;
     // Shrink
-    const defaultProps = {
-        input: { readOnly: readOnly },
-        inputLabel: { shrink: MUGlobal_1.MUGlobal.searchFieldShrink },
-        htmlInput: { "data-min-chars": minChars }
-    };
+    InputLabelProps.shrink ??= MUGlobal_1.MUGlobal.searchFieldShrink;
+    // Read only
+    if (readOnly != null)
+        InputProps.readOnly = readOnly;
+    // Min characters
+    inputProps["data-min-chars"] = minChars;
     const isMounted = react_2.default.useRef(true);
     const delayed = onChange != null && changeDelay != null && changeDelay >= 1
         ? (0, react_1.useDelayedExecutor)(onChange, changeDelay)
@@ -51,5 +52,5 @@ function SearchField(props) {
         };
     }, []);
     // Layout
-    return ((0, jsx_runtime_1.jsx)(TextField_1.default, { slotProps: Object.assign(slotProps, defaultProps), onChange: onChangeEx, size: size, variant: variant, ...rest }));
+    return ((0, jsx_runtime_1.jsx)(TextField_1.default, { InputLabelProps: InputLabelProps, InputProps: InputProps, inputProps: inputProps, onChange: onChangeEx, size: size, variant: variant, ...rest }));
 }

package/lib/mjs/ScrollerListEx.d.ts

@@ -27,9 +27,9 @@ export interface ScrollerListExInnerItemRendererProps<T> extends ListChildCompon
  * Extended ScrollerList ItemSize type
  * 1. Callback function
  * 2. Static sets
- * 3. Dynamic calculation
+ * 3. Dynamic left & right margin calculation
  */
-export type ScrollerListExItemSize = ((index: number) => [number, number] | [number, number, object]) | [number, number] | [number, object, boolean?];
+export type ScrollerListExItemSize = ((index: number) => [number, number] | [number, number, object]) | [number, number] | [number, object, number?];
 /**
  * Extended ScrollerList Props
  */

package/lib/mjs/ScrollerListEx.js

@@ -40,9 +40,10 @@ const createGridStyle = (alternatingColors, selectedColor) => {
     });
 };
 // Default margin
-const defaultMargin = (margin, isNarrow) => {
+// horizon: null means full horizontal margin, -1 means all half, >=0 means left/right
+const defaultMargin = (margin, horizon) => {
     const half = MUGlobal.half(margin);
-    if (isNarrow == null) {
+    if (horizon == null) {
         const half = MUGlobal.half(margin);
         return {
             marginLeft: margin,
@@ -51,10 +52,10 @@ const defaultMargin = (margin, isNarrow) => {
             marginBottom: half
         };
     }
-    if (isNarrow) {
+    if (horizon >= 0) {
         return {
-            marginLeft: 0,
-            marginRight: 0,
+            marginLeft: horizon,
+            marginRight: horizon,
             marginTop: half,
             marginBottom: half
         };
@@ -131,14 +132,10 @@ export function ScrollerListEx(props) {
     const itemSizeResult = React.useMemo(() => {
         if (typeof itemSize === "function")
             return undefined;
-        const [size, spaces, isNarrow] = itemSize;
+        const [size, spaces, h] = itemSize;
         if (typeof spaces === "number")
             return [size, spaces, defaultMargin(MUGlobal.pagePaddings, undefined)];
-        return [
-            size,
-            MUGlobal.getSpace(spaces, theme),
-            defaultMargin(spaces, isNarrow)
-        ];
+        return [size, MUGlobal.getSpace(spaces, theme), defaultMargin(spaces, h)];
     }, [itemSize]);
     // Calculate size
     const calculateItemSize = (index) => {

package/lib/mjs/SearchField.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useDelayedExecutor } from "@etsoo/react";
 import React from "react";
-import TextField from "@mui/material/TextField";
 import { MUGlobal } from "./MUGlobal";
+import TextField from "@mui/material/TextField";
 /**
  * Search field
  * @param props Props
@@ -10,13 +10,14 @@ import { MUGlobal } from "./MUGlobal";
  */
 export function SearchField(props) {
     // Destruct
-    const { changeDelay, onChange, readOnly, slotProps = {}, size = MUGlobal.searchFieldSize, variant = MUGlobal.searchFieldVariant, minChars = 0, ...rest } = props;
+    const { changeDelay, InputLabelProps = {}, InputProps = {}, inputProps = {}, onChange, readOnly, size = MUGlobal.searchFieldSize, variant = MUGlobal.searchFieldVariant, minChars = 0, ...rest } = props;
     // Shrink
-    const defaultProps = {
-        input: { readOnly: readOnly },
-        inputLabel: { shrink: MUGlobal.searchFieldShrink },
-        htmlInput: { "data-min-chars": minChars }
-    };
+    InputLabelProps.shrink ??= MUGlobal.searchFieldShrink;
+    // Read only
+    if (readOnly != null)
+        InputProps.readOnly = readOnly;
+    // Min characters
+    inputProps["data-min-chars"] = minChars;
     const isMounted = React.useRef(true);
     const delayed = onChange != null && changeDelay != null && changeDelay >= 1
         ? useDelayedExecutor(onChange, changeDelay)
@@ -45,5 +46,5 @@ export function SearchField(props) {
         };
     }, []);
     // Layout
-    return (_jsx(TextField, { slotProps: Object.assign(slotProps, defaultProps), onChange: onChangeEx, size: size, variant: variant, ...rest }));
+    return (_jsx(TextField, { InputLabelProps: InputLabelProps, InputProps: InputProps, inputProps: inputProps, onChange: onChangeEx, size: size, variant: variant, ...rest }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.5.14",
+  "version": "1.5.16",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -82,7 +82,7 @@
     "@types/react-window": "^1.8.8",
     "@vitejs/plugin-react": "^4.3.4",
     "jsdom": "^26.0.0",
-    "typescript": "^5.8.2",
+    "typescript": "^5.8.3",
     "vitest": "^3.1.1"
   }
 }

package/src/ScrollerListEx.tsx

@@ -47,10 +47,11 @@ const createGridStyle = (
 };
 
 // Default margin
-const defaultMargin = (margin: object, isNarrow?: boolean) => {
+// horizon: null means full horizontal margin, -1 means all half, >=0 means left/right
+const defaultMargin = (margin: object, horizon?: number) => {
   const half = MUGlobal.half(margin);
 
-  if (isNarrow == null) {
+  if (horizon == null) {
     const half = MUGlobal.half(margin);
     return {
       marginLeft: margin,
@@ -60,10 +61,10 @@ const defaultMargin = (margin: object, isNarrow?: boolean) => {
     };
   }
 
-  if (isNarrow) {
+  if (horizon >= 0) {
     return {
-      marginLeft: 0,
-      marginRight: 0,
+      marginLeft: horizon,
+      marginRight: horizon,
       marginTop: half,
       marginBottom: half
     };
@@ -107,12 +108,12 @@ export interface ScrollerListExInnerItemRendererProps<T>
  * Extended ScrollerList ItemSize type
  * 1. Callback function
  * 2. Static sets
- * 3. Dynamic calculation
+ * 3. Dynamic left & right margin calculation
  */
 export type ScrollerListExItemSize =
   | ((index: number) => [number, number] | [number, number, object])
   | [number, number]
-  | [number, object, boolean?];
+  | [number, object, number?];
 
 /**
  * Extended ScrollerList Props
@@ -321,15 +322,11 @@ export function ScrollerListEx<T extends object>(
     | [number, number, object]
     | undefined => {
     if (typeof itemSize === "function") return undefined;
-    const [size, spaces, isNarrow] = itemSize;
+    const [size, spaces, h] = itemSize;
     if (typeof spaces === "number")
       return [size, spaces, defaultMargin(MUGlobal.pagePaddings, undefined)];
 
-    return [
-      size,
-      MUGlobal.getSpace(spaces, theme),
-      defaultMargin(spaces, isNarrow)
-    ];
+    return [size, MUGlobal.getSpace(spaces, theme), defaultMargin(spaces, h)];
   }, [itemSize]);
 
   // Calculate size

package/src/SearchField.tsx

@@ -1,7 +1,7 @@
 import { useDelayedExecutor } from "@etsoo/react";
 import React from "react";
-import TextField, { TextFieldProps } from "@mui/material/TextField";
 import { MUGlobal } from "./MUGlobal";
+import TextField, { TextFieldProps } from "@mui/material/TextField";
 
 /**
  * Search field props
@@ -32,9 +32,11 @@ export function SearchField(props: SearchFieldProps) {
   // Destruct
   const {
     changeDelay,
+    InputLabelProps = {},
+    InputProps = {},
+    inputProps = {},
     onChange,
     readOnly,
-    slotProps = {},
     size = MUGlobal.searchFieldSize,
     variant = MUGlobal.searchFieldVariant,
     minChars = 0,
@@ -42,11 +44,13 @@ export function SearchField(props: SearchFieldProps) {
   } = props;
 
   // Shrink
-  const defaultProps: typeof slotProps = {
-    input: { readOnly: readOnly },
-    inputLabel: { shrink: MUGlobal.searchFieldShrink },
-    htmlInput: { "data-min-chars": minChars }
-  };
+  InputLabelProps.shrink ??= MUGlobal.searchFieldShrink;
+
+  // Read only
+  if (readOnly != null) InputProps.readOnly = readOnly;
+
+  // Min characters
+  inputProps["data-min-chars"] = minChars;
 
   const isMounted = React.useRef(true);
   const delayed =
@@ -86,7 +90,9 @@ export function SearchField(props: SearchFieldProps) {
   // Layout
   return (
     <TextField
-      slotProps={Object.assign(slotProps, defaultProps)}
+      InputLabelProps={InputLabelProps}
+      InputProps={InputProps}
+      inputProps={inputProps}
       onChange={onChangeEx}
       size={size}
       variant={variant}