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

package/dist/types/legend/stores/types.d.ts

@@ -0,0 +1,294 @@
+import { ReactNode } from 'react';
+import { StoreApi } from 'zustand';
+/** Floating panel anchor position. */
+export type LegendPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+/**
+ * Layout direction of a category/icon legend's items. `'horizontal'` flows
+ * the swatch+label pairs left-to-right, wrapping onto multiple rows.
+ */
+export type LegendOrientation = 'vertical' | 'horizontal';
+/** Swatch shape for a category legend. */
+export type LegendSwatchShape = 'square' | 'circle' | 'line';
+/** Fill pattern for a filled square/circle swatch (`isStrokeColor: false`). */
+export type LegendFillPattern = 'solid' | 'horizontal' | 'vertical' | 'diagonal' | 'diagonal-alt' | 'cross' | 'dots' | 'grid';
+/**
+ * Border style for a stroked square/circle swatch (`isStrokeColor: true`), or
+ * the line style for `shape: 'line'`. `corners` applies to squares only;
+ * `dash-dot` applies to lines only — inapplicable values degrade gracefully.
+ */
+export type LegendStrokeStyle = 'solid' | 'dashed' | 'dotted' | 'dash-dot' | 'corners';
+export interface LegendCategoryItem {
+    label: string;
+    /** Fill or stroke color (see `isStrokeColor`). */
+    color: string;
+    /**
+     * Optional value shown alongside the label — a pre-formatted node, so the
+     * consumer controls the formatting (e.g. `'12%'`, `'1.2K'`, or any element).
+     */
+    value?: ReactNode;
+    /** Optional marker diameter/length in px (the "Small/Medium/Large/XL" sizes). */
+    size?: number;
+    /** Override the variable-level swatch shape for this item. */
+    shape?: LegendSwatchShape;
+    /** Override the variable-level fill pattern for this item (mix patterns in one list). */
+    fillPattern?: LegendFillPattern;
+    /** Override the variable-level border/line style for this item. */
+    strokeStyle?: LegendStrokeStyle;
+    /** Override the variable-level fill-vs-outline mode for this item. */
+    isStrokeColor?: boolean;
+}
+export interface LegendCategoryVariable {
+    type: 'category';
+    items: LegendCategoryItem[];
+    /** Default swatch shape for all items (each item may override). Default `'circle'`. */
+    shape?: LegendSwatchShape;
+    /**
+     * Default fill-vs-outline mode (each item may override). When true, `color`
+     * paints the marker border/outline instead of its fill.
+     */
+    isStrokeColor?: boolean;
+    /**
+     * Default fill pattern when filled (each item may override — mix patterns
+     * in one list). Default `'solid'`.
+     */
+    fillPattern?: LegendFillPattern;
+    /**
+     * Default border style when stroked, or line style for `shape: 'line'`
+     * (each item may override). Default `'solid'`.
+     */
+    strokeStyle?: LegendStrokeStyle;
+    /** Item layout direction. Default `'vertical'`. */
+    orientation?: LegendOrientation;
+}
+export interface LegendRampStop {
+    label: string;
+    value: number;
+}
+export interface LegendRampVariable {
+    type: 'ramp';
+    /** Ordered low→high colors (hex / rgb / css). */
+    colors: string[];
+    /**
+     * Ordered low→high stops. Discrete ramps **require `colors.length + 1`**
+     * stops — the boundaries between color steps, including both outer edges —
+     * and each label is centered on its boundary line (keep labels short, e.g.
+     * `20K`; there is no collision handling). A discrete ramp with any other
+     * stop count is incoherent and renders an inline error instead of the bar.
+     * Continuous ramps show only the first/last endpoints.
+     */
+    stops: LegendRampStop[];
+    /** Continuous gradient bar vs. discrete color steps. */
+    isContinuous: boolean;
+    /**
+     * Average value, marked as a dashed vertical line on the bar (tooltip shows
+     * the formatted value). Positioned linearly between the first and last stop
+     * `value`s; out-of-range averages clamp to the bar's edge.
+     */
+    avg?: number;
+    /**
+     * Formats `avg` for its tooltip. Default `String(avg)` — pass e.g.
+     * `(v) => formatNumber(v, 'es-ES')` or `(v) => `${v}%``. Use a stable
+     * reference (same contract as the other variable fields).
+     */
+    formatValue?: (value: number) => ReactNode;
+    /** Attribute the color is based on (shown as "Color based on"). */
+    attribute?: string;
+}
+export interface LegendProportionVariable {
+    type: 'proportion';
+    min: number;
+    max: number;
+    /**
+     * Explicit value breaks to label (order-insensitive — the renderer sorts
+     * descending and caps at the **4 largest**). When omitted (or fewer than 2
+     * entries), breaks are evenly spaced between `min` and `max` over `steps`.
+     */
+    stops?: number[];
+    /**
+     * Number of nested circles and derived value breaks, clamped to **2–4**.
+     * Defaults to 4. Ignored when explicit `stops` are provided (their count,
+     * capped at 4, wins). Circles and labels always match 1:1. Edge case: when
+     * `min === max` the renderer collapses to a **single** circle/break (the
+     * shared value), regardless of `steps`.
+     */
+    steps?: number;
+    /**
+     * Formats each derived break (MAX / middle / MIN). Default `String(value)`
+     * — pass e.g. `(v) => formatNumber(v, 'es-ES')`. Use a stable reference
+     * (same contract as the other variable fields).
+     */
+    formatValue?: (value: number) => ReactNode;
+    /** Attribute the size is based on (shown as "Radius range by"). */
+    attribute?: string;
+}
+export interface LegendIconItem {
+    label: string;
+    /** Icon URL (data URI or external). */
+    icon: string;
+    /**
+     * Optional value shown alongside the label — a pre-formatted node, so the
+     * consumer controls the formatting (e.g. `'12%'`, `'1.2K'`, or any element).
+     */
+    value?: ReactNode;
+}
+export interface LegendIconVariable {
+    type: 'icon';
+    items: LegendIconItem[];
+    /** Item layout direction. Default `'vertical'`. */
+    orientation?: LegendOrientation;
+}
+export type LegendVariable = LegendCategoryVariable | LegendRampVariable | LegendProportionVariable | LegendIconVariable;
+/**
+ * One section of a layer's configuration select. The select's menu lists each
+ * section under its `title` (omitted when the layer has a single section);
+ * every section keeps its own highlighted `active` option. The closed field
+ * displays the first section's `active`.
+ */
+export interface LegendConfigSection {
+    id: string;
+    /** Section heading in the menu (e.g. "Global"). Hidden for a single section. */
+    title?: string;
+    options: string[];
+    /** The section's currently-selected option. */
+    active: string;
+}
+/** A layer row in the legend. Holds both static definition and interactive state. */
+export interface LegendLayer {
+    id: string;
+    name: string;
+    /** Secondary line (e.g. "Zoom level 1 – 12"). */
+    subtitle?: string;
+    visible: boolean;
+    /** 0–1. */
+    opacity: number;
+    collapsed: boolean;
+    /**
+     * @internal Collapsed state snapshotted when the layer was hidden — restored
+     * on show so a manual collapse/expand persists across visibility toggles.
+     * Managed by `setVisibility`/`setCollapsed`; do not set from outside.
+     */
+    collapsedBeforeHide?: boolean;
+    /** Sort order among siblings (lower = first). */
+    order: number;
+    /** Owning group id, if the layer belongs to a group. */
+    groupId?: string;
+    /** Show the opacity header action (slider + input popover) for this layer. */
+    opacityControl?: boolean;
+    /**
+     * Configuration-select sections. When absent (or empty), the row renders no
+     * select. User-picked `active`s survive Provider re-syncs as long as the
+     * section id still exists and the pick is still among its `options`.
+     */
+    sections?: LegendConfigSection[];
+    /** Footer helper note — one per layer, shown after all variables. */
+    helperText?: ReactNode;
+    /**
+     * Ordered item renderers, stacked top-to-bottom in the row body (a layer
+     * can mix e.g. two category lists and a proportion). Pass a stable array
+     * reference — `_sync` compares it by reference, like the other prop-driven
+     * fields.
+     */
+    variables: LegendVariable[];
+}
+/**
+ * A group of layer rows. A group has no stored visibility of its own — it is
+ * derived from its member layers (see `selectGroupVisibility`): all visible →
+ * `'visible'`, none visible → `'hidden'`, otherwise `'mixed'`.
+ */
+export interface LegendGroup {
+    id: string;
+    label: string;
+    /**
+     * Optional header icon. Rendered only when provided — no icon shows by
+     * default. A same-type element with shallow-equal props is treated as
+     * unchanged across re-syncs even when re-created inline (e.g.
+     * `icon={<MyIcon />}`); a deeply nested custom node should be memoized if
+     * you want to avoid unnecessary syncs.
+     */
+    icon?: ReactNode;
+    collapsed: boolean;
+    /**
+     * @internal Collapsed state snapshotted when the group was hidden via
+     * `setGroupVisibility` — restored on show. Managed by the setters.
+     */
+    collapsedBeforeHide?: boolean;
+    order: number;
+}
+/** @experimental This API is new and may change in a future release. */
+export interface LegendLayerInput extends Omit<LegendLayer, 'visible' | 'opacity' | 'collapsed' | 'collapsedBeforeHide' | 'order'> {
+    visible?: boolean;
+    opacity?: number;
+    collapsed?: boolean;
+    order?: number;
+}
+/** @experimental This API is new and may change in a future release. */
+export interface LegendGroupInput extends Omit<LegendGroup, 'collapsed' | 'collapsedBeforeHide' | 'order'> {
+    collapsed?: boolean;
+    order?: number;
+}
+export interface LegendState {
+    layers: Record<string, LegendLayer>;
+    groups: Record<string, LegendGroup>;
+    setVisibility: (id: string, visible: boolean) => void;
+    setOpacity: (id: string, opacity: number) => void;
+    setCollapsed: (id: string, collapsed: boolean) => void;
+    /**
+     * Pick a section's active option in the layer's configuration select.
+     * No-op for unknown layers/sections or when `value` is not one of the
+     * section's `options`.
+     */
+    setSectionValue: (id: string, sectionId: string, value: string) => void;
+    /**
+     * Move a layer to `toIndex` **within its sibling bucket** (its group, or
+     * the ungrouped bucket). `toIndex` is clamped; orders stay dense. No-op
+     * for unknown ids or when the position doesn't change.
+     */
+    moveLayer: (id: string, toIndex: number) => void;
+    /**
+     * Show/hide **all member layers** of a group (the group itself has no stored
+     * visibility — it is derived from its members). Each member keeps its own
+     * collapse snapshot; the group additionally collapses when hiding and
+     * restores its pre-hide collapse state when showing. No-op when the group
+     * is already at the target state or has no members.
+     */
+    setGroupVisibility: (id: string, visible: boolean) => void;
+    setGroupCollapsed: (id: string, collapsed: boolean) => void;
+    /**
+     * Move a group to `toIndex` within the group list. `toIndex` is clamped;
+     * orders stay dense. No-op for unknown ids or an unchanged position.
+     */
+    moveGroup: (id: string, toIndex: number) => void;
+    /**
+     * Add a layer, or update it if `input.id` already exists. Interactive state
+     * (visible/opacity/collapsed/order and section actives) is preserved unless
+     * the input explicitly overrides it; new layers append to the end of their
+     * sibling bucket. No-op when an existing layer is unchanged.
+     */
+    setLegendLayer: (input: LegendLayerInput) => void;
+    /**
+     * Remove a layer and densely re-number the remaining siblings. No-op for an
+     * unknown id.
+     */
+    removeLegendLayer: (id: string) => void;
+    /**
+     * Add a group, or update it if `input.id` already exists (collapse/order
+     * preserved on update). No-op when unchanged.
+     */
+    setLegendGroup: (input: LegendGroupInput) => void;
+    /**
+     * Remove a group; its member layers are **un-grouped** (their `groupId` is
+     * cleared) so they survive as ungrouped rows rather than vanish. No-op for an
+     * unknown id.
+     */
+    removeLegendGroup: (id: string) => void;
+    /**
+     * @internal Provider prop-sync. Adds new entities, updates static fields of
+     * known ones (preserving their interactive state), and removes vanished ones.
+     */
+    _sync: (layers: LegendLayerInput[], groups: LegendGroupInput[]) => void;
+}
+export type LegendStoreApi = StoreApi<LegendState>;
+export interface LegendInit {
+    layers?: LegendLayerInput[];
+    groups?: LegendGroupInput[];
+}

