analysis-ui-components - npm Package Compare versions

Comparing version 0.9.3 to 0.10.0

lib-esm/layout/Accordion.js

@@ -39,3 +39,3 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 export function Accordion(props) {
-    return _jsx("div", Object.assign({ css: styles.container }, { children: props.children }), void 0);
+    return _jsx("div", { css: styles.container, children: props.children }, void 0);
 }
@@ -56,7 +56,7 @@ Accordion.Item = function AccordionItem(props) {
     }
-    return (_jsxs("div", Object.assign({ style: {
+    return (_jsxs("div", { style: {
             flex: displayable ? '1 1 1px' : 'none',
             display: 'flex',
             flexDirection: 'column',
-        } }, { children: [_jsx("button", Object.assign({ onClick: onClickHandle, type: "button", style: {
+        }, children: [_jsx("button", { onClick: onClickHandle, type: "button", style: {
                     display: 'flex',
@@ -66,3 +66,3 @@ alignItems: 'center',
                     userSelect: 'text',
-                }, css: styles.header }, { children: props.title }), void 0), _jsx("div", Object.assign({ style: {
+                }, css: styles.header, children: props.title }, void 0), _jsx("div", { style: {
                     display: displayable ? 'flex' : 'none',
@@ -73,3 +73,3 @@ flex: displayable ? '1 1 1px' : 'none',
                     overflow: 'hidden',
-                } }, { children: _jsx("div", Object.assign({ style: {
+                }, children: _jsx("div", { style: {
                         height: '100%',
@@ -80,4 +80,4 @@ width: '100%',
                         flexDirection: 'column',
-                    } }, { children: props.children }), void 0) }), void 0)] }), void 0));
+                    }, children: props.children }, void 0) }, void 0)] }, void 0));
 };
 //# sourceMappingURL=Accordion.js.map

lib-esm/layout/Button.js

@@ -9,3 +9,3 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
     }, color = { basic: 'white', hover: 'white' }, } = props;
-    return (_jsx("button", Object.assign({ onClick: props.onClick, css: css({
+    return (_jsx("button", { onClick: props.onClick, css: css({
             display: 'flex',
@@ -29,4 +29,4 @@ alignItems: 'center',
             },
-        }), type: "button" }, { children: props.children }), void 0));
+        }), type: "button", children: props.children }, void 0));
 }
 //# sourceMappingURL=Button.js.map

lib-esm/layout/DropZone.js

@@ -28,3 +28,3 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
     }, [onClick]);
-    return (_jsxs("div", Object.assign({}, getRootProps(getPropsOptions), { css: css `
+    return (_jsxs("div", { ...getRootProps(getPropsOptions), css: css `
         overflow: hidden;
@@ -40,10 +40,10 @@ position: relative;
         justify-content: center;
-      ` }, { children: [_jsxs("div", Object.assign({ css: css `
+      `, children: [_jsxs("div", { css: css `
           text-align: center;
           font-weight: 600;
           width: 100%;
-        ` }, { children: [_jsx("div", Object.assign({ css: css `
+        `, children: [_jsx("div", { css: css `
             width: 100%;
             opacity: ${isDragActive ? 0.3 : 1};
-          ` }, { children: children }), void 0), isDragActive ? (_jsx(_Fragment, { children: _jsxs("div", Object.assign({ css: css `
+          `, children: children }, void 0), isDragActive ? (_jsx(_Fragment, { children: _jsxs("div", { css: css `
                 position: absolute;
@@ -53,5 +53,5 @@ top: 50%;
                 transform: translate(-50%, -50%);
-              ` }, { children: [_jsx(FaCloudUploadAlt, { size: 70, css: css `
+              `, children: [_jsx(FaCloudUploadAlt, { size: 70, css: css `
                   margin: auto;
-                ` }, void 0), _jsx("p", { children: "Drop the files here" }, void 0)] }), void 0) }, void 0)) : isContainer ? null : (_jsx("p", { children: "Drag and drop your files here, or click to select files" }, void 0))] }), void 0), _jsx("input", Object.assign({ css: css `
+                ` }, void 0), _jsx("p", { children: "Drop the files here" }, void 0)] }, void 0) }, void 0)) : isContainer ? null : (_jsx("p", { children: "Drag and drop your files here, or click to select files" }, void 0))] }, void 0), _jsx("input", { css: css `
           opacity: 0;
@@ -63,4 +63,4 @@ position: absolute;
           height: 100%;
-        ` }, getInputProps()), void 0)] }), void 0));
+        `, ...getInputProps() }, void 0)] }, void 0));
 }
 //# sourceMappingURL=DropZone.js.map

lib-esm/layout/Header.js

