@navikt/ds-react 7.30.0 → 7.31.0

package/src/table/Table.utils.ts

@@ -0,0 +1,65 @@
+const INTERACTIVE_TAGS = new Set([
+  "BUTTON",
+  "A",
+  "INPUT",
+  "SELECT",
+  "TEXTAREA",
+  "DETAILS",
+  "SUMMARY",
+  "LABEL",
+]);
+
+const INTERACTIVE_ROLES = new Set([
+  "button",
+  "link",
+  "checkbox",
+  "radio",
+  "switch",
+  "menuitem",
+  "option",
+  "tab",
+  "textbox",
+  "combobox",
+  "spinbutton",
+  "slider",
+]);
+
+/**
+ * Walks up from the event target until TR/TH (row / header) or root.
+ * Returns true if any ancestor is inherently interactive, explicitly focusable,
+ * or has an interactive ARIA role.
+ * Used to decide whether a row click should be treated as a row selection
+ * or ignored because the user interacted with an embedded control.
+ */
+function isElementInteractiveTarget(element: HTMLElement | null) {
+  for (
+    let node: HTMLElement | null = element;
+    node && node.nodeName !== "TR" && node.nodeName !== "TH";
+    node = node.parentElement
+  ) {
+    const tag = node.nodeName;
+
+    /* Native interactive tag */
+    if (INTERACTIVE_TAGS.has(tag)) {
+      return true;
+    }
+
+    /* Explicit interactive role */
+    const role = node.getAttribute("role");
+    if (role && INTERACTIVE_ROLES.has(role)) {
+      return true;
+    }
+
+    /* Focusable via tabindex (exclude -1) */
+    if (node.hasAttribute("tabindex")) {
+      const ti = node.getAttribute("tabindex");
+      if (ti !== "-1") {
+        return true;
+      }
+    }
+  }
+
+  return false;
+}
+
+export { isElementInteractiveTarget };

package/src/theme/Theme.tsx

@@ -45,6 +45,8 @@ const RenameCSS = ({ children }: { children: React.ReactNode }) => {
 /* -------------------------------------------------------------------------- */
 /*                               Theme provider                               */
 /* -------------------------------------------------------------------------- */
+const DEFAULT_COLOR: AkselColor = "accent";
+
 type ThemeContext = {
   /**
    * Color theme
@@ -52,12 +54,21 @@ type ThemeContext = {
    */
   theme?: "light" | "dark";
   color?: AkselColor;
+  /**
+   * Indicates if Theme-component is used or not.
+   * @default false
+   */
+  isDarkside: boolean;
 };
 
 const [ThemeProvider, useThemeInternal] = createContext<ThemeContext>({
   hookName: "useTheme",
   name: "ThemeProvider",
   providerName: "ThemeProvider",
+  defaultValue: {
+    color: DEFAULT_COLOR,
+    isDarkside: false,
+  },
 });
 
 export type ThemeProps = {
@@ -70,7 +81,7 @@ export type ThemeProps = {
    * Sets default 'base'-color for application
    */
   "data-color"?: AkselColor;
-} & Omit<ThemeContext, "color"> &
+} & Omit<ThemeContext, "color" | "isDarkside"> &
   AsChildProps;
 
 const Theme = forwardRef<HTMLDivElement, ThemeProps>(
@@ -86,7 +97,7 @@ const Theme = forwardRef<HTMLDivElement, ThemeProps>(
       "data-color": color = context?.color,
     } = props;
 
-    const isRoot = context === undefined;
+    const isRoot = !context?.isDarkside;
 
     const hasBackground =
       hasBackgroundProp ?? (isRoot && props.theme !== undefined);
@@ -94,7 +105,7 @@ const Theme = forwardRef<HTMLDivElement, ThemeProps>(
     const SlotElement = asChild ? Slot : "div";
 
     return (
-      <ThemeProvider theme={theme} color={color}>
+      <ThemeProvider theme={theme} color={color} isDarkside={true}>
         <RenameCSS>
           <SlotElement
             ref={ref}

package/src/timeline/Pin.tsx

@@ -49,7 +49,7 @@ export const Pin = forwardRef<HTMLButtonElement, TimelinePinProps>(
     const translate = useI18n("Timeline");
 
     const themeContext = useThemeInternal(false);
-    const showArrow = !themeContext;
+    const showArrow = !themeContext?.isDarkside;
 
     const {
       context,

package/src/timeline/period/ClickablePeriod.tsx

@@ -61,7 +61,7 @@ const ClickablePeriod = React.memo(
     const translate = useI18n("Timeline");
 
     const themeContext = useThemeInternal(false);
-    const showArrow = !themeContext;
+    const showArrow = !themeContext?.isDarkside;
 
     const {
       context,

package/src/toggle-group/ToggleGroup.tsx

@@ -84,7 +84,7 @@ export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
 
     let localVariant: ToggleGroupProps["variant"] | undefined;
 
-    if (themeContext) {
+    if (themeContext?.isDarkside) {
       localVariant = variant;
     } else {
       localVariant = variant ?? "action";