@hig/flyout - npm Package Compare versions

Comparing version 0.6.0 to 0.7.0

build/index.es.js

 import Transition, { ENTERED, ENTERING, EXITED, EXITING } from 'react-transition-group/Transition';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import { css } from 'emotion';
+import { ThemeContext } from '@hig/theme-context';
 
@@ -448,6 +449,118 @@ var anchorPoints = Object.freeze({
 
+function getStyle(themeData, role) {
+  return themeData[role];
+}
+
+function getAnchorPointTransformTranslate(anchorPoint) {
+  switch (anchorPoint) {
+    case "top-left":
+    case "top-center":
+    case "top-right":
+      return "translateY(-4px)";
+    case "right-top":
+    case "right-center":
+    case "right-bottom":
+      return "translateX(4px)";
+    case "bottom-left":
+    case "bottom-center":
+    case "bottom-right":
+      return "translateY(4px)";
+    case "left-top":
+    case "left-center":
+    case "left-bottom":
+      return "translateX(-4px)";
+    default:
+      return "none";
+  }
+}
+
+function getAnchorPointTransformRotate(anchorPoint) {
+  switch (anchorPoint) {
+    case "right-top":
+    case "right-center":
+    case "right-bottom":
+      return "rotate(90deg)";
+    case "bottom-left":
+    case "bottom-center":
+    case "bottom-right":
+      return "rotate(180deg)";
+    case "left-top":
+    case "left-center":
+    case "left-bottom":
+      return "rotate(-90deg)";
+    default:
+      return "rotate(0deg)";
+  }
+}
+
+function stylesheet (props, themeData) {
+  var transitionStatus = props.transitionStatus,
+      anchorPoint = props.anchorPoint;
+
+  var isExiting = transitionStatus === "exiting";
+  var isExited = transitionStatus === "exited";
+  var isHidden = transitionStatus === "hidden";
+  var backgroundColor = themeData ? getStyle(themeData, "flyout.backgroundColor") : "transparent";
+  var borderColor = themeData ? getStyle(themeData, "flyout.borderColor") : "none";
+  var borderRadius = themeData ? getStyle(themeData, "flyout.borderRadius") : "none";
+  var shadowBlur = themeData ? getStyle(themeData, "flyout.shadowBlur") : 0;
+  var shadowColor = themeData ? getStyle(themeData, "flyout.shadowColor") : "transparent";
+  var densitySmall = themeData ? getStyle(themeData, "density.spacings.small") : 0;
+
+  return {
+    flyoutWrapper: {
+      position: "relative",
+      display: "inline-block"
+    },
+    flyoutAction: {
+      display: "flex"
+    },
+    flyoutContainer: {
+      position: "absolute",
+      // Resolves issues with negative positions and container overflow
+      display: isHidden ? "none" : "table",
+      width: "100%",
+      zIndex: 9999,
+      transitionProperty: "opacity, transform",
+      transitionDuration: "250ms",
+      // Bounce effect
+      transitionTimingFunction: "cubic-bezier(0.77, 0, 0.265, 2)",
+      touchAction: isExiting || isExited ? "none" : "auto",
+      pointerEvents: isExiting || isExited ? "none" : "auto",
+      opacity: isExiting || isExited ? 0 : 1,
+      transform: isExiting || isExited ? getAnchorPointTransformTranslate(anchorPoint) : "none"
+    },
+    panelContainer: {
+      backgroundColor: backgroundColor,
+      borderRadius: borderRadius,
+      border: "1px solid " + borderColor,
+      boxShadow: "0 0 " + shadowBlur + " " + shadowColor
+    },
+    panelContainerInner: {
+      position: "relative"
+    },
+    panel: {
+      minWidth: "200px",
+      maxWidth: "400px",
+      maxHeight: "360px",
+      padding: densitySmall,
+      overflowY: "auto",
+      msOverflowStyle: "-ms-autohiding-scrollbar"
+    },
+    pointerWrapper: {
+      display: "flex",
+      position: "absolute",
+      transform: getAnchorPointTransformRotate(anchorPoint)
+    },
+    pointerBorder: {
+      fill: borderColor
+    },
+    pointerBody: {
+      fill: backgroundColor
+    }
+  };
+}
+
 function PointerPresenter(props) {
-  var backgroundColor = props.backgroundColor,
-      borderColor = props.borderColor,
-      borderWidth = props.borderWidth,
+  var borderWidth = props.borderWidth,
       size = props.size;
@@ -460,16 +573,27 @@
   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(" ")
-    })
+    ThemeContext.Consumer,
+    null,
+    function (_ref) {
+      var resolvedRoles = _ref.resolvedRoles;
+
+      var styles = stylesheet({ transitionStatus: null, anchorPoint: null }, resolvedRoles);
+      var cssStyles = props.stylesheet ? props.stylesheet(styles, props, resolvedRoles) : styles;
+
+      return React.createElement(
+        "svg",
+        {
+          height: size.toString(),
+          viewBox: "0 0 " + size + " " + size,
+          width: width.toString()
+        },
+        React.createElement("polygon", {
+          className: css(cssStyles.pointerBorder),
+          points: ["0," + height, widthMidpoint + ",0", width + "," + height].join(" ")
+        }),
+        React.createElement("polygon", {
+          className: css(cssStyles.pointerBody),
+          points: [borderWidth + "," + height, widthMidpoint + "," + borderWidth, width - borderWidth + "," + height].join(" ")
+        })
+      );
+    }
   );
