@material-ui/lab - npm Package Compare versions

Comparing version 1.0.0-alpha.9 to 1.0.0-alpha.10

es/SpeedDial/SpeedDial.d.ts

@@ -14,2 +14,3 @@ import * as React from 'react';
   ButtonProps?: Partial<ButtonProps>;
+  direction?: 'up' | 'down' | 'left' | 'right';
   hidden?: boolean;
@@ -16,0 +17,0 @@ icon: React.ReactNode;

es/SpeedDial/SpeedDial.js

@@ -19,4 +19,2 @@ import _extends from "@babel/runtime/helpers/builtin/extends";
     display: 'flex',
-    flexDirection: 'column-reverse',
-    // Place the Actions above the FAB.
     pointerEvents: 'none'
@@ -30,7 +28,25 @@ },
 
+  /* Styles applied to the root and action container elements when direction="up" */
+  directionUp: {
+    flexDirection: 'column-reverse'
+  },
+
+  /* Styles applied to the root and action container elements when direction="down" */
+  directionDown: {
+    flexDirection: 'column'
+  },
+
+  /* Styles applied to the root and action container elements when direction="left" */
+  directionLeft: {
+    flexDirection: 'row-reverse'
+  },
+
+  /* Styles applied to the root and action container elements when direction="right" */
+  directionRight: {
+    flexDirection: 'row'
+  },
+
   /* Styles applied to the actions (`children` wrapper) element. */
   actions: {
     display: 'flex',
-    flexDirection: 'column-reverse',
-    // Display the first action at the bottom.
     paddingBottom: 16,
@@ -137,2 +153,3 @@ pointerEvents: 'auto'
       open,
+      direction,
       openIcon,
@@ -143,3 +160,3 @@ TransitionComponent,
     } = _props,
-          other = _objectWithoutProperties(_props, ["ariaLabel", "ButtonProps", "children", "classes", "className", "hidden", "icon", "onClick", "onClose", "onKeyDown", "open", "openIcon", "TransitionComponent", "transitionDuration", "TransitionProps"]); // Filter the label for valid id characters.
+          other = _objectWithoutProperties(_props, ["ariaLabel", "ButtonProps", "children", "classes", "className", "hidden", "icon", "onClick", "onClose", "onKeyDown", "open", "direction", "openIcon", "TransitionComponent", "transitionDuration", "TransitionProps"]); // Filter the label for valid id characters.
 
@@ -183,4 +200,10 @@
 
+    const actionsPlacementClass = {
+      [classes.directionUp]: direction === 'up',
+      [classes.directionDown]: direction === 'down',
+      [classes.directionLeft]: direction === 'left',
+      [classes.directionRight]: direction === 'right'
+    };
     return React.createElement("div", _extends({
-      className: classNames(classes.root, classNameProp)
+      className: classNames(classes.root, actionsPlacementClass, classNameProp)
     }, other), React.createElement(TransitionComponent, _extends({
@@ -207,3 +230,3 @@ "in": !hidden,
         [classes.actionsClosed]: !open
-      }),
+      }, actionsPlacementClass),
       ref: ref => {
@@ -246,2 +269,7 @@ this.actionsRef = ref;
   /**
+   * The direction the actions open relative to the floating action button.
+   */
+  direction: PropTypes.oneOf(['up', 'down', 'left', 'right']),
+
+  /**
    * If `true`, the SpeedDial will be hidden.
@@ -306,2 +334,3 @@ */
   hidden: false,
+  direction: 'top',
   TransitionComponent: Zoom,
@@ -308,0 +337,0 @@ transitionDuration: {

es/SpeedDialAction/SpeedDialAction.d.ts

@@ -11,2 +11,3 @@ import * as React from 'react';
   icon: React.ReactNode;
+  tooltipPlacement?: string;
   tooltipTitle?: React.ReactNode;
@@ -13,0 +14,0 @@ }

es/SpeedDialAction/SpeedDialAction.js

@@ -65,5 +65,6 @@ import _extends from "@babel/runtime/helpers/builtin/extends";
       open,
-      tooltipTitle
+      tooltipTitle,
+      tooltipPlacement
     } = _props,
