@carto/ps-react-ui 4.17.1 → 4.17.3

package/dist/smart-tooltip-DFV6GD8R.js

@@ -0,0 +1,40 @@
+import { jsx as y } from "react/jsx-runtime";
+import { c as z } from "react/compiler-runtime";
+import { useRef as I, useState as N, useLayoutEffect as P } from "react";
+import { T as R } from "./tooltip-BDnrRKrp.js";
+const x = [];
+function j(E) {
+  const e = z(13), {
+    title: g,
+    dependencies: a,
+    timeout: h,
+    TooltipProps: c,
+    children: f
+  } = E, u = a === void 0 ? x : a, t = h === void 0 ? 500 : h, d = I(null), [S, b] = N(!1);
+  let s;
+  e[0] !== u ? (s = JSON.stringify(u), e[0] = u, e[1] = s) : s = e[1];
+  const m = s;
+  let n;
+  e[2] !== t ? (n = () => {
+    const O = () => {
+      const i = d.current;
+      i && b(i.scrollWidth > i.clientWidth || i.scrollHeight > i.clientHeight);
+    }, w = setTimeout(O, t), v = d.current, T = v && typeof ResizeObserver < "u" ? new ResizeObserver(O) : null;
+    return v && T?.observe(v), () => {
+      clearTimeout(w), T?.disconnect();
+    };
+  }, e[2] = t, e[3] = n) : n = e[3];
+  let r;
+  e[4] !== m || e[5] !== t ? (r = [m, t], e[4] = m, e[5] = t, e[6] = r) : r = e[6], P(n, r);
+  const p = S && g;
+  let o;
+  e[7] !== f ? (o = f({
+    ref: d
+  }), e[7] = f, e[8] = o) : o = e[8];
+  let l;
+  return e[9] !== c || e[10] !== p || e[11] !== o ? (l = /* @__PURE__ */ y(R, { title: p, ...c, children: o }), e[9] = c, e[10] = p, e[11] = o, e[12] = l) : l = e[12], l;
+}
+export {
+  j as S
+};
+//# sourceMappingURL=smart-tooltip-DFV6GD8R.js.map