@@ -479,6 +603,2 @@ }
 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,
@@ -489,6 +609,5 @@ size: 24
 PointerPresenter.propTypes = {
-  backgroundColor: PropTypes.string,
-  borderColor: PropTypes.string,
   borderWidth: PropTypes.number,
-  size: PropTypes.number
+  size: PropTypes.number,
+  stylesheet: PropTypes.func
 };
@@ -499,24 +618,2 @@ PointerPresenter.__docgenInfo = {
   "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": {
@@ -543,2 +640,9 @@ "type": {
       }
+    },
+    "stylesheet": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": ""
     }
@@ -551,4 +655,7 @@ }
       innerRef = _ref.innerRef,
-      style = _ref.style;
+      style = _ref.style,
+      anchorPoint = _ref.anchorPoint;
 
+  var styles = stylesheet({ transitionStatus: null, anchorPoint: anchorPoint });
+
   return React.createElement(
@@ -558,3 +665,3 @@ "div",
       "aria-hidden": "true",
-      className: "hig__flyout-v1__pointer-wrapper",
+      className: css(styles.pointerWrapper),
       ref: innerRef,
@@ -572,3 +679,4 @@ role: "presentation",
   /* eslint-disable-next-line react/forbid-prop-types */
-  style: PropTypes.object
+  style: PropTypes.object,
+  anchorPoint: PropTypes.oneOf(AVAILABLE_ANCHOR_POINTS)
 };
@@ -599,2 +707,11 @@ PointerWrapperPresenter.__docgenInfo = {
       "description": ""
+    },
+    "anchorPoint": {
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "AVAILABLE_ANCHOR_POINTS"
+      },
+      "required": false,
+      "description": ""
     }
@@ -604,32 +721,9 @@ }
 
-var _transitionStateToMod, _anchorPointToModifie;
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var transitionStateToModifier = (_transitionStateToMod = {}, _defineProperty(_transitionStateToMod, transitionStatuses.EXITED, "hig__flyout-v1--exited"), _defineProperty(_transitionStateToMod, transitionStatuses.EXITING, "hig__flyout-v1--exiting"), _defineProperty(_transitionStateToMod, transitionStatuses.HIDDEN, "hig__flyout-v1--hidden"), _transitionStateToMod);
-
-var anchorPointToModifier = (_anchorPointToModifie = {}, _defineProperty(_anchorPointToModifie, anchorPoints.TOP_LEFT, "hig__flyout-v1--top-left"), _defineProperty(_anchorPointToModifie, anchorPoints.TOP_CENTER, "hig__flyout-v1--top-center"), _defineProperty(_anchorPointToModifie, anchorPoints.TOP_RIGHT, "hig__flyout-v1--top-right"), _defineProperty(_anchorPointToModifie, anchorPoints.RIGHT_TOP, "hig__flyout-v1--right-top"), _defineProperty(_anchorPointToModifie, anchorPoints.RIGHT_CENTER, "hig__flyout-v1--right-center"), _defineProperty(_anchorPointToModifie, anchorPoints.RIGHT_BOTTOM, "hig__flyout-v1--right-bottom"), _defineProperty(_anchorPointToModifie, anchorPoints.BOTTOM_LEFT, "hig__flyout-v1--bottom-left"), _defineProperty(_anchorPointToModifie, anchorPoints.BOTTOM_CENTER, "hig__flyout-v1--bottom-center"), _defineProperty(_anchorPointToModifie, anchorPoints.BOTTOM_RIGHT, "hig__flyout-v1--bottom-right"), _defineProperty(_anchorPointToModifie, anchorPoints.LEFT_TOP, "hig__flyout-v1--left-top"), _defineProperty(_anchorPointToModifie, anchorPoints.LEFT_CENTER, "hig__flyout-v1--left-center"), _defineProperty(_anchorPointToModifie, anchorPoints.LEFT_BOTTOM, "hig__flyout-v1--left-bottom"), _anchorPointToModifie);
-
-/**
- * @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,
       children = props.children,
-      containerPosition = props.containerPosition,
       panel = props.panel,
       pointer = props.pointer,
-      pointerPosition = props.pointerPosition,
       refAction = props.refAction,
+      refPanelWrapper = props.refPanelWrapper,
       refPointer = props.refPointer,
@@ -640,24 +734,33 @@ refWrapper = props.refWrapper,
 
-  var containerStyle = positionToStyle(containerPosition);
-  var pointerStyle = positionToStyle(pointerPosition);
-  var wrapperClasses = cx(["hig__flyout-v1", transitionStateToModifier[transitionStatus], anchorPointToModifier[anchorPoint]]);
+  return React.createElement(
+    ThemeContext.Consumer,
+    null,
+    function (_ref) {
+      var resolvedRoles = _ref.resolvedRoles;
 
-  return React.createElement(
-    "div",
-    { className: wrapperClasses, ref: refWrapper },
-    React.createElement(
-      "div",
-      { className: "hig__flyout-v1__action", ref: refAction },
-      children
-    ),
-    React.createElement(
-      "div",
-      { className: "hig__flyout-v1__container", style: containerStyle },
-      React.createElement(
-        PointerWrapperPresenter,
-        { innerRef: refPointer, style: pointerStyle },
-        pointer
-      ),
-      panel
-    )
+      var styles = stylesheet({ transitionStatus: transitionStatus, anchorPoint: anchorPoint }, resolvedRoles);
+
+      return React.createElement(
+        "div",
+        { className: css(styles.flyoutWrapper), ref: refWrapper },
+        React.createElement(
+          "div",
+          { className: css(styles.flyoutAction), ref: refAction },
+          children
+        ),
+        React.createElement(
+          "div",
+          { className: css(styles.flyoutContainer), ref: refPanelWrapper },
+          React.createElement(
+            PointerWrapperPresenter,
+            {
+              innerRef: refPointer,
+              anchorPoint: anchorPoint
+            },
+            pointer
+          ),
+          panel
+        )
+      );
+    }
   );
@@ -668,5 +771,3 @@ }
   anchorPoint: DEFAULT_COORDINATES.anchorPoint,
-  containerPosition: DEFAULT_COORDINATES.containerPosition,
   pointer: React.createElement(PointerPresenter, null),
-  pointerPosition: DEFAULT_COORDINATES.pointerPosition,
   transitionStatus: transitionStatuses.EXITED
@@ -682,14 +783,6 @@ };
   pointer: PropTypes.node,
-  /** Top position of the container relative to the action */
-  containerPosition: PropTypes.shape({
-    top: PropTypes.number,
-    left: PropTypes.number
-  }),
-  /** Left position of the container 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 */
@@ -739,50 +832,15 @@ refPointer: PropTypes.func,
     },
