@sproutsocial/racine 17.0.0 → 19.0.0

package/lib/ChartLegend/useChartLabels.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { useTheme } from 'styled-components';
+import { Label, Swatch } from "./styles";
+import { Text } from "../Text";
+var getSwatchColor = function getSwatchColor(theme, index, RacineThemeColors) {
+  var COMPARE_THEME = [RacineThemeColors.dataviz.map['1'], RacineThemeColors.dataviz.map['10'], RacineThemeColors.dataviz.map['11'], RacineThemeColors.dataviz.map['2']];
+  var CONTRAST_THEME = [RacineThemeColors.dataviz.map['1'], RacineThemeColors.dataviz.map['2'], RacineThemeColors.dataviz.map['3'], RacineThemeColors.dataviz.map['4'], RacineThemeColors.dataviz.map['5'], RacineThemeColors.dataviz.map['6'], RacineThemeColors.dataviz.map['4'], RacineThemeColors.dataviz.map['5'], RacineThemeColors.dataviz.map['6'], RacineThemeColors.dataviz.map['7'], RacineThemeColors.dataviz.map['8'], RacineThemeColors.dataviz.map['9'], RacineThemeColors.dataviz.map['10']];
+  var EXTENDED_THEME = [RacineThemeColors.dataviz.map['7'], RacineThemeColors.dataviz.map['1'], RacineThemeColors.dataviz.map['5'], RacineThemeColors.dataviz.map['11'], RacineThemeColors.dataviz.map['6'], RacineThemeColors.dataviz.map['3'], RacineThemeColors.dataviz.map['18'], RacineThemeColors.dataviz.map['8'], RacineThemeColors.dataviz.map['4'], RacineThemeColors.dataviz.map['13'], RacineThemeColors.dataviz.map['16'], RacineThemeColors.dataviz.map['10'], RacineThemeColors.dataviz.map['14'], RacineThemeColors.dataviz.map['2'], RacineThemeColors.dataviz.map['15'], RacineThemeColors.dataviz.map['12'], RacineThemeColors.dataviz.map['9'], RacineThemeColors.dataviz.map['17'], RacineThemeColors.dataviz.map['20'], RacineThemeColors.dataviz.map['19']];
+  var THEME_MAP = {
+    COMPARE: COMPARE_THEME,
+    CONTRAST: CONTRAST_THEME,
+    EXTENDED: EXTENDED_THEME,
+    DATAVIZROTATION: RacineThemeColors.dataviz.list
+  };
+  return THEME_MAP[theme.toUpperCase()][index];
+};
+export var useChartLabels = function useChartLabels(legendLabels, theme) {
+  var racineTheme = useTheme();
+  var colors = racineTheme.colors;
+  return legendLabels.map(function (label, i) {
+    var labelColor = label.color ? label.color : getSwatchColor(theme, i, colors);
+    return /*#__PURE__*/React.createElement(Label, {
+      key: label.name
+    }, /*#__PURE__*/React.createElement(Swatch, {
+      bg: labelColor,
+      "data-qa-swatch": ""
+    }), /*#__PURE__*/React.createElement(Text, {
+      as: "div",
+      fontSize: 200,
+      breakWord: true
+    }, label.name));
+  });
+};

package/lib/Collapsible/Collapsible.js

@@ -17,7 +17,7 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import * as React from 'react';
 import { useState, useRef, useContext, useEffect } from 'react';
-import useMeasure from 'use-measure';
+import { useMeasure } from "../utils/use-measure";
 import Box from "../Box";
 import { CollapsingBox } from "./styles";
 var idCounter = 0;

package/lib/Link/Link.js

@@ -11,7 +11,8 @@ var Link = function Link(_ref) {
     disabled = _ref.disabled,
     onClick = _ref.onClick,
     as = _ref.as,
-    underline = _ref.underline,
+    _ref$underline = _ref.underline,
+    underline = _ref$underline === void 0 ? true : _ref$underline,
     _ref$qa = _ref.qa,
     qa = _ref$qa === void 0 ? {} : _ref$qa,
     rest = _objectWithoutProperties(_ref, _excluded);

package/lib/Menu/Menu.js

@@ -237,29 +237,49 @@ export var MenuRadio = function MenuRadio(props) {
     role: MENU_ITEM_ROLES.RADIO
   }, props));
 };
