Dropdown

<Dropdown data={data}>
  <Button>Menu</Button>
</Dropdown>

() => {
  const data = [
    {
      text: 'Menu item with onClick',
      onClick: event => { console.log(event); }
    },
    {
      text: 'Menu item',
      secondaryText: 'Secondary text'
    },
    {
      text: 'Icon at start',
      iconStart: <IconCloud />
    },
    {
      text: 'Icon at end',
      iconEnd: <IconCloud />
    },
    {
      divider: true
    },
    {
      text: 'Disabled menu item',
      onClick: () => { console.log('onClick is not triggered for disabled MenuItems'); },
      disabled: true
    },
    {
      title: 'Group Title',
      group: true
    },
    {
      text: 'Success variant',
      variant: 'success'
    },
    {
      text: 'Warning variant',
      variant: 'warning'
    },
    {
      text: 'Danger variant',
      variant: 'danger'
    }
  ];

  return (
    <Dropdown data={data}>
      <Button>Menu</Button>
    </Dropdown>
  );
}

<DemoLayout>
  <Dropdown wide isOpen data={data}>
    <Button>Menu</Button>
  </Dropdown>
</DemoLayout>

<DemoLayout>
  <Dropdown
    placement="bottom-start"
    data={data}
    isOpen>
    <Button>Menu</Button>
  </Dropdown>
</DemoLayout>

<OverflowContainer>
  <Dropdown data={data} isOpen>
    <Button>Menu</Button>
  </Dropdown>
</OverflowContainer>

<ScrollParent height={430}>
  <Dropdown
    data={data}
    isOpen
    placement="bottom-start">
    <Button>Menu</Button>
  </Dropdown>
</ScrollParent>

<ScrollParent>
  <Dropdown
    data={data}
    usePortal
    isOpen
    modifiers={{
      preventOverflow: {
        escapeWithReference: true
      }
    }}>
    <Button>Menu</Button>
  </Dropdown>
</ScrollParent>

<Dropdown data={data} disabled>
  <Button>Menu</Button>
</Dropdown>

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isOpen: false
    };

    this.onOpen = this.onOpen.bind(this);
    this.onClose = this.onClose.bind(this);
    this.toggleDropdown = this.toggleDropdown.bind(this);
  }

  onOpen(event) {
    this.setState({ isOpen: true });
  }

  onClose(event) {
    // Prevent extra call to toggleDropdown when clicking the controlling button.
    // Also avoid interactions with other dropdowns.
    const demoLayoutNode = this.demoLayout;
    if (
      !event.nativeEvent &&
      demoLayoutNode &&
      demoLayoutNode.contains(event.target)
    ) {
      event.stopImmediatePropagation();
    }

    this.setState({ isOpen: false });
  }


  toggleDropdown(event) {
    if (this.state.isOpen) {
      this.onClose(event);
    } else {
      this.onOpen(event);
    }
  }

  render() {
    const label = this.state.isOpen ? 'Close Dropdown' : 'Open Dropdown';
    return (
      <DemoLayout ref={node => { this.demoLayout = node }}>
        <Dropdown
          data={data}
          isOpen={this.state.isOpen}
          onOpen={this.onOpen}
          onClose={this.onClose}>
          <Button>{label}</Button>
        </Dropdown>
        <Button onClick={this.toggleDropdown}>{label}</Button>
      </DemoLayout>
    );
  }
}

<DemoLayout dir="rtl">
  <ThemeProvider theme={{ direction: 'rtl' }}>
    <Dropdown data={data} isOpen>
      <Button>Menu</Button>
    </Dropdown>
  </ThemeProvider>
</DemoLayout>

Menu

NewtonPrincipia Mathematica

DescartesLa Géométrie

EuclidElements

() => {
  const data = [
    {
      avatar: '/images/avatar.svg',
      text: 'Newton',
      work: 'Principia Mathematica'
    },
    {
      avatar: '/images/avatar.svg',
      text: 'Descartes',
      work: 'La Géométrie'
    },
    {
      avatar: '/images/avatar.svg',
      text: 'Euclid',
      work: 'Elements'
    }
  ];

  return (
    <DemoLayout>
      <Dropdown data={data} item={item} isOpen>
        <Button>Menu</Button>
      </Dropdown>
    </DemoLayout>
  );
}

() => {
  const menu = ({ props }) => {
    const Search = styled('div')(({ theme }) => ({
      borderBottom: '1px solid ' + theme.color_gray_40,
      padding: theme.space_inset_md
    }));

    return (
      <div>
        <Search>
          <FormField
            input={TextInput}
            type="search"
            label="Search"
            placeholder="Search..."
            hideLabel
            iconEnd={<IconSearch />} />
        </Search>
        <Menu {...props} />
      </div>
    );
  };

  return (
    <DemoLayout>
      <Dropdown data={data} menu={menu} isOpen>
        <Button>Menu</Button>
      </Dropdown>
    </DemoLayout>
  );
}

() => {
  // Your render function must return a Popper Reference component.
  // import { Reference } from 'react-popper';
  const CustomTrigger = styled('button')();

  return (
    <Dropdown data={data}>
      {
        ({ props, state }) => {
          return (
            <Reference>
              {({ ref: popperRef }) => {
                const triggerProps = {
                  ...props,
                  ref: (node) => {
                    popperRef(node);
                    props.ref(node);
                  },
                  role: undefined
                };

                return (
                  <CustomTrigger {...triggerProps}>
                    Menu <span role="img" aria-hidden="true">{state.isOpen ? '▲' : '▼'}</span>
                  </CustomTrigger>
                );
              }}
            </Reference>
          );
        }
      }
    </Dropdown>
  );
}