@trendmicro/react-buttons - npm Package Compare versions

Comparing version 0.5.0 to 1.0.0-alpha

lib/index.js

@@ -1,2 +0,2 @@
-/*! react-buttons v0.5.0 | (c) 2017 Trend Micro Inc. | MIT | https://github.com/trendmicro-frontend/react-buttons */
+/*! react-buttons v1.0.0-alpha | (c) 2017 Trend Micro Inc. | MIT | https://github.com/trendmicro-frontend/react-buttons */
 module.exports =
@@ -68,3 +68,3 @@ /******/ (function(modules) { // webpackBootstrap
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 9);
+/******/ 	return __webpack_require__(__webpack_require__.s = 7);
 /******/ })
@@ -77,3 +77,3 @@ /************************************************************************/
 // removed by extract-text-webpack-plugin
-module.exports = {"btn":"buttons---btn---2jZHN","active":"buttons---active---2-a32","focus":"buttons---focus---1kVJZ","hover":"buttons---hover---42FF2","disabled":"buttons---disabled---eCY9b","btn-icon-only":"buttons---btn-icon-only---NYhkW","btnIconOnly":"buttons---btn-icon-only---NYhkW","btn-default":"buttons---btn-default---1wWXD","btnDefault":"buttons---btn-default---1wWXD","btn-primary":"buttons---btn-primary---Wp1wb","btnPrimary":"buttons---btn-primary---Wp1wb","btn-danger":"buttons---btn-danger---1UUqU","btnDanger":"buttons---btn-danger---1UUqU","btn-border":"buttons---btn-border---1O58b","btnBorder":"buttons---btn-border---1O58b","btn-link":"buttons---btn-link---1xwS4","btnLink":"buttons---btn-link---1xwS4","btn-lg":"buttons---btn-lg---2xtUV","btnLg":"buttons---btn-lg---2xtUV","btn-group-lg":"buttons---btn-group-lg---3C8An","btnGroupLg":"buttons---btn-group-lg---3C8An","btn-md":"buttons---btn-md---HRR_F","btnMd":"buttons---btn-md---HRR_F","btn-group-md":"buttons---btn-group-md---3FQVP","btnGroupMd":"buttons---btn-group-md---3FQVP","btn-sm":"buttons---btn-sm---3cNnY","btnSm":"buttons---btn-sm---3cNnY","btn-group-sm":"buttons---btn-group-sm---3_QLf","btnGroupSm":"buttons---btn-group-sm---3_QLf","btn-xs":"buttons---btn-xs---2eEDQ","btnXs":"buttons---btn-xs---2eEDQ","btn-group-xs":"buttons---btn-group-xs---1c4pb","btnGroupXs":"buttons---btn-group-xs---1c4pb","btn-block":"buttons---btn-block---1nSNV","btnBlock":"buttons---btn-block---1nSNV","btn-group":"buttons---btn-group---1jaDo","btnGroup":"buttons---btn-group---1jaDo","btn-group-vertical":"buttons---btn-group-vertical---3Lm1e","btnGroupVertical":"buttons---btn-group-vertical---3Lm1e","btn-toolbar":"buttons---btn-toolbar---2-GfJ","btnToolbar":"buttons---btn-toolbar---2-GfJ","input-group":"buttons---input-group---1T18I","inputGroup":"buttons---input-group---1T18I","dropdown-toggle":"buttons---dropdown-toggle---vMtjL","dropdownToggle":"buttons---dropdown-toggle---vMtjL","open":"buttons---open---1ju75","btn-group-justified":"buttons---btn-group-justified---3qB9u","btnGroupJustified":"buttons---btn-group-justified---3qB9u","dropdown-menu":"buttons---dropdown-menu---1fkH0","dropdownMenu":"buttons---dropdown-menu---1fkH0","dropdown":"buttons---dropdown---1yvIZ","select-value-zone":"buttons---select-value-zone---1WDhx","selectValueZone":"buttons---select-value-zone---1WDhx","select-arrow-zone":"buttons---select-arrow-zone---2AKJW","selectArrowZone":"buttons---select-arrow-zone---2AKJW","caret":"buttons---caret---3CkEt","dropdown-nooptions":"buttons---dropdown-nooptions---Z3N2g","dropdownNooptions":"buttons---dropdown-nooptions---Z3N2g","ready":"buttons---ready---m-e-B","dropup":"buttons---dropup---30DnN","dropdown-split":"buttons---dropdown-split---3C0pZ","dropdownSplit":"buttons---dropdown-split---3C0pZ"};
+module.exports = {"btn":"buttons---btn---2jZHN","active":"buttons---active---2-a32","focus":"buttons---focus---1kVJZ","hover":"buttons---hover---42FF2","disabled":"buttons---disabled---eCY9b","btn-icon-only":"buttons---btn-icon-only---NYhkW","btnIconOnly":"buttons---btn-icon-only---NYhkW","btn-default":"buttons---btn-default---1wWXD","btnDefault":"buttons---btn-default---1wWXD","btn-primary":"buttons---btn-primary---Wp1wb","btnPrimary":"buttons---btn-primary---Wp1wb","btn-danger":"buttons---btn-danger---1UUqU","btnDanger":"buttons---btn-danger---1UUqU","btn-border":"buttons---btn-border---1O58b","btnBorder":"buttons---btn-border---1O58b","open":"buttons---open---1ju75","dropdown-toggle":"buttons---dropdown-toggle---vMtjL","dropdownToggle":"buttons---dropdown-toggle---vMtjL","btn-link":"buttons---btn-link---1xwS4","btnLink":"buttons---btn-link---1xwS4","btn-lg":"buttons---btn-lg---2xtUV","btnLg":"buttons---btn-lg---2xtUV","btn-group-lg":"buttons---btn-group-lg---3C8An","btnGroupLg":"buttons---btn-group-lg---3C8An","btn-md":"buttons---btn-md---HRR_F","btnMd":"buttons---btn-md---HRR_F","btn-group-md":"buttons---btn-group-md---3FQVP","btnGroupMd":"buttons---btn-group-md---3FQVP","btn-sm":"buttons---btn-sm---3cNnY","btnSm":"buttons---btn-sm---3cNnY","btn-group-sm":"buttons---btn-group-sm---3_QLf","btnGroupSm":"buttons---btn-group-sm---3_QLf","btn-xs":"buttons---btn-xs---2eEDQ","btnXs":"buttons---btn-xs---2eEDQ","btn-group-xs":"buttons---btn-group-xs---1c4pb","btnGroupXs":"buttons---btn-group-xs---1c4pb","btn-block":"buttons---btn-block---1nSNV","btnBlock":"buttons---btn-block---1nSNV","btn-group":"buttons---btn-group---1jaDo","btnGroup":"buttons---btn-group---1jaDo","btn-group-vertical":"buttons---btn-group-vertical---3Lm1e","btnGroupVertical":"buttons---btn-group-vertical---3Lm1e","btn-toolbar":"buttons---btn-toolbar---2-GfJ","btnToolbar":"buttons---btn-toolbar---2-GfJ","input-group":"buttons---input-group---1T18I","inputGroup":"buttons---input-group---1T18I","btn-group-justified":"buttons---btn-group-justified---3qB9u","btnGroupJustified":"buttons---btn-group-justified---3qB9u","dropdown-menu":"buttons---dropdown-menu---1fkH0","dropdownMenu":"buttons---dropdown-menu---1fkH0"};
 
