react-cheminfo 0.31.0 → 0.32.0

package/src/periodic/ui/PeriodicTable.tsx

@@ -129,6 +129,7 @@ export function PeriodicTable(props: PeriodicTableProps): ReactElement {
   } = props;
 
   const t = useChromeT();
+  const writesDetail = detailOf !== undefined;
   const gridRef = useRef<HTMLDivElement>(null);
   const cameFromKeyRef = useRef(false);
   const offset = headers ? 1 : 0;
@@ -159,7 +160,7 @@ export function PeriodicTable(props: PeriodicTableProps): ReactElement {
         role="grid"
         aria-label={t('periodic.table')}
         data-testid="periodic-table"
-        style={headers ? gridWithHeadersStyle : gridStyle}
+        style={gridStyle(headers, writesDetail)}
         onKeyDown={handleKeyDown}
       >
         {headers ? <HeaderStrips onSelectRange={onSelectRange} /> : null}
@@ -171,6 +172,7 @@ export function PeriodicTable(props: PeriodicTableProps): ReactElement {
             symbol={element.symbol}
             name={nameOf(element)}
             detail={detailOf?.(element)}
+            writesDetail={writesDetail}
             swatch={swatchOf(element)}
             isSelected={element.symbol === selected}
             isIncluded={isIncluded?.(element)}
@@ -199,37 +201,64 @@ function noop(): void {
   // keyboard and a screen reader still reach every element.
 }
 
+/** Narrowest the table is ever drawn; under it the type stops being readable. */
+const MIN_WIDTH = 280;
+
+/**
+ * How tall one row of elements is, as a share of the table's width.
+ *
+ * A column is about 5.4% of that width, so a cell is a seventh taller than it
+ * is wide — the proportion of a wall chart, and the room the three lines of a
+ * cell need to be written at a size a class can read.
+ */
+const ROW_HEIGHT = '6.1cqw';
+
+/** The same, in a table that writes nothing under the symbol. */
+const ROW_HEIGHT_ALONE = '4.9cqw';
+
+/** The band the two inner-transition series were lifted out across. */
+const SERIES_GAP = 'max(6px, 1.1cqw)';
+
 const rootStyle = {
   display: 'flex',
   flexDirection: 'column',
   gap: 8,
+  minWidth: MIN_WIDTH,
+  // Everything inside — the height of a row as much as the type in a cell — is
+  // a share of this box rather than of the page, so the same table reads at
+  // 280px beside a chart and fills a lecture-hall screen at twice that.
+  containerType: 'inline-size',
 } as const satisfies CSSProperties;
 
 const baseGridStyle = {
   display: 'grid',
   gap: 2,
+  minWidth: MIN_WIDTH,
   width: '100%',
-  // The cells size their type against this box rather than against the page,
-  // so the same table reads at 320px beside a chart and at 900px on its own.
-  containerType: 'inline-size',
 } as const satisfies CSSProperties;
 
-const gridStyle = {
-  ...baseGridStyle,
+/**
+ * The grid the cells are placed on.
+ * @param headers - Whether a leading column and row hold the period and group
+ * numbers.
+ * @param writesDetail - Whether a cell writes a third line, which is what a
+ * row is tall enough for.
+ * @returns The style of the grid.
+ */
+function gridStyle(headers: boolean, writesDetail: boolean): CSSProperties {
+  const row = writesDetail ? ROW_HEIGHT : ROW_HEIGHT_ALONE;
   // The eighth row is the gap the inner-transition series are lifted out into.
-  gridTemplateColumns: `repeat(${String(COLUMN_COUNT)}, minmax(0, 1fr))`,
-  gridTemplateRows:
-    'repeat(7, minmax(0, 1fr)) 0.5rem repeat(2, minmax(0, 1fr))',
-  aspectRatio: `${String(COLUMN_COUNT)} / 9.7`,
-  minWidth: 280,
-} as const satisfies CSSProperties;
-
-const gridWithHeadersStyle = {
-  ...baseGridStyle,
-  // A leading column and a leading row hold the period and group numbers.
-  gridTemplateColumns: `1.4rem repeat(${String(COLUMN_COUNT)}, minmax(0, 1fr))`,
-  gridTemplateRows:
-    '1rem repeat(7, minmax(0, 1fr)) 0.5rem repeat(2, minmax(0, 1fr))',
-  aspectRatio: `${String(COLUMN_COUNT + 1.2)} / 10.6`,
-  minWidth: 280,
-} as const satisfies CSSProperties;
+  const rows = `repeat(7, ${row}) ${SERIES_GAP} repeat(2, ${row})`;
+  if (!headers) {
+    return {
+      ...baseGridStyle,
+      gridTemplateColumns: `repeat(${String(COLUMN_COUNT)}, minmax(0, 1fr))`,
+      gridTemplateRows: rows,
+    };
+  }
+  return {
+    ...baseGridStyle,
+    gridTemplateColumns: `max(14px, 2.4cqw) repeat(${String(COLUMN_COUNT)}, minmax(0, 1fr))`,
+    gridTemplateRows: `max(12px, 2cqw) ${rows}`,
+  };
+}

package/src/periodic/ui/PeriodicTableChrome.tsx

@@ -150,7 +150,7 @@ const headerStyle = {
   alignItems: 'center',
   color: TOKEN.textMuted,
   display: 'flex',
-  fontSize: 'clamp(0.4rem, 1.9cqw, 0.62rem)',
+  fontSize: 'max(0.45rem, 1.35cqw)',
   justifyContent: 'center',
   padding: 0,
 } as const satisfies CSSProperties;
@@ -168,6 +168,6 @@ const markerStyle = {
   borderRadius: 3,
   color: TOKEN.textMuted,
   display: 'flex',
-  fontSize: 'clamp(0.36rem, 1.7cqw, 0.55rem)',
+  fontSize: 'max(0.4rem, 1.15cqw)',
   justifyContent: 'center',
 } as const satisfies CSSProperties;

package/src/spectra/ui/NumberField.tsx

@@ -1,6 +1,6 @@
-import { InputGroup } from '@blueprintjs/core';
 import type { ReactElement } from 'react';
-import { useState } from 'react';
+
+import { NumberInput } from '../../number/ui/NumberInput.tsx';
 
 import { HELP_STYLE, LABEL_STYLE, sizedFieldStyle } from './fieldStyles.ts';
 
@@ -35,77 +35,30 @@ interface NumberFieldProps {
 /**
  * One number of the settings.
  *
- * The box keeps what was typed rather than what parsed, because a reader
- * halfway through `1e-` has typed something no number can hold yet; clearing it
- * under them would make the field unusable. Nothing is handed up until the text
- * reads as a number, and emptying the box hands up nothing at all — which is
- * how a reader gets back to upstream's default after typing over it.
+ * Emptying the box hands up nothing at all, which is how a reader gets back to
+ * upstream's default after typing over it.
  * @param props - See {@link NumberFieldProps}.
  * @returns The labelled box.
  */
 export function NumberField(props: NumberFieldProps): ReactElement {
   const { label, value, placeholder, onChange, integer = false, help } = props;
-  const [draft, setDraft] = useState(() => ({
-    text: asText(value),
-    held: value,
-  }));
-
-  // The settings changed from somewhere else — a preset, a reset, a pasted
-  // configuration — so the box has to follow rather than hold the old text.
-  // `held` is what this box last handed up, not the prop it was rendered with:
-  // comparing against the prop would make the box's own edit look external and
-  // rewrite `-0.` as `0` under the caret before the reader reaches the digits.
-  if (draft.held !== value) setDraft({ text: asText(value), held: value });
 
   return (
     <label style={FIELD_STYLE}>
       <span style={LABEL_STYLE}>{label}</span>
-      <InputGroup
-        size="small"
+      <NumberInput
+        allowEmpty
+        buttons={false}
         fill
-        inputMode={integer ? 'numeric' : 'decimal'}
-        value={draft.text}
+        size="small"
+        value={value}
         placeholder={placeholder}
-        spellCheck={false}
-        autoComplete="off"
-        onValueChange={(text) => {
-          const parsed = read(text, integer);
-          const emptied = text.trim() === '';
-          setDraft({ text, held: emptied ? undefined : (parsed ?? value) });
-          if (emptied) {
-            onChange(undefined);
-          } else if (parsed !== undefined) {
-            onChange(parsed);
-          }
-        }}
+        integer={integer}
+        onChange={onChange}
       />
       {help === undefined ? null : <span style={HELP_STYLE}>{help}</span>}
     </label>
   );
 }
 
-/**
- * The number as the box shows it.
- * @param value - What the settings hold.
- * @returns Its text, empty when nothing is held.
- */
-function asText(value: number | undefined): string {
-  return value === undefined ? '' : String(value);
-}
-
-/**
- * The text as a number, when it reads as one.
- * @param text - What was typed.
- * @param integer - Whether only whole numbers make sense.
- * @returns The number, or undefined while the text is not one yet.
- */
-function read(text: string, integer: boolean): number | undefined {
-  const trimmed = text.trim();
-  if (trimmed === '') return undefined;
-  const parsed = Number(trimmed);
-  if (!Number.isFinite(parsed)) return undefined;
-  if (integer && !Number.isInteger(parsed)) return undefined;
-  return parsed;
-}
-
 const FIELD_STYLE = sizedFieldStyle(120);

package/src/ui.ts

@@ -16,6 +16,7 @@ export * from './help/ui/index.ts';
 export * from './hooks/ui/index.ts';
 export * from './i18n/ui/index.ts';
 export * from './language/ui/index.ts';
+export * from './number/ui/index.ts';
 export * from './overlay/ui/index.ts';
 export * from './panel/ui/index.ts';
 export * from './parallel/ui/index.ts';