@sproutsocial/racine 17.0.0 → 19.0.0

package/CHANGELOG.md

@@ -1,5 +1,63 @@
 # Change Log
 
+## 19.0.0
+
+### Major Changes
+
+- 7c096210: 🚧 Breaking Changes 🚧
+
+  - Remove deprecated `OverflowList` component (and `react-virtualized` dependency)
+  - Remove deprecated example dataviz color rotation exports
+
+  🛠️ Non-breaking Changes 🛠️
+
+  - Add support for `react` and `react-dom` v17
+  - Upgrade dependencies
+    - `react-modal`
+    - `react-popper`
+
+### Minor Changes
+
+- 0aea6f0d: Add `fontSizes` and `lineHeights` objects to the theme. These objects fix a bug on the Card component and set us up to use the default system props behavior in future refactors.
+
+### Patch Changes
+
+- 7b871fe7: Clickable children of non-sortable `TableHeaderCell` components will now fire their onClicks properly.
+- e6cc9ab1: Remove webpack specific raw css import from the toast component.
+
+## 18.0.0
+
+### Major Changes
+
+- fb938ad3: The HTML structure for the menu and listbox groups has been rearranged to improve accessibility for grouping
+  - When a title is provided to the `<Menu.Group />` or `<Listbox.Group />` component, the title is now correctly nested within the menu group container with the appropriate `role` and `aria-labelledby` attributes
+  - `Menu` and `Listbox` title container is now a `li` instead of a `div` for improved accessibility
+  - Developers are now able to provide a custom `role` to the `Menu.Group` and `Listbox.Group` components as well as override the padding applied to the title container
+
+### Minor Changes
+
+- 5f60f73a: Adds the `invalidNumberLabel` prop to `Numeral`
+  - The label you provide will be added as visually hidden text to any instance of Numeral with an invalid value (i.e., where we render an em dash (`—`)).
+  - The prop is optional, but passing in a localized label is strongly recommended for accessibility purposes.
+    - Without this prop, screen readers will not read off anything for invalid values.
+    - With this prop, screen readers will read off the `invalidNumberLabel` for invalid values, providing clear feedback to screen reader users.
+  - Users should pass an `invalidNumberLabel` prop to all instances of Numeral; Numeral handles conditionally applying or omitting the label as needed.
+- 23f73d44: `Card` component enhancements
+  - Adds the ability to specify an external link on the CardLink component.
+  - Provides Flow types for the subcomponents.
+- 9e33f361: Fix `Link` accessibility issues
+  - Changes default state of underline prop from false to true
+  - Updates stories to accurately reflect accessible link usage
+
+### Patch Changes
+
+- ba5d2429: Accessibility bugfixes for the `ChartLegend` component
+  - Recreates provided "contrast", "compare", and "extended" palettes in React hook to utilize the Racine theme
+  - Deprecation warnings added to the "contrast", "compare", and "extended" palettes
+    - Due to low usage of these palettes, ChartLegend will rely solely on the dataviz rotation and custom colors moving forward
+  - Provides 3:1 contrast ratio
+  - Dark mode support
+
 ## 17.0.0
 
 ### Major Changes
@@ -13,7 +71,7 @@
   **Enhancements**
 
   - Cards with `role='link'` should now wrap link text in the `CardLink` subcomponent
-  - Improves screen reader accessiblity by pairing Cards as links with the new `CardLink` subcomponent
+  - Improves screen reader accessibility by pairing Cards as links with the new `CardLink` subcomponent
   - Adds `CardLink` subcomponent
     - Link text wrapped in CardLink renders an anchor tag as a child of Card
     - Preserves the behavior that allows the user to click the whole Card as the link

package/README.md

@@ -146,7 +146,7 @@ When writing code for Racine, please refer to the `code-guidelines.mdx` story in
 
 There are a few ways to get involved:
 
