@sproutsocial/racine 20.3.1 → 20.4.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Change Log
 
+## 20.4.1
+
+### Patch Changes
+
+- 35df3316c: `Tooltip` types now allow for the use of `onFocus` in cases where the implementation requires an event during hover
+- 35df3316c: Upgrade @babel/traverse
+
+## 20.4.0
+
+### Minor Changes
+
+- 98dcd1d61: Upgrades scroll-into-view-if-needed from v1 to v2
+
+### Patch Changes
+
+- 98dcd1d61: Refactor tooltip to better address event bubbling and accessibility issues
+
 ## 20.3.1
 
 ### Patch Changes

package/commonjs/Menu/utils/hooks.js

@@ -164,7 +164,12 @@ function useMenuKeyDown() {
         return !option.disabled && (!filteredItems || filteredItems.includes(option.index));
       },
       callback: function callback(item) {
-        item.element && (0, _scrollIntoViewIfNeeded.default)(item.element, false);
+        if (item.element) {
+          (0, _scrollIntoViewIfNeeded.default)(item.element, {
+            block: 'nearest',
+            scrollMode: 'if-needed'
+          });
+        }
         setState({
           selectionIndex: item.index
         });

package/commonjs/Tooltip/Tooltip.js

@@ -8,12 +8,11 @@ var React = _interopRequireWildcard(require("react"));
 var _seedsMotionUnitless = _interopRequireDefault(require("@sproutsocial/seeds-motion/dist/seeds-motion-unitless"));
 var _Popout = _interopRequireDefault(require("../Popout"));
 var _styles = require("./styles");
-var _excluded = ["content", "children", "enterDelay", "placement", "appearance", "zIndex", "qa", "popoutProps", "truncated"],
-  _excluded2 = ["appearance", "children", "onMouseEnter", "onMouseLeave"];
+var _excluded = ["appearance", "children", "onFocus", "onBlur"],
+  _excluded2 = ["content", "children", "enterDelay", "placement", "appearance", "zIndex", "qa", "popoutProps", "truncated", "onFocus", "onBlur"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure " + obj); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -26,32 +25,49 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 var idCounter = 0;
-var wrapContent = function wrapContent(_ref) {
-  var isOpen = _ref.isOpen,
-    content = _ref.content,
-    contentId = _ref.contentId,
-    show = _ref.show,
-    hide = _ref.hide,
-    Wrapper = _ref.Wrapper,
-    appearance = _ref.appearance,
-    ariaProps = _ref.ariaProps,
-    wrapperStyles = _ref.wrapperStyles;
-  return /*#__PURE__*/React.createElement(Wrapper, _extends({
+var hasAttribute = function hasAttribute(child, attribute) {
+  return /*#__PURE__*/React.isValidElement(child) && child.props[attribute] !== undefined;
+};
+
+/** Tooltip Styled Popout wrapper for handling events */
+var TooltipBubble = function TooltipBubble(_ref) {
+  var _ref$appearance = _ref.appearance,
+    appearance = _ref$appearance === void 0 ? 'pill' : _ref$appearance,
+    children = _ref.children,
+    onFocus = _ref.onFocus,
+    onBlur = _ref.onBlur,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var handleFocus = function handleFocus(e) {
+    onFocus(e);
+  };
+  var handleBlur = function handleBlur(e) {
+    onBlur(e);
+  };
+  return /*#__PURE__*/React.createElement(_styles.StyledTooltipContent, _extends({
+    role: "tooltip",
     appearance: appearance,
-    onFocus: show,
-    onBlur: hide,
-    onMouseEnter: show,
-    onMouseLeave: hide,
-    style: Object.keys(wrapperStyles).length === 0 ? undefined : wrapperStyles
-  }, ariaProps), /*#__PURE__*/React.isValidElement(content) ? /*#__PURE__*/React.cloneElement(content, {
-    'aria-expanded': isOpen,
-    'aria-describedby': contentId
-  }) : content);
+    borderRadius: appearance === 'box' ? 500 : '5000em',
+    px: 400,
+    py: appearance === 'box' ? 400 : 200,
+    m: 200,
+    color: "text.body",
+    bg: "container.background.base",
+    boxShadow: "medium",
+    border: 500,
+    borderColor: "container.border.base",
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onMouseEnter: handleFocus,
+    onMouseLeave: handleBlur,
+    tabIndex: 0
+  }, rest), children);
 };
+
+/** Core component */
 var Tooltip = function Tooltip(_ref2) {
   var content = _ref2.content,
     children = _ref2.children,
@@ -66,7 +82,9 @@ var Tooltip = function Tooltip(_ref2) {
     popoutProps = _ref2.popoutProps,
     _ref2$truncated = _ref2.truncated,
     truncated = _ref2$truncated === void 0 ? false : _ref2$truncated,
-    rest = _objectWithoutProperties(_ref2, _excluded);
+    onFocus = _ref2.onFocus,
+    onBlur = _ref2.onBlur,
+    rest = _objectWithoutProperties(_ref2, _excluded2);
   var _useState = (0, React.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     shouldShow = _useState2[0],
@@ -75,25 +93,22 @@ var Tooltip = function Tooltip(_ref2) {
     _useState4 = _slicedToArray(_useState3, 2),
     isOpen = _useState4[0],
     setIsOpen = _useState4[1];
-  var _useState5 = (0, React.useState)(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    isTooltipHovered = _useState6[0],
-    setIsTooltipHovered = _useState6[1];
-  var _useState7 = (0, React.useState)("Racine-tooltip-".concat(idCounter++)),
-    _useState8 = _slicedToArray(_useState7, 1),
-    id = _useState8[0];
+  var _useState5 = (0, React.useState)("Racine-tooltip-".concat(idCounter++)),
+    _useState6 = _slicedToArray(_useState5, 1),
+    id = _useState6[0];
   var isInvalidContent = content === null || content === undefined;
-  var show = function show() {
-    return setShouldShow(true);
+  var show = function show(e) {
+    onFocus === null || onFocus === void 0 || onFocus(e);
+    setShouldShow(true);
   };
-  var hide = function hide() {
-    if (!isTooltipHovered) {
-      setShouldShow(false);
-    }
+  var hide = function hide(e) {
+    onBlur === null || onBlur === void 0 || onBlur(e);
+    setShouldShow(false);
   };
   var exitDelay = _seedsMotionUnitless.default.MOTION_DURATION_FAST * 1000;
   var defaultAppearance = appearance || (_typeof(content) === 'object' ? 'box' : 'pill');
-  var shouldTooltipContentsBeInteractive = defaultAppearance === 'box';
+
+  /** Handles all the logic around whether to display/not display */
   (0, React.useEffect)(function () {
     var documentBody = document.body;
     var timeout;
@@ -110,57 +125,32 @@ var Tooltip = function Tooltip(_ref2) {
       }, enterDelay);
     } else {
       timeout = setTimeout(function () {
-        if (!isTooltipHovered) {
-          setIsOpen(false);
-        }
+        setIsOpen(false);
       }, exitDelay);
     }
-    documentBody.addEventListener('keydown', onEsc, false);
+
+    // We only want listeners from the tooltip if its open in the first place
+    if (isOpen) {
+      documentBody.addEventListener('keydown', onEsc, false);
+    }
     return function () {
       documentBody.removeEventListener('keydown', onEsc, false);
       clearTimeout(timeout);
     };
-  }, [isOpen, setShouldShow, shouldShow, enterDelay, exitDelay, isTooltipHovered]);
-  var wrappedContent = wrapContent({
-    isOpen: isOpen,
-    content: content,
-    contentId: id,
-    show: shouldTooltipContentsBeInteractive ? show : undefined,
-    hide: shouldTooltipContentsBeInteractive ? hide : undefined,
-    Wrapper: Content,
-    appearance: defaultAppearance,
-    ariaProps: _objectSpread(_objectSpread({}, rest), {}, {
-      id: id,
-      tabIndex: 0
-    }),
-    wrapperStyles: {},
-    onMouseEnter: function onMouseEnter() {
-      return setIsTooltipHovered(true);
-    },
-    onMouseLeave: function onMouseLeave() {
-      return setIsTooltipHovered(false);
-    }
-  });
-  _objectDestructuringEmpty(isOpen ? {} : {});
-  var wrapperStylesForWrappedChildren = truncated ? {
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap'
-  } : {};
-  // Wraps the triggering element and passes props down
-  var wrappedChildren = wrapContent({
-    isOpen: isOpen,
-    content: children,
-    contentId: id,
-    show: show,
-    hide: hide,
-    Wrapper: 'span',
-    appearance: defaultAppearance,
-    ariaProps: {},
-    wrapperStyles: wrapperStylesForWrappedChildren
-  });
+  }, [isOpen, setShouldShow, shouldShow, enterDelay, exitDelay]);
+
+  /** The wrapped content of whats inside the Tooltip */
+  var TooltipContent = function TooltipContent() {
+    return /*#__PURE__*/React.createElement(TooltipBubble, _extends({
+      appearance: defaultAppearance,
+      onFocus: show,
+      onBlur: hide,
+      "aria-expanded": isOpen,
+      "aria-describedby": id
+    }, rest), content);
+  };
   return /*#__PURE__*/React.createElement(_Popout.default, _extends({
-    content: !isInvalidContent ? wrappedContent : undefined,
+    content: !isInvalidContent ? TooltipContent : undefined,
     isOpen: isOpen,
     placement: placement,
     qa: _objectSpread({
@@ -172,30 +162,21 @@ var Tooltip = function Tooltip(_ref2) {
     "aria-haspopup": "false",
     display: truncated ? 'flex' : undefined,
     disableWrapperAria: true // required so that the child span doesnt take in redundant aria props
-  }, popoutProps), wrappedChildren);
-};
-var Content = function Content(_ref4) {
-  var _ref4$appearance = _ref4.appearance,
-    appearance = _ref4$appearance === void 0 ? 'pill' : _ref4$appearance,
-    children = _ref4.children,
-    onMouseEnter = _ref4.onMouseEnter,
-    onMouseLeave = _ref4.onMouseLeave,
-    rest = _objectWithoutProperties(_ref4, _excluded2);
-  return /*#__PURE__*/React.createElement(_styles.TooltipContent, _extends({
-    role: "tooltip",
-    appearance: appearance,
-    borderRadius: appearance === 'box' ? 500 : '5000em',
-    px: 400,
-    py: appearance === 'box' ? 400 : 200,
-    m: 200,
-    color: "text.body",
-    bg: "container.background.base",
-    boxShadow: "medium",
-    border: 500,
-    borderColor: "container.border.base",
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave
-  }, rest), children);
+  }, popoutProps), /*#__PURE__*/React.createElement("span", {
+    onBlur: hide,
+    onFocus: show,
+    onMouseEnter: show,
+    onMouseLeave: hide,
+    style: truncated ? {
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
+    } : {}
+  }, /*#__PURE__*/React.isValidElement(children) ? /*#__PURE__*/React.cloneElement(children, {
+    //** There may be cases where the Tooltip's child needs to properly describe its role as expanding a drawer, in which case that propery takes priority */
+    'aria-expanded': hasAttribute(children, 'aria-expanded') ? children.props['aria-expanded'] : isOpen,
+    'aria-describedby': id
+  }) : children));
 };
 var _default = Tooltip;
 exports.default = _default;

package/commonjs/Tooltip/styles.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TooltipContent = void 0;
+exports.StyledTooltipContent = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _Box = _interopRequireDefault(require("../Box"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var TooltipContent = (0, _styledComponents.default)(_Box.default).withConfig({
-  displayName: "styles__TooltipContent",
+var StyledTooltipContent = (0, _styledComponents.default)(_Box.default).withConfig({
+  displayName: "styles__StyledTooltipContent",
   componentId: "sc-19u9ha6-0"
 })(["font-family:", ";", " text-align:", ";"], function (props) {
   return props.theme.fontFamily;
@@ -17,4 +17,4 @@ var TooltipContent = (0, _styledComponents.default)(_Box.default).withConfig({
 }, function (props) {
   return props.appearance === 'box' ? 'left' : 'center';
 });
-exports.TooltipContent = TooltipContent;
+exports.StyledTooltipContent = StyledTooltipContent;

package/dist/types/Menu/utils/hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../src/Menu/utils/hooks.ts"],"names":[],"mappings":";;AAGA,OAAO,KAAK,EAAC,qBAAqB,EAAE,eAAe,EAAC,MAAM,qBAAqB,CAAC;AAShF,eAAO,MAAM,WAAW,0CAoBtB,CAAC;AACH,eAAO,MAAM,iBAAiB,gDAG5B,CAAC;AACH,MAAM,MAAM,uBAAuB,GAAG;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AACF,eAAO,MAAM,qBAAqB;;;;EAEjC,CAAC;AAwBF,wBAAgB,cAAc;;;EAsI7B"}
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../src/Menu/utils/hooks.ts"],"names":[],"mappings":";;AAGA,OAAO,KAAK,EAAC,qBAAqB,EAAE,eAAe,EAAC,MAAM,qBAAqB,CAAC;AAShF,eAAO,MAAM,WAAW,0CAoBtB,CAAC;AACH,eAAO,MAAM,iBAAiB,gDAG5B,CAAC;AACH,MAAM,MAAM,uBAAuB,GAAG;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AACF,eAAO,MAAM,qBAAqB;;;;EAEjC,CAAC;AAwBF,wBAAgB,cAAc;;;EA4I7B"}

package/dist/types/Tooltip/Tooltip.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import type { TypeTooltipProps } from './TooltipTypes';
-declare const Tooltip: ({ content, children, enterDelay, placement, appearance, zIndex, qa, popoutProps, truncated, ...rest }: TypeTooltipProps) => JSX.Element;
+/** Core component */
+declare const Tooltip: ({ content, children, enterDelay, placement, appearance, zIndex, qa, popoutProps, truncated, onFocus, onBlur, ...rest }: TypeTooltipProps) => JSX.Element;
 export default Tooltip;
 //# sourceMappingURL=Tooltip.d.ts.map

package/dist/types/Tooltip/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":";AAKA,OAAO,KAAK,EAAC,gBAAgB,EAAqB,MAAM,gBAAgB,CAAC;AA8DzE,QAAA,MAAM,OAAO,0GAWV,gBAAgB,gBAmHlB,CAAC;AA+BF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":";AAKA,OAAO,KAAK,EAAC,gBAAgB,EAAqB,MAAM,gBAAgB,CAAC;AA+CzE,qBAAqB;AACrB,QAAA,MAAM,OAAO,2HAaV,gBAAgB,gBA2GlB,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/types/Tooltip/TooltipTypes.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { EnumPlacements, TypePopoutProps } from '../Popout/index';
 import { TypeQaProps } from '../types/shared';
 import { TypeBoxProps } from '../Box';
-export interface TypeTooltipProps extends Omit<TypeBoxProps, 'children' | 'content'> {
+export interface TypeTooltipProps extends Omit<TypeBoxProps, 'children' | 'content' | 'onMouseEnter' | 'onMouseLeave'> {
     /** The content that the tooltip should be attached to. Hovering or focusing this element will cause the tooltip to appear */
     children: React.ReactNode;
     /** The content to be displayed within the tooltip. If there is no content, just the children are rendered */
@@ -22,7 +22,7 @@ export interface TypeTooltipProps extends Omit<TypeBoxProps, 'children' | 'conte
     ariaProps?: Record<string, string>;
 }
 export interface TypeTooltipContent extends Pick<TypeTooltipProps, 'appearance' | 'children'> {
-    onMouseEnter?: (e: React.MouseEvent) => void;
-    onMouseLeave?: (e: React.MouseEvent) => void;
+    onFocus: (e: React.FocusEvent<HTMLDivElement, FocusEvent>) => void;
+    onBlur: (e: React.FocusEvent<HTMLDivElement, FocusEvent>) => void;
 }
 //# sourceMappingURL=TooltipTypes.d.ts.map

package/dist/types/Tooltip/TooltipTypes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipTypes.d.ts","sourceRoot":"","sources":["../../../src/Tooltip/TooltipTypes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAC,cAAc,EAAE,eAAe,EAAC,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAC,WAAW,EAAC,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAC,YAAY,EAAC,MAAM,UAAU,CAAC;AAEtC,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,YAAY,EAAE,UAAU,GAAG,SAAS,CAAC;IAClD,6HAA6H;IAC7H,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,6GAA6G;IAC7G,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B,6FAA6F;IAC7F,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,gOAAgO;IAChO,UAAU,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC5B,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,8DAA8D;IAC9D,WAAW,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;IAEvC,sDAAsD;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACpC;AAGD,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,gBAAgB,EAAE,YAAY,GAAG,UAAU,CAAC;IACzD,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC7C,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CAC9C"}
+{"version":3,"file":"TooltipTypes.d.ts","sourceRoot":"","sources":["../../../src/Tooltip/TooltipTypes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAC,cAAc,EAAE,eAAe,EAAC,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAC,WAAW,EAAC,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAC,YAAY,EAAC,MAAM,UAAU,CAAC;AAEtC,MAAM,WAAW,gBACf,SAAQ,IAAI,CACV,YAAY,EACZ,UAAU,GAAG,SAAS,GAAG,cAAc,GAAG,cAAc,CACzD;IACD,6HAA6H;IAC7H,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,6GAA6G;IAC7G,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B,6FAA6F;IAC7F,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,gOAAgO;IAChO,UAAU,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC5B,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,8DAA8D;IAC9D,WAAW,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;IAEvC,sDAAsD;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACpC;AAGD,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,gBAAgB,EAAE,YAAY,GAAG,UAAU,CAAC;IACzD,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACnE,MAAM,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CACnE"}

package/dist/types/Tooltip/styles.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { TypeTooltipContent } from './TooltipTypes';
-export declare const TooltipContent: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("../Box").TypeBoxProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, Pick<TypeTooltipContent, "appearance">, never>;
+export declare const StyledTooltipContent: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("../Box").TypeBoxProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, Pick<TypeTooltipContent, "appearance">, never>;
 //# sourceMappingURL=styles.d.ts.map

package/dist/types/Tooltip/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Tooltip/styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAAC,kBAAkB,EAAC,MAAM,gBAAgB,CAAC;AAElD,eAAO,MAAM,cAAc,+QAM1B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Tooltip/styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAAC,kBAAkB,EAAC,MAAM,gBAAgB,CAAC;AAElD,eAAO,MAAM,oBAAoB,+QAMhC,CAAC"}

package/lib/Menu/utils/hooks.js

@@ -152,7 +152,12 @@ export function useMenuKeyDown() {
         return !option.disabled && (!filteredItems || filteredItems.includes(option.index));
       },
       callback: function callback(item) {
-        item.element && scrollIntoViewIfNeeded(item.element, false);
+        if (item.element) {
+          scrollIntoViewIfNeeded(item.element, {
+            block: 'nearest',
+            scrollMode: 'if-needed'
+          });
+        }
         setState({
           selectionIndex: item.index
         });

package/lib/Tooltip/Tooltip.js

@@ -1,6 +1,5 @@
-var _excluded = ["content", "children", "enterDelay", "placement", "appearance", "zIndex", "qa", "popoutProps", "truncated"],
-  _excluded2 = ["appearance", "children", "onMouseEnter", "onMouseLeave"];
-function _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure " + obj); }
+var _excluded = ["appearance", "children", "onFocus", "onBlur"],
+  _excluded2 = ["content", "children", "enterDelay", "placement", "appearance", "zIndex", "qa", "popoutProps", "truncated", "onFocus", "onBlur"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -13,37 +12,54 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import * as React from 'react';
 import { useState, useEffect } from 'react';
 import MOTION from '@sproutsocial/seeds-motion/dist/seeds-motion-unitless';
 import Popout from "../Popout";
-import { TooltipContent } from "./styles";
+import { StyledTooltipContent } from "./styles";
 var idCounter = 0;
-var wrapContent = function wrapContent(_ref) {
-  var isOpen = _ref.isOpen,
-    content = _ref.content,
-    contentId = _ref.contentId,
-    show = _ref.show,
-    hide = _ref.hide,
-    Wrapper = _ref.Wrapper,
-    appearance = _ref.appearance,
-    ariaProps = _ref.ariaProps,
-    wrapperStyles = _ref.wrapperStyles;
-  return /*#__PURE__*/React.createElement(Wrapper, _extends({
+var hasAttribute = function hasAttribute(child, attribute) {
+  return /*#__PURE__*/React.isValidElement(child) && child.props[attribute] !== undefined;
+};
+
+/** Tooltip Styled Popout wrapper for handling events */
+var TooltipBubble = function TooltipBubble(_ref) {
+  var _ref$appearance = _ref.appearance,
+    appearance = _ref$appearance === void 0 ? 'pill' : _ref$appearance,
+    children = _ref.children,
+    onFocus = _ref.onFocus,
+    onBlur = _ref.onBlur,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var handleFocus = function handleFocus(e) {
+    onFocus(e);
+  };
+  var handleBlur = function handleBlur(e) {
+    onBlur(e);
+  };
+  return /*#__PURE__*/React.createElement(StyledTooltipContent, _extends({
+    role: "tooltip",
     appearance: appearance,
-    onFocus: show,
-    onBlur: hide,
-    onMouseEnter: show,
-    onMouseLeave: hide,
-    style: Object.keys(wrapperStyles).length === 0 ? undefined : wrapperStyles
-  }, ariaProps), /*#__PURE__*/React.isValidElement(content) ? /*#__PURE__*/React.cloneElement(content, {
-    'aria-expanded': isOpen,
-    'aria-describedby': contentId
-  }) : content);
+    borderRadius: appearance === 'box' ? 500 : '5000em',
+    px: 400,
+    py: appearance === 'box' ? 400 : 200,
+    m: 200,
+    color: "text.body",
+    bg: "container.background.base",
+    boxShadow: "medium",
+    border: 500,
+    borderColor: "container.border.base",
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onMouseEnter: handleFocus,
+    onMouseLeave: handleBlur,
+    tabIndex: 0
+  }, rest), children);
 };
+
+/** Core component */
 var Tooltip = function Tooltip(_ref2) {
   var content = _ref2.content,
     children = _ref2.children,
@@ -58,7 +74,9 @@ var Tooltip = function Tooltip(_ref2) {
     popoutProps = _ref2.popoutProps,
     _ref2$truncated = _ref2.truncated,
     truncated = _ref2$truncated === void 0 ? false : _ref2$truncated,
-    rest = _objectWithoutProperties(_ref2, _excluded);
+    onFocus = _ref2.onFocus,
+    onBlur = _ref2.onBlur,
+    rest = _objectWithoutProperties(_ref2, _excluded2);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     shouldShow = _useState2[0],
@@ -67,25 +85,22 @@ var Tooltip = function Tooltip(_ref2) {
     _useState4 = _slicedToArray(_useState3, 2),
     isOpen = _useState4[0],
     setIsOpen = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    isTooltipHovered = _useState6[0],
-    setIsTooltipHovered = _useState6[1];
-  var _useState7 = useState("Racine-tooltip-".concat(idCounter++)),
-    _useState8 = _slicedToArray(_useState7, 1),
-    id = _useState8[0];
+  var _useState5 = useState("Racine-tooltip-".concat(idCounter++)),
+    _useState6 = _slicedToArray(_useState5, 1),
+    id = _useState6[0];
   var isInvalidContent = content === null || content === undefined;
-  var show = function show() {
-    return setShouldShow(true);
+  var show = function show(e) {
+    onFocus === null || onFocus === void 0 || onFocus(e);
+    setShouldShow(true);
   };
-  var hide = function hide() {
-    if (!isTooltipHovered) {
-      setShouldShow(false);
-    }
+  var hide = function hide(e) {
+    onBlur === null || onBlur === void 0 || onBlur(e);
+    setShouldShow(false);
   };
   var exitDelay = MOTION.MOTION_DURATION_FAST * 1000;
   var defaultAppearance = appearance || (_typeof(content) === 'object' ? 'box' : 'pill');
-  var shouldTooltipContentsBeInteractive = defaultAppearance === 'box';
+
+  /** Handles all the logic around whether to display/not display */
   useEffect(function () {
     var documentBody = document.body;
     var timeout;
@@ -102,57 +117,32 @@ var Tooltip = function Tooltip(_ref2) {
       }, enterDelay);
     } else {
       timeout = setTimeout(function () {
-        if (!isTooltipHovered) {
-          setIsOpen(false);
-        }
+        setIsOpen(false);
       }, exitDelay);
     }
-    documentBody.addEventListener('keydown', onEsc, false);
+
+    // We only want listeners from the tooltip if its open in the first place
+    if (isOpen) {
+      documentBody.addEventListener('keydown', onEsc, false);
+    }
     return function () {
       documentBody.removeEventListener('keydown', onEsc, false);
       clearTimeout(timeout);
     };
-  }, [isOpen, setShouldShow, shouldShow, enterDelay, exitDelay, isTooltipHovered]);
-  var wrappedContent = wrapContent({
-    isOpen: isOpen,
-    content: content,
-    contentId: id,
-    show: shouldTooltipContentsBeInteractive ? show : undefined,
-    hide: shouldTooltipContentsBeInteractive ? hide : undefined,
-    Wrapper: Content,
-    appearance: defaultAppearance,
-    ariaProps: _objectSpread(_objectSpread({}, rest), {}, {
-      id: id,
-      tabIndex: 0
-    }),
-    wrapperStyles: {},
-    onMouseEnter: function onMouseEnter() {
-      return setIsTooltipHovered(true);
-    },
-    onMouseLeave: function onMouseLeave() {
-      return setIsTooltipHovered(false);
-    }
-  });
-  _objectDestructuringEmpty(isOpen ? {} : {});
-  var wrapperStylesForWrappedChildren = truncated ? {
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap'
-  } : {};
-  // Wraps the triggering element and passes props down
-  var wrappedChildren = wrapContent({
-    isOpen: isOpen,
-    content: children,
-    contentId: id,
-    show: show,
-    hide: hide,
-    Wrapper: 'span',
-    appearance: defaultAppearance,
-    ariaProps: {},
-    wrapperStyles: wrapperStylesForWrappedChildren
-  });
+  }, [isOpen, setShouldShow, shouldShow, enterDelay, exitDelay]);
+
+  /** The wrapped content of whats inside the Tooltip */
+  var TooltipContent = function TooltipContent() {
+    return /*#__PURE__*/React.createElement(TooltipBubble, _extends({
+      appearance: defaultAppearance,
+      onFocus: show,
+      onBlur: hide,
+      "aria-expanded": isOpen,
+      "aria-describedby": id
+    }, rest), content);
+  };
   return /*#__PURE__*/React.createElement(Popout, _extends({
-    content: !isInvalidContent ? wrappedContent : undefined,
+    content: !isInvalidContent ? TooltipContent : undefined,
     isOpen: isOpen,
     placement: placement,
     qa: _objectSpread({
@@ -164,29 +154,20 @@ var Tooltip = function Tooltip(_ref2) {
     "aria-haspopup": "false",
     display: truncated ? 'flex' : undefined,
     disableWrapperAria: true // required so that the child span doesnt take in redundant aria props
-  }, popoutProps), wrappedChildren);
-};
-var Content = function Content(_ref4) {
-  var _ref4$appearance = _ref4.appearance,
-    appearance = _ref4$appearance === void 0 ? 'pill' : _ref4$appearance,
-    children = _ref4.children,
-    onMouseEnter = _ref4.onMouseEnter,
-    onMouseLeave = _ref4.onMouseLeave,
-    rest = _objectWithoutProperties(_ref4, _excluded2);
-  return /*#__PURE__*/React.createElement(TooltipContent, _extends({
-    role: "tooltip",
-    appearance: appearance,
-    borderRadius: appearance === 'box' ? 500 : '5000em',
-    px: 400,
-    py: appearance === 'box' ? 400 : 200,
-    m: 200,
-    color: "text.body",
-    bg: "container.background.base",
-    boxShadow: "medium",
-    border: 500,
-    borderColor: "container.border.base",
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave
-  }, rest), children);
+  }, popoutProps), /*#__PURE__*/React.createElement("span", {
+    onBlur: hide,
+    onFocus: show,
+    onMouseEnter: show,
+    onMouseLeave: hide,
+    style: truncated ? {
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
+    } : {}
+  }, /*#__PURE__*/React.isValidElement(children) ? /*#__PURE__*/React.cloneElement(children, {
+    //** There may be cases where the Tooltip's child needs to properly describe its role as expanding a drawer, in which case that propery takes priority */
+    'aria-expanded': hasAttribute(children, 'aria-expanded') ? children.props['aria-expanded'] : isOpen,
+    'aria-describedby': id
+  }) : children));
 };
 export default Tooltip;

package/lib/Tooltip/styles.js

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import Box from "../Box";
-export var TooltipContent = styled(Box).withConfig({
-  displayName: "styles__TooltipContent",
+export var StyledTooltipContent = styled(Box).withConfig({
+  displayName: "styles__StyledTooltipContent",
   componentId: "sc-19u9ha6-0"
 })(["font-family:", ";", " text-align:", ";"], function (props) {
   return props.theme.fontFamily;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "20.3.1",
+  "version": "20.4.1",
   "license": "MIT",
   "files": [
     "__flow__",
@@ -81,7 +81,7 @@
     "react-spring": "^8.0.25",
     "react-toastify": "^6.0.5",
     "regenerator-runtime": "^0.14.0",
-    "scroll-into-view-if-needed": "1.1.0",
+    "scroll-into-view-if-needed": "^2.2.20",
     "styled-system": "^5.1.5",
     "use-measure": "^0.2.2"
   },