@superdispatch/ui 0.32.0 → 0.33.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,9 @@
|
|
|
1
|
-
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
|
2
|
-
var _templateObject;
|
|
3
1
|
import { createGlobalStyle } from 'styled-components';
|
|
4
|
-
import { ColorLightInternal } from "./Color.js";
|
|
5
|
-
export var GlobalStyles = /*#__PURE__*/createGlobalStyle(
|
|
2
|
+
import { ColorDarkInternal, ColorLightInternal } from "./Color.js";
|
|
3
|
+
export var GlobalStyles = /*#__PURE__*/createGlobalStyle(_ref => {
|
|
4
|
+
var {
|
|
5
|
+
theme
|
|
6
|
+
} = _ref;
|
|
7
|
+
var color = theme.palette.type === 'dark' ? ColorDarkInternal : ColorLightInternal;
|
|
8
|
+
return "\n :root{\n --sd-white: ".concat(color.White, ";\n --sd-white-50: ").concat(color.White50, ";\n --sd-white-40: ").concat(color.White40, ";\n --sd-white-20: ").concat(color.White20, ";\n --sd-white-10: ").concat(color.White10, ";\n --sd-white-08: ").concat(color.White08, ";\n --sd-transparent: ").concat(color.Transparent, ";\n\n --sd-black: ").concat(color.Black, ";\n --sd-black-50: ").concat(color.Black50, ";\n --sd-black-20: ").concat(color.Black20, ";\n\n --sd-dark-30: ").concat(color.Dark30, ";\n --sd-blue-30: ").concat(color.Blue30, ";\n --sd-green-30: ").concat(color.Green30, ";\n --sd-red-30: ").concat(color.Red30, ";\n --sd-silver-30: ").concat(color.Silver30, ";\n\n --sd-blue-10: ").concat(color.Blue10, ";\n --sd-red-10: ").concat(color.Red10, ";\n\n /* Legacy Neutral Colors */\n --sd-grey-100: ").concat(color.Grey100, "; /* @deprecated Use Dark100 */\n --sd-grey-200: ").concat(color.Grey200, "; /* @deprecated Use Dark200 */\n --sd-grey-300: ").concat(color.Grey300, "; /* @deprecated Use Dark300 */\n --sd-grey-400: ").concat(color.Grey400, "; /* @deprecated Use Dark400 */\n --sd-grey-450: ").concat(color.Grey450, "; /* @deprecated Use Dark450 */\n --sd-grey-500: ").concat(color.Grey500, "; /* @deprecated Use Dark500 */\n\n --sd-dark-200: ").concat(color.Dark200, "; /* @deprecated */\n --sd-dark-400: ").concat(color.Dark400, "; /* @deprecated */\n --sd-dark-450: ").concat(color.Dark450, "; /* @deprecated */\n\n --sd-silver-100: ").concat(color.Silver100, "; /* @deprecated */\n --sd-silver-300: ").concat(color.Silver300, "; /* @deprecated */\n\n /* Legacy Extended Palette */\n --sd-blue-75: ").concat(color.Blue75, "; /* @deprecated */\n --sd-blue-100: ").concat(color.Blue100, "; /* @deprecated */\n --sd-blue-200: ").concat(color.Blue200, "; /* @deprecated */\n --sd-blue-400: ").concat(color.Blue400, "; /* @deprecated */\n\n --sd-green-75: ").concat(color.Green75, "; /* @deprecated */\n --sd-green-100: ").concat(color.Green100, "; /* @deprecated */\n --sd-green-200: ").concat(color.Green200, "; /* @deprecated */\n --sd-green-400: ").concat(color.Green400, "; /* @deprecated */\n\n --sd-purple-75: ").concat(color.Purple75, "; /* @deprecated */\n --sd-purple-100: ").concat(color.Purple100, "; /* @deprecated */\n --sd-purple-200: ").concat(color.Purple200, "; /* @deprecated */\n --sd-purple-400: ").concat(color.Purple400, "; /* @deprecated */\n\n --sd-red-75: ").concat(color.Red75, "; /* @deprecated */\n --sd-red-100: ").concat(color.Red100, "; /* @deprecated */\n --sd-red-200: ").concat(color.Red200, "; /* @deprecated */\n --sd-red-400: ").concat(color.Red400, "; /* @deprecated */\n\n --sd-teal-75: ").concat(color.Teal75, "; /* @deprecated */\n --sd-teal-100: ").concat(color.Teal100, "; /* @deprecated */\n --sd-teal-200: ").concat(color.Teal200, "; /* @deprecated */\n --sd-teal-400: ").concat(color.Teal400, "; /* @deprecated */\n\n --sd-yellow-75: ").concat(color.Yellow75, "; /* @deprecated */\n --sd-yellow-100: ").concat(color.Yellow100, "; /* @deprecated */\n --sd-yellow-200: ").concat(color.Yellow200, "; /* @deprecated */\n --sd-yellow-400: ").concat(color.Yellow400, "; /* @deprecated */\n --sd-dark-50: ").concat(color.Dark50, ";\n /* extended palette */\n \n --sd-blue-50: ").concat(color.Blue50, ";\n --sd-blue-500: ").concat(color.Blue500, ";\n --sd-blue-300: ").concat(color.Blue300, ";\n --sd-green-300: ").concat(color.Green300, ";\n --sd-green-500: ").concat(color.Green500, ";\n --sd-green-50: ").concat(color.Green50, ";\n --sd-yellow-300: ").concat(color.Yellow300, ";\n --sd-yellow-500: ").concat(color.Yellow500, ";\n --sd-yellow-50: ").concat(color.Yellow50, ";\n --sd-red-300: ").concat(color.Red300, ";\n --sd-red-500: ").concat(color.Red500, ";\n --sd-red-50: ").concat(color.Red50, ";\n --sd-purple-300: ").concat(color.Purple300, ";\n --sd-purple-500: ").concat(color.Purple500, ";\n --sd-purple-50: ").concat(color.Purple50, ";\n --sd-teal-300: ").concat(color.Teal300, ";\n --sd-teal-500: ").concat(color.Teal500, ";\n --sd-teal-50: ").concat(color.Teal50, ";\n --sd-silver-500: ").concat(color.Silver500, ";\n --sd-silver-200: ").concat(color.Silver200, ";\n --sd-silver-400: ").concat(color.Silver400, ";\n --sd-dark-100: ").concat(color.Dark100, ";\n --sd-dark-300: ").concat(color.Dark300, ";\n --sd-dark-500: ").concat(color.Dark500, ";\n }\n ");
|
|
9
|
+
});
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { createGenerateClassName, createTheme, CssBaseline } from '@material-ui/core';
|
|
2
2
|
import createBreakpoints from '@material-ui/core/styles/createBreakpoints';
|
|
3
3
|
import { StylesProvider, ThemeProvider as MaterialThemeProvider } from '@material-ui/styles';
|
|
4
|
-
import {
|
|
4
|
+
import { useMemo } from 'react';
|
|
5
5
|
import { ThemeProvider as StyledThemeProvider } from 'styled-components';
|
|
6
6
|
import { overrideAppBar } from "../app-bar/AppBarOverrides.js";
|
|
7
7
|
import { overrideAutocomplete } from "../autocomplete/AutocompleteOverrides.js";
|
|
@@ -33,11 +33,12 @@ import { createTypographyOptions, overrideTypography } from "../typography/Typog
|
|
|
33
33
|
import { Color } from "./Color.js";
|
|
34
34
|
import { GlobalStyles } from "./GlobalStyles.js";
|
|
35
35
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
36
|
-
function createSuperDispatchTheme() {
|
|
36
|
+
function createSuperDispatchTheme(type) {
|
|
37
37
|
var breakpoints = createBreakpoints({});
|
|
38
38
|
var theme = createTheme({
|
|
39
39
|
breakpoints,
|
|
40
40
|
palette: {
|
|
41
|
+
type,
|
|
41
42
|
primary: {
|
|
42
43
|
main: Color.Blue300
|
|
43
44
|
},
|
|
@@ -117,12 +118,14 @@ export function ThemeProvider(_ref) {
|
|
|
117
118
|
var {
|
|
118
119
|
modifier,
|
|
119
120
|
children,
|
|
121
|
+
mode,
|
|
120
122
|
injectFirst = true
|
|
121
123
|
} = _ref;
|
|
122
|
-
var theme =
|
|
123
|
-
var nextTheme = createSuperDispatchTheme();
|
|
124
|
+
var theme = useMemo(() => {
|
|
125
|
+
var nextTheme = createSuperDispatchTheme(mode);
|
|
124
126
|
return !modifier ? nextTheme : modifier(nextTheme);
|
|
125
|
-
|
|
127
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps -- modifier may update on every render
|
|
128
|
+
}, [mode]);
|
|
126
129
|
return /*#__PURE__*/_jsx(StylesProvider, {
|
|
127
130
|
injectFirst: injectFirst,
|
|
128
131
|
generateClassName: generateClassName,
|
package/dist-types/index.d.ts
CHANGED
|
@@ -832,10 +832,11 @@ declare type SuperDispatchTheme = Readonly<Required<Theme>>;
|
|
|
832
832
|
|
|
833
833
|
interface ThemeProviderProps {
|
|
834
834
|
children?: ReactNode;
|
|
835
|
+
mode?: 'dark' | 'light';
|
|
835
836
|
injectFirst?: boolean;
|
|
836
837
|
modifier?: (theme: SuperDispatchTheme) => SuperDispatchTheme;
|
|
837
838
|
}
|
|
838
|
-
declare function ThemeProvider({ modifier, children, injectFirst, }: ThemeProviderProps): ReactElement;
|
|
839
|
+
declare function ThemeProvider({ modifier, children, mode, injectFirst, }: ThemeProviderProps): ReactElement;
|
|
839
840
|
|
|
840
841
|
declare type TilesSpace = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
|
|
841
842
|
declare type TilesColumns = 1 | 2 | 3 | 4 | 5 | 6;
|
package/dist-web/index.js
CHANGED
|
@@ -7,12 +7,11 @@ import { forwardRef, useState, useRef, useLayoutEffect, cloneElement, useMemo, u
|
|
|
7
7
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
8
8
|
import styled, { css, createGlobalStyle, ThemeProvider as ThemeProvider$2 } from 'styled-components';
|
|
9
9
|
import { ResizeObserver } from '@juggle/resize-observer';
|
|
10
|
-
import { useEventHandler, useDeepEqualValue, useValueObserver, useDeepEqualMemo
|
|
10
|
+
import { useEventHandler, useDeepEqualValue, useValueObserver, useDeepEqualMemo } from '@superdispatch/hooks';
|
|
11
11
|
import clsx from 'clsx';
|
|
12
12
|
import flattenChildren from 'react-keyed-flatten-children';
|
|
13
13
|
import { NumericFormat, PatternFormat } from 'react-number-format';
|
|
14
14
|
import createBreakpoints from '@material-ui/core/styles/createBreakpoints';
|
|
15
|
-
import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
|
|
16
15
|
|
|
17
16
|
var _excluded = ["size", "children", "disabled", "isActive", "isLoading", "color"];
|
|
18
17
|
var Button = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
@@ -4088,14 +4087,20 @@ function overrideTypography(theme) {
|
|
|
4088
4087
|
};
|
|
4089
4088
|
}
|
|
4090
4089
|
|
|
4091
|
-
var
|
|
4092
|
-
var
|
|
4090
|
+
var GlobalStyles = /*#__PURE__*/createGlobalStyle(_ref => {
|
|
4091
|
+
var {
|
|
4092
|
+
theme
|
|
4093
|
+
} = _ref;
|
|
4094
|
+
var color = theme.palette.type === 'dark' ? ColorDarkInternal : ColorLightInternal;
|
|
4095
|
+
return "\n :root{\n --sd-white: ".concat(color.White, ";\n --sd-white-50: ").concat(color.White50, ";\n --sd-white-40: ").concat(color.White40, ";\n --sd-white-20: ").concat(color.White20, ";\n --sd-white-10: ").concat(color.White10, ";\n --sd-white-08: ").concat(color.White08, ";\n --sd-transparent: ").concat(color.Transparent, ";\n\n --sd-black: ").concat(color.Black, ";\n --sd-black-50: ").concat(color.Black50, ";\n --sd-black-20: ").concat(color.Black20, ";\n\n --sd-dark-30: ").concat(color.Dark30, ";\n --sd-blue-30: ").concat(color.Blue30, ";\n --sd-green-30: ").concat(color.Green30, ";\n --sd-red-30: ").concat(color.Red30, ";\n --sd-silver-30: ").concat(color.Silver30, ";\n\n --sd-blue-10: ").concat(color.Blue10, ";\n --sd-red-10: ").concat(color.Red10, ";\n\n /* Legacy Neutral Colors */\n --sd-grey-100: ").concat(color.Grey100, "; /* @deprecated Use Dark100 */\n --sd-grey-200: ").concat(color.Grey200, "; /* @deprecated Use Dark200 */\n --sd-grey-300: ").concat(color.Grey300, "; /* @deprecated Use Dark300 */\n --sd-grey-400: ").concat(color.Grey400, "; /* @deprecated Use Dark400 */\n --sd-grey-450: ").concat(color.Grey450, "; /* @deprecated Use Dark450 */\n --sd-grey-500: ").concat(color.Grey500, "; /* @deprecated Use Dark500 */\n\n --sd-dark-200: ").concat(color.Dark200, "; /* @deprecated */\n --sd-dark-400: ").concat(color.Dark400, "; /* @deprecated */\n --sd-dark-450: ").concat(color.Dark450, "; /* @deprecated */\n\n --sd-silver-100: ").concat(color.Silver100, "; /* @deprecated */\n --sd-silver-300: ").concat(color.Silver300, "; /* @deprecated */\n\n /* Legacy Extended Palette */\n --sd-blue-75: ").concat(color.Blue75, "; /* @deprecated */\n --sd-blue-100: ").concat(color.Blue100, "; /* @deprecated */\n --sd-blue-200: ").concat(color.Blue200, "; /* @deprecated */\n --sd-blue-400: ").concat(color.Blue400, "; /* @deprecated */\n\n --sd-green-75: ").concat(color.Green75, "; /* @deprecated */\n --sd-green-100: ").concat(color.Green100, "; /* @deprecated */\n --sd-green-200: ").concat(color.Green200, "; /* @deprecated */\n --sd-green-400: ").concat(color.Green400, "; /* @deprecated */\n\n --sd-purple-75: ").concat(color.Purple75, "; /* @deprecated */\n --sd-purple-100: ").concat(color.Purple100, "; /* @deprecated */\n --sd-purple-200: ").concat(color.Purple200, "; /* @deprecated */\n --sd-purple-400: ").concat(color.Purple400, "; /* @deprecated */\n\n --sd-red-75: ").concat(color.Red75, "; /* @deprecated */\n --sd-red-100: ").concat(color.Red100, "; /* @deprecated */\n --sd-red-200: ").concat(color.Red200, "; /* @deprecated */\n --sd-red-400: ").concat(color.Red400, "; /* @deprecated */\n\n --sd-teal-75: ").concat(color.Teal75, "; /* @deprecated */\n --sd-teal-100: ").concat(color.Teal100, "; /* @deprecated */\n --sd-teal-200: ").concat(color.Teal200, "; /* @deprecated */\n --sd-teal-400: ").concat(color.Teal400, "; /* @deprecated */\n\n --sd-yellow-75: ").concat(color.Yellow75, "; /* @deprecated */\n --sd-yellow-100: ").concat(color.Yellow100, "; /* @deprecated */\n --sd-yellow-200: ").concat(color.Yellow200, "; /* @deprecated */\n --sd-yellow-400: ").concat(color.Yellow400, "; /* @deprecated */\n --sd-dark-50: ").concat(color.Dark50, ";\n /* extended palette */\n \n --sd-blue-50: ").concat(color.Blue50, ";\n --sd-blue-500: ").concat(color.Blue500, ";\n --sd-blue-300: ").concat(color.Blue300, ";\n --sd-green-300: ").concat(color.Green300, ";\n --sd-green-500: ").concat(color.Green500, ";\n --sd-green-50: ").concat(color.Green50, ";\n --sd-yellow-300: ").concat(color.Yellow300, ";\n --sd-yellow-500: ").concat(color.Yellow500, ";\n --sd-yellow-50: ").concat(color.Yellow50, ";\n --sd-red-300: ").concat(color.Red300, ";\n --sd-red-500: ").concat(color.Red500, ";\n --sd-red-50: ").concat(color.Red50, ";\n --sd-purple-300: ").concat(color.Purple300, ";\n --sd-purple-500: ").concat(color.Purple500, ";\n --sd-purple-50: ").concat(color.Purple50, ";\n --sd-teal-300: ").concat(color.Teal300, ";\n --sd-teal-500: ").concat(color.Teal500, ";\n --sd-teal-50: ").concat(color.Teal50, ";\n --sd-silver-500: ").concat(color.Silver500, ";\n --sd-silver-200: ").concat(color.Silver200, ";\n --sd-silver-400: ").concat(color.Silver400, ";\n --sd-dark-100: ").concat(color.Dark100, ";\n --sd-dark-300: ").concat(color.Dark300, ";\n --sd-dark-500: ").concat(color.Dark500, ";\n }\n ");
|
|
4096
|
+
});
|
|
4093
4097
|
|
|
4094
|
-
function createSuperDispatchTheme() {
|
|
4098
|
+
function createSuperDispatchTheme(type) {
|
|
4095
4099
|
var breakpoints = createBreakpoints({});
|
|
4096
4100
|
var theme = createTheme({
|
|
4097
4101
|
breakpoints,
|
|
4098
4102
|
palette: {
|
|
4103
|
+
type,
|
|
4099
4104
|
primary: {
|
|
4100
4105
|
main: Color.Blue300
|
|
4101
4106
|
},
|
|
@@ -4175,12 +4180,14 @@ function ThemeProvider(_ref) {
|
|
|
4175
4180
|
var {
|
|
4176
4181
|
modifier,
|
|
4177
4182
|
children,
|
|
4183
|
+
mode,
|
|
4178
4184
|
injectFirst = true
|
|
4179
4185
|
} = _ref;
|
|
4180
|
-
var theme =
|
|
4181
|
-
var nextTheme = createSuperDispatchTheme();
|
|
4186
|
+
var theme = useMemo(() => {
|
|
4187
|
+
var nextTheme = createSuperDispatchTheme(mode);
|
|
4182
4188
|
return !modifier ? nextTheme : modifier(nextTheme);
|
|
4183
|
-
|
|
4189
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps -- modifier may update on every render
|
|
4190
|
+
}, [mode]);
|
|
4184
4191
|
return /*#__PURE__*/jsx(StylesProvider, {
|
|
4185
4192
|
injectFirst: injectFirst,
|
|
4186
4193
|
generateClassName: generateClassName,
|