@@ -15,4 +15,4 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 export function Header(props) {
-    return (_jsxs("div", Object.assign({ css: styles.header }, { children: [_jsx("div", { children: props.children[0] }, void 0), _jsx("div", { children: props.children[1] }, void 0)] }), void 0));
+    return (_jsxs("div", { css: styles.header, children: [_jsx("div", { children: props.children[0] }, void 0), _jsx("div", { children: props.children[1] }, void 0)] }, void 0));
 }
 //# sourceMappingURL=Header.js.map

lib-esm/layout/hooks/useModal.d.ts

@@ -1,3 +0,9 @@
-export declare function useModal(options: {
+export interface UseModalOptions {
     defaultOpened?: boolean;
-}): [isOpen: boolean, open: () => void, close: () => void];
+}
+export declare type UseModalReturn = [
+    isOpen: boolean,
+    open: () => void,
+    close: () => void
+];
+export declare function useModal(options?: UseModalOptions): UseModalReturn;

lib-esm/layout/hooks/useModal.js

 import { useOnOff } from './useOnOff';
-export function useModal(options) {
+export function useModal(options = {}) {
     const { defaultOpened = false } = options;
@@ -4,0 +4,0 @@ const [isOpen, open, close] = useOnOff(defaultOpened);

lib-esm/layout/Modal.js

@@ -17,3 +17,3 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
                     left: 0,
-                } }, void 0), _jsx("div", Object.assign({ style: {
+                } }, void 0), _jsx("div", { style: {
                     maxHeight: '90%',
@@ -38,6 +38,6 @@ maxWidth: props.maxWidth,
                     justifyContent: 'space-between',
-                } }, { children: props.children }), void 0)] }, void 0));
+                }, children: props.children }, void 0)] }, void 0));
 }
 Modal.Header = function ModalHeader(props) {
-    return (_jsxs("div", Object.assign({ style: {
+    return (_jsxs("div", { style: {
             display: 'flex',
@@ -48,17 +48,17 @@ alignItems: 'center',
             borderBottom: '2px solid rgb(247, 247, 247)',
-        } }, { children: [props.children, _jsx("button", Object.assign({ type: "button", onClick: props.onClose, css: css({
+        }, children: [props.children, _jsx("button", { type: "button", onClick: props.onClose, css: css({
                     color: 'rgba(239, 68, 68)',
                     fontSize: 18,
                     ':hover': { color: 'rgba(185, 28, 28)' },
-                }) }, { children: _jsx(FaTimes, {}, void 0) }), void 0)] }), void 0));
+                }), children: _jsx(FaTimes, {}, void 0) }, void 0)] }, void 0));
 };
 Modal.Body = function ModalBody(props) {
-    return (_jsx("div", Object.assign({ style: { display: 'flex', flex: '1 1 0%', overflowY: 'auto' } }, { children: props.children }), void 0));
+    return (_jsx("div", { style: { display: 'flex', flex: '1 1 0%', overflowY: 'auto' }, children: props.children }, void 0));
 };
 Modal.Footer = function ModalFooter(props) {
-    return (_jsx("div", Object.assign({ style: {
+    return (_jsx("div", { style: {
             borderTop: '2px solid rgb(247, 247, 247)',
             padding: '10px 20px 10px 20px',
-        } }, { children: props.children }), void 0));
+        }, children: props.children }, void 0));
 };
 //# sourceMappingURL=Modal.js.map

lib-esm/layout/RootLayout.js

@@ -5,3 +5,3 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { useState, useCallback } from 'react';
-// import root from 'react-shadow/emotion';
+import root from 'react-shadow/emotion';
 import { AccordionProvider } from './context/AccordionContext';
@@ -22,6 +22,4 @@ import { RootLayoutProvider } from './context/RootLayoutContext';
     }, []);
-    return (
-    // TODO: use `<root.div` when Playwright and React dev tools work better with shadow dom.
-    _jsxs("div", Object.assign({ style: { ...style, ...props.style } }, { children: [_jsx(Global, { styles: [preflight, customPreflight] }, void 0), _jsx("div", Object.assign({ ref: ref, css: customDivPreflight, style: { width: '100%', height: '100%', position: 'relative' } }, { children: _jsx(RootLayoutProvider, Object.assign({ innerRef: state }, { children: _jsx(AccordionProvider, { children: props.children }, void 0) }), void 0) }), void 0)] }), void 0));
+    return (_jsxs(root.div, { style: { ...style, ...props.style }, children: [_jsx(Global, { styles: [preflight, customPreflight] }, void 0), _jsx("div", { ref: ref, css: customDivPreflight, style: { width: '100%', height: '100%', position: 'relative' }, children: _jsx(RootLayoutProvider, { innerRef: state, children: _jsx(AccordionProvider, { children: props.children }, void 0) }, void 0) }, void 0)] }, void 0));
 }
 //# sourceMappingURL=RootLayout.js.map

