@carto/ps-react-ui 4.23.0 → 4.25.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/dist/{actions-D7LB9DvT.js → actions-B1ss030_.js} +187 -181
  2. package/dist/actions-B1ss030_.js.map +1 -0
  3. package/dist/category-DuKx_CJX.js +933 -0
  4. package/dist/category-DuKx_CJX.js.map +1 -0
  5. package/dist/legend.js +34 -21
  6. package/dist/legend.js.map +1 -1
  7. package/dist/types/legend/stores/types.d.ts +4 -2
  8. package/dist/types/widgets-v2/actions/searcher/filter.d.ts +3 -2
  9. package/dist/types/widgets-v2/category/category-ui.d.ts +10 -2
  10. package/dist/types/widgets-v2/category/category.d.ts +7 -1
  11. package/dist/types/widgets-v2/category/components/category-bar-stacked.d.ts +8 -1
  12. package/dist/types/widgets-v2/category/components/category-bar.d.ts +24 -2
  13. package/dist/types/widgets-v2/category/components/category-row-multi.d.ts +3 -1
  14. package/dist/types/widgets-v2/category/components/category-row-single.d.ts +3 -1
  15. package/dist/types/widgets-v2/category/components/category-row-stacked.d.ts +10 -1
  16. package/dist/types/widgets-v2/category/style.d.ts +33 -6
  17. package/dist/types/widgets-v2/wrapper/style.d.ts +31 -2
  18. package/dist/types/widgets-v2/wrapper/widget-actions.d.ts +2 -2
  19. package/dist/types/widgets-v2/wrapper/widget-wrapper.d.ts +2 -2
  20. package/dist/widgets-v2/actions.js +1 -1
  21. package/dist/widgets-v2/category.js +1 -1
  22. package/dist/widgets-v2.js +342 -295
  23. package/dist/widgets-v2.js.map +1 -1
  24. package/package.json +1 -1
  25. package/src/legend/components/legend-item/legend-item-ui.test.tsx +22 -1
  26. package/src/legend/components/legend-ramp/legend-ramp-ui.tsx +22 -6
  27. package/src/legend/stores/types.ts +6 -11
  28. package/src/widgets-v2/actions/searcher/filter.test.ts +28 -0
  29. package/src/widgets-v2/actions/searcher/filter.ts +22 -4
  30. package/src/widgets-v2/actions/searcher/searcher-toggle.tsx +9 -4
  31. package/src/widgets-v2/actions/searcher/searcher.test.tsx +22 -0
  32. package/src/widgets-v2/category/category-ui.test.tsx +139 -0
  33. package/src/widgets-v2/category/category-ui.tsx +64 -11
  34. package/src/widgets-v2/category/category.test.tsx +67 -0
  35. package/src/widgets-v2/category/category.tsx +32 -15
  36. package/src/widgets-v2/category/components/category-bar-stacked.test.tsx +18 -0
  37. package/src/widgets-v2/category/components/category-bar-stacked.tsx +42 -29
  38. package/src/widgets-v2/category/components/category-bar.test.tsx +66 -0
  39. package/src/widgets-v2/category/components/category-bar.tsx +65 -9
  40. package/src/widgets-v2/category/components/category-row-multi.tsx +21 -0
  41. package/src/widgets-v2/category/components/category-row-single.tsx +4 -0
  42. package/src/widgets-v2/category/components/category-row-stacked.tsx +24 -1
  43. package/src/widgets-v2/category/style.ts +58 -14
  44. package/src/widgets-v2/wrapper/style.ts +38 -2
  45. package/src/widgets-v2/wrapper/widget-actions.tsx +2 -2
  46. package/src/widgets-v2/wrapper/widget-wrapper.test.tsx +32 -2
  47. package/src/widgets-v2/wrapper/widget-wrapper.tsx +58 -32
  48. package/dist/actions-D7LB9DvT.js.map +0 -1
  49. package/dist/category-Ca5XDx0N.js +0 -839
  50. package/dist/category-Ca5XDx0N.js.map +0 -1
