react-science 4.0.0 → 4.1.0

package/src/components/hooks/useSelect.tsx

@@ -1,6 +1,6 @@
 import { MenuItem } from '@blueprintjs/core';
 import { ItemRenderer } from '@blueprintjs/select';
-import { useState } from 'react';
+import { ReactNode, useState } from 'react';
 
 type FilterType<SourceType, Type> = Pick<
   SourceType,
@@ -9,14 +9,17 @@ type FilterType<SourceType, Type> = Pick<
   }[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>;
@@ -91,16 +94,18 @@ function getItemRenderer<T>(value: T, options: SelectOptions<T>) {
     { handleClick, handleFocus, modifiers, index },
   ) => {
     const label = getLabel(item, options);
+    const { renderItem } = options;
+    const { active, disabled } = modifiers;
     return (
       <MenuItem
-        active={modifiers.active}
-        disabled={modifiers.disabled}
+        active={active}
+        disabled={disabled}
         selected={selectedLabel === label}
         key={index}
         onClick={handleClick}
         onFocus={handleFocus}
         roleStructure="listoption"
-        text={label}
+        text={renderItem?.(item) || label}
       />
     );
   };

package/src/components/info-panel/InfoPanel.tsx

@@ -1,7 +1,7 @@
 /** @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 { CSSProperties, useCallback, useMemo, useState } from 'react';
 
 import { ValueRenderers } from '../index';
@@ -19,19 +19,49 @@ interface InfoPanelProps {
   inputStyle?: CSSProperties;
 }
 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: css({
+    transition: 'all 0.3s ease-in-out',
   }),
-  chevron: (open: boolean) =>
-    css({
-      rotate: open ? '90deg' : '0deg',
-      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': {
@@ -95,13 +125,19 @@ export function InfoPanel(props: InfoPanelProps) {
   }, [data, viewData]);
   return (
     <div css={style.container}>
-      <div style={titleStyle}>{title}</div>
+      <div
+        style={{
+          padding: '0 5px',
+          ...titleStyle,
+        }}
+      >
+        {title}
+      </div>
       <div
         tabIndex={0}
         css={css({
-          zIndex: 10,
+          padding: '0 5px',
           marginTop: '5px',
-          position: 'sticky',
           backgroundColor: 'white',
           top: '5px',
           display: 'flex',
@@ -114,7 +150,7 @@ export function InfoPanel(props: InfoPanelProps) {
           css={css({
             flexGrow: 1,
           })}
-          placeholder="search for a parameter ..."
+          placeholder="Search for a parameter"
           value={search}
           onChange={({ target }) => {
             if (target.value !== undefined) {
@@ -130,50 +166,54 @@ export function InfoPanel(props: InfoPanelProps) {
       </div>
       <div
         style={{
+          position: 'relative',
           marginTop: '5px',
           display: 'flex',
           flexDirection: 'column',
-          gap: '5px',
+          overflowY: 'auto',
+          flex: 1,
         }}
       >
         {filteredData.map(({ description, data }) => {
           return (
-            <Disclosure defaultOpen key={description}>
-              {({ open }) => (
-                <>
-                  <Disclosure.Button css={style.button}>
-                    <Icon icon="chevron-right" css={style.chevron(open)} />
-                    {description}
-                  </Disclosure.Button>
-                  <Disclosure.Panel>
-                    <Table
-                      striped
-                      css={css({
-                        width: '100%',
-                      })}
-                      compact
+            <Collapsible.Root
+              key={description}
+              className="CollapsibleRoot"
+              defaultOpen
+            >
+              <Collapsible.Trigger asChild css={style.button}>
+                <div>
+                  <Icon icon="chevron-right" css={style.chevron} />
+                  {description}
+                </div>
+              </Collapsible.Trigger>
+              <Collapsible.Content css={style.content}>
+                <Table
+                  striped
+                  css={css({
+                    width: '100%',
+                  })}
+                  compact
+                >
+                  <Table.Header>
+                    <ValueRenderers.Header value="Parameter" />
+                    <ValueRenderers.Header value="Value" />
+                  </Table.Header>
+                  {data.map(([key, value]) => (
+                    <Table.Row
+                      key={key}
+                      style={{
+                        height: '10px',
+                        padding: '0 !imporant',
+                      }}
                     >
-                      <Table.Header>
-                        <ValueRenderers.Header value="Parameter" />
-                        <ValueRenderers.Header value="Value" />
-                      </Table.Header>
-                      {data.map(([key, value]) => (
-                        <Table.Row
-                          key={key}
-                          style={{
-                            height: '10px',
-                            padding: '0 !imporant',
-                          }}
-                        >
-                          <ValueRenderers.Text value={key} />
-                          {valueCell(value)}
-                        </Table.Row>
-                      ))}
-                    </Table>
-                  </Disclosure.Panel>
-                </>
-              )}
-            </Disclosure>
+                      <ValueRenderers.Text value={key} />
+                      {valueCell(value)}
+                    </Table.Row>
+                  ))}
+                </Table>
+              </Collapsible.Content>
+            </Collapsible.Root>
           );
         })}
       </div>

package/src/components/table/TableHeader.tsx

@@ -1,9 +1,21 @@
 import type { TableProps } from './Table';
 import { TableRow } from './TableRow';
 
-export const TableHeader = ({ children, bordered, style }: TableProps) => {
+const headerStyle: React.CSSProperties = {
+  position: 'sticky',
+  top: 0,
+  zIndex: 10,
+  backgroundColor: 'white',
+};
+
+export const TableHeader = ({
+  children,
+  bordered,
+  style,
+  sticky,
+}: TableProps & { sticky?: boolean }) => {
   return (
-    <thead>
+    <thead style={sticky ? headerStyle : undefined}>
       <TableRow bordered={bordered} style={style}>
         {children}
       </TableRow>