react-cheminfo 0.46.0 → 0.48.0

package/lib/periodic/ui/PeriodicTable.d.ts

@@ -9,104 +9,9 @@
  * Everything site-specific arrives through a callback keyed on the element, so
  * a site's own richer element record never has to cross into this component.
  */
-import type { ReactElement, ReactNode } from 'react';
-import type { Swatch } from '../../color/core/interpolate.ts';
-import type { PeriodicElement } from '../core/elements.ts';
-import type { ElementRange } from '../core/layout.ts';
-/** What {@link PeriodicTable} needs. */
-export interface PeriodicTableProps {
-    /**
-     * Symbol of the element the tools are pointed at.
-     * @default undefined — none is
-     */
-    selected?: string;
-    /**
-     * Called with the symbol of the element that was clicked, and by the arrow
-     * keys.
-     * @default undefined — the table is a figure rather than a control
-     */
-    onSelect?: (symbol: string) => void;
-    /**
-     * The colour each cell takes.
-     * @default the family colour
-     */
-    swatchOf?: (element: PeriodicElement) => Swatch;
-    /**
-     * What is written under the symbol; an empty string writes nothing.
-     * @default nothing is written
-     */
-    detailOf?: (element: PeriodicElement) => string;
-    /**
-     * How an element is named, for the label a screen reader reads. The hook a
-     * site translating the table writes its own names through.
-     * @default the English name
-     */
-    nameOf?: (element: PeriodicElement) => string;
-    /**
-     * Electrons in each shell of an element, innermost first, written down the
-     * right-hand edge of its cell. The energy levels, which a table is also read
-     * for: none of ours knows them, so the tool that does says so here.
-     * @default undefined — no cell writes any
-     */
-    shellsOf?: (element: PeriodicElement) => readonly number[] | undefined;
-    /**
-     * Whether an element is inside the set the tool is showing. Everything
-     * outside it is dimmed rather than removed, so the table keeps its shape.
-     * @default every element is
-     */
-    isIncluded?: (element: PeriodicElement) => boolean;
-    /**
-     * What is written in the block the table leaves empty — columns 3 to 12 of
-     * the first three periods, in the middle of the top edge. A tool that reads
-     * one element off the table puts what it says about it there, where the eye
-     * already is, rather than under the grid.
-     *
-     * It is sized against the table, like everything else in the grid, so give
-     * it type in `em` and it scales with the drawing.
-     * @default undefined — the block stays empty
-     */
-    inset?: ReactNode;
-    /**
-     * Whether to draw the group and period strips.
-     * @default false
-     */
-    headers?: boolean;
-    /**
-     * Called when a whole group or period header is clicked. The run says
-     * whether the click was additive — Cmd or Ctrl held — so a tool can let a
-     * reader put two periods on one chart. Without it the strips are labels
-     * rather than buttons.
-     * @default undefined
-     */
-    onSelectRange?: (range: ElementRange) => void;
-    /**
-     * Whether to draw the family legend under the grid.
-     * @default false
-     */
-    legend?: boolean;
-    /**
-     * Whether the dashed markers stand where the two inner-transition series were
-     * lifted out of the main block.
-     * @default true
-     */
-    markers?: boolean;
-    /**
-     * Whether the arrow keys walk the grid: down from carbon is silicon, and
-     * right from the end of a period is the start of the next.
-     * @default true
-     */
-    keyboard?: boolean;
-    /**
-     * Called on pointer enter with the symbol, and on leave with `null`.
-     * @default undefined
-     */
-    onHover?: (symbol: string | null) => void;
-    /**
-     * Class of the outermost element.
-     * @default undefined
-     */
-    className?: string;
-}
+import type { ReactElement } from 'react';
+import type { PeriodicTableProps } from './periodicTableProps.ts';
+export type { PeriodicTableProps } from './periodicTableProps.ts';
 /**
  * The 118 elements, laid out as the table.
  * @param props - See {@link PeriodicTableProps}.

package/lib/periodic/ui/PeriodicTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PeriodicTable.d.ts","sourceRoot":"","sources":["../../../src/periodic/ui/PeriodicTable.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAGV,YAAY,EACZ,SAAS,EACV,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AAI9D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAuBtD,wCAAwC;AACxC,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,MAAM,CAAC;IAChD;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,MAAM,CAAC;IAChD;;;;OAIG;IACH,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,MAAM,CAAC;IAC9C;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,SAAS,MAAM,EAAE,GAAG,SAAS,CAAC;IACvE;;;;OAIG;IACH,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,OAAO,CAAC;IACnD;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC9C;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,CA8GrE"}
+{"version":3,"file":"PeriodicTable.d.ts","sourceRoot":"","sources":["../../../src/periodic/ui/PeriodicTable.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAuBzD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAIlE,YAAY,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAElE;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,CA4HrE"}

package/lib/periodic/ui/PeriodicTable.js

@@ -3,19 +3,20 @@ import { useEffect, useRef } from 'react';
 import { useResizeObserver } from "../../hooks/ui/useResizeObserver.js";
 import { useChromeT } from "../../i18n/ui/useT.js";
 import { categorySwatch } from "../core/categories.js";
-import { COLUMN_COUNT, EMPTY_BLOCK, elementByArrowKey, placedElements, } from "../core/layout.js";
+import { elementByArrowKey, placedElements } from "../core/layout.js";
 import { CategoryLegend } from "./CategoryLegend.js";
 import { ElementCell } from "./ElementCell.js";
 import { HeaderStrips, InnerTransitionMarkers, } from "./PeriodicTableChrome.js";
-import { ROW_SHARE, SHELLS_RESERVED, detailType, shellFontSize, textWidthInEm, } from "./cellType.js";
-import { UNIT_PROPERTY, ofWidth, unitValue } from "./unit.js";
+import { SHELLS_RESERVED, detailType, shellFontSize, textWidthInEm, } from "./cellType.js";
+import { gridStyle, insetStyle, rootStyle } from "./tableLayout.js";
+import { UNIT_PROPERTY, unitValue } from "./unit.js";
 /**
  * The 118 elements, laid out as the table.
  * @param props - See {@link PeriodicTableProps}.
  * @returns The grid, its optional chrome, and its optional legend.
  */
 export function PeriodicTable(props) {
-    const { selected, onSelect, swatchOf = defaultSwatchOf, detailOf, nameOf = defaultNameOf, shellsOf, isIncluded, inset, headers = false, onSelectRange, legend = false, markers = true, keyboard = true, onHover, className, } = props;
+    const { selected, onSelect, swatchOf = defaultSwatchOf, detailOf, nameOf = defaultNameOf, shellsOf, isIncluded, inset, headers = false, onSelectRange, onSelectAll, legend = false, markers = true, keyboard = true, onHover, className, } = props;
     const t = useChromeT();
     const rootRef = useRef(null);
     const gridRef = useRef(null);
@@ -48,7 +49,7 @@ export function PeriodicTable(props) {
             return;
         event.preventDefault();
         cameFromKeyRef.current = true;
-        onSelect(next.symbol);
+        onSelect(next.symbol, PLAIN_PICK);
     }
     // One size for the whole table rather than one per cell: a column of values
     // written at eleven sizes is read as eleven things, and a name shrunk to a
@@ -67,30 +68,7 @@ export function PeriodicTable(props) {
     const reserved = deepest === 0 ? 0 : SHELLS_RESERVED;
     const type = detailType(widths, reserved);
     const shellSize = shellFontSize(deepest);
-    return (_jsxs("div", { ref: rootRef, className: className, style: rootStyle, children: [_jsxs("div", { ref: gridRef, role: "grid", "aria-label": t('periodic.table'), "data-testid": "periodic-table", style: gridStyle(headers), onKeyDown: handleKeyDown, children: [headers ? _jsx(HeaderStrips, { onSelectRange: onSelectRange }) : null, inset === undefined ? null : (_jsx("div", { style: insetStyle(offset), children: inset })), markers ? _jsx(InnerTransitionMarkers, { offset: offset }) : null, placed.map(({ element, cell }) => (_jsx(ElementCell, { atomicNumber: element.atomicNumber, symbol: element.symbol, name: nameOf(element), detail: detailOf?.(element), detailType: type, shells: shellsOf?.(element), shellSize: shellSize, swatch: swatchOf(element), isSelected: element.symbol === selected, isIncluded: isIncluded?.(element), column: cell.column + offset, row: cell.row + offset, onSelect: onSelect ?? noop, onHover: onHover }, element.symbol)))] }), legend ? _jsx(CategoryLegend, {}) : null] }));
-}
-/**
- * Where what the caller writes in the empty block is placed.
- * @param offset - 1 when the table draws its header strips, 0 otherwise.
- * @returns The style of the slot.
- */
-function insetStyle(offset) {
-    return {
-        alignItems: 'center',
-        display: 'flex',
-        // A column of air on each side, so the writing reads as sitting in the
-        // block rather than as running into the cells beside it.
-        padding: `0 ${ofWidth(2.4)}`,
-        gridColumn: `${String(EMPTY_BLOCK.column + offset)} / span ${String(EMPTY_BLOCK.columnSpan)}`,
-        gridRow: `${String(EMPTY_BLOCK.row + offset)} / span ${String(EMPTY_BLOCK.rowSpan)}`,
-        // A share of the table, with a floor, exactly as a cell sizes its symbol:
-        // the block holds the same three rows at every width, so what is written
-        // in it has to shrink with them.
-        fontSize: `max(0.6rem, ${ofWidth(1.8)})`,
-        lineHeight: 1.35,
-        minWidth: 0,
-        overflow: 'hidden',
-    };
+    return (_jsxs("div", { ref: rootRef, className: className, "data-figure": "html", style: rootStyle, children: [_jsxs("div", { ref: gridRef, role: "grid", "aria-label": t('periodic.table'), "data-testid": "periodic-table", style: gridStyle(headers), onKeyDown: handleKeyDown, children: [headers ? (_jsx(HeaderStrips, { onSelectRange: onSelectRange, onSelectAll: onSelectAll })) : null, inset === undefined ? null : (_jsx("div", { style: insetStyle(offset), children: inset })), markers ? _jsx(InnerTransitionMarkers, { offset: offset }) : null, placed.map(({ element, cell }) => (_jsx(ElementCell, { atomicNumber: element.atomicNumber, symbol: element.symbol, name: nameOf(element), detail: detailOf?.(element), detailType: type, shells: shellsOf?.(element), shellSize: shellSize, swatch: swatchOf(element), isSelected: element.symbol === selected, isIncluded: isIncluded?.(element), column: cell.column + offset, row: cell.row + offset, onSelect: onSelect ?? noop, onHover: onHover }, element.symbol)))] }), legend ? _jsx(CategoryLegend, {}) : null] }));
 }
 function defaultSwatchOf(element) {
     return categorySwatch(element.category);
@@ -98,63 +76,10 @@ function defaultSwatchOf(element) {
 function defaultNameOf(element) {
     return element.name;
 }
+/** The arrow keys walk the table to read it; they never add to a set. */
+const PLAIN_PICK = { additive: false };
 function noop() {
     // A table with no `onSelect` is a figure; its cells stay buttons so the
     // 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.2% of that width, so a cell is a third taller than it is
- * wide — the proportion of a wall chart, and the room the three bands of a
- * cell need to be read from the back of a room. It is the same height in every
- * table: a cell keeps the band it writes a value in whether or not that table
- * writes one.
- */
-const ROW_HEIGHT = ofWidth(ROW_SHARE);
-/** The band the two inner-transition series were lifted out across. */
-const SERIES_GAP = `max(6px, ${ofWidth(1.1)})`;
-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. The
-    // share is measured (see `unit.ts`); the container is what the `1cqw`
-    // fallback and a site's own `@container` rules are answered by, and it keeps
-    // this box's width independent of what is written inside it.
-    containerType: 'inline-size',
-};
-const baseGridStyle = {
-    display: 'grid',
-    gap: 2,
-    minWidth: MIN_WIDTH,
-    width: '100%',
-};
-/**
- * The grid the cells are placed on.
- * @param headers - Whether a leading column and row hold the period and group
- * numbers.
- * @returns The style of the grid.
- */
-function gridStyle(headers) {
-    // The eighth row is the gap the inner-transition series are lifted out into.
-    const rows = `repeat(7, ${ROW_HEIGHT}) ${SERIES_GAP} repeat(2, ${ROW_HEIGHT})`;
-    if (!headers) {
-        return {
-            ...baseGridStyle,
-            gridTemplateColumns: `repeat(${String(COLUMN_COUNT)}, minmax(0, 1fr))`,
-            gridTemplateRows: rows,
-        };
-    }
-    return {
-        ...baseGridStyle,
-        gridTemplateColumns: `max(14px, ${ofWidth(2.4)}) repeat(${String(COLUMN_COUNT)}, minmax(0, 1fr))`,
-        gridTemplateRows: `max(12px, ${ofWidth(2)}) ${rows}`,
-    };
-}
 //# sourceMappingURL=PeriodicTable.js.map

package/lib/periodic/ui/PeriodicTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"PeriodicTable.js","sourceRoot":"","sources":["../../../src/periodic/ui/PeriodicTable.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"PeriodicTable.js","sourceRoot":"","sources":["../../../src/periodic/ui/PeriodicTable.tsx"],"names":[],"mappings":"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"}

package/lib/periodic/ui/PeriodicTableChrome.d.ts

@@ -12,14 +12,24 @@ interface HeaderStripsProps {
      * @default undefined
      */
     onSelectRange?: (range: ElementRange) => void;
+    /**
+     * Called when the corner where the two strips meet is clicked. The corner of
+     * a spreadsheet takes everything, and a table whose rows and columns are one
+     * click each owes the same for the whole of it. Without it the corner stays
+     * empty.
+     * @default undefined
+     */
+    onSelectAll?: () => void;
 }
 /**
- * The 1–18 strip along the top and the 1–7 strip down the left.
+ * The 1–18 strip along the top, the 1–7 strip down the left, and the corner
+ * where they meet.
  *
  * They are buttons when the table takes a range: "plot period 3" is one click
- * there and eight on the cells.
+ * there and eight on the cells. The corner takes the whole table, which is the
+ * gesture a spreadsheet has taught everybody.
  * @param props - See {@link HeaderStripsProps}.
- * @returns The two strips, placed on the grid.
+ * @returns The two strips, the corner, and the inner-transition period numbers.
  */
 export declare function HeaderStrips(props: HeaderStripsProps): ReactElement;
 /** What {@link InnerTransitionMarkers} needs. */

package/lib/periodic/ui/PeriodicTableChrome.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PeriodicTableChrome.d.ts","sourceRoot":"","sources":["../../../src/periodic/ui/PeriodicTableChrome.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAA6B,YAAY,EAAE,MAAM,OAAO,CAAC;AAIrE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAStD,uCAAuC;AACvC,UAAU,iBAAiB;IACzB;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;CAC/C;AAED;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,YAAY,CA8DnE;AAED,iDAAiD;AACjD,UAAU,2BAA2B;IACnC,6DAA6D;IAC7D,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;;GAIG;AACH,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,2BAA2B,GACjC,YAAY,CAmBd"}
+{"version":3,"file":"PeriodicTableChrome.d.ts","sourceRoot":"","sources":["../../../src/periodic/ui/PeriodicTableChrome.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAA6B,YAAY,EAAE,MAAM,OAAO,CAAC;AAIrE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAWtD,uCAAuC;AACvC,UAAU,iBAAiB;IACzB;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC9C;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,YAAY,CAoEnE;AAED,iDAAiD;AACjD,UAAU,2BAA2B;IACnC,6DAA6D;IAC7D,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;;GAIG;AACH,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,2BAA2B,GACjC,YAAY,CAmBd"}

package/lib/periodic/ui/PeriodicTableChrome.js

@@ -2,17 +2,21 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useChromeT } from "../../i18n/ui/useT.js";
 import { TOKEN } from "../../tokens/core/familyTokens.js";
 import { COLUMN_COUNT, INNER_TRANSITION_MARKERS, INNER_TRANSITION_ROWS, } from "../core/layout.js";
+import { SelectAllCorner } from "./SelectAllCorner.js";
+import { headerButtonStyle, headerStyle } from "./headerStyles.js";
 import { ofWidth } from "./unit.js";
 /**
- * The 1–18 strip along the top and the 1–7 strip down the left.
+ * The 1–18 strip along the top, the 1–7 strip down the left, and the corner
+ * where they meet.
  *
  * They are buttons when the table takes a range: "plot period 3" is one click
- * there and eight on the cells.
+ * there and eight on the cells. The corner takes the whole table, which is the
+ * gesture a spreadsheet has taught everybody.
  * @param props - See {@link HeaderStripsProps}.
- * @returns The two strips, placed on the grid.
+ * @returns The two strips, the corner, and the inner-transition period numbers.
  */
 export function HeaderStrips(props) {
-    const { onSelectRange } = props;
+    const { onSelectRange, onSelectAll } = props;
     const t = useChromeT();
     const groups = [];
     for (let group = 1; group <= COLUMN_COUNT; group++) {
@@ -36,7 +40,7 @@ export function HeaderStrips(props) {
                     });
                 }) }, `period-${String(period)}`));
     }
