ish-ui 1.0.0-alpha.12

package/dist/formFields/EditInPlaceFieldBase.js

@@ -0,0 +1,123 @@
+/*
+ * Copyright ish group pty ltd 2023.
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License version 3 as published by the Free Software Foundation.
+ *
+ *  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
+ */
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import clsx from 'clsx';
+import { FilledInput, FormControl, FormHelperText, Input, InputAdornment, InputLabel, OutlinedInput } from '@mui/material';
+import { makeAppStyles } from '../styles';
+import WarningMessage from '../fieldMessage/WarningMessage';
+import { countWidth } from '../utils';
+const useStyles = makeAppStyles(theme => ({
+    label: {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        maxWidth: '100%',
+        marginRight: theme.spacing(0.5)
+    },
+    rightLabel: {
+        left: 'unset',
+        right: theme.spacing(-2),
+        '& $label': {
+            marginRight: 0
+        }
+    },
+    inputWrapper: {
+        paddingBottom: 0,
+        '&:hover .d-none': {
+            display: 'flex',
+        },
+        '&:hover .invisible': {
+            visibility: 'visible',
+        },
+        '& .Mui-focused $inputEndAdornment': {
+            opacity: 1,
+        }
+    },
+    hideArrows: {
+        '&::-webkit-outer-spin-button': {
+            '-webkit-appearance': 'none',
+            margin: 0
+        },
+        '&::-webkit-inner-spin-button': {
+            '-webkit-appearance': 'none',
+            margin: 0
+        },
+        '-moz-appearance': 'textfield'
+    },
+    inlineInput: {
+        padding: 0,
+        fontSize: 'inherit',
+    },
+    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' }) => {
+    const [inputWidth, setInputWidth] = useState();
+    const classes = useStyles();
+    const inputNode = useRef();
+    const onAdornmentClick = () => {
+        inputNode.current.focus();
+    };
+    useEffect(() => {
+        if (inline && inputNode.current) {
+            setInputWidth(countWidth(value || placeholder, inputNode.current) + 1);
+        }
+    }, [value]);
+    const InputComp = useMemo(() => {
+        switch (variant) {
+            default:
+            case 'standard':
+                return Input;
+            case 'filled':
+                return FilledInput;
+            case 'outlined':
+                return OutlinedInput;
+        }
+    }, [variant]);
+    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),
+            }, shrink: shrink, htmlFor: `input-${name}` },
+            React.createElement("span", { className: classes.label }, label),
+            labelAdornment)),
+        CustomInput ||
+            React.createElement(InputComp, Object.assign({}, InputProps || {}, { label: label, inputRef: inputNode, inputProps: Object.assign({ placeholder,
+                    disabled, className: clsx(fieldClasses.text, {
+                        [classes.inlineInput]: inline,
+                        [classes.readonly]: disabled,
+                        [classes.hideArrows]: hideArrows,
+                        'text-end': rightAligned
+                    }), style: {
+                        width: inline && !invalid ? inputWidth : undefined
+                    } }, (InputProps === null || InputProps === void 0 ? void 0 : InputProps.inputProps) || {}), classes: {
+                    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, {
+                            ['fsInherit']: inline,
+                            ['d-none']: (rightAligned || inline),
+                            ['invisible']: !(rightAligned || inline)
+                        }) }, editIcon), id: `input-${name}`, name: name })),
+        React.createElement(FormHelperText, { classes: {
+                root: clsx(rightAligned && 'text-end'),
+                error: 'shakingError'
+            } },
+            error,
+            warning && React.createElement(WarningMessage, { warning: warning }))));
+};
+export default EditInPlaceFieldBase;

package/dist/formFields/EditInPlaceFileField.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Wrapper component for Material Select and Text Field with edit in plaxce functional
+ * */
+import React from 'react';
+import { EditInPlaceFieldProps, FieldInputProps, FieldMetaProps } from '../model';
+declare function EditInPlaceFileField<InputProps extends FieldInputProps, MetaProps extends FieldMetaProps>({ input, ...restProps }: EditInPlaceFieldProps<InputProps, MetaProps>): React.JSX.Element;
+export default EditInPlaceFileField;

