@bspk/ui 1.2.0 → 1.3.1

package/src/components/SnackbarProvider/SnackbarProviderExample.tsx

@@ -0,0 +1,127 @@
+import { useRef, useState } from 'react';
+import { SnackbarProvider, SnackbarProviderProps } from './SnackbarProvider';
+import { Button } from '-/components/Button';
+import { CheckboxGroup } from '-/components/CheckboxGroup';
+import { NumberField } from '-/components/NumberField';
+import { TextField } from '-/components/TextField';
+import { Txt } from '-/components/Txt';
+import { useSnackbarContext } from '-/hooks/useSnackbarContext';
+import { ComponentExample } from '-/utils/demo';
+import './snackbar-provider-example.scss';
+
+export const SnackbarProviderExample: ComponentExample<SnackbarProviderProps> = {
+    containerStyle: { width: '100%' },
+    defaultState: {},
+    disableProps: [],
+    presets: [],
+    render: ({ props }) => (
+        <SnackbarProvider countLimit={props.countLimit} timeout={props.timeout || 5000}>
+            <ExampleForm />
+        </SnackbarProvider>
+    ),
+    sections: [],
+    variants: {},
+};
+
+function ExampleForm() {
+    const countRef = useRef(0);
+    const [snackbarText, setSnackbarText] = useState('Full send!');
+    const [options, setOptions] = useState<string[]>(['enableTimeout']);
+    const [dismissButtonText, setDismissButtonText] = useState('Dismiss');
+    const [timeout, setTimeout] = useState(5000);
+
+    const { sendSnackbar } = useSnackbarContext();
+
+    const enableTimeout = options.includes('enableTimeout');
+    const enableDismiss = options.includes('dismissButton');
+    const enableCount = options.includes('showCount');
+
+    const onButtonClick = () => {
+        if (enableCount) {
+            countRef.current += 1;
+        }
+
+        sendSnackbar({
+            text: snackbarText + (enableCount ? ` (${countRef.current})` : ''),
+            timeout: enableTimeout ? timeout : null,
+            button: enableDismiss
+                ? {
+                      label: dismissButtonText,
+                      onClick: 'close',
+                  }
+                : undefined,
+        });
+    };
+
+    return (
+        <div data-snackbar-provider-example="">
+            <TextField
+                aria-label="Snackbar Text"
+                controlId="text"
+                label="Snackbar Text"
+                name="text"
+                onChange={setSnackbarText}
+                size="small"
+                value={snackbarText}
+            />
+
+            <CheckboxGroup
+                aria-label="Example Checkbox Group"
+                name="example-checkbox-group"
+                onChange={(nextValues: string[]) => {
+                    setOptions(nextValues);
+                }}
+                options={[
+                    { label: 'Enable timeout', value: 'enableTimeout' },
+                    {
+                        label: 'Include dismiss button',
+                        value: 'dismissButton',
+                    },
+                    {
+                        label: 'Count sends (diagnostic)',
+                        value: 'showCount',
+                    },
+                ]}
+                values={options}
+            />
+
+            {enableTimeout && (
+                <NumberField
+                    aria-label="Timeout"
+                    controlId="timeout"
+                    label="Timeout (ms)"
+                    max={60000}
+                    min={0}
+                    name="timeout"
+                    onChange={(val) => setTimeout(parseInt(`${val}`) || 0)}
+                    size="small"
+                    step={1000}
+                    value={timeout}
+                />
+            )}
+
+            {enableDismiss && (
+                <TextField
+                    aria-label="Dismiss button Text"
+                    controlId="text"
+                    label="Dismiss Button Text"
+                    name="text"
+                    onChange={setDismissButtonText}
+                    size="small"
+                    value={dismissButtonText}
+                />
+            )}
+
+            {!enableDismiss && !enableTimeout && (
+                <Txt data-warning="" variant="body-small">
+                    Note: Without a timeout or dismiss button the snackbar can only be closed programatically using the
+                    useSnackbarContext hook.
+                </Txt>
+            )}
+
+            <div data-button-wrapper="">
+                <Button label="Send it!" onClick={onButtonClick} size="medium" title="Snackbar" />
+            </div>
+        </div>
+    );
+}

package/src/components/SnackbarProvider/index.tsx

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

