@bspk/ui 1.2.0 → 1.3.1

package/src/components/TimeInput/Segment.tsx

@@ -9,26 +9,24 @@ export const NUMBER_PLACEHOLDER = '--' as const;
 
 export type TimeInputType = 'hours' | 'meridiem' | 'minutes';
 
-type TimeInputSegmentProps<T extends number | string> = {
-    ariaLabel?: string;
+type TimeInputSegmentProps<T extends string> = {
     disabled?: boolean;
     name: string;
     readOnly?: boolean;
-    defaultValue?: T;
+    value?: T;
     type: TimeInputType;
     onChange: (value: T | null) => void;
 };
 
-export function TimeInputSegment<T extends number | string>({
-    ariaLabel,
+export function TimeInputSegment<T extends string>({
     disabled,
     name,
     readOnly,
-    defaultValue,
+    value: valueProp,
     type: kind,
     onChange,
 }: TimeInputSegmentProps<T>) {
-    const ref = useRef<HTMLSpanElement | null>(null);
+    const ref = useRef<HTMLElement | null>(null);
 
     const selectAll = (element: HTMLElement | null = ref.current) => {
         if (!element) return;
@@ -52,8 +50,8 @@ export function TimeInputSegment<T extends number | string>({
     );
 
     useEffect(() => {
-        if (ref.current) ref.current.textContent = valueToContent(defaultValue);
-    }, [defaultValue, valueToContent]);
+        if (ref.current) ref.current.textContent = valueToContent(valueProp);
+    }, [valueProp, valueToContent]);
 
     const handleBlur = () => {
         window.getSelection()?.removeAllRanges();
@@ -72,9 +70,12 @@ export function TimeInputSegment<T extends number | string>({
                 num: Number(currentValue) + increment,
                 rollover: true,
                 ...(kind === 'minutes' ? MINUTE_BOUNDS : HOUR_BOUNDS),
-            });
+            })
+                .toString()
+                .padStart(2, '0');
+
             onChange(nextValue as T);
-            if (ref.current) ref.current.textContent = nextValue.toString().padStart(2, '0');
+            if (ref.current) ref.current.textContent = nextValue;
         },
         [kind, onChange],
     );
@@ -130,7 +131,7 @@ export function TimeInputSegment<T extends number | string>({
                 return;
             }
 
-            // only handle digits from here
+            // only handle digits past this point, ignore everything else
             if (!/^\d$/.test(event.key)) return;
 
             let nextNumber = Number(event.key);
@@ -148,8 +149,10 @@ export function TimeInputSegment<T extends number | string>({
                 ...(kind === 'minutes' ? MINUTE_BOUNDS : HOUR_BOUNDS),
             });
 
-            onChange(nextNumber as T);
-            if (ref.current) ref.current.textContent = nextNumber.toString().padStart(2, '0');
+            const nextValue = nextNumber.toString().padStart(2, '0');
+
+            onChange(nextValue as T);
+            if (ref.current) ref.current.textContent = nextValue;
 
             const moveToNext = (kind === 'hours' && nextNumber > 2) || (kind === 'minutes' && nextNumber > 5);
 
@@ -165,32 +168,39 @@ export function TimeInputSegment<T extends number | string>({
         [kind, handleIncrement, onChange],
     );
 
+    const valueText = valueProp ? valueToContent(valueProp) : 'Empty';
+
     return (
         <span
-            aria-disabled={disabled}
-            aria-label={`${ariaLabel} ${name.charAt(0).toUpperCase() + name.slice(1)}`}
+            aria-disabled={!!disabled}
+            aria-label={kind}
             aria-readonly={readOnly}
+            aria-valuemax={kind === 'hours' ? 12 : kind === 'minutes' ? 59 : undefined}
+            aria-valuemin={kind === 'hours' ? 1 : kind === 'minutes' ? 0 : undefined}
+            aria-valuetext={valueText}
             contentEditable={!readOnly && !disabled}
-            data-input=""
+            data-input
             data-type={kind}
-            data-value={defaultValue || undefined}
+            data-value={valueProp || undefined}
             id={`${name}`}
+            inputMode={kind === 'meridiem' ? 'text' : 'numeric'}
             onBlur={handleBlur}
             onClick={() => {
                 if (disabled || readOnly) return;
-                selectAll();
+                //selectAll();
             }}
             onFocus={() => {
                 if (disabled || readOnly) return;
-                selectAll();
+                //selectAll();
             }}
             onKeyDown={handleInputKeyDown}
             ref={(element) => {
                 if (!element) return;
                 ref.current = element;
-                element.textContent = valueToContent(defaultValue);
+                element.textContent = valueToContent(valueProp);
             }}
             role="spinbutton"
+            spellCheck="false"
             tabIndex={0}
         />
     );

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

@@ -0,0 +1,15 @@
+import { TimeInput } from './TimeInput';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+const TestBed = () => <TimeInput aria-label="Example label" name="Example name" value="text value" />;
+
+describe('TimeInput (RTL)', () => {
+    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
+
+    it('renders', () => {
+        const { getByText } = render(<TestBed />);
+
+        expect(getByText('Open Time Picker')).toBeInTheDocument();
+    });
+});

package/src/components/TimeInput/TimeInput.tsx

@@ -1,20 +1,25 @@
-import { SvgSchedule } from '@bspk/icons/Schedule';
-import { useEffect, useState } from 'react';
 import './time-input.scss';
+import { SvgSchedule } from '@bspk/icons/Schedule';
+import { FocusTrap } from 'focus-trap-react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { TimeInputListbox } from './Listbox';
 import { TimeInputSegment } from './Segment';
 import { Button } from '-/components/Button';
 import { Menu } from '-/components/Menu';
+import { Portal } from '-/components/Portal';
 import { TextInputProps } from '-/components/TextInput';
 import { useFloating } from '-/hooks/useFloating';
 import { useId } from '-/hooks/useId';
+import { useOutsideClick } from '-/hooks/useOutsideClick';
 import { handleKeyDown } from '-/utils/handleKeyDown';
 
-export const MINUTE_OPTIONS = [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55];
-export const HOUR_OPTIONS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+export const MINUTE_OPTIONS = ['00', '05', '10', '15', '20', '25', '30', '35', '40', '45', '50', '55'];
+export const HOUR_OPTIONS = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
+export const MERIDIEM_OPTIONS = ['AM', 'PM'];
 
-type Meridiem = 'AM' | 'PM';
-export const MERIDIEM_OPTIONS: Meridiem[] = ['AM', 'PM'];
+type Minute = (typeof MINUTE_OPTIONS)[number];
+type Hour = (typeof HOUR_OPTIONS)[number];
+type Meridiem = (typeof MERIDIEM_OPTIONS)[number];
 
 export type TimeInputProps = Pick<
     TextInputProps,
@@ -61,18 +66,18 @@ export function TimeInput({
 
     const [inputValue, setInputValue] = useState(value);
 
-    const [hours, setHours] = useState<number>();
-    const [minutes, setMinutes] = useState<number>();
-    const [meridiem, setMeridiem] = useState<Meridiem>('AM');
+    const [hours, setHours] = useState<(typeof HOUR_OPTIONS)[number]>();
+    const [minutes, setMinutes] = useState<(typeof MINUTE_OPTIONS)[number]>();
+    const [meridiem, setMeridiem] = useState<(typeof MERIDIEM_OPTIONS)[number]>('AM');
 
     useEffect(() => {
         setInputValue(
             `${hours?.toString().padStart(2, '0')}:${minutes?.toString().padStart(2, '0')} ${meridiem || ''}`.trim(),
         );
-        if (hours !== undefined && minutes === undefined) setMinutes(0);
+        if (hours !== undefined && minutes === undefined) setMinutes('00');
     }, [hours, minutes, meridiem]);
 
-    const [open, setOpen] = useState(false);
+    const [open, setOpenState] = useState(false);
 
     const { floatingStyles, elements } = useFloating({
         strategy: 'fixed',
@@ -81,9 +86,54 @@ export function TimeInput({
         hide: !open,
     });
 
+    const setOpen = useCallback(
+        (nextOpen: boolean) => {
+            setOpenState(nextOpen);
+
+            if (!elements.reference || !buttonRef.current) return;
+
+            // Focus the button when closing the menu
+            if (!nextOpen && open) buttonRef.current.focus();
+
+            // Focus the hours listbox when opening the menu
+            if (nextOpen && !open)
+                elements.reference.querySelector<HTMLElement>('[data-scroll-column="hours"]')?.focus();
+        },
+        [elements?.reference, open],
+    );
+
+    useOutsideClick({ elements: [elements.floating], callback: () => setOpen(false), disabled: !open });
+
+    const { hourOptions, minuteOptions, meridiemOptions } = useMemo(
+        () => ({
+            hourOptions: HOUR_OPTIONS.map((h) => ({
+                id: `${id}-hours-${h}`,
+                value: h,
+                label: h.toString().padStart(2, '0'),
+            })),
+            minuteOptions: MINUTE_OPTIONS.map((m) => ({
+                id: `${id}-minutes-${m}`,
+                value: m,
+                label: m.toString().padStart(2, '0'),
+            })),
+            meridiemOptions: MERIDIEM_OPTIONS.map((m) => ({
+                id: `${id}-meridiem-${m}`,
+                value: m,
+                label: m,
+            })),
+        }),
+        [id],
+    );
+
+    const listBoxRefs = useRef<{
+        hours?: HTMLElement | null;
+        minutes?: HTMLElement | null;
+        meridiem?: HTMLElement | null;
+    } | null>(null);
+    const buttonRef = useRef<HTMLElement | null>(null);
+
     return (
         <>
-            {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
             <div
                 aria-describedby={ariaErrorMessage || ariaDescribedBy || undefined}
                 data-aria-label={ariaLabel || undefined}
@@ -96,94 +146,111 @@ export function TimeInput({
                 data-size={size || undefined}
                 data-value={inputValue || undefined}
                 id={id}
-                onClick={() => {
+                onClickCapture={() => {
                     elements.reference?.querySelector<HTMLElement>('[tabIndex]')?.focus();
                 }}
-                onKeyDown={handleKeyDown({ Escape: () => setOpen(false) })}
-                ref={elements.setReference}
+                onKeyDownCapture={handleKeyDown({ Escape: () => setOpen(false) })}
+                ref={(node) => {
+                    elements.setReference(node);
+                }}
                 role="group"
             >
                 <TimeInputSegment
-                    ariaLabel={ariaLabel}
-                    defaultValue={hours}
                     disabled={disabled}
                     name={`${name}-hours`}
                     onChange={(next) => setHours(next || undefined)}
                     readOnly={readOnly}
                     type="hours"
+                    value={hours}
                 />
                 <span aria-hidden="true">:</span>
                 <TimeInputSegment
-                    ariaLabel={ariaLabel}
-                    defaultValue={minutes}
                     disabled={disabled}
                     name={`${name}-minutes`}
                     onChange={(next) => setMinutes(next || undefined)}
                     readOnly={readOnly}
                     type="minutes"
+                    value={minutes}
                 />
                 <TimeInputSegment
-                    ariaLabel={ariaLabel}
-                    defaultValue={meridiem}
                     disabled={disabled}
                     name={`${name}-meridiem`}
                     onChange={(next) => setMeridiem(next || 'AM')}
                     readOnly={readOnly}
                     type="meridiem"
+                    value={meridiem}
                 />
                 <Button
                     icon={<SvgSchedule />}
                     iconOnly
-                    label={`${open ? 'Close' : 'Open'} Time Picker`}
-                    onClick={() => {
-                        setOpen(!open);
-                        elements.reference?.focus();
+                    innerRef={(node) => {
+                        buttonRef.current = node;
                     }}
+                    label={`${open ? 'Close' : 'Open'} Time Picker`}
+                    onClick={() => setOpen(!open)}
                     variant="tertiary"
                 />
             </div>
             {!!open && (
-                <Menu
-                    floating
-                    innerRef={(node) => {
-                        if (!node) return;
-                        elements.setFloating(node as HTMLElement);
-                        node.querySelector<HTMLElement>('[data-scroll-column="hours"]')?.focus();
-                    }}
-                    onOutsideClick={() => {
-                        setOpen(false);
-                    }}
-                    owner="time-input"
-                    scroll={false}
-                    style={{ ...floatingStyles }}
-                >
-                    <div data-scroll-values>
-                        <TimeInputListbox
-                            onSelect={setHours}
-                            options={HOUR_OPTIONS.map((h) => h)}
-                            selectedValue={hours}
-                            type="hours"
-                        />
-                        <TimeInputListbox
-                            onSelect={setMinutes}
-                            options={MINUTE_OPTIONS}
-                            selectedValue={minutes}
-                            type="minutes"
-                        />
-                        <TimeInputListbox
-                            onSelect={setMeridiem}
-                            onTab={(e) => {
-                                e.preventDefault();
-                                setOpen(false);
-                                setTimeout(() => elements.reference?.focus(), 10);
-                                // Focus back on the input after closing
+                <Portal>
+                    <Menu
+                        innerRef={(node) => {
+                            if (!node) return;
+                            elements.setFloating(node as HTMLElement);
+                        }}
+                        label="Select time"
+                        owner="time-input"
+                        style={floatingStyles}
+                    >
+                        <FocusTrap
+                            focusTrapOptions={{
+                                fallbackFocus: () => listBoxRefs.current!.hours!,
+                                clickOutsideDeactivates: true,
                             }}
-                            options={MERIDIEM_OPTIONS}
-                            selectedValue={meridiem}
-                            type="meridiem"
-                        />
-                    </div>
-                </Menu>
+                        >
+                            <div
+                                data-scroll-values
+                                ref={(node) => {
+                                    listBoxRefs.current = {
+                                        hours: node?.querySelector('[data-scroll-column="hours"]') as HTMLElement,
+                                        minutes: node?.querySelector('[data-scroll-column="minutes"]') as HTMLElement,
+                                        meridiem: node?.querySelector('[data-scroll-column="meridiem"]') as HTMLElement,
+                                    };
+                                    listBoxRefs.current.hours?.focus();
+                                }}
+                            >
+                                <TimeInputListbox
+                                    onSelect={(next) => {
+                                        setHours(next as Hour);
+                                        setTimeout(() => listBoxRefs.current?.minutes?.focus(), 10);
+                                    }}
+                                    options={hourOptions}
+                                    selectedValue={hours}
+                                    type="hours"
+                                />
+                                <TimeInputListbox
+                                    onSelect={(next) => {
+                                        setMinutes(next as Minute);
+                                        setTimeout(() => listBoxRefs.current?.meridiem?.focus(), 10);
+                                    }}
+                                    options={minuteOptions}
+                                    selectedValue={minutes}
+                                    type="minutes"
+                                />
+                                <TimeInputListbox
+                                    onSelect={(next) => {
+                                        setMeridiem(next as Meridiem);
+                                        setOpen(false);
+                                        setTimeout(() => buttonRef.current?.focus(), 10);
+                                    }}
+                                    options={meridiemOptions}
+                                    selectedValue={meridiem}
+                                    type="meridiem"
+                                />
+                            </div>
+                        </FocusTrap>
+                    </Menu>
+                </Portal>
             )}
         </>
     );

package/src/components/TimeInput/time-input.scss

@@ -110,7 +110,7 @@
     }
 }
 
-[data-bspk-owner='time-input'][data-bspk='menu'] {
+[data-bspk-owner='time-input'][data-bspk-utility='menu'] {
     overflow: hidden;
     height: 324px;
 
@@ -147,21 +147,22 @@
                 font: var(--labels-base);
                 line-height: var(--spacing-sizing-10);
 
-                &[aria-selected] {
+                &[aria-selected='true'] {
                     background: var(--surface-brand-primary);
                     color: var(--foreground-brand-on-primary);
                 }
             }
 
             &:focus {
-                outline: none;
+                outline: 2px solid var(--stroke-neutral-focus);
+                border-radius: var(--radius-sm);
 
                 span[data-active] {
                     background: var(--interactions-neutral-hover-opacity);
                     outline: 2px solid var(--interactions-neutral-hover-opacity);
                     outline-offset: -2px;
 
-                    &[aria-selected] {
+                    &[aria-selected='true'] {
                         background: var(--surface-brand-primary);
                         color: var(--foreground-brand-on-primary);
                     }

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

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

package/src/components/ToggleOption/ToggleOption.tsx

@@ -1,12 +1,11 @@
-import { ReactElement } from 'react';
-
 import './toggle-option.scss';
+import { ReactElement } from 'react';
 import { CommonProps } from '-/types/common';
 
 export type ToggleOptionControlProps<T extends { 'aria-label'?: string }> = Omit<T, 'aria-label'> &
     Pick<ToggleOptionProps, 'description' | 'label'>;
 
-export type ToggleOptionProps = CommonProps<'disabled'> & {
+export type ToggleOptionProps = CommonProps<'disabled' | 'readOnly'> & {
     /**
      * The label of the option. Also used as the aria-label of the control.
      *
@@ -30,9 +29,9 @@ export type ToggleOptionProps = CommonProps<'disabled'> & {
  * @name ToggleOption
  * @phase Utility
  */
-export function ToggleOption({ label, description, children, disabled }: ToggleOptionProps) {
+export function ToggleOption({ label, description, children, disabled, readOnly }: ToggleOptionProps) {
     return (
-        <label aria-disabled={!!disabled || undefined} data-bspk="toggle-option">
+        <label aria-disabled={!!disabled || !!readOnly || undefined} data-bspk="toggle-option">
             <span data-control>{children}</span>
             <span data-label>{label}</span>
             {description && <span data-description>{description}</span>}

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

@@ -0,0 +1,24 @@
+import { Tooltip } from './Tooltip';
+import { Button } from '-/components/Button';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+const TestBed = () => (
+    <Tooltip label="Example label" placement="top">
+        {(triggerProps) => (
+            <Button label="Trigger button" {...triggerProps}>
+                Click me
+            </Button>
+        )}
+    </Tooltip>
+);
+
+describe('Tooltip (RTL)', () => {
+    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
+
+    it('renders', () => {
+        const { getByText } = render(<TestBed />);
+
+        expect(getByText('Example label')).toBeInTheDocument();
+    });
+});

package/src/components/Tooltip/Tooltip.tsx

@@ -1,22 +1,15 @@
+import './tooltip.scss';
 import { ReactElement, useRef, useState } from 'react';
-
 import { Portal } from '-/components/Portal';
 import { Placement, useFloating } from '-/hooks/useFloating';
 import { useId } from '-/hooks/useId';
 
-import './tooltip.scss';
-
-const DEFAULT = {
-    placement: 'top',
-    showTail: true,
-    disabled: false,
-} as const;
-
 export type TooltipTriggerProps = {
     onMouseOver?: () => void;
     onMouseLeave?: () => void;
     onFocus?: () => void;
-    'aria-describedby'?: string;
+    onBlur?: () => void;
+    'aria-labelledby'?: string;
 };
 
 export type TooltipProps = {
@@ -62,13 +55,7 @@ export type TooltipProps = {
  * @name Tooltip
  * @phase UXReview
  */
-export function Tooltip({
-    placement = DEFAULT.placement,
-    label,
-    children,
-    disabled = DEFAULT.disabled,
-    showTail = DEFAULT.showTail,
-}: TooltipProps) {
+export function Tooltip({ placement = 'top', label, children, disabled = false, showTail = true }: TooltipProps) {
     const id = useId();
     const [show, setShow] = useState(false);
 
@@ -80,24 +67,20 @@ export function Tooltip({
         offsetOptions: showTail ? 8 : 4,
         arrowRef,
         hide: !show,
+        refWidth: false,
     });
 
-    const child = children(
-        disabled
-            ? {}
-            : {
-                  onMouseOver: () => setShow(true),
-                  onMouseLeave: () => setShow(false),
-                  onFocus: () => setShow(true),
-                  'aria-describedby': id,
-              },
-    );
-
-    if (disabled) return child;
+    if (disabled) return children({});
 
     return (
         <>
-            {child}
+            {children({
+                onMouseOver: () => setShow(true),
+                onMouseLeave: () => setShow(false),
+                onFocus: () => setShow(true),
+                onBlur: () => setShow(false),
+                'aria-labelledby': id,
+            })}
             {label && (
                 <Portal>
                     <div
@@ -106,7 +89,7 @@ export function Tooltip({
                         id={id}
                         ref={(node) => {
                             elements.setFloating(node);
-                            elements.setReference(document.querySelector<HTMLElement>(`[aria-describedby="${id}"]`));
+                            elements.setReference(document.querySelector<HTMLElement>(`[aria-labelledby="${id}"]`));
                         }}
                         role="tooltip"
                         style={floatingStyles}

package/src/components/Tooltip/TooltipExample.tsx

@@ -6,14 +6,12 @@ export const TooltipExample: ComponentExample<TooltipProps> = {
     render: ({ props: state, Component }) => {
         return (
             <>
-                <Component {...state} placement={[state.placement].flat()[0] || 'top'}>
-                    {(triggerProps) => (
-                        <Button
-                            label={`Hover over me ${'data-variant-value' in state ? `(${state['data-variant-value']})` : ''}`}
-                            variant="secondary"
-                            {...triggerProps}
-                        />
-                    )}
+                <Component
+                    {...state}
+                    label={`Hover over me ${state.label || ''}`}
+                    placement={[state.placement].flat()[0] || 'top'}
+                >
+                    {(triggerProps) => <Button {...triggerProps} label="Hover over me" variant="secondary" />}
                 </Component>
             </>
         );

package/src/components/Tooltip/tooltip.scss

@@ -2,7 +2,6 @@
     position: fixed;
     pointer-events: none;
     z-index: var(--z-index-tooltip-popover);
-    width: max-content !important;
 
     [data-text] {
         display: block;
@@ -16,7 +15,6 @@
         padding: var(--spacing-sizing-01) var(--spacing-sizing-02);
         border: none;
         transition: opacity 0.2s ease-in-out;
-        width: max-content;
     }
 
     --arrow-size: var(--spacing-sizing-01);

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

@@ -0,0 +1,15 @@
+import { TopNavigation } from './TopNavigation';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+const TestBed = () => <TopNavigation>Example content</TopNavigation>;
+
+describe('TopNavigation (RTL)', () => {
+    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
+
+    it('renders', () => {
+        const { getByText } = render(<TestBed />);
+
+        expect(getByText('Example content')).toBeInTheDocument();
+    });
+});