@carbonplan/components 10.5.0 → 11.0.0-alpha.0

package/dst/index.esm.js

@@ -1,5 +1,5 @@
-import React, { cloneElement, useCallback, useState, useEffect, useRef } from 'react';
-import { Box, Link as Link$1, Flex, Grid, IconButton, useColorMode, Container, useThemeUI, Text, Styled, Input as Input$1, Slider as Slider$1 } from 'theme-ui';
+import React, { forwardRef, cloneElement, useCallback, useState, useEffect, useRef } from 'react';
+import { Box, Link as Link$2, Flex, Grid, IconButton, useColorMode, Container, useThemeUI, Text, Styled, Input as Input$1, Slider as Slider$1 } from 'theme-ui';
 import { transparentize } from '@theme-ui/color';
 import NextLink from 'next/link';
 import { Arrow, Sun } from '@carbonplan/icons';
@@ -90,7 +90,7 @@ var event = function event(_ref) {
   });
 };
 
-var Link = function Link(_ref2) {
+var Link = function Link(_ref2, ref) {
   var href = _ref2.href,
       children = _ref2.children,
       _ref2$internal = _ref2.internal,
@@ -103,7 +103,9 @@ var Link = function Link(_ref2) {
     return /*#__PURE__*/React.createElement(NextLink, {
       href: href,
       passHref: true
-    }, /*#__PURE__*/React.createElement(Link$1, props, children));
+    }, /*#__PURE__*/React.createElement(Link$2, _extends({
+      ref: ref
+    }, props), children));
   } else if (tracking) {
     var action;
     var category;
@@ -124,18 +126,22 @@ var Link = function Link(_ref2) {
       });
     };
 
