ish-ui 1.0.21 → 1.0.23

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

@@ -37,7 +37,7 @@ const useStyles = makeAppStyles(theme => ({
         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 = 'No value', persistValue, warning, defaultValue, rightAligned, processActionId, variant, }) {
     const [textValue, setTextValue] = useState(defaultValue || '');
     const [pickerOpened, setPickerOpened] = useState(false);
     const inputNode = useRef(null);
@@ -169,7 +169,7 @@ 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: {
+            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)
                         } }, type === 'time'
                         ? React.createElement(QueryBuilder, { fontSize: "inherit", color: "inherit" })

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 = 'No value', 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: "inherit" }) : editIcon, InputProps: Object.assign({ multiline,
                 onKeyPress,
                 onBlur, onFocus: input.onFocus, maxRows: truncateLines, inputProps: {
                     ref: inputRef,

package/dist/formFields/EditInPlaceFieldBase.js

@@ -89,6 +89,10 @@ 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),
@@ -96,7 +100,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,

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

@@ -50,7 +50,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
@@ -265,8 +265,8 @@ function EditInPlaceSearchSelect({ label, disabled, className, labelAdornment, i
         : (React.createElement("div", { className: classes.inputEndAdornment },
             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));
@@ -301,7 +301,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, 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,
                             disableUnderline, classes: {
                                 underline: fieldClasses.underline,
                                 input: clsx(disabled && classes.readonly, fieldClasses.text),

package/dist/model/CommomObjects.d.ts

@@ -3,3 +3,4 @@ export type StringKeyObject<V = any> = {
 };
 export type StringKeyAndValueObject = StringKeyObject<string>;
 export type StringValueType<T extends ReadonlyArray<unknown>> = T extends ReadonlyArray<infer ElementType> ? ElementType : never;
+export type ArgumentTypes<F extends Function> = F extends (...args: infer A) => any ? A : never;

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,8 +25,7 @@ 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: {
@@ -84,7 +83,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,8 +255,8 @@ 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 || 'No value', editIcon: editIcon === undefined ? React.createElement(Edit, { fontSize: "inherit" }) : 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;

package/dist/themes/ishTheme.js

@@ -69,6 +69,9 @@ const createOverrides = (palette) => ({
         },
         MuiSelect: {
             styleOverrides: {
+                outlined: {
+                    padding: 'inherit'
+                },
                 select: {
                     '&:focus': {
                         backgroundColor: 'none',
@@ -178,7 +181,7 @@ const createOverrides = (palette) => ({
                     marginLeft: 0
                 }
             }
-        }
+        },
     }
 });
 const commonTypography = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ish-ui",
-  "version": "1.0.21",
+  "version": "1.0.23",
   "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"
+  ]
+}