lib-esm/layout/SplitPane.js

@@ -65,6 +65,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
     const isFinalClosed = isParentClosed ? true : isSidePaneClosed;
-    return (_jsxs("div", Object.assign({ ref: parentRef, onMouseUp: onMouseUp, css: css([
+    return (_jsxs("div", { ref: parentRef, onMouseUp: onMouseUp, css: css([
             { display: 'flex', height: '100%', width: '100%' },
             orientation === 'vertical' && { flexDirection: 'column' },
-        ]) }, { children: [_jsx(splitPaneContext.Provider, Object.assign({ value: isFinalClosed && sideSeparation === 'start' }, { children: _jsx("div", Object.assign({ style: cssStyles.item(isFinalClosed, sideSeparation === 'start', orientation, size, type) }, { children: children[0] }), void 0) }), void 0), _jsx("div", Object.assign({ onDoubleClick: toggle, onMouseDown: onMouseDown, onMouseUp: onMouseUp, css: cssStyles.separator(orientation, !isFinalClosed) }, { children: _jsx("div", Object.assign({ css: css({ fontSize: 10 }) }, { children: orientation === 'horizontal' ? _jsx("span", { children: "\u22EE" }, void 0) : _jsx("span", { children: "\u22EF" }, void 0) }), void 0) }), void 0), _jsx(splitPaneContext.Provider, Object.assign({ value: isFinalClosed && sideSeparation === 'end' }, { children: _jsx("div", Object.assign({ style: cssStyles.item(isFinalClosed, sideSeparation === 'end', orientation, size, type) }, { children: children[1] }), void 0) }), void 0)] }), void 0));
+        ]), children: [_jsx(splitPaneContext.Provider, { value: isFinalClosed && sideSeparation === 'start', children: _jsx("div", { style: cssStyles.item(isFinalClosed, sideSeparation === 'start', orientation, size, type), children: children[0] }, void 0) }, void 0), _jsx("div", { onDoubleClick: toggle, onMouseDown: onMouseDown, onMouseUp: onMouseUp, css: cssStyles.separator(orientation, !isFinalClosed), children: _jsx("div", { css: css({ fontSize: 10 }), children: orientation === 'horizontal' ? _jsx("span", { children: "\u22EE" }, void 0) : _jsx("span", { children: "\u22EF" }, void 0) }, void 0) }, void 0), _jsx(splitPaneContext.Provider, { value: isFinalClosed && sideSeparation === 'end', children: _jsx("div", { style: cssStyles.item(isFinalClosed, sideSeparation === 'end', orientation, size, type), children: children[1] }, void 0) }, void 0)] }, void 0));
 }
