ish-ui 1.0.19 → 1.0.21

package/dist/formFields/ColoredCheckBox.js

@@ -0,0 +1,41 @@
+/*
+ * 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, { useCallback, useRef } from 'react';
+import { ButtonBase, Typography } from '@mui/material';
+import clsx from 'clsx';
+import { alpha } from '@mui/material/styles';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useAppTheme } from '../themes';
+import { rgbToHex } from '@mui/system/colorManipulator';
+import { getCheckboxValue } from '../utils';
+export function ColoredCheckBox({ input, label, color, className, disabled }) {
+    const theme = useAppTheme();
+    const inputRef = useRef();
+    const onClick = useCallback(() => {
+        inputRef.current.click();
+    }, [inputRef.current]);
+    if (disabled) {
+        color = rgbToHex(theme.palette.divider);
+    }
+    return (React.createElement("div", { className: clsx('centeredFlex cursor-pointer', className), onClick: onClick },
+        React.createElement("input", Object.assign({ ref: inputRef, type: "checkbox" }, input, { checked: getCheckboxValue(input.value, false), hidden: true })),
+        React.createElement(ButtonBase, { component: "div", disabled: disabled, sx: {
+                width: theme => theme.spacing(3),
+                height: theme => theme.spacing(3),
+                border: `2px solid ${color}`,
+                borderRadius: '50%',
+                fontSize: '10px',
+                backgroundColor: input.value ? `${color}` : alpha(`${color}`, 0.1),
+                color: theme => theme.palette.getContrastText(`${color}`)
+            } }, input.value && React.createElement(FontAwesomeIcon, { fixedWidth: true, icon: "check" })),
+        label && React.createElement(Typography, { variant: "caption", fontWeight: "400", sx: {
+                marginLeft: 1,
+                textDecoration: input.value ? 'line-through' : 'unset',
+                color: theme => (input.value ? theme.palette.text.disabled : 'unset'),
+            } }, label)));
+}

package/dist/formFields/DateTimeField.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const DateTimeField: (props: any) => React.JSX.Element;

package/dist/formFields/DateTimeField.js

@@ -0,0 +1,27 @@
+/*
+ * 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 * as React from 'react';
+import TextField from '@mui/material/TextField';
+import { MobileDatePicker, MobileDateTimePicker, MobileTimePicker } from '@mui/x-date-pickers';
+import { DD_MM_YYYY_HH_MM_SPECIAL, DD_MMM_YYYY_MINUSED, HH_MM_COLONED } from '../utils';
+export const DateTimeField = props => {
+    const { onChange, type, ampm, value, setPickerRef, formatDate, maxDate, minDate } = props, rest = __rest(props, ["onChange", "type", "ampm", "value", "setPickerRef", "formatDate", "maxDate", "minDate"]);
+    const picker = type === 'date' ? (React.createElement(MobileDatePicker, Object.assign({ ref: setPickerRef, onChange: onChange, ampm: ampm || false, value: value, format: formatDate || DD_MMM_YYYY_MINUSED, maxDate: maxDate || undefined, minDate: minDate || undefined, renderInput: props => React.createElement(TextField, Object.assign({}, props)), variant: "standard" }, rest))) : type === 'time' ? (React.createElement(MobileTimePicker, Object.assign({ ref: setPickerRef, onChange: onChange, ampm: ampm || false, value: value, format: formatDate || HH_MM_COLONED, maxDate: maxDate || undefined, minDate: minDate || undefined, renderInput: props => React.createElement(TextField, Object.assign({}, props)), variant: "standard" }, rest))) : type === 'datetime' ? (React.createElement(MobileDateTimePicker, Object.assign({ ref: setPickerRef, onChange: onChange, ampm: ampm || false, value: value, format: formatDate || DD_MM_YYYY_HH_MM_SPECIAL, maxDate: maxDate || undefined, minDate: minDate || undefined, renderInput: props => React.createElement(TextField, Object.assign({}, props)), variant: "standard" }, rest))) : null;
+    return picker || null;
+};

package/dist/formFields/EditInPlaceDateTimeField.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Wrapper component for DateTimeField with edit in place functional
+ * */
+import React from 'react';
+import { EditInPlaceDateTimeFieldProps, FieldInputProps, FieldMetaProps } from '../model';
+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;
+export default EditInPlaceDateTimeField;

package/dist/formFields/EditInPlaceDateTimeField.js

