Package updates

packages/column-components/CHANGELOG.md

@@ -4,6 +4,11 @@ All notable changes to this project will be documented in this file. The format
 is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this
 project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.5.1] - 2026-01-17
+
+- Modernized color picker component
+- Remove last `findDOMNode` usage for React 19 compatibility
+
 ## [1.5.0] - 2026-01-17
 
 Remove outdated `react-images` dependency and convert `PhotoViewer` component to

packages/column-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macrostrat/column-components",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "React rendering primitives for stratigraphic columns",
   "keywords": [
     "geology",
@@ -52,6 +52,7 @@
     "@macrostrat/stratigraphy-utils": "workspace:^",
     "@macrostrat/timescale": "workspace:^",
     "@macrostrat/ui-components": "workspace:^",
+    "@uiw/react-color-swatch": "^2.9.2",
     "chroma-js": "^2.1.0",
     "classnames": "^2.2.6",
     "d3-axis": "^3.0.0",
@@ -61,7 +62,6 @@
     "d3-selection": "^3.0.0",
     "immutability-helper": "^3.0.2",
     "labella": "^1.1.4",
-    "react-color": "^2.18.0",
     "react-draggable": "^4.4.5",
     "react-scroll": "^1.7.16",
     "react-select": "^3.0.8",

packages/column-components/src/edit-overlay.ts

@@ -1,6 +1,12 @@
-import { findDOMNode } from "react-dom";
 import { format } from "d3-format";
-import { Component, useContext, MouseEvent, ReactNode } from "react";
+import {
+  Component,
+  useContext,
+  MouseEvent,
+  ReactNode,
+  createRef,
+  RefObject,
+} from "react";
 import h from "./hyper";
 import { Popover, Position, Button, Intent } from "@blueprintjs/core";
 import {
@@ -138,6 +144,8 @@ export class DivisionEditOverlay extends Component<
     popoverWidth: 340,
   };
 
+  elementRef: RefObject<HTMLDivElement>;
+
   timeout: any;
   declare context: ColumnLayoutCtx<ColumnDivision>;
   constructor(props: DivisionEditOverlayProps) {
@@ -156,12 +164,14 @@ export class DivisionEditOverlay extends Component<
       popoverIsOpen: false,
     };
     this.timeout = null;
+
+    this.elementRef = createRef();
   }
 
   onHoverInterval(event) {
     event.stopPropagation();
     // findDOMNode might be slow but I'm not sure
-    if (findDOMNode(this) !== event.target) {
+    if (this.elementRef.current !== event.target) {
       return;
     }
     const height = this.heightForEvent(event);
@@ -344,6 +354,7 @@ export class DivisionEditOverlay extends Component<
         className: "edit-overlay",
         width,
         height: pixelHeight,
+        ref: this.elementRef,
         style: {
           left,
           top,

packages/column-components/src/editor/facies/color-picker.ts

@@ -1,12 +1,6 @@
-/*
- * decaffeinate suggestions:
- * DS102: Remove unnecessary code created because of implicit returns
- * DS206: Consider reworking classes to avoid initClass
- * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
- */
 import { Component } from "react";
 import h from "@macrostrat/hyper";
-import { SwatchesPicker } from "react-color";
+import Swatch from "@uiw/react-color-swatch";
 import { Popover } from "@blueprintjs/core";
 import { FaciesContext } from "../../context";
 
@@ -25,15 +19,11 @@ class FaciesColorPicker extends Component<FaciesColorPickerProps> {
     const { setFaciesColor } = this.context;
     const { facies: d } = this.props;
     return h("div", [
-      h(SwatchesPicker, {
+      h(Swatch, {
         color: d.color || "black",
-        onChangeComplete(color) {
+        onChange(color) {
           return setFaciesColor(d.id, color.hex);
         },
-        styles: {
-          width: 500,
-          height: 570,
-        },
       }),
     ]);
   }

packages/column-components/src/util/scroll-box.ts

@@ -1,9 +1,7 @@
-import { Component, Context } from "react";
-import { findDOMNode } from "react-dom";
+import { useCallback, useEffect, useRef } from "react";
 import Box from "ui-box";
 import h from "@macrostrat/hyper";
-
-import { ColumnContext, ColumnCtx, ColumnDivision } from "../context";
+import { useColumn } from "../context";
 
 interface ColumnScrollerProps {
   scrollToHeight: number;
@@ -19,101 +17,74 @@ interface ScrollToOpts {
   alignment?: "center" | "top" | "bottom";
 }
 
-const splitProps = function (keys, props) {
-  const obj = {};
-  const rest = {};
-  for (let k in props) {
-    const v = props[k];
-    if (keys.includes(k)) {
-      obj[k] = v;
-    } else {
-      rest[k] = v;
-    }
-  }
-  return [obj, rest];
-};
-
-export class ColumnScroller extends Component<ColumnScrollerProps> {
-  constructor(props) {
-    super(props);
-    this.scrollTo = this.scrollTo.bind(this);
-  }
-
-  private static defaultProps: Partial<ColumnScrollerProps> = {
-    animated: true,
-    alignment: "center",
-    onScrolled(height) {
-      return console.log(`Scrolled to ${height} m`);
-    },
-    scrollContainer() {
-      return document.querySelector(".panel-container");
-    },
-  };
+export function ColumnScroller(props: ColumnScrollerProps) {
+  const {
+    onScrolled = defaultOnScrolled,
+    scrollContainer = defaultGetScrollContainer,
+    scrollToHeight,
+    paddingTop,
+    animated,
+    alignment,
+    ...rest
+  } = props;
 
-  static contextType: Context<ColumnCtx<ColumnDivision>> = ColumnContext;
+  const ref = useRef(null);
+  const ctx = useColumn();
+  const columnScale = ctx?.scale;
 
-  declare context: ColumnCtx<ColumnDivision>;
+  const scrollTo = useCallback(
+    (height: number, opts: ScrollToOpts) => {
+      let node = ref.current;
+      if (node == null || columnScale == null) return;
+      let { animated, alignment } = opts;
+      if (animated == null) {
+        animated = false;
+      }
+      const pixelOffset = columnScale(height);
+      const { top } = node.getBoundingClientRect();
 
-  render() {
-    const keys = [
-      "scrollToHeight",
-      "alignment",
-      "animated",
-      "onScrolled",
-      "paddingTop",
-      "scrollContainer",
-    ];
-    const [props, rest] = splitProps(keys, this.props);
-    const { pixelHeight } = this.context;
-    return h(Box, {
-      height: pixelHeight,
-      position: "absolute",
-      ...rest,
-    });
-  }
-
-  scrollTo(height, opts: ScrollToOpts = {}) {
-    let node = findDOMNode(this) as HTMLElement;
-    let { animated, alignment, ...rest } = opts;
-    if (animated == null) {
-      animated = false;
-    }
-    const { paddingTop } = this.props;
-    const { scale } = this.context;
-    const pixelOffset = scale(height);
-    const { top } = node.getBoundingClientRect();
-
-    node = this.props.scrollContainer();
-    let pos = pixelOffset + top + paddingTop;
-    const screenHeight = window.innerHeight;
-
-    if (this.props.alignment === "center") {
-      pos -= screenHeight / 2;
-    } else if (this.props.alignment === "bottom") {
-      pos -= screenHeight;
-    }
+      node = scrollContainer();
+      let pos = pixelOffset + top + paddingTop;
+      const screenHeight = window.innerHeight;
 
-    return (node.scrollTop = pos);
-  }
+      if (alignment === "center") {
+        pos -= screenHeight / 2;
+      } else if (alignment === "bottom") {
+        pos -= screenHeight;
+      }
+      if (animated && "scrollBehavior" in document.documentElement.style) {
+        node.scrollTo({ top: pos, behavior: "smooth" });
+      } else {
+        node.scrollTop = pos;
+      }
+    },
+    [onScrolled, scrollContainer, ref.current, columnScale, paddingTop],
+  );
 
-  componentDidMount() {
-    const { scrollToHeight, alignment } = this.props;
+  useEffect(() => {
+    const { scrollToHeight, alignment } = props;
     if (scrollToHeight == null) {
       return;
     }
-    this.scrollTo(scrollToHeight, { alignment, animated: false });
-    return this.props.onScrolled(scrollToHeight);
-  }
+    // Actually perform the scroll
+    scrollTo(scrollToHeight, { alignment, animated });
+    return onScrolled(scrollToHeight);
+  }, [scrollTo, scrollToHeight]);
 
-  componentDidUpdate(prevProps) {
-    const { scrollToHeight, animated, alignment } = this.props;
-    if (scrollToHeight == null) {
-      return;
-    }
-    if (prevProps.scrollToHeight === scrollToHeight) {
-      return;
-    }
-    this.scrollTo(scrollToHeight, { alignment, animated });
-    return this.props.onScrolled(scrollToHeight);
-  }
+  const { pixelHeight } = this.context;
+  return h(Box, {
+    height: pixelHeight,
+    position: "absolute",
+    ref,
+    ...rest,
+  });
+}
+
+function defaultOnScrolled(height: number) {
+  console.log(`Scrolled to ${height} m`);
+}
+
+function defaultGetScrollContainer() {
+  // Todo: generalize this
+  return document.querySelector(".panel-container");
 }

packages/data-components/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## [0.3.0] - 2026-01-20
+
+- Replace `node-fetch` with `cross-fetch` in `PrevalentTaxa` component
+
 ## [0.2.2] - 2025-11-28
 
 - Move location information (e.g., `LngLatCoords`, `Elevation`) React components

packages/data-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macrostrat/data-components",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "A library of React components tailored for Macrostrat data and endpoints",
   "type": "module",
   "source": "src/index.ts",
@@ -52,6 +52,7 @@
     "@visx/shape": "^3.12.0",
     "axios": "^1.7.9",
     "classnames": "^2.5.1",
+    "cross-fetch": "^4.1.0",
     "d3-array": "^3.2.4",
     "mapbox-gl": "^2.7.0||^3.13.0"
   },

packages/data-components/src/components/prevalent-taxa/prevalent-taxa.ts

@@ -1,9 +1,9 @@
 import { useState, useEffect } from "react";
 import axios from "axios";
 import { hyperStyled } from "@macrostrat/hyper";
-//@ts-ignore
 import styles from "./taxa.module.scss";
 import { Spinner } from "@blueprintjs/core";
+import fetch from "cross-fetch";
 
 const h = hyperStyled(styles);
 

packages/data-sheet/CHANGELOG.md

@@ -4,6 +4,11 @@ All notable changes to this project will be documented in this file. The format
 is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this
 project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.2.4] - 2026-01-20
+
+- Modernize `react-color` dependency
+- Modernize data editor handling
+
 ## [2.2.3] - 2026-01-17
 
 - Fix issue with column resizing

packages/data-sheet/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macrostrat/data-sheet",
-  "version": "2.2.3",
+  "version": "2.2.4",
   "description": "Scalable data sheet with optional editing capabilities",
   "type": "module",
   "source": "src/index.ts",
@@ -35,12 +35,11 @@
     "@macrostrat/hyper": "^3.0.6",
     "@macrostrat/ui-components": "workspace:^",
     "@supabase/postgrest-js": "^1.17.7",
+    "@uiw/react-color-sketch": "^2.9.2",
     "chroma-js": "^2.4.2",
     "classnames": "^2.3.1",
     "immutability-helper": "^3.1.1",
-    "react": "^17.0.2||^18",
-    "react-color": "^2.19.3",
-    "react-colorful": "^5.6.1",
+    "react": "^17.0.2||^18 ||^19",
     "underscore": "^1.13.7",
     "zustand": "^5.0.2",
     "zustand-computed": "^2.1.0"