package/dist/types/widgets/actions/brush-toggle/brush-overlay.d.ts

@@ -0,0 +1,24 @@
+interface BrushOverlayProps {
+    id: string;
+    multiBrush?: boolean;
+}
+/**
+ * Portaled overlay rendered inside the ECharts chart `<div>`. Handles brush
+ * drawing entirely in DOM, independent of ECharts' built-in brush.
+ *
+ * Rectangles are stored in x-axis data coords (category indices) in the
+ * widget store. The overlay re-projects them to pixel coords on every chart
+ * `finished` event and container resize, so `setOption({ notMerge: true })`
+ * by the config pipeline is a non-event.
+ *
+ * Pointer capture and rectangle rendering are both clamped to the ECharts
+ * grid (plot area), so the legend, axis labels, and other chart chrome
+ * receive their usual events and aren't visually covered.
+ *
+ * Hit-testing happens on `pointerup` using `hitTestRects` against the widget's
+ * data length (derived from `widget.data`). The result is written to
+ * `brushSelection` in the store; `BrushToggle` subscribes to that and invokes
+ * the consumer's `onBrushSelected` callback.
+ */
+export declare function BrushOverlay({ id, multiBrush }: BrushOverlayProps): import('react').ReactPortal | null;
+export {};

package/dist/types/widgets/actions/brush-toggle/brush-toggle.d.ts