@@ -71,0 +71,0 @@ function getSize(orientation, separation) {

lib-esm/layout/Tabs.js

@@ -36,23 +36,23 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
     if (orientation === 'horizontal') {
-        return (_jsx(TabsProvider, Object.assign({ opened: opened }, { children: _jsx(TabsHorizontal, { items: items, onClick: onClick }, void 0) }), void 0));
+        return (_jsx(TabsProvider, { opened: opened, children: _jsx(TabsHorizontal, { items: items, onClick: onClick }, void 0) }, void 0));
     }
-    return (_jsx(TabsProvider, Object.assign({ opened: opened }, { children: _jsx(TabsVertical, { items: items, onClick: onClick }, void 0) }), void 0));
+    return (_jsx(TabsProvider, { opened: opened, children: _jsx(TabsVertical, { items: items, onClick: onClick }, void 0) }, void 0));
 }
 function TabsItem(props) {
     const item = useTabsContext();
-    return (_jsx("button", Object.assign({ type: "button", onClick: props.onClick, css: styles.item(item.id === props.id, props.orientation) }, { children: props.title }), void 0));
+    return (_jsx("button", { type: "button", onClick: props.onClick, css: styles.item(item.id === props.id, props.orientation), children: props.title }, void 0));
 }
 function TabsVertical(props) {
     const item = useTabsContext();
-    return (_jsxs("div", Object.assign({ style: { display: 'flex', flexDirection: 'row', flex: '1 1 0%' } }, { children: [_jsx("div", Object.assign({ style: {
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'row', flex: '1 1 0%' }, children: [_jsx("div", { style: {
                     display: 'flex',
                     flexDirection: 'column',
                     borderRight: '1px solid hsl(0deg, 0%, 80%)',
-                } }, { children: props.items.map((item) => (_jsx(TabsItem, { orientation: "vertical", title: item.title, id: item.id, onClick: () => {
+                }, children: props.items.map((item) => (_jsx(TabsItem, { orientation: "vertical", title: item.title, id: item.id, onClick: () => {
                         props.onClick?.(item);
-                    } }, item.id))) }), void 0), _jsx("div", Object.assign({ style: { flex: '1 1 0%', overflowY: 'auto' } }, { children: item.content }), void 0)] }), void 0));
+                    } }, item.id))) }, void 0), _jsx("div", { style: { flex: '1 1 0%', overflowY: 'auto' }, children: item.content }, void 0)] }, void 0));
 }
 function TabsHorizontal(props) {
     const item = useTabsContext();
-    return (_jsxs("div", Object.assign({ style: { display: 'flex', flexDirection: 'column' } }, { children: [_jsx("div", Object.assign({ style: {
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx("div", { style: {
                     display: 'flex',
@@ -62,6 +62,6 @@ flexDirection: 'row',
                     borderBottom: '1px solid hsl(0deg, 0%, 80%)',
-                } }, { children: props.items.map((item) => (_jsx(TabsItem, { orientation: "horizontal", id: item.id, title: item.title, onClick: () => {
+                }, children: props.items.map((item) => (_jsx(TabsItem, { orientation: "horizontal", id: item.id, title: item.title, onClick: () => {
                         props.onClick?.(item);
-                    } }, item.id))) }), void 0), _jsx("div", Object.assign({ style: { flex: '1 1 0%', overflowX: 'auto' } }, { children: item.content }), void 0)] }), void 0));
+                    } }, item.id))) }, void 0), _jsx("div", { style: { flex: '1 1 0%', overflowX: 'auto' }, children: item.content }, void 0)] }, void 0));
 }
 //# sourceMappingURL=Tabs.js.map

lib-esm/layout/Toolbar.js

@@ -101,3 +101,3 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
     }, [orientation]);
-    return (_jsx("div", Object.assign({ css: styles.toolbar(orientation), ref: ref }, { children: _jsx(ToolbarProvider, Object.assign({ orientation: orientation }, { children: children }), void 0) }), void 0));
+    return (_jsx("div", { css: styles.toolbar(orientation), ref: ref, children: _jsx(ToolbarProvider, { orientation: orientation, children: children }, void 0) }, void 0));
 }
@@ -107,12 +107,12 @@ Toolbar.Item = function ToolbarItem(props) {
     const { active = false, children, onClick, title, titleOrientation = 'auto', id, ...other } = props;
-    return (_jsxs("div", Object.assign({ style: { position: 'relative', padding: 4 } }, other, { children: [_jsx("button", Object.assign({ type: "button", css: styles.item(active), onClick: () => {
+    return (_jsxs("div", { style: { position: 'relative', padding: 4 }, ...other, children: [_jsx("button", { type: "button", css: styles.item(active), onClick: () => {
                     if (onClick) {
                         onClick(props);
                     }
-                } }, { children: children }), void 0), _jsx("div", Object.assign({ className: "content", css: styles.tooltip(orientation, titleOrientation) }, { children: _jsx("span", Object.assign({ style: {
+                }, children: children }, void 0), _jsx("div", { className: "content", css: styles.tooltip(orientation, titleOrientation), children: _jsx("span", { style: {
                         display: 'flex',
                         margin: 'auto',
                         justifyContent: 'center',
-                    } }, { children: title }), void 0) }), void 0)] }), void 0));
+                    }, children: title }, void 0) }, void 0)] }, void 0));
 };
 //# sourceMappingURL=Toolbar.js.map

lib/layout/Accordion.js

@@ -39,3 +39,3 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 export function Accordion(props) {
-    return _jsx("div", Object.assign({ css: styles.container }, { children: props.children }), void 0);
+    return _jsx("div", { css: styles.container, children: props.children }, void 0);
 }
@@ -56,7 +56,7 @@ Accordion.Item = function AccordionItem(props) {
     }
-    return (_jsxs("div", Object.assign({ style: {
+    return (_jsxs("div", { style: {
             flex: displayable ? '1 1 1px' : 'none',
             display: 'flex',
             flexDirection: 'column',
-        } }, { children: [_jsx("button", Object.assign({ onClick: onClickHandle, type: "button", style: {
+        }, children: [_jsx("button", { onClick: onClickHandle, type: "button", style: {
                     display: 'flex',
@@ -66,3 +66,3 @@ alignItems: 'center',
                     userSelect: 'text',
-                }, css: styles.header }, { children: props.title }), void 0), _jsx("div", Object.assign({ style: {
+                }, css: styles.header, children: props.title }, void 0), _jsx("div", { style: {
                     display: displayable ? 'flex' : 'none',
@@ -73,3 +73,3 @@ flex: displayable ? '1 1 1px' : 'none',
                     overflow: 'hidden',
-                } }, { children: _jsx("div", Object.assign({ style: {
+                }, children: _jsx("div", { style: {
                         height: '100%',
@@ -80,3 +80,3 @@ width: '100%',
                         flexDirection: 'column',
-                    } }, { children: props.children }), void 0) }), void 0)] }), void 0));
+                    }, children: props.children }, void 0) }, void 0)] }, void 0));
 };

