@carto/ps-react-ui 5.1.0 → 6.0.0

package/src/widgets-v2/category/components/category-row-other.tsx

@@ -1,84 +0,0 @@
-import type { KeyboardEvent } from 'react'
-import { Box, Typography } from '@mui/material'
-import { Tooltip } from '../../../components'
-import { styles } from '../style'
-
-export interface CategoryRowOtherProps {
-  hiddenCount: number
-  /** Label for the overflow row. Defaults to `'Others'`. */
-  otherLabel?: string
-  /** 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
-}
-
-/**
- * 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 function CategoryRowOther({
-  hiddenCount,
-  otherLabel = 'Others',
-  otherCountLabel = '{count}',
-  onShowAll,
-  showAllLabel = 'Show all',
-}: CategoryRowOtherProps) {
-  const countText = otherCountLabel.replace('{count}', String(hiddenCount))
-
-  const count = (
-    <Typography variant='body2' sx={styles.otherCount}>
-      {countText}
-    </Typography>
-  )
-
-  if (!onShowAll) {
-    return (
-      <Box sx={styles.otherRow}>
-        <Typography variant='body2' sx={styles.otherLabel}>
-          {otherLabel}
-        </Typography>
-        {count}
-      </Box>
-    )
-  }
-
-  const handleKey = (e: KeyboardEvent<HTMLSpanElement>): void => {
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault()
-      onShowAll()
-    }
-  }
-
-  // Only the label is the click target; the count stays static beside it.
-  return (
-    <Box sx={styles.otherRow}>
-      <Tooltip title={showAllLabel}>
-        <Typography
-          variant='body2'
-          component='span'
-          role='button'
-          tabIndex={0}
-          onClick={onShowAll}
-          onKeyDown={handleKey}
-          sx={{ ...styles.otherLabel, ...styles.otherLabelButton }}
-        >
-          {otherLabel}
-        </Typography>
-      </Tooltip>
-      {count}
-    </Box>
-  )
-}

package/src/widgets-v2/category/components/category-row-single.tsx

@@ -1,76 +0,0 @@
-import type { KeyboardEvent } from 'react'
-import { Box, Typography } from '@mui/material'
-import { CategoryBar } from './category-bar'
-import type { CategoryKey, CategorySize } from '../types'
-import { styles } from '../style'
-
-export interface CategoryRowSingleProps {
-  /** Raw category key — what gets emitted to `onToggle` regardless of formatter. */
-  name: CategoryKey
-  /** Display label (post-`labelFormatter`). Falls back to `name` when omitted. */
-  displayName?: string | number
-  value: number
-  maxValue: number
-  color: string
-  formatter: (n: number) => string
-  selected: boolean
-  onToggle: (name: CategoryKey) => void
-  /** Bar visual density. Forwarded to {@link CategoryBar}. */
-  size?: CategorySize
-}
-
-/**
- * Single-series category row: `[label] [bar] [value]` grid. Click /
- * Enter / Space toggles `name` in/out of the selection set via
- * `onToggle`. Selection key is always the raw `name` — `displayName` is
- * presentation only.
- *
- * Visual selection / dim signal lives ENTIRELY in the bar color
- * (`color` prop) — computed upstream by `CategoryUI` (real palette
- * color when selected or no-selection; `theme.palette.action.disabled`
- * when a selection exists and this row isn't in it). The row itself
- * has no bg tint, no opacity rule.
- */
-export function CategoryRowSingle({
-  name,
-  displayName,
-  value,
-  maxValue,
-  color,
-  formatter,
-  selected,
-  onToggle,
-  size,
-}: CategoryRowSingleProps) {
-  const handleKey = (e: KeyboardEvent<HTMLDivElement>): void => {
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault()
-      onToggle(name)
-    }
-  }
-  return (
-    <Box
-      role='button'
-      aria-pressed={selected}
-      tabIndex={0}
-      onClick={() => onToggle(name)}
-      onKeyDown={handleKey}
-      sx={styles.rowSingle}
-    >
-      <Box sx={styles.rowHeader}>
-        <Typography variant='body2' sx={styles.name}>
-          {displayName ?? name}
-        </Typography>
-        <Typography variant='body2' sx={styles.value}>
-          {formatter(value)}
-        </Typography>
-      </Box>
-      <CategoryBar
-        value={value}
-        maxValue={maxValue}
-        color={color}
-        size={size}
-      />
-    </Box>
-  )
-}

