@hig/flyout - npm Package Compare versions

Comparing version 0.4.1 to 0.5.0

build/index.es.js

@@ -179,2 +179,3 @@ import Transition, { ENTERED, ENTERING, EXITED, EXITING } from 'react-transition-group/Transition';
  * @property {DOMRect} panelRect
+ * @property {DOMRect} pointerRect
  * @property {DOMRect} viewportRect
@@ -196,4 +197,4 @@ */
 
-var CARET_SIZE = 14;
-var CARET_OVERLAP = 5;
+var ACTION_OVERLAP = 5;
+var POINTER_OVERLAP = 1;
 var TOP_LEFT = anchorPoints.TOP_LEFT,
@@ -237,3 +238,4 @@ TOP_CENTER = anchorPoints.TOP_CENTER,
       actionRect = _ref.actionRect,
-      panelRect = _ref.panelRect;
+      panelRect = _ref.panelRect,
+      pointerRect = _ref.pointerRect;
 
@@ -244,16 +246,16 @@ switch (anchorPoint) {
     case TOP_RIGHT:
-      return -CARET_OVERLAP;
+      return -1 * (pointerRect.height - (pointerRect.height / 2 + POINTER_OVERLAP));
     case BOTTOM_CENTER:
     case BOTTOM_LEFT:
     case BOTTOM_RIGHT:
-      return panelRect.height - CARET_SIZE + CARET_OVERLAP;
+      return panelRect.height - (pointerRect.height / 2 + POINTER_OVERLAP);
     case LEFT_BOTTOM:
     case RIGHT_BOTTOM:
-      return panelRect.height - (actionRect.height / 2 + CARET_SIZE / 2);
+      return panelRect.height - actionRect.height / 2 - pointerRect.height / 2;
     case LEFT_CENTER:
     case RIGHT_CENTER:
-      return panelRect.height / 2 - CARET_SIZE / 2;
+      return panelRect.height / 2 - pointerRect.height / 2;
     case LEFT_TOP:
     case RIGHT_TOP:
-      return actionRect.height / 2 - CARET_SIZE / 2;
+      return actionRect.height / 2 - pointerRect.height / 2;
     default:
@@ -271,3 +273,4 @@ return DEFAULT_COORDINATES.pointerPosition.top;
       actionRect = _ref2.actionRect,
-      panelRect = _ref2.panelRect;
+      panelRect = _ref2.panelRect,
+      pointerRect = _ref2.pointerRect;
 
@@ -278,16 +281,16 @@ switch (anchorPoint) {
     case LEFT_TOP:
-      return -CARET_OVERLAP;
+      return -1 * (pointerRect.width - (pointerRect.width / 2 + POINTER_OVERLAP));
     case RIGHT_BOTTOM:
     case RIGHT_CENTER:
     case RIGHT_TOP:
-      return panelRect.width - CARET_SIZE + CARET_OVERLAP;
+      return panelRect.width - (pointerRect.width / 2 + POINTER_OVERLAP);
     case TOP_CENTER:
     case BOTTOM_CENTER:
-      return panelRect.width / 2 - CARET_SIZE / 2;
+      return panelRect.width / 2 - pointerRect.width / 2;
     case TOP_LEFT:
     case BOTTOM_LEFT:
-      return actionRect.width / 2 - CARET_SIZE / 2;
+      return actionRect.width / 2 - pointerRect.width / 2;
     case TOP_RIGHT:
     case BOTTOM_RIGHT:
-      return panelRect.width - (actionRect.width / 2 + CARET_SIZE / 2);
+      return panelRect.width - (actionRect.width / 2 + pointerRect.width / 2);
     default:
@@ -305,3 +308,4 @@ return DEFAULT_COORDINATES.pointerPosition.left;
       actionRect = _ref3.actionRect,
-      panelRect = _ref3.panelRect;
+      panelRect = _ref3.panelRect,
+      pointerRect = _ref3.pointerRect;
 
@@ -312,7 +316,7 @@ switch (anchorPoint) {
     case TOP_RIGHT:
-      return actionRect.height + CARET_SIZE / 2;
+      return actionRect.height + pointerRect.height / 2 - ACTION_OVERLAP;
     case BOTTOM_LEFT:
     case BOTTOM_CENTER:
     case BOTTOM_RIGHT:
-      return -1 * panelRect.height - CARET_SIZE / 2;
+      return -1 * panelRect.height - pointerRect.height / 2 + ACTION_OVERLAP;
     case LEFT_TOP:
@@ -339,3 +343,4 @@ case RIGHT_TOP:
       actionRect = _ref4.actionRect,
-      panelRect = _ref4.panelRect;
+      panelRect = _ref4.panelRect,
+      pointerRect = _ref4.pointerRect;
 
@@ -346,7 +351,7 @@ switch (anchorPoint) {
     case LEFT_BOTTOM:
-      return actionRect.width + CARET_SIZE / 2;
+      return actionRect.width + pointerRect.width / 2 - ACTION_OVERLAP;
     case RIGHT_TOP:
     case RIGHT_CENTER:
     case RIGHT_BOTTOM:
-      return -1 * panelRect.width - CARET_SIZE / 2;
+      return -1 * panelRect.width - pointerRect.width / 2 + ACTION_OVERLAP;
     case TOP_LEFT:
@@ -357,3 +362,3 @@ case BOTTOM_LEFT:
     case BOTTOM_CENTER:
-      return (panelRect.width - actionRect.width) / -2;
+      return -1 * ((panelRect.width - actionRect.width) / 2);
     case TOP_RIGHT:
@@ -454,2 +459,148 @@ case BOTTOM_RIGHT:
 
+function PointerPresenter(props) {
+  var backgroundColor = props.backgroundColor,
+      borderColor = props.borderColor,
+      borderWidth = props.borderWidth,
+      size = props.size;
+
+  var height = size / 2;
+  var width = size;
+  var widthMidpoint = width / 2;
+
+  return React.createElement(
+    "svg",
+    {
+      height: size.toString(),
+      viewBox: "0 0 " + size + " " + size,
+      width: width.toString()
+    },
+    React.createElement("polygon", {
+      fill: borderColor,
+      points: ["0," + height, widthMidpoint + ",0", width + "," + height].join(" ")
+    }),
+    React.createElement("polygon", {
+      fill: backgroundColor,
+      points: [borderWidth + "," + height, widthMidpoint + "," + borderWidth, width - borderWidth + "," + height].join(" ")
+    })
+  );
+}
+
+PointerPresenter.defaultProps = {
+  /** @todo Reference "hig-white" from theme data */
+  backgroundColor: "#fff",
+  /** @todo Reference "hig-cool-gray-20" from theme data */
+  borderColor: "#d4dbe1",
+  borderWidth: 2.5,
+  size: 24
+};
+
+PointerPresenter.propTypes = {
+  backgroundColor: PropTypes.string,
+  borderColor: PropTypes.string,
+  borderWidth: PropTypes.number,
+  size: PropTypes.number
+};
+PointerPresenter.__docgenInfo = {
+  "description": "",
+  "displayName": "PointerPresenter",
+  "props": {
+    "backgroundColor": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "",
+      "defaultValue": {
+        "value": "\"#fff\"",
+        "computed": false
+      }
+    },
+    "borderColor": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "",
+      "defaultValue": {
+        "value": "\"#d4dbe1\"",
+        "computed": false
+      }
+    },
+    "borderWidth": {
+      "type": {
+        "name": "number"
+      },
+      "required": false,
+      "description": "",
+      "defaultValue": {
+        "value": "2.5",
+        "computed": false
+      }
+    },
+    "size": {
+      "type": {
+        "name": "number"
+      },
+      "required": false,
+      "description": "",
+      "defaultValue": {
+        "value": "24",
+        "computed": false
+      }
+    }
+  }
+};
+
+function PointerWrapperPresenter(_ref) {
+  var children = _ref.children,
+      innerRef = _ref.innerRef,
+      style = _ref.style;
+
+  return React.createElement(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: "hig__flyout-v1__pointer-wrapper",
+      ref: innerRef,
+      role: "presentation",
+      style: style
+    },
+    children
+  );
+}
+
+PointerWrapperPresenter.propTypes = {
+  children: PropTypes.node,
+  innerRef: PropTypes.func,
+  /* eslint-disable-next-line react/forbid-prop-types */
+  style: PropTypes.object
+};
+PointerWrapperPresenter.__docgenInfo = {
+  "description": "",
+  "displayName": "PointerWrapperPresenter",
+  "props": {
+    "children": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": ""
+    },
+    "innerRef": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": ""
+    },
+    "style": {
+      "type": {
+        "name": "object"
+      },
+      "required": false,
+      "description": ""
+    }
+  }
+};
+
 var _transitionStateToMod, _anchorPointToModifie;
