@sproutsocial/racine 20.3.1 → 20.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/commonjs/Menu/utils/hooks.js +6 -1
  3. package/commonjs/Tooltip/Tooltip.js +79 -104
  4. package/dist/types/Menu/utils/hooks.d.ts.map +1 -1
  5. package/dist/types/Tooltip/Tooltip.d.ts +1 -0
  6. package/dist/types/Tooltip/Tooltip.d.ts.map +1 -1
  7. package/dist/types/Tooltip/TooltipTypes.d.ts +3 -1
  8. package/dist/types/Tooltip/TooltipTypes.d.ts.map +1 -1
  9. package/lib/Menu/utils/hooks.js +6 -1
  10. package/lib/Tooltip/Tooltip.js +79 -104
  11. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,15 @@
1
1
  # Change Log
2
2
 
3
+ ## 20.4.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 98dcd1d61: Upgrades scroll-into-view-if-needed from v1 to v2
8
+
9
+ ### Patch Changes
10
+
11
+ - 98dcd1d61: Refactor tooltip to better address event bubbling and accessibility issues
12
+
3
13
  ## 20.3.1
4
14
 
5
15
  ### Patch Changes
package/commonjs/Menu/utils/hooks.js CHANGED
@@ -164,7 +164,12 @@ function useMenuKeyDown() {
164
164
  return !option.disabled && (!filteredItems || filteredItems.includes(option.index));
165
165
  },
166
166
  callback: function callback(item) {
167
- item.element && (0, _scrollIntoViewIfNeeded.default)(item.element, false);
167
+ if (item.element) {
168
+ (0, _scrollIntoViewIfNeeded.default)(item.element, {
169
+ block: 'nearest',
170
+ scrollMode: 'if-needed'
171
+ });
172
+ }
168
173
  setState({
169
174
  selectionIndex: item.index
170
175
  });
package/commonjs/Tooltip/Tooltip.js CHANGED
@@ -8,12 +8,11 @@ var React = _interopRequireWildcard(require("react"));
8
8
  var _seedsMotionUnitless = _interopRequireDefault(require("@sproutsocial/seeds-motion/dist/seeds-motion-unitless"));
9
9
  var _Popout = _interopRequireDefault(require("../Popout"));
10
10
  var _styles = require("./styles");
11
- var _excluded = ["content", "children", "enterDelay", "placement", "appearance", "zIndex", "qa", "popoutProps", "truncated"],
12
- _excluded2 = ["appearance", "children", "onMouseEnter", "onMouseLeave"];
11
+ var _excluded = ["appearance", "children", "onFocus", "onBlur", "onMouseEnter", "onMouseLeave"],
12
+ _excluded2 = ["content", "children", "enterDelay", "placement", "appearance", "zIndex", "qa", "popoutProps", "truncated"];
13
13
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14
14
  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); }
15
15
  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; }
16
- function _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure " + obj); }
17
16
  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; }
18
17
  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; }
19
18
  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,45 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
26
25
  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; }
27
26
  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; } }
28
27
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
28
+ 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); }
29
29
  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; }
30
30
  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; }
31
- 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); }
32
31
  var idCounter = 0;
