@carto/ps-react-ui 4.9.1 → 4.11.1

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

@@ -7,6 +7,6 @@ export declare const styles: {
         };
     };
     toggleActive: {
-        background: (theme: Theme) => any;
+        background: (theme: Theme) => string;
     };
 };

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

@@ -7,7 +7,7 @@ export declare const styles: {
         };
     };
     toggleActive: {
-        background: (theme: Theme) => any;
+        background: (theme: Theme) => string;
     };
     menuPaper: {
         overflow: "hidden";

package/dist/types/widgets-v2/actions/fullscreen/style.d.ts

@@ -14,7 +14,7 @@ export declare const styles: {
         };
     };
     triggerActive: {
-        background: (theme: Theme) => any;
+        background: (theme: Theme) => string;
     };
     dialogPaper: {
         width: string;

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

@@ -1,5 +1,6 @@
 export { Searcher, SearcherToggle, setSearcherText, filterBySearchText, DEFAULT_SEARCHER_LABELS, type SearcherProps, type SearcherToggleProps, type SearcherLabels, } from './searcher';
 export { StackToggle, addStack, DEFAULT_STACK_TOGGLE_LABELS, type StackToggleProps, type StackToggleLabels, } from './stack-toggle';
+export { ShowAllToggle, setShowAll, SHOW_ALL_ID, DEFAULT_SHOW_ALL_LABELS, type ShowAllToggleProps, type ShowAllLabels, } from './show-all';
 export { ZoomToggle, addZoom, createAddZoom, ZOOM_LAYOUT, DEFAULT_ZOOM_TOGGLE_LABELS, type ZoomToggleProps, type ZoomToggleLabels, } from './zoom-toggle';
 export { BrushToggle, addBrush, DEFAULT_BRUSH_TOGGLE_LABELS, type BrushToggleProps, type BrushToggleLabels, } from './brush-toggle';
 export { RelativeData, toRelativeData, createPercentFormatter, DEFAULT_RELATIVE_DATA_LABELS, type RelativeDataProps, type RelativeDataLabels, } from './relative-data';

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

@@ -7,6 +7,6 @@ export declare const styles: {
         };
     };
     toggleActive: {
-        background: (theme: Theme) => any;
+        background: (theme: Theme) => string;
     };
 };

package/dist/types/widgets-v2/actions/relative-data/style.d.ts

@@ -7,6 +7,6 @@ export declare const styles: {
         };
     };
     toggleActive: {
-        background: (theme: Theme) => any;
+        background: (theme: Theme) => string;
     };
 };

package/dist/types/widgets-v2/actions/searcher/style.d.ts

@@ -7,7 +7,7 @@ export declare const styles: {
         };
     };
     toggleActive: {
-        background: (theme: Theme) => any;
+        background: (theme: Theme) => string;
     };
     input: {
         width: string;

package/dist/types/widgets-v2/actions/show-all/index.d.ts

@@ -0,0 +1,2 @@
+export { ShowAllToggle, setShowAll, SHOW_ALL_ID, type ShowAllToggleProps, } from './show-all';
+export { DEFAULT_SHOW_ALL_LABELS, type ShowAllLabels } from './labels';

package/dist/types/widgets-v2/actions/show-all/labels.d.ts

@@ -0,0 +1,5 @@
+export interface ShowAllLabels {
+    /** Tooltip + aria-label for the collapse (✕) button shown while expanded. */
+    toggle: string;
+}
+export declare const DEFAULT_SHOW_ALL_LABELS: ShowAllLabels;

package/dist/types/widgets-v2/actions/show-all/show-all.d.ts

@@ -0,0 +1,33 @@
+import { ComponentType } from 'react';
+import { SvgIconProps } from '@mui/material';
+import { ShowAllLabels } from './labels';
+/**
+ * The `show-all` flag is a pure UI signal (no data/config transform): the
+ * Category overflow row writes it `true` via {@link setShowAll}, the
+ * composer reads it with `useTransformEnabled(id, SHOW_ALL_ID)` to drop the
+ * row cap, and this button writes it back `false` to collapse. Stored under
+ * `transformStates` so `useTransformEnabled` can observe it like any other
+ * action flag — but it never registers a pipeline transform, so toggling it
+ * never re-runs the data pipeline.
+ */
+export declare const SHOW_ALL_ID = "show-all";
+export interface ShowAllToggleProps {
+    labels?: Partial<ShowAllLabels>;
+    icon?: ComponentType<SvgIconProps>;
+    iconProps?: SvgIconProps;
+}
+/**
+ * Collapse (✕) affordance shown while a widget is expanded into its
+ * "show all" state. Clicking it clears the `show-all` flag, returning the
+ * widget to its capped view. Mount it conditionally (only while the flag is
+ * set) so it doesn't occupy a `Widget.Toolbox` visibility-budget slot when
+ * the widget is collapsed.
+ */
+export declare function ShowAllToggle({ labels, icon: Icon, iconProps, }: ShowAllToggleProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Imperatively writes the `show-all` flag into the widget store. Mirrors
+ * {@link setSearcherText} — used by the Category overflow row (to expand)
+ * and the {@link ShowAllToggle} button (to collapse) without routing through
+ * a re-rendered subscription.
+ */
+export declare function setShowAll(widgetId: string, value: boolean): void;

package/dist/types/widgets-v2/actions/show-all/style.d.ts

@@ -0,0 +1,8 @@
+export declare const styles: {
+    toggle: {
+        p: number;
+        '& .MuiSvgIcon-root': {
+            fontSize: number;
+        };
+    };
+};

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

@@ -7,6 +7,6 @@ export declare const styles: {
         };
     };
     toggleActive: {
-        background: (theme: Theme) => any;
+        background: (theme: Theme) => string;
     };
 };

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

