Merge 98bb23f into f99fa01

Author: HalvorHaugan

@navikt/core/css/baseline/_inline-reset.css

@@ -50,5 +50,5 @@ legend {
 /* Make elements with the HTML hidden attribute stay hidden by default. */
 
 [hidden] {
-  display: none !important;
+  /* display: none !important; */
 }

@navikt/core/css/darkside/baseline/baseline.darkside.css

@@ -9,7 +9,8 @@ body,
 /* ---------------------------- Inline utilities ---------------------------- */
 [hidden] {
   /* CSS-layers reverses "!important" ordering, so we can't set this to important if we want to override it later. */
-  display: none;
+
+  /* display: none; */
 }
 
 /* https://web.dev/prefers-reduced-motion/ */

@navikt/core/css/expansioncard.css

@@ -196,7 +196,10 @@
 }
 
 .navds-expansioncard__content--closed {
-  display: none;
+  padding: 0;
+  border: none;
+
+  /* TODO: Fix animation in Chrome */
 }
 
 :where(.navds-expansioncard__header):hover + .navds-expansioncard__content {

@navikt/core/react/src/expansion-card/ExpansionCardContent.tsx

@@ -1,6 +1,7 @@
-import React, { forwardRef, useContext } from "react";
+import React, { forwardRef, useContext, useEffect, useRef } from "react";
 import { useRenameCSS } from "../theme/Theme";
 import { BodyLong } from "../typography";
+import { useMergeRefs } from "../util/hooks/useMergeRefs";
 import { ExpansionCardContext } from "./context";
 
 export interface ExpansionCardContentProps
@@ -14,6 +15,28 @@ const ExpansionCardContent = forwardRef<
 >(({ children, className, ...rest }, ref) => {
   const { cn } = useRenameCSS();
   const panelContext = useContext(ExpansionCardContext);
+  const localRef = useRef<HTMLDivElement>(null);
+  const mergedRef = useMergeRefs(localRef, ref);
+
+  useEffect(() => {
+    if (!localRef.current) return;
+
+    if (!panelContext.open) {
+      // @ts-expect-error - "until-found" is not supported in all browsers yet
+      localRef.current.hidden = "until-found";
+    }
+  }, [panelContext.open]);
+
+  useEffect(() => {
+    if (!localRef.current) return;
+
+    // @ts-expect-error - onbeforematch is not supported in all browsers yet
+    localRef.current.onbeforematch = () => {
+      console.warn("before match");
+      panelContext.toggleOpen();
+    };
+    // TODO: do we need cleanup?
+  }, [panelContext]);
 
   if (panelContext === null) {
     console.error(
@@ -25,14 +48,15 @@ const ExpansionCardContent = forwardRef<
   return (
     <BodyLong
       {...rest}
-      ref={ref}
+      ref={mergedRef}
       as="div"
       className={cn("navds-expansioncard__content", className, {
         "navds-expansioncard__content--closed": !panelContext.open,
       })}
       aria-hidden={!panelContext.open}
       size={panelContext.size}
       data-open={panelContext.open}
+      hidden={!panelContext.open}
     >
       <div className={cn("navds-expansioncard__content-inner")}>{children}</div>
     </BodyLong>

aksel.nav.no/website/app/(routes)/(designsystemet)/_ui/sidebar/Sidebar.subnav.tsx

@@ -3,7 +3,7 @@
 import cl from "clsx";
 import { stegaClean } from "next-sanity";
 import { usePathname } from "next/navigation";
-import { useState } from "react";
+import { useEffect, useRef } from "react";
 import { ChevronDownIcon, SparklesIcon } from "@navikt/aksel-icons";
 import { HStack } from "@navikt/ds-react";
 import { umamiTrack } from "@/app/_ui/umami/Umami.track";
@@ -16,14 +16,21 @@ function DesignsystemSidebarSubNav(
 ) {
   const { pages, title, layout } = props;
   const pathName = usePathname();
+  const ref = useRef<HTMLUListElement>(null);
 
   const isDarkside = title.toLowerCase() === "darkside";
 
   const isSectionActive = pages.some((page) => {
     return pathName?.split("#")[0] === stegaClean(`/${page.slug}`);
   });
 
-  const [open, setOpen] = useState(isSectionActive);
+  //const [open, setOpen] = useState(isSectionActive);
+  const open = ref.current?.hidden === false; // TODO: Toggling open does not trigger rerender
+
+  useEffect(() => {
+    if (!ref.current) return;
+    if (isSectionActive) ref.current.hidden = false;
+  }, [isSectionActive]);
 
   return (
     <li
@@ -33,7 +40,10 @@ function DesignsystemSidebarSubNav(
     >
       <button
         onClick={() => {
-          setOpen(!open);
+          //setOpen(!open);
+          if (!ref.current) return;
+          // @ts-expect-error - "until-found" is not supported in all browsers yet, and not in React.
+          ref.current.hidden = ref.current.hidden ? false : "until-found";
           umamiTrack("sidebar-subnav", {
             kategori: title,
           });
@@ -52,7 +62,7 @@ function DesignsystemSidebarSubNav(
 
         <ChevronDownIcon aria-hidden className={styles.navListSubButtonIcon} />
       </button>
-      <ul hidden={!open}>
+      <ul ref={ref} hidden>
         {pages.map((page) => (
           <DesignsystemSidebarItem
             key={page.heading}