@etsoo/react 1.2.23 → 1.2.27

package/lib/index.d.ts

@@ -36,6 +36,7 @@ export * from './mu/FlexBox';
 export * from './mu/IconButtonLink';
 export * from './mu/InputField';
 export * from './mu/ItemList';
+export * from './mu/ListItemRightIcon';
 export * from './mu/LoadingButton';
 export * from './mu/MaskInput';
 export * from './mu/MoreFab';

package/lib/index.js

@@ -39,6 +39,7 @@ export * from './mu/FlexBox';
 export * from './mu/IconButtonLink';
 export * from './mu/InputField';
 export * from './mu/ItemList';
+export * from './mu/ListItemRightIcon';
 export * from './mu/LoadingButton';
 export * from './mu/MaskInput';
 export * from './mu/MoreFab';

package/lib/mu/AutocompleteExtendedProps.d.ts

@@ -12,6 +12,10 @@ export interface AutocompleteExtendedProps<T extends Record<string, any>> extend
      * Id value
      */
     idValue?: DataTypes.IdType;
+    /**
+     * Autocomplete for the input
+     */
+    inputAutoComplete?: string;
     /**
      * If `dense` or `normal`, will adjust vertical spacing of this and contained components.
      * @default 'none'

package/lib/mu/ComboBox.js

@@ -10,7 +10,7 @@ import { SearchField } from './SearchField';
  */
 export function ComboBox(props) {
     // Destruct
-    const { search = false, idField = 'id', idValue, inputMargin, inputRequired, inputVariant, defaultValue, label, labelField, loadData, onLoadData, name, options = [], readOnly = true, onChange, value, getOptionLabel = labelField
+    const { search = false, idField = 'id', idValue, inputAutoComplete = 'new-region', inputMargin, inputRequired, inputVariant, defaultValue, label, labelField, loadData, onLoadData, name, options = [], readOnly = true, onChange, value, getOptionLabel = labelField
         ? (option) => option[labelField]
         : undefined, sx = { minWidth: '150px' }, ...rest } = props;
     // Value input ref
@@ -69,5 +69,5 @@ export function ComboBox(props) {
                 // Custom
                 if (onChange != null)
                     onChange(event, value, reason, details);
-            }, sx: sx, renderInput: (params) => search ? (React.createElement(SearchField, { ...addReadOnly(params), label: label, margin: inputMargin, variant: inputVariant, required: inputRequired, autoComplete: "new-password" })) : (React.createElement(InputField, { ...addReadOnly(params), label: label, margin: inputMargin, variant: inputVariant, required: inputRequired, autoComplete: "new-password" })), options: localOptions, ...rest })));
+            }, sx: sx, renderInput: (params) => search ? (React.createElement(SearchField, { ...addReadOnly(params), label: label, margin: inputMargin, variant: inputVariant, required: inputRequired, autoComplete: inputAutoComplete })) : (React.createElement(InputField, { ...addReadOnly(params), label: label, margin: inputMargin, variant: inputVariant, required: inputRequired, autoComplete: inputAutoComplete })), options: localOptions, ...rest })));
 }

package/lib/mu/ListItemRightIcon.d.ts

@@ -0,0 +1,4 @@
+/**
+ * List item right icon component
+ */
+export declare const ListItemRightIcon: import("@mui/system").StyledComponent<import("@mui/material").ListItemIconProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/lib/mu/ListItemRightIcon.js

@@ -0,0 +1,8 @@
+import { ListItemIcon, styled } from '@mui/material';
+/**
+ * List item right icon component
+ */
+export const ListItemRightIcon = styled(ListItemIcon)(({ theme }) => ({
+    minWidth: '20px!important',
+    paddingLeft: theme.spacing(2)
+}));

package/lib/mu/SelectEx.d.ts

@@ -1,5 +1,5 @@
 import { SelectProps } from '@mui/material';
-import React, { MouseEventHandler } from 'react';
+import React from 'react';
 import { IdLabelDto } from '@etsoo/appscript';
 /**
  * Extended select component props
@@ -24,7 +24,7 @@ export interface SelectExProps<T extends Record<string, any> = IdLabelDto> exten
     /**
      * Item click handler
      */