@@ -7,6 +7,6 @@ export declare const styles: {
         };
     };
     toggleActive: {
-        background: (theme: Theme) => any;
+        background: (theme: Theme) => string;
     };
 };

package/dist/types/widgets-v2/category/category-ui.d.ts

@@ -23,7 +23,7 @@ export interface CategoryUIProps {
      * Caps the number of visible category rows.
      *
      * - `undefined` (omitted) — caps at {@link DEFAULT_MAX_ITEMS} (20).
-     *   Surplus rows fold into a single italic "Other (X more)" footer.
+     *   Surplus rows fold into a single "Others <count>" footer row.
      *   `undefined` cannot mean "no cap" because it's consumed by the
      *   default-parameter syntax — pass `null` instead.
      * - positive finite N — same as the default but with a custom cap.
@@ -44,6 +44,13 @@ export interface CategoryUIProps {
     maxItems?: number | null;
     /** Labels for the "Other" overflow row. `{count}` placeholder is replaced. */
     labels?: CategoryLabels;
+    /**
+     * When provided, the "Other" overflow row becomes a button — clicking it
+     * fires `onShowAll`, which a composer typically wires to expand the widget
+     * (drop the row cap) so every category becomes reachable. When omitted the
+     * overflow row stays a static summary.
+     */
+    onShowAll?: () => void;
     /** Manual override for the bar-width denominator. */
     maxOverride?: number;
     /**
@@ -78,4 +85,4 @@ export interface CategoryUIProps {
  * Returns `null` when there's nothing to render — `Widget.State` is the
  * empty-state authority in the canonical compositor.
  */
-export declare function CategoryUI({ data, selection, onSelectionChange, formatter, labelFormatter, series, maxItems, labels, maxOverride, size, stacked, }: CategoryUIProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function CategoryUI({ data, selection, onSelectionChange, formatter, labelFormatter, series, maxItems, labels, onShowAll, maxOverride, size, stacked, }: CategoryUIProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/types/widgets-v2/category/category.d.ts

@@ -7,7 +7,7 @@ export interface CategoryProps {
     /** Per-series metadata. Enables the legend + overrides palette per index. */
     series?: readonly CategorySeriesConfig[];
     /**
-     * Cap visible rows; overflow folds into "Other (X more)". Default 20
+     * Cap visible rows; overflow folds into an "Others <count>" row. Default 20
      * (when omitted). Pass `0` to swap the cap for a scrollable viewport
      * (composers use this when the user opens the SearcherToggle —
      * `maxItems = searcherOpen ? 0 : userMaxItems`). Pass `null` to disable
@@ -16,6 +16,13 @@ export interface CategoryProps {
     maxItems?: number | null;
     /** Labels for the "Other" overflow row. */
     labels?: CategoryLabels;
+    /**
+     * When provided, the "Other" overflow row becomes a button that fires this
+     * callback. Composers wire it to expand the widget (e.g. flip the
+     * `show-all` flag) so every category is shown. Forwarded to
+     * {@link CategoryUI}.
+     */
+    onShowAll?: () => void;
     /**
      * Manual override for the bar-width denominator. When omitted, the
      * bridge auto-fills from the widget store's `rawData` so bar widths
@@ -45,4 +52,4 @@ export interface CategoryProps {
  * `onSelectionChange` follow the destination-owned principle: the
  * consumer keeps the list in their own store and passes it through.
  */
-export declare function Category({ selection, onSelectionChange, series, maxItems, labels, maxOverride, size, stacked, }: CategoryProps): import("react/jsx-runtime").JSX.Element;
+export declare function Category({ selection, onSelectionChange, series, maxItems, labels, onShowAll, maxOverride, size, stacked, }: CategoryProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/widgets-v2/category/components/category-row-other.d.ts

@@ -1,13 +1,26 @@
 export interface CategoryRowOtherProps {
     hiddenCount: number;
-    /** Label for the overflow row. Defaults to `'Other'`. */
+    /** Label for the overflow row. Defaults to `'Others'`. */
     otherLabel?: string;
-    /** Count text with `{count}` placeholder. Defaults to `'{count} more'`. */
+    /** Count text with `{count}` placeholder. Defaults to `'{count}'`. */
     otherCountLabel?: string;
+    /**
+     * When provided, the row becomes a button: clicking it (or Enter/Space)
+     * fires `onShowAll`, expanding the widget to reveal every category. When
+     * omitted the row renders as a static, non-interactive summary.
+     */
+    onShowAll?: () => void;
+    /** Tooltip shown over the button form. Defaults to `'Show all'`. */
+    showAllLabel?: string;
 }
 /**
- * Static "Other (X more)" overflow summary row. Rendered after the last
- * visible category row when `data.length > maxItems`. Non-interactive —
- * no selection, no keyboard target.
+ * Overflow summary row rendered after the last visible category row when
+ * `data.length > maxItems`. Shows `Others <count>` (count muted, no
+ * parentheses).
+ *
+ * When `onShowAll` is supplied the row is an interactive button — clicking
+ * it (or Enter/Space) expands the widget to show all categories, mirroring
+ * the Searcher's full-list view. Without `onShowAll` it stays a static,
+ * non-interactive summary (backward-compatible default).
  */
-export declare function CategoryRowOther({ hiddenCount, otherLabel, otherCountLabel, }: CategoryRowOtherProps): import("react/jsx-runtime").JSX.Element;
+export declare function CategoryRowOther({ hiddenCount, otherLabel, otherCountLabel, onShowAll, showAllLabel, }: CategoryRowOtherProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/widgets-v2/category/style.d.ts

@@ -13,6 +13,9 @@ export declare const styles: {
         gap: number;
         py: number;
     };
+    listScroll: {
+        pr: number;
+    };
     rowSingle: {
         display: string;
         flexDirection: string;
@@ -150,17 +153,33 @@ export declare const styles: {
     };
     otherRow: {
         display: string;
-        justifyContent: string;
         alignItems: string;
+        gap: number;
         py: number;
         px: number;
     };
+    otherLabelButton: {
+        cursor: string;
+        userSelect: string;
+        borderRadius: number;
+        px: number;
+        ml: number;
+        transition: string;
+        '&:hover': {
+            bgcolor: string;
+        };
+        '&:focus-visible': {
+            outline: string;
+            outlineColor: string;
+            outlineOffset: number;
+        };
+    };
     otherLabel: {
-        fontStyle: string;
         color: string;
         fontWeight: string;
     };
     otherCount: {
         color: string;
+        fontVariantNumeric: string;
     };
 };

package/dist/types/widgets-v2/category/types.d.ts

@@ -42,6 +42,8 @@ export type CategorySeriesConfig = WidgetSeries;
 export interface CategoryLabels {
     other?: string;
     otherCount?: string;
+    /** Tooltip shown over the clickable "Others" row. Defaults to `'Show all'`. */
+    showAll?: string;
 }
 /**
  * Visual density of the bar primitive. `'small'` (default) keeps the

package/dist/types/widgets-v2/index.d.ts

@@ -9,7 +9,7 @@ import { Toolbox } from './toolbox/toolbox';
 import { DEFAULT_TOOLBOX_LABELS } from './toolbox/labels';
 import { Echart, EchartUI, DEFAULT_INIT_OPTS } from './echart';
 import { DEFAULT_NOTE_LABELS } from './note/labels';
-import { Searcher, SearcherToggle, StackToggle, ZoomToggle, BrushToggle, RelativeData, Download, LockSelection, ChangeColumn } from './actions';
+import { Searcher, SearcherToggle, StackToggle, ShowAllToggle, ZoomToggle, BrushToggle, RelativeData, Download, LockSelection, ChangeColumn } from './actions';
 import { Formula, FormulaUI } from './formula';
 import { Markdown, MarkdownUI } from './markdown';
 import { Spread, SpreadUI } from './spread';
@@ -59,6 +59,7 @@ export declare const Widget: {
     readonly Searcher: typeof Searcher;
     readonly SearcherToggle: typeof SearcherToggle;
     readonly StackToggle: typeof StackToggle;
+    readonly ShowAllToggle: typeof ShowAllToggle;
     readonly ZoomToggle: typeof ZoomToggle;
     readonly BrushToggle: typeof BrushToggle;
     readonly RelativeData: typeof RelativeData;
@@ -95,7 +96,7 @@ export type { ToolboxLabels } from './toolbox/labels';
 export type { EchartProps, EchartUIProps, EchartsEventHandler } from './echart';
 export type { NoteProps, NoteMarkdownProps } from './note/widget-note';
 export type { NoteLabels } from './note/labels';
-export type { SearcherProps, SearcherToggleProps, StackToggleProps, ZoomToggleProps, BrushToggleProps, RelativeDataProps, DownloadProps, DownloadItem, FullScreenTriggerProps, FullScreenSlotProps, LockSelectionProps, LockSelectionKey, ChangeColumnProps, ChangeColumnItem, } from './actions';
+export type { SearcherProps, SearcherToggleProps, StackToggleProps, ShowAllToggleProps, ZoomToggleProps, BrushToggleProps, RelativeDataProps, DownloadProps, DownloadItem, FullScreenTriggerProps, FullScreenSlotProps, LockSelectionProps, LockSelectionKey, ChangeColumnProps, ChangeColumnItem, } from './actions';
 export type { FormulaUIProps, FormulaDataItem, FormulaWidgetData, } from './formula';
 export type { MarkdownUIProps, MarkdownWidgetData } from './markdown';
 export type { PieDatum, PieWidgetData } from './pie';

package/dist/types/widgets-v2/selection-summary/labels.d.ts

@@ -1,6 +1,11 @@
+import { ReactNode } from 'react';
 export interface SelectionSummaryLabels {
-    allSelected: string;
-    selections: (count: number) => string;
+    /**
+     * Optional custom renderer for the count. Defaults to the built-in two-tone
+     * `selected / total` rendering. Receives the already-resolved displayed
+     * number (which equals `total` when nothing is selected).
+     */
+    summary?: (selected: number, total: number) => ReactNode;
     clear: string;
 }
 export declare const DEFAULT_SELECTION_SUMMARY_LABELS: SelectionSummaryLabels;

package/dist/types/widgets-v2/selection-summary/selection-summary.d.ts

@@ -4,19 +4,26 @@ import { SelectionSummaryLabels } from './labels';
 export interface SelectionSummaryProps {
     /** Number of currently selected items. */
     count: number;
-    /** Optional total — when 0 the component renders nothing (no data to summarize). */
+    /** Optional total — when `undefined` or `0` the component renders nothing (no data). */
     total?: number;
-    /** Clear callback. Shown only when count > 0. */
+    /** Clear callback. The Clear control is shown only when `count > 0` and `onClear` is provided. */
     onClear?: () => void;
     labels?: Partial<SelectionSummaryLabels>;
     icon?: ComponentType<SvgIconProps>;
     iconProps?: SvgIconProps;
 }
 /**
+ * Renders a `selected / total` count.
+ *
  * Render rules:
- *   - `total === 0` → render nothing.
- *   - `count === 0` → render `labels.allSelected` (matches v1 default),
- *     prefixed with the optional `icon` glyph when provided.
- *   - `count > 0`   → render `labels.selections(count)` + Clear (when `onClear`).
+ *   - `!total` (undefined or 0) → render nothing (no data to summarize).
+ *   - `count === 0` → display `total / total` (everything is implicitly in
+ *     scope); no Clear button.
+ *   - `count > 0` → display `count / total` + Clear (when `onClear` is given).
+ *
+ * The count is two-tone by default (selected number bold/`text.primary`,
+ * ` / total` in `text.secondary`). Pass `labels.summary` to render a custom
+ * node instead — it receives the already-resolved displayed number (which
+ * equals `total` when nothing is selected).
  */
 export declare function SelectionSummary({ count, total, onClear, labels, icon: Icon, iconProps, }: SelectionSummaryProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/types/widgets-v2/selection-summary/style.d.ts

@@ -8,6 +8,21 @@ export declare const styles: {
     label: {
         color: "text.secondary";
     };
+    count: {
+        display: "inline-flex";
+        alignItems: "baseline";
+        gap: number;
+    };
+    selected: {
+        color: "text.primary";
+        fontWeight: number;
+    };
+    separator: {
+        color: "text.secondary";
+    };
+    total: {
+        color: "text.secondary";
+    };
     clear: {
         color: "primary.main";
         cursor: "pointer";