-    return (_jsxs(_Fragment, { children: [groups, periods, INNER_TRANSITION_ROWS.map(({ row, period }) => (_jsx("div", { style: { ...headerStyle, gridColumn: 1, gridRow: row + 1 }, children: period }, `inner-${String(row)}`)))] }));
+    return (_jsxs(_Fragment, { children: [onSelectAll === undefined ? null : (_jsx(SelectAllCorner, { title: t('periodic.allElements'), onClick: onSelectAll })), groups, periods, INNER_TRANSITION_ROWS.map(({ row, period }) => (_jsx("div", { style: { ...headerStyle, gridColumn: 1, gridRow: row + 1 }, children: period }, `inner-${String(row)}`)))] }));
 }
 /**
  * The two cells the lanthanoids and the actinoids were lifted out of.
@@ -66,22 +70,8 @@ function HeaderCell(props) {
     const style = { ...headerStyle, gridColumn: column, gridRow: row };
     if (onClick === undefined)
         return _jsx("div", { style: style, children: label });
-    return (_jsx("button", { type: "button", "aria-label": title, onClick: onClick, style: { ...style, ...headerButtonStyle }, children: label }));
+    return (_jsx("button", { type: "button", "aria-label": title, title: title, onClick: onClick, style: { ...style, ...headerButtonStyle }, children: label }));
 }
-const headerStyle = {
-    alignItems: 'center',
-    color: TOKEN.textMuted,
-    display: 'flex',
-    fontSize: `max(0.45rem, ${ofWidth(1.35)})`,
-    justifyContent: 'center',
-    padding: 0,
-};
-const headerButtonStyle = {
-    background: 'none',
-    border: 'none',
-    cursor: 'pointer',
-    font: 'inherit',
-};
 const markerStyle = {
     alignItems: 'center',
     border: `1px dashed ${TOKEN.borderStrong}`,

package/lib/periodic/ui/PeriodicTableChrome.js.map

@@ -1 +1 @@
-{"version":3,"file":"PeriodicTableChrome.js","sourceRoot":"","sources":["../../../src/periodic/ui/PeriodicTableChrome.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"PeriodicTableChrome.js","sourceRoot":"","sources":["../../../src/periodic/ui/PeriodicTableChrome.tsx"],"names":[],"mappings":"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"}

package/lib/periodic/ui/SelectAllCorner.d.ts

@@ -0,0 +1,23 @@
+import type { ReactElement } from 'react';
+/** What {@link SelectAllCorner} needs. */
+interface SelectAllCornerProps {
+    /** What it does, for the pointer and for a screen reader. */
+    title: string;
+    /** Called when it is clicked. */
+    onClick: () => void;
+}
+/**
+ * The corner where the two header strips meet, which takes the whole table.
+ *
+ * It is a control and nothing else, so it stays out of sight until it is
+ * pointed at or reached from the keyboard, and it is left off a print and out
+ * of a saved figure. The glyph points into the grid it takes, as a
+ * spreadsheet's does; it is a mark rather than a word because the corner is a
+ * seventeenth of the table's width, and the word differs in every language the
+ * chrome speaks.
+ * @param props - See {@link SelectAllCornerProps}.
+ * @returns The corner.
+ */
+export declare function SelectAllCorner(props: SelectAllCornerProps): ReactElement;
+export {};
+//# sourceMappingURL=SelectAllCorner.d.ts.map

