ish-ui 1.0.19 → 1.0.21

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 NumberFormat 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(NumberFormat, 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 NumberFormat 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(undefined);
+    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(NumberFormat, 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 {};

package/dist/formFields/FieldAdornments.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.
+ */
+import React from 'react';
+import IconButton from '@mui/material/IconButton';
+import Launch from '@mui/icons-material/Launch';
+import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';
+export const LinkAdornment = ({ link, linkColor = 'primary', linkHandler, clickHandler, className, disabled }) => {
+    const onClick = () => (clickHandler ? clickHandler() : linkHandler(link));
+    return (React.createElement("span", { className: className },
+        React.createElement(IconButton, { disabled: disabled || (!link && link !== 0), onClick: onClick, color: linkColor, classes: {
+                root: 'inputAdornmentButton'
+            } },
+            React.createElement(Launch, { className: "inputAdornmentIcon", color: "inherit" }))));
+};
+export const SettingsAdornment = ({ link, linkHandler, clickHandler, className, disabled }) => {
+    const onClick = e => (clickHandler ? clickHandler(e) : linkHandler(link));
+    return (React.createElement("span", { className: className },
+        React.createElement(IconButton, { disabled: disabled, onClick: onClick, classes: {
+                root: 'inputAdornmentButton ml-0-5'
+            }, color: "inherit", size: "small" },
+            React.createElement(SettingsOutlinedIcon, { color: "inherit" }))));
+};

package/dist/formFields/FilePreview.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+interface Props {
+    data: string;
+    label?: string;
+    actions?: {
+        actionLabel?: string;
+        onAction?: any;
+        disabled?: boolean;
+        icon?: any;
+    }[];
+    classes?: any;
+    iconPlacementRow?: boolean;
+    disabled?: boolean;
+    avatarSize?: number;
+}
+declare const _default: React.JSXElementConstructor<Omit<Props, "classes"> & import("@mui/styles").StyledComponentProps<"active" | "root" | "rounded" | "backdrop" | "actionButton" | "noValue" | "avatarRoot">>;
+export default _default;

package/dist/formFields/FilePreview.js

@@ -0,0 +1,77 @@
+/*
+ * Copyright ish group pty ltd. All rights reserved. https://www.ish.com.au
+ * No copying or use of this code is allowed without permission in writing from ish.
+ */
+import React from 'react';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+import { createStyles, withStyles } from '@mui/styles';
+import { darken } from '@mui/material/styles';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import Avatar from '@mui/material/Avatar';
+import clsx from 'clsx';
+const styles = (theme) => createStyles({
+    root: {
+        height: 'fit-content',
+        width: 'fit-content',
+        position: 'relative',
+        fontSize: 0,
+        '&:hover $backdrop$active': {
+            opacity: 1
+        },
+        color: '#fff',
+    },
+    backdrop: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        background: theme.palette.action.active,
+        position: 'absolute',
+        height: '100%',
+        width: '100%',
+        opacity: 0,
+        transition: theme.transitions.create('opacity', {
+            duration: theme.transitions.duration.complex,
+            easing: theme.transitions.easing.easeInOut
+        }),
+        zIndex: 1,
+    },
+    rounded: {
+        borderRadius: '100%',
+    },
+    actionButton: {
+        background: theme.palette.background.paper,
+        '&:hover': {
+            background: darken(theme.palette.background.paper, 0.2)
+        },
+        marginTop: theme.spacing(1)
+    },
+    noValue: {
+        color: theme.palette.divider,
+        marginTop: theme.spacing(-1)
+    },
+    active: {},
+    avatarRoot: {
+        maxWidth: '100%',
+        transition: theme.transitions.create('all', {
+            duration: theme.transitions.duration.complex,
+            easing: theme.transitions.easing.easeInOut
+        }),
+    },
+});
+const FilePreview = ({ label, actions, data, classes, iconPlacementRow, disabled, avatarSize }) => {
+    const size = avatarSize || 90;
+    return (React.createElement(React.Fragment, null,
+        label && (React.createElement(Typography, { variant: "caption", color: "textSecondary", component: "div", className: "pb-1" }, label)),
+        data ? (React.createElement("div", { className: classes.root },
+            !disabled && (React.createElement("div", { className: clsx(classes.backdrop, avatarSize && classes.rounded, actions && classes.active) },
+                React.createElement("div", { className: iconPlacementRow ? 'centeredFlex' : 'flex-column' }, actions
+                    && actions.map((a, i) => (a.icon ? (React.createElement(Tooltip, { key: i, title: a.actionLabel, placement: iconPlacementRow ? 'top' : 'right' },
+                        React.createElement(IconButton, { color: "inherit", size: "medium", onClick: a.onAction, disabled: a.disabled }, a.icon))) : (React.createElement(Button, { key: i, size: "small", variant: "outlined", color: "secondary", classes: {
+                            root: classes.actionButton
+                        }, onClick: a.onAction, disabled: a.disabled }, a.actionLabel))))))),
+            avatarSize
+                ? (React.createElement(Avatar, { alt: "FilePreview", src: `data:image/png;base64, ${data}`, sx: { width: size, height: size }, classes: { root: classes.avatarRoot } })) : (React.createElement("img", { alt: "FilePreview", src: `data:image/png;base64, ${data}`, className: classes.avatarRoot })))) : (React.createElement(Typography, { variant: "body1", className: classes.noValue }, "No Value"))));
+};
+export default withStyles(styles)(FilePreview);

package/dist/formFields/FormRadioButtons.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: React.FunctionComponent<any>;
+export default _default;

package/dist/formFields/FormRadioButtons.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.
+ */
+import React from 'react';
+import { withStyles } from '@mui/styles';
+import { FormControl, FormControlLabel, Radio, RadioGroup } from '@mui/material';
+import Typography from '@mui/material/Typography';
+const styles = theme => ({
+    root: {
+        display: 'flex'
+    },
+    group: {
+        margin: theme.spacing(1, 0)
+    }
+});
+const FormRadioButtons = props => {
+    const { classes, items, disabled, input: { value, onChange, name }, labelPath = 'label', valuePath = 'value', color = 'primary', row } = props;
+    return (React.createElement("div", { className: classes.root },
+        React.createElement(FormControl, { component: "fieldset" },
+            React.createElement(RadioGroup, { className: classes.group, value: value, onChange: (e) => onChange(e.target.value), row: row }, items
+                && items.map((i, n) => (React.createElement(FormControlLabel, { key: n, value: i[valuePath], control: React.createElement(Radio, { color: color, id: `input-${n}-${name}`, name: name }), label: (React.createElement(Typography, { component: "span", variant: "body2" }, i[labelPath])), disabled: disabled, htmlFor: `input-${n}-${name}` })))))));
+};
+export default withStyles(styles)(FormRadioButtons);

package/dist/formFields/SelectCustomComponents.d.ts

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