@carbonplan/components 13.4.0-develop.2 → 13.4.0

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 useEffect8 } from "react";
+import React31, { useEffect as useEffect9 } from "react";
 import { useThemeUI as useThemeUI3, Container as Container3, Flex as Flex5, Box as Box21 } from "theme-ui";
 
 // src/meta.tsx
@@ -1405,7 +1405,7 @@ var Meta = ({ title, description, card, url }) => {
 var meta_default = Meta;
 
 // src/header/header.tsx
-import React22, { useState as useState3 } from "react";
+import React22, { useState as useState3, useEffect as useEffect4 } from "react";
 import { default as NextLink3 } from "next/link";
 import { Box as Box14, Flex as Flex3, Container, Link as Link4 } from "theme-ui";
 
@@ -1702,7 +1702,7 @@ var navigation_menu_default = NavigationMenu;
 import React19 from "react";
 import { Search as SearchIcon } from "@carbonplan/icons";
 var Search = (props) => {
-  return /* @__PURE__ */ React19.createElement(header_icon_default, __spreadProps(__spreadValues({}, props), { label: "Toggle Search" }), /* @__PURE__ */ React19.createElement(SearchIcon, { width: 50, height: 30, x: 8 }));
+  return /* @__PURE__ */ React19.createElement(header_icon_default, __spreadProps(__spreadValues({}, props), { label: "Toggle Search" }), /* @__PURE__ */ React19.createElement(SearchIcon, { width: 50, height: 30, x: 8, y: 1 }));
 };
 var search_default = Search;
 
@@ -1794,13 +1794,17 @@ var sx2 = {
   }
 };
 var SearchMenu = ({
-  setExpanded
+  setExpanded,
+  mode
 }) => {
   const [value, setValue] = useState2("");
   const [resources, setResources] = useState2(RESOURCES);
-  const destination = `/search?query=${value.trim()}`;
+  const baseUrl = mode === "remote" ? "https://carbonplan.org" : "";
+  const destination = `${baseUrl}/search?query=${encodeURIComponent(
+    value.trim()
+  )}`;
   useEffect3(() => {
-    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);
       }
@@ -1897,7 +1901,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__ */ React21.createElement(Box13, { sx: sx2.highlight }, group.label),
       group.links.map(({ label, href }) => /* @__PURE__ */ React21.createElement(
@@ -1921,6 +1926,12 @@ var Header = ({ status, mode, nav, menuItems }) => {
   const [menuExpanded, setMenuExpanded] = useState3(false);
   const [searchExpanded, setSearchExpanded] = useState3(false);
   const expanded = searchExpanded || menuExpanded;
+  useEffect4(() => {
+    document.body.style.overflow = expanded ? "hidden" : "";
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [expanded]);
   return /* @__PURE__ */ React22.createElement(
     row_default,
     {
@@ -2047,7 +2058,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__ */ 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(
@@ -2057,14 +2070,14 @@ var Header = ({ status, mode, nav, menuItems }) => {
           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 }))))
+      ))), searchExpanded && !menuExpanded && /* @__PURE__ */ React22.createElement(column_default, { start: [1, 2, 2, 2], width: [6, 6, 10, 10] }, /* @__PURE__ */ React22.createElement(search_menu_default, { mode, setExpanded: setSearchExpanded }))))
     )
   );
 };
 var header_default = Header;
 
 // src/footer.tsx
-import React24, { useState as useState4, useEffect as useEffect4 } from "react";
+import React24, { useState as useState4, useEffect as useEffect5 } from "react";
 import { Box as Box16, Flex as Flex4, Link as Link5 } from "theme-ui";
 import { default as NextLink4 } from "next/link";
 
@@ -2093,7 +2106,7 @@ var monogram_default = Monogram;
 // src/footer.tsx
 var Footer = () => {
   const [year, setYear] = useState4(null);
-  useEffect4(() => {
+  useEffect5(() => {
     setYear((/* @__PURE__ */ new Date()).getFullYear());
   }, []);
   return /* @__PURE__ */ React24.createElement(
@@ -2358,7 +2371,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 useEffect5 } from "react";
+import { useState as useState5, useEffect as useEffect6 } from "react";
 
 // src/gitsha.tsx
 import React26 from "react";
@@ -2418,7 +2431,7 @@ var gitsha_default = GitSha;
 // src/metadata.tsx
 var Value = ({ mode }) => {
   const [display, setDisplay] = useState5(init(mode));
-  useEffect5(() => {
+  useEffect6(() => {
     if (mode === "mouse") {
       const setFromEvent = (e) => {
         const x = format(e.clientX, 4);
@@ -2523,7 +2536,7 @@ var FadeIn = (_a) => {
         animationDelay: delay + "ms",
         animationName: fade.toString(),
         animationFillMode: "backwards",
-        WebkitTransform: "translateZ(0)"
+        willChange: "opacity"
       }
     }),
     children
@@ -2532,7 +2545,7 @@ var FadeIn = (_a) => {
 var fade_in_default = FadeIn;
 
 // src/scrollbar.tsx
-import { useEffect as useEffect6 } from "react";
+import { useEffect as useEffect7 } from "react";
 
 // src/utils/get-scrollbar-width.ts
 var getScrollbarWidth = (document2) => {
@@ -2552,7 +2565,7 @@ var get_scrollbar_width_default = getScrollbarWidth;
 
 // src/scrollbar.tsx
 var Scrollbar = () => {
-  useEffect6(() => {
+  useEffect7(() => {
     if (typeof document !== "undefined") {
       const delta = get_scrollbar_width_default(document);
       if (delta > 0) {
@@ -2566,11 +2579,11 @@ var Scrollbar = () => {
 var scrollbar_default = Scrollbar;
 
 // src/guide.tsx
-import React29, { useState as useState6, useEffect as useEffect7 } from "react";
+import React29, { useState as useState6, useEffect as useEffect8 } from "react";
 import { Box as Box20, Container as Container2 } from "theme-ui";
 var Guide = ({ color = "muted" }) => {
   const [display, setDisplay] = useState6(false);
-  useEffect7(() => {
+  useEffect8(() => {
     function handler(event) {
       const { key, metaKey } = event;
       if (key === ";" && metaKey) {
@@ -2706,7 +2719,7 @@ var Layout = ({
       display: "none"
     }
   } : {};
-  useEffect8(() => {
+  useEffect9(() => {
     var _a;
     if (!theme) return;
     const handler = (e) => {
@@ -3646,10 +3659,10 @@ var formatDate = (date, options = defaultOptions) => {
 var format_date_default = formatDate;
 
 // src/utils/use-scrollbar-class.ts
-import { useEffect as useEffect9, useState as useState7 } from "react";
+import { useEffect as useEffect10, useState as useState7 } from "react";
 var useScrollbarClass = () => {
   const [className, setClassName] = useState7(null);
-  useEffect9(() => {
+  useEffect10(() => {
     if (document && get_scrollbar_width_default(document) > 0) {
       setClassName("custom-scrollbar");
     }