ish-ui 1.2.8 → 1.3.0

package/dist/appBar/AppBarHelpMenu.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { withStyles } from 'tss-react/mui';
-import HelpOutline from '@mui/icons-material/HelpOutline';
+import HelpOutline from '@mui/icons-material/HelpOutlineOutlined';
 import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
 import Menu from '@mui/material/Menu';

package/dist/colorPicker/ColorPicker.js

@@ -9,7 +9,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import ButtonBase from '@mui/material/ButtonBase';
 import Popper from '@mui/material/Popper';
 import { AlphaPicker, HuePicker } from 'react-color';
-import { ClickAwayListener } from '@mui/base';
+import { ClickAwayListener } from '@mui/material';
 import Paper from '@mui/material/Paper';
 import Grow from '@mui/material/Grow';
 import { stopEventPropagation } from '../utils/events';
@@ -87,7 +87,7 @@ const ColorPickerBase = React.memo(({ color, input: { value, onChange }, Transit
     const { classes, cx } = useStyles();
     const [hueColor, setHueColor] = useState(color);
     const [alfaColor, setAlfaColor] = useState(color);
-    const hueRef = useRef();
+    const hueRef = useRef(undefined);
     const onHueChange = useCallback(color => {
         setHueColor(color.hsv);
         setAlfaColor(color.hsv);

package/dist/dialog/BrowserWarning.js

@@ -1,4 +1,4 @@
-import { Alert } from '@mui/lab';
+import { Alert } from '@mui/material';
 import * as React from 'react';
 const BROWSER_WARNING_TEXT = 'Your current browser is not supported. Please ensure you are using an up to date version of Chrome, Firefox or Edge.';
 export const isOldIE = () => {

package/dist/dialog/message/Message.js

@@ -50,21 +50,27 @@ const Message = ({ opened, text, clearMessage, success, persist }) => {
             horizontal: 'left'
         }, classes: {
             root: classes.autoWidthRoot
-        }, ContentProps: {
-            classes: {
-                root: cx(classes.autoWidth, {
-                    [classes.success]: success
-                }),
-                message: persist ? classes.fullScreenMessage : undefined
+        }, slotProps: {
+            content: {
+                classes: {
+                    root: cx(classes.autoWidth, {
+                        [classes.success]: success
+                    }),
+                    message: persist ? classes.fullScreenMessage : undefined
+                }
+            },
+            clickAwayListener: {
+                onClickAway: handleClose
             }
-        }, ClickAwayListenerProps: {
-            onClickAway: handleClose
-        }, autoHideDuration: persist ? null : 6000, onClose: handleClose, disableWindowBlurListener: persist },
-        React.createElement(Alert, { variant: "filled", severity: success ? 'success' : 'error', classes: {
-                message: 'text-pre-wrap',
-                standardError: 'errorBackgroundColor',
-                standardSuccess: 'successBackgroundColor'
-            }, action: (React.createElement(IconButton, { key: "close", "aria-label": "Close", color: "inherit", className: classes.close, onClick: clearMessage },
-                React.createElement(CloseIcon, null))) }, text)));
+        }, autoHideDuration: persist ? null : 6000, onClose: handleClose, disableWindowBlurListener: persist }, React.createElement(Alert, { variant: "filled", severity: success ? 'success' : 'error', classes: {
+            // MUI 9 replaced the variant+severity class keys (`standardError`,
+            // `standardSuccess`) with separate `standard` and `colorError` /
+            // `colorSuccess` keys. Both were already inert here because this
+            // Alert renders with `variant="filled"`, so they are dropped rather
+            // than remapped — remapping to `colorError`/`colorSuccess` would
+            // newly apply styling that has never been active.
+            message: 'text-pre-wrap'
+        }, action: (React.createElement(IconButton, { key: "close", "aria-label": "Close", color: "inherit", className: classes.close, onClick: clearMessage },
+            React.createElement(CloseIcon, null))) }, text)));
 };
 export default Message;

package/dist/dynamicSizeList/DynamicSizeList.d.ts

@@ -1,17 +1,26 @@
 import React from 'react';