@@ -103,615 +103,4 @@ /***/ }),
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _classnames = __webpack_require__(1);
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
-var _react = __webpack_require__(2);
-
-var _react2 = _interopRequireDefault(_react);
-
-var _index = __webpack_require__(0);
-
-var _index2 = _interopRequireDefault(_index);
-
-var _ButtonGroup = __webpack_require__(4);
-
-var _ButtonGroup2 = _interopRequireDefault(_ButtonGroup);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var ButtonDropdown = function (_Component) {
-    _inherits(ButtonDropdown, _Component);
-
-    function ButtonDropdown() {
-        var _ref;
-
-        var _temp, _this, _ret;
-
-        _classCallCheck(this, ButtonDropdown);
-
-        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-            args[_key] = arguments[_key];
-        }
-
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ButtonDropdown.__proto__ || Object.getPrototypeOf(ButtonDropdown)).call.apply(_ref, [this].concat(args))), _this), _this.state = _this.getDefaultState(), _this.actions = {
-            dropdown: {
-                handleKeyDown: function handleKeyDown(e) {
-                    if (!_this.props.dropdown || _this.props.disabled) {
-                        return;
-                    }
-                    var isOpen = _this.state.isOpen;
-
-                    switch (e.keyCode) {
-                        case 13:
-                            // enter
-                            if (!isOpen) {
-                                return;
-                            }
-                            _this.selectValue(_this.state.focusedOption);
-                            break;
-                        case 27:
-                            // escape
-                            if (isOpen) {
-                                _this.closeMenu();
-                            }
-                            break;
-                        case 38:
-                            // up
-                            _this.focusPreviousOption();
-                            break;
-                        case 40:
-                            // down
-                            _this.focusNextOption();
-                            break;
-                        default:
-                            return;
-                    }
-                    e.stopPropagation();
-                    e.preventDefault();
-                    _this.focusButton();
-                },
-                handleMouseDown: function handleMouseDown(e) {
-                    if (!_this.props.dropdown || _this.props.disabled) {
-                        return;
-                    }
-                    _this.setState({
-                        isOpen: !_this.state.isOpen
-                    }, function () {
-                        if (_this.state.isOpen) {
-                            _this.focusAdjacentOption();
-                        }
-                        _this.focusButton();
-                    });
-                    // prevent default event handlers
-                    e.stopPropagation();
-                    e.preventDefault();
-                },
-                handleBlur: function handleBlur(e) {
-                    if (!_this.props.dropdown || _this.props.disabled) {
-                        return;
-                    }
-                    _this.closeMenu();
-                }
-            },
-            menu: {
-                handleOptionChanged: function handleOptionChanged(e) {
-                    var el = e.currentTarget;
-                    var index = el.dataset.key;
-                    var selectedOption = _this.state.options[index];
-                    _this.selectValue(selectedOption);
-                    e.stopPropagation();
-                    e.preventDefault();
-                },
-                handleMouseEnter: function handleMouseEnter(e) {
-                    _this.focusOption(e);
-                },
-                handleMouseMove: function handleMouseMove(e) {
-                    _this.focusOption(e);
-                }
-            }
-        }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(ButtonDropdown, [{
-        key: 'componentDidMount',
-        value: function componentDidMount() {
-            var _props = this.props,
-                dropdown = _props.dropdown,
-                fixedWidth = _props.fixedWidth,
-                dropdownStyle = _props.dropdownStyle;
-
-
-            if (dropdown && fixedWidth) {
-                var dropdownWidth = this.btnDropdown.parentElement.offsetWidth;
-                var menuWidth = this.menu.offsetWidth;
-                var caretWidth = dropdownStyle === 'split' ? this.btnDropdown.offsetWidth : this.caret.offsetWidth;
-                var newWidth = 0;
-
-                menuWidth += caretWidth;
-                if (menuWidth > dropdownWidth) {
-                    newWidth = menuWidth;
-                } else if (dropdownWidth > menuWidth) {
-                    newWidth = dropdownWidth;
-                }
-                if (newWidth > 0) {
-                    this.resize({
-                        width: newWidth
-                    });
-                }
-                this.setState({
-                    isReady: true
-                });
-            }
-        }
-    }, {
-        key: 'resize',
-        value: function resize(size) {
-            if (!size) {
-                return;
-            }
-            this.btnDropdown.parentElement.style.width = size.width + 'px';
-            this.menu.style.width = size.width + 'px';
-        }
-    }, {
-        key: 'getDefaultState',
-        value: function getDefaultState() {
-            var _props2 = this.props,
-                value = _props2.value,
-                dropdown = _props2.dropdown,
-                options = _props2.options,
-                fixedWidth = _props2.fixedWidth;
-
-            var focusedOption = void 0;
-            var initItems = void 0;
-            if (dropdown && Array.isArray(options)) {
-                var isChecked = void 0;
-                // Get default selected option(s) for renderValue function
-                initItems = options.map(function (option, i) {
-                    isChecked = option.value === value;
-                    var tempObj = {
-                        value: option.value,
-                        label: option.label,
-                        id: 'option_item_' + i,
-                        checked: isChecked
-                    };
-                    return tempObj;
-                });
-                focusedOption = initItems.find(function (item) {
-                    return item.checked === true;
-                });
-            }
-
-            return {
-                isOpen: false,
-                focusedOption: focusedOption,
-                options: initItems,
-                isReady: !fixedWidth // 'isReady' will affect initialization display of menu
-            };
-        }
-    }, {
-        key: 'closeMenu',
-        value: function closeMenu() {
-            this.setState({
-                isOpen: false
-            });
-        }
-    }, {
-        key: 'focusButton',
-        value: function focusButton() {
-            this.btnDropdown.focus();
-        }
-    }, {
-        key: 'focusOption',
-        value: function focusOption(event) {
-            var index = event.currentTarget.dataset.key;
-            var option = this.props.options[index];
-            this.setState({
-                focusedOption: option
-            });
-            event.stopPropagation();
-            event.preventDefault();
-        }
-    }, {
-        key: 'focusNextOption',
-        value: function focusNextOption() {
-            this.focusAdjacentOption('next');
-        }
-    }, {
-        key: 'focusPreviousOption',
-        value: function focusPreviousOption() {
-            this.focusAdjacentOption('previous');
-        }
-    }, {
-        key: 'focusAdjacentOption',
-        value: function focusAdjacentOption(dir) {
-            var options = this.state.options;
-            var _state = this.state,
-                focusedOption = _state.focusedOption,
-                isOpen = _state.isOpen;
-
-            if (!isOpen) {
-                this.setState({
-                    isOpen: true,
-                    focusedOption: focusedOption || options[dir === 'next' ? 0 : options.length - 1]
-                });
-                return;
-            }
-            if (!Array.isArray(options)) {
-                return;
-            }
-            var focusedIndex = -1;
-            focusedIndex = options.indexOf(focusedOption);
-
-            if (dir === 'next' && focusedIndex !== -1) {
-                focusedIndex = (focusedIndex + 1) % options.length;
-            } else if (dir === 'previous') {
-                if (focusedIndex > 0) {
-                    focusedIndex--;
-                } else {
-                    focusedIndex = options.length - 1;
-                }
-            }
-
-            if (focusedIndex === -1) {
-                focusedIndex = 0;
-            }
-            this.setState({
-                focusedOption: options[focusedIndex]
-            });
-        }
-    }, {
-        key: 'getOptionLabel',
-        value: function getOptionLabel(option) {
-            return option.label;
-        }
-    }, {
-        key: 'getSelectedOptions',
-        value: function getSelectedOptions() {
-            var options = this.state.options;
-
-            var selectedOptions = [];
-            if (Array.isArray(options)) {
-                selectedOptions = options.filter(function (item) {
-                    return item.checked === true;
-                });
-            }
-            return selectedOptions;
-        }
-    }, {
-        key: 'selectValue',
-        value: function selectValue(item) {
-            var _this2 = this;
-
-            this.focusButton();
-            this.setState({
-                isOpen: false
-            }, function () {
-                _this2.updateValue(item);
-            });
-        }
-    }, {
-        key: 'updateValue',
-        value: function updateValue(option) {
-            var newOptions = this.state.options;
-            var prevSelectedOption = newOptions.find(function (item) {
-                return item.checked === true;
-            });
-            if (prevSelectedOption) {
-                prevSelectedOption.checked = false;
-            }
-            var selectedIndex = newOptions.findIndex(function (item) {
-                return item.value === option.value;
-            });
-            newOptions[selectedIndex].checked = true;
-            this.setValue(newOptions);
-        }
-    }, {
-        key: 'setValue',
-        value: function setValue(newOptions) {
-            var _this3 = this;
-
-            this.setState({
-                options: newOptions
-            }, function () {
-                var value = _this3.getSelectedOptions();
-                var returnValue = value;
-                if (value.length > 0) {
-                    returnValue = value[0];
-                }
-                _this3.props.onChange(returnValue);
-            });
-        }
-    }, {
-        key: 'renderMenuOptions',
-        value: function renderMenuOptions() {
-            var _this4 = this;
-
-            var customOptionRenderer = this.props.customOptionRenderer;
-            var _state2 = this.state,
-                focusedOption = _state2.focusedOption,
-                options = _state2.options;
-            var _actions$menu = this.actions.menu,
-                handleOptionChanged = _actions$menu.handleOptionChanged,
-                handleMouseEnter = _actions$menu.handleMouseEnter,
-                handleMouseMove = _actions$menu.handleMouseMove;
-
-            var defaultMenuOption = function defaultMenuOption(item) {
-                return _this4.getOptionLabel(item);
-            };
-            var renderLabel = customOptionRenderer || defaultMenuOption;
-            return options.map(function (item, key) {
-                return _react2.default.createElement(
-                    'li',
-                    { key: 'option_' + key },
-                    _react2.default.createElement(
-                        'a',
-                        {
-                            className: (0, _classnames2.default)(_defineProperty({}, _index2.default.focus, item === focusedOption)),
-                            'data-key': key,
-                            onMouseDown: handleOptionChanged,
-                            onMouseEnter: handleMouseEnter,
-                            onMouseMove: handleMouseMove
-                        },
-                        renderLabel(item)
-                    )
-                );
-            });
-        }
-    }, {
-        key: 'renderMenu',
-        value: function renderMenu() {
-            var _this5 = this;
-
-            if (!this.props.dropdown || this.props.disabled) {
-                return null;
-            }
-            var _state3 = this.state,
-                isReady = _state3.isReady,
-                options = _state3.options;
-
-            if (options && options.length) {
-                return _react2.default.createElement(
-                    'ul',
-                    {
-                        ref: function ref(node) {
-                            _this5.menu = node;
-                        },
-                        className: (0, _classnames2.default)(_index2.default['dropdown-menu'], _defineProperty({}, _index2.default.ready, isReady))
-                    },
-                    this.renderMenuOptions()
-                );
-            } else if (this.props.noOptionsText) {
-                return _react2.default.createElement(
-                    'div',
-                    {
-                        ref: function ref(node) {
-                            _this5.menu = node;
-                        },
-                        className: (0, _classnames2.default)(_index2.default['dropdown-nooptions'], _defineProperty({}, _index2.default.ready, isReady))
-                    },
-                    this.props.noOptionsText
-                );
-            } else {
-                return null;
-            }
-        }
-    }, {
-        key: 'renderValue',
-        value: function renderValue() {
-            var _props3 = this.props,
-                placeholder = _props3.placeholder,
-                children = _props3.children,
-                customValueRenderer = _props3.customValueRenderer;
-
-            var selectedOption = this.getSelectedOptions();
-            var el = children;
-            if (selectedOption.length === 0) {
-                if (placeholder) {
-                    el = _react2.default.createElement(
-                        'span',
-                        null,
-                        placeholder
-                    );
-                }
-            } else {
-                var renderLabel = customValueRenderer || this.getOptionLabel;
-                el = renderLabel(selectedOption[0]);
-            }
-
-            return _react2.default.createElement(
-                'div',
-                { className: _index2.default['select-value-zone'] },
-                el
-            );
-        }
-    }, {
-        key: 'renderArrow',
-        value: function renderArrow() {
-            var _this6 = this;
-
-            return _react2.default.createElement(
-                'div',
-                {
-                    ref: function ref(node) {
-                        _this6.caret = node;
-                    },
-                    className: (0, _classnames2.default)(_index2.default['select-arrow-zone'])
-                },
-                _react2.default.createElement('span', { className: _index2.default.caret })
-            );
-        }
-    }, {
-        key: 'render',
-        value: function render() {
-            var _this7 = this;
-
-            var _props4 = this.props,
-                className = _props4.className,
-                hover = _props4.hover,
-                active = _props4.active,
-                focus = _props4.focus,
-                disabled = _props4.disabled,
-                btnSize = _props4.btnSize,
-                dropdownStyle = _props4.dropdownStyle;
-            var _actions$dropdown = this.actions.dropdown,
-                handleKeyDown = _actions$dropdown.handleKeyDown,
-                handleMouseDown = _actions$dropdown.handleMouseDown,
-                handleBlur = _actions$dropdown.handleBlur;
-            var isOpen = this.state.isOpen;
-
-            var isSplitLayout = dropdownStyle === 'split';
-
-            return _react2.default.createElement(
-                _ButtonGroup2.default,
-                {
-                    btnSize: btnSize,
-                    className: (0, _classnames2.default)(className, _index2.default.dropdown, _defineProperty({}, _index2.default['dropdown-single'], dropdownStyle === 'single'), _defineProperty({}, _index2.default['dropdown-split'], isSplitLayout), _defineProperty({}, _index2.default['dropdown-text'], dropdownStyle === 'text'), _defineProperty({}, _index2.default.dropup, isOpen))
-                },
-                isSplitLayout && _react2.default.createElement(
-                    'button',
-                    {
-                        type: 'button',
-                        className: (0, _classnames2.default)(_index2.default.btn, _index2.default['btn-border']),
-                        disabled: !!disabled
-                    },
-                    this.renderValue()
-                ),
-                _react2.default.createElement(
-                    'button',
-                    {
-                        ref: function ref(node) {
-                            _this7.btnDropdown = node;
-                        },
-                        type: 'button',
-                        className: (0, _classnames2.default)(_index2.default.btn, _index2.default['dropdown-toggle'], _defineProperty({}, _index2.default['btn-border'], dropdownStyle === 'single' || isSplitLayout), _defineProperty({}, _index2.default['btn-link'], dropdownStyle === 'text'), _defineProperty({}, _index2.default.hover, hover || isOpen), _defineProperty({}, _index2.default.active, active), _defineProperty({}, _index2.default.focus, focus)),
-                        disabled: !!disabled,
-                        onKeyDown: handleKeyDown,
-                        onMouseDown: handleMouseDown,
-                        onBlur: handleBlur
-                    },
-                    !isSplitLayout && this.renderValue(),
-                    this.renderArrow()
-                ),
-                this.renderMenu()
-            );
-        }
-    }]);
-
-    return ButtonDropdown;
-}(_react.Component);
-
-ButtonDropdown.propTypes = {
-    active: _react.PropTypes.bool,
-    btnSize: _react.PropTypes.oneOf(['lg', 'md', 'sm', 'xs', 'large', 'medium', 'small', 'extra-small']),
-    disabled: _react.PropTypes.bool,
-    focus: _react.PropTypes.bool,
-    hover: _react.PropTypes.bool,
-    dropdown: _react.PropTypes.bool,
-    dropdownStyle: _react.PropTypes.oneOf(['single', 'split', 'text']),
-    value: _react.PropTypes.any, // initial field value
-    options: _react.PropTypes.array, // array of options
-    placeholder: _react.PropTypes.string, // field placeholder, displayed when there's no value
-    noOptionsText: _react.PropTypes.oneOfType([// text displayed when there are no any options
-    _react2.default.PropTypes.string, _react2.default.PropTypes.noe]),
-    fixedWidth: _react.PropTypes.bool, // the width of dropdown and menu are consistent
-    customValueRenderer: _react2.default.PropTypes.func, // customValueRenderer: function (option) {}
-    customOptionRenderer: _react2.default.PropTypes.func, // renders a custom menu with options
-    onChange: _react.PropTypes.func // onChange handler: function (newValue) {}
-};
-ButtonDropdown.defaultProps = {
-    hover: false,
-    active: false,
-    focus: false,
-    disabled: false,
-    block: false,
-    dropdown: true,
-    iconOnly: false,
-    btnSize: 'md',
-    btnStyle: 'default',
-    dropdownStyle: 'single',
-    fixedWidth: false,
-    noOptionsText: 'No options found'
-};
-
-exports.default = ButtonDropdown;
-
-/***/ }),
-/* 4 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-var _classnames = __webpack_require__(1);
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
-var _react = __webpack_require__(2);
-
-var _react2 = _interopRequireDefault(_react);
-
-var _index = __webpack_require__(0);
-
-var _index2 = _interopRequireDefault(_index);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-var ButtonGroup = function ButtonGroup(_ref) {
-    var _classes;
-
-    var className = _ref.className,
-        btnSize = _ref.btnSize,
-        vertical = _ref.vertical,
-        props = _objectWithoutProperties(_ref, ['className', 'btnSize', 'vertical']);
-
-    var classes = (_classes = {}, _defineProperty(_classes, _index2.default.btnGroup, true), _defineProperty(_classes, _index2.default.btnGroupLg, btnSize === 'large' || btnSize === 'lg'), _defineProperty(_classes, _index2.default.btnGroupMd, btnSize === 'medium' || btnSize === 'md'), _defineProperty(_classes, _index2.default.btnGroupSm, btnSize === 'small' || btnSize === 'sm'), _defineProperty(_classes, _index2.default.btnGroupXs, btnSize === 'extra-small' || btnSize === 'xs'), _defineProperty(_classes, _index2.default.btnGroupVertical, vertical), _classes);
-    return _react2.default.createElement('div', _extends({}, props, {
-        className: (0, _classnames2.default)(className, classes)
-    }));
-};
-
-ButtonGroup.propTypes = {
-    btnSize: _react.PropTypes.oneOf(['lg', 'md', 'sm', 'xs', 'large', 'medium', 'small', 'extra-small']),
-    vertical: _react.PropTypes.bool
-};
-ButtonGroup.defaultProps = {
-    btnSize: 'md', // Defaults to medium size
-    vertical: false
-};
-
-exports.default = ButtonGroup;
-
-/***/ }),
-/* 5 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
@@ -729,14 +118,6 @@
 
-var _reactAddonsShallowCompare = __webpack_require__(7);
+var _reactAddonsShallowCompare = __webpack_require__(6);
 
 var _reactAddonsShallowCompare2 = _interopRequireDefault(_reactAddonsShallowCompare);
 
-var _warning = __webpack_require__(8);
-
-var _warning2 = _interopRequireDefault(_warning);
-
-var _ButtonDropdown = __webpack_require__(3);
-
-var _ButtonDropdown2 = _interopRequireDefault(_ButtonDropdown);
-
 var _index = __webpack_require__(0);
@@ -789,11 +170,5 @@
                 iconOnly = _props.iconOnly,
-                dropdown = _props.dropdown,
                 dropdownToggle = _props.dropdownToggle,
-                props = _objectWithoutProperties(_props, ['className', 'componentClass', 'type', 'btnSize', 'btnStyle', 'active', 'hover', 'focus', 'disabled', 'block', 'iconOnly', 'dropdown', 'dropdownToggle']);
+                props = _objectWithoutProperties(_props, ['className', 'componentClass', 'type', 'btnSize', 'btnStyle', 'active', 'hover', 'focus', 'disabled', 'block', 'iconOnly', 'dropdownToggle']);
 
-            if (dropdown) {
-                (0, _warning2.default)(false, 'Dropdown is deprecated and will be removed in a future version. ' + 'For new dropdown component, see https://github.com/trendmicro-frontend/react-dropdown.');
-                return _react2.default.createElement(_ButtonDropdown2.default, this.props);
-            }
-
             var classes = (_classes = {}, _defineProperty(_classes, _index2.default.btn, true), _defineProperty(_classes, _index2.default.btnLg, btnSize === 'large' || btnSize === 'lg'), _defineProperty(_classes, _index2.default.btnMd, btnSize === 'medium' || btnSize === 'md'), _defineProperty(_classes, _index2.default.btnSm, btnSize === 'small' || btnSize === 'sm'), _defineProperty(_classes, _index2.default.btnXs, btnSize === 'extra-small' || btnSize === 'xs'), _defineProperty(_classes, _index2.default.btnDefault, btnStyle === 'default'), _defineProperty(_classes, _index2.default.btnPrimary, btnStyle === 'primary'), _defineProperty(_classes, _index2.default.btnDanger, btnStyle === 'danger' || btnStyle === 'emphasis'), _defineProperty(_classes, _index2.default.btnBorder, btnStyle === 'border' || btnStyle === 'flat'), _defineProperty(_classes, _index2.default.btnLink, btnStyle === 'link'), _defineProperty(_classes, _index2.default.btnBlock, block), _defineProperty(_classes, _index2.default.btnIconOnly, iconOnly), _defineProperty(_classes, _index2.default.hover, hover), _defineProperty(_classes, _index2.default.active, active), _defineProperty(_classes, _index2.default.focus, focus), _defineProperty(_classes, _index2.default.dropdownToggle, dropdownToggle), _classes);
@@ -824,5 +199,2 @@
 
-    // Dropdown is deprecated and will be removed in a future version.
-    dropdown: _react.PropTypes.bool,
-
     // Apply styles for use in a Dropdown.
@@ -842,3 +214,2 @@ // This prop will be set automatically when the Button is used inside a Dropdown.
     iconOnly: false,
-    dropdown: false, // deprecated
     dropdownToggle: false
@@ -849,3 +220,3 @@ }, _temp);
 /***/ }),