package/src/widgets-v2/category/index.ts

@@ -1,32 +0,0 @@
-export { Category, type CategoryProps } from './category'
-export { CategoryUI, type CategoryUIProps } from './category-ui'
-export { CategorySkeleton, type CategorySkeletonProps } from './skeleton'
-export { createCategoryDownloadConfig } from './download'
-
-// Sub-components — subpath-only (not on the curated `Widget` namespace).
-export { CategoryBar, type CategoryBarProps } from './components/category-bar'
-export {
-  CategoryRowSingle,
-  type CategoryRowSingleProps,
-} from './components/category-row-single'
-export {
-  CategoryRowMulti,
-  type CategoryRowMultiProps,
-} from './components/category-row-multi'
-export {
-  CategoryRowOther,
-  type CategoryRowOtherProps,
-} from './components/category-row-other'
-export {
-  CategoryLegend,
-  type CategoryLegendProps,
-} from './components/category-legend'
-
-export type {
-  CategoryDataItem,
-  CategoryWidgetData,
-  CategoryKey,
-  CategorySeriesConfig,
-  CategoryLabels,
-  CategorySize,
-} from './types'

package/src/widgets-v2/category/skeleton.tsx

@@ -1,74 +0,0 @@
-import { Box, Skeleton } from '@mui/material'
-import type { SxProps, Theme } from '@mui/material'
-import type { CategorySize } from './types'
-
-const styles = {
-  root: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: 1,
-    py: 0.5,
-  },
-  // Mirror the real row layout: label + value on top, bar below.
-  row: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: 0.5,
-  },
-  rowHeader: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    gap: 1,
-  },
-  // Small fixed-width shimmer pills — matches the visual density of the
-  // real label / value cells without claiming the full row width.
-  name: { height: 14, width: 80 },
-  value: { height: 14, width: 48 },
-} satisfies Record<string, SxProps<Theme>>
-
-// Bar shimmer height matches the live bar track for each size variant so
-// the skeleton doesn't visibly resize the row on data settle.
-const BAR_HEIGHT: Record<CategorySize, number> = {
-  small: 4,
-  medium: 12,
-}
-
-// Varied widths give the bar shimmer a more realistic, less uniform feel.
-// Cycles when `rows > WIDTH_PATTERNS.length`.
-const WIDTH_PATTERNS = ['95%', '80%', '55%', '75%', '60%']
-
-export interface CategorySkeletonProps {
-  rows?: number
-  /**
-   * Visual density. Mirrors the live widget's `size` prop so the loading
-   * shimmer's bar height matches what's about to render — no row jump
-   * on data settle.
-   */
-  size?: CategorySize
-}
-
-export function CategorySkeleton({
-  rows = 5,
-  size = 'small',
-}: CategorySkeletonProps) {
-  return (
-    <Box sx={styles.root}>
-      {Array.from({ length: rows }).map((_, i) => (
-        <Box key={`row-${i}`} sx={styles.row}>
-          <Box sx={styles.rowHeader}>
-            <Skeleton variant='rectangular' sx={styles.name} />
-            <Skeleton variant='rectangular' sx={styles.value} />
-          </Box>
-          <Skeleton
-            variant='rectangular'
-            sx={{
-              height: BAR_HEIGHT[size],
-              width: WIDTH_PATTERNS[i % WIDTH_PATTERNS.length],
-            }}
-          />
-        </Box>
-      ))}
-    </Box>
-  )
-}

package/src/widgets-v2/category/style.ts