-          other = _objectWithoutProperties(_props, ["ButtonProps", "classes", "className", "delay", "icon", "id", "onClick", "open", "tooltipTitle"]);
+          other = _objectWithoutProperties(_props, ["ButtonProps", "classes", "className", "delay", "icon", "id", "onClick", "open", "tooltipTitle", "tooltipPlacement"]);
 
@@ -74,3 +75,3 @@ return React.createElement(Tooltip, _extends({
       title: tooltipTitle,
-      placement: "left",
+      placement: tooltipPlacement,
       onClose: this.handleTooltipClose,
@@ -142,2 +143,7 @@ onOpen: this.handleTooltipOpen,
   /**
+   * Placement of the tooltip.
+   */
+  tooltipPlacement: PropTypes.string,
+
+  /**
    * Label to display in the tooltip.
@@ -149,3 +155,4 @@ */
   delay: 0,
-  open: false
+  open: false,
+  tooltipPlacement: 'left'
 };
@@ -152,0 +159,0 @@ export default withStyles(styles, {

index.es.js

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

index.js

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

package.json

@@ -5,3 +5,3 @@ {
   "author": "Material-UI Team",
-  "version": "1.0.0-alpha.9",
+  "version": "1.0.0-alpha.10",
   "description": "Material-UI Lab - Incubator for Material-UI React components.",
@@ -30,3 +30,5 @@ "main": "./index.js",
   },
-  "dependencies": {},
+  "dependencies": {
+    "@babel/runtime": "7.0.0-beta.42"
+  },
   "sideEffects": false,
@@ -33,0 +35,0 @@ "publishConfig": {

SpeedDial/SpeedDial.d.ts

@@ -14,2 +14,3 @@ import * as React from 'react';
   ButtonProps?: Partial<ButtonProps>;
+  direction?: 'up' | 'down' | 'left' | 'right';
   hidden?: boolean;
@@ -16,0 +17,0 @@ icon: React.ReactNode;

SpeedDial/SpeedDial.js

@@ -10,6 +10,6 @@ "use strict";
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/builtin/extends"));
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/builtin/defineProperty"));
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/builtin/extends"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/builtin/objectWithoutProperties"));
@@ -52,4 +52,2 @@
     display: 'flex',
-    flexDirection: 'column-reverse',
-    // Place the Actions above the FAB.
     pointerEvents: 'none'
@@ -63,7 +61,25 @@ },
 
+  /* Styles applied to the root and action container elements when direction="up" */
+  directionUp: {
+    flexDirection: 'column-reverse'
+  },
+
+  /* Styles applied to the root and action container elements when direction="down" */
+  directionDown: {
+    flexDirection: 'column'
+  },
+
+  /* Styles applied to the root and action container elements when direction="left" */
+  directionLeft: {
+    flexDirection: 'row-reverse'
+  },
+
+  /* Styles applied to the root and action container elements when direction="right" */
+  directionRight: {
+    flexDirection: 'row'
+  },
+
   /* Styles applied to the actions (`children` wrapper) element. */
   actions: {
     display: 'flex',
-    flexDirection: 'column-reverse',
-    // Display the first action at the bottom.
     paddingBottom: 16,
@@ -173,3 +189,4 @@ pointerEvents: 'auto'
     value: function render() {
-      var _this2 = this;
+      var _this2 = this,
+          _actionsPlacementClas;
 
@@ -188,2 +205,3 @@ var _props = this.props,
           open = _props.open,
+          direction = _props.direction,
           openIcon = _props.openIcon,
@@ -193,3 +211,3 @@ TransitionComponent = _props.TransitionComponent,
           TransitionProps = _props.TransitionProps,
-          other = (0, _objectWithoutProperties2.default)(_props, ["ariaLabel", "ButtonProps", "children", "classes", "className", "hidden", "icon", "onClick", "onClose", "onKeyDown", "open", "openIcon", "TransitionComponent", "transitionDuration", "TransitionProps"]); // Filter the label for valid id characters.
+          other = (0, _objectWithoutProperties2.default)(_props, ["ariaLabel", "ButtonProps", "children", "classes", "className", "hidden", "icon", "onClick", "onClose", "onKeyDown", "open", "direction", "openIcon", "TransitionComponent", "transitionDuration", "TransitionProps"]); // Filter the label for valid id characters.
 
@@ -235,4 +253,5 @@ var id = ariaLabel.replace(/^[^a-z]+|[^\w:.-]+/gi, '');
 
+      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);
       return _react.default.createElement("div", (0, _extends2.default)({
-        className: (0, _classnames.default)(classes.root, classNameProp)
+        className: (0, _classnames.default)(classes.root, actionsPlacementClass, classNameProp)
       }, other), _react.default.createElement(TransitionComponent, (0, _extends2.default)({
@@ -257,3 +276,3 @@ "in": !hidden,
         id: "".concat(id, "-actions"),
-        className: (0, _classnames.default)(classes.actions, (0, _defineProperty2.default)({}, classes.actionsClosed, !open)),
+        className: (0, _classnames.default)(classes.actions, (0, _defineProperty2.default)({}, classes.actionsClosed, !open), actionsPlacementClass),
         ref: function ref(_ref3) {
@@ -297,2 +316,7 @@ _this2.actionsRef = _ref3;
   /**
+   * The direction the actions open relative to the floating action button.
+   */
+  direction: _propTypes.default.oneOf(['up', 'down', 'left', 'right']),
+
+  /**
    * If `true`, the SpeedDial will be hidden.
@@ -357,2 +381,3 @@ */
   hidden: false,
+  direction: 'top',
   TransitionComponent: _Zoom.default,
@@ -359,0 +384,0 @@ transitionDuration: {

SpeedDialAction/SpeedDialAction.d.ts

@@ -11,2 +11,3 @@ import * as React from 'react';
   icon: React.ReactNode;
+  tooltipPlacement?: string;
   tooltipTitle?: React.ReactNode;
@@ -13,0 +14,0 @@ }

SpeedDialAction/SpeedDialAction.js

@@ -109,3 +109,4 @@ "use strict";
           tooltipTitle = _props.tooltipTitle,
-          other = (0, _objectWithoutProperties2.default)(_props, ["ButtonProps", "classes", "className", "delay", "icon", "id", "onClick", "open", "tooltipTitle"]);
+          tooltipPlacement = _props.tooltipPlacement,
+          other = (0, _objectWithoutProperties2.default)(_props, ["ButtonProps", "classes", "className", "delay", "icon", "id", "onClick", "open", "tooltipTitle", "tooltipPlacement"]);
       return _react.default.createElement(_Tooltip.default, (0, _extends2.default)({
@@ -115,3 +116,3 @@ id: id,
         title: tooltipTitle,
-        placement: "left",
+        placement: tooltipPlacement,
         onClose: this.handleTooltipClose,
@@ -184,2 +185,7 @@ onOpen: this.handleTooltipOpen,
   /**
+   * Placement of the tooltip.
+   */
+  tooltipPlacement: _propTypes.default.string,
+
+  /**
    * Label to display in the tooltip.
@@ -191,3 +197,4 @@ */
   delay: 0,
-  open: false
+  open: false,
+  tooltipPlacement: 'left'
 };
@@ -194,0 +201,0 @@

No alert changes

Improved metrics

Total package byte prevSize

117421

increased by2.33%

Lines of code

3336

increased by1.86%

Worsened metrics

Dependency count

4

increased by33.33%

Dependency changes

• + Added@babel/runtime@7.0.0-beta.42

• + Added@babel/runtime@7.0.0-beta.42(transitive)

• + Addedcore-js@2.6.12(transitive)

• + Addedregenerator-runtime@0.11.1(transitive)

• - Removed@babel/runtime@7.0.0-rc.1(transitive)

• - Removedregenerator-runtime@0.12.1(transitive)