33
- var wrapContent = function wrapContent(_ref) {
34
- var isOpen = _ref.isOpen,
35
- content = _ref.content,
36
- contentId = _ref.contentId,
37
- show = _ref.show,
38
- hide = _ref.hide,
39
- Wrapper = _ref.Wrapper,
40
- appearance = _ref.appearance,
41
- ariaProps = _ref.ariaProps,
42
- wrapperStyles = _ref.wrapperStyles;
43
- return /*#__PURE__*/React.createElement(Wrapper, _extends({
32
+ var hasAttribute = function hasAttribute(child, attribute) {
33
+ return /*#__PURE__*/React.isValidElement(child) && child.props[attribute] !== undefined;
34
+ };
35
+
36
+ /** Tooltip Styled Popout wrapper for handling events */
37
+ var TooltipBubble = function TooltipBubble(_ref) {
38
+ var _ref$appearance = _ref.appearance,
39
+ appearance = _ref$appearance === void 0 ? 'pill' : _ref$appearance,
40
+ children = _ref.children,
41
+ onFocus = _ref.onFocus,
42
+ onBlur = _ref.onBlur,
43
+ onMouseEnter = _ref.onMouseEnter,
44
+ onMouseLeave = _ref.onMouseLeave,
45
+ rest = _objectWithoutProperties(_ref, _excluded);
46
+ return /*#__PURE__*/React.createElement(_styles.TooltipContent, _extends({
47
+ role: "tooltip",
44
48
  appearance: appearance,
45
- onFocus: show,
46
- onBlur: hide,
47
- onMouseEnter: show,
48
- onMouseLeave: hide,
49
- style: Object.keys(wrapperStyles).length === 0 ? undefined : wrapperStyles
50
- }, ariaProps), /*#__PURE__*/React.isValidElement(content) ? /*#__PURE__*/React.cloneElement(content, {
51
- 'aria-expanded': isOpen,
52
- 'aria-describedby': contentId
53
- }) : content);
49
+ borderRadius: appearance === 'box' ? 500 : '5000em',
50
+ px: 400,
51
+ py: appearance === 'box' ? 400 : 200,
52
+ m: 200,
53
+ color: "text.body",
54
+ bg: "container.background.base",
55
+ boxShadow: "medium",
56
+ border: 500,
57
+ borderColor: "container.border.base",
58
+ onFocus: onFocus,
59
+ onBlur: onBlur,
60
+ onMouseEnter: onMouseEnter,
61
+ onMouseLeave: onMouseLeave,
62
+ tabIndex: 0
63
+ }, rest), children);
54
64
  };
65
+
66
+ /** Core component */
55
67
  var Tooltip = function Tooltip(_ref2) {
56
68
  var content = _ref2.content,
57
69
  children = _ref2.children,
@@ -66,7 +78,7 @@ var Tooltip = function Tooltip(_ref2) {
66
78
  popoutProps = _ref2.popoutProps,
67
79
  _ref2$truncated = _ref2.truncated,
68
80
  truncated = _ref2$truncated === void 0 ? false : _ref2$truncated,
69
- rest = _objectWithoutProperties(_ref2, _excluded);
81
+ rest = _objectWithoutProperties(_ref2, _excluded2);
70
82
  var _useState = (0, React.useState)(false),
71
83
  _useState2 = _slicedToArray(_useState, 2),
72
84
  shouldShow = _useState2[0],
@@ -75,25 +87,20 @@ var Tooltip = function Tooltip(_ref2) {
75
87
  _useState4 = _slicedToArray(_useState3, 2),
76
88
  isOpen = _useState4[0],
77
89
  setIsOpen = _useState4[1];
78
- var _useState5 = (0, React.useState)(false),
79
- _useState6 = _slicedToArray(_useState5, 2),
80
- isTooltipHovered = _useState6[0],
81
- setIsTooltipHovered = _useState6[1];
82
- var _useState7 = (0, React.useState)("Racine-tooltip-".concat(idCounter++)),
83
- _useState8 = _slicedToArray(_useState7, 1),
84
- id = _useState8[0];
90
+ var _useState5 = (0, React.useState)("Racine-tooltip-".concat(idCounter++)),
91
+ _useState6 = _slicedToArray(_useState5, 1),
92
+ id = _useState6[0];
85
93
  var isInvalidContent = content === null || content === undefined;
86
94
  var show = function show() {
87
95
  return setShouldShow(true);
88
96
  };
89
97
  var hide = function hide() {
90
- if (!isTooltipHovered) {
91
- setShouldShow(false);
92
- }
98
+ setShouldShow(false);
93
99
  };
94
100
  var exitDelay = _seedsMotionUnitless.default.MOTION_DURATION_FAST * 1000;
95
101
  var defaultAppearance = appearance || (_typeof(content) === 'object' ? 'box' : 'pill');
96
- var shouldTooltipContentsBeInteractive = defaultAppearance === 'box';
102
+
103
+ /** Handles all the logic around whether to display/not display */
97
104
  (0, React.useEffect)(function () {
98
105
  var documentBody = document.body;
99
106
  var timeout;
@@ -110,57 +117,34 @@ var Tooltip = function Tooltip(_ref2) {
110
117
  }, enterDelay);
111
118
  } else {
112
119
  timeout = setTimeout(function () {
113
- if (!isTooltipHovered) {
114
- setIsOpen(false);
115
- }
120
+ setIsOpen(false);
116
121
  }, exitDelay);
117
122
  }
118
- documentBody.addEventListener('keydown', onEsc, false);
123
+
124
+ // We only want listeners from the tooltip if its open in the first place
125
+ if (isOpen) {
126
+ documentBody.addEventListener('keydown', onEsc, false);
127
+ }
119
128
  return function () {
120
129
  documentBody.removeEventListener('keydown', onEsc, false);
121
130
  clearTimeout(timeout);
122
131
  };
123
- }, [isOpen, setShouldShow, shouldShow, enterDelay, exitDelay, isTooltipHovered]);
124
- var wrappedContent = wrapContent({
125
- isOpen: isOpen,
126
- content: content,
127
- contentId: id,
128
- show: shouldTooltipContentsBeInteractive ? show : undefined,
129
- hide: shouldTooltipContentsBeInteractive ? hide : undefined,
130
- Wrapper: Content,
131
- appearance: defaultAppearance,
132
- ariaProps: _objectSpread(_objectSpread({}, rest), {}, {
133
- id: id,
134
- tabIndex: 0
135
- }),
136
- wrapperStyles: {},
137
- onMouseEnter: function onMouseEnter() {
138
- return setIsTooltipHovered(true);
139
- },
140
- onMouseLeave: function onMouseLeave() {
141
- return setIsTooltipHovered(false);
142
- }
143
- });
144
- _objectDestructuringEmpty(isOpen ? {} : {});
145
- var wrapperStylesForWrappedChildren = truncated ? {
146
- overflow: 'hidden',
147
- textOverflow: 'ellipsis',
148
- whiteSpace: 'nowrap'
149
- } : {};
150
- // Wraps the triggering element and passes props down
151
- var wrappedChildren = wrapContent({
152
- isOpen: isOpen,
153
- content: children,
154
- contentId: id,
155
- show: show,
156
- hide: hide,
157
- Wrapper: 'span',
158
- appearance: defaultAppearance,
159
- ariaProps: {},
160
- wrapperStyles: wrapperStylesForWrappedChildren
161
- });
132
+ }, [isOpen, setShouldShow, shouldShow, enterDelay, exitDelay]);
133
+
134
+ /** The wrapped content of whats inside the Tooltip */
135
+ var TooltipContent = function TooltipContent() {
136
+ return /*#__PURE__*/React.createElement(TooltipBubble, _extends({
137
+ appearance: defaultAppearance,
138
+ onFocus: show,
139
+ onBlur: hide,
140
+ onMouseEnter: show,
141
+ onMouseLeave: hide,
142
+ "aria-expanded": isOpen,
143
+ "aria-describedby": id
144
+ }, rest), content);
145
+ };
162
146
  return /*#__PURE__*/React.createElement(_Popout.default, _extends({
163
- content: !isInvalidContent ? wrappedContent : undefined,
147
+ content: !isInvalidContent ? TooltipContent : undefined,
164
148
  isOpen: isOpen,
165
149
  placement: placement,
166
150
  qa: _objectSpread({
@@ -172,30 +156,21 @@ var Tooltip = function Tooltip(_ref2) {
172
156
  "aria-haspopup": "false",
173
157
  display: truncated ? 'flex' : undefined,
174
158
  disableWrapperAria: true // required so that the child span doesnt take in redundant aria props
175
- }, popoutProps), wrappedChildren);
176
- };
177
- var Content = function Content(_ref4) {
178
- var _ref4$appearance = _ref4.appearance,
179
- appearance = _ref4$appearance === void 0 ? 'pill' : _ref4$appearance,
180
- children = _ref4.children,
181
- onMouseEnter = _ref4.onMouseEnter,
182
- onMouseLeave = _ref4.onMouseLeave,
183
- rest = _objectWithoutProperties(_ref4, _excluded2);
184
- return /*#__PURE__*/React.createElement(_styles.TooltipContent, _extends({
185
- role: "tooltip",
186
- appearance: appearance,
187
- borderRadius: appearance === 'box' ? 500 : '5000em',
188
- px: 400,
189
- py: appearance === 'box' ? 400 : 200,
190
- m: 200,
191
- color: "text.body",
192
- bg: "container.background.base",
193
- boxShadow: "medium",
194
- border: 500,
195
- borderColor: "container.border.base",
196
- onMouseEnter: onMouseEnter,
197
- onMouseLeave: onMouseLeave
198
- }, rest), children);
159
+ }, popoutProps), /*#__PURE__*/React.createElement("span", {
160
+ onBlur: hide,
161
+ onFocus: show,
162
+ onMouseEnter: show,
163
+ onMouseLeave: hide,
164
+ style: truncated ? {
165
+ overflow: 'hidden',
166
+ textOverflow: 'ellipsis',
167
+ whiteSpace: 'nowrap'
168
+ } : {}
169
+ }, /*#__PURE__*/React.isValidElement(children) ? /*#__PURE__*/React.cloneElement(children, {
170
+ //** 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 */
171
+ 'aria-expanded': hasAttribute(children, 'aria-expanded') ? children.props['aria-expanded'] : isOpen,
172
+ 'aria-describedby': id
173
+ }) : children));
199
174
  };
