ish-ui 1.0.55 → 1.1.1

package/dist/appBar/AppBarHelpMenu.d.ts

@@ -1,3 +1,19 @@
 import * as React from 'react';
-declare const _default: React.JSXElementConstructor<Omit<any, "classes"> & import("@mui/styles").StyledComponentProps<"button" | "info" | "divider">>;
+interface Props {
+    classes?: any;
+    created?: any;
+    modified?: any;
+    manualUrl?: string;
+    auditsUrl?: string;
+    iconClasses?: any;
+}
+declare class AppBarHelpMenu extends React.Component<Props, any> {
+    constructor(props: any);
+    handleAddFieldClick: (e: any) => void;
+    handleClose: () => void;
+    openManual: () => void;
+    openAudits: () => void;
+    render(): React.JSX.Element;
+}
+declare const _default: typeof AppBarHelpMenu;
 export default _default;

package/dist/appBar/AppBarHelpMenu.js

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { withStyles, createStyles } from '@mui/styles';
-import clsx from 'clsx';
+import { useStyles, withStyles } from 'tss-react/mui';
 import HelpOutline from '@mui/icons-material/HelpOutline';
 import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
@@ -9,7 +8,7 @@ import MenuItem from '@mui/material/MenuItem';
 import Tooltip from '@mui/material/Tooltip';
 import { format as formatDate } from 'date-fns';
 import { III_DD_MMM_YYYY_HH_MM_SPECIAL, openInternalLink } from '../utils';
