@sproutsocial/racine 20.4.0 → 20.4.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # 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

package/commonjs/Tooltip/Tooltip.js

@@ -8,8 +8,8 @@ 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 = ["appearance", "children", "onFocus", "onBlur", "onMouseEnter", "onMouseLeave"],
-  _excluded2 = ["content", "children", "enterDelay", "placement", "appearance", "zIndex", "qa", "popoutProps", "truncated"];
+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; }
@@ -40,10 +40,14 @@ var TooltipBubble = function TooltipBubble(_ref) {
     children = _ref.children,
     onFocus = _ref.onFocus,
     onBlur = _ref.onBlur,
-    onMouseEnter = _ref.onMouseEnter,
-    onMouseLeave = _ref.onMouseLeave,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(_styles.TooltipContent, _extends({
+  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,
     borderRadius: appearance === 'box' ? 500 : '5000em',
@@ -55,10 +59,10 @@ var TooltipBubble = function TooltipBubble(_ref) {
     boxShadow: "medium",
     border: 500,
     borderColor: "container.border.base",
-    onFocus: onFocus,
-    onBlur: onBlur,
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onMouseEnter: handleFocus,
+    onMouseLeave: handleBlur,
     tabIndex: 0
   }, rest), children);
 };
@@ -78,6 +82,8 @@ var Tooltip = function Tooltip(_ref2) {
     popoutProps = _ref2.popoutProps,
     _ref2$truncated = _ref2.truncated,
     truncated = _ref2$truncated === void 0 ? false : _ref2$truncated,
+    onFocus = _ref2.onFocus,
+    onBlur = _ref2.onBlur,
     rest = _objectWithoutProperties(_ref2, _excluded2);
   var _useState = (0, React.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -91,10 +97,12 @@ var Tooltip = function Tooltip(_ref2) {
     _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() {
+  var hide = function hide(e) {
+    onBlur === null || onBlur === void 0 || onBlur(e);
     setShouldShow(false);
   };
   var exitDelay = _seedsMotionUnitless.default.MOTION_DURATION_FAST * 1000;
@@ -137,8 +145,6 @@ var Tooltip = function Tooltip(_ref2) {
       appearance: defaultAppearance,
       onFocus: show,
       onBlur: hide,
-      onMouseEnter: show,
-      onMouseLeave: hide,
       "aria-expanded": isOpen,
       "aria-describedby": id
     }, rest), content);

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/Tooltip/Tooltip.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { TypeTooltipProps } from './TooltipTypes';
 /** Core component */
-declare const Tooltip: ({ content, children, enterDelay, placement, appearance, zIndex, qa, popoutProps, truncated, ...rest }: TypeTooltipProps) => JSX.Element;
+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;AA2CzE,qBAAqB;AACrB,QAAA,MAAM,OAAO,0GAWV,gBAAgB,gBAyGlB,CAAC;AAEF,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' | 'onBlur' | 'onFocus' | 'onMouseLeave' | 'onMouseEnter'> {
+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,9 +22,7 @@ export interface TypeTooltipProps extends Omit<TypeBoxProps, 'children' | 'conte
     ariaProps?: Record<string, string>;
 }
 export interface TypeTooltipContent extends Pick<TypeTooltipProps, 'appearance' | 'children'> {
-    onBlur?: (e: React.FocusEvent) => void;
-    onFocus?: (e: React.FocusEvent) => void;
-    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,CACV,YAAY,EACV,UAAU,GACV,SAAS,GACT,QAAQ,GACR,SAAS,GACT,cAAc,GACd,cAAc,CACjB;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,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,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/Tooltip/Tooltip.js

@@ -1,5 +1,5 @@
-var _excluded = ["appearance", "children", "onFocus", "onBlur", "onMouseEnter", "onMouseLeave"],
-  _excluded2 = ["content", "children", "enterDelay", "placement", "appearance", "zIndex", "qa", "popoutProps", "truncated"];
+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; }
@@ -19,7 +19,7 @@ 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 hasAttribute = function hasAttribute(child, attribute) {
   return /*#__PURE__*/React.isValidElement(child) && child.props[attribute] !== undefined;
@@ -32,10 +32,14 @@ var TooltipBubble = function TooltipBubble(_ref) {
     children = _ref.children,
     onFocus = _ref.onFocus,
     onBlur = _ref.onBlur,
-    onMouseEnter = _ref.onMouseEnter,
-    onMouseLeave = _ref.onMouseLeave,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(TooltipContent, _extends({
+  var handleFocus = function handleFocus(e) {
+    onFocus(e);
+  };
+  var handleBlur = function handleBlur(e) {
+    onBlur(e);
+  };
+  return /*#__PURE__*/React.createElement(StyledTooltipContent, _extends({
     role: "tooltip",
     appearance: appearance,
     borderRadius: appearance === 'box' ? 500 : '5000em',
@@ -47,10 +51,10 @@ var TooltipBubble = function TooltipBubble(_ref) {
     boxShadow: "medium",
     border: 500,
     borderColor: "container.border.base",
-    onFocus: onFocus,
-    onBlur: onBlur,
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onMouseEnter: handleFocus,
+    onMouseLeave: handleBlur,
     tabIndex: 0
   }, rest), children);
 };
@@ -70,6 +74,8 @@ var Tooltip = function Tooltip(_ref2) {
     popoutProps = _ref2.popoutProps,
     _ref2$truncated = _ref2.truncated,
     truncated = _ref2$truncated === void 0 ? false : _ref2$truncated,
+    onFocus = _ref2.onFocus,
+    onBlur = _ref2.onBlur,
     rest = _objectWithoutProperties(_ref2, _excluded2);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -83,10 +89,12 @@ var Tooltip = function Tooltip(_ref2) {
     _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() {
+  var hide = function hide(e) {
+    onBlur === null || onBlur === void 0 || onBlur(e);
     setShouldShow(false);
   };
   var exitDelay = MOTION.MOTION_DURATION_FAST * 1000;
@@ -129,8 +137,6 @@ var Tooltip = function Tooltip(_ref2) {
       appearance: defaultAppearance,
       onFocus: show,
       onBlur: hide,
-      onMouseEnter: show,
-      onMouseLeave: hide,
       "aria-expanded": isOpen,
       "aria-describedby": id
     }, rest), content);

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.4.0",
+  "version": "20.4.1",
   "license": "MIT",
   "files": [
     "__flow__",