Assisted Input

Description

The AssistedInput component enhances user input by providing suggestions or results based on what the user types. It's meant to be flexible and integrate with various types of content that might need autocomplete functionality, such as search bars or data entry fields.

The component consists of a few subcomponents, including a results container and a label, which allows for complex interaction and presentation of data.

Components properties

| Property Name | Property Description | Property Type | IsRequired | | --------------------------- | ------------------------------------------------------------------ | ----------------- | ---------- | | name | Unique identifier for the input, used in form submissions. | string | [x] | | showClear | Determines if a clear button should be displayed. | bool | | | clearIcon | Custom icon to be used for the clear button. | node | | | preloadValueFromNameParam | Preloads the input with a value from URL parameters, if available. | bool | | | className | Overwrite ClassName | classNameOverride | | | autofocus | Automatically focus the input upon component mount. | bool | | | onChangeValue | Callback function called with the current input value. | func | |

For more information about className please visit packages/utility/functions/src/generateClasses.js

Subcomponents and Context

1. AssistedInputContainer - wraps the AssistedInput and other related components, managing their shared state and interactions. It provides a context for communication between the input field and the results list, handling focus, input changes, and keyboard navigation.

2. AssistedInputContext - enables the sharing of state and interactions among AssistedInput and its subcomponents. It contains: input value, active descendant, and fetching state.

3. AssistedInputLabel - optional label component for the AssistedInput, indicating the purpose of the input field.

4. AssistedInputResultsContainer - a container for the results or suggestions displayed as the user types. It listens to the context for changes in the input field.

Conditional component presentation

The appearance and behavior of the AssistedInput component can be customized through props - for example, setting showClear to true adds a clear button, allowing users to clear their input.

The preloadValueFromNameParam can automatically fill the input based on URL parameters, preloading expected values.

Props Example:

<AssistedInput
  name="search"
  showClear={true}
  clearIcon={<ClearIcon />}
  preloadValueFromNameParam={true}
  className="customClass"
  autofocus={true}
  onChangeValue={(value) => console.log(value)}
/>

Usage

Install the package by running: npm i @squiz/xaccel-assisted-input

import { AssistedInputContainer, AssistedInput, AssistedInputResultsContainer, AssistedInputLabel } from '@squiz/xaccel-assisted-input';

function SomeReactComponent({ id }) {
    return (
        <form>
            <AssistedInputContainer id={id} onSubmit={() => console.log('Submit')}>
                <AssistedInputLabel>Search</AssistedInputLabel>
                <AssistedInput showClear />
                <AssistedInputResultsContainer>
                    Enter something to see results
                </AssistedInputResultsContainer>
            </AssistedInputContainer>
        </form>
    );
}

export default SomeReactComponent;