lib/layout/Button.js

@@ -9,3 +9,3 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
     }, color = { basic: 'white', hover: 'white' }, } = props;
-    return (_jsx("button", Object.assign({ onClick: props.onClick, css: css({
+    return (_jsx("button", { onClick: props.onClick, css: css({
             display: 'flex',
@@ -29,3 +29,3 @@ alignItems: 'center',
             },
-        }), type: "button" }, { children: props.children }), void 0));
+        }), type: "button", children: props.children }, void 0));
 }

lib/layout/DropZone.js

@@ -28,3 +28,3 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
     }, [onClick]);
-    return (_jsxs("div", Object.assign({}, getRootProps(getPropsOptions), { css: css `
+    return (_jsxs("div", { ...getRootProps(getPropsOptions), css: css `
         overflow: hidden;
@@ -40,10 +40,10 @@ position: relative;
         justify-content: center;
-      ` }, { children: [_jsxs("div", Object.assign({ css: css `
+      `, children: [_jsxs("div", { css: css `
           text-align: center;
           font-weight: 600;
           width: 100%;
-        ` }, { children: [_jsx("div", Object.assign({ css: css `
+        `, children: [_jsx("div", { css: css `
             width: 100%;
             opacity: ${isDragActive ? 0.3 : 1};
-          ` }, { children: children }), void 0), isDragActive ? (_jsx(_Fragment, { children: _jsxs("div", Object.assign({ css: css `
+          `, children: children }, void 0), isDragActive ? (_jsx(_Fragment, { children: _jsxs("div", { css: css `
                 position: absolute;
@@ -53,5 +53,5 @@ top: 50%;
                 transform: translate(-50%, -50%);
-              ` }, { children: [_jsx(FaCloudUploadAlt, { size: 70, css: css `
+              `, children: [_jsx(FaCloudUploadAlt, { size: 70, css: css `
                   margin: auto;
-                ` }, void 0), _jsx("p", { children: "Drop the files here" }, void 0)] }), void 0) }, void 0)) : isContainer ? null : (_jsx("p", { children: "Drag and drop your files here, or click to select files" }, void 0))] }), void 0), _jsx("input", Object.assign({ css: css `
+                ` }, void 0), _jsx("p", { children: "Drop the files here" }, void 0)] }, void 0) }, void 0)) : isContainer ? null : (_jsx("p", { children: "Drag and drop your files here, or click to select files" }, void 0))] }, void 0), _jsx("input", { css: css `
           opacity: 0;
@@ -63,3 +63,3 @@ position: absolute;
           height: 100%;
-        ` }, getInputProps()), void 0)] }), void 0));
+        `, ...getInputProps() }, void 0)] }, void 0));
 }

lib/layout/Header.js

@@ -15,3 +15,3 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 export function Header(props) {
-    return (_jsxs("div", Object.assign({ css: styles.header }, { children: [_jsx("div", { children: props.children[0] }, void 0), _jsx("div", { children: props.children[1] }, void 0)] }), void 0));
+    return (_jsxs("div", { css: styles.header, children: [_jsx("div", { children: props.children[0] }, void 0), _jsx("div", { children: props.children[1] }, void 0)] }, void 0));
 }

lib/layout/hooks/useModal.js

 import { useOnOff } from './useOnOff';