-    "containerPosition": {
+    "refAction": {
       "type": {
-        "name": "shape",
-        "value": {
-          "top": {
-            "name": "number",
-            "required": false
-          },
-          "left": {
-            "name": "number",
-            "required": false
-          }
-        }
+        "name": "func"
       },
       "required": false,
-      "description": "Top position of the container relative to the action",
-      "defaultValue": {
-        "value": "DEFAULT_COORDINATES.containerPosition",
-        "computed": true
-      }
+      "description": "Reference the action element"
     },
-    "pointerPosition": {
+    "refPanelWrapper": {
       "type": {
-        "name": "shape",
-        "value": {
-          "top": {
-            "name": "number",
-            "required": false
-          },
-          "left": {
-            "name": "number",
-            "required": false
-          }
-        }
-      },
-      "required": false,
-      "description": "Left position of the container relative to the action",
-      "defaultValue": {
-        "value": "DEFAULT_COORDINATES.pointerPosition",
-        "computed": true
-      }
-    },
-    "refAction": {
-      "type": {
         "name": "func"
       },
       "required": false,
-      "description": "Reference the action element"
+      "description": "Reference the panel wrapper element"
     },
@@ -959,13 +1017,26 @@ "refPointer": {
   return React.createElement(
-    "div",
-    {
-      className: "hig__flyout-v1__panel-container",
-      ref: innerRef,
-      style: { maxHeight: maxHeightInPixels }
-    },
-    React.createElement(
-      "div",
-      { className: "hig__flyout-v1__panel-container__inner" },
-      children
-    )
+    ThemeContext.Consumer,
+    null,
+    function (_ref) {
+      var resolvedRoles = _ref.resolvedRoles;
+
+      var styles = stylesheet({
+        transitionStatus: null,
+        anchorPoint: null
+      }, resolvedRoles);
+
+      return React.createElement(
+        "div",
+        {
+          className: css(styles.panelContainer),
+          ref: innerRef,
+          style: { maxHeight: maxHeightInPixels }
+        },
+        React.createElement(
+          "div",
+          { className: css(styles.panelContainerInner) },
+          children
+        )
+      );
+    }
   );
@@ -1015,5 +1086,15 @@ }
   return React.createElement(
-    "div",
-    { className: "hig__flyout-v1__panel", onScroll: onScroll },
-    children
+    ThemeContext.Consumer,
+    null,
+    function (_ref2) {
+      var resolvedRoles = _ref2.resolvedRoles;
+
+      var styles = stylesheet({ transitionStatus: null, anchorPoint: null }, resolvedRoles);
+
+      return React.createElement(
+        "div",
+        { className: css(styles.panel), onScroll: onScroll },
+        children
+      );
+    }
   );
@@ -1120,2 +1201,4 @@ }
       _this.setState({ panelRef: panelRef });
+    }, _this.refPanelWrapper = function (panelWrapperRef) {
+      _this.setState({ panelWrapperRef: panelWrapperRef });
     }, _this.refWrapper = function (wrapperRef) {
@@ -1131,3 +1214,4 @@ _this.setState({ wrapperRef: wrapperRef });
           refPointer = _this2.refPointer,
-          refWrapper = _this2.refWrapper;
+          refWrapper = _this2.refWrapper,
+          refPanelWrapper = _this2.refPanelWrapper;
       var _this$props = _this.props,
@@ -1140,5 +1224,3 @@ openOnHoverDelay = _this$props.openOnHoverDelay,
       var _this$getCoordinates = _this.getCoordinates(),
-          anchorPoint = _this$getCoordinates.anchorPoint,
-          containerPosition = _this$getCoordinates.containerPosition,
-          pointerPosition = _this$getCoordinates.pointerPosition;
+          anchorPoint = _this$getCoordinates.anchorPoint;
 
@@ -1160,7 +1242,6 @@ return React.createElement(
               anchorPoint: anchorPoint,
-              containerPosition: containerPosition,
               panel: panel,
               pointer: pointer,
-              pointerPosition: pointerPosition,
               refAction: refAction,
+              refPanelWrapper: refPanelWrapper,
               refPointer: refPointer,
@@ -1186,2 +1267,22 @@ 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";
+      }, 0);
+    }
+  }, {
     key: "componentWillUnmount",
@@ -1203,6 +1304,6 @@ value: function componentWillUnmount() {
           fallbackAnchorPoints = _props.fallbackAnchorPoints;
-      var _state = this.state,
-          actionRef = _state.actionRef,
-          panelRef = _state.panelRef,
-          pointerRef = _state.pointerRef;
+      var _state2 = this.state,
+          actionRef = _state2.actionRef,
+          panelRef = _state2.panelRef,
+          pointerRef = _state2.pointerRef;
 
@@ -1293,2 +1394,7 @@
     /**
+     * @param {HTMLElement} panelWrapperRef
+     */
+
+
+    /**
      * @param {HTMLDivElement} wrapperRef
@@ -1404,3 +1510,3 @@ */
    */
-  fallbackAnchorPoints: PropTypes.arrayOf(PropTypes.oneOf(AVAILABLE_ANCHOR_POINTS)).isRequired,
+  fallbackAnchorPoints: PropTypes.arrayOf(PropTypes.oneOf(AVAILABLE_ANCHOR_POINTS)),
   /** Renders a custom flyout panel. Can be either a node or a render function */
@@ -1618,3 +1724,3 @@ panel: PropTypes.func,
 
-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; }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -1637,3 +1743,3 @@ /** @typedef {import("./getCoordinates").Coordinates} Coordinates */
   return _extends$2({}, coordinates, {
-    containerPosition: _extends$2({}, coordinates.containerPosition, _defineProperty$1({}, offsetProperty, coordinates.containerPosition[offsetProperty] + diff))
+    containerPosition: _extends$2({}, coordinates.containerPosition, _defineProperty({}, offsetProperty, coordinates.containerPosition[offsetProperty] + diff))
   });
@@ -1640,0 +1746,0 @@ }

