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

package/dst/index.js

@@ -1742,6 +1742,13 @@ var Nav = ({ link, mode, nav, first, setExpanded }) => {
   }
 };
 var NavigationMenu = ({ nav, mode, setExpanded }) => {
+  (0, import_react18.useEffect)(() => {
+    const handler = (e) => {
+      if (e.key === "Escape") setExpanded(false);
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [setExpanded]);
   return /* @__PURE__ */ import_react18.default.createElement(import_react18.default.Fragment, null, links.map((d, i) => /* @__PURE__ */ import_react18.default.createElement(
     Nav,
     {
@@ -1852,7 +1859,9 @@ var sx2 = {
     color: "secondary"
   }
 };
-var SearchMenu = ({}) => {
+var SearchMenu = ({
+  setExpanded
+}) => {
   const [value, setValue] = (0, import_react21.useState)("");
   const [resources, setResources] = (0, import_react21.useState)(RESOURCES);
   const destination = `/search?query=${value.trim()}`;
@@ -1865,6 +1874,13 @@ var SearchMenu = ({}) => {
       setResources(RESOURCES);
     });
   }, []);
+  (0, import_react21.useEffect)(() => {
+    const handler = (e) => {
+      if (e.key === "Escape") setExpanded(false);
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [setExpanded]);
   return /* @__PURE__ */ import_react21.default.createElement(import_react21.default.Fragment, null, /* @__PURE__ */ import_react21.default.createElement(row_default, { columns: [6, 6, 10, 10] }, /* @__PURE__ */ import_react21.default.createElement(column_default, { start: 1, width: [6, 6, 10, 10] }, /* @__PURE__ */ import_react21.default.createElement(
     import_theme_ui19.Flex,
     {
@@ -1912,6 +1928,7 @@ var SearchMenu = ({}) => {
     /* @__PURE__ */ import_react21.default.createElement(
       input_default,
       {
+        autoFocus: true,
         id: "search",
         size: "xl",
         value,
@@ -1939,15 +1956,7 @@ var SearchMenu = ({}) => {
       columns: [6, 6, 10, 10],
       sx: { display: ["none", "grid", "grid", "grid"] }
     },
-    /* @__PURE__ */ import_react21.default.createElement(
-      column_default,
-      {
-        start: 1,
-        width: 5,
-        sx: { mt: [2, 2, 8, 8], mb: [1, 1, , 6, 6] }
-      },
-      /* @__PURE__ */ import_react21.default.createElement(import_theme_ui19.Box, { as: "h2", variant: "styles.h2", sx: { my: 0 } }, "Popular resources")
-    ),
+    /* @__PURE__ */ import_react21.default.createElement(column_default, { start: 1, width: 5, sx: { mt: [2, 2, 8, 8], mb: [1, 1, 4, 5] } }, /* @__PURE__ */ import_react21.default.createElement(import_theme_ui19.Box, { as: "h2", variant: "styles.h2", sx: { my: 0 } }, "Popular resources")),
     /* @__PURE__ */ import_react21.default.createElement(column_default, { start: [1, 1, 2, 2], width: 3 }, /* @__PURE__ */ import_react21.default.createElement(import_theme_ui19.Box, { sx: sx2.highlight }, resources[0].label), resources[0].links.map(({ label, href }) => /* @__PURE__ */ import_react21.default.createElement(
       button_default,
       {
@@ -2158,24 +2167,14 @@ var Header = ({ status, mode, nav, menuItems }) => {
           transition: "opacity 0.25s"
         }
       },
-      /* @__PURE__ */ import_react22.default.createElement(import_theme_ui20.Container, null, /* @__PURE__ */ import_react22.default.createElement(row_default, null, menuExpanded ? /* @__PURE__ */ import_react22.default.createElement(column_default, { start: [2, 4, 7, 7], width: [5, 4, 5, 5] }, /* @__PURE__ */ import_react22.default.createElement(
-        import_theme_ui20.Box,
+      /* @__PURE__ */ import_react22.default.createElement(import_theme_ui20.Container, null, /* @__PURE__ */ import_react22.default.createElement(row_default, null, menuExpanded && /* @__PURE__ */ import_react22.default.createElement(column_default, { start: [2, 4, 7, 7], width: [5, 4, 5, 5] }, /* @__PURE__ */ import_react22.default.createElement(import_theme_ui20.Box, { as: "nav", sx: { mt: [5, 5, 5, 6] } }, /* @__PURE__ */ import_react22.default.createElement(
+        navigation_menu_default,
         {
-          as: "nav",
-          sx: {
-            display: menuExpanded ? "inherit" : "none",
-            mt: [5, 5, 5, 6]
-          }
-        },
-        /* @__PURE__ */ import_react22.default.createElement(
-          navigation_menu_default,
-          {
-            nav,
-            mode,
-            setExpanded: setMenuExpanded
-          }
-        )
-      )) : /* @__PURE__ */ import_react22.default.createElement(column_default, { start: [1, 2, 2, 2], width: [6, 6, 10, 10] }, /* @__PURE__ */ import_react22.default.createElement(search_menu_default, { setExpanded: setSearchExpanded }))))
+          nav,
+          mode,
+          setExpanded: setMenuExpanded
+        }
+      ))), searchExpanded && !menuExpanded && /* @__PURE__ */ import_react22.default.createElement(column_default, { start: [1, 2, 2, 2], width: [6, 6, 10, 10] }, /* @__PURE__ */ import_react22.default.createElement(search_menu_default, { setExpanded: setSearchExpanded }))))
     )
   );
 };