@vertigis/react-ui 20.1.0 → 21.1.0

package/DateRangePicker/DateRangePicker.d.ts

@@ -2,6 +2,8 @@ import type { PickerValidDate } from "@mui/x-date-pickers/models";
 import type { DateRangePickerProps as MuiDateRangePickerProps } from "@mui/x-date-pickers-pro/DateRangePicker";
 export type { PickerValidDate };
 export * from "@mui/x-date-pickers-pro/DateRangePicker";
+export * from "@mui/x-date-pickers-pro/DesktopDateRangePicker";
+export * from "@mui/x-date-pickers-pro/MobileDateRangePicker";
 export interface DateRangePickerProps<TDate extends PickerValidDate> extends MuiDateRangePickerProps<TDate> {
     dateSeparator?: string;
 }

package/DateRangePicker/DateRangePicker.js

@@ -3,5 +3,7 @@ import { DateRangePicker as MuiDateRangePicker } from "@mui/x-date-pickers-pro/D
 import { forwardRef } from "react";
 import FormLabelTextField from "../FormLabelTextField/index.js";
 export * from "@mui/x-date-pickers-pro/DateRangePicker";
+export * from "@mui/x-date-pickers-pro/DesktopDateRangePicker";
+export * from "@mui/x-date-pickers-pro/MobileDateRangePicker";
 const DateRangePicker = ({ dateSeparator, slots, slotProps, ...props }, ref) => (_jsx(MuiDateRangePicker, { ref: ref, slotProps: { field: { dateSeparator }, ...slotProps }, slots: { textField: FormLabelTextField, ...slots }, ...props }));
 export default forwardRef(DateRangePicker);

package/DateTimeRangePicker/DateTimeRangePicker.d.ts

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

package/DateTimeRangePicker/DateTimeRangePicker.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { DateTimeRangePicker as MuiDateTimeRangePicker, renderTimeViewClock, } from "@mui/x-date-pickers-pro";
 import { forwardRef } from "react";
 import FormLabelTextField from "../FormLabelTextField/index.js";