build/index.js

@@ -12,3 +12,4 @@ 'use strict';
 var PropTypes = _interopDefault(require('prop-types'));
-var cx = _interopDefault(require('classnames'));
+var emotion = require('emotion');
+var themeContext = require('@hig/theme-context');
 
@@ -457,6 +458,118 @@ var anchorPoints = Object.freeze({
 
+function getStyle(themeData, role) {
+  return themeData[role];
+}
+
+function getAnchorPointTransformTranslate(anchorPoint) {
+  switch (anchorPoint) {
+    case "top-left":
+    case "top-center":
+    case "top-right":
+      return "translateY(-4px)";
+    case "right-top":
+    case "right-center":
+    case "right-bottom":
+      return "translateX(4px)";
+    case "bottom-left":
+    case "bottom-center":
+    case "bottom-right":
+      return "translateY(4px)";
+    case "left-top":
+    case "left-center":
+    case "left-bottom":
+      return "translateX(-4px)";
+    default:
+      return "none";
+  }
+}
+
+function getAnchorPointTransformRotate(anchorPoint) {
+  switch (anchorPoint) {
+    case "right-top":
+    case "right-center":
+    case "right-bottom":
+      return "rotate(90deg)";
+    case "bottom-left":
+    case "bottom-center":
+    case "bottom-right":
+      return "rotate(180deg)";
+    case "left-top":
+    case "left-center":
+    case "left-bottom":
+      return "rotate(-90deg)";
+    default:
+      return "rotate(0deg)";
+  }
+}
+
+function stylesheet (props, themeData) {
+  var transitionStatus = props.transitionStatus,
+      anchorPoint = props.anchorPoint;
+
+  var isExiting = transitionStatus === "exiting";
+  var isExited = transitionStatus === "exited";
+  var isHidden = transitionStatus === "hidden";
+  var backgroundColor = themeData ? getStyle(themeData, "flyout.backgroundColor") : "transparent";
+  var borderColor = themeData ? getStyle(themeData, "flyout.borderColor") : "none";
+  var borderRadius = themeData ? getStyle(themeData, "flyout.borderRadius") : "none";
+  var shadowBlur = themeData ? getStyle(themeData, "flyout.shadowBlur") : 0;
+  var shadowColor = themeData ? getStyle(themeData, "flyout.shadowColor") : "transparent";
+  var densitySmall = themeData ? getStyle(themeData, "density.spacings.small") : 0;
+
+  return {
+    flyoutWrapper: {
+      position: "relative",
+      display: "inline-block"
+    },
+    flyoutAction: {
+      display: "flex"
+    },
+    flyoutContainer: {
+      position: "absolute",
+      // Resolves issues with negative positions and container overflow
+      display: isHidden ? "none" : "table",
+      width: "100%",
+      zIndex: 9999,
+      transitionProperty: "opacity, transform",
+      transitionDuration: "250ms",
+      // Bounce effect
+      transitionTimingFunction: "cubic-bezier(0.77, 0, 0.265, 2)",
+      touchAction: isExiting || isExited ? "none" : "auto",
+      pointerEvents: isExiting || isExited ? "none" : "auto",
+      opacity: isExiting || isExited ? 0 : 1,
+      transform: isExiting || isExited ? getAnchorPointTransformTranslate(anchorPoint) : "none"
+    },
+    panelContainer: {
+      backgroundColor: backgroundColor,
+      borderRadius: borderRadius,
+      border: "1px solid " + borderColor,
+      boxShadow: "0 0 " + shadowBlur + " " + shadowColor
+    },
+    panelContainerInner: {
+      position: "relative"
+    },
+    panel: {
+      minWidth: "200px",
+      maxWidth: "400px",
+      maxHeight: "360px",
+      padding: densitySmall,
+      overflowY: "auto",
+      msOverflowStyle: "-ms-autohiding-scrollbar"
+    },
+    pointerWrapper: {
+      display: "flex",
+      position: "absolute",
+      transform: getAnchorPointTransformRotate(anchorPoint)
+    },
+    pointerBorder: {
+      fill: borderColor
+    },
+    pointerBody: {
+      fill: backgroundColor
+    }
+  };
+}
+
 function PointerPresenter(props) {
-  var backgroundColor = props.backgroundColor,
-      borderColor = props.borderColor,
-      borderWidth = props.borderWidth,
+  var borderWidth = props.borderWidth,
       size = props.size;
@@ -469,16 +582,27 @@
   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(" ")
-    })
+    themeContext.ThemeContext.Consumer,
+    null,
+    function (_ref) {
+      var resolvedRoles = _ref.resolvedRoles;
+
+      var styles = stylesheet({ transitionStatus: null, anchorPoint: null }, resolvedRoles);
+      var cssStyles = props.stylesheet ? props.stylesheet(styles, props, resolvedRoles) : styles;
+
+      return React__default.createElement(
+        "svg",
+        {
+          height: size.toString(),
+          viewBox: "0 0 " + size + " " + size,
+          width: width.toString()
+        },
+        React__default.createElement("polygon", {
+          className: emotion.css(cssStyles.pointerBorder),
+          points: ["0," + height, widthMidpoint + ",0", width + "," + height].join(" ")
+        }),
+        React__default.createElement("polygon", {
+          className: emotion.css(cssStyles.pointerBody),
+          points: [borderWidth + "," + height, widthMidpoint + "," + borderWidth, width - borderWidth + "," + height].join(" ")
+        })
+      );
+    }
   );
