@superdispatch/ui 0.36.0 → 0.38.0

package/dist-src/checkbox/CheckboxField.js

@@ -1,6 +1,6 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["label", "error", "checked", "onBlur", "onChange", "helperText", "FormControlLabelProps"];
+var _excluded = ["label", "error", "checked", "onBlur", "onChange", "helperText", "FormControlProps", "FormControlLabelProps"];
 import { Checkbox, FormControl as FormControlMui, FormControlLabel, FormHelperText as FormHelperTextMui } from '@material-ui/core';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
@@ -22,11 +22,13 @@ export var CheckboxField = /*#__PURE__*/forwardRef((_ref, ref) => {
       onBlur,
       onChange,
       helperText,
+      FormControlProps: formControlProps,
       FormControlLabelProps: formControlLabelProps
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/_jsxs(FormControl, {
-    error: error,
+  return /*#__PURE__*/_jsxs(FormControl, _objectSpread(_objectSpread({
+    error: error
+  }, formControlProps), {}, {
     children: [/*#__PURE__*/_jsx(FormControlLabel, _objectSpread(_objectSpread({}, formControlLabelProps), {}, {
       label: label,
       checked: checked,
@@ -39,6 +41,6 @@ export var CheckboxField = /*#__PURE__*/forwardRef((_ref, ref) => {
     })), helperText && /*#__PURE__*/_jsx(FormHelperText, {
       children: helperText
     })]
-  });
+  }));
 });
 if (process.env.NODE_ENV !== "production") CheckboxField.displayName = "CheckboxField";

package/dist-src/list/ListOverrides.js

@@ -1,5 +1,7 @@
-import { ColorDynamic } from "../theme/Color.js";
+import { alpha } from '@material-ui/core';
+import { Color, ColorDynamic } from "../theme/Color.js";
 export function overrideList(theme) {
+  var color = theme.palette.type === 'dark' ? alpha(Color.White, 0.08) : ColorDynamic.Silver200;
   theme.overrides.MuiListItem = {
     root: {
       '&$selected, &$selected:hover': {
@@ -8,6 +10,11 @@ export function overrideList(theme) {
       '& .MuiTouchRipple-root': {
         color: ColorDynamic.Blue100
       }
+    },
+    button: {
+      '&:hover': {
+        backgroundColor: color
+      }
     }
   };
 }

package/dist-src/menu/MenuOverrides.js

@@ -1,6 +1,8 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import { ColorDynamic } from "../theme/Color.js";
+import { alpha } from '@material-ui/core';
+import { Color, ColorDynamic } from "../theme/Color.js";
 export function overrideMenu(theme) {
+  var color = theme.palette.type === 'dark' ? alpha(Color.White, 0.08) : ColorDynamic.Silver200;
   theme.props.MuiMenu = {
     getContentAnchorEl: null,
     anchorOrigin: {
@@ -20,7 +22,10 @@ export function overrideMenu(theme) {
   theme.overrides.MuiMenuItem = {
     root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
       paddingTop: theme.spacing(1),
-      paddingBottom: theme.spacing(1)
+      paddingBottom: theme.spacing(1),
+      '&:hover': {
+        backgroundColor: color
+      }
     })
   };
 }

package/dist-src/pagination/PaginationOverrides.js

@@ -1,13 +1,16 @@
-import { ColorDynamic } from "../theme/Color.js";
+import { alpha } from '@material-ui/core';
+import { Color, ColorDynamic } from "../theme/Color.js";
 export function overridePagination(theme) {
   var props = {};
+  var mode = theme.palette.type;
+  var color = mode === 'dark' ? alpha(Color.White, 0.08) : ColorDynamic.Silver200;
   var overrides = {
     root: {
       color: ColorDynamic.Dark500
     },
     page: {
       '&:hover': {
-        backgroundColor: ColorDynamic.Silver200
+        backgroundColor: color
       },
       '&$focusVisible': {
         borderRadius: 4,

package/dist-src/radio/RadioField.js

@@ -1,6 +1,6 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["label", "error", "checked", "onBlur", "onChange", "helperText", "FormControlLabelProps"];
+var _excluded = ["label", "error", "checked", "onBlur", "onChange", "helperText", "FormControlProps", "FormControlLabelProps"];
 import { FormControl as FormControlMui, FormControlLabel, FormHelperText as FormHelperTextMui, Radio } from '@material-ui/core';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
@@ -22,11 +22,13 @@ export var RadioField = /*#__PURE__*/forwardRef((_ref, ref) => {
       onBlur,
       onChange,
       helperText,
+      FormControlProps: formControlProps,
       FormControlLabelProps: formControlLabelProps
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/_jsxs(FormControl, {
-    error: error,
+  return /*#__PURE__*/_jsxs(FormControl, _objectSpread(_objectSpread({
+    error: error
+  }, formControlProps), {}, {
     children: [/*#__PURE__*/_jsx(FormControlLabel, _objectSpread(_objectSpread({}, formControlLabelProps), {}, {
       label: label,
       checked: checked,
@@ -39,6 +41,6 @@ export var RadioField = /*#__PURE__*/forwardRef((_ref, ref) => {
     })), helperText && /*#__PURE__*/_jsx(FormHelperText, {
       children: helperText
     })]
-  });
+  }));
 });
 if (process.env.NODE_ENV !== "production") RadioField.displayName = "RadioField";

package/dist-src/tooltip/TooltipOverrides.js

@@ -7,7 +7,8 @@ export function overrideTooltip(theme) {
   theme.overrides.MuiTooltip = {
     tooltip: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
       padding: theme.spacing(1, 1.5),
-      backgroundColor: ColorDynamic.Dark500
+      backgroundColor: ColorDynamic.Dark500,
+      '--sd-dark-300': ColorDynamic.Silver500 //tooltip secondary color(Dark300) is invisible in dark mode
     }),
     popperArrow: {
       '&[x-placement*="top"] $arrow': {

package/dist-types/index.d.ts

@@ -84,6 +84,7 @@ declare const CardButton: ForwardRefExoticComponent<CardButtonProps>;
 interface CheckboxFieldProps extends CheckboxProps, Pick<FormControlLabelProps, 'label'> {
     error?: boolean;
     helperText?: ReactNode;
+    FormControlProps?: Omit<FormControlProps, 'error'>;
     FormControlLabelProps?: Omit<FormControlLabelProps, 'label' | 'checked' | 'onBlur' | 'onChange' | 'control'>;
 }
 declare const CheckboxField: ForwardRefExoticComponent<CheckboxFieldProps>;
@@ -267,6 +268,7 @@ declare const PatternField: ForwardRefExoticComponent<PatternFieldProps>;
 interface RadioFieldProps extends Omit<RadioProps, 'onBlur' | 'onChange'>, Pick<FormControlLabelProps, 'label' | 'onBlur' | 'onChange'> {
     error?: boolean;
     helperText?: ReactNode;
+    FormControlProps?: Omit<FormControlProps, 'error'>;
     FormControlLabelProps?: Omit<FormControlLabelProps, 'label' | 'error' | 'checked' | 'onBlur' | 'onChange' | 'helperText' | 'control'>;
 }
 declare const RadioField: ForwardRefExoticComponent<RadioFieldProps>;

package/dist-web/index.js

@@ -1,6 +1,6 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { Button as Button$1, CircularProgress, ButtonGroup, Popover, MenuList, Toolbar, Grid, MenuItem, Typography, Menu, Divider, ButtonBase, Avatar, FormHelperText as FormHelperText$4, FormControlLabel as FormControlLabel$1, Checkbox, FormControl as FormControl$2, FormLabel as FormLabel$2, FormGroup, useMediaQuery, Tooltip, SvgIcon, AppBar, List, Card as Card$1, CardContent, IconButton, TextField, Radio, RadioGroup, SnackbarContent as SnackbarContent$1, Portal, Snackbar as Snackbar$1, Slide, CssBaseline, createTheme, createGenerateClassName } from '@material-ui/core';
+import { Button as Button$1, CircularProgress, ButtonGroup, Popover, MenuList, Toolbar, Grid, MenuItem, Typography, Menu, Divider, ButtonBase, Avatar, FormHelperText as FormHelperText$4, FormControlLabel as FormControlLabel$1, Checkbox, FormControl as FormControl$2, FormLabel as FormLabel$2, FormGroup, useMediaQuery, Tooltip, SvgIcon, AppBar, List, Card as Card$1, CardContent, IconButton, TextField, Radio, RadioGroup, SnackbarContent as SnackbarContent$1, Portal, Snackbar as Snackbar$1, Slide, alpha, CssBaseline, createTheme, createGenerateClassName } from '@material-ui/core';
 import { MoreHoriz, Info, Close, Error, CheckCircle } from '@material-ui/icons';
 import { makeStyles, StylesProvider, ThemeProvider as ThemeProvider$1 } from '@material-ui/styles';
 import { forwardRef, useState, useRef, useLayoutEffect, cloneElement, useMemo, useContext, createContext, Children, useCallback, useEffect } from 'react';
@@ -954,7 +954,7 @@ var CardButton = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") CardButton.displayName = "CardButton";
 
-var _excluded$5 = ["label", "error", "checked", "onBlur", "onChange", "helperText", "FormControlLabelProps"];
+var _excluded$5 = ["label", "error", "checked", "onBlur", "onChange", "helperText", "FormControlProps", "FormControlLabelProps"];
 var FormControl = /*#__PURE__*/styled(FormControl$2).withConfig({
   displayName: "CheckboxField__FormControl",
   componentId: "SD__sc-1wxu0g6-0"
@@ -971,11 +971,13 @@ var CheckboxField = /*#__PURE__*/forwardRef((_ref, ref) => {
       onBlur,
       onChange,
       helperText,
+      FormControlProps: formControlProps,
       FormControlLabelProps: formControlLabelProps
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded$5);
-  return /*#__PURE__*/jsxs(FormControl, {
-    error: error,
+  return /*#__PURE__*/jsxs(FormControl, _objectSpread(_objectSpread({
+    error: error
+  }, formControlProps), {}, {
     children: [/*#__PURE__*/jsx(FormControlLabel$1, _objectSpread(_objectSpread({}, formControlLabelProps), {}, {
       label: label,
       checked: checked,
@@ -988,7 +990,7 @@ var CheckboxField = /*#__PURE__*/forwardRef((_ref, ref) => {
     })), helperText && /*#__PURE__*/jsx(FormHelperText, {
       children: helperText
     })]
-  });
+  }));
 });
 if (process.env.NODE_ENV !== "production") CheckboxField.displayName = "CheckboxField";
 
@@ -2020,7 +2022,7 @@ var PatternField = /*#__PURE__*/forwardRef((_ref, ref) => {
 if (process.env.NODE_ENV !== "production") PatternField.displayName = "PatternField";
 PatternField.displayName = 'PatternField';
 
-var _excluded$k = ["label", "error", "checked", "onBlur", "onChange", "helperText", "FormControlLabelProps"];
+var _excluded$k = ["label", "error", "checked", "onBlur", "onChange", "helperText", "FormControlProps", "FormControlLabelProps"];
 var FormControl$1 = /*#__PURE__*/styled(FormControl$2).withConfig({
   displayName: "RadioField__FormControl",
   componentId: "SD__sc-6ey4qt-0"
@@ -2037,11 +2039,13 @@ var RadioField = /*#__PURE__*/forwardRef((_ref, ref) => {
       onBlur,
       onChange,
       helperText,
+      FormControlProps: formControlProps,
       FormControlLabelProps: formControlLabelProps
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded$k);
-  return /*#__PURE__*/jsxs(FormControl$1, {
-    error: error,
+  return /*#__PURE__*/jsxs(FormControl$1, _objectSpread(_objectSpread({
+    error: error
+  }, formControlProps), {}, {
     children: [/*#__PURE__*/jsx(FormControlLabel$1, _objectSpread(_objectSpread({}, formControlLabelProps), {}, {
       label: label,
       checked: checked,
@@ -2054,7 +2058,7 @@ var RadioField = /*#__PURE__*/forwardRef((_ref, ref) => {
     })), helperText && /*#__PURE__*/jsx(FormHelperText$2, {
       children: helperText
     })]
-  });
+  }));
 });
 if (process.env.NODE_ENV !== "production") RadioField.displayName = "RadioField";
 
@@ -3292,6 +3296,7 @@ function overrideLink(theme) {
 }
 
 function overrideList(theme) {
+  var color = theme.palette.type === 'dark' ? alpha(Color.White, 0.08) : ColorDynamic.Silver200;
   theme.overrides.MuiListItem = {
     root: {
       '&$selected, &$selected:hover': {
@@ -3300,11 +3305,17 @@ function overrideList(theme) {
       '& .MuiTouchRipple-root': {
         color: ColorDynamic.Blue100
       }
+    },
+    button: {
+      '&:hover': {
+        backgroundColor: color
+      }
     }
   };
 }
 
 function overrideMenu(theme) {
+  var color = theme.palette.type === 'dark' ? alpha(Color.White, 0.08) : ColorDynamic.Silver200;
   theme.props.MuiMenu = {
     getContentAnchorEl: null,
     anchorOrigin: {
@@ -3324,20 +3335,25 @@ function overrideMenu(theme) {
   theme.overrides.MuiMenuItem = {
     root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
       paddingTop: theme.spacing(1),
-      paddingBottom: theme.spacing(1)
+      paddingBottom: theme.spacing(1),
+      '&:hover': {
+        backgroundColor: color
+      }
     })
   };
 }
 
 function overridePagination(theme) {
   var props = {};
+  var mode = theme.palette.type;
+  var color = mode === 'dark' ? alpha(Color.White, 0.08) : ColorDynamic.Silver200;
   var overrides = {
     root: {
       color: ColorDynamic.Dark500
     },
     page: {
       '&:hover': {
-        backgroundColor: ColorDynamic.Silver200
+        backgroundColor: color
       },
       '&$focusVisible': {
         borderRadius: 4,
@@ -3888,7 +3904,8 @@ function overrideTooltip(theme) {
   theme.overrides.MuiTooltip = {
     tooltip: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
       padding: theme.spacing(1, 1.5),
-      backgroundColor: ColorDynamic.Dark500
+      backgroundColor: ColorDynamic.Dark500,
+      '--sd-dark-300': ColorDynamic.Silver500 //tooltip secondary color(Dark300) is invisible in dark mode
     }),
     popperArrow: {
       '&[x-placement*="top"] $arrow': {