package/lib/periodic/ui/SelectAllCorner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectAllCorner.d.ts","sourceRoot":"","sources":["../../../src/periodic/ui/SelectAllCorner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAc,YAAY,EAAE,MAAM,OAAO,CAAC;AAKtD,0CAA0C;AAC1C,UAAU,oBAAoB;IAC5B,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,CAuCzE"}

package/lib/periodic/ui/SelectAllCorner.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { headerButtonStyle, headerStyle } from "./headerStyles.js";
+/**
+ * The corner where the two header strips meet, which takes the whole table.
+ *
+ * It is a control and nothing else, so it stays out of sight until it is
+ * pointed at or reached from the keyboard, and it is left off a print and out
+ * of a saved figure. The glyph points into the grid it takes, as a
+ * spreadsheet's does; it is a mark rather than a word because the corner is a
+ * seventeenth of the table's width, and the word differs in every language the
+ * chrome speaks.
+ * @param props - See {@link SelectAllCornerProps}.
+ * @returns The corner.
+ */
+export function SelectAllCorner(props) {
+    const { title, onClick } = props;
+    const [pointed, setPointed] = useState(false);
+    const [focused, setFocused] = useState(false);
+    return (_jsx("button", { type: "button", "aria-label": title, title: title, onClick: onClick, style: {
+            ...headerStyle,
+            gridColumn: 1,
+            gridRow: 1,
+            ...headerButtonStyle,
+            opacity: pointed || focused ? 1 : 0,
+            transition: 'opacity 120ms ease',
+        }, className: "no-print", "data-figure": "chrome", onPointerEnter: () => {
+            setPointed(true);
+        }, onPointerLeave: () => {
+            setPointed(false);
+        }, 
+        // Only a focus the keyboard gave it: a click focuses it too, and the
+        // glyph would otherwise stay up after the pointer has gone.
+        onFocus: (event) => {
+            setFocused(event.currentTarget.matches(':focus-visible'));
+        }, onBlur: () => {
+            setFocused(false);
+        }, children: "\u25E2" }));
+}
+//# sourceMappingURL=SelectAllCorner.js.map