package/dist/smart-tooltip-DFV6GD8R.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"smart-tooltip-DFV6GD8R.js","sources":["../src/components/smart-tooltip/smart-tooltip.tsx"],"sourcesContent":["import type { TooltipProps } from '@mui/material'\nimport { useLayoutEffect, useRef, useState, type JSX, type Ref } from 'react'\nimport { Tooltip } from '../tooltip/tooltip'\n\nconst EMPTY_DEPENDENCIES: unknown[] = []\n\n/**\n * An intelligent tooltip wrapper that automatically detects text overflow and displays a tooltip only when content is truncated.\n *\n * @remarks\n * Uses a render prop pattern. The child function receives a `ref` that must be attached to the element being monitored for overflow. Use the `dependencies` array to trigger re-evaluation when content or container size changes.\n *\n * @example\n * ```tsx\n * <SmartTooltip title=\"This is a long text that might get truncated\">\n *   {({ ref }) => (\n *     <Typography ref={ref} noWrap sx={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>\n *       This is a long text that might get truncated\n *     </Typography>\n *   )}\n * </SmartTooltip>\n * ```\n */\nexport function SmartTooltip<T extends HTMLElement>({\n  title,\n  dependencies = EMPTY_DEPENDENCIES,\n  timeout = 500,\n  TooltipProps,\n  children,\n}: {\n  title: string | undefined\n  dependencies?: unknown[]\n  timeout?: number\n  children: (props: { ref: Ref<T> }) => JSX.Element\n  TooltipProps?: Partial<TooltipProps>\n}) {\n  const ref = useRef<T>(null)\n  const [isOverflowing, setIsOverflowing] = useState(false)\n  // Call sites pass a fresh `dependencies={[…]}` literal each render; key by\n  // value so the effect does not churn ResizeObserver on referential churn.\n  const dependenciesKey = JSON.stringify(dependencies)\n\n  useLayoutEffect(() => {\n    const checkOverflow = () => {\n      const el = ref.current\n      if (!el) return\n      setIsOverflowing(\n        el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight,\n      )\n    }\n\n    // Initial measure after layout settles (fonts, flex collapse, …).\n    const timerId = setTimeout(checkOverflow, timeout)\n    // Re-measure when the element is resized (e.g. legend title reflows as\n    // hover-faded actions collapse/expand).\n    const el = ref.current\n    const resizeObserver =\n      el && typeof ResizeObserver !== 'undefined'\n        ? new ResizeObserver(checkOverflow)\n        : null\n    if (el) resizeObserver?.observe(el)\n\n    return () => {\n      clearTimeout(timerId)\n      resizeObserver?.disconnect()\n    }\n  }, [dependenciesKey, timeout])\n\n  return (\n    <Tooltip title={isOverflowing && title} {...TooltipProps}>\n      {children({ ref })}\n    </Tooltip>\n  )\n}\n"],"names":["EMPTY_DEPENDENCIES","SmartTooltip","t0","$","_c","title","dependencies","t1","timeout","t2","TooltipProps","children","undefined","ref","useRef","isOverflowing","setIsOverflowing","useState","t3","JSON","stringify","dependenciesKey","t4","checkOverflow","el","current","scrollWidth","clientWidth","scrollHeight","clientHeight","timerId","setTimeout","el_0","resizeObserver","ResizeObserver","observe","clearTimeout","disconnect","t5","useLayoutEffect","t6","t7","t8","Tooltip"],"mappings":";;;;AAIA,MAAMA,IAAgC,CAAA;AAmB/B,SAAAC,EAAAC,GAAA;AAAA,QAAAC,IAAAC,EAAA,EAAA,GAA6C;AAAA,IAAAC,OAAAA;AAAAA,IAAAC,cAAAC;AAAAA,IAAAC,SAAAC;AAAAA,IAAAC,cAAAA;AAAAA,IAAAC,UAAAA;AAAAA,EAAAA,IAAAT,GAElDI,IAAAC,MAAAK,SAAAZ,IAAAO,GACAC,IAAAC,MAAAG,SAAA,MAAAH,GAUAI,IAAYC,EAAU,IAAI,GAC1B,CAAAC,GAAAC,CAAA,IAA0CC,EAAS,EAAK;AAAC,MAAAC;AAAA,EAAAf,SAAAG,KAGjCY,IAAAC,KAAIC,UAAWd,CAAY,GAACH,OAAAG,GAAAH,OAAAe,KAAAA,IAAAf,EAAA,CAAA;AAApD,QAAAkB,IAAwBH;AAA4B,MAAAI;AAAA,EAAAnB,SAAAK,KAEpCc,IAAAA,MAAA;AACd,UAAAC,IAAsBA,MAAA;AACpB,YAAAC,IAAWX,EAAGY;AACd,MAAKD,KACLR,EACEQ,EAAEE,cAAeF,EAAEG,eAAgBH,EAAEI,eAAgBJ,EAAEK,YACzD;AAAA,IAAC,GAIHC,IAAgBC,WAAWR,GAAef,CAAO,GAGjDwB,IAAWnB,EAAGY,SACdQ,IACED,KAAM,OAAOE,iBAAmB,MAAhC,IACQA,eAAeX,CAChB,IAFP;AAGF,WAAIC,KAAIS,GAAcE,QAAUX,CAAE,GAE3B,MAAA;AACLY,mBAAaN,CAAO,GACpBG,GAAcI,WAAAA;AAAAA,IAAc;AAAA,EAC7B,GACFlC,OAAAK,GAAAL,OAAAmB,KAAAA,IAAAnB,EAAA,CAAA;AAAA,MAAAmC;AAAA,EAAAnC,EAAA,CAAA,MAAAkB,KAAAlB,SAAAK,KAAE8B,IAAA,CAACjB,GAAiBb,CAAO,GAACL,OAAAkB,GAAAlB,OAAAK,GAAAL,OAAAmC,KAAAA,IAAAnC,EAAA,CAAA,GAxB7BoC,EAAgBjB,GAwBbgB,CAA0B;AAGX,QAAAE,IAAAzB,KAAAV;AAAsB,MAAAoC;AAAA,EAAAtC,SAAAQ,KACnC8B,IAAA9B,EAAS;AAAA,IAAAE,KAAAA;AAAAA,EAAAA,CAAO,GAACV,OAAAQ,GAAAR,OAAAsC,KAAAA,IAAAtC,EAAA,CAAA;AAAA,MAAAuC;AAAA,SAAAvC,EAAA,CAAA,MAAAO,KAAAP,UAAAqC,KAAArC,EAAA,EAAA,MAAAsC,KADpBC,sBAACC,GAAA,EAAe,OAAAH,GAAsB,GAAM9B,GACzC+B,UAAAA,GACH,GAAUtC,OAAAO,GAAAP,QAAAqC,GAAArC,QAAAsC,GAAAtC,QAAAuC,KAAAA,IAAAvC,EAAA,EAAA,GAFVuC;AAEU;"}