package/dist/formFields/EditInPlaceFileField.js

@@ -0,0 +1,60 @@
+/*
+ * Copyright ish group pty ltd 2023.
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License version 3 as published by the Free Software Foundation.
+ *
+ *  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
+ */
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+/**
+ * Wrapper component for Material Select and Text Field with edit in plaxce functional
+ * */
+import React, { useRef } from 'react';
+import AttachmentIcon from '@mui/icons-material/Attachment';
+import InputAdornment from '@mui/material/InputAdornment';
+import EditInPlaceField from './EditInPlaceField';
+import { stubFunction } from '../utils';
+function EditInPlaceFileField(_a) {
+    var { input } = _a, restProps = __rest(_a, ["input"]);
+    const inputRef = useRef();
+    const fileRef = useRef();
+    const handleFileSelect = e => {
+        if (e.target.files[0]) {
+            input.onChange(e.target.files[0]);
+            fileRef.current.value = null;
+            inputRef.current.blur();
+        }
+    };
+    const onFocus = () => {
+        fileRef.current.click();
+        setTimeout(() => {
+            inputRef.current.blur();
+        }, 200);
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("input", { type: "file", ref: fileRef, onChange: handleFileSelect, className: "d-none" }),
+        React.createElement(EditInPlaceField, Object.assign({}, restProps, { input: {
+                onChange: stubFunction,
+                onFocus: stubFunction,
+                onBlur: stubFunction
+            }, InputProps: {
+                startAdornment: React.createElement(InputAdornment, { position: "start" },
+                    React.createElement(AttachmentIcon, null)),
+                onFocus,
+                inputProps: {
+                    ref: inputRef
+                },
+                value: input.value ? input.value.name : '',
+            } }))));
+}
+export default EditInPlaceFileField;

package/dist/formFields/EditInPlaceMoneyField.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { EditInPlaceFieldProps } from '../model';
+import { Dispatch } from 'redux';
+interface Props<InputProps, MetaProps> extends EditInPlaceFieldProps<InputProps, MetaProps> {
+    currencySymbol: string;
+    dispatch?: Dispatch;
+}
+declare function EditInPlaceMoneyField<IP, MP>({ InputProps, currencySymbol, dispatch, className, ...restProps }: Props<IP, MP>): React.JSX.Element;
+export default EditInPlaceMoneyField;

package/dist/formFields/EditInPlaceMoneyField.js

@@ -0,0 +1,37 @@
+/*
+ * Copyright ish group pty ltd 2023.
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License version 3 as published by the Free Software Foundation.
+ *
+ *  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
+ */
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useCallback } from 'react';
+import { NumericFormat } from 'react-number-format';
+import InputAdornment from '@mui/material/InputAdornment';
+import clsx from 'clsx';
+import EditInPlaceField from './EditInPlaceField';
+import { formatCurrency, normalizeNumber } from '../utils';
+const NumberFormatCustom = React.forwardRef((props, ref) => {
+    const { onChange, allowNegative = true } = props, other = __rest(props, ["onChange", "allowNegative"]);
+    const onValueChange = useCallback(values => {
+        onChange(normalizeNumber(values.value));
+    }, []);
+    return (React.createElement(NumericFormat, Object.assign({}, other, { getInputRef: ref, onValueChange: onValueChange, allowNegative: allowNegative, decimalScale: 2, thousandSeparator: true })));
+});
+const preformatDisplayValue = value => value || value === 0 ? formatCurrency(value, '') : value;
+function EditInPlaceMoneyField(_a) {
+    var { InputProps, currencySymbol, dispatch, className } = _a, restProps = __rest(_a, ["InputProps", "currencySymbol", "dispatch", "className"]);
+    return (React.createElement(EditInPlaceField, Object.assign({}, restProps, { preformatDisplayValue: preformatDisplayValue, InputProps: Object.assign(Object.assign({}, InputProps), { startAdornment: React.createElement(InputAdornment, { position: "start" }, currencySymbol), inputComponent: NumberFormatCustom }), className: clsx('money', className) })));
+}
+export default EditInPlaceMoneyField;