200
175
  var _default = Tooltip;
201
176
  exports.default = _default;
package/dist/types/Menu/utils/hooks.d.ts.map CHANGED
@@ -1 +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"}
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;;;EA4I7B"}
package/dist/types/Tooltip/Tooltip.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import type { TypeTooltipProps } from './TooltipTypes';
3
+ /** Core component */
3
4
  declare const Tooltip: ({ content, children, enterDelay, placement, appearance, zIndex, qa, popoutProps, truncated, ...rest }: TypeTooltipProps) => JSX.Element;
4
5
  export default Tooltip;
5
6
  //# sourceMappingURL=Tooltip.d.ts.map
package/dist/types/Tooltip/Tooltip.d.ts.map CHANGED
@@ -1 +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"}
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"}
package/dist/types/Tooltip/TooltipTypes.d.ts CHANGED
@@ -2,7 +2,7 @@ import * as React from 'react';
2
2
  import type { EnumPlacements, TypePopoutProps } from '../Popout/index';
3
3
  import { TypeQaProps } from '../types/shared';
4
4
  import { TypeBoxProps } from '../Box';
5
- export interface TypeTooltipProps extends Omit<TypeBoxProps, 'children' | 'content'> {
5
+ export interface TypeTooltipProps extends Omit<TypeBoxProps, 'children' | 'content' | 'onBlur' | 'onFocus' | 'onMouseLeave' | 'onMouseEnter'> {
6
6
  /** The content that the tooltip should be attached to. Hovering or focusing this element will cause the tooltip to appear */
7
7
  children: React.ReactNode;
8
8
  /** The content to be displayed within the tooltip. If there is no content, just the children are rendered */
@@ -22,6 +22,8 @@ export interface TypeTooltipProps extends Omit<TypeBoxProps, 'children' | 'conte
22
22
  ariaProps?: Record<string, string>;
23
23
  }
24
24
  export interface TypeTooltipContent extends Pick<TypeTooltipProps, 'appearance' | 'children'> {
25
+ onBlur?: (e: React.FocusEvent) => void;
26
+ onFocus?: (e: React.FocusEvent) => void;
25
27
  onMouseEnter?: (e: React.MouseEvent) => void;
26
28
  onMouseLeave?: (e: React.MouseEvent) => void;
27
29
  }
package/dist/types/Tooltip/TooltipTypes.d.ts.map CHANGED
@@ -1 +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"}
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"}
package/lib/Menu/utils/hooks.js CHANGED
@@ -152,7 +152,12 @@ export function useMenuKeyDown() {
152
152
  return !option.disabled && (!filteredItems || filteredItems.includes(option.index));
153
153
  },
154
154
  callback: function callback(item) {
155
- item.element && scrollIntoViewIfNeeded(item.element, false);
155
+ if (item.element) {
156
+ scrollIntoViewIfNeeded(item.element, {
157
+ block: 'nearest',
158
+ scrollMode: 'if-needed'
159
+ });
160
+ }
156
161
  setState({
157
162
  selectionIndex: item.index
158
163
  });
package/lib/Tooltip/Tooltip.js CHANGED
@@ -1,6 +1,5 @@
1
- var _excluded = ["content", "children", "enterDelay", "placement", "appearance", "zIndex", "qa", "popoutProps", "truncated"],
2
- _excluded2 = ["appearance", "children", "onMouseEnter", "onMouseLeave"];
3
- function _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure " + obj); }
1
+ var _excluded = ["appearance", "children", "onFocus", "onBlur", "onMouseEnter", "onMouseLeave"],
2
+ _excluded2 = ["content", "children", "enterDelay", "placement", "appearance", "zIndex", "qa", "popoutProps", "truncated"];
4
3
  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; }
5
4
  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; }