-import { VariableSizeListProps } from 'react-window';
-interface Props extends Omit<VariableSizeListProps, 'itemSize'> {
+export interface DynamicSizeListProps {
+    /** Component rendering a single row; receives `data`, `index` and `style`. */
+    children: any;
+    itemCount: number;
+    itemData?: any;
+    height?: number | string;
+    width?: number | string;
+    /** Row height assumed before a row has been measured. */
+    estimatedItemSize?: number;
     listRef?: any;
+    className?: string;
+    overscanCount?: number;
 }
-declare class DynamicSizeList extends React.Component<Props> {
-    listRef: React.RefObject<any>;
-    rowSizes: any[];
-    componentDidMount(): void;
-    attachRefs: (node: any) => void;
-    render(): React.JSX.Element;
-    scrollToItem(index: any, align: any): void;
-    renderItem: (props: any) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-    handleNewMeasurements: (index: any, newSize: any) => void;
-    getItemSize: (index: any) => any;
+export interface DynamicSizeListApi {
+    scrollToItem(index: number, align?: 'auto' | 'center' | 'end' | 'smart' | 'start'): void;
 }
+/**
+ * Variable-height virtualised list.
+ *
+ * react-window v2 measures dynamic rows itself through `useDynamicRowHeight`,
+ * which replaces the ResizeObserver-based row measurer this component used to
+ * carry against v1's `VariableSizeList`.
+ */
+declare const DynamicSizeList: React.ForwardRefExoticComponent<DynamicSizeListProps & React.RefAttributes<DynamicSizeListApi>>;
 export default DynamicSizeList;

package/dist/dynamicSizeList/DynamicSizeList.js

@@ -5,163 +5,36 @@
  *
  *  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 from 'react';
-import { VariableSizeList } from 'react-window';
-class ItemMeasurer extends React.Component {
-    constructor() {
-        super(...arguments);
-        this._node = null;
-        this._resizeObserver = null;
-        this._measureItem = () => {
-            const { handleNewMeasurements, index } = this.props;
-            const node = this._node;
-            if (node) {
-                const { height, width } = node.getBoundingClientRect();
-                const isVisible = height > 0 || width > 0;
-                if (isVisible) {
-                    const newSize = Math.ceil(height);
-                    handleNewMeasurements(index, newSize);
-                }
-            }
-        };
-        this._refSetter = ref => {
-            if (this._resizeObserver !== null && this._node !== null) {
-                this._resizeObserver.unobserve(this._node);
-            }
-            if (ref) {
-                this._node = ref;
-            }
-            else {
-                this._node = null;
-            }
-            if (this._resizeObserver !== null && this._node !== null) {
-                this._resizeObserver.observe(this._node);
-            }
-        };
-        this._onResize = entries => {
-            const _this = this;
-            window.requestAnimationFrame(() => {
-                if (!Array.isArray(entries) || !entries.length) {
-                    return;
-                }
-                _this._measureItem();
-            });
-        };
-    }
-    componentDidMount() {
-        this._measureItem();
-        // @ts-ignore
-        if (typeof window.ResizeObserver !== 'undefined') {
-            // @ts-ignore
-            this._resizeObserver = new window.ResizeObserver(this._onResize);
-            if (this._node !== null) {
-                this._resizeObserver.observe(this._node);
-            }
-        }
-        else {
-            //
-        }
-    }
-    componentWillUnmount() {
-        if (this._resizeObserver !== null) {
-            this._resizeObserver.disconnect();
-            this._resizeObserver = null;
-        }
-    }
-    render() {
-        return React.cloneElement(this.props.item, {
-            ref: this._refSetter
-        });
-    }
-}
-class DynamicSizeList extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.listRef = React.createRef();
-        this.rowSizes = [];
-        this.attachRefs = node => {
-            const { listRef } = this.props;
-            if (node) {
-                if (!this.listRef.current) {
-                    // @ts-ignore
-                    this.listRef.current = node;
-                }
-                if (typeof listRef === 'function') {
-                    listRef(node);
-                }
-                if (typeof listRef === 'object') {
-                    listRef.current = node;
-                }
-            }
-        };
-        this.renderItem = props => {
-            // clear height
-            if (props.style.height !== undefined) {
-                props.style.height = undefined;
-            }
-            return React.createElement(ItemMeasurer, {
-                index: props.index,
-                // @ts-ignore
-                item: React.createElement(this.props.children, props),
-                handleNewMeasurements: this.handleNewMeasurements
-            });
-        };
-        this.handleNewMeasurements = (index, newSize) => {
-            const itemSizeDelta = newSize - this.getItemSize(index);
-            if (itemSizeDelta !== 0) {
-                this.rowSizes[index] = newSize;
-                const ref = this.listRef.current;
-                if (ref) {
-                    const { isScrolling, scrollDirection } = ref.state;
-                    if (isScrolling && scrollDirection === 'backward') {
-                        ref._outerRef.scrollBy({
-                            top: itemSizeDelta,
-                            left: 0,
-                            behavior: 'auto'
-                        });
-                    }
-                    ref.resetAfterIndex(index, true);
-                }
-            }
-        };
-        this.getItemSize = index => {
-            // https://react-window.now.sh/#/api/VariableSizeList
-            const defaultEstimatedItemSize = 50;
-            return (this.rowSizes[index]
-                || this.props.estimatedItemSize
-                || defaultEstimatedItemSize);
-        };
-    }
-    componentDidMount() {
-        const ref = this.listRef.current;
-        if (ref) {
-            ref.resetAfterIndex(0, true);
+import React, { useImperativeHandle, useRef } from 'react';
+import { List, useDynamicRowHeight } from 'react-window';
+/**
+ * Variable-height virtualised list.
+ *
+ * react-window v2 measures dynamic rows itself through `useDynamicRowHeight`,
+ * which replaces the ResizeObserver-based row measurer this component used to
+ * carry against v1's `VariableSizeList`.
+ */
+const DynamicSizeList = React.forwardRef(({ children, itemCount, itemData, height, width, estimatedItemSize, listRef, className, overscanCount, }, ref) => {
+    const defaultEstimatedItemSize = 50;
+    const rowHeight = useDynamicRowHeight({
+        defaultRowHeight: estimatedItemSize || defaultEstimatedItemSize,
+    });
+    const listApi = useRef(undefined);
+    const attachRefs = node => {
+        listApi.current = node;
+        if (typeof listRef === 'function') {
+            listRef(node);
         }
-    }
-    render() {
-        const _a = this.props, { children } = _a, rest = __rest(_a, ["children"]);
-        return (React.createElement(VariableSizeList, Object.assign({}, rest, { ref: this.attachRefs, itemSize: this.getItemSize }), this.renderItem));
-    }
-    scrollToItem(index, align) {
-        const ref = this.listRef.current;
-        if (ref) {
-            ref.scrollToItem(index, align);
-            //
-            window.requestAnimationFrame(() => {
-                ref.scrollToItem(index, align);
-            });
+        else if (listRef && typeof listRef === 'object') {
+            listRef.current = node;
         }
-    }
-}
+    };
+    useImperativeHandle(ref, () => ({
+        scrollToItem: (index, align) => {
+            var _a;
+            (_a = listApi.current) === null || _a === void 0 ? void 0 : _a.scrollToRow({ index, align });
+        },
+    }), []);
+    return (React.createElement(List, { className: className, style: { height, width }, listRef: attachRefs, rowComponent: children, rowProps: { data: itemData }, rowCount: itemCount, rowHeight: rowHeight, overscanCount: overscanCount }));
+});
 export default DynamicSizeList;

package/dist/fieldMessage/styles.d.ts

@@ -1,5 +1,6 @@
 import { AppTheme } from '../model';
-declare const _default: (theme: AppTheme) => {
+export default _default;
+declare function _default(theme: AppTheme): {
     root: {
         marginTop: string;
         paddingBottom: string;
@@ -11,4 +12,3 @@ declare const _default: (theme: AppTheme) => {
         marginRight: string;
     };
 };
-export default _default;

package/dist/fileUploader/FileUploaderDialog.js

@@ -87,7 +87,14 @@ const FileUploaderDialog = (props => {
                         "Please upload only:",
                         ' ',
                         acceptText())))))));
