@carto/ps-react-ui 5.1.0 → 6.0.0

package/dist/zoom-toggle-IsF8BnAp.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"zoom-toggle-IsF8BnAp.js","names":["Icon = ZoomInIcon","{\n  initialEnabled = false,\n  labels,\n  icon: Icon = ZoomInIcon,\n  iconProps,\n  axes,\n}: ZoomToggleProps","initialEnabled = false","{ ...DEFAULT_ZOOM_TOGGLE_LABELS, ...labels }","axes ? axes.includes('x') : true","axes ? axes.includes('y') : false","createAddZoom(theme, { axes: resolved })","useMemo(() => {\n    const resolved: ZoomAxis[] = []\n    if (includeX) resolved.push('x')\n    if (includeY) resolved.push('y')\n    return createAddZoom(theme, { axes: resolved })\n  }, [theme, includeX, includeY])","{ initialEnabled }","() => {\n    if (enabled) {\n      // About to disable — clear the dataZoom component on the live\n      // instance so the slider disappears immediately.\n      getEchartInstance(id)?.setOption({}, { replaceMerge: ['dataZoom'] })\n    }\n    toggle()\n  }","useCallback(() => {\n    if (enabled) {\n      // About to disable — clear the dataZoom component on the live\n      // instance so the slider disappears immediately.\n      getEchartInstance(id)?.setOption({}, { replaceMerge: ['dataZoom'] })\n    }\n    toggle()\n  }, [enabled, toggle, id])","{ ...styles.toggle, ...(enabled && styles.toggleActive) }","enabled && styles.toggleActive","<Icon fontSize='small' {...iconProps} />","<IconButton\n        size='small'\n        aria-label={tooltip}\n        aria-pressed={enabled}\n        onClick={handleToggle}\n        className={enabled ? 'active' : undefined}\n        sx={{ ...styles.toggle, ...(enabled && styles.toggleActive) }}\n      >\n        <Icon fontSize='small' {...iconProps} />\n      </IconButton>","enabled ? 'active' : undefined","<Tooltip title={tooltip}>\n      <IconButton\n        size='small'\n        aria-label={tooltip}\n        aria-pressed={enabled}\n        onClick={handleToggle}\n        className={enabled ? 'active' : undefined}\n        sx={{ ...styles.toggle, ...(enabled && styles.toggleActive) }}\n      >\n        <Icon fontSize='small' {...iconProps} />\n      </IconButton>\n    </Tooltip>"],"sources":["../src/widgets-v2/actions/zoom-toggle/transforms.ts","../src/widgets-v2/actions/zoom-toggle/labels.ts","../src/widgets-v2/actions/zoom-toggle/style.ts","../src/widgets-v2/actions/zoom-toggle/zoom-toggle.tsx"],"sourcesContent":["import type { Theme } from '@mui/material'\n\n/**\n * v1's slider handle — 9×36 SVG with a white pill body, secondary-colored\n * stroke, and three grip lines. Inlined as a data URL so the chart can\n * render it without a network fetch.\n */\nconst SLIDER_HANDLE_ICON =\n  'image://data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSIzNiIgdmlld0JveD0iMCAwIDkgMzYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHg9IjAuNSIgeT0iLTAuNSIgd2lkdGg9IjgiIGhlaWdodD0iMTgiIHJ4PSI0IiB0cmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAwIDI3KSIgZmlsbD0id2hpdGUiIHN0cm9rZT0iIzM1OEJFNyIvPgo8cmVjdCB3aWR0aD0iMyIgaGVpZ2h0PSIyIiByeD0iMSIgdHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgLTEgMyAyMykiIGZpbGw9IiMzNThCRTciLz4KPHJlY3Qgd2lkdGg9IjMiIGhlaWdodD0iMiIgcng9IjEiIHRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIC0xIDMgMTkpIiBmaWxsPSIjMzU4QkU3Ii8+CjxyZWN0IHdpZHRoPSIzIiBoZWlnaHQ9IjIiIHJ4PSIxIiB0cmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAzIDE1KSIgZmlsbD0iIzM1OEJFNyIvPgo8L3N2Zz4='\n\nconst SLIDER_HEIGHT = 32\nconst SLIDER_BOTTOM = 0\n\n/** Which chart axis (or axes) zoom applies to. */\nexport type ZoomAxis = 'x' | 'y'\n\nexport interface CreateAddZoomOptions {\n  /**\n   * Axes to enable zoom on. Default `['x']` (matches bar / histogram /\n   * timeseries — horizontal pan/zoom on the category axis). Pass\n   * `['x', 'y']` for a scatterplot-style 2D zoom (mouse-wheel scales both\n   * axes; a horizontal slider sits at the bottom for x-range and a\n   * vertical slider sits on the right for y-range).\n   */\n  axes?: readonly ZoomAxis[]\n}\n\n/**\n * Theme-bound zoom config transform: adds one inside `dataZoom`\n * (mouse-wheel + drag) per axis plus a styled slider per axis with the\n * v1 chrome (blue-tinted filler, secondary-color data preview, white\n * pill handles, CARTO typography). The x-slider is horizontal at the\n * bottom; the y-slider is vertical on the right.\n *\n * Returned function has stable identity for a given theme + axes\n * combination; pair with `useMemo` at the call site.\n *\n * **No `start` / `end`** are emitted: ECharts defaults to `0–100` on the\n * first `setOption` and then keeps the runtime slider state across\n * subsequent merges (no `replaceMerge` for `dataZoom`). Re-running the\n * transform on data/formatter/RelativeData updates therefore preserves the\n * user's dragged range instead of snapping it back.\n */\nexport function createAddZoom(\n  theme: Theme,\n  options: CreateAddZoomOptions = {},\n): (option: unknown) => unknown {\n  const axes = options.axes ?? ['x']\n  const includeX = axes.includes('x')\n  const includeY = axes.includes('y')\n  const sliderStyles = getZoomSliderStyles(theme)\n  const baseSliderProps = {\n    throttle: 0,\n    showDetail: false,\n    brushSelect: false,\n    moveHandleSize: 8,\n    handleSize: '100%',\n    ...sliderStyles,\n  }\n  return (option: unknown): unknown => {\n    if (option == null || typeof option !== 'object') return option\n    const cfg = option as Record<string, unknown>\n    const dataZoom: object[] = []\n    if (includeX) {\n      dataZoom.push({ type: 'inside', xAxisIndex: [0], throttle: 0 })\n    }\n    if (includeY) {\n      dataZoom.push({ type: 'inside', yAxisIndex: [0], throttle: 0 })\n    }\n    if (includeX) {\n      dataZoom.push({\n        type: 'slider',\n        xAxisIndex: [0],\n        height: SLIDER_HEIGHT,\n        bottom: SLIDER_BOTTOM,\n        handleIcon: SLIDER_HANDLE_ICON,\n        ...baseSliderProps,\n      })\n    }\n    if (includeY) {\n      // Vertical slider — `width` is its thickness, `right` pins it to\n      // the right edge. We omit `handleIcon` so ECharts renders its\n      // default vertical handle (the inline SVG is shaped for a\n      // horizontal slider and looks wrong when rotated).\n      dataZoom.push({\n        type: 'slider',\n        yAxisIndex: [0],\n        width: SLIDER_HEIGHT,\n        right: SLIDER_BOTTOM,\n        ...baseSliderProps,\n      })\n    }\n    return { ...cfg, dataZoom }\n  }\n}\n\n/**\n * Back-compat untyped transform — produces the bare `dataZoom` config from\n * the original v2 implementation. Use {@link createAddZoom} when a theme is\n * available so the slider matches the v1 styling.\n *\n * `start` / `end` are intentionally omitted so ECharts preserves the user's\n * runtime range across subsequent `setOption` merges (see {@link createAddZoom}).\n */\nexport const addZoom = (option: unknown): unknown => {\n  if (option == null || typeof option !== 'object') return option\n  const cfg = option as Record<string, unknown>\n  return {\n    ...cfg,\n    dataZoom: [\n      { type: 'inside' },\n      {\n        type: 'slider',\n        height: SLIDER_HEIGHT,\n        bottom: SLIDER_BOTTOM,\n      },\n    ],\n  }\n}\n\n/** Style block matching v1's `getEChartZoomSliderStyles`. */\nfunction getZoomSliderStyles(theme: Theme) {\n  const secondary = theme.palette.secondary?.main ?? '#358BE7'\n  return {\n    fillerColor: 'rgba(53, 139, 231, 0.25)',\n    borderColor: 'rgba(53, 139, 231, 0.3)',\n    borderWidth: 0.5,\n    backgroundColor: 'transparent',\n    borderRadius: 4,\n    dataBackground: {\n      lineStyle: { opacity: 0 },\n      areaStyle: { opacity: 1, color: secondary },\n    },\n    selectedDataBackground: {\n      lineStyle: { opacity: 0 },\n      areaStyle: { opacity: 1, color: secondary },\n    },\n    handleStyle: {\n      color: theme.palette.common?.white ?? '#fff',\n      borderColor: 'rgba(3, 111, 226, 0.08)',\n      borderWidth: 1,\n      shadowBlur: 3,\n      shadowColor: 'rgba(0, 0, 0, 0.1)',\n      shadowOffsetX: 0,\n      shadowOffsetY: 1,\n    },\n    textStyle: {\n      color: theme.palette.black?.[60] ?? theme.palette.text?.primary,\n      fontSize: parseInt(\n        (theme.typography.overlineDelicate?.fontSize as string | undefined) ??\n          '11',\n      ),\n      fontFamily:\n        theme.typography.overlineDelicate?.fontFamily ??\n        theme.typography.caption?.fontFamily,\n    },\n  }\n}\n\n/**\n * Visual layout constants used by the data-fusion mergers (bar, histogram,\n * timeseries) when laying out the slider against the legend / grid.\n */\nexport const ZOOM_LAYOUT = {\n  /** Slider height in px (matches `createAddZoom` output). */\n  sliderHeight: SLIDER_HEIGHT,\n  /** Vertical gap between chart grid and the slider. */\n  sliderGap: 8,\n  /** Slider `bottom` when a legend is shown — sits above the legend row. */\n  sliderBottomWithLegend: 28,\n} as const\n","export interface ZoomToggleLabels {\n  on: string\n  off: string\n}\n\nexport const DEFAULT_ZOOM_TOGGLE_LABELS: ZoomToggleLabels = {\n  on: 'Disable zoom',\n  off: 'Enable zoom',\n}\n","import type { SxProps, Theme } from '@mui/material'\n\nexport const styles = {\n  toggle: {\n    p: 0.5,\n    '& .MuiSvgIcon-root': { fontSize: 20 },\n  },\n  toggleActive: {\n    background: (theme: Theme) => theme.palette.primary.relatedLight,\n  },\n} satisfies Record<string, SxProps<Theme>>\n","import { useCallback, useMemo, type ComponentType } from 'react'\nimport { IconButton, useTheme, type SvgIconProps } from '@mui/material'\nimport { ZoomIn as ZoomInIcon } from '@mui/icons-material'\nimport { Tooltip } from '../../../components'\nimport {\n  getEchartInstance,\n  useSingleTransform,\n  useWidgetId,\n} from '../../stores'\nimport { createAddZoom, type ZoomAxis } from './transforms'\nimport { DEFAULT_ZOOM_TOGGLE_LABELS, type ZoomToggleLabels } from './labels'\nimport { styles } from './style'\n\nconst ZOOM_DESCRIPTOR = {\n  id: 'zoom-toggle',\n  type: 'config' as const,\n  order: 20,\n}\n\nexport interface ZoomToggleProps {\n  initialEnabled?: boolean\n  labels?: Partial<ZoomToggleLabels>\n  icon?: ComponentType<SvgIconProps>\n  iconProps?: SvgIconProps\n  /**\n   * Which axes the zoom controls. Default `['x']` — matches bar /\n   * histogram / timeseries (horizontal pan on the category axis). Pass\n   * `['x', 'y']` for 2D zoom on a scatterplot-style chart (mouse-wheel\n   * scales both axes; horizontal slider at bottom + vertical slider on\n   * the right).\n   */\n  axes?: readonly ZoomAxis[]\n}\n\n/**\n * Toggle a `dataZoom` slider + wheel-zoom on the chart. The transform is\n * theme-bound so the slider gets v1's CARTO chrome (blue-tinted filler,\n * secondary-color preview, white pill handles).\n *\n * `dataZoom` is intentionally NOT in `replaceMergeKeys` — ECharts merges\n * subsequent `setOption` calls so the user's dragged range survives\n * unrelated re-renders (data updates, formatter swaps, RelativeData toggles).\n *\n * On disable the transform is unregistered, but ECharts' merge semantics\n * would otherwise *keep* the live `dataZoom` component visible. To remove\n * the slider immediately we issue a one-shot\n * `setOption({}, { replaceMerge: ['dataZoom'] })` against the live chart\n * instance via {@link getEchartInstance} — this bypasses the pipeline so\n * unrelated transforms aren't disturbed.\n */\nexport function ZoomToggle({\n  initialEnabled = false,\n  labels,\n  icon: Icon = ZoomInIcon,\n  iconProps,\n  axes,\n}: ZoomToggleProps) {\n  const id = useWidgetId()\n  const theme = useTheme()\n  const _labels = { ...DEFAULT_ZOOM_TOGGLE_LABELS, ...labels }\n  // Reduce `axes` to two structural booleans before memoizing so the memo\n  // depends on stable primitive values, not an array reference (callers\n  // typically pass an inline `axes={['x', 'y']}` literal that changes\n  // identity each render). Default — no `axes` prop — is x-axis only,\n  // matching `createAddZoom`'s default.\n  const includeX = axes ? axes.includes('x') : true\n  const includeY = axes ? axes.includes('y') : false\n  const transform = useMemo(() => {\n    const resolved: ZoomAxis[] = []\n    if (includeX) resolved.push('x')\n    if (includeY) resolved.push('y')\n    return createAddZoom(theme, { axes: resolved })\n  }, [theme, includeX, includeY])\n  const { enabled, toggle } = useSingleTransform(\n    id,\n    ZOOM_DESCRIPTOR,\n    transform,\n    { initialEnabled },\n  )\n\n  const handleToggle = useCallback(() => {\n    if (enabled) {\n      // About to disable — clear the dataZoom component on the live\n      // instance so the slider disappears immediately.\n      getEchartInstance(id)?.setOption({}, { replaceMerge: ['dataZoom'] })\n    }\n    toggle()\n  }, [enabled, toggle, id])\n\n  const tooltip = enabled ? _labels.on : _labels.off\n\n  return (\n    <Tooltip title={tooltip}>\n      <IconButton\n        size='small'\n        aria-label={tooltip}\n        aria-pressed={enabled}\n        onClick={handleToggle}\n        className={enabled ? 'active' : undefined}\n        sx={{ ...styles.toggle, ...(enabled && styles.toggleActive) }}\n      >\n        <Icon fontSize='small' {...iconProps} />\n      </IconButton>\n    </Tooltip>\n  )\n}\n"],"mappings":"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"}

