@vertigis/react-ui 13.3.1 → 14.0.1

package/ColorInput/ColorInput.js

@@ -67,7 +67,7 @@ const Root = styled(Box)(({ theme: { palette, shape, typography } }) => ({
         },
     },
 }));
-export const ColorInput = forwardRef(function ColorInput({ "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ButtonProps, className, classes: classesProp, disabled, presetColors, onChange, value: unsanitizedValue, sketchPickerStyle = {}, ...others }, ref) {
+export const ColorInput = forwardRef(({ "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ButtonProps, className, classes: classesProp, disabled, presetColors, onChange, value: unsanitizedValue, sketchPickerStyle = {}, ...others }, ref) => {
     const theme = useTheme();
     const [buttonEl, setButtonEl] = useState();
     const handleColorPopoverOpen = (event) => setButtonEl(event.currentTarget);
@@ -82,7 +82,7 @@ export const ColorInput = forwardRef(function ColorInput({ "aria-labelledby": ar
     // See https://github.com/mui-org/material-ui/pull/20278.
     const muiFormControl = useFormControl();
     // `RGB(0,0,0)` will fail, we should instead convert to `rgb(0,0,0)`
-    const value = unsanitizedValue && unsanitizedValue.toLowerCase();
+    const value = unsanitizedValue?.toLowerCase();
     // Color allows us to easily convert between different color types
     const color = parseColor(value);
     // The rgb object will be used for passing values to the color picker component
@@ -113,7 +113,7 @@ export const ColorInput = forwardRef(function ColorInput({ "aria-labelledby": ar
                         g: rgb.g,
                         b: rgb.b,
                         a: rgb.alpha,
-                    }, onChangeComplete: handleColorPickerChangeComplete, presetColors: presetColors || defaultColors, styles: {
+                    }, onChangeComplete: handleColorPickerChangeComplete, presetColors: presetColors ?? defaultColors, styles: {
                         default: {
                             picker: {
                                 background: theme.palette.background.paper,

package/CopyableText/CopyableText.js

@@ -74,7 +74,7 @@ const CopyableText = forwardRef((props, ref) => {
                     readOnly: true,
                     "data-test": "CopyableText-Input",
                     ...inputProps,
-                }, inputRef: mergeRefs(ref, localRef), value: value || "", "data-test": "CopyableText-Input-Wrapper", ...otherInputProps }), _jsx(Tooltip, { "data-test": "CopyableText-Tooltip", open: open, onOpen: handleTooltipOpen, onClose: handleTooltipClose, title: showClickedMessage ? tooltipCopiedText : tooltipCopyText, placement: "bottom", children: _jsx(Button, { className: classes.iconButton, "data-test": "CopyableText-IconButton", disabled: !value, onClick: handleCopyUrl, onMouseDown: handleMouseDown, children: _jsx(CopyIcon, {}) }) })] }));
+                }, inputRef: mergeRefs(ref, localRef), value: value ?? "", "data-test": "CopyableText-Input-Wrapper", ...otherInputProps }), _jsx(Tooltip, { "data-test": "CopyableText-Tooltip", open: open, onOpen: handleTooltipOpen, onClose: handleTooltipClose, title: showClickedMessage ? tooltipCopiedText : tooltipCopyText, placement: "bottom", children: _jsx(Button, { className: classes.iconButton, "data-test": "CopyableText-IconButton", disabled: !value, onClick: handleCopyUrl, onMouseDown: handleMouseDown, children: _jsx(CopyIcon, {}) }) })] }));
 });
 CopyableText.displayName = "CopyableText";
 export default CopyableText;

package/FormControl/FormControl.js

