@sproutsocial/racine 15.1.0 → 17.0.0

package/lib/TableHeaderCell/TableHeaderCell.js

@@ -18,7 +18,7 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _ty
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import * as React from 'react';
 import Icon from "../Icon";
-import Container, { SortIcon } from "./styles";
+import Container, { SortIcon, UnstyledButton } from "./styles";
 import { SORT_DIRECTIONS } from "./constants";
 export var TableHeaderCell = /*#__PURE__*/function (_React$Component) {
   _inherits(TableHeaderCell, _React$Component);
@@ -30,7 +30,7 @@ export var TableHeaderCell = /*#__PURE__*/function (_React$Component) {
       args[_key] = arguments[_key];
     }
     _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "getSortIcon", function (isSorted) {
+    _defineProperty(_assertThisInitialized(_this), "getSortIcon", function (isSorted, ariaSortDirection) {
       var sortDirection = _this.props.sortDirection;
       var iconName = 'chevron-up-down-filled';
       if (isSorted && sortDirection === SORT_DIRECTIONS.ASC) {
@@ -41,10 +41,11 @@ export var TableHeaderCell = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/React.createElement(SortIcon, null, /*#__PURE__*/React.createElement(Icon, {
         size: "mini",
         name: iconName,
-        "aria-hidden": true
+        "aria-label": ariaSortDirection
       }));
     });
     _defineProperty(_assertThisInitialized(_this), "handleClick", function (e) {
+      e.preventDefault();
       var _this$props = _this.props,
         onClick = _this$props.onClick,
         onSort = _this$props.onSort,
@@ -78,11 +79,19 @@ export var TableHeaderCell = /*#__PURE__*/function (_React$Component) {
         onClick = _this$props2.onClick,
         color = _this$props2.color,
         rest = _objectWithoutProperties(_this$props2, _excluded);
+      var isSorted = sortId === id;
+      var ariaSort = isSorted ? sortDirection === SORT_DIRECTIONS.ASC ? 'ascending' : 'descending' : undefined;
+      var buttonProps = isSortable ? {
+        role: 'button',
+        onClick: this.handleClick
+      } : {};
+      var scope = colSpan ? 'colgroup' : 'col';
       return /*#__PURE__*/React.createElement(Container, _extends({}, rest, {
         key: id,
         alignment: align || 'left',
         sortable: isSortable,
         colSpan: colSpan,
+        scope: scope,
         width: width,
         onClick: this.handleClick,
         "data-tableheadercell-sortable": isSortable,
@@ -92,8 +101,12 @@ export var TableHeaderCell = /*#__PURE__*/function (_React$Component) {
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         ,
-        color: color
-      }), children || content, isSortable && !children && this.getSortIcon(id === sortId));
+        color: color,
+        "aria-sort": ariaSort
+      }), isSortable ? /*#__PURE__*/React.createElement(UnstyledButton, buttonProps, /*#__PURE__*/React.createElement("div", {
+        "aria-live": "polite",
+        role: "status"
+      }, children || content, !children && this.getSortIcon(id === sortId, ariaSort))) : children || content);
     }
   }]);
   return TableHeaderCell;

package/lib/TableHeaderCell/styles.js

@@ -20,4 +20,8 @@ export var SortIcon = styled.span.withConfig({
 })(["position:absolute;top:50%;transform:translateY(-50%);font-size:0;padding:0 ", ";"], function (props) {
   return props.theme.space[200];
 });
+export var UnstyledButton = styled.button.withConfig({
+  displayName: "styles__UnstyledButton",
+  componentId: "sc-fjeapu-2"
+})(["background:none;border:none;color:inherit;font:inherit;line-height:normal;overflow:visible;padding:0;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;"]);
 export default Container;

package/lib/Tabs/Tabs.js

@@ -79,7 +79,11 @@ var TabItemButton = /*#__PURE__*/function (_React$Component) {
         tabIndex: isSelected ? 0 : -1,
         fullWidth: fullWidth,
         "data-qa-tab-button": id,
-        "data-qa-tab-button-state": isSelected
+        "data-qa-tab-button-state": isSelected,
+        "aria-selected": isSelected,
+        role: "tab"
+        // TODO: Add a TabPanel subcomponent for use with tabs
+        // aria-controls={tabPanelId}
       }, rest), children));
     }
   }]);
