@carto/ps-react-ui 5.3.0 → 6.1.0

package/src/widgets-v2/actions/relative-data/relative-data.tsx

@@ -1,107 +0,0 @@
-import { useEffect, useMemo, type ComponentType } from 'react'
-import { IconButton, type SvgIconProps } from '@mui/material'
-import { Percent as PercentIcon } from '@mui/icons-material'
-import { Tooltip } from '../../../components'
-import {
-  getWidgetStore,
-  useSingleTransform,
-  useWidget,
-  useWidgetId,
-} from '../../stores'
-import { createPercentFormatter, toRelativeData } from './transforms'
-import { DEFAULT_RELATIVE_DATA_LABELS, type RelativeDataLabels } from './labels'
-import { styles } from './style'
-
-const DATA_DESCRIPTOR = {
-  id: 'relative-data',
-  type: 'data' as const,
-  order: 15,
-}
-
-export interface RelativeDataProps {
-  initialEnabled?: boolean
-  /**
-   * BCP-47 locale tag forwarded to `Intl.NumberFormat`. Defaults to the
-   * runtime locale.
-   */
-  locale?: string
-  labels?: Partial<RelativeDataLabels>
-  icon?: ComponentType<SvgIconProps>
-  iconProps?: SvgIconProps
-  /**
-   * Data-side transform that rewrites the widget's series into their
-   * relative (0–100) form. Defaults to {@link toRelativeData}, which
-   * handles the canonical `{ name, value }[]` shape (bar / pie /
-   * timeseries / category). Widgets with a different data shape pass
-   * their own — `toRelativeHistogramData` for histogram's `number[]`,
-   * `toRelativeScatterplotData` for scatter's `[x, y][]`.
-   *
-   * Should be a stable top-level reference; inline `(data) => ...`
-   * literals re-register the transform every render.
-   */
-  transform?: (data: unknown) => unknown
-}
-
-/**
- * Toggle between absolute and relative (percentage) values.
- *
- *   - **Data side**: a single data transform ({@link toRelativeData}) registered
- *     through `useSingleTransform`. When disabled, the pipeline skips it and the
- *     derived `data` reverts to `rawData` automatically.
- *   - **Formatter side**: an effect writes directly to `state.formatter`. When
- *     enabled it installs the Intl-based percent formatter; when disabled it
- *     reads `state.rawFormatter` (the consumer-supplied original, always live)
- *     and writes it back to `formatter`. No "original" snapshot is captured —
- *     `rawFormatter` is the original.
- */
-export function RelativeData({
-  initialEnabled = false,
-  locale,
-  labels,
-  icon: Icon = PercentIcon,
-  iconProps,
-  transform,
-}: RelativeDataProps) {
-  const id = useWidgetId()
-  const _labels = { ...DEFAULT_RELATIVE_DATA_LABELS, ...labels }
-
-  const { enabled, toggle } = useSingleTransform(
-    id,
-    DATA_DESCRIPTOR,
-    transform ?? toRelativeData,
-    { initialEnabled },
-  )
-
-  const percentFormatter = useMemo(
-    () => createPercentFormatter(locale),
-    [locale],
-  )
-
-  // Subscribe to rawFormatter so the effect re-runs and re-applies after the
-  // consumer's formatter prop changes (Provider syncs the new prop to both
-  // rawFormatter and formatter — re-applying restores the percent override
-  // when relative is on, and tracks the new rawFormatter when off).
-  const rawFormatter = useWidget(id, (s) => s.rawFormatter)
-
-  useEffect(() => {
-    getWidgetStore(id).setState({
-      formatter: enabled ? percentFormatter : rawFormatter,
-    })
-  }, [id, enabled, percentFormatter, rawFormatter])
-
-  const tooltip = enabled ? _labels.on : _labels.off
-
-  return (
-    <Tooltip title={tooltip}>
-      <IconButton
-        size='small'
-        aria-label={tooltip}
-        aria-pressed={enabled}
-        onClick={toggle}
-        sx={{ ...styles.toggle, ...(enabled && styles.toggleActive) }}
-      >
-        <Icon fontSize='small' {...iconProps} />
-      </IconButton>
-    </Tooltip>
-  )
-}

package/src/widgets-v2/actions/searcher/searcher-toggle.tsx