-    return /*#__PURE__*/React.createElement(Link$1, _extends({
+    return /*#__PURE__*/React.createElement(Link$2, _extends({
+      ref: ref,
       onClick: track,
       onContextMenu: track,
       href: href
     }, props), children);
   } else {
-    return /*#__PURE__*/React.createElement(Link$1, _extends({
+    return /*#__PURE__*/React.createElement(Link$2, _extends({
+      ref: ref,
       href: href
     }, props), children);
   }
 };
 
+var Link$1 = forwardRef(Link);
+
 var getSizeStyles = function getSizeStyles(size) {
   if (!['xs', 'sm', 'md', 'lg', 'xl'].includes(size)) {
     throw new Error('Size must be xs, sm, md, lg, or xl');
@@ -188,7 +194,7 @@ var getSizeStyles = function getSizeStyles(size) {
 
 var _excluded$e = ["size", "prefix", "suffix", "inverted", "sx", "children", "align", "href", "internal", "tracking"];
 
-var Button = function Button(_ref) {
+var Button = function Button(_ref, ref) {
   var _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'sm' : _ref$size,
       prefix = _ref.prefix,
@@ -358,7 +364,8 @@ var Button = function Button(_ref) {
   }, suffix && suffix));
 
   if (href) {
-    return /*#__PURE__*/React.createElement(Link, _extends({
+    return /*#__PURE__*/React.createElement(Link$1, _extends({
+      ref: ref,
       href: href,
       internal: internal,
       tracking: tracking,
@@ -368,15 +375,18 @@ var Button = function Button(_ref) {
     }, props), Inner);
   } else {
     return /*#__PURE__*/React.createElement(Box, _extends({
+      ref: ref,
       as: "button",
       sx: style
     }, props), Inner);
   }
 };
 
+var button = forwardRef(Button);
+
 var _excluded$d = ["label", "children", "inverted", "color", "href", "internal", "tracking", "sx"];
 
-var Callout = function Callout(_ref) {
+var Callout = function Callout(_ref, ref) {
   var label = _ref.label,
       children = _ref.children,
       inverted = _ref.inverted,
@@ -450,7 +460,8 @@ var Callout = function Callout(_ref) {
   })));
 
   if (href) {
-    return /*#__PURE__*/React.createElement(Link, _extends({
+    return /*#__PURE__*/React.createElement(Link$1, _extends({
+      ref: ref,
       href: href,
       internal: internal,
       tracking: tracking,
@@ -458,12 +469,15 @@ var Callout = function Callout(_ref) {
     }, props), Inner);
   } else {
     return /*#__PURE__*/React.createElement(Box, _extends({
+      ref: ref,
       as: "button",
       sx: style
     }, props), Inner);
   }
 };
 
+var callout = forwardRef(Callout);
+
 var _excluded$c = ["colormap", "label", "clim", "discrete", "units", "width", "height", "format", "horizontal"];
 var sx$2 = {
   clim: {
@@ -1194,14 +1208,14 @@ var Nav = function Nav(_ref) {
     return /*#__PURE__*/React.createElement(NextLink, {
       href: href,
       passHref: true
-    }, /*#__PURE__*/React.createElement(Link$1, {
+    }, /*#__PURE__*/React.createElement(Link$2, {
       onClick: function onClick() {
         if (nav === url) setExpanded(false);
       },
       sx: sx$1.link(nav, url, first)
     }, /*#__PURE__*/React.createElement(HoverArrow, null), display));
   } else {
-    return /*#__PURE__*/React.createElement(Link$1, {
+    return /*#__PURE__*/React.createElement(Link$2, {
       href: href,
       sx: sx$1.link(nav, url, first)
     }, /*#__PURE__*/React.createElement(HoverArrow, null), display);
@@ -1257,7 +1271,7 @@ var Header = function Header(_ref3) {
   }, (mode == 'homepage' || mode == 'local') && /*#__PURE__*/React.createElement(NextLink, {
     href: "/",
     passHref: true
-  }, /*#__PURE__*/React.createElement(Link$1, {
+  }, /*#__PURE__*/React.createElement(Link$2, {
     "aria-label": "CarbonPlan Homepage",
     sx: {
       display: 'block'
@@ -1268,7 +1282,7 @@ var Header = function Header(_ref3) {
       cursor: 'pointer',
       color: 'primary'
     }
-  }))), (mode == null || mode == 'remote') && /*#__PURE__*/React.createElement(Link$1, {
+  }))), (mode == null || mode == 'remote') && /*#__PURE__*/React.createElement(Link$2, {
     href: "https://carbonplan.org",
     "aria-label": "CarbonPlan Homepage",
     sx: {
@@ -1412,7 +1426,7 @@ var Footer = function Footer() {
       letterSpacing: 'mono',
       mb: [2]
     }
-  }, "EMAIL"), /*#__PURE__*/React.createElement(Link$1, {
+  }, "EMAIL"), /*#__PURE__*/React.createElement(Link$2, {
     href: "mailto:hello@carbonplan.org",
     sx: {
       textDecoration: 'none',
@@ -1446,7 +1460,7 @@ var Footer = function Footer() {
       letterSpacing: 'mono',
       mb: [2]
     }
-  }, "FOLLOW"), /*#__PURE__*/React.createElement(Link$1, {
+  }, "FOLLOW"), /*#__PURE__*/React.createElement(Link$2, {
     href: "https://twitter.com/carbonplanorg",
     sx: {
       textDecoration: 'none',
@@ -1559,7 +1573,7 @@ var GitSha = function GitSha() {
       }
     }, /*#__PURE__*/React.createElement(Separator, {
       color: color
-    }), /*#__PURE__*/React.createElement(Link$1, {
+    }), /*#__PURE__*/React.createElement(Link$2, {
       href: href,
       sx: {
         whiteSpace: 'nowrap',
@@ -2250,7 +2264,7 @@ var Group = function Group(_ref) {
 
 var _excluded$3 = ["size", "inverted", "sx"];
 
-var Input = function Input(_ref) {
+var Input = function Input(_ref, ref) {
   var _extends2;
 
   var _ref$size = _ref.size,
@@ -2283,10 +2297,13 @@ var Input = function Input(_ref) {
   }, _extends2), getSizeStyles(size), sx);
 
   return /*#__PURE__*/React.createElement(Input$1, _extends({}, props, {
+    ref: ref,
     sx: styles
   }));
 };
 
+var input = forwardRef(Input);
+
 var getProps = function getProps(test) {
   return function (props) {
     var next = {};
@@ -2396,7 +2413,7 @@ var Select = function Select(_ref) {
 
 var _excluded$1 = ["sx"];
 
-var Slider = function Slider(_ref) {
+var Slider = function Slider(_ref, ref) {
   var sx = _ref.sx,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
 
@@ -2406,6 +2423,7 @@ var Slider = function Slider(_ref) {
       colors = _useThemeUI.theme.rawColors;
 
   return /*#__PURE__*/React.createElement(Slider$1, _extends({
+    ref: ref,
     sx: _extends({
       '&::-webkit-slider-thumb': {
         height: [22, 18, 16],
@@ -2437,6 +2455,8 @@ var Slider = function Slider(_ref) {
   }, props));
 };
 
+var slider = forwardRef(Slider);
+
 var styles = {
   reset: {
     verticalAlign: 'baseline',
@@ -2542,7 +2562,7 @@ var Table = function Table(_ref) {
 
 var _excluded = ["value", "onClick", "disabled", "sx"];
 
-var Toggle = function Toggle(_ref) {
+var Toggle = function Toggle(_ref, ref) {
   var value = _ref.value,
       onClick = _ref.onClick,
       disabled = _ref.disabled,
@@ -2552,6 +2572,7 @@ var Toggle = function Toggle(_ref) {
   var color = sx && sx.color ? sx.color : 'primary';
   value = disabled ? false : value;
   return /*#__PURE__*/React.createElement(Box, _extends({
+    ref: ref,
     as: "button",
     onClick: onClick,
     role: "checkbox",
@@ -2589,6 +2610,8 @@ var Toggle = function Toggle(_ref) {
   })));
 };
 
+var toggle = forwardRef(Toggle);
+
 var Tracking = function Tracking(_ref) {
   var id = _ref.id;
 
@@ -2687,5 +2710,5 @@ var formatDate = function formatDate(date, options) {
   return [month, day, year].filter(Boolean).join(' ');
 };
 
-export { Badge, Button, Callout, Colorbar, Column, Custom404, Dimmer, Expander, FadeIn, Filter, Footer, Group, Guide, Header, Input, Layout, Link, Logo, Menu, Meta, Monogram, Row, Scrollbar, Select, Settings, Slider, Table, Tag, Toggle, Tracking, Tray, formatDate, getScrollbarWidth };
+export { Badge, button as Button, callout as Callout, Colorbar, Column, Custom404, Dimmer, Expander, FadeIn, Filter, Footer, Group, Guide, Header, input as Input, Layout, Link$1 as Link, Logo, Menu, Meta, Monogram, Row, Scrollbar, Select, Settings, slider as Slider, Table, Tag, toggle as Toggle, Tracking, Tray, formatDate, getScrollbarWidth };
 //# sourceMappingURL=index.esm.js.map