@@ -0,0 +1,29 @@
+import { BrushToggleProps } from './types.js';
+/**
+ * Kept for backwards compatibility. The tool is no longer registered with the
+ * widget store — brush state is now owned directly by this component and the
+ * associated DOM overlay instead of being driven through the config pipeline.
+ * Existing code that looks this constant up in `registeredTools` will simply
+ * find no match.
+ */
+export declare const BRUSH_TOGGLE_TOOL_ID = "brush-toggle";
+/**
+ * Widget action to toggle brush-style selection on bar and histogram widgets.
+ *
+ * Renders a toggle button and a portaled overlay rendered inside the chart's
+ * `<div>`. The overlay handles all pointer interactions, draws selection
+ * rectangles in DOM, and hit-tests against the widget data. All state lives
+ * in the widget store — rectangles survive config-pipeline re-renders
+ * (`setOption({ notMerge: true })`) automatically.
+ *
+ * Only intended for bar and histogram widgets (both use `xAxis.type === 'category'`).
+ *
+ * @example
+ * ```tsx
+ * <BrushToggle
+ *   id="my-widget"
+ *   onBrushSelected={(items) => console.log(items)}
+ * />
+ * ```
+ */
+export declare function BrushToggle({ id, onBrushSelected, multiBrush, selections, defaultEnabled, labels, Icon, IconButtonProps, }: BrushToggleProps): import('react').JSX.Element;