@@ -482,5 +633,6 @@
       panel = props.panel,
+      pointer = props.pointer,
       pointerPosition = props.pointerPosition,
       refAction = props.refAction,
-      refContainer = props.refContainer,
+      refPointer = props.refPointer,
       refWrapper = props.refWrapper,
@@ -504,18 +656,8 @@ transitionStatus = props.transitionStatus;
       "div",
-      {
-        className: "hig__flyout-v1__container",
-        ref: refContainer,
-        style: containerStyle
-      },
-      React.createElement("div", {
-        "aria-hidden": "true",
-        className: "hig__flyout-v1__pointer",
-        role: "presentation",
-        style: pointerStyle
-      }),
-      React.createElement("div", {
-        className: "hig__flyout-v1__pointer-cover",
-        role: "presentation",
-        "aria-hidden": "true"
-      }),
+      { className: "hig__flyout-v1__container", style: containerStyle },
+      React.createElement(
+        PointerWrapperPresenter,
+        { innerRef: refPointer, style: pointerStyle },
+        pointer
+      ),
       panel
@@ -529,2 +671,3 @@ )
   containerPosition: DEFAULT_COORDINATES.containerPosition,
+  pointer: React.createElement(PointerPresenter, null),
   pointerPosition: DEFAULT_COORDINATES.pointerPosition,
