@navikt/ds-react 8.0.0 → 8.1.0

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 { useRenameCSS } from "../../theme/Theme";
-import { OverridableComponent, useId } from "../../util";
-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";
 
 /* -------------------------------------------------------------------------- */
@@ -371,7 +372,6 @@ export const ActionMenuContent = forwardRef<
     ref,
   ) => {
     const context = useActionMenuContext();
-    const { cn } = useRenameCSS();
 
     return (
       <Menu.Portal rootElement={context.rootElement}>
@@ -379,7 +379,7 @@ export const ActionMenuContent = forwardRef<
           ref={ref}
           id={context.contentId}
           aria-labelledby={context.triggerId}
-          className={cn("navds-action-menu__content", className)}
+          className={cl("aksel-action-menu__content", className)}
           {...rest}
           align={align}
           sideOffset={4}
@@ -398,9 +398,7 @@ export const ActionMenuContent = forwardRef<
             },
           }}
         >
-          <div className={cn("navds-action-menu__content-inner")}>
-            {children}
-          </div>
+          <div className="aksel-action-menu__content-inner">{children}</div>
         </Menu.Content>
       </Menu.Portal>
     );
@@ -416,12 +414,11 @@ interface ActionMenuLabelProps extends React.HTMLAttributes<HTMLDivElement> {
 
 export const ActionMenuLabel = forwardRef<HTMLDivElement, ActionMenuLabelProps>(
   ({ children, className, ...rest }: ActionMenuLabelProps, ref) => {
-    const { cn } = useRenameCSS();
     return (
       <div
         ref={ref}
         {...rest}
-        className={cn("navds-action-menu__label", className)}
+        className={cl("aksel-action-menu__label", className)}
       >
         {children}
       </div>
@@ -465,13 +462,12 @@ export const ActionMenuGroup = forwardRef<
   ActionMenuGroupProps
 >(({ children, className, label, ...rest }: ActionMenuGroupProps, ref) => {
   const labelId = useId();
-  const { cn } = useRenameCSS();
 
   return (
     <Menu.Group
       ref={ref}
       {...rest}
-      className={cn("navds-action-menu__group", className)}
+      className={cl("aksel-action-menu__group", className)}
       asChild={false}
       aria-labelledby={label ? labelId : undefined}
     >
@@ -495,15 +491,13 @@ type MarkerProps = {
 };
 
 const Marker = ({ children, className, placement }: MarkerProps) => {
-  const { cn } = useRenameCSS();
-
   return (
     <div
       aria-hidden
-      className={cn(
+      className={cl(
         className,
-        "navds-action-menu__marker",
-        `navds-action-menu__marker--${placement}`,
+        "aksel-action-menu__marker",
+        `aksel-action-menu__marker--${placement}`,
       )}
     >
       {children}
@@ -516,7 +510,6 @@ type ShortcutProps = {
 };
 
 const Shortcut = ({ children }: ShortcutProps) => {
-  const { cn } = useRenameCSS();
   /**
    * Assumes the user will input either a single keyboard key
    * or keys separated by "+"
@@ -526,7 +519,7 @@ const Shortcut = ({ children }: ShortcutProps) => {
   return (
     <Marker placement="right">
       {parsed.map((char, index) => (
-        <span key={char + index} className={cn("navds-action-menu__shortcut")}>
+        <span key={char + index} className="aksel-action-menu__shortcut">
           {char}
         </span>
       ))}
@@ -572,14 +565,12 @@ export const ActionMenuItem: OverridableComponent<
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
-
     return (
       <Menu.Item
         {...rest}
-        className={cn("navds-action-menu__item", className, {
-          "navds-action-menu__item--danger": variant === "danger",
-          "navds-action-menu__item--has-icon": icon,
+        className={cl("aksel-action-menu__item", className, {
+          "aksel-action-menu__item--danger": variant === "danger",
+          "aksel-action-menu__item--has-icon": icon,
         })}
         aria-keyshortcuts={shortcut ?? undefined}
         asChild
@@ -587,10 +578,7 @@ export const ActionMenuItem: OverridableComponent<
         <Component ref={ref}>
           {children}
           {icon && (
-            <Marker
-              placement="left"
-              className={cn("navds-action-menu__marker-icon")}
-            >
+            <Marker placement="left" className="aksel-action-menu__marker-icon">
               {icon}
             </Marker>
           )}
@@ -633,8 +621,6 @@ export const ActionMenuCheckboxItem = forwardRef<
     }: ActionMenuCheckboxItemProps,
     ref,
   ) => {
-    const { cn } = useRenameCSS();
-
     return (
       <Menu.CheckboxItem
         ref={ref}
@@ -646,25 +632,25 @@ export const ActionMenuCheckboxItem = forwardRef<
           event.preventDefault();
         })}
         asChild={false}
-        className={cn(
-          "navds-action-menu__item navds-action-menu__item--has-icon",
+        className={cl(
+          "aksel-action-menu__item aksel-action-menu__item--has-icon",
           className,
         )}
         aria-keyshortcuts={shortcut}
       >
         {children}
         <Marker placement="left">
-          <Menu.ItemIndicator className={cn("navds-action-menu__indicator")}>
+          <Menu.ItemIndicator className="aksel-action-menu__indicator">
             <svg
               width="1em"
               height="1em"
               viewBox="0 0 24 24"
               fill="none"
               xmlns="http://www.w3.org/2000/svg"
-              className={cn("navds-action-menu__indicator-icon")}
+              className="aksel-action-menu__indicator-icon"
               aria-hidden
             >
-              <g className={cn("navds-action-menu__indicator-icon--unchecked")}>
+              <g className="aksel-action-menu__indicator-icon--unchecked">
                 <rect
                   width="24"
                   height="24"
@@ -681,11 +667,7 @@ export const ActionMenuCheckboxItem = forwardRef<
                   strokeWidth="2"
                 />
               </g>
-              <g
-                className={cn(
-                  "navds-action-menu__indicator-icon--indeterminate",
-                )}
-              >
+              <g className="aksel-action-menu__indicator-icon--indeterminate">
                 <rect
                   width="24"
                   height="24"
@@ -701,7 +683,7 @@ export const ActionMenuCheckboxItem = forwardRef<
                   fill="var(--ax-bg-default)"
                 />
               </g>
-              <g className={cn("navds-action-menu__indicator-icon--checked")}>
+              <g className="aksel-action-menu__indicator-icon--checked">
                 <rect
                   width="24"
                   height="24"
@@ -775,8 +757,6 @@ export const ActionMenuRadioItem = forwardRef<
     { children, className, onSelect, ...rest }: ActionMenuRadioItemProps,
     ref,
   ) => {
-    const { cn } = useRenameCSS();
-
     return (
       <Menu.RadioItem
         ref={ref}
@@ -788,24 +768,24 @@ export const ActionMenuRadioItem = forwardRef<
           event.preventDefault();
         })}
         asChild={false}
-        className={cn(
-          "navds-action-menu__item navds-action-menu__item--has-icon",
+        className={cl(
+          "aksel-action-menu__item aksel-action-menu__item--has-icon",
           className,
         )}
       >
         {children}
         <Marker placement="left">
-          <Menu.ItemIndicator className={cn("navds-action-menu__indicator")}>
+          <Menu.ItemIndicator className="aksel-action-menu__indicator">
             <svg
               width="1em"
               height="1em"
               viewBox="0 0 24 24"
               fill="none"
               xmlns="http://www.w3.org/2000/svg"
-              className={cn("navds-action-menu__indicator-icon")}
+              className="aksel-action-menu__indicator-icon"
               aria-hidden
             >
-              <g className={cn("navds-action-menu__indicator-icon--unchecked")}>
+              <g className="aksel-action-menu__indicator-icon--unchecked">
                 <rect
                   width="24"
                   height="24"
@@ -822,7 +802,7 @@ export const ActionMenuRadioItem = forwardRef<
                   fill="var(--ax-bg-default)"
                 />
               </g>
-              <g className={cn("navds-action-menu__indicator-icon--checked")}>
+              <g className="aksel-action-menu__indicator-icon--checked">
                 <rect
                   width="24"
                   height="24"
@@ -857,14 +837,12 @@ export const ActionMenuDivider = forwardRef<
   ActionMenuDividerElement,
   ActionMenuDividerProps
 >(({ className, ...rest }: ActionMenuDividerProps, ref) => {
-  const { cn } = useRenameCSS();
-
   return (
     <Menu.Divider
       ref={ref}
       asChild={false}
       {...rest}
-      className={cn("navds-action-menu__divider", className)}
+      className={cl("aksel-action-menu__divider", className)}
     />
   );
 });
@@ -916,32 +894,24 @@ export const ActionMenuSubTrigger = forwardRef<
   ActionMenuSubTriggerElement,
   ActionMenuSubTriggerProps
 >(({ children, className, icon, ...rest }: ActionMenuSubTriggerProps, ref) => {
-  const { cn } = useRenameCSS();
-
   return (
     <Menu.SubTrigger
       ref={ref}
       {...rest}
       asChild={false}
-      className={cn(
-        "navds-action-menu__item navds-action-menu__sub-trigger",
+      className={cl(
+        "aksel-action-menu__item aksel-action-menu__sub-trigger",
         className,
-        { "navds-action-menu__item--has-icon": icon },
+        { "aksel-action-menu__item--has-icon": icon },
       )}
     >
       {children}
       {icon && (
-        <Marker
-          placement="left"
-          className={cn("navds-action-menu__marker-icon")}
-        >
+        <Marker placement="left" className="aksel-action-menu__marker-icon">
           {icon}
         </Marker>
       )}
-      <Marker
-        placement="right"
-        className={cn("navds-action-menu__marker-icon")}
-      >
+      <Marker placement="right" className="aksel-action-menu__marker-icon">
         <ChevronRightIcon aria-hidden />
       </Marker>
     </Menu.SubTrigger>
@@ -962,7 +932,6 @@ export const ActionMenuSubContent = forwardRef<
   ActionMenuSubContentElement,
   ActionMenuSubContentProps
 >(({ children, className, ...rest }: ActionMenuSubContentProps, ref) => {
-  const { cn } = useRenameCSS();
   const context = useActionMenuContext();
 
   return (
@@ -973,12 +942,12 @@ export const ActionMenuSubContent = forwardRef<
         sideOffset={1}
         collisionPadding={10}
         {...rest}
-        className={cn(
-          "navds-action-menu__content navds-action-menu__sub-content",
+        className={cl(
+          "aksel-action-menu__content aksel-action-menu__sub-content",
           className,
         )}
       >
-        <div className={cn("navds-action-menu__content-inner")}>{children}</div>
+        <div className="aksel-action-menu__content-inner">{children}</div>
       </Menu.SubContent>
     </Menu.Portal>
   );

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;