-    onItemClick?: MouseEventHandler;
+    onItemClick?: (event: React.MouseEvent, id: unknown) => void;
     /**
      * On load data handler
      */

package/lib/mu/SelectEx.js

@@ -1,7 +1,8 @@
 import { Utils as AppUtils } from '../app/Utils';
-import { Checkbox, FormControl, InputLabel, ListItemIcon, ListItemText, MenuItem, OutlinedInput, Select } from '@mui/material';
+import { Checkbox, FormControl, InputLabel, ListItemText, MenuItem, OutlinedInput, Select } from '@mui/material';
 import React from 'react';
 import { MUGlobal } from './MUGlobal';
+import { ListItemRightIcon } from './ListItemRightIcon';
 /**
  * Extended select component
  * @param props Props
@@ -110,7 +111,7 @@ export function SelectEx(props) {
             // Option
             return (React.createElement(MenuItem, { key: id, value: id, onClick: (event) => {
                     if (onItemClick) {
-                        onItemClick(event);
+                        onItemClick(event, id);
                         if (event.defaultPrevented)
                             return;
                     }
@@ -119,6 +120,6 @@ export function SelectEx(props) {
                 } },
                 multiple && React.createElement(Checkbox, { checked: itemChecked(id) }),
                 React.createElement(ListItemText, { primary: label }),
-                itemIconRenderer && (React.createElement(ListItemIcon, null, itemIconRenderer(id)))));
+                itemIconRenderer && (React.createElement(ListItemRightIcon, null, itemIconRenderer(id)))));
         }))));
 }

package/lib/mu/Tiplist.js

@@ -10,7 +10,7 @@ import { SearchField } from './SearchField';
  */
 export function Tiplist(props) {
     // Destruct
-    const { search = false, idField = 'id', idValue, inputMargin, inputRequired, inputVariant, label, loadData, defaultValue, value, name, readOnly, onChange, sx = { minWidth: '180px' }, ...rest } = props;
+    const { search = false, idField = 'id', idValue, inputAutoComplete = 'off', inputMargin, inputRequired, inputVariant, label, loadData, defaultValue, value, name, readOnly, onChange, sx = { minWidth: '180px' }, ...rest } = props;
     // Value input ref
     const inputRef = React.createRef();
     // Local value
@@ -149,5 +149,5 @@ export function Tiplist(props) {
                     open: false,
                     ...(!states.value && { options: [] })
                 });
-            }, loading: states.loading, sx: sx, renderInput: (params) => search ? (React.createElement(SearchField, { onChange: changeHandle, ...params, readOnly: readOnly, label: label, margin: inputMargin, variant: inputVariant, required: inputRequired })) : (React.createElement(InputField, { onChange: changeHandle, ...addReadOnly(params), label: label, margin: inputMargin, variant: inputVariant, required: inputRequired })), isOptionEqualToValue: (option, value) => option[idField] === value[idField], ...rest })));
+            }, loading: states.loading, sx: sx, renderInput: (params) => search ? (React.createElement(SearchField, { onChange: changeHandle, ...params, readOnly: readOnly, label: label, margin: inputMargin, variant: inputVariant, required: inputRequired, autoComplete: inputAutoComplete })) : (React.createElement(InputField, { onChange: changeHandle, ...addReadOnly(params), label: label, margin: inputMargin, variant: inputVariant, required: inputRequired, autoComplete: inputAutoComplete })), isOptionEqualToValue: (option, value) => option[idField] === value[idField], ...rest })));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.2.23",
+    "version": "1.2.27",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",

package/src/index.ts

@@ -43,6 +43,7 @@ export * from './mu/FlexBox';
 export * from './mu/IconButtonLink';
 export * from './mu/InputField';
 export * from './mu/ItemList';
+export * from './mu/ListItemRightIcon';
 export * from './mu/LoadingButton';
 export * from './mu/MaskInput';
 export * from './mu/MoreFab';

package/src/mu/AutocompleteExtendedProps.ts

@@ -19,6 +19,11 @@ export interface AutocompleteExtendedProps<T extends Record<string, any>>
      */
     idValue?: DataTypes.IdType;
 
