react-science 12.1.0 → 13.0.0

package/src/components/header/Header.tsx

@@ -1,5 +1,4 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import type { ReactElement } from 'react';
 
 import type { ToolbarProps } from '../toolbar/Toolbar.js';
@@ -10,24 +9,20 @@ interface HeaderProps {
   children: [ReactProps, ReactProps];
 }
 
-const styles = {
-  header: css({
-    width: '100%',
-    display: 'flex',
-    flexDirection: 'row',
-
-    justifyContent: 'space-between',
-    borderBottom: '1px solid rgb(247, 247, 247);',
-
-    boxShadow: 'rgb(255, 255, 255) 0px 1px 0px 0px inset',
-  }),
-};
+const HeaderContainer = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  border-bottom: 1px solid rgb(247 247 247);
+  box-shadow: rgb(255 255 255) 0 1px 0 0 inset;
+`;
 
 export function Header(props: HeaderProps) {
   return (
-    <div css={styles.header}>
+    <HeaderContainer>
       <div>{props.children[0]}</div>
       <div>{props.children[1]}</div>
-    </div>
+    </HeaderContainer>
   );
 }

package/src/components/header/PanelHeader.tsx

@@ -1,29 +1,9 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import type { ReactNode } from 'react';
 
 import { Button } from '../button/index.js';
 import { SelectedTotal } from '../selected-total/index.js';
 
-const styles = {
-  container: css({
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    borderBottom: '0.55px solid rgb(240, 240, 240)',
-  }),
-  leftContainer: css({
-    display: 'flex',
-    flexDirection: 'row',
-    flex: 1,
-    '& > button': {
-      padding: '0 5px',
-      minWidth: 'auto',
-    },
-  }),
-};
-
 interface PanelHeaderProps {
   total?: number;
   current?: number;
@@ -31,19 +11,35 @@ interface PanelHeaderProps {
   children?: ReactNode;
 }
 
-export function PanelHeader({
-  total,
-  current,
-  children,
-  onClickSettings,
-}: PanelHeaderProps) {
+const HeaderContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 0.55px solid rgb(240 240 240);
+`;
+
+const HeaderLeftContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+
+  '& > button:' {
+    padding: 0 5px;
+    min-width: auto;
+  }
+`;
+
+export function PanelHeader(props: PanelHeaderProps) {
+  const { total, current, children, onClickSettings } = props;
+
   return (
-    <div css={styles.container}>
-      <div css={styles.leftContainer}>{children}</div>
+    <HeaderContainer>
+      <HeaderLeftContainer>{children}</HeaderLeftContainer>
       <SelectedTotal count={current} total={total} />
       {onClickSettings && (
         <Button color="black" minimal onClick={onClickSettings} icon="cog" />
       )}
-    </div>
+    </HeaderContainer>
   );
 }

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

@@ -1,6 +1,4 @@
-/** @jsxImportSource @emotion/react */
 import { Classes, Collapse, InputGroup } from '@blueprintjs/core';
-import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import type { CSSProperties } from 'react';
 import { memo, useCallback, useMemo, useState } from 'react';
@@ -35,6 +33,7 @@ const AccordionButton = styled(Button, {
     rotate: ${(props) => (props.open ? '90deg' : '')};
     transition: all 0.3s ease-in-out;
   }
+
   cursor: pointer;
   border-bottom: 1px solid #f5f5f5;
   display: flex;
@@ -44,22 +43,37 @@ const AccordionButton = styled(Button, {
   &.${Classes.MINIMAL} {
     background-color: white;
   }
+
   :hover {
     background-color: #f5f5f5;
   }
 `;
 