-export function useModal(options) {
+export function useModal(options = {}) {
     const { defaultOpened = false } = options;
@@ -4,0 +4,0 @@ const [isOpen, open, close] = useOnOff(defaultOpened);

lib/layout/Modal.js

@@ -17,3 +17,3 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
                     left: 0,
-                } }, void 0), _jsx("div", Object.assign({ style: {
+                } }, void 0), _jsx("div", { style: {
                     maxHeight: '90%',
@@ -38,6 +38,6 @@ maxWidth: props.maxWidth,
                     justifyContent: 'space-between',
-                } }, { children: props.children }), void 0)] }, void 0));
+                }, children: props.children }, void 0)] }, void 0));
 }
 Modal.Header = function ModalHeader(props) {
-    return (_jsxs("div", Object.assign({ style: {
+    return (_jsxs("div", { style: {
             display: 'flex',
@@ -48,16 +48,16 @@ alignItems: 'center',
             borderBottom: '2px solid rgb(247, 247, 247)',
-        } }, { children: [props.children, _jsx("button", Object.assign({ type: "button", onClick: props.onClose, css: css({
+        }, children: [props.children, _jsx("button", { type: "button", onClick: props.onClose, css: css({
                     color: 'rgba(239, 68, 68)',
                     fontSize: 18,
                     ':hover': { color: 'rgba(185, 28, 28)' },
-                }) }, { children: _jsx(FaTimes, {}, void 0) }), void 0)] }), void 0));
+                }), children: _jsx(FaTimes, {}, void 0) }, void 0)] }, void 0));
 };
 Modal.Body = function ModalBody(props) {
-    return (_jsx("div", Object.assign({ style: { display: 'flex', flex: '1 1 0%', overflowY: 'auto' } }, { children: props.children }), void 0));
+    return (_jsx("div", { style: { display: 'flex', flex: '1 1 0%', overflowY: 'auto' }, children: props.children }, void 0));
 };
 Modal.Footer = function ModalFooter(props) {
-    return (_jsx("div", Object.assign({ style: {
+    return (_jsx("div", { style: {
             borderTop: '2px solid rgb(247, 247, 247)',
             padding: '10px 20px 10px 20px',
-        } }, { children: props.children }), void 0));
+        }, children: props.children }, void 0));
 };

lib/layout/RootLayout.js

@@ -5,3 +5,3 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { useState, useCallback } from 'react';
-// import root from 'react-shadow/emotion';
+import root from 'react-shadow/emotion';
 import { AccordionProvider } from './context/AccordionContext';
@@ -22,5 +22,3 @@ import { RootLayoutProvider } from './context/RootLayoutContext';
     }, []);
-    return (
-    // TODO: use `<root.div` when Playwright and React dev tools work better with shadow dom.
-    _jsxs("div", Object.assign({ style: { ...style, ...props.style } }, { children: [_jsx(Global, { styles: [preflight, customPreflight] }, void 0), _jsx("div", Object.assign({ ref: ref, css: customDivPreflight, style: { width: '100%', height: '100%', position: 'relative' } }, { children: _jsx(RootLayoutProvider, Object.assign({ innerRef: state }, { children: _jsx(AccordionProvider, { children: props.children }, void 0) }), void 0) }), void 0)] }), void 0));
+    return (_jsxs(root.div, { style: { ...style, ...props.style }, children: [_jsx(Global, { styles: [preflight, customPreflight] }, void 0), _jsx("div", { ref: ref, css: customDivPreflight, style: { width: '100%', height: '100%', position: 'relative' }, children: _jsx(RootLayoutProvider, { innerRef: state, children: _jsx(AccordionProvider, { children: props.children }, void 0) }, void 0) }, void 0)] }, void 0));
 }

lib/layout/SplitPane.js

@@ -65,6 +65,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
     const isFinalClosed = isParentClosed ? true : isSidePaneClosed;
-    return (_jsxs("div", Object.assign({ ref: parentRef, onMouseUp: onMouseUp, css: css([
+    return (_jsxs("div", { ref: parentRef, onMouseUp: onMouseUp, css: css([
             { display: 'flex', height: '100%', width: '100%' },
             orientation === 'vertical' && { flexDirection: 'column' },
-        ]) }, { children: [_jsx(splitPaneContext.Provider, Object.assign({ value: isFinalClosed && sideSeparation === 'start' }, { children: _jsx("div", Object.assign({ style: cssStyles.item(isFinalClosed, sideSeparation === 'start', orientation, size, type) }, { children: children[0] }), void 0) }), void 0), _jsx("div", Object.assign({ onDoubleClick: toggle, onMouseDown: onMouseDown, onMouseUp: onMouseUp, css: cssStyles.separator(orientation, !isFinalClosed) }, { children: _jsx("div", Object.assign({ css: css({ fontSize: 10 }) }, { children: orientation === 'horizontal' ? _jsx("span", { children: "\u22EE" }, void 0) : _jsx("span", { children: "\u22EF" }, void 0) }), void 0) }), void 0), _jsx(splitPaneContext.Provider, Object.assign({ value: isFinalClosed && sideSeparation === 'end' }, { children: _jsx("div", Object.assign({ style: cssStyles.item(isFinalClosed, sideSeparation === 'end', orientation, size, type) }, { children: children[1] }), void 0) }), void 0)] }), void 0));
+        ]), children: [_jsx(splitPaneContext.Provider, { value: isFinalClosed && sideSeparation === 'start', children: _jsx("div", { style: cssStyles.item(isFinalClosed, sideSeparation === 'start', orientation, size, type), children: children[0] }, void 0) }, void 0), _jsx("div", { onDoubleClick: toggle, onMouseDown: onMouseDown, onMouseUp: onMouseUp, css: cssStyles.separator(orientation, !isFinalClosed), children: _jsx("div", { css: css({ fontSize: 10 }), children: orientation === 'horizontal' ? _jsx("span", { children: "\u22EE" }, void 0) : _jsx("span", { children: "\u22EF" }, void 0) }, void 0) }, void 0), _jsx(splitPaneContext.Provider, { value: isFinalClosed && sideSeparation === 'end', children: _jsx("div", { style: cssStyles.item(isFinalClosed, sideSeparation === 'end', orientation, size, type), children: children[1] }, void 0) }, void 0)] }, void 0));
 }
