@material-ui/lab - npm Package Compare versions

Comparing version 4.0.0-alpha.11 to 4.0.0-alpha.12

es/SpeedDial/SpeedDial.js

@@ -11,3 +11,3 @@ import _extends from "@babel/runtime/helpers/extends";
 import Fab from '@material-ui/core/Fab';
-import { isMuiElement, setRef, withForwardedRef } from '@material-ui/core/utils';
+import { isMuiElement, useForkRef } from '@material-ui/core/utils';
 import * as utils from './utils';
@@ -78,40 +78,53 @@ import { clamp } from '../utils';
 };
+const SpeedDial = React.forwardRef(function SpeedDial(props, ref) {
+  const {
+    ariaLabel,
+    ButtonProps: {
+      ref: origDialButtonRef
+    } = {},
+    children: childrenProp,
+    classes,
+    className: classNameProp,
+    hidden = false,
+    icon: iconProp,
+    onClick,
+    onClose,
+    onKeyDown,
+    open,
+    direction = 'up',
+    TransitionComponent = Zoom,
+    transitionDuration = {
+      enter: duration.enteringScreen,
+      exit: duration.leavingScreen
+    },
+    TransitionProps
+  } = props,
+        ButtonProps = _objectWithoutPropertiesLoose(props.ButtonProps, ["ref"]),
+        other = _objectWithoutPropertiesLoose(props, ["ariaLabel", "ButtonProps", "children", "classes", "className", "hidden", "icon", "onClick", "onClose", "onKeyDown", "open", "direction", "openIcon", "TransitionComponent", "transitionDuration", "TransitionProps"]);
+  /**
+   * an index in actions.current
+   */
 
-class SpeedDial extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.focusedAction = 0;
-    this.nextItemArrowKey = undefined;
-    this.actions = [];
 
-    this.handleKeyboardNavigation = event => {
-      const key = keycode(event);
-      const {
-        direction,
-        onKeyDown
-      } = this.props;
-      const {
-        focusedAction,
-        nextItemArrowKey = key
-      } = this;
+  const focusedAction = React.useRef(0);
+  /**
+   * pressing this key while the focus is on a child SpeedDialAction focuses
+   * the next SpeedDialAction.
+   * It is equal to the first arrow key pressed while focus is on the SpeedDial
+   * that is not orthogonal to the direction.
+   * @type {utils.ArrowKey?}
+   */
 
-      if (key === 'esc') {
-        this.closeActions(event, key);
-      } else if (utils.sameOrientation(key, direction)) {
-        event.preventDefault();
-        const actionStep = key === nextItemArrowKey ? 1 : -1; // stay within array indices
+  const nextItemArrowKey = React.useRef(undefined);
+  /**
+   * refs to the Button that have an action associated to them in this SpeedDial
+   * [Fab, ...(SpeedDialActions > Button)]
+   * @type {HTMLButtonElement[]}
+   */
 
-        const nextAction = clamp(focusedAction + actionStep, 0, this.actions.length - 1);
-        const nextActionRef = this.actions[nextAction];
-        nextActionRef.focus();
-        this.focusedAction = nextAction;
-        this.nextItemArrowKey = nextItemArrowKey;
-      }
-
-      if (onKeyDown) {
-        onKeyDown(event, key);
-      }
-    };
-  }
-
+  const actions = React.useRef([]);
+  const handleOwnFabRef = React.useCallback(fabFef => {
+    actions.current[0] = fabFef;
+  }, []);
+  const handleFabRef = useForkRef(origDialButtonRef, handleOwnFabRef);
   /**
@@ -124,18 +137,15 @@ * creates a ref callback for the Button in a SpeedDialAction
    */
-  createHandleSpeedDialActionButtonRef(dialActionIndex, origButtonRef) {
-    return ref => {
-      this.actions[dialActionIndex + 1] = ref;
 
+  const createHandleSpeedDialActionButtonRef = (dialActionIndex, origButtonRef) => {
+    return buttonRef => {
+      actions.current[dialActionIndex + 1] = buttonRef;
+
       if (origButtonRef) {
-        origButtonRef(ref);
+        origButtonRef(buttonRef);
       }
     };
-  }
+  };
 
-  closeActions(event, key) {
-    const {
-      onClose
-    } = this.props;
-    this.actions[0].focus();
-    this.setState(SpeedDial.initialNavigationState);
+  const closeActions = (event, key) => {
+    actions.current[0].focus();
 
@@ -145,127 +155,122 @@ if (onClose) {
     }
-  }
+  };
 
-  render() {
-    const _this$props = this.props,
-          {
-      ariaLabel,
-      ButtonProps: {
-        ref: origDialButtonRef
-      } = {},
-      children: childrenProp,
-      classes,
-      className: classNameProp,
-      hidden,
-      icon: iconProp,
-      innerRef,
-      onClick,
-      open,
-      direction,
-      TransitionComponent,
-      transitionDuration,
-      TransitionProps
-    } = _this$props,
-          ButtonProps = _objectWithoutPropertiesLoose(_this$props.ButtonProps, ["ref"]),
-          other = _objectWithoutPropertiesLoose(_this$props, ["ariaLabel", "ButtonProps", "children", "classes", "className", "hidden", "icon", "innerRef", "onClick", "onClose", "onKeyDown", "open", "direction", "openIcon", "TransitionComponent", "transitionDuration", "TransitionProps"]); // actions were closed while navigation state was not reset
+  const handleKeyboardNavigation = event => {
+    const key = keycode(event);
+    const {
+      current: nextItemArrowKeyCurrent = key
+    } = nextItemArrowKey;
 
+    if (key === 'esc') {
+      closeActions(event, key);
+    } else if (utils.sameOrientation(key, direction)) {
+      event.preventDefault();
+      const actionStep = key === nextItemArrowKeyCurrent ? 1 : -1; // stay within array indices
 
-    if (!open && this.nextItemArrowKey !== undefined) {
-      this.focusedAction = 0;
-      this.nextItemArrowKey = undefined;
-    } // Filter the label for valid id characters.
+      const nextAction = clamp(focusedAction.current + actionStep, 0, actions.current.length - 1);
+      const nextActionRef = actions.current[nextAction];
+      nextActionRef.focus();
+      focusedAction.current = nextAction;
+      nextItemArrowKey.current = nextItemArrowKeyCurrent;
+    }
 
+    if (onKeyDown) {
+      onKeyDown(event, key);
+    }
+  }; // actions were closed while navigation state was not reset
 
-    const id = ariaLabel.replace(/^[^a-z]+|[^\w:.-]+/gi, '');
-    const orientation = utils.getOrientation(direction);
-    let totalValidChildren = 0;
-    React.Children.forEach(childrenProp, child => {
-      if (React.isValidElement(child)) totalValidChildren += 1;
-    });
-    this.actions = [];
-    let validChildCount = 0;
-    const children = React.Children.map(childrenProp, child => {
-      if (!React.isValidElement(child)) {
-        return null;
-      }
 
-      process.env.NODE_ENV !== "production" ? warning(child.type !== React.Fragment, ["Material-UI: the SpeedDial component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n')) : void 0;
-      const delay = 30 * (open ? validChildCount : totalValidChildren - validChildCount);
-      validChildCount += 1;
+  if (!open && nextItemArrowKey.current !== undefined) {
+    focusedAction.current = 0;
+    nextItemArrowKey.current = undefined;
+  } // Filter the label for valid id characters.
 
-      const {
-        ButtonProps: {
-          ref: origButtonRef
-        } = {}
-      } = child.props,
-            ChildButtonProps = _objectWithoutPropertiesLoose(child.props.ButtonProps, ["ref"]);
 
-      const NewChildButtonProps = _extends({}, ChildButtonProps, {
-        ref: this.createHandleSpeedDialActionButtonRef(validChildCount - 1, origButtonRef)
-      });
+  const id = ariaLabel.replace(/^[^a-z]+|[^\w:.-]+/gi, '');
+  const orientation = utils.getOrientation(direction);
+  let totalValidChildren = 0;
+  React.Children.forEach(childrenProp, child => {
+    if (React.isValidElement(child)) totalValidChildren += 1;
+  });
+  actions.current = [];
+  let validChildCount = 0;
+  const children = React.Children.map(childrenProp, child => {
+    if (!React.isValidElement(child)) {
+      return null;
+    }
 
-      return React.cloneElement(child, {
-        ButtonProps: NewChildButtonProps,
-        delay,
-        onKeyDown: this.handleKeyboardNavigation,
-        open,
-        id: `${id}-item-${validChildCount}`
-      });
-    });
+    process.env.NODE_ENV !== "production" ? warning(child.type !== React.Fragment, ["Material-UI: the SpeedDial component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n')) : void 0;
+    const delay = 30 * (open ? validChildCount : totalValidChildren - validChildCount);
+    validChildCount += 1;
 
-    const icon = () => {
-      if (React.isValidElement(iconProp) && isMuiElement(iconProp, ['SpeedDialIcon'])) {
-        return React.cloneElement(iconProp, {
-          open
-        });
-      }
+    const {
+      ButtonProps: {
+        ref: origButtonRef
+      } = {}
+    } = child.props,
+          ChildButtonProps = _objectWithoutPropertiesLoose(child.props.ButtonProps, ["ref"]);
 
-      return iconProp;
-    };
+    const NewChildButtonProps = _extends({}, ChildButtonProps, {
+      ref: createHandleSpeedDialActionButtonRef(validChildCount - 1, origButtonRef)
+    });
 
-    const actionsPlacementClass = {
-      [classes.directionUp]: direction === 'up',
-      [classes.directionDown]: direction === 'down',
-      [classes.directionLeft]: direction === 'left',
-      [classes.directionRight]: direction === 'right'
-    };
-    let clickProp = {
-      onClick
-    };
+    return React.cloneElement(child, {
+      ButtonProps: NewChildButtonProps,
+      delay,
+      onKeyDown: handleKeyboardNavigation,
+      open,
+      id: `${id}-item-${validChildCount}`
+    });
+  });
 
-    if (typeof document !== 'undefined' && 'ontouchstart' in document.documentElement) {
-      clickProp = {
-        onTouchEnd: onClick
-      };
+  const icon = () => {
+    if (React.isValidElement(iconProp) && isMuiElement(iconProp, ['SpeedDialIcon'])) {
+      return React.cloneElement(iconProp, {
+        open
+      });
     }
 
-    return React.createElement("div", _extends({
-      className: clsx(classes.root, actionsPlacementClass, classNameProp),
-      ref: innerRef
-    }, other), React.createElement(TransitionComponent, _extends({
-      in: !hidden,
-      timeout: transitionDuration,
-      unmountOnExit: true
-    }, TransitionProps), React.createElement(Fab, _extends({
-      color: "primary",
-      onKeyDown: this.handleKeyboardNavigation,
-      "aria-label": ariaLabel,
-      "aria-haspopup": "true",
-      "aria-expanded": open ? 'true' : 'false',
-      "aria-controls": `${id}-actions`
-    }, clickProp, ButtonProps, {
-      className: clsx(classes.fab, ButtonProps.className),
-      ref: ref => {
-        this.actions[0] = ref;
-        setRef(origDialButtonRef, ref);
-      }
-    }), icon())), React.createElement("div", {
-      id: `${id}-actions`,
-      role: "menu",
-      "aria-orientation": orientation,
-      className: clsx(classes.actions, !open && classes.actionsClosed, actionsPlacementClass)
-    }, children));
+    return iconProp;
+  };
+
+  const actionsPlacementClass = {
+    [classes.directionUp]: direction === 'up',
+    [classes.directionDown]: direction === 'down',
+    [classes.directionLeft]: direction === 'left',
+    [classes.directionRight]: direction === 'right'
+  };
+  let clickProp = {
+    onClick
+  };
+
+  if (typeof document !== 'undefined' && 'ontouchstart' in document.documentElement) {
+    clickProp = {
+      onTouchEnd: onClick
+    };
   }
 
-}
-
+  return React.createElement("div", _extends({
+    className: clsx(classes.root, actionsPlacementClass, classNameProp),
+    ref: ref
+  }, other), React.createElement(TransitionComponent, _extends({
+    in: !hidden,
+    timeout: transitionDuration,
+    unmountOnExit: true
+  }, TransitionProps), React.createElement(Fab, _extends({
+    color: "primary",
+    onKeyDown: handleKeyboardNavigation,
+    "aria-label": ariaLabel,
+    "aria-haspopup": "true",
+    "aria-expanded": open ? 'true' : 'false',
+    "aria-controls": `${id}-actions`
+  }, clickProp, ButtonProps, {
+    className: clsx(classes.fab, ButtonProps.className),
+    ref: handleFabRef
+  }), icon())), React.createElement("div", {
+    id: `${id}-actions`,
+    role: "menu",
+    "aria-orientation": orientation,
+    className: clsx(classes.actions, !open && classes.actionsClosed, actionsPlacementClass)
+  }, children));
+});
 process.env.NODE_ENV !== "production" ? SpeedDial.propTypes = {
@@ -317,9 +322,3 @@ /**
    * @ignore
-   * from `withForwardRef`
    */
-  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-
-  /**
-   * @ignore
-   */
   onClick: PropTypes.func,
@@ -369,13 +368,4 @@
 } : void 0;
-SpeedDial.defaultProps = {
-  hidden: false,
-  direction: 'up',
-  TransitionComponent: Zoom,
-  transitionDuration: {
-    enter: duration.enteringScreen,
-    exit: duration.leavingScreen
-  }
-};
 export default withStyles(styles, {
   name: 'MuiSpeedDial'
-})(withForwardedRef(SpeedDial));
+})(SpeedDial);

es/ToggleButton/ToggleButton.js

@@ -9,2 +9,3 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 import ButtonBase from '@material-ui/core/ButtonBase';
+import { capitalize } from '@material-ui/core/utils/helpers';
 export const styles = theme => ({
@@ -15,3 +16,3 @@ /* Styles applied to the root element. */
     height: 48,
-    minWidth: 48,
+    minWidth: 49,
     padding: '0px 11px 0px 12px',
@@ -73,2 +74,16 @@ border: `1px solid ${fade(theme.palette.action.active, 0.12)}`,
     justifyContent: 'inherit'
+  },
+
+  /* Styles applied to the root element if `size="small"`. */
+  sizeSmall: {
+    height: 40,
+    minWidth: 41,
+    fontSize: theme.typography.pxToRem(13)
+  },
+
+  /* Styles applied to the root element if `size="large"`. */
+  sizeLarge: {
+    height: 56,
+    minWidth: 57,
+    fontSize: theme.typography.pxToRem(15)
   }
@@ -86,5 +101,6 @@ });
     selected,
+    size,
     value
   } = props,
-        other = _objectWithoutPropertiesLoose(props, ["children", "classes", "className", "disabled", "disableFocusRipple", "onChange", "onClick", "selected", "value"]);
+        other = _objectWithoutPropertiesLoose(props, ["children", "classes", "className", "disabled", "disableFocusRipple", "onChange", "onClick", "selected", "size", "value"]);
 
@@ -106,3 +122,3 @@ const handleChange = event => {
   return React.createElement(ButtonBase, _extends({
-    className: clsx(classes.root, disabled && classes.disabled, selected && classes.selected, className),
+    className: clsx(classes.root, disabled && classes.disabled, selected && classes.selected, size !== 'medium' && classes[`size${capitalize(size)}`], className),
     disabled: disabled,
@@ -167,2 +183,7 @@ focusRipple: !disableFocusRipple,
   /**
+   * @ignore
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+
+  /**
    * The value to associate with the button when selected in a
@@ -176,3 +197,4 @@ * ToggleButtonGroup.
   disableFocusRipple: false,
-  disableRipple: false
+  disableRipple: false,
+  size: 'medium'
 };
@@ -179,0 +201,0 @@ export default withStyles(styles, {

es/ToggleButtonGroup/ToggleButtonGroup.js

@@ -24,5 +24,6 @@ import _extends from "@babel/runtime/helpers/extends";
     onChange,
+    size,
     value
   } = props,
-        other = _objectWithoutPropertiesLoose(props, ["children", "className", "classes", "exclusive", "onChange", "value"]);
+        other = _objectWithoutPropertiesLoose(props, ["children", "className", "classes", "exclusive", "onChange", "size", "value"]);
 
@@ -71,3 +72,4 @@ const handleChange = (event, buttonValue) => {
       selected,
-      onChange: exclusive ? handleExclusiveChange : handleChange
+      onChange: exclusive ? handleExclusiveChange : handleChange,
+      size
     });
@@ -109,2 +111,7 @@ }));
   /**
+   * The size of the buttons.
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+
+  /**
    * The currently selected value within the group or an array of selected
@@ -116,3 +123,4 @@ * values when `exclusive` is false.
 ToggleButtonGroup.defaultProps = {
-  exclusive: false
+  exclusive: false,
+  size: 'medium'
 };
@@ -119,0 +127,0 @@ export default withStyles(styles, {

esm/index.js

@@ -1,2 +0,2 @@
-/** @license Material-UI v4.0.0-alpha.11
+/** @license Material-UI v4.0.0-alpha.12
  *
@@ -3,0 +3,0 @@ * This source code is licensed under the MIT license found in the

esm/SpeedDial/SpeedDial.js

 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
 import React from 'react';
@@ -18,3 +12,3 @@ import PropTypes from 'prop-types';
 import Fab from '@material-ui/core/Fab';
-import { isMuiElement, setRef, withForwardedRef } from '@material-ui/core/utils';
+import { isMuiElement, useForkRef } from '@material-ui/core/utils';
 import * as utils from './utils';
@@ -85,213 +79,195 @@ import { clamp } from '../utils';
 };
+var SpeedDial = React.forwardRef(function SpeedDial(props, ref) {
+  var _actionsPlacementClas;
 
-var SpeedDial =
-/*#__PURE__*/
-function (_React$Component) {
-  _inherits(SpeedDial, _React$Component);
+  var ariaLabel = props.ariaLabel,
+      _props$ButtonProps = props.ButtonProps;
+  _props$ButtonProps = _props$ButtonProps === void 0 ? {} : _props$ButtonProps;
 
-  function SpeedDial() {
-    var _getPrototypeOf2;
+  var origDialButtonRef = _props$ButtonProps.ref,
+      ButtonProps = _objectWithoutProperties(_props$ButtonProps, ["ref"]),
+      childrenProp = props.children,
+      classes = props.classes,
+      classNameProp = props.className,
+      _props$hidden = props.hidden,
+      hidden = _props$hidden === void 0 ? false : _props$hidden,
+      iconProp = props.icon,
+      onClick = props.onClick,
+      onClose = props.onClose,
+      onKeyDown = props.onKeyDown,
+      open = props.open,
+      _props$direction = props.direction,
+      direction = _props$direction === void 0 ? 'up' : _props$direction,
+      openIcon = props.openIcon,
+      _props$TransitionComp = props.TransitionComponent,
+      TransitionComponent = _props$TransitionComp === void 0 ? Zoom : _props$TransitionComp,
+      _props$transitionDura = props.transitionDuration,
+      transitionDuration = _props$transitionDura === void 0 ? {
+    enter: duration.enteringScreen,
+    exit: duration.leavingScreen
+  } : _props$transitionDura,
+      TransitionProps = props.TransitionProps,
+      other = _objectWithoutProperties(props, ["ariaLabel", "ButtonProps", "children", "classes", "className", "hidden", "icon", "onClick", "onClose", "onKeyDown", "open", "direction", "openIcon", "TransitionComponent", "transitionDuration", "TransitionProps"]);
+  /**
+   * an index in actions.current
+   */
 
-    var _this;
 
-    _classCallCheck(this, SpeedDial);
+  var focusedAction = React.useRef(0);
+  /**
+   * pressing this key while the focus is on a child SpeedDialAction focuses
+   * the next SpeedDialAction.
+   * It is equal to the first arrow key pressed while focus is on the SpeedDial
+   * that is not orthogonal to the direction.
+   * @type {utils.ArrowKey?}
+   */
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+  var nextItemArrowKey = React.useRef(undefined);
+  /**
+   * refs to the Button that have an action associated to them in this SpeedDial
+   * [Fab, ...(SpeedDialActions > Button)]
+   * @type {HTMLButtonElement[]}
+   */
 
-    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(SpeedDial)).call.apply(_getPrototypeOf2, [this].concat(args)));
-    _this.focusedAction = 0;
-    _this.nextItemArrowKey = undefined;
-    _this.actions = [];
+  var actions = React.useRef([]);
+  var handleOwnFabRef = React.useCallback(function (fabFef) {
+    actions.current[0] = fabFef;
+  }, []);
+  var handleFabRef = useForkRef(origDialButtonRef, handleOwnFabRef);
+  /**
+   * creates a ref callback for the Button in a SpeedDialAction
+   * Is called before the original ref callback for Button that was set in buttonProps
+   *
+   * @param dialActionIndex {number}
+   * @param origButtonRef {React.RefObject?}
+   */
 
-    _this.handleKeyboardNavigation = function (event) {
-      var key = keycode(event);
-      var _this$props = _this.props,
-          direction = _this$props.direction,
-          onKeyDown = _this$props.onKeyDown;
+  var createHandleSpeedDialActionButtonRef = function createHandleSpeedDialActionButtonRef(dialActionIndex, origButtonRef) {
+    return function (buttonRef) {
+      actions.current[dialActionIndex + 1] = buttonRef;
 
-      var _assertThisInitialize = _assertThisInitialized(_this),
-          focusedAction = _assertThisInitialize.focusedAction,
-          _assertThisInitialize2 = _assertThisInitialize.nextItemArrowKey,
-          nextItemArrowKey = _assertThisInitialize2 === void 0 ? key : _assertThisInitialize2;
-
-      if (key === 'esc') {
-        _this.closeActions(event, key);
-      } else if (utils.sameOrientation(key, direction)) {
-        event.preventDefault();
-        var actionStep = key === nextItemArrowKey ? 1 : -1; // stay within array indices
-
-        var nextAction = clamp(focusedAction + actionStep, 0, _this.actions.length - 1);
-        var nextActionRef = _this.actions[nextAction];
-        nextActionRef.focus();
-        _this.focusedAction = nextAction;
-        _this.nextItemArrowKey = nextItemArrowKey;
+      if (origButtonRef) {
+        origButtonRef(buttonRef);
       }
-
-      if (onKeyDown) {
-        onKeyDown(event, key);
-      }
     };
+  };
 
-    return _this;
-  }
+  var closeActions = function closeActions(event, key) {
+    actions.current[0].focus();
 
-  _createClass(SpeedDial, [{
-    key: "createHandleSpeedDialActionButtonRef",
+    if (onClose) {
+      onClose(event, key);
+    }
+  };
 
-    /**
-     * creates a ref callback for the Button in a SpeedDialAction
-     * Is called before the original ref callback for Button that was set in buttonProps
-     *
-     * @param dialActionIndex {number}
-     * @param origButtonRef {React.RefObject?}
-     */
-    value: function createHandleSpeedDialActionButtonRef(dialActionIndex, origButtonRef) {
-      var _this2 = this;
+  var handleKeyboardNavigation = function handleKeyboardNavigation(event) {
+    var key = keycode(event);
+    var _nextItemArrowKey$cur = nextItemArrowKey.current,
+        nextItemArrowKeyCurrent = _nextItemArrowKey$cur === void 0 ? key : _nextItemArrowKey$cur;
 
-      return function (ref) {
-        _this2.actions[dialActionIndex + 1] = ref;
+    if (key === 'esc') {
+      closeActions(event, key);
+    } else if (utils.sameOrientation(key, direction)) {
+      event.preventDefault();
+      var actionStep = key === nextItemArrowKeyCurrent ? 1 : -1; // stay within array indices
 
-        if (origButtonRef) {
-          origButtonRef(ref);
-        }
-      };
+      var nextAction = clamp(focusedAction.current + actionStep, 0, actions.current.length - 1);
+      var nextActionRef = actions.current[nextAction];
+      nextActionRef.focus();
+      focusedAction.current = nextAction;
+      nextItemArrowKey.current = nextItemArrowKeyCurrent;
     }
-  }, {
-    key: "closeActions",
-    value: function closeActions(event, key) {
-      var onClose = this.props.onClose;
-      this.actions[0].focus();
-      this.setState(SpeedDial.initialNavigationState);
 
-      if (onClose) {
-        onClose(event, key);
-      }
+    if (onKeyDown) {
+      onKeyDown(event, key);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this3 = this,
-          _actionsPlacementClas;
+  }; // actions were closed while navigation state was not reset
 
-      var _this$props2 = this.props,
-          ariaLabel = _this$props2.ariaLabel,
-          _this$props2$ButtonPr = _this$props2.ButtonProps;
-      _this$props2$ButtonPr = _this$props2$ButtonPr === void 0 ? {} : _this$props2$ButtonPr;
 
-      var origDialButtonRef = _this$props2$ButtonPr.ref,
-          ButtonProps = _objectWithoutProperties(_this$props2$ButtonPr, ["ref"]),
-          childrenProp = _this$props2.children,
-          classes = _this$props2.classes,
-          classNameProp = _this$props2.className,
-          hidden = _this$props2.hidden,
-          iconProp = _this$props2.icon,
-          innerRef = _this$props2.innerRef,
-          onClick = _this$props2.onClick,
-          onClose = _this$props2.onClose,
-          onKeyDown = _this$props2.onKeyDown,
-          open = _this$props2.open,
-          direction = _this$props2.direction,
-          openIcon = _this$props2.openIcon,
-          TransitionComponent = _this$props2.TransitionComponent,
-          transitionDuration = _this$props2.transitionDuration,
-          TransitionProps = _this$props2.TransitionProps,
-          other = _objectWithoutProperties(_this$props2, ["ariaLabel", "ButtonProps", "children", "classes", "className", "hidden", "icon", "innerRef", "onClick", "onClose", "onKeyDown", "open", "direction", "openIcon", "TransitionComponent", "transitionDuration", "TransitionProps"]); // actions were closed while navigation state was not reset
+  if (!open && nextItemArrowKey.current !== undefined) {
+    focusedAction.current = 0;
+    nextItemArrowKey.current = undefined;
+  } // Filter the label for valid id characters.
 
 
-      if (!open && this.nextItemArrowKey !== undefined) {
-        this.focusedAction = 0;
-        this.nextItemArrowKey = undefined;
-      } // Filter the label for valid id characters.
+  var id = ariaLabel.replace(/^[^a-z]+|[^\w:.-]+/gi, '');
+  var orientation = utils.getOrientation(direction);
+  var totalValidChildren = 0;
+  React.Children.forEach(childrenProp, function (child) {
+    if (React.isValidElement(child)) totalValidChildren += 1;
+  });
+  actions.current = [];
+  var validChildCount = 0;
+  var children = React.Children.map(childrenProp, function (child) {
+    if (!React.isValidElement(child)) {
+      return null;
+    }
 
+    process.env.NODE_ENV !== "production" ? warning(child.type !== React.Fragment, ["Material-UI: the SpeedDial component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n')) : void 0;
+    var delay = 30 * (open ? validChildCount : totalValidChildren - validChildCount);
+    validChildCount += 1;
+    var _child$props$ButtonPr = child.props.ButtonProps;
+    _child$props$ButtonPr = _child$props$ButtonPr === void 0 ? {} : _child$props$ButtonPr;
 
-      var id = ariaLabel.replace(/^[^a-z]+|[^\w:.-]+/gi, '');
-      var orientation = utils.getOrientation(direction);
-      var totalValidChildren = 0;
-      React.Children.forEach(childrenProp, function (child) {
-        if (React.isValidElement(child)) totalValidChildren += 1;
-      });
-      this.actions = [];
-      var validChildCount = 0;
-      var children = React.Children.map(childrenProp, function (child) {
-        if (!React.isValidElement(child)) {
-          return null;
-        }
+    var origButtonRef = _child$props$ButtonPr.ref,
+        ChildButtonProps = _objectWithoutProperties(_child$props$ButtonPr, ["ref"]);
 
-        process.env.NODE_ENV !== "production" ? warning(child.type !== React.Fragment, ["Material-UI: the SpeedDial component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n')) : void 0;
-        var delay = 30 * (open ? validChildCount : totalValidChildren - validChildCount);
-        validChildCount += 1;
-        var _child$props$ButtonPr = child.props.ButtonProps;
-        _child$props$ButtonPr = _child$props$ButtonPr === void 0 ? {} : _child$props$ButtonPr;
+    var NewChildButtonProps = _extends({}, ChildButtonProps, {
+      ref: createHandleSpeedDialActionButtonRef(validChildCount - 1, origButtonRef)
+    });
 
-        var origButtonRef = _child$props$ButtonPr.ref,
-            ChildButtonProps = _objectWithoutProperties(_child$props$ButtonPr, ["ref"]);
+    return React.cloneElement(child, {
+      ButtonProps: NewChildButtonProps,
+      delay: delay,
+      onKeyDown: handleKeyboardNavigation,
+      open: open,
+      id: "".concat(id, "-item-").concat(validChildCount)
+    });
+  });
 
-        var NewChildButtonProps = _extends({}, ChildButtonProps, {
-          ref: _this3.createHandleSpeedDialActionButtonRef(validChildCount - 1, origButtonRef)
-        });
-
-        return React.cloneElement(child, {
-          ButtonProps: NewChildButtonProps,
-          delay: delay,
-          onKeyDown: _this3.handleKeyboardNavigation,
-          open: open,
-          id: "".concat(id, "-item-").concat(validChildCount)
-        });
+  var icon = function icon() {
+    if (React.isValidElement(iconProp) && isMuiElement(iconProp, ['SpeedDialIcon'])) {
+      return React.cloneElement(iconProp, {
+        open: open
       });
+    }
 
-      var icon = function icon() {
-        if (React.isValidElement(iconProp) && isMuiElement(iconProp, ['SpeedDialIcon'])) {
-          return React.cloneElement(iconProp, {
-            open: open
-          });
-        }
+    return iconProp;
+  };
 
-        return iconProp;
-      };
+  var actionsPlacementClass = (_actionsPlacementClas = {}, _defineProperty(_actionsPlacementClas, classes.directionUp, direction === 'up'), _defineProperty(_actionsPlacementClas, classes.directionDown, direction === 'down'), _defineProperty(_actionsPlacementClas, classes.directionLeft, direction === 'left'), _defineProperty(_actionsPlacementClas, classes.directionRight, direction === 'right'), _actionsPlacementClas);
+  var clickProp = {
+    onClick: onClick
+  };
 
-      var actionsPlacementClass = (_actionsPlacementClas = {}, _defineProperty(_actionsPlacementClas, classes.directionUp, direction === 'up'), _defineProperty(_actionsPlacementClas, classes.directionDown, direction === 'down'), _defineProperty(_actionsPlacementClas, classes.directionLeft, direction === 'left'), _defineProperty(_actionsPlacementClas, classes.directionRight, direction === 'right'), _actionsPlacementClas);
-      var clickProp = {
-        onClick: onClick
-      };
+  if (typeof document !== 'undefined' && 'ontouchstart' in document.documentElement) {
+    clickProp = {
+      onTouchEnd: onClick
+    };
+  }
 
-      if (typeof document !== 'undefined' && 'ontouchstart' in document.documentElement) {
-        clickProp = {
-          onTouchEnd: onClick
-        };
-      }
-
-      return React.createElement("div", _extends({
-        className: clsx(classes.root, actionsPlacementClass, classNameProp),
-        ref: innerRef
-      }, other), React.createElement(TransitionComponent, _extends({
-        in: !hidden,
-        timeout: transitionDuration,
-        unmountOnExit: true
-      }, TransitionProps), React.createElement(Fab, _extends({
-        color: "primary",
-        onKeyDown: this.handleKeyboardNavigation,
-        "aria-label": ariaLabel,
-        "aria-haspopup": "true",
-        "aria-expanded": open ? 'true' : 'false',
-        "aria-controls": "".concat(id, "-actions")
-      }, clickProp, ButtonProps, {
-        className: clsx(classes.fab, ButtonProps.className),
-        ref: function ref(_ref) {
-          _this3.actions[0] = _ref;
-          setRef(origDialButtonRef, _ref);
-        }
-      }), icon())), React.createElement("div", {
-        id: "".concat(id, "-actions"),
-        role: "menu",
-        "aria-orientation": orientation,
-        className: clsx(classes.actions, !open && classes.actionsClosed, actionsPlacementClass)
-      }, children));
-    }
-  }]);
-
-  return SpeedDial;
-}(React.Component);
-
+  return React.createElement("div", _extends({
+    className: clsx(classes.root, actionsPlacementClass, classNameProp),
+    ref: ref
+  }, other), React.createElement(TransitionComponent, _extends({
+    in: !hidden,
+    timeout: transitionDuration,
+    unmountOnExit: true
+  }, TransitionProps), React.createElement(Fab, _extends({
+    color: "primary",
+    onKeyDown: handleKeyboardNavigation,
+    "aria-label": ariaLabel,
+    "aria-haspopup": "true",
+    "aria-expanded": open ? 'true' : 'false',
+    "aria-controls": "".concat(id, "-actions")
+  }, clickProp, ButtonProps, {
+    className: clsx(classes.fab, ButtonProps.className),
+    ref: handleFabRef
+  }), icon())), React.createElement("div", {
+    id: "".concat(id, "-actions"),
+    role: "menu",
+    "aria-orientation": orientation,
+    className: clsx(classes.actions, !open && classes.actionsClosed, actionsPlacementClass)
+  }, children));
+});
 process.env.NODE_ENV !== "production" ? SpeedDial.propTypes = {
@@ -343,9 +319,3 @@ /**
    * @ignore
-   * from `withForwardRef`
    */
-  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-
-  /**
-   * @ignore
-   */
   onClick: PropTypes.func,
@@ -395,13 +365,4 @@
 } : void 0;
-SpeedDial.defaultProps = {
-  hidden: false,
-  direction: 'up',
-  TransitionComponent: Zoom,
-  transitionDuration: {
-    enter: duration.enteringScreen,
-    exit: duration.leavingScreen
-  }
-};
 export default withStyles(styles, {
   name: 'MuiSpeedDial'
-})(withForwardedRef(SpeedDial));
+})(SpeedDial);

esm/ToggleButton/ToggleButton.js

@@ -9,2 +9,3 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import ButtonBase from '@material-ui/core/ButtonBase';
+import { capitalize } from '@material-ui/core/utils/helpers';
 export var styles = function styles(theme) {
@@ -16,3 +17,3 @@ return {
       height: 48,
-      minWidth: 48,
+      minWidth: 49,
       padding: '0px 11px 0px 12px',
@@ -74,2 +75,16 @@ border: "1px solid ".concat(fade(theme.palette.action.active, 0.12)),
       justifyContent: 'inherit'
+    },
+
+    /* Styles applied to the root element if `size="small"`. */
+    sizeSmall: {
+      height: 40,
+      minWidth: 41,
+      fontSize: theme.typography.pxToRem(13)
+    },
+
+    /* Styles applied to the root element if `size="large"`. */
+    sizeLarge: {
+      height: 56,
+      minWidth: 57,
+      fontSize: theme.typography.pxToRem(15)
     }
@@ -87,4 +102,5 @@ };
       selected = props.selected,
+      size = props.size,
       value = props.value,
-      other = _objectWithoutProperties(props, ["children", "classes", "className", "disabled", "disableFocusRipple", "onChange", "onClick", "selected", "value"]);
+      other = _objectWithoutProperties(props, ["children", "classes", "className", "disabled", "disableFocusRipple", "onChange", "onClick", "selected", "size", "value"]);
 
@@ -106,3 +122,3 @@ var handleChange = function handleChange(event) {
   return React.createElement(ButtonBase, _extends({
-    className: clsx(classes.root, disabled && classes.disabled, selected && classes.selected, className),
+    className: clsx(classes.root, disabled && classes.disabled, selected && classes.selected, size !== 'medium' && classes["size".concat(capitalize(size))], className),
     disabled: disabled,
@@ -167,2 +183,7 @@ focusRipple: !disableFocusRipple,
   /**
+   * @ignore
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+
+  /**
    * The value to associate with the button when selected in a
@@ -176,3 +197,4 @@ * ToggleButtonGroup.
   disableFocusRipple: false,
-  disableRipple: false
+  disableRipple: false,
+  size: 'medium'
 };
@@ -179,0 +201,0 @@ export default withStyles(styles, {

esm/ToggleButtonGroup/ToggleButtonGroup.js

@@ -26,4 +26,5 @@ import _extends from "@babel/runtime/helpers/extends";
       onChange = props.onChange,
+      size = props.size,
       value = props.value,
-      other = _objectWithoutProperties(props, ["children", "className", "classes", "exclusive", "onChange", "value"]);
+      other = _objectWithoutProperties(props, ["children", "className", "classes", "exclusive", "onChange", "size", "value"]);
 
@@ -71,3 +72,4 @@ var handleChange = function handleChange(event, buttonValue) {
       selected: selected,
-      onChange: exclusive ? handleExclusiveChange : handleChange
+      onChange: exclusive ? handleExclusiveChange : handleChange,
+      size: size
     });
@@ -109,2 +111,7 @@ }));
   /**
+   * The size of the buttons.
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+
+  /**
    * The currently selected value within the group or an array of selected
@@ -116,3 +123,4 @@ * values when `exclusive` is false.
 ToggleButtonGroup.defaultProps = {
-  exclusive: false
+  exclusive: false,
+  size: 'medium'
 };
@@ -119,0 +127,0 @@ export default withStyles(styles, {

index.js

@@ -1,2 +0,2 @@
-/** @license Material-UI v4.0.0-alpha.11
+/** @license Material-UI v4.0.0-alpha.12
  *
@@ -3,0 +3,0 @@ * This source code is licensed under the MIT license found in the

package.json

 {
   "name": "@material-ui/lab",
-  "version": "4.0.0-alpha.11",
+  "version": "4.0.0-alpha.12",
   "private": false,
@@ -25,3 +25,3 @@ "author": "Material-UI Team",
   "peerDependencies": {
-    "@material-ui/core": "^4.0.0-beta.2",
+    "@material-ui/core": "^4.0.0-rc.0",
     "react": "^16.8.0",
@@ -32,3 +32,3 @@ "react-dom": "^16.8.0"
     "@babel/runtime": "^7.2.0",
-    "@material-ui/utils": "^4.0.0-beta.1",
+    "@material-ui/utils": "^4.0.0-rc.0",
     "clsx": "^1.0.2",
@@ -35,0 +35,0 @@ "keycode": "^2.1.9",

SpeedDial/SpeedDial.js

@@ -18,14 +18,2 @@ "use strict";
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _react = _interopRequireDefault(require("react"));
@@ -118,209 +106,198 @@
 
-var SpeedDial =
-/*#__PURE__*/
-function (_React$Component) {
-  (0, _inherits2.default)(SpeedDial, _React$Component);
+var SpeedDial = _react.default.forwardRef(function SpeedDial(props, ref) {
+  var _actionsPlacementClas;
 
-  function SpeedDial() {
-    var _getPrototypeOf2;
+  var ariaLabel = props.ariaLabel,
+      _props$ButtonProps = props.ButtonProps;
+  _props$ButtonProps = _props$ButtonProps === void 0 ? {} : _props$ButtonProps;
+  var origDialButtonRef = _props$ButtonProps.ref,
+      ButtonProps = (0, _objectWithoutProperties2.default)(_props$ButtonProps, ["ref"]),
+      childrenProp = props.children,
+      classes = props.classes,
+      classNameProp = props.className,
+      _props$hidden = props.hidden,
+      hidden = _props$hidden === void 0 ? false : _props$hidden,
+      iconProp = props.icon,
+      onClick = props.onClick,
+      onClose = props.onClose,
+      onKeyDown = props.onKeyDown,
+      open = props.open,
+      _props$direction = props.direction,
+      direction = _props$direction === void 0 ? 'up' : _props$direction,
+      openIcon = props.openIcon,
+      _props$TransitionComp = props.TransitionComponent,
+      TransitionComponent = _props$TransitionComp === void 0 ? _Zoom.default : _props$TransitionComp,
+      _props$transitionDura = props.transitionDuration,
+      transitionDuration = _props$transitionDura === void 0 ? {
+    enter: _styles.duration.enteringScreen,
+    exit: _styles.duration.leavingScreen
+  } : _props$transitionDura,
+      TransitionProps = props.TransitionProps,
+      other = (0, _objectWithoutProperties2.default)(props, ["ariaLabel", "ButtonProps", "children", "classes", "className", "hidden", "icon", "onClick", "onClose", "onKeyDown", "open", "direction", "openIcon", "TransitionComponent", "transitionDuration", "TransitionProps"]);
+  /**
+   * an index in actions.current
+   */
 
-    var _this;
+  var focusedAction = _react.default.useRef(0);
+  /**
+   * pressing this key while the focus is on a child SpeedDialAction focuses
+   * the next SpeedDialAction.
+   * It is equal to the first arrow key pressed while focus is on the SpeedDial
+   * that is not orthogonal to the direction.
+   * @type {utils.ArrowKey?}
+   */
 
-    (0, _classCallCheck2.default)(this, SpeedDial);
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+  var nextItemArrowKey = _react.default.useRef(undefined);
+  /**
+   * refs to the Button that have an action associated to them in this SpeedDial
+   * [Fab, ...(SpeedDialActions > Button)]
+   * @type {HTMLButtonElement[]}
+   */
 
-    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(SpeedDial)).call.apply(_getPrototypeOf2, [this].concat(args)));
-    _this.focusedAction = 0;
-    _this.nextItemArrowKey = undefined;
-    _this.actions = [];
 
-    _this.handleKeyboardNavigation = function (event) {
-      var key = (0, _keycode.default)(event);
-      var _this$props = _this.props,
-          direction = _this$props.direction,
-          onKeyDown = _this$props.onKeyDown;
+  var actions = _react.default.useRef([]);
 
-      var _assertThisInitialize = (0, _assertThisInitialized2.default)(_this),
-          focusedAction = _assertThisInitialize.focusedAction,
-          _assertThisInitialize2 = _assertThisInitialize.nextItemArrowKey,
-          nextItemArrowKey = _assertThisInitialize2 === void 0 ? key : _assertThisInitialize2;
+  var handleOwnFabRef = _react.default.useCallback(function (fabFef) {
+    actions.current[0] = fabFef;
+  }, []);
 
-      if (key === 'esc') {
-        _this.closeActions(event, key);
-      } else if (utils.sameOrientation(key, direction)) {
-        event.preventDefault();
-        var actionStep = key === nextItemArrowKey ? 1 : -1; // stay within array indices
+  var handleFabRef = (0, _utils.useForkRef)(origDialButtonRef, handleOwnFabRef);
+  /**
+   * creates a ref callback for the Button in a SpeedDialAction
+   * Is called before the original ref callback for Button that was set in buttonProps
+   *
+   * @param dialActionIndex {number}
+   * @param origButtonRef {React.RefObject?}
+   */
 
-        var nextAction = (0, _utils3.clamp)(focusedAction + actionStep, 0, _this.actions.length - 1);
-        var nextActionRef = _this.actions[nextAction];
-        nextActionRef.focus();
-        _this.focusedAction = nextAction;
-        _this.nextItemArrowKey = nextItemArrowKey;
-      }
+  var createHandleSpeedDialActionButtonRef = function createHandleSpeedDialActionButtonRef(dialActionIndex, origButtonRef) {
+    return function (buttonRef) {
+      actions.current[dialActionIndex + 1] = buttonRef;
 
-      if (onKeyDown) {
-        onKeyDown(event, key);
+      if (origButtonRef) {
+        origButtonRef(buttonRef);
       }
     };
+  };
 
-    return _this;
-  }
+  var closeActions = function closeActions(event, key) {
+    actions.current[0].focus();
 
-  (0, _createClass2.default)(SpeedDial, [{
-    key: "createHandleSpeedDialActionButtonRef",
+    if (onClose) {
+      onClose(event, key);
+    }
+  };
 
-    /**
-     * creates a ref callback for the Button in a SpeedDialAction
-     * Is called before the original ref callback for Button that was set in buttonProps
-     *
-     * @param dialActionIndex {number}
-     * @param origButtonRef {React.RefObject?}
-     */
-    value: function createHandleSpeedDialActionButtonRef(dialActionIndex, origButtonRef) {
-      var _this2 = this;
+  var handleKeyboardNavigation = function handleKeyboardNavigation(event) {
+    var key = (0, _keycode.default)(event);
+    var _nextItemArrowKey$cur = nextItemArrowKey.current,
+        nextItemArrowKeyCurrent = _nextItemArrowKey$cur === void 0 ? key : _nextItemArrowKey$cur;
 
-      return function (ref) {
-        _this2.actions[dialActionIndex + 1] = ref;
+    if (key === 'esc') {
+      closeActions(event, key);
+    } else if (utils.sameOrientation(key, direction)) {
+      event.preventDefault();
+      var actionStep = key === nextItemArrowKeyCurrent ? 1 : -1; // stay within array indices
 
-        if (origButtonRef) {
-          origButtonRef(ref);
-        }
-      };
+      var nextAction = (0, _utils3.clamp)(focusedAction.current + actionStep, 0, actions.current.length - 1);
+      var nextActionRef = actions.current[nextAction];
+      nextActionRef.focus();
+      focusedAction.current = nextAction;
+      nextItemArrowKey.current = nextItemArrowKeyCurrent;
     }
-  }, {
-    key: "closeActions",
-    value: function closeActions(event, key) {
-      var onClose = this.props.onClose;
-      this.actions[0].focus();
-      this.setState(SpeedDial.initialNavigationState);
 
-      if (onClose) {
-        onClose(event, key);
-      }
+    if (onKeyDown) {
+      onKeyDown(event, key);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this3 = this,
-          _actionsPlacementClas;
+  }; // actions were closed while navigation state was not reset
 
-      var _this$props2 = this.props,
-          ariaLabel = _this$props2.ariaLabel,
-          _this$props2$ButtonPr = _this$props2.ButtonProps;
-      _this$props2$ButtonPr = _this$props2$ButtonPr === void 0 ? {} : _this$props2$ButtonPr;
-      var origDialButtonRef = _this$props2$ButtonPr.ref,
-          ButtonProps = (0, _objectWithoutProperties2.default)(_this$props2$ButtonPr, ["ref"]),
-          childrenProp = _this$props2.children,
-          classes = _this$props2.classes,
-          classNameProp = _this$props2.className,
-          hidden = _this$props2.hidden,
-          iconProp = _this$props2.icon,
-          innerRef = _this$props2.innerRef,
-          onClick = _this$props2.onClick,
-          onClose = _this$props2.onClose,
-          onKeyDown = _this$props2.onKeyDown,
-          open = _this$props2.open,
-          direction = _this$props2.direction,
-          openIcon = _this$props2.openIcon,
-          TransitionComponent = _this$props2.TransitionComponent,
-          transitionDuration = _this$props2.transitionDuration,
-          TransitionProps = _this$props2.TransitionProps,
-          other = (0, _objectWithoutProperties2.default)(_this$props2, ["ariaLabel", "ButtonProps", "children", "classes", "className", "hidden", "icon", "innerRef", "onClick", "onClose", "onKeyDown", "open", "direction", "openIcon", "TransitionComponent", "transitionDuration", "TransitionProps"]); // actions were closed while navigation state was not reset
 
-      if (!open && this.nextItemArrowKey !== undefined) {
-        this.focusedAction = 0;
-        this.nextItemArrowKey = undefined;
-      } // Filter the label for valid id characters.
+  if (!open && nextItemArrowKey.current !== undefined) {
+    focusedAction.current = 0;
+    nextItemArrowKey.current = undefined;
+  } // Filter the label for valid id characters.
 
 
-      var id = ariaLabel.replace(/^[^a-z]+|[^\w:.-]+/gi, '');
-      var orientation = utils.getOrientation(direction);
-      var totalValidChildren = 0;
+  var id = ariaLabel.replace(/^[^a-z]+|[^\w:.-]+/gi, '');
+  var orientation = utils.getOrientation(direction);
+  var totalValidChildren = 0;
 
-      _react.default.Children.forEach(childrenProp, function (child) {
-        if (_react.default.isValidElement(child)) totalValidChildren += 1;
-      });
+  _react.default.Children.forEach(childrenProp, function (child) {
+    if (_react.default.isValidElement(child)) totalValidChildren += 1;
+  });
 
-      this.actions = [];
-      var validChildCount = 0;
+  actions.current = [];
+  var validChildCount = 0;
 
-      var children = _react.default.Children.map(childrenProp, function (child) {
-        if (!_react.default.isValidElement(child)) {
-          return null;
-        }
+  var children = _react.default.Children.map(childrenProp, function (child) {
+    if (!_react.default.isValidElement(child)) {
+      return null;
+    }
 
-        process.env.NODE_ENV !== "production" ? (0, _warning.default)(child.type !== _react.default.Fragment, ["Material-UI: the SpeedDial component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n')) : void 0;
-        var delay = 30 * (open ? validChildCount : totalValidChildren - validChildCount);
-        validChildCount += 1;
-        var _child$props$ButtonPr = child.props.ButtonProps;
-        _child$props$ButtonPr = _child$props$ButtonPr === void 0 ? {} : _child$props$ButtonPr;
-        var origButtonRef = _child$props$ButtonPr.ref,
-            ChildButtonProps = (0, _objectWithoutProperties2.default)(_child$props$ButtonPr, ["ref"]);
-        var NewChildButtonProps = (0, _extends2.default)({}, ChildButtonProps, {
-          ref: _this3.createHandleSpeedDialActionButtonRef(validChildCount - 1, origButtonRef)
-        });
-        return _react.default.cloneElement(child, {
-          ButtonProps: NewChildButtonProps,
-          delay: delay,
-          onKeyDown: _this3.handleKeyboardNavigation,
-          open: open,
-          id: "".concat(id, "-item-").concat(validChildCount)
-        });
+    process.env.NODE_ENV !== "production" ? (0, _warning.default)(child.type !== _react.default.Fragment, ["Material-UI: the SpeedDial component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n')) : void 0;
+    var delay = 30 * (open ? validChildCount : totalValidChildren - validChildCount);
+    validChildCount += 1;
+    var _child$props$ButtonPr = child.props.ButtonProps;
+    _child$props$ButtonPr = _child$props$ButtonPr === void 0 ? {} : _child$props$ButtonPr;
+    var origButtonRef = _child$props$ButtonPr.ref,
+        ChildButtonProps = (0, _objectWithoutProperties2.default)(_child$props$ButtonPr, ["ref"]);
+    var NewChildButtonProps = (0, _extends2.default)({}, ChildButtonProps, {
+      ref: createHandleSpeedDialActionButtonRef(validChildCount - 1, origButtonRef)
+    });
+    return _react.default.cloneElement(child, {
+      ButtonProps: NewChildButtonProps,
+      delay: delay,
+      onKeyDown: handleKeyboardNavigation,
+      open: open,
+      id: "".concat(id, "-item-").concat(validChildCount)
+    });
+  });
+
+  var icon = function icon() {
+    if (_react.default.isValidElement(iconProp) && (0, _utils.isMuiElement)(iconProp, ['SpeedDialIcon'])) {
+      return _react.default.cloneElement(iconProp, {
+        open: open
       });
+    }
 
-      var icon = function icon() {
-        if (_react.default.isValidElement(iconProp) && (0, _utils.isMuiElement)(iconProp, ['SpeedDialIcon'])) {
-          return _react.default.cloneElement(iconProp, {
-            open: open
-          });
-        }
+    return iconProp;
+  };
 
-        return iconProp;
-      };
+  var actionsPlacementClass = (_actionsPlacementClas = {}, (0, _defineProperty2.default)(_actionsPlacementClas, classes.directionUp, direction === 'up'), (0, _defineProperty2.default)(_actionsPlacementClas, classes.directionDown, direction === 'down'), (0, _defineProperty2.default)(_actionsPlacementClas, classes.directionLeft, direction === 'left'), (0, _defineProperty2.default)(_actionsPlacementClas, classes.directionRight, direction === 'right'), _actionsPlacementClas);
+  var clickProp = {
+    onClick: onClick
+  };
 
-      var actionsPlacementClass = (_actionsPlacementClas = {}, (0, _defineProperty2.default)(_actionsPlacementClas, classes.directionUp, direction === 'up'), (0, _defineProperty2.default)(_actionsPlacementClas, classes.directionDown, direction === 'down'), (0, _defineProperty2.default)(_actionsPlacementClas, classes.directionLeft, direction === 'left'), (0, _defineProperty2.default)(_actionsPlacementClas, classes.directionRight, direction === 'right'), _actionsPlacementClas);
-      var clickProp = {
-        onClick: onClick
-      };
+  if (typeof document !== 'undefined' && 'ontouchstart' in document.documentElement) {
+    clickProp = {
+      onTouchEnd: onClick
+    };
+  }
 
-      if (typeof document !== 'undefined' && 'ontouchstart' in document.documentElement) {
-        clickProp = {
-          onTouchEnd: onClick
-        };
-      }
+  return _react.default.createElement("div", (0, _extends2.default)({
+    className: (0, _clsx.default)(classes.root, actionsPlacementClass, classNameProp),
+    ref: ref
+  }, other), _react.default.createElement(TransitionComponent, (0, _extends2.default)({
+    in: !hidden,
+    timeout: transitionDuration,
+    unmountOnExit: true
+  }, TransitionProps), _react.default.createElement(_Fab.default, (0, _extends2.default)({
+    color: "primary",
+    onKeyDown: handleKeyboardNavigation,
+    "aria-label": ariaLabel,
+    "aria-haspopup": "true",
+    "aria-expanded": open ? 'true' : 'false',
+    "aria-controls": "".concat(id, "-actions")
+  }, clickProp, ButtonProps, {
+    className: (0, _clsx.default)(classes.fab, ButtonProps.className),
+    ref: handleFabRef
+  }), icon())), _react.default.createElement("div", {
+    id: "".concat(id, "-actions"),
+    role: "menu",
+    "aria-orientation": orientation,
+    className: (0, _clsx.default)(classes.actions, !open && classes.actionsClosed, actionsPlacementClass)
+  }, children));
+});
 
-      return _react.default.createElement("div", (0, _extends2.default)({
-        className: (0, _clsx.default)(classes.root, actionsPlacementClass, classNameProp),
-        ref: innerRef
-      }, other), _react.default.createElement(TransitionComponent, (0, _extends2.default)({
-        in: !hidden,
-        timeout: transitionDuration,
-        unmountOnExit: true
-      }, TransitionProps), _react.default.createElement(_Fab.default, (0, _extends2.default)({
-        color: "primary",
-        onKeyDown: this.handleKeyboardNavigation,
-        "aria-label": ariaLabel,
-        "aria-haspopup": "true",
-        "aria-expanded": open ? 'true' : 'false',
-        "aria-controls": "".concat(id, "-actions")
-      }, clickProp, ButtonProps, {
-        className: (0, _clsx.default)(classes.fab, ButtonProps.className),
-        ref: function ref(_ref) {
-          _this3.actions[0] = _ref;
-          (0, _utils.setRef)(origDialButtonRef, _ref);
-        }
-      }), icon())), _react.default.createElement("div", {
-        id: "".concat(id, "-actions"),
-        role: "menu",
-        "aria-orientation": orientation,
-        className: (0, _clsx.default)(classes.actions, !open && classes.actionsClosed, actionsPlacementClass)
-      }, children));
-    }
-  }]);
-  return SpeedDial;
-}(_react.default.Component);
-
 process.env.NODE_ENV !== "production" ? SpeedDial.propTypes = {
@@ -372,9 +349,3 @@ /**
    * @ignore
-   * from `withForwardRef`
    */
-  innerRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
-
-  /**
-   * @ignore
-   */
   onClick: _propTypes.default.func,
@@ -424,16 +395,7 @@
 } : void 0;
-SpeedDial.defaultProps = {
-  hidden: false,
-  direction: 'up',
-  TransitionComponent: _Zoom.default,
-  transitionDuration: {
-    enter: _styles.duration.enteringScreen,
-    exit: _styles.duration.leavingScreen
-  }
-};
 
 var _default = (0, _styles.withStyles)(styles, {
   name: 'MuiSpeedDial'
-})((0, _utils.withForwardedRef)(SpeedDial));
+})(SpeedDial);
 
 exports.default = _default;

ToggleButton/ToggleButton.js

@@ -24,2 +24,4 @@ "use strict";
 
+var _helpers = require("@material-ui/core/utils/helpers");
+
 // @inheritedComponent ButtonBase
@@ -32,3 +34,3 @@ var styles = function styles(theme) {
       height: 48,
-      minWidth: 48,
+      minWidth: 49,
       padding: '0px 11px 0px 12px',
@@ -90,2 +92,16 @@ border: "1px solid ".concat((0, _styles.fade)(theme.palette.action.active, 0.12)),
       justifyContent: 'inherit'
+    },
+
+    /* Styles applied to the root element if `size="small"`. */
+    sizeSmall: {
+      height: 40,
+      minWidth: 41,
+      fontSize: theme.typography.pxToRem(13)
+    },
+
+    /* Styles applied to the root element if `size="large"`. */
+    sizeLarge: {
+      height: 56,
+      minWidth: 57,
+      fontSize: theme.typography.pxToRem(15)
     }
@@ -106,4 +122,5 @@ };
       selected = props.selected,
+      size = props.size,
       value = props.value,
-      other = (0, _objectWithoutProperties2.default)(props, ["children", "classes", "className", "disabled", "disableFocusRipple", "onChange", "onClick", "selected", "value"]);
+      other = (0, _objectWithoutProperties2.default)(props, ["children", "classes", "className", "disabled", "disableFocusRipple", "onChange", "onClick", "selected", "size", "value"]);
 
@@ -125,3 +142,3 @@ var handleChange = function handleChange(event) {
   return _react.default.createElement(_ButtonBase.default, (0, _extends2.default)({
-    className: (0, _clsx.default)(classes.root, disabled && classes.disabled, selected && classes.selected, className),
+    className: (0, _clsx.default)(classes.root, disabled && classes.disabled, selected && classes.selected, size !== 'medium' && classes["size".concat((0, _helpers.capitalize)(size))], className),
     disabled: disabled,
@@ -187,2 +204,7 @@ focusRipple: !disableFocusRipple,
   /**
+   * @ignore
+   */
+  size: _propTypes.default.oneOf(['small', 'medium', 'large']),
+
+  /**
    * The value to associate with the button when selected in a
@@ -196,3 +218,4 @@ * ToggleButtonGroup.
   disableFocusRipple: false,
-  disableRipple: false
+  disableRipple: false,
+  size: 'medium'
 };
@@ -199,0 +222,0 @@

ToggleButtonGroup/ToggleButtonGroup.js

@@ -47,4 +47,5 @@ "use strict";
       onChange = props.onChange,
+      size = props.size,
       value = props.value,
-      other = (0, _objectWithoutProperties2.default)(props, ["children", "className", "classes", "exclusive", "onChange", "value"]);
+      other = (0, _objectWithoutProperties2.default)(props, ["children", "className", "classes", "exclusive", "onChange", "size", "value"]);
 
@@ -92,3 +93,4 @@ var handleChange = function handleChange(event, buttonValue) {
       selected: selected,
-      onChange: exclusive ? handleExclusiveChange : handleChange
+      onChange: exclusive ? handleExclusiveChange : handleChange,
+      size: size
     });
@@ -131,2 +133,7 @@ }));
   /**
+   * The size of the buttons.
+   */
+  size: _propTypes.default.oneOf(['small', 'medium', 'large']),
+
+  /**
    * The currently selected value within the group or an array of selected
@@ -138,3 +145,4 @@ * values when `exclusive` is false.
 ToggleButtonGroup.defaultProps = {
-  exclusive: false
+  exclusive: false,
+  size: 'medium'
 };
@@ -141,0 +149,0 @@

No alert changes

Improved metrics

Total package byte prevSize

608004

increased by0.32%

Lines of code

5236

increased by0.08%

Dependency changes

• Updated@material-ui/utils@^4.0.0-rc.0