ish-ui 1.0.22 → 1.0.24

package/dist/formFields/EditInPlaceDateTimeField.d.ts

@@ -6,5 +6,5 @@ import { EditInPlaceDateTimeFieldProps, FieldInputProps, FieldMetaProps } from '
 interface InputTypes {
     type?: 'date' | 'time' | 'datetime';
 }
-declare function EditInPlaceDateTimeField<IP extends FieldInputProps, MP extends FieldMetaProps>({ type, formatDate, formatTime, formatDateTime, timezone, input, fieldClasses, inline, meta: { error, invalid, active, dispatch }, labelAdornment, label, disabled, formatValue, className, onKeyPress, placeholder, persistValue, warning, defaultValue, rightAligned, processActionId }: EditInPlaceDateTimeFieldProps<IP, MP> & InputTypes): React.JSX.Element;
+declare function EditInPlaceDateTimeField<IP extends FieldInputProps, MP extends FieldMetaProps>({ type, formatDate, formatTime, formatDateTime, timezone, input, fieldClasses, inline, meta: { error, invalid, active, dispatch }, labelAdornment, label, disabled, formatValue, className, onKeyPress, placeholder, persistValue, warning, defaultValue, rightAligned, processActionId, variant, }: EditInPlaceDateTimeFieldProps<IP, MP> & InputTypes): React.JSX.Element;
 export default EditInPlaceDateTimeField;

package/dist/formFields/EditInPlaceDateTimeField.js

@@ -22,22 +22,16 @@ import { endFieldProcessingAction, startFieldProcessingAction } from '../actions
 const useStyles = makeAppStyles(theme => ({
     inlinePickerButton: {
         padding: '2px',
-        marginBottom: '-4px',
         fontSize: '1.3em',
         '&:hover': {
             color: theme.palette.primary.main,
         }
     },
-    pickerButton: {
-        width: theme.spacing(4),
-        height: theme.spacing(4),
-        bottom: theme.spacing(-0.5)
-    },
     inlineContainer: {
         display: 'inline-block',
     }
 }));