package/lib/periodic/ui/SelectAllCorner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectAllCorner.js","sourceRoot":"","sources":["../../../src/periodic/ui/SelectAllCorner.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAUnE;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,eAAe,CAAC,KAA2B;IACzD,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IACjC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,OAAO,CACL,iBACE,IAAI,EAAC,QAAQ,gBACD,KAAK,EACjB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE;YACL,GAAG,WAAW;YACd,UAAU,EAAE,CAAC;YACb,OAAO,EAAE,CAAC;YACV,GAAG,iBAAiB;YACpB,OAAO,EAAE,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YACnC,UAAU,EAAE,oBAAoB;SACjC,EACD,SAAS,EAAC,UAAU,iBACR,QAAQ,EACpB,cAAc,EAAE,GAAG,EAAE;YACnB,UAAU,CAAC,IAAI,CAAC,CAAC;QACnB,CAAC,EACD,cAAc,EAAE,GAAG,EAAE;YACnB,UAAU,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC;QACD,qEAAqE;QACrE,4DAA4D;QAC5D,OAAO,EAAE,CAAC,KAAoC,EAAE,EAAE;YAChD,UAAU,CAAC,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC;QAC5D,CAAC,EACD,MAAM,EAAE,GAAG,EAAE;YACX,UAAU,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC,uBAGM,CACV,CAAC;AACJ,CAAC"}

