import Example from "../../components/example";
import Layout from "../../components/layout";
import Exports from "../../components/exports";
import * as React from "react";

import Basic from "examples/menu/basic.tsx";
import Compact from "examples/menu/compact.tsx";
import Profile from "examples/menu/profile.tsx";
import Stateless from "examples/menu/stateless.tsx";
import Child from "examples/menu/child.tsx";
import ChildRenderAll from "examples/menu/child-render-all.tsx";
import Grouped from "examples/menu/grouped.tsx";
import VirtualList from "examples/menu/virtual-list.tsx";
import Href from "examples/menu/href.tsx";
import Dividers from "examples/menu/dividers.tsx";

import Overrides from "../../components/overrides";
import { StatefulMenu, OptionProfile } from "baseui/menu";
import * as MenuExports from "baseui/menu";
import { Block } from "baseui/block";
import Code from "../../components/code";

import Yard from "../../components/yard/index";
import menuYardConfig from "../../components/yard/config/menu";

export default Layout;

# Menu

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

Menus in Base Web provide an opportunity to nest various hierarchical navigation, features, or
settings. Each menu item has an option to include an icon by default, but this can be removed.
The menus themselves share the functionality and display of select menus.

## When to use

- When you want to display a navigational list.
- When you want to display a list of actions.

## Keybindings

- `KeyDown / KeyUp` cycles down / up the menu list, highlighting items as needed.
- `Enter` selects the currently highlighted item. If no item is highlighted, select the first item in the menu list.

## Accessibility

In order to have the `aria-activedescendant` attribute set on the menu you need to provide menu item id
as one of the properties returned from the `getRequiredItemProps` function that is called for each rendered item.
The provided id will be set as a value for the item container's `id` attribute therefore it has to be unique on a page.

## Examples

<Example title="Menu Basic Usage" path="menu/basic.tsx">
  <Basic />
</Example>

<Example title="Menu with Compact Menu Items" path="menu/compact.tsx">
  <Compact />
</Example>

<Example title="Menu with Profile Menu" path="menu/profile.tsx">
  <Profile />
</Example>

<Example title="Menu Stateless example" path="menu/stateless.tsx">
  <Stateless />
</Example>

<Example title="Menu with Child Menu" path="menu/child.tsx">
  <Child />
</Example>

<Example
  title="Menu with Child Menu renderAll (SSR / SEO)"
  path="menu/child-render-all.tsx"
>
  <ChildRenderAll />
</Example>

<Example title="Menu with Grouped Items" path="menu/grouped.tsx">
  <Grouped />
</Example>

<Example
  title="Menu with Long Items List"
  path="menu/virtual-list.tsx"
  additionalPackages={{ "react-virtualized": "^9.21.0" }}
>
  <VirtualList />
</Example>

<Example title="Menu with URL href" path="menu/href.tsx">
  <Href />
</Example>

<Example title="Menu with Dividers" path="menu/dividers.tsx">
  <Dividers />
</Example>

## Overrides

<Overrides
  name="Menu"
  component={MenuExports}
  renderExample={(props) => (
    <React.Fragment>
      <Block marginBottom="scale600">
        <StatefulMenu
          items={[
            { label: "Item One" },
            { label: "Item Two" },
            { divider: true },
            { label: "Item Three", disabled: true },
            { label: "Item Four", disabled: true },
            { divider: true },
            { label: "Item Five" },
            { label: "Item Six" },
          ]}
          onItemSelect={console.log}
          overrides={props.overrides}
        />
      </Block>
      <p>
        <b>Note:</b> <i>baseui/menu</i> supports and exports two types of
        options: <b>OptionList</b> (default) and <b>OptionProfile</b>. You can
        opt-in into OptionProfile (example rendered below) by overriding the{" "}
        <strong>Option</strong> key. Since each override is an another
        component, you can pass additional overrides (
        <strong>all Profile* components</strong>) to it as well and that's what
        we do below.
      </p>
      <StatefulMenu
        items={[...new Array(4)].map(() => ({
          title: "David Smith",
          subtitle: "Senior Engineering Manager",
          body: "Uber Everything",
          imgUrl: "https://via.placeholder.com/60x60",
        }))}
        overrides={{
          ...props.overrides,
          Option: {
            component: OptionProfile,
            props: {
              getProfileItemLabels: ({ title, subtitle, body }) => ({
                title,
                subtitle,
                body,
              }),
              getProfileItemImg: (item) => item.imgUrl,
              getProfileItemImgText: (item) => item.title,
              overrides: props.overrides,
            },
          },
        }}
      />
      <Block marginTop="scale600" marginBottom="scale600">
        <strong>Source Code</strong> (override objects are empty just to
        demonstrate their placement)
      </Block>
      <Code
        content={`import {StatefulMenu, OptionProfile} from 'baseui/menu';
          export default () => (
            <StatefulMenu
              items={[...new Array(4)].map(() => ({
                title: 'David Smith',
                subtitle: 'Senior Engineering Manager',
                body: 'Uber Everything',
                imgUrl: 'https://via.placeholder.com/60x60',
              }))}
              overrides={{
                List: {},
                ListItem: {},
                Option: {
                  component: OptionProfile,
                  props: {
                    getProfileItemLabels: ({title, subtitle, body}) => ({
                      title,
                      subtitle,
                      body,
                    }),
                    getProfileItemImg: item => item.imgUrl,
                    getProfileItemImgText: item => item.title,
                    overrides: {
                      ListItemProfile: {},
                      ProfileImgContainer: {},
                      ProfileImg: {},
                      ProfileLabelsContainer: {},
                      ProfileTitle: {},
                      ProfileSubtitle: {},
                      ProfileBody: {}
                    },
                  },
                },
              }}
            />
          );`}
      />
    </React.Fragment>
  )}
/>

<Exports component={MenuExports} title="Menu exports" path="baseui/menu" />