@datalayer/primer-addons 1.0.20 → 1.0.22

package/lib/utils/Portals.js

@@ -3,7 +3,14 @@
  * Distributed under the terms of the Modified BSD License.
  */
 import { registerPortalRoot } from '@primer/react';
-const PRIMER_PORTAL_ROOT_ID = '__primerPortalRoot__';
+/**
+ * Id of the element Primer portals render under.
+ *
+ * Exported because a host may need to mark that element as its own — the
+ * JupyterLab theming of jupyter-react adds `jp-ThemedContainer` to it, so
+ * the rules JupyterLab scopes to that class reach portaled content too.
+ */
+export const PRIMER_PORTAL_ROOT_ID = '__primerPortalRoot__';
 /**
  * Key used on `document.body` to track the CSS-property names we
  * previously applied so we can remove stale entries on theme switch.
@@ -81,11 +88,38 @@ export const setupPrimerPortals = (colormode) => {
     portalRoot.dataset['colorMode'] = resolved;
     portalRoot.dataset['lightTheme'] = lightTheme;
     portalRoot.dataset['darkTheme'] = darkTheme;
-    // High z-index so overlays render above positioned UI (e.g. chat z-index 1001).
-    portalRoot.style.position = 'relative';
+    /*
+     * Pinned to the origin of the document, never left in the flow of the body.
+     *
+     * Primer positions an anchored overlay — a menu, a dropdown — with
+     * `position: absolute` and coordinates taken from the VIEWPORT rectangle
+     * of its anchor. Those coordinates are only right when the containing
+     * block of the overlay starts at the origin of the document, which is why
+     * Primer's own default portal root is `absolute` at `0, 0`.
+     *
+     * Left `relative`, this root instead sits wherever the flow of the body
+     * ends and becomes the containing block of everything portaled into it:
+     * in an application whose markup is a full-height element — a React page
+     * hosting JupyterLab — that is the bottom of the screen, and every menu
+     * opened at the top of the page was drawn a screen further down, off the
+     * bottom edge. Which reads, to whoever clicked, as a menu that refuses to
+     * open. The high z-index is kept: it needs a positioned element, and
+     * `absolute` is one.
+     */
+    portalRoot.style.position = 'absolute';
+    portalRoot.style.top = '0';
+    portalRoot.style.left = '0';
+    portalRoot.style.width = '100%';
     portalRoot.style.zIndex = '9999';
     registerPortalRoot(portalRoot);
 };
