@navikt/ds-react 8.0.1 → 8.2.0

package/src/loader/Loader.tsx

@@ -1,9 +1,8 @@
 import React, { SVGProps, forwardRef } from "react";
 import { AkselColor } from "../types";
-import { omit } from "../util";
-import { cl } from "../util/className";
-import { useId } from "../util/hooks";
-import { useI18n } from "../util/i18n/i18n.hooks";
+import { omit, useId } from "../utils-external";
+import { cl } from "../utils/helpers";
+import { useI18n } from "../utils/i18n/i18n.hooks";
 
 export interface LoaderProps extends Omit<SVGProps<SVGSVGElement>, "ref"> {
   /**

package/src/modal/Modal.context.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { createStrictContext } from "../util/create-strict-context";
+import { createStrictContext } from "../utils/helpers";
 
 interface ModalContextProps {
   closeHandler?: React.MouseEventHandler<HTMLButtonElement>;

package/src/modal/Modal.tsx

@@ -4,11 +4,9 @@ import { createPortal } from "react-dom";
 import { useDateInputContext } from "../date/Date.Input";
 import { useProvider } from "../provider/Provider";
 import { Detail, Heading } from "../typography";
-import { cl } from "../util/className";
-import { composeEventHandlers } from "../util/composeEventHandlers";
-import { useId } from "../util/hooks";
-import { useMergeRefs } from "../util/hooks/useMergeRefs";
-import { useScrollLock } from "../util/hooks/useScrollLock";
+import { useId } from "../utils-external";
+import { cl, composeEventHandlers } from "../utils/helpers";
+import { useMergeRefs, useScrollLock } from "../utils/hooks";
 import { ModalContextProvider, useModalContext } from "./Modal.context";
 import ModalBody from "./ModalBody";
 import ModalFooter from "./ModalFooter";

package/src/modal/ModalBody.tsx

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

package/src/modal/ModalFooter.tsx

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

package/src/modal/ModalHeader.tsx

@@ -1,8 +1,8 @@
 import React, { forwardRef } from "react";
 import { XMarkIcon } from "@navikt/aksel-icons";
 import { Button } from "../button";
-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 { useModalContext } from "./Modal.context";
 
 export interface ModalHeaderProps extends React.HTMLAttributes<HTMLDivElement> {

package/src/overlays/action-menu/ActionMenu.tsx

@@ -1,14 +1,15 @@
 import React, { forwardRef, useRef } from "react";
 import { ChevronRightIcon } from "@navikt/aksel-icons";
 import { useModalContext } from "../../modal/Modal.context";
-import { Slot } from "../../slot/Slot";
-import { OverridableComponent, useId } from "../../util";
-import { cl } from "../../util/className";
-import { composeEventHandlers } from "../../util/composeEventHandlers";
-import { createStrictContext } from "../../util/create-strict-context";
-import { useMergeRefs } from "../../util/hooks";
-import { useControllableState } from "../../util/hooks/useControllableState";
-import { requireReactElement } from "../../util/requireReactElement";
+import { type OverridableComponent, useId } from "../../utils-external";
+import { Slot } from "../../utils/components/slot/Slot";
+import {
+  cl,
+  composeEventHandlers,
+  createStrictContext,
+  requireReactElement,
+} from "../../utils/helpers";
+import { useControllableState, useMergeRefs } from "../../utils/hooks";
 import { Menu, MenuPortalProps } from "../floating-menu/Menu";
 
 /* -------------------------------------------------------------------------- */
@@ -543,9 +544,14 @@ interface ActionMenuItemProps extends Omit<MenuItemProps, "asChild"> {
    */
   variant?: "danger";
   /**
-   * Adds an icon on the left side. The icon will always have aria-hidden.
+   * Adds an icon on the left side. For right side position use iconPosition. The icon will always have aria-hidden.
    */
   icon?: React.ReactNode;
+  /**
+   * Position of icon.
+   * @default "left"
+   */
+  iconPosition?: "left" | "right";
 }
 
 export const ActionMenuItem: OverridableComponent<
@@ -560,6 +566,7 @@ export const ActionMenuItem: OverridableComponent<
       icon,
       shortcut,
       variant,
+      iconPosition = "left",
       ...rest
     },
     ref,
