@navikt/ds-react 7.29.1 → 7.30.0

package/esm/util/composition-warning/CompositionWarning.js

@@ -0,0 +1,34 @@
+/**
+ * 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.js";
+import { createContext } from "../create-context.js";
+const isDev = process.env.NODE_ENV !== "production";
+const [CompositionWarning, useCompositionWarning] = createContext({
+    errorMessage: "useCompositionWarning() must be used within <CompositionWarning />",
+});
+function CompositionWarningForbidden({ children, name, message, }) {
+    var _a;
+    const compositionName = (_a = useCompositionWarning(false)) === null || _a === void 0 ? void 0 : _a.name;
+    const elementRef = useRef(null);
+    useEffect(() => {
+        if (!isDev || !compositionName || name !== compositionName) {
+            return;
+        }
+        console.warn(`[Aksel] ${message}\nElement: `, elementRef.current);
+    }, [compositionName, name, message]);
+    return React.createElement(Slot, { ref: elementRef }, children);
+}
+export { CompositionWarningForbidden as Forbidden, CompositionWarning as Root };
+//# sourceMappingURL=CompositionWarning.js.map

package/esm/util/composition-warning/CompositionWarning.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CompositionWarning.js","sourceRoot":"","sources":["../../../src/util/composition-warning/CompositionWarning.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAIlD,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,CAAC;AASpD,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAC/C,aAAa,CAAgC;IAC3C,YAAY,EACV,oEAAoE;CACvE,CAAC,CAAC;AAcL,SAAS,2BAA2B,CAAC,EACnC,QAAQ,EACR,IAAI,EACJ,OAAO,GAC0B;;IACjC,MAAM,eAAe,GAAG,MAAA,qBAAqB,CAAC,KAAK,CAAC,0CAAE,IAAI,CAAC;IAE3D,MAAM,UAAU,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAE7C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,KAAK,IAAI,CAAC,eAAe,IAAI,IAAI,KAAK,eAAe,EAAE,CAAC;YAC3D,OAAO;QACT,CAAC;QAED,OAAO,CAAC,IAAI,CAAC,WAAW,OAAO,aAAa,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IACpE,CAAC,EAAE,CAAC,eAAe,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC;IAErC,OAAO,oBAAC,IAAI,IAAC,GAAG,EAAE,UAAU,IAAG,QAAQ,CAAQ,CAAC;AAClD,CAAC;AAED,OAAO,EAAE,2BAA2B,IAAI,SAAS,EAAE,kBAAkB,IAAI,IAAI,EAAE,CAAC"}

package/esm/util/composition-warning/index.d.ts

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

package/esm/util/composition-warning/index.js

@@ -0,0 +1,2 @@
+export * as CompositionWarning from "./CompositionWarning.js";
+//# sourceMappingURL=index.js.map

package/esm/util/composition-warning/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/util/composition-warning/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,kBAAkB,MAAM,sBAAsB,CAAC"}

package/esm/util/getChildRef.d.ts

@@ -0,0 +1 @@
+export declare const getChildRef: <T>(children: React.ReactElement<React.RefAttributes<T>>) => React.Ref<T> | undefined;

package/esm/util/getChildRef.js

@@ -0,0 +1,4 @@
+export const getChildRef = (children) => Object.prototype.propertyIsEnumerable.call(children.props, "ref")
+    ? children.props.ref // React 19 (children.ref still works, but gives a warning)
+    : children.ref; // React <19
+//# sourceMappingURL=getChildRef.js.map

package/esm/util/getChildRef.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getChildRef.js","sourceRoot":"","sources":["../../src/util/getChildRef.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,WAAW,GAAG,CACzB,QAAoD,EAC1B,EAAE,CAC5B,MAAM,CAAC,SAAS,CAAC,oBAAoB,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC;IAC/D,CAAC,CAAE,QAAQ,CAAC,KAAa,CAAC,GAAG,CAAC,2DAA2D;IACzF,CAAC,CAAE,QAAgB,CAAC,GAAG,CAAC,CAAC,YAAY"}

package/esm/util/renderStoriesForChromatic.d.ts

@@ -1,13 +1,5 @@
-import { Args } from "@storybook/react";
+import { StoryObj } from "@storybook/react";
 import React from "react";
-import { Renderer, StoryContext } from "storybook/internal/types";
 export declare function renderStoriesForChromatic(stories: Record<string, {
     render?: (...args: any[]) => React.ReactNode;
-} | React.FunctionComponent<void>>): {
-    render: (args_0: Args, args_1: StoryContext<Renderer, Args>) => React.JSX.Element[];
-    parameters: {
-        chromatic: {
-            disable: boolean;
-        };
-    };
-};
+} | React.FunctionComponent<void>>): StoryObj;

package/esm/util/renderStoriesForChromatic.js

@@ -1,12 +1,12 @@
 import React from "react";
 export function renderStoriesForChromatic(stories) {
     return {
-        render: (...args) => Object.entries(stories).map(([storyName, story]) => {
+        render: (...args) => (React.createElement(React.Fragment, null, Object.entries(stories).map(([storyName, story]) => {
             var _a;
             return (React.createElement("div", { key: storyName },
                 React.createElement("h2", { className: "storyheading" }, storyName),
                 typeof story === "function" ? story() : (_a = story.render) === null || _a === void 0 ? void 0 : _a.call(story, ...args)));
-        }),
+        }))),
         parameters: {
             chromatic: { disable: false },
         },

package/esm/util/renderStoriesForChromatic.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderStoriesForChromatic.js","sourceRoot":"","sources":["../../src/util/renderStoriesForChromatic.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,UAAU,yBAAyB,CACvC,OAIC;IAED,OAAO;QACL,MAAM,EAAE,CAAC,GAAG,IAA0C,EAAE,EAAE,CACxD,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,EAAE,KAAK,CAAC,EAAE,EAAE;;YAAC,OAAA,CAClD,6BAAK,GAAG,EAAE,SAAS;gBACjB,4BAAI,SAAS,EAAC,cAAc,IAAE,SAAS,CAAM;gBAC5C,OAAO,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,MAAA,KAAK,CAAC,MAAM,sDAAG,GAAG,IAAI,CAAC,CAC5D,CACP,CAAA;SAAA,CAAC;QACJ,UAAU,EAAE;YACV,SAAS,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;SAC9B;KACF,CAAC;AACJ,CAAC"}
+{"version":3,"file":"renderStoriesForChromatic.js","sourceRoot":"","sources":["../../src/util/renderStoriesForChromatic.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,UAAU,yBAAyB,CACvC,OAIC;IAED,OAAO;QACL,MAAM,EAAE,CAAC,GAAG,IAA0C,EAAE,EAAE,CAAC,CACzD,0CACG,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,EAAE,KAAK,CAAC,EAAE,EAAE;;YAAC,OAAA,CACnD,6BAAK,GAAG,EAAE,SAAS;gBACjB,4BAAI,SAAS,EAAC,cAAc,IAAE,SAAS,CAAM;gBAC5C,OAAO,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,MAAA,KAAK,CAAC,MAAM,sDAAG,GAAG,IAAI,CAAC,CAC5D,CACP,CAAA;SAAA,CAAC,CACD,CACJ;QACD,UAAU,EAAE;YACV,SAAS,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;SAC9B;KACF,CAAC;AACJ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "7.29.1",
+  "version": "7.30.0",
   "description": "React components from the Norwegian Labour and Welfare Administration.",
   "author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
   "license": "MIT",
@@ -650,8 +650,8 @@
   "dependencies": {
     "@floating-ui/react": "0.27.8",
     "@floating-ui/react-dom": "^2.0.9",
-    "@navikt/aksel-icons": "^7.29.1",
-    "@navikt/ds-tokens": "^7.29.1",
+    "@navikt/aksel-icons": "^7.30.0",
+    "@navikt/ds-tokens": "^7.30.0",
     "clsx": "^2.1.0",
     "date-fns": "^4.0.0",
     "react-day-picker": "9.7.0"

package/src/date/datepicker/parts/DatePicker.WeekNumber.tsx

@@ -76,7 +76,9 @@ const DatePickerWeekNumber = ({
             );
           }}
           icon={
-            <span className="navds-date__weeknumber-number">{weekNumber}</span>
+            <span className={cn("navds-date__weeknumber-number")}>
+              {weekNumber}
+            </span>
           }
         />
       </td>

package/src/form/form-summary/FormSummary.tsx

@@ -3,6 +3,7 @@ import { useRenameCSS } from "../../theme/Theme";
 import FormSummaryAnswer from "./FormSummaryAnswer";
 import FormSummaryAnswers from "./FormSummaryAnswers";
 import FormSummaryEditLink from "./FormSummaryEditLink";
+import FormSummaryFooter from "./FormSummaryFooter";
 import FormSummaryHeader from "./FormSummaryHeader";
 import FormSummaryHeading from "./FormSummaryHeading";
 import FormSummaryLabel from "./FormSummaryLabel";
@@ -13,7 +14,7 @@ interface FormSummaryComponent
     FormSummaryProps & React.RefAttributes<HTMLDivElement>
   > {
   /**
-   * Must include `<FormSummary.Heading>` and optionally `<FormSummary.EditLink>`.
+   * Must include `<FormSummary.Heading>`.
    */
   Header: typeof FormSummaryHeader;
   /**
@@ -21,7 +22,7 @@ interface FormSummaryComponent
    */
   Heading: typeof FormSummaryHeading;
   /**
-   * Link to edit the answers to use in the `FormSummary.Header` component. Should link to the relevant part of the form.
+   * Link to edit the answers to use in the `FormSummary.Footer` component. Should link to the relevant part of the form.
    */
   EditLink: typeof FormSummaryEditLink;
   /**
@@ -40,6 +41,10 @@ interface FormSummaryComponent
    * Corresponds to the answer in the form. To be used in the `FormSummary.Answer` component.
    */
   Value: typeof FormSummaryValue;
