RatanPaul/MyDropdownList.js

## index.html
<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>SLDS + React with Webpack</title>
    <link type="text/css" href="../../assets/styles/salesforce-lightning-design-system.css" rel="stylesheet" />
    <link type="text/css" href="my-style.css" rel="stylesheet" />
	</head>
	<body>
        <div id="main-placeholder"/>

        <script src="/__build__/shared.js"></script>
        <script src="/__build__/webpack_slds-with-react.js"></script>
	</body>
</html>

## main.js
'use strict';

import React from 'react';
import ReactDOM from 'react-dom';

import MyDropdownList from 'MyDropdownList'

ReactDOM.render(
    <MyDropdownList />
	, document.getElementById('main-placeholder')
);

## my-style.css
#main-placeholder {
  margin-top: 10px;
  margin-left: 10px;
}

.slds-button:focus {
    border: 1px solid #ffcc99;
    outline: 0;
    -webkit-box-shadow: 0 0 6px 0 #ffcc99;
    -moz-box-shadow: 0 0 6px 0 #ffcc99;
    -o-box-shadow: 0 0 6px 0 #ffcc99;
    box-shadow: 0 0 6px 0 #ffcc99;
}


.slds-dropdown__item > a {
  padding-left: 0px;
}

.slds-dropdown__item .slds-icon {
  height: 0px;
  width: 0px;
}

.slds-dropdown__item.slds-is-selected {
  background-color: #ffcc99;
  font-weight: 400;
}

## MyDropdownList.js
'use strict';

import React from 'react';
import Menu from 'ui/components/menus/index.react';
import componentUtil from 'app_modules/ui/util/component';
import MyPickList from 'MyPickList';
import RootCloseWrapper from 'react-overlays/lib/RootCloseWrapper';

const pf = componentUtil.prefix;
const PT = React.PropTypes;

class MyDropdownList extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      isOpened: false
    }
  }

  onToggle () {

    this.setState({isOpened: !this.state.isOpened});
  }

  onClose () {
    this.refs.refPickList.toggleHidden();
  }

  render() {

    let list = (
      <Menu.List ref="refMenuList">
        <Menu.Item href="#">Option A</Menu.Item>
        <Menu.Item href="#">Option B</Menu.Item>
        <Menu.Item href="#">Option C</Menu.Item>
        <Menu.Item href="#">Option D</Menu.Item>
        <Menu.Item href="#">Option E</Menu.Item>
        <Menu.Item href="#">Option F</Menu.Item>
        <Menu.Item href="#">Option G</Menu.Item>
        <Menu.Item href="#">Option H</Menu.Item>
        <Menu.Item href="#">Option I</Menu.Item>
        <Menu.Item href="#">Option J</Menu.Item>
        <Menu.Item href="#">Option K</Menu.Item>
        <Menu.Item href="#">Option L</Menu.Item>
      </Menu.List>
    );

    if(this.state.isOpened) {
      list = (
        <RootCloseWrapper noWrap onRootClose={this.onClose.bind(this)}>
          {list}
        </RootCloseWrapper>
      );
    }

    return (
      <div className='demo-only demo-only--dropdown' style={{height: '240px'}}>
        <MyPickList ref="refPickList" label="Select an Option" aria-expanded={false} onToggle={this.onToggle.bind(this)}>
          <Menu ref="refMenu" className={pf('dropdown--left')}>
            {list}
          </Menu>
        </MyPickList>
      </div>
    );
  }
}

module.exports = App;

## MyPickList.js
'use strict';

import React from 'react';
import ReactDOM from 'react-dom';
import PickList from 'ui/components/picklists/index.react';

const PT = React.PropTypes;

class MyPickList extends PickList {

  constructor(props) {

    super(props);
  }

  itemSelected (item) {

    super.toggleHidden();
    super.itemSelected(item);
    ReactDOM.findDOMNode(this).firstChild.focus();

    this.props.onToggle();
  }

  toggleHidden () {

    super.toggleHidden();

    this.props.onToggle();
  }
}

module.exports = MyPickList;

## webpack.config.js
var fs = require('fs');
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

function isDirectory(dir) {
    return fs.lstatSync(dir).isDirectory();
}