@@ -71,0 +71,0 @@ function getSize(orientation, separation) {

lib/layout/Tabs.js

@@ -36,23 +36,23 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
     if (orientation === 'horizontal') {
-        return (_jsx(TabsProvider, Object.assign({ opened: opened }, { children: _jsx(TabsHorizontal, { items: items, onClick: onClick }, void 0) }), void 0));
+        return (_jsx(TabsProvider, { opened: opened, children: _jsx(TabsHorizontal, { items: items, onClick: onClick }, void 0) }, void 0));
     }
-    return (_jsx(TabsProvider, Object.assign({ opened: opened }, { children: _jsx(TabsVertical, { items: items, onClick: onClick }, void 0) }), void 0));
+    return (_jsx(TabsProvider, { opened: opened, children: _jsx(TabsVertical, { items: items, onClick: onClick }, void 0) }, void 0));
 }
 function TabsItem(props) {
     const item = useTabsContext();
-    return (_jsx("button", Object.assign({ type: "button", onClick: props.onClick, css: styles.item(item.id === props.id, props.orientation) }, { children: props.title }), void 0));
+    return (_jsx("button", { type: "button", onClick: props.onClick, css: styles.item(item.id === props.id, props.orientation), children: props.title }, void 0));
 }
 function TabsVertical(props) {
     const item = useTabsContext();
-    return (_jsxs("div", Object.assign({ style: { display: 'flex', flexDirection: 'row', flex: '1 1 0%' } }, { children: [_jsx("div", Object.assign({ style: {
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'row', flex: '1 1 0%' }, children: [_jsx("div", { style: {
                     display: 'flex',
                     flexDirection: 'column',
                     borderRight: '1px solid hsl(0deg, 0%, 80%)',
-                } }, { children: props.items.map((item) => (_jsx(TabsItem, { orientation: "vertical", title: item.title, id: item.id, onClick: () => {
+                }, children: props.items.map((item) => (_jsx(TabsItem, { orientation: "vertical", title: item.title, id: item.id, onClick: () => {
                         props.onClick?.(item);
-                    } }, item.id))) }), void 0), _jsx("div", Object.assign({ style: { flex: '1 1 0%', overflowY: 'auto' } }, { children: item.content }), void 0)] }), void 0));
+                    } }, item.id))) }, void 0), _jsx("div", { style: { flex: '1 1 0%', overflowY: 'auto' }, children: item.content }, void 0)] }, void 0));
 }
 function TabsHorizontal(props) {
     const item = useTabsContext();
-    return (_jsxs("div", Object.assign({ style: { display: 'flex', flexDirection: 'column' } }, { children: [_jsx("div", Object.assign({ style: {
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx("div", { style: {
                     display: 'flex',
@@ -62,5 +62,5 @@ flexDirection: 'row',
                     borderBottom: '1px solid hsl(0deg, 0%, 80%)',
-                } }, { children: props.items.map((item) => (_jsx(TabsItem, { orientation: "horizontal", id: item.id, title: item.title, onClick: () => {
+                }, children: props.items.map((item) => (_jsx(TabsItem, { orientation: "horizontal", id: item.id, title: item.title, onClick: () => {
                         props.onClick?.(item);
-                    } }, item.id))) }), void 0), _jsx("div", Object.assign({ style: { flex: '1 1 0%', overflowX: 'auto' } }, { children: item.content }), void 0)] }), void 0));
+                    } }, item.id))) }, void 0), _jsx("div", { style: { flex: '1 1 0%', overflowX: 'auto' }, children: item.content }, void 0)] }, void 0));
 }

lib/layout/Toolbar.js

@@ -101,3 +101,3 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
     }, [orientation]);