@@ -1,96 +0,0 @@
-import { useCallback, type ComponentType } from 'react'
-import { IconButton, type SvgIconProps } from '@mui/material'
-import { Search as SearchIcon } from '@mui/icons-material'
-import { Tooltip } from '../../../components'
-import {
-  getWidgetStore,
-  useSingleTransform,
-  useWidget,
-  useWidgetId,
-} from '../../stores'
-import { filterBySearchText } from './filter'
-import { DEFAULT_SEARCHER_LABELS, type SearcherLabels } from './labels'
-import { styles } from './style'
-
-const SEARCHER_DESCRIPTOR = {
-  id: 'searcher',
-  type: 'data' as const,
-  order: 20,
-  disables: ['lock-selection'],
-}
-
-export interface SearcherToggleProps {
-  labels?: Partial<SearcherLabels>
-  icon?: ComponentType<SvgIconProps>
-  iconProps?: SvgIconProps
-  /**
-   * Whether the searcher transform is enabled on first mount. Defaults
-   * to `false` so the toggle renders un-pressed and the
-   * `filterBySearchText` transform stays dormant until the user clicks
-   * it. Set to `true` for search-first widgets where the input is the
-   * primary affordance.
-   */
-  initialEnabled?: boolean
-}
-
-export function SearcherToggle({
-  labels,
-  icon: Icon = SearchIcon,
-  iconProps,
-  initialEnabled = false,
-}: SearcherToggleProps) {
-  const id = useWidgetId()
-  const resolved = { ...DEFAULT_SEARCHER_LABELS, ...labels }
-  const text = useWidget(
-    id,
-    (s) => (s.transformStates.searcher?.searchText as string | undefined) ?? '',
-  )
-
-  // Matched against the label the user sees, so a formatted name is found
-  // by what's on screen rather than by its raw value.
-  const labelFormatter = useWidget(id, (s) => s.labelFormatter)
-
-  // The transform fn closes over `text` and `labelFormatter`. Memoize via
-  // useCallback so identity only changes when either does, allowing
-  // useTransform to re-register.
-  const fn = useCallback(
-    (data: unknown) => filterBySearchText(data, text, labelFormatter),
-    [text, labelFormatter],
-  )
-
-  const { enabled, toggle } = useSingleTransform(id, SEARCHER_DESCRIPTOR, fn, {
-    initialEnabled,
-  })
-
-  return (
-    <Tooltip title={resolved.toggle}>
-      <IconButton
-        size='small'
-        aria-label={resolved.toggle}
-        aria-pressed={enabled}
-        onClick={toggle}
-        sx={{ ...styles.toggle, ...(enabled && styles.toggleActive) }}
-      >
-        <Icon fontSize='small' {...iconProps} />
-      </IconButton>
-    </Tooltip>
-  )
-}
-
-/**
- * Imperatively writes the search text into the widget store. Used by the
- * Searcher input to update text inside transformStates without going through
- * a re-rendered React subscription.
- */
-export function setSearcherText(widgetId: string, value: string): void {
-  getWidgetStore(widgetId).setState((s) => ({
-    transformStates: {
-      ...s.transformStates,
-      searcher: {
-        enabled: s.transformStates.searcher?.enabled ?? false,
-        ...s.transformStates.searcher,
-        searchText: value,
-      },
-    },
-  }))
-}

package/src/widgets-v2/actions/searcher/searcher.tsx

