@bspk/ui 1.1.34 → 1.3.0

package/src/components/TextInput/TextInput.tsx

@@ -1,10 +1,10 @@
+import './text-input.scss';
 import { SvgCancel } from '@bspk/icons/Cancel';
-import { ChangeEvent, HTMLInputAutoCompleteAttribute, HTMLInputTypeAttribute, ReactNode } from 'react';
-
-import { ElementProps, CommonProps, InvalidPropsLibrary, SetRef } from '-';
+import { ChangeEvent, HTMLInputTypeAttribute, ReactNode, useMemo, useRef, useState } from 'react';
+import { Button } from '-/components/Button';
 import { useId } from '-/hooks/useId';
-
-import './text-input.scss';
+import { useTimeout } from '-/hooks/useTimeout';
+import { CommonProps, ElementProps, FormFieldControlProps, SetRef } from '-/types/common';
 
 export const DEFAULT = {
     size: 'medium',
@@ -13,46 +13,57 @@ export const DEFAULT = {
     autoComplete: 'off',
 } as const;
 
+type TextInputBaseProps = {
+    /**
+     * Callback when the value of the field changes.
+     *
+     * @required
+     */
+    onChange: (next: string, event?: ChangeEvent<HTMLInputElement>) => void;
+    /** The ref of the container. */
+    containerRef?: SetRef<HTMLDivElement>;
+    /** The ref of the input. */
+    inputRef?: SetRef<HTMLInputElement>;
+    /**
+     * The trailing element to display in the field.
+     *
+     * @exampleType string
+     */
+    trailing?: ReactNode;
+    /**
+     * The leading element to display in the field.
+     *
+     * @exampleType string
+     */
+    leading?: ReactNode;
+    /** The placeholder of the field. */
+    placeholder?: string;
+    /**
+     * The type of the input.
+     *
+     * @default text
+     */
+    type?: Extract<HTMLInputTypeAttribute, 'number' | 'password' | 'text'>;
+    /**
+     * Specifies if user agent has any permission to provide automated assistance in filling out form field values
+     *
+     * @default off
+     */
+    autoComplete?: '' | 'off' | 'on';
+    /**
+     * Specifies if the clear button should be shown. This should almost always be true, but can be set to false.
+     *
+     * @default true
+     */
+    showClearButton?: boolean;
+};
+
 export type TextInputProps = CommonProps<
-    'aria-label' | 'disabled' | 'id' | 'name' | 'readOnly' | 'required' | 'size' | 'value'
+    'aria-label' | 'disabled' | 'id' | 'invalid' | 'name' | 'owner' | 'readOnly' | 'required' | 'size' | 'value'
 > &
-    InvalidPropsLibrary & {
-        /**
-         * Callback when the value of the field changes.
-         *
-         * @required
-         */
-        onChange: (next: string, event?: ChangeEvent<HTMLInputElement>) => void;
-        /** The ref of the container. */
-        containerRef?: SetRef<HTMLDivElement>;
-        /** The ref of the input. */
-        inputRef?: SetRef<HTMLInputElement>;
-        /**
-         * The trailing element to display in the field.
-         *
-         * @exampleType string
-         */
-        trailing?: ReactNode;
-        /**
-         * The leading element to display in the field.
-         *
-         * @exampleType string
-         */
-        leading?: ReactNode;
-        /** The placeholder of the field. */
-        placeholder?: string;
-        /**
-         * The type of the input.
-         *
-         * @default text
-         */
-        type?: Extract<HTMLInputTypeAttribute, 'number' | 'text'>;
-        /**
-         * Specifies if user agent has any permission to provide automated assistance in filling out form field values
-         *
-         * @default off
-         */
-        autoComplete?: HTMLInputAutoCompleteAttribute;
+    FormFieldControlProps &
+    TextInputBaseProps & {
+        inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, keyof TextInputBaseProps>;
     };
 
 /**
@@ -72,9 +83,9 @@ export type TextInputProps = CommonProps<
  * @element
  *
  * @name TextInput
- * @phase DesignReview
+ * @phase Utility
  */
-function TextInput({
+export function TextInput({
     invalid: invalidProp,
     onChange,
     size = DEFAULT.size,
@@ -92,54 +103,95 @@ function TextInput({
     disabled,
     autoComplete = DEFAULT.autoComplete,
     containerRef,
-    errorMessage,
-    ...otherProps
+    showClearButton: showClearButtonProp = true,
+    owner,
+    'aria-describedby': ariaDescribedBy,
+    'aria-errormessage': ariaErrorMessage,
+    inputProps,
+    ...props
 }: ElementProps<TextInputProps, 'div'>) {
     const id = useId(idProp);
 
     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-disabled={disabled || undefined}
             data-empty={!value.toString().length || undefined}
             data-invalid={invalid || undefined}
             data-readonly={readOnly || undefined}
-            data-required={required || undefined}
+            data-show-clear-button={showClearButton || undefined}
             data-size={size}
             ref={containerRef}
-            {...otherProps}
         >
             {leading && <span data-leading>{leading}</span>}
+
             <input
-                aria-errormessage={errorMessage || undefined}
+                {...inputProps}
+                aria-describedby={ariaDescribedBy || undefined}
+                aria-errormessage={ariaErrorMessage || undefined}
                 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>}
-            <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>
     );
 }
 
-TextInput.bspkName = 'TextInput';
-
-export { TextInput };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/TextInput/TextInputExample.tsx

@@ -1,8 +1,8 @@
-import { ComponentExample } from '-/utils/demo';
-
 import { TextInputProps } from '.';
+import { ComponentExample } from '-/utils/demo';
 
 export const TextInputExample: ComponentExample<TextInputProps> = {
+    render: ({ props, Component }) => <Component {...props} />,
     presets: [
         {
             label: 'Currency',
@@ -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,33 +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] {
-        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,18 +1,11 @@
+import './textarea.scss';
 import { ChangeEvent, useRef } from 'react';
-
-import { CommonProps, InvalidPropsLibrary, SetRef } from '-';
 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' | 'readOnly' | 'required'> &
-    InvalidPropsLibrary & {
+export type TextareaProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'invalid' | 'readOnly'> &
+    FormFieldControlProps & {
         /**
          * Callback when the value of the field changes.
          *
@@ -61,7 +54,7 @@ export type TextareaProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'read
          *
          * 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
          */
@@ -88,28 +81,26 @@ export type TextareaProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'read
  * @element
  *
  * @name Textarea
- * @phase DesignReview
+ * @phase Utility
  */
-function Textarea({
+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,
-    errorMessage,
+    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;
@@ -132,7 +123,8 @@ function Textarea({
         >
             <textarea
                 {...otherProps}
-                aria-errormessage={errorMessage || undefined}
+                aria-describedby={ariaDescribedBy || undefined}
+                aria-errormessage={ariaErrorMessage || undefined}
                 aria-invalid={invalid || undefined}
                 aria-label={ariaLabel}
                 id={id}
@@ -157,8 +149,4 @@ function Textarea({
     );
 }
 
-Textarea.bspkName = 'Textarea';
-
-export { Textarea };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Textarea/TextareaExample.tsx

@@ -1,5 +1,6 @@
-import { ComponentExample } from '-/utils/demo';
-
 import { TextareaProps } from '.';
+import { ComponentExample } from '-/utils/demo';
 
-export const TextareaExample: ComponentExample<TextareaProps> = {};
+export const TextareaExample: ComponentExample<TextareaProps> = {
+    render: ({ props, Component }) => <Component {...props} />,
+};

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

@@ -1,17 +1,17 @@
-import { FormFieldProps, FormField } from '-/components/FormField';
+import { FormFieldWrapProps, FormField } from '-/components/FormField';
 import { TextareaProps, Textarea } from '-/components/Textarea';
 import { Txt } from '-/components/Txt';
 import { tryIntParse } from '-/utils/tryIntPsrse';
 
-export type TextareaFieldProps = Pick<FormFieldProps, 'controlId' | 'helperText' | 'label'> &
-    TextareaProps & {
-        /**
-         * Whether the character count should be displayed.
-         *
-         * @default true
-         */
-        characterCount?: boolean;
-    };
+export type TextareaFieldProps = FormFieldWrapProps<TextareaProps> & {
+    /**
+     * Whether the character count should be displayed.
+     *
+     * @default true
+     */
+    characterCount?: boolean;
+};
+
 /**
  * A component that allows users to input large amounts of text that could span multiple lines.
  *
@@ -37,36 +37,30 @@ export type TextareaFieldProps = Pick<FormFieldProps, 'controlId' | 'helperText'
  *     }
  *
  * @name TextareaField
- * @phase DesignReview
+ * @phase UXReview
  */
-function TextareaField({
+export function TextareaField({
     label,
-    errorMessage: errorMessageProp,
+    errorMessage,
     helperText,
-    controlId: id,
-    onChange,
-    maxLength: maxLengthProp,
-    invalid,
-    readOnly,
-    disabled,
+    controlId,
     required,
-    characterCount = true,
-    ...textareaProps
+    invalid,
+    characterCount,
+    ...inputProps
 }: TextareaFieldProps) {
-    const maxLength = tryIntParse(maxLengthProp) || -1;
-    const errorMessage = (!readOnly && !disabled && errorMessageProp) || undefined;
-
-    if (typeof onChange !== 'function') return null;
+    const maxLength = tryIntParse(inputProps.maxLength) || -1;
 
     return (
         <FormField
-            controlId={id}
+            controlId={controlId}
             data-bspk="textarea-field"
             errorMessage={errorMessage}
             helperText={helperText}
             invalid={invalid}
             label={label}
             labelTrailing={
+                // If characterCount is falsey, we don't want to show the labelTrailing
                 characterCount && (
                     <Txt
                         style={{
@@ -74,7 +68,7 @@ function TextareaField({
                         }}
                         variant="body-small"
                     >
-                        {`${textareaProps?.value?.length || 0}${maxLength > 0 ? `/${maxLength}` : ''}`}
+                        {`${inputProps?.value?.length || 0}${maxLength > 0 ? `/${maxLength}` : ''}`}
                     </Txt>
                 )
             }
@@ -82,23 +76,14 @@ function TextareaField({
         >
             {(fieldProps) => (
                 <Textarea
-                    {...textareaProps}
+                    //
+                    {...inputProps}
                     {...fieldProps}
-                    aria-label={textareaProps['aria-label'] || label}
-                    id={id}
                     invalid={invalid}
-                    onChange={(next, event) => {
-                        onChange(next, event);
-                    }}
-                    required={required}
                 />
             )}
         </FormField>
     );
 }
 
-TextareaField.bspkName = 'TextareaField';
-
-export { TextareaField };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/TextareaField/TextareaFieldExample.tsx

@@ -1,19 +1,13 @@
-import { ComponentExample } from '-/utils/demo';
-
 import { TextareaFieldProps } from '.';
+import { ComponentExample } from '-/utils/demo';
 
 export const TextareaFieldExample: ComponentExample<TextareaFieldProps> = {
     render: ({ Component, props }) => {
         const tooManyCharacters = Boolean(props.value && props.maxLength && props.value?.length > props.maxLength);
 
         const invalid = props.invalid || tooManyCharacters;
+        const errorMessage = tooManyCharacters ? 'Too Many characters' : props.errorMessage || '';
 
-        return (
-            <Component
-                {...props}
-                errorMessage={invalid ? props.errorMessage || 'Too Many characters' : ''}
-                invalid={invalid}
-            />
-        );
+        return <Component {...props} errorMessage={errorMessage} invalid={invalid} />;
     },
 };

package/src/components/TimeInput/Listbox.tsx

@@ -0,0 +1,68 @@
+import { TimeInputType } from './Segment';
+import { useArrowNavigation } from '-/hooks/useArrowNavigation';
+import { getElementById } from '-/utils/dom';
+import { handleKeyDown } from '-/utils/handleKeyDown';
+
+type Option = {
+    id: string;
+    value: string;
+    label: string;
+};
+
+type TimeInputListboxProps = {
+    options: Option[];
+    selectedValue?: string;
+    type: TimeInputType;
+    onSelect?: (value: string) => void;
+    onTab?: (e: React.KeyboardEvent) => void;
+};
+
+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 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}
+            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);
+            }}
+            onKeyDown={handleKeyDown({
+                ...arrowKeyCallbacks,
+                Enter: enterSpaceClick,
+                Space: enterSpaceClick,
+                Tab: onTab,
+            })}
+            role="listbox"
+            tabIndex={0}
+        >
+            {options.map((option, index) => (
+                <span
+                    aria-label={option.label}
+                    aria-selected={option.value === selectedValue}
+                    data-active={activeElementId === option.id || undefined}
+                    data-index={index}
+                    data-value={option.value}
+                    id={option.id}
+                    key={option.id}
+                    role="option"
+                >
+                    {`${option.label}`.padStart(2, '0')}
+                </span>
+            ))}
+        </div>
+    );
+}