package/dist/types/widgets/actions/brush-toggle/hit-test.d.ts

@@ -0,0 +1,19 @@
+import { BrushRect } from './types.js';
+/**
+ * Returns integer dataIndices covered by a brush rectangle on a category axis.
+ *
+ * `xStart` / `xEnd` come from `instance.convertFromPixel({ xAxisIndex: 0 }, …)`
+ * which, for a category axis, returns fractional positions around integer
+ * category indices (e.g. `1.3` lands between categories 1 and 2). We snap the
+ * range outward (`floor` / `ceil`) so a drag that visually covers any part of
+ * a category's bar includes that index.
+ *
+ * Results are clamped to `[0, dataLength - 1]` and returned in ascending order.
+ */
+export declare function hitTestCategoryRange(xStart: number, xEnd: number, dataLength: number): number[];
+/**
+ * Union of `hitTestCategoryRange` across multiple rectangles. Used for
+ * multi-brush selections where each drawn rectangle contributes to the
+ * combined selection.
+ */
+export declare function hitTestRects(rects: BrushRect[], dataLength: number): number[];

package/dist/types/widgets/actions/brush-toggle/style.d.ts

@@ -0,0 +1,21 @@
+import { Theme } from '@mui/material';
+import { CSSProperties } from 'react';
+export declare const styles: {
+    container: {
+        display: "flex";
+        alignItems: "center";
+        gap: ({ spacing }: Theme) => string;
+    };
+    trigger: {
+        '&[data-active="true"]': {
+            background: (theme: Theme) => string;
+        };
+    };
+};
+/**
+ * Plain CSS objects for the brush overlay — we're outside MUI's sx pipeline
+ * here because the rectangles are rendered via a React portal into the chart
+ * div (not part of the MUI tree). Colors borrow from the base palette; if
+ * theme-aware styling is needed later, move to styled components.
+ */
+export declare const overlayStyles: Record<string, CSSProperties>;