@@ -1,127 +0,0 @@
-import { useCallback, useMemo, useRef, useState } from 'react'
-import { IconButton, InputAdornment, TextField } from '@mui/material'
-import { Search as SearchIcon } from '@mui/icons-material'
-import { Clear as ClearIcon } from '@mui/icons-material'
-import { debounce } from '@carto/ps-utils'
-import { getWidgetStore, useWidget, useWidgetId } from '../../stores'
-import { setSearcherText } from './searcher-toggle'
-import { DEFAULT_SEARCHER_LABELS, type SearcherLabels } from './labels'
-import { styles } from './style'
-
-export interface SearcherProps {
-  labels?: Partial<SearcherLabels>
-  /** Debounce delay before the input value is written to the widget store. */
-  debounceMs?: number
-}
-
-const DEFAULT_DEBOUNCE = 300
-
-/**
- * Renders only when the matching `<SearcherToggle />` is enabled — drives the
- * `transformStates['searcher'].searchText` field via a debounced setter.
- */
-export function Searcher({
-  labels,
-  debounceMs = DEFAULT_DEBOUNCE,
-}: SearcherProps) {
-  const id = useWidgetId()
-  const resolved = { ...DEFAULT_SEARCHER_LABELS, ...labels }
-  const enabled = useWidget(
-    id,
-    (s) => s.transformStates.searcher?.enabled ?? false,
-  )
-
-  const inputRef = useRef<HTMLInputElement | null>(null)
-
-  // Hydrate from the store so re-toggling the input preserves any prior text.
-  const [local, setLocal] = useState<string>(
-    () =>
-      (getWidgetStore(id).getState().transformStates.searcher?.searchText as
-        string | undefined) ?? '',
-  )
-
-  // Follow text written by another Searcher of the same widget (the card
-  // and the fullscreen copy each render one). Skipped while this input has
-  // focus: its own debounced write lands late, and adopting it would drop
-  // whatever was typed since.
-  const [focused, setFocused] = useState(false)
-  const stored =
-    (useWidget(id, (s) => s.transformStates.searcher?.searchText) as
-      string | undefined) ?? ''
-  const [prevStored, setPrevStored] = useState(stored)
-  if (stored !== prevStored) {
-    setPrevStored(stored)
-    if (!focused) setLocal(stored)
-  }
-
-  const debouncedWrite = useMemo(
-    () =>
-      debounce(
-        (value: unknown) => setSearcherText(id, value as string),
-        debounceMs,
-      ),
-    [id, debounceMs],
-  )
-
-  const handleSearchTextChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      const value = e.target.value
-      setLocal(value)
-      debouncedWrite(value)
-    },
-    [debouncedWrite],
-  )
-
-  const handleClear = useCallback(() => {
-    setLocal('')
-    setSearcherText(id, '')
-    // Re-arm the debounced timer with '' so any pending stale write resolves
-    // to the cleared value rather than re-applying the previous text.
-    debouncedWrite('')
-    inputRef.current?.focus()
-  }, [id, debouncedWrite])
-
-  if (!enabled) return null
-
-  return (
-    <TextField
-      inputRef={inputRef}
-      size='small'
-      fullWidth
-      variant='filled'
-      placeholder={resolved.placeholder}
-      value={local}
-      onChange={handleSearchTextChange}
-      onFocus={() => setFocused(true)}
-      onBlur={() => setFocused(false)}
-      // The Searcher only mounts when the user explicitly toggles the
-      // SearcherToggle action — focusing the input on mount matches user
-      // intent, so the jsx-a11y/no-autofocus warning is the false-positive
-      // case (the rule targets unsolicited autofocus that disorients
-      // screen readers).
-      // eslint-disable-next-line
-      autoFocus
-      aria-label={resolved.placeholder}
-      sx={styles.input}
-      InputProps={{
-        startAdornment: (
-          <InputAdornment position='start'>
-            <SearchIcon fontSize='small' />
-          </InputAdornment>
-        ),
-        endAdornment: local ? (
-          <InputAdornment position='end'>
-            <IconButton
-              size='small'
-              edge='end'
-              aria-label={resolved.clearAriaLabel}
-              onClick={handleClear}
-            >
-              <ClearIcon fontSize='small' />
-            </IconButton>
-          </InputAdornment>
-        ) : null,
-      }}
-    />
-  )
-}

package/src/widgets-v2/actions/stack-toggle/stack-toggle.test.tsx

