@sproutsocial/racine 14.3.0 → 15.0.1

package/lib/Card/subComponents.js

@@ -0,0 +1,37 @@
+var _excluded = ["children"],
+  _excluded2 = ["children"],
+  _excluded3 = ["children"];
+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; }
+import React from 'react';
+import { useChildContext } from "./utils";
+import { StyledCardContent, StyledCardHeader, StyledCardFooter, StyledSelectedIcon, SelectedIconWrapper } from "./styles";
+export var CardContent = function CardContent(_ref) {
+  var children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  // TODO: It could be cool to possibly adjust the context to include an array of names of child components.
+  // Then, if CardHeader or CardFooter aren't used with CardContent throw an error.
+  useChildContext();
+  return /*#__PURE__*/React.createElement(StyledCardContent, rest, children);
+};
+export var CardHeader = function CardHeader(_ref2) {
+  var children = _ref2.children,
+    rest = _objectWithoutProperties(_ref2, _excluded2);
+  useChildContext();
+  return /*#__PURE__*/React.createElement(StyledCardHeader, rest, children);
+};
+export var CardFooter = function CardFooter(_ref3) {
+  var children = _ref3.children,
+    rest = _objectWithoutProperties(_ref3, _excluded3);
+  useChildContext();
+  return /*#__PURE__*/React.createElement(StyledCardFooter, rest, children);
+};
+export var SelectedIcon = function SelectedIcon(_ref4) {
+  var $selected = _ref4.$selected;
+  return /*#__PURE__*/React.createElement(SelectedIconWrapper, null, /*#__PURE__*/React.createElement(StyledSelectedIcon, {
+    "aria-hidden": true,
+    color: "icon.base",
+    name: "circle-check",
+    $selected: $selected
+  }));
+};

package/lib/Card/utils.js

