@deephaven/components 0.108.1-alpha-parent-theme.41 → 0.108.1-alpha-parent-theme.45
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.
- package/dist/theme/ThemeProvider.d.ts +2 -1
- package/dist/theme/ThemeProvider.d.ts.map +1 -1
- package/dist/theme/ThemeProvider.js +4 -0
- package/dist/theme/ThemeProvider.js.map +1 -1
- package/dist/theme/useExternalTheme.d.ts.map +1 -1
- package/dist/theme/useExternalTheme.js +12 -12
- package/dist/theme/useExternalTheme.js.map +1 -1
- package/package.json +8 -8
|
@@ -10,9 +10,10 @@ export interface ThemeContextValue {
|
|
|
10
10
|
export declare const ThemeContext: import("react").Context<ThemeContextValue | null>;
|
|
11
11
|
export interface ThemeProviderProps {
|
|
12
12
|
themes: ThemeData[] | null;
|
|
13
|
+
waitForActivation?: boolean;
|
|
13
14
|
defaultPreloadValues?: Record<string, string>;
|
|
14
15
|
children: ReactNode;
|
|
15
16
|
}
|
|
16
|
-
export declare function ThemeProvider({ themes: customThemes, defaultPreloadValues, children, }: ThemeProviderProps): JSX.Element | null;
|
|
17
|
+
export declare function ThemeProvider({ themes: customThemes, waitForActivation, defaultPreloadValues, children, }: ThemeProviderProps): JSX.Element | null;
|
|
17
18
|
export default ThemeProvider;
|
|
18
19
|
//# sourceMappingURL=ThemeProvider.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAkC,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAU9E,OAAO,kBAAkB,CAAC;AAE1B,MAAM,WAAW,iBAAiB;IAChC,YAAY,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;IACjC,gBAAgB,EAAE,MAAM,CAAC;IACzB,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,mBAAmB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AAID,eAAO,MAAM,YAAY,mDAAgD,CAAC;AAE1E,MAAM,WAAW,kBAAkB;IAMjC,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAkC,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAU9E,OAAO,kBAAkB,CAAC;AAE1B,MAAM,WAAW,iBAAiB;IAChC,YAAY,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;IACjC,gBAAgB,EAAE,MAAM,CAAC;IACzB,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,mBAAmB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AAID,eAAO,MAAM,YAAY,mDAAgD,CAAC;AAE1E,MAAM,WAAW,kBAAkB;IAMjC,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;IAU3B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,oBAAoB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9C,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EAAE,YAAY,EACpB,iBAAyB,EACzB,oBAAqD,EACrD,QAAQ,GACT,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAsFzC;AAED,eAAe,aAAa,CAAC"}
|
|
@@ -12,6 +12,7 @@ export var ThemeContext = /*#__PURE__*/createContext(null);
|
|
|
12
12
|
export function ThemeProvider(_ref) {
|
|
13
13
|
var {
|
|
14
14
|
themes: customThemes,
|
|
15
|
+
waitForActivation = false,
|
|
15
16
|
defaultPreloadValues = DEFAULT_PRELOAD_DATA_VARIABLES,
|
|
16
17
|
children
|
|
17
18
|
} = _ref;
|
|
@@ -54,6 +55,9 @@ export function ThemeProvider(_ref) {
|
|
|
54
55
|
setSelectedThemeKey
|
|
55
56
|
});
|
|
56
57
|
}, [activeThemes, selectedThemeKey, themes]);
|
|
58
|
+
if (waitForActivation && activeThemes == null) {
|
|
59
|
+
return null;
|
|
60
|
+
}
|
|
57
61
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
58
62
|
children: [activeThemes == null ? null : /*#__PURE__*/_jsx(_Fragment, {
|
|
59
63
|
children: activeThemes.map(theme => /*#__PURE__*/_jsx("style", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeProvider.js","names":["createContext","useEffect","useMemo","useState","Log","DEFAULT_PRELOAD_DATA_VARIABLES","calculatePreloadStyleContent","getActiveThemes","getDefaultBaseThemes","setThemePreloadData","overrideSVGFillColors","getDefaultSelectedThemeKey","SpectrumThemeProvider","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","log","module","ThemeContext","ThemeProvider","_ref","themes","customThemes","defaultPreloadValues","children","baseThemes","value","setValue","selectedThemeKey","setSelectedThemeKey","activeThemes","base","custom","updateThemePreloadData","preloadStyleContent","debug2","active","map","theme","themeKey","styleContent","Provider"],"sources":["../../src/theme/ThemeProvider.tsx"],"sourcesContent":["import {\n createContext,\n type ReactNode,\n useEffect,\n useMemo,\n useState,\n} from 'react';\nimport Log from '@deephaven/log';\nimport { DEFAULT_PRELOAD_DATA_VARIABLES, type ThemeData } from './ThemeModel';\nimport {\n calculatePreloadStyleContent,\n getActiveThemes,\n getDefaultBaseThemes,\n setThemePreloadData,\n overrideSVGFillColors,\n getDefaultSelectedThemeKey,\n} from './ThemeUtils';\nimport { SpectrumThemeProvider } from './SpectrumThemeProvider';\nimport './theme-svg.scss';\n\nexport interface ThemeContextValue {\n activeThemes: ThemeData[] | null;\n selectedThemeKey: string;\n themes: ThemeData[];\n setSelectedThemeKey: (themeKey: string) => void;\n}\n\nconst log = Log.module('ThemeProvider');\n\nexport const ThemeContext = createContext<ThemeContextValue | null>(null);\n\nexport interface ThemeProviderProps {\n /*\n * Additional themes to load in addition to the base themes. If no additional\n * themes are to be loaded, this must be set to an empty array in order to\n * tell the provider to activate the base themes.\n */\n themes: ThemeData[] | null;\n defaultPreloadValues?: Record<string, string>;\n children: ReactNode;\n}\n\nexport function ThemeProvider({\n themes: customThemes,\n defaultPreloadValues = DEFAULT_PRELOAD_DATA_VARIABLES,\n children,\n}: ThemeProviderProps): JSX.Element | null {\n const baseThemes = useMemo(() => getDefaultBaseThemes(), []);\n\n const [value, setValue] = useState<ThemeContextValue | null>(null);\n\n const [selectedThemeKey, setSelectedThemeKey] = useState<string>(\n getDefaultSelectedThemeKey\n );\n\n // Calculate active themes once a non-null themes array is provided.\n const activeThemes = useMemo(\n () =>\n customThemes == null\n ? null\n : getActiveThemes(selectedThemeKey, {\n base: baseThemes,\n custom: customThemes ?? [],\n }),\n [baseThemes, selectedThemeKey, customThemes]\n );\n\n const themes = useMemo(\n () => [...baseThemes, ...(customThemes ?? [])],\n [baseThemes, customThemes]\n );\n\n useEffect(\n function updateThemePreloadData() {\n // Don't update preload data until themes have been loaded and activated\n if (activeThemes == null || customThemes == null) {\n return;\n }\n\n // Override fill color for certain inline SVGs (the originals are provided\n // by theme-svg.scss)\n overrideSVGFillColors(defaultPreloadValues);\n\n const preloadStyleContent =\n calculatePreloadStyleContent(defaultPreloadValues);\n\n log.debug2('updateThemePreloadData:', {\n active: activeThemes.map(theme => theme.themeKey),\n custom: customThemes.map(theme => theme.themeKey),\n preloadStyleContent,\n selectedThemeKey,\n });\n\n setThemePreloadData({\n themeKey: selectedThemeKey,\n preloadStyleContent,\n });\n },\n [activeThemes, selectedThemeKey, customThemes, defaultPreloadValues]\n );\n\n useEffect(() => {\n setValue({\n activeThemes,\n selectedThemeKey,\n themes,\n setSelectedThemeKey,\n });\n }, [activeThemes, selectedThemeKey, themes]);\n\n return (\n <>\n {activeThemes == null ? null : (\n <>\n {activeThemes.map(theme => (\n <style data-theme-key={theme.themeKey} key={theme.themeKey}>\n {theme.styleContent}\n </style>\n ))}\n </>\n )}\n {value == null ? null : (\n <ThemeContext.Provider value={value}>\n <SpectrumThemeProvider>{children}</SpectrumThemeProvider>\n </ThemeContext.Provider>\n )}\n </>\n );\n}\n\nexport default ThemeProvider;\n"],"mappings":"AAAA,SACEA,aAAa,EAEbC,SAAS,EACTC,OAAO,EACPC,QAAQ,QACH,OAAO;AACd,OAAOC,GAAG,MAAM,gBAAgB;AAAC,SACxBC,8BAA8B;AAAA,SAErCC,4BAA4B,EAC5BC,eAAe,EACfC,oBAAoB,EACpBC,mBAAmB,EACnBC,qBAAqB,EACrBC,0BAA0B;AAAA,SAEnBC,qBAAqB;AAAA;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAU9B,IAAMC,GAAG,GAAGf,GAAG,CAACgB,MAAM,CAAC,eAAe,CAAC;AAEvC,OAAO,IAAMC,YAAY,gBAAGrB,aAAa,CAA2B,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"ThemeProvider.js","names":["createContext","useEffect","useMemo","useState","Log","DEFAULT_PRELOAD_DATA_VARIABLES","calculatePreloadStyleContent","getActiveThemes","getDefaultBaseThemes","setThemePreloadData","overrideSVGFillColors","getDefaultSelectedThemeKey","SpectrumThemeProvider","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","log","module","ThemeContext","ThemeProvider","_ref","themes","customThemes","waitForActivation","defaultPreloadValues","children","baseThemes","value","setValue","selectedThemeKey","setSelectedThemeKey","activeThemes","base","custom","updateThemePreloadData","preloadStyleContent","debug2","active","map","theme","themeKey","styleContent","Provider"],"sources":["../../src/theme/ThemeProvider.tsx"],"sourcesContent":["import {\n createContext,\n type ReactNode,\n useEffect,\n useMemo,\n useState,\n} from 'react';\nimport Log from '@deephaven/log';\nimport { DEFAULT_PRELOAD_DATA_VARIABLES, type ThemeData } from './ThemeModel';\nimport {\n calculatePreloadStyleContent,\n getActiveThemes,\n getDefaultBaseThemes,\n setThemePreloadData,\n overrideSVGFillColors,\n getDefaultSelectedThemeKey,\n} from './ThemeUtils';\nimport { SpectrumThemeProvider } from './SpectrumThemeProvider';\nimport './theme-svg.scss';\n\nexport interface ThemeContextValue {\n activeThemes: ThemeData[] | null;\n selectedThemeKey: string;\n themes: ThemeData[];\n setSelectedThemeKey: (themeKey: string) => void;\n}\n\nconst log = Log.module('ThemeProvider');\n\nexport const ThemeContext = createContext<ThemeContextValue | null>(null);\n\nexport interface ThemeProviderProps {\n /*\n * Additional themes to load in addition to the base themes. If no additional\n * themes are to be loaded, this must be set to an empty array in order to\n * tell the provider to activate the base themes.\n */\n themes: ThemeData[] | null;\n // In DHC web, custom themes are typically loaded from plugins. Since these\n // get loaded after login, we have to be able to render the children containing\n // the `Login` component before themes are activated. This means that `children`\n // get loaded before all styles are available. In cases where themes don't require\n // children to be rendered such as external themes requested from a parent Window,\n // we can defer the rendering of children until the themes are activated which\n // is less likely to render initial content with the wrong theme. We can get\n // rid of this prop if we ever find a way to load themes without depending on\n // children. See https://deephaven.atlassian.net/browse/DH-19400\n waitForActivation?: boolean;\n defaultPreloadValues?: Record<string, string>;\n children: ReactNode;\n}\n\nexport function ThemeProvider({\n themes: customThemes,\n waitForActivation = false,\n defaultPreloadValues = DEFAULT_PRELOAD_DATA_VARIABLES,\n children,\n}: ThemeProviderProps): JSX.Element | null {\n const baseThemes = useMemo(() => getDefaultBaseThemes(), []);\n\n const [value, setValue] = useState<ThemeContextValue | null>(null);\n\n const [selectedThemeKey, setSelectedThemeKey] = useState<string>(\n getDefaultSelectedThemeKey\n );\n\n // Calculate active themes once a non-null themes array is provided.\n const activeThemes = useMemo(\n () =>\n customThemes == null\n ? null\n : getActiveThemes(selectedThemeKey, {\n base: baseThemes,\n custom: customThemes ?? [],\n }),\n [baseThemes, selectedThemeKey, customThemes]\n );\n\n const themes = useMemo(\n () => [...baseThemes, ...(customThemes ?? [])],\n [baseThemes, customThemes]\n );\n\n useEffect(\n function updateThemePreloadData() {\n // Don't update preload data until themes have been loaded and activated\n if (activeThemes == null || customThemes == null) {\n return;\n }\n\n // Override fill color for certain inline SVGs (the originals are provided\n // by theme-svg.scss)\n overrideSVGFillColors(defaultPreloadValues);\n\n const preloadStyleContent =\n calculatePreloadStyleContent(defaultPreloadValues);\n\n log.debug2('updateThemePreloadData:', {\n active: activeThemes.map(theme => theme.themeKey),\n custom: customThemes.map(theme => theme.themeKey),\n preloadStyleContent,\n selectedThemeKey,\n });\n\n setThemePreloadData({\n themeKey: selectedThemeKey,\n preloadStyleContent,\n });\n },\n [activeThemes, selectedThemeKey, customThemes, defaultPreloadValues]\n );\n\n useEffect(() => {\n setValue({\n activeThemes,\n selectedThemeKey,\n themes,\n setSelectedThemeKey,\n });\n }, [activeThemes, selectedThemeKey, themes]);\n\n if (waitForActivation && activeThemes == null) {\n return null;\n }\n\n return (\n <>\n {activeThemes == null ? null : (\n <>\n {activeThemes.map(theme => (\n <style data-theme-key={theme.themeKey} key={theme.themeKey}>\n {theme.styleContent}\n </style>\n ))}\n </>\n )}\n {value == null ? null : (\n <ThemeContext.Provider value={value}>\n <SpectrumThemeProvider>{children}</SpectrumThemeProvider>\n </ThemeContext.Provider>\n )}\n </>\n );\n}\n\nexport default ThemeProvider;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useExternalTheme.d.ts","sourceRoot":"","sources":["../../src/theme/useExternalTheme.ts"],"names":[],"mappings":"AAGA,OAAO,EAGL,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAStB,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,IAAI,sBAAsB,
|
|
1
|
+
{"version":3,"file":"useExternalTheme.d.ts","sourceRoot":"","sources":["../../src/theme/useExternalTheme.ts"],"names":[],"mappings":"AAGA,OAAO,EAGL,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAStB,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,IAAI,sBAAsB,CA8DzD;AAED,eAAe,gBAAgB,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useEffect, useState } from 'react';
|
|
1
|
+
import { useCallback, useEffect, useState } from 'react';
|
|
2
2
|
import Log from '@deephaven/log';
|
|
3
3
|
import { getWindowParent } from '@deephaven/utils';
|
|
4
4
|
import { MSG_REQUEST_SET_THEME } from "./ThemeModel.js";
|
|
@@ -18,22 +18,22 @@ export function useExternalTheme() {
|
|
|
18
18
|
isPending: isEnabled
|
|
19
19
|
};
|
|
20
20
|
});
|
|
21
|
+
|
|
22
|
+
/** Parse external theme data and update the result */
|
|
23
|
+
var handleExternalThemeData = useCallback(externalThemeData => {
|
|
24
|
+
var themeData = parseExternalThemeData(externalThemeData);
|
|
25
|
+
setResult({
|
|
26
|
+
isEnabled: true,
|
|
27
|
+
isPending: false,
|
|
28
|
+
themeData
|
|
29
|
+
});
|
|
30
|
+
}, []);
|
|
21
31
|
useEffect(() => {
|
|
22
32
|
if (!result.isEnabled) {
|
|
23
33
|
return;
|
|
24
34
|
}
|
|
25
35
|
logger.debug('Requesting external theme data');
|
|
26
36
|
|
|
27
|
-
/** Parse external theme data and update the result */
|
|
28
|
-
function handleExternalThemeData(externalThemeData) {
|
|
29
|
-
var themeData = parseExternalThemeData(externalThemeData);
|
|
30
|
-
setResult({
|
|
31
|
-
isEnabled: true,
|
|
32
|
-
isPending: false,
|
|
33
|
-
themeData
|
|
34
|
-
});
|
|
35
|
-
}
|
|
36
|
-
|
|
37
37
|
/** Parent or current Window can explicitly set the theme */
|
|
38
38
|
function onMessage(event) {
|
|
39
39
|
var parent = getWindowParent();
|
|
@@ -61,7 +61,7 @@ export function useExternalTheme() {
|
|
|
61
61
|
return () => {
|
|
62
62
|
window.removeEventListener('message', onMessage);
|
|
63
63
|
};
|
|
64
|
-
}, [result.isEnabled]);
|
|
64
|
+
}, [handleExternalThemeData, result.isEnabled]);
|
|
65
65
|
return result;
|
|
66
66
|
}
|
|
67
67
|
export default useExternalTheme;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useExternalTheme.js","names":["useEffect","useState","Log","getWindowParent","MSG_REQUEST_SET_THEME","isExternalThemeData","isExternalThemeEnabled","parseExternalThemeData","requestExternalThemeData","logger","module","useExternalTheme","result","setResult","isEnabled","isPending","
|
|
1
|
+
{"version":3,"file":"useExternalTheme.js","names":["useCallback","useEffect","useState","Log","getWindowParent","MSG_REQUEST_SET_THEME","isExternalThemeData","isExternalThemeEnabled","parseExternalThemeData","requestExternalThemeData","logger","module","useExternalTheme","result","setResult","isEnabled","isPending","handleExternalThemeData","externalThemeData","themeData","debug","onMessage","event","parent","source","window","data","message","payload","addEventListener","then","catch","err","error","removeEventListener"],"sources":["../../src/theme/useExternalTheme.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\nimport Log from '@deephaven/log';\nimport { getWindowParent, type PostMessage } from '@deephaven/utils';\nimport {\n MSG_REQUEST_SET_THEME,\n type ExternalThemeData,\n type ThemeData,\n} from './ThemeModel';\nimport {\n isExternalThemeData,\n isExternalThemeEnabled,\n parseExternalThemeData,\n requestExternalThemeData,\n} from './ThemeUtils';\n\nconst logger = Log.module('useExternalTheme');\nexport interface UseExternalThemeResult {\n isEnabled: boolean;\n isPending: boolean;\n themeData?: ThemeData;\n}\n\n/**\n * If external theme is configured via `theme=EXTERNAL_THEME_KEY` query param,\n * handle `postMessage` communication to retrieve the theme data from the parent\n * Window. The hook will also listen for `MSG_REQUEST_SET_THEME` messages from\n * the parent and current Window to allow explicitly setting the theme.\n */\nexport function useExternalTheme(): UseExternalThemeResult {\n const [result, setResult] = useState<UseExternalThemeResult>(() => {\n const isEnabled = isExternalThemeEnabled();\n return {\n isEnabled,\n isPending: isEnabled,\n };\n });\n\n /** Parse external theme data and update the result */\n const handleExternalThemeData = useCallback(\n (externalThemeData: ExternalThemeData) => {\n const themeData = parseExternalThemeData(externalThemeData);\n\n setResult({\n isEnabled: true,\n isPending: false,\n themeData,\n });\n },\n []\n );\n\n useEffect(() => {\n if (!result.isEnabled) {\n return;\n }\n\n logger.debug('Requesting external theme data');\n\n /** Parent or current Window can explicitly set the theme */\n function onMessage(event: MessageEvent<PostMessage<unknown>>): void {\n const parent = getWindowParent();\n\n // Allow messages from parent or current window\n if (event.source !== window && event.source !== parent) {\n return;\n }\n\n if (event.data.message === MSG_REQUEST_SET_THEME) {\n if (isExternalThemeData(event.data.payload)) {\n handleExternalThemeData(event.data.payload);\n }\n }\n }\n\n window.addEventListener('message', onMessage);\n\n /** Request initial theme data from parent window */\n requestExternalThemeData()\n .then(handleExternalThemeData)\n .catch(err => {\n logger.error(err);\n setResult({ isEnabled: true, isPending: false });\n });\n\n return () => {\n window.removeEventListener('message', onMessage);\n };\n }, [handleExternalThemeData, result.isEnabled]);\n\n return result;\n}\n\nexport default useExternalTheme;\n"],"mappings":"AAAA,SAASA,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AACxD,OAAOC,GAAG,MAAM,gBAAgB;AAChC,SAASC,eAAe,QAA0B,kBAAkB;AAAC,SAEnEC,qBAAqB;AAAA,SAKrBC,mBAAmB,EACnBC,sBAAsB,EACtBC,sBAAsB,EACtBC,wBAAwB;AAG1B,IAAMC,MAAM,GAAGP,GAAG,CAACQ,MAAM,CAAC,kBAAkB,CAAC;AAO7C;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,gBAAgBA,CAAA,EAA2B;EACzD,IAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGZ,QAAQ,CAAyB,MAAM;IACjE,IAAMa,SAAS,GAAGR,sBAAsB,CAAC,CAAC;IAC1C,OAAO;MACLQ,SAAS;MACTC,SAAS,EAAED;IACb,CAAC;EACH,CAAC,CAAC;;EAEF;EACA,IAAME,uBAAuB,GAAGjB,WAAW,CACxCkB,iBAAoC,IAAK;IACxC,IAAMC,SAAS,GAAGX,sBAAsB,CAACU,iBAAiB,CAAC;IAE3DJ,SAAS,CAAC;MACRC,SAAS,EAAE,IAAI;MACfC,SAAS,EAAE,KAAK;MAChBG;IACF,CAAC,CAAC;EACJ,CAAC,EACD,EACF,CAAC;EAEDlB,SAAS,CAAC,MAAM;IACd,IAAI,CAACY,MAAM,CAACE,SAAS,EAAE;MACrB;IACF;IAEAL,MAAM,CAACU,KAAK,CAAC,gCAAgC,CAAC;;IAE9C;IACA,SAASC,SAASA,CAACC,KAAyC,EAAQ;MAClE,IAAMC,MAAM,GAAGnB,eAAe,CAAC,CAAC;;MAEhC;MACA,IAAIkB,KAAK,CAACE,MAAM,KAAKC,MAAM,IAAIH,KAAK,CAACE,MAAM,KAAKD,MAAM,EAAE;QACtD;MACF;MAEA,IAAID,KAAK,CAACI,IAAI,CAACC,OAAO,KAAKtB,qBAAqB,EAAE;QAChD,IAAIC,mBAAmB,CAACgB,KAAK,CAACI,IAAI,CAACE,OAAO,CAAC,EAAE;UAC3CX,uBAAuB,CAACK,KAAK,CAACI,IAAI,CAACE,OAAO,CAAC;QAC7C;MACF;IACF;IAEAH,MAAM,CAACI,gBAAgB,CAAC,SAAS,EAAER,SAAS,CAAC;;IAE7C;IACAZ,wBAAwB,CAAC,CAAC,CACvBqB,IAAI,CAACb,uBAAuB,CAAC,CAC7Bc,KAAK,CAACC,GAAG,IAAI;MACZtB,MAAM,CAACuB,KAAK,CAACD,GAAG,CAAC;MACjBlB,SAAS,CAAC;QAAEC,SAAS,EAAE,IAAI;QAAEC,SAAS,EAAE;MAAM,CAAC,CAAC;IAClD,CAAC,CAAC;IAEJ,OAAO,MAAM;MACXS,MAAM,CAACS,mBAAmB,CAAC,SAAS,EAAEb,SAAS,CAAC;IAClD,CAAC;EACH,CAAC,EAAE,CAACJ,uBAAuB,EAAEJ,MAAM,CAACE,SAAS,CAAC,CAAC;EAE/C,OAAOF,MAAM;AACf;AAEA,eAAeD,gBAAgB"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@deephaven/components",
|
|
3
|
-
"version": "0.108.1-alpha-parent-theme.
|
|
3
|
+
"version": "0.108.1-alpha-parent-theme.45+bc94a2bc",
|
|
4
4
|
"description": "Deephaven React component library",
|
|
5
5
|
"author": "Deephaven Data Labs LLC",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -25,10 +25,10 @@
|
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
27
|
"@adobe/react-spectrum": "3.38.0",
|
|
28
|
-
"@deephaven/icons": "^0.108.1-alpha-parent-theme.
|
|
29
|
-
"@deephaven/log": "^0.108.1-alpha-parent-theme.
|
|
30
|
-
"@deephaven/react-hooks": "^0.108.1-alpha-parent-theme.
|
|
31
|
-
"@deephaven/utils": "^0.108.1-alpha-parent-theme.
|
|
28
|
+
"@deephaven/icons": "^0.108.1-alpha-parent-theme.45+bc94a2bc",
|
|
29
|
+
"@deephaven/log": "^0.108.1-alpha-parent-theme.45+bc94a2bc",
|
|
30
|
+
"@deephaven/react-hooks": "^0.108.1-alpha-parent-theme.45+bc94a2bc",
|
|
31
|
+
"@deephaven/utils": "^0.108.1-alpha-parent-theme.45+bc94a2bc",
|
|
32
32
|
"@fortawesome/fontawesome-svg-core": "^6.2.1",
|
|
33
33
|
"@fortawesome/react-fontawesome": "^0.2.0",
|
|
34
34
|
"@internationalized/date": "^3.5.5",
|
|
@@ -60,8 +60,8 @@
|
|
|
60
60
|
"react-is": ">=16.8.0"
|
|
61
61
|
},
|
|
62
62
|
"devDependencies": {
|
|
63
|
-
"@deephaven/mocks": "^0.108.1-alpha-parent-theme.
|
|
64
|
-
"@deephaven/test-utils": "^0.108.1-alpha-parent-theme.
|
|
63
|
+
"@deephaven/mocks": "^0.108.1-alpha-parent-theme.45+bc94a2bc",
|
|
64
|
+
"@deephaven/test-utils": "^0.108.1-alpha-parent-theme.45+bc94a2bc",
|
|
65
65
|
"react-redux": "^7.2.4"
|
|
66
66
|
},
|
|
67
67
|
"files": [
|
|
@@ -76,5 +76,5 @@
|
|
|
76
76
|
"publishConfig": {
|
|
77
77
|
"access": "public"
|
|
78
78
|
},
|
|
79
|
-
"gitHead": "
|
|
79
|
+
"gitHead": "bc94a2bc66da6647c05dc8a16f37d342ef836b05"
|
|
80
80
|
}
|