@vertigis/react-ui 16.5.1 → 16.6.1

package/Autocomplete/HighlightOption.d.ts

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

package/FormLabelAutocompleteField/FormLabelAutocompleteField .d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { AutocompleteProps } from "../Autocomplete";
 import type { ChipTypeMap } from "../Chip";
 import type { FormControlProps } from "../FormControl/index.js";

package/TimePicker/TimePicker.js

@@ -12,7 +12,7 @@ const TimePicker = ({ slots, viewRenderers, ...props }, ref) => (_jsx(MuiTimePic
         "& .MuiIconButton-sizeMedium": {
             // Match the adornment alignment of other date pickers.
             marginRight: -0.375,
-            padding: "3px",
+            padding: -0.375,
         },
     }, ...props }));
 export default forwardRef(TimePicker);

package/package.json

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

package/styles/createTheme.js

@@ -86,11 +86,14 @@ const getDefaultOptions = (theme) => {
     };
 };
 const defaultDenseOptions = {
-    spacing: 6,
+    spacing: 5,
     components: {
         MuiButton: {
             defaultProps: { size: "small" },
         },
+        MuiCheckbox: {
+            defaultProps: { size: "small" },
+        },
         MuiFilledInput: {
             defaultProps: { margin: "dense" },
         },
@@ -124,6 +127,12 @@ const defaultDenseOptions = {
         MuiFab: {
             defaultProps: { size: "small" },
         },
+        MuiSwitch: {
+            defaultProps: { size: "small" },
+        },
+        MuiSvgIcon: {
+            defaultProps: { fontSize: "small" },
+        },
         MuiTable: {
             defaultProps: { size: "small" },
         },
@@ -184,14 +193,14 @@ const getMenuItemStyles = ({ palette, transitions }) => ({
         backgroundColor: "transparent",
     },
     "&:hover, &.Mui-selected": {
-        background: `linear-gradient(to right, ${palette.mode === "dark" ? palette.grey[800] : palette.grey[100]} 0%, transparent 100%)`,
+        background: `linear-gradient(to right, ${palette.custom.greyBackground} 0%, transparent 100%)`,
     },
 });
 /**
  * The overrides may be based on the theme's palette. We must create these
  * separately after the fact.
  */
-function getComponentOverrides(theme) {
+function getComponentOverrides(theme, isDense) {
     const { palette, shape, spacing, transitions, typography: { pxToRem, fontWeightMedium, fontWeightBold, body1, subtitle2 }, } = theme;
     return {
         components: {
@@ -202,7 +211,7 @@ function getComponentOverrides(theme) {
                             ".MuiInput-input": {
                                 // Let the height expand to fit content
                                 height: "auto",
-                                padding: "5px 8px",
+                                padding: `${spacing(0.625)} ${spacing(1)}`,
                             },
                         },
                     },
@@ -273,7 +282,7 @@ function getComponentOverrides(theme) {
                         },
                     },
                     sizeMedium: {
-                        padding: "6px 16px",
+                        padding: `${spacing(0.75)} ${spacing(2)}`,
                     },
                     text: {
                         borderColor: "transparent",
@@ -531,7 +540,7 @@ function getComponentOverrides(theme) {
                         },
                     },
                     sizeSmall: {
-                        padding: 3,
+                        padding: spacing(0.375),
                     },
                 },
             },
@@ -571,7 +580,7 @@ function getComponentOverrides(theme) {
                         },
                     },
                     inputMultiline: {
-                        padding: "5px 8px",
+                        padding: `${spacing(0.625)} ${spacing(1)}`,
                     },
                 },
             },
@@ -590,7 +599,7 @@ function getComponentOverrides(theme) {
                     input: {
                         // Let the height expand to fit content
                         height: "auto",
-                        padding: "5px 8px",
+                        padding: `${spacing(0.625)} ${spacing(1)}`,
                     },
                 },
             },
@@ -678,16 +687,16 @@ function getComponentOverrides(theme) {
                             // Reset to make height consistent with ListItems
                             minHeight: 48,
                         },
-                        paddingTop: 8,
-                        paddingBottom: 8,
+                        paddingTop: spacing(1),
+                        paddingBottom: spacing(1),
                         ...getMenuItemStyles(theme),
                     },
                     dense: {
                         [theme.breakpoints.up("sm")]: {
                             minHeight: 36,
                         },
-                        paddingTop: 4,
-                        paddingBottom: 4,
+                        paddingTop: spacing(0.5),
+                        paddingBottom: spacing(0.5),
                         "& .MuiListItemIcon-root svg": {
                             // MUI sets this to 1.25rem, which ignores the
                             // theme's `htmlFontSize` setting. Override with
@@ -776,6 +785,7 @@ function getComponentOverrides(theme) {
                         width: 36,
                         height: 30,
                         padding: 6,
+                        marginLeft: 4,
                         // 'on' state indicator
                         "&::before": {
                             left: 8,
@@ -826,9 +836,9 @@ function getComponentOverrides(theme) {
                         borderWidth: 1,
                         borderColor: palette.grey[400],
                         borderLeftWidth: 0,
-                        height: 40,
-                        minHeight: 38,
-                        padding: "6px 12px",
+                        height: "unset",
+                        minHeight: isDense ? 30 : 40,
+                        padding: `${spacing(0.75)} ${spacing(1.5)}`,
                         textTransform: "none",
                         [theme.breakpoints.up("sm")]: {
                             minWidth: 72,
@@ -848,7 +858,7 @@ function getComponentOverrides(theme) {
                 styleOverrides: {
                     root: {
                         border: `1px solid ${palette.grey[400]}`,
-                        padding: 12,
+                        padding: spacing(1.5),
                         overflowWrap: "anywhere",
                         "&:last-child": {
                             paddingRight: undefined,
@@ -881,6 +891,8 @@ function getComponentOverrides(theme) {
                         borderStyle: "solid",
                         borderWidth: 0,
                         borderBottomWidth: 1,
+                        height: "unset",
+                        minHeight: isDense ? 30 : 40,
                         "& >div >button": {
                             marginBottom: -1,
                             borderLeftWidth: 1,
@@ -942,7 +954,7 @@ function getComponentOverrides(theme) {
                 styleOverrides: {
                     root: {
                         // Same as MuiButton
-                        padding: "6px 16px",
+                        padding: `${spacing(0.75)} ${spacing(2)}`,
                         height: undefined,
                         color: alpha(palette.text.primary, 0.7),
                         // Border color from Button contained
@@ -1047,7 +1059,7 @@ function createTheme(options = {}) {
     const createdTheme = createMuiTheme(mergedOptions);
     // The component overrides use the final palette and so must be applied
     // last.
-    return overrideTheme(createdTheme, getComponentOverrides(createdTheme));
+    return overrideTheme(createdTheme, getComponentOverrides(createdTheme, dense));
 }
 export default createTheme;
 /**