-/* 6 */
+/* 4 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -876,4 +247,66 @@
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
+var ButtonGroup = function ButtonGroup(_ref) {
+    var _classes;
+
+    var className = _ref.className,
+        btnSize = _ref.btnSize,
+        vertical = _ref.vertical,
+        dropdownOpen = _ref.dropdownOpen,
+        props = _objectWithoutProperties(_ref, ['className', 'btnSize', 'vertical', 'dropdownOpen']);
+
+    var classes = (_classes = {}, _defineProperty(_classes, _index2.default.btnGroup, true), _defineProperty(_classes, _index2.default.btnGroupLg, btnSize === 'large' || btnSize === 'lg'), _defineProperty(_classes, _index2.default.btnGroupMd, btnSize === 'medium' || btnSize === 'md'), _defineProperty(_classes, _index2.default.btnGroupSm, btnSize === 'small' || btnSize === 'sm'), _defineProperty(_classes, _index2.default.btnGroupXs, btnSize === 'extra-small' || btnSize === 'xs'), _defineProperty(_classes, _index2.default.btnGroupVertical, vertical), _defineProperty(_classes, _index2.default.open, dropdownOpen), _classes);
+    return _react2.default.createElement('div', _extends({}, props, {
+        className: (0, _classnames2.default)(className, classes)
+    }));
+};
+
+ButtonGroup.propTypes = {
+    btnSize: _react.PropTypes.oneOf(['lg', 'md', 'sm', 'xs', 'large', 'medium', 'small', 'extra-small']),
+    vertical: _react.PropTypes.bool,
+
+    // Apply styles for use in a Dropdown.
+    // This prop will be set automatically when the ButtonGroup is used inside a Dropdown.
+    dropdownOpen: _react.PropTypes.bool
+};
+ButtonGroup.defaultProps = {
+    btnSize: '', // Defaults to empty
+    vertical: false,
+    dropdownOpen: false
+};
+
+exports.default = ButtonGroup;
+
+/***/ }),
+/* 5 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _classnames = __webpack_require__(1);
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _react = __webpack_require__(2);
+
+var _react2 = _interopRequireDefault(_react);
+
+var _index = __webpack_require__(0);
+
+var _index2 = _interopRequireDefault(_index);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
 var ButtonToolbar = function ButtonToolbar(_ref) {
@@ -891,3 +324,3 @@ var className = _ref.className,
 /***/ }),
