@datalayer/jupyter-react 0.8.0 → 0.8.2

package/README.md

@@ -12,6 +12,8 @@ The below image shows a gallery of the available React.js components ready to be
   <img alt="Jupyter React Gallery" src="https://datalayer-jupyter-examples.s3.amazonaws.com/jupyter-react-gallery.gif" />
 </div>
 
+We host a Storybook on ✨ https://jupyter-ui-storybook.datalayer.tech that showcases various low-level as high-level React.js components useful to build a Data Product.
+
 The Jupyter(Lab) notebook is a tool that allows data scientist to analyse dataset. However, it is not easy to create a custom user interface integrated in an existing application. [Jupyter React](https://jupyter-react.datalayer.tech), an open-source library, fills that gap and provides components that a developer can easily integrate in any React.js application.
 
 In terms of technical stack, the Jupyter(Lab) user interface is built on top of Lumino, which is an imperative way to build user interface and **can not** be consumed by industry standard declarative frameworks like React.js. As a user interface developer, if you want to create a custom data product on top of Jupyter, you have to stick to Lumino and carry-on the full notebook interface not tailored to your specific needs. This is not what you want. You just want to expose what you need, you want to develop with your favorite toolkit (like React.js) and you also want to integrate on a per-component basis the Jupyter functionality in your application.
@@ -32,7 +34,7 @@ As a React.js developer, you just write a few lines of code get a live notebook
   <img alt="Jupyter React Slate" src="https://datalayer-jupyter-examples.s3.amazonaws.com/jupyter-react-snippet.png" />
 </div>
 
-The typedoc documentation is [available online](https://typedoc.datalayer.tech/datalayer/jupyter-react/0.7.3/index.html).
+The typedoc documentation is [available online](https://typedoc.datalayer.tech/datalayer/jupyter-react/0.8.1/index.html).
 
 Jupyter React can be used in any React.js application. Install the latest `@datalayer/jupyter-react` npm package and get inspired by the [examples](https://github.com/datalayer/jupyter-ui/tree/main/examples) in this repository.
 

package/lib/app/App.js

@@ -1,4 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2022-2023 Datalayer Inc. All rights reserved.
+ *
+ * MIT License
+ */
 import { createRoot } from 'react-dom/client';
 import JupyterReact from './JupyterReact';
 const div = document.createElement('div');

package/lib/app/App.js.map

@@ -1 +1 @@
-{"version":3,"file":"App.js","sourceRoot":"","sources":["../../src/app/App.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAE1C,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;AAC/B,MAAM,IAAI,GAAG,UAAU,CAAC,GAAG,CAAC,CAAA;AAE5B,IAAI,CAAC,MAAM,CAAC,KAAC,YAAY,KAAG,CAAC,CAAC"}
+{"version":3,"file":"App.js","sourceRoot":"","sources":["../../src/app/App.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAE1C,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;AAC/B,MAAM,IAAI,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;AAE7B,IAAI,CAAC,MAAM,CAAC,KAAC,YAAY,KAAG,CAAC,CAAC"}

package/lib/app/JupyterReact.js

@@ -1,4 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2022-2023 Datalayer Inc. All rights reserved.
+ *
+ * MIT License
+ */
 import { useState, useEffect } from 'react';
 import { ThemeProvider, BaseStyles, Box } from '@primer/react';
 import { UnderlineNav } from '@primer/react/drafts';
@@ -20,7 +25,13 @@ const JupyterReact = (props) => {
             console.error(`Error while accessing the jupyter server jupyter_react extension.\n${reason}`);
         });
     });
-    return (_jsx(_Fragment, { children: _jsx(ThemeProvider, { children: _jsx(BaseStyles, { children: _jsxs(Box, { style: { maxWidth: 700 }, children: [_jsx(Box, { mb: 3, children: _jsxs(UnderlineNav, { "aria-label": "jupyter-react", children: [_jsx(UnderlineNav.Item, { "aria-current": "page", icon: RingedPlanetIcon, onSelect: e => { e.preventDefault(); setTab(1); }, children: "Components" }), _jsx(UnderlineNav.Item, { icon: ReactJsIcon, onSelect: e => { e.preventDefault(); setTab(2); }, children: "About" })] }) }), _jsxs(Box, { m: 3, children: [(tab === 1) && _jsx(ComponentsTab, { app: app }), (tab === 2) && _jsx(AboutTab, { version: version })] })] }) }) }) }));
+    return (_jsx(_Fragment, { children: _jsx(ThemeProvider, { children: _jsx(BaseStyles, { children: _jsxs(Box, { style: { maxWidth: 700 }, children: [_jsx(Box, { mb: 3, children: _jsxs(UnderlineNav, { "aria-label": "jupyter-react", children: [_jsx(UnderlineNav.Item, { "aria-current": "page", icon: RingedPlanetIcon, onSelect: e => {
+                                            e.preventDefault();
+                                            setTab(1);
+                                        }, children: "Components" }), _jsx(UnderlineNav.Item, { icon: ReactJsIcon, onSelect: e => {
+                                            e.preventDefault();
+                                            setTab(2);
+                                        }, children: "About" })] }) }), _jsxs(Box, { m: 3, children: [tab === 1 && _jsx(ComponentsTab, { app: app }), tab === 2 && _jsx(AboutTab, { version: version })] })] }) }) }) }));
 };
 export default JupyterReact;
 //# sourceMappingURL=JupyterReact.js.map

package/lib/app/JupyterReact.js.map

@@ -1 +1 @@
-{"version":3,"file":"JupyterReact.js","sourceRoot":"","sources":["../../src/app/JupyterReact.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AACvE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,QAAQ,MAAM,iBAAiB,CAAC;AACvC,OAAO,aAAa,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAMxD,MAAM,YAAY,GAAG,CAAC,KAA2B,EAAe,EAAE;IAChE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC;IACtB,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAClC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC3C,SAAS,CAAC,GAAG,EAAE;QACb,UAAU,CAAM,gBAAgB,CAAC,YAAY,EAAE,EAAE,eAAe,EAAE,QAAQ,CAAC;aAC1E,IAAI,CAAC,IAAI,CAAC,EAAE;YACX,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC3B,CAAC,CAAC;aACD,KAAK,CAAC,MAAM,CAAC,EAAE;YACd,OAAO,CAAC,KAAK,CACX,sEAAsE,MAAM,EAAE,CAC/E,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IACH,OAAO,CACL,4BACE,KAAC,aAAa,cACZ,KAAC,UAAU,cACT,MAAC,GAAG,IAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,GAAG,EAAC,aACzB,KAAC,GAAG,IAAC,EAAE,EAAE,CAAC,YACR,MAAC,YAAY,kBAAY,eAAe,aACtC,KAAC,YAAY,CAAC,IAAI,oBAAc,MAAM,EAAC,IAAI,EAAE,gBAAgB,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAE,CAAC,CAAC,cAAc,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAA,CAAC,2BAE1F,EACpB,KAAC,YAAY,CAAC,IAAI,IAAC,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAE,CAAC,CAAC,cAAc,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAA,CAAC,sBAEjE,IACP,GACX,EACN,MAAC,GAAG,IAAC,CAAC,EAAE,CAAC,aACN,CAAC,GAAG,KAAK,CAAC,CAAC,IAAI,KAAC,aAAa,IAAC,GAAG,EAAE,GAAG,GAAG,EACzC,CAAC,GAAG,KAAK,CAAC,CAAC,IAAI,KAAC,QAAQ,IAAC,OAAO,EAAE,OAAO,GAAG,IACzC,IACF,GACK,GACC,GACf,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"JupyterReact.js","sourceRoot":"","sources":["../../src/app/JupyterReact.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AACvE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,QAAQ,MAAM,iBAAiB,CAAC;AACvC,OAAO,aAAa,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAMxD,MAAM,YAAY,GAAG,CAAC,KAA2B,EAAe,EAAE;IAChE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC;IACtB,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAClC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC3C,SAAS,CAAC,GAAG,EAAE;QACb,UAAU,CAAM,gBAAgB,CAAC,YAAY,EAAE,EAAE,eAAe,EAAE,QAAQ,CAAC;aACxE,IAAI,CAAC,IAAI,CAAC,EAAE;YACX,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC3B,CAAC,CAAC;aACD,KAAK,CAAC,MAAM,CAAC,EAAE;YACd,OAAO,CAAC,KAAK,CACX,sEAAsE,MAAM,EAAE,CAC/E,CAAC;QACJ,CAAC,CAAC,CAAC;IACP,CAAC,CAAC,CAAC;IACH,OAAO,CACL,4BACE,KAAC,aAAa,cACZ,KAAC,UAAU,cACT,MAAC,GAAG,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,aAC3B,KAAC,GAAG,IAAC,EAAE,EAAE,CAAC,YACR,MAAC,YAAY,kBAAY,eAAe,aACtC,KAAC,YAAY,CAAC,IAAI,oBACH,MAAM,EACnB,IAAI,EAAE,gBAAgB,EACtB,QAAQ,EAAE,CAAC,CAAC,EAAE;4CACZ,CAAC,CAAC,cAAc,EAAE,CAAC;4CACnB,MAAM,CAAC,CAAC,CAAC,CAAC;wCACZ,CAAC,2BAGiB,EACpB,KAAC,YAAY,CAAC,IAAI,IAChB,IAAI,EAAE,WAAW,EACjB,QAAQ,EAAE,CAAC,CAAC,EAAE;4CACZ,CAAC,CAAC,cAAc,EAAE,CAAC;4CACnB,MAAM,CAAC,CAAC,CAAC,CAAC;wCACZ,CAAC,sBAGiB,IACP,GACX,EACN,MAAC,GAAG,IAAC,CAAC,EAAE,CAAC,aACN,GAAG,KAAK,CAAC,IAAI,KAAC,aAAa,IAAC,GAAG,EAAE,GAAG,GAAI,EACxC,GAAG,KAAK,CAAC,IAAI,KAAC,QAAQ,IAAC,OAAO,EAAE,OAAO,GAAI,IACxC,IACF,GACK,GACC,GACf,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/app/tabs/AboutTab.js

@@ -1,14 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2022-2023 Datalayer Inc. All rights reserved.
+ *
+ * MIT License
+ */
 import { useState } from 'react';
 import { Pagehead, Label, Text, Link, Box } from '@primer/react';
 import { ECharlesIcon } from '@datalayer/icons-react/eggs';
 const AboutTab = (props) => {
     const { version } = props;
     const [egg, setEgg] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsxs(Pagehead, { as: "h2", children: ["\uD83E\uDE90 \u269B\uFE0F Jupyter React", _jsx(Label, { sx: { marginLeft: 1 }, children: version })] }), _jsx(Box, { children: _jsx(Text, { children: "React.js components \uD83D\uDCAF% compatible with Jupyter." }) }), _jsx(Box, { mt: 3, style: { height: 350 }, children: !egg ?
-                    _jsx("img", { src: "https://assets.datalayer.tech/releases/datalayer-0.2.0-omalley.png", onClick: e => setEgg(true) })
-                    :
-                        _jsx(ECharlesIcon, { size: 300, onClick: e => setEgg(false) }) }), _jsx(Box, { children: _jsx(Link, { href: "https://datalayer.tech/docs/releases/0.2.0-omalley", target: "_blank", children: _jsx(Text, { as: "h4", children: "Datalayer 0.2.0 O'Malley Release" }) }) }), _jsx(Box, { children: _jsx(Link, { href: "https://github.com/datalayer/jupyter-ui/tree/main/packages/react", target: "_blank", children: _jsx(Text, { as: "h4", children: "Source code" }) }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(Pagehead, { as: "h2", children: ["\uD83E\uDE90 \u269B\uFE0F Jupyter React", _jsx(Label, { sx: { marginLeft: 1 }, children: version })] }), _jsx(Box, { children: _jsx(Text, { children: "React.js components \uD83D\uDCAF% compatible with Jupyter." }) }), _jsx(Box, { mt: 3, style: { width: 350 }, children: !egg ? (_jsx("img", { src: "https://assets.datalayer.tech/releases/datalayer-0.3.0-black-snake_1024.png", onClick: e => setEgg(true) })) : (_jsx(ECharlesIcon, { size: 300, onClick: e => setEgg(false) })) }), _jsx(Box, { children: _jsx(Link, { href: "https://datalayer.tech/docs/releases/0.3.0-black-snake", target: "_blank", children: _jsx(Text, { as: "h4", children: "Datalayer 0.3.0 Black Snake Release" }) }) }), _jsx(Box, { children: _jsx(Link, { href: "https://github.com/datalayer/jupyter-ui/tree/main/packages/react", target: "_blank", children: _jsx(Text, { as: "h4", children: "Source code" }) }) })] }));
 };
 export default AboutTab;
 //# sourceMappingURL=AboutTab.js.map

package/lib/app/tabs/AboutTab.js.map

@@ -1 +1 @@
-{"version":3,"file":"AboutTab.js","sourceRoot":"","sources":["../../../src/app/tabs/AboutTab.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAM3D,MAAM,QAAQ,GAAG,CAAC,KAAY,EAAe,EAAE;IAC7C,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAC1B,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtC,OAAO,CACL,8BACE,MAAC,QAAQ,IAAC,EAAE,EAAC,IAAI,wDAAoB,KAAC,KAAK,IAAC,EAAE,EAAE,EAAC,UAAU,EAAE,CAAC,EAAC,YAAG,OAAO,GAAS,IAAW,EAC7F,KAAC,GAAG,cACF,KAAC,IAAI,6EAAwD,GACzD,EACN,KAAC,GAAG,IAAC,EAAE,EAAE,CAAC,EAAE,KAAK,EAAE,EAAC,MAAM,EAAE,GAAG,EAAC,YAC7B,CAAC,GAAG,CAAC,CAAC;oBACL,cAAK,GAAG,EAAC,oEAAoE,EAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG;oBACzG,CAAC;wBACH,KAAC,YAAY,IAAC,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,GAErD,EACN,KAAC,GAAG,cACF,KAAC,IAAI,IAAC,IAAI,EAAC,oDAAoD,EAAC,MAAM,EAAC,QAAQ,YAC7E,KAAC,IAAI,IAAC,EAAE,EAAC,IAAI,iDAAwC,GAChD,GACH,EACN,KAAC,GAAG,cACF,KAAC,IAAI,IAAC,IAAI,EAAC,kEAAkE,EAAC,MAAM,EAAC,QAAQ,YAC3F,KAAC,IAAI,IAAC,EAAE,EAAC,IAAI,4BAAmB,GAC3B,GACH,IACL,CACJ,CAAC;AACJ,CAAC,CAAA;AAED,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"AboutTab.js","sourceRoot":"","sources":["../../../src/app/tabs/AboutTab.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAM3D,MAAM,QAAQ,GAAG,CAAC,KAAY,EAAe,EAAE;IAC7C,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAC1B,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtC,OAAO,CACL,8BACE,MAAC,QAAQ,IAAC,EAAE,EAAC,IAAI,wDACI,KAAC,KAAK,IAAC,EAAE,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,YAAG,OAAO,GAAS,IACzD,EACX,KAAC,GAAG,cACF,KAAC,IAAI,6EAAwD,GACzD,EACN,KAAC,GAAG,IAAC,EAAE,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,YAC9B,CAAC,GAAG,CAAC,CAAC,CAAC,CACN,cACE,GAAG,EAAC,6EAA6E,EACjF,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,GAC1B,CACH,CAAC,CAAC,CAAC,CACF,KAAC,YAAY,IAAC,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,GAAI,CACzD,GACG,EACN,KAAC,GAAG,cACF,KAAC,IAAI,IACH,IAAI,EAAC,wDAAwD,EAC7D,MAAM,EAAC,QAAQ,YAEf,KAAC,IAAI,IAAC,EAAE,EAAC,IAAI,oDAA2C,GACnD,GACH,EACN,KAAC,GAAG,cACF,KAAC,IAAI,IACH,IAAI,EAAC,kEAAkE,EACvE,MAAM,EAAC,QAAQ,YAEf,KAAC,IAAI,IAAC,EAAE,EAAC,IAAI,4BAAmB,GAC3B,GACH,IACL,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/app/tabs/ComponentsTab.js

@@ -1,4 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2022-2023 Datalayer Inc. All rights reserved.
+ *
+ * MIT License
+ */
 import { useState } from 'react';
 import { Box, NavList } from '@primer/react';
 import { Jupyter } from '../../jupyter/Jupyter';
@@ -11,9 +16,9 @@ const MainTab = (props) => {
     const [nav, setNav] = useState(1);
     return (_jsx(_Fragment, { children: _jsxs(Box, { sx: { display: 'flex' }, children: [_jsx(Box, { children: _jsxs(NavList, { sx: {
                             '> *': {
-                                paddingTop: '0px'
-                            }
-                        }, children: [_jsx(NavList.Item, { "aria-current": nav === 1 ? 'page' : undefined, onClick: e => setNav(1), children: "File Browser" }), _jsx(NavList.Item, { "aria-current": nav === 2 ? 'page' : undefined, onClick: e => setNav(2), children: "Cell" }), _jsx(NavList.Item, { "aria-current": nav === 3 ? 'page' : undefined, onClick: e => setNav(3), children: "Notebook" }), _jsx(NavList.Item, { "aria-current": nav === 4 ? 'page' : undefined, onClick: e => setNav(4), children: "IPyWidgets" }), _jsx(NavList.Item, { "aria-current": nav === 5 ? 'page' : undefined, onClick: e => setNav(5), children: "Viewer" })] }) }), _jsx(Box, { ml: 3, sx: { width: '100%' }, children: _jsxs(Jupyter, { startDefaultKernel: false, children: [(nav === 1) && _jsx(FileBrowserComponent, {}), (nav === 2) && _jsx(CellComponent, {}), (nav === 3) && _jsx(NotebookComponent, {}), (nav === 4) && _jsx(IPyWidgetsComponent, {}), (nav === 5) && _jsx(ViewerComponent, {})] }) })] }) }));
+                                paddingTop: '0px',
+                            },
+                        }, children: [_jsx(NavList.Item, { "aria-current": nav === 1 ? 'page' : undefined, onClick: e => setNav(1), children: "File Browser" }), _jsx(NavList.Item, { "aria-current": nav === 2 ? 'page' : undefined, onClick: e => setNav(2), children: "Cell" }), _jsx(NavList.Item, { "aria-current": nav === 3 ? 'page' : undefined, onClick: e => setNav(3), children: "Notebook" }), _jsx(NavList.Item, { "aria-current": nav === 4 ? 'page' : undefined, onClick: e => setNav(4), children: "IPyWidgets" }), _jsx(NavList.Item, { "aria-current": nav === 5 ? 'page' : undefined, onClick: e => setNav(5), children: "Viewer" })] }) }), _jsx(Box, { ml: 3, sx: { width: '100%' }, children: _jsxs(Jupyter, { startDefaultKernel: false, children: [nav === 1 && _jsx(FileBrowserComponent, {}), nav === 2 && _jsx(CellComponent, {}), nav === 3 && _jsx(NotebookComponent, {}), nav === 4 && _jsx(IPyWidgetsComponent, {}), nav === 5 && _jsx(ViewerComponent, {})] }) })] }) }));
 };
 export default MainTab;
 //# sourceMappingURL=ComponentsTab.js.map

