npm package: @rhc-shared-components/dual-list-selector
Description: Dual List Selector component for selecting items between two lists
Author: redhatofficial
Latest version: 2.0.1

# Dual List Selector

A dual list selector component that allows users to move items between two lists (available and selected). This component integrates with Formik for form management and provides advanced features like search, filtering, and loading states.

## Features

- Move individual items between lists
- Move all items at once  
- Checkbox selection for multiple items
- Search and filter functionality
- Loading states with spinner
- Empty state handling
- Formik integration for form management
- TypeScript support
- Accessible design using PatternFly components

## Installation

```bash
npm install --save @rhc-shared-components/dual-list-selector
```

## Usage

```tsx
import React, { useState } from 'react';
import { Formik, Form } from 'formik';
import { SearchInput } from '@patternfly/react-core';
import { DualListSelectorComposable, Option } from '@rhc-shared-components/dual-list-selector';

const MyComponent = () => {
  const [searchAvailableValue, setSearchAvailableValue] = useState('');

  const availableOptions: Option[] = [
    { text: 'Option 1', selected: false, isVisible: true, isDisabled: false },
    { text: 'Option 2', selected: false, isVisible: true, isDisabled: false },
    { text: 'Option 3', selected: false, isVisible: true, isDisabled: false },
  ];

  const [filteredAvailableOptions, setFilteredAvailableOptions] = useState(availableOptions);

  const onFilterChange = (value: string) => {
    setSearchAvailableValue(value);
    const filtered = availableOptions.map(option => ({
      ...option,
      isVisible: value === "" || option.text.toLowerCase().includes(value.toLowerCase())
    }));
    setFilteredAvailableOptions(filtered);
  };

  const searchInput = (
    <SearchInput
      value={searchAvailableValue}
      onChange={(_event, value) => onFilterChange(value)}
      onClear={() => onFilterChange("")}
    />
  );

  return (
    <Formik
      initialValues={{ selectedOptions: [] }}
      onSubmit={(values) => {
        console.log('Form submitted with:', values);
      }}
    >
      <Form>
        <DualListSelectorComposable
          availableOptions={filteredAvailableOptions}
          chosenOptions={[]}
          searchInput={searchInput}
          searchAvailableValue={searchAvailableValue}
          name="selectedOptions"
        />
      </Form>
    </Formik>
  );
};
```

## Props

### DualListSelectorComposableProps

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `availableOptions` | `Option[]` | Yes | Array of options available for selection |
| `chosenOptions` | `Option[]` | Yes | Array of currently chosen options |
| `searchInput` | `React.ReactNode` | Yes | Search input component for filtering available options |
| `searchAvailableValue` | `string` | Yes | Current search value for available options |
| `name` | `string` | Yes | Formik field name for form integration |

### Option

| Property | Type | Required | Description |
|----------|------|----------|-------------|
| `text` | `string` | Yes | Display text for the option |
| `selected` | `boolean` | Yes | Whether the option is currently selected |
| `isVisible` | `boolean` | Yes | Whether the option is visible (not filtered out) |
| `isDisabled` | `boolean` | Yes | Whether the option is disabled |

## Development

### Running the example

```bash
cd components/dual-list-selector
npm install
npm run dev
```

### Building the component

```bash
npm run build
```

### Linting

```bash
npm run lint
npm run lint-fix
```

## Dependencies

This component requires the following peer dependencies:

- React >= 16.13.1
- @patternfly/react-core >= 5.3.4
- formik >= 2.1.4

## Important Notes

- This component **requires** Formik context to work properly. It must be wrapped in a `<Formik>` component.
- The component integrates with Formik's field management system using the `name` prop.
- Search functionality is handled externally - you need to implement filtering logic and pass filtered options.
- The component uses PatternFly's composable dual list selector components internally.

## License

MIT