@etsoo/materialui 1.5.60 → 1.5.61

package/lib/cjs/ButtonPopupCheckbox.js

@@ -16,10 +16,10 @@ const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
 const FormControlLabel_1 = __importDefault(require("@mui/material/FormControlLabel"));
 const Checkbox_1 = __importDefault(require("@mui/material/Checkbox"));
 const TextField_1 = __importDefault(require("@mui/material/TextField"));
-const DnDList_1 = require("./DnDList");
 const FlexBox_1 = require("./FlexBox");
 const ReactApp_1 = require("./app/ReactApp");
 const FormLabel_1 = __importDefault(require("@mui/material/FormLabel"));
+const DnDList_1 = require("./DnDList");
 function ButtonPopupList(props) {
     // Destruct
     const { addSplitter = /\s*[,;]\s*/, value = [], items, labelField, labelFormatter, labels, onAdd, onValueChange } = props;
@@ -35,18 +35,18 @@ function ButtonPopupList(props) {
         // Set selected ids
         setSelectedIds([...value]);
     }, [value]);
-    return ((0, jsx_runtime_1.jsxs)(FlexBox_1.VBox, { gap: 2, children: [(0, jsx_runtime_1.jsx)(Grid_1.default, { container: true, spacing: 0, children: (0, jsx_runtime_1.jsx)(DnDList_1.DnDList, { items: items, labelField: labelField, onFormChange: (items) => {
-                        const ids = items
-                            .filter((item) => selectedIds.includes(item.id))
-                            .map((item) => item.id);
-                        onValueChange(ids);
-                    }, itemRenderer: (item, index, nodeRef, actionNodeRef) => ((0, jsx_runtime_1.jsxs)(Grid_1.default, { size: { xs: 12, md: 6, lg: 4 }, display: "flex", justifyContent: "flex-start", alignItems: "center", gap: 1, ...nodeRef, children: [(0, jsx_runtime_1.jsx)(IconButton_1.default, { style: { cursor: "move" }, size: "small", title: labels?.dragIndicator, ...actionNodeRef, children: (0, jsx_runtime_1.jsx)(DragIndicator_1.default, {}) }), (0, jsx_runtime_1.jsx)(FormControlLabel_1.default, { control: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { name: "item", value: item.id, checked: selectedIds.includes(item.id), onChange: (e) => {
-                                        const checked = e.target.checked;
-                                        const newIds = [
-                                            ...selectedIds.toggleItem(item.id, checked)
-                                        ];
-                                        setSelectedIds(newIds);
-                                    } }), label: `${index + 1}. ${labelFormatter(item)}` })] })), height: 200, mRef: dndRef }) }), onAdd && ((0, jsx_runtime_1.jsxs)(FlexBox_1.HBox, { gap: 1, children: [(0, jsx_runtime_1.jsx)(TextField_1.default, { variant: "outlined", label: labels?.more, fullWidth: true, inputRef: inputRef }), (0, jsx_runtime_1.jsx)(Button_1.default, { sx: { width: "120px" }, variant: "contained", startIcon: (0, jsx_runtime_1.jsx)(Add_1.default, {}), size: "small", onClick: async () => {
+    return ((0, jsx_runtime_1.jsxs)(FlexBox_1.VBox, { gap: 2, children: [(0, jsx_runtime_1.jsx)(DnDList_1.DnDList, { component: Grid_1.default, componentProps: { container: true, spacing: 0 }, items: items, labelField: labelField, onFormChange: (items) => {
+                    const ids = items
+                        .filter((item) => selectedIds.includes(item.id))
+                        .map((item) => item.id);
+                    onValueChange(ids);
+                }, itemRenderer: (item, index, nodeRef, actionNodeRef) => ((0, jsx_runtime_1.jsxs)(Grid_1.default, { size: { xs: 12, md: 6, lg: 4 }, display: "flex", justifyContent: "flex-start", alignItems: "center", gap: 1, ...nodeRef, children: [(0, jsx_runtime_1.jsx)(IconButton_1.default, { style: { cursor: "move" }, size: "small", title: labels?.dragIndicator, ...actionNodeRef, children: (0, jsx_runtime_1.jsx)(DragIndicator_1.default, {}) }), (0, jsx_runtime_1.jsx)(FormControlLabel_1.default, { control: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { name: "item", value: item.id, checked: selectedIds.includes(item.id), onChange: (e) => {
+                                    const checked = e.target.checked;
+                                    const newIds = [
+                                        ...selectedIds.toggleItem(item.id, checked)
+                                    ];
+                                    setSelectedIds(newIds);
+                                } }), label: `${index + 1}. ${labelFormatter(item)}` })] })), height: 200, mRef: dndRef }), onAdd && ((0, jsx_runtime_1.jsxs)(FlexBox_1.HBox, { gap: 1, children: [(0, jsx_runtime_1.jsx)(TextField_1.default, { variant: "outlined", label: labels?.more, fullWidth: true, inputRef: inputRef }), (0, jsx_runtime_1.jsx)(Button_1.default, { sx: { width: "120px" }, variant: "contained", startIcon: (0, jsx_runtime_1.jsx)(Add_1.default, {}), size: "small", onClick: async () => {
                             if (inputRef.current == null)
                                 return;
                             const input = inputRef.current.value.trim();

package/lib/cjs/DnDList.d.ts

@@ -50,7 +50,16 @@ export interface DnDListRef<D extends object> {
  */
 export interface DnDListPros<D extends {
     id: UniqueIdentifier;
-}> {
+}, E extends React.ElementType = React.ElementType> {
+    /**
+     * Component type to render the list into
+     * Default is React.Fragment
+     */
+    component?: E;
+    /**
+     * Component props
+     */
+    componentProps?: React.ComponentProps<E>;
     /**
      * Get list item style callback
      */
@@ -99,4 +108,4 @@ export interface DnDListPros<D extends {
  */
 export declare function DnDList<D extends {
     id: UniqueIdentifier;
-}>(props: DnDListPros<D>): import("react/jsx-runtime").JSX.Element;
+}, E extends React.ElementType = React.ElementType>(props: DnDListPros<D, E>): import("react/jsx-runtime").JSX.Element;

package/lib/cjs/DnDList.js

@@ -54,7 +54,8 @@ exports.DnDItemStyle = DnDItemStyle;
  */
 function DnDList(props) {
     // Destruct
-    const { height = 360, itemRenderer, labelField, mRef, sortingStrategy, onChange, onFormChange, onDragEnd } = props;
+    const { componentProps, height = 360, itemRenderer, labelField, mRef, sortingStrategy, onChange, onFormChange, onDragEnd } = props;
+    const Component = props.component || react_1.default.Fragment;
     // Theme
     const theme = (0, styles_1.useTheme)();
     // States
@@ -227,10 +228,10 @@ function DnDList(props) {
         }
         setActiveId(undefined);
     }
-    const children = ((0, jsx_runtime_1.jsx)(DndContextType, { onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: (0, jsx_runtime_1.jsx)(SortableContextType, { items: items, strategy: strategy, children: items.map((item, index) => {
-                const id = item.id;
-                return ((0, jsx_runtime_1.jsx)(SortableItem, { id: id, useSortableType: useSortableType, CSSType: CSSType, style: getItemStyle(index, id === activeId), itemRenderer: (nodeRef, actionNodeRef) => itemRenderer(item, index, nodeRef, actionNodeRef) }, id));
-            }) }) }));
+    const children = ((0, jsx_runtime_1.jsx)(DndContextType, { onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: (0, jsx_runtime_1.jsx)(SortableContextType, { items: items, strategy: strategy, children: (0, jsx_runtime_1.jsx)(Component, { ...componentProps, children: items.map((item, index) => {
+                    const id = item.id;
+                    return ((0, jsx_runtime_1.jsx)(SortableItem, { id: id, useSortableType: useSortableType, CSSType: CSSType, style: getItemStyle(index, id === activeId), itemRenderer: (nodeRef, actionNodeRef) => itemRenderer(item, index, nodeRef, actionNodeRef) }, id));
+                }) }) }) }));
     if (onFormChange) {
         return ((0, jsx_runtime_1.jsx)("div", { style: { width: "100%" }, ref: divRef, children: children }));
     }

package/lib/mjs/ButtonPopupCheckbox.js

@@ -10,10 +10,10 @@ import IconButton from "@mui/material/IconButton";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import Checkbox from "@mui/material/Checkbox";
 import TextField from "@mui/material/TextField";
-import { DnDList } from "./DnDList";
 import { HBox, VBox } from "./FlexBox";
 import { useRequiredAppContext } from "./app/ReactApp";
 import FormLabel from "@mui/material/FormLabel";
+import { DnDList } from "./DnDList";
 function ButtonPopupList(props) {
     // Destruct
     const { addSplitter = /\s*[,;]\s*/, value = [], items, labelField, labelFormatter, labels, onAdd, onValueChange } = props;
@@ -29,18 +29,18 @@ function ButtonPopupList(props) {
         // Set selected ids
         setSelectedIds([...value]);
     }, [value]);
-    return (_jsxs(VBox, { gap: 2, children: [_jsx(Grid, { container: true, spacing: 0, children: _jsx(DnDList, { items: items, labelField: labelField, onFormChange: (items) => {
-                        const ids = items
-                            .filter((item) => selectedIds.includes(item.id))
-                            .map((item) => item.id);
-                        onValueChange(ids);
-                    }, itemRenderer: (item, index, nodeRef, actionNodeRef) => (_jsxs(Grid, { size: { xs: 12, md: 6, lg: 4 }, display: "flex", justifyContent: "flex-start", alignItems: "center", gap: 1, ...nodeRef, children: [_jsx(IconButton, { style: { cursor: "move" }, size: "small", title: labels?.dragIndicator, ...actionNodeRef, children: _jsx(DragIndicatorIcon, {}) }), _jsx(FormControlLabel, { control: _jsx(Checkbox, { name: "item", value: item.id, checked: selectedIds.includes(item.id), onChange: (e) => {
-                                        const checked = e.target.checked;
-                                        const newIds = [
-                                            ...selectedIds.toggleItem(item.id, checked)
-                                        ];
-                                        setSelectedIds(newIds);
-                                    } }), label: `${index + 1}. ${labelFormatter(item)}` })] })), height: 200, mRef: dndRef }) }), onAdd && (_jsxs(HBox, { gap: 1, children: [_jsx(TextField, { variant: "outlined", label: labels?.more, fullWidth: true, inputRef: inputRef }), _jsx(Button, { sx: { width: "120px" }, variant: "contained", startIcon: _jsx(AddIcon, {}), size: "small", onClick: async () => {
+    return (_jsxs(VBox, { gap: 2, children: [_jsx(DnDList, { component: Grid, componentProps: { container: true, spacing: 0 }, items: items, labelField: labelField, onFormChange: (items) => {
+                    const ids = items
+                        .filter((item) => selectedIds.includes(item.id))
+                        .map((item) => item.id);
+                    onValueChange(ids);
+                }, itemRenderer: (item, index, nodeRef, actionNodeRef) => (_jsxs(Grid, { size: { xs: 12, md: 6, lg: 4 }, display: "flex", justifyContent: "flex-start", alignItems: "center", gap: 1, ...nodeRef, children: [_jsx(IconButton, { style: { cursor: "move" }, size: "small", title: labels?.dragIndicator, ...actionNodeRef, children: _jsx(DragIndicatorIcon, {}) }), _jsx(FormControlLabel, { control: _jsx(Checkbox, { name: "item", value: item.id, checked: selectedIds.includes(item.id), onChange: (e) => {
+                                    const checked = e.target.checked;
+                                    const newIds = [
+                                        ...selectedIds.toggleItem(item.id, checked)
+                                    ];
+                                    setSelectedIds(newIds);
+                                } }), label: `${index + 1}. ${labelFormatter(item)}` })] })), height: 200, mRef: dndRef }), onAdd && (_jsxs(HBox, { gap: 1, children: [_jsx(TextField, { variant: "outlined", label: labels?.more, fullWidth: true, inputRef: inputRef }), _jsx(Button, { sx: { width: "120px" }, variant: "contained", startIcon: _jsx(AddIcon, {}), size: "small", onClick: async () => {
                             if (inputRef.current == null)
                                 return;
                             const input = inputRef.current.value.trim();

package/lib/mjs/DnDList.d.ts

@@ -50,7 +50,16 @@ export interface DnDListRef<D extends object> {
  */
 export interface DnDListPros<D extends {
     id: UniqueIdentifier;
-}> {
+}, E extends React.ElementType = React.ElementType> {
+    /**
+     * Component type to render the list into
+     * Default is React.Fragment
+     */
+    component?: E;
+    /**
+     * Component props
+     */
+    componentProps?: React.ComponentProps<E>;
     /**
      * Get list item style callback
      */
@@ -99,4 +108,4 @@ export interface DnDListPros<D extends {
  */
 export declare function DnDList<D extends {
     id: UniqueIdentifier;
-}>(props: DnDListPros<D>): import("react/jsx-runtime").JSX.Element;
+}, E extends React.ElementType = React.ElementType>(props: DnDListPros<D, E>): import("react/jsx-runtime").JSX.Element;

package/lib/mjs/DnDList.js

@@ -46,7 +46,8 @@ export const DnDItemStyle = (index, isDragging, theme) => ({
  */
 export function DnDList(props) {
     // Destruct
-    const { height = 360, itemRenderer, labelField, mRef, sortingStrategy, onChange, onFormChange, onDragEnd } = props;
+    const { componentProps, height = 360, itemRenderer, labelField, mRef, sortingStrategy, onChange, onFormChange, onDragEnd } = props;
+    const Component = props.component || React.Fragment;
     // Theme
     const theme = useTheme();
     // States
@@ -219,10 +220,10 @@ export function DnDList(props) {
         }
         setActiveId(undefined);
     }
-    const children = (_jsx(DndContextType, { onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: _jsx(SortableContextType, { items: items, strategy: strategy, children: items.map((item, index) => {
-                const id = item.id;
-                return (_jsx(SortableItem, { id: id, useSortableType: useSortableType, CSSType: CSSType, style: getItemStyle(index, id === activeId), itemRenderer: (nodeRef, actionNodeRef) => itemRenderer(item, index, nodeRef, actionNodeRef) }, id));
-            }) }) }));
+    const children = (_jsx(DndContextType, { onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: _jsx(SortableContextType, { items: items, strategy: strategy, children: _jsx(Component, { ...componentProps, children: items.map((item, index) => {
+                    const id = item.id;
+                    return (_jsx(SortableItem, { id: id, useSortableType: useSortableType, CSSType: CSSType, style: getItemStyle(index, id === activeId), itemRenderer: (nodeRef, actionNodeRef) => itemRenderer(item, index, nodeRef, actionNodeRef) }, id));
+                }) }) }) }));
     if (onFormChange) {
         return (_jsx("div", { style: { width: "100%" }, ref: divRef, children: children }));
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.5.60",
+  "version": "1.5.61",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -42,7 +42,7 @@
     "@emotion/styled": "^11.14.0",
     "@etsoo/appscript": "^1.6.38",
     "@etsoo/notificationbase": "^1.1.62",
-    "@etsoo/react": "^1.8.46",
+    "@etsoo/react": "^1.8.48",
     "@etsoo/shared": "^1.2.74",
     "@mui/icons-material": "^7.1.1",
     "@mui/material": "^7.1.1",

package/src/ButtonPopupCheckbox.tsx

@@ -10,10 +10,10 @@ import IconButton from "@mui/material/IconButton";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import Checkbox from "@mui/material/Checkbox";
 import TextField from "@mui/material/TextField";
-import { DnDList, DnDListRef } from "./DnDList";
 import { HBox, VBox } from "./FlexBox";
 import { useRequiredAppContext } from "./app/ReactApp";
 import FormLabel from "@mui/material/FormLabel";
+import { DnDList, DnDListRef } from "./DnDList";
 
 type DnDItemType = {
   id: IdType;
@@ -152,56 +152,56 @@ function ButtonPopupList<D extends DnDItemType>(
 
   return (
     <VBox gap={2}>
-      <Grid container spacing={0}>
-        <DnDList<D>
-          items={items}
-          labelField={labelField}
-          onFormChange={(items) => {
-            const ids = items
-              .filter((item) => selectedIds.includes(item.id))
-              .map((item) => item.id);
-            onValueChange(ids);
-          }}
-          itemRenderer={(item, index, nodeRef, actionNodeRef) => (
-            <Grid
-              size={{ xs: 12, md: 6, lg: 4 }}
-              display="flex"
-              justifyContent="flex-start"
-              alignItems="center"
-              gap={1}
-              {...nodeRef}
+      <DnDList<D>
+        component={Grid}
+        componentProps={{ container: true, spacing: 0 }}
+        items={items}
+        labelField={labelField}
+        onFormChange={(items) => {
+          const ids = items
+            .filter((item) => selectedIds.includes(item.id))
+            .map((item) => item.id);
+          onValueChange(ids);
+        }}
+        itemRenderer={(item, index, nodeRef, actionNodeRef) => (
+          <Grid
+            size={{ xs: 12, md: 6, lg: 4 }}
+            display="flex"
+            justifyContent="flex-start"
+            alignItems="center"
+            gap={1}
+            {...nodeRef}
+          >
+            <IconButton
+              style={{ cursor: "move" }}
+              size="small"
+              title={labels?.dragIndicator}
+              {...actionNodeRef}
             >
-              <IconButton
-                style={{ cursor: "move" }}
-                size="small"
-                title={labels?.dragIndicator}
-                {...actionNodeRef}
-              >
-                <DragIndicatorIcon />
-              </IconButton>
-              <FormControlLabel
-                control={
-                  <Checkbox
-                    name="item"
-                    value={item.id}
-                    checked={selectedIds.includes(item.id)}
-                    onChange={(e) => {
-                      const checked = e.target.checked;
-                      const newIds = [
-                        ...selectedIds.toggleItem(item.id, checked)
-                      ];
-                      setSelectedIds(newIds);
-                    }}
-                  />
-                }
-                label={`${index + 1}. ${labelFormatter(item)}`}
-              />
-            </Grid>
-          )}
-          height={200}
-          mRef={dndRef}
-        ></DnDList>
-      </Grid>
+              <DragIndicatorIcon />
+            </IconButton>
+            <FormControlLabel
+              control={
+                <Checkbox
+                  name="item"
+                  value={item.id}
+                  checked={selectedIds.includes(item.id)}
+                  onChange={(e) => {
+                    const checked = e.target.checked;
+                    const newIds = [
+                      ...selectedIds.toggleItem(item.id, checked)
+                    ];
+                    setSelectedIds(newIds);
+                  }}
+                />
+              }
+              label={`${index + 1}. ${labelFormatter(item)}`}
+            />
+          </Grid>
+        )}
+        height={200}
+        mRef={dndRef}
+      ></DnDList>
       {onAdd && (
         <HBox gap={1}>
           <TextField

package/src/DnDList.tsx

@@ -119,7 +119,21 @@ export interface DnDListRef<D extends object> {
 /**
  * DnD sortable list properties
  */
-export interface DnDListPros<D extends { id: UniqueIdentifier }> {
+export interface DnDListPros<
+  D extends { id: UniqueIdentifier },
+  E extends React.ElementType = React.ElementType
+> {
+  /**
+   * Component type to render the list into
+   * Default is React.Fragment
+   */
+  component?: E;
+
+  /**
+   * Component props
+   */
+  componentProps?: React.ComponentProps<E>;
+
   /**
    * Get list item style callback
    */
@@ -186,11 +200,13 @@ export interface DnDListPros<D extends { id: UniqueIdentifier }> {
  * @param props Props
  * @returns Component
  */
-export function DnDList<D extends { id: UniqueIdentifier }>(
-  props: DnDListPros<D>
-) {
+export function DnDList<
+  D extends { id: UniqueIdentifier },
+  E extends React.ElementType = React.ElementType
+>(props: DnDListPros<D, E>) {
   // Destruct
   const {
+    componentProps,
     height = 360,
     itemRenderer,
     labelField,
@@ -201,6 +217,8 @@ export function DnDList<D extends { id: UniqueIdentifier }>(
     onDragEnd
   } = props;
 
+  const Component = props.component || React.Fragment;
+
   // Theme
   const theme = useTheme();
 
@@ -476,21 +494,23 @@ export function DnDList<D extends { id: UniqueIdentifier }>(
   const children = (
     <DndContextType onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
       <SortableContextType items={items} strategy={strategy}>
-        {items.map((item, index) => {
-          const id = item.id;
-          return (
-            <SortableItem
-              id={id}
-              useSortableType={useSortableType}
-              CSSType={CSSType}
-              key={id}
-              style={getItemStyle!(index, id === activeId)}
-              itemRenderer={(nodeRef, actionNodeRef) =>
-                itemRenderer(item, index, nodeRef, actionNodeRef)
-              }
-            />
-          );
-        })}
+        <Component {...componentProps}>
+          {items.map((item, index) => {
+            const id = item.id;
+            return (
+              <SortableItem
+                id={id}
+                useSortableType={useSortableType}
+                CSSType={CSSType}
+                key={id}
+                style={getItemStyle!(index, id === activeId)}
+                itemRenderer={(nodeRef, actionNodeRef) =>
+                  itemRenderer(item, index, nodeRef, actionNodeRef)
+                }
+              />
+            );
+          })}
+        </Component>
       </SortableContextType>
     </DndContextType>
   );