react-science 0.32.2 → 0.33.0

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

@@ -2,24 +2,27 @@
 import { Intent } from '@blueprintjs/core';
 import { ReactElement, ReactNode } from 'react';
 import { ButtonProps } from '../index';
-export interface ToolbarProps {
-    vertical?: boolean;
-    large?: boolean;
+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 ToolbarItemProps {
+export interface ToolbarItemProps extends ToolbarBaseProps {
     id?: string;
     title: string;
     icon: ButtonProps['icon'];
     active?: boolean;
     onClick?: (item: ToolbarItemProps) => void;
     className?: string;
-    intent?: Intent;
+    noTooltip?: boolean;
 }
 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;
 }
+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,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,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,gBAAgB;IAC/B,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,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;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,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"}

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

@@ -44,9 +44,10 @@ export function Toolbar(props) {
             }, children: children }) }));
 }
 Toolbar.Item = function ToolbarItem(props) {
-    const { active = false, icon, onClick, title, id, intent: itemIntent, ...other } = props;
-    const { intent: toolbarIntent, large, vertical, disabled, } = useToolbarContext();
-    const intent = itemIntent || toolbarIntent;
+    const { active = false, icon, onClick, title, id, intent: itemIntent, disabled: itemDisabled, noTooltip = false, ...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 `
         .${Classes.ICON} {
           color: ${Colors.DARK_GRAY3};
@@ -58,12 +59,14 @@ Toolbar.Item = function ToolbarItem(props) {
             flex: 'none',
         }, type: "button", active: active, icon: icon, onClick: () => {
             onClick?.(props);
-        }, tooltipProps: {
-            content: title,
-            placement: vertical ? 'right' : 'bottom',
-            intent,
-            compact: !large,
-        }, ...other }));
+        }, tooltipProps: noTooltip
+            ? undefined
+            : {
+                content: title,
+                placement: vertical ? 'right' : 'bottom',
+                intent,
+                compact: !large,
+            }, ...other }));
 };
 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-science",
-  "version": "0.32.2",
+  "version": "0.33.0",
   "description": "React components to build scientific applications UI",
   "exports": {
     "./app": {
@@ -51,7 +51,7 @@
     "test-only": "vitest run --coverage "
   },
   "volta": {
-    "node": "20.10.0"
+    "node": "20.11.0"
   },
   "overrides": {
     "react": "^18.2.0",
@@ -64,23 +64,23 @@
     "react-dom": ">=18.0.0"
   },
   "dependencies": {
-    "@blueprintjs/select": "^5.0.20",
-    "@emotion/react": "^11.11.1",
+    "@blueprintjs/select": "^5.0.23",
+    "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
-    "@headlessui/react": "^1.7.17",
+    "@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.13.4",
-    "@tanstack/react-table": "^8.10.7",
+    "@tanstack/react-query": "^5.17.19",
+    "@tanstack/react-table": "^8.11.7",
     "biologic-converter": "^0.6.0",
     "cheminfo-types": "^1.7.2",
     "d3-scale-chromatic": "^3.0.0",
-    "filelist-utils": "^1.10.2",
+    "filelist-utils": "^1.11.0",
     "immer": "^10.0.3",
-    "jcampconverter": "^9.5.0",
+    "jcampconverter": "^9.6.0",
     "lodash": "^4.17.21",
     "ml-gsd": "^12.1.3",
     "ml-peak-shape-generator": "^4.1.2",
@@ -90,8 +90,8 @@
     "netcdfjs": "^3.0.0",
     "react-d3-utils": "^1.0.0",
     "react-dropzone": "^14.2.3",
-    "react-error-boundary": "^4.0.11",
-    "react-icons": "^4.12.0",
+    "react-error-boundary": "^4.0.12",
+    "react-icons": "^5.0.1",
     "react-inspector": "^6.0.2",
     "react-kbs": "^2.1.1",
     "react-plot": "^1.4.2",
@@ -102,41 +102,41 @@
     "wdf-parser": "^0.3.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.6",
+    "@babel/core": "^7.23.7",
     "@babel/eslint-parser": "^7.23.3",
     "@babel/preset-react": "^7.23.3",
-    "@blueprintjs/core": "^5.7.2",
-    "@blueprintjs/icons": "^5.5.0",
-    "@playwright/experimental-ct-react": "^1.40.1",
-    "@playwright/test": "^1.40.1",
-    "@storybook/addon-essentials": "7.6.4",
-    "@storybook/addon-storysource": "7.6.4",
-    "@storybook/blocks": "7.6.4",
-    "@storybook/react": "7.6.4",
-    "@storybook/react-vite": "7.6.4",
+    "@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",
     "@types/babel__core": "^7.20.5",
     "@types/d3-scale-chromatic": "^3.0.3",
     "@types/lodash": "^4.14.202",
-    "@types/react": "^18.2.45",
-    "@types/react-dom": "^18.2.17",
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
     "@types/react-inspector": "^4.0.6",
     "@types/tinycolor2": "^1.4.6",
     "@vitejs/plugin-react": "^4.2.1",
-    "@vitest/coverage-v8": "^1.0.4",
-    "cheminfo-font": "^1.12.0",
+    "@vitest/coverage-v8": "^1.2.1",
+    "cheminfo-font": "^1.13.0",
     "cross-env": "^7.0.3",
-    "eslint": "^8.55.0",
+    "eslint": "^8.56.0",
     "eslint-config-zakodium": "^8.1.0",
     "eslint-plugin-storybook": "^0.6.15",
-    "prettier": "^3.1.1",
+    "prettier": "^3.2.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-ocl": "^6.1.0",
     "rimraf": "^5.0.5",
-    "storybook": "7.6.4",
+    "storybook": "7.6.10",
     "typescript": "^5.3.3",
-    "vite": "^5.0.8",
-    "vitest": "^1.0.4"
+    "vite": "^5.0.12",
+    "vitest": "^1.2.1"
   },
   "repository": {
     "type": "git",

package/src/app/about/AboutDialogToolbarButton.tsx

@@ -1,8 +1,7 @@
-import { ButtonProps } from '@blueprintjs/core';
-import styled from '@emotion/styled';
+import { ButtonProps, Dialog, DialogBody } from '@blueprintjs/core';
 import { ReactNode } from 'react';
 
-import { Modal, Toolbar, useOnOff } from '../../components';
+import { Toolbar, useOnOff } from '../../components';
 
 interface AboutDialogToolbarButtonProps {
   name: string;
@@ -10,11 +9,6 @@ interface AboutDialogToolbarButtonProps {
   body: ReactNode;
 }
 
-const ModalBody = styled.div`
-  max-width: 600px;
-  padding: 10px;
-`;
-
 export function AboutDialogToolbarButton(props: AboutDialogToolbarButtonProps) {
   const { name, icon, body } = props;
   const [isOpenDialog, openDialog, closeDialog] = useOnOff(false);
@@ -22,12 +16,14 @@ export function AboutDialogToolbarButton(props: AboutDialogToolbarButtonProps) {
   return (
     <>
       <Toolbar.Item title={`About ${name}`} onClick={openDialog} icon={icon} />
-      <Modal isOpen={isOpenDialog} onRequestClose={closeDialog}>
-        <Modal.Header>{name}</Modal.Header>
-        <Modal.Body>
-          <ModalBody>{body}</ModalBody>
-        </Modal.Body>
-      </Modal>
+      <Dialog
+        isOpen={isOpenDialog}
+        onClose={closeDialog}
+        title={name}
+        icon="info-sign"
+      >
+        <DialogBody>{body}</DialogBody>
+      </Dialog>
     </>
   );
 }

package/src/app/kinds/ir/IrPeaksPanel.tsx

@@ -65,7 +65,7 @@ export function IrPeaksPanel(props: IrPeaksPanelProps) {
     getSortedRowModel: getSortedRowModel(),
   });
   return (
-    <Table>
+    <Table bordered>
       <Table.Header>
         {table
           .getHeaderGroups()

package/src/app/panels/SignalProcessingPanel.tsx

@@ -40,14 +40,14 @@ export function SignalProcessingPanel(props: SignalProcessingPanelProps) {
 
   return (
     <div>
-      <Table border={false}>
+      <Table>
         <Table.Header>
-          <ValueRenderers.Title value=" " />
-          <ValueRenderers.Title value="Name" />
-          <ValueRenderers.Title value="Options" />
+          <ValueRenderers.Header value=" " />
+          <ValueRenderers.Header value="Name" />
+          <ValueRenderers.Header value="Options" />
         </Table.Header>
         {filters.map(({ name, options }, i) => (
-          <Table.Row key={name} border>
+          <Table.Row key={name} hasBorder>
             <ValueRenderers.Component>
               <div style={{ display: 'flex', gap: '3px' }}>
                 <Button

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

@@ -1,11 +1,14 @@
+/** @jsxImportSource @emotion/react */
+import { Tab, Tabs } from '@blueprintjs/core';
+import { css } from '@emotion/react';
+
 import {
   kindLabels,
   MeasurementKind,
   measurementKinds,
-  useAppState,
   useAppDispatch,
-} from '../../../app-data/index';
-import { TabItem, Tabs } from '../../../components/index';
+  useAppState,
+} from '../../../app-data';
 
 import { MeasurementsTable } from './MeasurementsTable';
 
@@ -25,7 +28,7 @@ export function MeasurementsPanel() {
     (label) => data.measurements[label].entries.length > 0,
   );
 
-  const items: Array<TabItem<MeasurementKind>> = availableKinds.map(kindItem);
+  const items = availableKinds.map(kindItem);
 
   function handleTabSelection(id: MeasurementKind) {
     dispatch({
@@ -34,21 +37,36 @@ export function MeasurementsPanel() {
     });
   }
 
-  if (items.length > 1) {
+  if (items.length > 0) {
     return (
-      <Tabs<MeasurementKind>
-        orientation="horizontal"
-        items={items}
-        opened={view.selectedKind}
-        onClick={handleTabSelection}
-      />
+      <Tabs
+        selectedTabId={view.selectedKind}
+        onChange={handleTabSelection}
+        css={css`
+          div[role='tablist'] {
+            overflow-x: auto;
+            padding: 2px 0 0 1rem;
+            border-bottom: 1px solid gray;
+          }
+          div[role='tabpanel'] {
+            margin-top: 4px;
+          }
+        `}
+      >
+        {items.map((item) => (
+          <Tab
+            id={item.id}
+            key={item.id}
+            title={item.title}
+            panel={item.content}
+            tagContent={data.measurements[item.id].entries.length}
+            tagProps={{ round: true }}
+          />
+        ))}
+      </Tabs>
     );
   }
 
-  if (items.length === 1 && items[0].content) {
-    return <>{items[0].content}</>;
-  }
-
   return (
     <div style={{ paddingTop: '1rem', marginInline: 'auto' }}>
       No data available

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

@@ -6,8 +6,8 @@ import {
   MeasurementKind,
   useAppDispatch,
   useAppState,
-} from '../../../app-data/index';
-import { ConfirmModal, useOnOff } from '../../../components/index';
+} from '../../../app-data';
+import { ConfirmDialog, useOnOff } from '../../../components';
 
 import { MeasurementCheckbox } from './MeasurementCheckbox';
 import MeasurementColorPreview from './MeasurementColorPreview';
@@ -27,7 +27,6 @@ interface MeasurementsTableRowProps {
 const MeasurementsTableContainer = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 5px;
 `;
 
 const MeasurementsTableRoot = styled.table`
@@ -60,13 +59,18 @@ const MeasurementsLinkButton = styled.span`
 const MeasurementsHeaderColumn = styled.div`
   display: flex;
   flex-direction: row;
-  gap: 10px;
+  gap: 12px;
   align-items: center;
   padding-left: 5px;
-
+  padding-right: 5px;
   border-bottom: 1px solid black;
 `;
 
+const MeasurementsHeaderGroup = styled.div`
+  display: flex;
+  gap: 6px;
+`;
+
 const MeasurementsTableRowData = styled.tr`
   height: 50px;
   max-height: 50px;
@@ -102,7 +106,7 @@ export function MeasurementsTable(props: MeasurementsTableProps) {
     view: { selectedMeasurements },
   } = useAppState();
   const dispatch = useAppDispatch();
-  const [isRemoveModalOpen, openRemoveModal, closeRemoveModal] = useOnOff();
+  const [isRemoveDialogOpen, openRemoveDialog, closeRemoveDialog] = useOnOff();
 
   const hasSelectedMeasurements = (selectedMeasurements[kind]?.length ?? 0) > 0;
 
@@ -118,38 +122,41 @@ export function MeasurementsTable(props: MeasurementsTableProps) {
 
   function onRemove() {
     dispatch({ type: 'REMOVE_SELECTED_MEASUREMENTS', payload: { kind } });
-    closeRemoveModal();
+    closeRemoveDialog();
   }
 
   return (
     <MeasurementsTableContainer>
       <MeasurementsHeaderColumn>
-        <MeasurementSelectedVisibilityChange kind={kind} openedEyes />
-        <MeasurementSelectedVisibilityChange kind={kind} openedEyes={false} />
-        <MeasurementsLinkButton onClick={() => onSelectLink(true)}>
-          Select all
-        </MeasurementsLinkButton>
-        <MeasurementsLinkButton onClick={() => onSelectLink(false)}>
-          Unselect all
-        </MeasurementsLinkButton>
-
-        <FaTrash
-          style={
-            hasSelectedMeasurements ? { cursor: 'pointer' } : { opacity: 0.6 }
-          }
-          onClick={hasSelectedMeasurements ? openRemoveModal : undefined}
-        />
-        <ConfirmModal
+        <MeasurementsHeaderGroup>
+          <MeasurementsLinkButton onClick={() => onSelectLink(true)}>
+            Select all
+          </MeasurementsLinkButton>
+          <MeasurementsLinkButton onClick={() => onSelectLink(false)}>
+            Unselect all
+          </MeasurementsLinkButton>
+        </MeasurementsHeaderGroup>
+        <MeasurementsHeaderGroup>
+          <MeasurementSelectedVisibilityChange kind={kind} openedEyes />
+          <MeasurementSelectedVisibilityChange kind={kind} openedEyes={false} />
+          <FaTrash
+            style={
+              hasSelectedMeasurements ? { cursor: 'pointer' } : { opacity: 0.6 }
+            }
+            onClick={hasSelectedMeasurements ? openRemoveDialog : undefined}
+          />
+        </MeasurementsHeaderGroup>
+        <ConfirmDialog
           headerColor="red"
-          isOpen={isRemoveModalOpen}
+          isOpen={isRemoveDialogOpen}
           onConfirm={onRemove}
-          onRequestClose={closeRemoveModal}
+          onClose={closeRemoveDialog}
           saveText="Remove"
         >
           <div style={{ fontWeight: 'bold', padding: 10 }}>
             Remove selected measurements?
           </div>
-        </ConfirmModal>
+        </ConfirmDialog>
       </MeasurementsHeaderColumn>
 
       <MeasurementsTableRoot>

package/src/components/dialog/ConfirmDialog.tsx

@@ -0,0 +1,65 @@
+/** @jsxImportSource @emotion/react */
+import {
+  Dialog,
+  DialogBody,
+  DialogFooter,
+  DialogProps,
+} from '@blueprintjs/core';
+import { css } from '@emotion/react';
+
+import { Button } from '..';
+
+interface ConfirmDialogProps extends Omit<DialogProps, 'isCloseButtonShown'> {
+  onConfirm: () => void;
+  onCancel?: () => void;
+  saveText?: string;
+  cancelText?: string;
+  headerColor: string;
+}
+
+export function ConfirmDialog(props: ConfirmDialogProps) {
+  const {
+    saveText = 'Save',
+    cancelText = 'Cancel',
+    headerColor,
+    onClose,
+    onCancel = onClose,
+    onConfirm,
+    children,
+    ...otherProps
+  } = props;
+
+  return (
+    <Dialog
+      onClose={onClose}
+      {...otherProps}
+      title=" "
+      isCloseButtonShown={false}
+      css={css`
+        .bp5-dialog-header {
+          background-color: ${headerColor};
+          min-height: 0px;
+        }
+      `}
+    >
+      <DialogBody>{children}</DialogBody>
+      <DialogFooter
+        minimal
+        actions={[
+          <Button
+            key="cancel"
+            intent="danger"
+            text={cancelText}
+            onClick={onCancel}
+          />,
+          <Button
+            key="save"
+            intent="primary"
+            text={saveText}
+            onClick={onConfirm}
+          />,
+        ]}
+      />
+    </Dialog>
+  );
+}

package/src/components/dialog/index.ts

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

package/src/components/index.ts

@@ -8,11 +8,10 @@ export * from './header/index';
 export * from './hooks/index';
 export * from './info-panel/index';
 export * from './layout-manager/index';
-export * from './modal/index';
+export * from './dialog/index';
 export * from './root-layout/index';
 export * from './split-pane/index';
 export * from './table/index';
-export * from './tabs/index';
 export * from './toolbar/index';
 export * from './utils/index';
 export * as ValueRenderers from './value-renderers/index';

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

@@ -20,7 +20,6 @@ interface InfoPanelProps {
   data?: InfoPanelData[];
   titleStyle?: CSSProperties;
   inputStyle?: CSSProperties;
-  tableStyle?: CSSProperties;
 }
 const style = {
   container: css({
@@ -37,23 +36,11 @@ const style = {
     gap: 5,
     padding: '5px 2px',
   }),
-  table: css`
-    width: 100%;
-    td:first-of-type {
-      width: 30%;
-    }
-  `,
 };
 
 export function InfoPanel(props: InfoPanelProps) {
   const [search, setSearch] = useState('');
-  const {
-    title = 'Information',
-    data = [],
-    titleStyle,
-    inputStyle,
-    tableStyle,
-  } = props;
+  const { title = 'Information', data = [], titleStyle, inputStyle } = props;
   function viewData(data: Record<string, string | number | object>) {
     const exactMatch: Array<[string, string | number | object]> = [];
     const startsWith: Array<[string, string | number | object]> = [];
@@ -112,10 +99,10 @@ export function InfoPanel(props: InfoPanelProps) {
                   {description}
                 </Disclosure.Button>
                 <Disclosure.Panel>
-                  <Table css={style.table} style={tableStyle}>
+                  <Table bordered>
                     <Table.Header>
-                      <ValueRenderers.Title value="Parameter" />
-                      <ValueRenderers.Title value="Value" />
+                      <ValueRenderers.Header value="Parameter" />
+                      <ValueRenderers.Header value="Value" />
                     </Table.Header>
                     {content}
                   </Table>

package/src/components/layout-manager/LayoutManager.tsx

@@ -8,13 +8,11 @@ import {
 
 import { Accordion } from '../accordion/Accordion';
 import { DropZone } from '../drop-zone/DropZone';
-import { Modal } from '../modal/Modal';
 import { SplitPane } from '../split-pane/SplitPane';
 
 const layoutComponents: ComponentsMap = {
   SplitPane,
   Accordion,
-  Modal,
   DropZone,
 };
 

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

@@ -33,7 +33,7 @@ export function RootLayout(props: RootLayoutProps) {
   }, []);
 
   return (
-    <div style={{ ...style, ...props.style }}>
+    <div style={{ ...style, ...props.style }} translate="no">
       <CustomDivPreflight ref={ref}>
         <RootLayoutProvider innerRef={rootRef}>
           <QueryClientProvider client={queryClient}>