react-science 0.24.2 → 0.25.0

package/src/app-data/kinds/ir/irAutoPeakPickingEnhancer.ts

@@ -36,20 +36,20 @@ export function irAutoPeakPickingEnhancer(
 
   const datum = measurement.data[0];
 
-  let x = datum.variables[xVariable]?.data;
-  let y = datum.variables[yVariable]?.data;
+  const x = datum.variables[xVariable]?.data;
+  const y = datum.variables[yVariable]?.data;
   if (!x || !y) return [];
 
-  let { from, to } = options;
+  const { from, to } = options;
 
   let peaks: Array<{ x: number; y: number; width: number; index: number }> =
     gsd({ x, y }, options);
 
   if (from !== undefined) {
-    peaks = peaks.filter((peak) => peak.x >= (from as number));
+    peaks = peaks.filter((peak) => peak.x >= from);
   }
   if (to !== undefined) {
-    peaks = peaks.filter((peak) => peak.x <= (to as number));
+    peaks = peaks.filter((peak) => peak.x <= to);
   }
   if (minPeakWidth) {
     peaks = peaks.filter((peak) => peak.width >= minPeakWidth);
@@ -82,7 +82,7 @@ function getPeakKind(
   minTransmittance: number,
   maxTransmittance: number,
 ): IrPeakKind {
-  let position =
+  const position =
     (maxTransmittance - transmittance) / (maxTransmittance - minTransmittance);
   if (position < 0.33) {
     return 'w';

package/src/app-data/kinds/ir/irMeasurementEnhancer.ts

@@ -9,7 +9,7 @@ import type { MeasurementBase } from '../../index';
 export function irMeasurementEnhancer(measurement: MeasurementBase) {
   for (const datum of measurement.data) {
     const variables = datum.variables;
-    let yVariable = variables.y;
+    const yVariable = variables.y;
     let absorbance = true;
     if (yVariable.label.toLowerCase().includes('trans')) {
       absorbance = false;

package/src/app-data/loaders/cdfLoader.ts

@@ -28,8 +28,7 @@ export async function cdfLoader(
           kind = 'gclcms';
         } else if (
           reader.dataVariableExists('ordinate_values') &&
-          reader.getAttribute('detector_name') &&
-          reader.getAttribute('detector_name').match(/dad|tic/i)
+          reader.getAttribute('detector_name')?.match(/dad|tic/i)
         ) {
           kind = 'gclc';
         } else {
@@ -102,7 +101,7 @@ function chromatogramWithMassSpectra(
     allIntensities.push(intensities);
     allMasses.push(masses);
   }
-  let data: MeasurementBase['data'] = [];
+  const data: MeasurementBase['data'] = [];
   for (let i = 0; i < times.length; i++) {
     data.push({
       info: {
@@ -130,7 +129,7 @@ function chromatogramWithMassSpectra(
 
 function chromatogram(reader: NetCDFReader): MeasurementBase['data'] {
   // Taken from: https://github.com/cheminfo/netcdf-gcms
-  let data: MeasurementBase['data'] = [];
+  const data: MeasurementBase['data'] = [];
   const intensities: number[] = reader.getDataVariable('ordinate_values');
   const numberPoints = intensities.length;
   const detector: string = reader.getAttribute('detector_name');
@@ -163,7 +162,7 @@ function chromatogram(reader: NetCDFReader): MeasurementBase['data'] {
     samplingInterval = (runtimeLength - delayTime) / numberPoints;
   }
 
-  let times: number[] = [];
+  const times: number[] = [];
   let time = delayTime;
   for (let i = 0; i < numberPoints; i++) {
     times.push(time);

package/src/app-data/loaders/jcampLoader.ts

@@ -92,7 +92,7 @@ function normalizeSpectra(spectra: any) {
         data: spectrum.data.y || spectrum.data.Y,
       };
     } else {
-      for (let key in variables) {
+      for (const key in variables) {
         const variable = variables[key];
         if (variable.label) continue;
         variable.label = variable.name || variable.symbol || key;

package/src/app-data/loaders/loadMeasurements.ts

@@ -20,7 +20,7 @@ export async function loadMeasurements(
   options: LoadOptions = {},
 ) {
   const measurements: Partial<Measurements> = {};
-  let logs: ParserLog[] = [];
+  const logs: ParserLog[] = [];
   const { loaders = [], enhancers = {}, logger = true } = options;
   for (const loader of loaders) {
     const loaderData = await loader(fileCollection, logger ? logs : undefined);

package/src/app-data/loaders/wdfLoader.ts

@@ -60,7 +60,7 @@ function normalizeSpectra(blocks: Wdf['blocks']) {
 
   for (let i = 0; i < yVariables.length; i++) {
     const yVariable = yVariables[i];
-    let origin = origins[i] || {};
+    const origin = origins[i] || {};
 
     results.push({
       variables: { x: getXVariable(blocks), y: yVariable },
@@ -111,12 +111,12 @@ function getYVariables(blocks: Wdf['blocks']) {
   return yVariables;
 }
 
-type Origin = {
+interface Origin {
   xPositionUnits: string;
   yPositionUnits: string;
   xPosition: number | bigint;
   yPosition: number | bigint;
-};
+}
 function getOrigins(blocks: Wdf['blocks']) {
   const originBlock = blocks.find(
     (block) => block.blockType === 'WDF_BLOCKID_ORIGIN',

package/src/app-data/state/data/data.helpers.ts

@@ -93,7 +93,7 @@ export interface MeasurementKindAndId {
 }
 
 export function getMeasurementKindAndId(data: AppData, measurementId: string) {
-  for (let kind of measurementKinds) {
+  for (const kind of measurementKinds) {
     const measurement = getMeasurement(data.measurements, kind, measurementId);
     if (measurement) return { kind, id: measurementId };
   }
@@ -124,16 +124,16 @@ export function* iterateMeasurementEntries(
   for (const [measurementKind, measurementData] of Object.entries(
     measurements,
   )) {
-    for (let measurement of measurementData.entries) {
+    for (const measurement of measurementData.entries) {
       yield { kind: measurementKind as MeasurementKind, measurement };
     }
   }
 }
 
-export type MeasurementAndView<Kind extends MeasurementKind> = {
+export interface MeasurementAndView<Kind extends MeasurementKind> {
   measurement: Measurements[Kind]['entries'][number];
   view: AppView['measurements'][string];
-};
+}
 
 export function* iterateKindMeasurementsAndView<Kind extends MeasurementKind>(
   state: AppState,
@@ -141,7 +141,7 @@ export function* iterateKindMeasurementsAndView<Kind extends MeasurementKind>(
 ): IterableIterator<MeasurementAndView<Kind>> {
   const measurements = state.data.measurements[kind];
   const view = state.view.measurements;
-  for (let measurement of measurements.entries) {
+  for (const measurement of measurements.entries) {
     yield { measurement, view: view[measurement.id] };
   }
 }

package/src/app-data/state/view/AppView.ts

@@ -3,7 +3,7 @@ import type { MeasurementKind } from '../index';
 
 export interface AppView {
   selectedKind?: MeasurementKind;
-  selectedMeasurements: Partial<Record<MeasurementKind, Array<string>>>;
+  selectedMeasurements: Partial<Record<MeasurementKind, string[]>>;
   measurements: Record<string, MeasurementAppView>;
   plot: Partial<Record<MeasurementKind, PlotView>>;
 }

package/src/components/accordion/Accordion.tsx

@@ -66,7 +66,7 @@ Accordion.Item = function AccordionItem(props: AccordionItemProps) {
   const { item, utils } = useAccordionContext(props.title, props.defaultOpened);
 
   const onClickHandle = useCallback(
-    (event: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => {
+    (event: ReactMouseEvent<HTMLButtonElement>) => {
       if (event.shiftKey) {
         utils.clear();
       } else {

package/src/components/accordion/AccordionContext.tsx

@@ -19,7 +19,7 @@ type ActionType<Action, Payload = void> = Payload extends void
   : { type: Action; payload: Payload };
 
 export interface AccordionState {
-  items: Array<AccordionItemState>;
+  items: AccordionItemState[];
 }
 
 type AccordionActions =
@@ -131,7 +131,7 @@ export function useAccordionContext(title: string, defaultOpened?: boolean) {
     return () => utils.remove(title);
   }, [defaultOpened, title, utils]);
 
-  let item = getItem(title, state.items);
+  const item = getItem(title, state.items);
 
   return useMemo(
     () => ({
@@ -189,7 +189,7 @@ export function AccordionProvider(props: { children: ReactNode }) {
   );
 }
 
-function getItem(title: string, items: Array<AccordionItemState>) {
+function getItem(title: string, items: AccordionItemState[]) {
   const item = items.find((element) => element.title === title);
   return item;
 }

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

@@ -1,4 +1,6 @@
 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 scaleChromatic from 'd3-scale-chromatic';
 import { Fragment } from 'react';

package/src/components/color-picker/react-color/common/EditableInput.jsx

@@ -6,7 +6,7 @@ const UP_KEY_CODE = 38;
 const DOWN_KEY_CODE = 40;
 const VALID_KEY_CODES = new Set([UP_KEY_CODE, DOWN_KEY_CODE]);
 const isValidKeyCode = (keyCode) => VALID_KEY_CODES.has(keyCode);
-const getNumberValue = (value) => Number(String(value).replace(/%/g, ''));
+const getNumberValue = (value) => Number(String(value).replaceAll('%', ''));
 
 let idCounter = 1;
 

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

@@ -3,7 +3,7 @@ import { CSSProperties, MouseEvent, useCallback } from 'react';
 import { Swatch } from '../common';
 
 interface SketchPresetColorsProps {
-  colors: (string | { color: string; title: string })[];
+  colors: Array<string | { color: string; title: string }>;
   onClick: (data: { hex: any; source: string }, event: any) => void;
   onSwatchHover: any;
 }

package/src/components/dropdown-menu/DropdownMenu.tsx

@@ -1,3 +1,5 @@
+// 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 { Menu } from '@headlessui/react';
 import type { Placement } from '@popperjs/core';
 import { ReactNode, useRef, ElementType, ComponentProps } from 'react';

package/src/components/dropdown-menu/MenuItems.tsx

@@ -1,4 +1,6 @@
 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 { Menu } from '@headlessui/react';
 import type { ReactNode } from 'react';
 
@@ -57,7 +59,9 @@ const ItemsDiv = styled.div<{
   align-items: center;
   border-radius: 6px;
   background-color: white;
-  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 5px 12px;
+  box-shadow:
+    rgba(0, 0, 0, 0.3) 0px 19px 38px,
+    rgba(0, 0, 0, 0.22) 0px 5px 12px;
   padding-top: 5px;
   padding-bottom: 5px;
   --cell-padding: 16px;

package/src/components/dropdown-menu/useContextMenuPlacement.ts

@@ -15,7 +15,7 @@ export function useContextMenuPlacement(placement: Placement) {
   );
 
   const handleContextMenu = useCallback(
-    (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    (event: React.MouseEvent<HTMLDivElement>) => {
       const { clientX, clientY, pageX, pageY } = event;
       event.preventDefault();
 

package/src/components/forms/Select.tsx

@@ -21,7 +21,7 @@ export interface SelectProps {
   placeholder?: string;
   value: string | undefined;
   onSelect?: (value: string | undefined) => void;
-  options: (Option[] | Category[])[];
+  options: Array<Option[] | Category[]>;
   disabled?: boolean;
   style?: CSSProperties;
 }

package/src/components/hooks/useModifiedPopper.ts

@@ -48,7 +48,7 @@ export function useModifiedPopper<
   const [referenceElement, setReferenceElement] = useState<R | null>(null);
   const [popperElement, setPopperElement] = useState<P | null>(null);
 
-  const modifiers: Modifier<'sameWidth' | 'offset'>[] = [];
+  const modifiers: Array<Modifier<'sameWidth' | 'offset'>> = [];
 
   if (sameWidth) {
     modifiers.push(sameWidthModifier);

package/src/components/hooks/useOnOff.ts

@@ -4,9 +4,8 @@ export function useOnOff(
   initialValue = false,
 ): [isOn: boolean, setOn: () => void, setOff: () => void, toggle: () => void] {
   const [isOn, setOnOff] = useState(initialValue);
-
   const setOn = useCallback(() => setOnOff(true), []);
   const setOff = useCallback(() => setOnOff(false), []);
-  const toggle = useCallback(() => setOnOff(!isOn), [isOn]);
+  const toggle = useCallback(() => setOnOff((isOn) => !isOn), []);
   return [isOn, setOn, setOff, toggle];
 }

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

@@ -18,9 +18,7 @@ const layoutComponents: ComponentsMap = {
   DropZone,
 };
 
-interface ComponentsMap {
-  [componentName: string]: ComponentType<any>;
-}
+type ComponentsMap = Record<string, ComponentType<any>>;
 
 interface LayoutManagerProps {
   layout: Layout;
@@ -33,7 +31,7 @@ export interface Layout {
 }
 interface LayoutComponent {
   id: string;
-  component: keyof typeof layoutComponents | FunctionComponent | string;
+  component: keyof typeof layoutComponents | FunctionComponent;
   children?: LayoutComponent[];
 }
 

package/src/components/modal/ConfirmModal.tsx

@@ -41,7 +41,9 @@ const ConfirmModalContents = styled.div<{
   border-width: 1px;
   border-color: transparent;
   border-radius: 0.5rem;
-  box-shadow: 0 0 0 0, 0 0px 16px rgba(0, 0, 0, 0.3);
+  box-shadow:
+    0 0 0 0,
+    0 0px 16px rgba(0, 0, 0, 0.3);
   border-top: 10px solid ${({ headerColor }) => headerColor};
 `;
 
@@ -77,7 +79,7 @@ export function ConfirmModal(props: ConfirmModalProps) {
   } = props;
 
   const dialogRef = useRef<HTMLDialogElement>(null);
-  const dialogProps = useDialog({
+  const { dialogProps, isModalShown } = useDialog({
     dialogRef,
     isOpen,
     requestCloseOnEsc,
@@ -102,36 +104,41 @@ export function ConfirmModal(props: ConfirmModalProps) {
   return (
     <Portal>
       <ConfirmModalDialog {...dialogProps} ref={dialogRef}>
-        <RootLayoutProvider innerRef={portalDomNode}>
-          <ConfirmModalContents headerColor={headerColor} style={{ maxWidth }}>
-            <ConfirmModalChildrenRoot headerColor={headerColor}>
-              {children}
-            </ConfirmModalChildrenRoot>
+        {isModalShown && (
+          <RootLayoutProvider innerRef={portalDomNode}>
+            <ConfirmModalContents
+              headerColor={headerColor}
+              style={{ maxWidth }}
+            >
+              <ConfirmModalChildrenRoot headerColor={headerColor}>
+                {children}
+              </ConfirmModalChildrenRoot>
 
-            <ConfirmModalFooter>
-              <Button
-                onClick={onConfirm}
-                backgroundColor={{
-                  basic: 'hsla(243deg, 75%, 58%, 1)',
-                  hover: 'hsla(245deg, 58%, 50%, 1)',
-                }}
-                color={{ basic: 'white' }}
-              >
-                {saveText}
-              </Button>
-              <Button
-                onClick={onCancel}
-                backgroundColor={{
-                  basic: 'hsla(0deg, 72%, 50%, 1)',
-                  hover: 'hsla(0deg, 73%, 42%, 1)',
-                }}
-                color={{ basic: 'white' }}
-              >
-                {cancelText}
-              </Button>
-            </ConfirmModalFooter>
-          </ConfirmModalContents>
-        </RootLayoutProvider>
+              <ConfirmModalFooter>
+                <Button
+                  onClick={onConfirm}
+                  backgroundColor={{
+                    basic: 'hsla(243deg, 75%, 58%, 1)',
+                    hover: 'hsla(245deg, 58%, 50%, 1)',
+                  }}
+                  color={{ basic: 'white' }}
+                >
+                  {saveText}
+                </Button>
+                <Button
+                  onClick={onCancel}
+                  backgroundColor={{
+                    basic: 'hsla(0deg, 72%, 50%, 1)',
+                    hover: 'hsla(0deg, 73%, 42%, 1)',
+                  }}
+                  color={{ basic: 'white' }}
+                >
+                  {cancelText}
+                </Button>
+              </ConfirmModalFooter>
+            </ConfirmModalContents>
+          </RootLayoutProvider>
+        )}
       </ConfirmModalDialog>
     </Portal>
   );

package/src/components/modal/Modal.tsx

@@ -9,7 +9,7 @@ import ModalCloseButton from './ModalCloseButton';
 import { useDialog } from './useDialog';
 
 export interface ModalProps {
-  children: ReactElement | Array<ReactElement>;
+  children: ReactElement | ReactElement[];
   isOpen: boolean;
   requestCloseOnEsc?: boolean;
   hasCloseButton?: boolean;
@@ -36,7 +36,9 @@ const DialogContents = styled.div`
   border-width: 1px;
   border-color: transparent;
   border-radius: 0.5rem;
-  box-shadow: 0 0 0 0, 0 0px 16px rgba(0, 0, 0, 0.3);
+  box-shadow:
+    0 0 0 0,
+    0 0px 16px rgba(0, 0, 0, 0.3);
 `;
 
 const ModalHeaderStyled = styled.div`
@@ -74,7 +76,7 @@ export function Modal(props: ModalProps) {
   } = props;
 
   const dialogRef = useRef<HTMLDialogElement>(null);
-  const dialogProps = useDialog({
+  const { dialogProps, isModalShown } = useDialog({
     dialogRef,
     isOpen,
     requestCloseOnEsc,
@@ -99,18 +101,20 @@ export function Modal(props: ModalProps) {
   return (
     <Portal>
       <DialogRoot {...dialogProps} ref={dialogRef}>
-        <RootLayoutProvider innerRef={portalDomNode}>
-          <DialogContents
-            style={{
-              maxWidth,
-              height: height || 'max-content',
-              width: width || '100%',
-            }}
-          >
-            {children}
-            {hasCloseButton && <ModalCloseButton onClick={onRequestClose} />}
-          </DialogContents>
-        </RootLayoutProvider>
+        {isModalShown && (
+          <RootLayoutProvider innerRef={portalDomNode}>
+            <DialogContents
+              style={{
+                maxWidth,
+                height: height || 'max-content',
+                width: width || '100%',
+              }}
+            >
+              {children}
+              {hasCloseButton && <ModalCloseButton onClick={onRequestClose} />}
+            </DialogContents>
+          </RootLayoutProvider>
+        )}
       </DialogRoot>
     </Portal>
   );

package/src/components/modal/useDialog.ts

@@ -4,31 +4,49 @@ import {
   RefObject,
   useCallback,
   useEffect,
+  useMemo,
 } from 'react';
 import { useKbsDisableGlobal } from 'react-kbs';
 
+import { useOnOff } from '../index';
+
+interface UseDialogOptions {
+  dialogRef: RefObject<HTMLDialogElement>;
+  isOpen: boolean;
+  requestCloseOnEsc: boolean;
+  requestCloseOnBackdrop: boolean;
+  onRequestClose?: () => void;
+}
+
+interface UseDialogReturn {
+  dialogProps: {
+    onClick: MouseEventHandler<HTMLDialogElement>;
+    onCancel: ReactEventHandler<HTMLDialogElement>;
+  };
+  isModalShown: boolean;
+}
+
 export function useDialog({
   dialogRef,
   isOpen,
   requestCloseOnEsc,
   requestCloseOnBackdrop,
   onRequestClose,
-}: {
-  dialogRef: RefObject<HTMLDialogElement>;
-  isOpen: boolean;
-  requestCloseOnEsc: boolean;
-  requestCloseOnBackdrop: boolean;
-  onRequestClose?: () => void;
-}) {
+}: UseDialogOptions): UseDialogReturn {
   useKbsDisableGlobal(isOpen);
+  const [isModalShown, showModal, hideModal] = useOnOff(false);
 
   useEffect(() => {
     const dialog = dialogRef.current;
     if (dialog && isOpen) {
+      showModal();
       dialog.showModal();
-      return () => dialog.close();
+      return () => {
+        hideModal();
+        dialog.close();
+      };
     }
-  }, [dialogRef, isOpen]);
+  }, [dialogRef, isOpen, showModal, hideModal]);
 
   const onCancel = useCallback<ReactEventHandler<HTMLDialogElement>>(
     (event) => {
@@ -65,5 +83,13 @@ export function useDialog({
     [dialogRef, requestCloseOnBackdrop, onRequestClose],
   );
 
-  return { onClick, onCancel };
+  const dialogProps = useMemo<UseDialogReturn['dialogProps']>(
+    () => ({ onClick, onCancel }),
+    [onClick, onCancel],
+  );
+
+  return {
+    dialogProps,
+    isModalShown,
+  };
 }

package/src/components/root-layout/css-reset/customPreflight.ts

@@ -6,9 +6,21 @@ export const CustomDivPreflight = styled.div`
   line-height: 1.5;
   -webkit-text-size-adjust: 100%;
   tab-size: 4;
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
-    'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
-    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  font-family:
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Arial,
+    'Noto Sans',
+    sans-serif,
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol',
+    'Noto Color Emoji';
 
   width: 100%;
   height: 100%;

package/src/components/root-layout/css-reset/preflight.css

@@ -62,9 +62,21 @@ html {
   -webkit-text-size-adjust: 100%; /* 2 */
   -moz-tab-size: 4; /* 3 */
   tab-size: 4; /* 3 */
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
-    'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
-    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; /* 4 */
+  font-family:
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Arial,
+    'Noto Sans',
+    sans-serif,
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol',
+    'Noto Color Emoji'; /* 4 */
 }
 
 /*

package/src/components/root-layout/css-reset/preflight.ts

@@ -67,9 +67,20 @@ SOFTWARE.
     -webkit-text-size-adjust: 100%; /* 2 */
     -moz-tab-size: 4; /* 3 */
     tab-size: 4; /* 3 */
-    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
-      'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
-      'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    font-family:
+      ui-sans-serif,
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Arial,
+      'Noto Sans',
+      sans-serif,
+      'Apple Color Emoji',
+      'Segoe UI Emoji',
+      'Segoe UI Symbol',
       'Noto Color Emoji'; /* 4 */
   }
 

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

@@ -175,6 +175,7 @@ export function SplitPane(props: SplitPaneProps) {
         display: 'flex',
         height: '100%',
         width: '100%',
+        [direction === 'horizontal' ? 'minWidth' : 'minHeight']: 0,
         flexDirection: direction === 'horizontal' ? 'row' : 'column',
       }}
     >
@@ -232,7 +233,7 @@ function SplitSide(props: SplitSideProps) {
 function parseSize(size: string): [number, SplitPaneType] {
   const value = Number.parseFloat(size);
   // remove numbers and dots from the string
-  const type = size.replace(/[\d .]/g, '') as SplitPaneType;
+  const type = size.replaceAll(/[\d .]/g, '') as SplitPaneType;
 
   return [value, type];
 }