-export var MenuGroup = function MenuGroup(_ref2) {
-  var children = _ref2.children,
-    title = _ref2.title,
-    titleAs = _ref2.titleAs,
-    _ref2$disabled = _ref2.disabled,
-    isDisabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
-    props = _objectWithoutProperties(_ref2, _excluded2);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, title && /*#__PURE__*/React.createElement(Box, {
-    pl: 400,
+var MenuTitle = styled(Text).withConfig({
+  displayName: "Menu__MenuTitle",
+  componentId: "sc-1jmjosz-0"
+})(["font-weight:600;padding-left:", ";padding-top:", ";padding-bottom:", ";color:", ";"], function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.space[300];
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.space[200];
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.space[300];
+}, function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.colors.text.headline;
+});
+var _StyledMenuTitle = styled(MenuTitle).withConfig({
+  displayName: "Menu___StyledMenuTitle",
+  componentId: "sc-1jmjosz-1"
+})(["", ""], function (p) {
+  return p.$_css;
+});
+export var MenuGroup = function MenuGroup(_ref6) {
+  var children = _ref6.children,
+    title = _ref6.title,
+    titleAs = _ref6.titleAs,
+    _ref6$disabled = _ref6.disabled,
+    isDisabled = _ref6$disabled === void 0 ? false : _ref6$disabled,
+    props = _objectWithoutProperties(_ref6, _excluded2);
+  var menuTitleId = uniqueId('menu-title-');
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, _extends({
+    p: 300,
+    role: "group",
+    "aria-labelledby": title ? menuTitleId : undefined,
     borderTop: "1px solid",
-    borderColor: "container.border.base",
-    mt: "-1px"
-  }, /*#__PURE__*/React.createElement(_StyledText, {
-    forwardedAs: titleAs || 'div',
+    borderColor: "container.border.base"
+  }, props), title && /*#__PURE__*/React.createElement(_StyledMenuTitle, {
+    id: menuTitleId,
+    role: "presentation",
     fontSize: 200,
-    fontWeight: 600,
-    mt: 350,
-    color: "text.headline",
+    forwardedAs: titleAs || 'li',
     $_css: isDisabled ? disabled : undefined
-  }, title)), /*#__PURE__*/React.createElement(Box, _extends({}, props, {
-    p: 300,
-    role: "group"
-  }), children));
+  }, title), children));
 };
 export var MenuDivider = function MenuDivider(props) {
   return /*#__PURE__*/React.createElement(Box, _extends({
@@ -302,12 +322,12 @@ var MenuFilterInput = function MenuFilterInput(props) {
     onBlur: handleOnBlur
   }));
 };
-var MenuItems = function MenuItems(_ref3) {
-  var children = _ref3.children,
-    role = _ref3.role,
-    multiselect = _ref3.multiselect,
-    innerRef = _ref3.innerRef,
-    props = _objectWithoutProperties(_ref3, _excluded3);
+var MenuItems = function MenuItems(_ref7) {
+  var children = _ref7.children,
+    role = _ref7.role,
+    multiselect = _ref7.multiselect,
+    innerRef = _ref7.innerRef,
+    props = _objectWithoutProperties(_ref7, _excluded3);
   var _useMenuKeyDown = useMenuKeyDown(),
     handleKeyDown = _useMenuKeyDown.handleKeyDown,
     activeDescendent = _useMenuKeyDown.activeDescendent;
@@ -327,15 +347,15 @@ var MenuItems = function MenuItems(_ref3) {
     overflow: "hidden"
   }), children);
 };
