@carto/ps-react-ui 5.3.0 → 6.1.0

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

@@ -1,86 +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 CategoryRowMultiProps {
-  /** Raw category key — what gets emitted to `onToggle`. */
-  name: CategoryKey
-  /** Display label (post-`labelFormatter`). Falls back to `name`. */
-  displayName?: string | number
-  /** One value per series. `0` is rendered as an empty bar (track only). */
-  values: readonly number[]
-  /** One color per series (palette + per-series overrides resolved upstream). */
-  colors: readonly string[]
-  /** Shared max across all series + rows (or `maxOverride`). */
-  maxValue: number
-  formatter: (n: number) => string
-  selected: boolean
-  onToggle: (name: CategoryKey) => void
-  /** Bar visual density. Forwarded to every {@link CategoryBar} in the row. */
-  size?: CategorySize
-}
-
-/**
- * Multi-series category row: label spans the top; bar+value pairs stack
- * vertically below, one per series. Each bar uses the full row width
- * track (no shared grid) for legibility at N>=2 series. Click anywhere
- * in the row (label OR any bar/value) toggles selection by `name`.
- *
- * Visual selection / dim signal lives ENTIRELY in the bar colors
- * (`colors` prop) — every series in a dimmed row receives
- * `theme.palette.action.disabled`; selected / unselected-no-selection
- * rows receive their real palette colors. Computed upstream by
- * `CategoryUI`. The row itself has no bg tint, no opacity rule.
- */
-export function CategoryRowMulti({
-  name,
-  displayName,
-  values,
-  colors,
-  maxValue,
-  formatter,
-  selected,
-  onToggle,
-  size,
-}: CategoryRowMultiProps) {
-  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.rowMulti}
-    >
-      <Typography variant='body2' sx={styles.multiName}>
-        {displayName ?? name}
-      </Typography>
-      {values.map((v, i) => (
-        // Multi-bar rows iterate per series — the bar belongs to series `i`,
-        // and the row is keyed on the parent's `name`, so a composite of
-        // `name` + the series index is stable across reorders.
-        <Box key={`${name}-series-${i}`} sx={styles.multiBarRow}>
-          <Box sx={styles.multiBarContainer}>
-            <CategoryBar
-              value={v}
-              maxValue={maxValue}
-              color={colors[i] ?? ''}
-              size={size}
-            />
-          </Box>
-          <Typography variant='body2' sx={styles.value}>
-            {formatter(v)}
-          </Typography>
-        </Box>
-      ))}
-    </Box>
-  )
-}

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/download.ts

@@ -1,51 +0,0 @@
-import {
-  buildCsvDownloadItem,
-  buildPngDownloadItem,
-  type DownloadContext,
-  type DownloadItem,
-} from '../actions/download'
-import type { CategoryWidgetData } from './types'
-
-/**
- * Download menu items for the Category widget. Always includes a CSV item
- * with `series, name, value` columns (one row per item). When
- * `getCaptureEl` is supplied, prepends a PNG item that rasterises the
- * captured element via `html2canvas`.
- */
-export function createCategoryDownloadConfig(args: {
-  filename: string
-  getData: (ctx: DownloadContext) => CategoryWidgetData
-  seriesNames?: readonly string[]
-  getCaptureEl?: (ctx: DownloadContext) => HTMLElement | null
-  pngPixelRatio?: number
-  pngBackgroundColor?: string | null
-}): DownloadItem[] {
-  const items: DownloadItem[] = []
-  if (args.getCaptureEl) {
-    items.push(
-      buildPngDownloadItem({
-        filename: args.filename,
-        getCaptureEl: args.getCaptureEl,
-        pixelRatio: args.pngPixelRatio,
-        backgroundColor: args.pngBackgroundColor,
-      }),
-    )
-  }
-  items.push(
-    buildCsvDownloadItem({
-      filename: args.filename,
-      getRows: (ctx) => {
-        const data = args.getData(ctx)
-        const rows: unknown[][] = [['series', 'name', 'value']]
-        for (const [i, series] of data.entries()) {
-          const seriesName = args.seriesNames?.[i] ?? `series_${i + 1}`
-          for (const item of series) {
-            rows.push([seriesName, item.name, item.value])
-          }
-        }
-        return rows
-      },
-    }),
-  )
-  return items
-}

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>
-  )
-}