@bspk/ui 1.3.21 → 1.3.23

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,87 @@
 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 InputProps = 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;
+        /** Additional props to pass to the underlying input element. */
+        inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, keyof InputProps>;
+    };
 
 /**
- * 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 Stable
  */
 export function Input({
-    invalid: invalidProp,
+    invalid,
     onChange,
     size = DEFAULT.size,
     value = DEFAULT.value,
@@ -42,7 +90,7 @@ export function Input({
     inputRef,
     required = false,
     placeholder,
-    id: idProp,
+    id,
     leading,
     trailing,
     type = DEFAULT.type,
@@ -53,42 +101,81 @@ 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}
+                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, ComposedFieldProps, propsWithAria } from '-/components/Field';
 import { Input, InputProps } from '-/components/Input';
+import { useId } from '-/hooks/useId';
 
-export type InputFieldProps = FormFieldControlProps<InputProps>;
+export type InputFieldProps = ComposedFieldProps<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,22 @@ 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}
+            required={controlProps.required}
             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, ComposedFieldProps, propsWithAria } from '-/components/Field';
 import { InputNumber, InputNumberProps } from '-/components/InputNumber';
+import { useId } from '-/hooks/useId';
 
-export type InputNumberFieldProps = FormFieldControlProps<InputNumberProps>;
+export type InputNumberFieldProps = ComposedFieldProps<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,22 @@ 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}
+            required={controlProps.required}
             style={style}
         >
-            <InputNumber {...controlProps} />
-        </FormField>
+            <InputNumber {...propsWithAria({ id, controlProps, errorMessage, helperText })} />
+        </Field>
     );
 }
 

package/src/components/InputPhone/InputPhone.tsx

@@ -3,12 +3,12 @@ import { SvgIcon } from '@bspk/icons/SvgIcon';
 import { AsYouType, getCountryCallingCode } from 'libphonenumber-js';
 import { useMemo, useRef, useState } from 'react';
 import { Button } from '-/components/Button';
-import { useFieldInit } from '-/components/Field';
-import { InputElement, InputProps } from '-/components/Input';
+import { Input, InputProps } from '-/components/Input';
 import { ListItem } from '-/components/ListItem';
 import { Menu } from '-/components/Menu';
 import { useArrowNavigation } from '-/hooks/useArrowNavigation';
 import { useFloating } from '-/hooks/useFloating';
+import { useId } from '-/hooks/useId';
 import { useOutsideClick } from '-/hooks/useOutsideClick';
 import { FieldControlProps } from '-/types/common';
 import { countryCodeData, countryCodes, SupportedCountryCode } from '-/utils/countryCodes';
@@ -57,26 +57,26 @@ export type InputPhoneProps = FieldControlProps<string, SupportedCountryCode> &
  * For a more complete example with field usage, see the InputPhoneField component.
  *
  * @example
- *     import { InputPhone } from '@bspk/ui/InputPhone';
- *     import { Field, FieldDescription, FieldLabel } from '@bspk/ui/Field';
+ *     import { InputPhone } from '-/components/InputPhone';
  *
  *     () => {
  *         const [value, onChange] = useState<string | undefined>();
  *
  *         return (
  *             <div style={{ width: 320 }}>
- *                 <Field>
- *                     <FieldLabel>Example Input Phone</FieldLabel>
+ *                 <Field
+ *                     controlId="example-input-phone"
+ *                     helperText="The phone input allows you to enter a phone number with country code."
+ *                     label="Example Input Phone"
+ *                 >
  *                     <InputPhone
  *                         aria-label="Phone Number"
+ *                         id="example-input-phone"
  *                         initialCountryCode="US"
  *                         name="example-name"
  *                         onChange={onChange}
  *                         value={value}
  *                     />
- *                     <FieldDescription>
- *                         The phone input allows you to enter a phone number with country code.
- *                     </FieldDescription>
  *                 </Field>
  *             </div>
  *         );
@@ -94,20 +94,16 @@ export function InputPhone({
     readOnly,
     name,
     id: idProp,
-    invalid: invalidProp,
+    invalid = false,
     required = false,
     size = 'medium',
     inputRef,
     scrollLimit = 5,
     'aria-label': ariaLabel = 'Phone number input',
+    'aria-describedby': ariaDescribedBy,
+    'aria-errormessage': ariaErrorMessage,
 }: InputPhoneProps) {
-    const { id, ariaDescribedBy, ariaErrorMessage, invalid } = useFieldInit({
-        idProp,
-        required,
-        disabled,
-        readOnly,
-        invalidProp,
-    });
+    const id = useId(idProp);
     const menuId = useMemo(() => `${id}-menu`, [id]);
 
     const items = useIds(`input-phone-${id}`, SELECT_OPTIONS);
@@ -174,7 +170,7 @@ export function InputPhone({
                     },
                 })}
             >
-                <InputElement
+                <Input
                     aria-describedby={ariaDescribedBy}
                     aria-errormessage={ariaErrorMessage}
                     aria-label={ariaLabel || undefined}

package/src/components/InputPhone/InputPhoneExample.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { InputPhone, InputPhoneProps } from '.';
-import { Field, FieldDescription, FieldLabel } from '-/components/Field';
+import { Field } from '-/components/Field';
 import { Preset, ComponentExample } from '-/utils/demo';
 
 export const presets: Preset<InputPhoneProps>[] = [];
@@ -19,18 +19,19 @@ export const Usage = () => {
 
     return (
         <div style={{ width: 320 }}>
-            <Field>
-                <FieldLabel>Example Input Phone</FieldLabel>
+            <Field
+                controlId="example-input-phone"
+                helperText="The phone input allows you to enter a phone number with country code."
+                label="Example Input Phone"
+            >
                 <InputPhone
                     aria-label="Phone Number"
+                    id="example-input-phone"
                     initialCountryCode="US"
                     name="example-name"
                     onChange={onChange}
                     value={value}
                 />
-                <FieldDescription>
-                    The phone input allows you to enter a phone number with country code.
-                </FieldDescription>
             </Field>
         </div>
     );

package/src/components/InputPhone/input-phone.scss

@@ -12,6 +12,7 @@
 
     input:focus-visible {
         outline: solid 2px var(--stroke-neutral-focus);
+        isolation: isolate;
         border-radius: var(--radius-sm);
     }
 

package/src/components/InputPhoneField/InputPhoneField.tsx

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

package/src/components/Link/Link.tsx

@@ -1,4 +1,3 @@
-import './link.scss';
 import { AnchorHTMLAttributes, ComponentType, lazy, LazyExoticComponent, Suspense } from 'react';
 import { CommonPropsLibrary, ElementProps } from '-/types/common';
 

package/src/components/ListItem/list-item.scss

@@ -24,6 +24,7 @@
     &:focus-visible,
     &:has(*:focus-visible) {
         outline: solid 2px var(--stroke-neutral-focus);
+        isolation: isolate;
 
         [data-inner] {
             border-color: transparent;