@@ -1,329 +0,0 @@
-import type { SxProps, Theme } from '@mui/material'
-import type { CategorySize } from './types'
-
-// Size-keyed bar styles — scoped strictly to the bar primitive
-// (track + fill height & corner radius). `small` preserves the
-// historical look (4px-tall pill); `medium` renders a 12px-tall track
-// with a 2px corner radius. Every other token (gap, padding, hover,
-// transitions, label/value typography) is size-invariant.
-const bar: Record<CategorySize, SxProps<Theme>> = {
-  small: {
-    position: 'relative',
-    height: 4,
-    bgcolor: 'action.hover',
-    borderRadius: 1,
-    overflow: 'hidden',
-    transition: 'background-color 150ms ease',
-  },
-  medium: {
-    position: 'relative',
-    height: 12,
-    bgcolor: 'action.hover',
-    borderRadius: 0.25,
-    overflow: 'hidden',
-    transition: 'background-color 150ms ease',
-  },
-}
-
-const barFill: Record<CategorySize, SxProps<Theme>> = {
-  small: {
-    position: 'absolute',
-    inset: '0 auto 0 0',
-    borderRadius: 1,
-    transition:
-      'width 300ms ease-in-out, background-color 150ms ease, filter 150ms ease',
-  },
-  medium: {
-    position: 'absolute',
-    inset: '0 auto 0 0',
-    borderRadius: 0.25,
-    transition:
-      'width 300ms ease-in-out, background-color 150ms ease, filter 150ms ease',
-  },
-}
-
-// Square-cornered segment for the stacked bar. Adjacent segments meet
-// cleanly; the parent `bar[size]` track clips the outer ends via its
-// own borderRadius + overflow:hidden, so the stacked bar still has the
-// same rounded silhouette as a single `CategoryBar`.
-const stackedSegment: Record<CategorySize, SxProps<Theme>> = {
-  small: {
-    position: 'absolute',
-    top: 0,
-    bottom: 0,
-    transition:
-      'left 300ms ease-in-out, width 300ms ease-in-out, background-color 150ms ease, filter 150ms ease',
-  },
-  medium: {
-    position: 'absolute',
-    top: 0,
-    bottom: 0,
-    transition:
-      'left 300ms ease-in-out, width 300ms ease-in-out, background-color 150ms ease, filter 150ms ease',
-  },
-}
-
-export const styles = {
-  // ── Top-level container ────────────────────────────────────────────
-  root: {
-    display: 'flex',
-    flexDirection: 'column',
-    position: 'relative',
-    width: '100%',
-  },
-  // Flat list of category rows. Holds both single + multi rows.
-  list: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: 1,
-    py: 0.5,
-  },
-  // Layered on `list` only in scroll mode (`maxItems === 0`): right padding
-  // so the bars + right-aligned values clear the scrollbar. Right side only
-  // — the left edge stays at 0 so content stays aligned with the capped
-  // view. `overflowY` + the dynamic `maxHeight` remain on the inline style.
-  listScroll: {
-    pr: 1,
-  },
-
-  // ── Single-series row ─────────────────────────────────────────────
-  // v1 layout: label + value share a top flex row (justify-between); the
-  // bar fills the row width below. Mirrors `rowMulti` for visual
-  // consistency.
-  rowSingle: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: 0.5,
-    // py: 0.5,
-    // px: 0.5,
-    cursor: 'pointer',
-    userSelect: 'none',
-    transition: 'background-color 80ms ease',
-    // Hovering anywhere in the row also brightens the bar fill, matching
-    // what the bar got from `bar:hover` before. `data-bar-fill` is set
-    // on `barFill` by <CategoryBar>; descendant selector reaches it
-    // through `bar` in single rows and through `multiBarRow > bar` in
-    // multi rows.
-    '&:hover [data-bar-fill="true"]': {
-      filter: 'brightness(1.2)',
-    },
-    '&:focus-visible': {
-      outline: '2px solid',
-      outlineColor: 'primary.main',
-      outlineOffset: -2,
-    },
-  },
-  // Top row of `rowSingle`: label on the left, value on the right.
-  rowHeader: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    gap: 1,
-  },
-  // ── Multi-series row ──────────────────────────────────────────────
-  // Flex column: label fills the top row; bar+value pairs stack below.
-  // Bars get full track width — better legibility for N>=2 series than a
-  // shared grid would give.
-  rowMulti: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: 0.5,
-    // py: 0.5,
-    // px: 0.5,
-    cursor: 'pointer',
-    userSelect: 'none',
-    transition: 'background-color 80ms ease',
-    // Row-hover brightens every bar fill inside the multi-row.
-    '&:hover [data-bar-fill="true"]': {
-      filter: 'brightness(1.2)',
-    },
-    '&:focus-visible': {
-      outline: '2px solid',
-      outlineColor: 'primary.main',
-      outlineOffset: -2,
-    },
-  },
-  // ── Row labels / values ───────────────────────────────────────────
-  // Matches v1: name uses medium-weight body2 in primary text color,
-  // value uses regular body2 in secondary text color. Same font size,
-  // visual hierarchy via weight + color.
-  name: {
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis',
-    color: 'text.primary',
-    fontWeight: 'medium',
-  },
-  multiName: {
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis',
-    color: 'text.primary',
-    fontWeight: 'medium',
-  },
-  value: {
-    color: 'text.secondary',
-    fontVariantNumeric: 'tabular-nums',
-    // Right-align + minWidth keeps `rowMulti`'s per-bar value column
-    // tidy (where the bar grows on the left and the number sits at a
-    // fixed right edge). `rowSingle` uses `rowHeader`'s flex
-    // justify-between to push the value to the trailing edge, so the
-    // minWidth here is also harmless in that context.
-    minWidth: 48,
-    textAlign: 'right',
-  },
-
-  // ── Bar (track + fill) ────────────────────────────────────────────
-  // Size-keyed maps live above the `styles` object; `<CategoryBar>` picks
-  // the variant via its `size` prop. Hover brightening still fires from
-  // the parent row (`&:hover [data-bar-fill]`), so it works regardless
-  // of which size variant the bar uses.
-  bar,
-  barFill,
-  stackedSegment,
-
-  // ── Multi-series internals ────────────────────────────────────────
-  // One [bar | value] flex row per series, inside `rowMulti`'s column.
-  multiBarRow: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: 1,
-  },
-  multiBarContainer: {
-    flex: 1,
-  },
-
-  // ── Stacked-mode row ──────────────────────────────────────────────
-  // Mirror `rowMulti`'s outer shape (click target + hover brightening +
-  // focus ring) but stack three children vertically: header line, bar,
-  // breakdown line.
-  rowStacked: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: 0.5,
-    cursor: 'pointer',
-    userSelect: 'none',
-    transition: 'background-color 80ms ease',
-    '&:hover [data-bar-fill="true"]': {
-      filter: 'brightness(1.2)',
-    },
-    '&:focus-visible': {
-      outline: '2px solid',
-      outlineColor: 'primary.main',
-      outlineOffset: -2,
-    },
-  },
-  stackedHeader: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    gap: 1,
-  },
-  // Right-aligned total in the header. Tabular-nums keeps totals lined
-  // up vertically across rows; minWidth reuses the per-series-value
-  // column width so the right edge sits at the same spot as `rowMulti`'s
-  // value column when both modes co-exist in the same widget card.
-  stackedTotal: {
-    color: 'text.primary',
-    fontWeight: 'medium',
-    fontVariantNumeric: 'tabular-nums',
-    minWidth: 48,
-    textAlign: 'right',
-  },
-  // Flex row of "{seriesName}: {value}" pairs. Wraps gracefully when
-  // series names are long or there are many series.
-  stackedBreakdown: {
-    display: 'flex',
-    flexWrap: 'wrap',
-    columnGap: 2,
-    rowGap: 0.25,
-  },
-  stackedBreakdownItem: {
-    color: 'text.secondary',
-    fontVariantNumeric: 'tabular-nums',
-  },
-
-  // ── Legend (sticky bottom) ────────────────────────────────────────
-  legend: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: 2,
-    flexWrap: 'wrap',
-    pt: 2,
-    mt: 2,
-    position: 'sticky',
-    bottom: 0,
-    bgcolor: 'background.paper',
-    borderTop: (theme: Theme) => `1px solid ${theme.palette.divider}`,
-  },
-  legendItem: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: 1,
-    cursor: 'pointer',
-  },
-  legendItemHidden: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: 1,
-    cursor: 'pointer',
-    opacity: 0.5,
-  },
-  legendDot: {
-    width: 14,
-    height: 14,
-    borderRadius: '50%',
-  },
-  legendLabel: {
-    color: 'text.secondary',
-    textTransform: 'uppercase',
-    fontWeight: 'medium',
-  },
-
-  // ── "Other" overflow row ──────────────────────────────────────────
-  // Left-aligned `Others <count>` — the label sits next to a muted count
-  // (no parentheses). Only the label is the click target when interactive;
-  // the count is always static text beside it.
-  otherRow: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: 1,
-    py: 0.5,
-    px: 0.5,
-  },
-  // Interactive affordances layered onto the "Others" label only (cursor,
-  // hover tint, focus ring). A negative LEFT margin + matching padding keep
-  // the hover pill breathing without shifting the label's text edge (it
-  // stays aligned with the category rows above). No right margin, so the
-  // row `gap` is preserved between the pill and the count.
-  otherLabelButton: {
-    cursor: 'pointer',
-    userSelect: 'none',
-    borderRadius: 1,
-    px: 0.5,
-    ml: -0.5,
-    transition: 'background-color 80ms ease',
-    '&:hover': {
-      bgcolor: 'action.hover',
-    },
-    '&:focus-visible': {
-      outline: '2px solid',
-      outlineColor: 'primary.main',
-      outlineOffset: 2,
-    },
-  },
-  otherLabel: {
-    color: 'text.primary',
-    fontWeight: 'medium',
-  },
-  otherCount: {
-    color: 'text.secondary',
-    fontVariantNumeric: 'tabular-nums',
-  },
-  // `bar` / `barFill` are size-keyed (`Record<CategorySize, SxProps>`);
-  // every other entry is a single `SxProps<Theme>`. The mixed shape means
-  // we can't apply the file-wide `satisfies Record<string, SxProps<Theme>>`
-  // constraint that the other widget style files use — consumers of
-  // individual tokens still get full type-checking at the call site via
-  // the typed `Box`/`Typography` `sx` prop.
-}

