@datalayer/jupyter-react 1.1.5 → 1.1.7

package/lib/theme/JupyterReactTheme.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
 import { Colormode } from '../theme';
 import '@primer/primitives/dist/css/functional/themes/light.css';
 import '@primer/primitives/dist/css/functional/themes/dark.css';
@@ -15,6 +15,14 @@ type IJupyterLabThemeProps = {
     colormode?: Colormode;
     loadJupyterLabCss?: boolean;
     theme?: Record<string, any>;
+    /**
+     * Base styles
+     */
+    baseStyles?: CSSProperties;
 };
+/**
+ * ThemeProvider component changing color mode with JupyterLab theme
+ * if embedded in Jupyter or with the browser color scheme preference.
+ */
 export declare function JupyterReactTheme(props: React.PropsWithChildren<IJupyterLabThemeProps>): JSX.Element;
 export default JupyterReactTheme;

package/lib/theme/JupyterReactTheme.js

@@ -1,12 +1,14 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /*
  * Copyright (c) 2021-2023 Datalayer, Inc.
  *
  * MIT License
  */
-import { createContext, useContext, useEffect, useState } from 'react';
+import { createContext, useContext, useEffect, useState, } from 'react';
 import { BaseStyles, ThemeProvider } from '@primer/react';
+import { setupPrimerPortals } from '@datalayer/primer-addons';
 import { JupyterLabCss, jupyterLabTheme } from '../theme';
+import { loadJupyterConfig } from '../jupyter';
 import { useJupyterReactStore } from '../state';
 import '@primer/primitives/dist/css/functional/themes/light.css';
 import '@primer/primitives/dist/css/functional/themes/dark.css';
@@ -28,21 +30,71 @@ export function useJupyterReactColormode() {
     }
     return colormode;
 }
+/**
+ * ThemeProvider component changing color mode with JupyterLab theme
+ * if embedded in Jupyter or with the browser color scheme preference.
+ */
 export function JupyterReactTheme(props) {
-    const { children, colormode: colormodeProps = 'light', loadJupyterLabCss = true, theme = jupyterLabTheme, } = props;
+    const { children, colormode: colormodeProps = 'light', loadJupyterLabCss = true, theme = jupyterLabTheme, ...rest } = props;
+    const { colormode: colormodeFromStore, jupyterLabAdapter } = useJupyterReactStore();
     const [colormode, setColormode] = useState(colormodeProps);
-    const { colormode: colormodeFromStore } = useJupyterReactStore();
+    const [inJupyterLab, setInJupterLab] = useState(undefined);
+    useEffect(() => {
+        const { insideJupyterLab } = loadJupyterConfig();
+        setInJupterLab(insideJupyterLab);
+    }, []);
     useEffect(() => {
-        setColormode(colormodeProps);
-    }, [colormodeProps]);
+        if (colormodeFromStore !== colormode) {
+            setColormode(colormodeFromStore);
+        }
+    }, [colormodeFromStore, inJupyterLab]);
     useEffect(() => {
-        setColormode(colormodeFromStore);
-    }, [colormodeFromStore]);
-    return (_jsxs(JupyterReactColormodeContext.Provider, { value: colormode, children: [loadJupyterLabCss && _jsx(JupyterLabCss, { colormode: colormode }), _jsx(ThemeProvider, { theme: theme, colorMode: colormode === 'light' ? 'day' : 'night', dayScheme: "light", nightScheme: "dark", children: _jsx(BaseStyles, { style: {
+        if (inJupyterLab !== undefined) {
+            function colorSchemeFromMedia({ matches }) {
+                /*
+                // TODO manage the case where user change the colormode
+                const colormode = matches ? 'dark' : 'light';
+                setColormode(colormode);
+                setupPrimerPortals(colormode);
+                */
+            }
+            function updateColorMode(themeManager) {
+                const colormode = themeManager.theme && !themeManager.isLight(themeManager.theme)
+                    ? 'dark'
+                    : 'light';
+                setColormode(colormode);
+                setupPrimerPortals(colormode);
+            }
+            if (inJupyterLab) {
+                const themeManager = jupyterLabAdapter?.service('@jupyterlab/apputils-extension:themes');
+                if (themeManager) {
+                    updateColorMode(themeManager);
+                    themeManager.themeChanged.connect(updateColorMode);
+                    return () => {
+                        themeManager.themeChanged.disconnect(updateColorMode);
+                    };
+                }
+            }
+            else {
+                colorSchemeFromMedia({
+                    matches: window.matchMedia('(prefers-color-scheme: dark)').matches,
+                });
+                window
+                    .matchMedia('(prefers-color-scheme: dark)')
+                    .addEventListener('change', colorSchemeFromMedia);
+                return () => {
+                    window
+                        .matchMedia('(prefers-color-scheme: dark)')
+                        .removeEventListener('change', colorSchemeFromMedia);
+                };
+            }
+        }
+    }, [inJupyterLab, jupyterLabAdapter]);
+    return inJupyterLab !== undefined ? (_jsxs(JupyterReactColormodeContext.Provider, { value: colormode, children: [loadJupyterLabCss && _jsx(JupyterLabCss, { colormode: colormode }), _jsx(ThemeProvider, { colorMode: colormode, theme: theme, dayScheme: "light", nightScheme: "dark", children: _jsx(BaseStyles, { style: {
                         backgroundColor: 'var(--bgColor-default)',
                         color: 'var(--fgColor-default)',
                         fontSize: 'var(--text-body-size-medium)',
-                    }, children: children }) })] }));
+                    }, ...rest, children: children }) })] })) : (_jsx(_Fragment, {}));
 }
 export default JupyterReactTheme;
 //# sourceMappingURL=JupyterReactTheme.js.map