-const style = {
-  content: css({
-    overflow: 'hidden',
-  }),
-  container: css({
-    padding: '5px 0 0 0',
-    height: '100%',
-    display: 'flex',
-    flexDirection: 'column',
-  }),
-};
+const InfoPanelContainer = styled.div`
+  padding: 5px 0 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+`;
+
+const InfoPanelCollapse = styled(Collapse)`
+  overflow: hidden;
+`;
+
+const InfoPanelInputGroup = styled(InputGroup)`
+  flex-grow: 1;
+`;
+
+const InfoPanelGroup = styled.div`
+  padding: 0 5px;
+  margin-top: 5px;
+  background-color: white;
+  top: 5px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+`;
 
 interface InfoPanelDatum {
   parameter: string;
@@ -95,9 +109,9 @@ export function InfoPanel(props: InfoPanelProps) {
       const includes: InfoPanelDatum[] = [];
       const valueContains: InfoPanelDatum[] = [];
 
-      for (const [parameter, value] of Object.entries(data).sort(([a], [b]) =>
-        a.localeCompare(b),
-      )) {
+      for (const [parameter, value] of Object.entries(data).sort(([a], [b]) => {
+        return a.localeCompare(b);
+      })) {
         const lowerKey = parameter.toLowerCase();
         const lowerSearch = search.toLowerCase();
         if (lowerKey === lowerSearch) {
@@ -137,7 +151,7 @@ export function InfoPanel(props: InfoPanelProps) {
   }, [data, viewData]);
 
   return (
-    <div css={style.container}>
+    <InfoPanelContainer>
       <div
         style={{
           padding: '0 5px',
@@ -146,23 +160,8 @@ export function InfoPanel(props: InfoPanelProps) {
       >
         {title}
       </div>
-      <div
-        tabIndex={0}
-        css={css({
-          padding: '0 5px',
-          marginTop: '5px',
-          backgroundColor: 'white',
-          top: '5px',
-          display: 'flex',
-          alignItems: 'center',
-          gap: 6,
-          width: '100%',
-        })}
-      >
-        <InputGroup
-          css={css({
-            flexGrow: 1,
-          })}
+      <InfoPanelGroup tabIndex={0}>
+        <InfoPanelInputGroup
           placeholder="Search for a parameter"
           value={search}
           onChange={({ target }) => {
@@ -176,9 +175,9 @@ export function InfoPanel(props: InfoPanelProps) {
           fill
         />
         <SelectedTotal count={count} total={total} />
-      </div>
+      </InfoPanelGroup>
       <InfoPanelContent filteredData={filteredData} />
-    </div>
+    </InfoPanelContainer>
   );
 }
 
@@ -225,7 +224,7 @@ const InfoPanelContent = memo((props: InfoPanelContentProps) => {
             >
               {description}
             </AccordionButton>
-            <Collapse isOpen={open} css={style.content}>
+            <InfoPanelCollapse isOpen={open}>
               <Table
                 data={data}
                 columns={columns}
@@ -233,7 +232,7 @@ const InfoPanelContent = memo((props: InfoPanelContentProps) => {
                 tableProps={{ style: { width: '100%' } }}
                 compact
               />
-            </Collapse>
+            </InfoPanelCollapse>
           </div>
         );
       })}
@@ -278,7 +277,12 @@ function valueSearch(
   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(P.string, (value) => {
+      const newValue =
+        value === 'true' ? 'yes' : value === 'false' ? 'no' : value;
+
+      return newValue.includes(search);
+    })
     .with({}, (value) => JSON.stringify(value).includes(search))
     .otherwise(() => true);
 }

package/src/components/inline_editable_renderer/index.ts

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

package/src/components/inline_editable_renderer/inline_editable_renderer.tsx

@@ -0,0 +1,86 @@
+import { Colors } from '@blueprintjs/core';
+import styled from '@emotion/styled';
+import type { KeyboardEvent, ReactNode } from 'react';
+import { useCallback, useMemo, useState } from 'react';
+
+export interface InlineRendererEditableProps<T extends HTMLElement> {
+  ref: (node: T | null) => void;
+  /**
+   * Function to exit the editable state and display the children content.
+   */
+  exit: () => void;
+  onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
+}
+
+export interface InlineEditableProps<T extends HTMLElement> {
+  renderEditable: (props: InlineRendererEditableProps<T>) => ReactNode;
+  children: ReactNode;
+}
+
+export const InlineEditableInput = styled.input`
+  width: 100%;
+  height: 100%;
+  box-shadow: 0 0 1px 1px ${Colors.GRAY1};
+  position: absolute;
+  outline: none;
+  inset: 0;
+`;
+
+const Container = styled.div`
+  min-width: 100%;
+  width: 100%;
+  min-height: 21px;
+
+  :focus,
+  :hover {
+    box-shadow: 0 0 1px 1px ${Colors.GRAY1};
+  }
+`;
+
+/**
+ * The `InlineEditable` component allows for inline editing of its content.
+ * It renders a component with `renderEditable` when focused or clicked
+ * and toggles back to the original content when the input loses focus.
+ */
+export function InlineEditable<T extends HTMLElement>(
+  props: InlineEditableProps<T>,
+) {
+  const { children, renderEditable } = props;
+  const [isInputRendered, setIsInputRendered] = useState(false);
+
+  const toggle = useCallback(() => {
+    return setIsInputRendered((old) => !old);
+  }, []);
+
+  const renderEditableProps = useMemo<InlineRendererEditableProps<T>>(() => {
+    return {
+      isRendered: isInputRendered,
+      onKeyDown: (event) => {
+        if (event.key === 'Enter') {
+          setIsInputRendered(false);
+        }
+      },
+      ref: (node) => {
+        if (!node) return;
+        node.focus();
+      },
+      exit: () => setIsInputRendered(false),
+    };
+  }, [isInputRendered]);
+
+  return (
+    <div style={{ position: 'relative' }}>
+      <div style={{ visibility: isInputRendered ? 'visible' : 'hidden' }}>
+        {renderEditable(renderEditableProps)}
+      </div>
+
+      <Container
+        tabIndex={isInputRendered ? -1 : 0}
+        onFocus={() => setIsInputRendered(true)}
+        onClick={toggle}
+      >
+        {children}
+      </Container>
+    </div>
+  );
+}

package/src/components/logger/FifoLoggerDialog.tsx

@@ -1,7 +1,4 @@
-/** @jsxImportSource @emotion/react */
-
 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 } from 'react';
@@ -76,24 +73,25 @@ function useColumns(unseen: number) {
   );
 }
 
+const LoggerDialog = styled(Dialog)`
+  min-width: 800px;
+  min-height: 500px;
+  max-height: 80vh;
+  max-width: 1000px;
+`;
+
 export function FifoLoggerDialog(props: FifoLoggerDialogProps) {
   const logger = useFifoLogger();
 
   const columns = useColumns(props.unseen);
 
   return (
-    <Dialog
+    <LoggerDialog
       shouldReturnFocusOnClose={false}
       isOpen={props.isOpen}
       onClose={props.onClose}
       title="Logs"
       icon="info-sign"
-      css={css`
-        min-width: 800px;
-        min-height: 500px;
-        max-height: 80vh;
-        max-width: 1000px;
-      `}
     >
       <DialogBody>
         <Table
@@ -131,7 +129,7 @@ export function FifoLoggerDialog(props: FifoLoggerDialogProps) {
           </ActionsFooter>
         }
       />
-    </Dialog>
+    </LoggerDialog>
   );
 }
 

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

@@ -4,7 +4,7 @@ import styled from '@emotion/styled';
 export const CustomDivPreflight = styled.div`
   /* html */
   line-height: 1.5;
-  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
   tab-size: 4;
   font-family:
     ui-sans-serif,
@@ -21,7 +21,6 @@ export const CustomDivPreflight = styled.div`
     'Segoe UI Emoji',
     'Segoe UI Symbol',
     'Noto Color Emoji';
-
   width: 100%;
   height: 100%;
   position: relative;