package/src/components/list-data/list-data-skeleton.test.tsx

@@ -1,10 +0,0 @@
-import { describe, expect, test } from 'vitest'
-import { render } from '@testing-library/react'
-import { ListDataSkeleton } from './list-data-skeleton'
-
-describe('ListDataUI Skeleton', () => {
-  test('renders correctly', () => {
-    const { getByLabelText } = render(<ListDataSkeleton />)
-    expect(getByLabelText('List Data skeleton')).toBeTruthy()
-  })
-})

package/src/components/list-data/list-data-skeleton.tsx

@@ -1,40 +0,0 @@
-import { Box, Grid, Skeleton } from '@mui/material'
-
-interface ListDataSkeletonProps {
-  length?: number
-}
-
-export function ListDataSkeleton({ length = 5 }: ListDataSkeletonProps) {
-  return (
-    <Box aria-label='List Data skeleton'>
-      {new Array(length).fill(null).map((_, idx) => (
-        <Grid key={`skeleton-${idx}`} container spacing={1}>
-          <Grid
-            container
-            item
-            direction='row'
-            justifyContent='space-between'
-            alignItems='center'
-          >
-            <Skeleton width={isOdd(idx) ? 72 : 48} height={20} />
-            <Skeleton width={48} height={8} />
-          </Grid>
-
-          <Skeleton
-            sx={{
-              height: ({ spacing }) => spacing(0.5),
-              marginTop: ({ spacing }) => spacing(1.25),
-              marginBottom: ({ spacing }) => spacing(1.75),
-              width: '100%',
-            }}
-          />
-        </Grid>
-      ))}
-    </Box>
-  )
-}
-
-// Aux
-function isOdd(num: number) {
-  return num % 2 === 1
-}