var config = {
    devtool: 'inline-source-map',
    context: __dirname,
    entry: fs.readdirSync(path.join(__dirname, 'my-docs')).reduce(function(entries, dir) {
        if (isDirectory(path.join(__dirname, 'my-docs', dir)))
            entries[dir] = path.join(__dirname, 'my-docs', dir, 'main.js');

        return entries;
    }, {}),
    output: {
        path: 'my-docs/__build__', filename: '[name].js', chunkFilename: '[id].chunk.js', publicPath: '/__build__/'
    },
    module: {
        loaders: [{test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel'},
        {test: /\.css$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")},
        {test: /\.less$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")},
        {test: /\.(png|gif|svg)$/, exclude: /node_modules/, loader: 'url-loader?limit=100000'}]
    },
    resolve: {
        extensions: ['', '.js', '.jsx'],
        alias: {
            'app_modules': process.cwd() + '/app_modules',
            'ui': process.cwd() + '/ui',
            '.generated': process.cwd() + '/.generated'
        }
    },
    plugins: [new webpack.optimize.CommonsChunkPlugin('shared.js'), new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
    })]
};

module.exports = config;
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>SLDS + React with Webpack</title>
	<link type="text/css" href="../../assets/styles/salesforce-lightning-design-system.css" rel="stylesheet" />
	<link type="text/css" href="my-style.css" rel="stylesheet" />
	</head>
	<body>
	<div id="main-placeholder"/>

	<script src="/__build__/shared.js"></script>
	<script src="/__build__/webpack_slds-with-react.js"></script>
	</body>
	</html>
	'use strict';

	import React from 'react';
	import ReactDOM from 'react-dom';

	import MyDropdownList from 'MyDropdownList'

	ReactDOM.render(
	<MyDropdownList />
	, document.getElementById('main-placeholder')
	);
	#main-placeholder {
	margin-top: 10px;
	margin-left: 10px;
	}

	.slds-button:focus {
	border: 1px solid #ffcc99;
	outline: 0;
	-webkit-box-shadow: 0 0 6px 0 #ffcc99;
	-moz-box-shadow: 0 0 6px 0 #ffcc99;
	-o-box-shadow: 0 0 6px 0 #ffcc99;
	box-shadow: 0 0 6px 0 #ffcc99;
	}


	.slds-dropdown__item > a {
	padding-left: 0px;
	}

	.slds-dropdown__item .slds-icon {
	height: 0px;
	width: 0px;
	}

	.slds-dropdown__item.slds-is-selected {
	background-color: #ffcc99;
	font-weight: 400;
	}
	'use strict';

	import React from 'react';
	import Menu from 'ui/components/menus/index.react';
	import componentUtil from 'app_modules/ui/util/component';
	import MyPickList from 'MyPickList';
	import RootCloseWrapper from 'react-overlays/lib/RootCloseWrapper';

	const pf = componentUtil.prefix;
	const PT = React.PropTypes;

	class MyDropdownList extends React.Component {

	constructor(props) {
	super(props);

	this.state = {
	isOpened: false
	}
	}

	onToggle () {

	this.setState({isOpened: !this.state.isOpened});
	}

	onClose () {
	this.refs.refPickList.toggleHidden();
	}

	render() {

	let list = (
	<Menu.List ref="refMenuList">
	<Menu.Item href="#">Option A</Menu.Item>
	<Menu.Item href="#">Option B</Menu.Item>
	<Menu.Item href="#">Option C</Menu.Item>
	<Menu.Item href="#">Option D</Menu.Item>
	<Menu.Item href="#">Option E</Menu.Item>
	<Menu.Item href="#">Option F</Menu.Item>
	<Menu.Item href="#">Option G</Menu.Item>
	<Menu.Item href="#">Option H</Menu.Item>
	<Menu.Item href="#">Option I</Menu.Item>
	<Menu.Item href="#">Option J</Menu.Item>
	<Menu.Item href="#">Option K</Menu.Item>
	<Menu.Item href="#">Option L</Menu.Item>
	</Menu.List>
	);

	if(this.state.isOpened) {
	list = (
	<RootCloseWrapper noWrap onRootClose={this.onClose.bind(this)}>
	{list}
	</RootCloseWrapper>
	);
	}

	return (
	<div className='demo-only demo-only--dropdown' style={{height: '240px'}}>
	<MyPickList ref="refPickList" label="Select an Option" aria-expanded={false} onToggle={this.onToggle.bind(this)}>
	<Menu ref="refMenu" className={pf('dropdown--left')}>
	{list}
	</Menu>
	</MyPickList>
	</div>
	);
	}
	}

	module.exports = App;
	var fs = require('fs');
	var path = require('path');
	var webpack = require('webpack');
	var ExtractTextPlugin = require("extract-text-webpack-plugin");

	function isDirectory(dir) {
	return fs.lstatSync(dir).isDirectory();
	}

	var config = {
	devtool: 'inline-source-map',
	context: __dirname,
	entry: fs.readdirSync(path.join(__dirname, 'my-docs')).reduce(function(entries, dir) {
	if (isDirectory(path.join(__dirname, 'my-docs', dir)))
	entries[dir] = path.join(__dirname, 'my-docs', dir, 'main.js');

	return entries;
	}, {}),
	output: {
	path: 'my-docs/__build__', filename: '[name].js', chunkFilename: '[id].chunk.js', publicPath: '/__build__/'
	},
	module: {
	loaders: [{test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel'},
	{test: /\.css$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")},
	{test: /\.less$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")},
	{test: /\.(png\|gif\|svg)$/, exclude: /node_modules/, loader: 'url-loader?limit=100000'}]
	},
	resolve: {
	extensions: ['', '.js', '.jsx'],
	alias: {
	'app_modules': process.cwd() + '/app_modules',
	'ui': process.cwd() + '/ui',
	'.generated': process.cwd() + '/.generated'
	}
	},
	plugins: [new webpack.optimize.CommonsChunkPlugin('shared.js'), new webpack.DefinePlugin({
	'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV \|\| 'development')
	})]
	};

	module.exports = config;