-/* 7 */
+/* 6 */
 /***/ (function(module, exports) {
@@ -898,9 +331,3 @@
 /***/ }),
-/* 8 */
-/***/ (function(module, exports) {
-
-module.exports = require("warning");
-
-/***/ }),
-/* 9 */
+/* 7 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -914,5 +341,5 @@
 });
-exports.ButtonDropdown = exports.ButtonToolbar = exports.ButtonGroup = exports.Button = undefined;
+exports.ButtonToolbar = exports.ButtonGroup = exports.Button = undefined;
 
-var _Button2 = __webpack_require__(5);
+var _Button2 = __webpack_require__(3);
 
@@ -925,10 +352,6 @@ var _Button3 = _interopRequireDefault(_Button2);
 
-var _ButtonToolbar2 = __webpack_require__(6);
+var _ButtonToolbar2 = __webpack_require__(5);
 
 var _ButtonToolbar3 = _interopRequireDefault(_ButtonToolbar2);
 
-var _ButtonDropdown2 = __webpack_require__(3);
-
-var _ButtonDropdown3 = _interopRequireDefault(_ButtonDropdown2);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -939,3 +362,2 @@
 exports.ButtonToolbar = _ButtonToolbar3.default;
-exports.ButtonDropdown = _ButtonDropdown3.default;
 
@@ -942,0 +364,0 @@ /***/ })

