@vertigis/react-ui 9.1.0 → 9.2.2

package/Switch/Switch.d.ts

@@ -1,6 +1,6 @@
 import type { ButtonBaseClasses } from "@mui/material/ButtonBase";
 import type { IconButtonClasses } from "@mui/material/IconButton";
-import Switch, { SwitchProps as MUISwitchProps, SwitchClasses as MUISwitchClasses } from "@mui/material/Switch";
+import { SwitchProps as MUISwitchProps, SwitchClasses as MUISwitchClasses } from "@mui/material/Switch";
 export * from "@mui/material/Switch";
 export interface SwitchClasses extends MUISwitchClasses, IconButtonClasses, ButtonBaseClasses {
 }
@@ -8,4 +8,5 @@ export declare type SwitchClassKey = keyof SwitchClasses;
 export declare type SwitchProps = Omit<MUISwitchProps, "classes"> & {
     classes?: Partial<SwitchClasses>;
 };
+declare const Switch: import("@emotion/styled").StyledComponent<MUISwitchProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles/createTheme").Theme>, {}, {}>;
 export default Switch;

package/Switch/Switch.js

@@ -1,4 +1,11 @@
-import Switch from "@mui/material/Switch";
+import SwitchBase from "@mui/material/Switch";
+import { styled } from "../styles";
 // MUST be the first export, since some of the exports are overridden below.
 export * from "@mui/material/Switch";
+const Switch = styled(SwitchBase)(({ color = "secondary", theme: { palette } }) => ({
+    "&::before": {
+        // Calculate dot color based on track color.
+        color: palette.getContrastText(palette[color].main),
+    }
+}));
 export default Switch;

package/colors/darkRed.d.ts

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

package/colors/darkRed.js

@@ -0,0 +1,17 @@
+const darkRed = {
+    50: "#F8E8E7",
+    100: "#ECC2BE",
+    200: "#E09E98",
+    300: "#D47D75",
+    400: "#C85F55",
+    500: "#BC4438",
+    600: "#A43B31",
+    700: "#8D332A",
+    800: "#752A23",
+    900: "#5D221C",
+    A100: "#FFCECC",
+    A200: "#FF9E99",
+    A400: "#FF6D66",
+    A700: "#FF554C",
+};
+export default darkRed;

package/package.json

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

package/styles/createTheme.js

@@ -465,6 +465,31 @@ function getOverrides(theme) {
                 },
             },
             MuiListItem: {
+                styleOverrides: {
+                    root: {
+                        "&.MuiListItem-secondaryAction, &>.MuiListItemButton-root": {
+                            // Disable the right padding of 48px that MUI uses
+                            // to make room for secondary actions, since we use
+                            // flex for those rather than absolute positioning
+                            // (see MuiListItemSecondaryAction overrides). Note
+                            // that there are two distinct cases we need to
+                            // handle, depending on whether a
+                            // <ListItemSecondaryAction> element is used
+                            // explicitly, or whether the ListItem's
+                            // `secondaryAction` prop is used.
+                            paddingRight: spacing(1),
+                        },
+                    },
+                    container: {
+                        // A wrapper element with this class is added around a
+                        // list item when a <ListItemSecondaryAction> child is
+                        // present. Use flex to position the secondary actions
+                        // next to the list item content rather than absolute
+                        // positioning so that nothing overlaps.
+                        display: "flex",
+                        alignItems: "center",
+                    },
+                },
                 variants: [
                     {
                         // HACK: The button prop is deprecated in MUI 5 in favor
@@ -478,6 +503,18 @@ function getOverrides(theme) {
                     },
                 ],
             },
+            MuiListItemSecondaryAction: {
+                styleOverrides: {
+                    root: {
+                        // We use flex instead of absolute positioning so that
+                        // secondary buttons don't overlap the item text.
+                        position: "static",
+                        transform: "unset",
+                        flex: "0 0 auto",
+                        paddingRight: spacing(1),
+                    },
+                },
+            },
             MuiListItemText: {
                 styleOverrides: {
                     primary: {
@@ -557,6 +594,7 @@ function getOverrides(theme) {
             },
             MuiSwitch: {
                 defaultProps: {
+                    color: "secondary",
                     focusRipple: false,
                 },
                 styleOverrides: {
@@ -568,8 +606,6 @@ function getOverrides(theme) {
                         "&::before": {
                             content: "'•'",
                             position: "absolute",
-                            // Get contrast text color based on track color
-                            color: palette.getContrastText(palette.secondary.main),
                             left: 14,
                             top: 7,
                             fontSize: 18,
@@ -618,7 +654,6 @@ function getOverrides(theme) {
                             transform: "translateX(33%)",
                         },
                         "&.Mui-checked + .MuiSwitch-track": {
-                            backgroundColor: palette.secondary.main,
                             opacity: 1,
                         },
                     },