+export * from "@mui/x-date-pickers-pro/DateTimeRangePicker";
 const DateTimeRangePicker = forwardRef(({ dateSeparator, slots, slotProps, viewRenderers, ...props }, ref) => (_jsx(MuiDateTimeRangePicker, { inputRef: ref, slotProps: { field: { dateSeparator }, ...slotProps }, slots: { textField: FormLabelTextField, ...slots }, viewRenderers: {
         hours: viewRenderers?.hours ?? renderTimeViewClock,
         minutes: viewRenderers?.minutes ?? renderTimeViewClock,

package/Loader/Loader.js

@@ -53,9 +53,7 @@ const Root = styled("div")(({ theme: { palette } }) => ({
         },
     },
     [`&.${loaderClasses.showBackground}`]: {
-        backgroundColor: palette.mode === "dark"
-            ? alpha(palette.common.white, 0.15)
-            : alpha(palette.common.black, 0.4),
+        backgroundColor: alpha(palette.text.primary, palette.mode === "dark" ? 0.15 : 0.4),
         [`& .${loaderClasses.dot}`]: {
             borderColor: palette.common.white,
             backgroundColor: palette.common.white,

package/LocalizationProvider/index.d.ts

@@ -1,3 +1,3 @@
 export * from "@mui/x-date-pickers/LocalizationProvider";
-import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { LocalizationProvider } from "@mui/x-date-pickers";
 export default LocalizationProvider;

package/LocalizationProvider/index.js

@@ -1,3 +1,3 @@
 export * from "@mui/x-date-pickers/LocalizationProvider";
-import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { LocalizationProvider } from "@mui/x-date-pickers";
 export default LocalizationProvider;

package/colors/grey.js

@@ -11,7 +11,7 @@ const grey = {
     900: "#404044",
     A100: "#b2b2c1",
     A200: "#a6a6b3",
-    A400: "#44444f",
-    A700: "#5a5a67",
+    A400: "#5a5a67",
+    A700: "#44444f",
 };
 export default grey;

package/colors/invertedGrey.d.ts

@@ -0,0 +1,3 @@
+import type Color from "./Color.js";
+declare const invertedGrey: Color;
+export default invertedGrey;

package/colors/invertedGrey.js

@@ -0,0 +1,17 @@
+const invertedGrey = {
+    50: "#151518",
+    100: "#232327",
+    200: "#36363a",
+    300: "#404044",
+    400: "#515156",
+    500: "#727279",
+    600: "#82828a",
+    700: "#97979f",
+    800: "#c4c4c9",
+    900: "#dbdbde",
+    A100: "#44444f",
+    A200: "#5a5a67",
+    A400: "#a6a6b3",
+    A700: "#b2b2c1",
+};
+export default invertedGrey;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertigis/react-ui",
-  "version": "20.1.0",
+  "version": "21.1.0",
   "description": "Utilities and React components used in VertiGIS applications.",
   "keywords": [
     "vertigis",
@@ -17,8 +17,8 @@
   "dependencies": {
     "@mui/icons-material": "^7.2.0",
     "@mui/material": "^7.2.0",
-    "@mui/x-data-grid-pro": "~7.28.0",
-    "@mui/x-date-pickers-pro": "~7.28.0",
+    "@mui/x-data-grid-pro": "^7.28.0",
+    "@mui/x-date-pickers-pro": "^7.28.0",
     "@mui/x-license": "^7.24.1",
     "@mui/x-tree-view": "^7.24.0",
     "autosuggest-highlight": "^3.3.4",

package/styles/createTheme.js

@@ -193,7 +193,7 @@ const getMenuItemStyles = ({ palette, transitions }) => ({
         backgroundColor: "transparent",
     },
     "&:hover, &.Mui-selected": {
-        background: `linear-gradient(to right, ${palette.custom.greyBackground} 0%, transparent 100%)`,
+        background: `linear-gradient(to right, ${palette.grey.light} 0%, transparent 100%)`,
     },
 });
 /**
@@ -465,7 +465,7 @@ function getComponentOverrides(theme, isDense) {
                             borderRadius: shape.borderRadius,
                             color: palette.custom.errorText,
                             fontStyle: "italic",
-                            backgroundColor: palette.background.default,
+                            backgroundColor: "transparent",
                         },
                     },
                 },
@@ -484,7 +484,7 @@ function getComponentOverrides(theme, isDense) {
                         "&.Mui-error, &.Mui-error.Mui-focused": {
                             borderRadius: shape.borderRadius,
                             color: palette.text.primary,
-                            backgroundColor: palette.background.default,
+                            backgroundColor: "transparent",
                             // Error icon background circle
                             "& .GcxFormLabel-errorIconBackground": {
                                 display: "inline-flex",
@@ -507,7 +507,7 @@ function getComponentOverrides(theme, isDense) {
                     },
                     asterisk: {
                         "&.Mui-error": {
-                            color: "white",
+                            color: palette.background.default,
                         },
                     },
                 },
@@ -562,7 +562,7 @@ function getComponentOverrides(theme, isDense) {
                         },
                         "&.Mui-disabled": {
                             borderColor: palette.grey[300],
-                            backgroundColor: palette.custom.greyBackground,
+                            backgroundColor: palette.grey.light,
                         },
                     },
                     inputMultiline: {
@@ -757,12 +757,12 @@ function getComponentOverrides(theme, isDense) {
                     },
                     colorPrimary: {
                         "&.Mui-checked": {
-                            color: palette.custom.negativeSpace,
+                            color: palette.background.default,
                         },
                     },
                     colorSecondary: {
                         "&.Mui-checked": {
-                            color: palette.custom.negativeSpace,
+                            color: palette.background.default,
                         },
                     },
                     sizeSmall: {
@@ -802,7 +802,7 @@ function getComponentOverrides(theme, isDense) {
                         width: 16,
                         height: 16,
                         borderRadius: 2,
-                        backgroundColor: palette.custom.negativeSpace,
+                        backgroundColor: palette.background.default,
                     },
                     track: {
                         borderRadius: shape.borderRadius,
@@ -815,7 +815,7 @@ function getComponentOverrides(theme, isDense) {
                 },
                 styleOverrides: {
                     root: {
-                        backgroundColor: palette.custom.greyBackground,
+                        backgroundColor: palette.grey.light,
                         borderStyle: "solid",
                         borderWidth: 1,
                         borderColor: palette.grey[400],
@@ -850,7 +850,7 @@ function getComponentOverrides(theme, isDense) {
                     },
                     head: {
                         // Chosen to match PanelGroup in react-ui-internal.
-                        backgroundColor: palette.custom.greyBackground,
+                        backgroundColor: palette.grey.light,
                         fontWeight: "bold",
                         fontSize: pxToRem(14),
                     },

package/styles/palette.d.ts

@@ -3,24 +3,6 @@ export declare const getPaletteOverrides: (palette: Theme["palette"]) => ThemeOp
 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;
@@ -38,6 +20,7 @@ export declare const defaultPalette: {
         A400: string;
         A700: string;
         dark?: string;
+        light?: string;
     };
     warning: {
         main: string;

package/styles/palette.js

@@ -2,6 +2,7 @@ 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 invertedGrey from "../colors/invertedGrey.js";
 import red from "../colors/red.js";
 const secondaryTextColor = "#666666";
 const primaryTextColor = "#333333";
@@ -16,23 +17,37 @@ const lightModePaletteOverrides = (palette) => ({
         primary: primaryTextColor,
         secondary: secondaryTextColor,
     },
+    grey: { ...grey, main: grey[300], dark: grey[400], light: grey[100] },
     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,
+        // Deprecated, remove in next major release.
+        greyBackground: palette.grey.light,
+        negativeSpace: palette.background.default,
     },
 });
 const darkModePaletteOverrides = (palette) => ({
+    // Swap greys in dark mode so that hardcoded grey colors still fit the
+    // theme.
+    grey: {
+        ...invertedGrey,
+        main: invertedGrey[300],
+        dark: invertedGrey[400],
+        light: invertedGrey[100],
+    },
+    background: {
+        paper: invertedGrey[50],
+    },
     custom: {
         errorText: palette.text.primary,
         errorBackground: palette.error.main,
-        darkModeEmphasis: common.white,
-        greyBackground: grey[900],
+        darkModeEmphasis: invertedGrey[600],
         greyOutline: "rgba(255, 255, 255, 0.23)",
-        negativeSpace: palette.common.black,
+        // Deprecated, remove in next major release.
+        greyBackground: palette.grey.light,
+        negativeSpace: palette.background.default,
     },
 });
 export const getPaletteOverrides = (palette) => palette.mode === "light"
@@ -41,7 +56,6 @@ export const getPaletteOverrides = (palette) => palette.mode === "light"
 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

@@ -23,6 +23,7 @@ declare module "@mui/material" {
     interface Color {
         main?: string;
         dark?: string;
+        light?: string;
     }
 }
 declare module "@mui/material/styles" {
@@ -42,6 +43,8 @@ declare module "@mui/material/styles" {
             errorBackground: string;
             /**
              * A light grey background color.
+             *
+             * @deprecated Use `palette.grey.light`.
              */
             greyBackground: string;
             /**
@@ -51,6 +54,8 @@ declare module "@mui/material/styles" {
             /**
              * The inverse of either black or white, depending on the selected
              * mode.
+             *
+             * @deprecated Use `palette.background.default`.
              */
             negativeSpace: string;
         };