@vertigis/react-ui 13.3.0 → 14.0.0

package/NumberInput/NumberInput.js

@@ -105,6 +105,10 @@ const NumberInput = forwardRef(function NumberInput({ onChange, onBlur, value, d
             }
             setNumericValue(correctValue(value));
         }
+        else {
+            setTextValue("");
+            setNumericValue(NaN);
+        }
         // eslint-disable-next-line react-hooks/exhaustive-deps -- It's intentional to omit numericValue. We only want this to run when the incoming value changes, not when numericValue changes in handleChange().
     }, [value, formatNumber, correctValue]);
     const handleChange = useCallback(event => {

package/package.json

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

package/styles/createTheme.js

@@ -9,6 +9,10 @@ const primaryTextColor = "#333333";
 const primaryErrorColor = "#B22222";
 const primaryWarningColor = "#BF5300";
 const primarySuccessColor = "#008040";
+const fontWeightLight = 300;
+const fontWeightRegular = 400;
+const fontWeightMedium = 600;
+const fontWeightBold = 700;
 const lightThemeOverrides = {
     palette: {
         background: {
@@ -20,7 +24,7 @@ const lightThemeOverrides = {
         secondary: secondaryTextColor,
     },
 };
-const defaultOptions = {
+const getDefaultOptions = (pxToRem) => ({
     palette: {
         primary: blue,
         secondary: green,
@@ -29,10 +33,80 @@ const defaultOptions = {
         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", "Droid Sans", Helvetica, Arial, sans-serif`,
+        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(28),
+            fontWeight: fontWeightLight,
+            lineHeight: 1.25,
+        },
+        h3: {
+            fontSize: pxToRem(26),
+            fontWeight: fontWeightRegular,
+            lineHeight: 1.25,
+        },
+        h4: {
+            fontSize: pxToRem(22),
+            fontWeight: fontWeightRegular,
+            lineHeight: 1.25,
+        },
+        h5: {
+            fontSize: pxToRem(20),
+            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: {
@@ -140,7 +214,7 @@ const getMenuItemStyles = ({ palette, transitions }) => ({
  * separately after the fact.
  */
 function getOverrides(theme) {
-    const { palette, shape, spacing, transitions, typography } = theme;
+    const { palette, shape, spacing, transitions, typography: { pxToRem, fontWeightMedium, fontWeightBold, body1, subtitle2 }, } = theme;
     const isDarkMode = palette.mode === "dark";
     return {
         components: {
@@ -181,7 +255,6 @@ function getOverrides(theme) {
                     root: {
                         borderStyle: "solid",
                         borderWidth: 1,
-                        textTransform: "none",
                         "&.Mui-focusVisible:active": {
                             backgroundColor: alpha(palette.grey.A200, 0.5),
                         },
@@ -327,13 +400,13 @@ function getOverrides(theme) {
                         boxSizing: "inherit",
                     },
                     "strong, b": {
-                        fontWeight: typography.fontWeightBold,
+                        fontWeight: fontWeightBold,
                     },
                     body: {
                         margin: 0,
                         padding: 0,
                         color: palette.text.primary,
-                        ...typography.body1,
+                        ...body1,
                         backgroundColor: palette.background.default,
                         overflow: "hidden",
                         "@media print": {
@@ -386,7 +459,7 @@ function getOverrides(theme) {
                 },
                 styleOverrides: {
                     root: {
-                        ...typography.subtitle2,
+                        ...subtitle2,
                         marginTop: 0,
                         marginBottom: spacing(0.5),
                         "&.Mui-error": {
@@ -406,9 +479,9 @@ function getOverrides(theme) {
                         margin: spacing(0.5, 0),
                         color: "currentColor",
                         // Clear InlineHelp button
-                        paddingRight: typography.pxToRem(32),
+                        paddingRight: pxToRem(32),
                         lineHeight: 1.4,
-                        fontWeight: typography.fontWeightMedium,
+                        fontWeight: fontWeightMedium,
                         "&.Mui-error, &.Mui-error.Mui-focused": {
                             borderRadius: shape.borderRadius,
                             color: palette.text.primary,
@@ -416,8 +489,8 @@ function getOverrides(theme) {
                             // Error icon background circle
                             "& .GcxFormLabel-errorIconBackground": {
                                 display: "inline-flex",
-                                width: typography.pxToRem(22),
-                                height: typography.pxToRem(22),
+                                width: pxToRem(22),
+                                height: pxToRem(22),
                                 justifyContent: "center",
                                 marginRight: "4px",
                                 alignItems: "center",
@@ -618,7 +691,7 @@ function getOverrides(theme) {
                             // theme's `htmlFontSize` setting. Override with
                             // pxToRem to get the correct height regardless of
                             // HTML font size.
-                            fontSize: typography.pxToRem(20),
+                            fontSize: pxToRem(20),
                         },
                     },
                 },
@@ -664,7 +737,7 @@ function getOverrides(theme) {
                     valueLabel: {
                         // Set the minimum height to avoid it jumping around
                         // when the label does not have a value.
-                        minHeight: typography.pxToRem(28),
+                        minHeight: pxToRem(28),
                     },
                 },
             },
@@ -790,7 +863,7 @@ function getOverrides(theme) {
                         // Chosen to match PanelGroup in react-ui-internal.
                         backgroundColor: isDarkMode ? palette.grey[900] : palette.grey[200],
                         fontWeight: "bold",
-                        fontSize: typography.pxToRem(14),
+                        fontSize: pxToRem(14),
                     },
                 },
             },
@@ -967,7 +1040,8 @@ function createTheme(options = {}) {
     // 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;
-    const mergedOptions = deepAssign({}, defaultOptions, modeOptions, dense ? defaultDenseOptions : {}, overrides);
+    const defaultTheme = createMuiTheme();
+    const mergedOptions = deepAssign({}, getDefaultOptions(defaultTheme.typography.pxToRem), modeOptions, dense ? defaultDenseOptions : {}, overrides);
     const createdTheme = createMuiTheme(mergedOptions);
     return overrideTheme(createdTheme, getOverrides(createdTheme));
 }