@etsoo/materialui 1.1.24 → 1.1.26

package/lib/OptionGroup.d.ts

@@ -67,6 +67,10 @@ export type OptionGroupProps<T extends object, D extends DataTypes.Keys<T>, L ex
      * Item size
      */
     itemSize?: "small" | "medium";
+    /**
+     * Item height in px
+     */
+    itemHeight?: number;
     /**
      * Helper text
      */

package/lib/OptionGroup.js

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

package/lib/pages/EditPage.d.ts

@@ -1,9 +1,9 @@
-import { FormEventHandler } from 'react';
-import { CommonPageProps } from './CommonPageProps';
+import React, { FormEventHandler } from "react";
+import { CommonPageProps } from "./CommonPageProps";
 /**
  * Add / Edit page props
  */
-export interface EditPageProps extends Omit<CommonPageProps, 'onSubmit'> {
+export interface EditPageProps extends Omit<CommonPageProps, "onSubmit"> {
     /**
      * Is editing
      */
@@ -25,6 +25,10 @@ export interface EditPageProps extends Omit<CommonPageProps, 'onSubmit'> {
      * @default true
      */
     supportBack?: boolean;
+    /**
+     * Top part
+     */
+    topPart?: React.ReactNode;
 }
 /**
  * Add / Edit page

package/lib/pages/EditPage.js

@@ -1,25 +1,26 @@
-import { Button, Grid } from '@mui/material';
-import React from 'react';
-import { MUGlobal } from '../MUGlobal';
-import { CommonPage, CommonPageScrollContainer } from './CommonPage';
-import SaveIcon from '@mui/icons-material/Save';
-import DeleteIcon from '@mui/icons-material/Delete';
-import { BackButton } from '../BackButton';
-import { Labels } from '../app/Labels';
+import { Button, Grid } from "@mui/material";
+import React from "react";
+import { MUGlobal } from "../MUGlobal";
+import { CommonPage, CommonPageScrollContainer } from "./CommonPage";
+import SaveIcon from "@mui/icons-material/Save";
+import DeleteIcon from "@mui/icons-material/Delete";
+import { BackButton } from "../BackButton";
+import { Labels } from "../app/Labels";
 /**
  * Add / Edit page
  * @param props Props
  */
 export function EditPage(props) {
     // Destruct
-    const { children, isEditing, onDelete, onSubmit, paddings = MUGlobal.pagePaddings, scrollContainer = CommonPageScrollContainer, supportBack = true, submitDisabled = false, ...rest } = props;
+    const { children, isEditing, onDelete, onSubmit, paddings = MUGlobal.pagePaddings, scrollContainer = CommonPageScrollContainer, supportBack = true, submitDisabled = false, topPart, ...rest } = props;
     // Labels
     const labels = Labels.CommonPage;
     return (React.createElement(CommonPage, { paddings: paddings, scrollContainer: scrollContainer, ...rest },
+        topPart,
         React.createElement("form", { onSubmit: onSubmit },
             React.createElement(Grid, { container: true, justifyContent: "left", spacing: paddings, paddingTop: 1 }, children),
             React.createElement(Grid, { container: true, position: "sticky", display: "flex", gap: paddings, sx: {
-                    top: 'auto',
+                    top: "auto",
                     bottom: (theme) => MUGlobal.updateWithTheme(paddings, theme.spacing),
                     paddingTop: paddings
                 } },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.1.24",
+  "version": "1.1.26",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -55,7 +55,7 @@
     "@etsoo/react": "^1.6.44",
     "@etsoo/shared": "^1.1.88",
     "@mui/icons-material": "^5.11.0",
-    "@mui/material": "^5.11.6",
+    "@mui/material": "^5.11.7",
     "@types/pica": "^9.0.1",
     "@types/pulltorefreshjs": "^0.1.5",
     "@types/react": "^18.0.27",
@@ -84,10 +84,10 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@types/jest": "^29.4.0",
-    "@typescript-eslint/eslint-plugin": "^5.49.0",
-    "@typescript-eslint/parser": "^5.49.0",
+    "@typescript-eslint/eslint-plugin": "^5.50.0",
+    "@typescript-eslint/parser": "^5.50.0",
     "jest": "^29.4.1",
     "jest-environment-jsdom": "^29.4.1",
-    "typescript": "^4.9.4"
+    "typescript": "^4.9.5"
   }
 }

package/src/OptionGroup.tsx

@@ -105,6 +105,11 @@ export type OptionGroupProps<
    */
   itemSize?: "small" | "medium";
 
+  /**
+   * Item height in px
+   */
+  itemHeight?: number;
+
   /**
    * Helper text
    */
@@ -136,6 +141,7 @@ export function OptionGroup<
     readOnly,
     row,
     itemSize,
+    itemHeight = row ? 56 : 42,
     helperText,
     variant,
     required,
@@ -146,6 +152,9 @@ export function OptionGroup<
   // Theme
   const theme = useTheme();
 
+  // Outlined
+  const outlined = variant === "outlined";
+
   // Get option value
   // D type should be the source id type
   const getOptionValue = (option: T): T[D] | null => {
@@ -276,18 +285,13 @@ export function OptionGroup<
   // Layout
   return (
     <React.Fragment>
-      <FormControl
-        component="fieldset"
-        fullWidth={fullWidth}
-        sx={{ height: "56px" }} // absolute layout inside relative layout needed
-        {...rest}
-      >
+      <FormControl component="fieldset" fullWidth={fullWidth} {...rest}>
         {label && (
           <InputLabel required={required} variant={variant} shrink>
             {label}
           </InputLabel>
         )}
-        {variant === "outlined" && (
+        {outlined && (
           <NotchedOutline
             label={label && required ? label + " *" : label}
             notched
@@ -301,7 +305,18 @@ export function OptionGroup<
             }}
           />
         )}
-        <Box paddingLeft={2} paddingY="7px" position="absolute">
+        <Box
+          paddingLeft={2}
+          paddingY="7px"
+          position={outlined ? "absolute" : undefined}
+          height={
+            outlined
+              ? row
+                ? `${itemHeight}px`
+                : `${options.length * itemHeight + 14}px`
+              : undefined
+          }
+        >
           {group}
         </Box>
       </FormControl>

package/src/pages/EditPage.tsx

@@ -1,42 +1,47 @@
-import { Button, Grid } from '@mui/material';
-import React, { FormEventHandler } from 'react';
-import { MUGlobal } from '../MUGlobal';
-import { CommonPage, CommonPageScrollContainer } from './CommonPage';
-import { CommonPageProps } from './CommonPageProps';
-import SaveIcon from '@mui/icons-material/Save';
-import DeleteIcon from '@mui/icons-material/Delete';
-import { BackButton } from '../BackButton';
-import { Labels } from '../app/Labels';
+import { Button, Grid } from "@mui/material";
+import React, { FormEventHandler } from "react";
+import { MUGlobal } from "../MUGlobal";
+import { CommonPage, CommonPageScrollContainer } from "./CommonPage";
+import { CommonPageProps } from "./CommonPageProps";
+import SaveIcon from "@mui/icons-material/Save";
+import DeleteIcon from "@mui/icons-material/Delete";
+import { BackButton } from "../BackButton";
+import { Labels } from "../app/Labels";
 
 /**
  * Add / Edit page props
  */
-export interface EditPageProps extends Omit<CommonPageProps, 'onSubmit'> {
-    /**
-     * Is editing
-     */
-    isEditing?: boolean;
+export interface EditPageProps extends Omit<CommonPageProps, "onSubmit"> {
+  /**
+   * Is editing
+   */
+  isEditing?: boolean;
 
-    /**
-     * On form submit
-     */
-    onSubmit?: FormEventHandler<HTMLFormElement>;
+  /**
+   * On form submit
+   */
+  onSubmit?: FormEventHandler<HTMLFormElement>;
 
-    /**
-     * On delete callback
-     */
-    onDelete?: () => Promise<void> | void;
+  /**
+   * On delete callback
+   */
+  onDelete?: () => Promise<void> | void;
 
-    /**
-     * Submit button disabled or not
-     */
-    submitDisabled?: boolean;
+  /**
+   * Submit button disabled or not
+   */
+  submitDisabled?: boolean;
 
-    /**
-     * Support back click
-     * @default true
-     */
-    supportBack?: boolean;
+  /**
+   * Support back click
+   * @default true
+   */
+  supportBack?: boolean;
+
+  /**
+   * Top part
+   */
+  topPart?: React.ReactNode;
 }
 
 /**
@@ -44,71 +49,64 @@ export interface EditPageProps extends Omit<CommonPageProps, 'onSubmit'> {
  * @param props Props
  */
 export function EditPage(props: EditPageProps) {
-    // Destruct
-    const {
-        children,
-        isEditing,
-        onDelete,
-        onSubmit,
-        paddings = MUGlobal.pagePaddings,
-        scrollContainer = CommonPageScrollContainer,
-        supportBack = true,
-        submitDisabled = false,
-        ...rest
-    } = props;
+  // Destruct
+  const {
+    children,
+    isEditing,
+    onDelete,
+    onSubmit,
+    paddings = MUGlobal.pagePaddings,
+    scrollContainer = CommonPageScrollContainer,
+    supportBack = true,
+    submitDisabled = false,
+    topPart,
+    ...rest
+  } = props;
 
-    // Labels
-    const labels = Labels.CommonPage;
+  // Labels
+  const labels = Labels.CommonPage;
 
-    return (
-        <CommonPage
-            paddings={paddings}
-            scrollContainer={scrollContainer}
-            {...rest}
+  return (
+    <CommonPage paddings={paddings} scrollContainer={scrollContainer} {...rest}>
+      {topPart}
+      <form onSubmit={onSubmit}>
+        <Grid container justifyContent="left" spacing={paddings} paddingTop={1}>
+          {children}
+        </Grid>
+        <Grid
+          container
+          position="sticky"
+          display="flex"
+          gap={paddings}
+          sx={{
+            top: "auto",
+            bottom: (theme) =>
+              MUGlobal.updateWithTheme(paddings, theme.spacing),
+            paddingTop: paddings
+          }}
         >
-            <form onSubmit={onSubmit}>
-                <Grid
-                    container
-                    justifyContent="left"
-                    spacing={paddings}
-                    paddingTop={1}
-                >
-                    {children}
-                </Grid>
-                <Grid
-                    container
-                    position="sticky"
-                    display="flex"
-                    gap={paddings}
-                    sx={{
-                        top: 'auto',
-                        bottom: (theme) =>
-                            MUGlobal.updateWithTheme(paddings, theme.spacing),
-                        paddingTop: paddings
-                    }}
-                >
-                    {isEditing && onDelete && (
-                        <Button
-                            color="primary"
-                            variant="outlined"
-                            onClick={() => onDelete()}
-                            startIcon={<DeleteIcon color="warning" />}
-                        >
-                            {labels.delete}
-                        </Button>
-                    )}
-                    <Button
-                        variant="contained"
-                        type="submit"
-                        startIcon={<SaveIcon />}
-                        sx={{ flexGrow: 1 }}
-                        disabled={submitDisabled}
-                    >
-                        {labels.save}
-                    </Button>
-                    {supportBack && <BackButton title={labels.back} />}
-                </Grid>
-            </form>
-        </CommonPage>
-    );
+          {isEditing && onDelete && (
+            <Button
+              color="primary"
+              variant="outlined"
+              onClick={() => onDelete()}
+              startIcon={<DeleteIcon color="warning" />}
+            >
+              {labels.delete}
+            </Button>
+          )}
+          <Button
+            variant="contained"
+            type="submit"
+            startIcon={<SaveIcon />}
+            sx={{ flexGrow: 1 }}
+            disabled={submitDisabled}
+          >
+            {labels.save}
+          </Button>
+          {supportBack && <BackButton title={labels.back} />}
+        </Grid>
+      </form>
+    </CommonPage>
+  );
 }