import { ArgTypes, Story, Canvas, Meta } from '@storybook/addon-docs/blocks';
import * as ContainedListStories from './ContainedList.stories.js';
import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';

<Meta isTemplate />

# ContainedList

[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/ContainedList)
&nbsp;|&nbsp;
[Usage guidelines](https://carbondesignsystem.com/components/contained-list/usage/)

{/* <!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> */}

## Table of Contents

- [Overview](#overview)
  - [Search](#search)
    - [Expandable Search](#expandable-search)
    - [Persistent Search](#persistent-search)
    - [Usage Examples](#usage-examples)
    - [Disclosed](#disclosed)
    - [With Actions](#with-actions)
    - [With Icons](#with-icons)
    - [With Interactive Items](#with-interactive-items)
    - [With Interactive Items and Actions](#with-interactive-items-and-actions)
    - [With List Title Decorators](#with-list-title-decorators)
    - [With Layer](#with-layer)
- [Component API](#component-api)
- [Feedback](#feedback)

{/* <!-- END doctoc generated TOC please keep comment here to allow auto update --> */}

## Overview

<Canvas
  of={ContainedListStories.Default}
  additionalActions={[
    {
      title: 'Open in Stackblitz',
      onClick: () => stackblitzPrefillConfig(ContainedListStories.Default),
    },
  ]}
/>

### Search

#### Expandable Search

Within the Contained List you can pass in an `ExpandableSearch` component within
the `action` prop as seen below. The `ExpandableSearch` will give you the
capability to expand and collapse the search bar within the title. However, we
do not support passing in the `ExpandableSearch` within the title action prop
while passing in the `Search` component as a child at the same time. If this
happens, the `ExpandableSearch` in the title will override any other `Search`
passed in as a child. To prevent this potential conflict, we have added
functionality to support both designs and both use cases. Please see
[Persistent Search](#persistent-search) docs below.

```js
export const WithExpandableSearch = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [searchResults, setSearchResults] = useState([]);
  const handleChange = (event) => {
    setSearchTerm(event.target.value);
  };

  useEffect(() => {
    const listItems = [
      'List item 1',
      'List item 2',
      'List item 3',
      'List item 4',
    ];

    const results = listItems.filter((listItem) =>
      listItem.toLowerCase().includes(searchTerm.toLowerCase())
    );
    setSearchResults(results);
  }, [searchTerm]);

  return (
    <ContainedList
      label="List title"
      kind="on-page"
      action={
        <ExpandableSearch
          placeholder="Filterable search"
          value={searchTerm}
          onChange={handleChange}
          closeButtonLabelText="Clear search input"
          size="lg"
        />
      }>
      {searchResults.map((listItem, key) => (
        <ContainedListItem key={key}>{listItem}</ContainedListItem>
      ))}
    </ContainedList>
  );
};
```

<Canvas
  of={ContainedListStories.WithExpandableSearch}
  additionalActions={[
    {
      title: 'Open in Stackblitz',
      onClick: () =>
        stackblitzPrefillConfig(ContainedListStories.WithExpandableSearch),
    },
  ]}
/>

#### Persistent Search

We have added in the capability to pass down the `Search` component as a child
of `ContainedList`. The `Search` component itself is not a prop but does render
with specific styling such that the `Search` bar appears below the Contained
List title as opposed to rendering inline. If you would like the Search to
render inline to the Contained List title, please see the
[Expandable Search](#expandable-search) docs above The `Search` component will
also remain persistent under the title, so that it remains visible on scroll,
when there are many list items passed in.

```js
export const WithPersistentSearch = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [searchResults, setSearchResults] = useState([]);
  const handleChange = (event) => {
    setSearchTerm(event.target.value);
  };

  useEffect(() => {
    const listItems = [
      'List item 1',
      'List item 2',
      'List item 3',
      'List item 4',
    ];

    const results = listItems.filter((listItem) =>
      listItem.toLowerCase().includes(searchTerm.toLowerCase())
    );
    setSearchResults(results);
  }, [searchTerm]);

  return (
    <ContainedList label="List title" kind="on-page" action={''}>
      <Search
        placeholder="Filterable search"
        value={searchTerm}
        onChange={handleChange}
        closeButtonLabelText="Clear search input"
        size="lg"
      />
      {searchResults.map((listItem, key) => (
        <ContainedListItem key={key}>{listItem}</ContainedListItem>
      ))}
    </ContainedList>
  );
};
```

`ContainedList.ContainedListItem` is deprecated, use
`import { ContainedListItem } from '@carbon/react` import instead.

<Canvas
  of={ContainedListStories.WithPersistentSearch}
  additionalActions={[
    {
      title: 'Open in Stackblitz',
      onClick: () =>
        stackblitzPrefillConfig(ContainedListStories.WithPersistentSearch),
    },
  ]}
/>

#### Usage Examples

<Canvas
  of={ContainedListStories.UsageExamples}
  additionalActions={[
    {
      title: 'Open in Stackblitz',
      onClick: () => stackblitzPrefillConfig(ContainedListStories.UsageExamples),
    },
  ]}
/>

#### Disclosed

<Canvas
  of={ContainedListStories.Disclosed}
  additionalActions={[
    {
      title: 'Open in Stackblitz',
      onClick: () => stackblitzPrefillConfig(ContainedListStories.Disclosed),
    },
  ]}
/>

#### With Actions

<Canvas
  of={ContainedListStories.WithActions}
  additionalActions={[
    {
      title: 'Open in Stackblitz',
      onClick: () => stackblitzPrefillConfig(ContainedListStories.WithActions),
    },
  ]}
/>

#### With Icons

<Canvas
  of={ContainedListStories.WithIcons}
  additionalActions={[
    {
      title: 'Open in Stackblitz',
      onClick: () => stackblitzPrefillConfig(ContainedListStories.WithIcons),
    },
  ]}
/>

#### With Interactive Items

<Canvas
  of={ContainedListStories.WithInteractiveItems}
  additionalActions={[
    {
      title: 'Open in Stackblitz',
      onClick: () => stackblitzPrefillConfig(ContainedListStories.WithInteractiveItems),
    },
  ]}
/>

#### With Interactive Items and Actions

<Canvas
  of={ContainedListStories.WithInteractiveItemsAndActions}
  additionalActions={[
    {
      title: 'Open in Stackblitz',
      onClick: () => stackblitzPrefillConfig(ContainedListStories.WithInteractiveItemsAndActions),
    },
  ]}
/>

#### With List Title Decorators

<Canvas
  of={ContainedListStories.WithListTitleDecorators}
  additionalActions={[
    {
      title: 'Open in Stackblitz',
      onClick: () => stackblitzPrefillConfig(ContainedListStories.WithListTitleDecorators),
    },
  ]}
/>

#### With Layer

<Canvas of={ContainedListStories._WithLayer} />

## Component API

<ArgTypes />

## Feedback

Help us improve this component by providing feedback through, asking questions
on Slack, or updating this file on GitHub
[GitHub](https://github.com/carbon-design-system/carbon/edit/main/packages/react/src/components/ContainedList/ContainedList.mdx).