@@ -0,0 +1,46 @@
+import { createContext, useContext } from 'react';
+import { assertIsElement } from "../utils";
+export var SubComponentContext = /*#__PURE__*/createContext(
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+function () {});
+export function useChildContext() {
+  var setHasSubComponent = useContext(SubComponentContext);
+  setHasSubComponent(true);
+}
+export var navigateTo = function navigateTo(_ref) {
+  var _ref$current, _window$open;
+  var e = _ref.e,
+    href = _ref.href,
+    ref = _ref.ref;
+  var target = e.target;
+
+  // asserts that target is an element so `contains` accepts it
+  assertIsElement(target);
+  if ((_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.contains(target)) {
+    if (target.getAttribute('onclick') !== null || target.getAttribute('href') !== null) {
+      e.stopPropagation();
+      return;
+    }
+  }
+  (_window$open = window.open(href, '_blank')) === null || _window$open === void 0 ? void 0 : _window$open.focus();
+};
+export var onKeyDown = function onKeyDown(_ref2) {
+  var e = _ref2.e,
+    href = _ref2.href,
+    onClick = _ref2.onClick,
+    ref = _ref2.ref,
+    role = _ref2.role;
+  if ((e === null || e === void 0 ? void 0 : e.key) === 'Enter') {
+    if (role === 'link') {
+      return navigateTo({
+        e: e,
+        href: href,
+        ref: ref
+      });
+    }
+    if (role === 'presentation') {
+      return;
+    }
+    return onClick === null || onClick === void 0 ? void 0 : onClick(e);
+  }
+};

package/lib/Icon/Icon.js

@@ -103,6 +103,7 @@ IconToggle.displayName = 'Icon.Toggle';
 /**
  * **Accessibility note:** It is best practice to wrap `<Icon.Toggle />` in a button. The button must include `aria-label` and `aria-pressed` in order for a screen reader to properly communicate the icon's state. See example below.
  *
+ * @link https://www.w3.org/TR/wai-aria-practices-1.1/#button
  * @example
  * const [toggleState, setToggleState] = useState(false);
  * <Button  // Wrap Icon.Toggle with Button

package/lib/IconViewBoxes.js

@@ -174,6 +174,8 @@ module.exports = {
   "h3": "0 0 16 16",
   "h4": "0 0 16 16",
   "hamburger": "0 0 16 18",
+  "hand-sparkle-outline": "0 0 18 18",
+  "hand-sparkle": "0 0 18 18",
   "hashtag": "0 0 16 16",
   "headset": "0 0 16 16",
   "heart-outline": "0 0 16 16",

package/lib/Loader/styles.js

@@ -1,28 +1,33 @@
-import { rgba } from 'polished';
 import styled, { css, keyframes } from 'styled-components';
 import { visuallyHidden } from "../utils/mixins";
 import { COMMON } from "../utils/system-props";
 var getSize = function getSize(size) {
-  var spinnerSize = Math.ceil(size * 0.9);
-  var borderWidth = Math.ceil(size * 0.1);
-  return css(["width:", "px;height:", "px;&:after{width:", "px;height:", "px;box-sizing:border-box;border-width:", "px;}.no-cssanimations &::after{background-size:", "px;}"], size, size, spinnerSize, spinnerSize, borderWidth, spinnerSize);
-};
-var getColor = function getColor(color) {
-  return css(["&:after{border-color:", " ", " ", " ", ";}"], rgba(color, 0.3), rgba(color, 0.3), rgba(color, 0.7), rgba(color, 0.7));
+  var spinnerSize = Math.round(size * 1);
+  var borderWidth = Math.round(size * 0.1);
+  return css(["width:", "px;height:", "px;&:after{width:", "px;height:", "px;box-sizing:border-box;border-width:", "px;box-shadow:", ";}.no-cssanimations &::after{background-size:", "px;}"], size, size, spinnerSize, spinnerSize, borderWidth, function (_ref) {
+    var theme = _ref.theme;
+    return "inset 0 0 0 2px ".concat(theme.colors.neutral[600]);
+  }, spinnerSize);
 };
 var spin = keyframes(["from{transform:translate(-50%,-50%) rotate(0deg);}to{transform:translate(-50%,-50%) rotate(360deg);}"]);
-var delay = keyframes(["0%{opacity:0;}80%{opacity:0;}100%{opacity:1;}"]);
+var delayAnimation = keyframes(["0%{opacity:0;}80%{opacity:0;}100%{opacity:1;}"]);
 var Container = styled.div.attrs({
   className: 'Loader'
 }).withConfig({
   displayName: "styles__Container",
   componentId: "sc-1edimrk-0"
-})(["position:relative;margin:0 auto;overflow:hidden;&:after{position:absolute;top:50%;left:50%;border-style:solid;border-radius:50%;content:'';transition:opacity 250ms;animation:", ";}", " ", " ", ""], function (props) {
-  return props.delay ? css(["", " 2.25s infinite linear,", " 2s 1"], spin, delay) : css(["", " 2.25s infinite linear"], spin);
+})(["position:relative;margin:0 auto;padding:0;overflow:hidden;border-radius:100%;box-shadow:", ";animation:", ";&:after{position:absolute;top:50%;left:50%;background:transparent;border-style:solid;border-radius:100%;content:'';transition:opacity 250ms;border-color:", ";animation:", ";}", " ", ""], function (_ref2) {
+  var theme = _ref2.theme;
+  return "0 0 0 2px ".concat(theme.colors.neutral[600]);
 }, function (props) {
-  return props.small ? getSize(20) : getSize(40);
+  return props.delay ? css(["", " 2s 1;"], delayAnimation) : 'none';
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return "".concat(theme.colors.neutral[0], " ").concat(theme.colors.neutral[0], " ").concat(theme.colors.neutral[600], " ").concat(theme.colors.neutral[600]);
 }, function (props) {
-  return props.dark ? getColor(props.theme.colors.neutral[400]) : getColor(props.theme.colors.neutral[0]);
+  return props.delay ? css(["", " 2.25s infinite linear,", " 2s 1"], spin, delayAnimation) : css(["", " 2.25s infinite linear"], spin);
+}, function (props) {
+  return props.small ? getSize(20) : getSize(40);
 }, COMMON);
 export var Text = styled.div.withConfig({
   displayName: "styles__Text",

package/lib/index.flow.js

@@ -1,6 +1,6 @@
 /* Asset types */
 /* Theme and related types */
-export * from "./systemProps";
+export * from "./systemProps/index.flow";
 export { default as theme } from "./themes/light/theme.flow";
 export { default as darkTheme } from "./themes/dark/theme.flow";
 export { sproutLightTheme, sproutDarkTheme } from "./themes/extendedThemes/sproutTheme/index.flow";

package/lib/systemProps/index.flow.js

@@ -0,0 +1,14 @@
+export * from "./types.flow";
+export * from "./background.flow";
+export * from "./border.flow";
+export * from "./color.flow";
+export * from "./custom.flow";
+export * from "./flexbox.flow";
+export * from "./grid.flow";
+export * from "./layout.flow";
+export * from "./position.flow";
+export * from "./shadow.flow";
+export * from "./space.flow";
+export * from "./systemProps.flow";
+export * from "./typography.flow";
+export * from "./variant.flow";

package/lib/systemProps/index.js

@@ -17,48 +17,4 @@ export var variantSystemProps = compose(variant({
 export var systemProps = compose(customSystemProps, variantSystemProps, background, border, color, flexbox, grid, layout, position, shadow, space, typography);
 
 // including deprecated support for old type names in case they are needed for the intial TS release
-export {
-/**
-  @deprecated: Use BackgroundProps from styled-system instead.
-*/
-
-/**
-  @deprecated: Use background from styled-system instead.
-*/
-background as backgroundSystemProps,
-/**
-  @deprecated: Use border from styled-system instead.
-*/
-border as borderSystemProps,
-/**
-  @deprecated: Use color from styled-system instead.
-*/
-color as colorSystemProps,
-/**
-  @deprecated: Use flexbox from styled-system instead.
-*/
-flexbox as flexboxSystemProps,
-/**
-  @deprecated: Use grid from styled-system instead.
-*/
-grid as gridSystemProps,
-/**
-  @deprecated: Use layout from styled-system instead.
-*/
-layout as layoutSystemProps,
-/**
-  @deprecated: Use position from styled-system instead.
-*/
-position as positionSystemProps,
-/**
-  @deprecated: Use shadow from styled-system instead.
-*/
-shadow as shadowSystemProps,
-/**
-  @deprecated: Use space from styled-system instead.
-*/
-space as spaceSystemProps,
-/**
-  @deprecated: Use typography from styled-system instead.
-*/
-typography as typographySystemProps };
+export { background as backgroundSystemProps, border as borderSystemProps, color as colorSystemProps, flexbox as flexboxSystemProps, grid as gridSystemProps, layout as layoutSystemProps, position as positionSystemProps, shadow as shadowSystemProps, space as spaceSystemProps, typography as typographySystemProps };

package/lib/systemProps/systemProps.flow.js

@@ -0,0 +1,14 @@
+import { compose } from 'styled-system';
+import { backgroundSystemProps } from "./background.flow";
+import { borderSystemProps } from "./border.flow";
+import { colorSystemProps } from "./color.flow";
+import { customSystemProps } from "./custom.flow";
+import { flexboxSystemProps } from "./flexbox.flow";
+import { gridSystemProps } from "./grid.flow";
+import { layoutSystemProps } from "./layout.flow";
+import { positionSystemProps } from "./position.flow";
+import { shadowSystemProps } from "./shadow.flow";
+import { spaceSystemProps } from "./space.flow";
+import { typographySystemProps } from "./typography.flow";
+import { variantSystemProps } from "./variant.flow";
+export var systemProps = compose(customSystemProps, variantSystemProps, backgroundSystemProps, borderSystemProps, colorSystemProps, flexboxSystemProps, gridSystemProps, layoutSystemProps, positionSystemProps, shadowSystemProps, spaceSystemProps, typographySystemProps);

package/lib/types/shared.flow.js

@@ -0,0 +1 @@
+import * as React from 'react';

package/lib/utils/index.js

@@ -37,4 +37,17 @@ export var mergeRefs = function mergeRefs(refs) {
  */
 export function includes(coll, el) {
   return coll.includes(el);
+}
+
+// https://stackoverflow.com/questions/71193818/react-onclick-argument-of-type-eventtarget-is-not-assignable-to-parameter-of-t
+export function assertIsNode(e) {
+  if (!e || !('nodeType' in e)) {
+    throw new Error("Node expected");
+  }
+}
+export function assertIsElement(e) {
+  assertIsNode(e);
+  if (e.nodeType !== 1) {
+    throw new Error("Element expected");
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "14.3.0",
+  "version": "15.0.1",
   "license": "MIT",
   "files": [
     "__flow__",
@@ -33,7 +33,7 @@
     "build:typescript": "tsc --noEmit",
     "watch-app": "BABEL_ENV=es node ./bin/buildApp.js --watch",
     "start-package-only": "npm-run-all install-deps clean -p build-icons watch-package",
-    "start": "npm-run-all install-deps clean -p build-icons watch-package watch-app",
+    "start": "npm-run-all clean -p build-icons watch-package watch-app",
     "build": "npm-run-all -s clean build-icons build:typescript build:ts-declarations build-package build-app",
     "build:sync-icons": "npm-run-all -s clean build-icons build:typescript build:ts-declarations build-package",
     "lint-js": "eslint --max-warnings=0 --fix .",
@@ -43,7 +43,7 @@
     "jest:watch": "jest --watch",
     "test:flow": "flow check --max-warnings 0",
     "test:ts": "tsc --noEmit",
-    "test:types": "yarn build-icons && yarn test:flow && yarn test:ts",
+    "test:types": "yarn test:flow && yarn test:ts",
     "test": "npm-run-all test:types lint-js lint-css lint-icons jest",
     "backstop-test": "yarn backstop test --config='backstop.config.js' --docker",
     "backstop-reference": "yarn backstop reference --config='backstop.config.js' --docker",
@@ -73,6 +73,7 @@
   "dependencies": {
     "@styled-system/theme-get": "^5.1.2",
     "classnames": "^2.2.6",
+    "flowgen": "^1.21.0",
     "lodash.curry": "^4.1.1",
     "lodash.uniqueid": "^4.0.1",
     "lru-memoize": "~1.0.2",
@@ -120,12 +121,12 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.0.0",
-    "@types/jest": "^29.2.3",
+    "@types/jest": "^27.0.0",
     "@types/jest-axe": "^3.5.5",
-    "@types/node": "^17.0.38",
-    "@types/react": "^18.0.10",
+    "@types/node": "^16.15.0",
+    "@types/react": "^16.0.0",
     "@types/react-dates": "^21.8.3",
-    "@types/react-dom": "^18.0.5",
+    "@types/react-dom": "^16.0.0",
     "@types/react-modal": "^3.13.1",
     "@types/react-virtualized": "9.18.*",
     "@types/styled-components": "^5.1.26",
@@ -165,8 +166,8 @@
     "identity-obj-proxy": "^3.0.0",
     "inquirer": "^6.4.1",
     "is-glob": "^4.0.1",
-    "jest": "27.x.x",
-    "jest-axe": "6.0.0",
+    "jest": "^27.0.0",
+    "jest-axe": "^6.0.0",
     "jest-styled-components": "7.0.0-beta.1",
     "jscodeshift": "^0.13.0",
     "json-to-scss": "^1.6.2",
@@ -177,9 +178,9 @@
     "pify": "^4.0.1",
     "prettier": "^2.7.1",
     "prop-types": "^15.6.1",
-    "react": "16.12.0",
+    "react": "^16.12.0",
     "react-dates": "^21.8.0",
-    "react-dom": "16.12.0",
+    "react-dom": "^16.12.0",
     "rimraf": "^2.6.3",
     "storybook-dark-mode": "^1.0.9",
     "styled-components": "^5.2.3",
@@ -210,6 +211,8 @@
     "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__/systemProps/index.js

@@ -1,16 +0,0 @@
-// @flow strict-local
-
-export * from "./types.flow.js";
-export * from "./background";
-export * from "./border";
-export * from "./color";
-export * from "./custom";
-export * from "./flexbox";
-export * from "./grid";
-export * from "./layout";
-export * from "./position";
-export * from "./shadow";
-export * from "./space";
-export * from "./systemProps";
-export * from "./typography";
-export * from "./variant";

package/lib/systemProps/systemProps.js

@@ -1,14 +0,0 @@
-import { compose } from 'styled-system';
-import { backgroundSystemProps } from "./background";
-import { borderSystemProps } from "./border";
-import { colorSystemProps } from "./color";
-import { customSystemProps } from "./custom";
-import { flexboxSystemProps } from "./flexbox";
-import { gridSystemProps } from "./grid";
-import { layoutSystemProps } from "./layout";
-import { positionSystemProps } from "./position";
-import { shadowSystemProps } from "./shadow";
-import { spaceSystemProps } from "./space";
-import { typographySystemProps } from "./typography";
-import { variantSystemProps } from "./variant";
-export var systemProps = compose(customSystemProps, variantSystemProps, backgroundSystemProps, borderSystemProps, colorSystemProps, flexboxSystemProps, gridSystemProps, layoutSystemProps, positionSystemProps, shadowSystemProps, spaceSystemProps, typographySystemProps);