@@ -178,7 +182,8 @@ var Tabs = /*#__PURE__*/function (_React$Component2) {
       return /*#__PURE__*/React.createElement(Container, _extends({
         "data-qa-tabs": "",
         onKeyUp: this.keyHandler,
-        onSelect: onSelect
+        onSelect: onSelect,
+        role: "tablist"
       }, qa, rest), /*#__PURE__*/React.createElement(TabButtonContext.Provider, {
         value: {
           selectedId: this.getSelectedId(),

package/lib/iconNames.js

@@ -0,0 +1 @@
+export default ["active-listener", "add-item", "add-keyword", "add-team-member", "add-variable", "address-card-outline", "address-card-solid", "adobe-experience-manager", "ads", "advocacy-outline", "advocacy", "android", "apple", "approval-indicator-outline", "approval-indicator", "archive", "arrow-down-line", "arrow-down", "arrow-left-line", "arrow-left", "arrow-right-line", "arrow-right", "arrow-up-line", "arrow-up", "arrows", "asset-library-outline", "asset-library", "assign", "atom", "audio", "back-to-top", "bambu-icon-outline", "bambu-icon", "barcode", "basketball", "bell-outline", "bigcommerce", "bitly", "bold", "book", "bookmark", "bot", "browser", "business", "calendar-outline", "calendar", "camera-outline", "camera-story", "camera", "campaign", "canva", "carousel", "cart-plus-outline", "cart-plus", "check", "chevron-down-filled", "chevron-down", "chevron-left", "chevron-right", "chevron-up-down-filled", "chevron-up-filled", "chevron-up", "circle-check-outline", "circle-check", "circle", "circle+", "circles", "circlex", "click-to-view", "clicks", "clipboard-outline", "clipboard", "clock", "closed-captioning", "cloud", "code", "columns", "comment-ai-outline", "comment-ai", "comment-alt-outline", "comment-alt", "comment-lines-alt-outline", "comment", "compact-density", "compact-indicator", "comparison", "competitor", "compose", "content-suggestions", "credit-card", "crop", "crown", "dashboard", "deconstructed-negative-sentiment", "deconstructed-neutral-sentiment", "deconstructed-positive-sentiment", "discovery", "dislike-outline", "dislike", "dm-link-outline", "dm-link", "dotdotdot", "download", "drafts-outline", "drafts", "dropbox", "duplicate-outline", "duplicate", "emoji-outline", "emoji", "empty-image", "engagement-per-post", "engagements", "error", "exchange-alt", "expanded-indicator", "export", "extended-circles", "external-link-alt", "external-link", "extreme-negative-sentiment", "eye-outline", "eye-slash-outline", "eye-slash", "eye", "facebook-audience-network", "facebook-branded-content-outline", "facebook-branded-content", "facebook-groups", "facebook", "fb-reactions-angry", "fb-reactions-haha", "fb-reactions-like", "fb-reactions-love", "fb-reactions-sad", "fb-reactions-wow", "feedly", "feeds", "female", "file-chart-line", "file-edit", "file-times-solid", "filter", "flag-outline", "flag", "flat-negative-sentiment-outline", "flat-negative-sentiment", "flat-neutral-sentiment-outline", "flat-neutral-sentiment", "flat-positive-sentiment-outline", "flat-positive-sentiment", "folder-open", "folder", "follow-outline", "follow", "follower-increase", "following", "font", "full-access", "gear", "gears", "github", "glassdoor", "glasses", "globe", "google-analytics-color", "google-business-messages", "google-drive", "google-my-business", "grip", "h1", "h2", "h3", "h4", "hamburger", "hand-sparkle-outline", "hand-sparkle", "hashtag", "headset", "heart-outline", "heart", "heartbeat", "help-alt", "help", "hiking", "history", "home", "hourglass", "hubspot", "image-caption", "image", "images", "impressions-per-post", "impressions", "inactive-listener", "inbox-action", "inbox-views", "inbox", "indicator", "industry", "info", "instagram", "internal-activity-outline", "internal-activity", "italic", "key", "keyboard", "laptop-phone", "large-density", "lift", "like-outline", "like", "link", "linkedin-audience-network", "linkedin", "list-ol", "listening", "lists", "location-outline", "location", "lock", "magic-wand", "male", "marketo", "mention", "message-preview-outline", "message-preview", "message", "messages-outline", "messages", "messenger", "metric-table", "microsoft-dynamics", "minus", "mobile", "monitor", "moon", "negative-sentiment", "neutral-positive-sentiment", "neutral-sentiment", "new-trend", "newspaper", "no-access", "notepad", "notifications-publishing-outline", "notifications-publishing", "notifications", "offline", "online", "paid-promotion-outline", "paid-promotion", "paid", "paint", "palette", "paperclip", "pause", "pencil-outline", "pencil", "person", "phone", "pinterest-boards-outline", "pinterest-boards", "pinterest", "play-circle", "play", "plug", "plus", "positive-sentiment", "power-up-outline", "power-up", "profile-connect", "profile-disconnect", "publishing-outline", "publishing", "puzzle-piece", "qr-code", "queue", "quotes-solid", "recommendation", "reddit-alien", "reddit", "reels-outline", "reels", "referrals", "refresh", "rejected", "reply-outline", "reply", "reporting-period", "reporting", "reports-home", "reports", "retweet", "route", "rss", "sales", "salesforce-cloud", "salesforce", "save-assets", "saved-messages", "saved-reply-outline", "saved-reply", "search", "send-again-outline", "send-again", "sent-message-outline", "sent-message", "share", "shopify", "shopping-bag-outline", "shopping-bag", "show-navigation", "slack", "small-density", "smiley", "some-access", "sparkles", "spike-alert", "star-half-alt-solid", "star-of-life", "star-outline", "star", "sticky-note-outline", "sticky-note", "stories", "story", "suggestions", "sun", "tag-outline", "tag", "targeting-outline", "targeting", "tasks-check", "tasks-outline", "tasks", "team-conversation-outline", "team-conversation", "team-sprout-outline", "team-sprout", "team", "text-asset", "text", "tiktok", "times", "tools", "trash-can-outline", "trash-can", "trend-down", "trend-neutral", "trend-up", "trends", "triangle-black", "triangle", "tripadvisor-circle-outline", "tripadvisor-circle", "tripadvisor", "trophy-outline", "tumblr", "twitter-audience-network", "twitter", "underline", "unfollow-outline", "unfollow", "unlink", "unlock", "upload", "user-circle", "users", "verified", "video-camera-story", "video-camera", "vip", "weight", "whatsapp", "window-maximize", "window-minimize", "window-regular", "window-restore", "woocommerce", "x", "yelp-full-star", "yelp-half-star", "yelp", "youtube", "zendesk"];

package/lib/illustrationNames.js

@@ -0,0 +1 @@
+export default ["abacus", "analytics-offering", "asset-cards", "astronaut", "binoculars", "brand-keyword", "browser-doc", "business", "calendar-event", "calendar-reporting", "cat-error", "cat-no-access", "cat", "checkbox-alert", "coffee-cup", "competitors", "compose-window", "compose", "computer-error", "connect", "contact", "conversation", "custom-branding", "custom-post-variables", "customer-service", "dashboard", "exclamation-mark", "face-happy", "find-bookmark", "flask", "general-topic", "global-features", "global-trend", "grow-large", "grow", "hands-raised", "headset", "heartbeat-connection", "instagram-links", "invoice", "jewel", "keyword-tracking", "lightbulb-alt", "lightbulb", "like-conversation", "link-broken", "link-messages", "link-sections", "link-upload", "listening-pendo", "listening-sentiment", "listening-topic-templates", "listening-tour", "listening", "loading", "mailbox-empty", "mailbox-full", "megaphone", "message", "molecule", "network-data", "no-messages-found", "no-notifications", "note", "notification", "notifications-onboarding", "notifications", "organize-message", "outbox-queue", "outbox-reviews", "pdf", "planning", "podium", "pointer", "publish-assets", "publish-links", "publishing-notifications", "publishing", "puzzle-piece", "question-mark", "reporting-folder", "reporting", "review-location", "review", "robot-assembly", "robot-error", "robot-happy", "rocket", "schedule-date", "schedule-messages", "search-keywords", "search-success", "search-trends", "search", "security", "sentiment", "shopping-bag", "spark-line", "sprout-mobile-app", "stamp", "storefront", "success", "tag-message", "tag", "team-roles", "team", "telescope", "tha-mel", "thumbs-up", "toggle-switch", "toolset-strength", "tracking-time", "twitter-messages", "twitter-profiles", "under-construction", "unsubscribe", "upward-trend", "user-task", "user-team", "variable-table", "view-connections", "vip-list", "warning", "wifi", "workflow-steps"];

package/lib/index.flow.js

@@ -51,7 +51,7 @@ export { default as Select } from "./Select/index.flow";
 export { default as Skeleton } from "./Skeleton/index.flow";
 export { default as SpotIllustration } from "./SpotIllustration/index.flow";
 export { default as Stack } from "./Stack/index.flow";
-export { default as Switch } from "./Switch/index.flow";
+export * from "./Switch/index.flow";
 export { default as Table } from "./Table/index.flow";
 export { default as TableCell } from "./TableCell/index.flow";
 export { default as TableHeaderCell } from "./TableHeaderCell/index.flow";

package/lib/index.js

@@ -1,5 +1,9 @@
 /* Asset types */
 
+export { default as IconNames } from "./iconNames";
+export { default as SpotIllustrationNames } from "./illustrationNames";
+export { default as PartnerLogoNames } from "./logoNames";
+
 /* Theme and related types */
 export * from "./systemProps";
 export { default as theme } from "./themes/light/theme";

package/lib/logoNames.js

@@ -0,0 +1 @@
+export default ["adobe-experience-manager", "android", "apple-app-store", "apple", "bigcommerce", "bitly", "bynder", "canva", "dropbox", "facebook-audience-network", "facebook", "facebook-groups", "facebook-shops", "feedly", "github", "glassdoor", "google-analytics", "google-business-messages", "google-drive", "google-my-business", "google-play-store", "hubspot", "instagram", "linkedin-audience-network", "linkedin", "marketo", "messenger", "microsoft-dynamics", "pinterest", "reddit-alien", "reddit", "salesforce-cloud", "salesforce", "shopify", "slack", "sproutsocial", "tableau", "tiktok", "tripadvisor", "tumblr", "twitter-audience-network", "twitter", "whatsapp", "woocommerce", "yelp", "youtube", "zendesk"];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "15.1.0",
+  "version": "17.0.0",
   "license": "MIT",
   "files": [
     "__flow__",
@@ -54,7 +54,8 @@
     "storybook": "rm -rf node_modules/.cache/storybook && start-storybook -c .storybook -p 9999",
     "build-storybook": "build-storybook --quiet -c .storybook -o .storybook-dist",
     "build-chromatic": "yarn build-icons && build-storybook --quiet -c .storybook -o .storybook-dist",
-    "icon-lint": "node bin/icon-lint/cli"
+    "icon-lint": "node bin/icon-lint/cli",
+    "ts-to-flow": "flowgen $FILE -o $OUTPUT --add-flow-header --no-module-exports"
   },
   "lint-staged": {
     "**/*": [
@@ -161,6 +162,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-testing-library": "^5.9.1",
     "flow-bin": "0.131.0",
+    "flowgen": "^1.21.0",
     "glob": "^7.1.6",
     "husky": "^0.14.3",
     "identity-obj-proxy": "^3.0.0",
@@ -208,7 +210,8 @@
     "react": ">=16.8.0",
     "react-dates": "^21.8.0",
     "react-virtualized": "9.18.5",
-    "styled-components": "^5.2.3"
+    "styled-components": "^5.2.3",
+    "react-dom": "^16.12.0"
   },
   "resolutions": {
     "@types/react": "^16.0.0",

package/__flow__/PartnerLogo/TypePartnerNames.flow.js

@@ -1,3 +0,0 @@
-// @flow strict-local
-
-export type TypePartnerNames = 'zendesk' | 'dropbox' | 'bigcommerce' | 'bitly' | 'canva' | 'twitter' | 'twitter-audience-network' | 'whatsapp' | 'yelp' | 'youtube' | 'shopify' | 'pinterest' | 'microsoft-dynamics' | 'marketo' | 'slack' | 'woocommerce' | 'tripadvisor' | 'tumblr' | 'google-business-messages' | 'reddit' | 'hubspot' | 'feedly' | 'facebook' | 'facebook-shops' | 'facebook-groups' | 'facebook-audience-network' | 'glassdoor' | 'salesforce' | 'instagram' | 'linkedin' | 'linkedin-audience-network' | 'google-analytics' | 'messenger' | 'google-my-business' | 'google-drive' | 'tiktok' | 'sproutsocial' | 'google-play-store' | 'apple-app-store' | 'bynder';