@bspk/ui 1.3.20 → 1.3.22

package/src/components/Field/utils.ts

@@ -1,84 +1,22 @@
-import { createContext, useContext, useEffect, useMemo } from 'react';
-import { useId } from '-/hooks/useId';
-import { CommonProps } from '-/types/common';
-
 export const errorMessageId = (id: string) => `${id}-field-error`;
 export const labelledById = (id: string) => `${id}-label`;
 export const describedById = (id: string) => `${id}-description`;
-
-/** The props that are provided via context to all Field subcomponents. */
-export type FieldContextProps = CommonProps<'required'> & {
-    /** The aria-describedby attribute value that should be applied to the field input element. */
-    ariaDescribedBy?: string;
-    /** The aria-errormessage attribute value that should be applied to the field input element. */
-    ariaErrorMessage?: string;
-    /** Text that appears after the label, but before the input (e.g. "optional"). */
-    labelTrailing?: string;
-    /** The aria-labelledby attribute value that should be applied to the field input element. */
-    ariaLabelledBy?: string;
-    /** The htmlFor attribute value that should be applied to the field label element. */
-    htmlFor?: string;
-    /** The id of the field. */
-    id: string;
-};
-
-export type FieldContext = FieldContextProps & {
-    setContext: (next: Pick<FieldContextProps, 'htmlFor' | 'required'>) => void;
-};
-
-export const fieldContext = createContext<FieldContext | null>(null);
-
-/**
- * Retrieves the current Field context.
- *
- * Will return a default context if used outside of a Field component.
- */
-export function useFieldContext(): FieldContext {
-    return (
-        useContext(fieldContext) || {
-            id: undefined as unknown as string,
-            setContext: () => {},
-        }
-    );
-}
-
-/**
- * Initializes field-related attributes and state for a form control component.
- *
- * Creates id if not provided, manages invalid state, and syncs with Field context.
- */
-export function useFieldInit({
-    idProp,
-    required,
-    disabled,
-    readOnly,
-    invalidProp,
+export function propsWithAria<T extends Record<string, unknown>>({
+    errorMessage,
+    helperText,
+    controlProps,
+    id,
 }: {
-    idProp: string | undefined;
-    required: boolean | undefined;
-    disabled: boolean | undefined;
-    readOnly?: boolean | undefined;
-    invalidProp: boolean | undefined;
-}): Pick<FieldContext, 'ariaDescribedBy' | 'ariaErrorMessage'> & { invalid: boolean; id: string } {
-    const context = useContext(fieldContext);
-    const controlId = useId(idProp || context?.htmlFor);
-
-    const invalid = useMemo(
-        () => !disabled && !readOnly && (invalidProp || !!context?.ariaErrorMessage),
-        [disabled, readOnly, invalidProp, context?.ariaErrorMessage],
-    );
-
-    useEffect(() => {
-        if (!context) return;
-
-        if (controlId !== context?.htmlFor || !!required !== !!context?.required) {
-            context.setContext({ htmlFor: controlId, required: required });
-        }
-    }, [context, controlId, required]);
-
+    errorMessage?: string;
+    helperText?: string;
+    controlProps: T;
+    id: string;
+}) {
     return {
-        ...(context || {}),
-        invalid,
-        id: controlId,
+        ...controlProps,
+        id,
+        'aria-errormessage': errorMessage ? errorMessageId(id) : undefined,
+        'aria-describedby': helperText ? describedById(id) : undefined,
+        'aria-invalid': errorMessage ? true : undefined,
     };
 }

package/src/components/FileUpload/FileUpload.tsx

@@ -205,7 +205,7 @@ export function FileUpload({
                 />
                 <Button label="Browse" onClick={handleBrowseClick} />
                 {files.length === 1 && files[0].status === 'error' && (
-                    <InlineAlert variant="error">{files[0].errorMessage || DEFAULT_ERROR_MESSAGE}</InlineAlert>
+                    <InlineAlert label={files[0].errorMessage || DEFAULT_ERROR_MESSAGE} variant="error" />
                 )}
             </div>
             <div data-bspk-owner="file-upload" data-file-entries>

package/src/components/FileUploadItem/FileUploadItem.tsx

@@ -72,7 +72,7 @@ export function FileUploadItem({
             </div>
             <div data-status>
                 {status === 'error' ? (
-                    <InlineAlert variant="error">{errorMessage}</InlineAlert>
+                    <InlineAlert label={errorMessage} variant="error" />
                 ) : (
                     <ProgressBar
                         align="left"

package/src/components/Flex/Flex.tsx

@@ -44,13 +44,17 @@ export type FlexProps<As extends ElementType = ElementType> = {
  * Utility component used within other components for layout purposes.
  *
  * @example
- *     import { Flex } from '@bspk/ui/Flex';
+ *     import { Flex } from '-/components/Flex';
  *
- *     <Flex gap="24" justify="center" style={{ width: '100%' }}>
- *         <div>Alpha</div>
- *         <div>Beta</div>
- *         <div>Gamma</div>
- *     </Flex>;
+ *     () => {
+ *         return (
+ *             <Flex gap="24" justify="center" style={{ width: '100%' }}>
+ *                 <div>Alpha</div>
+ *                 <div>Beta</div>
+ *                 <div>Gamma</div>
+ *             </Flex>
+ *         );
+ *     };
  *
  * @name Flex
  * @phase Utility
@@ -65,6 +69,7 @@ export function Flex<As extends ElementType = ElementType>({
     wrap,
     direction = 'row',
     padding,
+    full,
     ...props
 }: ElementProps<FlexProps<As>, As>) {
     const As: ElementType = as || 'div';
@@ -85,7 +90,7 @@ export function Flex<As extends ElementType = ElementType>({
                 justifyContent: justify || 'flex-start',
                 flexWrap: wrap ? 'wrap' : 'nowrap',
                 padding: paddingValue,
-                width: props.full ? '100%' : undefined,
+                width: full ? '100%' : undefined,
                 ...style,
             }}
         >

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

@@ -2,7 +2,7 @@ import { InlineAlert } from './InlineAlert';
 import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
 import { render } from '-/rtl/util';
 
-const TestBed = () => <InlineAlert variant="informational">Example informational inline alert</InlineAlert>;
+const TestBed = () => <InlineAlert label="Example informational inline alert" variant="informational" />;
 
 describe('InlineAlert (RTL)', () => {
     it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));

package/src/components/InlineAlert/InlineAlert.tsx

@@ -14,7 +14,7 @@ export type InlineAlertProps = CommonProps<'owner'> & {
      * @type multiline
      * @required
      */
-    children: string;
+    label: string;
     /**
      * The color variant of the inline alert.
      *
@@ -37,11 +37,11 @@ export type InlineAlertProps = CommonProps<'owner'> & {
  * @name InlineAlert
  * @phase Stable
  */
-export function InlineAlert({ children, variant = 'informational', id, owner }: InlineAlertProps) {
+export function InlineAlert({ label, variant = 'informational', id, owner }: InlineAlertProps) {
     return (
         <div data-bspk="inline-alert" data-bspk-owner={owner || undefined} data-variant={variant} id={id} role="alert">
             {VARIANT_ICON[variant]}
-            <Txt variant="body-small">{children}</Txt>
+            <Txt variant="body-small">{label}</Txt>
         </div>
     );
 }

package/src/components/Input/Input.tsx

@@ -1,39 +1,89 @@
 import './input.scss';
-import { DEFAULT, InputElement, InputElementProps } from './InputElement';
-import { useFieldInit } from '-/components/Field';
-import { ElementProps } from '-/types/common';
+import { SvgCancel } from '@bspk/icons/Cancel';
+import { HTMLInputTypeAttribute, ReactNode, useMemo, useRef } from 'react';
+import { Button } from '-/components/Button';
+import { useTimeout } from '-/hooks/useTimeout';
+import { CommonProps, ElementProps, SetRef, FieldControlProps } from '-/types/common';
 
-export type InputProps = Omit<InputElementProps, 'ariaDescribedBy' | 'ariaErrorMessage'>;
+export const DEFAULT = {
+    size: 'medium',
+    value: '',
+    type: 'text' as Extract<HTMLInputTypeAttribute, 'number' | 'text'>,
+    autoComplete: 'off',
+} as const;
+
+export type InputBaseProps = CommonProps<'owner' | 'size'> &
+    FieldControlProps & {
+        /** 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 InputProps = InputBaseProps & {
+    inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, keyof InputBaseProps>;
+};
 
 /**
- * An input that allows users to enter text, numbers or symbols in a singular line.
- *
- * For a more complete example with field usage, see the InputField component.
+ * An input that allows users to enter text, numbers or symbols in a singular line. This is a utility element and is not
+ * intended to be used directly but rather through the Input, and other components.
  *
  * @example
- *     import { useState } from 'react';
  *     import { Input } from '@bspk/ui/Input';
- *     import { Field, FieldLabel, FieldDescription } from '@bspk/ui/Field';
  *
  *     () => {
- *         const [fieldDate, setFieldDate] = useState<string>();
+ *         const [value, setValue] = useState<string>();
  *
  *         return (
  *             <div style={{ width: 320 }}>
- *                 <Field>
- *                     <FieldLabel>Example Label</FieldLabel>
- *                     <Input name="example-name" onChange={setFieldDate} value={fieldDate} />
- *                     <FieldDescription>This is an example input field.</FieldDescription>
+ *                 <Field
+ *                     controlId="example-control-id"
+ *                     helperText="This is an example input field."
+ *                     label="Example Input"
+ *                 >
+ *                     <Input id="example-control-id" name="example-name" onChange={setValue} value={value} />
  *                 </Field>
  *             </div>
  *         );
  *     };
  *
  * @name Input
- * @phase UXReview
+ * @phase Utility
  */
 export function Input({
-    invalid: invalidProp,
+    invalid,
     onChange,
     size = DEFAULT.size,
     value = DEFAULT.value,
@@ -42,7 +92,7 @@ export function Input({
     inputRef,
     required = false,
     placeholder,
-    id: idProp,
+    id,
     leading,
     trailing,
     type = DEFAULT.type,
@@ -53,42 +103,84 @@ export function Input({
     showClearButton: showClearButtonProp = true,
     owner,
     inputProps,
+    'aria-describedby': ariaDescribedBy,
+    'aria-errormessage': ariaErrorMessage,
     ...props
 }: ElementProps<InputProps, 'div'>) {
-    const { id, ariaDescribedBy, ariaErrorMessage, invalid } = useFieldInit({
-        idProp,
-        required,
-        disabled,
-        readOnly,
-        invalidProp,
-    });
+    const showClearButton = useMemo(
+        () => showClearButtonProp !== false && !readOnly && !disabled && !!value?.toString().length,
+        [showClearButtonProp, readOnly, disabled, value],
+    );
+
+    const inputRefInternal = useRef<HTMLInputElement | null>(null);
+
+    const focusTimeout = useTimeout();
 
     return (
-        // data-bspk="input" -- because InputElement already has it :)
-        <InputElement
+        <div
             {...props}
-            aria-label={ariaLabel}
-            ariaDescribedBy={ariaDescribedBy}
-            ariaErrorMessage={ariaErrorMessage}
-            autoComplete={autoComplete}
-            containerRef={containerRef}
-            disabled={disabled}
-            id={id}
-            inputProps={inputProps}
-            inputRef={inputRef}
-            invalid={invalid}
-            leading={leading}
-            name={name}
-            onChange={onChange}
-            owner={owner}
-            placeholder={placeholder}
-            readOnly={readOnly}
-            showClearButton={showClearButtonProp}
-            size={size}
-            trailing={trailing}
-            type={type}
-            value={value}
-        />
+            data-bspk="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-show-clear-button={showClearButton || undefined}
+            data-size={size}
+            ref={containerRef}
+        >
+            {leading && <span data-leading>{leading}</span>}
+
+            <input
+                {...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) => {
+                    inputProps?.onBlur?.(event);
+                }}
+                onChange={(event) => {
+                    onChange(event.target.value, event);
+                }}
+                onFocus={(event) => {
+                    inputProps?.onFocus?.(event);
+                }}
+                placeholder={placeholder || ' '}
+                readOnly={readOnly || undefined}
+                ref={(node) => {
+                    if (!node) return;
+                    inputRef?.(node);
+                    inputRefInternal.current = node;
+                }}
+                required={required || undefined}
+                type={type}
+                value={value || ''}
+            />
+            {trailing && <span data-trailing>{trailing}</span>}
+            {showClearButton && (
+                <Button
+                    data-clear-button
+                    icon={<SvgCancel />}
+                    iconOnly
+                    label="Clear"
+                    onClick={() => {
+                        onChange('');
+                        inputRefInternal.current?.focus();
+                    }}
+                    onFocus={() => {
+                        focusTimeout.clear();
+                    }}
+                    size={size}
+                    variant="tertiary"
+                />
+            )}
+        </div>
     );
 }
 

package/src/components/Input/InputExample.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Input, InputProps } from '.';
-import { Field, FieldLabel, FieldDescription } from '-/components/Field';
+import { Field } from '-/components/Field';
 import { ComponentExample } from '-/utils/demo';
 
 export type InputExampleProps = InputProps & { label: string; description?: string };
@@ -62,14 +62,12 @@ export const InputExample: ComponentExample<InputExampleProps> = {
 };
 
 export const Usage = () => {
-    const [fieldDate, setFieldDate] = useState<string>();
+    const [value, setValue] = useState<string>();
 
     return (
         <div style={{ width: 320 }}>
-            <Field>
-                <FieldLabel>Example Label</FieldLabel>
-                <Input name="example-name" onChange={setFieldDate} value={fieldDate} />
-                <FieldDescription>This is an example input field.</FieldDescription>
+            <Field controlId="example-control-id" helperText="This is an example input field." label="Example Input">
+                <Input id="example-control-id" name="example-name" onChange={setValue} value={value} />
             </Field>
         </div>
     );

package/src/components/Input/index.tsx

@@ -1,2 +1 @@
 export * from './Input';
-export * from './InputElement';

package/src/components/InputField/InputField.tsx

@@ -1,7 +1,8 @@
-import { FormField, FormFieldControlProps } from '-/components/FormField';
+import { Field, FieldControlProps, propsWithAria } from '-/components/Field';
 import { Input, InputProps } from '-/components/Input';
+import { useId } from '-/hooks/useId';
 
-export type InputFieldProps = FormFieldControlProps<InputProps>;
+export type InputFieldProps = FieldControlProps<InputProps>;
 
 /**
  * A field wrapper for the Input component.
@@ -9,7 +10,7 @@ export type InputFieldProps = FormFieldControlProps<InputProps>;
  * This component takes properties from the FormField and Input components.
  *
  * @name InputField
- * @phase Stable
+ * @phase UXReview
  *
  * @generated
  */
@@ -19,18 +20,21 @@ export function InputField({
     labelTrailing,
     errorMessage,
     style,
+    id: idProp,
     ...controlProps
 }: InputFieldProps) {
+    const id = useId(idProp);
     return (
-        <FormField
+        <Field
+            controlId={id}
             errorMessage={errorMessage}
             helperText={helperText}
             label={label}
             labelTrailing={labelTrailing}
             style={style}
         >
-            <Input {...controlProps} />
-        </FormField>
+            <Input {...propsWithAria({ id, controlProps, errorMessage, helperText })} />
+        </Field>
     );
 }
 

package/src/components/InputNumber/InputNumber.tsx

@@ -1,7 +1,6 @@
 import './input-number.scss';
 import { useEffect, useRef } from 'react';
 import { IncrementButton } from './IncrementButton';
-import { useFieldInit } from '-/components/Field';
 import { useId } from '-/hooks/useId';
 import { CommonProps, FieldControlProps } from '-/types/common';
 
@@ -51,24 +50,25 @@ export type InputNumberProps = CommonProps<'size'> &
  * For a more complete example with field usage, see the InputNumberField component.
  *
  * @example
- *     import { InputNumber } from '@bspk/ui/InputNumber';
+ *     import { InputNumber } from '-/components/InputNumber';
  *
  *     () => {
  *         const [value, setValue] = useState<number | undefined>();
  *
  *         return (
  *             <div style={{ width: 320 }}>
- *                 <Field>
- *                     <FieldLabel>Example Input Number</FieldLabel>
+ *                 <Field
+ *                     controlId="example-input-number"
+ *                     helperText="The input number allows you to increment or decrement a value."
+ *                     label="Example Input Number"
+ *                 >
  *                     <InputNumber
  *                         aria-label="Example aria-label"
+ *                         id="example-input-number"
  *                         name="example-name"
  *                         onChange={(nextValue) => setValue(nextValue)}
  *                         value={value}
  *                     />
- *                     <FieldDescription>
- *                         The input number allows you to increment or decrement a value.
- *                     </FieldDescription>
  *                 </Field>
  *             </div>
  *         );
@@ -89,21 +89,16 @@ export function InputNumber({
     'aria-label': ariaLabel = 'Input number',
     max: maxProp,
     min = 0,
-    invalid: invalidProp = false,
+    invalid = false,
     step = 1,
     required = false,
+    'aria-describedby': ariaDescribedBy,
+    'aria-errormessage': ariaErrorMessage,
     ...inputElementProps
 }: InputNumberProps) {
-    const { id, ariaDescribedBy, ariaErrorMessage, invalid } = useFieldInit({
-        idProp,
-        required,
-        disabled,
-        readOnly,
-        invalidProp,
-    });
+    const inputId = useId(idProp);
     const max = typeof maxProp === 'number' && maxProp >= min ? maxProp : Number.MAX_SAFE_INTEGER;
     const centered = align !== 'left';
-    const inputId = useId(id);
     const value = isNumber(valueProp, min);
     const removeDisabled = disabled || value + step * -1 < min;
     const addDisabled = disabled || value + step > max;

package/src/components/InputNumber/InputNumberExample.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { InputNumber, InputNumberProps } from './InputNumber';
-import { Field, FieldLabel, FieldDescription } from '-/components/Field';
+import { Field } from '-/components/Field';
 import { ComponentExample } from '-/utils/demo';
 
 export const InputNumberExample: ComponentExample<InputNumberProps> = {
@@ -18,15 +18,18 @@ export const Usage = () => {
 
     return (
         <div style={{ width: 320 }}>
-            <Field>
-                <FieldLabel>Example Input Number</FieldLabel>
+            <Field
+                controlId="example-input-number"
+                helperText="The input number allows you to increment or decrement a value."
+                label="Example Input Number"
+            >
                 <InputNumber
                     aria-label="Example aria-label"
+                    id="example-input-number"
                     name="example-name"
                     onChange={(nextValue) => setValue(nextValue)}
                     value={value}
                 />
-                <FieldDescription>The input number allows you to increment or decrement a value.</FieldDescription>
             </Field>
         </div>
     );

package/src/components/InputNumber/input-number.scss

@@ -16,6 +16,7 @@
 
     &:focus-within {
         outline: solid 2px var(--stroke-neutral-focus);
+        isolation: isolate;
     }
 
     [data-divider] {

package/src/components/InputNumberField/InputNumberField.tsx

@@ -1,7 +1,8 @@
-import { FormField, FormFieldControlProps } from '-/components/FormField';
+import { Field, FieldControlProps, propsWithAria } from '-/components/Field';
 import { InputNumber, InputNumberProps } from '-/components/InputNumber';
+import { useId } from '-/hooks/useId';
 
-export type InputNumberFieldProps = FormFieldControlProps<InputNumberProps>;
+export type InputNumberFieldProps = FieldControlProps<InputNumberProps>;
 
 /**
  * A field wrapper for the InputNumber component.
@@ -9,7 +10,7 @@ export type InputNumberFieldProps = FormFieldControlProps<InputNumberProps>;
  * This component takes properties from the FormField and InputNumber components.
  *
  * @name InputNumberField
- * @phase Stable
+ * @phase UXReview
  *
  * @generated
  */
@@ -19,18 +20,21 @@ export function InputNumberField({
     labelTrailing,
     errorMessage,
     style,
+    id: idProp,
     ...controlProps
 }: InputNumberFieldProps) {
+    const id = useId(idProp);
     return (
-        <FormField
+        <Field
+            controlId={id}
             errorMessage={errorMessage}
             helperText={helperText}
             label={label}
             labelTrailing={labelTrailing}
             style={style}
         >
-            <InputNumber {...controlProps} />
-        </FormField>
+            <InputNumber {...propsWithAria({ id, controlProps, errorMessage, helperText })} />
+        </Field>
     );
 }