@carto/ps-react-ui 4.15.0 → 4.16.0

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

@@ -4,14 +4,7 @@ type ResponsiveDrawerPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bott
 /** Placement of the panel relative to its anchor (desktop popover only). */
 export type ResponsiveDrawerPlacement = 'side' | 'overlay';
 /**
- * Resolve the Popover anchor/transform origins for a given corner + placement.
- *
- * `transformOrigin` (the panel corner that pins to the anchor point) is the same
- * for both placements: the panel's own corner matching `position`. `anchorOrigin`
- * (the point on the anchor the panel pins to) differs:
- * - `'side'` flips horizontally → the panel opens beside the trigger.
- * - `'overlay'` uses the same corner → the panel sits **on top of** the anchor
- *   (e.g. a trigger that's hidden while the panel is open), pinned corner-to-corner.
+ * Popover anchor/transform origins. `'overlay'` pins corner-to-corner on the anchor.
  */
 export declare function resolveOrigins(position: ResponsiveDrawerPosition, placement: ResponsiveDrawerPlacement): {
     anchorOrigin: PopoverOrigin;
@@ -22,7 +15,7 @@ export declare function ResponsiveDrawer<T extends {
     onChangeCollapsed: (collapsed: boolean) => void;
     position: ResponsiveDrawerPosition;
     slotProps?: PopoverProps['slotProps'];
-}>({ ref, children, collapsed, isMobile, position, sx, slotProps, onChangeCollapsed, modal, placement, }: Required<Pick<T, 'collapsed' | 'onChangeCollapsed' | 'position'>> & Pick<PopoverProps, 'slotProps' | 'sx'> & {
+}>({ ref, children, collapsed, isMobile, position, sx, slotProps, container, onChangeCollapsed, modal, placement, }: Required<Pick<T, 'collapsed' | 'onChangeCollapsed' | 'position'>> & Pick<PopoverProps, 'slotProps' | 'sx' | 'container'> & {
     ref: HTMLElement | null;
     isMobile: boolean;
     children: ReactNode;

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

@@ -1,13 +1,11 @@
 /**
  * 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 shares its popover state through it (the
- * popover anchors to the row's sticky header element to span its full width).
+ * prop, and the opacity compound (`Legend.Opacity.Item` / `.Inline`) shares
+ * its open state through it.
  */
 export interface LegendRowContextValue {
     layerId: string;
-    /** The row's sticky header element — anchor for `Legend.Opacity.Popover`. */
-    headerEl: HTMLElement | null;
     opacityOpen: boolean;
     setOpacityOpen: (open: boolean) => void;
 }
@@ -18,3 +16,23 @@ export declare function useLegendRow(): LegendRowContextValue | null;
 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/index.d.ts

@@ -4,8 +4,8 @@ export { LegendRow } from './legend-row/legend-row';
 export type { LegendRowProps } from './legend-row/legend-row';
 export { LegendActions } from './legend-actions/legend-actions';
 export type { LegendActionsProps } from './legend-actions/legend-actions';
-export { LegendRowContext, LegendGroupContext, useLegendRow, useLegendGroupId, } from './contexts';
-export type { LegendRowContextValue } from './contexts';
+export { LegendRowContext, LegendGroupContext, LegendMenuContext, useLegendRow, useLegendGroupId, useLegendMenu, } from './contexts';
+export type { LegendRowContextValue, LegendMenuController } from './contexts';
 export { LegendVisibilityToggle } from './legend-visibility-toggle/legend-visibility-toggle';
 export { LegendRowMenu } from './legend-row-menu/legend-row-menu';
 export { LegendZoomTo } from './legend-row-menu/legend-zoom-to';

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

@@ -5,9 +5,10 @@ export interface LegendActionsProps {
 /**
  * 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, next to the collapse chevron, wrapped
- * in the hover-fade group (`PsLegend-rowFade` in rows, `PsLegend-groupFade`
- * in group headers — resolved from the nearest context).
+ * 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.
  *
  * @experimental This API is new and may change in a future release.
  */

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

@@ -1,20 +1,11 @@
 import { ReactNode } from 'react';
 export interface LegendGroupProps {
     groupId: string;
-    /**
-     * Composition slots: `<Legend.Actions>` children render in the sticky
-     * header (hover-fade); everything else is the collapsible body — the
-     * consumer renders the member `<Legend.Row>`s explicitly (use
-     * `selectLayersByGroup` to resolve them).
-     */
+    /** `<Legend.Actions>` in the sticky header; member `<Legend.Row>`s in the body. */
     children?: ReactNode;
 }
 /**
- * Store-connected group wrapper (widgets-v2 `Wrapper` parity). Renders the
- * sticky 48px header — group icon + label from the store, the partitioned
- * `<Legend.Actions>` slot, and the collapse chevron — over the collapsible
- * body. Provides the group composition context so `Legend.VisibilityToggle`
- * placed in the header becomes the tri-state group eye.
+ * Store-connected group wrapper. Draggable inside `<Legend.Sortable>`.
  *
  * @experimental This API is new and may change in a future release.
  */

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

@@ -26,6 +26,19 @@ export declare const styles: {
         '&:hover .PsLegend-groupFade > *, &:focus-within .PsLegend-groupFade > *': {
             opacity: number;
         };
+        '& .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;
+        };
+    };
+    groupDragging: {
+        opacity: number;
     };
     header: {
         display: "flex";
@@ -38,19 +51,44 @@ export declare const styles: {
         position: "sticky";
         top: number;
         zIndex: number;
-        backgroundColor: "background.paper";
+        backgroundColor: "background.default";
+    };
+    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: {
-        flex: number;
         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";

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-runtime").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-runtime").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-runtime").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-runtime").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-runtime").JSX.Element;

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

@@ -1,32 +1,22 @@
 /**
- * Opacity header action for a layer row: a checkerboard icon button, pinned
- * `.active` in the hover-fade group while opacity ≠ 1 or the popover is open,
- * disabled while the layer is hidden. Opens `Legend.Opacity.Popover` through
- * the row context. Place it inside `<Legend.Actions>` of a `Legend.Row`.
+ * Opacity menu item — toggles the row's inline bar; self-hides when hidden or no `opacityControl`.
  *
  * @experimental This API is new and may change in a future release.
  */
-declare function OpacityTrigger(): import("react/jsx-runtime").JSX.Element | null;
+declare function OpacityItem(): import("react/jsx-runtime").JSX.Element | null;
 /**
- * The opacity editing surface — a popover **anchored to the row's sticky
- * header, spanning its full width**, holding a slider (writes `setOpacity`
- * only on release, widgets-v2 parity) and a percent input (commits live as
- * soon as the draft parses, clamped 0–100; never ellipsizes "100 %").
- * Declare it anywhere inside the `Legend.Row` (it renders in a portal);
- * open it with `Legend.Opacity.Trigger`.
+ * Inline opacity bar (first body child of `Legend.Row`). Slider commits on release; input commits live.
  *
  * @experimental This API is new and may change in a future release.
  */
-declare function OpacityPopover(): import("react/jsx-runtime").JSX.Element | null;
+declare function OpacityInline(): import("react/jsx-runtime").JSX.Element | null;
 /**
- * Compound opacity control for layer rows (widgets-v2 `FullScreen` parity):
- * `Trigger` lives in the header `<Legend.Actions>`, `Popover` anywhere in the
- * row body — they share state through the row context.
+ * Compound opacity control: `Item` in the row menu, `Inline` in the body.
  *
  * @experimental This API is new and may change in a future release.
  */
 export declare const LegendOpacity: {
-    Trigger: typeof OpacityTrigger;
-    Popover: typeof OpacityPopover;
+    Item: typeof OpacityItem;
+    Inline: typeof OpacityInline;
 };
 export {};

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

@@ -1,14 +1,19 @@
-import { Theme } from '@mui/material';
 export declare const styles: {
-    triggerWrap: {
-        display: "inline-flex";
+    inline: {
+        display: "flex";
+        flexDirection: "column";
+        gap: number;
+        borderRadius: number;
+    };
+    inlineHeader: {
+        display: "flex";
+        alignItems: "center";
+        justifyContent: "space-between";
     };
-    popover: {
+    inlineControls: {
         display: "flex";
         alignItems: "center";
         gap: number;
-        padding: ({ spacing }: Theme) => string;
-        width: number;
     };
     slider: {
         flex: number;

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

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+export interface LegendOverflowMenuProps {
+    /** Menu items; async items use `stopPropagation` + `runAsyncMenuAction`. */
+    children?: ReactNode;
+    /** When `false`, render nothing. Defaults to `true`. */
+    gate?: boolean;
+    /** `aria-label` for the ⋮ trigger. */
+    ariaLabel: string;
+    /** Extra `.active` pin (e.g. inline opacity bar open). */
+    active?: boolean;
+}
+export declare function LegendOverflowMenu({ children, gate, ariaLabel, active, }: LegendOverflowMenuProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+export interface LegendPanelMenuProps {
+    /** Menu items; async items use `stopPropagation` + `runAsyncMenuAction`. */
+    children?: ReactNode;
+}
+/**
+ * Overflow (⋮) menu for the panel header (no row/group context).
+ *
+ * @experimental This API is new and may change in a future release.
+ */
+export declare function LegendPanelMenu({ children }: LegendPanelMenuProps): import("react/jsx-runtime").JSX.Element;

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

@@ -2,21 +2,14 @@ import { ReactNode } from 'react';
 export interface LegendRowProps {
     layerId: string;
     /**
-     * Composition slots: `<Legend.Actions>` children render in the sticky
-     * header next to the collapse chevron (hover-fade); everything else renders
-     * in the collapsible body, followed by the layer's `helperText` footer.
+     * `<Legend.Actions>` in the sticky header; body children + `helperText` footer.
+     * Place `<Legend.Opacity.Inline />` first in the body.
      */
     children?: ReactNode;
 }
 /**
- * Store-connected layer-row wrapper (widgets-v2 `Wrapper` parity). Renders
- * the sticky header — title + subtitle from the store with a smart-truncating
- * tooltip, the partitioned `<Legend.Actions>` slot, and the collapse chevron —
- * over the collapsible body. Provides the row composition context so actions
- * (`Legend.VisibilityToggle`, `Legend.Opacity.*`, `Legend.RowMenu`,
- * `Legend.ConfigSelect`, `Legend.Item`) resolve the layer without props.
- * When the layer is hidden the body is force-collapsed, the content dims,
- * and the chevron is disabled.
+ * Store-connected layer row. Provides row context for actions; hidden layers
+ * force-collapse the body.
  *
  * @experimental This API is new and may change in a future release.
  */

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

@@ -3,6 +3,7 @@ export declare const styles: {
     row: {
         display: "flex";
         flexDirection: "column";
+        position: "relative";
         '& + &': {
             borderTop: string;
             borderColor: "divider";
@@ -23,6 +24,19 @@ export declare const styles: {
         '&:hover .PsLegend-value, &:focus-within .PsLegend-value': {
             opacity: number;
         };
+        '& .PsLegend-dragHandle-layer > *': {
+            opacity: number;
+            transition: ({ transitions }: Theme) => string;
+            '@media (hover: none)': {
+                opacity: number;
+            };
+        };
+        '&:hover .PsLegend-dragHandle-layer > *, &:focus-within .PsLegend-dragHandle-layer > *': {
+            opacity: number;
+        };
+    };
+    rowDragging: {
+        opacity: number;
     };
     header: {
         display: "flex";
@@ -40,18 +54,39 @@ export declare const styles: {
         display: "flex";
         flexDirection: "column";
     };
+    titleBoxInteractive: {
+        cursor: "pointer";
+        userSelect: "none";
+        '&:focus-visible': {
+            outline: string;
+            outlineColor: "primary.main";
+            outlineOffset: number;
+        };
+    };
     titleLine: {
         minHeight: number;
         display: "flex";
         alignItems: "center";
+        gap: number;
     };
     title: {
-        flex: number;
         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: {
         minHeight: number;
         display: "flex";

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

@@ -0,0 +1,12 @@
+/**
+ * Show only this layer (and hide siblings in the same bucket).
+ *
+ * @experimental This API is new and may change in a future release.
+ */
+export declare function LegendShowOnlyLayer(): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Show all layers in the enclosing group, or all ungrouped layers at row scope.
+ *
+ * @experimental This API is new and may change in a future release.
+ */
+export declare function LegendShowAllLayers(): import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,18 +1,12 @@
 import { ReactNode } from 'react';
 export interface LegendRowMenuProps {
-    /**
-     * The menu items — composed by the consumer (e.g. `<Legend.ZoomTo>` or any
-     * MUI `MenuItem`). A click on any item bubbles to the menu and closes it;
-     * an item that must keep the menu open should `event.stopPropagation()`.
-     */
+    /** Menu items; async items use `stopPropagation` + `runAsyncMenuAction`. */
     children?: ReactNode;
 }
 /**
- * Agnostic overflow (⋮) menu shell for a layer row — the items are passed as
- * children, like `Legend.Actions`. Renders nothing without children, outside
- * a row, or while the layer is hidden (a hidden row keeps only its
- * visibility eye + collapse chevron).
+ * Overflow (⋮) menu for a layer row. Pins `.active` while open, busy, or the
+ * inline opacity bar is open. Items self-gate when hidden.
  *
  * @experimental This API is new and may change in a future release.
  */
-export declare function LegendRowMenu({ children }: LegendRowMenuProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function LegendRowMenu({ children }: LegendRowMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/legend/components/legend-row-menu/legend-zoom-to.d.ts

@@ -1,14 +1,9 @@
 export interface LegendZoomToProps {
-    /**
-     * Fit the map viewport to the layer. The handler lives at the composition
-     * site (not the Provider) — each menu can wire its own behavior.
-     */
-    onZoomTo: (layerId: string) => void;
+    /** Fit viewport to the layer; may return a Promise for async menu feedback. */
+    onZoomTo: (layerId: string) => void | Promise<void>;
 }
 /**
- * "Zoom to" menu item for `Legend.RowMenu` — resolves its layer from the
- * enclosing `Legend.Row` context and calls the `onZoomTo` it was composed
- * with. The click bubbles to the menu, which closes itself.
+ * Zoom-to-layer menu item for `Legend.RowMenu`. Self-hides when the layer is hidden.
  *
  * @experimental This API is new and may change in a future release.
  */

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

@@ -0,0 +1,7 @@
+/**
+ * Present (true) below a `<Legend.Sortable>` wrapper — `Legend.Group` /
+ * `Legend.Row` read it to become draggable (sortable shell + drag handle).
+ */
+export declare const LegendSortableContext: import('react').Context<boolean>;
+/** Whether the nearest legend composition is wrapped in `Legend.Sortable`. */
+export declare function useLegendSortable(): boolean;

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

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+export interface LegendSortableProps {
+    /** Panel content (`Legend.Group` / ungrouped `Legend.Row` children). */
+    children?: ReactNode;
+}
+/**
+ * Opt-in DnD reordering for legend groups and layers (within bucket only).
+ *
+ * @experimental This API is new and may change in a future release.
+ */
+export declare function LegendSortable({ children }: LegendSortableProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,27 @@
+import { CSSProperties, ReactElement, ReactNode } from 'react';
+import { SortableKind } from './sortable-ids';
+/** What `SortableEntity` hands to its render callback. */
+export interface SortableEntityRenderProps {
+    /** Attach to the entity's existing root element. */
+    rootRef: (el: HTMLElement | null) => void;
+    /** Sort transform/transition for the root (inline, per-frame values). */
+    rootStyle: CSSProperties;
+    /** The original is dimmed in place while its overlay clone is dragged. */
+    dragging: boolean;
+    /** The drag handle — absolutely positioned, place anywhere in the header. */
+    handle: ReactNode;
+}
+export interface SortableEntityProps {
+    kind: SortableKind;
+    id: string;
+    render: (sortable: SortableEntityRenderProps) => ReactElement;
+}
+/**
+ * Sortable shell for a legend group/row. Render-prop (instead of a wrapper
+ * element) so the entity keeps its own root — sibling CSS like the `& + &`
+ * dividers keeps working. Hosts `useSortable` and builds the drag handle
+ * (keyboard-activatable, labelled `labels.reorder`).
+ *
+ * @experimental This API is new and may change in a future release.
+ */
+export declare function SortableEntity({ kind, id, render }: SortableEntityProps): ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;

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

@@ -0,0 +1,6 @@
+export type SortableKind = 'group' | 'layer';
+export declare const toSortableId: (kind: SortableKind, id: string) => string;
+export declare function parseSortableId(sortableId: string): {
+    kind: SortableKind;
+    id: string;
+} | null;

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

@@ -0,0 +1,54 @@
+import { Theme } from '@mui/material';
+export declare const styles: {
+    handleSlot: {
+        position: "absolute";
+        zIndex: number;
+        display: "flex";
+        alignItems: "center";
+        justifyContent: "center";
+        height: number;
+    };
+    handleSlotLayer: {
+        right: number;
+    };
+    handleSlotGroup: {
+        right: number;
+    };
+    handle: {
+        padding: string;
+        cursor: "grab";
+        touchAction: "none";
+        color: "text.secondary";
+        '& .MuiSvgIcon-root': {
+            fontSize: number;
+        };
+        '&:active': {
+            cursor: "grabbing";
+        };
+        '&:hover': {
+            backgroundColor: "transparent";
+        };
+    };
+    overlay: {
+        display: "flex";
+        alignItems: "center";
+        gap: number;
+        padding: ({ spacing }: Theme) => string;
+        backgroundColor: "background.paper";
+        borderRadius: number;
+        boxShadow: number;
+        height: string;
+        maxWidth: string;
+        overflow: "hidden";
+    };
+    overlayIcon: {
+        display: "flex";
+        color: "text.secondary";
+    };
+    overlayLabel: {
+        minWidth: number;
+        overflow: "hidden";
+        textOverflow: "ellipsis";
+        whiteSpace: "nowrap";
+    };
+};

package/dist/types/legend/components/legend-visible-layers/legend-visible-layers.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Panel checklist of visible layers — each entry hides its layer; the menu
+ * closes when nothing remains to list.
+ *
+ * @experimental This API is new and may change in a future release.
+ */
+export declare function LegendVisibleLayers(): import("react/jsx-runtime").JSX.Element;

package/dist/types/legend/components/legend-visible-layers/styles.d.ts

@@ -0,0 +1,48 @@
+import { Theme } from '@mui/material';
+export declare const styles: {
+    triggerWrap: {
+        display: "inline-flex";
+    };
+    paper: {
+        width: number;
+        maxHeight: number;
+        paddingBottom: number;
+    };
+    stickyHeader: {
+        position: "sticky";
+        top: number;
+        zIndex: number;
+        backgroundColor: "background.paper";
+        padding: number;
+        marginBlockEnd: number;
+        lineHeight: string;
+        borderBottom: string;
+        borderColor: "divider";
+    };
+    groupCaption: {
+        display: "block";
+        padding: ({ spacing }: Theme) => string;
+    };
+    item: {
+        minHeight: number;
+        display: "flex";
+        alignItems: "center";
+        justifyContent: "space-between";
+        gap: number;
+        padding: ({ spacing }: Theme) => string;
+    };
+    itemName: {
+        minWidth: number;
+        overflow: "hidden";
+        textOverflow: "ellipsis";
+        whiteSpace: "nowrap";
+    };
+    eye: {
+        fontSize: number;
+        color: "action.active";
+        flexShrink: number;
+    };
+    divider: {
+        marginY: number;
+    };
+};