@@ -488,6 +612,2 @@ }
 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,
@@ -498,6 +618,5 @@ size: 24
 PointerPresenter.propTypes = {
-  backgroundColor: PropTypes.string,
-  borderColor: PropTypes.string,
   borderWidth: PropTypes.number,
-  size: PropTypes.number
+  size: PropTypes.number,
+  stylesheet: PropTypes.func
 };
@@ -508,24 +627,2 @@ PointerPresenter.__docgenInfo = {
   "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": {
@@ -552,2 +649,9 @@ "type": {
       }
+    },
+    "stylesheet": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": ""
     }
@@ -560,4 +664,7 @@ }
       innerRef = _ref.innerRef,
-      style = _ref.style;
+      style = _ref.style,
+      anchorPoint = _ref.anchorPoint;
 
+  var styles = stylesheet({ transitionStatus: null, anchorPoint: anchorPoint });
+
   return React__default.createElement(
@@ -567,3 +674,3 @@ "div",
       "aria-hidden": "true",
-      className: "hig__flyout-v1__pointer-wrapper",
+      className: emotion.css(styles.pointerWrapper),
       ref: innerRef,
@@ -581,3 +688,4 @@ role: "presentation",
   /* eslint-disable-next-line react/forbid-prop-types */
-  style: PropTypes.object
+  style: PropTypes.object,
+  anchorPoint: PropTypes.oneOf(AVAILABLE_ANCHOR_POINTS)
 };
@@ -608,2 +716,11 @@ PointerWrapperPresenter.__docgenInfo = {
       "description": ""
+    },
+    "anchorPoint": {
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "AVAILABLE_ANCHOR_POINTS"
+      },
+      "required": false,
+      "description": ""
     }
@@ -613,32 +730,9 @@ }
 