package/dist/formFields/EditInPlacePhoneField.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { EditInPlaceFieldProps, FieldInputProps, FieldMetaProps } from '../model';
+declare function EditInPlacePhoneField<FP extends FieldInputProps, MP extends FieldMetaProps>({ InputProps, className, ...restProps }: EditInPlaceFieldProps<FP, MP>): React.JSX.Element;
+export default EditInPlacePhoneField;

package/dist/formFields/EditInPlacePhoneField.js

@@ -0,0 +1,69 @@
+/*
+ * Copyright ish group pty ltd 2023.
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License version 3 as published by the Free Software Foundation.
+ *
+ *  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
+ */
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { PatternFormat } from 'react-number-format';
+import InputAdornment from '@mui/material/InputAdornment';
+import PhoneIcon from '@mui/icons-material/Phone';
+import debounce from 'lodash.debounce';
+import EditInPlaceField from './EditInPlaceField';
+import { getPhoneMask } from '../utils';
+const NumberFormatCustom = React.forwardRef((props, ref) => {
+    const { onChange } = props, other = __rest(props, ["onChange"]);
+    const inputRef = useRef();
+    const [format, setFormat] = useState(null);
+    const [prefix, setPrefix] = useState(undefined);
+    const processFormat = useCallback(debounce(data => {
+        setFormat(getPhoneMask(data.value));
+        if (!data.value) {
+            setPrefix(undefined);
+        }
+        if (data.formattedValue.startsWith('+') && prefix !== '+') {
+            setPrefix('+');
+        }
+    }, 500), []);
+    const onValueChange = useCallback(data => {
+        var _a;
+        onChange(((_a = data.formattedValue) === null || _a === void 0 ? void 0 : _a.replace(/[^0-9+]/g, '')) || null);
+        processFormat(data);
+    }, []);
+    useEffect(() => {
+        if (other.value) {
+            setFormat(getPhoneMask(other.value));
+        }
+    }, []);
+    const onKeyPress = e => {
+        if (e.key === '+') {
+            inputRef.current._valueTracker.setValue('+');
+            if (prefix !== '+') {
+                setPrefix('+');
+            }
+        }
+    };
+    const getInputRef = input => {
+        ref = input;
+        inputRef.current = input;
+    };
+    return (React.createElement(PatternFormat, Object.assign({}, other, { getInputRef: getInputRef, onKeyPress: onKeyPress, prefix: prefix, onValueChange: onValueChange, format: format, type: "text" })));
+});
+function EditInPlacePhoneField(_a) {
+    var { InputProps, className } = _a, restProps = __rest(_a, ["InputProps", "className"]);
+    return (React.createElement(EditInPlaceField, Object.assign({}, restProps, { InputProps: Object.assign(Object.assign({}, InputProps), { startAdornment: React.createElement(InputAdornment, { position: "start" },
+                React.createElement(PhoneIcon, null)), inputComponent: NumberFormatCustom }), className: className })));
+}
+export default EditInPlacePhoneField;

package/dist/formFields/EditInPlaceSearchSelect.d.ts

@@ -0,0 +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;
+export default EditInPlaceSearchSelect;

package/dist/formFields/EditInPlaceSearchSelect.js

