@carbonplan/components 13.4.0-develop.0 → 13.4.0-develop.2

package/dst/index.mjs

@@ -1284,7 +1284,7 @@ import { Box as Box22 } from "theme-ui";
 import { PoopSad } from "@carbonplan/emoji";
 
 // src/layout.tsx
-import React31, { useEffect as useEffect7 } from "react";
+import React31, { useEffect as useEffect8 } from "react";
 import { useThemeUI as useThemeUI3, Container as Container3, Flex as Flex5, Box as Box21 } from "theme-ui";
 
 // src/meta.tsx
@@ -1598,7 +1598,7 @@ var Menu = (props) => {
 var menu_default = Menu;
 
 // src/header/navigation-menu.tsx
-import React18 from "react";
+import React18, { useEffect as useEffect2 } from "react";
 import { default as NextLink2 } from "next/link";
 import { Link as Link2 } from "theme-ui";
 import { Arrow as Arrow2 } from "@carbonplan/icons";
@@ -1677,6 +1677,13 @@ var Nav = ({ link, mode, nav, first, setExpanded }) => {
   }
 };
 var NavigationMenu = ({ nav, mode, setExpanded }) => {
+  useEffect2(() => {
+    const handler = (e) => {
+      if (e.key === "Escape") setExpanded(false);
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [setExpanded]);
   return /* @__PURE__ */ React18.createElement(React18.Fragment, null, links.map((d, i) => /* @__PURE__ */ React18.createElement(
     Nav,
     {
@@ -1700,7 +1707,7 @@ var Search = (props) => {
 var search_default = Search;
 
 // src/header/search-menu.tsx
-import React21, { useEffect as useEffect2, useState as useState2 } from "react";
+import React21, { useEffect as useEffect3, useState as useState2 } from "react";
 import { Box as Box13, Flex as Flex2, Link as Link3 } from "theme-ui";
 import { Arrow as Arrow3, RotatingArrow } from "@carbonplan/icons";
 
@@ -1779,7 +1786,6 @@ var RESOURCES = [
 var sx2 = {
   highlight: {
     mb: [2, 2, 3, 3],
-    mt: [3, 3, 0, 0],
     fontSize: [3, 3, 3, 4],
     fontFamily: "heading",
     letterSpacing: "smallcaps",
@@ -1787,19 +1793,28 @@ var sx2 = {
     color: "secondary"
   }
 };
-var SearchMenu = ({}) => {
+var SearchMenu = ({
+  setExpanded
+}) => {
   const [value, setValue] = useState2("");
   const [resources, setResources] = useState2(RESOURCES);
   const destination = `/search?query=${value.trim()}`;
-  useEffect2(() => {
+  useEffect3(() => {
     fetch("/resources.json").then((res) => res.json()).then((res) => {
-      if (res.length === 3 && res.every((el) => el.label && Array.isArray(el.links))) {
+      if (res.every((el) => el.label && Array.isArray(el.links))) {
         setResources(res);
       }
     }).catch(() => {
       setResources(RESOURCES);
     });
   }, []);
+  useEffect3(() => {
+    const handler = (e) => {
+      if (e.key === "Escape") setExpanded(false);
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [setExpanded]);
   return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(row_default, { columns: [6, 6, 10, 10] }, /* @__PURE__ */ React21.createElement(column_default, { start: 1, width: [6, 6, 10, 10] }, /* @__PURE__ */ React21.createElement(
     Flex2,
     {
@@ -1847,6 +1862,7 @@ var SearchMenu = ({}) => {
     /* @__PURE__ */ React21.createElement(
       input_default,
       {
+        autoFocus: true,
         id: "search",
         size: "xl",
         value,
@@ -1872,89 +1888,30 @@ var SearchMenu = ({}) => {
     row_default,
     {
       columns: [6, 6, 10, 10],
-      sx: { display: ["none", "grid", "grid", "grid"] }
+      sx: {
+        mt: [6, 7, 8, 8],
+        rowGap: [5, 4, 6, 7]
+      }
     },
-    /* @__PURE__ */ React21.createElement(
+    resources.map((group, i) => /* @__PURE__ */ React21.createElement(
       column_default,
       {
-        start: 1,
-        width: 5,
-        sx: { mt: [2, 2, 8, 8], mb: [1, 1, , 6, 6] }
+        start: [1, 1 + i * 3 % 6, 2 + i * 3 % 9, 2 + i * 3 % 9],
+        width: [6, 3, 3, 3]
       },
-      /* @__PURE__ */ React21.createElement(Box13, { as: "h2", variant: "styles.h2", sx: { my: 0 } }, "Popular resources")
-    ),
-    /* @__PURE__ */ React21.createElement(column_default, { start: [1, 1, 2, 2], width: 3 }, /* @__PURE__ */ React21.createElement(Box13, { sx: sx2.highlight }, resources[0].label), resources[0].links.map(({ label, href }) => /* @__PURE__ */ React21.createElement(
-      button_default,
-      {
-        key: href,
-        href,
-        size: "md",
-        sx: { mb: [1] },
-        suffix: /* @__PURE__ */ React21.createElement(RotatingArrow, null)
-      },
-      label
-    ))),
-    /* @__PURE__ */ React21.createElement(column_default, { start: [4, 4, 5, 5], width: 3 }, /* @__PURE__ */ React21.createElement(Box13, { sx: sx2.highlight }, resources[1].label), resources[1].links.map(({ label, href }) => /* @__PURE__ */ React21.createElement(
-      button_default,
-      {
-        key: href,
-        href,
-        size: "md",
-        sx: { mb: [1] },
-        suffix: /* @__PURE__ */ React21.createElement(RotatingArrow, null)
-      },
-      label
-    ))),
-    /* @__PURE__ */ React21.createElement(column_default, { start: [1, 1, 8, 8], width: 3, sx: { mt: [0, 4, 0, 0] } }, /* @__PURE__ */ React21.createElement(Box13, { sx: sx2.highlight }, resources[2].label), resources[2].links.map(({ label, href }) => /* @__PURE__ */ React21.createElement(
-      button_default,
-      {
-        key: href,
-        href,
-        size: "md",
-        sx: { mb: [1] },
-        suffix: /* @__PURE__ */ React21.createElement(RotatingArrow, null)
-      },
-      label
-    )))
-  ), /* @__PURE__ */ React21.createElement(
-    row_default,
-    {
-      columns: [6, 6, 10, 10],
-      sx: { display: ["grid", "none", "none", "none"] }
-    },
-    /* @__PURE__ */ React21.createElement(column_default, { start: 1, width: 6 }, /* @__PURE__ */ React21.createElement(Box13, { as: "h2", variant: "styles.h3", sx: { my: 4 } }, "Popular resources"), /* @__PURE__ */ React21.createElement(Box13, { sx: sx2.highlight }, resources[0].label), resources[0].links.map(({ label, href }) => /* @__PURE__ */ React21.createElement(
-      button_default,
-      {
-        key: href,
-        href,
-        size: "xs",
-        sx: { mb: [1] },
-        suffix: /* @__PURE__ */ React21.createElement(RotatingArrow, null)
-      },
-      label
-    ))),
-    /* @__PURE__ */ React21.createElement(column_default, { start: 1, width: 6 }, /* @__PURE__ */ React21.createElement(Box13, { sx: sx2.highlight }, resources[1].label), resources[1].links.map(({ label, href }) => /* @__PURE__ */ React21.createElement(
-      button_default,
-      {
-        key: href,
-        href,
-        size: "xs",
-        sx: { mb: [1] },
-        suffix: /* @__PURE__ */ React21.createElement(RotatingArrow, null)
-      },
-      label
-    ))),
-    /* @__PURE__ */ React21.createElement(column_default, { start: 1, width: 6 }, /* @__PURE__ */ React21.createElement(Box13, { sx: sx2.highlight }, resources[2].label), resources[2].links.map(({ label, href }) => /* @__PURE__ */ React21.createElement(
-      button_default,
-      {
-        key: href,
-        href,
-        size: "xs",
-        sx: { mb: [1] },
-        suffix: /* @__PURE__ */ React21.createElement(RotatingArrow, null)
-      },
-      label
-    )))
+      /* @__PURE__ */ React21.createElement(Box13, { sx: sx2.highlight }, group.label),
+      group.links.map(({ label, href }) => /* @__PURE__ */ React21.createElement(
+        button_default,
+        {
+          key: href,
+          href,
+          size: "md",
+          sx: { mb: [1] },
+          suffix: /* @__PURE__ */ React21.createElement(RotatingArrow, null)
+        },
+        label
+      ))
+    ))
   ));
 };
 var search_menu_default = SearchMenu;
@@ -2093,31 +2050,21 @@ var Header = ({ status, mode, nav, menuItems }) => {
           transition: "opacity 0.25s"
         }
       },
-      /* @__PURE__ */ React22.createElement(Container, null, /* @__PURE__ */ React22.createElement(row_default, null, menuExpanded ? /* @__PURE__ */ React22.createElement(column_default, { start: [2, 4, 7, 7], width: [5, 4, 5, 5] }, /* @__PURE__ */ React22.createElement(
-        Box14,
+      /* @__PURE__ */ React22.createElement(Container, null, /* @__PURE__ */ React22.createElement(row_default, null, menuExpanded && /* @__PURE__ */ React22.createElement(column_default, { start: [2, 4, 7, 7], width: [5, 4, 5, 5] }, /* @__PURE__ */ React22.createElement(Box14, { as: "nav", sx: { mt: [5, 5, 5, 6] } }, /* @__PURE__ */ React22.createElement(
+        navigation_menu_default,
         {
-          as: "nav",
-          sx: {
-            display: menuExpanded ? "inherit" : "none",
-            mt: [5, 5, 5, 6]
-          }
-        },
-        /* @__PURE__ */ React22.createElement(
-          navigation_menu_default,
-          {
-            nav,
-            mode,
-            setExpanded: setMenuExpanded
-          }
-        )
-      )) : /* @__PURE__ */ React22.createElement(column_default, { start: [1, 2, 2, 2], width: [6, 6, 10, 10] }, /* @__PURE__ */ React22.createElement(search_menu_default, { setExpanded: setSearchExpanded }))))
+          nav,
+          mode,
+          setExpanded: setMenuExpanded
+        }
+      ))), searchExpanded && !menuExpanded && /* @__PURE__ */ React22.createElement(column_default, { start: [1, 2, 2, 2], width: [6, 6, 10, 10] }, /* @__PURE__ */ React22.createElement(search_menu_default, { setExpanded: setSearchExpanded }))))
     )
   );
 };
 var header_default = Header;
 
 // src/footer.tsx
-import React24, { useState as useState4, useEffect as useEffect3 } from "react";
+import React24, { useState as useState4, useEffect as useEffect4 } from "react";
 import { Box as Box16, Flex as Flex4, Link as Link5 } from "theme-ui";
 import { default as NextLink4 } from "next/link";
 
@@ -2146,7 +2093,7 @@ var monogram_default = Monogram;
 // src/footer.tsx
 var Footer = () => {
   const [year, setYear] = useState4(null);
-  useEffect3(() => {
+  useEffect4(() => {
     setYear((/* @__PURE__ */ new Date()).getFullYear());
   }, []);
   return /* @__PURE__ */ React24.createElement(
@@ -2411,7 +2358,7 @@ var dimmer_default = Dimmer;
 // src/metadata.tsx
 import React27 from "react";
 import { Box as Box18, Text as Text2 } from "theme-ui";
-import { useState as useState5, useEffect as useEffect4 } from "react";
+import { useState as useState5, useEffect as useEffect5 } from "react";
 
 // src/gitsha.tsx
 import React26 from "react";
@@ -2471,7 +2418,7 @@ var gitsha_default = GitSha;
 // src/metadata.tsx
 var Value = ({ mode }) => {
   const [display, setDisplay] = useState5(init(mode));
-  useEffect4(() => {
+  useEffect5(() => {
     if (mode === "mouse") {
       const setFromEvent = (e) => {
         const x = format(e.clientX, 4);
@@ -2585,7 +2532,7 @@ var FadeIn = (_a) => {
 var fade_in_default = FadeIn;
 
 // src/scrollbar.tsx
-import { useEffect as useEffect5 } from "react";
+import { useEffect as useEffect6 } from "react";
 
 // src/utils/get-scrollbar-width.ts
 var getScrollbarWidth = (document2) => {
@@ -2605,7 +2552,7 @@ var get_scrollbar_width_default = getScrollbarWidth;
 
 // src/scrollbar.tsx
 var Scrollbar = () => {
-  useEffect5(() => {
+  useEffect6(() => {
     if (typeof document !== "undefined") {
       const delta = get_scrollbar_width_default(document);
       if (delta > 0) {
@@ -2619,11 +2566,11 @@ var Scrollbar = () => {
 var scrollbar_default = Scrollbar;
 
 // src/guide.tsx
-import React29, { useState as useState6, useEffect as useEffect6 } from "react";
+import React29, { useState as useState6, useEffect as useEffect7 } from "react";
 import { Box as Box20, Container as Container2 } from "theme-ui";
 var Guide = ({ color = "muted" }) => {
   const [display, setDisplay] = useState6(false);
-  useEffect6(() => {
+  useEffect7(() => {
     function handler(event) {
       const { key, metaKey } = event;
       if (key === ";" && metaKey) {
@@ -2759,7 +2706,7 @@ var Layout = ({
       display: "none"
     }
   } : {};
-  useEffect7(() => {
+  useEffect8(() => {
     var _a;
     if (!theme) return;
     const handler = (e) => {
@@ -3699,10 +3646,10 @@ var formatDate = (date, options = defaultOptions) => {
 var format_date_default = formatDate;
 
 // src/utils/use-scrollbar-class.ts
-import { useEffect as useEffect8, useState as useState7 } from "react";
+import { useEffect as useEffect9, useState as useState7 } from "react";
 var useScrollbarClass = () => {
   const [className, setClassName] = useState7(null);
-  useEffect8(() => {
+  useEffect9(() => {
     if (document && get_scrollbar_width_default(document) > 0) {
       setClassName("custom-scrollbar");
     }