-var _transitionStateToMod, _anchorPointToModifie;
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var transitionStateToModifier = (_transitionStateToMod = {}, _defineProperty(_transitionStateToMod, transitionStatuses.EXITED, "hig__flyout-v1--exited"), _defineProperty(_transitionStateToMod, transitionStatuses.EXITING, "hig__flyout-v1--exiting"), _defineProperty(_transitionStateToMod, transitionStatuses.HIDDEN, "hig__flyout-v1--hidden"), _transitionStateToMod);
-
-var anchorPointToModifier = (_anchorPointToModifie = {}, _defineProperty(_anchorPointToModifie, anchorPoints.TOP_LEFT, "hig__flyout-v1--top-left"), _defineProperty(_anchorPointToModifie, anchorPoints.TOP_CENTER, "hig__flyout-v1--top-center"), _defineProperty(_anchorPointToModifie, anchorPoints.TOP_RIGHT, "hig__flyout-v1--top-right"), _defineProperty(_anchorPointToModifie, anchorPoints.RIGHT_TOP, "hig__flyout-v1--right-top"), _defineProperty(_anchorPointToModifie, anchorPoints.RIGHT_CENTER, "hig__flyout-v1--right-center"), _defineProperty(_anchorPointToModifie, anchorPoints.RIGHT_BOTTOM, "hig__flyout-v1--right-bottom"), _defineProperty(_anchorPointToModifie, anchorPoints.BOTTOM_LEFT, "hig__flyout-v1--bottom-left"), _defineProperty(_anchorPointToModifie, anchorPoints.BOTTOM_CENTER, "hig__flyout-v1--bottom-center"), _defineProperty(_anchorPointToModifie, anchorPoints.BOTTOM_RIGHT, "hig__flyout-v1--bottom-right"), _defineProperty(_anchorPointToModifie, anchorPoints.LEFT_TOP, "hig__flyout-v1--left-top"), _defineProperty(_anchorPointToModifie, anchorPoints.LEFT_CENTER, "hig__flyout-v1--left-center"), _defineProperty(_anchorPointToModifie, anchorPoints.LEFT_BOTTOM, "hig__flyout-v1--left-bottom"), _anchorPointToModifie);
-
-/**
- * @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,
       children = props.children,
-      containerPosition = props.containerPosition,
       panel = props.panel,
       pointer = props.pointer,
-      pointerPosition = props.pointerPosition,
       refAction = props.refAction,
+      refPanelWrapper = props.refPanelWrapper,
       refPointer = props.refPointer,
@@ -649,24 +743,33 @@ refWrapper = props.refWrapper,
 
-  var containerStyle = positionToStyle(containerPosition);
-  var pointerStyle = positionToStyle(pointerPosition);
-  var wrapperClasses = cx(["hig__flyout-v1", transitionStateToModifier[transitionStatus], anchorPointToModifier[anchorPoint]]);
+  return React__default.createElement(
+    themeContext.ThemeContext.Consumer,
+    null,
+    function (_ref) {
+      var resolvedRoles = _ref.resolvedRoles;
 
-  return React__default.createElement(
-    "div",
-    { className: wrapperClasses, ref: refWrapper },
-    React__default.createElement(
-      "div",
-      { className: "hig__flyout-v1__action", ref: refAction },
-      children
-    ),
-    React__default.createElement(
-      "div",
-      { className: "hig__flyout-v1__container", style: containerStyle },
-      React__default.createElement(
-        PointerWrapperPresenter,
-        { innerRef: refPointer, style: pointerStyle },
-        pointer
-      ),
-      panel
-    )
+      var styles = stylesheet({ transitionStatus: transitionStatus, anchorPoint: anchorPoint }, resolvedRoles);
+
+      return React__default.createElement(
+        "div",
+        { className: emotion.css(styles.flyoutWrapper), ref: refWrapper },
+        React__default.createElement(
+          "div",
+          { className: emotion.css(styles.flyoutAction), ref: refAction },
+          children
+        ),
+        React__default.createElement(
+          "div",
+          { className: emotion.css(styles.flyoutContainer), ref: refPanelWrapper },
+          React__default.createElement(
+            PointerWrapperPresenter,
+            {
+              innerRef: refPointer,
+              anchorPoint: anchorPoint
+            },
+            pointer
+          ),
+          panel
+        )
+      );
+    }
   );
@@ -677,5 +780,3 @@ }
   anchorPoint: DEFAULT_COORDINATES.anchorPoint,
-  containerPosition: DEFAULT_COORDINATES.containerPosition,
   pointer: React__default.createElement(PointerPresenter, null),
-  pointerPosition: DEFAULT_COORDINATES.pointerPosition,
   transitionStatus: transitionStatuses.EXITED
@@ -691,14 +792,6 @@ };
   pointer: PropTypes.node,
-  /** Top position of the container relative to the action */
-  containerPosition: PropTypes.shape({
-    top: PropTypes.number,
-    left: PropTypes.number
-  }),
-  /** Left position of the container 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 */
@@ -748,50 +841,15 @@ refPointer: PropTypes.func,
     },
