@etsoo/materialui 1.5.5 → 1.5.7

package/lib/cjs/TagList.js

@@ -20,7 +20,7 @@ function TagList(props) {
     const { noOptions, loading: loadingLabel, more = "More", open: openDefault } = app?.getLabels("noOptions", "loading", "more", "open") ?? {};
     const moreLabel = more + "...";
     // Destruct
-    const { renderOption = (props, option, { selected }) => ((0, jsx_runtime_1.jsxs)("li", { ...props, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { icon: (0, jsx_runtime_1.jsx)(CheckBoxOutlineBlank_1.default, { fontSize: "small" }), checkedIcon: (0, jsx_runtime_1.jsx)(CheckBox_1.default, { fontSize: "small" }), style: { marginRight: 8 }, checked: selected }), option] })), renderTags = (value, getTagProps) => value.map((option, index) => {
+    const { renderOption = ({ key, ...props }, option, { selected }) => ((0, jsx_runtime_1.jsxs)("li", { ...props, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { icon: (0, jsx_runtime_1.jsx)(CheckBoxOutlineBlank_1.default, { fontSize: "small" }), checkedIcon: (0, jsx_runtime_1.jsx)(CheckBox_1.default, { fontSize: "small" }), style: { marginRight: 8 }, checked: selected }), option] }, key)), renderTags = (value, getTagProps) => value.map((option, index) => {
         const { key, ...rest } = getTagProps({ index });
         return (0, jsx_runtime_1.jsx)(Chip_1.default, { variant: "outlined", label: option, ...rest }, key);
     }), noOptionsText = noOptions, loadingText = loadingLabel, openText = openDefault, loadData, maxItems = 16, disableCloseOnSelect = true, openOnFocus = true, label, inputProps, onChange, value, ...rest } = props;

package/lib/cjs/TagListPro.js

@@ -22,7 +22,7 @@ function TagListPro(props) {
     const moreLabel = more + "...";
     const getLabel = (item) => shared_1.DataTypes.getListItemLabel(item);
     // Destruct
-    const { renderOption = (props, option, { selected }) => ((0, jsx_runtime_1.jsx)("li", { ...props, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { icon: (0, jsx_runtime_1.jsx)(CheckBoxOutlineBlank_1.default, { fontSize: "small" }), checkedIcon: (0, jsx_runtime_1.jsx)(CheckBox_1.default, { fontSize: "small" }), style: { marginRight: 8 }, checked: selected }), getLabel(option)] }) })), renderTags = (value, getTagProps) => value.map((option, index) => {
+    const { renderOption = ({ key, ...props }, option, { selected }) => ((0, jsx_runtime_1.jsx)("li", { ...props, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { icon: (0, jsx_runtime_1.jsx)(CheckBoxOutlineBlank_1.default, { fontSize: "small" }), checkedIcon: (0, jsx_runtime_1.jsx)(CheckBox_1.default, { fontSize: "small" }), style: { marginRight: 8 }, checked: selected }), getLabel(option)] }) }, key)), renderTags = (value, getTagProps) => value.map((option, index) => {
         const { key, ...rest } = getTagProps({ index });
         return ((0, jsx_runtime_1.jsx)(Chip_1.default, { variant: "outlined", label: getLabel(option), ...rest }, key));
     }), noOptionsText = noOptions, loadingText = loadingLabel, openText = openDefault, loadData, maxItems = 16, disableCloseOnSelect = true, openOnFocus = true, label, inputProps, onChange, value, ...rest } = props;

package/lib/cjs/pages/EditPage.d.ts

