Show:
                            (function () {
                                'use strict';
                            
                                /**
                                 * The ButtonStylesList class provides functionality for showing a list of styles that can be
                                 * applied to the current selection..
                                 *
                                 * @class ButtonStylesList
                                 * @uses WidgetFocusManager
                                 */
                                var ButtonStylesList = createReactClass({
                                    mixins: [AlloyEditor.WidgetFocusManager],
                            
                                    // Lifecycle. Provides static properties to the widget.
                                    statics: {
                                        /**
                                         * The name which will be used as an alias of the button in the configuration.
                                         *
                                         * @memberof ButtonStylesList
                                         * @static
                                         * @property {String} key
                                         * @default buttonStylesList
                                         */
                                        key: 'buttonStylesList'
                                    },
                            
                                    /**
                                     * Lifecycle. Invoked once, only on the client, immediately after the initial rendering occurs.
                                     *
                                     * Focuses on the list node to allow keyboard interaction.
                                     *
                                     * @instance
                                     * @memberof ButtonStylesList
                                     * @method componentDidMount
                                     */
                                    componentDidMount: function () {
                                        ReactDOM.findDOMNode(this).focus();
                                    },
                            
                                    /**
                                     * Lifecycle. Invoked once, both on the client and server, immediately before the initial rendering occurs.
                                     *
                                     * @instance
                                     * @memberof ButtonStylesList
                                     * @method componentWillMount
                                     */
                                    componentWillMount: function () {
                                        var blockStyles = [];
                                        var inlineStyles = [];
                                        var objectStyles = [];
                            
                                        this.props.styles.forEach(function(item) {
                                            var style = new CKEDITOR.style(item.style);
                            
                                            if (style.type === CKEDITOR.STYLE_BLOCK) {
                                                blockStyles.push(item);
                                            } else if (style.type === CKEDITOR.STYLE_INLINE) {
                                                inlineStyles.push(item);
                                            } else if (style.type === CKEDITOR.STYLE_OBJECT) {
                                                objectStyles.push(item);
                                            }
                                        });
                            
                                        this._blockStyles = blockStyles;
                                        this._inlineStyles = inlineStyles;
                                        this._objectStyles = objectStyles;
                                    },
                            
                                    /**
                                     * Lifecycle. Returns the default values of the properties used in the widget.
                                     *
                                     * @instance
                                     * @memberof ButtonStylesList
                                     * @method getDefaultProps
                                     * @return {Object} The default properties.
                                     */
                                    getDefaultProps: function() {
                                        return {
                                            circular: false,
                                            descendants: '.ae-toolbar-element',
                                            keys: {
                                                dismiss: [27],
                                                dismissNext: [39],
                                                dismissPrev: [37],
                                                next: [40],
                                                prev: [38]
                                            },
                                            showRemoveStylesItem: true
                                        };
                                    },
                            
                                    /**
                                     * Lifecycle. Renders the UI of the list.
                                     *
                                     * @instance
                                     * @memberof ButtonStylesList
                                     * @method render
                                     * @return {Object} The content which should be rendered.
                                     */
                                    render: function() {
                                        var removeStylesItem;
                            
                                        if (this.props.showRemoveStylesItem) {
                                            removeStylesItem = <AlloyEditor.ButtonStylesListItemRemove editor={this.props.editor} onDismiss={this.props.toggleDropdown} />;
                                        }
                            
                                        return (
                                            <AlloyEditor.ButtonDropdown {...this.props}>
                                                {removeStylesItem}
                            
                                                <AlloyEditor.ButtonsStylesListHeader name={AlloyEditor.Strings.blockStyles} styles={this._blockStyles} />
                                                {this._renderStylesItems(this._blockStyles)}
                            
                                                <AlloyEditor.ButtonsStylesListHeader name={AlloyEditor.Strings.inlineStyles} styles={this._inlineStyles} />
                                                {this._renderStylesItems(this._inlineStyles)}
                            
                                                <AlloyEditor.ButtonsStylesListHeader name={AlloyEditor.Strings.objectStyles} styles={this._objectStyles} />
                                                {this._renderStylesItems(this._objectStyles)}
                                            </AlloyEditor.ButtonDropdown>
                                        );
                                    },
                            
                                    /**
                                     * Renders instances of ButtonStylesListItem with the preview of the correspondent block, inline or object styles.
                                     *
                                     * @instance
                                     * @memberof ButtonStylesList
                                     * @method _renderStylesItems
                                     * @param {Array} styles List of styles for which preview should be rendered.
                                     * @protected
                                     * @return {Array} Rendered instances of ButtonStylesListItem class
                                     */
                                    _renderStylesItems: function(styles) {
                                        var editor = this.props.editor;
                                        var items;
                            
                                        if (styles && styles.length) {
                                            items = styles.map(function(item) {
                                                return (
                                                    <li key={item.name} role="option">
                                                        <AlloyEditor.ButtonStylesListItem activeStyle={this.props.activeStyle} editor={editor} name={item.name} style={item.style} styleFn={item.styleFn} />
                                                    </li>
                                                );
                                            }.bind(this));
                                        }
                            
                                        return items;
                                    }
                                });
                            
                                AlloyEditor.ButtonStylesList = ButtonStylesList;
                            }());