@vertigis/react-ui 12.2.0 → 13.0.0

package/ColorInput/ColorInput.js

@@ -88,7 +88,10 @@ export const ColorInput = forwardRef(function ColorInput({ "aria-labelledby": ar
     // The rgb object will be used for passing values to the color picker component
     const rgb = color ? color.rgb().object() : defaultRgbColor;
     const classes = mergeStyles(colorInputClasses, classesProp);
-    return (_jsxs(Root, { className: clsx(classes.root, className), ...others, ref: ref, children: [_jsx(Button, { "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...ButtonProps, disabled: disabled ?? muiFormControl?.disabled, className: classes.pickerButton, "data-test": "ColorInput-picker-button", onClick: handleColorPopoverOpen, children: _jsx("div", { className: classes.pickerButtonBackground, children: _jsx("div", { className: classes.pickerButtonColor, "data-test": "ColorInput-picker-button-color", style: {
+    return (_jsxs(Root, { className: clsx(classes.root, className), ...others, ref: ref, children: [_jsx(Button, { ...ButtonProps, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, disabled: ButtonProps?.disabled ?? disabled ?? muiFormControl?.disabled, className: clsx(classes.pickerButton, ButtonProps?.className), "data-test": "ColorInput-picker-button", onClick: event => {
+                    handleColorPopoverOpen(event);
+                    ButtonProps?.onClick?.(event);
+                }, children: _jsx("div", { className: classes.pickerButtonBackground, children: _jsx("div", { className: classes.pickerButtonColor, "data-test": "ColorInput-picker-button-color", style: {
                             // The rgb CSS string will be used for styling the color picker button
                             background: color ? color.rgb().string() : "transparent",
                         } }) }) }), _jsx(Popover, { anchorEl: buttonEl, open: !!buttonEl, anchorOrigin: {

package/FormLabelAutocompleteField/FormLabelAutocompleteField .js

@@ -15,6 +15,6 @@ const FormLabelAutocompleteField = forwardRef(function FormLabelAutocompleteFiel
     const id = useId(idProp);
     const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
     const inputLabelId = label && id ? `${id}-label` : undefined;
-    return (_jsxs(FormControl, { fullWidth: fullWidth, ref: ref, disabled: disabled, ...other, children: [label && (_jsx(FormLabel, { htmlFor: id, id: inputLabelId, children: label })), helperText && (_jsx(FormHelperText, { id: helperTextId, ...FormHelperTextProps, children: helperText })), _jsx(Autocomplete, { "aria-labelledby": inputLabelId, defaultValue: defaultValue, disableClearable: disableClearable, disabled: disabled, getOptionLabel: getOptionLabel, onBlur: onBlur, onChange: onChange, onFocus: onFocus, options: options, filterOptions: filterOptions, renderInput: params => (_jsx(Input, { ...params.InputProps, inputProps: { ...params.inputProps }, sx: { width: "100%" } })), value: value, ...AutocompleteProps })] }));
+    return (_jsxs(FormControl, { fullWidth: fullWidth, ref: ref, disabled: disabled, ...other, children: [label && (_jsx(FormLabel, { htmlFor: id, id: inputLabelId, children: label })), helperText && (_jsx(FormHelperText, { ...FormHelperTextProps, id: helperTextId, children: helperText })), _jsx(Autocomplete, { "aria-labelledby": inputLabelId, defaultValue: defaultValue, disableClearable: disableClearable, disabled: disabled, getOptionLabel: getOptionLabel, onBlur: onBlur, onChange: onChange, onFocus: onFocus, options: options, filterOptions: filterOptions, renderInput: params => (_jsx(Input, { ...params.InputProps, inputProps: { ...params.inputProps }, sx: { width: "100%" } })), value: value, ...AutocompleteProps })] }));
 });
 export default FormLabelAutocompleteField;

package/FormLabelColorField/FormLabelColorField.js

@@ -14,7 +14,7 @@ const FormLabelColorField = forwardRef(function FormLabelColorField(props, ref)
     const id = useId(idProp);
     const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
     const inputLabelId = label && id ? `${id}-label` : undefined;
-    return (_jsxs(FormControl, { fullWidth: fullWidth, ref: ref, disabled: disabled, ...other, children: [label && (_jsx(FormLabel, { htmlFor: id, id: inputLabelId, children: label })), helperText && (_jsx(FormHelperText, { id: helperTextId, ...FormHelperTextProps, children: helperText })), _jsx(ColorInput, { id: id, placeholder: placeholder, onBlur: onBlur, onFocus: onFocus, defaultValue: defaultValue, "aria-describedby": helperTextId, "aria-labelledby": inputLabelId, onChange: onChange, value: value, disabled: disabled, ...ColorInputProps,
+    return (_jsxs(FormControl, { fullWidth: fullWidth, ref: ref, disabled: disabled, ...other, children: [label && (_jsx(FormLabel, { htmlFor: id, id: inputLabelId, children: label })), helperText && (_jsx(FormHelperText, { ...FormHelperTextProps, id: helperTextId, children: helperText })), _jsx(ColorInput, { id: id, placeholder: placeholder, onBlur: onBlur, onFocus: onFocus, defaultValue: defaultValue, "aria-describedby": helperTextId, "aria-labelledby": inputLabelId, onChange: onChange, value: value, disabled: disabled, ...ColorInputProps,
                 // Workaround typings issue.
                 ref: ColorInputProps?.ref })] }));
 });

package/FormLabelNumberField/FormLabelNumberField.d.ts

@@ -6,7 +6,7 @@ import { type NumberInputProps } from "../NumberInput/index.js";
  * Properties for FormLabelNumberField.
  */
 export type FormLabelNumberFieldProps = Omit<TextFieldProps, "aria-label" | "value" | "onChange" | "InputProps" | "select" | "nativeSelect" | "multiline" | "minRows" | "maxRows" | "SelectProps" | "rows" | "type" | "title" | "onError"> & Pick<FormControlProps, "inlineHelpContent" | "inlineHelpUrl"> & NumberInputProps & {
-    InputProps?: Omit<NumberInputProps, "ref">;
+    InputProps?: Omit<NumberInputProps, "id" | "ref">;
     NumberInputComponent?: FC<NumberInputProps>;
     /**
      * A label to display as helpText when the number input value is out of

package/FormLabelNumberField/FormLabelNumberField.js

@@ -47,9 +47,21 @@ const FormLabelNumberField = forwardRef(function FormLabelNumberField(props, ref
         setNumberError(undefined);
         onErrorEnd?.(numericValue, textValue);
     }, [onErrorEnd]);
-    return (_jsxs(FormControl, { fullWidth: fullWidth, ref: ref, error: error || !!numberError, ...other, children: [label && (_jsx(FormLabel, { htmlFor: id, id: inputLabelId, children: label })), (helperText || numberError) && (_jsx(FormHelperText, { id: helperTextId, ...FormHelperTextProps, children: numberError ?? helperText })), _jsx(FormNumberInput, { "aria-describedby": helperTextId, autoComplete: autoComplete, 
+    return (_jsxs(FormControl, { fullWidth: fullWidth, ref: ref, error: error || !!numberError, ...other, children: [label && (_jsx(FormLabel, { htmlFor: id, id: inputLabelId, children: label })), (helperText || numberError) && (_jsx(FormHelperText, { ...FormHelperTextProps, id: helperTextId, children: numberError ?? helperText })), _jsx(FormNumberInput
+            // All of the properties fron here down to `InputProps` can be overridden by it.
+            // Any after that must be controlled by this component itself.
+            , { 
+                // All of the properties fron here down to `InputProps` can be overridden by it.
+                // Any after that must be controlled by this component itself.
+                autoComplete: autoComplete, 
                 // eslint-disable-next-line jsx-a11y/no-autofocus
-                autoFocus: autoFocus, defaultValue: defaultValue, fullWidth: fullWidth, name: name, value: value, id: id, inputRef: inputRef, onBlur: onBlur, onChange: onChange, onFocus: onFocus, placeholder: placeholder, inputProps: inputProps, error: error, onError: handleError, onErrorEnd: handleErrorEnd, min: min, max: max, allowUndefined: allowUndefined, maxDecimalPlaces: maxDecimalPlaces, correctOnBlur: correctOnBlur, ...InputProps })] }));
+                autoFocus: autoFocus, defaultValue: defaultValue, fullWidth: fullWidth, name: name, value: value, inputRef: inputRef, onBlur: onBlur, onChange: onChange, onFocus: onFocus, placeholder: placeholder, inputProps: inputProps, error: error, min: min, max: max, allowUndefined: allowUndefined, maxDecimalPlaces: maxDecimalPlaces, correctOnBlur: correctOnBlur, ...InputProps, "aria-describedby": helperTextId, id: id, onError: (numericValue, textValue, errorType) => {
+                    InputProps?.onError?.(numericValue, textValue, errorType);
+                    handleError(numericValue, textValue, errorType);
+                }, onErrorEnd: (numericValue, textValue) => {
+                    InputProps?.onErrorEnd?.(numericValue, textValue);
+                    handleErrorEnd(numericValue, textValue);
+                } })] }));
 });
 function getNumberErrorText(val, min, max) {
     const hasMax = typeof max === "number" && !isNaN(max);

package/FormLabelSliderField/FormLabelSliderField.js

@@ -62,7 +62,7 @@ const FormLabelSliderField = forwardRef(function FormLabelSliderField(props, ref
         //
         // eslint-disable-next-line jsx-a11y/no-autofocus
         autoFocus: autoFocus, defaultValue: defaultValue, fullWidth: fullWidth, id: inputId, inputProps: inputProps, inputRef: inputRef ?? inputReference, name: name, onChange: onChange, placeholder: placeholder, value: value, error: error, onError: handleError, onErrorEnd: handleErrorEnd, min, max, ...InputProps, sx: { maxWidth: typography.pxToRem(74), ...InputProps?.sx } }));
-    return (_jsxs(FormControl, { fullWidth: fullWidth, ref: ref, disabled: disabled, error: error || !!numberError, ...other, children: [label && (_jsx(FormLabel, { htmlFor: inputId, id: inputLabelId, children: label })), (helperText || !!numberError) && (_jsx(FormHelperText, { id: helperTextId, ...FormHelperTextProps, children: numberError ?? helperText })), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Slider, { "aria-describedby": helperTextId, "aria-labelledby": inputLabelId, defaultValue: defaultValue, name: name, id: sliderId, value: value, onChange: handleSliderChange, disabled: disabled, min, max, ...SliderProps }), InputElement] })] }));
+    return (_jsxs(FormControl, { fullWidth: fullWidth, ref: ref, disabled: disabled, error: error || !!numberError, ...other, children: [label && (_jsx(FormLabel, { htmlFor: inputId, id: inputLabelId, children: label })), (helperText || !!numberError) && (_jsx(FormHelperText, { ...FormHelperTextProps, id: helperTextId, children: numberError ?? helperText })), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Slider, { "aria-describedby": helperTextId, "aria-labelledby": inputLabelId, defaultValue: defaultValue, name: name, id: sliderId, value: value, onChange: handleSliderChange, disabled: disabled, min, max, ...SliderProps }), InputElement] })] }));
 });
 function getNumberErrorText(val, min, max) {
     const hasMax = typeof max === "number" && !isNaN(max);

package/FormLabelTextField/FormLabelTextField.js

@@ -23,12 +23,18 @@ const FormLabelTextField = forwardRef(function FormLabelTextField(props, ref) {
         }
         inputMoreProps["aria-describedby"] = undefined;
     }
-    const InputElement = (_jsx(Input, { "aria-describedby": helperTextId, autoComplete: autoComplete, 
+    const InputElement = (_jsx(Input
+    // All of the properties fron here down to `InputProps` can be overridden by it.
+    // Any after that must be controlled by this component itself.
+    , { 
+        // All of the properties fron here down to `InputProps` can be overridden by it.
+        // Any after that must be controlled by this component itself.
+        autoComplete: autoComplete, 
         // Disabling this linting rule since the intent is to forward it
         // if it exists rather than set it.
         //
         // eslint-disable-next-line jsx-a11y/no-autofocus
-        autoFocus: autoFocus, defaultValue: defaultValue, fullWidth: fullWidth, id: id, inputProps: inputProps, inputRef: inputRef, maxRows: maxRows, minRows: minRows, multiline: multiline, name: name, onBlur: onBlur, onChange: onChange, onFocus: onFocus, placeholder: placeholder, rows: rows, type: type, value: value, ...inputMoreProps, ...InputProps }));
-    return (_jsxs(FormControl, { fullWidth: fullWidth, ref: ref, ...other, children: [label && (_jsx(FormLabel, { htmlFor: id, id: inputLabelId, children: label })), helperText && (_jsx(FormHelperText, { id: helperTextId, ...FormHelperTextProps, children: helperText })), select || nativeSelect ? (_jsx(Select, { "aria-describedby": helperTextId, id: id, labelId: inputLabelId, value: value, input: InputElement, ...SelectProps, ...(nativeSelect && { native: true }), children: children })) : (InputElement)] }));
+        autoFocus: autoFocus, defaultValue: defaultValue, fullWidth: fullWidth, inputProps: inputProps, inputRef: inputRef, maxRows: maxRows, minRows: minRows, multiline: multiline, name: name, onBlur: onBlur, onChange: onChange, onFocus: onFocus, placeholder: placeholder, rows: rows, type: type, value: value, ...inputMoreProps, ...InputProps, "aria-describedby": helperTextId, id: id }));
+    return (_jsxs(FormControl, { fullWidth: fullWidth, ref: ref, ...other, children: [label && (_jsx(FormLabel, { htmlFor: id, id: inputLabelId, children: label })), helperText && (_jsx(FormHelperText, { ...FormHelperTextProps, id: helperTextId, children: helperText })), select || nativeSelect ? (_jsx(Select, { "aria-describedby": helperTextId, id: id, labelId: inputLabelId, value: value, input: InputElement, ...SelectProps, ...(nativeSelect && { native: true }), children: children })) : (InputElement)] }));
 });
 export default FormLabelTextField;

package/IconMenu/IconMenu.js

@@ -16,6 +16,15 @@ const IconMenu = forwardRef(function IconMenu({ id: idProp, children, icon, clas
     const [open, setOpen] = useState(false);
     const id = useId(idProp);
     const classes = mergeStyles(iconMenuClasses, classesProp);
-    return (_jsxs(Box, { className: clsx(classes.root, className), ref: ref, ...others, children: [_jsx(IconButton, { "aria-label": "More", "aria-owns": open ? id : undefined, "aria-haspopup": "true", "data-test": "IconMenu-btn", disabled: disabled, className: classes.iconButton, onClick: () => setOpen(true), ref: ref => (anchorRef.current = anchorRef.current ?? ref), ...IconButtonProps, children: icon }), _jsx(Menu, { id: id, "data-test": "IconMenu-menu", anchorEl: anchorRef.current, open: open, onClose: () => setOpen(false), onClick: () => setOpen(false), ...MenuProps, children: children })] }));
+    return (_jsxs(Box, { className: clsx(classes.root, className), ref: ref, ...others, children: [_jsx(IconButton, { ...IconButtonProps, "aria-label": "More", "aria-owns": open ? id : undefined, "aria-haspopup": "true", "data-test": "IconMenu-btn", disabled: disabled, className: clsx(classes.iconButton, IconButtonProps?.className), onClick: event => {
+                    setOpen(true);
+                    IconButtonProps?.onClick?.(event);
+                }, ref: ref => (anchorRef.current = anchorRef.current ?? ref), children: icon }), _jsx(Menu, { ...MenuProps, open: MenuProps?.open ?? open, id: id, "data-test": "IconMenu-menu", anchorEl: anchorRef.current, onClose: (event, reason) => {
+                    setOpen(false);
+                    MenuProps?.onClose?.(event, reason);
+                }, onClick: event => {
+                    setOpen(false);
+                    MenuProps?.onClick?.(event);
+                }, children: children })] }));
 });
 export default IconMenu;

package/InlineHelp/InlineHelp.d.ts

@@ -23,6 +23,10 @@ export interface InlineHelpProps {
      * The help icon node to show.
      */
     icon?: ReactNode;
+    /**
+     * Callback fired when the help content is closed.
+     */
+    onClose?: () => void;
     /**
      * The title of the IconButton
      */

package/InlineHelp/InlineHelp.js

@@ -32,7 +32,7 @@ const StyledPopover = styled(Popover)(({ theme: { spacing } }) => ({
         wordWrap: "break-word",
     },
 }));
-const InlineHelp = forwardRef(function InlineHelp({ children, classes: classesProp, className, icon, title, url, ...other }, ref) {
+const InlineHelp = forwardRef(function InlineHelp({ children, classes: classesProp, className, icon, onClose, title, url, ...other }, ref) {
     const [iconBtnEl, setIconBtnEl] = useState();
     const theme = useTheme();
     const classes = mergeStyles(inlineHelpClasses, classesProp);
@@ -41,6 +41,9 @@ const InlineHelp = forwardRef(function InlineHelp({ children, classes: classesPr
     const handleIconPopoverClose = () => setIconBtnEl(undefined);
     return (_jsxs(Box, { className: clsx(classes.root, className), ref: ref, ...other, children: [_jsx(IconButton, { onClick: handleIconPopoverOpen, title: title, size: "small", "data-test": `${PREFIX}-button`, className: clsx({
                     [classes.errorIcon]: formControl?.error,
-                }), children: icon ? icon : _jsx(HelpIcon, {}) }), _jsxs(StyledPopover, { anchorEl: iconBtnEl, open: !!iconBtnEl, classes: { paper: classes.paper }, anchorOrigin: theme.direction === "rtl" ? RTL_ORIGIN : LTR_ORIGIN, transformOrigin: theme.direction === "rtl" ? RTL_ORIGIN : LTR_ORIGIN, onClose: handleIconPopoverClose, children: [_jsx(Typography, { children: children }), url && (_jsx(Link, { align: "right", display: "block", href: url.href, onClick: () => url.onClick?.(url.href), target: "_blank", variant: "body2", children: url.label }))] })] }));
+                }), children: icon ? icon : _jsx(HelpIcon, {}) }), _jsxs(StyledPopover, { anchorEl: iconBtnEl, open: !!iconBtnEl, classes: { paper: classes.paper }, anchorOrigin: theme.direction === "rtl" ? RTL_ORIGIN : LTR_ORIGIN, transformOrigin: theme.direction === "rtl" ? RTL_ORIGIN : LTR_ORIGIN, onClose: () => {
+                    handleIconPopoverClose();
+                    onClose?.();
+                }, children: [_jsx(Typography, { children: children }), url && (_jsx(Link, { align: "right", display: "block", href: url.href, onClick: () => url.onClick?.(url.href), target: "_blank", variant: "body2", children: url.label }))] })] }));
 });
 export default InlineHelp;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vertigis/react-ui",
-    "version": "12.2.0",
+    "version": "13.0.0",
     "description": "Utilities and React components used in VertiGIS applications.",
     "keywords": [
         "vertigis",