package/dist/types/widgets/actions/brush-toggle/types.d.ts

@@ -0,0 +1,73 @@
+import { IconButtonProps } from '@mui/material';
+import { ReactNode } from 'react';
+import { BaseWidgetState } from '../../stores/types.js';
+/**
+ * Brush selection result emitted by BrushToggle.
+ * Contains raw indices so consumers can resolve data according to their widget type.
+ */
+export interface BrushSelectedItems {
+    /** Data indices of the selected items in the dataset */
+    dataIndex: number[];
+    /** Series index from the brush event (defaults to 0) */
+    seriesIndex: number;
+}
+/**
+ * A selection rectangle in x-axis data coords. Stored in the widget store so
+ * it survives config-pipeline re-renders (which call `setOption` with
+ * `notMerge: true` and wipe any ECharts-side state). The overlay re-projects
+ * these to pixel positions on every chart render / resize.
+ *
+ * Both bar and histogram widgets use `xAxis.type === 'category'`, so the
+ * coords are category indices (possibly fractional — `convertFromPixel`
+ * returns floats like `1.3` between categories 1 and 2).
+ */
+export interface BrushRect {
+    xStart: number;
+    xEnd: number;
+}
+/**
+ * State stored in widget store for brush functionality.
+ */
+export interface BrushConfig {
+    /** Whether brush mode is enabled. */
+    brush?: boolean;
+    /** Persisted selection rectangles in data-axis coords. */
+    brushRects?: BrushRect[];
+    /** Last selection emitted to the `onBrushSelected` callback. */
+    brushSelection?: BrushSelectedItems;
+}
+export type BrushState<T = unknown> = BaseWidgetState<T & BrushConfig>;
+export interface BrushToggleProps {
+    /** Widget ID to update brush state in the widget store */
+    id: string;
+    /** Callback fired when items are selected via brush */
+    onBrushSelected?: (items: BrushSelectedItems) => void;
+    /** When true, allows multiple brush selection areas. Brush stays active after each selection. */
+    multiBrush?: boolean;
+    /**
+     * Initial brush-enabled state. Only applied on first mount if the widget
+     * store has no `brush` value yet — subsequent remounts preserve whatever
+     * state the user has toggled to.
+     */
+    defaultEnabled?: boolean;
+    /**
+     * Current selection count from the consumer (e.g. `selectedItems.length`).
+     * When this transitions to `0` (typically when the user presses the clear
+     * button in `WidgetSelectionSummary`), BrushToggle clears its persisted
+     * brush rectangles and the on-chart selection.
+     */
+    selections?: number;
+    /** Custom labels for the action */
+    labels?: {
+        /** Tooltip when brush is disabled (button will enable brush) */
+        enable?: string;
+        /** Tooltip when brush is enabled (button will disable brush) */
+        disable?: string;
+        /** Accessibility label */
+        ariaLabel?: string;
+    };
+    /** Props passed to the IconButton component */
+    IconButtonProps?: IconButtonProps;
+    /** Custom icon to display for brush toggle */
+    Icon?: ReactNode;
+}

