react-science 6.0.1 → 7.0.0

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

@@ -2,8 +2,9 @@
 import { Icon, InputGroup } from '@blueprintjs/core';
 import { css } from '@emotion/react';
 import * as Collapsible from '@radix-ui/react-collapsible';
-import { CSSProperties, useCallback, useMemo, useState } from 'react';
+import { CSSProperties, memo, useCallback, useMemo, useState } from 'react';
 
+import { SelectedTotal } from '../selected-total/SelectedTotal';
 import { createTableColumnHelper, Table } from '../table';
 import * as ValueRenderers from '../value-renderers';
 
@@ -19,6 +20,7 @@ interface InfoPanelProps {
   titleStyle?: CSSProperties;
   inputStyle?: CSSProperties;
 }
+
 const style = {
   content: css({
     overflow: 'hidden',
@@ -87,9 +89,17 @@ const columns = [
   }),
 ];
 
+const emptyData: InfoPanelData[] = [];
+
 export function InfoPanel(props: InfoPanelProps) {
+  const {
+    title = 'Information',
+    data = emptyData,
+    titleStyle,
+    inputStyle,
+  } = props;
+
   const [search, setSearch] = useState('');
-  const { title = 'Information', data = [], titleStyle, inputStyle } = props;
   const viewData = useCallback(
     (data: Record<string, string | number | object>) => {
       const exactMatch: InfoPanelDatum[] = [];
@@ -123,12 +133,9 @@ export function InfoPanel(props: InfoPanelProps) {
     },
     [search],
   );
+
   const { filteredData, total, count } = useMemo(() => {
-    const filteredData: Array<
-      Omit<InfoPanelData, 'data'> & {
-        data: InfoPanelDatum[];
-      }
-    > = [];
+    const filteredData: InfoPanelContentDatum[] = [];
     let total = 0;
     let count = 0;
     for (const { data: dataContent, ...other } of data) {
@@ -140,6 +147,7 @@ export function InfoPanel(props: InfoPanelProps) {
     }
     return { filteredData, total, count };
   }, [data, viewData]);
+
   return (
     <div css={style.container}>
       <div
@@ -179,47 +187,63 @@ export function InfoPanel(props: InfoPanelProps) {
           type="search"
           fill
         />
-        [{count}/{total}]
-      </div>
-      <div
-        style={{
-          position: 'relative',
-          marginTop: '5px',
-          display: 'flex',
-          flexDirection: 'column',
-          overflowY: 'auto',
-          flex: 1,
-        }}
-      >
-        {filteredData.map(({ description, data }) => {
-          return (
-            <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
-                  data={data}
-                  columns={columns}
-                  striped
-                  tableProps={{ style: { width: '100%' } }}
-                  compact
-                />
-              </Collapsible.Content>
-            </Collapsible.Root>
-          );
-        })}
+        <SelectedTotal count={count} total={total} />
       </div>
+      <InfoPanelContent filteredData={filteredData} />
     </div>
   );
 }
+
+type InfoPanelContentDatum = Omit<InfoPanelData, 'data'> & {
+  data: InfoPanelDatum[];
+};
+
+interface InfoPanelContentProps {
+  filteredData: InfoPanelContentDatum[];
+}
+
+const InfoPanelContent = memo((props: InfoPanelContentProps) => {
+  const { filteredData } = props;
+  return (
+    <div
+      style={{
+        position: 'relative',
+        marginTop: '5px',
+        display: 'flex',
+        flexDirection: 'column',
+        overflowY: 'auto',
+        flex: 1,
+      }}
+    >
+      {filteredData.map(({ description, data }) => {
+        return (
+          <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
+                data={data}
+                columns={columns}
+                striped
+                tableProps={{ style: { width: '100%' } }}
+                compact
+              />
+            </Collapsible.Content>
+          </Collapsible.Root>
+        );
+      })}
+    </div>
+  );
+});
+
 /**
  * Get the value cell depending on the type of the value
  * @param value - ValueRenderers value.
@@ -236,7 +260,7 @@ function valueCell(value: number | string | object | boolean) {
     case 'string':
       return <ValueRenderers.Text value={value} />;
     default:
-      <ValueRenderers.Text value={value} />;
+      return <ValueRenderers.Text value={value} />;
   }
 }
 

package/src/components/selected-total/SelectedTotal.tsx

@@ -0,0 +1,32 @@
+interface SelectedTotalProps {
+  total?: number;
+  count?: number;
+}
+
+export function SelectedTotal(props: SelectedTotalProps) {
+  const { total, count } = props;
+  return (
+    <div
+      style={{
+        whiteSpace: 'nowrap',
+        margin: 0,
+      }}
+    >
+      {formatCounterLabel(count, total)}
+    </div>
+  );
+}
+
+function formatCounterLabel(count?: number, total?: number) {
+  const thinSpace = '\u2009';
+  if (count !== undefined && total !== undefined) {
+    return `[${thinSpace}${count}${thinSpace}/${thinSpace}${total}${thinSpace}]`;
+  }
+  if (count !== undefined) {
+    return `[${thinSpace}${count}${thinSpace}]`;
+  }
+  if (total !== undefined) {
+    return `[${thinSpace}${total}${thinSpace}]`;
+  }
+  return '';
+}

package/src/components/selected-total/index.ts

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

package/src/components/toolbar/Toolbar.tsx

@@ -1,28 +1,26 @@
 /** @jsxImportSource @emotion/react */
 import {
   ButtonGroup,
+  ButtonGroupProps,
   Classes,
   Colors,
   Icon,
   Intent,
   Popover,
   PopoverProps,
-  TagProps,
   TooltipProps,
 } from '@blueprintjs/core';
-import { IconName } from '@blueprintjs/icons';
 import { css } from '@emotion/react';
 import {
   cloneElement,
-  type MouseEvent,
-  type ReactElement,
-  type ReactNode,
+  MouseEvent,
+  ReactNode,
   useLayoutEffect,
   useMemo,
   useRef,
 } from 'react';
 
-import { Button } from '../button';
+import { Button, ButtonProps } from '../button';
 
 import {
   ToolbarContext,
@@ -40,33 +38,26 @@ interface ToolbarBaseProps {
   intent?: Intent;
   disabled?: boolean;
 }
-export interface ToolbarProps extends ToolbarBaseProps {
-  vertical?: boolean;
-  large?: boolean;
-  children?:
-    | Array<ReactElement<ToolbarItemProps>>
-    | ReactElement<ToolbarItemProps>
-    | Iterable<ReactNode>
-    | boolean
-    | null;
+export interface ToolbarProps
+  extends ToolbarBaseProps,
+    Pick<
+      ButtonGroupProps,
+      'children' | 'minimal' | 'large' | 'vertical' | 'fill'
+    > {
   popoverInteractionKind?: PopoverInteractionType;
 }
 
-export interface ToolbarItemProps extends ToolbarBaseProps {
-  id?: string;
+export interface ToolbarItemProps
+  extends ToolbarBaseProps,
+    Pick<ButtonProps, 'id' | 'icon' | 'active' | 'tag' | 'tagProps'> {
   tooltip?: TooltipProps['content'];
   tooltipProps?: Omit<TooltipProps, 'content'>;
-  icon: IconName | ReactElement;
-  active?: boolean;
   onClick?: (
     item: ToolbarItemProps & {
       event: MouseEvent;
     },
   ) => void;
-  className?: string;
   isPopover?: boolean;
-  tag?: ReactNode;
-  tagProps?: Omit<TagProps, 'children'>;
 }
 
 export interface ToolbarPopoverItemProps extends PopoverProps {
@@ -83,10 +74,18 @@ export function Toolbar(props: ToolbarProps) {
     large,
     vertical,
     popoverInteractionKind,
+    minimal,
+    fill,
   } = props;
 
   const contextValue = useMemo(
-    () => ({ intent, large, vertical, disabled, popoverInteractionKind }),
+    () => ({
+      intent,
+      large,
+      vertical,
+      disabled,
+      popoverInteractionKind,
+    }),
     [intent, large, vertical, disabled, popoverInteractionKind],
   );
   const ref = useRef<HTMLDivElement>(null);
@@ -124,11 +123,13 @@ export function Toolbar(props: ToolbarProps) {
   return (
     <ToolbarProvider value={contextValue}>
       <ButtonGroup
+        fill={fill}
         // Reset because of layout effect above
         // TODO: remove once the workaround is no longer needed
         key={String(vertical)}
         vertical={vertical}
         large={large}
+        minimal={minimal}
         style={{
           flexWrap: 'wrap',
           borderRight: vertical ? border : undefined,
@@ -147,7 +148,6 @@ Toolbar.Item = function ToolbarItem(props: ToolbarItemProps) {
     onClick,
     tooltip,
     tooltipProps,
-    id,
     intent: itemIntent,
     disabled: itemDisabled,
     isPopover,
@@ -163,7 +163,7 @@ Toolbar.Item = function ToolbarItem(props: ToolbarItemProps) {
   const intent = itemIntent ?? toolbarIntent;
   const disabled = itemDisabled ?? toolbarDisabled;
   const resizedIcon =
-    typeof icon === 'string'
+    !icon || typeof icon === 'string'
       ? icon
       : cloneElement(icon, {
           className: icon.props.className
@@ -174,19 +174,28 @@ Toolbar.Item = function ToolbarItem(props: ToolbarItemProps) {
   return (
     <Button
       alignText={isPopover ? 'left' : undefined}
-      minimal
       disabled={disabled}
       css={css`
         .${Classes.ICON} {
           color: ${Colors.DARK_GRAY3};
         }
+        .bp5-icon {
+          width: ${large ? '20px' : '16px'};
+          height: ${large ? '20px' : '16px'};
+          font-size: ${large ? '14px' : '12px'};
+        }
+        .bp5-tag {
+          font-size: ${large ? '12px' : '10px'};
+          line-height: ${large ? '14px' : '12px'};
+          min-width: ${large ? '18px' : '15px'};
+          min-height: ${large ? '18px' : '15px'};
+        }
       `}
       intent={intent}
       style={{
         position: 'relative',
         fontSize: '1.125em',
         width: 'fit-content',
-        flex: 'none',
       }}
       type="button"
       active={active}
@@ -198,9 +207,10 @@ Toolbar.Item = function ToolbarItem(props: ToolbarItemProps) {
             alignItems: 'center',
             width: 0,
             height: 0,
+            marginRight: 0,
           }}
         >
-          <Icon icon={resizedIcon} />
+          <Icon icon={resizedIcon} size={large ? 20 : 16} />
           {isPopover && (
             <Icon
               icon="caret-right"
@@ -210,6 +220,8 @@ Toolbar.Item = function ToolbarItem(props: ToolbarItemProps) {
                 position: 'absolute',
                 bottom: 0,
                 right: 0,
+                width: large ? 14 : 9,
+                height: large ? 14 : 9,
               }}
             />
           )}
@@ -260,13 +272,11 @@ Toolbar.PopoverItem = function ToolbarPopoverItem(
           fontSize: '1.125em',
           width: 'fit-content',
           height: 'fit-content',
-          flex: 'none',
         },
       }}
+      renderTarget={() => <Toolbar.Item isPopover {...itemProps} />}
       {...other}
-    >
-      <Toolbar.Item isPopover {...itemProps} />
-    </Popover>
+    />
   );
 };