6
5
  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,50 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
13
12
  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; }
14
13
  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; } }
15
14
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
15
+ 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); }
16
16
  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; }
17
17
  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; }
18
- 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); }
19
18
  import * as React from 'react';
20
19
  import { useState, useEffect } from 'react';
21
20
  import MOTION from '@sproutsocial/seeds-motion/dist/seeds-motion-unitless';
22
21
  import Popout from "../Popout";
23
22
  import { TooltipContent } from "./styles";
24
23
  var idCounter = 0;
25
- var wrapContent = function wrapContent(_ref) {
26
- var isOpen = _ref.isOpen,
27
- content = _ref.content,
28
- contentId = _ref.contentId,
29
- show = _ref.show,
30
- hide = _ref.hide,
31
- Wrapper = _ref.Wrapper,
32
- appearance = _ref.appearance,
33
- ariaProps = _ref.ariaProps,
34
- wrapperStyles = _ref.wrapperStyles;
35
- return /*#__PURE__*/React.createElement(Wrapper, _extends({
24
+ var hasAttribute = function hasAttribute(child, attribute) {
25
+ return /*#__PURE__*/React.isValidElement(child) && child.props[attribute] !== undefined;
26
+ };
27
+
28
+ /** Tooltip Styled Popout wrapper for handling events */
29
+ var TooltipBubble = function TooltipBubble(_ref) {
30
+ var _ref$appearance = _ref.appearance,
31
+ appearance = _ref$appearance === void 0 ? 'pill' : _ref$appearance,
32
+ children = _ref.children,
33
+ onFocus = _ref.onFocus,
34
+ onBlur = _ref.onBlur,
35
+ onMouseEnter = _ref.onMouseEnter,
36
+ onMouseLeave = _ref.onMouseLeave,
37
+ rest = _objectWithoutProperties(_ref, _excluded);
38
+ return /*#__PURE__*/React.createElement(TooltipContent, _extends({
39
+ role: "tooltip",
36
40
  appearance: appearance,
37
- onFocus: show,
38
- onBlur: hide,
39
- onMouseEnter: show,
40
- onMouseLeave: hide,
41
- style: Object.keys(wrapperStyles).length === 0 ? undefined : wrapperStyles
42
- }, ariaProps), /*#__PURE__*/React.isValidElement(content) ? /*#__PURE__*/React.cloneElement(content, {
43
- 'aria-expanded': isOpen,
44
- 'aria-describedby': contentId
45
- }) : content);
41
+ borderRadius: appearance === 'box' ? 500 : '5000em',
42
+ px: 400,
43
+ py: appearance === 'box' ? 400 : 200,
44
+ m: 200,
45
+ color: "text.body",
46
+ bg: "container.background.base",
47
+ boxShadow: "medium",
48
+ border: 500,
49
+ borderColor: "container.border.base",
50
+ onFocus: onFocus,
51
+ onBlur: onBlur,
52
+ onMouseEnter: onMouseEnter,
53
+ onMouseLeave: onMouseLeave,
54
+ tabIndex: 0
55
+ }, rest), children);
46
56
  };
57
+
58
+ /** Core component */
47
59
  var Tooltip = function Tooltip(_ref2) {
48
60
  var content = _ref2.content,
49
61
  children = _ref2.children,
@@ -58,7 +70,7 @@ var Tooltip = function Tooltip(_ref2) {
58
70
  popoutProps = _ref2.popoutProps,
59
71
  _ref2$truncated = _ref2.truncated,
60
72
  truncated = _ref2$truncated === void 0 ? false : _ref2$truncated,
61
- rest = _objectWithoutProperties(_ref2, _excluded);
73
+ rest = _objectWithoutProperties(_ref2, _excluded2);
62
74
  var _useState = useState(false),
63
75
  _useState2 = _slicedToArray(_useState, 2),
64
76
  shouldShow = _useState2[0],
@@ -67,25 +79,20 @@ var Tooltip = function Tooltip(_ref2) {
67
79
  _useState4 = _slicedToArray(_useState3, 2),
68
80
  isOpen = _useState4[0],
69
81
  setIsOpen = _useState4[1];
70
- var _useState5 = useState(false),
71
- _useState6 = _slicedToArray(_useState5, 2),
72
- isTooltipHovered = _useState6[0],
73
- setIsTooltipHovered = _useState6[1];
74
- var _useState7 = useState("Racine-tooltip-".concat(idCounter++)),
75
- _useState8 = _slicedToArray(_useState7, 1),
76
- id = _useState8[0];
82
+ var _useState5 = useState("Racine-tooltip-".concat(idCounter++)),
83
+ _useState6 = _slicedToArray(_useState5, 1),
84
+ id = _useState6[0];
77
85
  var isInvalidContent = content === null || content === undefined;
78
86
  var show = function show() {
79
87
  return setShouldShow(true);
80
88
  };
81
89
  var hide = function hide() {
82
- if (!isTooltipHovered) {
83
- setShouldShow(false);
84
- }
90
+ setShouldShow(false);
85
91
  };
86
92
  var exitDelay = MOTION.MOTION_DURATION_FAST * 1000;
87
93
  var defaultAppearance = appearance || (_typeof(content) === 'object' ? 'box' : 'pill');
88
- var shouldTooltipContentsBeInteractive = defaultAppearance === 'box';
94
+
95
+ /** Handles all the logic around whether to display/not display */
89
96
  useEffect(function () {
90
97
  var documentBody = document.body;
91
98
  var timeout;
@@ -102,57 +109,34 @@ var Tooltip = function Tooltip(_ref2) {
102
109
  }, enterDelay);
103
110
  } else {
104
111
  timeout = setTimeout(function () {
105
- if (!isTooltipHovered) {
106
- setIsOpen(false);
107
- }
112
+ setIsOpen(false);
108
113
  }, exitDelay);
109
114
  }
110
- documentBody.addEventListener('keydown', onEsc, false);
115
+
116
+ // We only want listeners from the tooltip if its open in the first place
117
+ if (isOpen) {
118
+ documentBody.addEventListener('keydown', onEsc, false);
119
+ }
111
120
  return function () {
112
121
  documentBody.removeEventListener('keydown', onEsc, false);
113
122
  clearTimeout(timeout);
114
123
  };
115
- }, [isOpen, setShouldShow, shouldShow, enterDelay, exitDelay, isTooltipHovered]);
116
- var wrappedContent = wrapContent({
117
- isOpen: isOpen,
118
- content: content,
119
- contentId: id,
120
- show: shouldTooltipContentsBeInteractive ? show : undefined,
121
- hide: shouldTooltipContentsBeInteractive ? hide : undefined,
122
- Wrapper: Content,
123
- appearance: defaultAppearance,
124
- ariaProps: _objectSpread(_objectSpread({}, rest), {}, {
125
- id: id,
126
- tabIndex: 0
127
- }),
128
- wrapperStyles: {},
129
- onMouseEnter: function onMouseEnter() {
130
- return setIsTooltipHovered(true);
131
- },
132
- onMouseLeave: function onMouseLeave() {
133
- return setIsTooltipHovered(false);
134
- }
135
- });
136
- _objectDestructuringEmpty(isOpen ? {} : {});
137
- var wrapperStylesForWrappedChildren = truncated ? {
138
- overflow: 'hidden',
139
- textOverflow: 'ellipsis',
140
- whiteSpace: 'nowrap'
141
- } : {};
142
- // Wraps the triggering element and passes props down
143
- var wrappedChildren = wrapContent({
144
- isOpen: isOpen,
145
- content: children,
146
- contentId: id,
147
- show: show,
148
- hide: hide,
149
- Wrapper: 'span',
150
- appearance: defaultAppearance,
151
- ariaProps: {},
152
- wrapperStyles: wrapperStylesForWrappedChildren
153
- });
124
+ }, [isOpen, setShouldShow, shouldShow, enterDelay, exitDelay]);
125
+
126
+ /** The wrapped content of whats inside the Tooltip */
127
+ var TooltipContent = function TooltipContent() {
128
+ return /*#__PURE__*/React.createElement(TooltipBubble, _extends({
129
+ appearance: defaultAppearance,
130
+ onFocus: show,
131
+ onBlur: hide,
132
+ onMouseEnter: show,
133
+ onMouseLeave: hide,
134
+ "aria-expanded": isOpen,
135
+ "aria-describedby": id
136
+ }, rest), content);
137
+ };
154
138
  return /*#__PURE__*/React.createElement(Popout, _extends({
155
- content: !isInvalidContent ? wrappedContent : undefined,
139
+ content: !isInvalidContent ? TooltipContent : undefined,
156
140
  isOpen: isOpen,
157
141
  placement: placement,
158
142
  qa: _objectSpread({
@@ -164,29 +148,20 @@ var Tooltip = function Tooltip(_ref2) {
164
148
  "aria-haspopup": "false",
165
149
  display: truncated ? 'flex' : undefined,
166
150
  disableWrapperAria: true // required so that the child span doesnt take in redundant aria props
167
- }, popoutProps), wrappedChildren);
168
- };
169
- var Content = function Content(_ref4) {
170
- var _ref4$appearance = _ref4.appearance,
171
- appearance = _ref4$appearance === void 0 ? 'pill' : _ref4$appearance,
172
- children = _ref4.children,
173
- onMouseEnter = _ref4.onMouseEnter,
174
- onMouseLeave = _ref4.onMouseLeave,
175
- rest = _objectWithoutProperties(_ref4, _excluded2);
176
- return /*#__PURE__*/React.createElement(TooltipContent, _extends({
177
- role: "tooltip",
178
- appearance: appearance,
179
- borderRadius: appearance === 'box' ? 500 : '5000em',
180
- px: 400,
181
- py: appearance === 'box' ? 400 : 200,
182
- m: 200,
183
- color: "text.body",
184
- bg: "container.background.base",
185
- boxShadow: "medium",
186
- border: 500,
187
- borderColor: "container.border.base",
188
- onMouseEnter: onMouseEnter,
189
- onMouseLeave: onMouseLeave
190
- }, rest), children);
151
+ }, popoutProps), /*#__PURE__*/React.createElement("span", {
152
+ onBlur: hide,
153
+ onFocus: show,
154
+ onMouseEnter: show,
155
+ onMouseLeave: hide,
156
+ style: truncated ? {
157
+ overflow: 'hidden',
158
+ textOverflow: 'ellipsis',
159
+ whiteSpace: 'nowrap'
160
+ } : {}
161
+ }, /*#__PURE__*/React.isValidElement(children) ? /*#__PURE__*/React.cloneElement(children, {
162
+ //** 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 */
163
+ 'aria-expanded': hasAttribute(children, 'aria-expanded') ? children.props['aria-expanded'] : isOpen,
164
+ 'aria-describedby': id
165
+ }) : children));
191
166
  };
192
167
  export default Tooltip;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sproutsocial/racine",
3
- "version": "20.3.1",
3
+ "version": "20.4.0",
4
4
  "license": "MIT",
5
5
  "files": [
6
6
  "__flow__",
@@ -81,7 +81,7 @@
81
81
  "react-spring": "^8.0.25",
82
82
  "react-toastify": "^6.0.5",
83
83
  "regenerator-runtime": "^0.14.0",
84
- "scroll-into-view-if-needed": "1.1.0",
84
+ "scroll-into-view-if-needed": "^2.2.20",
85
85
  "styled-system": "^5.1.5",
86
86
  "use-measure": "^0.2.2"
87
87
  },