+/**
+ * The element Primer portals render under, when it has been set up.
+ *
+ * `setupPrimerPortals` creates it; before that call there is none, and this
+ * answers `null` rather than inventing one.
+ */
+export const getPrimerPortalRoot = () => document.getElementById(PRIMER_PORTAL_ROOT_ID);
 /* ─── camelCase → kebab-case ─────────────────────────────────────────── */
 const camelToKebab = (s) => s.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
 /**
@@ -102,33 +136,54 @@ const camelToKebab = (s) => s.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
  * portals stay in sync whenever theme or color-mode changes.
  */
 export function syncPortalThemeStyles(styles) {
-    const body = document.body;
-    // 1. Remove properties set by the previous invocation.
-    const prev = body[PORTAL_THEME_KEYS];
-    if (prev) {
-        for (const key of prev) {
-            body.style.removeProperty(key);
-        }
-    }
-    // 2. Apply the new properties.
-    const tracked = [];
-    for (const [key, value] of Object.entries(styles)) {
-        if (value == null)
-            continue;
-        const strVal = String(value);
-        if (key.startsWith('--')) {
-            // CSS custom property — must use setProperty
-            body.style.setProperty(key, strVal);
-            tracked.push(key);
+    /*
+     * On the portal root as well as on the body, and that is the point.
+     *
+     * The body was enough for what portals INHERIT — a font, a line height —
+     * and never enough for the colours. The portal root carries Primer's own
+     * theme markers (`data-color-mode`, `data-light-theme`), and Primer's
+     * stylesheet declares `--bgColor-*`, `--fgColor-*` and the rest ON any
+     * element carrying them. A declaration on the element always beats a value
+     * inherited from an ancestor, so Primer's default palette won on the portal
+     * root and everything drawn inside it — the buttons of a dialog, the
+     * background of a menu — came out in the default theme while the same
+     * components in the page wore the chosen one.
+     *
+     * Written inline on that element, the theme wins in turn: an inline style
+     * outranks any selector in a stylesheet.
+     */
+    const targets = [
+        document.body,
+        document.getElementById(PRIMER_PORTAL_ROOT_ID)
+    ].filter(Boolean);
+    for (const target of targets) {
+        // 1. Remove properties set by the previous invocation.
+        const prev = target[PORTAL_THEME_KEYS];
+        if (prev) {
+            for (const key of prev) {
+                target.style.removeProperty(key);
+            }
         }
-        else {
-            // Standard CSS property (camelCase → kebab-case)
-            const kebab = camelToKebab(key);
-            body.style.setProperty(kebab, strVal);
-            tracked.push(kebab);
+        // 2. Apply the new properties.
+        const tracked = [];
+        for (const [key, value] of Object.entries(styles)) {
+            if (value == null)
+                continue;
+            const strVal = String(value);
+            if (key.startsWith('--')) {
+                // CSS custom property — must use setProperty
+                target.style.setProperty(key, strVal);
+                tracked.push(key);
+            }
+            else {
+                // Standard CSS property (camelCase → kebab-case)
+                const kebab = camelToKebab(key);
+                target.style.setProperty(kebab, strVal);
+                tracked.push(kebab);
+            }
         }
+        // 3. Stash the list for the next cleanup.
+        target[PORTAL_THEME_KEYS] = tracked;
     }
-    // 3. Stash the list for the next cleanup.
-    body[PORTAL_THEME_KEYS] = tracked;
 }
 export default setupPrimerPortals;

package/lib/utils/Styles.d.ts

@@ -1,2 +1,2 @@
-export declare const Styles: () => import("react/jsx-runtime").JSX.Element;
+export declare const Styles: () => import("react").JSX.Element;
 export default Styles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/primer-addons",
-  "version": "1.0.20",
+  "version": "1.0.22",
   "license": "BSD-3-Clause",
   "scripts": {
     "build": "npm run build:lib",
@@ -33,11 +33,12 @@
   "homepage": "https://primer-addons.datalayer.tech",
   "dependencies": {
     "@datalayer/icons-react": "^1.0.0",
-    "@primer/octicons-react": "^19.29.1",
+    "@datalayer/reactor": "^1.0.0",
+    "@primer/octicons-react": "^19.35.0",
     "@primer/primitives": "^10.7.0",
     "@primer/react": "^37.31.0",
-    "react": "^18.3.1 || ^19.0.0",
-    "react-dom": "^18.3.1 || ^19.0.0",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
     "react-loading-skeleton": "^3.5.0",
     "styled-components": "^5.3.10",
     "zustand": "^5.0.0"
@@ -52,21 +53,21 @@
     "@storybook/react-vite": "^9.0.15",
     "@storybook/testing-library": "^0.2.2",
     "@types/prettier": "^3.0.0",
-    "@types/react": "18.3.20",
-    "@types/react-dom": "18.3.6",
+    "@types/react": "19.2.18",
+    "@types/react-dom": "19.2.5",
     "@types/styled-components": "^5.1.34",
-    "@typescript-eslint/eslint-plugin": "^8.29.1",
-    "@typescript-eslint/parser": "^8.29.1",
+    "@typescript-eslint/eslint-plugin": "^8.69.0",
+    "@typescript-eslint/parser": "^8.69.0",
     "@vitejs/plugin-react": "^4.5.2",
     "crypto-browserify": "^3.12.0",
-    "eslint": "^9.0.0",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.3.4",
-    "eslint-plugin-storybook": "^0.6.12",
+    "eslint": "^10.9.1",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.5",
+    "eslint-plugin-storybook": "^10.5.10",
     "prettier": "^3.3.2",
     "prop-types": "^15.8.1",
     "storybook": "^9.0.15",
-    "typescript": "^5.8.3",
-    "vite": "^7.0.0"
+    "typescript": "5.9.3",
+    "vite": "7.3.6"
   }
 }

package/lib/components/logo/DI.d.ts

@@ -1,19 +0,0 @@
-import { type SVGProps } from 'react';
-import { type ThemeVariant } from '../../theme';
-export interface DIProps extends Omit<SVGProps<SVGSVGElement>, 'ref'> {
-    size?: number;
-    variant?: ThemeVariant;
-    colorMode?: 'light' | 'dark' | 'auto';
-    /** Colour of the "I" glyph. */
-    primaryColor?: string;
-    /** Colour of the "D" glyph. */
-    secondaryColor?: string;
-}
-/**
- * DI glyph mark.
- *
- * Uses the same public API and semantic color mapping as AI:
- * primaryColor styles the "I", secondaryColor styles the "D".
- */
-export declare const DI: import("react").ForwardRefExoticComponent<DIProps & import("react").RefAttributes<SVGSVGElement>>;
-export default DI;

package/lib/components/logo/DI.js

@@ -1,20 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/*
- * Copyright (c) 2023-2026 Datalayer, Inc.
- * Distributed under the terms of the Modified BSD License.
- */
-import { forwardRef } from 'react';
-import { getLogoColors } from './DatalayerLogo';
-/**
- * DI glyph mark.
- *
- * Uses the same public API and semantic color mapping as AI:
- * primaryColor styles the "I", secondaryColor styles the "D".
- */
-export const DI = forwardRef(function DI({ size = 24, variant = 'datalayer', colorMode = 'light', primaryColor, secondaryColor, ...svgProps }, ref) {
-    const themed = getLogoColors(variant, colorMode);
-    const resolvedPrimary = primaryColor ?? themed.primary;
-    const resolvedSecondary = secondaryColor ?? themed.textColor;
-    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", width: size, height: size, role: "img", "aria-label": "DI", ref: ref, ...svgProps, children: [_jsx("path", { d: "M2 3.932H5V20.068075H2ZM3.5 3.932H6.5L12.933 20.068075H9.933ZM2 17.068075H11.4V20.068075H2Z", fill: resolvedSecondary, strokeWidth: 0.25 }), _jsx("path", { d: "m10.788825 3.932 6.43325 16.136075h3.5279L14.316725 3.932H10.788825Z", fill: resolvedPrimary, strokeWidth: 0.25 })] }));
-});
-export default DI;