-const styles = theme => createStyles({
+const styles = theme => ({
     button: {
         color: theme.appBarButton.helpMenu.color,
     },
@@ -48,6 +47,7 @@ class AppBarHelpMenu extends React.Component {
     render() {
         const { anchorEl } = this.state;
         const { classes, created, modified, iconClasses, auditsUrl } = this.props;
+        const { cx } = useStyles();
         return (React.createElement(React.Fragment, null,
             React.createElement(Menu, { id: "form-help-menu", anchorEl: anchorEl, open: Boolean(anchorEl), onClose: this.handleClose, marginThreshold: 16, transformOrigin: {
                     vertical: 'center',
@@ -67,11 +67,11 @@ class AppBarHelpMenu extends React.Component {
                 auditsUrl && (React.createElement(MenuItem, { onClick: this.openAudits }, "View audit trail"))),
             React.createElement(Tooltip, { title: "Additional information" },
                 React.createElement("div", null,
-                    React.createElement(IconButton, { type: "button", "aria-owns": anchorEl ? 'form-help-menu' : null, "aria-haspopup": "true", onClick: this.handleAddFieldClick, size: "large", className: clsx({
+                    React.createElement(IconButton, { type: "button", "aria-owns": anchorEl ? 'form-help-menu' : null, "aria-haspopup": "true", onClick: this.handleAddFieldClick, size: "large", className: cx({
                             [classes.button]: !iconClasses,
                             [iconClasses]: !!iconClasses
                         }) },
                         React.createElement(HelpOutline, null))))));
     }
 }
-export default withStyles(styles)(AppBarHelpMenu);
+export default withStyles(AppBarHelpMenu, styles);

package/dist/colorPicker/ColorPicker.js

@@ -12,11 +12,10 @@ import { AlphaPicker, HuePicker } from 'react-color';
 import { ClickAwayListener } from '@mui/base';
 import Paper from '@mui/material/Paper';
 import Grow from '@mui/material/Grow';
-import clsx from 'clsx';
 import { stopEventPropagation } from '../utils/events';
 import { makeAppStyles } from '../styles';
 import { useAppTheme } from '../themes';
-const useStyles = makeAppStyles(({ spacing, palette, zIndex, transitions }) => ({
+const useStyles = makeAppStyles()(({ spacing, palette, zIndex, transitions }, p, classes) => ({
     paper: {
         width: 200,
         padding: spacing(2),
@@ -65,7 +64,7 @@ const useStyles = makeAppStyles(({ spacing, palette, zIndex, transitions }) => (
             duration: transitions.duration.shorter,
             easing: transitions.easing.easeInOut
         }),
-        '&:hover,&$opened': {
+        [`&:hover,&.${classes.opened}`]: {
             transform: 'scale(2)',
             zIndex: zIndex.modal,
             boxShadow: '1px 0px 1px -1px rgba(0,0,0,0.2), 0px 0px 2px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12);'
@@ -85,7 +84,7 @@ const useStyles = makeAppStyles(({ spacing, palette, zIndex, transitions }) => (
     opened: {}
 }));
 const ColorPickerBase = React.memo(({ color, input: { value, onChange }, TransitionProps, setAnchorEl, placement }) => {
-    const classes = useStyles();
+    const { classes, cx } = useStyles();
     const [hueColor, setHueColor] = useState(color);
     const [alfaColor, setAlfaColor] = useState(color);
     const hueRef = useRef();
@@ -119,12 +118,12 @@ const ColorPickerBase = React.memo(({ color, input: { value, onChange }, Transit
     return (React.createElement(ClickAwayListener, { onClickAway: handleClickAway },
         React.createElement(Grow, Object.assign({}, TransitionProps, { timeout: 200 }),
             React.createElement("div", null,
-                React.createElement(Paper, { className: clsx(classes.paper, placement === 'bottom' && classes.paperPlaceBottom) },
+                React.createElement(Paper, { className: cx(classes.paper, placement === 'bottom' && classes.paperPlaceBottom) },
                     React.createElement(HuePicker, { ref: hueRef, color: hueColor, onChange: onHueChange, onChangeComplete: onChangeComplete, width: "168", className: classes.bottomOffset }),
                     React.createElement(AlphaPicker, { className: classes.customAlfa, color: alfaColor, width: "168", onChange: onAlfaChange, onChangeComplete: onChangeComplete }))))));
 });
 const ColorPickerWrapper = React.memo(({ input, placement = 'top', width }) => {
-    const classes = useStyles();
+    const { classes, cx } = useStyles();
     const theme = useAppTheme();
     const [anchorEl, setAnchorEl] = useState(null);
     const handleClick = useCallback((event) => {
@@ -132,7 +131,7 @@ const ColorPickerWrapper = React.memo(({ input, placement = 'top', width }) => {
     }, [anchorEl]);
     const color = useMemo(() => (input.value ? '#' + input.value : theme.palette.primary.main), [theme, input.value]);
     return (React.createElement("div", { className: "d-flex", onClick: stopEventPropagation },
-        React.createElement(ButtonBase, { onClick: handleClick, className: clsx(classes.colorPickerButton, anchorEl && classes.opened), style: { backgroundColor: color, width, height: width } }),
+        React.createElement(ButtonBase, { onClick: handleClick, className: cx(classes.colorPickerButton, anchorEl && classes.opened), style: { backgroundColor: color, width, height: width } }),
         React.createElement(Popper, { open: Boolean(anchorEl), anchorEl: anchorEl, placement: placement, className: classes.popper, transition: true }, ({ TransitionProps }) => (React.createElement(ColorPickerBase, { color: color, input: input, TransitionProps: TransitionProps, setAnchorEl: setAnchorEl, placement: placement })))));
 });
 export default ColorPickerWrapper;

package/dist/dialog/message/Message.js

@@ -3,13 +3,12 @@
  * No copying or use of this code is allowed without permission in writing from ish.
  */
 import React from 'react';
-import clsx from 'clsx';
 import Snackbar from '@mui/material/Snackbar';
 import IconButton from '@mui/material/IconButton';
 import Alert from '@mui/material/Alert';
 import CloseIcon from '@mui/icons-material/Close';
 import { makeAppStyles } from '../../styles';
-const useStyles = makeAppStyles((theme) => ({
+const useStyles = makeAppStyles()((theme) => ({
     close: {
         color: theme.palette.primary.contrastText,
         width: theme.spacing(4),
@@ -40,7 +39,7 @@ const useStyles = makeAppStyles((theme) => ({
     }
 }));
 const Message = ({ opened, text, clearMessage, success, persist }) => {
-    const classes = useStyles();
+    const { classes, cx } = useStyles();
     const handleClose = () => {
         if (!persist && clearMessage) {
             clearMessage();
@@ -53,7 +52,7 @@ const Message = ({ opened, text, clearMessage, success, persist }) => {
             root: classes.autoWidthRoot
         }, ContentProps: {
             classes: {
-                root: clsx(classes.autoWidth, {
+                root: cx(classes.autoWidth, {
                     [classes.success]: success
                 }),
                 message: persist ? classes.fullScreenMessage : undefined

package/dist/documents/DocumentIconsChooser.js

@@ -6,10 +6,9 @@
  *  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 * as React from 'react';
-import clsx from 'clsx';
 import { FileTypeIcon } from './utils';
 import { makeAppStyles } from '../styles';
-const useStyles = makeAppStyles(theme => ({
+const useStyles = makeAppStyles()(theme => ({
     preview: {
         backgroundSize: 'cover',
         width: '36px',
@@ -36,13 +35,13 @@ const useStyles = makeAppStyles(theme => ({
     }
 }));
 const DocumentIconsChooser = ({ type, thumbnail, className, hovered = true, isHeader }) => {
-    const classes = useStyles();
+    const { classes, cx } = useStyles();
     return thumbnail ? (React.createElement("div", { style: {
             backgroundImage: `url(data:image;base64,${thumbnail})`
-        }, className: clsx(classes.preview, {
+        }, className: cx(classes.preview, {
             [classes.previewHoverImage]: hovered,
             [classes.previewNormal]: isHeader
-        }, className) })) : (React.createElement("div", { className: clsx(classes.preview, {
+        }, className) })) : (React.createElement("div", { className: cx(classes.preview, {
             [classes.previewHoverIcon]: hovered
         }, className) },
         React.createElement(FileTypeIcon, { mimeType: type })));

package/dist/fieldMessage/ErrorMessage.d.ts

@@ -4,5 +4,5 @@ interface Props {
     className?: string;
     message: string;
 }
-declare const _default: React.JSXElementConstructor<Omit<Props, "classes"> & import("@mui/styles/withStyles").StyledComponentProps<"icon" | "root">>;
+declare const _default: React.FC<Props>;
 export default _default;

package/dist/fieldMessage/ErrorMessage.js

@@ -5,10 +5,12 @@
 import React from 'react';
 import Error from '@mui/icons-material/Error';
 import Typography from '@mui/material/Typography';
-import withStyles from '@mui/styles/withStyles';
-import clsx from 'clsx';
+import { useStyles, withStyles } from 'tss-react/mui';
 import styles from './styles';
-const ErrorMessage = ({ classes, className, message }) => (React.createElement("div", { className: clsx(classes.root, className) },
-    React.createElement(Error, { color: "error", className: classes.icon }),
-    React.createElement(Typography, { variant: "caption", className: "errorColor" }, message)));
-export default withStyles(styles)(ErrorMessage);
+const ErrorMessage = ({ classes, className, message }) => {
+    const { cx } = useStyles();
+    return React.createElement("div", { className: cx(classes.root, className) },
+        React.createElement(Error, { color: "error", className: classes.icon }),
+        React.createElement(Typography, { variant: "caption", className: "errorColor" }, message));
+};
+export default withStyles(ErrorMessage, styles);

package/dist/fieldMessage/WarningMessage.d.ts

@@ -4,5 +4,5 @@ interface Props {
     className?: string;
     warning: string;
 }
-declare const _default: React.JSXElementConstructor<Omit<Props, "classes"> & import("@mui/styles/withStyles").StyledComponentProps<"icon" | "root">>;
+declare const _default: React.FC<Props>;
 export default _default;

package/dist/fieldMessage/WarningMessage.js

@@ -5,10 +5,12 @@
 import React from 'react';
 import Warning from '@mui/icons-material/Warning';
 import Typography from '@mui/material/Typography';
-import withStyles from '@mui/styles/withStyles';
-import clsx from 'clsx';
+import { useStyles, withStyles } from 'tss-react/mui';
 import styles from './styles';
-const WarningMessage = ({ classes, className, warning }) => (React.createElement("div", { className: clsx(classes.root, className) },
-    React.createElement(Warning, { className: clsx(classes.icon, 'warningColor') }),
-    React.createElement(Typography, { variant: "caption", className: "warningColor" }, warning)));
-export default withStyles(styles)(WarningMessage);
+const WarningMessage = ({ classes, className, warning }) => {
+    const { cx } = useStyles();
+    return React.createElement("div", { className: cx(classes.root, className) },
+        React.createElement(Warning, { className: cx(classes.icon, 'warningColor') }),
+        React.createElement(Typography, { variant: "caption", className: "warningColor" }, warning));
+};
+export default withStyles(WarningMessage, styles);

package/dist/fieldMessage/styles.d.ts

@@ -1,3 +1,14 @@
 import { AppTheme } from '../model';
-declare const _default: (theme: AppTheme) => import("@mui/styles").StyleRules<{}, "icon" | "root">;
+declare const _default: (theme: AppTheme) => {
+    root: {
+        marginTop: string;
+        paddingBottom: string;
+    };
+    icon: {
+        fontSize: string;
+        display: string;
+        verticalAlign: string;
+        marginRight: string;
+    };
+};
 export default _default;

package/dist/fieldMessage/styles.js

@@ -2,8 +2,7 @@
  * 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 { createStyles } from '@mui/styles';
-export default (theme) => createStyles({
+export default (theme) => ({
     root: {
         marginTop: `-${theme.spacing(1)}`,
         // @ts-ignore

package/dist/fileUploader/FileUploaderDialog.d.ts

@@ -11,5 +11,5 @@ interface Props {
     onClose?: () => void;
     isBackdropDragging?: boolean;
 }
-declare const _default: React.JSXElementConstructor<Omit<Props, "classes"> & import("@mui/styles").StyledComponentProps<never>>;
+declare const _default: React.FC<Props>;
 export default _default;

package/dist/fileUploader/FileUploaderDialog.js

@@ -6,16 +6,15 @@
  *  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 clsx from 'clsx';
 import { useDropzone } from 'react-dropzone';
-import { createStyles, withStyles } from '@mui/styles';
+import { useStyles, withStyles } from 'tss-react/mui';
 import { darken } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
 import Dialog from '@mui/material/Dialog';
 import IconButton from '@mui/material/IconButton';
 import CloseIcon from '@mui/icons-material/Close';
 import Button from '@mui/material/Button';
-const styles = createStyles((theme) => ({
+const styles = (theme) => ({
     fileContainer: {
         border: `2px dotted ${theme.palette.primary.main}`,
         borderRadius: 6,
@@ -42,9 +41,10 @@ const styles = createStyles((theme) => ({
         top: theme.spacing(1),
         color: theme.palette.grey[100]
     }
-}));
+});
 const FileUploaderDialog = (props => {
     const { fileRef, accept, disabled, classes, dialog, onChange, onClose, opened, backdropEnabled, isBackdropDragging } = props;
+    const { cx } = useStyles();
     const onFileDrop = (acceptedfiles, fileRejections) => {
         if (onChange)
             onChange(acceptedfiles, fileRejections);
@@ -71,15 +71,15 @@ const FileUploaderDialog = (props => {
         }
         return text.join(', ');
     };
-    const backdropUploaderContent = (React.createElement("div", Object.assign({}, getRootProps(), { className: clsx('w-100 h-100', classes.fullScreenFileDropContainer) }),
+    const backdropUploaderContent = (React.createElement("div", Object.assign({}, getRootProps(), { className: cx('w-100 h-100', classes.fullScreenFileDropContainer) }),
         React.createElement("div", { className: "h-100 outline-none overflow-hidden cursor-pointer" },
             React.createElement("div", { className: "h-100 p-1" },
                 React.createElement("input", Object.assign({}, getInputProps()))))));
-    const uploadContent = (React.createElement("div", Object.assign({}, getRootProps(), { className: clsx('w-100 overflow-y-auto relative', classes.boxDropContainer, { 'zIndex2': isBackdropDragging }) }),
+    const uploadContent = (React.createElement("div", Object.assign({}, getRootProps(), { className: cx('w-100 overflow-y-auto relative', classes.boxDropContainer, { 'zIndex2': isBackdropDragging }) }),
         React.createElement("div", { className: "h-100 outline-none overflow-hidden cursor-pointer" },
             React.createElement("div", { className: "h-100 p-1" },
                 React.createElement("input", Object.assign({}, getInputProps())),
-                React.createElement("div", { className: clsx('w-100 h-100 flex-column align-items-center justify-content-center text-center p-2 pb-3', classes.fileContainer, { [classes.dragActive]: isDragActive }) },
+                React.createElement("div", { className: cx('w-100 h-100 flex-column align-items-center justify-content-center text-center p-2 pb-3', classes.fileContainer, { [classes.dragActive]: isDragActive }) },
                     React.createElement(Typography, { variant: "subtitle1", gutterBottom: true, className: "mb-0" }, "Drop files here"),
                     React.createElement(Typography, { variant: "caption", className: "mb-1" }, "or"),
                     React.createElement(Button, { variant: "contained", size: "small", color: "primary", className: "mb-1 fontWeight-normal" }, "Browse"),
@@ -91,9 +91,9 @@ const FileUploaderDialog = (props => {
             paper: 'w-100'
         } },
         React.createElement("div", null,
-            onClose && (React.createElement(IconButton, { className: clsx('fixed zIndex1401 p-1', classes.dialogCloseButton), onClick: onClose },
+            onClose && (React.createElement(IconButton, { className: cx('fixed zIndex1401 p-1', classes.dialogCloseButton), onClick: onClose },
                 React.createElement(CloseIcon, { fontSize: "small" }))),
             uploadContent,
             isBackdropDragging && backdropEnabled && backdropUploaderContent))) : backdropEnabled ? backdropUploaderContent : uploadContent;
 });
-export default withStyles(styles)(FileUploaderDialog);
+export default withStyles(FileUploaderDialog, styles);

package/dist/formFields/CheckboxField.d.ts

@@ -4,5 +4,5 @@
 import React from 'react';
 import { CheckboxFieldProps, FieldInputProps } from '../model';
 import { CheckboxProps } from '@mui/material/Checkbox/Checkbox';
-export declare const StyledCheckbox: React.JSXElementConstructor<Omit<any, "classes"> & import("@mui/styles/withStyles").StyledComponentProps<"root"> & object>;
+export declare const StyledCheckbox: (props: any) => React.JSX.Element;
 export declare function CheckboxField<IP extends FieldInputProps>({ input, color, disabled, stringValue, className, uncheckedClass, onChangeHandler, stopPropagation, ...rest }: CheckboxFieldProps<IP> & CheckboxProps): React.JSX.Element;

package/dist/formFields/CheckboxField.js

@@ -21,8 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
  * */
 import React, { useCallback } from 'react';
 import Checkbox from '@mui/material/Checkbox';
-import withStyles from '@mui/styles/withStyles';
-import clsx from 'clsx';
+import { useStyles, withStyles } from 'tss-react/mui';
 const getValue = (value, stringValue) => {
     if (!stringValue) {
         return !!value;
@@ -45,11 +44,12 @@ const styles = theme => ({
 });
 const StyledCheckboxBase = props => {
     const { classes, uncheckedClass, className } = props, rest = __rest(props, ["classes", "uncheckedClass", "className"]);
+    const { cx } = useStyles();
     return (React.createElement(Checkbox, Object.assign({ classes: {
-            root: clsx(classes.root, uncheckedClass, className),
+            root: cx(classes.root, uncheckedClass, className),
         } }, rest)));
 };
-export const StyledCheckbox = withStyles(styles)(StyledCheckboxBase);
+export const StyledCheckbox = withStyles(StyledCheckboxBase, styles);
 export function CheckboxField(_a) {
     var { input, color, disabled, stringValue, className, uncheckedClass, onChangeHandler, stopPropagation } = _a, rest = __rest(_a, ["input", "color", "disabled", "stringValue", "className", "uncheckedClass", "onChangeHandler", "stopPropagation"]);
     const onChange = useCallback((e, value) => {

package/dist/formFields/CodeEditorField.js

@@ -6,12 +6,11 @@
  *  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 clsx from 'clsx';
 import AceEditor from 'react-ace';
 import 'ace-builds/src-noconflict/mode-groovy';
 import 'ace-builds/src-noconflict/theme-textmate';
 import { makeAppStyles } from '../styles';
-const useStyles = makeAppStyles(theme => ({
+const useStyles = makeAppStyles()(theme => ({
     editor: {
         filter: theme.palette.mode === 'dark' ? 'invert(80%)' : '',
         zIndex: 0,
@@ -51,11 +50,11 @@ const useStyles = makeAppStyles(theme => ({
     }
 }));
 function CodeEditorField({ input, meta: { error }, errorMessage, disabled, onFocus, className }) {
-    const classes = useStyles();
+    const { classes, cx } = useStyles();
     return (React.createElement("div", { id: input.name, className: className },
         error && React.createElement("div", { className: classes.errorMessage },
             React.createElement("div", { className: "shakingError" }, errorMessage || error)),
-        React.createElement(AceEditor, { mode: "groovy", theme: "textmate", value: input.value || ' ', onFocus: onFocus, onChange: input.onChange, fontSize: 14, showPrintMargin: false, showGutter: true, highlightActiveLine: true, width: "100%", maxLines: Infinity, className: clsx(classes.editor, {
+        React.createElement(AceEditor, { mode: "groovy", theme: "textmate", value: input.value || ' ', onFocus: onFocus, onChange: input.onChange, fontSize: 14, showPrintMargin: false, showGutter: true, highlightActiveLine: true, width: "100%", maxLines: Infinity, className: cx(classes.editor, {
                 [classes.errorBackground]: error
             }), wrapEnabled: true, setOptions: {
                 enableBasicAutocompletion: true,

package/dist/formFields/ColoredCheckBox.js

@@ -7,13 +7,14 @@
  */
 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';
+import { useStyles } from 'tss-react/mui';
 export function ColoredCheckBox({ input, label, color, className, disabled }) {
+    const { cx } = useStyles();
     const theme = useAppTheme();
     const inputRef = useRef();
     const onClick = useCallback(() => {
@@ -22,7 +23,7 @@ export function ColoredCheckBox({ input, label, color, className, disabled }) {
     if (disabled) {
         color = rgbToHex(theme.palette.divider);
     }
-    return (React.createElement("div", { className: clsx('centeredFlex cursor-pointer', className), onClick: onClick },
+    return (React.createElement("div", { className: cx('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),

package/dist/formFields/DateTimeField.js

@@ -17,11 +17,10 @@ var __rest = (this && this.__rest) || function (s, e) {
     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;
+    const { onChange, type, ampm, value, setPickerRef, formatDate, maxDate, minDate, renderInput } = props, rest = __rest(props, ["onChange", "type", "ampm", "value", "setPickerRef", "formatDate", "maxDate", "minDate", "renderInput"]);
+    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, 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, 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, variant: "standard" }, rest))) : null;
     return picker || null;
 };

package/dist/formFields/EditInPlaceDateTimeField.js

@@ -9,7 +9,6 @@
  * 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';
@@ -17,9 +16,9 @@ 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 { 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 => ({
+const useStyles = makeAppStyles()(theme => ({
     inlinePickerButton: {
         padding: '2px',
         fontSize: '1.3em',
@@ -35,7 +34,7 @@ function EditInPlaceDateTimeField({ type, formatDate, formatTime, formatDateTime
     const [textValue, setTextValue] = useState(defaultValue || '');
     const [pickerOpened, setPickerOpened] = useState(false);
     const inputNode = useRef(null);
-    const classes = useStyles();
+    const { classes, cx } = useStyles();
     const formatDateInner = dateObj => {
         if (!dateObj) {
             return '';
@@ -160,27 +159,48 @@ function EditInPlaceDateTimeField({ type, formatDate, formatTime, formatDateTime
             inputNode.current.blur();
         }
     };
-    return (React.createElement("div", { className: clsx(className, 'outline-none', {
+    return (React.createElement("div", { className: cx(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, variant: variant, error: error, invalid: invalid, inline: inline, label: label, warning: warning, fieldClasses: fieldClasses, rightAligned: rightAligned, shrink: Boolean(label || input.value), disabled: disabled, labelAdornment: labelAdornment, placeholder: placeholder, editIcon: React.createElement(IconButton, { tabIndex: -1, onClick: openPicker, sx: variant === 'outlined' ? {
-                            marginRight: -1
-                        } : null, classes: {
-                            root: clsx(fieldClasses.text, inline && classes.inlinePickerButton)
-                        } }, type === 'time'
-                        ? React.createElement(QueryBuilder, { fontSize: "inherit", color: "inherit" })
-                        : React.createElement(DateRange, { color: "inherit", fontSize: "inherit" })), InputProps: {
-                        type: 'text',
-                        onFocus: input.onFocus,
-                        inputRef: inputNode,
+            React.createElement(DateTimeField, { type: type, toolbarTitle: label, open: pickerOpened, value: dateValue, onChange: onChange, onClose: onClose, slots: {
+                    field: EditInPlaceFieldBase
+                }, slotProps: {
+                    field: {
+                        name: input.name,
                         value: textValue,
-                        onKeyPress,
+                        variant,
+                        error,
+                        invalid,
+                        inline,
+                        label,
+                        warning,
+                        fieldClasses,
+                        rightAligned,
                         disabled,
-                        onBlur,
-                        onKeyDown: onEnterPress,
-                        onChange: onInputChange
-                    } })) }))));
+                        labelAdornment,
+                        placeholder,
+                        shrink: Boolean(label || input.value),
+                        editIcon: React.createElement(IconButton, { tabIndex: -1, onClick: openPicker, sx: variant === 'outlined' ? {
+                                marginRight: -1
+                            } : null, classes: {
+                                root: cx(fieldClasses.text, inline && classes.inlinePickerButton)
+                            } }, 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/EditInPlaceField.js

@@ -9,11 +9,10 @@
  * 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 => ({
+const useStyles = makeAppStyles()(theme => ({
     rightAligned: {
         display: 'flex',
         alignItems: 'center',
@@ -32,14 +31,14 @@ const useStyles = makeAppStyles(theme => ({
     }
 }));
 function EditInPlaceField({ inputRef, input, label, maxLength, disabled, min, max, step, className, onKeyPress, labelAdornment, truncateLines, rightAligned, defaultValue, onKeyDown, multiline, inline, warning, preformatDisplayValue, type = 'text', meta: { error, invalid }, placeholder, fieldClasses = {}, InputProps = {}, editIcon, variant }) {
-    const classes = useStyles();
+    const { classes, cx } = 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', {
+    return (React.createElement("div", { id: input.name, className: cx(className, 'outline-none', {
             [classes.rightAligned]: rightAligned,
             [classes.inlineContainer]: inline
         }) },