react-science 9.0.0 → 10.0.0

package/src/components/activity_bar/activity_bar.tsx

@@ -1,16 +1,11 @@
-/** @jsxImportSource @emotion/react */
+import type { TooltipProps } from '@blueprintjs/core';
+import { ButtonGroup, Classes, Colors, Icon } from '@blueprintjs/core';
+import styled from '@emotion/styled';
+import type { MouseEvent, ReactNode } from 'react';
+import { cloneElement } from 'react';
 
-import {
-  ButtonGroup,
-  Classes,
-  Colors,
-  Icon,
-  type TooltipProps,
-} from '@blueprintjs/core';
-import { css } from '@emotion/react';
-import { cloneElement, type MouseEvent, type ReactNode } from 'react';
-
-import { Button, type ButtonProps } from '../button/index.js';
+import type { ButtonProps } from '../button/index.js';
+import { Button } from '../button/index.js';
 
 export interface ActivityBarProps {
   children: ReactNode;
@@ -24,23 +19,53 @@ export interface ActivityBarItemProps
   disabled?: boolean;
 }
 
+const ActivityButtonGroup = styled(ButtonGroup)`
+  flex-wrap: wrap-reverse;
+  height: 100%;
+  gap: 4px;
+  padding: 4px;
+  border-left: 1px solid ${Colors.LIGHT_GRAY4};
+  background-color: ${Colors.WHITE};
+`;
+
 export function ActivityBar(props: ActivityBarProps) {
   const { children } = props;
 
   return (
-    <ButtonGroup
-      vertical
-      large
-      minimal
-      style={{
-        flexWrap: 'wrap-reverse',
-      }}
-    >
+    <ActivityButtonGroup vertical large minimal>
       {children}
-    </ButtonGroup>
+    </ActivityButtonGroup>
   );
 }
 
+const ActivityButton = styled(Button)`
+  font-size: 1.125em;
+  width: fit-content;
+  .${Classes.ICON} {
+    color: ${Colors.DARK_GRAY3};
+  }
+  .bp5-icon {
+    width: 20px;
+    height: 20px;
+    font-size: 14px;
+  }
+  .bp5-tag {
+    font-size: 12px;
+    line-height: 14px;
+    min-width: 18px;
+    min-height: 18px;
+  }
+`;
+
+const ActivityButtonIconContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 0;
+  height: 0;
+  margin-right: 0;
+`;
+
 export function ActivityBarItem(props: ActivityBarItemProps) {
   const {
     active = false,
@@ -61,42 +86,13 @@ export function ActivityBarItem(props: ActivityBarItemProps) {
         });
 
   return (
-    <Button
+    <ActivityButton
       type="button"
-      css={css`
-        .${Classes.ICON} {
-          color: ${Colors.DARK_GRAY3};
-        }
-        .bp5-icon {
-          width: 20px;
-          height: 20px;
-          font-size: 14px;
-        }
-        .bp5-tag {
-          font-size: 12px;
-          line-height: 14px;
-          min-width: 18px;
-          min-height: 18px;
-        }
-      `}
-      style={{
-        fontSize: '1.125em',
-        width: 'fit-content',
-      }}
       active={active}
       icon={
-        <div
-          style={{
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            width: 0,
-            height: 0,
-            marginRight: 0,
-          }}
-        >
+        <ActivityButtonIconContainer>
           <Icon icon={resizedIcon} size={20} />
-        </div>
+        </ActivityButtonIconContainer>
       }
       onClick={onClick}
       tooltipProps={

package/src/components/activity_panel/activity_panel.tsx

@@ -0,0 +1,75 @@
+import { Colors } from '@blueprintjs/core';
+import styled from '@emotion/styled';
+import type { ReactNode } from 'react';
+
+import { Button } from '../button/index.js';
+
+const PADDING_LG = 8;
+const PADDING_SM = 4;
+
+export interface ActivityPanelProps {
+  children: ReactNode;
+}
+
+export interface ActivityPanelItemProps {
+  title: string;
+  children: ReactNode;
+  onClose: () => void;
+}
+
+const PanelContainer = styled.div`
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  background-color: ${Colors.LIGHT_GRAY5};
+  gap: 1px;
+  border-left: 1px solid ${Colors.LIGHT_GRAY4};
+`;
+
+const PanelItemContainer = styled.div`
+  flex-grow: 1;
+  display: flex;
+  background-color: ${Colors.WHITE};
+  flex-direction: column;
+`;
+
+const PanelItemHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: ${PADDING_SM}px ${PADDING_LG}px ${PADDING_SM}px ${PADDING_LG}px;
+  background-color: ${Colors.LIGHT_GRAY4};
+`;
+
+const PanelItemContent = styled.div`
+  flex-grow: 1;
+  padding: ${PADDING_LG}px;
+`;
+
+const PanelItemTitle = styled.div`
+  color: ${Colors.DARK_GRAY5};
+  font-weight: bold;
+`;
+
+export function ActivityPanel(props: ActivityPanelProps) {
+  const { children } = props;
+
+  return <PanelContainer>{children}</PanelContainer>;
+}
+
+export function ActivityPanelItem(props: ActivityPanelItemProps) {
+  const { title, children, onClose } = props;
+
+  return (
+    <PanelItemContainer>
+      <PanelItemHeader>
+        <PanelItemTitle>{title}</PanelItemTitle>
+        <Button minimal icon="cross" onClick={onClose} />
+      </PanelItemHeader>
+
+      <PanelItemContent>{children}</PanelItemContent>
+    </PanelItemContainer>
+  );
+}
+
+ActivityPanel.Item = ActivityPanelItem;