@@ -0,0 +1,321 @@
+/*
+ * Copyright ish group pty ltd 2023.
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License version 3 as published by the Free Software Foundation.
+ *
+ *  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
+ */
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import CircularProgress from '@mui/material/CircularProgress';
+import Popper from '@mui/material/Popper';
+import { Autocomplete, IconButton, InputAdornment, Select } from '@mui/material';
+import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import CloseIcon from '@mui/icons-material//Close';
+import clsx from 'clsx';
+import ExpandMore from '@mui/icons-material/ExpandMore';
+import { ListboxComponent, selectStyles } from './SelectCustomComponents';
+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: {
+        zIndex: 1400
+    } }, selectStyles(theme))));
+const SelectContext = React.createContext({});
+const ListBoxAdapter = React.forwardRef((_a, ref) => {
+    var { children } = _a, other = __rest(_a, ["children"]);
+    const { rowHeight, remoteRowCount, loadMoreRows, classes, fieldClasses = {}, loading, selectAdornment } = useContext(SelectContext);
+    return (React.createElement(ListboxComponent, Object.assign({ rowHeight: rowHeight, remoteRowCount: remoteRowCount, loadMoreRows: loadMoreRows, classes: classes, fieldClasses: fieldClasses, loading: loading, selectAdornment: selectAdornment, ref: ref }, other), children));
+});
+const PopperAdapter = React.memo(params => {
+    const { hideMenuOnNoResults, items, popperAnchor, inline } = useContext(SelectContext);
+    return (hideMenuOnNoResults && !items.length
+        ? null
+        : popperAnchor
+            // @ts-ignore
+            ? React.createElement(Popper, Object.assign({}, params, { style: Object.assign(Object.assign({}, params.style), { width: popperAnchor.clientWidth }), anchorEl: popperAnchor }))
+            // @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 }) {
+    const classes = useStyles();
+    const sortedItems = useMemo(() => {
+        const sorted = items && (sort
+            ? [...items].sort(typeof sort === 'function'
+                ? sort
+                : (aOption, bOption) => {
+                    const aLabel = selectLabelCondition ? selectLabelCondition(aOption) : aOption[sortPropKey || selectLabelMark];
+                    const bLabel = selectLabelCondition ? selectLabelCondition(bOption) : bOption[sortPropKey || selectLabelMark];
+                    return (aLabel.toLowerCase()).localeCompare(bLabel.toLowerCase());
+                })
+            : [...items]);
+        if (categoryKey) {
+            sorted.sort((aOption, bOption) => (aOption[categoryKey].toLowerCase()).localeCompare(bOption[categoryKey].toLowerCase()));
+        }
+        return sorted;
+    }, [items, selectLabelCondition, selectLabelMark, sortPropKey, categoryKey]);
+    const inputNode = useRef(null);
+    const [searchValue, setSearchValue] = useState('');
+    const [isEditing, setIsEditing] = useState(false);
+    const [formattedDisplayValue, setFormattedDisplayValue] = useState('');
+    const prevDefaultDisplayValue = usePrevious(defaultValue);
+    useEffect(() => {
+        if (formattedDisplayValue && !input.value) {
+            setFormattedDisplayValue(null);
+        }
+    }, [formattedDisplayValue, input.value, input.name]);
+    useEffect(() => {
+        if (selectLabelCondition && formattedDisplayValue && defaultValue !== prevDefaultDisplayValue) {
+            setFormattedDisplayValue(null);
+        }
+        if (selectLabelCondition && !defaultValue) {
+            const selected = sortedItems.find(i => getOptionSelected(i, input.value));
+            if (selected) {
+                setFormattedDisplayValue(selectLabelCondition(selected));
+            }
+        }
+    }, [selectLabelCondition, formattedDisplayValue, defaultValue, sortedItems, input.value]);
+    const onBlur = () => {
+        setIsEditing(false);
+        if (!hideMenuOnNoResults) {
+            setSearchValue('');
+        }
+        if (remoteData) {
+            onInputChange('');
+            onClearRows();
+        }
+    };
+    const formatCreateLabel = inputValue => `${createLabel} "${inputValue}"`;
+    const filterItems = items => {
+        let filtered = [];
+        if (!Array.isArray(items))
+            return filtered;
+        if (!searchValue || remoteData)
+            return items;
+        const searchRegexp = new RegExp(searchValue.replace(',', '')
+            // eslint-disable-next-line no-useless-escape
+            .replace(/[\[\]\{\}\(\)\*]/g, '\\$&')
+            .trim().toLowerCase());
+        if (typeof selectFilterCondition === 'function') {
+            filtered = items.filter(item => {
+                const label = selectFilterCondition(item);
+                if (!label) {
+                    return false;
+                }
+                return searchRegexp.test(label.trim().toLowerCase());
+            });
+        }
+        else if (typeof selectLabelCondition === 'function') {
+            filtered = items.filter(item => {
+                const label = selectLabelCondition(item);
+                if (!label) {
+                    return false;
+                }
+                return searchRegexp.test(label.trim().toLowerCase());
+            });
+        }
+        else {
+            filtered = items.filter(item => item[selectLabelMark]
+                && searchRegexp.test(item[selectLabelMark].toLowerCase().trim()));
+        }
+        if (creatable) {
+            filtered.push({
+                [selectLabelMark]: formatCreateLabel(searchValue),
+                [selectValueMark]: searchValue,
+                createdOption: true
+            });
+        }
+        return filtered;
+    };
+    const edit = () => {
+        setIsEditing(true);
+        setTimeout(() => { var _a; return (_a = inputNode === null || inputNode === void 0 ? void 0 : inputNode.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 50);
+    };
+    const onClear = () => {
+        if (remoteData) {
+            onInputChange('');
+            onClearRows();
+        }
+        if (typeof onInnerValueChange === 'function') {
+            onInnerValueChange(null);
+        }
+        if (input && input.onChange) {
+            input.onChange(null);
+        }
+        setSearchValue('');
+        setIsEditing(false);
+        setFormattedDisplayValue(null);
+    };
+    const onEditButtonFocus = () => {
+        if (disabled) {
+            return;
+        }
+        edit();
+    };
+    const onCreateOptionInner = value => {
+        delete value.createdOption;
+        onCreateOption(value[selectValueMark]);
+        onBlur();
+    };
+    const handleChange = (e, value, reason) => {
+        if (reason === 'clear') {
+            return;
+        }
+        if (creatable && value && value.createdOption) {
+            onCreateOptionInner(value);
+        }
+        if (typeof onInnerValueChange === 'function') {
+            onInnerValueChange(value);
+        }
+        if (selectLabelCondition && returnType !== 'object') {
+            setFormattedDisplayValue(selectLabelCondition(value));
+        }
+        let newValue = value[selectValueMark];
+        if (returnType === 'object') {
+            newValue = (Object.keys(value).length ? value : null);
+        }
+        if (multiple) {
+            newValue = value.map(v => v[selectValueMark]);
+            if (!newValue.length) {
+                newValue = null;
+            }
+        }
+        input.onChange(newValue);
+        setTimeout(() => {
+            onBlur();
+            input === null || input === void 0 ? void 0 : input.onBlur(newValue);
+        }, 100);
+    };
+    const handleInputChange = e => {
+        setSearchValue(e.target.value);
+        if (onInputChange) {
+            onInputChange(e.target.value);
+        }
+        if (remoteData && !e.target.value) {
+            onClearRows();
+        }
+    };
+    const getOptionLabel = option => (selectLabelCondition ? selectLabelCondition(option) : option && option[selectLabelMark]) || '';
+    const getOptionSelected = (option, value) => {
+        if (multiple || returnType === 'object') {
+            return option[selectValueMark] === value[selectValueMark];
+        }
+        return option[selectValueMark] === value;
+    };
+    const renderOption = (optionProps, data) => {
+        if (typeof itemRenderer === 'function') {
+            return itemRenderer(getHighlightedPartLabel(getOptionLabel(data), searchValue), data, searchValue, optionProps);
+        }
+        return getHighlightedPartLabel(getOptionLabel(data), searchValue, optionProps);
+    };
+    const selectedOption = useMemo(() => sortedItems.find(i => multiple
+        ? (input.value || []).includes(i[selectValueMark])
+        : getOptionSelected(i, input.value)), [sortedItems, multiple, selectValueMark, input.value]);
+    const displayedValue = useMemo(() => {
+        let response;
+        if (selectLabelCondition) {
+            response = returnType === 'object' ? selectLabelCondition(input.value) : formattedDisplayValue || defaultValue;
+        }
+        else if (returnType === 'object') {
+            response = input.value && input.value[selectLabelMark];
+        }
+        else {
+            response = getOptionLabel(selectedOption) || defaultValue || input.value;
+        }
+        if (alwaysDisplayDefault) {
+            response = defaultValue;
+        }
+        return (![null, undefined].includes(input.value)
+            ? response
+            : null);
+    }, [
+        formattedDisplayValue,
+        selectedOption,
+        selectLabelCondition,
+        alwaysDisplayDefault,
+        returnType,
+        defaultValue,
+        selectLabelMark,
+        input.value,
+        classes
+    ]);
+    const renderValue = useMemo(() => {
+        const valueForRender = returnType === 'object'
+            ? input.value
+            : selectedOption;
+        return valueRenderer
+            ? valueRenderer(displayedValue, valueForRender, searchValue, { value: valueForRender && valueForRender[selectValueMark] })
+            : null;
+    }, [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 },
+            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]);
+    const inputValue = useMemo(() => {
+        if (multiple) {
+            return (input.value || []).map(v => sortedItems.find(s => s[selectValueMark] === v));
+        }
+        return input.value || null;
+    }, [input.value, multiple, selectValueMark, sortedItems]);
+    const renderedPlaceholder = useMemo(() => {
+        const rendered = placeholder || (!isEditing ? 'No value' : '');
+        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 },
+        React.createElement(SelectContext.Provider, { value: {
+                rowHeight,
+                remoteRowCount,
+                loadMoreRows,
+                classes,
+                fieldClasses,
+                hideMenuOnNoResults,
+                inline,
+                items,
+                popperAnchor,
+                loading,
+                selectAdornment
+            } },
+            React.createElement(Autocomplete, { blurOnSelect: !multiple, disableCloseOnSelect: multiple, multiple: multiple, value: inputValue, options: sortedItems, loading: loading, freeSolo: creatable, disabled: disabled, disableClearable: !allowEmpty, isOptionEqualToValue: getOptionSelected, onChange: handleChange, classes: {
+                    root: clsx('d-inline-flex', classes.root),
+                    hasPopupIcon: classes.hasPopup,
+                    hasClearIcon: classes.hasClear,
+                    inputRoot: clsx(classes.inputWrapper, multiple && classes.multiple),
+                    option: 'w-100 text-pre',
+                    popper: classes.popper,
+                    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,
+                            disableUnderline, classes: {
+                                underline: fieldClasses.underline,
+                                input: clsx(disabled && classes.readonly, fieldClasses.text),
+                            }, inputProps: Object.assign(Object.assign({}, inputProps), { className: clsx(fieldClasses.text, 'mr-auto'), ref: ref => {
+                                    inputProps.ref.current = ref;
+                                    inputNode.current = ref;
+                                    if (inputRef)
+                                        inputRef.current = ref;
+                                }, value: (isEditing ? searchValue : multiple ? '' : (typeof displayedValue === 'string' ? displayedValue : '')) }) }), CustomInput: (valueRenderer && !multiple && !isEditing && input.value)
+                            ?
+                                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)
+                            : null })));
+                }, disableListWrap: true, openOnFocus: true, fullWidth: true }))));
+}
+export default EditInPlaceSearchSelect;

package/dist/formFields/FieldAdornments.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { IconButtonTypeMap } from '@mui/material';
+interface Props {
+    link?: string | number;
+    linkHandler?: (arg: string | number) => void;
+    linkColor?: IconButtonTypeMap['props']['color'];
+    clickHandler?: any;
+    className?: string;
+    disabled?: boolean;
+}
+export declare const LinkAdornment: ({ link, linkColor, linkHandler, clickHandler, className, disabled }: Props) => React.JSX.Element;
+export declare const SettingsAdornment: ({ link, linkHandler, clickHandler, className, disabled }: Props) => React.JSX.Element;
+export {};