@datalayer/primer-addons 1.0.20 → 1.0.21

package/lib/components/toolbar/Toolbar.d.ts

@@ -1,3 +1,3 @@
 import type { ToolbarProps } from './types';
-export declare function Toolbar({ items, extraItems, className, disabled, ariaLabel, }: ToolbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function Toolbar({ items, extraItems, className, disabled, ariaLabel, overflow, }: ToolbarProps): import("react/jsx-runtime").JSX.Element;
 export default Toolbar;

package/lib/components/toolbar/types.d.ts

@@ -123,6 +123,13 @@ export interface ToolbarProps {
     extraItems?: ToolbarItem[];
     /** Aria label for the toolbar */
     ariaLabel?: string;
+    /**
+     * Keep the toolbar to one line, moving what does not fit into a menu.
+     *
+     * On by default. Turned off, the items are all laid on the line and it is
+     * up to the host to leave room for them.
+     */
+    overflow?: boolean;
 }
 /**
  * Props for the extensible FloatingToolbar component.

package/lib/utils/Portals.d.ts

@@ -1,4 +1,12 @@
 import { type CSSProperties } from 'react';
+/**
+ * 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 declare const PRIMER_PORTAL_ROOT_ID = "__primerPortalRoot__";
 type Colormode = 'light' | 'dark' | 'auto';
 /**
  * Ensure we define a root for Primer portal root.
@@ -11,6 +19,13 @@ type Colormode = 'light' | 'dark' | 'auto';
  *  @see https://github.com/primer/react/blob/030fe020b48b7f12c2994c6614e5d4191fe764ee/src/Portal/Portal.tsx#L33
  */
 export declare const setupPrimerPortals: (colormode?: Colormode) => void;
+/**
+ * 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 declare const getPrimerPortalRoot: () => HTMLElement | null;
 /**
  * Sync a set of CSS properties (including CSS custom properties) to
  * `document.body` so that Primer portal content — which is a DOM child

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/primer-addons",
-  "version": "1.0.20",
+  "version": "1.0.21",
   "license": "BSD-3-Clause",
   "scripts": {
     "build": "npm run build:lib",