react-science 0.34.0 → 0.36.0

package/lib-esm/components/hooks/index.js

@@ -4,4 +4,5 @@ export * from './useModifiedPopper';
 export * from './useOnClickOutside';
 export * from './useOnOff';
 export * from './useToggle';
+export * from './useSelect';
 //# sourceMappingURL=index.js.map

package/lib-esm/components/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC"}

package/lib-esm/components/hooks/useSelect.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { ItemRenderer } from '@blueprintjs/select';
+export declare function useSelect<T extends {
+    label: string;
+}>(): {
+    value: T | null;
+    setValue: import("react").Dispatch<import("react").SetStateAction<T | null>>;
+    itemRenderer: ItemRenderer<T>;
+    onItemSelect: import("react").Dispatch<import("react").SetStateAction<T | null>>;
+    popoverProps: {
+        onOpened: (node: HTMLElement) => void;
+    };
+    popoverTargetProps: {
+        style: {
+            display: string;
+        };
+    };
+    itemPredicate: (query: string, item: T) => boolean;
+    itemListPredicate: (query: string, items: T[]) => T[];
+};
+//# sourceMappingURL=useSelect.d.ts.map

package/lib-esm/components/hooks/useSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelect.d.ts","sourceRoot":"","sources":["../../../src/components/hooks/useSelect.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD,wBAAgB,SAAS,CAAC,CAAC,SAAS;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE;;;;;;yBAKhC,WAAW;;;;;;;2BAWA,MAAM,QAAQ,CAAC;+BAGX,MAAM,SAAS,CAAC,EAAE;EAerD"}

package/lib-esm/components/hooks/useSelect.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MenuItem } from '@blueprintjs/core';
+import { useState } from 'react';
+export function useSelect() {
+    const [value, setValue] = useState(null);
+    const itemRenderer = getItemRenderer(value);
+    const onItemSelect = setValue;
+    const popoverProps = {
+        onOpened: (node) => {
+            const firstUl = node.querySelector('ul');
+            if (firstUl) {
+                firstUl.tabIndex = 0;
+                firstUl.focus();
+            }
+        },
+    };
+    const popoverTargetProps = {
+        style: { display: 'inline-block' },
+    };
+    const itemPredicate = (query, item) => {
+        return item.label.toLowerCase().includes(query.toLowerCase());
+    };
+    const itemListPredicate = (query, items) => {
+        return items.filter((item) => item.label.toLowerCase().includes(query.toLowerCase()));
+    };
+    return {
+        value,
+        setValue,
+        itemRenderer,
+        onItemSelect,
+        popoverProps,
+        popoverTargetProps,
+        itemPredicate,
+        itemListPredicate,
+    };
+}
+function getItemRenderer(value) {
+    const render = ({ label }, { handleClick, handleFocus, modifiers, index }) => (_jsx(MenuItem, { active: modifiers.active, disabled: modifiers.disabled, selected: value?.label === label, onClick: handleClick, onFocus: handleFocus, roleStructure: "listoption", text: label }, index));
+    return render;
+}
+//# sourceMappingURL=useSelect.js.map