@@ -539,2 +682,4 @@ transitionStatus: transitionStatuses.EXITED
   panel: PropTypes.node,
+  /** Pointer for the flyout */
+  pointer: PropTypes.node,
   /** Top position of the container relative to the action */
@@ -552,4 +697,4 @@ containerPosition: PropTypes.shape({
   refAction: PropTypes.func,
-  /** Reference the container element */
-  refContainer: PropTypes.func,
+  /** Reference the pointer element */
+  refPointer: PropTypes.func,
   /** Reference the wrapper element */
@@ -586,2 +731,13 @@ refWrapper: PropTypes.func,
     },
+    "pointer": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": "Pointer for the flyout",
+      "defaultValue": {
+        "value": "<PointerPresenter />",
+        "computed": false
+      }
+    },
     "containerPosition": {
@@ -636,3 +792,3 @@ "type": {
     },
-    "refContainer": {
+    "refPointer": {
       "type": {
@@ -642,3 +798,3 @@ "name": "func"
       "required": false,
-      "description": "Reference the container element"
+      "description": "Reference the pointer element"
     },
@@ -791,5 +947,5 @@ "refWrapper": {
  * @property {HTMLElement} [actionRef]
- * @property {HTMLDivElement} [containerRef]
  * @property {boolean} open Used to direct the flyout's transition behavior
  * @property {HTMLElement} [panelRef]
+ * @property {SVGSVGElement} [pointerRef]
  * @property {HTMLDivElement} [wrapperRef]
@@ -813,7 +969,3 @@ */
     return _ret = (_temp = (_this = _possibleConstructorReturn$1(this, (_ref = Flyout.__proto__ || Object.getPrototypeOf(Flyout)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-      actionRef: undefined,
-      containerRef: undefined,
-      open: false,
-      panelRef: undefined,
-      wrapperRef: undefined
+      open: _this.props.defaultOpen
     }, _this.handleChildClick = function () {
@@ -834,4 +986,4 @@ if (!_this.isOpenControlled()) {
       _this.setState({ actionRef: actionRef });
-    }, _this.refContainer = function (containerRef) {
-      _this.setState({ containerRef: containerRef });
+    }, _this.refPointer = function (pointerRef) {
+      _this.setState({ pointerRef: pointerRef });
     }, _this.refPanel = function (panelRef) {
@@ -845,5 +997,6 @@ _this.setState({ panelRef: panelRef });
       var _this2 = _this,
-          refContainer = _this2.refContainer,
           refAction = _this2.refAction,
+          refPointer = _this2.refPointer,
           refWrapper = _this2.refWrapper;
+      var pointer = _this.props.pointer;
 
@@ -863,5 +1016,6 @@ var panel = _this.renderPanel();
           panel: panel,
+          pointer: pointer,
           pointerPosition: pointerPosition,
           refAction: refAction,
-          refContainer: refContainer,
+          refPointer: refPointer,
           refWrapper: refWrapper,
@@ -902,6 +1056,7 @@ transitionStatus: transitionStatus
           actionRef = _state.actionRef,
-          panelRef = _state.panelRef;
+          panelRef = _state.panelRef,
+          pointerRef = _state.pointerRef;
 
 
-      if (!actionRef || !panelRef || typeof window === "undefined") {
+      if (!actionRef || !panelRef || !pointerRef || typeof window === "undefined") {
         return DEFAULT_COORDINATES;
@@ -912,2 +1067,3 @@ }
       var panelRect = panelRef.getBoundingClientRect();
+      var pointerRect = pointerRef.getBoundingClientRect();
       var viewportRect = window.document.documentElement.getBoundingClientRect();
@@ -919,2 +1075,3 @@ var coordinates = getCoordinates({
         panelRect: panelRect,
+        pointerRect: pointerRect,
         viewportRect: viewportRect
@@ -927,2 +1084,3 @@ });
           panelRect: panelRect,
+          pointerRect: pointerRect,
           viewportRect: viewportRect
@@ -979,3 +1137,3 @@ };
     /**
-     * @param {HTMLDivElement} containerRef
+     * @param {SVGSVGElement} pointerRef
      */
@@ -1085,2 +1243,4 @@
   content: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  /** Default uncontrolled open state */
+  defaultOpen: PropTypes.bool,
   /**
@@ -1094,2 +1254,4 @@ * When the flyout overflows the viewport, it'll attempt to
   panel: PropTypes.func,
+  /** A custom pointer */
+  pointer: PropTypes.node,
   /** Max height of the flyout content, in pixels */
@@ -1110,2 +1272,3 @@ maxHeight: PropTypes.number,
   anchorPoint: DEFAULT_COORDINATES.anchorPoint,
+  defaultOpen: false,
   fallbackAnchorPoints: AVAILABLE_ANCHOR_POINTS,
@@ -1133,3 +1296,3 @@ /**
 Flyout.__docgenInfo = {
-  "description": "@typedef {Object} State\n@property {HTMLElement} [actionRef]\n@property {HTMLDivElement} [containerRef]\n@property {boolean} open Used to direct the flyout's transition behavior\n@property {HTMLElement} [panelRef]\n@property {HTMLDivElement} [wrapperRef]",
+  "description": "@typedef {Object} State\n@property {HTMLElement} [actionRef]\n@property {boolean} open Used to direct the flyout's transition behavior\n@property {HTMLElement} [panelRef]\n@property {SVGSVGElement} [pointerRef]\n@property {HTMLDivElement} [wrapperRef]",
   "displayName": "Flyout",
@@ -1181,2 +1344,13 @@ "props": {
     },
+    "defaultOpen": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Default uncontrolled open state",
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      }
+    },
     "fallbackAnchorPoints": {
@@ -1209,2 +1383,9 @@ "type": {
     },
+    "pointer": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": "A custom pointer"
+    },
     "maxHeight": {
@@ -1257,6 +1438,14 @@ "type": {
 
+function _defineProperty$1(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; }
+
 /** @typedef {import("./getCoordinates").Coordinates} Coordinates */
 
+var offsetProperties = {
+  TOP: "top",
+  LEFT: "left"
+};
+
 /**
- * Vertically offsets the container
+ * Offsets the container
+ * @param {string} offsetProperty
  * @param {Coordinates} coordinates
@@ -1266,7 +1455,5 @@ * @param {number} diff
  */
-function offsetContainerVertical(coordinates, diff) {
+function offsetContainerProperty(offsetProperty, coordinates, diff) {
   return _extends$1({}, coordinates, {
-    containerPosition: _extends$1({}, coordinates.containerPosition, {
-      top: coordinates.containerPosition.top + diff
-    })
+    containerPosition: _extends$1({}, coordinates.containerPosition, _defineProperty$1({}, offsetProperty, coordinates.containerPosition[offsetProperty] + diff))
   });
@@ -1276,2 +1463,22 @@ }
 /**
+ * Vertically offsets the container
+ * @param {Coordinates} coordinates
+ * @param {number} diff
+ * @returns {Coordinates}
+ */
+function offsetContainerVertical(coordinates, diff) {
+  return offsetContainerProperty(offsetProperties.TOP, coordinates, diff);
+}
+
+/**
+ * Horizontally offsets the container
+ * @param {Coordinates} coordinates
+ * @param {number} diff
+ * @returns {Coordinates}
+ */
+function offsetContainerHorizontal(coordinates, diff) {
+  return offsetContainerProperty(offsetProperties.LEFT, coordinates, diff);
+}
+
+/**
  * Horizontally offsets the panel while maintaining the equivalent pointer position
@@ -1293,5 +1500,37 @@ * @param {Coordinates} coordinates
 
+/**
+ * Moves the container away from the target relative the given the anchor point
+ * @param {Coordinates} coordinates
+ * @param {number} diff
+ * @returns {Coordinates}
+ */
+function dislocateContainer(coordinates, diff) {
+  var anchorPoint = coordinates.anchorPoint;
+
+
+  switch (anchorPoint) {
+    case anchorPoints.TOP_CENTER:
+    case anchorPoints.TOP_LEFT:
+    case anchorPoints.TOP_RIGHT:
+      return offsetContainerVertical(coordinates, diff);
+    case anchorPoints.BOTTOM_CENTER:
+    case anchorPoints.BOTTOM_LEFT:
+    case anchorPoints.BOTTOM_RIGHT:
+      return offsetContainerVertical(coordinates, -1 * diff);
+    case anchorPoints.LEFT_BOTTOM:
+    case anchorPoints.LEFT_CENTER:
+    case anchorPoints.LEFT_TOP:
+      return offsetContainerHorizontal(coordinates, diff);
+    case anchorPoints.RIGHT_BOTTOM:
+    case anchorPoints.RIGHT_CENTER:
+    case anchorPoints.RIGHT_TOP:
+      return offsetContainerHorizontal(coordinates, -1 * diff);
+    default:
+      return coordinates;
+  }
+}
+
 Flyout.Panel = PanelContainerPresenter;
 
 export default Flyout;
-export { PanelContainerPresenter as Panel, anchorPoints, AVAILABLE_ANCHOR_POINTS, AVAILABLE_ANCHOR_POINTS as availableAnchorPoints, offsetContainerVertical, offsetPanelHorizontal };
+export { PanelContainerPresenter as Panel, anchorPoints, AVAILABLE_ANCHOR_POINTS, AVAILABLE_ANCHOR_POINTS as availableAnchorPoints, dislocateContainer, offsetContainerHorizontal, offsetContainerVertical, offsetPanelHorizontal, PointerPresenter as Pointer };

build/index.js

@@ -187,2 +187,3 @@ 'use strict';
  * @property {DOMRect} panelRect
+ * @property {DOMRect} pointerRect
  * @property {DOMRect} viewportRect
@@ -204,4 +205,4 @@ */
 
-var CARET_SIZE = 14;
-var CARET_OVERLAP = 5;
+var ACTION_OVERLAP = 5;
+var POINTER_OVERLAP = 1;
 var TOP_LEFT = anchorPoints.TOP_LEFT,
@@ -245,3 +246,4 @@ TOP_CENTER = anchorPoints.TOP_CENTER,
       actionRect = _ref.actionRect,
-      panelRect = _ref.panelRect;
+      panelRect = _ref.panelRect,
+      pointerRect = _ref.pointerRect;
 
@@ -252,16 +254,16 @@ switch (anchorPoint) {
     case TOP_RIGHT:
-      return -CARET_OVERLAP;
+      return -1 * (pointerRect.height - (pointerRect.height / 2 + POINTER_OVERLAP));
     case BOTTOM_CENTER:
     case BOTTOM_LEFT:
     case BOTTOM_RIGHT:
-      return panelRect.height - CARET_SIZE + CARET_OVERLAP;
+      return panelRect.height - (pointerRect.height / 2 + POINTER_OVERLAP);
     case LEFT_BOTTOM:
     case RIGHT_BOTTOM:
-      return panelRect.height - (actionRect.height / 2 + CARET_SIZE / 2);
+      return panelRect.height - actionRect.height / 2 - pointerRect.height / 2;
     case LEFT_CENTER:
     case RIGHT_CENTER:
-      return panelRect.height / 2 - CARET_SIZE / 2;
+      return panelRect.height / 2 - pointerRect.height / 2;
     case LEFT_TOP:
     case RIGHT_TOP:
-      return actionRect.height / 2 - CARET_SIZE / 2;
+      return actionRect.height / 2 - pointerRect.height / 2;
     default:
@@ -279,3 +281,4 @@ return DEFAULT_COORDINATES.pointerPosition.top;
       actionRect = _ref2.actionRect,
-      panelRect = _ref2.panelRect;
+      panelRect = _ref2.panelRect,
+      pointerRect = _ref2.pointerRect;
 
@@ -286,16 +289,16 @@ switch (anchorPoint) {
     case LEFT_TOP:
-      return -CARET_OVERLAP;
+      return -1 * (pointerRect.width - (pointerRect.width / 2 + POINTER_OVERLAP));
     case RIGHT_BOTTOM:
     case RIGHT_CENTER:
     case RIGHT_TOP:
-      return panelRect.width - CARET_SIZE + CARET_OVERLAP;
+      return panelRect.width - (pointerRect.width / 2 + POINTER_OVERLAP);
     case TOP_CENTER:
     case BOTTOM_CENTER:
-      return panelRect.width / 2 - CARET_SIZE / 2;
+      return panelRect.width / 2 - pointerRect.width / 2;
     case TOP_LEFT:
     case BOTTOM_LEFT:
-      return actionRect.width / 2 - CARET_SIZE / 2;
+      return actionRect.width / 2 - pointerRect.width / 2;
     case TOP_RIGHT:
     case BOTTOM_RIGHT:
-      return panelRect.width - (actionRect.width / 2 + CARET_SIZE / 2);
+      return panelRect.width - (actionRect.width / 2 + pointerRect.width / 2);
     default:
@@ -313,3 +316,4 @@ return DEFAULT_COORDINATES.pointerPosition.left;
       actionRect = _ref3.actionRect,
-      panelRect = _ref3.panelRect;
+      panelRect = _ref3.panelRect,
+      pointerRect = _ref3.pointerRect;
 
@@ -320,7 +324,7 @@ switch (anchorPoint) {
     case TOP_RIGHT:
-      return actionRect.height + CARET_SIZE / 2;
+      return actionRect.height + pointerRect.height / 2 - ACTION_OVERLAP;
     case BOTTOM_LEFT:
     case BOTTOM_CENTER:
     case BOTTOM_RIGHT:
-      return -1 * panelRect.height - CARET_SIZE / 2;
+      return -1 * panelRect.height - pointerRect.height / 2 + ACTION_OVERLAP;
     case LEFT_TOP:
@@ -347,3 +351,4 @@ case RIGHT_TOP:
       actionRect = _ref4.actionRect,
-      panelRect = _ref4.panelRect;
+      panelRect = _ref4.panelRect,
+      pointerRect = _ref4.pointerRect;
 
@@ -354,7 +359,7 @@ switch (anchorPoint) {
     case LEFT_BOTTOM:
-      return actionRect.width + CARET_SIZE / 2;
+      return actionRect.width + pointerRect.width / 2 - ACTION_OVERLAP;
     case RIGHT_TOP:
     case RIGHT_CENTER:
     case RIGHT_BOTTOM:
-      return -1 * panelRect.width - CARET_SIZE / 2;
+      return -1 * panelRect.width - pointerRect.width / 2 + ACTION_OVERLAP;
     case TOP_LEFT:
@@ -365,3 +370,3 @@ case BOTTOM_LEFT:
     case BOTTOM_CENTER:
-      return (panelRect.width - actionRect.width) / -2;
+      return -1 * ((panelRect.width - actionRect.width) / 2);
     case TOP_RIGHT:
@@ -462,2 +467,148 @@ case BOTTOM_RIGHT:
 
+function PointerPresenter(props) {
+  var backgroundColor = props.backgroundColor,
+      borderColor = props.borderColor,
+      borderWidth = props.borderWidth,
+      size = props.size;
+
+  var height = size / 2;
+  var width = size;
+  var widthMidpoint = width / 2;
+
+  return React__default.createElement(
+    "svg",
+    {
+      height: size.toString(),
+      viewBox: "0 0 " + size + " " + size,
+      width: width.toString()
+    },
+    React__default.createElement("polygon", {
+      fill: borderColor,
+      points: ["0," + height, widthMidpoint + ",0", width + "," + height].join(" ")
+    }),
+    React__default.createElement("polygon", {
+      fill: backgroundColor,
+      points: [borderWidth + "," + height, widthMidpoint + "," + borderWidth, width - borderWidth + "," + height].join(" ")
+    })
+  );
+}
+
+PointerPresenter.defaultProps = {
+  /** @todo Reference "hig-white" from theme data */
+  backgroundColor: "#fff",
+  /** @todo Reference "hig-cool-gray-20" from theme data */
+  borderColor: "#d4dbe1",
+  borderWidth: 2.5,
+  size: 24
+};
+
+PointerPresenter.propTypes = {
+  backgroundColor: PropTypes.string,
+  borderColor: PropTypes.string,
+  borderWidth: PropTypes.number,
+  size: PropTypes.number
+};
+PointerPresenter.__docgenInfo = {
+  "description": "",
+  "displayName": "PointerPresenter",
+  "props": {
+    "backgroundColor": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "",
+      "defaultValue": {
+        "value": "\"#fff\"",
+        "computed": false
+      }
+    },
+    "borderColor": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "",
+      "defaultValue": {
+        "value": "\"#d4dbe1\"",
+        "computed": false
+      }
+    },
+    "borderWidth": {
+      "type": {
+        "name": "number"
+      },
+      "required": false,
+      "description": "",
+      "defaultValue": {
+        "value": "2.5",
+        "computed": false
+      }
+    },
+    "size": {
+      "type": {
+        "name": "number"
+      },
+      "required": false,
+      "description": "",
+      "defaultValue": {
+        "value": "24",
+        "computed": false
+      }
+    }
+  }
+};
+
+function PointerWrapperPresenter(_ref) {
+  var children = _ref.children,
+      innerRef = _ref.innerRef,
+      style = _ref.style;
+
+  return React__default.createElement(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: "hig__flyout-v1__pointer-wrapper",
+      ref: innerRef,
+      role: "presentation",
+      style: style
+    },
+    children
+  );
+}
+
+PointerWrapperPresenter.propTypes = {
+  children: PropTypes.node,
+  innerRef: PropTypes.func,
+  /* eslint-disable-next-line react/forbid-prop-types */
+  style: PropTypes.object
+};
+PointerWrapperPresenter.__docgenInfo = {
+  "description": "",
+  "displayName": "PointerWrapperPresenter",
+  "props": {
+    "children": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": ""
+    },
+    "innerRef": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": ""
+    },
+    "style": {
+      "type": {
+        "name": "object"
+      },
+      "required": false,
+      "description": ""
+    }
+  }
+};
+
 var _transitionStateToMod, _anchorPointToModifie;
@@ -490,5 +641,6 @@
       panel = props.panel,
+      pointer = props.pointer,
       pointerPosition = props.pointerPosition,
       refAction = props.refAction,
-      refContainer = props.refContainer,
+      refPointer = props.refPointer,
       refWrapper = props.refWrapper,
@@ -512,18 +664,8 @@ transitionStatus = props.transitionStatus;
       "div",
-      {
-        className: "hig__flyout-v1__container",
-        ref: refContainer,
-        style: containerStyle
-      },
-      React__default.createElement("div", {
-        "aria-hidden": "true",
-        className: "hig__flyout-v1__pointer",
-        role: "presentation",
-        style: pointerStyle
-      }),
-      React__default.createElement("div", {
-        className: "hig__flyout-v1__pointer-cover",
-        role: "presentation",
-        "aria-hidden": "true"
-      }),
+      { className: "hig__flyout-v1__container", style: containerStyle },
+      React__default.createElement(
+        PointerWrapperPresenter,
+        { innerRef: refPointer, style: pointerStyle },
+        pointer
+      ),
       panel
@@ -537,2 +679,3 @@ )
   containerPosition: DEFAULT_COORDINATES.containerPosition,
+  pointer: React__default.createElement(PointerPresenter, null),
   pointerPosition: DEFAULT_COORDINATES.pointerPosition,
@@ -547,2 +690,4 @@ transitionStatus: transitionStatuses.EXITED
   panel: PropTypes.node,
+  /** Pointer for the flyout */
+  pointer: PropTypes.node,
   /** Top position of the container relative to the action */
@@ -560,4 +705,4 @@ containerPosition: PropTypes.shape({
   refAction: PropTypes.func,
-  /** Reference the container element */
-  refContainer: PropTypes.func,
+  /** Reference the pointer element */
+  refPointer: PropTypes.func,
   /** Reference the wrapper element */
@@ -594,2 +739,13 @@ refWrapper: PropTypes.func,
     },
+    "pointer": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": "Pointer for the flyout",
+      "defaultValue": {
+        "value": "<PointerPresenter />",
+        "computed": false
+      }
+    },
     "containerPosition": {
@@ -644,3 +800,3 @@ "type": {
     },
-    "refContainer": {
+    "refPointer": {
       "type": {
@@ -650,3 +806,3 @@ "name": "func"
       "required": false,
-      "description": "Reference the container element"
+      "description": "Reference the pointer element"
     },
@@ -799,5 +955,5 @@ "refWrapper": {
  * @property {HTMLElement} [actionRef]
- * @property {HTMLDivElement} [containerRef]
  * @property {boolean} open Used to direct the flyout's transition behavior
  * @property {HTMLElement} [panelRef]
+ * @property {SVGSVGElement} [pointerRef]
  * @property {HTMLDivElement} [wrapperRef]
@@ -821,7 +977,3 @@ */
     return _ret = (_temp = (_this = _possibleConstructorReturn$1(this, (_ref = Flyout.__proto__ || Object.getPrototypeOf(Flyout)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-      actionRef: undefined,
-      containerRef: undefined,
-      open: false,
-      panelRef: undefined,
-      wrapperRef: undefined
+      open: _this.props.defaultOpen
     }, _this.handleChildClick = function () {
@@ -842,4 +994,4 @@ if (!_this.isOpenControlled()) {
       _this.setState({ actionRef: actionRef });
-    }, _this.refContainer = function (containerRef) {
-      _this.setState({ containerRef: containerRef });
+    }, _this.refPointer = function (pointerRef) {
+      _this.setState({ pointerRef: pointerRef });
     }, _this.refPanel = function (panelRef) {
@@ -853,5 +1005,6 @@ _this.setState({ panelRef: panelRef });
       var _this2 = _this,
-          refContainer = _this2.refContainer,
           refAction = _this2.refAction,
+          refPointer = _this2.refPointer,
           refWrapper = _this2.refWrapper;
+      var pointer = _this.props.pointer;
 
@@ -871,5 +1024,6 @@ var panel = _this.renderPanel();
           panel: panel,
+          pointer: pointer,
           pointerPosition: pointerPosition,
           refAction: refAction,
-          refContainer: refContainer,
+          refPointer: refPointer,
           refWrapper: refWrapper,
@@ -910,6 +1064,7 @@ transitionStatus: transitionStatus
           actionRef = _state.actionRef,
-          panelRef = _state.panelRef;
+          panelRef = _state.panelRef,
+          pointerRef = _state.pointerRef;
 
 
-      if (!actionRef || !panelRef || typeof window === "undefined") {
+      if (!actionRef || !panelRef || !pointerRef || typeof window === "undefined") {
         return DEFAULT_COORDINATES;
@@ -920,2 +1075,3 @@ }
       var panelRect = panelRef.getBoundingClientRect();
+      var pointerRect = pointerRef.getBoundingClientRect();
       var viewportRect = window.document.documentElement.getBoundingClientRect();
@@ -927,2 +1083,3 @@ var coordinates = getCoordinates({
         panelRect: panelRect,
+        pointerRect: pointerRect,
         viewportRect: viewportRect
@@ -935,2 +1092,3 @@ });
           panelRect: panelRect,
+          pointerRect: pointerRect,
           viewportRect: viewportRect
@@ -987,3 +1145,3 @@ };
     /**
-     * @param {HTMLDivElement} containerRef
+     * @param {SVGSVGElement} pointerRef
      */
@@ -1093,2 +1251,4 @@
   content: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  /** Default uncontrolled open state */
+  defaultOpen: PropTypes.bool,
   /**
@@ -1102,2 +1262,4 @@ * When the flyout overflows the viewport, it'll attempt to
   panel: PropTypes.func,
+  /** A custom pointer */
+  pointer: PropTypes.node,
   /** Max height of the flyout content, in pixels */
@@ -1118,2 +1280,3 @@ maxHeight: PropTypes.number,
   anchorPoint: DEFAULT_COORDINATES.anchorPoint,
+  defaultOpen: false,
   fallbackAnchorPoints: AVAILABLE_ANCHOR_POINTS,
@@ -1141,3 +1304,3 @@ /**
 Flyout.__docgenInfo = {
-  "description": "@typedef {Object} State\n@property {HTMLElement} [actionRef]\n@property {HTMLDivElement} [containerRef]\n@property {boolean} open Used to direct the flyout's transition behavior\n@property {HTMLElement} [panelRef]\n@property {HTMLDivElement} [wrapperRef]",
+  "description": "@typedef {Object} State\n@property {HTMLElement} [actionRef]\n@property {boolean} open Used to direct the flyout's transition behavior\n@property {HTMLElement} [panelRef]\n@property {SVGSVGElement} [pointerRef]\n@property {HTMLDivElement} [wrapperRef]",
   "displayName": "Flyout",
@@ -1189,2 +1352,13 @@ "props": {
     },
+    "defaultOpen": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Default uncontrolled open state",
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      }
+    },
     "fallbackAnchorPoints": {
@@ -1217,2 +1391,9 @@ "type": {
     },
+    "pointer": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": "A custom pointer"
+    },
     "maxHeight": {
@@ -1265,6 +1446,14 @@ "type": {
 
+function _defineProperty$1(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; }
+
 /** @typedef {import("./getCoordinates").Coordinates} Coordinates */
 
+var offsetProperties = {
+  TOP: "top",
+  LEFT: "left"
+};
+
 /**
- * Vertically offsets the container
+ * Offsets the container
+ * @param {string} offsetProperty
  * @param {Coordinates} coordinates
@@ -1274,7 +1463,5 @@ * @param {number} diff
  */
-function offsetContainerVertical(coordinates, diff) {
+function offsetContainerProperty(offsetProperty, coordinates, diff) {
   return _extends$1({}, coordinates, {
-    containerPosition: _extends$1({}, coordinates.containerPosition, {
-      top: coordinates.containerPosition.top + diff
-    })
+    containerPosition: _extends$1({}, coordinates.containerPosition, _defineProperty$1({}, offsetProperty, coordinates.containerPosition[offsetProperty] + diff))
   });
@@ -1284,2 +1471,22 @@ }
 /**
+ * Vertically offsets the container
+ * @param {Coordinates} coordinates
+ * @param {number} diff
+ * @returns {Coordinates}
+ */
+function offsetContainerVertical(coordinates, diff) {
+  return offsetContainerProperty(offsetProperties.TOP, coordinates, diff);
+}
+
+/**
+ * Horizontally offsets the container
+ * @param {Coordinates} coordinates
+ * @param {number} diff
+ * @returns {Coordinates}
+ */
+function offsetContainerHorizontal(coordinates, diff) {
+  return offsetContainerProperty(offsetProperties.LEFT, coordinates, diff);
+}
+
+/**
  * Horizontally offsets the panel while maintaining the equivalent pointer position
@@ -1301,2 +1508,34 @@ * @param {Coordinates} coordinates
 
+/**
+ * Moves the container away from the target relative the given the anchor point
+ * @param {Coordinates} coordinates
+ * @param {number} diff
+ * @returns {Coordinates}
+ */
+function dislocateContainer(coordinates, diff) {
+  var anchorPoint = coordinates.anchorPoint;
+
+
+  switch (anchorPoint) {
+    case anchorPoints.TOP_CENTER:
+    case anchorPoints.TOP_LEFT:
+    case anchorPoints.TOP_RIGHT:
+      return offsetContainerVertical(coordinates, diff);
+    case anchorPoints.BOTTOM_CENTER:
+    case anchorPoints.BOTTOM_LEFT:
+    case anchorPoints.BOTTOM_RIGHT:
+      return offsetContainerVertical(coordinates, -1 * diff);
+    case anchorPoints.LEFT_BOTTOM:
+    case anchorPoints.LEFT_CENTER:
+    case anchorPoints.LEFT_TOP:
+      return offsetContainerHorizontal(coordinates, diff);
+    case anchorPoints.RIGHT_BOTTOM:
+    case anchorPoints.RIGHT_CENTER:
+    case anchorPoints.RIGHT_TOP:
+      return offsetContainerHorizontal(coordinates, -1 * diff);
+    default:
+      return coordinates;
+  }
+}
+
 Flyout.Panel = PanelContainerPresenter;
@@ -1309,3 +1548,6 @@
 exports.availableAnchorPoints = AVAILABLE_ANCHOR_POINTS;
+exports.dislocateContainer = dislocateContainer;
+exports.offsetContainerHorizontal = offsetContainerHorizontal;
 exports.offsetContainerVertical = offsetContainerVertical;
 exports.offsetPanelHorizontal = offsetPanelHorizontal;
+exports.Pointer = PointerPresenter;

CHANGELOG.md

@@ -0,1 +1,11 @@
+# [@hig/flyout-v0.5.0](https://github.com/Autodesk/hig/compare/@hig/flyout@0.4.1...@hig/flyout@0.5.0) (2018-09-11)
+
+
+### Features
+
+* Add onMouseEnter and onMouseLeave events to Button for more control of custom hover events ([a2b2cc1](https://github.com/Autodesk/hig/commit/a2b2cc1))
+* **behavior:** add `defaultOpen` prop to support uncontrolled flyout's that are open by default ([7a4e91c](https://github.com/Autodesk/hig/commit/7a4e91c))
+* **behavior:** add `dislocateContainer` and `offsetContainerHorizontal` helpers ([97afdc2](https://github.com/Autodesk/hig/commit/97afdc2))
+* **presentation:** add support for rendering custom pointers ([d6e6c92](https://github.com/Autodesk/hig/commit/d6e6c92))
+
 # [@hig/flyout-v0.4.1](https://github.com/Autodesk/hig/compare/@hig/flyout@0.4.0...@hig/flyout@0.4.1) (2018-09-06)
@@ -2,0 +12,0 @@

package.json

 {
   "name": "@hig/flyout",
-  "version": "0.4.1",
+  "version": "0.5.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

Improved metrics

Total package byte prevSize

104555

increased by11.64%

Lines of code

2861

increased by14.81%

No dependency changes