@etsoo/materialui 1.1.5 → 1.1.7

package/lib/DnDList.d.ts

@@ -1,7 +1,7 @@
-import { UniqueIdentifier } from '@dnd-kit/core';
-import { DataTypes } from '@etsoo/shared';
-import { Theme } from '@mui/material';
-import React, { CSSProperties } from 'react';
+import { UniqueIdentifier } from "@dnd-kit/core";
+import { DataTypes } from "@etsoo/shared";
+import { Theme } from "@mui/material";
+import React, { CSSProperties } from "react";
 /**
  * DnD item default style
  * @param index Item index
@@ -76,6 +76,10 @@ export interface DnDListPros<D extends object, K extends DataTypes.Keys<D>> {
      * Data change handler
      */
     onChange?: (items: D[]) => void;
+    /**
+     * Form data change handler
+     */
+    onFormChange?: (items: D[]) => void;
     /**
      * Drag end handler
      */

package/lib/DnDList.js

@@ -1,8 +1,8 @@
-import { DndContext } from '@dnd-kit/core';
-import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-import { useTheme } from '@mui/material';
-import React from 'react';
+import { DndContext } from "@dnd-kit/core";
+import { SortableContext, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { useTheme } from "@mui/material";
+import React from "react";
 function SortableItem(props) {
     // Destruct
     const { id, itemRenderer, style = {} } = props;
@@ -33,7 +33,7 @@ function SortableItem(props) {
  */
 export const DnDItemStyle = (index, isDragging, theme) => ({
     padding: theme.spacing(1),
-    zIndex: isDragging ? 1 : 'auto',
+    zIndex: isDragging ? 1 : "auto",
     background: isDragging
         ? theme.palette.primary.light
         : index % 2 === 0
@@ -47,7 +47,7 @@ export const DnDItemStyle = (index, isDragging, theme) => ({
  */
 export function DnDList(props) {
     // Destruct
-    const { keyField, itemRenderer, labelField, mRef, onChange, onDragEnd } = props;
+    const { keyField, itemRenderer, labelField, mRef, onChange, onFormChange, onDragEnd } = props;
     let getItemStyle = props.getItemStyle;
     if (getItemStyle == null) {
         // Theme
@@ -61,6 +61,8 @@ export function DnDList(props) {
         // Possible to alter items with the handler
         if (onChange)
             onChange(newItems);
+        if (onFormChange)
+            onFormChange(newItems);
         // Update state
         setItems(newItems);
     };
@@ -148,9 +150,13 @@ export function DnDList(props) {
     React.useEffect(() => {
         setItems(props.items);
     }, [props.items]);
-    return (React.createElement(DndContext, { onDragStart: handleDragStart, onDragEnd: handleDragEnd },
-        React.createElement(SortableContext, { items: items, strategy: verticalListSortingStrategy }, items.map((item, index) => {
-            const id = item[keyField];
-            return (React.createElement(SortableItem, { id: id, key: id, style: getItemStyle(index, id === activeId), itemRenderer: (nodeRef, actionNodeRef) => itemRenderer(item, index, nodeRef, actionNodeRef) }));
-        }))));
+    return (React.createElement("form", { onChange: () => {
+            if (onFormChange)
+                onFormChange(items);
+        } },
+        React.createElement(DndContext, { onDragStart: handleDragStart, onDragEnd: handleDragEnd },
+            React.createElement(SortableContext, { items: items, strategy: verticalListSortingStrategy }, items.map((item, index) => {
+                const id = item[keyField];
+                return (React.createElement(SortableItem, { id: id, key: id, style: getItemStyle(index, id === activeId), itemRenderer: (nodeRef, actionNodeRef) => itemRenderer(item, index, nodeRef, actionNodeRef) }));
+            })))));
 }

package/lib/OptionGroup.d.ts

@@ -1,6 +1,6 @@
-import { DataTypes, IdDefaultType, LabelDefaultType, ListType } from '@etsoo/shared';
-import { FormControlProps } from '@mui/material';
-import React from 'react';
+import { DataTypes, IdDefaultType, LabelDefaultType, ListType } from "@etsoo/shared";
+import { FormControlProps } from "@mui/material";
+import React from "react";
 /**
  * OptionGroup methods ref
  */
@@ -14,7 +14,7 @@ export interface OptionGroupRef {
 /**
  * OptionGroup props
  */
-export type OptionGroupProps<T extends object, D extends DataTypes.Keys<T>, L extends DataTypes.Keys<T, string>> = Omit<FormControlProps<'fieldset'>, 'defaultValue'> & {
+export type OptionGroupProps<T extends object, D extends DataTypes.Keys<T>, L extends DataTypes.Keys<T, string>> = Omit<FormControlProps<"fieldset">, "defaultValue"> & {
     /**
      * Default value
      */
@@ -66,7 +66,7 @@ export type OptionGroupProps<T extends object, D extends DataTypes.Keys<T>, L ex
     /**
      * Item size
      */
-    itemSize?: 'small' | 'medium';
+    itemSize?: "small" | "medium";
     /**
      * Helper text
      */

package/lib/OptionGroup.js

@@ -1,7 +1,7 @@
-import { DataTypes, Utils } from '@etsoo/shared';
-import { Box, Checkbox, FormControl, FormControlLabel, FormGroup, FormHelperText, InputLabel, Radio, RadioGroup, useTheme } from '@mui/material';
-import NotchedOutline from '@mui/material/OutlinedInput';
-import React from 'react';
+import { DataTypes, Utils } from "@etsoo/shared";
+import { Box, Checkbox, FormControl, FormControlLabel, FormGroup, FormHelperText, InputLabel, Radio, RadioGroup, useTheme } from "@mui/material";
+import NotchedOutline from "@mui/material/OutlinedInput";
+import React from "react";
 /**
  * OptionGroup
  * @param props Props
@@ -10,7 +10,7 @@ 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, ...rest } = props;
+    const { getOptionLabel, defaultValue, idField = "id", label, labelField = "label", multiple = false, mRef, name, onValueChange, options, readOnly, row, itemSize, helperText, variant, required, fullWidth, ...rest } = props;
     // Theme
     const theme = useTheme();
     // Get option value
@@ -75,16 +75,14 @@ export function OptionGroup(props) {
                 setValues(changedValues);
             } })) : (React.createElement(Radio, { disabled: disabledIds === null || disabledIds === void 0 ? void 0 : disabledIds.includes(ov), size: itemSize, readOnly: readOnly }));
         // Label
-        const label = getOptionLabel == null
-            ? `${option[labelField]}`
-            : getOptionLabel(option);
+        const label = getOptionLabel == null ? `${option[labelField]}` : getOptionLabel(option);
         // Value, convert to string
         // Will fail when type is number
         const value = getOptionValue(option);
         return (React.createElement(FormControlLabel, { key: value, control: control, value: value, label: label }));
     });
     // Group
-    const group = multiple ? (React.createElement(FormGroup, { row: row }, list)) : (React.createElement(RadioGroup, { row: row, name: name, value: (_a = values[0]) !== null && _a !== void 0 ? _a : '', onChange: (_event, value) => {
+    const group = multiple ? (React.createElement(FormGroup, { row: row }, list)) : (React.createElement(RadioGroup, { row: row, name: name, value: (_a = values[0]) !== null && _a !== void 0 ? _a : "", onChange: (_event, value) => {
             if (firstOptionValue == null)
                 return;
             const typeValue = Utils.parseString(value, firstOptionValue);
@@ -94,9 +92,13 @@ export function OptionGroup(props) {
         } }, list));
     // Layout
     return (React.createElement(React.Fragment, null,
-        React.createElement(FormControl, { component: "fieldset", ...rest },
+        React.createElement(FormControl, { component: "fieldset", fullWidth: fullWidth, ...rest },
             label && (React.createElement(InputLabel, { required: required, variant: variant, shrink: true }, label)),
             React.createElement(Box, { paddingLeft: 2, paddingY: "7px" }, group),
-            variant === 'outlined' && (React.createElement(NotchedOutline, { label: label && required ? label + ' *' : label, notched: true, style: { borderRadius: theme.shape.borderRadius } }))),
+            variant === "outlined" && (React.createElement(NotchedOutline, { label: label && required ? label + " *" : label, notched: true, style: {
+                    position: "absolute",
+                    borderRadius: theme.shape.borderRadius,
+                    width: fullWidth ? "100%" : "auto"
+                } }))),
         helperText && React.createElement(FormHelperText, null, helperText)));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.1.5",
+  "version": "1.1.7",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -50,10 +50,10 @@
     "@emotion/css": "^11.10.5",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
-    "@etsoo/appscript": "^1.3.57",
-    "@etsoo/notificationbase": "^1.1.22",
-    "@etsoo/react": "^1.6.40",
-    "@etsoo/shared": "^1.1.87",
+    "@etsoo/appscript": "^1.3.58",
+    "@etsoo/notificationbase": "^1.1.23",
+    "@etsoo/react": "^1.6.41",
+    "@etsoo/shared": "^1.1.88",
     "@mui/icons-material": "^5.11.0",
     "@mui/material": "^5.11.4",
     "@types/pica": "^9.0.1",