@@ -0,0 +1,188 @@
+/*
+ * 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.
+ */
+/**
+ * Wrapper component for DateTimeField with edit in place functional
+ * */
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import clsx from 'clsx';
+import DateRange from '@mui/icons-material/DateRange';
+import QueryBuilder from '@mui/icons-material/QueryBuilder';
+import { format, isValid } from 'date-fns';
+import IconButton from '@mui/material/IconButton';
+import { DateTimeField } from './DateTimeField';
+import { makeAppStyles } from '../styles';
+import EditInPlaceFieldBase from './EditInPlaceFieldBase';
+import { appendTimezone, formatStringDate, HH_MM_COLONED, III_DD_MMM_YYYY, III_DD_MMM_YYYY_HH_MM, prependTimezone, YYYY_MM_DD_MINUSED } from '../utils';
+import { endFieldProcessingAction, startFieldProcessingAction } from '../actions/FieldProcessing';
+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 }) {
+    const [textValue, setTextValue] = useState(defaultValue || '');
+    const [pickerOpened, setPickerOpened] = useState(false);
+    const inputNode = useRef(null);
+    const classes = useStyles();
+    const formatDateInner = dateObj => {
+        if (!dateObj) {
+            return '';
+        }
+        if (dateObj.toString() === 'Invalid Date')
+            return '';
+        switch (type) {
+            case 'date':
+                return format(dateObj, formatDate || III_DD_MMM_YYYY);
+            case 'time':
+                return format(dateObj, formatTime || HH_MM_COLONED);
+            case 'datetime':
+                return format(dateObj, formatDateTime || III_DD_MMM_YYYY_HH_MM);
+            default:
+                return dateObj.toString();
+        }
+    };
+    const dateValue = useMemo(() => {
+        let base = input.value ? new Date(input.value) : null;
+        if (base && timezone) {
+            base = appendTimezone(base, timezone);
+        }
+        return base;
+    }, [input.value, timezone]);
+    useEffect(() => {
+        setTextValue(formatDateInner(dateValue));
+    }, [dateValue]);
+    useEffect(() => {
+        if (!active && processActionId) {
+            dispatch(endFieldProcessingAction(input.name));
+        }
+    }, [input.value, input.name, active, processActionId]);
+    const onInputChange = e => {
+        if (e)
+            setTextValue(e.target.value);
+    };
+    const openPicker = e => {
+        e.stopPropagation();
+        setPickerOpened(true);
+    };
+    const onChange = (v) => {
+        var _a;
+        if (v) {
+            let formatted;
+            if (formatValue) {
+                formatted = format(v, formatValue);
+            }
+            else if (type === 'date') {
+                if (isValid(v)) {
+                    formatted = format(v, YYYY_MM_DD_MINUSED);
+                }
+                else {
+                    formatted = null;
+                }
+            }
+            else {
+                try {
+                    formatted = v.toISOString();
+                }
+                catch (_b) {
+                    formatted = null;
+                }
+            }
+            if (timezone && formatted) {
+                formatted = (_a = prependTimezone(formatted, timezone)) === null || _a === void 0 ? void 0 : _a.toISOString();
+            }
+            input.onChange(formatted);
+            input.onBlur(formatted);
+            return;
+        }
+        setTextValue('');
+        input.onChange(null);
+        input.onBlur(null);
+    };
+    const onBlur = () => {
+        dispatch(startFieldProcessingAction(input.name));
+        if (persistValue && !textValue) {
+            input.onChange(input.value);
+            input.onBlur(input.value);
+            setTextValue(formatDateInner(dateValue));
+            return;
+        }
+        const parsed = textValue
+            ? formatStringDate(textValue, type, dateValue || new Date(), formatDate || formatDateTime || formatTime)
+            : null;
+        if (parsed) {
+            let formatted;
+            if (formatValue) {
+                formatted = format(parsed, formatValue);
+            }
+            else if (type === 'date' && isValid(parsed)) {
+                formatted = format(parsed, YYYY_MM_DD_MINUSED);
+            }
+            else {
+                try {
+                    formatted = parsed.toISOString();
+                }
+                catch (_a) {
+                    formatted = null;
+                }
+            }
+            setTextValue(formatDateInner(parsed));
+            if (timezone && formatted) {
+                formatted = prependTimezone(formatted, timezone).toISOString();
+            }
+            input.onChange(formatted);
+            input.onBlur(formatted);
+        }
+        else {
+            setTextValue(null);
+            input.onChange(null);
+            input.onBlur(null);
+        }
+    };
+    const onClose = () => {
+        setPickerOpened(false);
+    };
+    const onEnterPress = e => {
+        if (e.keyCode === 13 && inputNode.current) {
+            inputNode.current.blur();
+        }
+    };
+    return (React.createElement("div", { className: clsx(className, 'outline-none', {
+            [classes.inlineContainer]: inline,
+            '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)
+                        } }, type === 'time'
+                        ? React.createElement(QueryBuilder, { fontSize: "inherit", color: "inherit" })
+                        : React.createElement(DateRange, { color: "inherit", fontSize: "inherit" })), InputProps: {
+                        type: 'text',
+                        onFocus: input.onFocus,
+                        inputRef: inputNode,
+                        value: textValue,
+                        onKeyPress,
+                        disabled,
+                        onBlur,
+                        onKeyDown: onEnterPress,
+                        onChange: onInputChange
+                    } })) }))));
+}
+export default EditInPlaceDateTimeField;

package/dist/formFields/EditInPlaceDurationField.d.ts

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

package/dist/formFields/EditInPlaceDurationField.js

