@bspk/ui 1.2.0 → 1.3.0

package/src/components/TextInput/TextInput.tsx

@@ -1,11 +1,11 @@
+import './text-input.scss';
 import { SvgCancel } from '@bspk/icons/Cancel';
-import { ChangeEvent, HTMLInputTypeAttribute, ReactNode } from 'react';
-
+import { ChangeEvent, HTMLInputTypeAttribute, ReactNode, useMemo, useRef, useState } from 'react';
+import { Button } from '-/components/Button';
 import { useId } from '-/hooks/useId';
+import { useTimeout } from '-/hooks/useTimeout';
 import { CommonProps, ElementProps, FormFieldControlProps, SetRef } from '-/types/common';
 
-import './text-input.scss';
-
 export const DEFAULT = {
     size: 'medium',
     value: '',
@@ -103,11 +103,10 @@ export function TextInput({
     disabled,
     autoComplete = DEFAULT.autoComplete,
     containerRef,
-    showClearButton = true,
+    showClearButton: showClearButtonProp = true,
     owner,
     'aria-describedby': ariaDescribedBy,
     'aria-errormessage': ariaErrorMessage,
-
     inputProps,
     ...props
 }: ElementProps<TextInputProps, 'div'>) {
@@ -115,16 +114,27 @@ export function TextInput({
 
     const invalid = !readOnly && !disabled && invalidProp;
 
+    const [focused, setFocused] = useState(false);
+
+    const showClearButton = useMemo(
+        () => !!(showClearButtonProp !== false && !readOnly && !disabled && value?.toString().length && focused),
+        [showClearButtonProp, readOnly, disabled, value, focused],
+    );
+
+    const inputRefInternal = useRef<HTMLInputElement | null>(null);
+
+    const focusTimeout = useTimeout();
+
     return (
         <div
             {...props}
             data-bspk="text-input"
             data-bspk-owner={owner || undefined}
-            data-clear-hidden={showClearButton === false || undefined}
             data-disabled={disabled || undefined}
             data-empty={!value.toString().length || undefined}
             data-invalid={invalid || undefined}
             data-readonly={readOnly || undefined}
+            data-show-clear-button={showClearButton || undefined}
             data-size={size}
             ref={containerRef}
         >
@@ -137,24 +147,48 @@ export function TextInput({
                 aria-invalid={invalid || undefined}
                 aria-label={ariaLabel}
                 autoComplete={autoComplete}
+                data-main-input
                 disabled={disabled || undefined}
                 id={id}
                 name={name}
+                onBlur={(event) => {
+                    focusTimeout.set(() => setFocused(false), 750);
+                    inputProps?.onBlur?.(event);
+                }}
                 onChange={(event) => {
                     onChange(event.target.value, event);
                 }}
+                onFocus={(event) => {
+                    focusTimeout.set(() => setFocused(true), 0);
+                    inputProps?.onFocus?.(event);
+                }}
                 placeholder={placeholder || ' '}
                 readOnly={readOnly || undefined}
-                ref={inputRef}
+                ref={(node) => {
+                    if (!node) return;
+                    inputRef?.(node);
+                    inputRefInternal.current = node;
+                }}
                 required={required || undefined}
                 type={type}
                 value={value || ''}
             />
             {trailing && <span data-trailing>{trailing}</span>}
-            {showClearButton !== false && (
-                <button aria-label="clear" data-clear onClick={() => onChange('')}>
-                    <SvgCancel />
-                </button>
+            {showClearButton && (
+                <Button
+                    icon={<SvgCancel />}
+                    iconOnly
+                    label="Clear"
+                    onClick={() => {
+                        onChange('');
+                        inputRefInternal.current?.focus();
+                    }}
+                    onFocus={() => {
+                        focusTimeout.clear();
+                    }}
+                    size={size}
+                    variant="tertiary"
+                />
             )}
         </div>
     );

package/src/components/TextInput/TextInputExample.tsx

@@ -11,6 +11,8 @@ export const TextInputExample: ComponentExample<TextInputProps> = {
                 leading: '$',
                 trailing: undefined,
                 placeholder: 'currency',
+                name: 'currency',
+                'aria-label': 'Currency input',
             },
         },
         {
@@ -20,6 +22,8 @@ export const TextInputExample: ComponentExample<TextInputProps> = {
                 leading: undefined,
                 trailing: '%',
                 placeholder: 'percent',
+                name: 'percent',
+                'aria-label': 'Percent input',
             },
         },
         {
@@ -29,7 +33,12 @@ export const TextInputExample: ComponentExample<TextInputProps> = {
                 leading: undefined,
                 placeholder: 'dimensions',
                 trailing: 'ft',
+                name: 'dimension',
+                'aria-label': 'Dimension input',
             },
         },
     ],
+    variants: {
+        type: false,
+    },
 };

package/src/components/TextInput/text-input.scss

@@ -7,10 +7,14 @@
     border: solid 1px var(--border-color);
     height: var(--field-height);
     border-radius: var(--radius-sm);
-    padding: 0 0 0 var(--field-padding);
+    padding: 0 var(--field-padding);
     gap: var(--spacing-sizing-01);
     width: 100%;
 
+    &[data-show-clear-button] {
+        padding-right: 0;
+    }
+
     & > * {
         display: flex;
         justify-content: center;
@@ -42,7 +46,7 @@
     }
 
     &[data-disabled],
-    &:has(input[disabled]) {
+    &:has([data-main-input][disabled]) {
         --border-color: var(--stroke-neutral-disabled-light);
 
         background:
@@ -84,6 +88,8 @@
 
     [data-leading],
     [data-trailing] {
+        position: relative;
+
         svg {
             width: var(--field-icon-width);
         }
@@ -94,7 +100,7 @@
         color: var(--foreground-neutral-on-surface-variant-01);
     }
 
-    input {
+    [data-main-input] {
         flex: 1;
         background-color: transparent !important;
         border: none;
@@ -109,34 +115,6 @@
         }
     }
 
-    button[data-clear] {
-        display: flex;
-        border: none;
-        background: none;
-        padding: 0;
-        cursor: pointer;
-        pointer-events: all;
-        margin-left: var(--spacing-sizing-02);
-        padding-right: var(--field-padding);
-
-        svg {
-            pointer-events: none;
-            width: var(--field-clear-width);
-        }
-    }
-
-    &:not(:focus-within),
-    &[data-empty],
-    &[data-readonly],
-    &[data-disabled],
-    &[data-clear-hidden] {
-        padding-right: var(--field-padding);
-
-        button[data-clear] {
-            display: none;
-        }
-    }
-
     &:focus-within {
         --border-color: var(--stroke-neutral-focus);
 

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

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

package/src/components/Textarea/Textarea.tsx

@@ -1,17 +1,9 @@
+import './textarea.scss';
 import { ChangeEvent, useRef } from 'react';
-
 import { useId } from '-/hooks/useId';
 import { CommonProps, FormFieldControlProps, SetRef } from '-/types/common';
 import { cssWithVars } from '-/utils/cwv';
 
-import './textarea.scss';
-
-const DEFAULT = {
-    minRows: 3,
-    maxRows: 10,
-    textSize: 'medium',
-} as const;
-
 export type TextareaProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'invalid' | 'readOnly'> &
     FormFieldControlProps & {
         /**
@@ -62,7 +54,7 @@ export type TextareaProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'inva
          *
          * When set the textarea will automatically adjust its height to fit the content up to this limit.
          *
-         * @default 3
+         * @default 10
          * @minimum 3
          * @maximum 10
          */
@@ -94,24 +86,21 @@ export type TextareaProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'inva
 export function Textarea({
     invalid: invalidProp,
     onChange,
-    textSize = DEFAULT.textSize,
+    textSize = 'medium',
     value = '',
     name,
     'aria-label': ariaLabel,
     innerRef,
     placeholder,
     id: idProp,
-    minRows: minRowsProp = DEFAULT.minRows,
-    maxRows: maxRowsProp = DEFAULT.maxRows,
+    minRows = 4,
+    maxRows = 10,
     'aria-describedby': ariaDescribedBy,
     'aria-errormessage': ariaErrorMessage,
     ...otherProps
 }: TextareaProps) {
     const id = useId(idProp);
     const invalid = !otherProps.readOnly && !otherProps.disabled && invalidProp;
-    // ensure minRows and maxRows are within bounds
-    const minRows = Math.min(DEFAULT.maxRows, Math.max(minRowsProp, DEFAULT.minRows));
-    const maxRows = Math.max(DEFAULT.minRows, Math.min(maxRowsProp, DEFAULT.maxRows));
 
     const onInput = () => {
         const target = textareaElement.current;

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

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

package/src/components/TextareaField/TextareaField.tsx

@@ -41,6 +41,7 @@ export type TextareaFieldProps = FormFieldWrapProps<TextareaProps> & {
  */
 export function TextareaField({
     label,
+    errorMessage,
     helperText,
     controlId,
     required,
@@ -54,6 +55,7 @@ export function TextareaField({
         <FormField
             controlId={controlId}
             data-bspk="textarea-field"
+            errorMessage={errorMessage}
             helperText={helperText}
             invalid={invalid}
             label={label}

package/src/components/TimeInput/Listbox.tsx

@@ -1,93 +1,66 @@
-import { useRef, useState } from 'react';
 import { TimeInputType } from './Segment';
-import { bound } from '-/utils/bound';
+import { useArrowNavigation } from '-/hooks/useArrowNavigation';
+import { getElementById } from '-/utils/dom';
 import { handleKeyDown } from '-/utils/handleKeyDown';
-import { scrollElementIntoView } from '-/utils/scrollElementIntoView';
 
-type TimeInputListboxProps<T> = {
-    options: T[];
-    selectedValue?: T;
+type Option = {
+    id: string;
+    value: string;
+    label: string;
+};
+
+type TimeInputListboxProps = {
+    options: Option[];
+    selectedValue?: string;
     type: TimeInputType;
-    onSelect?: (value: T) => void;
+    onSelect?: (value: string) => void;
     onTab?: (e: React.KeyboardEvent) => void;
 };
 
-export function TimeInputListbox<T>({ options, selectedValue, type: kind, onSelect, onTab }: TimeInputListboxProps<T>) {
-    const [activeIndex, setActiveIndex] = useState<number>(-1);
-    const listRef = useRef<HTMLDivElement | null>(null);
+export function TimeInputListbox({ options, selectedValue, type: kind, onSelect, onTab }: TimeInputListboxProps) {
+    const { activeElementId, arrowKeyCallbacks } = useArrowNavigation({
+        ids: options.map((option) => option.id),
+        defaultActiveId: (options.find((option) => option.value === selectedValue) || options[0])?.id || null,
+    });
 
-    const handleArrow = (dir: 'down' | 'up') => {
-        return (e: React.KeyboardEvent) => {
-            e.preventDefault();
-            setActiveIndex((prevIndex) => {
-                const next = bound({
-                    num: prevIndex + (dir === 'down' ? 1 : -1),
-                    min: 0,
-                    max: options.length - 1,
-                    rollover: true,
-                });
-                scrollElementIntoView(listRef.current?.children[next] as HTMLElement, listRef.current!);
-                return next;
-            });
-        };
+    const enterSpaceClick = () => {
+        if (activeElementId) getElementById(activeElementId)?.click();
     };
 
     return (
         <div
+            //aria-activedescendant={activeElementId || undefined}
             aria-label={`Select ${kind}`}
+            data-bspk="time-input-listbox"
             data-scroll-column={kind}
-            onClick={(event) => {
+            data-type={kind}
+            data-visible={true}
+            id={`${kind}-listbox`}
+            onClickCapture={(event) => {
                 const target = event.target as HTMLSpanElement;
-                if (target.dataset.value) onSelect?.(target.dataset.value as T);
-            }}
-            onFocus={() => {
-                if (activeIndex < 0 && options.length > 0)
-                    scrollElementIntoView(listRef.current?.children[activeIndex], listRef.current!);
+                if (target.dataset.value) onSelect?.(target.dataset.value);
             }}
             onKeyDown={handleKeyDown({
-                ArrowDown: handleArrow('down'),
-                ArrowUp: handleArrow('up'),
-                ArrowLeft: (e) => {
-                    e.preventDefault();
-                    const previousSibling = e.currentTarget.previousElementSibling as HTMLSpanElement;
-                    if (previousSibling) previousSibling.focus();
-                    else (e.currentTarget.parentNode?.lastElementChild as HTMLSpanElement)?.focus();
-                },
-                ArrowRight: (e) => {
-                    e.preventDefault();
-                    const nextSibling = e.currentTarget.nextElementSibling as HTMLSpanElement;
-                    if (nextSibling) nextSibling.focus();
-                    else (e.currentTarget.parentNode?.firstElementChild as HTMLSpanElement)?.focus();
-                },
-                Enter: (e) => {
-                    e.preventDefault();
-                    if (activeIndex >= 0 && activeIndex < options.length) onSelect?.(options[activeIndex]);
-                },
+                ...arrowKeyCallbacks,
+                Enter: enterSpaceClick,
+                Space: enterSpaceClick,
                 Tab: onTab,
             })}
-            onMouseMove={(event) => {
-                const target = event.target as HTMLSpanElement;
-                setActiveIndex(Number(target.dataset.index));
-                event.currentTarget.focus();
-            }}
-            ref={(node) => {
-                if (!node) return;
-                listRef.current = node;
-            }}
             role="listbox"
             tabIndex={0}
         >
-            {options.map((val, index) => (
+            {options.map((option, index) => (
                 <span
-                    aria-label={`${val}`.padStart(2, '0')}
-                    aria-selected={`${val}` === `${selectedValue}` || undefined}
-                    data-active={activeIndex === index || undefined}
+                    aria-label={option.label}
+                    aria-selected={option.value === selectedValue}
+                    data-active={activeElementId === option.id || undefined}
                     data-index={index}
-                    data-value={val}
-                    key={`${val}`}
+                    data-value={option.value}
+                    id={option.id}
+                    key={option.id}
                     role="option"
                 >
-                    {`${val}`.padStart(2, '0')}
+                    {`${option.label}`.padStart(2, '0')}
                 </span>
             ))}
         </div>

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