package/lib/theme/JupyterReactTheme.js.map

@@ -1 +1 @@
-{"version":3,"file":"JupyterReactTheme.js","sourceRoot":"","sources":["../../src/theme/JupyterReactTheme.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,OAAc,EAAE,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC9E,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAa,aAAa,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AACrE,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAEhD,OAAO,yDAAyD,CAAC;AACjE,OAAO,wDAAwD,CAAC;AAEhE,OAAO,4DAA4D,CAAC;AACpE,OAAO,wDAAwD,CAAC;AAChE,OAAO,6DAA6D,CAAC;AACrE,OAAO,6DAA6D,CAAC;AACrE,OAAO,2DAA2D,CAAC;AACnE,OAAO,sDAAsD,CAAC;AAC9D,OAAO,0DAA0D,CAAC;AAClE,OAAO,kEAAkE,CAAC;AAE1E,+BAA+B;AAC/B,MAAM,4BAA4B,GAAG,aAAa,CAChD,SAAS,CACV,CAAC;AAEF,gDAAgD;AAChD,MAAM,UAAU,wBAAwB;IACtC,MAAM,SAAS,GAAG,UAAU,CAAC,4BAA4B,CAAC,CAAC;IAC3D,IAAI,SAAS,KAAK,SAAS,EAAE,CAAC;QAC5B,MAAM,IAAI,KAAK,CACb,2EAA2E,CAC5E,CAAC;IACJ,CAAC;IACD,OAAO,SAAS,CAAC;AACnB,CAAC;AAQD,MAAM,UAAU,iBAAiB,CAC/B,KAAqD;IAErD,MAAM,EACJ,QAAQ,EACR,SAAS,EAAE,cAAc,GAAG,OAAO,EACnC,iBAAiB,GAAG,IAAI,EACxB,KAAK,GAAG,eAAe,GACxB,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAY,cAAc,CAAC,CAAC;IACtE,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,oBAAoB,EAAE,CAAC;IACjE,SAAS,CAAC,GAAG,EAAE;QACb,YAAY,CAAC,cAAc,CAAC,CAAC;IAC/B,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IACrB,SAAS,CAAC,GAAG,EAAE;QACb,YAAY,CAAC,kBAAkB,CAAC,CAAC;IACnC,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC;IACzB,OAAO,CACL,MAAC,4BAA4B,CAAC,QAAQ,IAAC,KAAK,EAAE,SAAS,aACpD,iBAAiB,IAAI,KAAC,aAAa,IAAC,SAAS,EAAE,SAAS,GAAI,EAC7D,KAAC,aAAa,IACZ,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,EAClD,SAAS,EAAC,OAAO,EACjB,WAAW,EAAC,MAAM,YAElB,KAAC,UAAU,IACT,KAAK,EAAE;wBACL,eAAe,EAAE,wBAAwB;wBACzC,KAAK,EAAE,wBAAwB;wBAC/B,QAAQ,EAAE,8BAA8B;qBACzC,YAEA,QAAQ,GACE,GACC,IACsB,CACzC,CAAC;AACJ,CAAC;AAED,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"JupyterReactTheme.js","sourceRoot":"","sources":["../../src/theme/JupyterReactTheme.tsx"],"names":[],"mappings":"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"}

package/lib/theme/index.d.ts

@@ -1,4 +1,5 @@
 export * from './themes';
 export * from './JupyterLabColormode';
 export * from './JupyterLabCss';
+export * from './JupyterPalette';
 export * from './JupyterReactTheme';

package/lib/theme/index.js

@@ -4,8 +4,11 @@
  * MIT License
  */
 export * from './themes';
-// export * from './JupyterLabCssImports'; // Leave this commented otherwise webpack may break in consumers.
 export * from './JupyterLabColormode';
 export * from './JupyterLabCss';
+export * from './JupyterPalette';
 export * from './JupyterReactTheme';
+// Do NOT export JupyterLabCssImports here...
+// !!! Leave this export commented otherwise webpack may break in consumers
+// export * from './JupyterLabCssImports';
 //# sourceMappingURL=index.js.map

package/lib/theme/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,cAAc,UAAU,CAAC;AACzB,4GAA4G;AAC5G,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,cAAc,UAAU,CAAC;AAEzB,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AAEpC,6CAA6C;AAC7C,2EAA2E;AAC3E,0CAA0C"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/jupyter-react",
-  "version": "1.1.5",
+  "version": "1.1.7",
   "description": "Jupyter React - React.js components 100% compatible with Jupyter.",
   "license": "MIT",
   "main": "lib/index.js",
@@ -29,7 +29,7 @@
     "access": "public"
   },
   "scripts": {
-    "build": "gulp resources-to-lib && tsc && webpack",
+    "build": "gulp resources-to-lib && tsc && node scripts/patch-vscode-highlighting.js && webpack",
     "build:lib": "tsc",
     "build:prod": "gulp resources-to-lib && tsc && npm run clean && npm run build:lib",
     "build:tsc:watch:res": "gulp resources-to-lib-watch",
@@ -69,7 +69,7 @@
     "@codemirror/lang-python": "^6.0.1",
     "@codemirror/state": "^6.2.0",
     "@codemirror/view": "^6.7.0",
-    "@datalayer/primer-addons": "^1.0.3",
+    "@datalayer/primer-addons": "^1.0.4",
     "@jupyter-widgets/base": "^6.0.0",
     "@jupyter-widgets/controls": "^5.0.0",
     "@jupyter-widgets/html-manager": "^1.0.0",
@@ -162,7 +162,7 @@
     "utf-8-validate": "^6.0.3",
     "wildcard-match": "^5.1.2",
     "y-protocols": "^1.0.5",
-    "y-websocket": "^3.0.0",
+    "y-websocket": "3.0.0",
     "yjs": "^13.6.24",
     "zustand": "^4.4.1"
   },