@@ -0,0 +1,63 @@
+/*
+ * 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, useState } from 'react';
+import EditInPlaceField from './EditInPlaceField';
+import { formatDurationMinutes } from '../utils/dates/formatString';
+const parseDurationString = (duration) => {
+    if (duration.indexOf('.') > -1) {
+        return Math.round(parseFloat(duration) * 60);
+    }
+    let min = 0;
+    const hoursMatch = duration.match(/(\d+)h/);
+    const minutesMatch = duration.match(/(\d+)m/);
+    const plainHours = parseFloat(duration);
+    if (hoursMatch) {
+        min += Number(hoursMatch[1]) * 60;
+    }
+    if (minutesMatch) {
+        min += Number(minutesMatch[1]);
+    }
+    if (!hoursMatch && !minutesMatch && !isNaN(plainHours)) {
+        min += Math.round(plainHours) * 60;
+    }
+    return min;
+};
+function EditInPlaceDurationField(_a) {
+    var { input } = _a, restProps = __rest(_a, ["input"]);
+    const [textValue, setTextValue] = useState(formatDurationMinutes(input.value || 0));
+    const onChange = useCallback(e => {
+        setTextValue(e.target.value);
+    }, [input.onChange]);
+    const onBlur = useCallback(value => {
+        const parsed = parseDurationString(value);
+        input.onBlur(parsed);
+        setTextValue(formatDurationMinutes(parsed || 0));
+    }, [input.onBlur]);
+    useEffect(() => {
+        setTextValue(formatDurationMinutes(input.value || 0));
+    }, [input.value]);
+    return (React.createElement(EditInPlaceField, Object.assign({}, restProps, { input: {
+            value: textValue,
+            onBlur,
+            onChange,
+            onFocus: input.onFocus,
+            name: input.name
+        } })));
+}
+export default EditInPlaceDurationField;

package/dist/formFields/EditInPlaceField.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Wrapper component for Material Select and Text Field with edit in plaxce functional
+ * */
+import React from 'react';
+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;
+export default EditInPlaceField;

package/dist/formFields/EditInPlaceField.js

@@ -0,0 +1,58 @@
+/*
+ * 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.
+ */
+/**
+ * Wrapper component for Material Select and Text Field with edit in plaxce functional
+ * */
+import React, { useMemo } from 'react';
+import clsx from 'clsx';
+import { Edit } from '@mui/icons-material';
+import EditInPlaceFieldBase from './EditInPlaceFieldBase';
+import { makeAppStyles } from '../styles';
+const useStyles = makeAppStyles(theme => ({
+    rightAligned: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'flex-end'
+    },
+    inlineContainer: {
+        display: 'inline-block',
+    },
+    editIcon: {
+        fontSize: '24px',
+        color: theme.palette.divider,
+        verticalAlign: 'middle',
+    },
+    endAdornment: {
+        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 = {} }) {
+    const classes = useStyles();
+    const onBlur = () => {
+        (input === null || input === void 0 ? void 0 : input.onBlur) && input.onBlur(input.value);
+    };
+    const inputValue = useMemo(() => preformatDisplayValue
+        ? preformatDisplayValue(input.value === 0 ? input.value : input.value || defaultValue)
+        : (input.value === 0 ? String(input.value) : input.value) || defaultValue || '', [preformatDisplayValue, input.value, defaultValue]);
+    return (React.createElement("div", { id: input.name, className: clsx(className, 'outline-none', {
+            [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,
+                onKeyPress,
+                onBlur, onFocus: input.onFocus, maxRows: truncateLines, inputProps: {
+                    ref: inputRef,
+                    maxLength,
+                    step,
+                    min,
+                    max,
+                    onKeyDown,
+                    type,
+                }, value: inputValue, onChange: v => (type === 'number' && max && Number(v) > Number(max) ? null : input.onChange(v)) }, InputProps) })));
+}
+export default EditInPlaceField;

package/dist/formFields/EditInPlaceFieldBase.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { InputProps } from '@mui/material/Input/Input';
+import { FieldClasses } from '../model';
+import { FormControlTypeMap } from '@mui/material/FormControl/FormControl';
+interface Props {
+    name: string;
+    value: string;
+    className?: string;
+    endAdornmentClass?: string;
+    label?: React.ReactNode;
+    labelAdornment?: React.ReactNode;
+    editIcon?: React.ReactNode;
+    CustomInput?: React.ReactNode;
+    InputProps?: Partial<InputProps>;
+    fieldClasses?: FieldClasses;
+    placeholder?: string;
+    warning?: string;
+    error?: string;
+    rightAligned?: boolean;
+    inline?: boolean;
+    invalid?: boolean;
+    shrink?: boolean;
+    disabled?: boolean;
+    hideArrows?: boolean;
+    variant?: FormControlTypeMap['props']['variant'];
+}
+declare const EditInPlaceFieldBase: ({ value, invalid, className, inline, label, fieldClasses, rightAligned, shrink, name, disabled, labelAdornment, editIcon, error, placeholder, hideArrows, warning, endAdornmentClass, CustomInput, InputProps, variant }: Props) => React.JSX.Element;
+export default EditInPlaceFieldBase;

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;