-    return dialog ? (React.createElement(Dialog, { ref: fileRef, open: opened, disableEscapeKeyDown: true, onClose: onClose, classes: {
+    return dialog ? (React.createElement(Dialog, { ref: fileRef, open: opened, 
+        // MUI 9 removed `disableEscapeKeyDown`; ignoring the `escapeKeyDown`
+        // close reason preserves the previous behaviour.
+        onClose: onClose && ((event, reason) => {
+            if (reason !== 'escapeKeyDown') {
+                onClose();
+            }
+        }), classes: {
             paper: 'w-100'
         } },
         React.createElement("div", null,

package/dist/formFields/AutosizeInput.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface AutosizeInputProps extends React.ComponentPropsWithRef<"input"> {
+    placeholder?: string;
+    /**
+     * Space kept free after the text, in px. Defaults to the advance width of a
+     * single space in the input's resolved font, so the caret always fits without
+     * the value scrolling inside the input.
+     */
+    reserveWidth?: number;
+    /** MUI InputBase hands the DOM node over through this prop instead of `ref`. */
+    inputRef?: React.Ref<HTMLInputElement>;
+}
+export declare const AutosizeInput: React.FC<AutosizeInputProps>;
+export {};

package/dist/formFields/AutosizeInput.js

@@ -0,0 +1,156 @@
+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, useLayoutEffect, useRef, useState } from 'react';
+/**
+ * The space is measured as the difference between these two strings instead of
+ * on its own: a span holding nothing but whitespace is not reliably measurable,
+ * and differencing also folds letter- and word-spacing into the result. Both
+ * samples use `M` so that a copied `text-transform` cannot change them.
+ */
+const SPACE_SAMPLE = "M M";
+const NO_SPACE_SAMPLE = "MM";
+/** Every property that can change the advance width of a string. */
+const TYPOGRAPHY_PROPS = [
+    "font-family",
+    "font-size",
+    "font-weight",
+    "font-style",
+    "font-stretch",
+    "font-variant",
+    "font-feature-settings",
+    "font-variation-settings",
+    "font-kerning",
+    "font-optical-sizing",
+    "letter-spacing",
+    "word-spacing",
+    "text-transform"
+];
+const measureStyle = {
+    // Typography is copied from the input itself once mounted, `inherit` is just
+    // the starting approximation
+    font: "inherit",
+    letterSpacing: "inherit",
+    textTransform: "inherit",
+    position: "absolute",
+    top: 0,
+    left: 0,
+    visibility: "hidden",
+    pointerEvents: "none",
+    whiteSpace: "pre",
+    height: 0,
+    padding: 0,
+    border: "none",
+    margin: 0
+};
+/** Bumped when webfonts finish loading, which invalidates cached glyph metrics. */
+let fontEpoch = 0;
+const spaceWidthCache = new Map();
+/**
+ * Copies the typography of `source` onto `targets` and returns a signature of
+ * the applied values, usable as a cache key for font dependent measurements.
+ */
+const copyTypography = (source, targets) => {
+    const computed = window.getComputedStyle(source);
+    return TYPOGRAPHY_PROPS.map(prop => {
+        const propValue = computed.getPropertyValue(prop);
+        targets.forEach(target => target.style.setProperty(prop, propValue));
+        return propValue;
+    }).join("|");
+};
+/**
+ * Advance width of a single space under the current font settings, used as the
+ * trailing buffer instead of a hardcoded pixel constant so that it scales with
+ * the font size while staying as narrow as the typography allows.
+ */
+const getSpaceWidth = (probe, typographySignature) => {
+    const cacheKey = `${fontEpoch}|${typographySignature}`;
+    const cached = spaceWidthCache.get(cacheKey);
+    if (cached !== undefined)
+        return cached;
+    probe.textContent = SPACE_SAMPLE;
+    const withSpace = probe.getBoundingClientRect().width;
+    probe.textContent = NO_SPACE_SAMPLE;
+    const withoutSpace = probe.getBoundingClientRect().width;
+    probe.textContent = "";
+    const spaceWidth = Math.max(withSpace - withoutSpace, 0);
+    spaceWidthCache.set(cacheKey, spaceWidth);
+    return spaceWidth;
+};
+export const AutosizeInput = (_a) => {
+    var { placeholder, reserveWidth, inputRef, ref } = _a, props = __rest(_a, ["placeholder", "reserveWidth", "inputRef", "ref"]);
+    const [value, setValue] = useState(props.value || "");
+    const [width, setWidth] = useState(0);
+    const spanRef = useRef(null);
+    const probeRef = useRef(null);
+    const inputNode = useRef(null);
+    const setInputNode = useCallback((node) => {
+        inputNode.current = node;
+        [ref, inputRef].forEach(target => {
+            if (typeof target === "function")
+                target(node);
+            else if (target)
+                target.current = node;
+        });
+    }, [ref, inputRef]);
+    const measure = useCallback(() => {
+        const span = spanRef.current;
+        const probe = probeRef.current;
+        const input = inputNode.current;
+        if (!span || !probe || !input)
+            return;
+        // Measuring against the input's own computed typography keeps the two in
+        // sync even when the font is applied by a class rather than inherited
+        const typographySignature = copyTypography(input, [span, probe]);
+        // getBoundingClientRect keeps the sub pixel part that offsetWidth truncates
+        const textWidth = span.getBoundingClientRect().width;
+        const reserve = reserveWidth !== null && reserveWidth !== void 0 ? reserveWidth : getSpaceWidth(probe, typographySignature);
+        // Deliberately not rounded up: `Math.ceil` inflated the trailing gap by up
+        // to a full pixel, which is a fifth of a space at body font sizes. Layout is
+        // sub pixel accurate, so a fractional width keeps the gap exactly one space
+        setWidth(textWidth + reserve);
+    }, [reserveWidth]);
+    // Layout effect, so the width is correct in the same frame the value changes
+    useLayoutEffect(measure, [measure, value, placeholder]);
+    // Re-measure when the text changes size for reasons React cannot see: late
+    // loading webfonts, theme driven typography swaps, zoom, becoming visible
+    useEffect(() => {
+        if (typeof ResizeObserver === "undefined" || !spanRef.current)
+            return;
+        const observer = new ResizeObserver(measure);
+        observer.observe(spanRef.current);
+        return () => observer.disconnect();
+    }, [measure]);
+    // A webfont replacing the fallback face keeps the same computed values, so the
+    // cached glyph metrics have to be invalidated explicitly
+    useEffect(() => {
+        const fonts = document.fonts;
+        if (!fonts)
+            return;
+        const onLoadingDone = () => {
+            fontEpoch += 1;
+            measure();
+        };
+        fonts.addEventListener("loadingdone", onLoadingDone);
+        return () => fonts.removeEventListener("loadingdone", onLoadingDone);
+    }, [measure]);
+    const handleChange = (e) => {
+        setValue(e.target.value);
+        if (props.onChange)
+            props.onChange(e);
+    };
+    return (React.createElement("div", { style: { display: "inline-block", position: "relative" } },
+        React.createElement("span", { ref: spanRef, style: measureStyle, "aria-hidden": true }, value || placeholder || ""),
+        React.createElement("span", { ref: probeRef, style: measureStyle, "aria-hidden": true }),
+        React.createElement("input", Object.assign({}, props, { ref: setInputNode, type: "text", value: value, onChange: handleChange, placeholder: placeholder, style: Object.assign(Object.assign({}, props.style), { letterSpacing: "inherit", textTransform: "inherit", width: `${width}px`, boxSizing: "border-box", 
+                // CRITICAL: Padding and borders must be 0, the measuring span has none either
+                paddingLeft: 0, paddingRight: 0, borderLeft: "none", borderRight: "none", margin: 0, textOverflow: "unset" }) }))));
+};

package/dist/formFields/CheckboxField.d.ts

@@ -3,6 +3,8 @@
  * */
 import React from 'react';
 import { CheckboxFieldProps, FieldInputProps } from '../model';
-import { CheckboxProps } from '@mui/material/Checkbox/Checkbox';
-export declare const StyledCheckbox: (props: any) => React.JSX.Element;
+import { CheckboxProps } from '@mui/material';
+declare const StyledCheckboxBase: (props: any) => React.JSX.Element;
+export declare const StyledCheckbox: typeof StyledCheckboxBase;
 export declare function CheckboxField<IP extends FieldInputProps>({ input, color, disabled, stringValue, className, uncheckedClass, onChangeHandler, stopPropagation, ...rest }: CheckboxFieldProps<IP> & CheckboxProps): React.JSX.Element;
+export {};

package/dist/formFields/ColoredCheckBox.js

@@ -16,7 +16,7 @@ import { useStyles } from 'tss-react/mui';
 export function ColoredCheckBox({ input, label, color, className, disabled }) {
     const { cx } = useStyles();
     const theme = useAppTheme();
-    const inputRef = useRef();
+    const inputRef = useRef(null);
     const onClick = useCallback(() => {
         inputRef.current.click();
     }, [inputRef.current]);
@@ -34,7 +34,10 @@ export function ColoredCheckBox({ input, label, color, className, disabled }) {
                 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: {
+        label && React.createElement(Typography, { variant: "caption", sx: {
+                // MUI 9 no longer accepts system props such as `fontWeight`
+                // directly on Typography.
+                fontWeight: 400,
                 marginLeft: 1,
                 textDecoration: input.value ? 'line-through' : 'unset',
                 color: theme => (input.value ? theme.palette.text.disabled : 'unset'),

package/dist/formFields/EditInPlaceDateTimeField.js

@@ -163,44 +163,43 @@ function EditInPlaceDateTimeField({ type, formatDate, formatTime, formatDateTime
             [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, slots: {
-                    field: EditInPlaceFieldBase
-                }, slotProps: {
-                    field: {
-                        name: input.name,
+        React.createElement("div", { id: input.name, className: "w-100" }, 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,
+                    variant,
+                    error,
+                    invalid,
+                    inline,
+                    label,
+                    warning,
+                    fieldClasses,
+                    rightAligned,
+                    disabled,
+                    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,
-                        variant,
-                        error,
-                        invalid,
-                        inline,
-                        label,
-                        warning,
-                        fieldClasses,
-                        rightAligned,
+                        onKeyPress,
                         disabled,
-                        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
-                        }
+                        onBlur,
+                        onKeyDown: onEnterPress,
+                        onChange: onInputChange
                     }
-                } }))));
+                }
+            } }))));
 }
 export default EditInPlaceDateTimeField;

package/dist/formFields/EditInPlaceField.js

@@ -41,14 +41,13 @@ function EditInPlaceField({ inputRef, input, label, maxLength, disabled, min, ma
     return (React.createElement("div", { id: input.name, className: cx(className, 'outline-none', {
             [classes.rightAligned]: rightAligned,
             [classes.inlineContainer]: inline
-        }) },
-        React.createElement(EditInPlaceFieldBase, { name: input.name, value: inputValue, variant: variant, error: error, invalid: invalid, inline: inline, label: label, warning: warning, fieldClasses: fieldClasses, endAdornmentClass: classes.endAdornment, rightAligned: rightAligned, shrink: Boolean(label || input.value), disabled: disabled, labelAdornment: labelAdornment, placeholder: placeholder, hideArrows: ['percentage', 'number'].includes(type), editIcon: editIcon === undefined ? React.createElement(Edit, { fontSize: inline ? 'inherit' : undefined }) : editIcon, InputProps: Object.assign({ multiline,
-                onKeyPress,
-                onBlur, onFocus: input.onFocus, maxRows: truncateLines, inputProps: Object.assign({ ref: inputRef, maxLength,
-                    step,
-                    min,
-                    max,
-                    onKeyDown,
-                    type }, InputProps.inputProps || {}), value: inputValue, onChange: v => (type === 'number' && max && Number(v) > Number(max) ? null : input.onChange(v)) }, InputProps) })));
+        }) }, React.createElement(EditInPlaceFieldBase, { name: input.name, value: inputValue, variant: variant, error: error, invalid: invalid, inline: inline, label: label, warning: warning, fieldClasses: fieldClasses, endAdornmentClass: classes.endAdornment, rightAligned: rightAligned, shrink: Boolean(label || input.value), disabled: disabled, labelAdornment: labelAdornment, placeholder: placeholder, hideArrows: ['percentage', 'number'].includes(type), editIcon: editIcon === undefined ? React.createElement(Edit, { fontSize: inline ? 'inherit' : undefined }) : editIcon, InputProps: Object.assign({ multiline,
+            onKeyPress,
+            onBlur, onFocus: input.onFocus, maxRows: truncateLines, inputProps: Object.assign({ ref: inputRef, maxLength,
+                step,
+                min,
+                max,
+                onKeyDown,
+                type }, InputProps.inputProps || {}), value: inputValue, onChange: v => (type === 'number' && max && Number(v) > Number(max) ? null : input.onChange(v)) }, InputProps) })));
 }
 export default EditInPlaceField;