package.json

 {
   "name": "@trendmicro/react-buttons",
-  "version": "0.5.0",
+  "version": "1.0.0-alpha",
   "description": "Trend Micro Components: React Buttons",
@@ -58,14 +58,13 @@ "main": "lib/index.js",
     "classnames": "^2.2.5",
-    "react-addons-shallow-compare": "^0.14.0 || ^15.0.0",
-    "warning": "^3.0.0"
+    "react-addons-shallow-compare": "^0.14.0 || ^15.0.0"
   },
   "devDependencies": {
     "@trendmicro/react-loader": "^0.5.0",
-    "babel-cli": "~6.22.2",
-    "babel-core": "~6.22.1",
+    "babel-cli": "~6.23.0",
+    "babel-core": "~6.23.1",
     "babel-eslint": "~7.1.1",
-    "babel-loader": "~6.2.10",
+    "babel-loader": "~6.3.2",
     "babel-plugin-transform-decorators-legacy": "~1.3.4",
     "babel-preset-es2015": "~6.22.0",
-    "babel-preset-react": "~6.22.0",
+    "babel-preset-react": "~6.23.0",
     "babel-preset-stage-0": "~6.22.0",
@@ -76,3 +75,3 @@ "clean-css": "~4.0.3",
     "css-loader": "~0.26.1",
-    "eslint": "~3.14.1",
+    "eslint": "~3.15.0",
     "eslint-config-trendmicro": "~0.5.1",
@@ -82,3 +81,3 @@ "eslint-loader": "~1.6.1",
     "eslint-plugin-jsx-a11y": "~2.2.3",
-    "eslint-plugin-react": "~6.9.0",
+    "eslint-plugin-react": "~6.10.0",
     "extract-text-webpack-plugin": "^2.0.0-rc.3",
@@ -95,8 +94,8 @@ "file-loader": "^0.10.0",
     "stylus-loader": "~2.4.0",
-    "tap": "~10.0.0",
+    "tap": "~10.1.1",
     "trendmicro-ui": "^0.2.0",
     "url-loader": "^0.5.7",
     "webpack": "~2.2.1",
-    "webpack-dev-server": "~1.16.2"
+    "webpack-dev-server": "~2.3.0"
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Dependency count

3

decreased by-25%

Worsened metrics

Total package byte prevSize

91731

decreased by-39.84%

Lines of code

935

decreased by-40.75%

Dependency changes

• - Removedwarning@^3.0.0

• - Removedwarning@3.0.0(transitive)