@@ -569,15 +576,18 @@ export const ActionMenuItem: OverridableComponent<
         {...rest}
         className={cl("aksel-action-menu__item", className, {
           "aksel-action-menu__item--danger": variant === "danger",
-          "aksel-action-menu__item--has-icon": icon,
         })}
+        data-marker={icon ? iconPosition : undefined}
         aria-keyshortcuts={shortcut ?? undefined}
         asChild
       >
         <Component ref={ref}>
           {children}
           {icon && (
-            <Marker placement="left" className="aksel-action-menu__marker-icon">
+            <Marker
+              placement={iconPosition}
+              className="aksel-action-menu__marker-icon"
+            >
               {icon}
             </Marker>
           )}
@@ -631,10 +641,8 @@ export const ActionMenuCheckboxItem = forwardRef<
           event.preventDefault();
         })}
         asChild={false}
-        className={cl(
-          "aksel-action-menu__item aksel-action-menu__item--has-icon",
-          className,
-        )}
+        className={cl("aksel-action-menu__item", className)}
+        data-marker="left"
         aria-keyshortcuts={shortcut}
       >
         {children}
@@ -767,10 +775,8 @@ export const ActionMenuRadioItem = forwardRef<
           event.preventDefault();
         })}
         asChild={false}
-        className={cl(
-          "aksel-action-menu__item aksel-action-menu__item--has-icon",
-          className,
-        )}
+        className={cl("aksel-action-menu__item", className)}
+        data-marker="left"
       >
         {children}
         <Marker placement="left">
@@ -887,35 +893,54 @@ type MenuSubTriggerProps = React.ComponentPropsWithoutRef<
 interface ActionMenuSubTriggerProps
   extends Omit<MenuSubTriggerProps, "asChild"> {
   icon?: React.ReactNode;
+  /**
+   * Position of icon.
+   * @default "left"
+   */
+  iconPosition?: "left" | "right";
 }
 
 export const ActionMenuSubTrigger = forwardRef<
   ActionMenuSubTriggerElement,
   ActionMenuSubTriggerProps
->(({ children, className, icon, ...rest }: ActionMenuSubTriggerProps, ref) => {
-  return (
-    <Menu.SubTrigger
-      ref={ref}
-      {...rest}
-      asChild={false}
-      className={cl(
-        "aksel-action-menu__item aksel-action-menu__sub-trigger",
-        className,
-        { "aksel-action-menu__item--has-icon": icon },
-      )}
-    >
-      {children}
-      {icon && (
-        <Marker placement="left" className="aksel-action-menu__marker-icon">
-          {icon}
+>(
+  (
+    {
+      children,
+      className,
+      icon,
+      iconPosition = "left",
+      ...rest
+    }: ActionMenuSubTriggerProps,
+    ref,
+  ) => {
+    return (
+      <Menu.SubTrigger
+        ref={ref}
+        {...rest}
+        asChild={false}
+        className={cl(
+          "aksel-action-menu__item aksel-action-menu__sub-trigger",
+          className,
+        )}
+        data-marker={icon ? iconPosition : undefined}
+      >
+        {children}
+        {icon && (
+          <Marker
+            placement={iconPosition}
+            className="aksel-action-menu__marker-icon"
+          >
+            {icon}
+          </Marker>
+        )}
+        <Marker placement="right" className="aksel-action-menu__marker-icon">
+          <ChevronRightIcon aria-hidden />
         </Marker>
-      )}
-      <Marker placement="right" className="aksel-action-menu__marker-icon">
-        <ChevronRightIcon aria-hidden />
-      </Marker>
-    </Menu.SubTrigger>
-  );
-});
+      </Menu.SubTrigger>
+    );
+  },
+);
 
 /* -------------------------------------------------------------------------- */
 /*                            ActionMenuSubContent                            */

package/src/overlays/dismissablelayer/DismissableLayer.tsx