package/src/components/list-data/list-data.test.tsx

@@ -1,167 +0,0 @@
-import { describe, expect, test, vi } from 'vitest'
-import { render, within } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { ListDataUI } from './list-data'
-
-describe('ListDataUI', () => {
-  const data = [
-    { id: '1', label: 'Population', value: '8.4M' },
-    { id: '2', label: 'Median Age', value: '32 years' },
-    { id: '3', label: 'GDP', value: '$1.2T' },
-    { id: '4', label: 'Life Expectancy', value: '78.5 years' },
-    { id: '5', label: 'Population Density', value: '345/km²' },
-  ]
-
-  test('renders correctly', () => {
-    const { container } = render(<ListDataUI data={data} />)
-
-    const rows = within(container).getAllByRole('listitem')
-    expect(rows).toHaveLength(5)
-  })
-
-  test('renders skeleton when loading', () => {
-    const { getByLabelText } = render(<ListDataUI data={data} isLoading />)
-    expect(getByLabelText('List Data skeleton')).toBeTruthy()
-  })
-
-  test('with maxItems', async () => {
-    const { container } = render(<ListDataUI data={data} maxItems={3} />)
-
-    const rows = within(container).getAllByRole('listitem')
-    expect(rows).toHaveLength(3)
-
-    const showMoreButton = within(container).getByText('Show More')
-    expect(showMoreButton).toBeTruthy()
-    await userEvent.click(showMoreButton)
-
-    const updatedRows = within(container).getAllByRole('listitem')
-    expect(updatedRows).toHaveLength(5)
-
-    const showLessButton = within(container).getByText('Show Less')
-    expect(showLessButton).toBeTruthy()
-    await userEvent.click(showLessButton)
-
-    const finalRows = within(container).getAllByRole('listitem')
-    expect(finalRows).toHaveLength(3)
-  })
-
-  test('with disabled items', () => {
-    const disabledData = data.map((item) => ({ ...item, disabled: true }))
-    const { container } = render(<ListDataUI data={disabledData} />)
-
-    const rows = within(container).getAllByRole('listitem')
-
-    for (const row of rows) {
-      const computedStyle = window.getComputedStyle(row)
-      expect(computedStyle.pointerEvents).toBe('none')
-    }
-  })
-
-  test('with custom expand button labels', async () => {
-    const { container } = render(
-      <ListDataUI
-        data={data}
-        maxItems={3}
-        labels={{ showMore: 'More', showLess: 'Less' }}
-      />,
-    )
-
-    const moreButton = within(container).getByText('More')
-    expect(moreButton).toBeTruthy()
-    await userEvent.click(moreButton)
-
-    const lessButton = within(container).getByText('Less')
-    expect(lessButton).toBeTruthy()
-  })
-
-  test('with item click handler', async () => {
-    const mockOnItemClick = vi.fn()
-
-    const { container } = render(
-      <ListDataUI data={data} onItemClick={mockOnItemClick} />,
-    )
-
-    const rows = within(container).getAllByRole('listitem')
-
-    for (const [idx, row] of rows.entries()) {
-      await userEvent.click(row)
-
-      const foundItem = data.find((item) => item.id === data[idx]?.id)
-      expect(mockOnItemClick).toHaveBeenCalledWith(foundItem)
-      mockOnItemClick.mockClear()
-    }
-  })
-
-  test('renders NoDataAlert when data is empty', () => {
-    const { container } = render(<ListDataUI data={[]} />)
-    // No <li> elements when there's no data
-    expect(within(container).queryAllByRole('listitem')).toHaveLength(0)
-  })
-
-  test('uses EMPTY_DATA default when data prop is omitted', () => {
-    // `data` is required by the type but has a runtime default of EMPTY_DATA.
-    // Pass undefined to exercise the default branch.
-    const { container } = render(
-      <ListDataUI data={undefined as unknown as never} />,
-    )
-    expect(within(container).queryAllByRole('listitem')).toHaveLength(0)
-  })
-
-  test('onExpand fires with the previous showAll value when toggled', async () => {
-    const onExpand = vi.fn()
-    const { container } = render(
-      <ListDataUI data={data} maxItems={3} onExpand={onExpand} />,
-    )
-    const showMore = within(container).getByText('Show More')
-    await userEvent.click(showMore)
-    // Called with prior showAll value (false)
-    expect(onExpand).toHaveBeenCalledWith(false)
-    onExpand.mockClear()
-    const showLess = within(container).getByText('Show Less')
-    await userEvent.click(showLess)
-    // Now called with prior showAll value (true)
-    expect(onExpand).toHaveBeenCalledWith(true)
-  })
-
-  test('applies `selected` style to the row matching selectedItemId', () => {
-    const { container } = render(<ListDataUI data={data} selectedItemId='2' />)
-    const rows = within(container).getAllByRole('listitem')
-    expect(rows).toHaveLength(5)
-    // Smoke-check that the selected branch executed without throwing
-  })
-
-  test('respects showDivider=false (skips the divider style branch)', () => {
-    expect(() =>
-      render(<ListDataUI data={data} showDivider={false} />),
-    ).not.toThrow()
-  })
-
-  test('clicking a non-disabled sibling of a disabled item still fires onItemClick', async () => {
-    // disabled items get pointer-events: none via the disabled style branch,
-    // so userEvent can't synthesize a click on them anyway. We assert the
-    // happy-path sibling fires correctly to confirm the disabled-row
-    // rendering branch ran.
-    const onItemClick = vi.fn()
-    const mixedData = [
-      { id: '1', label: 'A', value: '1', disabled: true },
-      { id: '2', label: 'B', value: '2' },
-    ]
-    const { container } = render(
-      <ListDataUI data={mixedData} onItemClick={onItemClick} />,
-    )
-    const rows = within(container).getAllByRole('listitem')
-    await userEvent.click(rows[1]!)
-    expect(onItemClick).toHaveBeenCalledWith(mixedData[1])
-  })
-
-  test('threads tooltipProps overrides into SmartTooltip', () => {
-    expect(() =>
-      render(
-        <ListDataUI
-          data={data}
-          tooltipProps={{ placement: 'right', enterDelay: 500 }}
-        />,
-      ),
-    ).not.toThrow()
-  })
-})