package/lib-esm/components/hooks/useSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelect.js","sourceRoot":"","sources":["../../../src/components/hooks/useSelect.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,UAAU,SAAS;IACvB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAW,IAAI,CAAC,CAAC;IACnD,MAAM,YAAY,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,YAAY,GAAG,QAAQ,CAAC;IAC9B,MAAM,YAAY,GAAG;QACnB,QAAQ,EAAE,CAAC,IAAiB,EAAE,EAAE;YAC9B,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;YACzC,IAAI,OAAO,EAAE,CAAC;gBACZ,OAAO,CAAC,QAAQ,GAAG,CAAC,CAAC;gBACrB,OAAO,CAAC,KAAK,EAAE,CAAC;YAClB,CAAC;QACH,CAAC;KACF,CAAC;IACF,MAAM,kBAAkB,GAAG;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,cAAc,EAAE;KACnC,CAAC;IACF,MAAM,aAAa,GAAG,CAAC,KAAa,EAAE,IAAO,EAAE,EAAE;QAC/C,OAAO,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC;IAChE,CAAC,CAAC;IACF,MAAM,iBAAiB,GAAG,CAAC,KAAa,EAAE,KAAU,EAAE,EAAE;QACtD,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAC3B,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,CACvD,CAAC;IACJ,CAAC,CAAC;IACF,OAAO;QACL,KAAK;QACL,QAAQ;QACR,YAAY;QACZ,YAAY;QACZ,YAAY;QACZ,kBAAkB;QAClB,aAAa;QACb,iBAAiB;KAClB,CAAC;AACJ,CAAC;AAED,SAAS,eAAe,CAA8B,KAAe;IACnE,MAAM,MAAM,GAAoB,CAC9B,EAAE,KAAK,EAAE,EACT,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,KAAK,EAAE,EAC9C,EAAE,CAAC,CACH,KAAC,QAAQ,IACP,MAAM,EAAE,SAAS,CAAC,MAAM,EACxB,QAAQ,EAAE,SAAS,CAAC,QAAQ,EAC5B,QAAQ,EAAE,KAAK,EAAE,KAAK,KAAK,KAAK,EAEhC,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,WAAW,EACpB,aAAa,EAAC,YAAY,EAC1B,IAAI,EAAE,KAAK,IAJN,KAAK,CAKV,CACH,CAAC;IACF,OAAO,MAAM,CAAC;AAChB,CAAC"}

package/lib-esm/components/root-layout/RootLayout.js

@@ -10,7 +10,7 @@ FocusStyleManager.onlyShowFocusOnTabs();
 const style = {
     width: '100%',
     height: '100%',
-    fontSize: '12px',
+    fontSize: '14px',
 };
 export function RootLayout(props) {
     const [rootRef, setRootRef] = useState(typeof document !== 'undefined' ? document.body : null);

package/lib-esm/components/toolbar/PanelPreferencesToolbar.d.ts

@@ -1,4 +1,6 @@
+/// <reference types="react" />
 interface PanelPreferencesToolbarProps {
+    title?: React.ReactNode;
     onClose?: () => void;
     onSave?: () => void;
 }

package/lib-esm/components/toolbar/PanelPreferencesToolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PanelPreferencesToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar/PanelPreferencesToolbar.tsx"],"names":[],"mappings":"AAKA,UAAU,4BAA4B;IACpC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAgBD,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,4BAA4B,oDAsB1E"}
+{"version":3,"file":"PanelPreferencesToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar/PanelPreferencesToolbar.tsx"],"names":[],"mappings":";AAKA,UAAU,4BAA4B;IACpC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AA0BD,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,4BAA4B,oDA6B1E"}

package/lib-esm/components/toolbar/PanelPreferencesToolbar.js