+    /**
+     * Autocomplete for the input
+     */
+    inputAutoComplete?: string;
+
     /**
      * If `dense` or `normal`, will adjust vertical spacing of this and contained components.
      * @default 'none'

package/src/mu/ComboBox.tsx

@@ -45,6 +45,7 @@ export function ComboBox<T extends Record<string, any> = IdLabelDto>(
         search = false,
         idField = 'id',
         idValue,
+        inputAutoComplete = 'new-region',
         inputMargin,
         inputRequired,
         inputVariant,
@@ -156,7 +157,7 @@ export function ComboBox<T extends Record<string, any> = IdLabelDto>(
                             margin={inputMargin}
                             variant={inputVariant}
                             required={inputRequired}
-                            autoComplete="new-password"
+                            autoComplete={inputAutoComplete}
                         />
                     ) : (
                         <InputField
@@ -165,7 +166,7 @@ export function ComboBox<T extends Record<string, any> = IdLabelDto>(
                             margin={inputMargin}
                             variant={inputVariant}
                             required={inputRequired}
-                            autoComplete="new-password"
+                            autoComplete={inputAutoComplete}
                         />
                     )
                 }

package/src/mu/ListItemRightIcon.tsx

@@ -0,0 +1,9 @@
+import { ListItemIcon, styled } from '@mui/material';
+
+/**
+ * List item right icon component
+ */
+export const ListItemRightIcon = styled(ListItemIcon)(({ theme }) => ({
+    minWidth: '20px!important',
+    paddingLeft: theme.spacing(2)
+}));

package/src/mu/SelectEx.tsx

@@ -11,9 +11,10 @@ import {
     SelectChangeEvent,
     SelectProps
 } from '@mui/material';
-import React, { MouseEventHandler } from 'react';
+import React from 'react';
 import { MUGlobal } from './MUGlobal';
 import { IdLabelDto } from '@etsoo/appscript';
+import { ListItemRightIcon } from './ListItemRightIcon';
 
 /**
  * Extended select component props
@@ -43,7 +44,7 @@ export interface SelectExProps<T extends Record<string, any> = IdLabelDto>
     /**
      * Item click handler
      */
-    onItemClick?: MouseEventHandler;
+    onItemClick?: (event: React.MouseEvent, id: unknown) => void;
 
     /**
      * On load data handler
@@ -217,7 +218,7 @@ export function SelectEx<T extends Record<string, any> = IdLabelDto>(
                             value={id}
                             onClick={(event) => {
                                 if (onItemClick) {
-                                    onItemClick(event);
+                                    onItemClick(event, id);
                                     if (event.defaultPrevented) return;
                                 }
                                 if (!multiple) setItemValue(id);
@@ -226,9 +227,9 @@ export function SelectEx<T extends Record<string, any> = IdLabelDto>(
                             {multiple && <Checkbox checked={itemChecked(id)} />}
                             <ListItemText primary={label} />
                             {itemIconRenderer && (
-                                <ListItemIcon>
+                                <ListItemRightIcon>
                                     {itemIconRenderer(id)}
-                                </ListItemIcon>
+                                </ListItemRightIcon>
                             )}
                         </MenuItem>
                     );

package/src/mu/Tiplist.tsx

@@ -42,6 +42,7 @@ export function Tiplist<T extends Record<string, any> = IdLabelDto>(
         search = false,
         idField = 'id',
         idValue,
+        inputAutoComplete = 'off',
         inputMargin,
         inputRequired,
         inputVariant,
@@ -263,6 +264,7 @@ export function Tiplist<T extends Record<string, any> = IdLabelDto>(
                             margin={inputMargin}
                             variant={inputVariant}
                             required={inputRequired}
+                            autoComplete={inputAutoComplete}
                         />
                     ) : (
                         <InputField
@@ -272,6 +274,7 @@ export function Tiplist<T extends Record<string, any> = IdLabelDto>(
                             margin={inputMargin}
                             variant={inputVariant}
                             required={inputRequired}
+                            autoComplete={inputAutoComplete}
                         />
                     )
                 }