@cerberus-design/react 0.13.2 → 0.14.0

package/src/aria-helpers/tabs.aria.ts

@@ -1,70 +0,0 @@
-'use client'
-
-import { useEffect, useState } from 'react'
-import { useTabsContext } from '../context/tabs'
-
-function getNextIndex(index: number, length: number) {
-  return index === length - 1 ? 0 : index + 1
-}
-
-function getPrevIndex(index: number, length: number) {
-  return index === 0 ? length - 1 : index - 1
-}
-
-export function useTabsKeyboardNavigation() {
-  const { tabs } = useTabsContext()
-  const [activeTab, setActiveTab] = useState(-1)
-
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      const index =
-        activeTab === -1
-          ? tabs.current.findIndex((tab) => tab.ariaSelected === 'true')
-          : activeTab
-      const nextIndex = getNextIndex(index, tabs.current.length)
-      const prevIndex = getPrevIndex(index, tabs.current.length)
-
-      // If the active tab is not found, do nothing
-      if (index === -1) return
-
-      switch (event.key) {
-        case 'ArrowLeft':
-          event.preventDefault()
-          setActiveTab(prevIndex)
-          tabs.current[prevIndex].focus()
-          break
-        case 'ArrowRight':
-          event.preventDefault()
-          setActiveTab(nextIndex)
-          tabs.current[nextIndex].focus()
-          break
-        case 'Home':
-          event.preventDefault()
-          setActiveTab(0)
-          tabs.current[0].focus()
-          break
-        case 'End':
-          event.preventDefault()
-          setActiveTab(tabs.current.length - 1)
-          tabs.current[tabs.current.length - 1].focus()
-          break
-        default:
-          break
-      }
-    }
-
-    document.addEventListener('keydown', handleKeyDown)
-
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown)
-    }
-  }, [activeTab, tabs.current])
-
-  return {
-    ref: (tab: HTMLButtonElement) => {
-      if (tab && !tabs.current.includes(tab)) {
-        tabs.current.push(tab)
-      }
-    },
-  }
-}

package/src/components/Tab.tsx

@@ -1,68 +0,0 @@
-'use client'
-
-import {
-  useMemo,
-  useTransition,
-  type ButtonHTMLAttributes,
-  type MouseEvent,
-} from 'react'
-import { useTabsContext } from '../context/tabs'
-import { cx } from '@cerberus/styled-system/css'
-import { useTabsKeyboardNavigation } from '../aria-helpers/tabs.aria'
-
-/**
- * This module provides a Tab component.
- * @module
- */
-
-export interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  /**
-   * The id of the tab that will be tracked as the active tab and used for aria
-   * attributes.
-   */
-  value: string
-}
-
-/**
- * The Tab component provides a tab element to be used in a TabList.
- * @definition [ARIA Target Size](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html#:~:text=Understanding%20SC%202.5.,%3ATarget%20Size%20(Level%20AAA)&text=The%20size%20of%20the%20target,Equivalent)
- * @see https://cerberus.digitalu.design/react/tabs
- * @memberof module:Tabs
- * @example
- * ```tsx
- * <Tabs>
- *  <TabList description="Profile settings">
- *   <Tab value="overview">Overview</Tab>
- *  </TabList>
- *  <TabPanel tab="overview">...</TabPanel>
- * </Tabs>
- * ```
- */
-export function Tab(props: TabProps) {
-  const { value, ...nativeProps } = props
-  const { active, onTabUpdate, styles } = useTabsContext()
-  const [isPending, startTransition] = useTransition()
-  const { ref } = useTabsKeyboardNavigation()
-  const isActive = useMemo(() => active === value, [active, value])
-
-  function handleClick(e: MouseEvent<HTMLButtonElement>) {
-    props.onClick?.(e)
-    startTransition(() => onTabUpdate(e.currentTarget.value))
-  }
-
-  return (
-    <button
-      {...nativeProps}
-      {...(!isActive && { tabIndex: -1 })}
-      aria-controls={`panel:${value}`}
-      aria-busy={isPending}
-      aria-selected={isActive}
-      id={`tab:${value}`}
-      className={cx(nativeProps.className, styles.tab)}
-      onClick={handleClick}
-      role="tab"
-      ref={ref}
-      value={value}
-    />
-  )
-}

package/src/components/TabList.tsx

@@ -1,51 +0,0 @@
-'use client'
-
-import { cx } from '@cerberus/styled-system/css'
-import { hstack } from '@cerberus/styled-system/patterns'
-import type { HTMLAttributes, PropsWithChildren } from 'react'
-import { useTabsContext } from '../context/tabs'
-
-/**
- * This module provides a TabList component.
- * @module
- */
-
-export interface TabListProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * A description of what the tab list contains. Required for accessibility.
-   */
-  description: string
-}
-
-/**
- * The TabList component provides a container for tab elements.
- * @see https://cerberus.digitalu.design/react/tabs
- * @memberof module:Tabs
- * @example
- * ```tsx
- * <TabList description="Button details">
- *  <Tab id="overview">Overview</Tab>
- *  <Tab id="guidelines">Guidelines</Tab>
- * </TabList>
- * ```
- */
-export function TabList(props: PropsWithChildren<TabListProps>) {
-  const { description, ...nativeProps } = props
-  const { id, styles } = useTabsContext()
-
-  return (
-    <div
-      {...nativeProps}
-      aria-label={description}
-      className={cx(
-        nativeProps.className,
-        hstack({
-          gap: '0',
-        }),
-        styles.tabList,
-      )}
-      id={id ?? nativeProps.id}
-      role="tablist"
-    />
-  )
-}

package/src/components/TabPanel.tsx

@@ -1,49 +0,0 @@
-'use client'
-
-import { cx } from '@cerberus/styled-system/css'
-import { useMemo, type HTMLAttributes } from 'react'
-import { useTabsContext } from '../context/tabs'
-import { Show } from './Show'
-
-/**
- * This module provides a TabPanel component.
- * @module
- */
-
-export interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * The unique value of the Tab that is associated with the TabPanel.
-   */
-  tab: string
-}
-
-/**
- * The TabPanel component provides a panel element to be used in a Tabs
- * provider.
- * @see https://cerberus.digitalu.design/react/tabs
- * @memberof module:Tabs
- * @example
- * ```tsx
- * <TabPanel tab="overview">
- *   Overview content
- * </TabPanel>
- * ```
- */
-export function TabPanel(props: TabPanelProps) {
-  const { tab, ...nativeProps } = props
-  const { active, styles } = useTabsContext()
-  const isActive = useMemo(() => active === tab, [active, tab])
-
-  return (
-    <Show when={isActive}>
-      <div
-        {...nativeProps}
-        {...(isActive && { tabIndex: 0 })}
-        aria-labelledby={`tab:${tab}`}
-        className={cx(nativeProps.className, styles.tabPanel)}
-        id={`panel:${tab}`}
-        role="tabpanel"
-      />
-    </Show>
-  )
-}