@@ -5,11 +5,10 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { Slot } from "../../slot/Slot";
-import { composeEventHandlers } from "../../util/composeEventHandlers";
-import { useMergeRefs } from "../../util/hooks";
-import { ownerDocument } from "../../util/owner";
-import { AsChild } from "../../util/types/AsChild";
+import { Slot } from "../../utils/components/slot/Slot";
+import { composeEventHandlers, ownerDocument } from "../../utils/helpers";
+import { useMergeRefs, useTimeout } from "../../utils/hooks";
+import type { AsChild } from "../../utils/types/AsChild";
 import {
   CustomFocusEvent,
   CustomPointerEvent,
@@ -120,6 +119,8 @@ const DismissableLayer = forwardRef<HTMLDivElement, DismissableLayerProps>(
     const context = useContext(DismissableLayerContext);
 
     const triggerPointerDownRef = useRef<boolean>(false);
+    const dismissedWithPointerRef = useRef<boolean>(false);
+    const timeout = useTimeout();
 
     const [, forceRerender] = useState({});
     const [node, setNode] = React.useState<DismissableLayerElement | null>(
@@ -184,6 +185,15 @@ const DismissableLayer = forwardRef<HTMLDivElement, DismissableLayerProps>(
         if (!shouldEnablePointerEvents) {
           return;
         }
+        dismissedWithPointerRef.current = true;
+
+        /**
+         * We reset dismissedWithPointerRef on the next tick.
+         * This allows pointerDown to run its effect, without re-running them here right after.
+         */
+        timeout.start(0, () => {
+          dismissedWithPointerRef.current = false;
+        });
 
         /**
          * We call these before letting `handleOutsideEvent` do its checks to give consumer a chance to preventDefault.
@@ -235,6 +245,9 @@ const DismissableLayer = forwardRef<HTMLDivElement, DismissableLayerProps>(
 
     const focusOutside = useFocusOutside(
       (event) => {
+        if (dismissedWithPointerRef.current) {
+          return;
+        }
         /**
          * We call these before letting `handleOutsideEvent` do its checks to give consumer a chance to preventDefault.
          */

package/src/overlays/dismissablelayer/util/dispatchCustomEvent.ts

@@ -1,53 +1,15 @@
-import ReactDOM from "react-dom";
-
 type CustomFocusEvent = CustomEvent<{ originalEvent: FocusEvent }>;
 type CustomPointerEvent = CustomEvent<{
   originalEvent: PointerEvent;
 }>;
 
-export type { CustomFocusEvent, CustomPointerEvent };
-
-export const CUSTOM_EVENTS = {
+const CUSTOM_EVENTS = {
   FOCUS_OUTSIDE: "AKSEL_FOCUS_OUTSIDE",
   POINTER_DOWN_OUTSIDE: "AKSEL_POINTER_DOWN_OUTSIDE",
   POINTER_UP_OUTSIDE: "AKSEL_POINTER_UP_OUTSIDE",
 };
 
-/**
- * Use of `discrete` flushes custom event dispatch. This is to mimic the behavior React has for `discrete` events.
- * https://github.com/facebook/react/blob/a8a4742f1c54493df00da648a3f9d26e3db9c8b5/packages/react-dom/src/events/ReactDOMEventListener.js#L318
- *
- * React batches *all* event handlers since version 18, this introduces certain considerations when using custom event types.
- *
- * Internally, React prioritises events in the following order:
- *  - discrete
- *  - continuous
- *  - default
- *
- * `discrete` is an  important distinction as updates within these events are applied immediately.
- * React however, is not able to infer the priority of custom event types due to how they are detected internally.
- * Because of this, it's possible for updates from custom events to be unexpectedly batched when
- * dispatched by another `discrete` event.
- *
- * In order to ensure that updates from custom events are applied predictably, we need to manually flush the batch.
- * This utility should be used when dispatching a custom event from within another `discrete` event, this utility
- * is not nessesary when dispatching known event types, or if dispatching a custom type inside a non-discrete event.
- * For example:
- *
- * dispatching a known click 👎
- * target.dispatchEvent(new Event(‘click’))
- *
- * dispatching a custom type within a non-discrete event 👎
- * onScroll={(event) => event.target.dispatchEvent(new CustomEvent(‘customType’))}
- *
- * dispatching a custom type within a `discrete` event 👍
- * onPointerDown={(event) => dispatchDiscreteCustomEvent(event.target, new CustomEvent(‘customType’))}
- *
- * Note: though React classifies `focus`, `focusin` and `focusout` events as `discrete`, it's  not recommended to use
- * this utility with them. This is because it's possible for those handlers to be called implicitly during render
- * e.g. when focus is within a component as it is unmounted, or when managing focus on mount.
- */
-export function dispatchCustomEvent<
+function dispatchCustomEvent<
   E extends CustomEvent,
   OriginalEvent extends Event,
 >(
@@ -56,7 +18,6 @@ export function dispatchCustomEvent<
   detail: { originalEvent: OriginalEvent } & (E extends CustomEvent<infer D>
     ? D
     : never),
-  { discrete }: { discrete: boolean } = { discrete: false },
 ) {
   if (!handler) {
     return;
@@ -69,10 +30,8 @@ export function dispatchCustomEvent<
   });
 
   target.addEventListener(name, handler as EventListener, { once: true });
-
-  if (discrete && target) {
-    ReactDOM.flushSync(() => target.dispatchEvent(event));
-  } else {
-    target.dispatchEvent(event);
-  }
+  target.dispatchEvent(event);
 }
+
+export { CUSTOM_EVENTS, dispatchCustomEvent };
+export type { CustomFocusEvent, CustomPointerEvent };

package/src/overlays/dismissablelayer/util/useEscapeKeydown.ts

@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { useEventCallback } from "../../../util/hooks/useEventCallback";
+import { useEventCallback } from "../../../utils/hooks";
 
 export function useEscapeKeydown(
   callback?: (event: KeyboardEvent) => void,

package/src/overlays/dismissablelayer/util/useFocusOutside.ts

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from "react";
-import { useEventCallback } from "../../../util/hooks/useEventCallback";
+import { useEventCallback } from "../../../utils/hooks";
 import {
   CUSTOM_EVENTS,
   CustomFocusEvent,

package/src/overlays/dismissablelayer/util/usePointerDownOutside.ts

@@ -1,6 +1,5 @@
 import { useEffect, useRef } from "react";
-import { useEventCallback } from "../../../util/hooks/useEventCallback";
-import { useTimeout } from "../../../util/hooks/useTimeout";
+import { useEventCallback, useTimeout } from "../../../utils/hooks";
 import {
   CUSTOM_EVENTS,
   CustomPointerEvent,
@@ -36,16 +35,12 @@ export function usePointerDownOutside(
        * Altrough `pointerdown` is already a cancelable event,
        * to to make sure the batching of events works corretly with `focusIn` in `useFocusOutside`,
        * we still use a custom event like in `useFocusOutside`.
-       *
-       * Since pointer-events are `discrete` events in React: https://github.com/facebook/react/blob/a8a4742f1c54493df00da648a3f9d26e3db9c8b5/packages/react-dom/src/events/ReactDOMEventListener.js#L318
-       * we need to to use flushSync to ensure that the event is dispatched before the next event is raised.
        */
       function dispatchPointerEvent() {
         dispatchCustomEvent(
           CUSTOM_EVENTS.POINTER_DOWN_OUTSIDE,
           handlePointerDownOutside,
           { originalEvent: event },
-          { discrete: true },
         );
       }
 

package/src/overlays/dismissablelayer/util/usePointerUpOutside.ts

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from "react";
-import { useEventCallback } from "../../../util/hooks/useEventCallback";
+import { useEventCallback } from "../../../utils/hooks";
 import {
   CUSTOM_EVENTS,
   CustomPointerEvent,
@@ -31,17 +31,14 @@ export function usePointerUpOutside(
        * The `DismisableLayer`-API is based on the ability to stop events from propagating and in the end calling `onDismiss`
        * if `usePointerUpOutside`-callback does not run `event.preventDefault()`.
        *
-       * Although `pointerup` is already a cancelable event, we still dispatch a custom event (discrete)
+       * Although `pointerup` is already a cancelable event, we still dispatch a custom event
        * to keep parity with focus outside handling and ensure ordering.
-       *
-       * Since pointer events are `discrete` in React we rely on the same custom dispatch strategy.
        */
       if (event.target && !isPointerInsideReactTreeRef.current) {
         dispatchCustomEvent(
           CUSTOM_EVENTS.POINTER_UP_OUTSIDE,
           handlePointerUpOutside,
           { originalEvent: event },
-          { discrete: true },
         );
       }
       /* Reset for next interaction. */

package/src/overlays/floating/Floating.tsx

@@ -19,12 +19,15 @@ import React, {
   useState,
 } from "react";
 import { useModalContext } from "../../modal/Modal.context";
-import { Slot } from "../../slot/Slot";
-import { createStrictContext } from "../../util/create-strict-context";
-import { useClientLayoutEffect, useMergeRefs } from "../../util/hooks";
-import { useEventCallback } from "../../util/hooks/useEventCallback";
-import { useOpenChangeAnimationComplete } from "../../util/hooks/useOpenChangeAnimationComplete";
-import { AsChildProps } from "../../util/types";
+import { useClientLayoutEffect } from "../../utils-external";
+import { Slot } from "../../utils/components/slot/Slot";
+import { createStrictContext } from "../../utils/helpers";
+import {
+  useEventCallback,
+  useMergeRefs,
+  useOpenChangeAnimationComplete,
+} from "../../utils/hooks";
+import type { AsChildProps } from "../../utils/types";
 import {
   type Align,
   type Measurable,

package/src/overlays/floating-menu/Menu.tsx

@@ -1,12 +1,14 @@
 import React, { forwardRef, useEffect, useRef, useState } from "react";
 import ReactDOM from "react-dom";
 import { Portal } from "../../portal";
-import { composeEventHandlers } from "../../util/composeEventHandlers";
-import { createStrictContext } from "../../util/create-strict-context";
-import { FocusBoundary } from "../../util/focus-boundary/FocusBoundary";
-import { useId, useMergeRefs } from "../../util/hooks";
-import { createDescendantContext } from "../../util/hooks/descendants/useDescendant";
-import { useEventCallback } from "../../util/hooks/useEventCallback";
+import { useId } from "../../utils-external";
+import { FocusBoundary } from "../../utils/components/focus-boundary/FocusBoundary";
+import { composeEventHandlers, createStrictContext } from "../../utils/helpers";
+import {
+  createDescendantContext,
+  useEventCallback,
+  useMergeRefs,
+} from "../../utils/hooks";
 import { DismissableLayer } from "../dismissablelayer/DismissableLayer";
 import { Floating } from "../floating/Floating";
 import { RovingFocus, RovingFocusProps } from "./parts/RovingFocus";
@@ -286,7 +288,6 @@ const MenuContentInternal = forwardRef<
     const descendants = useMenuDescendantsContext();
 
     const context = useMenuContext();
-    const rootContext = useMenuRootContext();
 
     const contentRef = useRef<HTMLDivElement>(null);
     const composedRefs = useMergeRefs(
@@ -317,10 +318,7 @@ const MenuContentInternal = forwardRef<
             asChild
             descendants={descendants}
             onEntryFocus={composeEventHandlers(onEntryFocus, (event) => {
-              // only focus first item when using keyboard
-              if (!rootContext.isUsingKeyboardRef.current) {
-                event.preventDefault();
-              }
+              event.preventDefault();
             })}
           >
             <Floating.Content

package/src/overlays/floating-menu/parts/RovingFocus.tsx

@@ -1,10 +1,8 @@
 import React, { forwardRef, useCallback, useEffect, useRef } from "react";
-import { Slot } from "../../../slot/Slot";
-import { composeEventHandlers } from "../../../util/composeEventHandlers";
-import { useMergeRefs } from "../../../util/hooks";
-import { DescendantsManager } from "../../../util/hooks/descendants/descendant";
-import { useEventCallback } from "../../../util/hooks/useEventCallback";
-import { ownerDocument } from "../../../util/owner";
+import { Slot } from "../../../utils/components/slot/Slot";
+import { composeEventHandlers, ownerDocument } from "../../../utils/helpers";
+import type { DescendantsManager } from "../../../utils/hooks";
+import { useEventCallback, useMergeRefs } from "../../../utils/hooks";
 
 interface RovingFocusProps
   extends Omit<React.HTMLAttributes<HTMLDivElement>, "tabIndex"> {

package/src/overlays/floating-menu/parts/SlottedDivElement.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { Slot } from "../../../slot/Slot";
+import { Slot } from "../../../utils/components/slot/Slot";
 
 interface SlottedDivProps extends React.HTMLAttributes<HTMLDivElement> {
   asChild?: boolean;

package/src/pagination/Pagination.tsx

@@ -3,9 +3,9 @@ import { ChevronLeftIcon, ChevronRightIcon } from "@navikt/aksel-icons";
 import type { AkselStatusColorRole } from "@navikt/ds-tokens/types";
 import { AkselColor } from "../types";
 import { BodyShort, Heading } from "../typography";
-import { useId } from "../util";
-import { cl } from "../util/className";
-import { useI18n } from "../util/i18n/i18n.hooks";
+import { useId } from "../utils-external";
+import { cl } from "../utils/helpers";
+import { useI18n } from "../utils/i18n/i18n.hooks";
 import PaginationItem, {
   PaginationItemProps,
   PaginationItemType,

package/src/pagination/PaginationItem.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from "react";
 import { Button, ButtonProps } from "../button";
-import { cl } from "../util/className";
-import { OverridableComponent } from "../util/types";
+import type { OverridableComponent } from "../utils-external";
+import { cl } from "../utils/helpers";
 
 export interface PaginationItemProps extends ButtonProps {
   children: React.ReactNode;

package/src/panel/Panel.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";
 
 /**
  * @deprecated Use Box with padding and border instead

package/src/popover/Popover.tsx

@@ -11,10 +11,9 @@ import {
 import React, { HTMLAttributes, forwardRef } from "react";
 import { useModalContext } from "../modal/Modal.context";
 import { DismissableLayer } from "../overlays/dismissablelayer/DismissableLayer";
-import { omit } from "../util";
-import { cl } from "../util/className";
-import { useClientLayoutEffect } from "../util/hooks";
-import { useMergeRefs } from "../util/hooks/useMergeRefs";
+import { omit, useClientLayoutEffect } from "../utils-external";
+import { cl } from "../utils/helpers";
+import { useMergeRefs } from "../utils/hooks";
 import PopoverContent, { PopoverContentType } from "./PopoverContent";
 
 export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {

package/src/popover/PopoverContent.tsx

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

package/src/portal/Portal.tsx

@@ -7,7 +7,8 @@ import React, {
 import ReactDOM from "react-dom";
 import { useProvider } from "../provider/Provider";
 import { Theme, useThemeInternal } from "../theme/Theme";
-import { useClientLayoutEffect, useMergeRefs } from "../util/hooks";
+import { useClientLayoutEffect } from "../utils-external";
+import { useMergeRefs } from "../utils/hooks";
 
 export interface PortalProps extends HTMLAttributes<HTMLDivElement> {
   /**

package/src/process/Process.tsx

@@ -6,11 +6,10 @@ import React, {
   useState,
 } from "react";
 import { BodyLong, BodyShort, Heading } from "../typography";
-import { useId } from "../util";
-import { cl } from "../util/className";
-import { createStrictContext } from "../util/create-strict-context";
-import { useMergeRefs } from "../util/hooks";
-import { useI18n } from "../util/i18n/i18n.hooks";
+import { useId } from "../utils-external";
+import { cl, createStrictContext } from "../utils/helpers";
+import { useMergeRefs } from "../utils/hooks";
+import { useI18n } from "../utils/i18n/i18n.hooks";
 
 interface ProcessProps extends React.HTMLAttributes<HTMLOListElement> {
   /**

package/src/progress-bar/ProgressBar.tsx

@@ -1,9 +1,8 @@
 import React, { HTMLAttributes, forwardRef, useEffect } from "react";
 import type { AkselColor } from "../types";
-import { cl } from "../util/className";
-import { useTimeout } from "../util/hooks/useTimeout";
-import { useValueAsRef } from "../util/hooks/useValueAsRef";
-import { useI18n } from "../util/i18n/i18n.hooks";
+import { cl } from "../utils/helpers";
+import { useTimeout, useValueAsRef } from "../utils/hooks";
+import { useI18n } from "../utils/i18n/i18n.hooks";
 
 interface ProgressBarPropsBase
   extends Omit<HTMLAttributes<HTMLDivElement>, "role"> {

package/src/provider/Provider.tsx

@@ -1,6 +1,6 @@
 import React, { createContext, useContext } from "react";
-import { PartialTranslations, Translations } from "../util/i18n/i18n.types";
-import nb from "../util/i18n/locales/nb";
+import { PartialTranslations, Translations } from "../utils/i18n/i18n.types";
+import nb from "../utils/i18n/locales/nb";
 
 type ProviderContextType = {
   rootElement?: HTMLElement;