package/src/widgets-v2/category/types.ts

@@ -1,61 +0,0 @@
-import type { WidgetSeries } from '../types'
-
-/** A single row in a Category widget. `name` is the category key. */
-export interface CategoryDataItem {
-  name: string | number
-  value: number
-  /** Optional per-row color override (wins over series + palette). */
-  color?: string
-}
-
-/**
- * Category widget data — array of series, each a flat list of `{name, value}`.
- *
- * Single-series (`data.length === 1`) renders one bar per row.
- * Multi-series (`data.length > 1`) groups items by `name` across series and
- * renders N vertically-stacked bars per row, with a sticky legend at the
- * bottom when `series` metadata is supplied.
- */
-export type CategoryWidgetData = readonly (readonly CategoryDataItem[])[]
-
-/**
- * The keyspace of selectable items. Per the destination-owned selection
- * principle, the consumer keeps this in their own store.
- */
-export type CategoryKey = string | number
-
-/**
- * Per-series metadata. Supplied to enable the legend and override the
- * auto-assigned palette color for a given series index. Length should
- * mirror `data.length` for a full legend; shorter/longer arrays degrade
- * gracefully (extra entries ignored; missing entries get palette
- * defaults and are absent from the legend).
- */
-/**
- * Per-series metadata. Type alias of the cross-widget
- * {@link WidgetSeries} shape (`{ name, color? }`) so Category, Formula,
- * Spread, and the echart-based widgets all consume the same input
- * shape. Kept as a named export for backwards compatibility.
- */
-export type CategorySeriesConfig = WidgetSeries
-
-/**
- * Labels for the "Other" overflow row (rendered when `data.length`
- * exceeds `maxItems`). `{count}` in `otherCount` is replaced with the
- * number of hidden categories.
- */
-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
- * original 4px-tall, fully-rounded track. `'medium'` renders a 12px-tall
- * track with a 2px corner radius (squarer affordance for denser layouts).
- * Only the bar track + fill are affected — row layout, label typography,
- * value column, legend, and hover affordance are unchanged.
- */
-export type CategorySize = 'small' | 'medium'