-function EditInPlaceDateTimeField({ type, formatDate, formatTime, formatDateTime, timezone, input, fieldClasses = {}, inline, meta: { error, invalid, active, dispatch }, labelAdornment, label, disabled, formatValue, className, onKeyPress, placeholder = 'No value', persistValue, warning, defaultValue, rightAligned, processActionId }) {
+function EditInPlaceDateTimeField({ type, formatDate, formatTime, formatDateTime, timezone, input, fieldClasses = {}, inline, meta: { error, invalid, active, dispatch }, labelAdornment, label, disabled, formatValue, className, onKeyPress, placeholder, persistValue, warning, defaultValue, rightAligned, processActionId, variant, }) {
     const [textValue, setTextValue] = useState(defaultValue || '');
     const [pickerOpened, setPickerOpened] = useState(false);
     const inputNode = useRef(null);
@@ -169,8 +163,8 @@ function EditInPlaceDateTimeField({ type, formatDate, formatTime, formatDateTime
             'pointer-events-none': disabled
         }) },
         React.createElement("div", { id: input.name, className: "w-100" },
-            React.createElement(DateTimeField, { type: type, toolbarTitle: label, open: pickerOpened, value: dateValue, onChange: onChange, onClose: onClose, renderInput: () => (React.createElement(EditInPlaceFieldBase, { name: input.name, value: textValue, error: error, invalid: invalid, inline: inline, label: label, warning: warning, fieldClasses: fieldClasses, rightAligned: rightAligned, shrink: Boolean(label || input.value), disabled: disabled, labelAdornment: labelAdornment, placeholder: placeholder, editIcon: React.createElement(IconButton, { tabIndex: -1, onClick: openPicker, classes: {
-                            root: clsx(fieldClasses.text, inline ? classes.inlinePickerButton : classes.pickerButton)
+            React.createElement(DateTimeField, { type: type, toolbarTitle: label, open: pickerOpened, value: dateValue, onChange: onChange, onClose: onClose, renderInput: () => (React.createElement(EditInPlaceFieldBase, { name: input.name, value: textValue, variant: variant, error: error, invalid: invalid, inline: inline, label: label, warning: warning, fieldClasses: fieldClasses, rightAligned: rightAligned, shrink: Boolean(label || input.value), disabled: disabled, labelAdornment: labelAdornment, placeholder: placeholder, editIcon: React.createElement(IconButton, { tabIndex: -1, onClick: openPicker, classes: {
+                            root: clsx('p-0', fieldClasses.text, inline && classes.inlinePickerButton)
                         } }, type === 'time'
                         ? React.createElement(QueryBuilder, { fontSize: "inherit", color: "inherit" })
                         : React.createElement(DateRange, { color: "inherit", fontSize: "inherit" })), InputProps: {

package/dist/formFields/EditInPlaceField.d.ts

@@ -6,5 +6,5 @@ import { EditInPlaceFieldProps, FieldInputProps, FieldMetaProps } from '../model
 interface InputTypes {
     type?: 'password' | 'number' | 'text';
 }
-declare function EditInPlaceField<IP extends FieldInputProps, MP extends FieldMetaProps>({ inputRef, input, label, maxLength, disabled, min, max, step, className, onKeyPress, labelAdornment, truncateLines, rightAligned, defaultValue, onKeyDown, multiline, inline, warning, preformatDisplayValue, type, meta: { error, invalid }, placeholder, fieldClasses, InputProps }: EditInPlaceFieldProps<IP, MP> & InputTypes): React.JSX.Element;
+declare function EditInPlaceField<IP extends FieldInputProps, MP extends FieldMetaProps>({ inputRef, input, label, maxLength, disabled, min, max, step, className, onKeyPress, labelAdornment, truncateLines, rightAligned, defaultValue, onKeyDown, multiline, inline, warning, preformatDisplayValue, type, meta: { error, invalid }, placeholder, fieldClasses, InputProps, editIcon, variant }: EditInPlaceFieldProps<IP, MP> & InputTypes): React.JSX.Element;
 export default EditInPlaceField;

package/dist/formFields/EditInPlaceField.js

@@ -31,7 +31,7 @@ const useStyles = makeAppStyles(theme => ({
         opacity: 0.5
     }
 }));
-function EditInPlaceField({ inputRef, input, label, maxLength, disabled, min, max, step, className, onKeyPress, labelAdornment, truncateLines, rightAligned, defaultValue, onKeyDown, multiline, inline, warning, preformatDisplayValue, type = 'text', meta: { error, invalid }, placeholder = 'No value', fieldClasses = {}, InputProps = {} }) {
+function EditInPlaceField({ inputRef, input, label, maxLength, disabled, min, max, step, className, onKeyPress, labelAdornment, truncateLines, rightAligned, defaultValue, onKeyDown, multiline, inline, warning, preformatDisplayValue, type = 'text', meta: { error, invalid }, placeholder, fieldClasses = {}, InputProps = {}, editIcon, variant }) {
     const classes = useStyles();
     const onBlur = () => {
         (input === null || input === void 0 ? void 0 : input.onBlur) && input.onBlur(input.value);
@@ -43,7 +43,7 @@ function EditInPlaceField({ inputRef, input, label, maxLength, disabled, min, ma
             [classes.rightAligned]: rightAligned,
             [classes.inlineContainer]: inline
         }) },
-        React.createElement(EditInPlaceFieldBase, { name: input.name, value: inputValue, error: error, invalid: invalid, inline: inline, label: label, warning: warning, fieldClasses: fieldClasses, endAdornmentClass: classes.endAdornment, rightAligned: rightAligned, shrink: Boolean(label || input.value), disabled: disabled, labelAdornment: labelAdornment, placeholder: placeholder, hideArrows: ['percentage', 'number'].includes(type), editIcon: React.createElement(Edit, { fontSize: "inherit" }), InputProps: Object.assign({ multiline,
+        React.createElement(EditInPlaceFieldBase, { name: input.name, value: inputValue, variant: variant, error: error, invalid: invalid, inline: inline, label: label, warning: warning, fieldClasses: fieldClasses, endAdornmentClass: classes.endAdornment, rightAligned: rightAligned, shrink: Boolean(label || input.value), disabled: disabled, labelAdornment: labelAdornment, placeholder: placeholder, hideArrows: ['percentage', 'number'].includes(type), editIcon: editIcon === undefined ? React.createElement(Edit, { fontSize: inline ? 'inherit' : undefined }) : editIcon, InputProps: Object.assign({ multiline,
                 onKeyPress,
                 onBlur, onFocus: input.onFocus, maxRows: truncateLines, inputProps: {
                     ref: inputRef,

package/dist/formFields/EditInPlaceFieldBase.js

@@ -33,9 +33,6 @@ const useStyles = makeAppStyles(theme => ({
         },
         '&:hover .invisible': {
             visibility: 'visible',
-        },
-        '& .Mui-focused $inputEndAdornment': {
-            opacity: 1,
         }
     },
     hideArrows: {
@@ -56,14 +53,6 @@ const useStyles = makeAppStyles(theme => ({
     readonly: {
         fontWeight: 300,
         pointerEvents: 'none'
-    },
-    inputEndAdornment: {
-        display: 'flex',
-        fontSize: '24px',
-        color: theme.palette.primary.main,
-        alignItems: 'flex-end',
-        alignSelf: 'flex-end',
-        marginBottom: '5px'
     }
 }));
 const EditInPlaceFieldBase = ({ value, invalid, className, inline, label, fieldClasses = {}, rightAligned, shrink, name, disabled, labelAdornment, editIcon, error, placeholder, hideArrows, warning, endAdornmentClass, CustomInput, InputProps, variant = 'standard' }) => {
@@ -96,7 +85,7 @@ const EditInPlaceFieldBase = ({ value, invalid, className, inline, label, fieldC
             React.createElement("span", { className: classes.label }, label),
             labelAdornment)),
         CustomInput ||
-            React.createElement(InputComp, Object.assign({}, InputProps || {}, { label: label, inputRef: inputNode, inputProps: Object.assign({ placeholder,
+            React.createElement(InputComp, Object.assign({}, InputProps || {}, { inputRef: inputNode, inputProps: Object.assign({ placeholder,
                     disabled, className: clsx(fieldClasses.text, {
                         [classes.inlineInput]: inline,
                         [classes.readonly]: disabled,
@@ -108,10 +97,10 @@ const EditInPlaceFieldBase = ({ value, invalid, className, inline, label, fieldC
                     root: clsx(fieldClasses.text, inline && classes.inlineInput),
                     underline: fieldClasses.underline
                 }, disabled: disabled, endAdornment: !disabled &&
-                    React.createElement(InputAdornment, { position: "end", onClick: onAdornmentClick, className: clsx(classes.inputEndAdornment, endAdornmentClass, {
+                    React.createElement(InputAdornment, { position: "end", onClick: onAdornmentClick, className: clsx(endAdornmentClass, {
                             ['fsInherit']: inline,
                             ['d-none']: (rightAligned || inline),
-                            ['invisible']: !(rightAligned || inline)
+                            ['invisible']: variant !== 'outlined' && !(rightAligned || inline)
                         }) }, editIcon), id: `input-${name}`, name: name })),
         React.createElement(FormHelperText, { classes: {
                 root: clsx(rightAligned && 'text-end'),

package/dist/formFields/EditInPlaceSearchSelect.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { EditInPlaceSearchSelectFieldProps, FieldInputProps, FieldMetaProps } from '../model';
-declare function EditInPlaceSearchSelect<InputProps extends FieldInputProps, MetaProps extends FieldMetaProps>({ label, disabled, className, labelAdornment, inline, loading, creatable, allowEmpty, fieldClasses, selectAdornment, selectValueMark, selectLabelMark, selectLabelCondition, selectFilterCondition, defaultValue, disableUnderline, items, rowHeight, remoteRowCount, loadMoreRows, onCreateOption, itemRenderer, onInputChange, onClearRows, onInnerValueChange, hideMenuOnNoResults, hideEditIcon, remoteData, createLabel, returnType, alwaysDisplayDefault, valueRenderer, popperAnchor, input, meta: { error, invalid }, placeholder, sort, sortPropKey, inputRef, warning, multiple, rightAligned, hasError, categoryKey }: EditInPlaceSearchSelectFieldProps<InputProps, MetaProps>): React.JSX.Element;
+declare function EditInPlaceSearchSelect<InputProps extends FieldInputProps, MetaProps extends FieldMetaProps>({ label, disabled, className, labelAdornment, inline, loading, creatable, allowEmpty, fieldClasses, selectAdornment, selectValueMark, selectLabelMark, selectLabelCondition, selectFilterCondition, defaultValue, disableUnderline, items, rowHeight, remoteRowCount, loadMoreRows, onCreateOption, itemRenderer, onInputChange, onClearRows, onInnerValueChange, hideMenuOnNoResults, hideEditIcon, remoteData, createLabel, returnType, alwaysDisplayDefault, valueRenderer, popperAnchor, input, meta: { error, invalid }, placeholder, sort, sortPropKey, inputRef, warning, multiple, rightAligned, hasError, categoryKey, editIcon, variant }: EditInPlaceSearchSelectFieldProps<InputProps, MetaProps>): React.JSX.Element;
 export default EditInPlaceSearchSelect;

package/dist/formFields/EditInPlaceSearchSelect.js

@@ -28,10 +28,7 @@ import EditInPlaceFieldBase from './EditInPlaceFieldBase';
 import { makeAppStyles } from '../styles';
 import { getHighlightedPartLabel, stubComponent } from '../utils';
 import { usePrevious } from '../utils/hooks';
-const useStyles = makeAppStyles(theme => (Object.assign({ selectAdornment: {
-        marginBottom: '6px',
-        color: theme.palette.primary.main
-    }, popper: {
+const useStyles = makeAppStyles(theme => (Object.assign({ popper: {
         zIndex: 1400
     } }, selectStyles(theme))));
 const SelectContext = React.createContext({});
@@ -50,7 +47,7 @@ const PopperAdapter = React.memo(params => {
             // @ts-ignore
             : React.createElement(Popper, Object.assign({}, params, { style: inline ? null : params.style })));
 });
-function EditInPlaceSearchSelect({ label, disabled, className, labelAdornment, inline, loading, creatable, allowEmpty, fieldClasses = {}, selectAdornment, selectValueMark = 'value', selectLabelMark = 'label', selectLabelCondition, selectFilterCondition, defaultValue, disableUnderline, items = [], rowHeight, remoteRowCount, loadMoreRows, onCreateOption, itemRenderer, onInputChange, onClearRows, onInnerValueChange, hideMenuOnNoResults, hideEditIcon, remoteData, createLabel, returnType = 'string', alwaysDisplayDefault, valueRenderer, popperAnchor, input, meta: { error, invalid }, placeholder, sort, sortPropKey, inputRef, warning, multiple, rightAligned, hasError, categoryKey }) {
+function EditInPlaceSearchSelect({ label, disabled, className, labelAdornment, inline, loading, creatable, allowEmpty, fieldClasses = {}, selectAdornment, selectValueMark = 'value', selectLabelMark = 'label', selectLabelCondition, selectFilterCondition, defaultValue, disableUnderline, items = [], rowHeight, remoteRowCount, loadMoreRows, onCreateOption, itemRenderer, onInputChange, onClearRows, onInnerValueChange, hideMenuOnNoResults, hideEditIcon, remoteData, createLabel, returnType = 'string', alwaysDisplayDefault, valueRenderer, popperAnchor, input, meta: { error, invalid }, placeholder, sort, sortPropKey, inputRef, warning, multiple, rightAligned, hasError, categoryKey, editIcon, variant }) {
     const classes = useStyles();
     const sortedItems = useMemo(() => {
         const sorted = items && (sort
@@ -262,11 +259,11 @@ function EditInPlaceSearchSelect({ label, disabled, className, labelAdornment, i
     }, [selectedOption, searchValue, displayedValue, selectValueMark, returnType, valueRenderer, input.value]);
     const renderIcons = useMemo(() => !disabled && (loading
         ? React.createElement(CircularProgress, { size: 24, thickness: 4, className: fieldClasses.loading })
-        : (React.createElement("div", { className: classes.inputEndAdornment },
+        : (React.createElement("div", null,
             allowEmpty && input.value && (React.createElement(IconButton, { size: "small", onClick: onClear, color: "inherit" },
                 React.createElement(CloseIcon, { fontSize: "inherit" }))),
-            React.createElement(IconButton, { size: "small", color: "inherit", className: clsx(classes.expandIcon, 'pl-0 pr-0'), disableRipple: true },
-                React.createElement(ExpandMore, { className: inline && 'fsInherit' }))))), [disabled, loading, inline, allowEmpty, input.value]);
+            editIcon === undefined ? React.createElement(IconButton, { size: "small", color: "inherit", className: clsx(classes.expandIcon, 'pl-0 pr-0'), disableRipple: true },
+                React.createElement(ExpandMore, { className: inline && 'fsInherit' })) : editIcon))), [disabled, loading, inline, allowEmpty, input.value]);
     const inputValue = useMemo(() => {
         if (multiple) {
             return (input.value || []).map(v => sortedItems.find(s => s[selectValueMark] === v));
@@ -274,7 +271,7 @@ function EditInPlaceSearchSelect({ label, disabled, className, labelAdornment, i
         return input.value || null;
     }, [input.value, multiple, selectValueMark, sortedItems]);
     const renderedPlaceholder = useMemo(() => {
-        const rendered = placeholder || (!isEditing ? 'No value' : '');
+        const rendered = placeholder;
         return multiple && inputValue.length ? null : rendered;
     }, [multiple, placeholder, isEditing, inputValue]);
     return (React.createElement("div", { className: clsx(className, 'outline-none', inline && classes.inline), id: input === null || input === void 0 ? void 0 : input.name },
@@ -301,7 +298,7 @@ function EditInPlaceSearchSelect({ label, disabled, className, labelAdornment, i
                     groupUl: 'm-0'
                 }, groupBy: categoryKey && (option => option[categoryKey]), renderOption: renderOption, getOptionLabel: getOptionLabel, filterOptions: filterItems, ListboxComponent: inline || categoryKey ? null : ListBoxAdapter, PopperComponent: categoryKey ? null : PopperAdapter, renderInput: (_a) => {
                     var { InputLabelProps, InputProps, inputProps } = _a, params = __rest(_a, ["InputLabelProps", "InputProps", "inputProps"]);
-                    return (React.createElement(EditInPlaceFieldBase, Object.assign({}, params, { name: input.name, value: displayedValue, error: error, invalid: hasError || invalid, inline: inline, label: label, warning: warning, fieldClasses: fieldClasses, endAdornmentClass: classes.selectAdornment, rightAligned: rightAligned, shrink: Boolean(label || input.value), labelAdornment: labelAdornment, placeholder: renderedPlaceholder, editIcon: !hideEditIcon && renderIcons, InputProps: Object.assign(Object.assign({}, InputProps), { onChange: handleInputChange, onFocus: edit, onClick: onEditButtonFocus, onBlur,
+                    return (React.createElement(EditInPlaceFieldBase, Object.assign({}, params, { variant: variant, name: input.name, value: displayedValue, error: error, invalid: hasError || invalid, inline: inline, label: label, warning: warning, fieldClasses: fieldClasses, rightAligned: rightAligned, shrink: Boolean(label || input.value), labelAdornment: labelAdornment, placeholder: renderedPlaceholder, editIcon: !hideEditIcon && renderIcons, InputProps: Object.assign(Object.assign({}, InputProps), { onChange: handleInputChange, onFocus: edit, onClick: onEditButtonFocus, onBlur,
                             disableUnderline, classes: {
                                 underline: fieldClasses.underline,
                                 input: clsx(disabled && classes.readonly, fieldClasses.text),
@@ -314,7 +311,7 @@ function EditInPlaceSearchSelect({ label, disabled, className, labelAdornment, i
                             ?
                                 React.createElement(Select, Object.assign({}, InputProps, { inputRef: ref => {
                                         inputProps.ref.current = ref === null || ref === void 0 ? void 0 : ref.node;
-                                    }, classes: { select: 'cursor-text' }, onFocus: edit, value: (returnType === 'object' ? input.value[selectValueMark] : input.value) || '', endAdornment: React.createElement(InputAdornment, { position: "end", className: clsx(classes.selectAdornment, 'd-none') }, renderIcons), IconComponent: stubComponent }), renderValue)
+                                    }, classes: { select: 'cursor-text' }, onFocus: edit, value: (returnType === 'object' ? input.value[selectValueMark] : input.value) || '', endAdornment: React.createElement(InputAdornment, { position: "end", className: 'd-none' }, renderIcons), IconComponent: stubComponent }), renderValue)
                             : null })));
                 }, disableListWrap: true, openOnFocus: true, fullWidth: true }))));
 }

package/dist/formFields/SelectCustomComponents.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare const selectStyles: (theme: any) => import("@mui/styles").StyleRules<{}, "label" | "inline" | "multiple" | "error" | "root" | "expandIcon" | "menuItem" | "inputWrapper" | "readonly" | "inputEndAdornment" | "editIcon" | "bottomMargin" | "bottomPadding" | "topMargin" | "editable" | "valid" | "autoWidthSelect" | "emptySelect" | "validUnderline" | "menuItemActive" | "menuList" | "hasPopup" | "hasClear">;
+export declare const selectStyles: (theme: any) => import("@mui/styles").StyleRules<{}, "label" | "inline" | "multiple" | "error" | "root" | "expandIcon" | "menuItem" | "inputWrapper" | "readonly" | "editIcon" | "bottomMargin" | "bottomPadding" | "topMargin" | "editable" | "valid" | "autoWidthSelect" | "emptySelect" | "validUnderline" | "menuItemActive" | "menuList" | "hasPopup" | "hasClear">;
 export declare const ListRow: React.MemoExoticComponent<any>;
 export declare const ListboxComponent: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<any>>;
 export declare const NoWrapOption: (content: any, data: any, search: any, parentProps: any) => React.JSX.Element;

package/dist/formFields/SelectCustomComponents.js

@@ -25,7 +25,7 @@ import { areEqual, FixedSizeList as List } from 'react-window';
 import { createStyles } from '@mui/styles';
 import { green } from '@mui/material/colors';
 import clsx from 'clsx';
-import { ListItem } from '@mui/material';
+import { ListItemButton } from '@mui/material';
 import Tooltip from '@mui/material/Tooltip';
 export const selectStyles = theme => createStyles({
     bottomMargin: {
@@ -96,31 +96,14 @@ export const selectStyles = theme => createStyles({
         display: 'inline-block',
         '& .MuiInput-root .MuiInput-input': {
             padding: 0
-        },
-        '& $inputEndAdornment': {
-            marginBottom: '-8px'
         }
     },
     root: {
         '& $multiple': {
             flexWrap: 'wrap'
-        },
-        '& $multiple $inputEndAdornment': {
-            position: 'absolute',
-            right: 0,
-            bottom: 6,
-            height: 'auto'
         }
     },
-    inputEndAdornment: {
-        marginBottom: '-6px',
-        alignItems: 'center',
-        display: 'flex',
-    },
     inputWrapper: {
-        '&:hover $inputEndAdornment': {
-            visibility: 'visible'
-        },
         '&.Mui-focused $expandIcon': {
             opacity: 1
         }
@@ -142,7 +125,7 @@ export const selectStyles = theme => createStyles({
 });
 export const ListRow = React.memo(({ data: { children, selectAdornment }, index, style }) => {
     const inlineStyle = Object.assign(Object.assign({}, style), { top: style.top + 8, paddingLeft: 0, paddingRight: 0, whiteSpace: 'nowrap' });
-    return (React.createElement(ListItem, { button: true, style: inlineStyle }, (((selectAdornment === null || selectAdornment === void 0 ? void 0 : selectAdornment.position) === 'start' && index === 0)
+    return (React.createElement(ListItemButton, { style: inlineStyle }, (((selectAdornment === null || selectAdornment === void 0 ? void 0 : selectAdornment.position) === 'start' && index === 0)
         || ((selectAdornment === null || selectAdornment === void 0 ? void 0 : selectAdornment.position) === 'end' && index === children.length))
         ? selectAdornment.content
         : children[index]));

package/dist/formFields/UneditableBase.js

@@ -20,7 +20,7 @@ const useStyles = makeAppStyles({
     }
 });
 const UneditableBase = React.memo(props => {
-    const { label, labelAdornment, placeholder = 'No value', rightAligned, value, url, money, currencySymbol, className, format, multiline, error } = props;
+    const { label, labelAdornment, placeholder, rightAligned, value, url, money, currencySymbol, className, format, multiline, error } = props;
     const classes = useStyles();
     const inputId = `input-${label.toLowerCase().replace(' ', '-')}`;
     const openLink = useCallback(() => {

package/dist/model/Fields.d.ts

@@ -4,6 +4,7 @@ import { InputProps } from '@mui/material/Input/Input';
 import { AnyArgFunction } from '../model/CommonFunctions';
 import { ShowConfirmCaller } from '../model/Confirm';
 import { PopperPlacementType } from '@mui/material';
+import { FormControlTypeMap } from '@mui/material/FormControl/FormControl';
 export type EventHandler<Event> = (event: Event, name?: string) => void;
 export interface EventOrValueHandler<Event> extends EventHandler<Event> {
     (value: any): void;
@@ -65,6 +66,10 @@ export interface SelectItemRendererProps<E = any> {
     parentProps: any;
     search?: string;
 }
+export interface SelectItemDefault {
+    value?: any;
+    label?: string;
+}
 export interface ColoredCheckboxFieldProps<IP, MP> {
     input?: Partial<Omit<IP, 'onBlur'>> & {
         onBlur?: AnyArgFunction;
@@ -102,6 +107,8 @@ export interface EditInPlaceFieldProps<IP, MP> {
     onKeyDown?: any;
     multiline?: boolean;
     inline?: boolean;
+    editIcon?: ReactNode;
+    variant?: FormControlTypeMap['props']['variant'];
 }
 export interface EditInPlaceDateTimeFieldProps<IP, MP> {
     inputRef?: MutableRefObject<any>;
@@ -127,6 +134,7 @@ export interface EditInPlaceDateTimeFieldProps<IP, MP> {
     disabled?: boolean;
     persistValue?: boolean;
     rightAligned?: boolean;
+    variant?: FormControlTypeMap['props']['variant'];
 }
 export interface EditInPlaceSearchSelectFieldProps<IP, MP> {
     inputRef?: MutableRefObject<any>;
@@ -134,7 +142,7 @@ export interface EditInPlaceSearchSelectFieldProps<IP, MP> {
         onBlur?: AnyArgFunction;
     });
     meta?: Partial<MP>;
-    items?: any[];
+    items?: (SelectItemDefault | any)[];
     label?: ReactNode;
     disabled?: boolean;
     className?: string;
@@ -181,6 +189,8 @@ export interface EditInPlaceSearchSelectFieldProps<IP, MP> {
         position: 'start' | 'end';
         content: ReactElement;
     };
+    editIcon?: ReactNode;
+    variant?: FormControlTypeMap['props']['variant'];
 }
 export interface CodeFieldProps<IP, MP> {
     input?: Partial<Omit<IP, 'onBlur'>> & {

package/dist/tagsInput/TagInputList.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { FieldInputProps, FieldMetaProps, TagLike, TagsFieldProps } from '../model';
-declare function TagInputList<T extends TagLike, IP extends FieldInputProps, MP extends FieldMetaProps>({ input, tags, placeholder, labelAdornment, meta, label, disabled, className, warning, allowParentSelect, fieldClasses }: TagsFieldProps<T, IP, MP>): React.JSX.Element;
+declare function TagInputList<T extends TagLike, IP extends FieldInputProps, MP extends FieldMetaProps>({ input, tags, placeholder, labelAdornment, meta, label, disabled, className, warning, allowParentSelect, fieldClasses, editIcon, variant }: TagsFieldProps<T, IP, MP>): React.JSX.Element;
 export default TagInputList;

package/dist/tagsInput/TagInputList.js

@@ -25,19 +25,10 @@ import { Edit } from '@mui/icons-material';
 import { selectStyles } from '../formFields';
 import AddTagMenu from './AddTagMenu';
 import EditInPlaceFieldBase from '../formFields/EditInPlaceFieldBase';
-import { getAllMenuTags, getHighlightedPartLabel, getMenuTags } from '../utils';
-import { stubComponent } from '../utils/stubs';
+import { getAllMenuTags, getHighlightedPartLabel, getMenuTags, stubComponent } from '../utils';
 import getCaretCoordinates from '../utils/DOM/getCaretCoordinates';
 import { makeAppStyles } from '../styles';
-const useStyles = makeAppStyles((theme) => (Object.assign(Object.assign({}, selectStyles(theme)), { inputEndAdornment: {
-        visibility: 'hidden',
-        display: 'flex',
-        color: theme.palette.primary.main,
-        alignItems: 'flex-end',
-        alignSelf: 'flex-end',
-        marginBottom: '4px',
-        opacity: 0.5
-    }, tagColorDotSmall: {
+const useStyles = makeAppStyles((theme) => (Object.assign(Object.assign({}, selectStyles(theme)), { tagColorDotSmall: {
         width: theme.spacing(2),
         minWidth: theme.spacing(2),
         height: theme.spacing(2),
@@ -46,6 +37,8 @@ const useStyles = makeAppStyles((theme) => (Object.assign(Object.assign({}, sele
         borderRadius: '100%'
     }, listbox: {
         whiteSpace: 'break-spaces'
+    }, editIcon: {
+        opacity: 0.5
     }, invalid: {} })));
 const endTagRegex = /#\s*[^\w\d]*$/;
 const getCurrentInputString = (input, formTagIds = [], allMenuTags = []) => {
@@ -84,7 +77,7 @@ const getInputString = (tagIds, allTags) => ((tagIds === null || tagIds === void
         return (tag ? `${acc}#${tag.name} ` : acc);
     }, '')
     : '');
-function TagInputList({ input, tags, placeholder, labelAdornment, meta, label = 'Tags', disabled, className, warning, allowParentSelect, fieldClasses = {} }) {
+function TagInputList({ input, tags, placeholder, labelAdornment, meta, label = 'Tags', disabled, className, warning, allowParentSelect, fieldClasses = {}, editIcon, variant }) {
     const [menuIsOpen, setMenuIsOpen] = useState(false);
     const [activeTag, setActiveTag] = useState(null);
     const [isEditing, setIsEditing] = useState(false);
@@ -256,17 +249,17 @@ function TagInputList({ input, tags, placeholder, labelAdornment, meta, label =
                     inputRoot: classes.inputWrapper,
                     noOptions: 'd-none'
                 }, renderInput: (_a) => {
-                    var { InputLabelProps, InputProps, inputProps } = _a, params = __rest(_a, ["InputLabelProps", "InputProps", "inputProps"]);
-                    return (React.createElement(EditInPlaceFieldBase, Object.assign({}, params, { name: input.name, value: input.value, error: meta.error, invalid: meta === null || meta === void 0 ? void 0 : meta.invalid, label: label, warning: warning, disabled: disabled, fieldClasses: fieldClasses, shrink: Boolean(label || input.value), labelAdornment: labelAdornment, placeholder: placeholder || 'No value', editIcon: React.createElement(Edit, { fontSize: "inherit" }), InputProps: Object.assign(Object.assign({}, InputProps), { onChange: handleInputChange, onFocus,
+                    var { InputProps, inputProps } = _a, params = __rest(_a, ["InputProps", "inputProps"]);
+                    return (React.createElement(EditInPlaceFieldBase, Object.assign({}, params, { variant: variant, name: input.name, value: input.value, error: meta.error, invalid: meta === null || meta === void 0 ? void 0 : meta.invalid, label: label, warning: warning, disabled: disabled, fieldClasses: fieldClasses, shrink: Boolean(label || input.value), labelAdornment: labelAdornment, placeholder: placeholder, editIcon: editIcon === undefined ? React.createElement(Edit, null) : editIcon, InputProps: Object.assign(Object.assign({}, InputProps), { onChange: handleInputChange, onFocus,
                             onBlur, inputProps: Object.assign(Object.assign({}, inputProps), { ref: ref => {
                                     inputProps.ref.current = ref;
                                     inputNode.current = ref;
                                 }, value: inputValue }) }), CustomInput: !isEditing
                             ? React.createElement(Select, { inputRef: ref => {
                                     inputProps.ref.current = ref === null || ref === void 0 ? void 0 : ref.node;
-                                }, onFocus: edit, value: "stub", className: classes.inputWrapper, classes: { select: 'd-flex flex-wrap cursor-text' }, endAdornment: React.createElement(InputAdornment, { position: "end", className: classes.inputEndAdornment },
-                                    React.createElement(Edit, null)), IconComponent: stubComponent },
-                                React.createElement(MenuItem, { value: "stub" }, InputValueForRender || React.createElement("span", { className: "placeholderContent" }, placeholder || 'No value')))
+                                }, onFocus: edit, value: "stub", className: classes.inputWrapper, classes: { select: 'd-flex flex-wrap cursor-text' }, endAdornment: React.createElement(InputAdornment, { position: "end", className: clsx(classes.editIcon, 'invisible') },
+                                    React.createElement(Edit, { className: "test" })), IconComponent: stubComponent },
+                                React.createElement(MenuItem, { value: "stub" }, InputValueForRender || React.createElement("span", { className: "placeholderContent" }, placeholder)))
                             : null })));
                 }, popupIcon: stubComponent(), disableListWrap: true, openOnFocus: true }))));
 }

package/dist/themes/ishTheme.js

@@ -69,6 +69,9 @@ const createOverrides = (palette) => ({
         },
         MuiSelect: {
             styleOverrides: {
+                outlined: {
+                    padding: 'inherit'
+                },
                 select: {
                     '&:focus': {
                         backgroundColor: 'none',
@@ -87,6 +90,12 @@ const createOverrides = (palette) => ({
         MuiInputBase: {
             styleOverrides: {
                 root: {
+                    '& .MuiInputAdornment-positionEnd.MuiInputAdornment-standard': {
+                        color: palette.primary.main
+                    },
+                    '&.Mui-focused .MuiInputAdornment-positionEnd.MuiInputAdornment-standard': {
+                        opacity: 1
+                    },
                     maxWidth: '100%',
                     width: '100%',
                     MuiInput: {
@@ -167,7 +176,15 @@ const createOverrides = (palette) => ({
         },
         MuiAutocomplete: {
             styleOverrides: {
+                root: {
+                    '& .MuiOutlinedInput-root': {
+                        padding: 'inherit'
+                    }
+                },
                 inputRoot: {
+                    '& .MuiInputAdornment-outlined': {
+                        paddingRight: 12
+                    },
                     flexWrap: 'inherit',
                 }
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ish-ui",
-  "version": "1.0.22",
+  "version": "1.0.24",
   "description": "UI elements for onCourse and other ish apps",
   "main": "main.ts",
   "devDependencies": {
@@ -93,7 +93,7 @@
   "scripts": {
     "test": "exit 0",
     "start": "cross-env NODE_ENV=development webpack serve --config tools/webpack/webpack.config.dev.js",
-    "build": "tsc && tsc-alias",
+    "build": "tsc -p tsconfig.prod.json && tsc-alias",
     "serve": "cross-env NODE_ENV=production webpack --config tools/webpack/webpack.config.prod.js && cross-env serve dist/",
     "lint": "eslint --ext .js,.jsx,.ts,.tsx src/"
   },

package/tsconfig.prod.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig",
+  "exclude": [
+    "./dev"
+  ]
+}