package/lib/periodic/ui/headerStyles.d.ts

@@ -0,0 +1,17 @@
+/** A group or period number, and the corner where the two strips meet. */
+export declare const headerStyle: {
+    readonly alignItems: "center";
+    readonly color: string;
+    readonly display: "flex";
+    readonly fontSize: `max(0.45rem, ${string})`;
+    readonly justifyContent: "center";
+    readonly padding: 0;
+};
+/** The same, when it is a button: the type and the ground stay the strip's. */
+export declare const headerButtonStyle: {
+    readonly background: "none";
+    readonly border: "none";
+    readonly cursor: "pointer";
+    readonly font: "inherit";
+};
+//# sourceMappingURL=headerStyles.d.ts.map

package/lib/periodic/ui/headerStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"headerStyles.d.ts","sourceRoot":"","sources":["../../../src/periodic/ui/headerStyles.ts"],"names":[],"mappings":"AAMA,0EAA0E;AAC1E,eAAO,MAAM,WAAW;;;;;;;CAOU,CAAC;AAEnC,+EAA+E;AAC/E,eAAO,MAAM,iBAAiB;;;;;CAKI,CAAC"}

package/lib/periodic/ui/headerStyles.js

@@ -0,0 +1,19 @@
+import { TOKEN } from "../../tokens/core/familyTokens.js";
+import { ofWidth } from "./unit.js";
+/** A group or period number, and the corner where the two strips meet. */
+export const headerStyle = {
+    alignItems: 'center',
+    color: TOKEN.textMuted,
+    display: 'flex',
+    fontSize: `max(0.45rem, ${ofWidth(1.35)})`,
+    justifyContent: 'center',
+    padding: 0,
+};
+/** The same, when it is a button: the type and the ground stay the strip's. */
+export const headerButtonStyle = {
+    background: 'none',
+    border: 'none',
+    cursor: 'pointer',
+    font: 'inherit',
+};
+//# sourceMappingURL=headerStyles.js.map

