feat: extract utility for calculating theme and density

packages/contextual-menu-react/documentation/ContextualMenuExample.tsx

@@ -1,6 +1,6 @@
-import { ErrorIcon, ChevronDownIcon } from "@fremtind/jkl-icons-react";
-import React, { FC } from "react";
-import { ExampleComponentProps, ExampleKnobsProps, CodeExample } from "../../../doc-utils";
+import { ChevronDownIcon, ErrorIcon } from "@fremtind/jkl-icons-react";
+import React, { ComponentPropsWithRef, FC, forwardRef } from "react";
+import { CodeExample, ExampleComponentProps, ExampleKnobsProps } from "../../../doc-utils";
 import { Button } from "../../button-react";
 import { ContextualMenu } from "../src/ContextualMenu";
 import { ContextualMenuDivider } from "../src/ContextualMenuDivider";
@@ -22,7 +22,13 @@ export const ContextualMenuExample: FC<ExampleComponentProps> = ({ boolValues, c
     /* Force a re-render whenever theme or density changes */
     const key = displayValues?.theme || "none" + displayValues?.density || "none";
 
-    const CustomLink = (props: React.ComponentPropsWithRef<"a">) => <a {...props}>{props.children}</a>;
+    const CustomLink = forwardRef<HTMLAnchorElement, ComponentPropsWithRef<"a">>(function CustomLink(props, ref) {
+        return (
+            <a ref={ref} {...props}>
+                {props.children}
+            </a>
+        );
+    });
 
     return (
         <div

packages/contextual-menu-react/src/ContextualMenu.tsx

@@ -21,7 +21,7 @@ import {
     useMergeRefs,
     useRole,
 } from "@floating-ui/react";
-import { type DataTestAutoId, WithChildren } from "@fremtind/jkl-core";
+import { type DataTestAutoId, getThemeAndDensity, WithChildren } from "@fremtind/jkl-core";
 import { useId } from "@fremtind/jkl-react-hooks";
 import cn from "classnames";
 import { AnimatePresence, LazyMotion, domAnimation, m } from "framer-motion";
@@ -138,21 +138,7 @@ const ContextualMenuComponent = forwardRef<HTMLButtonElement, ContextualMenuProp
 
     // Siden menyen rendres på rot må vi hente lokal dark/light-verdi fra triggeren
     // Vi må gjøre dette for å ta hensyn til at tema kan styres lokalt for deler av UIet
-    let theme: string | undefined;
-    let density: string | undefined;
-    if (refs.reference.current) {
-        const computedStyles = getComputedStyle(refs.reference.current as HTMLElement);
-
-        // Sett theme til dark hvis bakgrunnsfargen er mørkere enn 50% av hvit
-        // dette gir oss slingringsmonn i tilfelle verdien av Jøkuls bakgrunnsfarge endres
-        theme =
-            parseInt(computedStyles.getPropertyValue("--jkl-background-color").replace("#", ""), 16) < 0xffffff / 2
-                ? "dark"
-                : "light";
-
-        // Sett density basert på verdien av en global CSS variabel
-        density = computedStyles.getPropertyValue("--jkl-density") === '"compact"' ? "compact" : "comfortable";
-    }
+    const { theme, density } = getThemeAndDensity(refs.reference.current as HTMLElement);
 
     return (
         <FloatingNode id={nodeId}>

packages/core/src/index.ts

@@ -1,5 +1,14 @@
 export type { Easing, Timing } from "./utils";
-export { initTabListener, getValuePair, breakpoints, timings, easings, mergeRefs, mergeProps } from "./utils";
+export {
+    initTabListener,
+    getValuePair,
+    breakpoints,
+    timings,
+    easings,
+    mergeRefs,
+    mergeProps,
+    getThemeAndDensity,
+} from "./utils";
 export type { Density, PossibleRef } from "./utils";
 export type { LinkProps, NavLinkProps, ScreenReaderOnlyProps } from "./components";
 export { Link, NavLink, ScreenReaderOnly, SlotComponent } from "./components";

packages/jokul/src/components/popover/utils.ts → packages/core/src/utils/getThemeAndDensity.ts

@@ -1,8 +1,15 @@
+/*
+ * For komponenter som mountes utenfor roten av applikasjonen vil styring av theme og density
+ * via data-attributter satt på rot ikke fungere. Denne util'en kan brukes av slike komponenter
+ * for å finne riktige verdier ved å sende inn et element som er mountet innenfor applikasjonen
+ */
 export const getThemeAndDensity = (element: Element | undefined): { theme?: string; density?: string } => {
     if (!element) return {};
 
     const computedStyles = getComputedStyle(element);
 
+    // Sett theme til dark hvis bakgrunnsfargen er mørkere enn 50% av hvit
+    // dette gir oss slingringsmonn i tilfelle verdien av Jøkuls bakgrunnsfarge endres
     const theme =
         parseInt(computedStyles.getPropertyValue("--jkl-background-color").replace("#", ""), 16) < 0xffffff / 2
             ? "dark"

packages/core/src/utils/index.ts

@@ -1,3 +1,4 @@
+export { getThemeAndDensity } from "./getThemeAndDensity";
 export { initTabListener } from "./tabListener";
 export { getValuePair } from "./getValuePair";
 export { breakpoints } from "./breakpoints";

packages/jokul/src/components/popover/Popover.tsx

@@ -20,7 +20,7 @@ import {
 } from "@floating-ui/react";
 import clsx from "clsx";
 import * as React from "react";
-import { getThemeAndDensity } from "./utils";
+import { getThemeAndDensity } from "../../utilities";
 
 type ClickOptions = Parameters<typeof useClick>[1];
 type DismissOptions = Parameters<typeof useDismiss>[1];

packages/jokul/src/components/tooltip/TooltipContent.tsx

@@ -3,6 +3,7 @@ import clsx from "clsx";
 import { AnimatePresence, LazyMotion, domAnimation, m } from "framer-motion";
 import React, { HTMLProps, forwardRef } from "react";
 import { useId } from "../../hooks";
+import { getThemeAndDensity } from "../../utilities";
 import { useTooltipContext } from "./Tooltip";
 
 function getPositionAnimation(placement: Placement, value: number = 8) {
@@ -53,15 +54,7 @@ export const TooltipContent = forwardRef<HTMLDivElement, HTMLProps<HTMLDivElemen
 
     // Siden tooltipet rendres på rot må vi hente lokal dark/light-verdi fra triggeren
     // Vi må gjøre dette for å ta hensyn til at tema kan styres lokalt for deler av UIet
-    let theme: string | undefined;
-    if (refs.reference.current) {
-        const backgroundColor = getComputedStyle(refs.reference.current as HTMLElement).getPropertyValue(
-            "--jkl-background-color",
-        );
-        // Sett theme til dark hvis bakgrunnsfargen er mørkere enn 50% av hvit
-        // dette gir oss slingringsmonn i tilfelle verdien av Jøkuls bakgrunnsfarge endres
-        theme = parseInt(backgroundColor.replace("#", ""), 16) < 0xffffff / 2 ? "dark" : "light";
-    }
+    const { theme } = getThemeAndDensity(refs.reference.current as HTMLElement);
 
     return (
         <FloatingPortal>

packages/popover-react/src/utils.ts → packages/jokul/src/utilities/getThemeAndDensity.ts

@@ -1,8 +1,15 @@
+/*
+ * For komponenter som mountes utenfor roten av applikasjonen vil styring av theme og density
+ * via data-attributter satt på rot ikke fungere. Denne util'en kan brukes av slike komponenter
+ * for å finne riktige verdier ved å sende inn et element som er mountet innenfor applikasjonen
+ */
 export const getThemeAndDensity = (element: Element | undefined): { theme?: string; density?: string } => {
     if (!element) return {};
 
     const computedStyles = getComputedStyle(element);
 
+    // Sett theme til dark hvis bakgrunnsfargen er mørkere enn 50% av hvit
+    // dette gir oss slingringsmonn i tilfelle verdien av Jøkuls bakgrunnsfarge endres
     const theme =
         parseInt(computedStyles.getPropertyValue("--jkl-background-color").replace("#", ""), 16) < 0xffffff / 2
             ? "dark"

packages/jokul/src/utilities/index.ts

@@ -1,5 +1,6 @@
 export * from "./constants";
 export * from "./formatters";
+export * from "./getThemeAndDensity";
 export * from "./polymorphism";
 export * from "./validators";
 export * from "./tabListener";

packages/menu-react/src/Menu.tsx

@@ -21,7 +21,7 @@ import {
     useMergeRefs,
     useRole,
 } from "@floating-ui/react";
-import { type DataTestAutoId, WithChildren } from "@fremtind/jkl-core";
+import { type DataTestAutoId, getThemeAndDensity, WithChildren } from "@fremtind/jkl-core";
 import { useId } from "@fremtind/jkl-react-hooks";
 import cn from "classnames";
 import { AnimatePresence, motion } from "framer-motion";
@@ -138,21 +138,7 @@ const MenuComponent = forwardRef<HTMLButtonElement, MenuProps>((props, forwarded
 
     // Siden menyen rendres på rot må vi hente lokal dark/light-verdi fra triggeren
     // Vi må gjøre dette for å ta hensyn til at tema kan styres lokalt for deler av UIet
-    let theme: string | undefined;
-    let density: string | undefined;
-    if (refs.reference.current) {
-        const computedStyles = getComputedStyle(refs.reference.current as HTMLElement);
-
-        // Sett theme til dark hvis bakgrunnsfargen er mørkere enn 50% av hvit
-        // dette gir oss slingringsmonn i tilfelle verdien av Jøkuls bakgrunnsfarge endres
-        theme =
-            parseInt(computedStyles.getPropertyValue("--jkl-background-color").replace("#", ""), 16) < 0xffffff / 2
-                ? "dark"
-                : "light";
-
-        // Sett density basert på verdien av en global CSS variabel
-        density = computedStyles.getPropertyValue("--jkl-density") === '"compact"' ? "compact" : "comfortable";
-    }
+    const { theme, density } = getThemeAndDensity(refs.reference.current as HTMLElement);
 
     return (
         <FloatingNode id={nodeId}>

packages/popover-react/src/Popover.tsx

@@ -18,9 +18,9 @@ import {
     ReferenceElement,
     ReferenceType,
 } from "@floating-ui/react";
+import { getThemeAndDensity } from "@fremtind/jkl-core";
 import classNames from "classnames";
 import * as React from "react";
-import { getThemeAndDensity } from "./utils";
 
 type ClickOptions = Parameters<typeof useClick>[1];
 type DismissOptions = Parameters<typeof useDismiss>[1];

packages/tooltip-react/src/TooltipContent.tsx

@@ -1,4 +1,5 @@
 import { type Placement, useMergeRefs, FloatingPortal } from "@floating-ui/react";
+import { getThemeAndDensity } from "@fremtind/jkl-core";
 import { useId } from "@fremtind/jkl-react-hooks";
 import cn from "classnames";
 import { AnimatePresence, LazyMotion, domAnimation, m } from "framer-motion";
@@ -53,15 +54,7 @@ export const TooltipContent = forwardRef<HTMLDivElement, HTMLProps<HTMLDivElemen
 
     // Siden tooltipet rendres på rot må vi hente lokal dark/light-verdi fra triggeren
     // Vi må gjøre dette for å ta hensyn til at tema kan styres lokalt for deler av UIet
-    let theme: string | undefined;
-    if (refs.reference.current) {
-        const backgroundColor = getComputedStyle(refs.reference.current as HTMLElement).getPropertyValue(
-            "--jkl-background-color",
-        );
-        // Sett theme til dark hvis bakgrunnsfargen er mørkere enn 50% av hvit
-        // dette gir oss slingringsmonn i tilfelle verdien av Jøkuls bakgrunnsfarge endres
-        theme = parseInt(backgroundColor.replace("#", ""), 16) < 0xffffff / 2 ? "dark" : "light";
-    }
+    const { theme } = getThemeAndDensity(refs.reference.current as HTMLElement);
 
     return (
         <FloatingPortal>