@vertigis/react-ui 17.3.0 → 18.0.0

package/Autocomplete/HighlightOption.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const highlightOptionClasses: {
     highlight: string;
 };

package/Chip/Chip.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { ChipProps as MuiChipProps } from "@mui/material/Chip";
 export * from "@mui/material/Chip";
 export interface ChipProps extends MuiChipProps {

package/ColorInput/ColorInput.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { BoxProps } from "@mui/material/Box";
 import type { SketchPickerStylesProps } from "react-color/lib/components/sketch/Sketch";
 import type { ButtonProps } from "../Button/index.js";

package/CopyableText/CopyableText.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { InputProps as InputPropsType } from "../Input/index.js";
 import type { StackProps } from "../Stack/index.js";
 export declare const copyableTextClasses: {

package/DateTimeRangePicker/DateTimeRangePicker.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { DateTimeRangePickerProps as MuiDateTimeRangePickerProps, PickerValidDate } from "@mui/x-date-pickers-pro";
 export interface DateTimeRangePickerProps extends MuiDateTimeRangePickerProps<PickerValidDate> {
     dateSeparator?: string;

package/FormLabel/FormLabel.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { FormLabelClasses as MUIFormLabelClasses, FormLabelProps as MUIFormLabelProps } from "@mui/material/FormLabel";
 import type { OverridableComponent } from "@mui/material/OverridableComponent";
 declare const gcxFormLabelClasses: {

package/FormLabelAutocompleteField/{FormLabelAutocompleteField .d.ts → FormLabelAutocompleteField.d.ts}

@@ -1,4 +1,5 @@
-import type { AutocompleteProps } from "../Autocomplete";
+import { type ReactNode } from "react";
+import type { AutocompleteChangeDetails, AutocompleteChangeReason, AutocompleteProps } from "../Autocomplete";
 import type { ChipTypeMap } from "../Chip";
 import type { FormControlProps } from "../FormControl/index.js";
 import { type FormHelperTextProps } from "../FormHelperText/index.js";
@@ -22,7 +23,7 @@ export type FormLabelAutocompleteFieldProps<T, Multiple extends boolean | undefi
     filterOptions?: AutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>["filterOptions"];
     getOptionLabel: AutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>["getOptionLabel"];
     onBlur?: AutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>["onBlur"];
-    onChange?: AutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>["onChange"];
+    onChange?: (event: React.SyntheticEvent, newValue: T | NonNullable<string | T> | (string | T)[] | null, reason: AutocompleteChangeReason, details: AutocompleteChangeDetails<T> | undefined) => void;
     onFocus?: AutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>["onFocus"];
     options: AutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>["options"];
     value: AutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>["value"];
@@ -32,5 +33,5 @@ export type FormLabelAutocompleteFieldProps<T, Multiple extends boolean | undefi
  * Like TextField, but uses a FormLabel instead of an InputLabel. Also allows
  * for inline help.
  */
-declare const FormLabelAutocompleteField: import("react").ForwardRefExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const FormLabelAutocompleteField: <TValue>(props: FormLabelAutocompleteFieldProps<TValue, boolean | undefined, boolean | undefined, boolean | undefined>) => ReactNode;
 export default FormLabelAutocompleteField;

package/FormLabelAutocompleteField/{FormLabelAutocompleteField .js → FormLabelAutocompleteField.js}

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import {} from "react";
 import Autocomplete from "../Autocomplete/index.js";
 import FormControl from "../FormControl/index.js";
 import FormHelperText, {} from "../FormHelperText/index.js";
@@ -10,11 +10,11 @@ import { useId } from "../utils/react.js";
  * Like TextField, but uses a FormLabel instead of an InputLabel. Also allows
  * for inline help.
  */
-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 FormLabelAutocompleteField = (props) => {
+    const { AutocompleteProps, defaultValue, disableClearable, disabled, filterOptions, FormHelperTextProps, fullWidth = false, getOptionLabel, helperText, id: idProp, label, onBlur, onChange, onFocus, options, ref, value, ...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(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/FormLabelAutocompleteField/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./FormLabelAutocompleteField .js";
-export { default } from "./FormLabelAutocompleteField .js";
+export * from "./FormLabelAutocompleteField.js";
+export { default } from "./FormLabelAutocompleteField.js";

package/FormLabelAutocompleteField/index.js

@@ -1,2 +1,2 @@
-export * from "./FormLabelAutocompleteField .js";
-export { default } from "./FormLabelAutocompleteField .js";
+export * from "./FormLabelAutocompleteField.js";
+export { default } from "./FormLabelAutocompleteField.js";

package/FormLabelColorField/FormLabelColorField.d.ts

@@ -1,7 +1,9 @@
+/// <reference types="react" />
 import type { TextFieldProps } from "@mui/material/TextField";
 import { type ColorInputProps } from "../ColorInput/ColorInput.js";
 import type { FormControlProps } from "../FormControl/index.js";
-export type FormLabelColorFieldProps = Omit<TextFieldProps, "variant" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "value" | "select" | "multiline" | "minRows" | "maxRows" | "SelectProps" | "rows"> & Pick<FormControlProps, "inlineHelpContent" | "inlineHelpUrl"> & {
+import { type FormHelperTextProps } from "../FormHelperText/index.js";
+export type FormLabelColorFieldProps = Omit<TextFieldProps, "variant" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "value" | "select" | "multiline" | "minRows" | "maxRows" | "SelectProps" | "rows" | "FormHelperTextProps"> & Pick<FormControlProps, "inlineHelpContent" | "inlineHelpUrl"> & {
     defaultValue?: ColorInputProps["defaultValue"];
     disabled?: ColorInputProps["disabled"];
     onBlur?: ColorInputProps["onBlur"];
@@ -9,6 +11,11 @@ export type FormLabelColorFieldProps = Omit<TextFieldProps, "variant" | "default
     onFocus?: ColorInputProps["onFocus"];
     value: ColorInputProps["value"];
     ColorInputProps?: ColorInputProps;
+    /**
+     * The FormHelperTextProps found on the TextFieldProps are deprecated
+     * and will be removed in MUI 7, so we must now add the prop ourselves.
+     */
+    FormHelperTextProps?: Partial<FormHelperTextProps>;
 };
 /**
  * Like TextField, but uses a FormLabel instead of an InputLabel. Also allows

package/FormLabelColorField/FormLabelColorField.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import ColorInput, {} from "../ColorInput/ColorInput.js";
 import FormControl from "../FormControl/index.js";
-import FormHelperText from "../FormHelperText/index.js";
+import FormHelperText, {} from "../FormHelperText/index.js";
 import FormLabel from "../FormLabel/index.js";
 import { useId } from "../utils/react.js";
 /**

package/FormLabelNumberField/FormLabelNumberField.d.ts

@@ -1,11 +1,12 @@
 import type { TextFieldProps } from "@mui/material/TextField";
 import { type FC } from "react";
 import type { FormControlProps } from "../FormControl/index.js";
+import { type FormHelperTextProps } from "../FormHelperText/index.js";
 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 & {
+export type FormLabelNumberFieldProps = Omit<TextFieldProps, "aria-label" | "value" | "onChange" | "InputProps" | "select" | "nativeSelect" | "multiline" | "minRows" | "maxRows" | "SelectProps" | "rows" | "type" | "title" | "onError" | "FormHelperTextProps"> & Pick<FormControlProps, "inlineHelpContent" | "inlineHelpUrl"> & NumberInputProps & {
     InputProps?: Omit<NumberInputProps, "id" | "ref">;
     NumberInputComponent?: FC<NumberInputProps>;
     /**
@@ -23,6 +24,11 @@ export type FormLabelNumberFieldProps = Omit<TextFieldProps, "aria-label" | "val
      * than the configured maxDecimalPlaces.
      */
     maxDecimalPlacesErrorText?: string;
+    /**
+     * The FormHelperTextProps found on the TextFieldProps are deprecated
+     * and will be removed in MUI 7
+     */
+    FormHelperTextProps?: Partial<FormHelperTextProps>;
 };
 /**
  * Like TextField, but uses a FormLabel instead of an InputLabel, and uses

package/FormLabelNumberField/FormLabelNumberField.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useContext, useState } from "react";
 import { forwardRef } from "react";
 import FormControl from "../FormControl/index.js";
-import FormHelperText from "../FormHelperText/index.js";
+import FormHelperText, {} from "../FormHelperText/index.js";
 import FormLabel from "../FormLabel/index.js";
 import { NumberFormatContext } from "../NumberFormatContext/NumberFormatContext.js";
 import { DEFAULT_DECIMAL_PLACES, } from "../NumberInput/index.js";
@@ -13,7 +13,7 @@ import { useId } from "../utils/react.js";
  * NumberInput instead of a normal input.
  */
 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 = false, onError, onErrorEnd, allowUndefined, maxDecimalPlaces = DEFAULT_DECIMAL_PLACES, correctOnBlur = true, ...other } = props;
+    const { autoComplete, autoFocus = false, children, className, defaultValue, FormHelperTextProps, fullWidth = false, helperText, id: idProp, inputProps, InputProps, inputRef, label, name, NumberInputComponent, onBlur, onChange, onFocus, placeholder, value, min, max, numberOutOfRangeErrorText, invalidNumberErrorText, maxDecimalPlacesErrorText, error = false, onError, onErrorEnd, allowUndefined, maxDecimalPlaces = DEFAULT_DECIMAL_PLACES, correctOnBlur = true, ...other } = props;
     const id = useId(idProp);
     const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
     const inputLabelId = label && id ? `${id}-label` : undefined;

package/FormLabelSliderField/FormLabelSliderField.d.ts

@@ -2,8 +2,9 @@ import { type SliderProps } from "@mui/material";
 import type { TextFieldProps } from "@mui/material/TextField";
 import { type FC } from "react";
 import type { FormControlProps } from "../FormControl/index.js";
+import { type FormHelperTextProps } from "../FormHelperText/index.js";
 import { type ErrorType, type NumberInputProps } from "../NumberInput/index.js";
-export type FormLabelSliderFieldProps = Omit<TextFieldProps, "variant" | "Value" | "onChange" | "defaultValue" | "type" | "select" | "multiline" | "minRows" | "maxRows" | "SelectProps" | "rows" | "InputProps" | "inputProps" | "onError"> & Pick<FormControlProps, "inlineHelpContent" | "inlineHelpUrl"> & {
+export type FormLabelSliderFieldProps = Omit<TextFieldProps, "variant" | "Value" | "onChange" | "defaultValue" | "type" | "select" | "multiline" | "minRows" | "maxRows" | "SelectProps" | "rows" | "InputProps" | "inputProps" | "onError" | "FormHelperTextProps"> & Pick<FormControlProps, "inlineHelpContent" | "inlineHelpUrl"> & {
     value?: number;
     onChange?: (value: number) => void;
     SliderProps?: SliderProps;
@@ -11,6 +12,11 @@ export type FormLabelSliderFieldProps = Omit<TextFieldProps, "variant" | "Value"
     InputProps?: Omit<NumberInputProps, "allowUndefined">;
     inputProps?: NumberInputProps["inputProps"];
     defaultValue?: number;
+    /**
+     * The FormHelperTextProps found on the TextFieldProps are deprecated
+     * and will be removed in MUI 7
+     */
+    FormHelperTextProps?: Partial<FormHelperTextProps>;
     /**
      * A label to display as helpText when the number input value is out of
      * range, relative to the min and max properties.

package/FormLabelSliderField/FormLabelSliderField.js

@@ -3,7 +3,7 @@ import { Slider, useTheme } from "@mui/material";
 import { Stack } from "@mui/material";
 import { forwardRef, useCallback, useContext, useRef, useState } from "react";
 import FormControl from "../FormControl/index.js";
-import FormHelperText from "../FormHelperText/index.js";
+import FormHelperText, {} from "../FormHelperText/index.js";
 import FormLabel from "../FormLabel/index.js";
 import { NumberFormatContext } from "../NumberFormatContext/NumberFormatContext.js";
 import NumberInput, { DEFAULT_DECIMAL_PLACES, } from "../NumberInput/index.js";
@@ -13,7 +13,7 @@ import { useId } from "../utils/react.js";
  * for inline help.
  */
 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 { autoComplete, autoFocus = false, defaultValue, disabled, fullWidth = false, helperText, id: idProp, inputProps, InputProps, inputRef, label, name, onBlur, onChange, onFocus, onKeyDown, onMouseUp, placeholder, slotProps, value, SliderProps, numberOutOfRangeErrorText, invalidNumberErrorText, onError, onErrorEnd, error, maxDecimalPlacesErrorText, NumberInputComponent, FormHelperTextProps, ...other } = props;
     const inputId = `${useId(idProp)}-input`;
     const sliderId = `${useId(idProp)}-slider`;
     const helperTextId = helperText && inputId ? `${inputId}-helper-text` : undefined;

package/FormLabelTextField/FormLabelTextField.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { TextFieldProps } from "@mui/material/TextField";
 import type { FormControlProps } from "../FormControl/index.js";
 export type FormLabelTextFieldProps = Omit<TextFieldProps, "variant"> & Pick<FormControlProps, "inlineHelpContent" | "inlineHelpUrl"> & {

package/LicenseInfo/index.d.ts

@@ -1 +1 @@
-export * from "@mui/x-license-pro";
+export * from "@mui/x-license";

package/LicenseInfo/index.js

@@ -1 +1 @@
-export * from "@mui/x-license-pro";
+export * from "@mui/x-license";

package/ListItemSecondaryAction/index.d.ts

@@ -1,2 +1,6 @@
+/**
+ * @deprecated This component will be removed in MUI 7, use the
+ *   `secondaryAction` prop in the ListItem component.
+ */
 export { default } from "@mui/material/ListItemSecondaryAction";
 export * from "@mui/material/ListItemSecondaryAction";

package/ListItemSecondaryAction/index.js

@@ -1,2 +1,6 @@
+/**
+ * @deprecated This component will be removed in MUI 7, use the
+ *   `secondaryAction` prop in the ListItem component.
+ */
 export { default } from "@mui/material/ListItemSecondaryAction";
 export * from "@mui/material/ListItemSecondaryAction";

package/MenuItemSecondaryAction/MenuItemSecondaryAction.d.ts

@@ -1,5 +1,7 @@
 import type { FC } from "react";
-import type { ListItemSecondaryActionProps } from "../ListItemSecondaryAction/index.js";
+import { type BoxProps } from "../Box/index.js";
+export interface MenuItemSecondaryActionProps extends BoxProps {
+}
 /**
  * For use within a MenuList (or other list that implements arrow key
  * navigation). The standard ListItemSecondaryAction will break keyboard
@@ -7,5 +9,5 @@ import type { ListItemSecondaryActionProps } from "../ListItemSecondaryAction/in
  *
  * @param props The component properties.
  */
-declare const MenuItemSecondaryAction: FC<ListItemSecondaryActionProps>;
+declare const MenuItemSecondaryAction: FC<MenuItemSecondaryActionProps>;
 export default MenuItemSecondaryAction;

package/MenuItemSecondaryAction/MenuItemSecondaryAction.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useRef } from "react";
-import GcxListItemSecondaryAction from "../ListItemSecondaryAction/index.js";
+import Box, {} from "../Box/index.js";
 import { styled } from "../styles/index.js";
-const StyledListItemSecondaryAction = styled(GcxListItemSecondaryAction)({
+const SecondaryActionContainer = styled(Box)({
     display: "flex",
     flexShrink: 0,
 });
@@ -28,7 +28,7 @@ const MenuItemSecondaryAction = props => {
             event.stopPropagation();
         }
     };
-    return (_jsx(StyledListItemSecondaryAction, { className: className, onClick: event => {
+    return (_jsx(SecondaryActionContainer, { className: className, onClick: event => {
             event.stopPropagation();
         }, onKeyDown: onKeyDown, onMouseDown: event => {
             // This will stop child ripples from propagating.

package/NumberFormatContext/NumberFormatContext.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface NumberFormatContextProps {
     /**
      * Returns a stringified number that may include additional/alternative

package/NumberInput/NumberInput.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type InputProps } from "@mui/material/Input";
 export declare const DEFAULT_DECIMAL_PLACES = 16;
 export type ErrorType = "NaN" | "out-of-range" | "max-decimals" | "unknown";

package/SymbolInput/FontInput.d.ts

@@ -2,7 +2,7 @@ import { type FC } from "react";
 import type { FontJson } from "./SymbolJson.js";
 import { type FontFamily } from "./fonts.js";
 import type { BoxProps } from "../Box";
-import type { FormLabelAutocompleteFieldProps } from "../FormLabelAutocompleteField/FormLabelAutocompleteField .js";
+import type { FormLabelAutocompleteFieldProps } from "../FormLabelAutocompleteField/FormLabelAutocompleteField.js";
 import type { FormLabelSliderFieldProps } from "../FormLabelSliderField";
 import type { FormLabelTextFieldProps } from "../FormLabelTextField";
 export interface FontInputProps extends Omit<BoxProps, "onChange"> {

package/SymbolInput/FontInput.js

@@ -3,7 +3,7 @@ import { useRef } from "react";
 import { fonts } from "./fonts.js";
 import { DEFAULT_LANGUAGE } from "./utilities.js";
 import Box from "../Box/index.js";
-import FormLabelAutocompleteField from "../FormLabelAutocompleteField/FormLabelAutocompleteField .js";
+import FormLabelAutocompleteField from "../FormLabelAutocompleteField/FormLabelAutocompleteField.js";
 import FormLabelSliderField from "../FormLabelSliderField/index.js";
 import FormLabelTextField from "../FormLabelTextField/index.js";
 import { useId } from "../utils/react.js";
@@ -21,7 +21,7 @@ const defaultFontJson = {
     family: "sans-serif",
 };
 export const FontInput = ({ font, fontFamilies, languageResources, onChange, AutoCompleteComponent, TextInputComponent, NumberInputComponent, ...props }) => {
-    const AutocompleteInput = AutoCompleteComponent ?? FormLabelAutocompleteField;
+    const AutocompleteInput = AutoCompleteComponent ?? (FormLabelAutocompleteField);
     const FormTextInput = TextInputComponent ?? FormLabelTextField;
     const FormNumberInput = NumberInputComponent ?? FormLabelSliderField;
     const { current: fontList } = useRef([...(fontFamilies ?? fonts)]);
@@ -72,9 +72,9 @@ export const FontInput = ({ font, fontFamilies, languageResources, onChange, Aut
     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,
-                        style: newValue.font.style,
-                        weight: newValue.font.weight,
+                        family: newValue?.font?.family,
+                        style: newValue?.font?.style,
+                        weight: newValue?.font?.weight,
                     });
                 } }), _jsx(FormNumberInput, { fullWidth: true, SliderProps: {
                     step: 0.5,

package/Tab/Tab.d.ts

@@ -32,6 +32,7 @@ export declare const tabClasses: {
     fullWidth: string;
     wrapped: string;
     iconWrapper: string;
+    icon: string;
 };
 export type TabClasses = MUITabClasses & ButtonBaseClasses & Record<keyof typeof gcxTabClasses, string>;
 export type TabClassKey = keyof TabClasses;

package/Tabs/Tabs.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { TabsProps as MUITabsProps, TabsClasses as MUITabsClasses } from "@mui/material/Tabs";
 export * from "@mui/material/Tabs";
 declare const gcxTabsClasses: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertigis/react-ui",
-  "version": "17.3.0",
+  "version": "18.0.0",
   "description": "Utilities and React components used in VertiGIS applications.",
   "keywords": [
     "vertigis",
@@ -14,12 +14,12 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@mui/icons-material": "5.15.15",
-    "@mui/material": "5.15.15",
-    "@mui/x-data-grid-pro": "7.2.0",
-    "@mui/x-date-pickers-pro": "7.2.0",
-    "@mui/x-license-pro": "6.10.2",
-    "@mui/x-tree-view": "7.2.0",
+    "@mui/icons-material": "^6.4.0",
+    "@mui/material": "^6.4.0",
+    "@mui/x-data-grid-pro": "^7.24.0",
+    "@mui/x-date-pickers-pro": "^7.24.0",
+    "@mui/x-license": "^7.24.1",
+    "@mui/x-tree-view": "^7.24.0",
     "autosuggest-highlight": "^3.3.4",
     "clsx": "^2.1.0",
     "color": "^4.2.3",

package/styles/createTheme.d.ts

@@ -1,6 +1,10 @@
-import type { Theme, ThemeOptions } from "@mui/material/styles";
+import type { Components, Theme, ThemeOptions as MuiThemeOptions } from "@mui/material/styles";
+import type { PickerComponents, PickersProComponents } from "../styles/themeAugmentation.js";
 export type * from "../styles/themeAugmentation.js";
-export type { Theme, ThemeOptions };
+export type ThemeOptions = Omit<MuiThemeOptions, "components"> & {
+    components?: Components<Omit<Theme, "components">> & PickerComponents<Theme> & PickersProComponents<Theme>;
+};
+export type { Theme };
 export interface CreateThemeOptions extends ThemeOptions {
     /**
      * If specified, sets the `dense` property on components that supports it,

package/styles/createTheme.js

@@ -244,6 +244,40 @@ function getComponentOverrides(theme, isDense) {
                         "&.Mui-focusVisible:active": {
                             backgroundColor: alpha(palette.grey.A200, 0.5),
                         },
+                        variants: [
+                            {
+                                // The "grey" color is our own augmentation which is
+                                // equivalent to the "default" color in MUI v4, which
+                                // was removed in v5.
+                                props: { color: "grey", variant: "contained" },
+                                style: {
+                                    color: palette.getContrastText(palette.grey[300]),
+                                },
+                            },
+                            {
+                                props: { color: "grey", variant: "outlined" },
+                                style: {
+                                    color: palette.text.primary,
+                                    borderColor: palette.custom.greyOutline,
+                                    "&.Mui-disabled": {
+                                        border: `1px solid ${palette.action.disabledBackground}`,
+                                    },
+                                    "&:hover": {
+                                        borderColor: palette.custom.greyOutline,
+                                        backgroundColor: alpha(palette.text.primary, palette.action.hoverOpacity),
+                                    },
+                                },
+                            },
+                            {
+                                props: { color: "grey", variant: "text" },
+                                style: {
+                                    color: palette.text.primary,
+                                    "&:hover": {
+                                        backgroundColor: alpha(palette.text.primary, palette.action.hoverOpacity),
+                                    },
+                                },
+                            },
+                        ],
                     },
                     contained: {
                         borderColor: palette.grey[400],
@@ -298,40 +332,6 @@ function getComponentOverrides(theme, isDense) {
                         },
                     },
                 },
-                variants: [
-                    {
-                        // The "grey" color is our own augmentation which is
-                        // equivalent to the "default" color in MUI v4, which
-                        // was removed in v5.
-                        props: { variant: "contained", color: "grey" },
-                        style: {
-                            color: palette.getContrastText(palette.grey[300]),
-                        },
-                    },
-                    {
-                        props: { variant: "outlined", color: "grey" },
-                        style: {
-                            color: palette.text.primary,
-                            borderColor: palette.custom.greyOutline,
-                            "&.Mui-disabled": {
-                                border: `1px solid ${palette.action.disabledBackground}`,
-                            },
-                            "&:hover": {
-                                borderColor: palette.custom.greyOutline,
-                                backgroundColor: alpha(palette.text.primary, palette.action.hoverOpacity),
-                            },
-                        },
-                    },
-                    {
-                        props: { color: "grey", variant: "text" },
-                        style: {
-                            color: palette.text.primary,
-                            "&:hover": {
-                                backgroundColor: alpha(palette.text.primary, palette.action.hoverOpacity),
-                            },
-                        },
-                    },
-                ],
             },
             MuiButtonBase: {
                 styleOverrides: {
@@ -369,20 +369,6 @@ function getComponentOverrides(theme, isDense) {
                     focusRipple: false,
                 },
             },
-            MuiClock: {
-                styleOverrides: {
-                    amButton: {
-                        "& .MuiTypography-caption": {
-                            fontStyle: "normal",
-                        },
-                    },
-                    pmButton: {
-                        "& .MuiTypography-caption": {
-                            fontStyle: "normal",
-                        },
-                    },
-                },
-            },
             MuiCssBaseline: {
                 styleOverrides: {
                     html: {
@@ -616,6 +602,18 @@ function getComponentOverrides(theme, isDense) {
             MuiListItem: {
                 styleOverrides: {
                     root: {
+                        variants: [
+                            {
+                                // HACK: The button prop is deprecated in MUI 5 in favor
+                                // of using ListItemButton. This applies the same
+                                // styling for any existing code still using this
+                                // property.
+                                props: { button: true },
+                                style: {
+                                    ...getMenuItemStyles(theme),
+                                },
+                            },
+                        ],
                         "&.MuiListItem-secondaryAction, &>.MuiListItemButton-root": {
                             // Disable the right padding of 48px that MUI uses
                             // to make room for secondary actions, since we use
@@ -639,20 +637,6 @@ function getComponentOverrides(theme, isDense) {
                         alignItems: "center",
                     },
                 },
-                variants: [
-                    {
-                        // HACK: The button prop is deprecated in MUI 5 in favor
-                        // of using ListItemButton. This applies the same
-                        // styling for any existing code still using this
-                        // property.
-                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                        // @ts-expect-error
-                        props: { button: true },
-                        style: {
-                            ...getMenuItemStyles(theme),
-                        },
-                    },
-                ],
             },
             MuiListItemSecondaryAction: {
                 styleOverrides: {