ish-ui 1.0.23 → 1.0.24

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, variant, }) {
+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);
@@ -170,7 +164,7 @@ function EditInPlaceDateTimeField({ type, formatDate, formatTime, formatDateTime
         }) },
         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, 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(fieldClasses.text, inline ? classes.inlinePickerButton : classes.pickerButton)
+                            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.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 = {}, editIcon, variant }) {
+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, 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: "inherit" }) : editIcon, 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' }) => {
@@ -89,10 +78,6 @@ const EditInPlaceFieldBase = ({ value, invalid, className, inline, label, fieldC
                 return OutlinedInput;
         }
     }, [variant]);
-    console.log('!!!!!!', {
-        label,
-        InputProps
-    });
     return (React.createElement(FormControl, { fullWidth: true, error: invalid, variant: variant, margin: "none", className: clsx(className, classes.inputWrapper) },
         label && (React.createElement(InputLabel, { classes: {
                 root: clsx(fieldClasses.label, 'd-flex', 'overflow-visible', rightAligned && classes.rightLabel),
@@ -112,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.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({});
@@ -262,7 +259,7 @@ 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" }))),
             editIcon === undefined ? React.createElement(IconButton, { size: "small", color: "inherit", className: clsx(classes.expandIcon, 'pl-0 pr-0'), disableRipple: true },
@@ -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, { variant: variant, 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/tagsInput/TagInputList.js

@@ -28,15 +28,7 @@ import EditInPlaceFieldBase from '../formFields/EditInPlaceFieldBase';
 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),
@@ -45,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 = []) => {
@@ -256,16 +250,16 @@ function TagInputList({ input, tags, placeholder, labelAdornment, meta, label =
                     noOptions: 'd-none'
                 }, renderInput: (_a) => {
                     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 || 'No value', editIcon: editIcon === undefined ? React.createElement(Edit, { fontSize: "inherit" }) : editIcon, InputProps: Object.assign(Object.assign({}, InputProps), { onChange: handleInputChange, onFocus,
+                    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

@@ -90,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: {
@@ -170,7 +176,15 @@ const createOverrides = (palette) => ({
         },
         MuiAutocomplete: {
             styleOverrides: {
+                root: {
+                    '& .MuiOutlinedInput-root': {
+                        padding: 'inherit'
+                    }
+                },
                 inputRoot: {
+                    '& .MuiInputAdornment-outlined': {
+                        paddingRight: 12
+                    },
                     flexWrap: 'inherit',
                 }
             }
@@ -181,7 +195,7 @@ const createOverrides = (palette) => ({
                     marginLeft: 0
                 }
             }
-        },
+        }
     }
 });
 const commonTypography = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ish-ui",
-  "version": "1.0.23",
+  "version": "1.0.24",
   "description": "UI elements for onCourse and other ish apps",
   "main": "main.ts",
   "devDependencies": {