-    "containerPosition": {
+    "refAction": {
       "type": {
-        "name": "shape",
-        "value": {
-          "top": {
-            "name": "number",
-            "required": false
-          },
-          "left": {
-            "name": "number",
-            "required": false
-          }
-        }
+        "name": "func"
       },
       "required": false,
-      "description": "Top position of the container relative to the action",
-      "defaultValue": {
-        "value": "DEFAULT_COORDINATES.containerPosition",
-        "computed": true
-      }
+      "description": "Reference the action element"
     },
-    "pointerPosition": {
+    "refPanelWrapper": {
       "type": {
-        "name": "shape",
-        "value": {
-          "top": {
-            "name": "number",
-            "required": false
-          },
-          "left": {
-            "name": "number",
-            "required": false
-          }
-        }
-      },
-      "required": false,
-      "description": "Left position of the container relative to the action",
-      "defaultValue": {
-        "value": "DEFAULT_COORDINATES.pointerPosition",
-        "computed": true
-      }
-    },
-    "refAction": {
-      "type": {
         "name": "func"
       },
       "required": false,
-      "description": "Reference the action element"
+      "description": "Reference the panel wrapper element"
     },
@@ -968,13 +1026,26 @@ "refPointer": {
   return React__default.createElement(
-    "div",
-    {
-      className: "hig__flyout-v1__panel-container",
-      ref: innerRef,
-      style: { maxHeight: maxHeightInPixels }
-    },
-    React__default.createElement(
-      "div",
-      { className: "hig__flyout-v1__panel-container__inner" },
-      children
-    )
+    themeContext.ThemeContext.Consumer,
+    null,
+    function (_ref) {
+      var resolvedRoles = _ref.resolvedRoles;
+
+      var styles = stylesheet({
+        transitionStatus: null,
+        anchorPoint: null
+      }, resolvedRoles);
+
+      return React__default.createElement(
+        "div",
+        {
+          className: emotion.css(styles.panelContainer),
+          ref: innerRef,
+          style: { maxHeight: maxHeightInPixels }
+        },
+        React__default.createElement(
+          "div",
+          { className: emotion.css(styles.panelContainerInner) },
+          children
+        )
+      );
+    }
   );
@@ -1024,5 +1095,15 @@ }
   return React__default.createElement(
-    "div",
-    { className: "hig__flyout-v1__panel", onScroll: onScroll },
-    children
+    themeContext.ThemeContext.Consumer,
+    null,
+    function (_ref2) {
+      var resolvedRoles = _ref2.resolvedRoles;
+
+      var styles = stylesheet({ transitionStatus: null, anchorPoint: null }, resolvedRoles);
+
+      return React__default.createElement(
+        "div",
+        { className: emotion.css(styles.panel), onScroll: onScroll },
+        children
+      );
+    }
   );
@@ -1129,2 +1210,4 @@ }
       _this.setState({ panelRef: panelRef });
+    }, _this.refPanelWrapper = function (panelWrapperRef) {
+      _this.setState({ panelWrapperRef: panelWrapperRef });
     }, _this.refWrapper = function (wrapperRef) {
@@ -1140,3 +1223,4 @@ _this.setState({ wrapperRef: wrapperRef });
           refPointer = _this2.refPointer,
-          refWrapper = _this2.refWrapper;
+          refWrapper = _this2.refWrapper,
+          refPanelWrapper = _this2.refPanelWrapper;
       var _this$props = _this.props,
@@ -1149,5 +1233,3 @@ openOnHoverDelay = _this$props.openOnHoverDelay,
       var _this$getCoordinates = _this.getCoordinates(),
-          anchorPoint = _this$getCoordinates.anchorPoint,
-          containerPosition = _this$getCoordinates.containerPosition,
-          pointerPosition = _this$getCoordinates.pointerPosition;
+          anchorPoint = _this$getCoordinates.anchorPoint;
 
@@ -1169,7 +1251,6 @@ return React__default.createElement(
               anchorPoint: anchorPoint,
-              containerPosition: containerPosition,
               panel: panel,
               pointer: pointer,
-              pointerPosition: pointerPosition,
               refAction: refAction,
+              refPanelWrapper: refPanelWrapper,
               refPointer: refPointer,
@@ -1195,2 +1276,22 @@ 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";
+      }, 0);
+    }
+  }, {
     key: "componentWillUnmount",
@@ -1212,6 +1313,6 @@ value: function componentWillUnmount() {
           fallbackAnchorPoints = _props.fallbackAnchorPoints;
-      var _state = this.state,
-          actionRef = _state.actionRef,
-          panelRef = _state.panelRef,
-          pointerRef = _state.pointerRef;
+      var _state2 = this.state,
+          actionRef = _state2.actionRef,
+          panelRef = _state2.panelRef,
+          pointerRef = _state2.pointerRef;
 
@@ -1302,2 +1403,7 @@
     /**
+     * @param {HTMLElement} panelWrapperRef
+     */
+
+
+    /**
      * @param {HTMLDivElement} wrapperRef
@@ -1413,3 +1519,3 @@ */
    */
-  fallbackAnchorPoints: PropTypes.arrayOf(PropTypes.oneOf(AVAILABLE_ANCHOR_POINTS)).isRequired,
+  fallbackAnchorPoints: PropTypes.arrayOf(PropTypes.oneOf(AVAILABLE_ANCHOR_POINTS)),
   /** Renders a custom flyout panel. Can be either a node or a render function */
@@ -1627,3 +1733,3 @@ panel: PropTypes.func,
 
-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; }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -1646,3 +1752,3 @@ /** @typedef {import("./getCoordinates").Coordinates} Coordinates */
   return _extends$2({}, coordinates, {
-    containerPosition: _extends$2({}, coordinates.containerPosition, _defineProperty$1({}, offsetProperty, coordinates.containerPosition[offsetProperty] + diff))
+    containerPosition: _extends$2({}, coordinates.containerPosition, _defineProperty({}, offsetProperty, coordinates.containerPosition[offsetProperty] + diff))
   });
@@ -1649,0 +1755,0 @@ }

CHANGELOG.md

