@hig/flyout - npm Package Compare versions

Comparing version 0.8.1 to 1.0.0

build/index.es.js

@@ -507,3 +507,2 @@ import Transition, { ENTERED, ENTERING, EXITED, EXITING } from 'react-transition-group/Transition';
   var shadowColor = themeData ? getStyle(themeData, "flyout.shadowColor") : "transparent";
-  var densitySmall = themeData ? getStyle(themeData, "density.spacings.small") : 0;
 
@@ -546,3 +545,3 @@ return {
       maxHeight: "360px",
-      padding: densitySmall,
+      padding: "12px",
       overflowY: "auto",
@@ -713,9 +712,24 @@ msOverflowStyle: "-ms-autohiding-scrollbar"
 
+/**
+ * @param {import("../getCoordinates").Position} position
+ * @returns {import("react").CSSProperties}
+ */
+function positionToStyle(_ref) {
+  var top = _ref.top,
+      left = _ref.left;
+
+  return {
+    top: top + "px",
+    left: left + "px"
+  };
+}
+
 function FlyoutPresenter(props) {
   var anchorPoint = props.anchorPoint,
+      containerPosition = props.containerPosition,
       children = props.children,
       panel = props.panel,
       pointer = props.pointer,
+      pointerPosition = props.pointerPosition,
       refAction = props.refAction,
-      refPanelWrapper = props.refPanelWrapper,
       refPointer = props.refPointer,
@@ -726,7 +740,10 @@ refWrapper = props.refWrapper,
 
+  var containerStyle = positionToStyle(containerPosition);
+  var pointerStyle = positionToStyle(pointerPosition);
+
   return React.createElement(
     ThemeContext.Consumer,
     null,
-    function (_ref) {
-      var resolvedRoles = _ref.resolvedRoles;
+    function (_ref2) {
+      var resolvedRoles = _ref2.resolvedRoles;
 
@@ -745,3 +762,3 @@ var styles = stylesheet({ transitionStatus: transitionStatus, anchorPoint: anchorPoint }, resolvedRoles);
           "div",
-          { className: css(styles.flyoutContainer), ref: refPanelWrapper },
+          { className: css(styles.flyoutContainer), style: containerStyle },
           React.createElement(
@@ -751,3 +768,4 @@ PointerWrapperPresenter,
               innerRef: refPointer,
-              anchorPoint: anchorPoint
+              anchorPoint: anchorPoint,
+              style: pointerStyle
             },
@@ -765,3 +783,5 @@ pointer
   anchorPoint: DEFAULT_COORDINATES.anchorPoint,
+  containerPosition: DEFAULT_COORDINATES.containerPosition,
   pointer: React.createElement(PointerPresenter, null),
+  pointerPosition: DEFAULT_COORDINATES.pointerPosition,
   transitionStatus: transitionStatuses.EXITED
@@ -777,6 +797,14 @@ };
   pointer: PropTypes.node,
+  /** Top/Left position of the container relative to the action */
+  containerPosition: PropTypes.shape({
+    top: PropTypes.number,
+    left: PropTypes.number
+  }),
+  /** Top/Left position of the pointer relative to the action */
+  pointerPosition: PropTypes.shape({
+    top: PropTypes.number,
+    left: PropTypes.number
+  }),
   /** Reference the action element */
   refAction: PropTypes.func,
-  /** Reference the panel wrapper element */
-  refPanelWrapper: PropTypes.func,
   /** Reference the pointer element */
@@ -826,15 +854,50 @@ refPointer: PropTypes.func,
     },
-    "refAction": {
+    "containerPosition": {
       "type": {
-        "name": "func"
+        "name": "shape",
+        "value": {
+          "top": {
+            "name": "number",
+            "required": false
+          },
+          "left": {
+            "name": "number",
+            "required": false
+          }
+        }
       },
       "required": false,
-      "description": "Reference the action element"
+      "description": "Top/Left position of the container relative to the action",
+      "defaultValue": {
+        "value": "DEFAULT_COORDINATES.containerPosition",
+        "computed": true
+      }
     },
-    "refPanelWrapper": {
+    "pointerPosition": {
       "type": {
+        "name": "shape",
+        "value": {
+          "top": {
+            "name": "number",
+            "required": false
+          },
+          "left": {
+            "name": "number",
+            "required": false
+          }
+        }
+      },
+      "required": false,
+      "description": "Top/Left position of the pointer relative to the action",
+      "defaultValue": {
+        "value": "DEFAULT_COORDINATES.pointerPosition",
+        "computed": true
+      }
+    },
+    "refAction": {
+      "type": {
         "name": "func"
       },
       "required": false,
-      "description": "Reference the panel wrapper element"
+      "description": "Reference the action element"
     },
@@ -1193,4 +1256,2 @@ "refPointer": {
       _this.setState({ panelRef: panelRef });
-    }, _this.refPanelWrapper = function (panelWrapperRef) {
-      _this.setState({ panelWrapperRef: panelWrapperRef });
     }, _this.refWrapper = function (wrapperRef) {
@@ -1206,4 +1267,3 @@ _this.setState({ wrapperRef: wrapperRef });
           refPointer = _this2.refPointer,
-          refWrapper = _this2.refWrapper,
-          refPanelWrapper = _this2.refPanelWrapper;
+          refWrapper = _this2.refWrapper;
       var _this$props = _this.props,
@@ -1216,3 +1276,5 @@ openOnHoverDelay = _this$props.openOnHoverDelay,
       var _this$getCoordinates = _this.getCoordinates(),
-          anchorPoint = _this$getCoordinates.anchorPoint;
+          anchorPoint = _this$getCoordinates.anchorPoint,
+          containerPosition = _this$getCoordinates.containerPosition,
+          pointerPosition = _this$getCoordinates.pointerPosition;
 
@@ -1233,6 +1295,7 @@ return React.createElement(
               anchorPoint: anchorPoint,
+              containerPosition: containerPosition,
               panel: panel,
               pointer: pointer,
+              pointerPosition: pointerPosition,
               refAction: refAction,
-              refPanelWrapper: refPanelWrapper,
               refPointer: refPointer,
@@ -1258,22 +1321,2 @@ refWrapper: refWrapper,
   }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      var _this3 = this;
-
-      setTimeout(function () {
-        var _getCoordinates2 = _this3.getCoordinates(),
-            containerPosition = _getCoordinates2.containerPosition,
-            pointerPosition = _getCoordinates2.pointerPosition;
-
-        var _state = _this3.state,
-            panelWrapperRef = _state.panelWrapperRef,
-            pointerRef = _state.pointerRef;
-
-        panelWrapperRef.style.top = containerPosition.top + "px";
-        panelWrapperRef.style.left = containerPosition.left + "px";
-        pointerRef.style.top = pointerPosition.top + "px";
-        pointerRef.style.left = pointerPosition.left + "px";
-      }, 100);
-    }
-  }, {
     key: "componentWillUnmount",
@@ -1295,6 +1338,6 @@ value: function componentWillUnmount() {
           fallbackAnchorPoints = _props.fallbackAnchorPoints;
-      var _state2 = this.state,
-          actionRef = _state2.actionRef,
-          panelRef = _state2.panelRef,
-          pointerRef = _state2.pointerRef;
+      var _state = this.state,
+          actionRef = _state.actionRef,
+          panelRef = _state.panelRef,
+          pointerRef = _state.pointerRef;
 
@@ -1385,7 +1428,2 @@
     /**
-     * @param {HTMLElement} panelWrapperRef
-     */
-
-
-    /**
      * @param {HTMLDivElement} wrapperRef
@@ -1392,0 +1430,0 @@ */

build/index.js

@@ -515,3 +515,2 @@ 'use strict';
   var shadowColor = themeData ? getStyle(themeData, "flyout.shadowColor") : "transparent";
-  var densitySmall = themeData ? getStyle(themeData, "density.spacings.small") : 0;
 
@@ -554,3 +553,3 @@ return {
       maxHeight: "360px",
-      padding: densitySmall,
+      padding: "12px",
       overflowY: "auto",
@@ -721,9 +720,24 @@ msOverflowStyle: "-ms-autohiding-scrollbar"
 
+/**
+ * @param {import("../getCoordinates").Position} position
+ * @returns {import("react").CSSProperties}
+ */
+function positionToStyle(_ref) {
+  var top = _ref.top,
+      left = _ref.left;
+
+  return {
+    top: top + "px",
+    left: left + "px"
+  };
+}
+
 function FlyoutPresenter(props) {
   var anchorPoint = props.anchorPoint,
+      containerPosition = props.containerPosition,
       children = props.children,
       panel = props.panel,
       pointer = props.pointer,
+      pointerPosition = props.pointerPosition,
       refAction = props.refAction,
-      refPanelWrapper = props.refPanelWrapper,
       refPointer = props.refPointer,
@@ -734,7 +748,10 @@ refWrapper = props.refWrapper,
 
+  var containerStyle = positionToStyle(containerPosition);
+  var pointerStyle = positionToStyle(pointerPosition);
+
   return React__default.createElement(
     themeContext.ThemeContext.Consumer,
     null,
-    function (_ref) {
-      var resolvedRoles = _ref.resolvedRoles;
+    function (_ref2) {
+      var resolvedRoles = _ref2.resolvedRoles;
 
@@ -753,3 +770,3 @@ var styles = stylesheet({ transitionStatus: transitionStatus, anchorPoint: anchorPoint }, resolvedRoles);
           "div",
-          { className: emotion.css(styles.flyoutContainer), ref: refPanelWrapper },
+          { className: emotion.css(styles.flyoutContainer), style: containerStyle },
           React__default.createElement(
@@ -759,3 +776,4 @@ PointerWrapperPresenter,
               innerRef: refPointer,
-              anchorPoint: anchorPoint
+              anchorPoint: anchorPoint,
+              style: pointerStyle
             },
@@ -773,3 +791,5 @@ pointer
   anchorPoint: DEFAULT_COORDINATES.anchorPoint,
+  containerPosition: DEFAULT_COORDINATES.containerPosition,
   pointer: React__default.createElement(PointerPresenter, null),
+  pointerPosition: DEFAULT_COORDINATES.pointerPosition,
   transitionStatus: transitionStatuses.EXITED
@@ -785,6 +805,14 @@ };
   pointer: PropTypes.node,
+  /** Top/Left position of the container relative to the action */
+  containerPosition: PropTypes.shape({
+    top: PropTypes.number,
+    left: PropTypes.number
+  }),
+  /** Top/Left position of the pointer relative to the action */
+  pointerPosition: PropTypes.shape({
+    top: PropTypes.number,
+    left: PropTypes.number
+  }),
   /** Reference the action element */
   refAction: PropTypes.func,
-  /** Reference the panel wrapper element */
-  refPanelWrapper: PropTypes.func,
   /** Reference the pointer element */
@@ -834,15 +862,50 @@ refPointer: PropTypes.func,
     },
-    "refAction": {
+    "containerPosition": {
       "type": {
-        "name": "func"
+        "name": "shape",
+        "value": {
+          "top": {
+            "name": "number",
+            "required": false
+          },
+          "left": {
+            "name": "number",
+            "required": false
+          }
+        }
       },
       "required": false,
-      "description": "Reference the action element"
+      "description": "Top/Left position of the container relative to the action",
+      "defaultValue": {
+        "value": "DEFAULT_COORDINATES.containerPosition",
+        "computed": true
+      }
     },
-    "refPanelWrapper": {
+    "pointerPosition": {
       "type": {
+        "name": "shape",
+        "value": {
+          "top": {
+            "name": "number",
+            "required": false
+          },
+          "left": {
+            "name": "number",
+            "required": false
+          }
+        }
+      },
+      "required": false,
+      "description": "Top/Left position of the pointer relative to the action",
+      "defaultValue": {
+        "value": "DEFAULT_COORDINATES.pointerPosition",
+        "computed": true
+      }
+    },
+    "refAction": {
+      "type": {
         "name": "func"
       },
       "required": false,
-      "description": "Reference the panel wrapper element"
+      "description": "Reference the action element"
     },
@@ -1201,4 +1264,2 @@ "refPointer": {
       _this.setState({ panelRef: panelRef });
-    }, _this.refPanelWrapper = function (panelWrapperRef) {
-      _this.setState({ panelWrapperRef: panelWrapperRef });
     }, _this.refWrapper = function (wrapperRef) {
@@ -1214,4 +1275,3 @@ _this.setState({ wrapperRef: wrapperRef });
           refPointer = _this2.refPointer,
-          refWrapper = _this2.refWrapper,
-          refPanelWrapper = _this2.refPanelWrapper;
+          refWrapper = _this2.refWrapper;
       var _this$props = _this.props,
@@ -1224,3 +1284,5 @@ openOnHoverDelay = _this$props.openOnHoverDelay,
       var _this$getCoordinates = _this.getCoordinates(),
-          anchorPoint = _this$getCoordinates.anchorPoint;
+          anchorPoint = _this$getCoordinates.anchorPoint,
+          containerPosition = _this$getCoordinates.containerPosition,
+          pointerPosition = _this$getCoordinates.pointerPosition;
 
@@ -1241,6 +1303,7 @@ return React__default.createElement(
               anchorPoint: anchorPoint,
+              containerPosition: containerPosition,
               panel: panel,
               pointer: pointer,
+              pointerPosition: pointerPosition,
               refAction: refAction,
-              refPanelWrapper: refPanelWrapper,
               refPointer: refPointer,
@@ -1266,22 +1329,2 @@ refWrapper: refWrapper,
   }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      var _this3 = this;
-
-      setTimeout(function () {
-        var _getCoordinates2 = _this3.getCoordinates(),
-            containerPosition = _getCoordinates2.containerPosition,
-            pointerPosition = _getCoordinates2.pointerPosition;
-
-        var _state = _this3.state,
-            panelWrapperRef = _state.panelWrapperRef,
-            pointerRef = _state.pointerRef;
-
-        panelWrapperRef.style.top = containerPosition.top + "px";
-        panelWrapperRef.style.left = containerPosition.left + "px";
-        pointerRef.style.top = pointerPosition.top + "px";
-        pointerRef.style.left = pointerPosition.left + "px";
-      }, 100);
-    }
-  }, {
     key: "componentWillUnmount",
@@ -1303,6 +1346,6 @@ value: function componentWillUnmount() {
           fallbackAnchorPoints = _props.fallbackAnchorPoints;
-      var _state2 = this.state,
-          actionRef = _state2.actionRef,
-          panelRef = _state2.panelRef,
-          pointerRef = _state2.pointerRef;
+      var _state = this.state,
+          actionRef = _state.actionRef,
+          panelRef = _state.panelRef,
+          pointerRef = _state.pointerRef;
 
@@ -1393,7 +1436,2 @@
     /**
-     * @param {HTMLElement} panelWrapperRef
-     */
-
-
-    /**
      * @param {HTMLDivElement} wrapperRef
@@ -1400,0 +1438,0 @@ */

CHANGELOG.md

@@ -0,1 +1,13 @@
+# [@hig/flyout-v1.0.0](https://github.com/Autodesk/hig/compare/@hig/flyout@0.8.1...@hig/flyout@1.0.0) (2019-01-17)
+
+
+### Bug Fixes
+
+* remove padding based on density spacing ([335dc63](https://github.com/Autodesk/hig/commit/335dc63))
+
+
+### BREAKING CHANGES
+
+* The padding of the flyout container is 12px across all densities
+
 # [@hig/flyout-v0.8.1](https://github.com/Autodesk/hig/compare/@hig/flyout@0.8.0...@hig/flyout@0.8.1) (2019-01-09)
@@ -2,0 +14,0 @@

package.json

 {
   "name": "@hig/flyout",
-  "version": "0.8.1",
+  "version": "1.0.0",
   "description": "HIG Flyout",
@@ -5,0 +5,0 @@ "author": "Autodesk Inc.",

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

117154

increased by1.69%

Lines of code

3316

increased by2.47%

Number of low quality alerts

1

decreased by-50%

No dependency changes