package/lib/periodic/ui/headerStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"headerStyles.js","sourceRoot":"","sources":["../../../src/periodic/ui/headerStyles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,mCAAmC,CAAC;AAE1D,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,0EAA0E;AAC1E,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,UAAU,EAAE,QAAQ;IACpB,KAAK,EAAE,KAAK,CAAC,SAAS;IACtB,OAAO,EAAE,MAAM;IACf,QAAQ,EAAE,gBAAgB,OAAO,CAAC,IAAI,CAAC,GAAG;IAC1C,cAAc,EAAE,QAAQ;IACxB,OAAO,EAAE,CAAC;CACsB,CAAC;AAEnC,+EAA+E;AAC/E,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,UAAU,EAAE,MAAM;IAClB,MAAM,EAAE,MAAM;IACd,MAAM,EAAE,SAAS;IACjB,IAAI,EAAE,SAAS;CACiB,CAAC"}

package/lib/periodic/ui/periodicTableProps.d.ts

@@ -0,0 +1,115 @@
+/**
+ * What a caller hands a `PeriodicTable`.
+ *
+ * The props live beside the component rather than inside it, so a reader
+ * looking for what the table does does not scroll past a page of options.
+ */
+import type { ReactNode } from 'react';
+import type { Swatch } from '../../color/core/interpolate.ts';
+import type { PeriodicElement } from '../core/elements.ts';
+import type { ElementPick, ElementRange } from '../core/layout.ts';
+/** What `PeriodicTable` needs. */
+export interface PeriodicTableProps {
+    /**
+     * Symbol of the element the tools are pointed at.
+     * @default undefined — none is
+     */
+    selected?: string;
+    /**
+     * Called with the symbol of the element that was clicked, and by the arrow
+     * keys. The pick says whether the click was additive — Cmd or Ctrl held — so
+     * a tool whose plain click already reads one element into a card can let the
+     * same table build a set of them.
+     * @default undefined — the table is a figure rather than a control
+     */
+    onSelect?: (symbol: string, pick: ElementPick) => void;
+    /**
+     * The colour each cell takes.
+     * @default the family colour
+     */
+    swatchOf?: (element: PeriodicElement) => Swatch;
+    /**
+     * What is written under the symbol; an empty string writes nothing.
+     * @default nothing is written
+     */
+    detailOf?: (element: PeriodicElement) => string;
+    /**
+     * How an element is named, for the label a screen reader reads. The hook a
+     * site translating the table writes its own names through.
+     * @default the English name
+     */
+    nameOf?: (element: PeriodicElement) => string;
+    /**
+     * Electrons in each shell of an element, innermost first, written down the
+     * right-hand edge of its cell. The energy levels, which a table is also read
+     * for: none of ours knows them, so the tool that does says so here.
+     * @default undefined — no cell writes any
+     */
+    shellsOf?: (element: PeriodicElement) => readonly number[] | undefined;
+    /**
+     * Whether an element is inside the set the tool is showing. Everything
+     * outside it is dimmed rather than removed, so the table keeps its shape.
+     * @default every element is
+     */
+    isIncluded?: (element: PeriodicElement) => boolean;
+    /**
+     * What is written in the block the table leaves empty — columns 3 to 12 of
+     * the first three periods, in the middle of the top edge. A tool that reads
+     * one element off the table puts what it says about it there, where the eye
+     * already is, rather than under the grid.
+     *
+     * It is sized against the table, like everything else in the grid, so give
+     * it type in `em` and it scales with the drawing.
+     * @default undefined — the block stays empty
+     */
+    inset?: ReactNode;
+    /**
+     * Whether to draw the group and period strips.
+     * @default false
+     */
+    headers?: boolean;
+    /**
+     * Called when a whole group or period header is clicked. The run says
+     * whether the click was additive — Cmd or Ctrl held — so a tool can let a
+     * reader put two periods on one chart. Without it the strips are labels
+     * rather than buttons.
+     * @default undefined
+     */
+    onSelectRange?: (range: ElementRange) => void;
+    /**
+     * Called when the corner where the two header strips meet is clicked, which
+     * is how a reader takes the whole table back. The corner shows its glyph only
+     * while it is pointed at or reached from the keyboard. Without it the corner
+     * stays empty.
+     * @default undefined
+     */
+    onSelectAll?: () => void;
+    /**
+     * Whether to draw the family legend under the grid.
+     * @default false
+     */
+    legend?: boolean;
+    /**
+     * Whether the dashed markers stand where the two inner-transition series were
+     * lifted out of the main block.
+     * @default true
+     */
+    markers?: boolean;
+    /**
+     * Whether the arrow keys walk the grid: down from carbon is silicon, and
+     * right from the end of a period is the start of the next.
+     * @default true
+     */
+    keyboard?: boolean;
+    /**
+     * Called on pointer enter with the symbol, and on leave with `null`.
+     * @default undefined
+     */
+    onHover?: (symbol: string | null) => void;
+    /**
+     * Class of the outermost element.
+     * @default undefined
+     */
+    className?: string;
+}
+//# sourceMappingURL=periodicTableProps.d.ts.map

package/lib/periodic/ui/periodicTableProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"periodicTableProps.d.ts","sourceRoot":"","sources":["../../../src/periodic/ui/periodicTableProps.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEnE,kCAAkC;AAClC,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IACvD;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,MAAM,CAAC;IAChD;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,MAAM,CAAC;IAChD;;;;OAIG;IACH,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,MAAM,CAAC;IAC9C;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,SAAS,MAAM,EAAE,GAAG,SAAS,CAAC;IACvE;;;;OAIG;IACH,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,OAAO,CAAC;IACnD;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC9C;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/lib/periodic/ui/periodicTableProps.js

@@ -0,0 +1,8 @@
+/**
+ * What a caller hands a `PeriodicTable`.
+ *
+ * The props live beside the component rather than inside it, so a reader
+ * looking for what the table does does not scroll past a page of options.
+ */
+export {};
+//# sourceMappingURL=periodicTableProps.js.map

package/lib/periodic/ui/periodicTableProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"periodicTableProps.js","sourceRoot":"","sources":["../../../src/periodic/ui/periodicTableProps.ts"],"names":[],"mappings":"AAAA;;;;;GAKG"}