@@ -1,61 +0,0 @@
-import { describe, it, expect, beforeEach, afterEach } from 'vitest'
-import { fireEvent, render, screen } from '@testing-library/react'
-import { Provider } from '../../provider/widget-provider'
-import { clearAllWidgetStores, getWidgetStore } from '../../stores'
-import { StackToggle } from './stack-toggle'
-
-beforeEach(() => clearAllWidgetStores())
-afterEach(() => clearAllWidgetStores())
-
-/**
- * Stack/Zoom/Brush share the same toggle wiring. This file is the exemplar.
- * The transforms themselves are tested in `transforms.test.ts` /
- * `…/zoom-toggle/transforms.test.ts` / `…/brush-toggle/transforms.test.ts`.
- */
-describe('<StackToggle>', () => {
-  it('starts disabled by default and uses the off-state label', () => {
-    render(
-      <Provider id='st1' data={[]}>
-        <StackToggle />
-      </Provider>,
-    )
-    const btn = screen.getByRole('button', { name: 'Stack series' })
-    expect(btn.getAttribute('aria-pressed')).toBe('false')
-  })
-
-  it('toggles aria-pressed and label on click', () => {
-    render(
-      <Provider id='st2' data={[]}>
-        <StackToggle />
-      </Provider>,
-    )
-    fireEvent.click(screen.getByRole('button', { name: 'Stack series' }))
-    const after = screen.getByRole('button', { name: 'Unstack series' })
-    expect(after.getAttribute('aria-pressed')).toBe('true')
-  })
-
-  it('persists the enabled flag on the widget store under transformStates', () => {
-    render(
-      <Provider id='st3' data={[]}>
-        <StackToggle />
-      </Provider>,
-    )
-    fireEvent.click(screen.getByRole('button', { name: 'Stack series' }))
-    expect(
-      getWidgetStore('st3').getState().transformStates['stack-toggle']?.enabled,
-    ).toBe(true)
-  })
-
-  it('initialEnabled=true mounts already-on', () => {
-    render(
-      <Provider id='st4' data={[]}>
-        <StackToggle initialEnabled />
-      </Provider>,
-    )
-    expect(
-      screen
-        .getByRole('button', { name: 'Unstack series' })
-        .getAttribute('aria-pressed'),
-    ).toBe('true')
-  })
-})

package/src/widgets-v2/actions/stack-toggle/stack-toggle.tsx

@@ -1,54 +0,0 @@
-import { type ComponentType } from 'react'
-import { IconButton, type SvgIconProps } from '@mui/material'
-import { StackedBarChart as StackedBarChartIcon } from '@mui/icons-material'
-import { Tooltip } from '../../../components'
-import { useSingleTransform, useWidgetId } from '../../stores'
-import { addStack } from './transforms'
-import { DEFAULT_STACK_TOGGLE_LABELS, type StackToggleLabels } from './labels'
-import { styles } from './style'
-
-const STACK_DESCRIPTOR = {
-  id: 'stack-toggle',
-  type: 'config' as const,
-  order: 30,
-}
-
-export interface StackToggleProps {
-  initialEnabled?: boolean
-  labels?: Partial<StackToggleLabels>
-  icon?: ComponentType<SvgIconProps>
-  iconProps?: SvgIconProps
-}
-
-export function StackToggle({
-  initialEnabled = false,
-  labels,
-  icon: Icon = StackedBarChartIcon,
-  iconProps,
-}: StackToggleProps) {
-  const id = useWidgetId()
-  const _labels = { ...DEFAULT_STACK_TOGGLE_LABELS, ...labels }
-  const { enabled, toggle } = useSingleTransform(
-    id,
-    STACK_DESCRIPTOR,
-    addStack,
-    {
-      initialEnabled,
-    },
-  )
-  const tooltip = enabled ? _labels.on : _labels.off
-
-  return (
-    <Tooltip title={tooltip}>
-      <IconButton
-        size='small'
-        aria-label={tooltip}
-        aria-pressed={enabled}
-        onClick={toggle}
-        sx={{ ...styles.toggle, ...(enabled && styles.toggleActive) }}
-      >
-        <Icon fontSize='small' {...iconProps} />
-      </IconButton>
-    </Tooltip>
-  )
-}

package/src/widgets-v2/actions/stack-toggle/style.ts

@@ -1,11 +0,0 @@
-import type { SxProps, Theme } from '@mui/material'
-
-export const styles = {
-  toggle: {
-    p: 0.5,
-    '& .MuiSvgIcon-root': { fontSize: 20 },
-  },
-  toggleActive: {
-    background: (theme: Theme) => theme.palette.primary.relatedLight,
-  },
-} satisfies Record<string, SxProps<Theme>>

package/src/widgets-v2/actions/zoom-toggle/style.ts

@@ -1,11 +0,0 @@
-import type { SxProps, Theme } from '@mui/material'
-
-export const styles = {
-  toggle: {
-    p: 0.5,
-    '& .MuiSvgIcon-root': { fontSize: 20 },
-  },
-  toggleActive: {
-    background: (theme: Theme) => theme.palette.primary.relatedLight,
-  },
-} satisfies Record<string, SxProps<Theme>>

package/src/widgets-v2/actions/zoom-toggle/zoom-toggle.test.tsx

