@etsoo/materialui 1.0.93 → 1.0.95

package/lib/ItemList.d.ts

@@ -4,10 +4,18 @@ import { DataTypes, IdDefaultType, LabelDefaultType, ListType } from '@etsoo/sha
  * Item list properties
  */
 export interface ItemListProps<T extends object, D extends DataTypes.Keys<T>, L extends DataTypes.Keys<T, string>> {
+    /**
+     * Button label
+     */
+    buttonLabel?: React.ReactNode;
     /**
      * Style class name
      */
     className?: string;
+    /**
+     * Keep click for all items
+     */
+    keepClick?: boolean;
     /**
      * Id field name
      */
@@ -16,6 +24,10 @@ export interface ItemListProps<T extends object, D extends DataTypes.Keys<T>, L
      * Label field name or callback
      */
     labelField?: L | ((item: T) => string);
+    /**
+     * Minimum width
+     */
+    minWidth?: number | string;
     /**
      * Button icon
      */

package/lib/ItemList.js

@@ -8,7 +8,7 @@ import { DataTypes } from '@etsoo/shared';
 export function ItemList(props) {
     var _a;
     //  properties destructure
-    const { className, color = 'primary', items, idField = 'id', labelField = 'label', icon, onClose, selectedValue, size = 'medium', title, variant = 'outlined' } = props;
+    const { buttonLabel, className, color = 'primary', keepClick = false, items, idField = 'id', labelField = 'label', minWidth = '200px', icon, onClose, selectedValue, size = 'medium', title, variant = 'outlined' } = props;
     // Get label
     const getLabel = (item) => {
         var _a;
@@ -57,13 +57,14 @@ export function ItemList(props) {
         }
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement(Button, { className: className, variant: variant, startIcon: icon, color: color, size: size, onClick: clickHandler }, getLabel(currentItem)),
-        React.createElement(Dialog, { "aria-labelledby": "dialog-title", open: open, onClose: closeHandler },
-            React.createElement(DialogTitle, { sx: { minWidth: '200px' }, id: "dialog-title" }, title || ''),
+        React.createElement(Button, { className: className, variant: variant, startIcon: icon, color: color, size: size, onClick: clickHandler }, buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : getLabel(currentItem)),
+        React.createElement(Dialog, { "aria-labelledby": "dialog-title", open: open, onClose: closeHandler, sx: { minWidth } },
+            title && React.createElement(DialogTitle, { id: "dialog-title" }, title),
             React.createElement(DialogContent, null,
                 React.createElement(List, null, items.map((item) => {
                     const id = item[idField];
-                    return (React.createElement(ListItemButton, { key: id, disabled: id === currentItem[idField], onClick: () => closeItemHandler(item) },
+                    return (React.createElement(ListItemButton, { key: id, disabled: id === currentItem[idField] &&
+                            !keepClick, onClick: () => closeItemHandler(item) },
                         React.createElement(ListItemText, null, getLabel(item))));
                 }))))));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/materialui",
-    "version": "1.0.93",
+    "version": "1.0.95",
     "description": "TypeScript Material-UI Implementation",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",

package/src/ItemList.tsx

@@ -23,11 +23,21 @@ export interface ItemListProps<
     D extends DataTypes.Keys<T>,
     L extends DataTypes.Keys<T, string>
 > {
+    /**
+     * Button label
+     */
+    buttonLabel?: React.ReactNode;
+
     /**
      * Style class name
      */
     className?: string;
 
+    /**
+     * Keep click for all items
+     */
+    keepClick?: boolean;
+
     /**
      * Id field name
      */
@@ -38,6 +48,11 @@ export interface ItemListProps<
      */
     labelField?: L | ((item: T) => string);
 
+    /**
+     * Minimum width
+     */
+    minWidth?: number | string;
+
     /**
      * Button icon
      */
@@ -90,11 +105,14 @@ export function ItemList<
 >(props: ItemListProps<T, D, L>) {
     //  properties destructure
     const {
+        buttonLabel,
         className,
         color = 'primary',
+        keepClick = false,
         items,
         idField = 'id' as D,
         labelField = 'label' as L,
+        minWidth = '200px',
         icon,
         onClose,
         selectedValue,
@@ -170,16 +188,15 @@ export function ItemList<
                 size={size}
                 onClick={clickHandler}
             >
-                {getLabel(currentItem)}
+                {buttonLabel ?? getLabel(currentItem)}
             </Button>
             <Dialog
                 aria-labelledby="dialog-title"
                 open={open}
                 onClose={closeHandler}
+                sx={{ minWidth }}
             >
-                <DialogTitle sx={{ minWidth: '200px' }} id="dialog-title">
-                    {title || ''}
-                </DialogTitle>
+                {title && <DialogTitle id="dialog-title">{title}</DialogTitle>}
                 <DialogContent>
                     <List>
                         {items.map((item) => {
@@ -187,7 +204,10 @@ export function ItemList<
                             return (
                                 <ListItemButton
                                     key={id as unknown as React.Key}
-                                    disabled={id === currentItem[idField]}
+                                    disabled={
+                                        id === currentItem[idField] &&
+                                        !keepClick
+                                    }
                                     onClick={() => closeItemHandler(item)}
                                 >
                                     <ListItemText>