@superdispatch/ui 0.40.1 → 0.41.0

package/dist-src/theme/ThemeProvider.js

@@ -1,6 +1,8 @@
 import { createGenerateClassName, createTheme, CssBaseline } from '@material-ui/core';
 import createBreakpoints from '@material-ui/core/styles/createBreakpoints';
 import { StylesProvider, ThemeProvider as MaterialThemeProvider } from '@material-ui/styles';
+import { createTheme as createMaterialV5Theme, ThemeProvider as MaterialV5ThemeProvider } from '@mui/material/styles';
+import { StylesProvider as MaterialV5StylesProvider } from '@mui/styles';
 import { useMemo } from 'react';
 import { ThemeProvider as StyledThemeProvider } from 'styled-components';
 import { overrideAppBar } from "../app-bar/AppBarOverrides.js";
@@ -97,6 +99,41 @@ function createSuperDispatchTheme(type) {
   overridePreloader(theme);
   return theme;
 }
+function createThemeV5(type) {
+  var breakpoints = createBreakpoints({});
+  var color = type === 'dark' ? ColorDark : Color;
+  return createMaterialV5Theme({
+    breakpoints,
+    palette: {
+      mode: type,
+      primary: {
+        main: color.Blue300
+      },
+      error: {
+        main: color.Red300
+      },
+      action: {
+        hover: color.Silver200,
+        selected: color.Blue50,
+        disabled: color.Silver400
+      },
+      text: {
+        primary: color.Dark500,
+        secondary: color.Dark300,
+        disabled: color.Dark100
+      },
+      common: {
+        white: color.White,
+        black: color.Black
+      },
+      divider: color.Silver400,
+      background: {
+        paper: color.White
+      }
+    },
+    components: {}
+  });
+}
 var generateMaterialClassName = /*#__PURE__*/createGenerateClassName();
 function generateClassName(rule, sheet) {
   var {
@@ -134,19 +171,27 @@ export function ThemeProvider(_ref) {
     return !modifier ? nextTheme : modifier(nextTheme);
     // eslint-disable-next-line react-hooks/exhaustive-deps -- modifier may update on every render
   }, [mode]);
+  var themeV5 = createThemeV5(mode);
   return /*#__PURE__*/_jsx(StylesProvider, {
     injectFirst: injectFirst,
     generateClassName: generateClassName,
-    children: /*#__PURE__*/_jsxs(MaterialThemeProvider, {
-      theme: theme,
-      children: [/*#__PURE__*/_jsx(CssBaseline, {}), /*#__PURE__*/_jsxs(StyledThemeProvider, {
+    children: /*#__PURE__*/_jsx(MaterialV5StylesProvider, {
+      injectFirst: injectFirst,
+      generateClassName: generateClassName,
+      children: /*#__PURE__*/_jsx(MaterialThemeProvider, {
         theme: theme,
-        children: [/*#__PURE__*/_jsx(GlobalStyles, {}), /*#__PURE__*/_jsx(ResponsiveContextProvider, {
-          children: /*#__PURE__*/_jsx(SnackbarStackProvider, {
-            children: children
-          })
-        })]
-      })]
+        children: /*#__PURE__*/_jsxs(MaterialV5ThemeProvider, {
+          theme: themeV5,
+          children: [/*#__PURE__*/_jsx(CssBaseline, {}), /*#__PURE__*/_jsxs(StyledThemeProvider, {
+            theme: theme,
+            children: [/*#__PURE__*/_jsx(GlobalStyles, {}), /*#__PURE__*/_jsx(ResponsiveContextProvider, {
+              children: /*#__PURE__*/_jsx(SnackbarStackProvider, {
+                children: children
+              })
+            })]
+          })]
+        })
+      })
     })
   });
 }

package/dist-src/tooltip/TooltipOverrides.js

@@ -1,17 +1,11 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import { Color, ColorDark } from "../theme/Color.js";
+import { ColorDynamic } from "../theme/Color.js";
 export function overrideTooltip(theme) {
-  var mode = theme.palette.type;
-  var color = mode === 'dark' ? ColorDark.Silver400 : Color.Dark500;
-  theme.props.MuiTooltip = {
-    arrow: true
-  };
   theme.overrides.MuiTooltip = {
     tooltip: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
       padding: theme.spacing(1, 1.5),
-      backgroundColor: color,
-      color: Color.White,
-      '--sd-dark-300': Color.Silver500 //tooltip secondary color(Dark300) is invisible in light mode
+      backgroundColor: ColorDynamic.Dark500,
+      '--sd-dark-300': ColorDynamic.Silver500 //tooltip secondary color(Dark300) is invisible in dark mode
     }),
     popperArrow: {
       '&[x-placement*="top"] $arrow': {
@@ -36,7 +30,7 @@ export function overrideTooltip(theme) {
       }
     },
     arrow: {
-      color,
+      color: ColorDynamic.Silver500,
       fontSize: theme.spacing(1)
     }
   };

package/dist-types/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ButtonProps as ButtonProps$1, ToolbarProps, AvatarClassKey, AvatarTypeMap, ButtonBaseProps, CheckboxProps, FormControlLabelProps, FormControlProps, FormGroupProps, FormLabelProps, FormHelperTextProps, TypographyProps, TooltipProps, ListProps, ListTypeMap, MenuListProps, ButtonGroupProps, GridProps, CardClassKey, CardProps, CardContentProps, IconButtonProps, StandardTextFieldProps, InputProps, RadioProps, RadioGroupProps, SnackbarContentProps as SnackbarContentProps$1, SnackbarContentClassKey as SnackbarContentClassKey$1, SnackbarProps as SnackbarProps$1, Theme } from '@material-ui/core';
+import { ButtonProps as ButtonProps$1, ToolbarProps, AvatarClassKey, AvatarTypeMap, ButtonBaseProps, CheckboxProps, FormControlLabelProps, FormControlProps, FormGroupProps, FormLabelProps, FormHelperTextProps, TypographyProps, TooltipProps, ListProps, ListTypeMap, MenuListProps, ButtonGroupProps, GridProps, CardClassKey, CardProps, CardContentProps, IconButtonProps, StandardTextFieldProps, InputProps, RadioProps, RadioGroupProps, SnackbarContentProps as SnackbarContentProps$1, SnackbarContentClassKey as SnackbarContentClassKey$1, SnackbarProps as SnackbarProps$1, Theme as Theme$1 } from '@material-ui/core';
 import { RefAttributes, ForwardRefExoticComponent, Key, ReactNode, MouseEvent, ReactElement, EventHandler, ButtonHTMLAttributes, Ref, ElementType, HTMLAttributes, ImgHTMLAttributes, InputHTMLAttributes, ConsumerProps } from 'react';
 import { ClassNameMap } from '@material-ui/styles';
 import { Property } from 'csstype';
@@ -7,6 +7,7 @@ import { CommonProps } from '@material-ui/core/OverridableComponent';
 import { NumericFormatProps, PatternFormatProps } from 'react-number-format';
 import { Breakpoint } from '@material-ui/core/styles/createBreakpoints';
 import { SkeletonClassKey } from '@material-ui/lab';
+import { Theme } from '@mui/material/styles';
 
 interface ButtonProps extends RefAttributes<HTMLButtonElement>, Omit<ButtonProps$1, 'color'> {
     rel?: string;
@@ -730,12 +731,16 @@ declare function isColorProp(name: unknown): name is ColorProp;
 declare function isColorDynamicProp(name: unknown): name is ColorDynamicProp;
 declare function isColorPropDark(name: unknown): name is ColorDarkProp;
 
+declare module '@mui/styles/defaultTheme' {
+    type DefaultTheme = Theme;
+}
 declare module '@material-ui/core/styles/overrides' {
     interface ComponentNameToClassKey {
         MuiSkeleton: SkeletonClassKey;
     }
 }
-declare type SuperDispatchTheme = Readonly<Required<Theme>>;
+declare type DefaultTheme = Theme;
+declare type SuperDispatchTheme = Readonly<Required<Theme$1>>;
 
 interface ThemeProviderProps {
     children?: ReactNode;
@@ -790,4 +795,4 @@ interface VisibilityObserverProps extends VisibilityObserverOptions {
 }
 declare function VisibilityObserver({ render, onChange, ...options }: VisibilityObserverProps): null | ReactElement;
 
-export { AdaptiveToolbar, AdaptiveToolbarDropdownItem, AdaptiveToolbarItem, AdaptiveToolbarProps, AdaptiveVerticalToolbar, AdaptiveVerticalToolbarItem, AdaptiveVerticalToolbarProps, AvatarButton, AvatarButtonClassKey, AvatarButtonProps, Button, ButtonProps, CardButton, CardButtonClassKey, CardButtonProps, CheckboxField, CheckboxFieldProps, CheckboxGroupField, CheckboxGroupFieldProps, CollapseBreakpoint, CollapseProp, Color, ColorDark, ColorDarkProp, ColorDynamic, ColorDynamicProp, ColorProp, ColorVariant, Column, ColumnProps, ColumnWidth, Columns, ColumnsProps, DescriptionList, DescriptionListItem, DescriptionListItemProps, DescriptionListProps, DrawerActions, DrawerActionsProps, DrawerContent, DrawerContentProps, DrawerList, DrawerListProps, DrawerTitle, DrawerTitleProps, DropdownButton, ElementVisibility, ExitTransitionPlaceholder, GridStack, GridStackProps, HorizontalAlign, Image, InfoCard, InfoCardClassKey, InfoCardProps, InfoTooltip, Inline, InlineGrid, InlineGridProps, InlineProps, LightDark, MinBreakpoint, NegativeSpaceProp, NumberField, NumberFieldProps, OverflowText, OverflowTextProps, PartialResponsivePropRecord, PatternField, PatternFieldProps, RadioCardItemProps, RadioField, RadioFieldCard, RadioFieldProps, RadioGroupField, RadioGroupFieldProps, ResponsiveContext, ResponsiveContextProvider, ResponsiveContextProviderProps, ResponsiveProp, ResponsivePropPrimitive, ResponsivePropRecord, ResponsivePropTuple, ResponsivePropTupleInit, Snackbar, SnackbarCloseReason, SnackbarContent, SnackbarContentProps, SnackbarProps, SnackbarStack, SnackbarStackConsumer, SnackbarStackOptions, SnackbarStackProvider, SnackbarStackProviderProps, SnackbarVariant, SpaceProp, Stack, StackProps, SuperDispatchTheme, Tag, TagClassKey, TagProps, ThemeProvider, ThemeProviderProps, Tiles, TilesColumns, TilesProps, TilesSpace, VerticalAlign, VisibilityObserver, VisibilityObserverOptions, VisibilityObserverProps, VisibilityObserverRenderProps, assignRef, isColorDynamicProp, isColorProp, isColorPropDark, isEmptyReactNode, mergeRefs, parseAlignProp, parseCollapsedBelow, parseResponsiveProp, parseSpaceProp, renderChildren, useCollapseBreakpoint, useMinBreakpoint, useResizeObserver, useResponsiveContext, useResponsiveProp, useResponsivePropRecord, useResponsiveValue, useSnackbarStack, useUID, useVisibilityObserver };
+export { AdaptiveToolbar, AdaptiveToolbarDropdownItem, AdaptiveToolbarItem, AdaptiveToolbarProps, AdaptiveVerticalToolbar, AdaptiveVerticalToolbarItem, AdaptiveVerticalToolbarProps, AvatarButton, AvatarButtonClassKey, AvatarButtonProps, Button, ButtonProps, CardButton, CardButtonClassKey, CardButtonProps, CheckboxField, CheckboxFieldProps, CheckboxGroupField, CheckboxGroupFieldProps, CollapseBreakpoint, CollapseProp, Color, ColorDark, ColorDarkProp, ColorDynamic, ColorDynamicProp, ColorProp, ColorVariant, Column, ColumnProps, ColumnWidth, Columns, ColumnsProps, DefaultTheme, DescriptionList, DescriptionListItem, DescriptionListItemProps, DescriptionListProps, DrawerActions, DrawerActionsProps, DrawerContent, DrawerContentProps, DrawerList, DrawerListProps, DrawerTitle, DrawerTitleProps, DropdownButton, ElementVisibility, ExitTransitionPlaceholder, GridStack, GridStackProps, HorizontalAlign, Image, InfoCard, InfoCardClassKey, InfoCardProps, InfoTooltip, Inline, InlineGrid, InlineGridProps, InlineProps, LightDark, MinBreakpoint, NegativeSpaceProp, NumberField, NumberFieldProps, OverflowText, OverflowTextProps, PartialResponsivePropRecord, PatternField, PatternFieldProps, RadioCardItemProps, RadioField, RadioFieldCard, RadioFieldProps, RadioGroupField, RadioGroupFieldProps, ResponsiveContext, ResponsiveContextProvider, ResponsiveContextProviderProps, ResponsiveProp, ResponsivePropPrimitive, ResponsivePropRecord, ResponsivePropTuple, ResponsivePropTupleInit, Snackbar, SnackbarCloseReason, SnackbarContent, SnackbarContentProps, SnackbarProps, SnackbarStack, SnackbarStackConsumer, SnackbarStackOptions, SnackbarStackProvider, SnackbarStackProviderProps, SnackbarVariant, SpaceProp, Stack, StackProps, SuperDispatchTheme, Tag, TagClassKey, TagProps, ThemeProvider, ThemeProviderProps, Tiles, TilesColumns, TilesProps, TilesSpace, VerticalAlign, VisibilityObserver, VisibilityObserverOptions, VisibilityObserverProps, VisibilityObserverRenderProps, assignRef, isColorDynamicProp, isColorProp, isColorPropDark, isEmptyReactNode, mergeRefs, parseAlignProp, parseCollapsedBelow, parseResponsiveProp, parseSpaceProp, renderChildren, useCollapseBreakpoint, useMinBreakpoint, useResizeObserver, useResponsiveContext, useResponsiveProp, useResponsivePropRecord, useResponsiveValue, useSnackbarStack, useUID, useVisibilityObserver };

package/dist-web/index.js

@@ -1,11 +1,11 @@
 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, useTheme, 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 { 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, useTheme, Card as Card$1, CardContent, IconButton, TextField, Radio, RadioGroup, SnackbarContent as SnackbarContent$1, Portal, Snackbar as Snackbar$1, Slide, alpha, CssBaseline, createTheme as createTheme$1, 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';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import styled, { css, createGlobalStyle, ThemeProvider as ThemeProvider$2 } from 'styled-components';
+import styled, { css, createGlobalStyle, ThemeProvider as ThemeProvider$3 } from 'styled-components';
 import { ResizeObserver } from '@juggle/resize-observer';
 import { useEventHandler, useDeepEqualValue, useValueObserver, useDeepEqualMemo } from '@superdispatch/hooks';
 import clsx from 'clsx';
@@ -13,6 +13,8 @@ import flattenChildren from 'react-keyed-flatten-children';
 import { renderChildren as renderChildren$1 } from '@superdispatch/ui';
 import { NumericFormat, PatternFormat } from 'react-number-format';
 import createBreakpoints from '@material-ui/core/styles/createBreakpoints';
+import { createTheme, ThemeProvider as ThemeProvider$2 } from '@mui/material/styles';
+import { StylesProvider as StylesProvider$1 } from '@mui/styles';
 
 var _excluded = ["size", "children", "disabled", "isActive", "isLoading", "color"];
 var Button = /*#__PURE__*/forwardRef((_ref, ref) => {
@@ -3931,17 +3933,11 @@ function overrideToolbar(theme) {
 }
 
 function overrideTooltip(theme) {
-  var mode = theme.palette.type;
-  var color = mode === 'dark' ? ColorDark.Silver400 : Color.Dark500;
-  theme.props.MuiTooltip = {
-    arrow: true
-  };
   theme.overrides.MuiTooltip = {
     tooltip: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
       padding: theme.spacing(1, 1.5),
-      backgroundColor: color,
-      color: Color.White,
-      '--sd-dark-300': Color.Silver500 //tooltip secondary color(Dark300) is invisible in light mode
+      backgroundColor: ColorDynamic.Dark500,
+      '--sd-dark-300': ColorDynamic.Silver500 //tooltip secondary color(Dark300) is invisible in dark mode
     }),
     popperArrow: {
       '&[x-placement*="top"] $arrow': {
@@ -3966,7 +3962,7 @@ function overrideTooltip(theme) {
       }
     },
     arrow: {
-      color,
+      color: ColorDynamic.Silver500,
       fontSize: theme.spacing(1)
     }
   };
@@ -4101,7 +4097,7 @@ var GlobalStyles = /*#__PURE__*/createGlobalStyle(_ref => {
 function createSuperDispatchTheme(type) {
   var breakpoints = createBreakpoints({});
   var color = type === 'dark' ? ColorDark : Color;
-  var theme = createTheme({
+  var theme = createTheme$1({
     breakpoints,
     palette: {
       type,
@@ -4162,6 +4158,41 @@ function createSuperDispatchTheme(type) {
   overridePreloader(theme);
   return theme;
 }
+function createThemeV5(type) {
+  var breakpoints = createBreakpoints({});
+  var color = type === 'dark' ? ColorDark : Color;
+  return createTheme({
+    breakpoints,
+    palette: {
+      mode: type,
+      primary: {
+        main: color.Blue300
+      },
+      error: {
+        main: color.Red300
+      },
+      action: {
+        hover: color.Silver200,
+        selected: color.Blue50,
+        disabled: color.Silver400
+      },
+      text: {
+        primary: color.Dark500,
+        secondary: color.Dark300,
+        disabled: color.Dark100
+      },
+      common: {
+        white: color.White,
+        black: color.Black
+      },
+      divider: color.Silver400,
+      background: {
+        paper: color.White
+      }
+    },
+    components: {}
+  });
+}
 var generateMaterialClassName = /*#__PURE__*/createGenerateClassName();
 function generateClassName(rule, sheet) {
   var {
@@ -4199,19 +4230,27 @@ function ThemeProvider(_ref) {
     return !modifier ? nextTheme : modifier(nextTheme);
     // eslint-disable-next-line react-hooks/exhaustive-deps -- modifier may update on every render
   }, [mode]);
+  var themeV5 = createThemeV5(mode);
   return /*#__PURE__*/jsx(StylesProvider, {
     injectFirst: injectFirst,
     generateClassName: generateClassName,
-    children: /*#__PURE__*/jsxs(ThemeProvider$1, {
-      theme: theme,
-      children: [/*#__PURE__*/jsx(CssBaseline, {}), /*#__PURE__*/jsxs(ThemeProvider$2, {
+    children: /*#__PURE__*/jsx(StylesProvider$1, {
+      injectFirst: injectFirst,
+      generateClassName: generateClassName,
+      children: /*#__PURE__*/jsx(ThemeProvider$1, {
         theme: theme,
-        children: [/*#__PURE__*/jsx(GlobalStyles, {}), /*#__PURE__*/jsx(ResponsiveContextProvider, {
-          children: /*#__PURE__*/jsx(SnackbarStackProvider, {
-            children: children
-          })
-        })]
-      })]
+        children: /*#__PURE__*/jsxs(ThemeProvider$2, {
+          theme: themeV5,
+          children: [/*#__PURE__*/jsx(CssBaseline, {}), /*#__PURE__*/jsxs(ThemeProvider$3, {
+            theme: theme,
+            children: [/*#__PURE__*/jsx(GlobalStyles, {}), /*#__PURE__*/jsx(ResponsiveContextProvider, {
+              children: /*#__PURE__*/jsx(SnackbarStackProvider, {
+                children: children
+              })
+            })]
+          })]
+        })
+      })
     })
   });
 }