package/src/components/activity_panel/index.ts

@@ -0,0 +1 @@
+export * from './activity_panel.js';

package/src/components/button/Button.tsx

@@ -1,17 +1,20 @@
 /** @jsxImportSource @emotion/react */
+import type {
+  AnchorButtonProps as BlueprintAnchorButtonProps,
+  ButtonProps as BlueprintButtonProps,
+  TagProps,
+  TooltipProps,
+} from '@blueprintjs/core';
 import {
   AnchorButton as BlueprintAnchorButton,
-  type AnchorButtonProps as BlueprintAnchorButtonProps,
   Button as BlueprintButton,
-  type ButtonProps as BlueprintButtonProps,
   Icon,
   Tag,
-  type TagProps,
   Tooltip,
-  type TooltipProps,
 } from '@blueprintjs/core';
 import { css } from '@emotion/react';
-import { Fragment, type ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import { Fragment } from 'react';
 
 type BlueprintProps = {
   [key in keyof BlueprintButtonProps &
@@ -44,6 +47,10 @@ export function Button(props: ButtonProps) {
       renderTarget={({ isOpen, ...targetProps }) => (
         <InnerButton
           css={css({
+            // Setting the line-height makes sure regular sized buttons have a
+            // height consistent with the input fields and across variants.
+            // Using the same line height as in the blueprint docs.
+            lineHeight: 1.15,
             position: 'relative',
             '.bp5-icon': !children && {
               marginRight: '0',

package/src/components/color-picker/color-picker-dropdown/ColorPickerDropdown.tsx

@@ -1,11 +1,10 @@
-import { Popover, type PopoverProps } from '@blueprintjs/core';
+import type { PopoverProps } from '@blueprintjs/core';
+import { Popover } from '@blueprintjs/core';
 import styled from '@emotion/styled';
 
 import FixedColorPreview from '../preview/FixedColorPreview.js';
-import {
-  ColorPicker,
-  type ColorPickerProps,
-} from '../react-color/ColorPicker.js';
+import type { ColorPickerProps } from '../react-color/ColorPicker.js';
+import { ColorPicker } from '../react-color/ColorPicker.js';
 import * as colorHelper from '../react-color/helpers/color.js';
 
 interface ColorPickerDropdownProps

package/src/components/color-picker/gradient_select/gradient_select.tsx

@@ -1,16 +1,15 @@
 /** @jsxImportSource @emotion/react */
 import { Button, MenuItem } from '@blueprintjs/core';
-import { type ItemRenderer, Select } from '@blueprintjs/select';
+import type { ItemRenderer } from '@blueprintjs/select';
+import { Select } from '@blueprintjs/select';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { FaChevronDown } from 'react-icons/fa';
 
 import FixedGradientPreview from '../preview/FixedGradientPreview.js';
 
-import {
-  fixedGradientScales,
-  type GradientScaleName,
-} from './gradient_select.utils.js';
+import type { GradientScaleName } from './gradient_select.utils.js';
+import { fixedGradientScales } from './gradient_select.utils.js';
 
 const scaleOptions = Object.keys(fixedGradientScales) as GradientScaleName[];
 

package/src/components/color-picker/preview/FixedGradientPreview.tsx

@@ -1,9 +1,7 @@
 import { useMemo } from 'react';
 
-import {
-  fixedGradientScales,
-  type GradientScaleName,
-} from '../gradient_select/index.js';
+import type { GradientScaleName } from '../gradient_select/index.js';
+import { fixedGradientScales } from '../gradient_select/index.js';
 
 interface FixedGradientPreviewProps {
   gradient: GradientScaleName;

package/src/components/color-picker/react-color/ColorPicker.tsx

@@ -1,11 +1,6 @@
 import lodashDebounce from 'lodash/debounce.js';
-import {
-  type CSSProperties,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import type { CSSProperties } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 import { defaultColorPalette } from '../palette.js';
 

package/src/components/color-picker/react-color/sketch/SketchFields.tsx

@@ -1,4 +1,5 @@
-import { type CSSProperties, useCallback } from 'react';
+import type { CSSProperties } from 'react';
+import { useCallback } from 'react';
 
 import type { HSL, RGB } from '../ColorPicker.js';
 import { EditableInput } from '../common/index.js';

package/src/components/color-picker/react-color/sketch/SketchPresetColors.tsx

@@ -1,4 +1,5 @@
-import { type CSSProperties, type MouseEvent, useCallback } from 'react';
+import type { CSSProperties, MouseEvent } from 'react';
+import { useCallback } from 'react';
 
 import { Swatch } from '../common/index.js';
 

package/src/components/dialog/ConfirmDialog.tsx

@@ -1,10 +1,6 @@
 /** @jsxImportSource @emotion/react */
-import {
-  Dialog,
-  DialogBody,
-  DialogFooter,
-  type DialogProps,
-} from '@blueprintjs/core';
+import type { DialogProps } from '@blueprintjs/core';
+import { Dialog, DialogBody, DialogFooter } from '@blueprintjs/core';
 import { css } from '@emotion/react';
 
 import { Button } from '../button/index.js';

package/src/components/forms/radio-group/ButtonRadioItem.tsx

@@ -2,7 +2,8 @@
 import { css } from '@emotion/react';
 import * as RadioGroup from '@radix-ui/react-radio-group';
 
-import { enabledColor, type InputVariant } from '../styles.js';
+import type { InputVariant } from '../styles.js';
+import { enabledColor } from '../styles.js';
 
 import type { RadioGroupProps, RadioOption } from './RadioGroup.js';
 

package/src/components/fullscreen/fullscreen_context.provider.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable no-alert */
-import { type ReactNode, useEffect, useMemo, useReducer, useRef } from 'react';
+import type { ReactNode } from 'react';
+import { useEffect, useMemo, useReducer, useRef } from 'react';
 
 import { fullscreenContext, useFullscreen } from './fullscreen_context.js';
 

package/src/components/hooks/useModifiedPopper.ts

@@ -1,6 +1,8 @@
-import { type Placement } from '@popperjs/core';
-import { type HTMLAttributes, useState } from 'react';
-import { type Modifier, usePopper } from 'react-popper';
+import type { Placement } from '@popperjs/core';
+import type { HTMLAttributes } from 'react';
+import { useState } from 'react';
+import type { Modifier } from 'react-popper';
+import { usePopper } from 'react-popper';
 
 const sameWidthModifier: Modifier<'sameWidth'> = {
   name: 'sameWidth',

package/src/components/hooks/useOnClickOutside.ts

@@ -1,4 +1,5 @@
-import { type RefObject, useEffect } from 'react';
+import type { RefObject } from 'react';
+import { useEffect } from 'react';
 
 import { useRootLayoutContext } from '../root-layout/root_layout_context.js';
 

package/src/components/hooks/useSelect.tsx

@@ -1,6 +1,7 @@
 import { MenuItem } from '@blueprintjs/core';
-import { type ItemRenderer } from '@blueprintjs/select';
-import { type ReactNode, useState } from 'react';
+import type { ItemRenderer } from '@blueprintjs/select';
+import type { ReactNode } from 'react';
+import { useState } from 'react';
 
 type FilterType<SourceType, Type> = Pick<
   SourceType,

package/src/components/index.ts

@@ -14,6 +14,7 @@ export * from './split-pane/index.js';
 export * from './table/index.js';
 export * from './toolbar/index.js';
 export * from './activity_bar/index.js';
+export * from './activity_panel/index.js';
 export * from './utils/index.js';
 export * from './selected-total/index.js';
 export * as ValueRenderers from './value-renderers/index.js';

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

@@ -2,13 +2,9 @@
 import { Icon, InputGroup } from '@blueprintjs/core';
 import { css } from '@emotion/react';
 import * as Collapsible from '@radix-ui/react-collapsible';
-import {
-  type CSSProperties,
-  memo,
-  useCallback,
-  useMemo,
-  useState,
-} from 'react';
+import type { CSSProperties } from 'react';
+import { memo, useCallback, useMemo, useState } from 'react';
+import { match, P } from 'ts-pattern';
 
 import { SelectedTotal } from '../selected-total/index.js';
 import { createTableColumnHelper, Table } from '../table/index.js';
@@ -256,18 +252,16 @@ const InfoPanelContent = memo((props: InfoPanelContentProps) => {
  * @returns - ValueRenderers component.
  */
 function valueCell(value: number | string | object | boolean) {
-  switch (typeof value) {
-    case 'boolean':
-      return <ValueRenderers.Text value={value ? 'Yes' : 'No'} />;
-    case 'number':
-      return <ValueRenderers.Number value={value} />;
-    case 'object':
-      return <ValueRenderers.Object value={value} />;
-    case 'string':
-      return <ValueRenderers.Text value={value} />;
-    default:
-      return <ValueRenderers.Text value={value} />;
-  }
+  return match(value)
+    .with(P.boolean, (value) => (
+      <ValueRenderers.Text value={value ? 'Yes' : 'No'} />
+    ))
+    .with(P.number, (value) => <ValueRenderers.Number value={value} />)
+    .with(P.string, (value) => <ValueRenderers.Text value={value} />)
+    .with({}, (value) => <ValueRenderers.Object value={value} />)
+    .otherwise((value) => (
+      <ValueRenderers.Text value={String(value as unknown)} />
+    ));
 }
 
 /**
@@ -283,19 +277,13 @@ function valueSearch(
   lowerCase = true,
 ): boolean {
   if (lowerCase) {
-    value = String(value).toLowerCase();
+    value = String(value as unknown).toLowerCase();
     search = search.toLowerCase();
   }
-  switch (typeof value) {
-    case 'number':
-      return String(value).includes(search);
-    case 'boolean':
-      return String(value).includes(search);
-    case 'object':
-      return JSON.stringify(value).includes(search);
-    case 'string':
-      return value.includes(search);
-    default:
-      return true;
-  }
+  return match(value)
+    .with(P.boolean, (value) => String(value).includes(search))
+    .with(P.number, (value) => String(value).includes(search))
+    .with(P.string, (value) => value.includes(search))
+    .with({}, (value) => JSON.stringify(value).includes(search))
+    .otherwise(() => true);
 }

package/src/components/logger/FifoLoggerDialog.tsx

@@ -4,7 +4,8 @@ import { Dialog, DialogBody, DialogFooter } from '@blueprintjs/core';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import type { LogEntry } from 'fifo-logger';
-import { type CSSProperties, useMemo } from 'react';
+import type { CSSProperties } from 'react';
+import { useMemo } from 'react';
 
 import { Button } from '../button/index.js';
 import { createTableColumnHelper, Table } from '../table/index.js';

package/src/components/logger/FifoLoggerToolbarItem.tsx

@@ -1,4 +1,4 @@
-import { Intent } from '@blueprintjs/core';
+import type { Intent } from '@blueprintjs/core';
 import type { LogEntry } from 'fifo-logger';
 import { useState } from 'react';
 

package/src/components/root-layout/root_layout.tsx

@@ -1,11 +1,7 @@
 import { BlueprintProvider, FocusStyleManager } from '@blueprintjs/core';
 import { QueryClientProvider } from '@tanstack/react-query';
-import {
-  type CSSProperties,
-  type ReactNode,
-  useCallback,
-  useState,
-} from 'react';
+import type { CSSProperties, ReactNode } from 'react';
+import { useCallback, useState } from 'react';
 
 import { AccordionProvider } from '../accordion/index.js';
 

package/src/components/split-pane/SplitPane.tsx

@@ -1,15 +1,13 @@
 /** @jsxImportSource @emotion/react */
+import { Colors } from '@blueprintjs/core';
 import { css } from '@emotion/react';
-import {
-  type CSSProperties,
-  type PointerEvent as ReactPointerEvent,
-  type ReactNode,
-  type RefObject,
-  useEffect,
-  useReducer,
-  useRef,
-  useState,
+import type {
+  CSSProperties,
+  PointerEvent as ReactPointerEvent,
+  ReactNode,
+  RefObject,
 } from 'react';
+import { useEffect, useReducer, useRef, useState } from 'react';
 import useResizeObserver from 'use-resize-observer';
 
 import { useOnOff } from '../hooks/useOnOff.js';
@@ -291,7 +289,7 @@ function getSeparatorStyle(direction: SplitPaneDirection, enabled: boolean) {
       cursor: enabled ? 'ns-resize' : 'pointer',
     },
     {
-      backgroundColor: 'rgb(247, 247, 247)',
+      backgroundColor: Colors.LIGHT_GRAY5,
       display: 'flex',
       justifyContent: 'center',
       alignItems: 'center',
@@ -299,7 +297,7 @@ function getSeparatorStyle(direction: SplitPaneDirection, enabled: boolean) {
       minWidth: 11,
       touchAction: 'none',
       ':hover': {
-        backgroundColor: 'rgb(223, 223, 223)',
+        backgroundColor: Colors.LIGHT_GRAY3,
       },
     },
   ]);

package/src/components/table/table_header_cell.tsx

@@ -1,4 +1,5 @@
-import { flexRender, type Header, type RowData } from '@tanstack/react-table';
+import type { Header, RowData } from '@tanstack/react-table';
+import { flexRender } from '@tanstack/react-table';
 import type { CSSProperties } from 'react';
 
 interface TableHeaderCellProps<TData extends RowData> {

package/src/components/table/table_root.tsx

@@ -1,11 +1,10 @@
 /** @jsxImportSource @emotion/react */
 
 import { HTMLTable } from '@blueprintjs/core';
+import type { RowData, TableOptions } from '@tanstack/react-table';
 import {
   getCoreRowModel,
   getSortedRowModel,
-  type RowData,
-  type TableOptions,
   useReactTable,
 } from '@tanstack/react-table';
 import type { TableHTMLAttributes } from 'react';

package/src/components/table/table_row_cell.tsx

@@ -1,4 +1,5 @@
-import { type Cell, flexRender, type RowData } from '@tanstack/react-table';
+import type { Cell, RowData } from '@tanstack/react-table';
+import { flexRender } from '@tanstack/react-table';
 
 interface TableRowCellProps<TData extends RowData> {
   cell: Cell<TData, unknown>;

package/src/components/table/table_utils.ts

@@ -1,9 +1,5 @@
-import {
-  type ColumnDef,
-  createColumnHelper,
-  type Row,
-  type RowData,
-} from '@tanstack/react-table';
+import type { ColumnDef, Row, RowData } from '@tanstack/react-table';
+import { createColumnHelper } from '@tanstack/react-table';
 import type { ReactNode } from 'react';
 
 export type TableColumnDef<TData extends RowData, TValue = unknown> = ColumnDef<