-- Join #eng-ui-systems on Slack to participate in discussions about Racine's development.
+- Join #design-systems on Slack to participate in discussions about Racine's development.
 - Check out [the issues tab of this repository](https://github.com/sproutsocial/racine/issues). Issues contain community-collected bugs and features that need attention. If you're looking for an easy way to jump in, we have [a label which shows issues that are good for first-time contributors](https://github.com/sproutsocial/racine/issues?q=is%3Aopen+is%3Aissue+label%3A%22♥%EF%B8%8F+good+first+issue%22).
 - The Design Systems team [uses Jira to track our backlog, in-flight changes, and future changes](https://sprout.atlassian.net/jira/software/c/projects/DS/boards/601/backlog). It's a great way to get a broad look at what's happening in Racine, and tracks the squad's work from sprint to sprint, and release to release.
 
@@ -175,12 +175,12 @@ And you can interact with Racine via the command line with these commands:
 
 ### **✅ Step 3: Make your changes**
 
-If you're not a member of the Design Systems team, you'll want to start by creating a [fork of the Racine repo](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/about-forks) using the "Fork" button in the top-right of the repo homescreen on GitHub. Before you start writing code, make sure your fork is up-to-date with the latest changes from the main `sproutsocial/racine` repo, and then create a new feature branch based off your local `dev`.
-
-If you are a member of the Design Systems team you'll have write access to `sproutsocial/racine`, which means you can branch directly off `dev` and start working. Either way, once you've got your new feature branch feel free to start coding! As updates are merged into `dev` on `sproutsocial/racine` by other developers over time you'll want to pull those updates into your feature branch, ideally via rebase, to avoid any conflicts when you open a pull request.
+Cut a feature branch off `dev` and start coding! As updates are merged into `dev` by other developers over time you'll want to pull those updates into your branch, ideally via rebase, to avoid any conflicts when you open a pull request.
 
 _Need to make an urgent update? Branch off `main` instead of dev, and open your PR later against `main`. We consider this a hotfix and only support it for critical time-sensitive updates, so check with the Design Systems team prior to making this kind of contribution._
 
+We use a [visual regression testing](https://racine.netlify.app/?path=/story/welcome-visual-regression-testing--page) suite to capture any unintended changes during development.  After running `yarn build` you can run the suite locally with `yarn backstop-test`, which will open a report in your browser to show you what passed and what failed.  If any fails are actually intentional visual changes you can run `yarn backstop-approve` to approve those changes as new reference images and include them in your PR.
+
 As you develop you'll want to track the scope of the changes you make. Racine supports this with a tool called [changesets](https://github.com/atlassian/changesets) to automatically pick new version numbers and update the changelog whenever we publish a new version of the package.
 
 **Run `yarn change` to generate a changeset that will be used to derive the next version number for Racine from your changes.**
@@ -193,26 +193,28 @@ When running this command, you will be asked to select whether your change is a
 - **minor** changes are for new features or improvements, and they bump the middle digit in the version number (`x.0.x`)
 - **major** changes are _breaking changes_, and they bump the first digit (`0.x.x`). These types of changes are rare and should be coordinated in advance with the Design Systems team.
 
-The changeset CLI will also ask you to input a message detailing your changes. The completion of the command will generate a new changeset markdown file. You are more than welcome to edit this file after it has been generated, so don't get hung up on trying to write the perfect text from the command line. Aim to make the text of the changeset file(s) as descriptive and informative as possible, as they will be used to build a changelog file when the new version is released.
+The changeset CLI will also ask you to input a message detailing your changes. The completion of the command will generate a new changeset markdown file. You are more than welcome to edit this file after it has been generated, so don't get hung up on trying to write the perfect text from the command line. Aim to make the text of the changeset file(s) as descriptive and informative as possible, as they will be used to build a changelog file when the new version is released.  Check out our documentation for the [Seeds Release Process](https://sprout.atlassian.net/wiki/spaces/SEEDS/pages/3522756609/DS+Seeds+Release+Process#Changesets) for examples of what makes a good or bad changeset.
 
 **You can add as many changesets to a PR as you would like.** If your PR makes several distinct changes to Racine, you should create a changeset detailing each one individually.
 
 ### **🗣 Step 4: Create a pull request**
 
-Once you're ready to submit your changes for review, open a PR against the `dev` branch in `sproutsocial/racine`. A few things will happen:
+Once you're ready to submit your changes for review, open a PR against the `dev` branch. A few things will happen:
 
-- The Racine maintainers will be tagged to review your code. Feel free to tag any specific individuals who you think should take a look.
-- Racine's test suite will be ran on CI, and the status will be reported on the PR. You can run `yarn test` to run these tests locally. If there are any issues, they will need to be resolved before the PR can be merged.
-- If you're a member of the Design Systems team: Netlify will create a preview deploy of Racine's Storybook so that you can see your changes and share them with others. Due to limited Netlify seats only a limited group of developers can generate builds.
+- The Racine maintainers will be tagged to review your code. Feel free to additionally tag any specific individuals who you think should take a look.
+- Visual regression testing will run against your PR, and the results can be found in the "Report" artifact on the summary page for the associated Github Action run. `html_report/index.html` in `Report.zip` will show you what passed and what failed.
+- Racine's test suite will run via CI, and the status will be reported on the PR. You can run `yarn test` to run these tests locally. If there are any issues, they will need to be resolved before the PR can be merged.
+- Netlify will create a preview deploy of Racine's Storybook and include a link to it in a comment on the PR so you can see your changes and share them with others.
+- A Racine package snapshot including your changes will be published to Artifactory and included in a comment on the PR so you can install it locally or in a web app PR/snapshot in order to test your changes.
 
-You may be asked to make changes to match Racine's contribution guidelines, so expect to keep attention on your PR for a little bit. Once your tests are passing and you have at least one approving Design Systems review, a member of the Design Systems team will merge your changes for inclusion in a future release of Racine!
+You may be asked to make changes to match Racine's contribution guidelines, so expect to keep attention on your PR for a little bit. Once your tests are passing and you have at least one approving Design Systems review, a member of the Design Systems team will merge your changes for inclusion in a future release of Racine!  Please **do NOT** merge your own PR unless expressly told to, since commits to `dev` end up in the next release, and the Design Systems team needs to make sure they have the bandwidth to validate any contribution before it releases.
 
-### **☁️ Step 5: Publish your changes to npm**
+### **☁️ Step 5: Changes get published to Artifactory**
 
-As PRs get merged into Racine, changsets will keep a running PR open called `Version Packages`. This PR will detail all of the changes that have been made to the package since the last publish. **Anyone can release a new version of Racine by merging this PR.**
+When the Design Systems team prepares the next Racine release, changsets will generate a PR called `Version Packages`. This PR will detail all of the changes that have been made to the package since the last publish. Merging this PR will release a new version of Racine.
 
-When the PR is merged, [GitHub will kick off a publish of the new version](https://github.com/sproutsocial/racine/actions?query=workflow%3ARelease). There will be a notification in #eng-ui-systems in Slack when the new version is available.
+When the PR is merged, [GitHub will kick off a publish of the new version](https://github.com/sproutsocial/racine/actions?query=workflow%3ARelease). There will be a notification in #design-systems in Slack when the new version is available.
 
 ### **✍ Step 6: Document your changes**
 
-Racine components are documented in [Seeds](https://sproutsocial.com/seeds/components), Sprout's design system. You can open a PR to the [Seeds repository](https://github.com/sproutsocial/seeds) to add or edit component documentation. Reach out to the Design Systems team for help getting started.
+Racine components are documented in [Seeds](https://sproutsocial.com/seeds/components), Sprout's design system. You can open a PR to the [Seeds repository](https://github.com/sproutsocial/seeds) to add or edit component documentation.  It's a good idea to have documentation changes ready to go at the same time your Racine contributions are deployed, so start early!  Reach out to the Design Systems team if you need help getting started.

package/__flow__/Card/Card.flow.js

@@ -1,5 +1,9 @@
 // @flow
 import * as React from 'react';
-import type { TypeCardProps } from "./CardTypes.flow";
+import type { TypeCardProps, TypeCardLink, TypeCardArea } from "./CardTypes.flow";
 declare var Card: React.StatelessFunctionalComponent<TypeCardProps>;
+declare export var CardLink: React.StatelessFunctionalComponent<TypeCardLink>;
+declare export var CardHeader: React.StatelessFunctionalComponent<TypeCardArea>;
+declare export var CardContent: React.StatelessFunctionalComponent<TypeCardArea>;
+declare export var CardFooter: React.StatelessFunctionalComponent<TypeCardArea>;
 declare export default typeof Card;

package/__flow__/Card/CardTypes.flow.js

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import type { TypeIconProps } from "../Icon/index.flow";
 import type { TypeStyledComponentsCommonProps, TypePropsWithChildren } from "../types/index.flow";
-import type { TypeBorderSystemProps, TypeColorSystemProps, TypeFlexboxSystemProps, TypeGridSystemProps, TypeLayoutSystemProps, TypePositionSystemProps, TypeSpaceSystemProps } from "../systemProps/index.flow";
+import type { TypeBorderSystemProps, TypeColorSystemProps, TypeFlexboxSystemProps, TypeGridSystemProps, TypeLayoutSystemProps, TypePositionSystemProps, TypeSpaceSystemProps, TypeTypographySystemProps } from "../systemProps/index.flow";
 export type TypeSharedCardSystemProps = TypePropsWithChildren<{|
   ...TypeStyledComponentsCommonProps,
   ...TypeBorderSystemProps,
@@ -63,4 +63,11 @@ export type TypeStyledSelectedIcon = {
   ...TypeIconProps,
   $selected: $PropertyType<TypeCardStyleTransientProps, '$selected'>,
   ...
+};
+export type TypeCardLink = {
+  ...TypeColorSystemProps,
+  ...TypeTypographySystemProps,
+  affordance?: boolean,
+  external?: boolean,
+  ...
 };

package/__flow__/Numeral/Numeral.flow.js

@@ -12,6 +12,8 @@ export type TypeNumeralProps = {
   currency?: string,
   /** A boolean determining whether or not the number should be abbreviated, or a number representing the abbreviation threshold  */
   abbreviate?: boolean | number,
+  /** Text to be read off by screen readers for invalid values (i.e., any value rendered as '—' (em dash)) */
+  invalidNumberLabel?: string,
   /** Override the default decimal precision (2 for decimals/currency, 1 for percentages), or "none" allowing unrestricted precision. */
   precision?: number | 'none',
   qa?: Object,

package/__flow__/index.flow.js

@@ -49,7 +49,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";
@@ -104,7 +103,6 @@ export type { TypeMenuButtonContext, TypeMenuButtonProps, TypeMenuContext, TypeM
 export type { EnumDensities, TypeMessageProps } from "./Message/index.flow";
 export type { TypeModalProps, TypeModalContentProps, TypeModalFooterProps, TypeModalHeaderProps } from "./Modal/index.flow";
 export type { TypeNumeralProps } from "./Numeral/index.flow";
-export type { TypeOverflowListProps, TypeVirtualizedListProps } from "./OverflowList/index.flow";
 export type { TypePartnerLogoProps, TypePartnerNames } from "./PartnerLogo/index.flow";
 export type { EnumPlacements, TypePopoutProps } from "./Popout/index.flow";
 export type { TypeRadioProps } from "./Radio/index.flow";
@@ -136,9 +134,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/commonjs/Card/subComponents.js

@@ -11,7 +11,7 @@ var _styles = require("./styles");
 var _excluded = ["children"],
   _excluded2 = ["children"],
   _excluded3 = ["children"],
-  _excluded4 = ["affordance", "children"];
+  _excluded4 = ["affordance", "children", "external", "color"];
 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); }
@@ -55,25 +55,33 @@ var CardAffordance = function CardAffordance(_ref5) {
   var rest = _extends({}, (_objectDestructuringEmpty(_ref5), _ref5));
   return /*#__PURE__*/_react.default.createElement(_styles.StyledCardAffordance, _extends({}, rest, {
     size: "mini",
-    name: "arrow-right",
+    name: "arrow-right"
+    // TODO: probably need to make this available to the top level for external links https://sprout.atlassian.net/browse/DS-2223
+    ,
     "aria-hidden": true
   }));
 };
-
-// jsdocs, never types?
 exports.CardAffordance = CardAffordance;
 var CardLink = function CardLink(_ref6) {
   var affordance = _ref6.affordance,
     children = _ref6.children,
+    _ref6$external = _ref6.external,
+    external = _ref6$external === void 0 ? false : _ref6$external,
+    color = _ref6.color,
     rest = _objectWithoutProperties(_ref6, _excluded4);
   var _useContext = (0, _react.useContext)(_utils.SubComponentContext),
     href = _useContext.href,
     linkRef = _useContext.linkRef;
   return /*#__PURE__*/_react.default.createElement(_styles.StyledCardLink, _extends({}, rest, {
-    target: "_blank",
-    rel: "noreferrer",
+    target: external ? '_blank' : undefined,
+    rel: external ? 'noreferrer' : undefined,
     href: href,
     ref: linkRef
+    // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    ,
+    color: color
   }), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children, affordance ? /*#__PURE__*/_react.default.createElement(CardAffordance, {
     ml: 300
   }) : null));

package/commonjs/ChartLegend/ChartLegend.js

@@ -6,45 +6,28 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _chartColors = require("../utils/chartColors");
-var _Text = require("../Text");
-var _styles = _interopRequireWildcard(require("./styles"));
+var _styles = _interopRequireDefault(require("./styles"));
+var _useChartLabels = require("./useChartLabels");
 var _excluded = ["legendLabels", "stacked", "theme", "qa"];
+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 _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 getSwatchColor(theme, index) {
-  return _chartColors.THEME_MAP[theme.toUpperCase()][index];
-}
-function getLabels(legendLabels, theme) {
-  return legendLabels.map(function (label, i) {
-    var labelColor = label.color ? label.color : getSwatchColor(theme, i);
-    return /*#__PURE__*/React.createElement(_styles.Label, {
-      key: label.name
-    }, /*#__PURE__*/React.createElement(_styles.Swatch, {
-      bg: labelColor,
-      "data-qa-swatch": ""
-    }), /*#__PURE__*/React.createElement(_Text.Text, {
-      as: "div",
-      fontSize: 200,
-      breakWord: true
-    }, label.name));
-  });
-}
 var ChartLegend = function ChartLegend(_ref) {
   var legendLabels = _ref.legendLabels,
     stacked = _ref.stacked,
     _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? 'compare' : _ref$theme,
+    theme = _ref$theme === void 0 ? 'datavizRotation' : _ref$theme,
     qa = _ref.qa,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var chartLabels = (0, _useChartLabels.useChartLabels)(legendLabels, theme);
   return /*#__PURE__*/React.createElement(_styles.default, _extends({
     inline: !stacked,
     "data-qa-chartlegend": "",
     qa: qa
-  }, rest), getLabels(legendLabels, theme));
+  }, rest), chartLabels);
 };
 var _default = ChartLegend;
 exports.default = _default;

package/commonjs/ChartLegend/useChartLabels.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChartLabels = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = require("styled-components");
+var _styles = require("./styles");
+var _Text = require("../Text");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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];
+};
+var useChartLabels = function useChartLabels(legendLabels, theme) {
+  var racineTheme = (0, _styledComponents.useTheme)();
+  var colors = racineTheme.colors;
+  return legendLabels.map(function (label, i) {
+    var labelColor = label.color ? label.color : getSwatchColor(theme, i, colors);
+    return /*#__PURE__*/_react.default.createElement(_styles.Label, {
+      key: label.name
+    }, /*#__PURE__*/_react.default.createElement(_styles.Swatch, {
+      bg: labelColor,
+      "data-qa-swatch": ""
+    }), /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      as: "div",
+      fontSize: 200,
+      breakWord: true
+    }, label.name));
+  });
+};
+exports.useChartLabels = useChartLabels;

package/commonjs/Collapsible/Collapsible.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _useMeasure = _interopRequireDefault(require("use-measure"));
+var _useMeasure = require("../utils/use-measure");
 var _Box = _interopRequireDefault(require("../Box"));
 var _styles = require("./styles");
 var _excluded = ["children"],
@@ -86,7 +86,7 @@ var Panel = function Panel(_ref3) {
     collapsedHeight = _useContext2.collapsedHeight,
     openHeight = _useContext2.openHeight;
   var ref = (0, React.useRef)(null);
-  var measurement = (0, _useMeasure.default)(ref);
+  var measurement = (0, _useMeasure.useMeasure)(ref);
   var _useState3 = (0, React.useState)(undefined),
     _useState4 = _slicedToArray(_useState3, 2),
     isHidden = _useState4[0],

package/commonjs/Link/Link.js

@@ -21,7 +21,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/commonjs/Menu/Menu.js

@@ -246,29 +246,49 @@ var MenuRadio = function MenuRadio(props) {
   }, props));
 };
 exports.MenuRadio = MenuRadio;