-export var Menu = function Menu(_ref4) {
-  var _ref4$role = _ref4.role,
-    role = _ref4$role === void 0 ? MENU_ROLES.MENU : _ref4$role,
-    children = _ref4.children,
-    onChange = _ref4.onChange,
-    value = _ref4.value,
-    multiselect = _ref4.multiselect,
-    innerRef = _ref4.innerRef,
-    props = _objectWithoutProperties(_ref4, _excluded4);
+export var Menu = function Menu(_ref8) {
+  var _ref8$role = _ref8.role,
+    role = _ref8$role === void 0 ? MENU_ROLES.MENU : _ref8$role,
+    children = _ref8.children,
+    onChange = _ref8.onChange,
+    value = _ref8.value,
+    multiselect = _ref8.multiselect,
+    innerRef = _ref8.innerRef,
+    props = _objectWithoutProperties(_ref8, _excluded4);
   var _useDescendants = useDescendants(),
     _useDescendants2 = _slicedToArray(_useDescendants, 2),
     descendants = _useDescendants2[0],
@@ -392,20 +412,20 @@ Menu.Divider = MenuDivider;
 Menu.FilterInput = MenuFilterInput;
 var CustomPopoutContent = styled(Popout.Content).withConfig({
   displayName: "Menu__CustomPopoutContent",
-  componentId: "sc-1jmjosz-0"
+  componentId: "sc-1jmjosz-2"
 })(["padding:0;margin-left:0;margin-right:0;"]);
-export var MenuButton = function MenuButton(_ref5) {
-  var content = _ref5.content,
-    popoutProps = _ref5.popoutProps,
-    children = _ref5.children,
-    _onClick = _ref5.onClick,
-    _ref5$closeOnItemClic = _ref5.closeOnItemClick,
-    closeOnItemClick = _ref5$closeOnItemClic === void 0 ? true : _ref5$closeOnItemClic,
-    _ref5$id = _ref5.id,
-    id = _ref5$id === void 0 ? uniqueId('MenuButton-') : _ref5$id,
-    _ref5$placement = _ref5.placement,
-    placement = _ref5$placement === void 0 ? 'bottom' : _ref5$placement,
-    props = _objectWithoutProperties(_ref5, _excluded5);
+export var MenuButton = function MenuButton(_ref9) {
+  var content = _ref9.content,
+    popoutProps = _ref9.popoutProps,
+    children = _ref9.children,
+    _onClick = _ref9.onClick,
+    _ref9$closeOnItemClic = _ref9.closeOnItemClick,
+    closeOnItemClick = _ref9$closeOnItemClic === void 0 ? true : _ref9$closeOnItemClic,
+    _ref9$id = _ref9.id,
+    id = _ref9$id === void 0 ? uniqueId('MenuButton-') : _ref9$id,
+    _ref9$placement = _ref9.placement,
+    placement = _ref9$placement === void 0 ? 'bottom' : _ref9$placement,
+    props = _objectWithoutProperties(_ref9, _excluded5);
   var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
     isOpen = _useState6[0],
@@ -445,10 +465,4 @@ export var MenuButton = function MenuButton(_ref5) {
     }
   }), children)));
 };
-export default Menu;
-var _StyledText = styled(Text).withConfig({
-  displayName: "Menu___StyledText",
-  componentId: "sc-1jmjosz-1"
-})(["", ""], function (p) {
-  return p.$_css;
-});
+export default Menu;

package/lib/Menu/styles.js

@@ -44,4 +44,4 @@ export var MenuItemContainer = styled(Box).withConfig({
 export var MenuItemsContainer = styled(Box).withConfig({
   displayName: "styles__MenuItemsContainer",
   componentId: "sc-168zlb1-1"
-})(["list-style-type:none;&:focus{", "}"], focusRing);
+})(["list-style-type:none;&:focus{", "}& > div[role='group']:first-of-type{border-top:none;}"], focusRing);

package/lib/Numeral/Numeral.js

@@ -1,4 +1,4 @@
-var _excluded = ["number", "locale", "format", "currency", "abbreviate", "precision", "qa"];
+var _excluded = ["number", "locale", "format", "currency", "abbreviate", "invalidNumberLabel", "precision", "qa"];
 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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -12,6 +12,7 @@ import * as React from 'react';
 import memoize from 'lru-memoize';
 import { EM_DASH } from "../utils/constants";
 import Tooltip from "../Tooltip";
