@vertigis/react-ui 16.2.1 → 16.3.1

package/InlineHelp/InlineHelp.js

@@ -30,7 +30,7 @@ const StyledPopover = styled(Popover)(({ theme: { spacing, typography: { pxToRem
     [`& .${inlineHelpClasses.paper}`]: {
         maxWidth: pxToRem(350),
         padding: spacing(2),
-        wordWrap: "break-word",
+        overflowWrap: "anywhere",
     },
 }));
 const InlineHelp = forwardRef(({ children, classes: classesProp, className, icon, onClose, title, url, ...other }, ref) => {

package/package.json

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

package/styles/createTheme.d.ts

@@ -1,5 +1,5 @@
 import type { Theme, ThemeOptions } from "@mui/material/styles";
-export type { default as GreyTheme } from "./themeAugmentation.js";
+export type * from "../styles/themeAugmentation.js";
 export type { Theme, ThemeOptions };
 export interface CreateThemeOptions extends ThemeOptions {
     /**
@@ -20,4 +20,4 @@ export type { Direction } from "@mui/material/styles";
  *   original theme.
  * @returns A new theme that is the merger of the original theme plus overrides.
  */
-export declare function overrideTheme(theme: Theme, overrides: Partial<Theme>): Theme;
+export declare function overrideTheme(theme: Theme, overrides: ThemeOptions): Theme;

package/styles/createTheme.js

@@ -1,113 +1,90 @@
 import { alpha, createTheme as createMuiTheme } from "@mui/material/styles";
+import { defaultPalette, getPaletteOverrides } from "./palette.js";
 import blue from "../colors/blue.js";
-import common from "../colors/common.js";
-import green from "../colors/green.js";
-import grey from "../colors/grey.js";
-import red from "../colors/red.js";
-const secondaryTextColor = "#666666";
-const primaryTextColor = "#333333";
-const primaryErrorColor = "#B22222";
-const primaryWarningColor = "#BF5300";
-const primarySuccessColor = "#008040";
 const fontWeightLightest = 200;
 const fontWeightLight = 300;
 const fontWeightRegular = 400;
 const fontWeightMedium = 600;
 const fontWeightBold = 700;
-const lightThemeOverrides = {
-    palette: {
-        background: {
-            default: common.white,
+const getDefaultOptions = (theme) => {
+    const { palette, typography: { pxToRem }, } = theme;
+    return {
+        palette: { ...defaultPalette, ...getPaletteOverrides(palette) },
+        // 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", "Roboto", Helvetica, Arial, sans-serif',
+            fontWeightLight,
+            fontWeightRegular,
+            fontWeightMedium,
+            fontWeightBold,
+            h1: {
+                fontSize: pxToRem(32),
+                fontWeight: fontWeightLight,
+                lineHeight: 1.25,
+            },
+            h2: {
+                fontSize: pxToRem(26),
+                fontWeight: fontWeightLight,
+                lineHeight: 1.25,
+            },
+            h3: {
+                fontSize: pxToRem(22),
+                fontWeight: fontWeightLightest,
+                lineHeight: 1.25,
+            },
+            h4: {
+                fontSize: pxToRem(20),
+                fontWeight: fontWeightRegular,
+                lineHeight: 1.25,
+            },
+            h5: {
+                fontSize: pxToRem(18),
+                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",
+            },
         },
-    },
-    text: {
-        primary: primaryTextColor,
-        secondary: secondaryTextColor,
-    },
+    };
 };
-const getDefaultOptions = (pxToRem) => ({
-    palette: {
-        primary: blue,
-        secondary: green,
-        grey: { ...grey, main: grey[300], dark: grey[400] },
-        error: { ...red, main: primaryErrorColor },
-        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", "Roboto", Helvetica, Arial, sans-serif',
-        fontWeightLight,
-        fontWeightRegular,
-        fontWeightMedium,
-        fontWeightBold,
-        h1: {
-            fontSize: pxToRem(32),
-            fontWeight: fontWeightLight,
-            lineHeight: 1.25,
-        },
-        h2: {
-            fontSize: pxToRem(26),
-            fontWeight: fontWeightLight,
-            lineHeight: 1.25,
-        },
-        h3: {
-            fontSize: pxToRem(22),
-            fontWeight: fontWeightLightest,
-            lineHeight: 1.25,
-        },
-        h4: {
-            fontSize: pxToRem(20),
-            fontWeight: fontWeightRegular,
-            lineHeight: 1.25,
-        },
-        h5: {
-            fontSize: pxToRem(18),
-            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: {
@@ -214,9 +191,8 @@ const getMenuItemStyles = ({ palette, transitions }) => ({
  * The overrides may be based on the theme's palette. We must create these
  * separately after the fact.
  */
-function getOverrides(theme) {
+function getComponentOverrides(theme) {
     const { palette, shape, spacing, transitions, typography: { pxToRem, fontWeightMedium, fontWeightBold, body1, subtitle2 }, } = theme;
-    const isDarkMode = palette.mode === "dark";
     return {
         components: {
             MuiAutocomplete: {
@@ -327,16 +303,12 @@ function getOverrides(theme) {
                         props: { variant: "outlined", color: "grey" },
                         style: {
                             color: palette.text.primary,
-                            borderColor: palette.mode === "light"
-                                ? "rgba(0, 0, 0, 0.23)"
-                                : "rgba(255, 255, 255, 0.23)",
+                            borderColor: palette.custom.greyOutline,
                             "&.Mui-disabled": {
                                 border: `1px solid ${palette.action.disabledBackground}`,
                             },
                             "&:hover": {
-                                borderColor: palette.mode === "light"
-                                    ? "rgba(0, 0, 0, 0.23)"
-                                    : "rgba(255, 255, 255, 0.23)",
+                                borderColor: palette.custom.greyOutline,
                                 backgroundColor: alpha(palette.text.primary, palette.action.hoverOpacity),
                             },
                         },
@@ -496,7 +468,7 @@ function getOverrides(theme) {
                         marginBottom: spacing(0.5),
                         "&.Mui-error": {
                             borderRadius: shape.borderRadius,
-                            color: isDarkMode ? palette.text.primary : palette.error.main,
+                            color: palette.custom.errorText,
                             fontStyle: "italic",
                             backgroundColor: palette.background.default,
                         },
@@ -527,14 +499,12 @@ function getOverrides(theme) {
                                 marginRight: "4px",
                                 alignItems: "center",
                                 borderRadius: "50%",
-                                backgroundColor: isDarkMode
-                                    ? palette.text.primary
-                                    : palette.error.main,
+                                backgroundColor: palette.custom.errorText,
                             },
                         },
                         "&.Mui-error .GcxFormLabel-errorIcon": {
                             margin: "0px 0px 2px 0px",
-                            color: isDarkMode ? palette.error.main : palette.background.default,
+                            color: palette.custom.errorBackground,
                         },
                         "&.Mui-focused": {
                             color: "currentColor",
@@ -593,11 +563,11 @@ function getOverrides(theme) {
                             borderWidth: "2px",
                             borderColor: palette.error.main,
                             boxSizing: "border-box",
-                            boxShadow: `0 0 0 1px ${isDarkMode ? palette.common.white : "transparent"} inset, 0 0 0 1px ${isDarkMode ? palette.common.white : "transparent"}`,
+                            boxShadow: `0 0 0 1px ${palette.custom.darkModeEmphasis} inset, 0 0 0 1px ${palette.custom.darkModeEmphasis}`,
                         },
                         "&.Mui-disabled": {
                             borderColor: palette.grey[300],
-                            backgroundColor: isDarkMode ? palette.grey[900] : palette.grey[100],
+                            backgroundColor: palette.custom.greyBackground,
                         },
                     },
                     inputMultiline: {
@@ -794,16 +764,12 @@ function getOverrides(theme) {
                     },
                     colorPrimary: {
                         "&.Mui-checked": {
-                            color: palette.mode === "light"
-                                ? palette.common.black
-                                : palette.common.white,
+                            color: palette.custom.negativeSpace,
                         },
                     },
                     colorSecondary: {
                         "&.Mui-checked": {
-                            color: palette.mode === "light"
-                                ? palette.common.black
-                                : palette.common.white,
+                            color: palette.custom.negativeSpace,
                         },
                     },
                     sizeSmall: {
@@ -842,7 +808,7 @@ function getOverrides(theme) {
                         width: 16,
                         height: 16,
                         borderRadius: 2,
-                        backgroundColor: palette.mode === "light" ? palette.common.white : palette.common.black,
+                        backgroundColor: palette.custom.negativeSpace,
                     },
                     track: {
                         borderRadius: shape.borderRadius,
@@ -855,7 +821,7 @@ function getOverrides(theme) {
                 },
                 styleOverrides: {
                     root: {
-                        backgroundColor: isDarkMode ? palette.grey[900] : palette.grey[100],
+                        backgroundColor: palette.custom.greyBackground,
                         borderStyle: "solid",
                         borderWidth: 1,
                         borderColor: palette.grey[400],
@@ -883,17 +849,14 @@ function getOverrides(theme) {
                     root: {
                         border: `1px solid ${palette.grey[400]}`,
                         padding: 12,
-                        // TODO: Change to overflowWrap: "anywhere" when Safari supports it
-                        // as "break-word" is deprecated
-                        // https://caniuse.com/#feat=mdn-css_properties_overflow-wrap_anywhere
-                        wordWrap: "break-word",
+                        overflowWrap: "anywhere",
                         "&:last-child": {
                             paddingRight: undefined,
                         },
                     },
                     head: {
                         // Chosen to match PanelGroup in react-ui-internal.
-                        backgroundColor: isDarkMode ? palette.grey[900] : palette.grey[200],
+                        backgroundColor: palette.custom.greyBackground,
                         fontWeight: "bold",
                         fontSize: pxToRem(14),
                     },
@@ -1067,19 +1030,24 @@ function getOverrides(theme) {
     };
 }
 function createTheme(options = {}) {
-    // Merge the VertiGIS Studio theme defaults with any user specified theme options
-    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;
     // If the incoming options override either the fontSize or htmlFontSize,
     // these need to be specified when creating the theme so that we end up
     // with the correct implementation of pxToRem().
     const { fontSize = 14, htmlFontSize = 16 } = options.typography ?? {};
-    const defaultTheme = createMuiTheme({ typography: { fontSize, htmlFontSize } });
-    const mergedOptions = deepAssign({}, getDefaultOptions(defaultTheme.typography.pxToRem), modeOptions, dense ? defaultDenseOptions : {}, overrides);
+    // Populate a "default" MUI theme with our base colors and typography settings.
+    // This will be used to create a theme options object that can take into
+    // account the default values MUI creates.
+    const defaultTheme = createMuiTheme({
+        palette: { mode: options?.palette?.mode ?? "light", ...defaultPalette },
+        typography: { fontSize, htmlFontSize },
+    });
+    // Merge the VertiGIS Studio theme defaults with any user specified theme options
+    const mergedOptions = deepAssign({}, getDefaultOptions(defaultTheme), dense ? defaultDenseOptions : {}, overrides);
     const createdTheme = createMuiTheme(mergedOptions);
-    return overrideTheme(createdTheme, getOverrides(createdTheme));
+    // The component overrides use the final palette and so must be applied
+    // last.
+    return overrideTheme(createdTheme, getComponentOverrides(createdTheme));
 }
 export default createTheme;
 /**

package/styles/index.d.ts

@@ -1,3 +1,4 @@
+export type * from "../styles/themeAugmentation.js";
 export { alpha, ThemeProvider as GcxThemeProvider, createStyles, darken, decomposeColor, duration, easing, emphasize, getContrastRatio, getLuminance, hexToRgb, hslToRgb, lighten, recomposeColor, responsiveFontSizes, rgbToHex, styled, useTheme, } from "@mui/material/styles";
 export type { ColorFormat, ColorObject, ComponentsPropsList, CSSObject, Duration, Easing, PaletteColorOptions, SimplePaletteColorOptions, Transitions, TransitionsOptions, TypographyStyle, TypographyVariant, } from "@mui/material/styles";
 export type { ThemeProviderProps } from "@mui/material/styles/ThemeProvider";

package/styles/palette.d.ts

@@ -0,0 +1,48 @@
+import type { Theme, ThemeOptions } from "@mui/material/styles";
+export declare const getPaletteOverrides: (palette: Theme["palette"]) => ThemeOptions["palette"];
+export declare const defaultPalette: {
+    primary: import("@mui/material").Color;
+    secondary: import("@mui/material").Color;
+    grey: {
+        main: string;
+        dark: string;
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        A100: string;
+        A200: string;
+        A400: string;
+        A700: string;
+    };
+    error: {
+        main: string;
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        A100: string;
+        A200: string;
+        A400: string;
+        A700: string;
+        dark?: string | undefined;
+    };
+    warning: {
+        main: string;
+    };
+    success: {
+        main: string;
+    };
+};

package/styles/palette.js

@@ -0,0 +1,48 @@
+import blue from "../colors/blue.js";
+import common from "../colors/common.js";
+import green from "../colors/green.js";
+import grey from "../colors/grey.js";
+import red from "../colors/red.js";
+const secondaryTextColor = "#666666";
+const primaryTextColor = "#333333";
+const primaryErrorColor = "#B22222";
+const primaryWarningColor = "#BF5300";
+const primarySuccessColor = "#008040";
+const lightModePaletteOverrides = (palette) => ({
+    background: {
+        default: common.white,
+    },
+    text: {
+        primary: primaryTextColor,
+        secondary: secondaryTextColor,
+    },
+    custom: {
+        errorText: palette.error.main,
+        errorBackground: palette.background.default,
+        darkModeEmphasis: "transparent",
+        greyBackground: grey[100],
+        greyOutline: "rgba(0, 0, 0, 0.23)",
+        negativeSpace: palette.common.white,
+    },
+});
+const darkModePaletteOverrides = (palette) => ({
+    custom: {
+        errorText: palette.text.primary,
+        errorBackground: palette.error.main,
+        darkModeEmphasis: common.white,
+        greyBackground: grey[900],
+        greyOutline: "rgba(255, 255, 255, 0.23)",
+        negativeSpace: palette.common.black,
+    },
+});
+export const getPaletteOverrides = (palette) => palette.mode === "light"
+    ? lightModePaletteOverrides(palette)
+    : darkModePaletteOverrides(palette);
+export const defaultPalette = {
+    primary: blue,
+    secondary: green,
+    grey: { ...grey, main: grey[300], dark: grey[400] },
+    error: { ...red, main: primaryErrorColor },
+    warning: { main: primaryWarningColor },
+    success: { main: primarySuccessColor },
+};

package/styles/themeAugmentation.d.ts

@@ -1,5 +1,3 @@
-import { ComponentsProps, ComponentsOverrides, ComponentsVariants } from "@mui/material/styles";
-
 export * from "@mui/x-date-pickers-pro/themeAugmentation";
 export * from "@mui/x-date-pickers/themeAugmentation";
 
@@ -27,22 +25,40 @@ declare module "@mui/material" {
         dark?: string;
     }
 }
+declare module "@mui/material/styles" {
+    interface Palette {
+        custom: {
+            /**
+             * Emphasis that appears only when the user is in dark mode.
+             */
+            darkModeEmphasis: string;
+            /**
+             * A text color for error messages.
+             */
+            errorText: string;
+            /**
+             * A background for error messages.
+             */
+            errorBackground: string;
+            /**
+             * A light grey background color.
+             */
+            greyBackground: string;
+            /**
+             * A subtle grey outline.
+             */
+            greyOutline: string;
+            /**
+             * The inverse of either black or white, depending on the selected
+             * mode.
+             */
+            negativeSpace: string;
+        };
+    }
 
-export default {};
-
-// TODO: For some reason, MUI's list of x-date-pickers components in the above
-// augmentation is incomplete. Remove these overrides if they ever fix this.
-export interface UndocumentedDatePickersComponents {
-    MuiDateRangePicker?: {
-        defaultProps?: ComponentsProps["MuiDateRangePicker"];
-        styleOverrides?: ComponentsOverrides["MuiDateRangePicker"];
-    };
-    MuiTimePicker?: {
-        defaultProps?: ComponentsProps["MuiTimePicker"];
-        styleOverrides?: ComponentsOverrides["MuiTimePicker"];
-    };
+    interface PaletteOptions {
+        custom?: Partial<Palette["custom"]>;
+    }
 }
 
-declare module "@mui/material/styles" {
-    interface Components extends UndocumentedDatePickersComponents {}
-}
+export default {};