@@ -72,7 +72,8 @@ export interface LegendRampVariable {
72
72
  * Ordered low→high stops. Discrete ramps **require `colors.length + 1`**
73
73
  * stops — the boundaries between color steps, including both outer edges —
74
74
  * and each label is centered on its boundary line (keep labels short, e.g.
75
- * `20K`; there is no collision handling). A discrete ramp with any other
75
+ * `20K`; there is no collision handling; pass `''` to hide one — each step's
76
+ * tooltip still shows its full range). A discrete ramp with any other
76
77
  * stop count is incoherent and renders an inline error instead of the bar.
77
78
  * Continuous ramps show only the first/last endpoints.
78
79
  */
@@ -86,7 +87,8 @@ export interface LegendRampVariable {
86
87
  */
87
88
  avg?: number;
88
89
  /**
89
- * Formats `avg` for its tooltip. Default `String(avg)` — pass e.g.
90
+ * Formats `avg` and, on discrete ramps, the stop values shown in each
91
+ * step's range tooltip. Default `String(value)` — pass e.g.
90
92
  * `(v) => formatNumber(v, 'es-ES')` or `(v) => `${v}%``. Use a stable
91
93
  * reference (same contract as the other variable fields).
92
94
  */
@@ -1,6 +1,7 @@
1
1
  /**
2
2
  * Filters a 2D series of `{name, ...}` records by case-insensitive substring on
3
- * the `name` field. Keeps the dataset shape (one inner array per series).
3
+ * the label the user sees: `labelFormatter(name)` when a formatter is given,
4
+ * `name` otherwise. Keeps the dataset shape (one inner array per series).
4
5
  * Used by the Searcher action's data transform.
5
6
  */
6
- export declare function filterBySearchText(input: unknown, search: string): unknown;
7
+ export declare function filterBySearchText(input: unknown, search: string, labelFormatter?: (value: string | number) => string | number): unknown;
@@ -51,8 +51,16 @@ export interface CategoryUIProps {
51
51
  * overflow row stays a static summary.
52
52
  */
53
53
  onShowAll?: () => void;
54
- /** Manual override for the bar-width denominator. */
54
+ /**
55
+ * Manual override for the top of the bar scale. With signed data it is a
56
+ * magnitude: the scale stays symmetric around the centred zero.
57
+ */
55
58
  maxOverride?: number;
59
+ /**
60
+ * Manual override for the bottom of the bar scale, the negative mirror of
61
+ * `maxOverride`. Ignored unless negative.
62
+ */
63
+ minOverride?: number;
56
64
  /**
57
65
  * Visual density of the bar primitive. `'small'` (default) keeps the
58
66
  * historical 4px-tall pill; `'medium'` switches to a 12px-tall track
@@ -93,4 +101,4 @@ export interface CategoryUIProps {
93
101
  * Returns `null` when there's nothing to render — `Widget.State` is the
94
102
  * empty-state authority in the canonical compositor.
95
103
  */
96
- export declare function CategoryUI({ data, selection, onSelectionChange, formatter, labelFormatter, series, maxItems, labels, onShowAll, maxOverride, size, stacked, hiddenSeries: hiddenSeriesProp, onHiddenSeriesChange, }: CategoryUIProps): import("react").JSX.Element | null;
104
+ export declare function CategoryUI({ data, selection, onSelectionChange, formatter, labelFormatter, series, maxItems, labels, onShowAll, maxOverride, minOverride, size, stacked, hiddenSeries: hiddenSeriesProp, onHiddenSeriesChange, }: CategoryUIProps): import("react").JSX.Element | null;
@@ -32,6 +32,12 @@ export interface CategoryProps {
32
32
  * regardless of the data.
33
33
  */
34
34
  maxOverride?: number;
35
+ /**
36
+ * Bottom of the bar scale for negative values, the mirror of
37
+ * `maxOverride`. Auto-filled from `rawData` the same way, so the zero
38
+ * does not move when the Searcher hides every negative row.
39
+ */
40
+ minOverride?: number;
35
41
  /**
36
42
  * Visual density of the bar primitive. `'small'` (default) keeps the
37
43
  * historical 4px-tall pill; `'medium'` switches to a 12px-tall track
@@ -52,4 +58,4 @@ export interface CategoryProps {
52
58
  * `onSelectionChange` follow the destination-owned principle: the
53
59
  * consumer keeps the list in their own store and passes it through.
54
60
  */
55
- export declare function Category({ selection, onSelectionChange, series, maxItems, labels, onShowAll, maxOverride, size, stacked, }: CategoryProps): import("react").JSX.Element;
61
+ export declare function Category({ selection, onSelectionChange, series, maxItems, labels, onShowAll, maxOverride, minOverride, size, stacked, }: CategoryProps): import("react").JSX.Element;
@@ -10,6 +10,13 @@ export interface CategoryBarStackedProps {
10
10
  * so cross-row comparison is preserved.
11
11
  */
12
12
  maxValue: number;
13
+ /**
14
+ * Where the zero sits, as a percentage of the track. `0` (default) is the
15
+ * positive-only layout. Positive segments stack rightwards from it and
16
+ * negative ones leftwards, both scaled by `maxValue` against the full
17
+ * track width.
18
+ */
19
+ zeroPct?: number;
13
20
  /** Visual density. Forwarded to the track styling; segments inherit height. */
14
21
  size?: CategorySize;
15
22
  }
@@ -25,4 +32,4 @@ export interface CategoryBarStackedProps {
25
32
  * via the `colors` prop. Each segment carries `data-bar-fill='true'` so the
26
33
  * existing row-hover brightening selector still fires on every segment.
27
34
  */
28
- export declare function CategoryBarStacked({ values, colors, maxValue, size, }: CategoryBarStackedProps): import("react").JSX.Element;
35
+ export declare function CategoryBarStacked({ values, colors, maxValue, zeroPct, size, }: CategoryBarStackedProps): import("react").JSX.Element;
@@ -1,9 +1,17 @@
1
+ import { ReactNode } from 'react';
1
2
  import { CategorySize } from '../types.js';
2
3
  export interface CategoryBarProps {
3
4
  /** Numeric value driving the fill width. */
4
5
  value: number;
5
- /** Denominator for the percentage fill. `0` → empty bar (no division by zero). */
6
+ /** Upper end of the domain. `maxValue === minValue` → empty bar (no division by zero). */
6
7
  maxValue: number;
8
+ /**
9
+ * Lower end of the domain. `0` (default) keeps the positive-only bar
10
+ * anchored at the left edge; a negative value moves the zero to
11
+ * `-minValue / (maxValue - minValue)` and bars grow from there in either
12
+ * direction, keeping the fill `color` whatever the sign.
13
+ */
14
+ minValue?: number;
7
15
  /** Fill color. Honors any CSS color or MUI theme token. */
8
16
  color: string;
9
17
  /**
@@ -13,6 +21,11 @@ export interface CategoryBarProps {
13
21
  * size-invariant.
14
22
  */
15
23
  size?: CategorySize;
24
+ /**
25
+ * Draw the zero tick when the domain is signed. `false` when the parent
26
+ * draws its own zero line (multi-series rows span it across every bar).
27
+ */
28
+ zeroTick?: boolean;
16
29
  }
17
30
  /**
18
31
  * Single horizontal bar (track + proportional fill). Pure presentation.
@@ -20,4 +33,13 @@ export interface CategoryBarProps {
20
33
  * both — bars stay vivid regardless of selection state (per the v2
21
34
  * "row-bg + row-dim, never muted bar" rule).
22
35
  */
23
- export declare function CategoryBar({ value, maxValue, color, size, }: CategoryBarProps): import("react").JSX.Element;
36
+ export declare function CategoryBar({ value, maxValue, minValue, color, size, zeroTick, }: CategoryBarProps): import("react").JSX.Element;
37
+ /**
38
+ * Wraps a bar track and, when `zeroPct` is set, marks the zero with a tick
39
+ * that overhangs the track. Positive-only, negative-only and all-zero bars
40
+ * pass `undefined` and get no tick.
41
+ */
42
+ export declare function ZeroTickWrap({ zeroPct, children, }: {
43
+ zeroPct: number | undefined;
44
+ children: ReactNode;
45
+ }): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
@@ -10,6 +10,8 @@ export interface CategoryRowMultiProps {
10
10
  colors: readonly string[];
11
11
  /** Shared max across all series + rows (or `maxOverride`). */
12
12
  maxValue: number;
13
+ /** Lower end of the shared domain (`0` for positive-only data). */
14
+ minValue?: number;
13
15
  formatter: (n: number) => string;
14
16
  selected: boolean;
15
17
  onToggle: (name: CategoryKey) => void;
@@ -28,4 +30,4 @@ export interface CategoryRowMultiProps {
28
30
  * rows receive their real palette colors. Computed upstream by
29
31
  * `CategoryUI`. The row itself has no bg tint, no opacity rule.
30
32
  */
31
- export declare function CategoryRowMulti({ name, displayName, values, colors, maxValue, formatter, selected, onToggle, size, }: CategoryRowMultiProps): import("react").JSX.Element;
33
+ export declare function CategoryRowMulti({ name, displayName, values, colors, maxValue, minValue, formatter, selected, onToggle, size, }: CategoryRowMultiProps): import("react").JSX.Element;
@@ -6,6 +6,8 @@ export interface CategoryRowSingleProps {
6
6
  displayName?: string | number;
7
7
  value: number;
8
8
  maxValue: number;
9
+ /** Lower end of the shared domain (`0` for positive-only data). */
10
+ minValue?: number;
9
11
  color: string;
10
12
  formatter: (n: number) => string;
11
13
  selected: boolean;
@@ -25,4 +27,4 @@ export interface CategoryRowSingleProps {
25
27
  * when a selection exists and this row isn't in it). The row itself
26
28
  * has no bg tint, no opacity rule.
27
29
  */
28
- export declare function CategoryRowSingle({ name, displayName, value, maxValue, color, formatter, selected, onToggle, size, }: CategoryRowSingleProps): import("react").JSX.Element;
30
+ export declare function CategoryRowSingle({ name, displayName, value, maxValue, minValue, color, formatter, selected, onToggle, size, }: CategoryRowSingleProps): import("react").JSX.Element;
@@ -20,6 +20,11 @@ export interface CategoryRowStackedProps {
20
20
  onToggle: (name: CategoryKey) => void;
21
21
  /** Bar visual density. Forwarded to the inner {@link CategoryBarStacked}. */
22
22
  size?: CategorySize;
23
+ /**
24
+ * Where the list's zero sits (% of the track), shared by every row so the
25
+ * zero lines up: `0` positive-only, `50` signed, `100` negative-only.
26
+ */
27
+ zeroPct?: number;
23
28
  }
24
29
  /**
25
30
  * Stacked-mode category row: label + total share a header line; a single
@@ -34,10 +39,14 @@ export interface CategoryRowStackedProps {
34
39
  * total relative to other rows. The total numeric value is still shown in
35
40
  * the header so the per-row magnitude isn't lost.
36
41
  *
42
+ * Signed data diverges from `zeroPct`: positives stack rightwards and
43
+ * negatives leftwards, and whichever side is longer reaches its edge of the
44
+ * track. The header total is the signed sum.
45
+ *
37
46
  * Visual selection / dim signal lives entirely in the segment colors
38
47
  * (`colors` prop) — every series in a dimmed row receives
39
48
  * `theme.palette.action.disabled`. The bar visually collapses to a single
40
49
  * grey shape when dimmed, but the breakdown text stays at full color so the
41
50
  * per-series values remain legible.
42
51
  */
43
- export declare function CategoryRowStacked({ name, displayName, values, colors, seriesNames, formatter, selected, onToggle, size, }: CategoryRowStackedProps): import("react").JSX.Element;
52
+ export declare function CategoryRowStacked({ name, displayName, values, colors, seriesNames, formatter, selected, onToggle, size, zeroPct, }: CategoryRowStackedProps): import("react").JSX.Element;
@@ -8,15 +8,38 @@ export declare const styles: {
8
8
  width: string;
9
9
  };
10
10
  list: {
11
+ position: string;
11
12
  display: string;
12
- flexDirection: string;
13
+ gridTemplateColumns: string;
13
14
  gap: number;
14
15
  py: number;
15
16
  };
17
+ listMulti: {
18
+ gridTemplateColumns: string;
19
+ };
20
+ barWrap: {
21
+ position: string;
22
+ };
23
+ multiZeroArea: {
24
+ position: string;
25
+ inset: number;
26
+ gridColumn: string;
27
+ pointerEvents: string;
28
+ };
29
+ zeroTick: {
30
+ position: string;
31
+ top: number;
32
+ bottom: number;
33
+ width: string;
34
+ transform: string;
35
+ bgcolor: string;
36
+ pointerEvents: string;
37
+ };
16
38
  listScroll: {
17
39
  pr: number;
18
40
  };
19
41
  rowSingle: {
42
+ gridColumn: string;
20
43
  display: string;
21
44
  flexDirection: string;
22
45
  gap: number;
@@ -39,9 +62,11 @@ export declare const styles: {
39
62
  gap: number;
40
63
  };
41
64
  rowMulti: {
65
+ position: string;
66
+ gridColumn: string;
42
67
  display: string;
43
- flexDirection: string;
44
- gap: number;
68
+ gridTemplateColumns: string;
69
+ rowGap: number;
45
70
  cursor: string;
46
71
  userSelect: string;
47
72
  transition: string;
@@ -62,6 +87,7 @@ export declare const styles: {
62
87
  fontWeight: string;
63
88
  };
64
89
  multiName: {
90
+ gridColumn: string;
65
91
  overflow: string;
66
92
  whiteSpace: string;
67
93
  textOverflow: string;
@@ -73,19 +99,19 @@ export declare const styles: {
73
99
  fontVariantNumeric: string;
74
100
  minWidth: number;
75
101
  textAlign: string;
102
+ alignSelf: string;
76
103
  };
77
104
  bar: Record<CategorySize, SxProps<Theme>>;
78
105
  barFill: Record<CategorySize, SxProps<Theme>>;
79
106
  stackedSegment: Record<CategorySize, SxProps<Theme>>;
80
107
  multiBarRow: {
81
108
  display: string;
82
- alignItems: string;
83
- gap: number;
84
109
  };
85
110
  multiBarContainer: {
86
- flex: number;
111
+ alignSelf: string;
87
112
  };
88
113
  rowStacked: {
114
+ gridColumn: string;
89
115
  display: string;
90
116
  flexDirection: string;
91
117
  gap: number;
@@ -160,6 +186,7 @@ export declare const styles: {
160
186
  fontWeight: string;
161
187
  };
162
188
  otherRow: {
189
+ gridColumn: string;
163
190
  display: string;
164
191
  alignItems: string;
165
192
  gap: number;
@@ -40,14 +40,43 @@ export declare const styles: {
40
40
  height: ({ spacing }: Theme) => string;
41
41
  zIndex: number;
42
42
  };
43
+ header: {
44
+ display: "flex";
45
+ alignItems: "center";
46
+ gap: ({ spacing }: Theme) => string;
47
+ minHeight: ({ spacing }: Theme) => string;
48
+ paddingInlineEnd: ({ spacing }: Theme) => string;
49
+ };
43
50
  summary: {
51
+ flex: number;
52
+ minWidth: number;
44
53
  minHeight: ({ spacing }: Theme) => string;
54
+ paddingInlineEnd: number;
45
55
  '& .MuiAccordionSummary-content': {
46
- gap: ({ spacing }: Theme) => string;
47
- paddingInlineEnd: ({ spacing }: Theme) => string;
48
56
  alignItems: "center";
57
+ minWidth: number;
58
+ marginInlineEnd: number;
59
+ paddingInlineEnd: number;
49
60
  };
50
61
  };
62
+ headerNoIcon: {
63
+ paddingInlineEnd: ({ spacing }: Theme) => string;
64
+ };
65
+ expandIcon: {
66
+ display: "flex";
67
+ marginInlineStart: ({ spacing }: Theme) => string;
68
+ color: "text.secondary";
69
+ cursor: "pointer";
70
+ '& svg': {
71
+ width: number;
72
+ height: number;
73
+ color: "inherit";
74
+ };
75
+ transition: ({ transitions }: Theme) => string;
76
+ };
77
+ expanded: {
78
+ transform: "rotate(180deg)";
79
+ };
51
80
  summaryDisabled: {
52
81
  '&, &:hover:not(.Mui-disabled)': {
53
82
  cursor: "default";
@@ -11,8 +11,8 @@ export interface ActionsProps {
11
11
  * pointer devices), and stay full-opacity when a descendant is marked with
12
12
  * `.active` — typically applied by toggled actions.
13
13
  *
14
- * The container also stops click propagation so interacting with an action
15
- * doesn't toggle the wrapper's collapse.
14
+ * The container also stops click propagation, so a click on an action never
15
+ * reaches handlers further up the widget.
16
16
  */
17
17
  export declare function Actions({ sx, children }: ActionsProps): import("react").JSX.Element;
18
18
  export interface OptionsProps {
@@ -30,8 +30,8 @@ export interface WrapperProps {
30
30
  variant?: 'outlined' | 'elevation';
31
31
  labels?: Partial<WrapperLabels>;
32
32
  /**
33
- * Icon shown at the right edge of the summary row. Accordion rotates it
34
- * 180° automatically when the wrapper expands. Default: `ExpandMoreIcon`.
33
+ * Icon shown at the right edge of the header row, rotated 180° while the
34
+ * wrapper is expanded. Default: `ExpandMoreIcon`.
35
35
  */
36
36
  expandIcon?: ComponentType<SvgIconProps>;
37
37
  iconProps?: SvgIconProps;
@@ -1,4 +1,4 @@
1
- import { C as e, E as t, S as n, T as r, _ as i, a, b as o, c as s, d as c, f as l, g as u, h as d, i as f, l as p, m, n as h, o as g, p as _, r as v, s as y, t as b, u as x, v as S, w as C, x as w, y as T } from "../actions-D7LB9DvT.js";
1
+ import { C as e, E as t, S as n, T as r, _ as i, a, b as o, c as s, d as c, f as l, g as u, h as d, i as f, l as p, m, n as h, o as g, p as _, r as v, s as y, t as b, u as x, v as S, w as C, x as w, y as T } from "../actions-B1ss030_.js";
2
2
  import { a as E, i as D, n as O, r as k, t as A } from "../zoom-toggle-KA63b6-J.js";
3
3
  import { a as j, c as M, d as N, f as P, i as F, l as I, n as L, o as R, r as z, s as B, t as V, u as H } from "../download--wRRnf19.js";
4
4
  export { l as BrushToggle, F as CSVIcon, b as ChangeColumn, _ as DEFAULT_BRUSH_TOGGLE_LABELS, h as DEFAULT_CHANGE_COLUMN_LABELS, M as DEFAULT_DOWNLOAD_LABELS, y as DEFAULT_FULLSCREEN_LABELS, f as DEFAULT_LOCK_SELECTION_LABELS, p as DEFAULT_RELATIVE_DATA_LABELS, r as DEFAULT_SEARCHER_LABELS, S as DEFAULT_SHOW_ALL_LABELS, o as DEFAULT_STACK_TOGGLE_LABELS, O as DEFAULT_ZOOM_TOGGLE_LABELS, z as DOWNLOAD_ITEM_IDS, B as Download, g as FullScreen, v as LockSelection, j as MarkdownIcon, R as PNGIcon, s as RelativeData, d as SHOW_ALL_ID, n as Searcher, e as SearcherToggle, u as ShowAllToggle, T as StackToggle, k as ZOOM_LAYOUT, A as ZoomToggle, m as addBrush, w as addStack, D as addZoom, V as buildCsvDownloadItem, L as buildPngDownloadItem, E as createAddZoom, x as createPercentFormatter, I as downloadDOMToPNG, H as downloadToCSV, a as filterByLockedItems, t as filterBySearchText, C as setSearcherText, i as setShowAll, N as toCsvString, c as toRelativeData, P as triggerLinkDownload };
@@ -1,2 +1,2 @@
1
- import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s, t as c } from "../category-Ca5XDx0N.js";
1
+ import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s, t as c } from "../category-DuKx_CJX.js";
2
2
  export { o as Category, r as CategoryBar, e as CategoryLegend, s as CategoryRowMulti, a as CategoryRowOther, t as CategoryRowSingle, i as CategorySkeleton, n as CategoryUI, c as createCategoryDownloadConfig };