@@ -1,107 +0,0 @@
-import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
-import { fireEvent, render, screen } from '@testing-library/react'
-import type { ECharts } from 'echarts'
-import { ZoomToggle } from './zoom-toggle'
-import { Provider } from '../../provider/widget-provider'
-import {
-  applyTransforms,
-  clearAllWidgetStores,
-  getWidgetStore,
-  setEchartInstance,
-} from '../../stores'
-
-beforeEach(() => clearAllWidgetStores())
-afterEach(() => clearAllWidgetStores())
-
-describe('<ZoomToggle>', () => {
-  it('starts disabled by default', () => {
-    render(
-      <Provider id='zt-1' data={[]}>
-        <ZoomToggle />
-      </Provider>,
-    )
-    const trigger = screen.getByLabelText('Enable zoom')
-    expect(trigger.getAttribute('aria-pressed')).toBe('false')
-  })
-
-  it('respects initialEnabled=true', () => {
-    render(
-      <Provider id='zt-2' data={[]}>
-        <ZoomToggle initialEnabled />
-      </Provider>,
-    )
-    expect(screen.getByLabelText('Disable zoom')).toBeTruthy()
-  })
-
-  it('clicking enables the transform — dataZoom appears in the post-pipeline option', () => {
-    render(
-      <Provider id='zt-3' data={[1]}>
-        <ZoomToggle />
-      </Provider>,
-    )
-    fireEvent.click(screen.getByLabelText('Enable zoom'))
-    // configTransforms now apply inside <Widget.Echart>; replay the
-    // pipeline locally over a blank structural option.
-    const configTransforms = getWidgetStore('zt-3').getState().configTransforms
-    const opts = applyTransforms({}, configTransforms) as {
-      dataZoom?: { type: string }[]
-    }
-    expect(opts.dataZoom).toBeTruthy()
-    expect(opts.dataZoom).toHaveLength(2)
-    expect(opts.dataZoom?.[0]?.type).toBe('inside')
-    expect(opts.dataZoom?.[1]?.type).toBe('slider')
-  })
-
-  it('clicking to disable issues a one-shot setOption({}, replaceMerge: ["dataZoom"]) on the live instance', () => {
-    const setOption = vi.fn()
-    const chart = { setOption } as unknown as ECharts
-    render(
-      <Provider id='zt-4' data={[1]}>
-        <ZoomToggle initialEnabled />
-      </Provider>,
-    )
-    setEchartInstance('zt-4', chart)
-    fireEvent.click(screen.getByLabelText('Disable zoom'))
-    expect(setOption).toHaveBeenCalledTimes(1)
-    expect(setOption).toHaveBeenCalledWith({}, { replaceMerge: ['dataZoom'] })
-  })
-
-  it('clicking to enable does NOT touch the live instance (no cleanup needed)', () => {
-    const setOption = vi.fn()
-    const chart = { setOption } as unknown as ECharts
-    render(
-      <Provider id='zt-5' data={[1]}>
-        <ZoomToggle />
-      </Provider>,
-    )
-    setEchartInstance('zt-5', chart)
-    fireEvent.click(screen.getByLabelText('Enable zoom'))
-    expect(setOption).not.toHaveBeenCalled()
-  })
-
-  it('rehydrates enabled state from transformStates on remount', () => {
-    const { unmount } = render(
-      <Provider id='zt-6' data={[1]} keepAlive>
-        <ZoomToggle />
-      </Provider>,
-    )
-    fireEvent.click(screen.getByLabelText('Enable zoom'))
-    unmount()
-    render(
-      <Provider id='zt-6' data={[1]} keepAlive>
-        <ZoomToggle />
-      </Provider>,
-    )
-    // Re-mounted with keepAlive — enabled survived.
-    expect(screen.getByLabelText('Disable zoom')).toBeTruthy()
-  })
-
-  it('honors custom labels', () => {
-    render(
-      <Provider id='zt-7' data={[]}>
-        <ZoomToggle labels={{ off: 'Pan & zoom', on: 'Stop pan & zoom' }} />
-      </Provider>,
-    )
-    expect(screen.getByLabelText('Pan & zoom')).toBeTruthy()
-  })
-})

package/src/widgets-v2/actions/zoom-toggle/zoom-toggle.tsx

