import Example from "../../components/example";
import Layout from "../../components/layout";
import Exports from "../../components/exports";

import Basic from "examples/list/basic.tsx";
import ArtworkSizes from "examples/list/artwork-sizes.tsx";
import Enhancers from "examples/list/enhancers.tsx";
import Sublist from "examples/list/sublist.tsx";
import MenuAdapter from "examples/list/menu-adapter.tsx";
import TapTarget from "examples/list/tap-target.tsx";

import { Button } from "baseui/button";
import Search from "baseui/icon/search";
import { ListItem, ListItemLabel } from "baseui/list";
import * as ListExports from "baseui/list";

import Yard from "../../components/yard/index";
import listItemYardConfig from "../../components/yard/config/list-item";
import listItemLabelYardConfig from "../../components/yard/config/list-item-label";
import listHeadingYardConfig from "../../components/yard/config/list-heading";

export default Layout;

# List

<Yard placeholderHeight={52} {...listItemYardConfig} />

## ListItemLabel

<Yard placeholderHeight={52} {...listItemLabelYardConfig} />

## ListHeading

<Yard placeholderHeight={52} {...listHeadingYardConfig} />

## Performance Considerations

If your app renders hundreds of `ListItem`s at a time, it may be desirable to avoid unnecessary re-renders when using artwork and endEnhancer. This can be achieved with [React.memo](https://reactjs.org/docs/react-api.html#reactmemo), which you should use to memoize a component before passing it as the artwork or endEnhancer prop.

## Examples

<Example title="Basic usage" path="list/basic.tsx">
  <Basic />
</Example>

<Example title="Artwork sizes" path="list/artwork-sizes.tsx">
  <ArtworkSizes />
</Example>

<Example title="End enhancers" path="list/enhancers.tsx">
  <Enhancers />
</Example>

<Example title="Sublist" path="list/sublist.tsx">
  <Sublist />
</Example>

<Example title="Usage with Menu" path="list/menu-adapter.tsx">
  <MenuAdapter />
</Example>

<Example title="Full surface tap target" path="list/tap-target.tsx">
  <TapTarget />
</Example>

When the `onClick` prop is supplied, the entire surface of the list item becomes a tap target. This is often useful for narrow viewports and containers.

<Exports component={ListExports} title="List exports" path="baseui/list" />