@navikt/ds-react 8.0.1 → 8.2.0

package/src/read-more/ReadMore.tsx

@@ -3,9 +3,8 @@ import { ChevronDownIcon } from "@navikt/aksel-icons";
 import type { AkselStatusColorRole } from "@navikt/ds-tokens/types";
 import type { AkselColor } from "../types";
 import { BodyLong } from "../typography";
-import { cl } from "../util/className";
-import { composeEventHandlers } from "../util/composeEventHandlers";
-import { useControllableState } from "../util/hooks/useControllableState";
+import { cl, composeEventHandlers } from "../utils/helpers";
+import { useControllableState } from "../utils/hooks";
 
 export interface ReadMoreProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {

package/src/skeleton/Skeleton.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { cl } from "../util/className";
+import { cl } from "../utils/helpers";
 
 export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
   children?: React.ReactNode;

package/src/stepper/Step.tsx

@@ -1,8 +1,7 @@
 import React, { forwardRef } from "react";
 import { Label } from "../typography";
-import { cl } from "../util/className";
-import { composeEventHandlers } from "../util/composeEventHandlers";
-import { OverridableComponent } from "../util/types";
+import type { OverridableComponent } from "../utils-external";
+import { cl, composeEventHandlers } from "../utils/helpers";
 import { useStepperContext } from "./context";
 
 export interface StepperStepProps

package/src/stepper/Stepper.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { cl } from "../util/className";
+import { cl } from "../utils/helpers";
 import Step, { StepperStepProps } from "./Step";
 import { StepperContextProvider } from "./context";
 

package/src/stepper/context.ts

@@ -1,4 +1,4 @@
-import { createStrictContext } from "../util/create-strict-context";
+import { createStrictContext } from "../utils/helpers";
 
 interface StepperContextValue {
   onStepChange: (step: number) => void;

package/src/table/AnimateHeight.tsx

@@ -1,6 +1,6 @@
 /* https://github.com/Stanko/react-animate-height/blob/v3/src/index.tsx */
 import React, { CSSProperties, useEffect, useRef, useState } from "react";
-import { useTimeout } from "../util/hooks/useTimeout";
+import { useTimeout } from "../utils/hooks";
 
 // ------------------ Types
 

package/src/table/Body.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { cl } from "../util/className";
+import { cl } from "../utils/helpers";
 
 export type BodyProps = React.HTMLAttributes<HTMLTableSectionElement>;
 

package/src/table/DataCell.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react";
 import { BodyShort } from "../typography";
-import { cl } from "../util/className";
+import { cl } from "../utils/helpers";
 
 export interface DataCellProps
   extends React.TdHTMLAttributes<HTMLTableCellElement> {

package/src/table/ExpandableRow.tsx

@@ -1,10 +1,9 @@
 import React, { forwardRef } from "react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
-import { cl } from "../util/className";
-import { composeEventHandlers } from "../util/composeEventHandlers";
-import { useId } from "../util/hooks";
-import { useControllableState } from "../util/hooks/useControllableState";
-import { useI18n } from "../util/i18n/i18n.hooks";
+import { useId } from "../utils-external";
+import { cl, composeEventHandlers } from "../utils/helpers";
+import { useControllableState } from "../utils/hooks";
+import { useI18n } from "../utils/i18n/i18n.hooks";
 import AnimateHeight from "./AnimateHeight";
 import DataCell from "./DataCell";
 import Row, { RowProps } from "./Row";

package/src/table/Header.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { cl } from "../util/className";
+import { cl } from "../utils/helpers";
 
 export type HeaderProps = React.HTMLAttributes<HTMLTableSectionElement>;
 

package/src/table/HeaderCell.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { cl } from "../util/className";
+import { cl } from "../utils/helpers";
 
 export interface HeaderCellProps
   extends React.ThHTMLAttributes<HTMLTableCellElement> {

package/src/table/Row.tsx

@@ -1,6 +1,5 @@
 import React, { forwardRef } from "react";
-import { cl } from "../util/className";
-import { composeEventHandlers } from "../util/composeEventHandlers";
+import { cl, composeEventHandlers } from "../utils/helpers";
 import { isElementInteractiveTarget } from "./Table.utils";
 
 export interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {

package/src/table/Table.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { cl } from "../util/className";
+import { cl } from "../utils/helpers";
 import Body from "./Body";
 import ColumnHeader from "./ColumnHeader";
 import DataCell from "./DataCell";

package/src/tabs/Tabs.context.ts

@@ -1,5 +1,5 @@
-import { createStrictContext } from "../util/create-strict-context";
-import { createDescendantContext } from "../util/hooks/descendants/useDescendant";
+import { createStrictContext } from "../utils/helpers";
+import { createDescendantContext } from "../utils/hooks";
 import { TabsProps } from "./Tabs.types";
 import { useTabs } from "./useTabs";
 

package/src/tabs/Tabs.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { cl } from "../util/className";
+import { cl } from "../utils/helpers";
 import {
   TabsDescendantsProvider,
   TabsProvider,

package/src/tabs/parts/tab/Tab.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from "react";
 import { BodyShort } from "../../../typography";
-import { OverridableComponent } from "../../../util";
-import { cl } from "../../../util/className";
+import type { OverridableComponent } from "../../../utils-external";
+import { cl } from "../../../utils/helpers";
 import { useTabsContext } from "../../Tabs.context";
 import { useTab } from "./useTab";
 

package/src/tabs/parts/tab/useTab.ts

@@ -1,5 +1,5 @@
-import { composeEventHandlers } from "../../../util/composeEventHandlers";
-import { useMergeRefs } from "../../../util/hooks/useMergeRefs";
+import { composeEventHandlers } from "../../../utils/helpers";
+import { useMergeRefs } from "../../../utils/hooks";
 import { useTabsContext, useTabsDescendant } from "../../Tabs.context";
 
 export interface UseTabProps {

package/src/tabs/parts/tablist/ScrollButtons.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { ChevronLeftIcon, ChevronRightIcon } from "@navikt/aksel-icons";
-import { cl } from "../../../util/className";
+import { cl } from "../../../utils/helpers";
 
 interface ScrollButtonProps {
   hidden: boolean;

package/src/tabs/parts/tablist/TabList.tsx

@@ -1,8 +1,7 @@
 /* eslint-disable jsx-a11y/interactive-supports-focus */
 import React, { forwardRef, useRef } from "react";
-import { cl } from "../../../util/className";
-import { composeEventHandlers } from "../../../util/composeEventHandlers";
-import { useMergeRefs } from "../../../util/hooks/useMergeRefs";
+import { cl, composeEventHandlers } from "../../../utils/helpers";
+import { useMergeRefs } from "../../../utils/hooks";
 import ScrollButton from "./ScrollButtons";
 import { useScrollButtons } from "./useScrollButtons";
 import { useTabList } from "./useTabList";

package/src/tabs/parts/tablist/useScrollButtons.ts

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
-import { debounce } from "../../../util";
-import { ownerDocument } from "../../../util/owner";
+import { debounce } from "../../../utils-external";
+import { ownerDocument } from "../../../utils/helpers";
 
 export function useScrollButtons(
   listRef: React.RefObject<HTMLDivElement | null>,

package/src/tabs/parts/tabpanel/TabPanel.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { cl } from "../../../util/className";
+import { cl } from "../../../utils/helpers";
 import { useTabPanel } from "./useTabPanel";
 
 export interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement> {

package/src/tabs/useTabs.ts

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
-import { useId } from "../util";
-import { useControllableState } from "../util/hooks/useControllableState";
+import { useId } from "../utils-external";
+import { useControllableState } from "../utils/hooks";
 import { TabsProps } from "./Tabs.types";
 
 export function useTabs({

package/src/tag/Tag.tsx

@@ -1,7 +1,7 @@
 import React, { HTMLAttributes, forwardRef } from "react";
 import { AkselColor } from "../types";
 import { BodyShort } from "../typography";
-import { cl } from "../util/className";
+import { cl } from "../utils/helpers";
 
 type legacyVariants =
   | "warning"

package/src/theme/Theme.tsx

@@ -1,9 +1,8 @@
 import React, { forwardRef } from "react";
-import { Slot } from "../slot/Slot";
 import { AkselColor } from "../types";
-import { cl } from "../util/className";
-import { createStrictContext } from "../util/create-strict-context";
-import { AsChildProps } from "../util/types";
+import { Slot } from "../utils/components/slot/Slot";
+import { cl, createStrictContext } from "../utils/helpers";
+import type { AsChildProps } from "../utils/types";
 
 const DEFAULT_COLOR: AkselColor = "accent";
 

package/src/timeline/AxisLabels.tsx

@@ -16,8 +16,8 @@ import {
 } from "date-fns";
 import React from "react";
 import { Detail } from "../typography/Detail";
-import { useDateLocale, useI18n } from "../util/i18n/i18n.hooks";
-import { TFunction } from "../util/i18n/i18n.types";
+import { useDateLocale, useI18n } from "../utils/i18n/i18n.hooks";
+import { TFunction } from "../utils/i18n/i18n.types";
 import { useTimelineContext } from "./hooks/useTimelineContext";
 import { isVisible } from "./utils";
 import { horizontalPositionAndWidth } from "./utils/calc";

package/src/timeline/TimelineRow.tsx

@@ -1,8 +1,8 @@
 import { format } from "date-fns";
 import React, { forwardRef } from "react";
 import { BodyShort } from "../typography/BodyShort";
-import { cl } from "../util/className";
-import { useI18n } from "../util/i18n/i18n.hooks";
+import { cl } from "../utils/helpers";
+import { useI18n } from "../utils/i18n/i18n.hooks";
 import { PeriodContext } from "./hooks/usePeriodContext";
 import { useRowContext } from "./hooks/useRowContext";
 import { useTimelineContext } from "./hooks/useTimelineContext";

package/src/timeline/period/ClickablePeriod.tsx

@@ -12,9 +12,9 @@ import {
   useInteractions,
 } from "@floating-ui/react";
 import React, { useState } from "react";
-import { cl } from "../../util/className";
-import { useMergeRefs } from "../../util/hooks/useMergeRefs";
-import { useI18n } from "../../util/i18n/i18n.hooks";
+import { cl } from "../../utils/helpers";
+import { useMergeRefs } from "../../utils/hooks";
+import { useI18n } from "../../utils/i18n/i18n.hooks";
 import { usePeriodContext } from "../hooks/usePeriodContext";
 import { useRowContext } from "../hooks/useRowContext";
 import { useTimelineContext } from "../hooks/useTimelineContext";

package/src/timeline/period/NonClickablePeriod.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { cl } from "../../util/className";
-import { useI18n } from "../../util/i18n/i18n.hooks";
+import { cl } from "../../utils/helpers";
+import { useI18n } from "../../utils/i18n/i18n.hooks";
 import { ariaLabel, getConditionalClasses } from "../utils/period";
 import type { PeriodProps } from "./types";
 

package/src/timeline/pin/PinInternal.tsx

@@ -13,8 +13,8 @@ import {
 } from "@floating-ui/react";
 import { format } from "date-fns";
 import React, { forwardRef, useState } from "react";
-import { useMergeRefs } from "../../util/hooks/useMergeRefs";
-import { useI18n } from "../../util/i18n/i18n.hooks";
+import { useMergeRefs } from "../../utils/hooks";
+import { useI18n } from "../../utils/i18n/i18n.hooks";
 import { useTimelineContext } from "../hooks/useTimelineContext";
 import { position } from "../utils/calc";
 

package/src/timeline/utils/period.ts

@@ -1,6 +1,6 @@
 import { format } from "date-fns";
-import { cl } from "../../util/className";
-import type { TFunction } from "../../util/i18n/i18n.types";
+import { cl } from "../../utils/helpers";
+import type { TFunction } from "../../utils/i18n/i18n.types";
 import type { PeriodProps } from "../period/types";
 
 export const getConditionalClasses = (

package/src/timeline/utils/timeline.ts

@@ -1,7 +1,6 @@
 import React, { ReactNode } from "react";
 import type { TimelinePeriod, TimelineRow, TimelineRowProps } from "..";
-import { omit } from "../../util";
-import { getChildRef } from "../../util/getChildRef";
+import { omit } from "../../utils-external";
 import { Period } from "./types.external";
 
 type TimelineRowPropsWithRef = React.ComponentProps<typeof TimelineRow>;
@@ -70,3 +69,11 @@ export const parseRows = (rowChildren: ReactNode[]) => {
 
   return parsedChildren;
 };
+
+function getChildRef<T>(
+  children: React.ReactElement<React.RefAttributes<T>>,
+): React.Ref<T> | undefined {
+  return 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/timeline/zoom/ZoomButton.tsx

@@ -8,7 +8,7 @@ import {
 } from "date-fns";
 import React, { forwardRef } from "react";
 import { Detail } from "../../typography/Detail";
-import { useI18n } from "../../util/i18n/i18n.hooks";
+import { useI18n } from "../../utils/i18n/i18n.hooks";
 import { useTimelineContext } from "../hooks/useTimelineContext";
 
 export interface TimelineZoomButtonProps {

package/src/timeline/zoom/index.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { cl } from "../../util/className";
+import { cl } from "../../utils/helpers";
 import ZoomButton, { ZoomButtonType } from "./ZoomButton";
 
 interface ZoomProps extends React.HTMLAttributes<HTMLUListElement> {

package/src/toggle-group/ToggleGroup.context.ts

@@ -1,6 +1,6 @@
 import { createContext as ReactCreateContext } from "react";
-import { createStrictContext } from "../util/create-strict-context";
-import { createDescendantContext } from "../util/hooks/descendants/useDescendant";
+import { createStrictContext } from "../utils/helpers";
+import { createDescendantContext } from "../utils/hooks";
 import { ToggleGroupProps } from "./ToggleGroup.types";
 import { useToggleGroup } from "./useToggleGroup";
 

package/src/toggle-group/ToggleGroup.tsx

@@ -1,8 +1,8 @@
 import React, { forwardRef } from "react";
 import { AkselColor } from "../types";
 import { Label } from "../typography";
-import { useId } from "../util";
-import { cl } from "../util/className";
+import { useId } from "../utils-external";
+import { cl } from "../utils/helpers";
 import {
   ToggleGroupDescendantsProvider,
   ToggleGroupProvider,

package/src/toggle-group/parts/ToggleItem.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react";
 import { BodyShort } from "../../typography/BodyShort";
-import { cl } from "../../util/className";
+import { cl } from "../../utils/helpers";
 import { useToggleGroupContext } from "../ToggleGroup.context";
 import { useToggleItem } from "./useToggleItem";
 

package/src/toggle-group/parts/useToggleItem.ts

@@ -1,6 +1,6 @@
 import { useCallback } from "react";
-import { composeEventHandlers } from "../../util/composeEventHandlers";
-import { useMergeRefs } from "../../util/hooks/useMergeRefs";
+import { composeEventHandlers } from "../../utils/helpers";
+import { useMergeRefs } from "../../utils/hooks";
 import {
   useToggleGroupContext,
   useToggleGroupDescendant,

package/src/toggle-group/useToggleGroup.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { useControllableState } from "../util/hooks/useControllableState";
+import { useControllableState } from "../utils/hooks";
 import { ToggleGroupProps } from "./ToggleGroup.types";
 
 export function useToggleGroup({

package/src/tooltip/Tooltip.tsx

@@ -14,12 +14,11 @@ import {
 import React, { HTMLAttributes, forwardRef, useRef } from "react";
 import { useModalContext } from "../modal/Modal.context";
 import { Portal } from "../portal";
-import { Slot } from "../slot/Slot";
 import { Detail } from "../typography";
-import { cl } from "../util/className";
-import { useId } from "../util/hooks";
-import { useControllableState } from "../util/hooks/useControllableState";
-import { useMergeRefs } from "../util/hooks/useMergeRefs";
+import { useId } from "../utils-external";
+import { Slot } from "../utils/components/slot/Slot";
+import { cl } from "../utils/helpers";
+import { useControllableState, useMergeRefs } from "../utils/hooks";
 
 export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
   /**

package/src/typography/BodyLong.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from "react";
 import type { AkselColor } from "../types";
-import { cl } from "../util/className";
-import { OverridableComponent } from "../util/types";
+import type { OverridableComponent } from "../utils-external";
+import { cl } from "../utils/helpers";
 import { TypoProps } from "./types";
 import { typoClassNames } from "./util";
 

package/src/typography/BodyShort.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from "react";
 import type { AkselColor } from "../types";
-import { cl } from "../util/className";
-import { OverridableComponent } from "../util/types";
+import type { OverridableComponent } from "../utils-external";
+import { cl } from "../utils/helpers";
 import { TypoProps } from "./types";
 import { typoClassNames } from "./util";
 

package/src/typography/Detail.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from "react";
 import type { AkselColor } from "../types";
-import { cl } from "../util/className";
-import { OverridableComponent } from "../util/types";
+import type { OverridableComponent } from "../utils-external";
+import { cl } from "../utils/helpers";
 import { TypoProps } from "./types";
 import { typoClassNames } from "./util";
 

package/src/typography/ErrorMessage.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react";
-import { cl } from "../util/className";
-import { OverridableComponent } from "../util/types";
+import type { OverridableComponent } from "../utils-external";
+import { cl } from "../utils/helpers";
 import { TypoProps } from "./types";
 import { typoClassNames } from "./util";
 

package/src/typography/Heading.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from "react";
 import type { AkselColor } from "../types";
-import { cl } from "../util/className";
-import { OverridableComponent } from "../util/types";
+import type { OverridableComponent } from "../utils-external";
+import { cl } from "../utils/helpers";
 import { TypoProps } from "./types";
 import { typoClassNames } from "./util";
 

package/src/typography/Ingress.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react";
-import { cl } from "../util/className";
-import { OverridableComponent } from "../util/types";
+import type { OverridableComponent } from "../utils-external";
+import { cl } from "../utils/helpers";
 
 export interface IngressProps
   extends React.HTMLAttributes<HTMLParagraphElement> {

package/src/typography/Label.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from "react";
 import type { AkselColor } from "../types";
-import { cl } from "../util/className";
-import { OverridableComponent } from "../util/types";
+import type { OverridableComponent } from "../utils-external";
+import { cl } from "../utils/helpers";
 import { TypoProps } from "./types";
 import { typoClassNames } from "./util";
 

package/src/typography/util.ts

@@ -1,4 +1,4 @@
-import { cl } from "../util/className";
+import { cl } from "../utils/helpers";
 import { TypoProps } from "./types";
 
 export const typoClassNames = (props: TypoProps & { uppercase?: boolean }) => {

package/src/{util → utils/components}/composition-warning/CompositionWarning.tsx

@@ -12,8 +12,8 @@
  * 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 { createStrictContext } from "../create-strict-context";
+import { createStrictContext } from "../../helpers";
+import { Slot } from "../slot/Slot";
 
 type CompositionName = string;
 

package/src/{util → utils/components}/focus-boundary/FocusBoundary.tsx

@@ -5,12 +5,15 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { Slot } from "../../slot/Slot";
-import { useClientLayoutEffect, useMergeRefs } from "../../util/hooks";
-import { hideNonTargetElements } from "../hideNonTargetElements";
-import { useValueAsRef } from "../hooks/useValueAsRef";
-import { ownerDocument } from "../owner";
-import { resolveRef } from "../resolveRef";
+import { useClientLayoutEffect } from "../../../utils-external";
+import {
+  hideNonTargetElements,
+  ownerDocument,
+  resolveRef,
+} from "../../helpers";
+import { useMergeRefs } from "../../hooks";
+import { useValueAsRef } from "../../hooks/useValueAsRef";
+import { Slot } from "../slot/Slot";
 
 /* -------------------------------------------------------------------------- */
 /*                                 FocusBoundary                                 */

package/src/{util → utils/components}/focus-guards/FocusGuards.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { useMergeRefs } from "../hooks";
+import { useMergeRefs } from "../../hooks";
 
 const visuallyHidden: React.CSSProperties = {
   clip: "rect(0 0 0 0)",

package/src/{util → utils/components}/link-anchor/LinkAnchor.tsx

@@ -1,18 +1,20 @@
 import React, {
   AnchorHTMLAttributes,
+  type ComponentProps,
   HTMLAttributes,
-  SVGProps,
   forwardRef,
   useRef,
 } from "react";
 import { ArrowRightIcon } from "@navikt/aksel-icons";
-import { Slot } from "../../slot/Slot";
-import { cl } from "../className";
-import { composeEventHandlers } from "../composeEventHandlers";
-import { createStrictContext } from "../create-strict-context";
-import { useMergeRefs } from "../hooks/useMergeRefs";
-import { ownerWindow } from "../owner";
-import { AsChildProps } from "../types";
+import {
+  cl,
+  composeEventHandlers,
+  createStrictContext,
+  ownerWindow,
+} from "../../helpers";
+import { useMergeRefs } from "../../hooks";
+import type { AsChildProps } from "../../types";
+import { Slot } from "../slot/Slot";
 
 type LinkAnchorOverlayContextProps = {
   anchorRef: React.RefObject<HTMLAnchorElement | null>;
@@ -127,7 +129,7 @@ const LinkAnchor = forwardRef<HTMLAnchorElement, LinkAnchorProps>(
 );
 
 /* ---------------------------- LinkAnchor Arrow ---------------------------- */
-type LinkAnchorArrowProps = Omit<SVGProps<SVGSVGElement>, "ref">;
+type LinkAnchorArrowProps = Omit<ComponentProps<typeof ArrowRightIcon>, "ref">;
 
 const LinkAnchorArrow = forwardRef<SVGSVGElement, LinkAnchorArrowProps>(
   ({ className, ...restProps }: LinkAnchorArrowProps, forwardedRef) => {