-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.default, {
-    pl: 400,
+var MenuTitle = (0, _styledComponents.default)(_Text.default).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 = (0, _styledComponents.default)(MenuTitle).withConfig({
+  displayName: "Menu___StyledMenuTitle",
+  componentId: "sc-1jmjosz-1"
+})(["", ""], function (p) {
+  return p.$_css;
+});
+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 = (0, _lodash.default)('menu-title-');
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Box.default, _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 ? _mixins.disabled : undefined
-  }, title)), /*#__PURE__*/React.createElement(_Box.default, _extends({}, props, {
-    p: 300,
-    role: "group"
-  }), children));
+  }, title), children));
 };
 exports.MenuGroup = MenuGroup;
 var MenuDivider = function MenuDivider(props) {
@@ -313,12 +333,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 = (0, _utils.useMenuKeyDown)(),
     handleKeyDown = _useMenuKeyDown.handleKeyDown,
     activeDescendent = _useMenuKeyDown.activeDescendent;
@@ -338,15 +358,15 @@ var MenuItems = function MenuItems(_ref3) {
     overflow: "hidden"
   }), children);
 };
-var Menu = function Menu(_ref4) {
-  var _ref4$role = _ref4.role,
-    role = _ref4$role === void 0 ? _utils.MENU_ROLES.MENU : _ref4$role,
-    children = _ref4.children,
-    onChange = _ref4.onChange,
-    value = _ref4.value,
-    multiselect = _ref4.multiselect,
-    innerRef = _ref4.innerRef,
-    props = _objectWithoutProperties(_ref4, _excluded4);
+var Menu = function Menu(_ref8) {
+  var _ref8$role = _ref8.role,
+    role = _ref8$role === void 0 ? _utils.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 = (0, _utils.useDescendants)(),
     _useDescendants2 = _slicedToArray(_useDescendants, 2),
     descendants = _useDescendants2[0],
@@ -404,20 +424,20 @@ Menu.Divider = MenuDivider;
 Menu.FilterInput = MenuFilterInput;
 var CustomPopoutContent = (0, _styledComponents.default)(_Popout.default.Content).withConfig({
   displayName: "Menu__CustomPopoutContent",
-  componentId: "sc-1jmjosz-0"
+  componentId: "sc-1jmjosz-2"
 })(["padding:0;margin-left:0;margin-right:0;"]);
-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 ? (0, _lodash.default)('MenuButton-') : _ref5$id,
-    _ref5$placement = _ref5.placement,
-    placement = _ref5$placement === void 0 ? 'bottom' : _ref5$placement,
-    props = _objectWithoutProperties(_ref5, _excluded5);
+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 ? (0, _lodash.default)('MenuButton-') : _ref9$id,
+    _ref9$placement = _ref9.placement,
+    placement = _ref9$placement === void 0 ? 'bottom' : _ref9$placement,
+    props = _objectWithoutProperties(_ref9, _excluded5);
   var _useState5 = (0, React.useState)(false),
     _useState6 = _slicedToArray(_useState5, 2),
     isOpen = _useState6[0],
@@ -459,10 +479,4 @@ var MenuButton = function MenuButton(_ref5) {
 };
 exports.MenuButton = MenuButton;
 var _default = Menu;
-exports.default = _default;
-var _StyledText = (0, _styledComponents.default)(_Text.default).withConfig({
-  displayName: "Menu___StyledText",
-  componentId: "sc-1jmjosz-1"
-})(["", ""], function (p) {
-  return p.$_css;
-});
+exports.default = _default;

package/commonjs/Menu/styles.js

@@ -55,5 +55,5 @@ exports.MenuItemContainer = MenuItemContainer;
 var MenuItemsContainer = (0, _styledComponents.default)(_Box.default).withConfig({
   displayName: "styles__MenuItemsContainer",
   componentId: "sc-168zlb1-1"
-})(["list-style-type:none;&:focus{", "}"], _mixins.focusRing);
+})(["list-style-type:none;&:focus{", "}& > div[role='group']:first-of-type{border-top:none;}"], _mixins.focusRing);
 exports.MenuItemsContainer = MenuItemsContainer;

