@carbonplan/components 10.5.0 → 11.0.0-alpha.0

package/dst/index.modern.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';
@@ -92,7 +92,7 @@ const event = ({
   });
 };
 
-const Link = _ref => {
+const Link = (_ref, ref) => {
   let {
     href,
     children,
@@ -105,7 +105,9 @@ const Link = _ref => {
     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) {
     let action;
     let category;
@@ -126,18 +128,22 @@ const Link = _ref => {
       });
     };
 
-    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);
+
 const getSizeStyles = size => {
   if (!['xs', 'sm', 'md', 'lg', 'xl'].includes(size)) {
     throw new Error('Size must be xs, sm, md, lg, or xl');
@@ -190,7 +196,7 @@ const getSizeStyles = size => {
 
 const _excluded$e = ["size", "prefix", "suffix", "inverted", "sx", "children", "align", "href", "internal", "tracking"];
 
-const Button = _ref => {
+const Button = (_ref, ref) => {
   let {
     size = 'sm',
     prefix,
@@ -361,7 +367,8 @@ const 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,
@@ -371,15 +378,18 @@ const Button = _ref => {
     }, props), Inner);
   } else {
     return /*#__PURE__*/React.createElement(Box, _extends({
+      ref: ref,
       as: "button",
       sx: style
     }, props), Inner);
   }
 };
 
+var button = forwardRef(Button);
+
 const _excluded$d = ["label", "children", "inverted", "color", "href", "internal", "tracking", "sx"];
 
-const Callout = _ref => {
+const Callout = (_ref, ref) => {
   let {
     label,
     children,
@@ -455,7 +465,8 @@ const 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,
@@ -463,12 +474,15 @@ const Callout = _ref => {
     }, props), Inner);
   } else {
     return /*#__PURE__*/React.createElement(Box, _extends({
+      ref: ref,
       as: "button",
       sx: style
     }, props), Inner);
   }
 };
 
+var callout = forwardRef(Callout);
+
 const _excluded$c = ["colormap", "label", "clim", "discrete", "units", "width", "height", "format", "horizontal"];
 const sx$2 = {
   clim: {
@@ -1196,14 +1210,14 @@ const Nav = ({
     return /*#__PURE__*/React.createElement(NextLink, {
       href: href,
       passHref: true
-    }, /*#__PURE__*/React.createElement(Link$1, {
+    }, /*#__PURE__*/React.createElement(Link$2, {
       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);
@@ -1258,7 +1272,7 @@ const Header = ({
   }, (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'
@@ -1269,7 +1283,7 @@ const Header = ({
       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: {
@@ -1413,7 +1427,7 @@ const 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',
@@ -1447,7 +1461,7 @@ const 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 @@ const GitSha = () => {
       }
     }, /*#__PURE__*/React.createElement(Separator, {
       color: color
-    }), /*#__PURE__*/React.createElement(Link$1, {
+    }), /*#__PURE__*/React.createElement(Link$2, {
       href: href,
       sx: {
         whiteSpace: 'nowrap',
@@ -2224,7 +2238,7 @@ const Group = ({
 
 const _excluded$3 = ["size", "inverted", "sx"];
 
-const Input = _ref => {
+const Input = (_ref, ref) => {
   let {
     size = 'sm',
     inverted,
@@ -2264,10 +2278,13 @@ const Input = _ref => {
   }, getSizeStyles(size), sx);
 
   return /*#__PURE__*/React.createElement(Input$1, _extends({}, props, {
+    ref: ref,
     sx: styles
   }));
 };
 
+var input = forwardRef(Input);
+
 const getProps = test => props => {
   const next = {};
 
@@ -2375,7 +2392,7 @@ const Select = _ref => {
 
 const _excluded$1 = ["sx"];
 
-const Slider = _ref => {
+const Slider = (_ref, ref) => {
   let {
     sx
   } = _ref,
@@ -2388,6 +2405,7 @@ const Slider = _ref => {
     }
   } = useThemeUI();
   return /*#__PURE__*/React.createElement(Slider$1, _extends({
+    ref: ref,
     sx: _extends({
       '&::-webkit-slider-thumb': {
         height: [22, 18, 16],
@@ -2419,6 +2437,8 @@ const Slider = _ref => {
   }, props));
 };
 
+var slider = forwardRef(Slider);
+
 const styles = {
   reset: {
     verticalAlign: 'baseline',
@@ -2521,7 +2541,7 @@ const Table = ({
 
 const _excluded = ["value", "onClick", "disabled", "sx"];
 
-const Toggle = _ref => {
+const Toggle = (_ref, ref) => {
   let {
     value,
     onClick,
@@ -2533,6 +2553,7 @@ const Toggle = _ref => {
   const 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",
@@ -2570,6 +2591,8 @@ const Toggle = _ref => {
   })));
 };
 
+var toggle = forwardRef(Toggle);
+
 const Tracking = ({
   id
 }) => {
@@ -2672,5 +2695,5 @@ const formatDate = (date, options = defaultOptions) => {
   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.modern.js.map