@@ -1,106 +0,0 @@
-import { useCallback, useMemo, type ComponentType } from 'react'
-import { IconButton, useTheme, type SvgIconProps } from '@mui/material'
-import { ZoomIn as ZoomInIcon } from '@mui/icons-material'
-import { Tooltip } from '../../../components'
-import {
-  getEchartInstance,
-  useSingleTransform,
-  useWidgetId,
-} from '../../stores'
-import { createAddZoom, type ZoomAxis } from './transforms'
-import { DEFAULT_ZOOM_TOGGLE_LABELS, type ZoomToggleLabels } from './labels'
-import { styles } from './style'
-
-const ZOOM_DESCRIPTOR = {
-  id: 'zoom-toggle',
-  type: 'config' as const,
-  order: 20,
-}
-
-export interface ZoomToggleProps {
-  initialEnabled?: boolean
-  labels?: Partial<ZoomToggleLabels>
-  icon?: ComponentType<SvgIconProps>
-  iconProps?: SvgIconProps
-  /**
-   * Which axes the zoom controls. Default `['x']` — matches bar /
-   * histogram / timeseries (horizontal pan on the category axis). Pass
-   * `['x', 'y']` for 2D zoom on a scatterplot-style chart (mouse-wheel
-   * scales both axes; horizontal slider at bottom + vertical slider on
-   * the right).
-   */
-  axes?: readonly ZoomAxis[]
-}
-
-/**
- * Toggle a `dataZoom` slider + wheel-zoom on the chart. The transform is
- * theme-bound so the slider gets v1's CARTO chrome (blue-tinted filler,
- * secondary-color preview, white pill handles).
- *
- * `dataZoom` is intentionally NOT in `replaceMergeKeys` — ECharts merges
- * subsequent `setOption` calls so the user's dragged range survives
- * unrelated re-renders (data updates, formatter swaps, RelativeData toggles).
- *
- * On disable the transform is unregistered, but ECharts' merge semantics
- * would otherwise *keep* the live `dataZoom` component visible. To remove
- * the slider immediately we issue a one-shot
- * `setOption({}, { replaceMerge: ['dataZoom'] })` against the live chart
- * instance via {@link getEchartInstance} — this bypasses the pipeline so
- * unrelated transforms aren't disturbed.
- */
-export function ZoomToggle({
-  initialEnabled = false,
-  labels,
-  icon: Icon = ZoomInIcon,
-  iconProps,
-  axes,
-}: ZoomToggleProps) {
-  const id = useWidgetId()
-  const theme = useTheme()
-  const _labels = { ...DEFAULT_ZOOM_TOGGLE_LABELS, ...labels }
-  // Reduce `axes` to two structural booleans before memoizing so the memo
-  // depends on stable primitive values, not an array reference (callers
-  // typically pass an inline `axes={['x', 'y']}` literal that changes
-  // identity each render). Default — no `axes` prop — is x-axis only,
-  // matching `createAddZoom`'s default.
-  const includeX = axes ? axes.includes('x') : true
-  const includeY = axes ? axes.includes('y') : false
-  const transform = useMemo(() => {
-    const resolved: ZoomAxis[] = []
-    if (includeX) resolved.push('x')
-    if (includeY) resolved.push('y')
-    return createAddZoom(theme, { axes: resolved })
-  }, [theme, includeX, includeY])
-  const { enabled, toggle } = useSingleTransform(
-    id,
-    ZOOM_DESCRIPTOR,
-    transform,
-    { initialEnabled },
-  )
-
-  const handleToggle = useCallback(() => {
-    if (enabled) {
-      // About to disable — clear the dataZoom component on the live
-      // instance so the slider disappears immediately.
-      getEchartInstance(id)?.setOption({}, { replaceMerge: ['dataZoom'] })
-    }
-    toggle()
-  }, [enabled, toggle, id])
-
-  const tooltip = enabled ? _labels.on : _labels.off
-
-  return (
-    <Tooltip title={tooltip}>
-      <IconButton
-        size='small'
-        aria-label={tooltip}
-        aria-pressed={enabled}
-        onClick={handleToggle}
-        className={enabled ? 'active' : undefined}
-        sx={{ ...styles.toggle, ...(enabled && styles.toggleActive) }}
-      >
-        <Icon fontSize='small' {...iconProps} />
-      </IconButton>
-    </Tooltip>
-  )
-}