@@ -3,11 +3,21 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { css } from '@emotion/react';
 import { Toolbar } from './Toolbar';
 const styles = {
+    container: css({
+        display: 'flex',
+        justifyContent: 'space-between',
+        borderBottom: '1px solid rgb(240, 240, 240)',
+    }),
+    title: css({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingLeft: 12,
+        fontWeight: 500,
+    }),
     toolbar: css({
         display: 'flex',
         flexDirection: 'row-reverse',
-        fontSize: 16,
-        padding: 3,
         '& > button': {
             padding: 0,
             paddingLeft: 9,
@@ -16,7 +26,7 @@ const styles = {
     }),
 };
 export function PanelPreferencesToolbar(props) {
-    const { onClose, onSave } = props;
-    return (_jsx("div", { css: styles.toolbar, children: _jsxs(Toolbar, { children: [_jsx(Toolbar.Item, { title: "close", onClick: onClose, intent: "danger", icon: "cross", noTooltip: true }), _jsx(Toolbar.Item, { title: "save", onClick: onSave, intent: "success", icon: "tick", noTooltip: true })] }) }));
+    const { title = '', onClose, onSave } = props;
+    return (_jsxs("div", { css: styles.container, children: [_jsx("div", { css: styles.title, children: title }), _jsx("div", { css: styles.toolbar, children: _jsxs(Toolbar, { children: [onClose && (_jsx(Toolbar.Item, { title: "close", onClick: onClose, intent: "danger", icon: "cross", noTooltip: true })), onSave && (_jsx(Toolbar.Item, { title: "save", onClick: onSave, intent: "success", icon: "tick", noTooltip: true }))] }) })] }));
 }
 //# sourceMappingURL=PanelPreferencesToolbar.js.map

package/lib-esm/components/toolbar/PanelPreferencesToolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"PanelPreferencesToolbar.js","sourceRoot":"","sources":["../../../src/components/toolbar/PanelPreferencesToolbar.tsx"],"names":[],"mappings":";AAAA,sCAAsC;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AAErC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAOpC,MAAM,MAAM,GAAG;IACb,OAAO,EAAE,GAAG,CAAC;QACX,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,aAAa;QAC5B,QAAQ,EAAE,EAAE;QACZ,OAAO,EAAE,CAAC;QACV,YAAY,EAAE;YACZ,OAAO,EAAE,CAAC;YACV,WAAW,EAAE,CAAC;YACd,QAAQ,EAAE,MAAM;SACjB;KACF,CAAC;CACH,CAAC;AAEF,MAAM,UAAU,uBAAuB,CAAC,KAAmC;IACzE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IAClC,OAAO,CACL,cAAK,GAAG,EAAE,MAAM,CAAC,OAAO,YACtB,MAAC,OAAO,eACN,KAAC,OAAO,CAAC,IAAI,IACX,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,OAAO,EAChB,MAAM,EAAC,QAAQ,EACf,IAAI,EAAC,OAAO,EACZ,SAAS,SACT,EACF,KAAC,OAAO,CAAC,IAAI,IACX,KAAK,EAAC,MAAM,EACZ,OAAO,EAAE,MAAM,EACf,MAAM,EAAC,SAAS,EAChB,IAAI,EAAC,MAAM,EACX,SAAS,SACT,IACM,GACN,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"PanelPreferencesToolbar.js","sourceRoot":"","sources":["../../../src/components/toolbar/PanelPreferencesToolbar.tsx"],"names":[],"mappings":";AAAA,sCAAsC;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AAErC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAQpC,MAAM,MAAM,GAAG;IACb,SAAS,EAAE,GAAG,CAAC;QACb,OAAO,EAAE,MAAM;QACf,cAAc,EAAE,eAAe;QAC/B,YAAY,EAAE,8BAA8B;KAC7C,CAAC;IACF,KAAK,EAAE,GAAG,CAAC;QACT,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;QACxB,WAAW,EAAE,EAAE;QACf,UAAU,EAAE,GAAG;KAChB,CAAC;IACF,OAAO,EAAE,GAAG,CAAC;QACX,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,aAAa;QAC5B,YAAY,EAAE;YACZ,OAAO,EAAE,CAAC;YACV,WAAW,EAAE,CAAC;YACd,QAAQ,EAAE,MAAM;SACjB;KACF,CAAC;CACH,CAAC;AAEF,MAAM,UAAU,uBAAuB,CAAC,KAAmC;IACzE,MAAM,EAAE,KAAK,GAAG,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IAC9C,OAAO,CACL,eAAK,GAAG,EAAE,MAAM,CAAC,SAAS,aACxB,cAAK,GAAG,EAAE,MAAM,CAAC,KAAK,YAAG,KAAK,GAAO,EACrC,cAAK,GAAG,EAAE,MAAM,CAAC,OAAO,YACtB,MAAC,OAAO,eACL,OAAO,IAAI,CACV,KAAC,OAAO,CAAC,IAAI,IACX,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,OAAO,EAChB,MAAM,EAAC,QAAQ,EACf,IAAI,EAAC,OAAO,EACZ,SAAS,SACT,CACH,EACA,MAAM,IAAI,CACT,KAAC,OAAO,CAAC,IAAI,IACX,KAAK,EAAC,MAAM,EACZ,OAAO,EAAE,MAAM,EACf,MAAM,EAAC,SAAS,EAChB,IAAI,EAAC,MAAM,EACX,SAAS,SACT,CACH,IACO,GACN,IACF,CACP,CAAC;AACJ,CAAC"}

package/lib-esm/components/toolbar/Toolbar.d.ts

@@ -1,7 +1,8 @@
 /** @jsxImportSource @emotion/react */
-import { Intent } from '@blueprintjs/core';
-import { ReactElement, ReactNode } from 'react';
-import { ButtonProps } from '../index';
+import { Intent, PopoverProps, TagProps } from '@blueprintjs/core';
+import { IconName } from '@blueprintjs/icons';
+import { JSX, ReactElement, ReactNode } from 'react';
+export type PopoverInteractionType = 'click' | 'hover' | 'click-target' | 'hover-target';
 interface ToolbarBaseProps {
     intent?: Intent;
     disabled?: boolean;
@@ -10,19 +11,27 @@ export interface ToolbarProps extends ToolbarBaseProps {
     vertical?: boolean;
     large?: boolean;
     children?: Array<ReactElement<ToolbarItemProps>> | ReactElement<ToolbarItemProps> | Iterable<ReactNode> | boolean | null;
+    popoverInteractionKind?: PopoverInteractionType;
 }
 export interface ToolbarItemProps extends ToolbarBaseProps {
     id?: string;
     title: string;
-    icon: ButtonProps['icon'];
+    icon: IconName | JSX.Element;
     active?: boolean;
     onClick?: (item: ToolbarItemProps) => void;
     className?: string;
     noTooltip?: boolean;
+    isPopover?: boolean;
+    tag?: ReactNode;
+    tagProps?: Omit<TagProps, 'children'>;
+}
+export interface ToolbarPopoverItemProps extends PopoverProps {
+    itemProps: ToolbarItemProps;
 }
 export declare function Toolbar(props: ToolbarProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare namespace Toolbar {
     var Item: (props: ToolbarItemProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+    var PopoverItem: (props: ToolbarPopoverItemProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 }
 export {};
 //# sourceMappingURL=Toolbar.d.ts.map

package/lib-esm/components/toolbar/Toolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar/Toolbar.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,EAAgC,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAEzE,OAAO,EACL,YAAY,EACZ,SAAS,EAIV,MAAM,OAAO,CAAC;AAEf,OAAO,EAAU,WAAW,EAAE,MAAM,UAAU,CAAC;AAQ/C,UAAU,gBAAgB;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD,MAAM,WAAW,YAAa,SAAQ,gBAAgB;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EACL,KAAK,CAAC,YAAY,CAAC,gBAAgB,CAAC,CAAC,GACrC,YAAY,CAAC,gBAAgB,CAAC,GAC9B,QAAQ,CAAC,SAAS,CAAC,GACnB,OAAO,GACP,IAAI,CAAC;CACV;AAED,MAAM,WAAW,gBAAiB,SAAQ,gBAAgB;IACxD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAID,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,oDAuD1C;yBAvDe,OAAO"}
+{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar/Toolbar.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,EAIL,MAAM,EAEN,YAAY,EACZ,QAAQ,EAET,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE9C,OAAO,EAEL,GAAG,EACH,YAAY,EACZ,SAAS,EAIV,MAAM,OAAO,CAAC;AAUf,MAAM,MAAM,sBAAsB,GAC9B,OAAO,GACP,OAAO,GACP,cAAc,GACd,cAAc,CAAC;AAEnB,UAAU,gBAAgB;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD,MAAM,WAAW,YAAa,SAAQ,gBAAgB;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EACL,KAAK,CAAC,YAAY,CAAC,gBAAgB,CAAC,CAAC,GACrC,YAAY,CAAC,gBAAgB,CAAC,GAC9B,QAAQ,CAAC,SAAS,CAAC,GACnB,OAAO,GACP,IAAI,CAAC;IACT,sBAAsB,CAAC,EAAE,sBAAsB,CAAC;CACjD;AAED,MAAM,WAAW,gBAAiB,SAAQ,gBAAgB;IACxD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,QAAQ,CAAC,EAAE,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;CACvC;AAED,MAAM,WAAW,uBAAwB,SAAQ,YAAY;IAC3D,SAAS,EAAE,gBAAgB,CAAC;CAC7B;AAID,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,oDA+D1C;yBA/De,OAAO"}

package/lib-esm/components/toolbar/Toolbar.js

@@ -1,14 +1,14 @@
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
-import { ButtonGroup, Classes, Colors } from '@blueprintjs/core';
+import { ButtonGroup, Classes, Colors, Popover, Icon, } from '@blueprintjs/core';
 import { css } from '@emotion/react';
-import { useLayoutEffect, useMemo, useRef, } from 'react';
+import { cloneElement, useLayoutEffect, useMemo, useRef, } from 'react';
 import { Button } from '../index';
 import { toolbarContext, useToolbarContext, } from './toolbarContext';
 const border = '1px solid rgb(247, 247, 247)';
 export function Toolbar(props) {
-    const { children, disabled, intent, large, vertical } = props;
-    const contextValue = useMemo(() => ({ intent, large, vertical, disabled }), [intent, large, vertical, disabled]);
+    const { children, disabled, intent, large, vertical, popoverInteractionKind, } = props;
+    const contextValue = useMemo(() => ({ intent, large, vertical, disabled, popoverInteractionKind }), [intent, large, vertical, disabled, popoverInteractionKind]);
     const ref = useRef(null);
     // Work around wrong width on vertical flex when wrapping
     // In Chrome: recently fixed (https://bugs.chromium.org/p/chromium/issues/detail?id=507397)
@@ -38,26 +38,47 @@ export function Toolbar(props) {
             return () => observer.unobserve(element);
         }
     }, [vertical]);
-    return (_jsx(ToolbarProvider, { value: contextValue, children: _jsx(ButtonGroup, { ref: ref, vertical: vertical, large: large, style: {
+    return (_jsx(ToolbarProvider, { value: contextValue, children: _jsx(ButtonGroup
+        // Reset because of layout effect above
+        // TODO: remove once the workaround is no longer needed
+        , { vertical: vertical, large: large, style: {
                 flexWrap: 'wrap',
                 borderRight: vertical ? border : undefined,
-            }, children: children }) }));
+            }, children: children }, String(vertical)) }));
 }
 Toolbar.Item = function ToolbarItem(props) {
-    const { active = false, icon, onClick, title, id, intent: itemIntent, disabled: itemDisabled, noTooltip = false, ...other } = props;
+    const { active = false, icon, onClick, title, id, intent: itemIntent, disabled: itemDisabled, noTooltip = false, isPopover, ...other } = props;
     const { intent: toolbarIntent, disabled: toolbarDisabled, large, vertical, } = useToolbarContext();
     const intent = itemIntent ?? toolbarIntent;
     const disabled = itemDisabled ?? toolbarDisabled;
-    return (_jsx(Button, { minimal: true, disabled: disabled, css: css `
+    const resizedIcon = typeof icon === 'string'
+        ? icon
+        : cloneElement(icon, {
+            className: icon.props.className
+                ? `${icon.props.className} bp5-icon`
+                : 'bp5-icon',
+        });
+    return (_jsx(Button, { alignText: isPopover ? 'left' : undefined, minimal: true, disabled: disabled, css: css `
         .${Classes.ICON} {
           color: ${Colors.DARK_GRAY3};
         }
       `, intent: intent, style: {
             position: 'relative',
-            fontSize: '1.25em',
+            fontSize: '1.125em',
             width: 'fit-content',
             flex: 'none',
-        }, type: "button", active: active, icon: icon, onClick: () => {
+        }, type: "button", active: active, icon: _jsxs("div", { style: {
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                width: 0,
+                height: 0,
+            }, children: [_jsx(Icon, { icon: resizedIcon }), isPopover && (_jsx(Icon, { icon: "caret-right", size: large ? 14 : 9, style: {
+                        transform: 'rotate(45deg)',
+                        position: 'absolute',
+                        bottom: 0,
+                        right: 0,
+                    } }))] }), onClick: () => {
             onClick?.(props);
         }, tooltipProps: noTooltip
             ? undefined
@@ -68,6 +89,23 @@ Toolbar.Item = function ToolbarItem(props) {
                 compact: !large,
             }, ...other }));
 };
+Toolbar.PopoverItem = function ToolbarPopoverItem(props) {
+    const { itemProps, ...other } = props;
+    const { disabled, vertical, popoverInteractionKind } = useToolbarContext();
+    return (_jsx(Popover, { minimal: true, disabled: disabled, placement: vertical ? 'right-start' : 'bottom-start', interactionKind: popoverInteractionKind, hoverCloseDelay: 0, css: css `
+        .${Classes.ICON} {
+          color: ${Colors.DARK_GRAY3};
+        }
+      `, targetProps: {
+            style: {
+                position: 'relative',
+                fontSize: '1.125em',
+                width: 'fit-content',
+                height: 'fit-content',
+                flex: 'none',
+            },
+        }, ...other, children: _jsx(Toolbar.Item, { noTooltip: true, isPopover: true, ...itemProps }) }));
+};
 function ToolbarProvider(props) {
     return (_jsx(toolbarContext.Provider, { value: props.value, children: props.children }));
 }

package/lib-esm/components/toolbar/Toolbar.js.map

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

package/lib-esm/components/toolbar/toolbarContext.d.ts

@@ -1,10 +1,12 @@
 /// <reference types="react" />
 import { Intent } from '@blueprintjs/core';
+import { PopoverInteractionType } from './Toolbar';
 export interface ToolbarContext {
     intent?: Intent;
     large?: boolean;
     vertical?: boolean;
     disabled?: boolean;
+    popoverInteractionKind?: PopoverInteractionType;
 }
 export declare const toolbarContext: import("react").Context<ToolbarContext | null>;
 export declare function useToolbarContext(): ToolbarContext;

package/lib-esm/components/toolbar/toolbarContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toolbarContext.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar/toolbarContext.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAG3C,MAAM,WAAW,cAAc;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,cAAc,gDAA6C,CAAC;AAEzE,wBAAgB,iBAAiB,mBAQhC"}
+{"version":3,"file":"toolbarContext.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar/toolbarContext.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAG3C,OAAO,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAC;AAEnD,MAAM,WAAW,cAAc;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sBAAsB,CAAC,EAAE,sBAAsB,CAAC;CACjD;AAED,eAAO,MAAM,cAAc,gDAA6C,CAAC;AAEzE,wBAAgB,iBAAiB,mBAQhC"}

package/lib-esm/components/toolbar/toolbarContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"toolbarContext.js","sourceRoot":"","sources":["../../../src/components/toolbar/toolbarContext.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AASlD,MAAM,CAAC,MAAM,cAAc,GAAG,aAAa,CAAwB,IAAI,CAAC,CAAC;AAEzE,MAAM,UAAU,iBAAiB;IAC/B,MAAM,GAAG,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IACvC,IAAI,CAAC,GAAG,EAAE,CAAC;QACT,MAAM,IAAI,KAAK,CACb,gEAAgE,CACjE,CAAC;IACJ,CAAC;IACD,OAAO,GAAG,CAAC;AACb,CAAC"}
+{"version":3,"file":"toolbarContext.js","sourceRoot":"","sources":["../../../src/components/toolbar/toolbarContext.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAYlD,MAAM,CAAC,MAAM,cAAc,GAAG,aAAa,CAAwB,IAAI,CAAC,CAAC;AAEzE,MAAM,UAAU,iBAAiB;IAC/B,MAAM,GAAG,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IACvC,IAAI,CAAC,GAAG,EAAE,CAAC;QACT,MAAM,IAAI,KAAK,CACb,gEAAgE,CACjE,CAAC;IACJ,CAAC;IACD,OAAO,GAAG,CAAC;AACb,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-science",
-  "version": "0.34.0",
+  "version": "0.36.0",
   "description": "React components to build scientific applications UI",
   "exports": {
     "./app": {
@@ -51,7 +51,7 @@
     "test-only": "vitest run --coverage "
   },
   "volta": {
-    "node": "20.11.0"
+    "node": "20.11.1"
   },
   "overrides": {
     "react": "^18.2.0",
@@ -64,7 +64,7 @@
     "react-dom": ">=18.0.0"
   },
   "dependencies": {
-    "@blueprintjs/select": "^5.0.23",
+    "@blueprintjs/select": "^5.1.1",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@headlessui/react": "^1.7.18",
@@ -73,20 +73,20 @@
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-select": "^2.0.0",
-    "@tanstack/react-query": "^5.17.19",
-    "@tanstack/react-table": "^8.11.7",
+    "@tanstack/react-query": "^5.21.7",
+    "@tanstack/react-table": "^8.12.0",
     "biologic-converter": "^0.6.0",
     "cheminfo-types": "^1.7.2",
     "d3-scale-chromatic": "^3.0.0",
     "filelist-utils": "^1.11.0",
     "immer": "^10.0.3",
-    "jcampconverter": "^9.6.0",
+    "jcampconverter": "^9.6.1",
     "lodash": "^4.17.21",
     "ml-gsd": "^12.1.3",
     "ml-peak-shape-generator": "^4.1.2",
     "ml-signal-processing": "^1.0.3",
-    "ml-spectra-processing": "^12.8.0",
-    "ms-spectrum": "^3.4.1",
+    "ml-spectra-processing": "^12.10.2",
+    "ms-spectrum": "^3.4.2",
     "netcdfjs": "^3.0.0",
     "react-d3-utils": "^1.0.0",
     "react-dropzone": "^14.2.3",
@@ -102,41 +102,41 @@
     "wdf-parser": "^0.3.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.7",
-    "@babel/eslint-parser": "^7.23.3",
+    "@babel/core": "^7.23.9",
+    "@babel/eslint-parser": "^7.23.10",
     "@babel/preset-react": "^7.23.3",
-    "@blueprintjs/core": "^5.8.2",
-    "@blueprintjs/icons": "^5.7.0",
-    "@playwright/experimental-ct-react": "^1.41.1",
-    "@playwright/test": "^1.41.1",
-    "@storybook/addon-essentials": "7.6.10",
-    "@storybook/addon-storysource": "7.6.10",
-    "@storybook/blocks": "7.6.10",
-    "@storybook/react": "7.6.10",
-    "@storybook/react-vite": "7.6.10",
+    "@blueprintjs/core": "^5.9.1",
+    "@blueprintjs/icons": "^5.7.1",
+    "@playwright/experimental-ct-react": "^1.41.2",
+    "@playwright/test": "^1.41.2",
+    "@storybook/addon-essentials": "7.6.16",
+    "@storybook/addon-storysource": "7.6.16",
+    "@storybook/blocks": "7.6.16",
+    "@storybook/react": "7.6.16",
+    "@storybook/react-vite": "7.6.16",
     "@types/babel__core": "^7.20.5",
     "@types/d3-scale-chromatic": "^3.0.3",
     "@types/lodash": "^4.14.202",
-    "@types/react": "^18.2.48",
-    "@types/react-dom": "^18.2.18",
+    "@types/react": "^18.2.56",
+    "@types/react-dom": "^18.2.19",
     "@types/react-inspector": "^4.0.6",
     "@types/tinycolor2": "^1.4.6",
     "@vitejs/plugin-react": "^4.2.1",
-    "@vitest/coverage-v8": "^1.2.1",
+    "@vitest/coverage-v8": "^1.3.0",
     "cheminfo-font": "^1.13.0",
     "cross-env": "^7.0.3",
     "eslint": "^8.56.0",
     "eslint-config-zakodium": "^8.1.0",
-    "eslint-plugin-storybook": "^0.6.15",
-    "prettier": "^3.2.4",
+    "eslint-plugin-storybook": "^0.8.0",
+    "prettier": "^3.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-ocl": "^6.1.0",
     "rimraf": "^5.0.5",
-    "storybook": "7.6.10",
+    "storybook": "7.6.16",
     "typescript": "^5.3.3",
-    "vite": "^5.0.12",
-    "vitest": "^1.2.1"
+    "vite": "^5.1.3",
+    "vitest": "^1.3.0"
   },
   "repository": {
     "type": "git",

package/src/app/about/AboutDialogToolbarButton.tsx

@@ -1,11 +1,12 @@
-import { ButtonProps, Dialog, DialogBody } from '@blueprintjs/core';
-import { ReactNode } from 'react';
+import { Dialog, DialogBody } from '@blueprintjs/core';
+import { IconName } from '@blueprintjs/icons';
+import { JSX, ReactNode } from 'react';
 
 import { Toolbar, useOnOff } from '../../components';
 
 interface AboutDialogToolbarButtonProps {
   name: string;
-  icon: ButtonProps['icon'];
+  icon: IconName | JSX.Element;
   body: ReactNode;
 }
 

package/src/app/helpers/react-plot.tsx

@@ -111,6 +111,7 @@ export function BasicComponent(props: BasicComponentProps) {
               flip={flipHorizontalAxis}
               position="bottom"
               label={`${x.label}${x.units ? `(${x.units})` : ''}`}
+              paddingEnd="20"
             />
             <Axis
               hidden={!showVerticalAxis}

package/src/app/kinds/iv/plot-view/IvPlotVariablesSelector.tsx

@@ -28,7 +28,13 @@ export default function IvPlotVariablesSelector() {
 
   return (
     <div
-      style={{ display: 'flex', flexDirection: 'row', gap: 5, fontSize: 18 }}
+      style={{
+        display: 'flex',
+        flexDirection: 'row',
+
+        gap: 30,
+        fontSize: '1.125em',
+      }}
     >
       <MeasurementVariableSelect
         label="Y variable"

package/src/app/kinds/mass/MeasurementMassPlot.tsx

@@ -121,14 +121,14 @@ function MassComponent(props: MeasurementPlotProps) {
               style={{ strokeWidth: 2, stroke: 'blue' }}
             />
             <Annotation.Text
-              style={{ fontSize: '13px', fontWeight: '600' }}
+              style={{ fontSize: '0.875rem', fontWeight: '600' }}
               x="2"
               y="0"
             >
               {shortLabel}
             </Annotation.Text>
             <Annotation.Text
-              style={{ fontSize: '13px', fontWeight: '600' }}
+              style={{ fontSize: '0.875rem', fontWeight: '600' }}
               x="2"
               y="-14"
             >

package/src/app/panels/measurements/MeasurementColorPreview.tsx

@@ -13,7 +13,6 @@ import {
   useOnClickOutside,
   useOnOff,
 } from '../../../components/index';
-import { Portal } from '../../../components/root-layout/Portal';
 
 interface MeasurementColorPreviewProps {
   measurementId: string;
@@ -24,11 +23,12 @@ interface MeasurementColorPreviewProps {
 const ColorPreviewButton = styled.button`
   width: 1em;
   height: 1em;
+  & > div {
+    border-radius: 0.5em;
+  }
 `;
 
-export default function MeasurementColorPreview(
-  props: MeasurementColorPreviewProps,
-) {
+export function MeasurementColorPreview(props: MeasurementColorPreviewProps) {
   const { measurementId, kind, color } = props;
 
   const dispatch = useAppDispatch();
@@ -53,35 +53,33 @@ export default function MeasurementColorPreview(
         <ColorPreview color={color} />
       </ColorPreviewButton>
       {isOpened && (
-        <Portal>
-          <div
-            ref={(div) => {
-              setPopperElement(div);
-              ref.current = div;
-            }}
-            {...popperProps}
-          >
-            {color.kind === 'fixed' ? (
-              <FixedColorPicker
-                color={color.color}
-                onChange={(newColor) =>
-                  dispatch({
-                    type: 'CHANGE_MEASUREMENT_DISPLAY',
-                    payload: {
-                      display: {
-                        color: {
-                          kind: 'fixed',
-                          color: newColor,
-                        },
+        <div
+          ref={(div) => {
+            setPopperElement(div);
+            ref.current = div;
+          }}
+          {...popperProps}
+        >
+          {color.kind === 'fixed' ? (
+            <FixedColorPicker
+              color={color.color}
+              onChange={(newColor) =>
+                dispatch({
+                  type: 'CHANGE_MEASUREMENT_DISPLAY',
+                  payload: {
+                    display: {
+                      color: {
+                        kind: 'fixed',
+                        color: newColor,
                       },
-                      measurement: { id: measurementId, kind },
                     },
-                  })
-                }
-              />
-            ) : null}
-          </div>
-        </Portal>
+                    measurement: { id: measurementId, kind },
+                  },
+                })
+              }
+            />
+          ) : null}
+        </div>
       )}
     </>
   );
@@ -94,6 +92,7 @@ function FixedColorPicker(props: {
   const { color, onChange } = props;
   return (
     <ColorPicker
+      style={{ fontSize: '0.875em' }}
       color={{ hex: color }}
       onChangeComplete={(color) => {
         onChange(color.hex);