@navikt/ds-react 7.29.1 → 7.30.1

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/timeline/period/index.tsx

@@ -32,7 +32,9 @@ export interface TimelinePeriodProps
   /**
    * Callback when selecting a period.
    */
-  onSelectPeriod?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  onSelectPeriod?: (
+    event: React.MouseEvent<Element> | React.KeyboardEvent<Element>,
+  ) => void;
   /**
    * Content displayed in Popover on click.
    */

package/src/timeline/utils/timeline.ts

@@ -1,82 +1,71 @@
 import React, { ReactNode } from "react";
+import type { TimelinePeriod, TimelineRow, TimelineRowProps } from "..";
 import { omit } from "../../util";
+import { getChildRef } from "../../util/getChildRef";
 import { Period } from "./types.external";
 
-type ParsedChild = {
-  label?: string;
+type TimelineRowPropsWithRef = React.ComponentProps<typeof TimelineRow>;
+type TimelinePeriodPropsWithRef = React.ComponentProps<typeof TimelinePeriod>;
+
+type ParsedRow = {
+  label: string;
   icon?: React.ReactNode;
-  headingTag: string;
+  headingTag?: string;
   periods: Omit<Period, "id" | "endInclusive">[];
-  restProps: any;
-  ref: any;
+  restProps: Omit<TimelineRowProps, "label" | "icon" | "headingTag">;
+  ref?: React.Ref<HTMLOListElement>;
 };
 
 export const parseRows = (rowChildren: ReactNode[]) => {
-  const parsedChildren: ParsedChild[] = [];
-  rowChildren?.forEach((r: React.ReactNode) => {
-    const periods: ParsedChild["periods"] = [];
-    if (React.isValidElement(r) && r?.props?.children) {
-      if (Array.isArray(r.props.children)) {
-        for (let i = 0; i < r.props.children.length; i++) {
-          const p = r.props.children[i];
+  const parsedChildren: ParsedRow[] = [];
+
+  rowChildren?.forEach((row: React.ReactNode) => {
+    const periods: ParsedRow["periods"] = [];
+
+    if (
+      !React.isValidElement<TimelineRowPropsWithRef>(row) ||
+      !row.props.children
+    ) {
+      return;
+    }
 
-          periods.push({
-            start: p?.props?.start,
-            end: p?.props?.end,
-            status: p?.props?.status || "neutral",
-            onSelectPeriod: p.props?.onSelectPeriod,
-            label: r.props.label,
-            icon: p.props.icon,
-            children: p.props.children,
-            isActive: p.props.isActive,
-            statusLabel: p.props.statusLabel,
-            restProps: omit(p.props, [
-              "start",
-              "end",
-              "status",
-              "onSelectPeriod",
-              "label",
-              "icon",
-              "children",
-              "isActive",
-              "statusLabel",
-            ]),
-            ref: p?.ref,
-          });
-        }
-      } else {
-        periods.push({
-          start: r.props.children.props.start,
-          end: r.props.children.props.end,
-          status: r.props.children.props?.status || "neutral",
-          onSelectPeriod: r.props.children.props?.onSelectPeriod,
-          label: r.props.label,
-          icon: r.props.children.props?.icon,
-          children: r.props.children.props?.children,
-          statusLabel: r.props.children.props?.statusLabel,
-          restProps: omit(r.props.children.props, [
-            "start",
-            "end",
-            "status",
-            "onSelectPeriod",
-            "label",
-            "icon",
-            "children",
-            "isActive",
-            "statusLabel",
-          ]),
-          ref: r.props?.children?.ref,
-        });
+    React.Children.toArray(row.props.children).forEach((period) => {
+      if (!React.isValidElement<TimelinePeriodPropsWithRef>(period)) {
+        return;
       }
-      parsedChildren.push({
-        label: r.props.label,
-        icon: r.props.icon,
-        headingTag: r.props.headingTag,
-        periods,
-        restProps: omit(r.props, ["label", "icon", "headingTag"]),
-        ref: (r as any)?.ref,
+
+      periods.push({
+        start: period.props.start,
+        end: period.props.end,
+        status: period.props.status || "neutral",
+        onSelectPeriod: period.props.onSelectPeriod,
+        icon: period.props.icon,
+        children: period.props.children,
+        isActive: period.props.isActive,
+        statusLabel: period.props.statusLabel,
+        restProps: omit(period.props, [
+          "start",
+          "end",
+          "status",
+          "onSelectPeriod",
+          "icon",
+          "children",
+          "isActive",
+          "statusLabel",
+          "placement",
+        ]),
+        ref: getChildRef(period),
       });
-    }
+    });
+
+    parsedChildren.push({
+      label: row.props.label,
+      icon: row.props.icon,
+      headingTag: row.props.headingTag,
+      periods,
+      restProps: omit(row.props, ["label", "icon", "headingTag"]),
+      ref: getChildRef(row),
+    });
   });
 
   return parsedChildren;

package/src/timeline/utils/types.external.ts

@@ -16,18 +16,19 @@ export interface Positioned {
 
 export interface Period {
   id: string;
-  label?: string;
   start: Date;
   endInclusive: Date;
   status?: PeriodStatus;
-  onSelectPeriod?: () => void;
+  onSelectPeriod?: (
+    e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>,
+  ) => void;
   icon?: React.ReactNode;
   children?: React.ReactNode;
   end: Date;
   isActive?: boolean;
   statusLabel?: string;
   restProps?: any;
-  ref?: Element;
+  ref?: React.Ref<HTMLDivElement | HTMLButtonElement>;
 }
 
 export interface PositionedPeriod extends Period, Positioned {

package/src/timeline/utils/types.internal.ts

@@ -21,7 +21,9 @@ export interface Period {
   start: Date;
   endInclusive: Date;
   status?: PeriodStatus;
-  onSelectPeriod?: () => void;
+  onSelectPeriod?: (
+    e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>,
+  ) => void;
   icon?: React.ReactNode;
   children?: React.ReactNode;
   isActive?: boolean;

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";

package/src/util/composition-warning/CompositionWarning.tsx

@@ -0,0 +1,67 @@
+/**
+ * Give warnings based on component composition (which slot/parent a child is rendered in).
+ *
+ * Used when child components need to know which slot/parent they are rendered in
+ * (e.g. `FormSummary.Header` vs `FormSummary.Footer`) and should warn or error in development
+ * if placed in a discouraged or forbidden slot.
+ *
+ * Usage:
+ * - Wrap slot components with <CompositionWarning.Root name="FormSummary.Header">...</CompositionWarning.Root>
+ * - In child: `<CompositionWarning.Forbidden name="FormSummary.Header" />` to forbid slot.
+ *
+ * This is guidance only: warnings are logged to the console in development, never enforced at runtime.
+ */
+import React, { useEffect, useRef } from "react";
+import { Slot } from "../../slot/Slot";
+import { createContext } from "../create-context";
+
+type CompositionName = string;
+
+const isDev = process.env.NODE_ENV !== "production";
+
+type CompositionWarningContextType = {
+  /**
+   * Name of the slot component we want to check.
+   */
+  name: CompositionName;
+};
+
+const [CompositionWarning, useCompositionWarning] =
+  createContext<CompositionWarningContextType>({
+    errorMessage:
+      "useCompositionWarning() must be used within <CompositionWarning />",
+  });
+
+type CompositionWarningForbiddenProps = {
+  children?: React.ReactElement;
+  /**
+   * Name of the parent slot component where the child is not allowed.
+   */
+  name: CompositionName;
+  /**
+   * Warning message to display if the child is found.
+   */
+  message: string;
+};
+
+function CompositionWarningForbidden({
+  children,
+  name,
+  message,
+}: CompositionWarningForbiddenProps) {
+  const compositionName = useCompositionWarning(false)?.name;
+
+  const elementRef = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    if (!isDev || !compositionName || name !== compositionName) {
+      return;
+    }
+
+    console.warn(`[Aksel] ${message}\nElement: `, elementRef.current);
+  }, [compositionName, name, message]);
+
+  return <Slot ref={elementRef}>{children}</Slot>;
+}
+
+export { CompositionWarningForbidden as Forbidden, CompositionWarning as Root };

package/src/util/composition-warning/index.ts

@@ -0,0 +1 @@
+export * as CompositionWarning from "./CompositionWarning";

package/src/util/getChildRef.ts

@@ -0,0 +1,6 @@
+export const getChildRef = <T>(
+  children: React.ReactElement<React.RefAttributes<T>>,
+): React.Ref<T> | undefined =>
+  Object.prototype.propertyIsEnumerable.call(children.props, "ref")
+    ? (children.props as any).ref // React 19 (children.ref still works, but gives a warning)
+    : (children as any).ref; // React <19

package/src/util/renderStoriesForChromatic.tsx

@@ -1,4 +1,4 @@
-import { Args } from "@storybook/react";
+import { Args, StoryObj } from "@storybook/react";
 import React from "react";
 import { Renderer, StoryContext } from "storybook/internal/types";
 
@@ -8,15 +8,18 @@ export function renderStoriesForChromatic(
     | { render?: (...args: any[]) => React.ReactNode }
     | React.FunctionComponent<void>
   >,
-) {
+): StoryObj {
   return {
-    render: (...args: [Args, StoryContext<Renderer, Args>]) =>
-      Object.entries(stories).map(([storyName, story]) => (
-        <div key={storyName}>
-          <h2 className="storyheading">{storyName}</h2>
-          {typeof story === "function" ? story() : story.render?.(...args)}
-        </div>
-      )),
+    render: (...args: [Args, StoryContext<Renderer, Args>]) => (
+      <>
+        {Object.entries(stories).map(([storyName, story]) => (
+          <div key={storyName}>
+            <h2 className="storyheading">{storyName}</h2>
+            {typeof story === "function" ? story() : story.render?.(...args)}
+          </div>
+        ))}
+      </>
+    ),
     parameters: {
       chromatic: { disable: false },
     },