@@ -38,6 +38,10 @@ export interface EditPageProps extends Omit<CommonPageProps, "onSubmit"> {
      * Operation message handler
      */
     operationMessageHandler?: OperationMessageHandlerAll;
+    /**
+     * Grid spacing
+     */
+    gridSpacing?: number | Record<string, string | number>;
 }
 /**
  * Add / Edit page

package/lib/cjs/pages/EditPage.js

@@ -20,12 +20,12 @@ const Button_1 = __importDefault(require("@mui/material/Button"));
  */
 function EditPage(props) {
     // Destruct
-    const { children, isEditing, onDelete, onSubmit, paddings = MUGlobal_1.MUGlobal.pagePaddings, scrollContainer = globalThis, supportBack = true, submitDisabled = false, bottomPart, topPart, operationMessageHandler, ...rest } = props;
+    const { children, isEditing, onDelete, onSubmit, paddings = MUGlobal_1.MUGlobal.pagePaddings, scrollContainer = globalThis, supportBack = true, submitDisabled = false, bottomPart, topPart, operationMessageHandler, gridSpacing = MUGlobal_1.MUGlobal.pagePaddings, ...rest } = props;
     // Labels
     const labels = Labels_1.Labels.CommonPage;
-    return ((0, jsx_runtime_1.jsxs)(CommonPage_1.CommonPage, { paddings: paddings, scrollContainer: scrollContainer, ...rest, children: [operationMessageHandler && ((0, jsx_runtime_1.jsx)(OperationMessageContainer_1.OperationMessageContainer, { handler: operationMessageHandler })), topPart, (0, jsx_runtime_1.jsxs)("form", { onSubmit: onSubmit, children: [(0, jsx_runtime_1.jsx)(Grid_1.default, { container: true, justifyContent: "left", spacing: paddings, paddingTop: 1, children: children }), (0, jsx_runtime_1.jsxs)(Grid_1.default, { container: true, position: "sticky", display: "flex", gap: paddings, sx: {
+    return ((0, jsx_runtime_1.jsxs)(CommonPage_1.CommonPage, { paddings: paddings, scrollContainer: scrollContainer, ...rest, children: [operationMessageHandler && ((0, jsx_runtime_1.jsx)(OperationMessageContainer_1.OperationMessageContainer, { handler: operationMessageHandler })), topPart, (0, jsx_runtime_1.jsxs)("form", { onSubmit: onSubmit, children: [(0, jsx_runtime_1.jsx)(Grid_1.default, { container: true, justifyContent: "left", spacing: gridSpacing, paddingTop: 1, children: children }), (0, jsx_runtime_1.jsxs)(Grid_1.default, { container: true, position: "sticky", display: "flex", gap: gridSpacing, sx: {
                             top: "auto",
-                            bottom: (theme) => MUGlobal_1.MUGlobal.updateWithTheme(paddings, theme.spacing),
-                            paddingTop: paddings
+                            bottom: (theme) => MUGlobal_1.MUGlobal.updateWithTheme(gridSpacing, theme.spacing),
+                            paddingTop: gridSpacing
                         }, children: [isEditing && onDelete && ((0, jsx_runtime_1.jsx)(Button_1.default, { color: "primary", variant: "outlined", onClick: () => onDelete(), startIcon: (0, jsx_runtime_1.jsx)(Delete_1.default, { color: "warning" }), children: labels.delete })), (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "contained", type: "submit", startIcon: (0, jsx_runtime_1.jsx)(Save_1.default, {}), sx: { flexGrow: 1 }, disabled: submitDisabled, children: labels.save }), supportBack && (0, jsx_runtime_1.jsx)(BackButton_1.BackButton, { title: labels.back })] })] }), bottomPart] }));
 }

package/lib/mjs/TagList.js

@@ -14,7 +14,7 @@ export function TagList(props) {
     const { noOptions, loading: loadingLabel, more = "More", open: openDefault } = app?.getLabels("noOptions", "loading", "more", "open") ?? {};
     const moreLabel = more + "...";
     // Destruct
-    const { renderOption = (props, option, { selected }) => (_jsxs("li", { ...props, children: [_jsx(Checkbox, { icon: _jsx(CheckBoxOutlineBlankIcon, { fontSize: "small" }), checkedIcon: _jsx(CheckBoxIcon, { fontSize: "small" }), style: { marginRight: 8 }, checked: selected }), option] })), renderTags = (value, getTagProps) => value.map((option, index) => {
+    const { renderOption = ({ key, ...props }, option, { selected }) => (_jsxs("li", { ...props, children: [_jsx(Checkbox, { icon: _jsx(CheckBoxOutlineBlankIcon, { fontSize: "small" }), checkedIcon: _jsx(CheckBoxIcon, { fontSize: "small" }), style: { marginRight: 8 }, checked: selected }), option] }, key)), renderTags = (value, getTagProps) => value.map((option, index) => {
         const { key, ...rest } = getTagProps({ index });
         return _jsx(Chip, { variant: "outlined", label: option, ...rest }, key);
     }), noOptionsText = noOptions, loadingText = loadingLabel, openText = openDefault, loadData, maxItems = 16, disableCloseOnSelect = true, openOnFocus = true, label, inputProps, onChange, value, ...rest } = props;

package/lib/mjs/TagListPro.js

@@ -16,7 +16,7 @@ export function TagListPro(props) {
     const moreLabel = more + "...";
     const getLabel = (item) => DataTypes.getListItemLabel(item);
     // Destruct
-    const { renderOption = (props, option, { selected }) => (_jsx("li", { ...props, children: _jsxs(_Fragment, { children: [_jsx(Checkbox, { icon: _jsx(CheckBoxOutlineBlankIcon, { fontSize: "small" }), checkedIcon: _jsx(CheckBoxIcon, { fontSize: "small" }), style: { marginRight: 8 }, checked: selected }), getLabel(option)] }) })), renderTags = (value, getTagProps) => value.map((option, index) => {
+    const { renderOption = ({ key, ...props }, option, { selected }) => (_jsx("li", { ...props, children: _jsxs(_Fragment, { children: [_jsx(Checkbox, { icon: _jsx(CheckBoxOutlineBlankIcon, { fontSize: "small" }), checkedIcon: _jsx(CheckBoxIcon, { fontSize: "small" }), style: { marginRight: 8 }, checked: selected }), getLabel(option)] }) }, key)), renderTags = (value, getTagProps) => value.map((option, index) => {
         const { key, ...rest } = getTagProps({ index });
         return (_jsx(Chip, { variant: "outlined", label: getLabel(option), ...rest }, key));
     }), noOptionsText = noOptions, loadingText = loadingLabel, openText = openDefault, loadData, maxItems = 16, disableCloseOnSelect = true, openOnFocus = true, label, inputProps, onChange, value, ...rest } = props;

package/lib/mjs/pages/EditPage.d.ts

@@ -38,6 +38,10 @@ export interface EditPageProps extends Omit<CommonPageProps, "onSubmit"> {
      * Operation message handler
      */
     operationMessageHandler?: OperationMessageHandlerAll;
+    /**
+     * Grid spacing
+     */
+    gridSpacing?: number | Record<string, string | number>;
 }
 /**
  * Add / Edit page

package/lib/mjs/pages/EditPage.js

@@ -14,12 +14,12 @@ import Button from "@mui/material/Button";
  */
 export function EditPage(props) {
     // Destruct
-    const { children, isEditing, onDelete, onSubmit, paddings = MUGlobal.pagePaddings, scrollContainer = globalThis, supportBack = true, submitDisabled = false, bottomPart, topPart, operationMessageHandler, ...rest } = props;
+    const { children, isEditing, onDelete, onSubmit, paddings = MUGlobal.pagePaddings, scrollContainer = globalThis, supportBack = true, submitDisabled = false, bottomPart, topPart, operationMessageHandler, gridSpacing = MUGlobal.pagePaddings, ...rest } = props;
     // Labels
     const labels = Labels.CommonPage;
-    return (_jsxs(CommonPage, { paddings: paddings, scrollContainer: scrollContainer, ...rest, children: [operationMessageHandler && (_jsx(OperationMessageContainer, { handler: operationMessageHandler })), topPart, _jsxs("form", { onSubmit: onSubmit, children: [_jsx(Grid, { container: true, justifyContent: "left", spacing: paddings, paddingTop: 1, children: children }), _jsxs(Grid, { container: true, position: "sticky", display: "flex", gap: paddings, sx: {
+    return (_jsxs(CommonPage, { paddings: paddings, scrollContainer: scrollContainer, ...rest, children: [operationMessageHandler && (_jsx(OperationMessageContainer, { handler: operationMessageHandler })), topPart, _jsxs("form", { onSubmit: onSubmit, children: [_jsx(Grid, { container: true, justifyContent: "left", spacing: gridSpacing, paddingTop: 1, children: children }), _jsxs(Grid, { container: true, position: "sticky", display: "flex", gap: gridSpacing, sx: {
                             top: "auto",
-                            bottom: (theme) => MUGlobal.updateWithTheme(paddings, theme.spacing),
-                            paddingTop: paddings
+                            bottom: (theme) => MUGlobal.updateWithTheme(gridSpacing, theme.spacing),
+                            paddingTop: gridSpacing
                         }, children: [isEditing && onDelete && (_jsx(Button, { color: "primary", variant: "outlined", onClick: () => onDelete(), startIcon: _jsx(DeleteIcon, { color: "warning" }), children: labels.delete })), _jsx(Button, { variant: "contained", type: "submit", startIcon: _jsx(SaveIcon, {}), sx: { flexGrow: 1 }, disabled: submitDisabled, children: labels.save }), supportBack && _jsx(BackButton, { title: labels.back })] })] }), bottomPart] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.5.5",
+  "version": "1.5.7",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",

package/src/TagList.tsx

@@ -51,8 +51,8 @@ export function TagList(props: TagListProps) {
 
   // Destruct
   const {
-    renderOption = (props, option, { selected }) => (
-      <li {...props}>
+    renderOption = ({ key, ...props }, option, { selected }) => (
+      <li key={key} {...props}>
         <Checkbox
           icon={<CheckBoxOutlineBlankIcon fontSize="small" />}
           checkedIcon={<CheckBoxIcon fontSize="small" />}

package/src/TagListPro.tsx

@@ -56,8 +56,8 @@ export function TagListPro<D extends ListType2 = ListType2>(
 
   // Destruct
   const {
-    renderOption = (props, option, { selected }) => (
-      <li {...props}>
+    renderOption = ({ key, ...props }, option, { selected }) => (
+      <li key={key} {...props}>
         <>
           <Checkbox
             icon={<CheckBoxOutlineBlankIcon fontSize="small" />}

package/src/pages/EditPage.tsx

@@ -54,6 +54,11 @@ export interface EditPageProps extends Omit<CommonPageProps, "onSubmit"> {
    * Operation message handler
    */
   operationMessageHandler?: OperationMessageHandlerAll;
+
+  /**
+   * Grid spacing
+   */
+  gridSpacing?: number | Record<string, string | number>;
 }
 
 /**
@@ -74,6 +79,7 @@ export function EditPage(props: EditPageProps) {
     bottomPart,
     topPart,
     operationMessageHandler,
+    gridSpacing = MUGlobal.pagePaddings,
     ...rest
   } = props;
 
@@ -87,19 +93,24 @@ export function EditPage(props: EditPageProps) {
       )}
       {topPart}
       <form onSubmit={onSubmit}>
-        <Grid container justifyContent="left" spacing={paddings} paddingTop={1}>
+        <Grid
+          container
+          justifyContent="left"
+          spacing={gridSpacing}
+          paddingTop={1}
+        >
           {children}
         </Grid>
         <Grid
           container
           position="sticky"
           display="flex"
-          gap={paddings}
+          gap={gridSpacing}
           sx={{
             top: "auto",
             bottom: (theme) =>
-              MUGlobal.updateWithTheme(paddings, theme.spacing),
-            paddingTop: paddings
+              MUGlobal.updateWithTheme(gridSpacing, theme.spacing),
+            paddingTop: gridSpacing
           }}
         >
           {isEditing && onDelete && (