package/dist/types/legend/components/legend-actions/legend-actions.d.ts

@@ -7,8 +7,8 @@ export interface LegendActionsProps {
  * parity): the wrapper partitions its children by component identity and
  * renders this slot inside the header, wrapped in the hover-fade group
  * (`PsLegend-rowFade` in rows, `PsLegend-groupFade` in group headers —
- * resolved from the nearest context). Compose the ⋮ menu last so it sits
- * rightmost, per design.
+ * resolved from the nearest context). Compose the visibility toggle last so
+ * it sits rightmost, per design.
  *
  * @experimental This API is new and may change in a future release.
  */

package/dist/types/legend/components/legend-group/styles.d.ts

@@ -13,6 +13,22 @@ export declare const styles: {
             borderTop: string;
             borderColor: "divider";
         };
+    };
+    groupDragging: {
+        opacity: number;
+    };
+    header: {
+        display: "flex";
+        alignItems: "center";
+        gap: number;
+        padding: ({ spacing }: Theme) => string;
+        minHeight: number;
+        borderBottom: string;
+        borderColor: "divider";
+        position: "sticky";
+        top: number;
+        zIndex: number;
+        backgroundColor: "background.default";
         '& .PsLegend-groupFade > *': {
             opacity: number;
             transition: ({ transitions }: Theme) => string;
@@ -23,8 +39,36 @@ export declare const styles: {
                 opacity: number;
             };
         };
+        '@media (hover: hover)': {
+            '& .PsLegend-groupFade > *:not(.active)': {
+                width: number;
+                minWidth: number;
+                padding: number;
+                overflow: "hidden";
+                pointerEvents: "none";
+            };
+            '& .PsLegend-groupActions:not(:has(.active))': {
+                width: number;
+                minWidth: number;
+                overflow: "hidden";
+                marginInlineStart: ({ spacing }: Theme) => string;
+                pointerEvents: "none";
+            };
+        };
         '&:hover .PsLegend-groupFade > *, &:focus-within .PsLegend-groupFade > *': {
             opacity: number;
+            width: string;
+            minWidth: number;
+            padding: string;
+            overflow: "visible";
+            pointerEvents: "auto";
+        };
+        '&:hover .PsLegend-groupActions, &:focus-within .PsLegend-groupActions': {
+            width: string;
+            minWidth: number;
+            overflow: "visible";
+            marginInlineStart: number;
+            pointerEvents: "auto";
         };
         '& .PsLegend-dragHandle-group > *': {
             opacity: number;
@@ -37,22 +81,6 @@ export declare const styles: {
             opacity: number;
         };
     };
-    groupDragging: {
-        opacity: number;
-    };
-    header: {
-        display: "flex";
-        alignItems: "center";
-        gap: number;
-        padding: ({ spacing }: Theme) => string;
-        minHeight: number;
-        borderBottom: string;
-        borderColor: "divider";
-        position: "sticky";
-        top: number;
-        zIndex: number;
-        backgroundColor: "background.default";
-    };
     titleArea: {
         flex: number;
         minWidth: number;

package/dist/types/legend/components/legend-row/styles.d.ts

@@ -18,8 +18,36 @@ export declare const styles: {
                 opacity: number;
             };
         };
+        '@media (hover: hover)': {
+            '& .PsLegend-rowFade > *:not(.active)': {
+                width: number;
+                minWidth: number;
+                padding: number;
+                overflow: "hidden";
+                pointerEvents: "none";
+            };
+            '& .PsLegend-rowActions:not(:has(.active))': {
+                width: number;
+                minWidth: number;
+                overflow: "hidden";
+                marginInlineStart: ({ spacing }: Theme) => string;
+                pointerEvents: "none";
+            };
+        };
         '&:hover .PsLegend-rowFade > *, &:focus-within .PsLegend-rowFade > *': {
             opacity: number;
+            width: string;
+            minWidth: number;
+            padding: string;
+            overflow: "visible";
+            pointerEvents: "auto";
+        };
+        '&:hover .PsLegend-rowActions, &:focus-within .PsLegend-rowActions': {
+            width: string;
+            minWidth: number;
+            overflow: "visible";
+            marginInlineStart: number;
+            pointerEvents: "auto";
         };
         '&:hover .PsLegend-value, &:focus-within .PsLegend-value': {
             opacity: number;
@@ -48,6 +76,9 @@ export declare const styles: {
         zIndex: number;
         backgroundColor: "background.paper";
     };
+    headerGrouped: {
+        paddingLeft: number;
+    };
     titleBox: {
         flex: number;
         minWidth: number;
@@ -103,9 +134,15 @@ export declare const styles: {
         gap: number;
         padding: ({ spacing }: Theme) => string;
     };
+    contentGrouped: {
+        paddingLeft: number;
+    };
     footer: {
         padding: ({ spacing }: Theme) => string;
     };
+    footerGrouped: {
+        paddingLeft: number;
+    };
     dimmed: {
         opacity: number;
     };

package/dist/types/legend/components/legend-sortable/styles.d.ts

@@ -6,13 +6,14 @@ export declare const styles: {
         display: "flex";
         alignItems: "center";
         justifyContent: "center";
-        height: number;
+        left: number;
+        top: number;
     };
     handleSlotLayer: {
-        right: number;
+        height: number;
     };
     handleSlotGroup: {
-        right: number;
+        height: number;
     };
     handle: {
         padding: string;

package/dist/widgets/wrapper.js

@@ -5,7 +5,7 @@ import { MoreVert as D } from "@mui/icons-material";
 import { useState as H, useLayoutEffect as G } from "react";
 import "../lasso-tool-YLFRgb-S.js";
 import "../cjs-D4KH3azB.js";
-import { S as U } from "../smart-tooltip-D4vwQpFf.js";
+import { S as U } from "../smart-tooltip-DFV6GD8R.js";
 import "@carto/ps-utils";
 import { u as V } from "../use-widget-selector-DFl2hW0R.js";
 import { w as M } from "../widget-store-Bw5zRUGg.js";

package/dist/widgets-v2.js

@@ -6,7 +6,7 @@ import { j as we, i as Ee, e as Ce, n as Te, r as ke, q as _e, v as Ie, u as Le,
 import "zustand";
 import { Box as W, LinearProgress as We, Typography as Z, AccordionSummary as $e, AccordionDetails as De, Accordion as Fe, AlertTitle as Be, Alert as Oe, Button as Re, IconButton as Me, Divider as Pe, Popper as Ue, Grow as Ne, Paper as je, Link as pe } from "@mui/material";
 import { ExpandMore as ze, Close as He } from "@mui/icons-material";
-import { S as Ve } from "./smart-tooltip-D4vwQpFf.js";
+import { S as Ve } from "./smart-tooltip-DFV6GD8R.js";
 import { createPortal as Ge } from "react-dom";
 import { WidgetOptions as qe } from "@carto/meridian-ds/custom-icons";
 import "./lasso-tool-YLFRgb-S.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/ps-react-ui",
-  "version": "4.17.1",
+  "version": "4.17.3",
   "description": "CARTO's Professional Service React Material library",
   "type": "module",
   "devDependencies": {
@@ -17,8 +17,8 @@
     "react-dom": "19.2.4",
     "react-markdown": "10.1.0",
     "zustand": "5.0.12",
-    "@carto/ps-utils": "2.1.0",
-    "@carto/ps-common-types": "1.0.0"
+    "@carto/ps-common-types": "1.0.0",
+    "@carto/ps-utils": "2.1.0"
   },
   "peerDependencies": {
     "@carto/meridian-ds": "^2.0.0",

package/src/components/smart-tooltip/smart-tooltip.tsx

@@ -36,20 +36,35 @@ export function SmartTooltip<T extends HTMLElement>({
 }) {
   const ref = useRef<T>(null)
   const [isOverflowing, setIsOverflowing] = useState(false)
+  // Call sites pass a fresh `dependencies={[…]}` literal each render; key by
+  // value so the effect does not churn ResizeObserver on referential churn.
+  const dependenciesKey = JSON.stringify(dependencies)
 
   useLayoutEffect(() => {
-    const timerId = setTimeout(() => {
-      if (ref.current) {
-        const isOverflowing =
-          ref.current.scrollWidth > ref.current.clientWidth ||
-          ref.current.scrollHeight > ref.current.clientHeight
+    const checkOverflow = () => {
+      const el = ref.current
+      if (!el) return
+      setIsOverflowing(
+        el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight,
+      )
+    }
 
-        setIsOverflowing(isOverflowing)
-      }
-    }, timeout)
+    // Initial measure after layout settles (fonts, flex collapse, …).
+    const timerId = setTimeout(checkOverflow, timeout)
+    // Re-measure when the element is resized (e.g. legend title reflows as
+    // hover-faded actions collapse/expand).
+    const el = ref.current
+    const resizeObserver =
+      el && typeof ResizeObserver !== 'undefined'
+        ? new ResizeObserver(checkOverflow)
+        : null
+    if (el) resizeObserver?.observe(el)
 
-    return () => clearTimeout(timerId)
-  }, [dependencies, timeout])
+    return () => {
+      clearTimeout(timerId)
+      resizeObserver?.disconnect()
+    }
+  }, [dependenciesKey, timeout])
 
   return (
     <Tooltip title={isOverflowing && title} {...TooltipProps}>

package/src/legend/components/legend-actions/legend-actions.tsx

@@ -17,8 +17,8 @@ export interface LegendActionsProps {
  * parity): the wrapper partitions its children by component identity and
  * renders this slot inside the header, wrapped in the hover-fade group
  * (`PsLegend-rowFade` in rows, `PsLegend-groupFade` in group headers —
- * resolved from the nearest context). Compose the ⋮ menu last so it sits
- * rightmost, per design.
+ * resolved from the nearest context). Compose the visibility toggle last so
+ * it sits rightmost, per design.
  *
  * @experimental This API is new and may change in a future release.
  */

package/src/legend/components/legend-group/legend-group.tsx

@@ -97,7 +97,9 @@ export function LegendGroup({ groupId, children }: LegendGroupProps) {
             />
           </Box>
 
-          <Box sx={styles.actions}>{actions}</Box>
+          <Box className='PsLegend-groupActions' sx={styles.actions}>
+            {actions}
+          </Box>
         </Box>
 
         <Collapse in={!group.collapsed}>

package/src/legend/components/legend-group/styles.ts

@@ -15,16 +15,46 @@ export const styles = {
       borderTop: '1px solid',
       borderColor: 'divider',
     },
-    // Hover-fade group actions (widgets-v2 Wrapper parity). Revealed by
-    // hovering anywhere in the group block (including member rows); a control
-    // carrying `.active` (hidden group) stays visible. Touch devices always
-    // show them. The collapse chevron sits outside the fade group. Member
-    // rows use the distinct `PsLegend-rowFade` class, so group hover never
-    // lights up row actions.
+  },
+  // The original stays in place, dimmed, while its overlay clone is dragged.
+  groupDragging: {
+    opacity: 0.4,
+  },
+  // Figma: 48px tall, 16px left inset (matches the row's own left inset),
+  // 8px gap to the label, actions right-aligned with ~8px edge inset (the
+  // small icon-button padding brings the glyphs to the design's 16px optical
+  // inset), hairline divider below. Sticky: pins to the top of the panel's
+  // scroll container.
+  header: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 1,
+    padding: ({ spacing }) => spacing(1.5, 2, 1.5, 2),
+    minHeight: LEGEND_GROUP_HEADER_HEIGHT,
+    borderBottom: '1px solid',
+    borderColor: 'divider',
+    position: 'sticky',
+    top: 0,
+    // Above the sticky row headers (2), which in turn sit above MUI's
+    // z-index-1 form internals in row content.
+    zIndex: 3,
+    // Distinct from the row header / panel body (both `background.paper`) so
+    // the group header visually separates from the rest.
+    backgroundColor: 'background.default',
+    // Hover-fade group actions (widgets-v2 Wrapper parity). Scoped to the
+    // header itself (not the group root) so hovering a member row's body
+    // below never lights up the group's own actions/handle — only hovering
+    // the header (title/handle/actions) does. A control carrying `.active`
+    // (hidden group) stays visible. Touch devices always show them. The
+    // collapse chevron sits outside the fade group. Each non-active child
+    // also collapses to zero width on its own (not just the whole actions
+    // slot) so a sibling's `.active` pin (e.g. the eye on a mixed-visibility
+    // group) doesn't leave a same-sized invisible hole where the still-faded
+    // ⋮ menu would've been.
     '& .PsLegend-groupFade > *': {
       opacity: 1,
       transition: ({ transitions }: Theme) =>
-        transitions.create('opacity', {
+        transitions.create(['opacity', 'width'], {
           duration: transitions.duration.standard,
           easing: transitions.easing.easeInOut,
         }),
@@ -35,8 +65,44 @@ export const styles = {
         opacity: 1,
       },
     },
+    // Faded actions don't reserve flex space on fine-pointer devices — the
+    // label grows to the trailing edge. Hover/focus-within restores the slot
+    // so the label reflows with the buttons; a dirty `.active` child keeps
+    // the slot open even outside hover.
+    '@media (hover: hover)': {
+      '& .PsLegend-groupFade > *:not(.active)': {
+        width: 0,
+        minWidth: 0,
+        // border-box IconButtons keep their padding inside `width` — zero it
+        // too, otherwise the fixed 2px+2px padding survives as a tiny but
+        // needless residual gap.
+        padding: 0,
+        overflow: 'hidden',
+        pointerEvents: 'none',
+      },
+      '& .PsLegend-groupActions:not(:has(.active))': {
+        width: 0,
+        minWidth: 0,
+        overflow: 'hidden',
+        // Cancel the header gap so nothing is left behind the label.
+        marginInlineStart: ({ spacing }: Theme) => `calc(-1 * ${spacing(1)})`,
+        pointerEvents: 'none',
+      },
+    },
     '&:hover .PsLegend-groupFade > *, &:focus-within .PsLegend-groupFade > *': {
       opacity: 1,
+      width: 'auto',
+      minWidth: 0,
+      padding: '2px',
+      overflow: 'visible',
+      pointerEvents: 'auto',
+    },
+    '&:hover .PsLegend-groupActions, &:focus-within .PsLegend-groupActions': {
+      width: 'auto',
+      minWidth: 0,
+      overflow: 'visible',
+      marginInlineStart: 0,
+      pointerEvents: 'auto',
     },
     // Drag handle (Legend.Sortable): absolutely positioned (no reserved flex
     // slot, so it never shifts the title/icon); the button inside fades in
@@ -57,31 +123,6 @@ export const styles = {
         opacity: 1,
       },
   },
-  // The original stays in place, dimmed, while its overlay clone is dragged.
-  groupDragging: {
-    opacity: 0.4,
-  },
-  // Figma: 48px tall, icon at 12px from the left, 8px gap to the label,
-  // actions right-aligned with ~8px edge inset (the small icon-button padding
-  // brings the glyphs to the design's 16px optical inset), hairline divider
-  // below. Sticky: pins to the top of the panel's scroll container.
-  header: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: 1,
-    padding: ({ spacing }) => spacing(1.5, 2, 1.5, 1),
-    minHeight: LEGEND_GROUP_HEADER_HEIGHT,
-    borderBottom: '1px solid',
-    borderColor: 'divider',
-    position: 'sticky',
-    top: 0,
-    // Above the sticky row headers (2), which in turn sit above MUI's
-    // z-index-1 form internals in row content.
-    zIndex: 3,
-    // Distinct from the row header / panel body (both `background.paper`) so
-    // the group header visually separates from the rest.
-    backgroundColor: 'background.default',
-  },
   // Accordion click target: everything in the header but the actions box.
   // Non-native button (role='button'), so it carries its own focus ring.
   titleArea: {
@@ -102,6 +143,10 @@ export const styles = {
     display: 'flex',
     color: 'text.secondary',
   },
+  // No `flex:1` here — the label sizes to its own text (shrinking to
+  // ellipsis when too long) so the chevron sits right after it, instead of
+  // being dragged to the trailing edge of `titleArea` (which keeps its own
+  // `flex:1` to fill the header up to the actions).
   label: {
     minWidth: 0,
     overflow: 'hidden',

package/src/legend/components/legend-row/legend-row.tsx

@@ -74,7 +74,10 @@ export function LegendRow({ layerId, children }: LegendRowProps) {
           sortableProps?.dragging === true && styles.rowDragging,
         ]}
       >
-        <Box sx={styles.header} style={{ top: stickyTop }}>
+        <Box
+          sx={[styles.header, inGroup && styles.headerGrouped]}
+          style={{ top: stickyTop }}
+        >
           {sortableProps?.handle}
           <Box
             sx={[styles.titleBox, canToggle && styles.titleBoxInteractive]}
@@ -115,21 +118,23 @@ export function LegendRow({ layerId, children }: LegendRowProps) {
             )}
           </Box>
 
-          <Box sx={styles.actions}>{actions}</Box>
+          <Box className='PsLegend-rowActions' sx={styles.actions}>
+            {actions}
+          </Box>
         </Box>
 
         <Collapse in={!effectivelyCollapsed}>
           <Box
-            sx={
-              layer.visible
-                ? styles.content
-                : { ...styles.content, ...styles.dimmed }
-            }
+            sx={[
+              styles.content,
+              inGroup && styles.contentGrouped,
+              !layer.visible && styles.dimmed,
+            ]}
           >
             {body}
           </Box>
           {layer.helperText && (
-            <Box sx={styles.footer}>
+            <Box sx={[styles.footer, inGroup && styles.footerGrouped]}>
               {typeof layer.helperText === 'string' ? (
                 <Typography variant='caption' color='text.secondary'>
                   {layer.helperText}

package/src/legend/components/legend-row/styles.ts

@@ -16,12 +16,16 @@ export const styles = {
     // `.PsLegend-rowFade` are hidden on fine-pointer devices and fade in when
     // the row is hovered or holds focus; a control carrying `.active` (dirty
     // state — hidden layer, open menu, opacity ≠ 1) stays visible. Coarse-
-    // pointer (touch) devices always show them. The collapse chevron sits
-    // outside the fade group and never fades.
+    // pointer (touch) devices always show them. Each non-active child also
+    // collapses to zero width on its own (not just the whole actions slot —
+    // see `PsLegend-rowActions` below) so a sibling's `.active` pin (e.g. the
+    // eye while hidden) doesn't leave a same-sized invisible hole where the
+    // still-faded ⋮ menu would've been; the title grows into that space. The
+    // collapse chevron sits outside the fade group and never fades.
     '& .PsLegend-rowFade > *': {
       opacity: 1,
       transition: ({ transitions }: Theme) =>
-        transitions.create('opacity', {
+        transitions.create(['opacity', 'width'], {
           duration: transitions.duration.standard,
           easing: transitions.easing.easeInOut,
         }),
@@ -32,8 +36,44 @@ export const styles = {
         opacity: 1,
       },
     },
+    // Faded actions don't reserve flex space on fine-pointer devices — the
+    // title grows to the trailing edge. Hover/focus-within restores the slot
+    // so the title reflows with the buttons; a dirty `.active` child keeps
+    // the slot open even outside hover.
+    '@media (hover: hover)': {
+      '& .PsLegend-rowFade > *:not(.active)': {
+        width: 0,
+        minWidth: 0,
+        // border-box IconButtons keep their padding inside `width` — zero it
+        // too, otherwise the fixed 2px+2px padding survives as a tiny but
+        // needless residual gap.
+        padding: 0,
+        overflow: 'hidden',
+        pointerEvents: 'none',
+      },
+      '& .PsLegend-rowActions:not(:has(.active))': {
+        width: 0,
+        minWidth: 0,
+        overflow: 'hidden',
+        // Cancel the header gap so nothing is left behind the title.
+        marginInlineStart: ({ spacing }: Theme) => `calc(-1 * ${spacing(0.5)})`,
+        pointerEvents: 'none',
+      },
+    },
     '&:hover .PsLegend-rowFade > *, &:focus-within .PsLegend-rowFade > *': {
       opacity: 1,
+      width: 'auto',
+      minWidth: 0,
+      padding: '2px',
+      overflow: 'visible',
+      pointerEvents: 'auto',
+    },
+    '&:hover .PsLegend-rowActions, &:focus-within .PsLegend-rowActions': {
+      width: 'auto',
+      minWidth: 0,
+      overflow: 'visible',
+      marginInlineStart: 0,
+      pointerEvents: 'auto',
     },
     // Hovering anywhere in the row also reveals the category/icon values
     // (the renderers keep their own list-scoped rule for standalone usage).
@@ -68,7 +108,9 @@ export const styles = {
   // band (subtitle flows below them) — hence `flex-start` with the title
   // optically centered against the 30px icon-button row. Sticky: pins inside
   // the panel's scroll container; `top` is applied inline per row (0, or the
-  // group-header height for grouped rows).
+  // group-header height for grouped rows). Grouped rows get an extra 20px
+  // left inset (36px total) so member layers read as nested under the group
+  // and line up with the group's own icon+label text start.
   header: {
     display: 'flex',
     alignItems: 'flex-start',
@@ -81,6 +123,9 @@ export const styles = {
     zIndex: 2,
     backgroundColor: 'background.paper',
   },
+  headerGrouped: {
+    paddingLeft: 4.5,
+  },
   titleBox: {
     flex: 1,
     minWidth: 0,
@@ -107,6 +152,10 @@ export const styles = {
     alignItems: 'center',
     gap: 0.5,
   },
+  // No `flex:1` here — the title sizes to its own text (shrinking to
+  // ellipsis when too long) so the chevron sits right after it, instead of
+  // being dragged to the trailing edge of `titleLine` (which spans the full
+  // width of `titleBox`, itself `flex:1` to fill the header up to actions).
   title: {
     minWidth: 0,
     overflow: 'hidden',
@@ -154,10 +203,16 @@ export const styles = {
     gap: 1,
     padding: ({ spacing }) => spacing(0.5, 2, 1, 2),
   },
+  contentGrouped: {
+    paddingLeft: 4.5,
+  },
   // ~16px above the note (content's 8px bottom inset + 8px here), per design.
   footer: {
     padding: ({ spacing }) => spacing(1, 2, 1, 2),
   },
+  footerGrouped: {
+    paddingLeft: 4.5,
+  },
   dimmed: {
     opacity: 0.5,
   },