package/src/components/list-data/list-data.tsx

@@ -1,124 +0,0 @@
-import { useState, useMemo, type JSX } from 'react'
-import { Box, Button, Grid, ListItem, List, ListItemText } from '@mui/material'
-import { ListDataSkeleton } from './list-data-skeleton'
-import { NoDataAlert } from '../no-data-alert/no-data-alert'
-import { useSkeleton } from '../../hooks/use-skeleton'
-import type { ListDataProps } from './types'
-import { styles } from './styles'
-import { SmartTooltip } from '../smart-tooltip/smart-tooltip'
-
-const DEFAULT_LABELS = {
-  showMore: 'Show More',
-  showLess: 'Show Less',
-} as const
-
-const EMPTY_DATA: ListDataProps['data'] = []
-
-/**
- * Displays structured data in an accessible list format with expandable views, interactive selection, tooltips, and loading states.
- *
- * @example
- * ```tsx
- * <ListDataUI
- *   data={[
- *     { id: '1', label: 'Population', value: '8.4M' },
- *     { id: '2', label: 'Median Age', value: '32 years' },
- *   ]}
- *   maxItems={3}
- *   onItemClick={(item) => setSelectedId(item.id)}
- *   selectedItemId={selectedId}
- * />
- * ```
- */
-export function ListDataUI({
-  data = EMPTY_DATA,
-  isLoading = false,
-  maxItems = 5,
-  labels = DEFAULT_LABELS,
-  showDivider = true,
-  selectedItemId,
-  tooltipProps,
-  onExpand,
-  onItemClick,
-}: ListDataProps): JSX.Element {
-  const [showAll, setShowAll] = useState(false)
-
-  const showSkeleton = useSkeleton(isLoading)
-
-  const items = useMemo(() => {
-    return showAll ? data : data.slice(0, maxItems)
-  }, [data, maxItems, showAll])
-
-  const handleToggle = () => {
-    setShowAll(!showAll)
-    onExpand?.(showAll)
-  }
-
-  if (showSkeleton) {
-    return <ListDataSkeleton length={maxItems} />
-  }
-
-  if (items.length === 0) {
-    return <NoDataAlert />
-  }
-
-  return (
-    <>
-      <List id='expandable-list' role='list'>
-        {items.map((item) => (
-          <SmartTooltip<HTMLLIElement>
-            // Default tooltip props
-            followCursor={false}
-            key={item.id}
-            placement='top'
-            arrow
-            title={item.tooltipTitle}
-            enterDelay={10}
-            // Custom tooltip props
-            {...tooltipProps}
-          >
-            {({ ref }) => (
-              <ListItem
-                ref={ref}
-                role='listitem'
-                sx={{
-                  ...(showDivider && styles.showDivider),
-                  ...(onItemClick && styles.clickable),
-                  ...(selectedItemId === item.id && styles.selected),
-                  ...(item.disabled && styles.disabled),
-                }}
-                onClick={() => {
-                  if (item.disabled) return
-                  onItemClick?.(item)
-                }}
-              >
-                <Grid container alignItems='center'>
-                  <Grid item xs={8}>
-                    <ListItemText primary={item.label} sx={styles.label} />
-                  </Grid>
-                  <Grid item xs={4}>
-                    <ListItemText primary={item.value} sx={styles.value} />
-                  </Grid>
-                </Grid>
-              </ListItem>
-            )}
-          </SmartTooltip>
-        ))}
-      </List>
-
-      {data.length > maxItems && (
-        <Box my={2}>
-          <Button
-            onClick={handleToggle}
-            variant='text'
-            color='primary'
-            aria-expanded={showAll}
-            aria-controls='expandable-list'
-          >
-            {showAll ? labels.showLess : labels.showMore}
-          </Button>
-        </Box>
-      )}
-    </>
-  )
-}

