react-science 4.0.0 → 4.1.0

package/lib-esm/components/color-picker/gradient-select/GradientSelect.js

@@ -1,10 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment, @typescript-eslint/prefer-ts-expect-error
-// @ts-ignore This import fails when compiling to CJS.
-import { Listbox } from '@headlessui/react';
+import * as Select from '@radix-ui/react-select';
 import * as scaleChromatic from 'd3-scale-chromatic';
-import { Fragment } from 'react';
 import { FaChevronDown } from 'react-icons/fa';
 import FixedGradientPreview from '../preview/FixedGradientPreview';
 export const fixedGradientScales = {
@@ -19,39 +18,62 @@ const GradientSelectListbox = styled.div `
   position: relative;
   width: 100%;
   border: 1px solid darkgray;
+  margin-top: 100px;
   border-radius: 0.25rem;
 `;
-const GradientSelectButton = styled.button `
-  position: relative;
-  width: 100%;
-  height: 30px;
-  padding: 3px;
-`;
 const GradientSelectChevron = styled(FaChevronDown) `
   position: absolute;
   height: 100%;
   top: 0;
   right: 0.5rem;
 `;
-const GradientSelectOptions = styled.ul `
-  position: absolute;
-  width: 100%;
-  margin-top: 5px;
-  border: 1px solid darkgray;
-  border-radius: 0.25rem;
-  padding-inline: 3px;
-  padding-bottom: 5px;
-`;
 const GradientSelectOption = styled.li `
   display: flex;
   flex-direction: column;
   padding-top: 5px;
   cursor: pointer;
-  ${(props) => !props.active && 'opacity: 0.8;'}
-  ${(props) => props.active && 'font-weight: bold;'}
 `;
 export function GradientSelect(props) {
     const { value, onChange } = props;
-    return (_jsx(Listbox, { value: value, onChange: onChange, children: _jsxs(GradientSelectListbox, { children: [_jsxs(Listbox.Button, { as: GradientSelectButton, children: [_jsx(FixedGradientPreview, { gradient: value }), _jsx(GradientSelectChevron, {})] }), _jsx(Listbox.Options, { as: GradientSelectOptions, children: scaleOptions.map((option) => (_jsx(Listbox.Option, { as: Fragment, value: option, children: ({ active }) => (_jsxs(GradientSelectOption, { active: active, children: [option, _jsx("div", { style: { height: 15 }, children: _jsx(FixedGradientPreview, { gradient: option }) })] })) }, option))) })] }) }));
+    return (_jsx(GradientSelectListbox, { children: _jsxs(Select.Root, { value: value, onValueChange: onChange, children: [_jsx(Select.Trigger, { css: css `
+            width: 100%;
+            height: 30px;
+            padding: 4px;
+          `, children: _jsxs(Select.Value, { children: [_jsx(FixedGradientPreview, { gradient: value }), _jsx(GradientSelectChevron, {})] }) }), _jsx(Select.Portal, { children: _jsx(Select.Content, { position: "popper", sideOffset: 10, css: css `
+              background-color: white;
+              width: var(--radix-select-trigger-width);
+              border: 1px solid darkgray;
+              border-radius: 0.25rem;
+              padding: 4px;
+            `, children: _jsx(Select.Viewport, { children: scaleOptions.map((option) => (_jsx(Select.Item, { value: option, css: css `
+                    outline: none;
+                    padding: 8px 0 8px 0;
+                    cursor: pointer;
+                    margin-left: 20px;
+                    &[data-state='checked'] {
+                      font-weight: bold;
+                    }
+                    &[data-state='unchecked'] {
+                      opacity: 1;
+                    }
+
+                    &:not([data-highlighted]) span {
+                      margin-left: 12px;
+                    }
+                    &[data-highlighted] {
+                      span {
+                        margin-left: 4px;
+                      }
+                      ::before {
+                        content: '';
+                        display: inline-block;
+                        width: 8px;
+                        height: 8px;
+                        border-radius: 1px;
+                        filter: brightness(60%);
+                        background-color: dimgray;
+                      }
+                    }
+                  `, children: _jsxs(Select.ItemText, { children: [option, _jsx(GradientSelectOption, { children: _jsx("div", { style: { height: 15 }, children: _jsx(FixedGradientPreview, { gradient: option }) }) })] }) }, option))) }) }) })] }) }));
 }
 //# sourceMappingURL=GradientSelect.js.map

package/lib-esm/components/color-picker/gradient-select/GradientSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"GradientSelect.js","sourceRoot":"","sources":["../../../../src/components/color-picker/gradient-select/GradientSelect.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,wGAAwG;AACxG,sDAAsD;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,KAAK,cAAc,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE/C,OAAO,oBAAoB,MAAM,iCAAiC,CAAC;AAEnE,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,KAAK,EAAE,cAAc,CAAC,gBAAgB;IACtC,OAAO,EAAE,cAAc,CAAC,kBAAkB;IAC1C,OAAO,EAAE,cAAc,CAAC,kBAAkB;IAC1C,KAAK,EAAE,cAAc,CAAC,gBAAgB;IACtC,MAAM,EAAE,cAAc,CAAC,iBAAiB;CACzC,CAAC;AAIF,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,mBAAmB,CAAwB,CAAC;AAE7E,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAKvC,CAAC;AAEF,MAAM,oBAAoB,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;CAKzC,CAAC;AAEF,MAAM,qBAAqB,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA;;;;;CAKlD,CAAC;AAEF,MAAM,qBAAqB,GAAG,MAAM,CAAC,EAAE,CAAA;;;;;;;;CAQtC,CAAC;AAEF,MAAM,oBAAoB,GAAG,MAAM,CAAC,EAAE,CAAqB;;;;;IAKvD,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,MAAM,IAAI,eAAe;IAC3C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,IAAI,oBAAoB;CAClD,CAAC;AAOF,MAAM,UAAU,cAAc,CAAC,KAA0B;IACvD,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAClC,OAAO,CACL,KAAC,OAAO,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,YACvC,MAAC,qBAAqB,eACpB,MAAC,OAAO,CAAC,MAAM,IAAC,EAAE,EAAE,oBAAoB,aACtC,KAAC,oBAAoB,IAAC,QAAQ,EAAE,KAAK,GAAI,EACzC,KAAC,qBAAqB,KAAG,IACV,EACjB,KAAC,OAAO,CAAC,OAAO,IAAC,EAAE,EAAE,qBAAqB,YACvC,YAAY,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC5B,KAAC,OAAO,CAAC,MAAM,IAAC,EAAE,EAAE,QAAQ,EAAe,KAAK,EAAE,MAAM,YACrD,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CACf,MAAC,oBAAoB,IAAC,MAAM,EAAE,MAAM,aACjC,MAAM,EACP,cAAK,KAAK,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,YACxB,KAAC,oBAAoB,IAAC,QAAQ,EAAE,MAAM,GAAI,GACtC,IACe,CACxB,IARgC,MAAM,CASxB,CAClB,CAAC,GACc,IACI,GAChB,CACX,CAAC;AACJ,CAAC"}
+{"version":3,"file":"GradientSelect.js","sourceRoot":"","sources":["../../../../src/components/color-picker/gradient-select/GradientSelect.tsx"],"names":[],"mappings":";AAAA,sCAAsC;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AACrC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,KAAK,MAAM,MAAM,wBAAwB,CAAC;AACjD,OAAO,KAAK,cAAc,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE/C,OAAO,oBAAoB,MAAM,iCAAiC,CAAC;AAEnE,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,KAAK,EAAE,cAAc,CAAC,gBAAgB;IACtC,OAAO,EAAE,cAAc,CAAC,kBAAkB;IAC1C,OAAO,EAAE,cAAc,CAAC,kBAAkB;IAC1C,KAAK,EAAE,cAAc,CAAC,gBAAgB;IACtC,MAAM,EAAE,cAAc,CAAC,iBAAiB;CACzC,CAAC;AAIF,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,mBAAmB,CAAwB,CAAC;AAE7E,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAMvC,CAAC;AAEF,MAAM,qBAAqB,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA;;;;;CAKlD,CAAC;AAEF,MAAM,oBAAoB,GAAG,MAAM,CAAC,EAAE,CAAA;;;;;CAKrC,CAAC;AAOF,MAAM,UAAU,cAAc,CAAC,KAA0B;IACvD,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAClC,OAAO,CACL,KAAC,qBAAqB,cACpB,MAAC,MAAM,CAAC,IAAI,IAAC,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,aAChD,KAAC,MAAM,CAAC,OAAO,IACb,GAAG,EAAE,GAAG,CAAA;;;;WAIP,YAED,MAAC,MAAM,CAAC,KAAK,eACX,KAAC,oBAAoB,IAAC,QAAQ,EAAE,KAAK,GAAI,EACzC,KAAC,qBAAqB,KAAG,IACZ,GACA,EACjB,KAAC,MAAM,CAAC,MAAM,cACZ,KAAC,MAAM,CAAC,OAAO,IACb,QAAQ,EAAC,QAAQ,EACjB,UAAU,EAAE,EAAE,EACd,GAAG,EAAE,GAAG,CAAA;;;;;;aAMP,YAED,KAAC,MAAM,CAAC,QAAQ,cACb,YAAY,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC5B,KAAC,MAAM,CAAC,IAAI,IAEV,KAAK,EAAE,MAAM,EACb,GAAG,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBA6BP,YAED,MAAC,MAAM,CAAC,QAAQ,eACb,MAAM,EACP,KAAC,oBAAoB,cACnB,cAAK,KAAK,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,YACxB,KAAC,oBAAoB,IAAC,QAAQ,EAAE,MAAM,GAAI,GACtC,GACe,IACP,IAxCb,MAAM,CAyCC,CACf,CAAC,GACc,GACH,GACH,IACJ,GACQ,CACzB,CAAC;AACJ,CAAC"}

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

@@ -1,15 +1,17 @@
-/// <reference types="react" />
 import { ItemRenderer } from '@blueprintjs/select';
+import { ReactNode } from 'react';
 type FilterType<SourceType, Type> = Pick<SourceType, {
     [K in keyof SourceType]: SourceType[K] extends Type ? K : never;
 }[keyof SourceType]>;
-interface BaseOptions<T> {
-    itemTextKey: keyof FilterType<T, string>;
+interface ItemOptions<T> {
+    renderItem?: (item: T) => ReactNode;
     defaultSelectedItem?: T;
 }
-interface RenderOptions<T> {
+interface BaseOptions<T> extends ItemOptions<T> {
+    itemTextKey: keyof FilterType<T, string>;
+}
+interface RenderOptions<T> extends ItemOptions<T> {
     getItemText: (item: T) => string;
-    defaultSelectedItem?: T;
 }
 type SelectOptions<T> = BaseOptions<T> | RenderOptions<T>;
 export declare function useSelect<T>(options: SelectOptions<T>): {

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

@@ -1 +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,KAAK,UAAU,CAAC,UAAU,EAAE,IAAI,IAAI,IAAI,CACtC,UAAU,EACV;KACG,CAAC,IAAI,MAAM,UAAU,GAAG,UAAU,CAAC,CAAC,CAAC,SAAS,IAAI,GAAG,CAAC,GAAG,KAAK;CAChE,CAAC,MAAM,UAAU,CAAC,CACpB,CAAC;AAEF,UAAU,WAAW,CAAC,CAAC;IACrB,WAAW,EAAE,MAAM,UAAU,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;IACzC,mBAAmB,CAAC,EAAE,CAAC,CAAC;CACzB;AAED,UAAU,aAAa,CAAC,CAAC;IACvB,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IACjC,mBAAmB,CAAC,EAAE,CAAC,CAAC;CACzB;AAED,KAAK,aAAa,CAAC,CAAC,IAAI,WAAW,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;AAsB1D,wBAAgB,SAAS,CAAC,CAAC,EAAE,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC;;;;;;yBAOjC,WAAW;;;;;;;2BAWA,MAAM,QAAQ,CAAC;+BAKX,MAAM,SAAS,CAAC,EAAE;EAiBrD"}
+{"version":3,"file":"useSelect.d.ts","sourceRoot":"","sources":["../../../src/components/hooks/useSelect.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAE5C,KAAK,UAAU,CAAC,UAAU,EAAE,IAAI,IAAI,IAAI,CACtC,UAAU,EACV;KACG,CAAC,IAAI,MAAM,UAAU,GAAG,UAAU,CAAC,CAAC,CAAC,SAAS,IAAI,GAAG,CAAC,GAAG,KAAK;CAChE,CAAC,MAAM,UAAU,CAAC,CACpB,CAAC;AAEF,UAAU,WAAW,CAAC,CAAC;IACrB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC;IACpC,mBAAmB,CAAC,EAAE,CAAC,CAAC;CACzB;AAED,UAAU,WAAW,CAAC,CAAC,CAAE,SAAQ,WAAW,CAAC,CAAC,CAAC;IAC7C,WAAW,EAAE,MAAM,UAAU,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;CAC1C;AAED,UAAU,aAAa,CAAC,CAAC,CAAE,SAAQ,WAAW,CAAC,CAAC,CAAC;IAC/C,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;CAClC;AAED,KAAK,aAAa,CAAC,CAAC,IAAI,WAAW,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;AAsB1D,wBAAgB,SAAS,CAAC,CAAC,EAAE,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC;;;;;;yBAOjC,WAAW;;;;;;;2BAWA,MAAM,QAAQ,CAAC;+BAKX,MAAM,SAAS,CAAC,EAAE;EAiBrD"}

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

@@ -60,7 +60,9 @@ function getItemRenderer(value, options) {
     const selectedLabel = getLabel(value, options);
     const render = (item, { handleClick, handleFocus, modifiers, index }) => {
         const label = getLabel(item, options);
-        return (_jsx(MenuItem, { active: modifiers.active, disabled: modifiers.disabled, selected: selectedLabel === label, onClick: handleClick, onFocus: handleFocus, roleStructure: "listoption", text: label }, index));
+        const { renderItem } = options;
+        const { active, disabled } = modifiers;
+        return (_jsx(MenuItem, { active: active, disabled: disabled, selected: selectedLabel === label, onClick: handleClick, onFocus: handleFocus, roleStructure: "listoption", text: renderItem?.(item) || label }, index));
     };
     return render;
 }

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

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

package/lib-esm/components/info-panel/InfoPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InfoPanel.d.ts","sourceRoot":"","sources":["../../../src/components/info-panel/InfoPanel.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAkC,MAAM,OAAO,CAAC;AAKtE,MAAM,WAAW,aAAa;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,GAAG,CAAC,CAAC;CAChE;AAED,UAAU,cAAc;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC;IACvB,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,UAAU,CAAC,EAAE,aAAa,CAAC;CAC5B;AAuBD,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,oDA2I9C"}
+{"version":3,"file":"InfoPanel.d.ts","sourceRoot":"","sources":["../../../src/components/info-panel/InfoPanel.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAkC,MAAM,OAAO,CAAC;AAKtE,MAAM,WAAW,aAAa;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,GAAG,CAAC,CAAC;CAChE;AAED,UAAU,cAAc;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC;IACvB,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,UAAU,CAAC,EAAE,aAAa,CAAC;CAC5B;AAqDD,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,oDAqJ9C"}

package/lib-esm/components/info-panel/InfoPanel.js

@@ -1,24 +1,55 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import { Icon, InputGroup } from '@blueprintjs/core';
 import { css } from '@emotion/react';
-import { Disclosure } from '@headlessui/react';
+import * as Collapsible from '@radix-ui/react-collapsible';
 import { useCallback, useMemo, useState } from 'react';
 import { ValueRenderers } from '../index';
 import { Table } from '../table/Table';
 const style = {
+    content: css({
+        overflow: 'hidden',
+        "&[data-state='open']": {
+            animation: 'slideDown 300ms ease-out',
+        },
+        '&[data-state="closed"]': {
+            animation: 'slideUp 300ms ease-out',
+        },
+        '@keyframes slideDown': {
+            from: {
+                height: 0,
+            },
+            to: { height: 'var(--radix-collapsible-content-height)' },
+        },
+        '@keyframes slideUp': {
+            from: {
+                height: 'var(--radix-collapsible-content-height)',
+            },
+            to: { height: 0 },
+        },
+    }),
     container: css({
-        padding: '5px',
+        padding: '5px 0 0 0',
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
     }),
-    chevron: (open) => css({
-        rotate: open ? '90deg' : '0deg',
+    chevron: css({
         transition: 'all 0.3s ease-in-out',
     }),
     button: css({
+        zIndex: 10,
+        position: 'sticky',
+        height: 30,
+        top: 0,
+        "&[data-state='open'] > span": {
+            rotate: '90deg',
+        },
+        cursor: 'pointer',
         borderBottom: '1px solid #f5f5f5',
+        backgroundColor: 'white',
         display: 'flex',
         alignItems: 'center',
-        gap: 5,
         padding: '5px 2px',
         width: '100%',
         ':hover': {
@@ -70,10 +101,12 @@ export function InfoPanel(props) {
         }
         return { filteredData, total, count };
     }, [data, viewData]);
-    return (_jsxs("div", { css: style.container, children: [_jsx("div", { style: titleStyle, children: title }), _jsxs("div", { tabIndex: 0, css: css({
-                    zIndex: 10,
+    return (_jsxs("div", { css: style.container, children: [_jsx("div", { style: {
+                    padding: '0 5px',
+                    ...titleStyle,
+                }, children: title }), _jsxs("div", { tabIndex: 0, css: css({
+                    padding: '0 5px',
                     marginTop: '5px',
-                    position: 'sticky',
                     backgroundColor: 'white',
                     top: '5px',
                     display: 'flex',
@@ -82,22 +115,24 @@ export function InfoPanel(props) {
                     width: '100%',
                 }), children: [_jsx(InputGroup, { css: css({
                             flexGrow: 1,
-                        }), placeholder: "search for a parameter ...", value: search, onChange: ({ target }) => {
+                        }), placeholder: "Search for a parameter", value: search, onChange: ({ target }) => {
                             if (target.value !== undefined) {
                                 setSearch(target.value);
                             }
                         }, style: inputStyle, leftIcon: "search", type: "search", fill: true }), "[", count, "/", total, "]"] }), _jsx("div", { style: {
+                    position: 'relative',
                     marginTop: '5px',
                     display: 'flex',
                     flexDirection: 'column',
-                    gap: '5px',
+                    overflowY: 'auto',
+                    flex: 1,
                 }, children: filteredData.map(({ description, data }) => {
-                    return (_jsx(Disclosure, { defaultOpen: true, children: ({ open }) => (_jsxs(_Fragment, { children: [_jsxs(Disclosure.Button, { css: style.button, children: [_jsx(Icon, { icon: "chevron-right", css: style.chevron(open) }), description] }), _jsx(Disclosure.Panel, { children: _jsxs(Table, { striped: true, css: css({
-                                            width: '100%',
-                                        }), compact: true, children: [_jsxs(Table.Header, { children: [_jsx(ValueRenderers.Header, { value: "Parameter" }), _jsx(ValueRenderers.Header, { value: "Value" })] }), data.map(([key, value]) => (_jsxs(Table.Row, { style: {
-                                                    height: '10px',
-                                                    padding: '0 !imporant',
-                                                }, children: [_jsx(ValueRenderers.Text, { value: key }), valueCell(value)] }, key)))] }) })] })) }, description));
+                    return (_jsxs(Collapsible.Root, { className: "CollapsibleRoot", defaultOpen: true, children: [_jsx(Collapsible.Trigger, { asChild: true, css: style.button, children: _jsxs("div", { children: [_jsx(Icon, { icon: "chevron-right", css: style.chevron }), description] }) }), _jsx(Collapsible.Content, { css: style.content, children: _jsxs(Table, { striped: true, css: css({
+                                        width: '100%',
+                                    }), compact: true, children: [_jsxs(Table.Header, { children: [_jsx(ValueRenderers.Header, { value: "Parameter" }), _jsx(ValueRenderers.Header, { value: "Value" })] }), data.map(([key, value]) => (_jsxs(Table.Row, { style: {
+                                                height: '10px',
+                                                padding: '0 !imporant',
+                                            }, children: [_jsx(ValueRenderers.Text, { value: key }), valueCell(value)] }, key)))] }) })] }, description));
                 }) })] }));
 }
 /**

package/lib-esm/components/info-panel/InfoPanel.js.map

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

package/lib-esm/components/table/Table.d.ts

@@ -10,6 +10,8 @@ export interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
 export declare function Table(props: TableProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare namespace Table {
     var Row: ({ children, style, bordered, ...other }: import("./TableRow").TableRowProps) => import("react/jsx-runtime").JSX.Element;
-    var Header: ({ children, bordered, style }: TableProps) => import("react/jsx-runtime").JSX.Element;
+    var Header: ({ children, bordered, style, sticky, }: TableProps & {
+        sticky?: boolean | undefined;
+    }) => import("react/jsx-runtime").JSX.Element;
 }
 //# sourceMappingURL=Table.d.ts.map

package/lib-esm/components/table/TableHeader.d.ts

@@ -1,3 +1,5 @@
 import type { TableProps } from './Table';
-export declare const TableHeader: ({ children, bordered, style }: TableProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TableHeader: ({ children, bordered, style, sticky, }: TableProps & {
+    sticky?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=TableHeader.d.ts.map

package/lib-esm/components/table/TableHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.d.ts","sourceRoot":"","sources":["../../../src/components/table/TableHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAG1C,eAAO,MAAM,WAAW,kCAAmC,UAAU,4CAQpE,CAAC"}
+{"version":3,"file":"TableHeader.d.ts","sourceRoot":"","sources":["../../../src/components/table/TableHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAU1C,eAAO,MAAM,WAAW,2CAKrB,UAAU,GAAG;IAAE,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,4CAQnC,CAAC"}

package/lib-esm/components/table/TableHeader.js

@@ -1,6 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { TableRow } from './TableRow';
-export const TableHeader = ({ children, bordered, style }) => {
-    return (_jsx("thead", { children: _jsx(TableRow, { bordered: bordered, style: style, children: children }) }));
+const headerStyle = {
+    position: 'sticky',
+    top: 0,
+    zIndex: 10,
+    backgroundColor: 'white',
+};
+export const TableHeader = ({ children, bordered, style, sticky, }) => {
+    return (_jsx("thead", { style: sticky ? headerStyle : undefined, children: _jsx(TableRow, { bordered: bordered, style: style, children: children }) }));
 };
 //# sourceMappingURL=TableHeader.js.map

package/lib-esm/components/table/TableHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.js","sourceRoot":"","sources":["../../../src/components/table/TableHeader.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAc,EAAE,EAAE;IACvE,OAAO,CACL,0BACE,KAAC,QAAQ,IAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,YACvC,QAAQ,GACA,GACL,CACT,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"TableHeader.js","sourceRoot":"","sources":["../../../src/components/table/TableHeader.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,MAAM,WAAW,GAAwB;IACvC,QAAQ,EAAE,QAAQ;IAClB,GAAG,EAAE,CAAC;IACN,MAAM,EAAE,EAAE;IACV,eAAe,EAAE,OAAO;CACzB,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,MAAM,GAC4B,EAAE,EAAE;IACtC,OAAO,CACL,gBAAO,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,YAC5C,KAAC,QAAQ,IAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,YACvC,QAAQ,GACA,GACL,CACT,CAAC;AACJ,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-science",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "React components to build scientific applications UI",
   "exports": {
     "./app": {
@@ -68,12 +68,10 @@
     "@blueprintjs/select": "^5.1.2",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
-    "@headlessui/react": "^1.7.18",
     "@lukeed/uuid": "^2.0.1",
     "@popperjs/core": "^2.11.8",
     "@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.28.4",
     "@tanstack/react-table": "^8.13.2",
     "biologic-converter": "^0.6.0",
@@ -110,11 +108,13 @@
     "@blueprintjs/icons": "^5.8.0",
     "@playwright/experimental-ct-react": "^1.42.1",
     "@playwright/test": "^1.42.1",
-    "@storybook/addon-essentials": "^8.0.0",
-    "@storybook/addon-storysource": "^8.0.0",
-    "@storybook/blocks": "^8.0.0",
-    "@storybook/react": "^8.0.0",
-    "@storybook/react-vite": "^8.0.0",
+    "@radix-ui/react-collapsible": "^1.0.3",
+    "@radix-ui/react-select": "^2.0.0",
+    "@storybook/addon-essentials": "^8.1.2",
+    "@storybook/addon-storysource": "^8.1.2",
+    "@storybook/blocks": "^8.1.2",
+    "@storybook/react": "^8.1.2",
+    "@storybook/react-vite": "^8.1.2",
     "@types/babel__core": "^7.20.5",
     "@types/d3-scale-chromatic": "^3.0.3",
     "@types/lodash": "^4.17.0",
@@ -135,7 +135,7 @@
     "react-dom": "^18.2.0",
     "react-ocl": "^6.1.0",
     "rimraf": "^5.0.5",
-    "storybook": "^8.0.0",
+    "storybook": "^8.1.2",
     "typescript": "^5.4.2",
     "vite": "^5.1.6",
     "vitest": "^1.4.0"

package/src/components/button/Button.tsx

@@ -18,21 +18,28 @@ type BlueprintProps = {
     BlueprintAnchorButtonProps[key];
 };
 export type ButtonProps = BlueprintProps & {
-  tooltipProps?: Omit<TooltipProps, 'children'>;
+  tooltipProps?: Partial<Omit<TooltipProps, 'children'>>;
   tag?: ReactNode;
   tagProps?: Omit<TagProps, 'children'>;
 };
 
 export function Button(props: ButtonProps) {
-  const { tooltipProps, children, tag, tagProps, ...buttonProps } = props;
-
+  const { tooltipProps = {}, children, tag, tagProps, ...buttonProps } = props;
+  const {
+    fill,
+    content = '',
+    disabled = !tooltipProps.content,
+    ...otherToolTipProps
+  } = tooltipProps;
   const InnerButton = buttonProps.disabled
     ? BlueprintAnchorButton
     : BlueprintButton;
   return (
     <Tooltip
-      fill={tooltipProps?.fill || buttonProps.fill}
-      {...tooltipProps}
+      fill={fill || buttonProps.fill}
+      disabled={disabled}
+      content={content}
+      {...otherToolTipProps}
       renderTarget={({ isOpen, ...targetProps }) => (
         <div style={{ position: 'relative' }}>
           {tag && (

package/src/components/color-picker/gradient-select/GradientSelect.tsx

@@ -1,9 +1,8 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment, @typescript-eslint/prefer-ts-expect-error
-// @ts-ignore This import fails when compiling to CJS.
-import { Listbox } from '@headlessui/react';
+import * as Select from '@radix-ui/react-select';
 import * as scaleChromatic from 'd3-scale-chromatic';
-import { Fragment } from 'react';
 import { FaChevronDown } from 'react-icons/fa';
 
 import FixedGradientPreview from '../preview/FixedGradientPreview';
@@ -24,16 +23,10 @@ const GradientSelectListbox = styled.div`
   position: relative;
   width: 100%;
   border: 1px solid darkgray;
+  margin-top: 100px;
   border-radius: 0.25rem;
 `;
 
-const GradientSelectButton = styled.button`
-  position: relative;
-  width: 100%;
-  height: 30px;
-  padding: 3px;
-`;
-
 const GradientSelectChevron = styled(FaChevronDown)`
   position: absolute;
   height: 100%;
@@ -41,23 +34,11 @@ const GradientSelectChevron = styled(FaChevronDown)`
   right: 0.5rem;
 `;
 
-const GradientSelectOptions = styled.ul`
-  position: absolute;
-  width: 100%;
-  margin-top: 5px;
-  border: 1px solid darkgray;
-  border-radius: 0.25rem;
-  padding-inline: 3px;
-  padding-bottom: 5px;
-`;
-
-const GradientSelectOption = styled.li<{ active: boolean }>`
+const GradientSelectOption = styled.li`
   display: flex;
   flex-direction: column;
   padding-top: 5px;
   cursor: pointer;
-  ${(props) => !props.active && 'opacity: 0.8;'}
-  ${(props) => props.active && 'font-weight: bold;'}
 `;
 
 export interface GradientSelectProps {
@@ -68,27 +49,82 @@ export interface GradientSelectProps {
 export function GradientSelect(props: GradientSelectProps) {
   const { value, onChange } = props;
   return (
-    <Listbox value={value} onChange={onChange}>
-      <GradientSelectListbox>
-        <Listbox.Button as={GradientSelectButton}>
-          <FixedGradientPreview gradient={value} />
-          <GradientSelectChevron />
-        </Listbox.Button>
-        <Listbox.Options as={GradientSelectOptions}>
-          {scaleOptions.map((option) => (
-            <Listbox.Option as={Fragment} key={option} value={option}>
-              {({ active }) => (
-                <GradientSelectOption active={active}>
-                  {option}
-                  <div style={{ height: 15 }}>
-                    <FixedGradientPreview gradient={option} />
-                  </div>
-                </GradientSelectOption>
-              )}
-            </Listbox.Option>
-          ))}
-        </Listbox.Options>
-      </GradientSelectListbox>
-    </Listbox>
+    <GradientSelectListbox>
+      <Select.Root value={value} onValueChange={onChange}>
+        <Select.Trigger
+          css={css`
+            width: 100%;
+            height: 30px;
+            padding: 4px;
+          `}
+        >
+          <Select.Value>
+            <FixedGradientPreview gradient={value} />
+            <GradientSelectChevron />
+          </Select.Value>
+        </Select.Trigger>
+        <Select.Portal>
+          <Select.Content
+            position="popper"
+            sideOffset={10}
+            css={css`
+              background-color: white;
+              width: var(--radix-select-trigger-width);
+              border: 1px solid darkgray;
+              border-radius: 0.25rem;
+              padding: 4px;
+            `}
+          >
+            <Select.Viewport>
+              {scaleOptions.map((option) => (
+                <Select.Item
+                  key={option}
+                  value={option}
+                  css={css`
+                    outline: none;
+                    padding: 8px 0 8px 0;
+                    cursor: pointer;
+                    margin-left: 20px;
+                    &[data-state='checked'] {
+                      font-weight: bold;
+                    }
+                    &[data-state='unchecked'] {
+                      opacity: 1;
+                    }
+
+                    &:not([data-highlighted]) span {
+                      margin-left: 12px;
+                    }
+                    &[data-highlighted] {
+                      span {
+                        margin-left: 4px;
+                      }
+                      ::before {
+                        content: '';
+                        display: inline-block;
+                        width: 8px;
+                        height: 8px;
+                        border-radius: 1px;
+                        filter: brightness(60%);
+                        background-color: dimgray;
+                      }
+                    }
+                  `}
+                >
+                  <Select.ItemText>
+                    {option}
+                    <GradientSelectOption>
+                      <div style={{ height: 15 }}>
+                        <FixedGradientPreview gradient={option} />
+                      </div>
+                    </GradientSelectOption>
+                  </Select.ItemText>
+                </Select.Item>
+              ))}
+            </Select.Viewport>
+          </Select.Content>
+        </Select.Portal>
+      </Select.Root>
+    </GradientSelectListbox>
   );
 }