@@ -0,1 +1,10 @@
+# [@hig/flyout-v0.7.0](https://github.com/Autodesk/hig/compare/@hig/flyout@0.6.0...@hig/flyout@0.7.0) (2018-12-11)
+
+
+### Features
+
+* add stylesheet override for flyout pointer ([947651f](https://github.com/Autodesk/hig/commit/947651f))
+* make flyout themeable ([d900626](https://github.com/Autodesk/hig/commit/d900626))
+* use theme date for flyout border color ([acfca0d](https://github.com/Autodesk/hig/commit/acfca0d))
+
 # [@hig/flyout-v0.6.0](https://github.com/Autodesk/hig/compare/@hig/flyout@0.5.0...@hig/flyout@0.6.0) (2018-09-26)
@@ -2,0 +11,0 @@

package.json

 {
   "name": "@hig/flyout",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "HIG Flyout",
@@ -16,3 +16,2 @@ "author": "Autodesk Inc.",
   "module": "build/index.es.js",
-  "style": "build/index.css",
   "files": [
@@ -22,3 +21,4 @@ "build/*"
   "dependencies": {
-    "classnames": "^2.2.5",
+    "@hig/theme-context": "^1.0.0",
+    "emotion": "^10.0.0",
     "prop-types": "^15.6.1",
@@ -31,8 +31,7 @@ "react-transition-group": "^2.3.1"
   "devDependencies": {
-    "@hig/babel-preset": "^0.1.0",
+    "@hig/babel-preset": "^0.1.1",
     "@hig/eslint-config": "^0.1.0",
     "@hig/jest-preset": "^0.1.0",
     "@hig/scripts": "^0.1.2",
-    "@hig/semantic-release-config": "^0.1.0",
-    "@hig/styles": "^0.2.3"
+    "@hig/semantic-release-config": "^0.1.0"
   },
@@ -39,0 +38,0 @@ "scripts": {

README.md

@@ -19,3 +19,2 @@ # Flyout
 import Flyout, { anchorPoints } from "@hig/flyout";
-import "@hig/flyout/build/index.css";
 ```
@@ -22,0 +21,0 @@

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Dev dependency count

5

decreased by-16.67%

Lines of code

3240

increased by0.81%

Worsened metrics

Total package byte prevSize

114932

decreased by-3.56%

Dependency count

5

increased by25%

Number of package files

5

decreased by-28.57%

Number of lines in readme file

108

decreased by-0.92%

Dependency changes

• + Added@hig/theme-context@^1.0.0

• + Addedemotion@^10.0.0

• + Added@babel/code-frame@7.26.2(transitive)

• + Added@babel/generator@7.26.2(transitive)

• + Added@babel/helper-module-imports@7.25.9(transitive)

• + Added@babel/helper-string-parser@7.25.9(transitive)

• + Added@babel/helper-validator-identifier@7.25.9(transitive)

• + Added@babel/parser@7.26.2(transitive)

• + Added@babel/template@7.25.9(transitive)

• + Added@babel/traverse@7.25.9(transitive)

• + Added@babel/types@7.26.0(transitive)

• + Added@emotion/cache@10.0.29(transitive)

• + Added@emotion/hash@0.8.0(transitive)

• + Added@emotion/memoize@0.7.4(transitive)

• + Added@emotion/serialize@0.11.16(transitive)

• + Added@emotion/sheet@0.9.4(transitive)

• + Added@emotion/stylis@0.8.5(transitive)

• + Added@emotion/unitless@0.7.5(transitive)

• + Added@emotion/utils@0.11.3(transitive)

• + Added@emotion/weak-memoize@0.2.5(transitive)

• + Added@hig/theme-context@1.0.1(transitive)

• + Added@hig/theme-data@1.6.0(transitive)

• + Added@jridgewell/gen-mapping@0.3.5(transitive)

• + Added@jridgewell/resolve-uri@3.1.2(transitive)

• + Added@jridgewell/set-array@1.2.1(transitive)

• + Added@jridgewell/sourcemap-codec@1.5.0(transitive)

• + Added@jridgewell/trace-mapping@0.3.25(transitive)

• + Added@types/parse-json@4.0.2(transitive)

• + Addedasap@2.0.6(transitive)

• + Addedbabel-plugin-emotion@10.2.2(transitive)

• + Addedbabel-plugin-macros@2.8.0(transitive)

• + Addedbabel-plugin-syntax-jsx@6.18.0(transitive)

• + Addedcallsites@3.1.0(transitive)

• + Addedconvert-source-map@1.9.0(transitive)

• + Addedcore-js@1.2.7(transitive)

• + Addedcosmiconfig@6.0.0(transitive)

• + Addedcreate-emotion@10.0.27(transitive)

• + Addedcreate-react-context@0.2.3(transitive)

• + Addedcsstype@2.6.21(transitive)

• + Addeddebug@4.3.7(transitive)

• + Addedemotion@10.0.27(transitive)

• + Addedencoding@0.1.13(transitive)

• + Addederror-ex@1.3.2(transitive)

• + Addedescape-string-regexp@1.0.5(transitive)

• + Addedfbjs@0.8.18(transitive)

• + Addedfind-root@1.1.0(transitive)

• + Addedfunction-bind@1.1.2(transitive)

• + Addedglobals@11.12.0(transitive)

• + Addedgud@1.0.0(transitive)

• + Addedhasown@2.0.2(transitive)

• + Addediconv-lite@0.6.3(transitive)

• + Addedimport-fresh@3.3.0(transitive)

• + Addedis-arrayish@0.2.1(transitive)

• + Addedis-core-module@2.15.1(transitive)

• + Addedis-stream@1.1.0(transitive)

• + Addedisomorphic-fetch@2.2.1(transitive)

• + Addedjsesc@3.0.2(transitive)

• + Addedjson-parse-even-better-errors@2.3.1(transitive)

• + Addedlines-and-columns@1.2.4(transitive)

• + Addedms@2.1.3(transitive)

• + Addednode-fetch@1.7.3(transitive)

• + Addedparent-module@1.0.1(transitive)

• + Addedparse-json@5.2.0(transitive)

• + Addedpath-parse@1.0.7(transitive)

• + Addedpath-type@4.0.0(transitive)

• + Addedpicocolors@1.1.1(transitive)

• + Addedpromise@7.3.1(transitive)

• + Addedresolve@1.22.8(transitive)

• + Addedresolve-from@4.0.0(transitive)

• + Addedsafer-buffer@2.1.2(transitive)

• + Addedsetimmediate@1.0.5(transitive)

• + Addedsource-map@0.5.7(transitive)

• + Addedsupports-preserve-symlinks-flag@1.0.0(transitive)

• + Addedtinycolor2@1.6.0(transitive)

• + Addedua-parser-js@0.7.39(transitive)

• + Addedwhatwg-fetch@3.6.20(transitive)

• + Addedyaml@1.10.2(transitive)

• - Removedclassnames@^2.2.5

• - Removedclassnames@2.5.1(transitive)