+  /**
+   * Footer component for the form summary, if applicable this is a good place for `<FormSummary.EditLink>`.
+   */
+  Footer: typeof FormSummaryFooter;
 }
 
 export interface FormSummaryProps extends HTMLAttributes<HTMLDivElement> {
@@ -48,20 +53,7 @@ export interface FormSummaryProps extends HTMLAttributes<HTMLDivElement> {
    *
    *  - `<FormSummary.Header>`
    *  - `<FormSummary.Answers>`
-   *
-   * @example
-   * <FormSummary>
-   *   <FormSummary.Header>
-   *     <FormSummary.Heading level="2">HeadingTekst</FormSummary.Heading>
-   *     <FormSummary.EditLink href="#" />
-   *   </FormSummary.Header>
-   *   <FormSummary.Answers>
-   *     <FormSummary.Answer>
-   *       <FormSummary.Label>Navn</FormSummary.Label>
-   *       <FormSummary.Value>Ola Nordmann</FormSummary.Value>
-   *     </FormSummary.Answer>
-   *   </FormSummary.Answers>
-   * </FormSummary>
+   *  - `<FormSummary.Footer>` (optional)
    */
   children: React.ReactNode;
 }
@@ -75,7 +67,6 @@ export interface FormSummaryProps extends HTMLAttributes<HTMLDivElement> {
  * <FormSummary>
  *   <FormSummary.Header>
  *     <FormSummary.Heading level="2">HeadingTekst</FormSummary.Heading>
- *     <FormSummary.EditLink href="#" />
  *   </FormSummary.Header>
  *   <FormSummary.Answers>
  *     <FormSummary.Answer>
@@ -83,6 +74,9 @@ export interface FormSummaryProps extends HTMLAttributes<HTMLDivElement> {
  *       <FormSummary.Value>Ola Nordmann</FormSummary.Value>
  *     </FormSummary.Answer>
  *   </FormSummary.Answers>
+ *   <FormSummary.Footer>
+ *     <FormSummary.EditLink href="#" />
+ *   </FormSummary.Footer>
  * </FormSummary>
  */
 export const FormSummary = forwardRef<HTMLDivElement, FormSummaryProps>(
@@ -104,5 +98,6 @@ FormSummary.Answers = FormSummaryAnswers;
 FormSummary.Answer = FormSummaryAnswer;
 FormSummary.Label = FormSummaryLabel;
 FormSummary.Value = FormSummaryValue;
+FormSummary.Footer = FormSummaryFooter;
 
 export default FormSummary;

package/src/form/form-summary/FormSummaryEditLink.tsx

@@ -1,6 +1,8 @@
 import React, { forwardRef } from "react";
+import { PencilIcon } from "@navikt/aksel-icons";
 import { Link } from "../../link";
 import { useRenameCSS } from "../../theme/Theme";
+import { CompositionWarning } from "../../util/composition-warning";
 import { useI18n } from "../../util/i18n/i18n.hooks";
 import { OverridableComponent } from "../../util/types";
 
@@ -24,17 +26,24 @@ export const FormSummaryEditLink: OverridableComponent<
   HTMLAnchorElement
 > = forwardRef(({ children, className, as = "a", ...rest }, ref) => {
   const { cn } = useRenameCSS();
+
   const translate = useI18n("FormSummary");
 
   return (
-    <Link
-      ref={ref}
-      as={as}
-      {...rest}
-      className={cn("navds-form-summary__edit", className)}
+    <CompositionWarning.Forbidden
+      name="FormSummary.Header"
+      message="<FormSummary.EditLink> should not be placed in <FormSummary.Header> anymore. See https://aksel.nav.no/komponenter/core/formsummary"
     >
-      {children || translate("editAnswer")}
-    </Link>
+      <Link
+        ref={ref}
+        as={as}
+        {...rest}
+        className={cn("navds-form-summary__edit", className)}
+      >
+        <PencilIcon aria-hidden fontSize="1.5rem" />
+        {children || translate("editAnswer")}
+      </Link>
+    </CompositionWarning.Forbidden>
   );
 });
 

package/src/form/form-summary/FormSummaryFooter.tsx

@@ -0,0 +1,33 @@
+import React, { forwardRef } from "react";
+import { useRenameCSS } from "../../theme/Theme";
+
+/**
+ * Footer slot for actions in `FormSummary`.
+ */
+export interface FormSummaryFooterProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Should include `<FormSummary.EditLink>`.
+   */
+  children: React.ReactNode;
+}
+
+export const FormSummaryFooter = forwardRef<
+  HTMLDivElement,
+  FormSummaryFooterProps
+>(({ children, className, ...rest }, ref) => {
+  const { cn } = useRenameCSS();
+
+  return (
+    <div
+      ref={ref}
+      data-color="info"
+      {...rest}
+      className={cn("navds-form-summary__footer", className)}
+    >
+      {children}
+    </div>
+  );
+});
+
+export default FormSummaryFooter;

package/src/form/form-summary/FormSummaryHeader.tsx

@@ -1,10 +1,11 @@
 import React, { forwardRef } from "react";
 import { useRenameCSS } from "../../theme/Theme";
+import { CompositionWarning } from "../../util/composition-warning";
 
 export interface FormSummaryHeaderProps
   extends React.HTMLAttributes<HTMLDivElement> {
   /**
-   * Must include `<FormSummary.Heading>` and optionally `<FormSummary.EditLink>`.
+   * Must include `<FormSummary.Heading>`.
    */
   children: React.ReactNode;
 }
@@ -12,17 +13,19 @@ export interface FormSummaryHeaderProps
 export const FormSummaryHeader = forwardRef<
   HTMLDivElement,
   FormSummaryHeaderProps
->(({ children, className, ...rest }, ref) => {
+>(({ children, className, ...rest }: FormSummaryHeaderProps, ref) => {
   const { cn } = useRenameCSS();
 
   return (
-    <header
-      ref={ref}
-      {...rest}
-      className={cn("navds-form-summary__header", className)}
-    >
-      {children}
-    </header>
+    <CompositionWarning.Root name="FormSummary.Header">
+      <div
+        ref={ref}
+        {...rest}
+        className={cn("navds-form-summary__header", className)}
+      >
+        {children}
+      </div>
+    </CompositionWarning.Root>
   );
 });
 

package/src/form/form-summary/index.ts

@@ -12,6 +12,10 @@ export {
   default as FormSummaryEditLink,
   type FormSummaryEditProps,
 } from "./FormSummaryEditLink";
+export {
+  default as FormSummaryFooter,
+  type FormSummaryFooterProps,
+} from "./FormSummaryFooter";
 export {
   default as FormSummaryHeader,
   type FormSummaryHeaderProps,

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/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 },
     },