package/dist/types/widgets/actions/change-column/change-column-icon.d.ts

@@ -1 +1 @@
-export declare const ChangeColumnIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const ChangeColumnIcon: () => import('react').JSX.Element;

package/dist/types/widgets/actions/change-column/change-column.d.ts

@@ -1,4 +1,5 @@
-import { ChangeColumnProps } from './types';
+import { ChangeColumnProps } from './types.js';
+export declare const CHANGE_COLUMN_TOOL_ID = "change-column";
 /**
  * Widget action to reorder columns in a table widget via drag-and-drop.
  *
@@ -6,6 +7,9 @@ import { ChangeColumnProps } from './types';
  * drag and drop columns to reorder them. All columns are displayed and
  * can be reordered.
  *
+ * Registers as a config pipeline tool so that column order is automatically
+ * re-applied when the base config is updated (e.g., by WidgetLoader).
+ *
  * Returns null if there are fewer than 2 columns.
  *
  * @example
@@ -13,4 +17,4 @@ import { ChangeColumnProps } from './types';
  * <ChangeColumn id="my-table-widget" />
  * ```
  */
-export declare function ChangeColumn({ id, labels, Icon, IconButtonProps, MenuProps, }: ChangeColumnProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ChangeColumn({ id, labels, Icon, IconButtonProps, MenuProps, }: ChangeColumnProps): import('react').JSX.Element | null;

package/dist/types/widgets/actions/change-column/sortable-column-item.d.ts

@@ -1,4 +1,4 @@
-import { TableColumn } from '../../table/types';
+import { TableColumn } from '../../table/types.js';
 export interface SortableColumnItemProps {
     column: TableColumn;
 }
@@ -6,4 +6,4 @@ export interface SortableColumnItemProps {
  * A draggable menu item for column reordering.
  * Uses @dnd-kit/sortable for drag-and-drop functionality.
  */
-export declare function SortableColumnItem({ column }: SortableColumnItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function SortableColumnItem({ column }: SortableColumnItemProps): import('react').JSX.Element;

package/dist/types/widgets/actions/download/download.d.ts

@@ -1,2 +1,13 @@
-import { DownloadProps } from './types';
-export declare function Download({ id, items, labels, Icon, IconButtonProps, }: DownloadProps): import("react/jsx-runtime").JSX.Element;
+import { DownloadProps } from './types.js';
+/**
+ * Dropdown menu action for exporting widget data in various formats (CSV, PNG, etc.).
+ *
+ * Reads widget data from the store and triggers downloads using the modifier
+ * function defined in each `DownloadItem`.
+ *
+ * @example
+ * ```tsx
+ * <Download id={widgetId} items={barDownloadConfig({ refUI })} />
+ * ```
+ */
+export declare function Download({ id, items, labels, Icon, IconButtonProps, }: DownloadProps): import('react').JSX.Element;

package/dist/types/widgets/actions/download/exports.d.ts

@@ -1,6 +1,21 @@
 import { Ref } from 'react';
-import { DownloadItem } from './types';
+import { DownloadItem } from './types.js';
+/**
+ * Pre-configured download item for exporting widget data as a CSV file.
+ *
+ * Converts a 2D array of data into CSV format with proper escaping and
+ * triggers a browser download. Revokes the object URL after download.
+ */
 export declare const downloadToCSV: DownloadItem<unknown[][]>;
+/**
+ * Pre-configured download item for exporting a widget as a PNG image.
+ *
+ * Uses html2canvas to capture the widget DOM element referenced by a React ref.
+ * Strips toolbar and action elements before capturing.
+ *
+ * @remarks
+ * The modifier expects a React ref to the widget's root HTML element, not raw data.
+ */
 export declare const downloadToPNG: Omit<DownloadItem, 'modifier'> & {
     modifier: (ref: Ref<HTMLElement | null> | undefined) => Promise<string | undefined>;
 };

package/dist/types/widgets/actions/download/types.d.ts

@@ -1,6 +1,6 @@
 import { JSX, ReactNode } from 'react';
 import { IconButtonProps } from '@mui/material';
-import { WidgetState } from '../../stores/types';
+import { WidgetState } from '../../stores/types.js';
 export interface DownloadItem<D = unknown> {
     id: string;
     label: string;

package/dist/types/widgets/actions/fullscreen/fullscreen.d.ts

@@ -1,2 +1,15 @@
-import { FullScreenProps } from './types';
-export declare function FullScreen({ id, labels, children, Icon, IconButtonProps, DialogContentProps: { sx, ...DialogContentProps }, }: FullScreenProps): import("react/jsx-runtime").JSX.Element;
+import { FullScreenProps } from './types.js';
+/**
+ * Displays widget content in a fullscreen modal dialog.
+ *
+ * Manages fullscreen state via the widget store and renders a MUI Dialog
+ * with the widget title and a close button.
+ *
+ * @example
+ * ```tsx
+ * <FullScreen id="my-widget" labels={{ ariaLabel: 'Expand chart' }}>
+ *   <ChartContent id="my-widget" />
+ * </FullScreen>
+ * ```
+ */
+export declare function FullScreen({ id, labels, children, Icon, IconButtonProps, DialogContentProps: { sx, ...DialogContentProps }, DialogProps, }: FullScreenProps): import('react').JSX.Element;

package/dist/types/widgets/actions/fullscreen/types.d.ts

@@ -1,6 +1,6 @@
-import { DialogContentProps, IconButtonProps } from '@mui/material';
+import { DialogContentProps, IconButtonProps, DialogProps } from '@mui/material';
 import { ReactNode } from 'react';
-import { BaseWidgetState } from '../../../widgets/stores/types';
+import { BaseWidgetState } from '../../../widgets/stores/types.js';
 export type FullScreenState<T = unknown> = BaseWidgetState<T & FullScreenConfigProps & {
     title: string;
 }>;
@@ -15,6 +15,7 @@ export interface FullScreenProps {
     };
     children: ReactNode;
     DialogContentProps?: DialogContentProps;
+    DialogProps?: DialogProps;
     IconButtonProps?: IconButtonProps;
     Icon?: ReactNode;
 }

package/dist/types/widgets/actions/index.d.ts

@@ -1,18 +1,20 @@
-export { FullScreen } from './fullscreen/fullscreen';
-export type { FullScreenState, FullScreenConfig } from './fullscreen/types';
-export { Download } from './download/download';
-export type { DownloadItem, DownloadProps } from './download/types';
-export { downloadToCSV, downloadToPNG } from './download/exports';
-export { RelativeData, RELATIVE_DATA_TOOL_ID, } from './relative-data/relative-data';
-export type { RelativeDataProps } from './relative-data/types';
-export { ZoomToggle } from './zoom-toggle/zoom-toggle';
-export type { ZoomToggleProps, ZoomState, ZoomConfig, } from './zoom-toggle/types';
-export { StackToggle } from './stack-toggle/stack-toggle';
-export type { StackToggleProps, StackToggleState } from './stack-toggle/types';
-export { Searcher, SEARCHER_TOOL_ID } from './searcher/searcher';
-export { SearcherToggle } from './searcher/searcher-toggle';
-export type { SearcherToggleProps, SearcherProps, SearcherFilterFn, SearcherState, } from './searcher/types';
-export { ChangeColumn } from './change-column/change-column';
-export type { ChangeColumnProps } from './change-column/types';
-export { LockSelection, LOCK_SELECTION_TOOL_ID, } from './lock-selection/lock-selection';
-export type { LockSelectionProps, LockSelectionState, } from './lock-selection/types';
+export { FullScreen } from './fullscreen/fullscreen.js';
+export type { FullScreenState, FullScreenConfig, FullScreenProps, } from './fullscreen/types.js';
+export { Download } from './download/download.js';
+export type { DownloadItem, DownloadProps } from './download/types.js';
+export { downloadToCSV, downloadToPNG } from './download/exports.js';
+export { RelativeData, RELATIVE_DATA_TOOL_ID, RELATIVE_DATA_CONFIG_TOOL_ID, } from './relative-data/relative-data.js';
+export type { RelativeDataProps, RelativeDataState, } from './relative-data/types.js';
+export { ZoomToggle, ZOOM_TOGGLE_TOOL_ID } from './zoom-toggle/zoom-toggle.js';
+export type { ZoomToggleProps, ZoomState, ZoomConfig, } from './zoom-toggle/types.js';
+export { StackToggle, STACK_TOGGLE_TOOL_ID } from './stack-toggle/stack-toggle.js';
+export type { StackToggleProps, StackToggleState } from './stack-toggle/types.js';
+export { Searcher, SEARCHER_TOOL_ID } from './searcher/searcher.js';
+export { SearcherToggle } from './searcher/searcher-toggle.js';
+export type { SearcherToggleProps, SearcherProps, SearcherFilterFn, SearcherState, SearcherStateProps, } from './searcher/types.js';
+export { ChangeColumn, CHANGE_COLUMN_TOOL_ID, } from './change-column/change-column.js';
+export type { ChangeColumnProps } from './change-column/types.js';
+export { LockSelection, LOCK_SELECTION_TOOL_ID, } from './lock-selection/lock-selection.js';
+export type { LockSelectionProps, LockSelectionState, LockSelectionStateProps, } from './lock-selection/types.js';
+export { BrushToggle, BRUSH_TOGGLE_TOOL_ID } from './brush-toggle/brush-toggle.js';
+export type { BrushToggleProps, BrushState, BrushConfig, BrushSelectedItems, } from './brush-toggle/types.js';

package/dist/types/widgets/actions/lock-selection/lock-selection.d.ts

@@ -1,4 +1,4 @@
-import { LockSelectionProps } from './types';
+import { LockSelectionProps } from './types.js';
 export declare const LOCK_SELECTION_TOOL_ID = "lock-selection";
 /**
  * Widget action button to lock the current selection.
@@ -16,4 +16,4 @@ export declare const LOCK_SELECTION_TOOL_ID = "lock-selection";
  * />
  * ```
  */
-export declare function LockSelection({ id, selectedItems, order, labels, Icon, IconButtonProps, }: LockSelectionProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function LockSelection({ id, selectedItems, order, labels, Icon, IconButtonProps, }: LockSelectionProps): import('react').JSX.Element | null;