@carbonplan/components 13.4.0-develop.2 → 13.4.0

package/dst/index.js

@@ -1767,7 +1767,7 @@ var navigation_menu_default = NavigationMenu;
 var import_react19 = __toESM(require("react"));
 var import_icons3 = require("@carbonplan/icons");
 var Search = (props) => {
-  return /* @__PURE__ */ import_react19.default.createElement(header_icon_default, __spreadProps(__spreadValues({}, props), { label: "Toggle Search" }), /* @__PURE__ */ import_react19.default.createElement(import_icons3.Search, { width: 50, height: 30, x: 8 }));
+  return /* @__PURE__ */ import_react19.default.createElement(header_icon_default, __spreadProps(__spreadValues({}, props), { label: "Toggle Search" }), /* @__PURE__ */ import_react19.default.createElement(import_icons3.Search, { width: 50, height: 30, x: 8, y: 1 }));
 };
 var search_default = Search;
 
@@ -1859,13 +1859,17 @@ var sx2 = {
   }
 };
 var SearchMenu = ({
-  setExpanded
+  setExpanded,
+  mode
 }) => {
   const [value, setValue] = (0, import_react21.useState)("");
   const [resources, setResources] = (0, import_react21.useState)(RESOURCES);
-  const destination = `/search?query=${value.trim()}`;
+  const baseUrl = mode === "remote" ? "https://carbonplan.org" : "";
+  const destination = `${baseUrl}/search?query=${encodeURIComponent(
+    value.trim()
+  )}`;
   (0, import_react21.useEffect)(() => {
-    fetch("/resources.json").then((res) => res.json()).then((res) => {
+    fetch(`${baseUrl}/resources.json`).then((res) => res.json()).then((res) => {
       if (res.every((el) => el.label && Array.isArray(el.links))) {
         setResources(res);
       }
@@ -1962,7 +1966,8 @@ var SearchMenu = ({
       column_default,
       {
         start: [1, 1 + i * 3 % 6, 2 + i * 3 % 9, 2 + i * 3 % 9],
-        width: [6, 3, 3, 3]
+        width: [6, 3, 3, 3],
+        key: group.label
       },
       /* @__PURE__ */ import_react21.default.createElement(import_theme_ui19.Box, { sx: sx2.highlight }, group.label),
       group.links.map(({ label, href }) => /* @__PURE__ */ import_react21.default.createElement(
@@ -1986,6 +1991,12 @@ var Header = ({ status, mode, nav, menuItems }) => {
   const [menuExpanded, setMenuExpanded] = (0, import_react22.useState)(false);
   const [searchExpanded, setSearchExpanded] = (0, import_react22.useState)(false);
   const expanded = searchExpanded || menuExpanded;
+  (0, import_react22.useEffect)(() => {
+    document.body.style.overflow = expanded ? "hidden" : "";
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [expanded]);
   return /* @__PURE__ */ import_react22.default.createElement(
     row_default,
     {
@@ -2112,7 +2123,9 @@ var Header = ({ status, mode, nav, menuItems }) => {
           backgroundColor: "background",
           zIndex: 4e3,
           pt: ["79px"],
-          transition: "opacity 0.25s"
+          transition: "opacity 0.25s",
+          overflowY: "auto",
+          overscrollBehavior: "contain"
         }
       },
       /* @__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(
@@ -2122,7 +2135,7 @@ var Header = ({ status, mode, nav, menuItems }) => {
           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 }))))
+      ))), 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, { mode, setExpanded: setSearchExpanded }))))
     )
   );
 };
@@ -2588,7 +2601,7 @@ var FadeIn = (_a) => {
         animationDelay: delay + "ms",
         animationName: fade.toString(),
         animationFillMode: "backwards",
-        WebkitTransform: "translateZ(0)"
+        willChange: "opacity"
       }
     }),
     children