package/src/components/SnackbarProvider/snackbar-provider-example.scss

@@ -0,0 +1,17 @@
+[data-snackbar-provider-example] {
+    display: flex;
+    gap: var(--spacing-sizing-03);
+    flex-direction: column;
+    width: 300px;
+    flex: 1;
+
+    [data-warning] {
+        color: var(--status-error);
+    }
+
+    [data-button-wrapper] {
+        display: flex;
+        justify-content: center;
+        margin-top: var(--spacing-sizing-02);
+    }
+}

package/src/components/SnackbarProvider/snackbar-provider.scss

@@ -0,0 +1,15 @@
+[data-bspk='snackbar-provider'] {
+    position: fixed;
+    z-index: var(--z-index-dialog);
+    display: flex;
+    flex-direction: column-reverse;
+    max-height: 100%;
+    overflow: hidden;
+    inset: 0;
+    align-items: center;
+    gap: var(--spacing-sizing-02);
+    pointer-events: none;
+    padding: var(--spacing-sizing-02);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

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

@@ -0,0 +1,15 @@
+import { Switch } from './Switch';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+const TestBed = () => <Switch aria-label="Example aria-label" checked name="Example name" onChange={() => {}} />;
+
+describe('Switch (RTL)', () => {
+    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
+
+    it('renders', () => {
+        const { getByLabelText } = render(<TestBed />);
+
+        expect(getByLabelText('Example aria-label')).toBeInTheDocument();
+    });
+});

package/src/components/Switch/Switch.tsx

@@ -1,9 +1,7 @@
+import './switch.scss';
 import { ChangeEvent } from 'react';
-
 import { CommonProps } from '-/types/common';
 
-import './switch.scss';
-
 export type SwitchProps = CommonProps<'aria-label' | 'disabled' | 'name' | 'value'> & {
     /**
      * Marks the control as checked.

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

@@ -0,0 +1,15 @@
+import { SwitchOption } from './SwitchOption';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+const TestBed = () => <SwitchOption checked label="Example label" name="Example name" onChange={() => {}} />;
+
+describe('SwitchOption (RTL)', () => {
+    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
+
+    it('renders', () => {
+        const { getByLabelText } = render(<TestBed />);
+
+        expect(getByLabelText('Example label')).toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,19 @@
+import { TabGroup } from './TabGroup';
+import { presets } from './TabGroupExample';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+describe('TabGroup (RTL)', () => {
+    presets.forEach((preset) => {
+        it(
+            `has no basic a11y issues - ${preset.label}`,
+            hasNoBasicA11yIssues(<TabGroup onChange={() => {}} {...preset.propState} />),
+        );
+    });
+
+    it('renders', () => {
+        const { getByLabelText } = render(<TabGroup onChange={() => {}} {...presets[0].propState} />);
+
+        expect(getByLabelText(presets[0].propState.label)).toBeInTheDocument();
+    });
+});

package/src/components/TabGroup/TabGroup.tsx

@@ -1,8 +1,7 @@
+import './tab-group.scss';
 import { TabList, TabListProps, TabOption } from '-/components/TabList';
 import { ElementProps } from '-/types/common';
 
-import './tab-group.scss';
-
 export type TabGroupSize = 'large' | 'medium' | 'small';
 
 export type TabGroupProps = Omit<TabListProps<TabOption>, 'iconsOnly'> & {

package/src/components/TabGroup/TabGroupExample.tsx

@@ -5,7 +5,7 @@ import { SvgSquare } from '@bspk/icons/Square';
 import { SvgSquareFill } from '@bspk/icons/SquareFill';
 
 import { TabGroupProps } from '.';
-import { ComponentExample } from '-/utils/demo';
+import { ComponentExample, Preset } from '-/utils/demo';
 
 const PRESET_OPTIONS: TabGroupProps['options'] = [
     {
@@ -48,56 +48,62 @@ const OPTION_ICONS = [
     },
 ];
 
+export const presets: Preset<TabGroupProps>[] = [
+    {
+        label: 'With icons',
+        propState: {
+            value: '1',
+            options: PRESET_OPTIONS.map((option, index) => ({
+                ...option,
+                icon: OPTION_ICONS[index].icon,
+                iconSelected: OPTION_ICONS[index].iconSelected,
+            })),
+            label: 'Tabs with icons',
+        },
+    },
+    {
+        label: 'With badges',
+        propState: {
+            value: '1',
+            options: PRESET_OPTIONS.map((option, index) => ({
+                ...option,
+                badge: Math.round((index + 1) * 2.6),
+            })),
+            label: 'Tabs with badges',
+        },
+    },
+    {
+        label: 'With icons & badges',
+        propState: {
+            value: '1',
+            options: PRESET_OPTIONS.map((option, index) => ({
+                ...option,
+                icon: OPTION_ICONS[index].icon,
+                iconSelected: OPTION_ICONS[index].iconSelected,
+                badge: Math.round((index + 1) * 2.6),
+            })),
+            label: 'Tabs with icons & badges',
+        },
+    },
+    {
+        label: 'Long Text only',
+        propState: {
+            value: '1',
+            options: PRESET_OPTIONS.map((option) => ({
+                ...option,
+                label: `${option.label} with a very long label that never seems to end and goes on forever`,
+            })),
+            label: 'Tabs with long text',
+        },
+    },
+];
+
 export const TabGroupExample: ComponentExample<TabGroupProps> = {
     containerStyle: { width: '100%' },
     defaultState: {
         options: PRESET_OPTIONS,
     },
-    presets: [
-        {
-            label: 'With icons',
-            propState: {
-                value: '1',
-                options: PRESET_OPTIONS.map((option, index) => ({
-                    ...option,
-                    icon: OPTION_ICONS[index].icon,
-                    iconSelected: OPTION_ICONS[index].iconSelected,
-                })),
-            },
-        },
-        {
-            label: 'With badges',
-            propState: {
-                value: '1',
-                options: PRESET_OPTIONS.map((option, index) => ({
-                    ...option,
-                    badge: Math.round((index + 1) * 2.6),
-                })),
-            },
-        },
-        {
-            label: 'With icons & badges',
-            propState: {
-                value: '1',
-                options: PRESET_OPTIONS.map((option, index) => ({
-                    ...option,
-                    icon: OPTION_ICONS[index].icon,
-                    iconSelected: OPTION_ICONS[index].iconSelected,
-                    badge: Math.round((index + 1) * 2.6),
-                })),
-            },
-        },
-        {
-            label: 'Long Text only',
-            propState: {
-                value: '1',
-                options: PRESET_OPTIONS.map((option) => ({
-                    ...option,
-                    label: `${option.label} with a very long label that never seems to end and goes on forever`,
-                })),
-            },
-        },
-    ],
+    presets,
 
     variants: {
         showTrail: {

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

@@ -10,10 +10,6 @@ ul[data-bspk='tab-group'] {
         padding: 0 var(--spacing-sizing-04);
 
         &:not([aria-disabled]) {
-            &[data-active] {
-                background: var(--interactions-neutral-hover-opacity);
-            }
-
             &:active {
                 background: var(--interactions-neutral-press-opacity);
             }
@@ -23,7 +19,7 @@ ul[data-bspk='tab-group'] {
             color: var(--foreground-neutral-disabled-on-surface);
         }
 
-        &[aria-selected] {
+        &[aria-selected='true'] {
             color: var(--foreground-brand-primary);
 
             &::after {
@@ -52,6 +48,12 @@ ul[data-bspk='tab-group'] {
             border-bottom: none;
         }
     }
+
+    &:focus-within {
+        li:not([aria-disabled])[data-active] {
+            background: var(--interactions-neutral-hover-opacity);
+        }
+    }
 }
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

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

@@ -1,13 +1,14 @@
+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 { useKeyNavigation } from '-/hooks/useKeyNavigation';
 import { ElementProps } from '-/types/common';
-
-import './tab-list.scss';
+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',
@@ -52,8 +53,6 @@ export type TabOption = {
     badge?: number;
 };
 
-const optionId = (id: string, index: number) => `${id}-item-${index + 1}`;
-
 export type TabListProps<O extends TabOption = TabOption> = {
     /**
      * The tabs to display.
@@ -157,27 +156,23 @@ export function TabList({
     ...containerProps
 }: ElementProps<TabListProps, 'ul'>) {
     const id = useId(idProp);
-    const options = useMemo(() => {
-        if (!Array.isArray(optionsProp)) return [];
-        return optionsProp.map((opt, index) => ({ ...opt, id: optionId(id, index) }));
-    }, [id, optionsProp]);
+
+    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]);
 
-    const { handleKeyDown, activeElementId, setElements, setActiveElementId } = useKeyNavigation({
-        onSelect: (nextActiveId) => {
-            onChange(options.find((opt) => opt.id === nextActiveId)?.value || '');
-        },
-    });
-
     // 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]) => (e: React.MouseEvent<HTMLLIElement>) => {
-        setTimeout(() => (e.target as HTMLElement).focus(), 100);
+    const handleClick = (item: (typeof options)[number]) => () => {
         setActiveElementId(item.id);
         if (!item.disabled) onChange(item.value);
     };
@@ -191,35 +186,45 @@ export function TabList({
             data-size={size}
             data-width={width}
             id={id}
-            ref={(node) => {
-                if (node) {
-                    const newElements = (Array.from(node.children) as HTMLElement[]).filter(
-                        (el) => !el.hasAttribute('aria-disabled'),
-                    );
-                    setElements(newElements);
-                }
+            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 || undefined}
-                                    data-active={activeElementId === item.id || undefined}
+                                    aria-selected={isSelected}
+                                    data-active={isActive}
                                     data-value={item.value}
                                     id={item.id}
-                                    onClick={handleClick(item)}
-                                    onKeyDown={handleKeyDown}
+                                    onClick={item.disabled ? undefined : handleClick(item)}
                                     role="tab"
-                                    tabIndex={isSelected ? 0 : -1}
-                                    {...triggerProps}
+                                    tabIndex={isActive ? 0 : -1}
                                 >
                                     {icon && <span aria-hidden="true">{icon}</span>}
                                     {!iconsOnly && <Truncated data-label>{item.label}</Truncated>}

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

@@ -4,7 +4,7 @@ ul[data-bspk-utility='tab-list'] {
     display: flex;
     flex-direction: row;
     list-style: none;
-    width: fit-content;
+    width: 100%;
     height: var(--height);
     font: var(--font);
 
@@ -33,13 +33,14 @@ ul[data-bspk-utility='tab-list'] {
 
     &:has(:focus-visible) {
         outline: 2px solid var(--stroke-neutral-focus);
-        outline-offset: 2px;
+        outline-offset: -1px;
+        position: relative;
+        z-index: var(--z-index-focus);
     }
 
     li {
         list-style: none;
         cursor: pointer;
-        flex-grow: var(--item-flex-grow);
         font: var(--font);
         white-space: nowrap;
         outline: none;
@@ -47,24 +48,20 @@ ul[data-bspk-utility='tab-list'] {
         display: flex;
         flex-direction: row;
         align-items: center;
-        justify-content: center;
         gap: var(--spacing-sizing-02);
+        min-width: 0; // Prevent overflow from long content
 
         &[aria-disabled] {
             cursor: not-allowed;
         }
 
         span {
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            justify-content: center;
             pointer-events: none;
         }
 
         [data-label][style] {
             justify-content: left;
-            max-width: 200px !important;
+            max-width: 200px;
         }
 
         svg {

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();
+    });
+});

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

@@ -0,0 +1,20 @@
+import { Tag } from './Tag';
+import { presets } from './TagExample';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+describe('Tag (RTL)', () => {
+    presets.forEach((preset) => {
+        it(`has no basic a11y issues - ${preset.label}`, hasNoBasicA11yIssues(<Tag {...preset.propState} />));
+    });
+
+    it('renders', () => {
+        const { getByText } = render(<Tag {...presets[0].propState} />);
+
+        expect(
+            getByText(
+                'Hello, this is a very long tag label that should be truncated if it exceeds the container width.',
+            ),
+        ).toBeInTheDocument();
+    });
+});

package/src/components/Tag/Tag.tsx

@@ -1,9 +1,7 @@
+import './tag.scss';
 import { Truncated } from '-/components/Truncated';
-
 import { ColorVariant } from '-/utils/colorVariants';
 
-import './tag.scss';
-
 export type TagProps = {
     /**
      * The label of the tag.