package/lib/app/tabs/ComponentsTab.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComponentsTab.js","sourceRoot":"","sources":["../../../src/app/tabs/ComponentsTab.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAEhD,OAAO,oBAAoB,MAAM,mCAAmC,CAAC;AACrE,OAAO,aAAa,MAAM,4BAA4B,CAAC;AACvD,OAAO,iBAAiB,MAAM,gCAAgC,CAAC;AAC/D,OAAO,mBAAmB,MAAM,kCAAkC,CAAC;AACnE,OAAO,eAAe,MAAM,8BAA8B,CAAC;AAE3D,MAAM,OAAO,GAAG,CAAC,KAA2B,EAAE,EAAE;IAC9C,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAClC,OAAO,CACL,4BACE,MAAC,GAAG,IAAC,EAAE,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC,aACxB,KAAC,GAAG,cACF,MAAC,OAAO,IAAC,EAAE,EAAE;4BACX,KAAK,EAAE;gCACL,UAAU,EAAE,KAAK;6BAClB;yBACF,aACC,KAAC,OAAO,CAAC,IAAI,oBAAe,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,6BAEpE,EACf,KAAC,OAAO,CAAC,IAAI,oBAAe,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,qBAEpE,EACf,KAAC,OAAO,CAAC,IAAI,oBAAe,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,yBAEpE,EACf,KAAC,OAAO,CAAC,IAAI,oBAAe,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,2BAEpE,EACf,KAAC,OAAO,CAAC,IAAI,oBAAe,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,uBAEpE,IACP,GACN,EACN,KAAC,GAAG,IAAC,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAC,YAC9B,MAAC,OAAO,IAAC,kBAAkB,EAAE,KAAK,aAC/B,CAAC,GAAG,KAAK,CAAC,CAAC,IAAI,KAAC,oBAAoB,KAAE,EACtC,CAAC,GAAG,KAAK,CAAC,CAAC,IAAI,KAAC,aAAa,KAAE,EAC/B,CAAC,GAAG,KAAK,CAAC,CAAC,IAAI,KAAC,iBAAiB,KAAE,EACnC,CAAC,GAAG,KAAK,CAAC,CAAC,IAAI,KAAC,mBAAmB,KAAE,EACrC,CAAC,GAAG,KAAK,CAAC,CAAC,IAAI,KAAC,eAAe,KAAE,IAC1B,GACN,IACF,GACL,CACJ,CAAC;AACJ,CAAC,CAAA;AAED,eAAe,OAAO,CAAC"}
+{"version":3,"file":"ComponentsTab.js","sourceRoot":"","sources":["../../../src/app/tabs/ComponentsTab.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAEhD,OAAO,oBAAoB,MAAM,mCAAmC,CAAC;AACrE,OAAO,aAAa,MAAM,4BAA4B,CAAC;AACvD,OAAO,iBAAiB,MAAM,gCAAgC,CAAC;AAC/D,OAAO,mBAAmB,MAAM,kCAAkC,CAAC;AACnE,OAAO,eAAe,MAAM,8BAA8B,CAAC;AAE3D,MAAM,OAAO,GAAG,CAAC,KAA2B,EAAE,EAAE;IAC9C,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAClC,OAAO,CACL,4BACE,MAAC,GAAG,IAAC,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAC1B,KAAC,GAAG,cACF,MAAC,OAAO,IACN,EAAE,EAAE;4BACF,KAAK,EAAE;gCACL,UAAU,EAAE,KAAK;6BAClB;yBACF,aAED,KAAC,OAAO,CAAC,IAAI,oBACG,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC5C,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,6BAGV,EACf,KAAC,OAAO,CAAC,IAAI,oBACG,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC5C,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,qBAGV,EACf,KAAC,OAAO,CAAC,IAAI,oBACG,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC5C,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,yBAGV,EACf,KAAC,OAAO,CAAC,IAAI,oBACG,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC5C,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,2BAGV,EACf,KAAC,OAAO,CAAC,IAAI,oBACG,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC5C,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,uBAGV,IACP,GACN,EACN,KAAC,GAAG,IAAC,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,YAC/B,MAAC,OAAO,IAAC,kBAAkB,EAAE,KAAK,aAC/B,GAAG,KAAK,CAAC,IAAI,KAAC,oBAAoB,KAAG,EACrC,GAAG,KAAK,CAAC,IAAI,KAAC,aAAa,KAAG,EAC9B,GAAG,KAAK,CAAC,IAAI,KAAC,iBAAiB,KAAG,EAClC,GAAG,KAAK,CAAC,IAAI,KAAC,mBAAmB,KAAG,EACpC,GAAG,KAAK,CAAC,IAAI,KAAC,eAAe,KAAG,IACzB,GACN,IACF,GACL,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/lib/app/tabs/components/CellComponent.js

@@ -1,4 +1,9 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2022-2023 Datalayer Inc. All rights reserved.
+ *
+ * MIT License
+ */
 // import Cell from '../../../components/cell/Cell';
 const CellComponent = () => {
     return (_jsx(_Fragment, {}));

package/lib/app/tabs/components/CellComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"CellComponent.js","sourceRoot":"","sources":["../../../../src/app/tabs/components/CellComponent.tsx"],"names":[],"mappings":";AAAA,oDAAoD;AAEpD,MAAM,aAAa,GAAG,GAAG,EAAE;IACzB,OAAO,CACL,mBAIG,CACJ,CAAA;AACH,CAAC,CAAA;AAED,eAAe,aAAa,CAAC"}
+{"version":3,"file":"CellComponent.js","sourceRoot":"","sources":["../../../../src/app/tabs/components/CellComponent.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,oDAAoD;AAEpD,MAAM,aAAa,GAAG,GAAG,EAAE;IACzB,OAAO,CACL,mBAEQ,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/app/tabs/components/FileBrowserComponent.js

@@ -1,4 +1,9 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2022-2023 Datalayer Inc. All rights reserved.
+ *
+ * MIT License
+ */
 import { FileBrowser } from '../../../components/filebrowser/FileBrowser';
 const FileBrowserComponent = () => {
     return (_jsx(_Fragment, { children: _jsx(FileBrowser, {}) }));

package/lib/app/tabs/components/FileBrowserComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileBrowserComponent.js","sourceRoot":"","sources":["../../../../src/app/tabs/components/FileBrowserComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,6CAA6C,CAAC;AAE1E,MAAM,oBAAoB,GAAG,GAAG,EAAE;IAChC,OAAO,CACL,4BACE,KAAC,WAAW,KAAE,GACb,CACJ,CAAA;AACH,CAAC,CAAA;AAED,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"FileBrowserComponent.js","sourceRoot":"","sources":["../../../../src/app/tabs/components/FileBrowserComponent.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,6CAA6C,CAAC;AAE1E,MAAM,oBAAoB,GAAG,GAAG,EAAE;IAChC,OAAO,CACL,4BACE,KAAC,WAAW,KAAG,GACd,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/lib/app/tabs/components/IPyWidgetsComponent.js

@@ -1,6 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2022-2023 Datalayer Inc. All rights reserved.
+ *
+ * MIT License
+ */
 import OutputIPyWidgets from '../../../components/output/OutputIPyWidgets';
-import { view, state } from './../../../examples/notebooks/OutputIPyWidgetsExample';
+import { view, state, } from './../../../examples/notebooks/OutputIPyWidgetsExample';
 const IPyWidgetsComponent = () => {
     return (_jsx(_Fragment, { children: _jsx(OutputIPyWidgets, { view: view, state: state }) }));
 };

package/lib/app/tabs/components/IPyWidgetsComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"IPyWidgetsComponent.js","sourceRoot":"","sources":["../../../../src/app/tabs/components/IPyWidgetsComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,gBAAgB,MAAM,6CAA6C,CAAC;AAE3E,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,uDAAuD,CAAC;AAEpF,MAAM,mBAAmB,GAAG,GAAG,EAAE;IAC/B,OAAO,CACL,4BACE,KAAC,gBAAgB,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,GAAG,GAC5C,CACJ,CAAA;AACH,CAAC,CAAA;AAED,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"IPyWidgetsComponent.js","sourceRoot":"","sources":["../../../../src/app/tabs/components/IPyWidgetsComponent.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,OAAO,gBAAgB,MAAM,6CAA6C,CAAC;AAE3E,OAAO,EACL,IAAI,EACJ,KAAK,GACN,MAAM,uDAAuD,CAAC;AAE/D,MAAM,mBAAmB,GAAG,GAAG,EAAE;IAC/B,OAAO,CACL,4BACE,KAAC,gBAAgB,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,GAAI,GAC7C,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/lib/app/tabs/components/NotebookComponent.js

@@ -1,4 +1,9 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2022-2023 Datalayer Inc. All rights reserved.
+ *
+ * MIT License
+ */
 // import Notebook from '../../../components/notebook/Notebook';
 // import CellSidebarNew from "../../../components/notebook/cell/sidebar/CellSidebarNew";
 // import nbformat from "../../..//examples/notebooks/IPyWidgetsExample1.ipynb.json";

package/lib/app/tabs/components/NotebookComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotebookComponent.js","sourceRoot":"","sources":["../../../../src/app/tabs/components/NotebookComponent.tsx"],"names":[],"mappings":";AAAA,gEAAgE;AAChE,yFAAyF;AAEzF,qFAAqF;AAErF,MAAM,iBAAiB,GAAG,GAAG,EAAE;IAC7B,OAAO,CACL,mBAeG,CACJ,CAAA;AACH,CAAC,CAAA;AAED,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"NotebookComponent.js","sourceRoot":"","sources":["../../../../src/app/tabs/components/NotebookComponent.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,gEAAgE;AAChE,yFAAyF;AAEzF,qFAAqF;AAErF,MAAM,iBAAiB,GAAG,GAAG,EAAE;IAC7B,OAAO,CACL,mBAeG,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/lib/app/tabs/components/ViewerComponent.js

@@ -1,6 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2022-2023 Datalayer Inc. All rights reserved.
+ *
+ * MIT License
+ */
 import Viewer from '../../../components/viewer/Viewer';
-import nbformat from "../../..//examples/notebooks/IPyWidgetsExample1.ipynb.json";
+import nbformat from '../../..//examples/notebooks/IPyWidgetsExample.ipynb.json';
 const ViewerComponent = () => {
     return (_jsx(_Fragment, { children: _jsx(Viewer, { nbformat: nbformat, outputs: true }) }));
 };

package/lib/app/tabs/components/ViewerComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ViewerComponent.js","sourceRoot":"","sources":["../../../../src/app/tabs/components/ViewerComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mCAAmC,CAAC;AAEvD,OAAO,QAAQ,MAAM,4DAA4D,CAAC;AAElF,MAAM,eAAe,GAAG,GAAG,EAAE;IAC3B,OAAO,CACL,4BACE,KAAC,MAAM,IAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,GAAG,GAC3C,CACJ,CAAA;AACH,CAAC,CAAA;AAED,eAAe,eAAe,CAAC"}
+{"version":3,"file":"ViewerComponent.js","sourceRoot":"","sources":["../../../../src/app/tabs/components/ViewerComponent.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,OAAO,MAAM,MAAM,mCAAmC,CAAC;AAEvD,OAAO,QAAQ,MAAM,2DAA2D,CAAC;AAEjF,MAAM,eAAe,GAAG,GAAG,EAAE;IAC3B,OAAO,CACL,4BACE,KAAC,MAAM,IAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,GAAI,GAC5C,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/button/Button.d.ts

@@ -0,0 +1,7 @@
+import { ButtonProps } from '@primer/react';
+import type { FC } from 'react';
+/**
+ * Primer button tuned to fit JupyterLab dialog button
+ */
+export declare const Button: FC<ButtonProps>;
+export default Button;

package/lib/components/button/Button.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2022-2023 Datalayer Inc. All rights reserved.
+ *
+ * MIT License
+ */
+import { Button as BaseButton } from '@primer/react';
+/**
+ * Primer button tuned to fit JupyterLab dialog button
+ */
+export const Button = props => {
+    const sx = {};
+    switch (props.variant) {
+        case 'danger':
+            sx.backgroundColor = 'var(--jp-error-color1)';
+            sx.color = 'btn.primary.text';
+            sx.borderWidth = 0;
+            break;
+        case 'primary':
+            sx.borderWidth = 0;
+            break;
+        case 'invisible':
+            break;
+        default:
+            sx.backgroundColor = 'var(--jp-reject-color-normal)';
+            sx.color = 'btn.primary.text';
+            sx.borderWidth = 0;
+            // @ts-expect-error unknow index
+            sx[':active:not([disabled]):not([data-inactive])'] = {
+                backgroundColor: 'var(--jp-reject-color-active)',
+                color: 'btn.primary.text',
+            };
+            // @ts-expect-error unknow index
+            sx[':hover:not([disabled]):not([data-inactive])'] = {
+                backgroundColor: 'var(--jp-reject-color-hover)',
+                color: 'btn.primary.text',
+            };
+            break;
+    }
+    return _jsx(BaseButton, { sx: sx, ...props });
+};
+export default Button;
+//# sourceMappingURL=Button.js.map

package/lib/components/button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/button/Button.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,OAAO,EAAE,MAAM,IAAI,UAAU,EAAe,MAAM,eAAe,CAAC;AAIlE;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAoB,KAAK,CAAC,EAAE;IAC7C,MAAM,EAAE,GAAwB,EAAE,CAAC;IACnC,QAAQ,KAAK,CAAC,OAAO,EAAE;QACrB,KAAK,QAAQ;YACX,EAAE,CAAC,eAAe,GAAG,wBAAwB,CAAC;YAC9C,EAAE,CAAC,KAAK,GAAG,kBAAkB,CAAC;YAC9B,EAAE,CAAC,WAAW,GAAG,CAAC,CAAC;YACnB,MAAM;QACR,KAAK,SAAS;YACZ,EAAE,CAAC,WAAW,GAAG,CAAC,CAAC;YACnB,MAAM;QACR,KAAK,WAAW;YACd,MAAM;QACR;YACE,EAAE,CAAC,eAAe,GAAG,+BAA+B,CAAC;YACrD,EAAE,CAAC,KAAK,GAAG,kBAAkB,CAAC;YAC9B,EAAE,CAAC,WAAW,GAAG,CAAC,CAAC;YACnB,gCAAgC;YAChC,EAAE,CAAC,8CAA8C,CAAC,GAAG;gBACnD,eAAe,EAAE,+BAA+B;gBAChD,KAAK,EAAE,kBAAkB;aAC1B,CAAC;YACF,gCAAgC;YAChC,EAAE,CAAC,6CAA6C,CAAC,GAAG;gBAClD,eAAe,EAAE,8BAA8B;gBAC/C,KAAK,EAAE,kBAAkB;aAC1B,CAAC;YACF,MAAM;KACT;IACD,OAAO,KAAC,UAAU,IAAC,EAAE,EAAE,EAAE,KAAM,KAAK,GAAI,CAAC;AAC3C,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/components/cell/Cell.js

@@ -1,9 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2022-2023 Datalayer Inc. All rights reserved.
+ *
+ * MIT License
+ */
 import { useState, useEffect, useMemo } from 'react';
-import { useDispatch } from "react-redux";
+import { useDispatch } from 'react-redux';
 import { CodeCell } from '@jupyterlab/cells';
-import { Box } from "@primer/react";
-import { cellActions, cellReducer } from './CellState';
+import { Box } from '@primer/react';
+import { cellActions, cellReducer } from './CellRedux';
 import CellAdapter from './CellAdapter';
 import Lumino from '../../jupyter/lumino/Lumino';
 import { useJupyter } from './../../jupyter/JupyterContext';
@@ -49,36 +54,32 @@ export const Cell = (props) => {
             });
         }
     }, [source, defaultKernel]);
-    return adapter
-        ?
-            _jsx(Box, { sx: {
-                    '& .dla-Jupyter-Cell': {
-                        position: 'relative !important',
-                        contain: 'content !important',
-                    },
-                    '& .jp-Toolbar': {
-                        height: 'auto !important',
-                        position: 'relative',
-                    },
-                    '& .lm-BoxPanel': {
-                        position: 'relative',
-                    },
-                    '& .jp-Cell': {
-                        position: 'relative',
-                    },
-                    '& .jp-CodeCell': {
-                        height: 'auto !important',
-                        position: 'relative',
-                    },
-                    '& .jp-Cell-outputArea': {
-                        paddingBottom: '30px',
-                    },
-                    '& .jp-CodeMirrorEditor': {
-                        cursor: 'text !important',
-                    },
-                }, children: _jsx(Lumino, { children: adapter.panel }) })
-        :
-            _jsx(Box, { children: "Loading Jupyter Cell..." });
+    return adapter ? (_jsx(Box, { sx: {
+            '& .dla-Jupyter-Cell': {
+                position: 'relative !important',
+                contain: 'content !important',
+            },
+            '& .jp-Toolbar': {
+                height: 'auto !important',
+                position: 'relative',
+            },
+            '& .lm-BoxPanel': {
+                position: 'relative',
+            },
+            '& .jp-Cell': {
+                position: 'relative',
+            },
+            '& .jp-CodeCell': {
+                height: 'auto !important',
+                position: 'relative',
+            },
+            '& .jp-Cell-outputArea': {
+                paddingBottom: '30px',
+            },
+            '& .jp-CodeMirrorEditor': {
+                cursor: 'text !important',
+            },
+        }, children: _jsx(Lumino, { children: adapter.panel }) })) : (_jsx(Box, { children: "Loading Jupyter Cell..." }));
 };
 Cell.defaultProps = {
     source: DEFAULT_SOURCE,

package/lib/components/cell/Cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"Cell.js","sourceRoot":"","sources":["../../../src/components/cell/Cell.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Cell.js","sourceRoot":"","sources":["../../../src/components/cell/Cell.tsx"],"names":[],"mappings":"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"}

package/lib/components/cell/CellAdapter.d.ts

@@ -9,6 +9,7 @@ export declare class CellAdapter {
     private _panel;
     private _sessionContext;
     constructor(options: CellAdapter.ICellAdapterOptions);
+    private setupCell;
     get panel(): BoxPanel;
     get codeCell(): CodeCell;
     get sessionContext(): SessionContext;

package/lib/components/cell/CellAdapter.js

@@ -1,17 +1,22 @@
+/*
+ * Copyright (c) 2022-2023 Datalayer Inc. All rights reserved.
+ *
+ * MIT License
+ */
 import { BoxPanel, Widget } from '@lumino/widgets';
 import { find } from '@lumino/algorithm';
 import { CommandRegistry } from '@lumino/commands';
-import { SessionContext, Toolbar, ToolbarButton } from '@jupyterlab/apputils';
+import { SessionContext, Toolbar, ToolbarButton, } from '@jupyterlab/apputils';
 import { CodeCellModel, CodeCell, Cell } from '@jupyterlab/cells';
-import { ybinding, CodeMirrorMimeTypeService, EditorLanguageRegistry, CodeMirrorEditorFactory, EditorExtensionRegistry, EditorThemeRegistry } from '@jupyterlab/codemirror';
-import { Completer, CompleterModel, CompletionHandler, ProviderReconciliator, KernelCompleterProvider } from '@jupyterlab/completer';
-import { RenderMimeRegistry, standardRendererFactories as initialFactories } from '@jupyterlab/rendermime';
-import { SessionManager, KernelManager, KernelSpecManager } from '@jupyterlab/services';
+import { ybinding, CodeMirrorMimeTypeService, EditorLanguageRegistry, CodeMirrorEditorFactory, EditorExtensionRegistry, EditorThemeRegistry, } from '@jupyterlab/codemirror';
+import { Completer, CompleterModel, CompletionHandler, ProviderReconciliator, KernelCompleterProvider, } from '@jupyterlab/completer';
+import { RenderMimeRegistry, standardRendererFactories as initialFactories, } from '@jupyterlab/rendermime';
+import { SessionManager, KernelManager, KernelSpecManager, } from '@jupyterlab/services';
 import { runIcon } from '@jupyterlab/ui-components';
 import { createStandaloneCell } from '@jupyter/ydoc';
-import { requireLoader as loader } from "@jupyter-widgets/html-manager";
-import { WIDGET_MIMETYPE, WidgetRenderer } from "@jupyter-widgets/html-manager/lib/output_renderers";
-import IPyWidgetsManager from "../../jupyter/ipywidgets/IPyWidgetsManager";
+import { requireLoader as loader } from '@jupyter-widgets/html-manager';
+import { WIDGET_MIMETYPE, WidgetRenderer, } from '@jupyter-widgets/html-manager/lib/output_renderers';
+import IPyWidgetsClassicManager from '../../jupyter/ipywidgets/manager/IPyWidgetsClassicManager';
 import CellCommands from './CellCommands';
 export class CellAdapter {
     _codeCell;
@@ -21,30 +26,35 @@ export class CellAdapter {
     constructor(options) {
         const { source, serverSettings, kernel } = options;
         this._kernel = kernel;
-        const kernelManager = kernel?.kernelManager ?? new KernelManager({
-            serverSettings
-        });
-        const sessionManager = kernel?.sessionManager ?? new SessionManager({
-            serverSettings,
-            kernelManager
-        });
-        const specsManager = kernel?.kernelSpecManager ?? new KernelSpecManager({
-            serverSettings
-        });
-        const kernelPreference = kernel ?
-            {
+        this.setupCell(source, serverSettings, kernel);
+    }
+    setupCell(source, serverSettings, kernel) {
+        const kernelManager = kernel.kernelManager ??
+            new KernelManager({
+                serverSettings,
+            });
+        const sessionManager = kernel.sessionManager ??
+            new SessionManager({
+                serverSettings,
+                kernelManager,
+            });
+        const specsManager = kernel.kernelSpecManager ??
+            new KernelSpecManager({
+                serverSettings,
+            });
+        const kernelPreference = kernel
+            ? {
                 id: kernel.id,
                 shouldStart: false,
                 autoStartDefault: false,
                 shutdownOnDispose: false,
             }
-            :
-                {
-                    name: 'python',
-                    shouldStart: true,
-                    autoStartDefault: true,
-                    shutdownOnDispose: true,
-                };
+            : {
+                name: 'python',
+                shouldStart: true,
+                autoStartDefault: true,
+                shutdownOnDispose: true,
+            };
         this._sessionContext = new SessionContext({
             name: kernel?.path,
             path: kernel?.path,
@@ -55,7 +65,8 @@ export class CellAdapter {
         });
         // These are fixes to have more control on the kernel launch.
         this._sessionContext._initialize = async () => {
-            const manager = this._sessionContext.sessionManager;
+            const manager = this._sessionContext
+                .sessionManager;
             await manager.ready;
             await manager.refreshRunning();
             const model = find(manager.running(), item => {
@@ -68,7 +79,7 @@ export class CellAdapter {
                         model,
                         kernelConnectionOptions: {
                             handleComms: true,
-                        }
+                        },
                     });
                     this._sessionContext._handleNewSession(session);
                 }
@@ -96,7 +107,7 @@ export class CellAdapter {
                         ytext: sharedModel.ysource,
                         undoManager: sharedModel.undoManager ?? undefined,
                     }));
-                }
+                },
             });
             return registry;
         };
@@ -111,9 +122,9 @@ export class CellAdapter {
                 // TODO: add support for LaTeX.
                 const m = await import('@codemirror/lang-markdown');
                 return m.markdown({
-                    codeLanguages: (info) => languages.findBest(info)
+                    codeLanguages: (info) => languages.findBest(info),
                 });
-            }
+            },
         });
         const mimeService = new CodeMirrorMimeTypeService(languages);
         const commands = new CommandRegistry();
@@ -122,12 +133,13 @@ export class CellAdapter {
             commands.processKeydownEvent(event);
         }, useCapture);
         const rendermime = new RenderMimeRegistry({ initialFactories });
-        const iPyWidgetsClassicManager = new IPyWidgetsManager({ loader });
+        const iPyWidgetsClassicManager = new IPyWidgetsClassicManager({ loader });
         rendermime.addFactory({
             safe: false,
             mimeTypes: [WIDGET_MIMETYPE],
-            createRenderer: (options) => new WidgetRenderer(options, iPyWidgetsClassicManager),
+            createRenderer: options => new WidgetRenderer(options, iPyWidgetsClassicManager),
         }, 0);
+        iPyWidgetsClassicManager.registerWithKernel(kernel.connection);
         const factoryService = new CodeMirrorEditorFactory({
             extensions: editorExtensions(),
             languages,
@@ -138,8 +150,8 @@ export class CellAdapter {
                 sharedModel: createStandaloneCell({
                     cell_type: 'code',
                     source: source,
-                    metadata: {}
-                })
+                    metadata: {},
+                }),
             }),
             contentFactory: new Cell.ContentFactory({
                 editorFactory: factoryService.newInlineEditor.bind(factoryService),
@@ -151,9 +163,9 @@ export class CellAdapter {
             const kernelConnection = arg.newValue;
             console.log('Current Kernel Connection', kernelConnection);
             if (kernelConnection && !kernelConnection.handleComms) {
-                console.warn('The Kernel Connection does not handle Comms', kernelConnection.id);
+                console.warn('Kernel Connection does not handle Comms', kernelConnection.id);
                 kernelConnection.handleComms = true;
-                console.log('The Kernel Connection is updated to enforce Comms support', kernelConnection.handleComms);
+                console.log('Kernel Connection is updated to enforce Comms support', kernelConnection.handleComms);
             }
             iPyWidgetsClassicManager.registerWithKernel(kernelConnection);
         });
@@ -170,7 +182,11 @@ export class CellAdapter {
         const timeout = 1000;
         const provider = new KernelCompleterProvider();
         const reconciliator = new ProviderReconciliator({
-            context: { widget: this._codeCell, editor, session: this._sessionContext.session },
+            context: {
+                widget: this._codeCell,
+                editor,
+                session: this._sessionContext.session,
+            },
             providers: [provider],
             timeout,
         });
@@ -178,7 +194,11 @@ export class CellAdapter {
         void this._sessionContext.ready.then(() => {
             const provider = new KernelCompleterProvider();
             handler.reconciliator = new ProviderReconciliator({
-                context: { widget: this._codeCell, editor, session: this._sessionContext.session },
+                context: {
+                    widget: this._codeCell,
+                    editor,
+                    session: this._sessionContext.session,
+                },
                 providers: [provider],
                 timeout,
             });
@@ -195,7 +215,7 @@ export class CellAdapter {
             onClick: () => {
                 CodeCell.execute(this._codeCell, this._sessionContext);
             },
-            tooltip: 'Run'
+            tooltip: 'Run',
         });
         toolbar.addItem('run', runButton);
         toolbar.addItem('interrupt', Toolbar.createInterruptButton(this._sessionContext));