@datalayer/primer-addons 1.0.7 → 1.0.8

package/lib/components/box/sx.d.ts

@@ -16,6 +16,8 @@ export type BetterSystemStyleObject = BetterCssProperties | SystemStyleObject |
 export interface SxProp {
     sx?: BetterSystemStyleObject;
 }
-declare const sx: (props: SxProp) => import("@styled-system/css").CssFunctionReturnType;
+declare const sx: (props: SxProp & {
+    theme?: Record<string, unknown>;
+}) => import("@styled-system/css").CSSObject;
 export default sx;
 export { merge };

package/lib/components/box/sx.js

@@ -5,6 +5,6 @@
  */
 import css from '@styled-system/css';
 import merge from 'deepmerge';
-const sx = (props) => css(props.sx);
+const sx = (props) => css(props.sx)(props.theme ?? {});
 export default sx;
 export { merge };

package/lib/components/toolbar/FloatingToolbar.js

@@ -31,8 +31,7 @@ import { ToolbarRenderer } from './ToolbarRenderer';
  * Position the floating element relative to a DOMRect within an anchor element.
  */
 function setFloatingPosition(targetRect, floatingElem, anchorElem, verticalGap = 10, horizontalOffset = 5) {
-    const scrollerElem = anchorElem.parentElement;
-    if (targetRect === null || !scrollerElem) {
+    if (targetRect === null) {
         floatingElem.style.opacity = '0';
         floatingElem.style.transform = 'translateY(-4px)';
         floatingElem.style.top = '-10000px';
@@ -41,17 +40,21 @@ function setFloatingPosition(targetRect, floatingElem, anchorElem, verticalGap =
     }
     const floatingElemRect = floatingElem.getBoundingClientRect();
     const anchorElementRect = anchorElem.getBoundingClientRect();
-    const editorScrollerRect = scrollerElem.getBoundingClientRect();
-    let top = targetRect.top - floatingElemRect.height - verticalGap;
-    let left = targetRect.left -
-        horizontalOffset -
-        (anchorElementRect.left - editorScrollerRect.left);
-    // Keep within anchor bounds
-    if (top < anchorElementRect.top) {
-        top = targetRect.bottom + verticalGap;
+    // Convert viewport-relative coordinates to anchor-relative coordinates.
+    // The toolbar is position:absolute inside anchorElem (position:relative),
+    // so top/left must be relative to the anchor's border box.
+    let top = targetRect.top - anchorElementRect.top - floatingElemRect.height - verticalGap;
+    let left = targetRect.left - anchorElementRect.left - horizontalOffset;
+    // If toolbar would go above the anchor, flip it below the selection
+    if (top < 0) {
+        top = targetRect.bottom - anchorElementRect.top + verticalGap;
     }
-    if (left + floatingElemRect.width > editorScrollerRect.right) {
-        left = editorScrollerRect.right - floatingElemRect.width - horizontalOffset;
+    // Keep within horizontal bounds
+    if (left + floatingElemRect.width > anchorElementRect.width) {
+        left = anchorElementRect.width - floatingElemRect.width - horizontalOffset;
+    }
+    if (left < horizontalOffset) {
+        left = horizontalOffset;
     }
     floatingElem.style.opacity = '1';
     floatingElem.style.transform = 'translateY(0)';
@@ -85,6 +88,8 @@ export function FloatingToolbar({ items, extraItems, anchorElement, isVisible, c
             return;
         const update = () => updatePosition();
         window.addEventListener('resize', update);
+        // Capture phase catches scroll on any ancestor (page, container, etc.)
+        window.addEventListener('scroll', update, true);
         const scrollerElem = anchorElement?.parentElement;
         if (scrollerElem) {
             scrollerElem.addEventListener('scroll', update);
@@ -93,6 +98,7 @@ export function FloatingToolbar({ items, extraItems, anchorElement, isVisible, c
         update();
         return () => {
             window.removeEventListener('resize', update);
+            window.removeEventListener('scroll', update, true);
             if (scrollerElem) {
                 scrollerElem.removeEventListener('scroll', update);
             }

package/lib/components/toolbar/Toolbar.js

@@ -44,7 +44,7 @@ export function Toolbar({ items, extraItems, className, disabled, ariaLabel = 'E
             borderColor: 'border.default',
             position: 'sticky',
             top: 0,
-            zIndex: 2,
+            zIndex: 1,
         }, children: _jsx(ToolbarRenderer, { items: allItems, disabled: disabled, size: "medium" }) }));
 }
 export default Toolbar;

package/lib/components/toolbar/ToolbarButton.js

@@ -38,7 +38,7 @@ export function ToolbarButton({ item, size = 'medium' }) {
         iconElement = _jsx("span", { style: { fontSize: 12, fontWeight: 600, lineHeight: 1 }, children: label });
     }
     const btnSize = size === 'small' ? 28 : 32;
-    return (_jsx("button", { type: "button", "aria-label": ariaLabel, title: title, onClick: onClick, disabled: disabled, style: {
+    return (_jsx("button", { type: "button", "aria-label": ariaLabel, title: title, onMouseDown: (e) => e.preventDefault(), onClick: onClick, disabled: disabled, style: {
             display: 'inline-flex',
             alignItems: 'center',
             justifyContent: 'center',

package/lib/components/toolbar/ToolbarDropdown.js

@@ -8,34 +8,85 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * Uses Primer React ActionMenu for accessible dropdown menus.
  *
+ * The trigger button highlights (accent colour) when any option is active,
+ * matching the behavior of regular ToolbarButton items.
+ *
+ * All option rows render a fixed-width LeadingVisual slot so that labels
+ * stay left-aligned regardless of whether the option has an icon.
+ *
  * @module components/toolbar/ToolbarDropdown
  */
-import { isValidElement } from 'react';
+import { isValidElement, useMemo } from 'react';
 import { ActionMenu, ActionList, Text } from '@primer/react';
 import { Box } from '../box/Box';
+/**
+ * Resolve an icon prop to a ReactNode.
+ *
+ * Octicon components use React.forwardRef which returns an *object*
+ * (typeof === 'object'), NOT a function.  We check isValidElement first
+ * (already-instantiated JSX), then treat anything else as a component type.
+ */
 function renderIcon(icon) {
     if (!icon)
         return null;
-    if (typeof icon === 'function') {
-        const IconComp = icon;
-        return _jsx(IconComp, { size: 16 });
-    }
     if (isValidElement(icon)) {
         return icon;
     }
-    return null;
+    // Component type: function component, forwardRef, or memo wrapper
+    const IconComp = icon;
+    return _jsx(IconComp, { size: 16 });
+}
+/** Whether any dropdown option in the list has an icon. */
+function hasAnyIcon(options) {
+    return options.some(o => !!o.icon);
 }
 export function ToolbarDropdown({ item, size = 'medium' }) {
-    const { ariaLabel, icon, label, options, disabled } = item;
-    return (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Button, { "aria-label": ariaLabel, disabled: disabled, variant: "invisible", size: size, sx: {
-                    color: 'fg.muted',
-                    fontWeight: 'normal',
-                    fontSize: size === 'small' ? 0 : 1,
-                    px: 2,
-                    '&:hover:not([disabled])': {
-                        bg: 'neutral.muted',
-                        color: 'fg.default',
-                    },
-                }, children: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [renderIcon(icon), label && (_jsx(Text, { sx: { fontSize: size === 'small' ? 0 : 1 }, children: label }))] }) }), _jsx(ActionMenu.Overlay, { width: "auto", children: _jsx(ActionList, { children: options.map(option => (_jsxs(ActionList.Item, { onSelect: option.onClick, disabled: option.disabled, active: option.isActive, children: [option.icon && (_jsx(ActionList.LeadingVisual, { children: renderIcon(option.icon) })), _jsxs(Box, { sx: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%', gap: 3 }, children: [_jsx(Text, { children: option.label }), option.shortcut && (_jsx(Text, { sx: { color: 'fg.subtle', fontSize: 0, fontFamily: 'mono' }, children: option.shortcut }))] })] }, option.key))) }) })] }));
+    const { ariaLabel, icon, label, minWidth, options, disabled } = item;
+    // Highlight the trigger when any option is active.
+    const anyActive = useMemo(() => options.some(o => o.isActive), [options]);
+    // If any option has an icon we reserve a leading-visual column for all rows.
+    const showLeadingVisual = useMemo(() => hasAnyIcon(options), [options]);
+    const btnSize = size === 'small' ? 28 : 32;
+    return (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsxs("button", { type: "button", "aria-label": ariaLabel, title: ariaLabel, disabled: disabled, style: {
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        gap: 4,
+                        minWidth: btnSize,
+                        height: btnSize,
+                        padding: label ? '0 8px' : 0,
+                        margin: 0,
+                        border: 'none',
+                        borderRadius: 6,
+                        cursor: disabled ? 'not-allowed' : 'pointer',
+                        background: anyActive
+                            ? 'var(--bgColor-accent-muted, rgba(9,105,218,0.1))'
+                            : 'transparent',
+                        color: anyActive
+                            ? 'var(--fgColor-accent, #0969da)'
+                            : 'var(--fgColor-muted, #656d76)',
+                        opacity: disabled ? 0.5 : 1,
+                        fontSize: size === 'small' ? 12 : 14,
+                        fontWeight: 'normal',
+                        fontFamily: 'inherit',
+                        lineHeight: 1,
+                    }, onMouseEnter: (e) => {
+                        if (!disabled) {
+                            e.currentTarget.style.background =
+                                'var(--bgColor-neutral-muted, rgba(175,184,193,0.2))';
+                            e.currentTarget.style.color = 'var(--fgColor-default, #1f2328)';
+                        }
+                    }, onMouseLeave: (e) => {
+                        e.currentTarget.style.background = anyActive
+                            ? 'var(--bgColor-accent-muted, rgba(9,105,218,0.1))'
+                            : 'transparent';
+                        e.currentTarget.style.color = anyActive
+                            ? 'var(--fgColor-accent, #0969da)'
+                            : 'var(--fgColor-muted, #656d76)';
+                    }, children: [renderIcon(icon), label && (_jsx("span", { style: {
+                                display: 'inline-block',
+                                minWidth: minWidth ? minWidth : undefined,
+                                textAlign: 'left',
+                            }, children: label }))] }) }), _jsx(ActionMenu.Overlay, { width: "auto", children: _jsx(ActionList, { children: options.map(option => (_jsxs(ActionList.Item, { onSelect: option.onClick, disabled: option.disabled, active: option.isActive, children: [showLeadingVisual && (_jsx(ActionList.LeadingVisual, { children: option.icon ? renderIcon(option.icon) : _jsx(Box, { sx: { width: 16 } }) })), _jsxs(Box, { sx: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%', gap: 3 }, children: [_jsx(Text, { children: option.label }), option.shortcut && (_jsx(Text, { sx: { color: 'fg.subtle', fontSize: 0, fontFamily: 'mono' }, children: option.shortcut }))] })] }, option.key))) }) })] }));
 }
 export default ToolbarDropdown;

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

@@ -73,6 +73,12 @@ export interface ToolbarDropdownItem extends ToolbarItemBase {
     icon?: React.ComponentType<IconProps> | ReactNode;
     /** Text label for the trigger */
     label?: string;
+    /**
+     * Fixed minimum width (in px) for the trigger's label area.
+     * Set this to the width of the longest possible label so the
+     * toolbar doesn't reflow when the selection changes.
+     */
+    minWidth?: number;
     /** Dropdown options */
     options: ToolbarDropdownOption[];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/primer-addons",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "license": "BSD-3-Clause",
   "scripts": {
     "build": "tsc && vite build",