+import { VisuallyHidden } from "../VisuallyHidden";
 import { DEFAULT_THRESHOLD, MEMO_CACHE_SIZE, COMPARE_OBJECTS, MAX_PRECISION, ABBREV_PRECISION, DefaultPrecisions } from "./constants";
 import { AbbrContainer, Container } from "./styles";
 var _getNumberFormatters = function _getNumberFormatters(options) {
@@ -76,6 +77,7 @@ var normalizeArgs = function normalizeArgs(props) {
     currency = _props$currency === void 0 ? 'USD' : _props$currency,
     _props$abbreviate = props.abbreviate,
     abbreviate = _props$abbreviate === void 0 ? true : _props$abbreviate,
+    invalidNumberLabel = props.invalidNumberLabel,
     precision = props.precision,
     qa = props.qa,
     rest = _objectWithoutProperties(props, _excluded);
@@ -97,6 +99,7 @@ var normalizeArgs = function normalizeArgs(props) {
   return {
     value: value,
     canAbbreviate: canAbbreviate,
+    invalidNumberLabel: invalidNumberLabel,
     options: options,
     qa: qa,
     rest: rest
@@ -106,10 +109,16 @@ var Numeral = function Numeral(props) {
   var _normalizeArgs = normalizeArgs(props),
     value = _normalizeArgs.value,
     canAbbreviate = _normalizeArgs.canAbbreviate,
+    invalidNumberLabel = _normalizeArgs.invalidNumberLabel,
     options = _normalizeArgs.options,
     qa = _normalizeArgs.qa,
     rest = _normalizeArgs.rest;
-  if (!isValidNumber(props.number)) return /*#__PURE__*/React.createElement(Container, qa, EM_DASH);
+  if (!isValidNumber(props.number)) return /*#__PURE__*/React.createElement(React.Fragment, null, invalidNumberLabel &&
+  /*#__PURE__*/
+  // Give screen readers something useful to read off + hide the em dash
+  React.createElement(VisuallyHidden, null, invalidNumberLabel), /*#__PURE__*/React.createElement(Container, _extends({
+    "aria-hidden": true
+  }, qa), EM_DASH));
   var formatters = getNumberFormatters(options);
   var fullText = formatters.standard.format(value);
   if (canAbbreviate) {

package/lib/TableHeaderCell/TableHeaderCell.js

@@ -45,12 +45,14 @@ export var TableHeaderCell = /*#__PURE__*/function (_React$Component) {
       }));
     });
     _defineProperty(_assertThisInitialized(_this), "handleClick", function (e) {
-      e.preventDefault();
       var _this$props = _this.props,
         onClick = _this$props.onClick,
         onSort = _this$props.onSort,
         isSortable = _this$props.isSortable,
         id = _this$props.id;
+      if (onClick || isSortable) {
+        e.preventDefault();
+      }
       if (onClick) {
         // @ts-note: Right now the `onClick` is incorrectly set to consume an HTMLButtonElement event
         onClick(e);

package/lib/Toast/styles.js

@@ -1,8 +1,7 @@
 import styled, { createGlobalStyle } from 'styled-components';
-// TODO: this is something ugly that needs to be fixed
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
-import toastStyles from '!!raw-loader!react-toastify/dist/ReactToastify.css'; // eslint-disable-line import/no-unresolved
+import 'react-toastify/dist/ReactToastify.css';
 import Box from "../Box";
 import Icon from "../Icon";
 var Container = styled(Box).withConfig({
@@ -25,7 +24,7 @@ export var CustomIcon = styled(Icon).withConfig({
 }, function (p) {
   return p.customColor ? undefined : p.theme.colors.icon[p.type];
 });
-export var GlobalToastStyles = createGlobalStyle(["", " .Toastify__toast{box-shadow:", ";background:transparent;}.Toastify__toast:last-of-type{margin-bottom:0;}.Toastify-container-overrides{padding:0;width:360px;}.Toastify-toast-overrides{padding:0;min-height:0;border-radius:2px;}.Toastify__toast-container--bottom-right{bottom:", ";right:", ";}@media only screen and (max-width:480px){.Toastify-container-overrides{min-width:initial;}}"], toastStyles, function (p) {
+export var GlobalToastStyles = createGlobalStyle([".Toastify__toast{box-shadow:", " !important;background:transparent !important;}.Toastify__toast:last-of-type{margin-bottom:0 !important;}.Toastify-container-overrides{padding:0 !important;width:360px !important;}.Toastify-toast-overrides{padding:0 !important;min-height:0 !important;border-radius:2px !important;}.Toastify__toast-container--bottom-right{bottom:", " !important;right:", " !important;}@media only screen and (max-width:480px){.Toastify-container-overrides{min-width:initial !important;}}"], function (p) {
   return p.theme.shadows.low;
 }, function (p) {
   return p.theme.space[400];

package/lib/index.flow.js

@@ -42,7 +42,6 @@ export { default as Menu, MenuButton, MenuButtonContext, MenuItemContainer } fro
 export { default as Message } from "./Message/index.flow";
 export { default as Modal } from "./Modal/index.flow";
 export { default as Numeral } from "./Numeral/index.flow";
-export { default as OverflowList } from "./OverflowList/index.flow";
 export { default as PartnerLogo } from "./PartnerLogo/index.flow";
 export { default as Popout } from "./Popout/index.flow";
 export { default as Radio } from "./Radio/index.flow";
@@ -77,9 +76,4 @@ export { legacyBadgeColors } from "./Badge/index.flow";
 /**
  * @deprecated Alert has been renamed to Banner
  */
-export { default as Alert } from "./Banner/index.flow";
-
-/**
- * Should this be exported? @deprecated?
- */
-export { DataVizRotation } from "./dataviz/index.flow";
+export { default as Alert } from "./Banner/index.flow";

package/lib/index.js

@@ -15,6 +15,7 @@ export { default as ThemeProvider } from "./ThemeProvider";
 export { useSelect, useMultiselect, useTextContent } from "./utils/hooks";
 export { visuallyHidden, focusRing, disabled } from "./utils/mixins";
 export { useInteractiveColor } from "./utils/useInteractiveColor";
+export { useMeasure } from "./utils/use-measure";
 
 /* Components */
 export * from "./Avatar";
@@ -47,7 +48,6 @@ export * from "./Menu";
 export * from "./Message";
 export * from "./Modal";
 export * from "./Numeral";
-export * from "./OverflowList";
 export * from "./PartnerLogo";
 export * from "./Popout";
 export * from "./Radio";
@@ -74,9 +74,4 @@ export * from "./VisuallyHidden";
 /**
  * @deprecated Alert has been renamed to Banner
  */
-export { Banner as Alert } from "./Banner";
-
-/**
- * Should this be exported? @deprecated?
- */
-export * from "./dataviz";
+export { Banner as Alert } from "./Banner";

package/lib/themes/light/theme.js

@@ -286,6 +286,34 @@ export var typography = {
   1100: TYPOGRAPHY.TYPOGRAPHY_SIZE_1100,
   1200: TYPOGRAPHY.TYPOGRAPHY_SIZE_1200
 };
+export var fontSizes = {
+  100: TYPOGRAPHY.TYPOGRAPHY_SIZE_100.fontSize,
+  200: TYPOGRAPHY.TYPOGRAPHY_SIZE_200.fontSize,
+  300: TYPOGRAPHY.TYPOGRAPHY_SIZE_300.fontSize,
+  400: TYPOGRAPHY.TYPOGRAPHY_SIZE_400.fontSize,
+  500: TYPOGRAPHY.TYPOGRAPHY_SIZE_500.fontSize,
+  600: TYPOGRAPHY.TYPOGRAPHY_SIZE_600.fontSize,
+  700: TYPOGRAPHY.TYPOGRAPHY_SIZE_700.fontSize,
+  800: TYPOGRAPHY.TYPOGRAPHY_SIZE_800.fontSize,
+  900: TYPOGRAPHY.TYPOGRAPHY_SIZE_900.fontSize,
+  1000: TYPOGRAPHY.TYPOGRAPHY_SIZE_1000.fontSize,
+  1100: TYPOGRAPHY.TYPOGRAPHY_SIZE_1100.fontSize,
+  1200: TYPOGRAPHY.TYPOGRAPHY_SIZE_1200.fontSize
+};
+export var lineHeights = {
+  100: TYPOGRAPHY.TYPOGRAPHY_SIZE_100.lineHeight,
+  200: TYPOGRAPHY.TYPOGRAPHY_SIZE_200.lineHeight,
+  300: TYPOGRAPHY.TYPOGRAPHY_SIZE_300.lineHeight,
+  400: TYPOGRAPHY.TYPOGRAPHY_SIZE_400.lineHeight,
+  500: TYPOGRAPHY.TYPOGRAPHY_SIZE_500.lineHeight,
+  600: TYPOGRAPHY.TYPOGRAPHY_SIZE_600.lineHeight,
+  700: TYPOGRAPHY.TYPOGRAPHY_SIZE_700.lineHeight,
+  800: TYPOGRAPHY.TYPOGRAPHY_SIZE_800.lineHeight,
+  900: TYPOGRAPHY.TYPOGRAPHY_SIZE_900.lineHeight,
+  1000: TYPOGRAPHY.TYPOGRAPHY_SIZE_1000.lineHeight,
+  1100: TYPOGRAPHY.TYPOGRAPHY_SIZE_1100.lineHeight,
+  1200: TYPOGRAPHY.TYPOGRAPHY_SIZE_1200.lineHeight
+};
 export var fontFamily = TYPOGRAPHY.TYPOGRAPHY_FAMILY;
 export var fontWeights = {
   normal: TYPOGRAPHY.TYPOGRAPHY_WEIGHT_NORMAL,
@@ -340,6 +368,8 @@ var theme = {
   typography: _objectSpread(_objectSpread({}, typography), {}, {
     typography: typography
   }),
+  fontSizes: fontSizes,
+  lineHeights: lineHeights,
   fontFamily: fontFamily,
   fontWeights: fontWeights,
   space: _objectSpread(_objectSpread({}, space), {}, {

package/lib/utils/use-measure.js

@@ -0,0 +1,59 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+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(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useState, useLayoutEffect } from 'react';
+var initialBounds = Object.freeze({
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0,
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0
+});
+export function useMeasure(ref) {
+  var _useState = useState(initialBounds),
+    _useState2 = _slicedToArray(_useState, 2),
+    bounds = _useState2[0],
+    setContentRect = _useState2[1];
+  useLayoutEffect(function () {
+    var element = ref.current;
+    if (!element ||
+    // in non-browser environments (e.g. Jest tests) ResizeObserver is not defined
+    !('ResizeObserver' in window)) {
+      return;
+    }
+    var resizeObserver = new ResizeObserver(function (_ref) {
+      var _ref2 = _slicedToArray(_ref, 1),
+        entry = _ref2[0];
+      var _entry$contentRect = entry.contentRect,
+        x = _entry$contentRect.x,
+        y = _entry$contentRect.y,
+        width = _entry$contentRect.width,
+        height = _entry$contentRect.height,
+        top = _entry$contentRect.top,
+        right = _entry$contentRect.right,
+        bottom = _entry$contentRect.bottom,
+        left = _entry$contentRect.left;
+      setContentRect({
+        x: x,
+        y: y,
+        width: width,
+        height: height,
+        top: top,
+        right: right,
+        bottom: bottom,
+        left: left
+      });
+    });
+    resizeObserver.observe(ref.current);
+    return function () {
+      resizeObserver.disconnect();
+    };
+  }, [ref]);
+  return bounds;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "17.0.0",
+  "version": "19.0.0",
   "license": "MIT",
   "files": [
     "__flow__",
@@ -61,8 +61,8 @@
     "**/*": [
       "prettier --write"
     ],
-    "**/*.js": [
-      "eslint --fix"
+    "**/*.{ts,tsx,js}": [
+      "eslint --max-warnings=0 --fix --ext .ts,.tsx,.js"
     ],
     "*.scss": [
       "stylelint --fix"
@@ -82,14 +82,12 @@
     "polished": "^3.4.1",
     "raw-loader": "^3.0.0",
     "react-focus-lock": "^2.0.3",
-    "react-modal": "^3.8.1",
-    "react-popper": "^1.3.3",
+    "react-modal": "^3.16.1",
+    "react-popper": "^1.3.11",
     "react-spring": "^8.0.25",
     "react-toastify": "^6.0.5",
-    "react-virtualized": "9.18.5",
     "scroll-into-view-if-needed": "1.1.0",
-    "styled-system": "^5.1.5",
-    "use-measure": "^0.2.2"
+    "styled-system": "^5.1.5"
   },
   "devDependencies": {
     "@babel/cli": "^7.5.5",
@@ -125,11 +123,10 @@
     "@types/jest": "^27.0.0",
     "@types/jest-axe": "^3.5.5",
     "@types/node": "^16.15.0",
-    "@types/react": "^16.0.0",
+    "@types/react": "^17.0.0",
     "@types/react-dates": "^21.8.3",
-    "@types/react-dom": "^16.0.0",
-    "@types/react-modal": "^3.13.1",
-    "@types/react-virtualized": "9.18.*",
+    "@types/react-dom": "^17.0.0",
+    "@types/react-modal": "^3.16.0",
     "@types/styled-components": "^5.1.26",
     "@types/styled-system": "^5.1.15",
     "@typescript-eslint/eslint-plugin": "^5.43.0",
@@ -180,9 +177,9 @@
     "pify": "^4.0.1",
     "prettier": "^2.7.1",
     "prop-types": "^15.6.1",
-    "react": "^16.12.0",
+    "react": "^17.0.2",
     "react-dates": "^21.8.0",
-    "react-dom": "^16.12.0",
+    "react-dom": "^17.0.2",
     "rimraf": "^2.6.3",
     "storybook-dark-mode": "^1.0.9",
     "styled-components": "^5.2.3",
@@ -207,15 +204,12 @@
     "@sproutsocial/seeds-typography": ">=2.0.0",
     "moment": "^2.29.4",
     "prop-types": "^15.0.0",
-    "react": ">=16.8.0",
     "react-dates": "^21.8.0",
-    "react-virtualized": "9.18.5",
-    "styled-components": "^5.2.3",
-    "react-dom": "^16.12.0"
+    "react-dom": "^16.8.0 || ^17.0.0",
+    "react": "^16.8.0 || ^17.0.0",
+    "styled-components": "^5.2.3"
   },
   "resolutions": {
-    "@types/react": "^16.0.0",
-    "@types/react-dom": "^16.0.0",
     "lodash": "^4.17.21",
     "react-popper/create-react-context": "^0.3.0",
     "glob-parent": "^5.1.2",

package/__flow__/OverflowList/OverflowList.flow.js

@@ -1,22 +0,0 @@
-// @flow
-import * as React from 'react';
-import type { TypeContainerProps } from "../Box/index.flow";
-export type TypeVirtualizedListProps = {|
-  items: Array<*>,
-  ItemComponent: React.ComponentType<*>,
-  getItemProps: (*) => *,
-  itemWrapperProps?: TypeContainerProps,
-  containerProps?: TypeContainerProps,
-|};
-export type TypeOverflowListProps = {|
-  height: string,
-  width: string,
-  items?: Array<*>,
-  children?: React.Node,
-  ItemComponent?: React.ComponentType<*>,
-  getItemProps?: (*) => *,
-  itemWrapperProps?: TypeContainerProps,
-  containerProps?: TypeContainerProps,
-|};
-declare var OverflowList: React.StatelessFunctionalComponent<TypeOverflowListProps>;
-declare export default typeof OverflowList;

package/__flow__/OverflowList/index.flow.js

@@ -1,2 +0,0 @@
-// @flow
-export * from "./OverflowList.flow";

package/__flow__/dataviz/DataVizRotation.flow.js

@@ -1,12 +0,0 @@
-// @flow
-import * as React from 'react';
-import type { TypeSproutTheme } from "../types/theme.flow";
-export type TypeDataVizRotationProps = {
-  theme: TypeSproutTheme,
-  ...
-};
-declare export var DataVizRotation: React.AbstractComponent<
-// Component props minus theme prop which is handled by withTheme
-$Diff<TypeDataVizRotationProps, {|
-  theme: TypeSproutTheme
-|}>, void>;

package/__flow__/dataviz/index.flow.js

@@ -1,2 +0,0 @@
-// @flow
-export * from "./DataVizRotation.flow";

package/commonjs/OverflowList/OverflowList.flow.js

@@ -1,6 +0,0 @@
-"use strict";
-
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-var React = _interopRequireWildcard(require("react"));
-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; }