@@ -22,7 +22,7 @@ const StyledMUIFormControl = styled(MUIFormControl)({
 /**
  * A simple extension for a Form Control that includes inline help.
  */
-const FormControl = forwardRef(function FormControl(props, ref) {
+const FormControl = forwardRef((props, ref) => {
     const { children, classes, inlineHelpContent, inlineHelpUrl, inlineHelpTitle, ...other } = props;
     const { inlineHelp: inlineHelpClass, ...otherClasses } = mergeStyles(gcxFormControlClasses, classes);
     return (_jsxs(StyledMUIFormControl, { ...other, classes: otherClasses, ref: ref, children: [children, inlineHelpContent && (_jsx(InlineHelp, { title: inlineHelpTitle, className: inlineHelpClass, url: inlineHelpUrl, children: inlineHelpContent }))] }));

package/FormLabel/FormLabel.js

@@ -22,7 +22,7 @@ const StyledMUIFormLabel = styled(MUIFormLabel)(({ theme: { spacing, palette } }
         fontSize: "0.875em",
     },
 }));
-export const FormLabel = forwardRef(function FormLabel(props, ref) {
+export const FormLabel = forwardRef((props, ref) => {
     const { children, classes, className, error: errorProp, ...other } = props;
     // Careful. `useFormControl` can return undefined.
     // See https://github.com/mui-org/material-ui/pull/20278.

package/FormLabelAutocompleteField/FormLabelAutocompleteField .js

@@ -10,8 +10,8 @@ import { useId } from "../utils/react.js";
  * Like TextField, but uses a FormLabel instead of an InputLabel. Also allows
  * for inline help.
  */
-const FormLabelAutocompleteField = forwardRef(function FormLabelAutocompleteField(props, ref) {
-    const { AutocompleteProps, defaultValue, disableClearable, disabled, filterOptions, FormHelperTextProps, fullWidth = false, getOptionLabel, helperText, id: idProp, label, onBlur, onChange, onFocus, options, placeholder, value, ...other } = props;
+const FormLabelAutocompleteField = forwardRef((props, ref) => {
+    const { AutocompleteProps, defaultValue, disableClearable, disabled, filterOptions, FormHelperTextProps, fullWidth = false, getOptionLabel, helperText, id: idProp, label, onBlur, onChange, onFocus, options, value, ...other } = props;
     const id = useId(idProp);
     const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
     const inputLabelId = label && id ? `${id}-label` : undefined;

package/FormLabelColorField/FormLabelColorField.js

@@ -9,12 +9,12 @@ import { useId } from "../utils/react.js";
  * Like TextField, but uses a FormLabel instead of an InputLabel. Also allows
  * for inline help.
  */
-const FormLabelColorField = forwardRef(function FormLabelColorField(props, ref) {
+const FormLabelColorField = forwardRef((props, ref) => {
     const { defaultValue, FormHelperTextProps, fullWidth = false, helperText, id: idProp, label, onBlur, onChange, onFocus, placeholder, type, value, disabled, ColorInputProps, ...other } = props;
     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, { ...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,
+    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, 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.js

@@ -12,7 +12,7 @@ import { useId } from "../utils/react.js";
  * Like TextField, but uses a FormLabel instead of an InputLabel, and uses
  * NumberInput instead of a normal input.
  */
-const FormLabelNumberField = forwardRef(function FormLabelNumberField(props, ref) {
+const FormLabelNumberField = forwardRef((props, ref) => {
     const { autoComplete, autoFocus = false, children, className, defaultValue, FormHelperTextProps, fullWidth = false, helperText, id: idProp, InputLabelProps, inputProps, InputProps, inputRef, label, name, NumberInputComponent, onBlur, onChange, onFocus, placeholder, value, min, max, numberOutOfRangeErrorText, invalidNumberErrorText, maxDecimalPlacesErrorText, error, onError, onErrorEnd, allowUndefined, maxDecimalPlaces = DEFAULT_DECIMAL_PLACES, correctOnBlur = true, ...other } = props;
     const id = useId(idProp);
     const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
@@ -47,7 +47,7 @@ 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, { ...FormHelperTextProps, id: helperTextId, children: numberError ?? helperText })), _jsx(FormNumberInput
+    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.
             , { 

package/FormLabelSliderField/FormLabelSliderField.js

@@ -12,7 +12,7 @@ import { useId } from "../utils/react.js";
  * Like TextField, but uses a FormLabel instead of an InputLabel. Also allows
  * for inline help.
  */
-const FormLabelSliderField = forwardRef(function FormLabelSliderField(props, ref) {
+const FormLabelSliderField = forwardRef((props, ref) => {
     const { autoComplete, autoFocus = false, defaultValue, disabled, FormHelperTextProps, fullWidth = false, helperText, id: idProp, InputLabelProps, inputProps, InputProps, inputRef, label, name, onBlur, onChange, onFocus, onKeyDown, onMouseUp, placeholder, value, SliderProps, numberOutOfRangeErrorText, invalidNumberErrorText, onError, onErrorEnd, error, maxDecimalPlacesErrorText, NumberInputComponent, ...other } = props;
     const inputId = `${useId(idProp)}-input`;
     const sliderId = `${useId(idProp)}-slider`;
@@ -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, { ...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] })] }));
+    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

@@ -10,7 +10,7 @@ import { useId } from "../utils/react.js";
  * Like TextField, but uses a FormLabel instead of an InputLabel. Also allows
  * for inline help.
  */
-const FormLabelTextField = forwardRef(function FormLabelTextField(props, ref) {
+const FormLabelTextField = forwardRef((props, ref) => {
     const { autoComplete, autoFocus = false, children, defaultValue, FormHelperTextProps, fullWidth = false, helperText, id: idProp, InputLabelProps, inputProps, InputProps, inputRef, label, maxRows, minRows, multiline = false, name, nativeSelect = false, onBlur, onChange, onFocus, placeholder, rows, select = false, SelectProps, type, value, ...other } = props;
     const id = useId(idProp);
     const helperTextId = helperText && id ? `${id}-helper-text` : undefined;

package/IconMenu/IconMenu.js

@@ -11,7 +11,7 @@ export const iconMenuClasses = {
     root: `${PREFIX}-root`,
     iconButton: `${PREFIX}-iconButton`,
 };
-const IconMenu = forwardRef(function IconMenu({ id: idProp, children, icon, className, classes: classesProp, disabled, IconButtonProps, MenuProps, ...others }, ref) {
+const IconMenu = forwardRef(({ id: idProp, children, icon, className, classes: classesProp, disabled, IconButtonProps, MenuProps, ...others }, ref) => {
     const anchorRef = useRef();
     const [open, setOpen] = useState(false);
     const id = useId(idProp);

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, onClose, title, url, ...other }, ref) {
+const InlineHelp = forwardRef(({ children, classes: classesProp, className, icon, onClose, title, url, ...other }, ref) => {
     const [iconBtnEl, setIconBtnEl] = useState();
     const theme = useTheme();
     const classes = mergeStyles(inlineHelpClasses, classesProp);

package/Link/Link.js

@@ -24,7 +24,7 @@ const StyledMUILink = styled(MUILink)(() => ({
         margin: "0 0.2em",
     },
 }));
-const Link = forwardRef(function Link({ classes, children, showExternalLinkIcon, ...otherProps }, ref) {
+const Link = forwardRef(({ classes, children, showExternalLinkIcon, ...otherProps }, ref) => {
     const { externalLinkIcon: externalLinkIconClass, ...otherClasses } = mergeStyles(gcxLinkClasses, classes);
     return (_jsxs(StyledMUILink, { ...otherProps, classes: otherClasses, ref: ref, children: [children, showExternalLinkIcon && (_jsx(LinkExternal, { className: externalLinkIconClass, fontSize: "inherit", "data-test": "Link-external-icon" }))] }));
 });

package/Loader/Loader.js

@@ -65,7 +65,7 @@ const Root = styled("div")(({ theme: { palette } }) => ({
         visibility: "visible",
     },
 }));
-const Loader = forwardRef(function Loader({ className, classes: classesProp, showBackground, visible, children }, ref) {
+const Loader = forwardRef(({ className, classes: classesProp, showBackground, visible, children }, ref) => {
     const classes = mergeStyles(loaderClasses, classesProp);
     return (_jsx(Fade, { in: visible, ref: ref, children: _jsxs(Root, { "aria-hidden": "true", className: clsx(classes.root, className, {
                 [classes.showBackground]: showBackground,

package/Markdown/Markdown.js

@@ -6,9 +6,7 @@ import { markdownToHtml } from "../utils/markdown.js";
 /**
  * A component that renders markdown as HTML.
  */
-const Markdown = ({ markdown, inline, escapeHtml, sanitize = sanitizeHtml, linkTarget, className, ...otherProps }) => {
-    return (_jsx(Box, { component: inline ? "span" : "div", className: clsx("GcxMarkdown", className), dangerouslySetInnerHTML: {
-            __html: sanitize(markdownToHtml(markdown, { inline, escapeHtml, linkTarget })),
-        }, ...otherProps }));
-};
+const Markdown = ({ markdown, inline, escapeHtml, sanitize = sanitizeHtml, linkTarget, className, ...otherProps }) => (_jsx(Box, { component: inline ? "span" : "div", className: clsx("GcxMarkdown", className), dangerouslySetInnerHTML: {
+        __html: sanitize(markdownToHtml(markdown, { inline, escapeHtml, linkTarget })),
+    }, ...otherProps }));
 export default Markdown;

package/NumberFormatContext/NumberFormatContext.js

@@ -1,10 +1,6 @@
 import { createContext } from "react";
-const formatNumber = (n) => {
-    return `${n}`;
-};
-const parseNumber = (s) => {
-    return +s;
-};
+const formatNumber = (n) => `${n}`;
+const parseNumber = (s) => +s;
 /**
  * A React context for components that gives access to number formatting
  * utilities.

package/NumberInput/NumberInput.js

@@ -9,10 +9,10 @@ export const DEFAULT_DECIMAL_PLACES = 16;
  * formatting and parsing. Default formatting and parsing can be overridden by
  * wrapping this component in a NumberFormatContext.Provider.
  */
-const NumberInput = forwardRef(function NumberInput({ onChange, onBlur, value, defaultValue, max, min, error, onError, onErrorEnd, allowUndefined, correctOnBlur = true, maxDecimalPlaces = DEFAULT_DECIMAL_PLACES, ...props }, ref) {
+const NumberInput = forwardRef(({ onChange, onBlur, value, defaultValue, max, min, error, onError, onErrorEnd, allowUndefined, correctOnBlur = true, maxDecimalPlaces = DEFAULT_DECIMAL_PLACES, ...props }, ref) => {
     const { formatNumber, parseNumber } = useContext(NumberFormatContext);
     const [textValue, setTextValue] = useState(value === undefined ? "" : formatNumber(value));
-    const [numericValue, setNumericValue] = useState(value === undefined ? NaN : value);
+    const [numericValue, setNumericValue] = useState(value ?? NaN);
     const [lastValid, setLastValid] = useState(numericValue);
     const isValidNaN = useCallback((val) => allowUndefined && !val?.trim(), [allowUndefined]);
     const isOutOfRange = useCallback((val) => (typeof min === "number" && val < min) || (typeof max === "number" && val > max), [min, max]);
@@ -22,14 +22,16 @@ const NumberInput = forwardRef(function NumberInput({ onChange, onBlur, value, d
         : // If the user begins to type a negative number, do not present an invalid
             // error.
             textValue?.trim() !== "-" && parseNumber(textValue) !== numericValue;
-    const previousError = usePrevious(error || invalidError);
+    const previousError = usePrevious(error ?? invalidError);
     useEffect(() => {
-        if (!isNaN(numericValue) && !isOutOfRange(numericValue) && !isTooPrecise(numericValue)) {
+        if (!isNaN(numericValue) &&
+            !isOutOfRange(numericValue) &&
+            !isTooPrecise(numericValue)) {
             setLastValid(numericValue);
         }
     }, [numericValue, isOutOfRange, isTooPrecise]);
     useEffect(() => {
-        const e = error || invalidError;
+        const e = error ?? invalidError;
         if (e !== previousError) {
             if (invalidError) {
                 const inputVal = parseNumber(textValue);
@@ -95,7 +97,11 @@ const NumberInput = forwardRef(function NumberInput({ onChange, onBlur, value, d
         return newValue;
     }, [max, min, maxDecimalPlaces]);
     useEffect(() => {
-        if (value !== undefined) {
+        if (value === undefined) {
+            setTextValue("");
+            setNumericValue(NaN);
+        }
+        else {
             // For controlled components, only update the text from the value if
             // it's a valid number, and represents a number different from the
             // one in the text box. Otherwise leave it alone so that it's not
@@ -105,10 +111,6 @@ const NumberInput = forwardRef(function NumberInput({ onChange, onBlur, value, d
             }
             setNumericValue(correctValue(value));
         }
-        else {
-            setTextValue("");
-            setNumericValue(NaN);
-        }
         // eslint-disable-next-line react-hooks/exhaustive-deps -- It's intentional to omit numericValue. We only want this to run when the incoming value changes, not when numericValue changes in handleChange().
     }, [value, formatNumber, correctValue]);
     const handleChange = useCallback(event => {
@@ -130,7 +132,7 @@ const NumberInput = forwardRef(function NumberInput({ onChange, onBlur, value, d
         }
         onBlur?.(event);
     }, [correctOnBlur, reformat, onBlur]);
-    return (_jsx(Input, { ref: ref, type: "text", value: textValue, onChange: handleChange, onBlur: handleBlur, defaultValue: typeof defaultValue === "number" ? formatNumber(defaultValue) : undefined, "data-test": "NumberInput-container", error: error || invalidError, ...props }));
+    return (_jsx(Input, { ref: ref, type: "text", value: textValue, onChange: handleChange, onBlur: handleBlur, defaultValue: typeof defaultValue === "number" ? formatNumber(defaultValue) : undefined, "data-test": "NumberInput-container", error: error ?? invalidError, ...props }));
 });
 export default NumberInput;
 function getDecimalPlaces(value) {

package/SymbolInput/FontInput.js

@@ -7,13 +7,11 @@ import FormLabelAutocompleteField from "../FormLabelAutocompleteField/FormLabelA
 import FormLabelSliderField from "../FormLabelSliderField/index.js";
 import FormLabelTextField from "../FormLabelTextField/index.js";
 import { useId } from "../utils/react.js";
-const getDecorationValues = (t) => {
-    return [
-        { id: "none", label: t.decorationNone },
-        { id: "line-through", label: t.decorationLineThrough },
-        { id: "underline", label: t.decorationLineUnderline },
-    ];
-};
+const getDecorationValues = (t) => [
+    { id: "none", label: t.decorationNone },
+    { id: "line-through", label: t.decorationLineThrough },
+    { id: "underline", label: t.decorationLineUnderline },
+];
 const capitalizeFirstLetter = (value) => `${value.charAt(0).toUpperCase() + value.slice(1)}`;
 const defaultFontJson = {
     size: 9,
@@ -50,7 +48,7 @@ export const FontInput = ({ font, fontFamilies, languageResources, onChange, Aut
         decoration: font.decoration ?? "none",
         size: font.size ?? 9,
     };
-    let fontFamily = fontList.find(f => f.font.family == fontWithDefaults.family &&
+    let fontFamily = fontList.find(f => f.font.family === fontWithDefaults.family &&
         f.font.style === fontWithDefaults.style &&
         f.font.weight === fontWithDefaults.weight);
     if (!fontFamily) {
@@ -71,11 +69,7 @@ export const FontInput = ({ font, fontFamilies, languageResources, onChange, Aut
         };
         fontList.push(fontFamily);
     }
-    return (_jsxs(Box, { ...props, children: [_jsx(AutocompleteInput, { fullWidth: true, disableClearable: true, options: fontList, label: text.fontFamily, "aria-labelledby": labelId, filterOptions: (options, state) => {
-                    return fontList.filter(f => f.name
-                        .toLocaleLowerCase()
-                        .indexOf(state.inputValue.toLocaleLowerCase()) !== -1);
-                }, getOptionLabel: option => option.name, value: fontFamily, onChange: (event, newValue, reason, details) => {
+    return (_jsxs(Box, { ...props, children: [_jsx(AutocompleteInput, { fullWidth: true, disableClearable: true, options: fontList, label: text.fontFamily, "aria-labelledby": labelId, filterOptions: (options, state) => fontList.filter(f => f.name.toLocaleLowerCase().includes(state.inputValue.toLocaleLowerCase())), getOptionLabel: option => option.name, value: fontFamily, onChange: (event, newValue, reason, details) => {
                     onChange({
                         ...font,
                         family: newValue.font.family,

package/SymbolInput/SimpleFillSymbolInput.js

@@ -89,87 +89,83 @@ const SimpleFillSymbolInput = props => {
                         }, children: getSimpleFillStyles(text).map(fillStyle => (_jsx("option", { value: fillStyle.id, children: fillStyle.label }, fillStyle.id))) })] }))] }));
 };
 export default SimpleFillSymbolInput;
-export const getSimpleFillStyles = (t) => {
-    return [
-        {
-            id: "esriSFSBackwardDiagonal",
-            label: t.fillStyleBackwardDiagonal,
-        },
-        {
-            id: "esriSFSCross",
-            label: t.fillStyleCross,
-        },
-        {
-            id: "esriSFSDiagonalCross",
-            label: t.fillStyleDiagonalCross,
-        },
-        {
-            id: "esriSFSForwardDiagonal",
-            label: t.fillStyleForwardDiagonal,
-        },
-        {
-            id: "esriSFSHorizontal",
-            label: t.fillStyleHorizontal,
-        },
-        {
-            id: "esriSFSNull",
-            label: t.fillStyleNone,
-        },
-        {
-            id: "esriSFSSolid",
-            label: t.fillStyleSolid,
-        },
-        {
-            id: "esriSFSVertical",
-            label: t.fillStyleVertical,
-        },
-    ];
-};
-export const getSimpleLineStyles = (t) => {
-    return [
-        {
-            id: "esriSLSDash",
-            label: t.lineStyleDash,
-        },
-        {
-            id: "esriSLSDashDot",
-            label: t.lineStyleDashDot,
-        },
-        {
-            id: "esriSLSDot",
-            label: t.lineStyleDot,
-        },
-        {
-            id: "esriSLSLongDash",
-            label: t.lineStyleLongDash,
-        },
-        {
-            id: "esriSLSLongDashDot",
-            label: t.lineStyleLongDashDot,
-        },
-        {
-            id: "esriSLSNull",
-            label: t.lineStyleNone,
-        },
-        {
-            id: "esriSLSShortDash",
-            label: t.lineStyleShortDash,
-        },
-        {
-            id: "esriSLSShortDashDot",
-            label: t.lineStyleShortDashDot,
-        },
-        {
-            id: "esriSLSShortDashDotDot",
-            label: t.lineStyleShortDashDotDot,
-        },
-        {
-            id: "esriSLSShortDot",
-            label: t.lineStyleShortDot,
-        },
-        {
-            id: "esriSLSSolid",
-            label: t.lineStyleSolid,
-        },
-    ];
-};
+export const getSimpleFillStyles = (t) => [
+    {
+        id: "esriSFSBackwardDiagonal",
+        label: t.fillStyleBackwardDiagonal,
+    },
+    {
+        id: "esriSFSCross",
+        label: t.fillStyleCross,
+    },
+    {
+        id: "esriSFSDiagonalCross",
+        label: t.fillStyleDiagonalCross,
+    },
+    {
+        id: "esriSFSForwardDiagonal",
+        label: t.fillStyleForwardDiagonal,
+    },
+    {
+        id: "esriSFSHorizontal",
+        label: t.fillStyleHorizontal,
+    },
+    {
+        id: "esriSFSNull",
+        label: t.fillStyleNone,
+    },
+    {
+        id: "esriSFSSolid",
+        label: t.fillStyleSolid,
+    },
+    {
+        id: "esriSFSVertical",
+        label: t.fillStyleVertical,
+    },
+];
+export const getSimpleLineStyles = (t) => [
+    {
+        id: "esriSLSDash",
+        label: t.lineStyleDash,
+    },
+    {
+        id: "esriSLSDashDot",
+        label: t.lineStyleDashDot,
+    },
+    {
+        id: "esriSLSDot",
+        label: t.lineStyleDot,
+    },
+    {
+        id: "esriSLSLongDash",
+        label: t.lineStyleLongDash,
+    },
+    {
+        id: "esriSLSLongDashDot",
+        label: t.lineStyleLongDashDot,
+    },
+    {
+        id: "esriSLSNull",
+        label: t.lineStyleNone,
+    },
+    {
+        id: "esriSLSShortDash",
+        label: t.lineStyleShortDash,
+    },
+    {
+        id: "esriSLSShortDashDot",
+        label: t.lineStyleShortDashDot,
+    },
+    {
+        id: "esriSLSShortDashDotDot",
+        label: t.lineStyleShortDashDotDot,
+    },
+    {
+        id: "esriSLSShortDot",
+        label: t.lineStyleShortDot,
+    },
+    {
+        id: "esriSLSSolid",
+        label: t.lineStyleSolid,
+    },
+];

package/SymbolInput/SimpleLineSymbolInput.js

@@ -75,51 +75,49 @@ const SimpleLineSymbolInput = props => {
                         } })] }))] }));
 };
 export default SimpleLineSymbolInput;
-export const getSimpleLineStyles = (t) => {
-    return [
-        {
-            id: "esriSLSDash",
-            label: t.lineStyleDash,
-        },
-        {
-            id: "esriSLSDashDot",
-            label: t.lineStyleDashDot,
-        },
-        {
-            id: "esriSLSDot",
-            label: t.lineStyleDot,
-        },
-        {
-            id: "esriSLSLongDash",
-            label: t.lineStyleLongDash,
-        },
-        {
-            id: "esriSLSLongDashDot",
-            label: t.lineStyleLongDashDot,
-        },
-        {
-            id: "esriSLSNull",
-            label: t.lineStyleNone,
-        },
-        {
-            id: "esriSLSShortDash",
-            label: t.lineStyleShortDash,
-        },
-        {
-            id: "esriSLSShortDashDot",
-            label: t.lineStyleShortDashDot,
-        },
-        {
-            id: "esriSLSShortDashDotDot",
-            label: t.lineStyleShortDashDotDot,
-        },
-        {
-            id: "esriSLSShortDot",
-            label: t.lineStyleShortDot,
-        },
-        {
-            id: "esriSLSSolid",
-            label: t.lineStyleSolid,
-        },
-    ];
-};
+export const getSimpleLineStyles = (t) => [
+    {
+        id: "esriSLSDash",
+        label: t.lineStyleDash,
+    },
+    {
+        id: "esriSLSDashDot",
+        label: t.lineStyleDashDot,
+    },
+    {
+        id: "esriSLSDot",
+        label: t.lineStyleDot,
+    },
+    {
+        id: "esriSLSLongDash",
+        label: t.lineStyleLongDash,
+    },
+    {
+        id: "esriSLSLongDashDot",
+        label: t.lineStyleLongDashDot,
+    },
+    {
+        id: "esriSLSNull",
+        label: t.lineStyleNone,
+    },
+    {
+        id: "esriSLSShortDash",
+        label: t.lineStyleShortDash,
+    },
+    {
+        id: "esriSLSShortDashDot",
+        label: t.lineStyleShortDashDot,
+    },
+    {
+        id: "esriSLSShortDashDotDot",
+        label: t.lineStyleShortDashDotDot,
+    },
+    {
+        id: "esriSLSShortDot",
+        label: t.lineStyleShortDot,
+    },
+    {
+        id: "esriSLSSolid",
+        label: t.lineStyleSolid,
+    },
+];

package/SymbolInput/SimpleMarkerSymbolInput.js

@@ -150,13 +150,11 @@ const SimpleMarkerSymbolInput = props => {
                         } })] }))] }));
 };
 export default SimpleMarkerSymbolInput;
-export const getSimpleMarkerStyles = (t) => {
-    return [
-        { id: "esriSMSCircle", label: t.markerStyleCircle },
-        { id: "esriSMSCross", label: t.markerStyleCross },
-        { id: "esriSMSDiamond", label: t.markerStyleDiamond },
-        { id: "esriSMSSquare", label: t.markerStyleSquare },
-        { id: "esriSMSTriangle", label: t.markerStyleTriangle },
-        { id: "esriSMSX", label: t.markerStyleX },
-    ];
-};
+export const getSimpleMarkerStyles = (t) => [
+    { id: "esriSMSCircle", label: t.markerStyleCircle },
+    { id: "esriSMSCross", label: t.markerStyleCross },
+    { id: "esriSMSDiamond", label: t.markerStyleDiamond },
+    { id: "esriSMSSquare", label: t.markerStyleSquare },
+    { id: "esriSMSTriangle", label: t.markerStyleTriangle },
+    { id: "esriSMSX", label: t.markerStyleX },
+];

package/SymbolInput/TextSymbolInput.js

@@ -114,18 +114,14 @@ const TextSymbolInput = props => {
                                 } })] }))] }))] }));
 };
 export default TextSymbolInput;
-const getHorizontalAlignmentValues = (t) => {
-    return [
-        { id: "left", label: t.horizontalAlignmentLeft },
-        { id: "right", label: t.horizontalAlignmentRight },
-        { id: "center", label: t.horizontalAlignmentCenter },
-    ];
-};
-const getVerticalAlignmentValues = (t) => {
-    return [
-        { id: "baseline", label: t.verticalAlignmentBaseline },
-        { id: "top", label: t.verticalAlignmentTop },
-        { id: "middle", label: t.verticalAlignmentMiddle },
-        { id: "bottom", label: t.verticalAlignmentBottom },
-    ];
-};
+const getHorizontalAlignmentValues = (t) => [
+    { id: "left", label: t.horizontalAlignmentLeft },
+    { id: "right", label: t.horizontalAlignmentRight },
+    { id: "center", label: t.horizontalAlignmentCenter },
+];
+const getVerticalAlignmentValues = (t) => [
+    { id: "baseline", label: t.verticalAlignmentBaseline },
+    { id: "top", label: t.verticalAlignmentTop },
+    { id: "middle", label: t.verticalAlignmentMiddle },
+    { id: "bottom", label: t.verticalAlignmentBottom },
+];

package/Tab/Tab.js

@@ -49,7 +49,7 @@ const Root = styled("div")({
     },
 });
 export * from "@mui/material/Tab";
-const Tab = forwardRef(function Tab(props, ref) {
+const Tab = forwardRef((props, ref) => {
     const { className, classes, disabled, endAdornment, label, ...other } = props;
     const { endAdornment: endAdornmentClass, fullWidthContainer: fullWidthContainerClass, tabAdorned: tabAdornedClass, tabContainer: tabContainerClass, labelWrapper: labelWrapperClass, ...otherClasses } = mergeStyles(gcxTabClasses, classes);
     return (_jsxs(Root, { className: clsx(tabContainerClass, {

package/Tabs/Tabs.js

@@ -21,7 +21,7 @@ const StyledTabs = styled(MUITabs)({
         backgroundColor: "transparent",
     },
 });
-const Tabs = forwardRef(function Tabs({ classes, indicatorColor, ...props }, ref) {
+const Tabs = forwardRef(({ classes, indicatorColor, ...props }, ref) => {
     const { indicator: indicatorClass, indicatorTransparent: indicatorTransparentClass, ...otherClasses } = mergeStyles(gcxTabsClasses, classes);
     return (_jsx(StyledTabs, { indicatorColor: indicatorColor, ...props, classes: {
             indicator: clsx(indicatorClass, {

package/icons/utils/createSvgIcon.js

@@ -34,7 +34,7 @@ export default function createSvgIcon(path, displayName, mirror) {
         return (_jsx(StyledIcon, { classes: otherClasses, className: clsx(className, {
                 [mirroredClass]: direction === "rtl" &&
                     mirror !== false &&
-                    (mirror || shouldMirror(displayName)),
+                    (mirror ?? shouldMirror(displayName)),
             }), ref: ref, ...otherProps }));
     };
     // Copied from MUI implementation.

package/package.json

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

package/styles/createTheme.js

@@ -9,6 +9,10 @@ const primaryTextColor = "#333333";
 const primaryErrorColor = "#B22222";
 const primaryWarningColor = "#BF5300";
 const primarySuccessColor = "#008040";
+const fontWeightLight = 300;
+const fontWeightRegular = 400;
+const fontWeightMedium = 600;
+const fontWeightBold = 700;
 const lightThemeOverrides = {
     palette: {
         background: {
@@ -20,7 +24,7 @@ const lightThemeOverrides = {
         secondary: secondaryTextColor,
     },
 };
-const defaultOptions = {
+const getDefaultOptions = (pxToRem) => ({
     palette: {
         primary: blue,
         secondary: green,
@@ -29,10 +33,80 @@ const defaultOptions = {
         warning: { main: primaryWarningColor },
         success: { main: primarySuccessColor },
     },
+    // Defaults should match https://meridian.vertigis.com/docs/design-language/#typography
+    // Use `pxToRem` so clients with different root font sizes still work properly.
     typography: {
-        fontFamily: `"Segoe UI", "Helvetica Neue", "Droid Sans", Helvetica, Arial, sans-serif`,
+        fontFamily: '"Segoe UI", "Helvetica Neue", "Roboto", Helvetica, Arial, sans-serif',
+        fontWeightLight,
+        fontWeightRegular,
+        fontWeightMedium,
+        fontWeightBold,
+        h1: {
+            fontSize: pxToRem(32),
+            fontWeight: fontWeightLight,
+            lineHeight: 1.25,
+        },
+        h2: {
+            fontSize: pxToRem(28),
+            fontWeight: fontWeightLight,
+            lineHeight: 1.25,
+        },
+        h3: {
+            fontSize: pxToRem(26),
+            fontWeight: fontWeightRegular,
+            lineHeight: 1.25,
+        },
+        h4: {
+            fontSize: pxToRem(22),
+            fontWeight: fontWeightRegular,
+            lineHeight: 1.25,
+        },
+        h5: {
+            fontSize: pxToRem(20),
+            fontWeight: fontWeightMedium,
+            lineHeight: 1.25,
+        },
+        h6: {
+            fontSize: pxToRem(16),
+            fontWeight: fontWeightMedium,
+            lineHeight: 1.125,
+        },
+        subtitle1: {
+            fontSize: pxToRem(16),
+            fontWeight: fontWeightRegular,
+            lineHeight: 1.125,
+            letterSpacing: pxToRem(0.15),
+        },
+        subtitle2: {
+            fontSize: pxToRem(14),
+            fontWeight: fontWeightMedium,
+            lineHeight: 1.5,
+            letterSpacing: pxToRem(0.17),
+        },
+        body1: {
+            fontSize: pxToRem(14),
+            fontWeight: fontWeightRegular,
+            lineHeight: 1.5,
+        },
+        body2: {
+            fontSize: pxToRem(12),
+            fontWeight: fontWeightRegular,
+            lineHeight: 1.375,
+        },
+        caption: {
+            fontSize: pxToRem(14),
+            fontWeight: fontWeightRegular,
+            fontStyle: "italic",
+            lineHeight: 1.625,
+        },
+        button: {
+            fontSize: pxToRem(14),
+            fontWeight: fontWeightRegular,
+            lineHeight: 1.75,
+            textTransform: "none",
+        },
     },
-};
+});
 const defaultDenseOptions = {
     spacing: 6,
     components: {
@@ -140,15 +214,15 @@ const getMenuItemStyles = ({ palette, transitions }) => ({
  * separately after the fact.
  */
 function getOverrides(theme) {
-    const { palette, shape, spacing, transitions, typography } = theme;
+    const { palette, shape, spacing, transitions, typography: { pxToRem, fontWeightMedium, fontWeightBold, body1, subtitle2 }, } = theme;
     const isDarkMode = palette.mode === "dark";
     return {
         components: {
             MuiAutocomplete: {
                 styleOverrides: {
                     root: {
-                        [".MuiInput-root"]: {
-                            [".MuiInput-input"]: {
+                        ".MuiInput-root": {
+                            ".MuiInput-input": {
                                 // Let the height expand to fit content
                                 height: "auto",
                                 padding: "5px 8px",
@@ -181,7 +255,6 @@ function getOverrides(theme) {
                     root: {
                         borderStyle: "solid",
                         borderWidth: 1,
-                        textTransform: "none",
                         "&.Mui-focusVisible:active": {
                             backgroundColor: alpha(palette.grey.A200, 0.5),
                         },
@@ -327,13 +400,13 @@ function getOverrides(theme) {
                         boxSizing: "inherit",
                     },
                     "strong, b": {
-                        fontWeight: typography.fontWeightBold,
+                        fontWeight: fontWeightBold,
                     },
                     body: {
                         margin: 0,
                         padding: 0,
                         color: palette.text.primary,
-                        ...typography.body1,
+                        ...body1,
                         backgroundColor: palette.background.default,
                         overflow: "hidden",
                         "@media print": {
@@ -386,7 +459,7 @@ function getOverrides(theme) {
                 },
                 styleOverrides: {
                     root: {
-                        ...typography.subtitle2,
+                        ...subtitle2,
                         marginTop: 0,
                         marginBottom: spacing(0.5),
                         "&.Mui-error": {
@@ -406,9 +479,9 @@ function getOverrides(theme) {
                         margin: spacing(0.5, 0),
                         color: "currentColor",
                         // Clear InlineHelp button
-                        paddingRight: typography.pxToRem(32),
+                        paddingRight: pxToRem(32),
                         lineHeight: 1.4,
-                        fontWeight: typography.fontWeightMedium,
+                        fontWeight: fontWeightMedium,
                         "&.Mui-error, &.Mui-error.Mui-focused": {
                             borderRadius: shape.borderRadius,
                             color: palette.text.primary,
@@ -416,8 +489,8 @@ function getOverrides(theme) {
                             // Error icon background circle
                             "& .GcxFormLabel-errorIconBackground": {
                                 display: "inline-flex",
-                                width: typography.pxToRem(22),
-                                height: typography.pxToRem(22),
+                                width: pxToRem(22),
+                                height: pxToRem(22),
                                 justifyContent: "center",
                                 marginRight: "4px",
                                 alignItems: "center",
@@ -562,7 +635,7 @@ function getOverrides(theme) {
                         // styling for any existing code still using this
                         // property.
                         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                        // @ts-ignore
+                        // @ts-expect-error
                         props: { button: true },
                         style: {
                             ...getMenuItemStyles(theme),
@@ -613,12 +686,12 @@ function getOverrides(theme) {
                         },
                         paddingTop: 4,
                         paddingBottom: 4,
-                        ["& .MuiListItemIcon-root svg"]: {
+                        "& .MuiListItemIcon-root svg": {
                             // MUI sets this to 1.25rem, which ignores the
                             // theme's `htmlFontSize` setting. Override with
                             // pxToRem to get the correct height regardless of
                             // HTML font size.
-                            fontSize: typography.pxToRem(20),
+                            fontSize: pxToRem(20),
                         },
                     },
                 },
@@ -664,7 +737,7 @@ function getOverrides(theme) {
                     valueLabel: {
                         // Set the minimum height to avoid it jumping around
                         // when the label does not have a value.
-                        minHeight: typography.pxToRem(28),
+                        minHeight: pxToRem(28),
                     },
                 },
             },
@@ -790,7 +863,7 @@ function getOverrides(theme) {
                         // Chosen to match PanelGroup in react-ui-internal.
                         backgroundColor: isDarkMode ? palette.grey[900] : palette.grey[200],
                         fontWeight: "bold",
-                        fontSize: typography.pxToRem(14),
+                        fontSize: pxToRem(14),
                     },
                 },
             },
@@ -963,11 +1036,12 @@ function getOverrides(theme) {
 }
 function createTheme(options = {}) {
     // Merge the VertiGIS Studio theme defaults with any user specified theme options
-    const mode = options && options.palette && options.palette.mode === "dark" ? "dark" : "light";
+    const mode = options?.palette && options.palette.mode === "dark" ? "dark" : "light";
     // If we are using light mode, then we want to use our defined light theme palette
     const modeOptions = mode === "light" ? lightThemeOverrides : {};
     const { dense = false, ...overrides } = options;
-    const mergedOptions = deepAssign({}, defaultOptions, modeOptions, dense ? defaultDenseOptions : {}, overrides);
+    const defaultTheme = createMuiTheme();
+    const mergedOptions = deepAssign({}, getDefaultOptions(defaultTheme.typography.pxToRem), modeOptions, dense ? defaultDenseOptions : {}, overrides);
     const createdTheme = createMuiTheme(mergedOptions);
     return overrideTheme(createdTheme, getOverrides(createdTheme));
 }

package/utils/throttle.js

@@ -13,7 +13,8 @@ export function throttle(func, msBetweenRequests) {
         if (!isScheduled) {
             window.setTimeout(() => {
                 isScheduled = false;
-                void func(...args);
+                // eslint-disable-next-line @typescript-eslint/no-floating-promises
+                func(...args);
             }, msBetweenRequests);
             isScheduled = true;
         }
@@ -30,7 +31,8 @@ export function throttleAnimation(func) {
         if (!isScheduled) {
             requestAnimationFrame(() => {
                 isScheduled = false;
-                void func(...args);
+                // eslint-disable-next-line @typescript-eslint/no-floating-promises
+                func(...args);
             });
             isScheduled = true;
         }

package/utils/url.js

@@ -69,6 +69,6 @@ export function setHashParams(kvp) {
  * @param paramsString The string to be set as the hash string.
  */
 function setHashParamsString(paramsString) {
-    paramsString = paramsString.startsWith("#") ? paramsString : `#${paramsString}`;
-    history.replaceState(null, document.title, getUrlWithoutHash() + paramsString);
+    const pString = paramsString.startsWith("#") ? paramsString : `#${paramsString}`;
+    history.replaceState(null, document.title, getUrlWithoutHash() + pString);
 }