-    return (_jsx("div", Object.assign({ css: styles.toolbar(orientation), ref: ref }, { children: _jsx(ToolbarProvider, Object.assign({ orientation: orientation }, { children: children }), void 0) }), void 0));
+    return (_jsx("div", { css: styles.toolbar(orientation), ref: ref, children: _jsx(ToolbarProvider, { orientation: orientation, children: children }, void 0) }, void 0));
 }
@@ -107,11 +107,11 @@ Toolbar.Item = function ToolbarItem(props) {
     const { active = false, children, onClick, title, titleOrientation = 'auto', id, ...other } = props;
-    return (_jsxs("div", Object.assign({ style: { position: 'relative', padding: 4 } }, other, { children: [_jsx("button", Object.assign({ type: "button", css: styles.item(active), onClick: () => {
+    return (_jsxs("div", { style: { position: 'relative', padding: 4 }, ...other, children: [_jsx("button", { type: "button", css: styles.item(active), onClick: () => {
                     if (onClick) {
                         onClick(props);
                     }
-                } }, { children: children }), void 0), _jsx("div", Object.assign({ className: "content", css: styles.tooltip(orientation, titleOrientation) }, { children: _jsx("span", Object.assign({ style: {
+                }, children: children }, void 0), _jsx("div", { className: "content", css: styles.tooltip(orientation, titleOrientation), children: _jsx("span", { style: {
                         display: 'flex',
                         margin: 'auto',
                         justifyContent: 'center',
-                    } }, { children: title }), void 0) }), void 0)] }), void 0));
+                    }, children: title }, void 0) }, void 0)] }, void 0));
 };

package.json

 {
   "name": "analysis-ui-components",
-  "version": "0.9.3",
+  "version": "0.10.0",
   "description": "React components to build analysis UI",
@@ -37,25 +37,25 @@ "main": "lib/index.js",
   "dependencies": {
-    "@emotion/react": "^11.5.0",
-    "immer": "^9.0.6",
-    "react-dropzone": "^11.4.2",
+    "@emotion/react": "^11.7.1",
+    "immer": "^9.0.12",
+    "react-dropzone": "^12.0.2",
     "react-shadow": "^19.0.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.16.0",
-    "@babel/eslint-parser": "^7.16.0",
-    "@playwright/test": "^1.16.3",
-    "@storybook/addon-actions": "^6.3.12",
-    "@storybook/addon-essentials": "^6.3.12",
-    "@storybook/addon-links": "^6.3.12",
-    "@storybook/addon-storysource": "^6.3.12",
-    "@storybook/react": "^6.3.12",
-    "@types/react": "^17.0.34",
+    "@babel/core": "^7.17.2",
+    "@babel/eslint-parser": "^7.17.0",
+    "@playwright/test": "^1.19.0",
+    "@storybook/addon-actions": "^6.4.18",
+    "@storybook/addon-essentials": "^6.4.18",
+    "@storybook/addon-links": "^6.4.18",
+    "@storybook/addon-storysource": "^6.4.18",
+    "@storybook/react": "^6.4.18",
+    "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
-    "@vitejs/plugin-react": "^1.0.7",
-    "@zakodium/eslint-config": "^5.0.1",
+    "@vitejs/plugin-react": "^1.2.0",
+    "@zakodium/eslint-config": "^5.1.0",
     "babel-loader": "^8.2.3",
     "cheminfo-font": "^1.8.1",
     "cross-env": "^7.0.3",
-    "eslint": "^8.2.0",
-    "prettier": "^2.4.1",
+    "eslint": "^8.9.0",
+    "prettier": "^2.5.1",
     "react": "^17.0.2",
@@ -65,4 +65,4 @@ "react-dom": "^17.0.2",
     "rimraf": "^3.0.2",
-    "typescript": "^4.4.4",
-    "vite": "^2.6.13"
+    "typescript": "^4.5.5",
+    "vite": "^2.8.1"
   },
@@ -77,6 +77,3 @@ "repository": {
   },
-  "homepage": "https://github.com/cheminfo/analysis-ui-components#readme",
-  "volta": {
-    "node": "16.13.0"
-  }
+  "homepage": "https://github.com/cheminfo/analysis-ui-components#readme"
 }

No alert changes

Improved metrics

Lines of code

4757

increased by0.11%

Worsened metrics

Total package byte prevSize

204704

decreased by-0.83%

Dependency changes

• + Addedfile-selector@0.5.0(transitive)

• + Addedreact-dropzone@12.1.0(transitive)

• - Removedfile-selector@0.4.0(transitive)

• - Removedreact-dropzone@11.7.1(transitive)

• Updated@emotion/react@^11.7.1

• Updatedimmer@^9.0.12

• Updatedreact-dropzone@^12.0.2