package/src/components/list-data/styles.ts

@@ -1,37 +0,0 @@
-import { type SxProps, type Theme } from '@mui/material'
-
-const ellipsed = {
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-}
-
-export const styles = {
-  label: {
-    '& .MuiListItemText-primary': {
-      ...ellipsed,
-    },
-  },
-  value: {
-    '& .MuiListItemText-primary': {
-      ...ellipsed,
-      textAlign: 'right',
-    },
-  },
-  clickable: {
-    cursor: 'pointer',
-    '&:hover': {
-      backgroundColor: ({ palette }) => palette.action.hover,
-    },
-  },
-  showDivider: {
-    borderBottom: ({ palette }) => `1px solid ${palette.divider}`,
-  },
-  selected: {
-    backgroundColor: ({ palette }) => palette.action.selected,
-  },
-  disabled: {
-    opacity: 0.5,
-    pointerEvents: 'none',
-  },
-} satisfies Record<string, SxProps<Theme>>

package/src/components/list-data/types.ts

@@ -1,25 +0,0 @@
-import type { TooltipProps } from '@mui/material'
-import type { ReactElement } from 'react'
-
-export interface DataItem {
-  id: string | number
-  label: string | ReactElement
-  value: string | ReactElement
-  disabled?: boolean
-  tooltipTitle?: string
-}
-
-export interface ListDataProps {
-  data: DataItem[]
-  isLoading?: boolean
-  maxItems?: number
-  labels?: {
-    showMore: string
-    showLess: string
-  }
-  showDivider?: boolean
-  selectedItemId?: string | number
-  tooltipProps?: Omit<TooltipProps, 'title' | 'children'>
-  onExpand?: (isExpanded: boolean) => void
-  onItemClick?: (item: DataItem) => void
-}