package/commonjs/Numeral/Numeral.js

@@ -9,9 +9,10 @@ var React = _interopRequireWildcard(require("react"));
 var _lruMemoize = _interopRequireDefault(require("lru-memoize"));
 var _constants = require("../utils/constants");
 var _Tooltip = _interopRequireDefault(require("../Tooltip"));
+var _VisuallyHidden = require("../VisuallyHidden");
 var _constants2 = require("./constants");
 var _styles = require("./styles");
-var _excluded = ["number", "locale", "format", "currency", "abbreviate", "precision", "qa"];
+var _excluded = ["number", "locale", "format", "currency", "abbreviate", "invalidNumberLabel", "precision", "qa"];
 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; }
@@ -86,6 +87,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);
@@ -107,6 +109,7 @@ var normalizeArgs = function normalizeArgs(props) {
   return {
     value: value,
     canAbbreviate: canAbbreviate,
+    invalidNumberLabel: invalidNumberLabel,
     options: options,
     qa: qa,
     rest: rest
@@ -116,10 +119,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(_styles.Container, qa, _constants.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.VisuallyHidden, null, invalidNumberLabel), /*#__PURE__*/React.createElement(_styles.Container, _extends({
+    "aria-hidden": true
+  }, qa), _constants.EM_DASH));
   var formatters = getNumberFormatters(options);
   var fullText = formatters.standard.format(value);
   if (canAbbreviate) {

package/commonjs/TableHeaderCell/TableHeaderCell.js

@@ -54,12 +54,14 @@ 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);