react-science 0.19.2 → 0.20.0

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

@@ -1,5 +1,4 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { FaTrash } from 'react-icons/fa';
 
 import {
@@ -25,78 +24,75 @@ interface MeasurementsTableRowProps {
   kind: MeasurementsTableProps['kind'];
 }
 
-const styles = {
-  root: css`
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    border-collapse: collapse;
-    table-layout: fixed;
-  `,
-  th: css`
-    border-bottom-width: 1px;
-    font-weight: 500;
-    text-align: left;
-    padding-bottom: 10px;
-    padding-top: 10px;
-    padding-left: 2rem;
-  `,
-  tbody: css`
-    background-color: white;
-  `,
-  tr: css`
-    height: 50px;
-    max-height: 50px;
-    overflow: hidden;
-    cursor: pointer;
-    padding-left: 2rem;
-    padding-bottom: 10px;
-    padding-top: 10px;
-    border-bottom-width: 1px;
-
-    font-weight: 500;
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-  `,
-  header: css`
-    border-bottom-width: 1px;
-    font-weight: 500;
-    text-align: left;
-    padding-bottom: 10px;
-    padding-top: 10px;
-    padding-left: 2rem;
-  `,
-  iconsContainer: css`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    justify-items: center;
-    height: 50px;
-    flex-direction: row;
-    gap: 0.5rem;
-    cursor: default;
-    width: 70px;
-  `,
-  linkButton: css`
-    cursor: pointer;
-    :hover {
-      text-decoration: underline;
-    }
-  `,
-  container: css`
-    display: flex;
-    flex-direction: column;
-    gap: 5px;
-  `,
-  headerColumn: css`
-    display: flex;
-    flex-direction: row;
-    gap: 10px;
-    align-items: center;
-    padding-left: 5px;
-
-    border-bottom: 1px solid black;
-  `,
-};
+const MeasurementsTableContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+`;
+
+const MeasurementsTableRoot = styled.table`
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  border-collapse: collapse;
+  table-layout: fixed;
+`;
+
+const MeasurementsTableHeaderStyled = styled.tr`
+  border-bottom-width: 1px;
+  font-weight: 500;
+  text-align: left;
+  padding-bottom: 10px;
+  padding-top: 10px;
+  padding-left: 2rem;
+`;
+
+const MeasurementsTableBody = styled.tbody`
+  background-color: white;
+`;
+
+const MeasurementsLinkButton = styled.span`
+  cursor: pointer;
+  :hover {
+    text-decoration: underline;
+  }
+`;
+
+const MeasurementsHeaderColumn = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-items: center;
+  padding-left: 5px;
+
+  border-bottom: 1px solid black;
+`;
+
+const MeasurementsTableRowData = styled.tr`
+  height: 50px;
+  max-height: 50px;
+  overflow: hidden;
+  cursor: pointer;
+  padding-left: 2rem;
+  padding-bottom: 10px;
+  padding-top: 10px;
+  border-bottom-width: 1px;
+
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+`;
+
+const MeasurementsIconsContainer = styled.td`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  justify-items: center;
+  height: 50px;
+  flex-direction: row;
+  gap: 0.5rem;
+  cursor: default;
+  width: 70px;
+`;
 
 export function MeasurementsTable(props: MeasurementsTableProps) {
   const { kind } = props;
@@ -126,16 +122,16 @@ export function MeasurementsTable(props: MeasurementsTableProps) {
   }
 
   return (
-    <div css={styles.container}>
-      <div css={styles.headerColumn}>
+    <MeasurementsTableContainer>
+      <MeasurementsHeaderColumn>
         <MeasurementSelectedVisibilityChange kind={kind} openedEyes />
         <MeasurementSelectedVisibilityChange kind={kind} openedEyes={false} />
-        <span css={styles.linkButton} onClick={() => onSelectLink(true)}>
+        <MeasurementsLinkButton onClick={() => onSelectLink(true)}>
           Select all
-        </span>
-        <span css={styles.linkButton} onClick={() => onSelectLink(false)}>
+        </MeasurementsLinkButton>
+        <MeasurementsLinkButton onClick={() => onSelectLink(false)}>
           Unselect all
-        </span>
+        </MeasurementsLinkButton>
 
         <FaTrash
           style={
@@ -154,47 +150,48 @@ export function MeasurementsTable(props: MeasurementsTableProps) {
             Remove selected measurements?
           </div>
         </ConfirmModal>
-      </div>
+      </MeasurementsHeaderColumn>
 
-      <table css={styles.root}>
+      <MeasurementsTableRoot>
         <MeasurementsTableHeader />
-        <tbody css={styles.tbody}>
+        <MeasurementsTableBody>
           {measurements[kind].entries.map((element) => (
             <MeasurementsTableRow key={element.id} item={element} kind={kind} />
           ))}
-        </tbody>
-      </table>
-    </div>
+        </MeasurementsTableBody>
+      </MeasurementsTableRoot>
+    </MeasurementsTableContainer>
   );
 }
 
-const tableHeaderStyles = {
-  thStyleEmpty: css`
-    display: flex;
-    gap: 5px;
-    align-items: center;
-    width: 70px;
-  `,
-  thStyleFilename: css`
-    width: 60%;
-  `,
-  thStyleTechnique: css`
-    width: 150px;
-  `,
-  tdName: css`
-    width: 60%;
-    overflow: hidden;
-  `,
-};
+const TableHeaderEmpty = styled.th`
+  display: flex;
+  gap: 5px;
+  align-items: center;
+  width: 70px;
+`;
+
+const TableHeaderFilename = styled.th`
+  width: 60%;
+`;
+
+const TableHeaderTechnique = styled.th`
+  width: 150px;
+`;
+
+const TableDataHeaderName = styled.td`
+  width: 60%;
+  overflow: hidden;
+`;
 
 function MeasurementsTableHeader() {
   return (
     <thead>
-      <tr css={styles.header}>
-        <th css={tableHeaderStyles.thStyleEmpty} />
-        <th css={tableHeaderStyles.thStyleFilename}>Filename</th>
-        <th css={tableHeaderStyles.thStyleTechnique}>Technique</th>
-      </tr>
+      <MeasurementsTableHeaderStyled>
+        <TableHeaderEmpty />
+        <TableHeaderFilename>Filename</TableHeaderFilename>
+        <TableHeaderTechnique>Technique</TableHeaderTechnique>
+      </MeasurementsTableHeaderStyled>
     </thead>
   );
 }
@@ -225,8 +222,8 @@ function MeasurementsTableRow(props: MeasurementsTableRowProps) {
   }
 
   return (
-    <tr css={styles.tr}>
-      <td css={styles.iconsContainer}>
+    <MeasurementsTableRowData>
+      <MeasurementsIconsContainer>
         <MeasurementVisibilityToggle
           id={item.id}
           isVisible={measurements[item.id].visible}
@@ -240,11 +237,11 @@ function MeasurementsTableRow(props: MeasurementsTableRowProps) {
           checked={selectedMeasurements[kind]?.includes(item.id) || false}
           onSelectCheckbox={onSelectCheckbox}
         />
-      </td>
-      <td css={tableHeaderStyles.tdName} onClick={onSelectRow} title={item.id}>
+      </MeasurementsIconsContainer>
+      <TableDataHeaderName onClick={onSelectRow} title={item.id}>
         {item.info.file?.name ?? item.info.title}
-      </td>
+      </TableDataHeaderName>
       <td onClick={onSelectRow}>{item.meta.technique}</td>
-    </tr>
+    </MeasurementsTableRowData>
   );
 }

package/src/components/button/ButtonGroup.tsx

@@ -1,45 +1,31 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { ReactNode } from 'react';
 
-const styles = {
-  root: css`
-    display: inline-flex;
-    border-radius: 0.375rem;
-    isolation: isolate;
-  `,
-  firstButton: css`
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    font-weight: 500;
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    padding-left: 1rem;
-    padding-right: 1rem;
-    padding-top: 5px;
-    padding-bottom: 5px;
-    border-width: 1px;
-    border-top-left-radius: 0.375rem;
-    border-bottom-left-radius: 0.375rem;
-  `,
-  secondButton: css`
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    font-weight: 500;
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    padding-left: 1rem;
-    padding-right: 1rem;
-    padding-top: 5px;
-    padding-bottom: 5px;
-    border-width: 1px;
-    border-top-right-radius: 0.375rem;
-    border-bottom-right-radius: 0.375rem;
-    margin-left: -1px;
-  `,
-};
+const ButtonGroupRoot = styled.div`
+  display: inline-flex;
+  border-radius: 0.375rem;
+  isolation: isolate;
+`;
+
+const ButtonGroupCustomButton = styled.button<{ isLast: boolean }>`
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  border-width: 1px;
+  border-top-left-radius: ${({ isLast }) => !isLast && '0.375rem'};
+  border-bottom-left-radius: ${({ isLast }) => !isLast && '0.375rem'};
+
+  border-top-right-radius: ${({ isLast }) => isLast && '0.375rem'};
+  border-bottom-right-radius: ${({ isLast }) => isLast && '0.375rem'};
+  margin-left: ${({ isLast }) => isLast && '-1px'};
+`;
 
 interface ButtonGroupProps {
   children: [ReactNode, ReactNode];
@@ -47,7 +33,7 @@ interface ButtonGroupProps {
 
 export function ButtonGroup(props: ButtonGroupProps) {
   const { children } = props;
-  return <div css={styles.root}>{children}</div>;
+  return <ButtonGroupRoot>{children}</ButtonGroupRoot>;
 }
 
 interface ButtonGroupButtonProps {
@@ -60,12 +46,12 @@ ButtonGroup.Button = function ButtonGroupButton(props: ButtonGroupButtonProps) {
   const { position, label, onClick } = props;
 
   return (
-    <button
+    <ButtonGroupCustomButton
       type="button"
       onClick={onClick}
-      css={position === 'first' ? styles.firstButton : styles.secondButton}
+      isLast={position === 'last'}
     >
       {label}
-    </button>
+    </ButtonGroupCustomButton>
   );
 };

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

@@ -1,5 +1,4 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { useRef } from 'react';
 
 import { useModifiedPopper } from '../../hooks/useModifiedPopper';
@@ -15,21 +14,20 @@ type ColorPickerDropdownProps = Pick<
   'color' | 'presetColors' | 'disableAlpha' | 'onChange' | 'onChangeComplete'
 >;
 
-const colorPickerDropdownCss = {
-  root: css`
-    position: relative;
-    width: 100%;
-    border: 1px solid darkgray;
-    border-radius: 0.25rem;
-    height: 30px;
-    padding: 5px;
-  `,
-  preview: css`
-    height: 100%;
-    width: 100%;
-    border-radius: 0.125rem;
-  `,
-};
+const ColorPickerRoot = styled.button`
+  position: relative;
+  width: 100%;
+  border: 1px solid darkgray;
+  border-radius: 0.25rem;
+  height: 30px;
+  padding: 5px;
+`;
+
+const ColorPickerPreview = styled.div`
+  height: 100%;
+  width: 100%;
+  border-radius: 0.125rem;
+`;
 
 export function ColorPickerDropdown(props: ColorPickerDropdownProps) {
   const { color, ...otherProps } = props;
@@ -49,16 +47,11 @@ export function ColorPickerDropdown(props: ColorPickerDropdownProps) {
 
   return (
     <>
-      <button
-        type="button"
-        ref={setReferenceElement}
-        css={colorPickerDropdownCss.root}
-        onClick={toggle}
-      >
-        <div css={colorPickerDropdownCss.preview}>
+      <ColorPickerRoot type="button" ref={setReferenceElement} onClick={toggle}>
+        <ColorPickerPreview>
           <FixedColorPreview color={hex} />
-        </div>
-      </button>
+        </ColorPickerPreview>
+      </ColorPickerRoot>
       {isOpened && (
         <Portal>
           <div

package/src/components/drop-zone/DropZone.tsx

@@ -1,6 +1,5 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
-import { MouseEventHandler, useCallback, useMemo } from 'react';
+import styled from '@emotion/styled';
+import { CSSProperties, MouseEventHandler, useCallback, useMemo } from 'react';
 import { FileError, FileRejection, useDropzone } from 'react-dropzone';
 import { FaCloudUploadAlt } from 'react-icons/fa';
 
@@ -15,41 +14,52 @@ export interface DropZoneProps {
   emptyText?: string;
 }
 
-const dropZoneCss = {
-  root: css`
-    position: relative;
-    height: 100%;
-    width: 100%;
-  `,
-  dragActive: css`
-    font-size: 1.5em;
-    font-weight: 600;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    opacity: 0.7;
-    background-color: white;
-    border: 5px dashed;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  `,
-  empty: css`
-    font-size: 1.5em;
-    font-weight: 600;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    padding: 1em;
-    border: 5px dashed;
-    cursor: pointer;
-  `,
-};
+const DropzoneRoot = styled.div`
+  position: relative;
+  height: 100%;
+  width: 100%;
+`;
+
+interface DropzoneColorProps {
+  borderColor: CSSProperties['borderColor'];
+  color: CSSProperties['color'];
+}
+
+const DropzoneDragActive = styled.div<DropzoneColorProps>`
+  font-size: 1.5em;
+  font-weight: 600;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  opacity: 0.7;
+  background-color: white;
+  border: 5px dashed;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  border-color: ${({ borderColor }) => borderColor};
+  color: ${({ color }) => color};
+`;
+
+const DropzoneEmpty = styled.div<DropzoneColorProps>`
+  font-size: 1.5em;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  padding: 1em;
+  border: 5px dashed;
+  cursor: pointer;
+
+  border-color: ${({ borderColor }) => borderColor};
+  color: ${({ color }) => color};
+`;
 
 export function DropZone(props: DropZoneProps) {
   return <DropZoneContent {...props} />;
@@ -102,31 +112,19 @@ function DropZoneContent(
   }, [onClick]);
 
   return (
-    <div {...getRootProps(getPropsOptions)} css={dropZoneCss.root}>
+    <DropzoneRoot {...getRootProps(getPropsOptions)}>
       {children}
       {isDragActive ? (
-        <div
-          css={dropZoneCss.dragActive}
-          style={{
-            borderColor,
-            color,
-          }}
-        >
+        <DropzoneDragActive borderColor={borderColor} color={color}>
           <FaCloudUploadAlt size={70} />
           <p>Drop the files here.</p>
-        </div>
+        </DropzoneDragActive>
       ) : !hasChildren ? (
-        <div
-          css={dropZoneCss.empty}
-          style={{
-            borderColor,
-            color,
-          }}
-        >
+        <DropzoneEmpty borderColor={borderColor} color={color}>
           {emptyText}
-        </div>
+        </DropzoneEmpty>
       ) : null}
       <input {...getInputProps()} />
-    </div>
+    </DropzoneRoot>
   );
 }

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

@@ -72,24 +72,26 @@ function DropdownContextMenu<T>(props: Omit<DropdownMenuProps<T>, 'trigger'>) {
   return (
     <HandleMenuContextDiv onContextMenu={handleContextMenu}>
       {isPopperElementOpen && (
-        <div ref={ref}>
-          <div
-            ref={setPopperElement}
-            style={styles.popper}
-            {...attributes.popper}
-          >
-            <Menu>
-              <MenuItems
-                itemsStatic
-                onSelect={(selected) => {
-                  closePopperElement();
-                  onSelect(selected);
-                }}
-                {...otherProps}
-              />
-            </Menu>
+        <Portal>
+          <div ref={ref}>
+            <div
+              ref={setPopperElement}
+              style={styles.popper}
+              {...attributes.popper}
+            >
+              <Menu>
+                <MenuItems
+                  itemsStatic
+                  onSelect={(selected) => {
+                    closePopperElement();
+                    onSelect(selected);
+                  }}
+                  {...otherProps}
+                />
+              </Menu>
+            </div>
           </div>
-        </div>
+        </Portal>
       )}
 
       {children}