package/src/hooks/index.ts

@@ -1 +0,0 @@
-export { useWidgetRef } from './use-widget-ref'

package/src/hooks/use-skeleton.test.tsx

@@ -1,32 +0,0 @@
-import { describe, expect, test } from 'vitest'
-import { renderHook } from '@testing-library/react'
-import { useSkeleton } from './use-skeleton'
-
-describe('useSkeleton', () => {
-  test('should return true if loading', () => {
-    const { result } = renderHook(() => useSkeleton(true))
-
-    expect(result.current).toBe(true)
-  })
-
-  test('should return false if not loading', () => {
-    const { result } = renderHook(() => useSkeleton(false))
-
-    expect(result.current).toBe(false)
-  })
-
-  test('should return false if skeleton was already rendered', () => {
-    const { result, rerender } = renderHook(
-      ({ showSkeleton }) => useSkeleton(showSkeleton),
-      { initialProps: { showSkeleton: true } },
-    )
-
-    expect(result.current).toBe(true)
-
-    rerender({ showSkeleton: false })
-    expect(result.current).toBe(false)
-
-    rerender({ showSkeleton: true })
-    expect(result.current).toBe(false)
-  })
-})

package/src/hooks/use-skeleton.ts

@@ -1,19 +0,0 @@
-import { useState } from 'react'
-
-export function useSkeleton(isLoading: boolean) {
-  // Track render phase: 0=never shown, 1=showing now, 2=already shown
-  const [phase, setPhase] = useState(() => (isLoading ? 1 : 0))
-
-  // Transition from phase 0 to 1 when loading starts
-  if (isLoading && phase === 0) {
-    setPhase(1)
-  }
-
-  // Transition from phase 1 to 2 when loading ends (skeleton was shown, now done)
-  if (!isLoading && phase === 1) {
-    setPhase(2)
-  }
-
-  // Show skeleton only in phase 1 (first time loading)
-  return phase === 1
-}

package/src/hooks/use-widget-ref.ts

@@ -1,34 +0,0 @@
-import { useEffect, useRef } from 'react'
-import type * as echarts from 'echarts'
-import { widgetStoreActions } from '../widgets/stores/widget-store'
-
-/**
- * Registers a DOM element ref and an ECharts instance ref with the widget store.
- * This allows other parts of the application (e.g., screenshot export) to access the widget's DOM element.
- *
- * @param widgetId - The widget ID to register the refs under.
- * @returns An object with `ref` (DOM element) and `instance` (ECharts instance) refs.
- *
- * @example
- * ```tsx
- * function MyWidget({ id }: { id: string }) {
- *   const { ref } = useWidgetRef<HTMLDivElement>(id)
- *
- *   return <div ref={ref}>Widget content</div>
- * }
- * ```
- */
-export function useWidgetRef<T extends HTMLElement = HTMLElement>(
-  widgetId: string,
-) {
-  const ref = useRef<T | null>(null)
-  const instance = useRef<echarts.ECharts | null>(null)
-
-  useEffect(() => {
-    if (ref.current) {
-      widgetStoreActions.setWidget(widgetId, { refUI: ref, instance: instance })
-    }
-  }, [widgetId])
-
-  return { ref, instance }
-}