@bspk/ui 1.1.34 → 1.3.0

package/src/components/TabGroup/tab-group.scss

@@ -1,101 +1,57 @@
-[data-bspk='tab-group'] {
-    display: flex;
-    flex-direction: row;
+ul[data-bspk='tab-group'] {
+    border-bottom: none;
 
-    --btn-flex-grow: 0;
-
-    border-bottom: 1px solid var(--stroke-neutral-low);
-    width: 100%;
-
-    &[data-width='fill'] {
-        align-items: stretch;
-        width: 100%;
-
-        --btn-flex-grow: 1;
-    }
-
-    --font: var(--labels-base);
-    --height: var(--spacing-sizing-10);
-
-    &[data-size='small'] {
-        --font: var(--labels-small);
-        --height: var(--spacing-sizing-08);
-    }
-
-    &[data-size='large'] {
-        --font: var(--labels-large);
-        --height: var(--spacing-sizing-12);
-    }
-
-    button {
+    li {
         border: 0;
-        cursor: pointer;
         color: var(--foreground-neutral-on-surface-variant-02);
         background: none;
-        flex-grow: var(--btn-flex-grow);
-        font: var(--font);
-        white-space: nowrap;
+        border-bottom: 1px solid var(--stroke-neutral-low);
+        position: relative;
+        padding: 0 var(--spacing-sizing-04);
 
-        &:hover {
-            background: var(--interactions-neutral-hover-opacity);
-        }
-
-        &:active {
-            background: var(--interactions-neutral-press-opacity);
+        &:not([aria-disabled]) {
+            &:active {
+                background: var(--interactions-neutral-press-opacity);
+            }
         }
 
-        &:disabled {
-            pointer-events: none;
+        &[aria-disabled] {
             color: var(--foreground-neutral-disabled-on-surface);
         }
 
-        &:focus-visible {
-            outline: solid 2px var(--stroke-neutral-focus);
-        }
+        &[aria-selected='true'] {
+            color: var(--foreground-brand-primary);
 
-        span {
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            margin: 0 var(--spacing-sizing-04);
-            height: var(--height);
-            justify-content: center;
-            position: relative;
-            gap: var(--spacing-sizing-02);
+            &::after {
+                content: '';
+                display: block;
+                width: calc(100% - var(--spacing-sizing-04) * 2);
+                height: 2px;
+                background-color: var(--stroke-brand-primary);
+                bottom: -1px;
+                position: absolute;
+                border-top-right-radius: 2px;
+                border-top-left-radius: 2px;
+            }
 
             svg {
-                width: var(--spacing-sizing-05);
+                color: var(--surface-brand-primary);
             }
         }
+    }
 
-        &[data-active] {
-            color: var(--foreground-brand-primary);
-
-            span {
-                &::after {
-                    content: '';
-                    display: block;
-                    width: 100%;
-                    height: 2px;
-                    background-color: var(--stroke-brand-primary);
-                    bottom: -1px;
-                    position: absolute;
-                    border-top-right-radius: 2px;
-                    border-top-left-radius: 2px;
-                }
+    &[data-show-trail][data-width='hug'] {
+        width: 100%;
+        border-bottom: 1px solid var(--stroke-neutral-low);
 
-                svg {
-                    color: var(--surface-brand-primary);
-                }
-            }
+        li {
+            border-bottom: none;
         }
     }
 
-    &[data-hide-trail] {
-        border-bottom: none;
-
-        button {
-            border-bottom: 1px solid var(--stroke-neutral-low);
+    &:focus-within {
+        li:not([aria-disabled])[data-active] {
+            background: var(--interactions-neutral-hover-opacity);
         }
     }
 }

package/src/components/TabList/TabList.rtl.test.tsx

@@ -0,0 +1,26 @@
+import { TabList } from './TabList';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+const TestBed = () => (
+    <TabList
+        label="Example label"
+        onChange={() => {}}
+        options={[
+            { value: '1', label: 'Option 1' },
+            { value: '2', label: 'Option 2' },
+            { value: '3', label: 'Option 3' },
+        ]}
+        value="1"
+    />
+);
+
+describe('TabList (RTL)', () => {
+    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
+
+    it('renders', () => {
+        const { getByLabelText } = render(<TestBed />);
+
+        expect(getByLabelText('Example label')).toBeInTheDocument();
+    });
+});

package/src/components/TabList/TabList.tsx

@@ -0,0 +1,244 @@
+import './tab-list.scss';
+import { Fragment, ReactNode, useMemo } from 'react';
+import { Badge, BadgeProps } from '-/components/Badge';
+import { Tooltip } from '-/components/Tooltip';
+import { Truncated } from '-/components/Truncated';
+import { useArrowNavigation } from '-/hooks/useArrowNavigation';
+import { useId } from '-/hooks/useId';
+import { ElementProps } from '-/types/common';
+import { getElementById } from '-/utils/dom';
+import { handleKeyDown } from '-/utils/handleKeyDown';
+import { useIds } from '-/utils/useIds';
+
+const TAB_BADGE_SIZES: Record<TabSize, BadgeProps['size']> = {
+    large: 'small',
+    medium: 'x-small',
+    small: 'x-small',
+};
+
+export type TabSize = 'large' | 'medium' | 'small';
+
+export type TabOption = {
+    /**
+     * The label of the tab. This is the text that will be displayed on the tab.
+     *
+     * @required
+     */
+    label: string;
+    /**
+     * Determines if the element is [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled).
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The value of the tab sent to onChange when selected.
+     *
+     * If not provided, the label will be used as the value.
+     */
+    value: string;
+    /**
+     * The icon to display on the left side of the tab.
+     *
+     * @type BspkIcon
+     */
+    icon?: ReactNode;
+    /**
+     * The icon to display on the left side of the tab when the tab is currently selected.
+     *
+     * @type BspkIcon
+     */
+    iconSelected?: ReactNode;
+    /** The badge count to display on the tab */
+    badge?: number;
+};
+
+export type TabListProps<O extends TabOption = TabOption> = {
+    /**
+     * The tabs to display.
+     *
+     * If **less than 2** items are provided, the component will not render.
+     *
+     * @example
+     *     [
+     *         { value: '1', label: 'Option 1' },
+     *         { value: '2', label: 'Disabled 2 ', disabled: true },
+     *         { value: '3', label: 'Option 3' },
+     *     ];
+     *
+     * @type Array<TabOption>
+     * @required
+     */
+    options: O[];
+    /**
+     * The value of the selected tab.
+     *
+     * @example
+     *     1;
+     *
+     * @required
+     */
+    value: TabOption['value'];
+    /**
+     * The function to call when the tab is clicked.
+     *
+     * @required
+     */
+    onChange: (tabValue: string) => void;
+    /**
+     * The size of the tabs.
+     *
+     * @default medium
+     */
+    size?: TabSize;
+    /**
+     * When 'fill' the options will fill the width of the container. When 'hug', the options will be as wide as their
+     * content.
+     *
+     * @default hug
+     */
+    width?: 'fill' | 'hug';
+    /**
+     * The label for the tab utility, used for accessibility.
+     *
+     * @required
+     */
+    label: string;
+    /** The id of the tab utility, used for accessibility. */
+    id?: string;
+    /**
+     * Determines if the labels of the options should be displayed. If icons are not provided for every option this is
+     * ignored and labels are shown.
+     *
+     * @default false
+     */
+    iconsOnly?: boolean;
+};
+
+/**
+ * Navigation tool that organizes content across different screens and views.
+ *
+ * See TabGroup or SegmentedControl for examples.
+ *
+ * @example
+ *     import { useState } from 'react';
+ *     import { TabList } from '@bspk/ui/TabList';
+ *
+ *     export function Example() {
+ *         const [selectedTab, setSelectedTab] = useState<string>();
+ *
+ *         return (
+ *             <TabList
+ *                 onChange={setSelectedTab}
+ *                 options={[
+ *                     { value: '1', label: 'Option 1' },
+ *                     { value: '2', label: 'Option 2' },
+ *                     { value: '3', label: 'Option 3' },
+ *                 ]}
+ *                 value={selectedTab}
+ *             />
+ *         );
+ *     }
+ *
+ * @name TabList
+ * @phase Utility
+ */
+export function TabList({
+    //
+    onChange,
+    value: valueProp,
+    size = 'medium',
+    options: optionsProp,
+    width = 'hug',
+    label,
+    id: idProp,
+    iconsOnly: iconsOnlyProp = false,
+    ...containerProps
+}: ElementProps<TabListProps, 'ul'>) {
+    const id = useId(idProp);
+
+    const options = useIds(`tab-list-${id}`, optionsProp);
+
+    const { activeElementId, setActiveElementId, arrowKeyCallbacks } = useArrowNavigation({
+        ids: options.map((opt) => opt.id),
+        defaultActiveId: options.find((opt) => opt.value === valueProp)?.id,
+    });
+
+    const value = useMemo(() => {
+        const option = options.find((opt) => opt.value === valueProp);
+        return option ? option.value : options[0]?.value;
+    }, [options, valueProp]);
+
+    // If all options have icons, we can hide the labels
+    const iconsOnly = iconsOnlyProp === true && options.every((item) => item.icon && item.label);
+
+    const handleClick = (item: (typeof options)[number]) => () => {
+        setActiveElementId(item.id);
+        if (!item.disabled) onChange(item.value);
+    };
+
+    return (
+        <ul
+            {...containerProps}
+            aria-label={label}
+            data-bspk-utility="tab-list"
+            data-hug={width === 'hug' || undefined}
+            data-size={size}
+            data-width={width}
+            id={id}
+            onFocusCapture={() => {
+                getElementById(activeElementId)?.focus();
+            }}
+            onKeyDownCapture={handleKeyDown({
+                ...arrowKeyCallbacks,
+                Enter: (event) => {
+                    event.preventDefault();
+                    const activeOption = options.find((opt) => opt.id === activeElementId);
+                    if (activeOption && !activeOption.disabled) onChange(activeOption.value);
+                },
+                Space: (event) => {
+                    event.preventDefault();
+                    const activeOption = options.find((opt) => opt.id === activeElementId);
+                    if (activeOption && !activeOption.disabled) onChange(activeOption.value);
+                },
+            })}
+            role="tablist"
+        >
+            {options.map((item) => {
+                const isSelected = item.value === value;
+                const icon = isSelected ? item.iconSelected : item.icon;
+                const isActive = (activeElementId && activeElementId === item.id) || undefined;
+
+                return (
+                    <Fragment key={item.id}>
+                        <Tooltip disabled={!iconsOnly} label={item.label} placement="top">
+                            {(triggerProps) => (
+                                // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+                                <li
+                                    {...triggerProps}
+                                    aria-controls={id}
+                                    aria-disabled={item.disabled || undefined}
+                                    aria-selected={isSelected}
+                                    data-active={isActive}
+                                    data-value={item.value}
+                                    id={item.id}
+                                    onClick={item.disabled ? undefined : handleClick(item)}
+                                    role="tab"
+                                    tabIndex={isActive ? 0 : -1}
+                                >
+                                    {icon && <span aria-hidden="true">{icon}</span>}
+                                    {!iconsOnly && <Truncated data-label>{item.label}</Truncated>}
+                                    {item.badge && !item.disabled && (
+                                        <Badge count={item.badge} size={TAB_BADGE_SIZES[size]} />
+                                    )}
+                                </li>
+                            )}
+                        </Tooltip>
+                    </Fragment>
+                );
+            })}
+        </ul>
+    );
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/TabList/TabListExample.tsx

@@ -0,0 +1,7 @@
+import { TabListProps } from './TabList';
+import { ComponentExample } from '-/utils/demo';
+
+export const TabListExample: ComponentExample<TabListProps> = {
+    containerStyle: { width: '100%' },
+    render: ({ props, Component }) => <Component {...props} />,
+};

package/src/components/TabList/index.tsx

@@ -0,0 +1 @@
+export * from './TabList';

package/src/components/TabList/tab-list.scss

@@ -0,0 +1,73 @@
+ul[data-bspk-utility='tab-list'] {
+    --item-flex-grow: 0;
+
+    display: flex;
+    flex-direction: row;
+    list-style: none;
+    width: 100%;
+    height: var(--height);
+    font: var(--font);
+
+    &[data-width='fill'] {
+        align-items: stretch;
+        width: 100%;
+
+        --item-flex-grow: 1;
+    }
+
+    --icon-size: var(--spacing-sizing-05);
+    --font: var(--labels-base);
+    --height: var(--spacing-sizing-10);
+
+    &[data-size='small'] {
+        --font: var(--labels-small);
+        --height: var(--spacing-sizing-08);
+        --icon-size: var(--spacing-sizing-04);
+    }
+
+    &[data-size='large'] {
+        --font: var(--labels-large);
+        --height: var(--spacing-sizing-12);
+        --icon-size: var(--spacing-sizing-06);
+    }
+
+    &:has(:focus-visible) {
+        outline: 2px solid var(--stroke-neutral-focus);
+        outline-offset: -1px;
+        position: relative;
+        z-index: var(--z-index-focus);
+    }
+
+    li {
+        list-style: none;
+        cursor: pointer;
+        font: var(--font);
+        white-space: nowrap;
+        outline: none;
+        user-select: none;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: var(--spacing-sizing-02);
+        min-width: 0; // Prevent overflow from long content
+
+        &[aria-disabled] {
+            cursor: not-allowed;
+        }
+
+        span {
+            pointer-events: none;
+        }
+
+        [data-label][style] {
+            justify-content: left;
+            max-width: 200px;
+        }
+
+        svg {
+            width: var(--icon-size);
+        }
+    }
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Table/Footer.tsx

@@ -0,0 +1,40 @@
+import { Pagination } from '-/components/Pagination';
+
+export function TableFooter({
+    pageIndex,
+    pageSize,
+    setPageIndex,
+    totalRows,
+    id,
+    totalPages,
+}: {
+    pageIndex: number;
+    pageSize: number;
+    setPageIndex: (newVal: number) => void;
+    totalRows: number;
+    id: string;
+    totalPages: number;
+}) {
+    const startRow = totalRows === 0 ? 0 : pageIndex * pageSize + 1;
+    const endRow = Math.min(startRow + pageSize - 1, totalRows);
+    return (
+        <div data-pagination role="group">
+            <div data-pagination-label>
+                Showing {startRow}-{endRow} of {totalRows} results
+            </div>
+            <div data-sr-only id={`${id}-pagination-description`}>
+                <p>
+                    The buttons inside this control allow you to paginate through the data in the table above,
+                    {pageSize}
+                    rows at a time.
+                </p>
+            </div>
+            <Pagination
+                aria-labelledby={`${id}-pagination-description`}
+                numPages={totalPages}
+                onChange={(newVal) => setPageIndex(newVal - 1)}
+                value={pageIndex + 1}
+            />
+        </div>
+    );
+}

package/src/components/Table/Table.rtl.test.tsx

@@ -0,0 +1,28 @@
+import { Table } from './Table';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+const TestBed = () => (
+    <Table
+        columns={[
+            { key: 'state', label: 'State', width: '100px' },
+            { key: 'capital', label: 'Capital', width: '1fr' },
+        ]}
+        data={[
+            { state: 'New Jersey', capital: 'Trenton', id: '1' },
+            { state: 'New York', capital: 'Albany', id: '2' },
+            { state: 'California', capital: 'Sacramento', id: '3' },
+        ]}
+        title="State Capitals"
+    />
+);
+
+describe('Table (RTL)', () => {
+    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
+
+    it('renders', () => {
+        const { getByText } = render(<TestBed />);
+
+        expect(getByText('State Capitals')).toBeInTheDocument();
+    });
+});