# @squiz/xaccel-assisted-input

> ## Description

Latest version **1.15.1** (published 2024-06-26) · ISC license · 0 weekly downloads

## Install

```sh
npm install @squiz/xaccel-assisted-input
pnpm add @squiz/xaccel-assisted-input
yarn add @squiz/xaccel-assisted-input
bun add @squiz/xaccel-assisted-input
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.15.1 |
| Published | 2024-06-26 |
| First published | 2023-08-03 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 80.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |

## Links

- npm: https://www.npmjs.com/package/@squiz/xaccel-assisted-input
- npm.io page: https://npm.io/package/@squiz/xaccel-assisted-input

## Dependencies (6)

- [react](https://npm.io/package/react.md) ^17.0.2
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.2
- [@squiz/xaccel-uuid](https://npm.io/package/@squiz/xaccel-uuid.md) ^1.15.0
- [@react-aria/interactions](https://npm.io/package/@react-aria/interactions.md) ^3.13.1
- [@squiz/xaccel-prop-types](https://npm.io/package/@squiz/xaccel-prop-types.md) ^1.2.0
- [@squiz/xaccel-utility-functions](https://npm.io/package/@squiz/xaccel-utility-functions.md) ^1.15.1

## Recent versions

- 1.15.1 (latest) — 2024-06-26
- 1.15.1-beta.4 — 2024-06-20
- 1.15.1-beta.0 — 2024-05-10
- 1.15.0 — 2024-05-10
- 1.15.0-beta.1 — 2024-04-18
- 1.14.0-alpha.1 — 2024-04-18
- 1.15.0-beta.0 — 2024-03-21
- 1.14.0-alpha.0 — 2024-03-20
- 1.13.0-alpha.7 — 2024-01-30
- 1.13.1 — 2024-01-30
- 1.13.0-beta.1 — 2024-01-23
- 1.12.2 — 2024-01-23
- 1.12.1-beta.3 — 2024-01-23
- 1.12.1-beta.2 — 2024-01-23
- 1.12.1 — 2024-01-23
- … 42 more at https://npm.io/package/@squiz/xaccel-assisted-input/versions

## README

# 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:

```JSX
<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`

```JSX
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;
```

---
_Source: https://npm.io/package/@squiz/xaccel-assisted-input · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._