@carto/ps-react-ui 5.0.0-widgets.9 → 5.1.0

package/dist/types/components/measurement-tools/styles.d.ts

@@ -1,5 +1,4 @@
 import { Theme } from '@mui/material';
-import { CSSProperties } from 'react';
 export declare const styles: {
     container: {
         display: "flex";
@@ -8,6 +7,7 @@ export declare const styles: {
         justifyContent: "flex-start";
         gap: ({ spacing }: Theme) => string;
         overflow: "hidden";
+        width: string;
     };
     actions: {
         icon: {
@@ -48,12 +48,22 @@ export declare const styles: {
                 padding: ({ spacing }: Theme) => string;
                 marginTop: ({ spacing }: Theme) => string;
                 marginBottom: ({ spacing }: Theme) => string;
-                '.MuiToggleButtonGroup-grouped': ({ typography }: Theme) => CSSProperties;
+                '.MuiToggleButtonGroup-grouped': {
+                    typography: string;
+                    fontWeight: number;
+                    margin: number;
+                    '&:first-of-type:not(.MuiDivider-root)': {
+                        marginLeft: number;
+                    };
+                };
+            };
+            subtitle: {
+                typography: string;
+                color: ({ palette }: Theme) => string;
             };
-            subtitle: ({ typography, palette }: Theme) => CSSProperties;
             optionsGroup: {
                 marginLeft: ({ spacing }: Theme) => string;
-                '.MuiTypography-root': ({ typography }: Theme) => CSSProperties;
+                typography: string;
             };
             title: {
                 display: "flex";

package/dist/types/components/measurement-tools/types.d.ts

@@ -1,6 +1,6 @@
 import { Paper, TooltipProps } from '@mui/material';
 import { ComponentProps } from 'react';
-import { MeasurementMode, MeasurementModes, MeasurementOptionsMode, MeasurementOptionsUnit, MeasurementUnit, MeasurementUnitImperialDistance, MeasurementUnitMetricDistance, MeasurementUnits, MeasurementModesMapping, MeasurementUnitsMapping } from '../types';
+import { MeasurementMode, MeasurementModes, MeasurementOptionsMode, MeasurementOptionsUnit, MeasurementUnit, MeasurementUnitImperialDistance, MeasurementUnitMetricDistance, MeasurementUnits, MeasurementModesMapping, MeasurementUnitsMapping } from '../types.js';
 interface Labels {
     action?: {
         tooltip?: {

package/dist/types/components/no-data-alert/no-data-alert.d.ts

@@ -4,5 +4,5 @@ interface NoDataAlertProps {
     body?: string;
     severity?: AlertProps['severity'];
 }
-export declare function NoDataAlert({ title, body, severity, }: NoDataAlertProps): import("react/jsx-runtime").JSX.Element;
+export declare function NoDataAlert({ title, body, severity, }: NoDataAlertProps): import('react').JSX.Element;
 export {};

package/dist/types/components/responsive-drawer/responsive-drawer.d.ts

@@ -1,12 +1,44 @@
-import { PopoverProps } from '@mui/material';
+import { PopoverOrigin, PopoverProps } from '@mui/material';
 import { ReactNode } from 'react';
+type ResponsiveDrawerPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+/** Placement of the panel relative to its anchor (desktop popover only). */
+export type ResponsiveDrawerPlacement = 'side' | 'overlay';
+/**
+ * Popover anchor/transform origins. `'overlay'` pins corner-to-corner on the anchor.
+ */
+export declare function resolveOrigins(position: ResponsiveDrawerPosition, placement: ResponsiveDrawerPlacement): {
+    anchorOrigin: PopoverOrigin;
+    transformOrigin: PopoverOrigin;
+};
 export declare function ResponsiveDrawer<T extends {
     collapsed: boolean;
     onChangeCollapsed: (collapsed: boolean) => void;
-    position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    position: ResponsiveDrawerPosition;
     slotProps?: PopoverProps['slotProps'];
-}>({ ref, children, collapsed, isMobile, position, sx, slotProps, onChangeCollapsed, }: Required<Pick<T, 'collapsed' | 'onChangeCollapsed' | 'position'>> & Pick<PopoverProps, 'slotProps' | 'sx'> & {
-    ref: HTMLElement | null;
-    isMobile: boolean;
+}>({ anchorEl, ref, children, collapsed, isMobile, position, sx, slotProps, container, onChangeCollapsed, modal, placement, }: Required<Pick<T, 'collapsed' | 'onChangeCollapsed' | 'position'>> & Pick<PopoverProps, 'slotProps' | 'sx' | 'container'> & {
+    /** Element the desktop popover is anchored to. */
+    anchorEl?: HTMLElement | null;
+    /**
+     * @deprecated Use `anchorEl`. A JSX prop named `ref` is non-reactive under
+     * the React Compiler, so a state-held anchor stays frozen at its initial
+     * `null` and the popover never opens. Removed in the next major.
+     */
+    ref?: HTMLElement | null;
+    isMobile?: boolean;
     children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+    /**
+     * When `false`, the desktop popover is **non-modal**: no backdrop, clicks
+     * pass through to the content behind it (e.g. a map stays interactive), no
+     * focus trap, and neither backdrop-click nor Escape closes it (close it via
+     * `onChangeCollapsed`). Defaults to `true` (standard dismissable popover).
+     * Desktop-only — the mobile drawer is unaffected.
+     */
+    modal?: boolean;
+    /**
+     * Desktop popover placement relative to the anchor: `'side'` (default) opens
+     * beside the trigger; `'overlay'` pins corner-to-corner, sitting on top of
+     * the anchor (e.g. a trigger hidden while the panel is open). Desktop-only.
+     */
+    placement?: ResponsiveDrawerPlacement;
+}): import('react').JSX.Element;
+export {};

package/dist/types/components/smart-tooltip/smart-tooltip.d.ts

@@ -1,5 +1,22 @@
 import { TooltipProps } from '@mui/material';
 import { JSX, Ref } from 'react';
+/**
+ * An intelligent tooltip wrapper that automatically detects text overflow and displays a tooltip only when content is truncated.
+ *
+ * @remarks
+ * 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.
+ *
+ * @example
+ * ```tsx
+ * <SmartTooltip title="This is a long text that might get truncated">
+ *   {({ ref }) => (
+ *     <Typography ref={ref} noWrap sx={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>
+ *       This is a long text that might get truncated
+ *     </Typography>
+ *   )}
+ * </SmartTooltip>
+ * ```
+ */
 export declare function SmartTooltip<T extends HTMLElement>({ title, dependencies, timeout, TooltipProps, children, }: {
     title: string | undefined;
     dependencies?: unknown[];
@@ -8,4 +25,4 @@ export declare function SmartTooltip<T extends HTMLElement>({ title, dependencie
         ref: Ref<T>;
     }) => JSX.Element;
     TooltipProps?: Partial<TooltipProps>;
-}): import("react/jsx-runtime").JSX.Element;
+}): JSX.Element;

package/dist/types/components/tooltip/tooltip.d.ts

@@ -9,5 +9,18 @@ import { TooltipProps } from '@mui/material';
  *   <Button>Hover me</Button>
  * </Tooltip>
  */
-export declare function Tooltip({ children, title, enterNextDelay, ...props }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+export declare function Tooltip({ children, title, enterNextDelay, ...props }: TooltipProps): import('react').JSX.Element;
+/**
+ * Sets the global default `enterNextDelay` for all Tooltip components in the application.
+ *
+ * @param delay - Delay in milliseconds before showing tooltips on subsequent hovers.
+ *
+ * @example
+ * ```tsx
+ * import { setTooltipEnterDelay } from '@carto/ps-react-ui/components';
+ *
+ * // Set global delay to 300ms at app initialization
+ * setTooltipEnterDelay(300);
+ * ```
+ */
 export declare function setTooltipEnterDelay(delay: number): void;

package/dist/types/components/types.d.ts

@@ -1 +1 @@
-export * from '../../types/common';
+export * from './common-types.js';

package/dist/types/components/zoom-controls/zoom-controls.d.ts

@@ -1,3 +1,19 @@
-import { ZoomControlProps } from './types';
+import { ZoomControlProps } from './types.js';
 import { JSX } from 'react';
+/**
+ * Provides intuitive zoom controls for maps and zoomable interfaces with flexible layouts, loading states, and optional reset functionality.
+ *
+ * @remarks
+ * This is an uncontrolled component. Typically used with the `ZoomControls` HOC from `@carto/ps-react-maps` for automatic state management.
+ *
+ * @example
+ * ```tsx
+ * <ZoomControlsUI
+ *   zoom={zoom}
+ *   onChange={setZoom}
+ *   minZoom={2}
+ *   maxZoom={20}
+ * />
+ * ```
+ */
 export declare function ZoomControlsUI({ zoom, disabled, direction, reverse, isLoading, maxZoom, minZoom, PaperProps, ResetViewProps, showZoom, onChange, onReset, }: ZoomControlProps): JSX.Element;

package/dist/types/hooks/index.d.ts

@@ -1,2 +1 @@
-export { useDebounce } from './use-debounce';
-export { useWidgetRef } from './use-widget-ref';
+export { useWidgetRef } from './use-widget-ref.js';

package/dist/types/hooks/use-widget-ref.d.ts

@@ -1,17 +1,21 @@
+import type * as echarts from 'echarts';
 /**
- * Custom hook for registering a DOM element ref with the widget store.
- * This allows other parts of the application to access the widget's DOM element.
+ * Registers a DOM element ref and an ECharts instance ref with the widget store.
+ * This allows other parts of the application (e.g., screenshot export) to access the widget's DOM element.
  *
- * @param widgetId - The widget ID to register the ref under
- * @returns A ref object to attach to the DOM element
+ * @param widgetId - The widget ID to register the refs under.
+ * @returns An object with `ref` (DOM element) and `instance` (ECharts instance) refs.
  *
  * @example
  * ```tsx
  * function MyWidget({ id }: { id: string }) {
- *   const ref = useWidgetRef<HTMLDivElement>(id)
+ *   const { ref } = useWidgetRef<HTMLDivElement>(id)
  *
  *   return <div ref={ref}>Widget content</div>
  * }
  * ```
  */
-export declare function useWidgetRef<T extends HTMLElement = HTMLElement>(widgetId: string): import('react').RefObject<T | null>;
+export declare function useWidgetRef<T extends HTMLElement = HTMLElement>(widgetId: string): {
+    ref: import('react').RefObject<T | null>;
+    instance: import('react').RefObject<echarts.ECharts | null>;
+};

package/dist/types/legend/components/a11y.d.ts

@@ -0,0 +1,6 @@
+import { KeyboardEvent } from 'react';
+/**
+ * Enter/Space activate a non-native `role='button'` element (the accordion
+ * title areas of `Legend.Row` / `Legend.Group`), like a real button.
+ */
+export declare function accordionKeyDown(toggle: () => void): (event: KeyboardEvent<HTMLElement>) => void;

package/dist/types/legend/components/contexts.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Per-row composition context provided by `Legend.Row`. Actions placed inside
+ * the row resolve their target layer from here instead of taking a `layerId`
+ * prop, and the opacity compound (`Legend.Opacity.Item` / `.Inline`) shares
+ * its open state through it.
+ */
+export interface LegendRowContextValue {
+    layerId: string;
+    opacityOpen: boolean;
+    setOpacityOpen: (open: boolean) => void;
+}
+export declare const LegendRowContext: import('react').Context<LegendRowContextValue | null>;
+/** Nearest `Legend.Row` composition context, or `null` outside a row. */
+export declare function useLegendRow(): LegendRowContextValue | null;
+/** Per-group composition context provided by `Legend.Group` (the group id). */
+export declare const LegendGroupContext: import('react').Context<string | null>;
+/** Nearest `Legend.Group` id, or `null` outside a group. */
+export declare function useLegendGroupId(): string | null;
+/**
+ * Overflow-menu controller for `Legend.RowMenu` / `Legend.GroupMenu` /
+ * `Legend.PanelMenu`. Async items (e.g. `Legend.ZoomTo`) use `setBusy` to keep
+ * the menu open and show in-item loading feedback, then `close()` when the
+ * handler settles. Prefer `runAsyncMenuAction` over calling these by hand.
+ */
+export interface LegendMenuController {
+    /** Reactive busy flag for UI (spinner / disabled). */
+    busy: boolean;
+    /**
+     * Synchronous busy check (ref-backed) — use this to gate clicks so a second
+     * press before React re-renders cannot start another async action.
+     */
+    isBusy: () => boolean;
+    setBusy: (busy: boolean) => void;
+    close: () => void;
+}
+export declare const LegendMenuContext: import('react').Context<LegendMenuController | null>;
+/** Nearest overflow-menu controller, or `null` outside a row/group menu. */
+export declare function useLegendMenu(): LegendMenuController | null;

package/dist/types/legend/components/icons.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Indeterminate visibility — an outlined eye with an internal slash, shown on
+ * a group whose member layers are partially hidden ("mixed" state). Path data
+ * exported from the Figma source (`MUI_visibility_indeterminate`, CARTO PS Lib
+ * Documentation node 5877-16982); the glyph is centered at (184, 24) in the
+ * header frame and drawn on a 18px grid (75% of the 24px box), so it is
+ * re-centered into the standard viewBox and scaled by 4/3 — the resulting
+ * 22×15-unit eye matches the MUI `Visibility*` icons exactly.
+ */
+export declare const VisibilityIndeterminateIcon: import('@mui/material/OverridableComponent').OverridableComponent<import('@mui/material').SvgIconTypeMap<{}, "svg">> & {
+    muiName: string;
+};

package/dist/types/legend/components/index.d.ts

@@ -0,0 +1,26 @@
+export { LegendGroup } from './legend-group/legend-group.js';
+export type { LegendGroupProps } from './legend-group/legend-group.js';
+export { LegendRow } from './legend-row/legend-row.js';
+export type { LegendRowProps } from './legend-row/legend-row.js';
+export { LegendActions } from './legend-actions/legend-actions.js';
+export type { LegendActionsProps } from './legend-actions/legend-actions.js';
+export { LegendRowContext, LegendGroupContext, LegendMenuContext, useLegendRow, useLegendGroupId, useLegendMenu, } from './contexts.js';
+export type { LegendRowContextValue, LegendMenuController } from './contexts.js';
+export { LegendVisibilityToggle } from './legend-visibility-toggle/legend-visibility-toggle.js';
+export { LegendRowMenu } from './legend-row-menu/legend-row-menu.js';
+export { LegendZoomTo } from './legend-row-menu/legend-zoom-to.js';
+export { LegendOpacity } from './legend-opacity/legend-opacity.js';
+export { LegendConfigSelect } from './legend-config-select/legend-config-select.js';
+export { LegendItem } from './legend-item/legend-item.js';
+export { LegendItemUI } from './legend-item/legend-item-ui.js';
+export type { LegendItemUIProps } from './legend-item/legend-item-ui.js';
+export { LegendSwatch, DEFAULT_SWATCH_SIZE, } from './legend-swatch/legend-swatch.js';
+export type { LegendSwatchProps } from './legend-swatch/legend-swatch.js';
+export { LegendCategoryUI } from './legend-category/legend-category-ui.js';
+export type { LegendCategoryUIProps } from './legend-category/legend-category-ui.js';
+export { LegendRampUI } from './legend-ramp/legend-ramp-ui.js';
+export type { LegendRampUIProps } from './legend-ramp/legend-ramp-ui.js';
+export { LegendProportionUI } from './legend-proportion/legend-proportion-ui.js';
+export type { LegendProportionUIProps } from './legend-proportion/legend-proportion-ui.js';
+export { LegendIconUI } from './legend-icon/legend-icon-ui.js';
+export type { LegendIconUIProps } from './legend-icon/legend-icon-ui.js';

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

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+export interface LegendActionsProps {
+    children?: ReactNode;
+}
+/**
+ * Header actions slot for `Legend.Row` / `Legend.Group` (widgets-v2 `Actions`
+ * 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 visibility toggle last so
+ * it sits rightmost, per design.
+ *
+ * @experimental This API is new and may change in a future release.
+ */
+export declare function LegendActions({ children }: LegendActionsProps): import('react').JSX.Element;
+/**
+ * Splits a wrapper's children by component identity: `<Legend.Actions>`
+ * elements belong in the header, everything else in the collapsible body.
+ * Identity comparison works because consumers import the slot from the same
+ * module (same pattern as widgets-v2 `Wrapper`).
+ */
+export declare function partitionLegendChildren(children: ReactNode): {
+    actions: ReactNode[];
+    body: ReactNode[];
+};

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

@@ -0,0 +1,7 @@
+export declare const styles: {
+    fadeGroup: {
+        display: "flex";
+        alignItems: "center";
+        gap: number;
+    };
+};

package/dist/types/legend/components/legend-category/legend-category-ui.d.ts

@@ -0,0 +1,13 @@
+import { LegendCategoryVariable } from '../../stores/index.js';
+export interface LegendCategoryUIProps {
+    data: LegendCategoryVariable;
+}
+/**
+ * Categorical legend — a list of swatches with labels (and optional trailing
+ * values, compact-formatted). The variable-level shape / fill pattern /
+ * stroke style / `isStrokeColor` act as defaults; each item may override any
+ * of them, so one list can mix patterns (or shapes) across entries.
+ *
+ * @experimental This API is new and may change in a future release.
+ */
+export declare function LegendCategoryUI({ data }: LegendCategoryUIProps): import('react').JSX.Element;

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

@@ -0,0 +1,52 @@
+export declare const styles: {
+    list: {
+        display: "flex";
+        flexDirection: "column";
+        gap: number;
+        '&:hover .PsLegend-value, &:focus-within .PsLegend-value': {
+            opacity: number;
+        };
+        '@media (hover: none)': {
+            '& .PsLegend-value': {
+                opacity: number;
+            };
+        };
+    };
+    item: {
+        display: "flex";
+        alignItems: "center";
+        gap: number;
+    };
+    gutter: {
+        flexShrink: number;
+        display: "flex";
+        alignItems: "center";
+        justifyContent: "center";
+    };
+    label: {
+        flex: number;
+        minWidth: number;
+        overflow: "hidden";
+        textOverflow: "ellipsis";
+        whiteSpace: "nowrap";
+    };
+    value: {
+        flexShrink: number;
+        opacity: number;
+        transition: "opacity 120ms";
+    };
+    listHorizontal: {
+        flexDirection: "row";
+        flexWrap: "wrap";
+        columnGap: number;
+        rowGap: number;
+    };
+    itemHorizontal: {
+        gap: number;
+    };
+    labelHorizontal: {
+        flex: string;
+        overflow: "visible";
+        textOverflow: "clip";
+    };
+};

package/dist/types/legend/components/legend-config-select/legend-config-select.d.ts

@@ -0,0 +1,14 @@
+/**
+ * The layer configuration select — resolves its layer from the enclosing
+ * `Legend.Row` context. The closed field shows the **first section's** active
+ * option; the menu lists every section under its title (omitted when the
+ * layer has a single section) and each section highlights its own active
+ * option. Picking an option writes `setSectionValue` and closes the menu.
+ * Renders nothing when the layer declares no sections (or outside a row).
+ *
+ * A native single-value `Select` can't represent one active per section,
+ * hence the outlined-trigger + `Menu` composition.
+ *
+ * @experimental This API is new and may change in a future release.
+ */
+export declare function LegendConfigSelect(): import('react').JSX.Element | null;

package/dist/types/legend/components/legend-config-select/styles.d.ts

@@ -0,0 +1,44 @@
+import { Theme } from '@mui/material';
+export declare const styles: {
+    trigger: {
+        width: string;
+        minHeight: number;
+        display: "flex";
+        alignItems: "center";
+        justifyContent: "space-between";
+        gap: number;
+        padding: ({ spacing }: Theme) => string;
+        border: "1px solid";
+        borderColor: "divider";
+        borderRadius: number;
+        backgroundColor: "background.paper";
+        color: "text.primary";
+        '&:hover': {
+            borderColor: "text.primary";
+        };
+    };
+    value: {
+        minWidth: number;
+        overflow: "hidden";
+        textOverflow: "ellipsis";
+        whiteSpace: "nowrap";
+    };
+    chevron: {
+        flexShrink: number;
+        color: "action.active";
+        transition: ({ transitions }: Theme) => string;
+    };
+    chevronOpen: {
+        transform: "rotate(180deg)";
+    };
+    sectionTitle: {
+        padding: ({ spacing }: Theme) => string;
+        lineHeight: number;
+    };
+    option: {
+        '&.Mui-selected, &.Mui-selected:hover': {
+            backgroundColor: "transparent";
+            color: "primary.main";
+        };
+    };
+};

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

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+export interface LegendGroupProps {
+    groupId: string;
+    /** `<Legend.Actions>` in the sticky header; member `<Legend.Row>`s in the body. */
+    children?: ReactNode;
+}
+/**
+ * Store-connected group wrapper. Draggable inside `<Legend.Sortable>`.
+ *
+ * @experimental This API is new and may change in a future release.
+ */
+export declare function LegendGroup({ groupId, children }: LegendGroupProps): import('react').JSX.Element | null;

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

@@ -0,0 +1,129 @@
+import { Theme } from '@mui/material';
+/**
+ * Design height of the group header (Figma "Group layers header", 48px).
+ * Grouped layer-row headers use it as their sticky `top` offset so they pin
+ * just below their group's header while the panel scrolls.
+ */
+export declare const LEGEND_GROUP_HEADER_HEIGHT = 48;
+export declare const styles: {
+    group: {
+        display: "flex";
+        flexDirection: "column";
+        '& + &': {
+            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;
+            '@media (hover: hover)': {
+                opacity: number;
+            };
+            '&.active': {
+                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;
+            transition: ({ transitions }: Theme) => string;
+            '@media (hover: none)': {
+                opacity: number;
+            };
+        };
+        '&:hover .PsLegend-dragHandle-group > *, &:focus-within .PsLegend-dragHandle-group > *': {
+            opacity: number;
+        };
+    };
+    titleArea: {
+        flex: number;
+        minWidth: number;
+        display: "flex";
+        alignItems: "center";
+        gap: number;
+        cursor: "pointer";
+        userSelect: "none";
+        '&:focus-visible': {
+            outline: string;
+            outlineColor: "primary.main";
+            outlineOffset: number;
+        };
+    };
+    groupIcon: {
+        display: "flex";
+        color: "text.secondary";
+    };
+    label: {
+        minWidth: number;
+        overflow: "hidden";
+        textOverflow: "ellipsis";
+        whiteSpace: "nowrap";
+    };
+    chevron: {
+        fontSize: number;
+        color: "text.secondary";
+        flexShrink: number;
+        transition: ({ transitions }: Theme) => string;
+        '@media (hover: none)': {
+            display: "none";
+        };
+    };
+    chevronCollapsed: {
+        transform: "rotate(-90deg)";
+    };
+    actions: {
+        display: "flex";
+        alignItems: "center";
+        gap: number;
+        flexShrink: number;
+        '& .MuiIconButton-root': {
+            padding: string;
+        };
+    };
+};

package/dist/types/legend/components/legend-group-menu/legend-group-menu-items.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Show only this group (hide all other layers).
+ *
+ * @experimental This API is new and may change in a future release.
+ */
+export declare function LegendShowOnlyGroup(): import('react').JSX.Element | null;
+/**
+ * Show every layer (panel-level `Legend.PanelMenu` only).
+ *
+ * @experimental This API is new and may change in a future release.
+ */
+export declare function LegendShowAllGroups(): import('react').JSX.Element | null;
+/**
+ * Collapse / expand all groups (panel-level `Legend.PanelMenu` only).
+ *
+ * @experimental This API is new and may change in a future release.
+ */
+export declare function LegendCollapseAllGroups(): import('react').JSX.Element | null;
+export interface LegendZoomToGroupProps {
+    /** Fit viewport to the group; may return a Promise for async menu feedback. */
+    onZoomTo: (groupId: string) => void | Promise<void>;
+}
+/**
+ * Zoom-to-group menu item for `Legend.GroupMenu`. Self-hides when all members are hidden.
+ *
+ * @experimental This API is new and may change in a future release.
+ */
+export declare function LegendZoomToGroup({ onZoomTo }: LegendZoomToGroupProps): import('react').JSX.Element | null;

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

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+export interface LegendGroupMenuProps {
+    /** Menu items; async items use `stopPropagation` + `runAsyncMenuAction`. */
+    children?: ReactNode;
+}
+/**
+ * Overflow (⋮) menu for a group header. Renders nothing outside a `Legend.Group`.
+ *
+ * @experimental This API is new and may change in a future release.
+ */
+export declare function LegendGroupMenu({ children }: LegendGroupMenuProps): import('react').JSX.Element;