@norges-domstoler/dds-components 0.0.0-dev-20240223144112 → 0.0.0-dev-20240223152935

package/dist/index.d.mts

@@ -752,11 +752,11 @@ declare const isKeyboardEvent: (e: Event | KeyboardEvent$1<Element>) => e is Key
  * }
  * ```
  * @param size antall elementer i gruppen.
- * @param reset om fokus i gruppen skal nullstilles; når man tabber seg inn i gruppen skal focus være nullstilt.
+ * @param active om fokus skal kontrolleres av hooken. Når status blir inaktiv vil fokusrekkefølge nullstilles.
  * @param direction retning elementene blas i.
  * @returns hook par: indeksen til fokuserte elemenentet og funksjonen som håndterer fokus.
  */
-declare function useRoveFocus(size?: number, reset?: boolean, direction?: Direction$1): [number, Dispatch<SetStateAction<number>>];
+declare function useRoveFocus(size?: number, active?: boolean, direction?: Direction$1): [number, Dispatch<SetStateAction<number>>];
 
 declare enum ScreenSize {
     XSmall = 0,

package/dist/index.d.ts

@@ -752,11 +752,11 @@ declare const isKeyboardEvent: (e: Event | KeyboardEvent$1<Element>) => e is Key
  * }
  * ```
  * @param size antall elementer i gruppen.
- * @param reset om fokus i gruppen skal nullstilles; når man tabber seg inn i gruppen skal focus være nullstilt.
+ * @param active om fokus skal kontrolleres av hooken. Når status blir inaktiv vil fokusrekkefølge nullstilles.
  * @param direction retning elementene blas i.
  * @returns hook par: indeksen til fokuserte elemenentet og funksjonen som håndterer fokus.
  */
-declare function useRoveFocus(size?: number, reset?: boolean, direction?: Direction$1): [number, Dispatch<SetStateAction<number>>];
+declare function useRoveFocus(size?: number, active?: boolean, direction?: Direction$1): [number, Dispatch<SetStateAction<number>>];
 
 declare enum ScreenSize {
     XSmall = 0,

package/dist/index.js

@@ -3073,7 +3073,7 @@ function useReturnFocusOnBlur(active, onBlur, triggerElement) {
 // src/hooks/useRoveFocus.tsx
 var import_react10 = require("react");
 var isKeyboardEvent = (e) => e.key !== void 0;
-function useRoveFocus(size2, reset, direction = "column") {
+function useRoveFocus(size2, active, direction = "column") {
   const [currentFocusIndex, setCurrentFocusIndex] = (0, import_react10.useState)(-1);
   const nextKey = direction === "row" ? "ArrowRight" : "ArrowDown";
   const previousKey = direction === "row" ? "ArrowLeft" : "ArrowUp";
@@ -3081,31 +3081,30 @@ function useRoveFocus(size2, reset, direction = "column") {
     (e) => {
       if (!size2 || !isKeyboardEvent(e))
         return;
-      if (reset)
-        setCurrentFocusIndex(-1);
       if (e.key === nextKey) {
         e.preventDefault();
-        setCurrentFocusIndex(
-          currentFocusIndex === size2 - 1 ? 0 : currentFocusIndex + 1
-        );
+        setCurrentFocusIndex((prev) => prev === size2 - 1 ? 0 : prev + 1);
       } else if (e.key === previousKey) {
         e.preventDefault();
-        if (currentFocusIndex !== -1) {
-          setCurrentFocusIndex(
-            currentFocusIndex === 0 ? size2 - 1 : currentFocusIndex - 1
-          );
-        } else
-          setCurrentFocusIndex(size2 - 1);
+        setCurrentFocusIndex((prev) => {
+          if (prev === -1 || prev === 0)
+            return size2 - 1;
+          return prev - 1;
+        });
       }
     },
-    [size2, currentFocusIndex, setCurrentFocusIndex, reset]
+    [size2, setCurrentFocusIndex]
   );
   (0, import_react10.useEffect)(() => {
+    if (!active) {
+      setCurrentFocusIndex(-1);
+      return;
+    }
     document.addEventListener("keydown", handleKeyDown, false);
     return () => {
       document.removeEventListener("keydown", handleKeyDown, false);
     };
-  }, [handleKeyDown]);
+  }, [handleKeyDown, active]);
   return [currentFocusIndex, setCurrentFocusIndex];
 }
 
@@ -4387,18 +4386,7 @@ var IconWrapper = import_styled_components17.default.span`
 var isAnchorProps2 = (props) => props.href !== void 0;
 var isButtonProps = (props) => props.href === void 0 && props.onClick !== void 0;
 var OverflowMenuItem = (0, import_react21.forwardRef)((props, ref) => {
-  const {
-    title: title3,
-    icon: icon12,
-    focus,
-    setFocus,
-    index,
-    id,
-    className,
-    htmlProps = {},
-    ...rest
-  } = props;
-  const { onKeyDown } = htmlProps;
+  const { title: title3, icon: icon12, focus, id, className, htmlProps = {}, ...rest } = props;
   let href;
   let onClick;
   if (isAnchorProps2(props)) {
@@ -4414,23 +4402,8 @@ var OverflowMenuItem = (0, import_react21.forwardRef)((props, ref) => {
       (_a = itemRef.current) == null ? void 0 : _a.focus();
     }
   }, [focus]);
-  const handleSelect = (0, import_react21.useCallback)(() => {
-    if (setFocus && index) {
-      setFocus(index);
-    }
-  }, [index, setFocus]);
-  const handleOnClick = (e) => {
-    handleSelect();
-    onClick && onClick(e);
-  };
-  const handleOnKeyDown = (e) => {
-    handleSelect();
-    onKeyDown && onKeyDown(e);
-  };
   const linkProps = {
     href,
-    onClick: handleOnClick,
-    onKeyDown: handleOnKeyDown,
     role: "menuitem",
     tabIndex: focus ? 0 : -1
   };
@@ -4890,13 +4863,12 @@ var OverflowMenu = (0, import_react25.forwardRef)(
     hasNavItems && interactiveItems.push(...navItems);
     hasContextItems && interactiveItems.push(...items);
     const hasInteractiveItems = interactiveItems.length > 0;
-    const [focus, setFocus] = useRoveFocus(interactiveItems == null ? void 0 : interactiveItems.length, !isOpen);
+    const [focus] = useRoveFocus(interactiveItems == null ? void 0 : interactiveItems.length, isOpen);
     const interactiveItemsList = hasInteractiveItems ? interactiveItems.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime177.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
       OverflowMenuItem,
       {
         index,
         focus: focus === index && isOpen,
-        setFocus,
         icon: hasInteractiveUser && index === 0 ? PersonIcon : void 0,
         ...item,
         onClick: (e) => {
@@ -11618,7 +11590,7 @@ var SearchSuggestions = (0, import_react85.forwardRef)((props, ref) => {
     searchId,
     "suggestions-header"
   );
-  const [focus, setFocus] = useRoveFocus(suggestions == null ? void 0 : suggestions.length, !showSuggestions);
+  const [focus] = useRoveFocus(suggestions == null ? void 0 : suggestions.length, showSuggestions);
   const suggestionsToRender = maxSuggestions ? suggestions == null ? void 0 : suggestions.slice(maxSuggestions) : suggestions;
   const renderedSuggestions = /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(SuggestionsList, { role: "listbox", "aria-labelledby": suggestionsHeaderId, children: suggestionsToRender.map((suggestion, index) => {
     return /* @__PURE__ */ (0, import_jsx_runtime244.jsx)("li", { role: "option", children: /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(
@@ -11626,7 +11598,6 @@ var SearchSuggestions = (0, import_react85.forwardRef)((props, ref) => {
       {
         index,
         focus: focus === index && showSuggestions,
-        setFocus,
         "aria-label": `s\xF8k p\xE5 ${suggestion}`,
         onClick: onSuggestionClick,
         title: suggestion,
@@ -13531,19 +13502,13 @@ var Tab = (0, import_react110.forwardRef)((props, ref) => {
   useSetTabWidth(index, width);
   const itemRef = (0, import_react110.useRef)(null);
   const combinedRef = useCombinedRef(ref, itemRef);
-  const { tabPanelsRef, setHasTabFocus, tabContentDirection } = useTabsContext();
+  const { tabContentDirection } = useTabsContext();
   (0, import_react110.useEffect)(() => {
     var _a;
     if (focus) {
       (_a = itemRef.current) == null ? void 0 : _a.focus();
-      setHasTabFocus(true);
     }
   }, [focus]);
-  useOnKeyDown("Tab", () => {
-    var _a;
-    setHasTabFocus(false);
-    (_a = tabPanelsRef == null ? void 0 : tabPanelsRef.current) == null ? void 0 : _a.focus();
-  });
   const handleSelect = (0, import_react110.useCallback)(() => {
     if (setFocus && index) {
       setFocus(index);
@@ -13617,12 +13582,11 @@ var TabList = (0, import_react111.forwardRef)(
       handleTabChange,
       tabListRef,
       hasTabFocus,
-      tabPanelsRef,
       setHasTabFocus
     } = useTabsContext();
     const uniqueId = id != null ? id : `${tabsId}-tablist`;
     const childrenArray = import_react111.Children.toArray(children).length;
-    const [focus, setFocus] = useRoveFocus(childrenArray, !hasTabFocus, "row");
+    const [focus, setFocus] = useRoveFocus(childrenArray, hasTabFocus, "row");
     const combinedRef = useCombinedRef(ref, tabListRef);
     const tabListChildren = import_react111.Children.map(children, (child, index) => {
       return (0, import_react111.isValidElement)(child) && (0, import_react111.cloneElement)(child, {
@@ -13636,28 +13600,34 @@ var TabList = (0, import_react111.forwardRef)(
       });
     });
     const [widths, setWidths] = (0, import_react111.useState)([]);
-    useOnKeyDown("Tab", () => {
-      var _a;
-      setHasTabFocus(false);
-      (_a = tabPanelsRef == null ? void 0 : tabPanelsRef.current) == null ? void 0 : _a.focus();
-    });
-    useOnClickOutside((tabListRef == null ? void 0 : tabListRef.current) || null, () => {
-      setHasTabFocus(false);
-    });
     const handleOnFocus = (event) => {
       setHasTabFocus(true);
       onFocus && onFocus(event);
     };
-    const tabListProps = {
-      ...rest,
-      ref: combinedRef,
-      role: "tablist",
-      "aria-label": "Bruk venste og h\xF8yre piltast for \xE5 bla",
-      id: uniqueId,
-      tabIndex: 0,
-      onFocus: handleOnFocus
+    const handleOnBlur = (event) => {
+      var _a;
+      if ((tabListRef == null ? void 0 : tabListRef.current) === event.relatedTarget) {
+        setFocus(-1);
+      }
+      if (!((_a = tabListRef == null ? void 0 : tabListRef.current) == null ? void 0 : _a.contains(event.relatedTarget))) {
+        setHasTabFocus(false);
+      }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime266.jsx)(TabWidthContextProvider, { onChangeWidths: setWidths, children: /* @__PURE__ */ (0, import_jsx_runtime266.jsx)(TabRow, { ...tabListProps, $gridTemplateColumns: widths.join(" "), children: tabListChildren }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime266.jsx)(TabWidthContextProvider, { onChangeWidths: setWidths, children: /* @__PURE__ */ (0, import_jsx_runtime266.jsx)(
+      TabRow,
+      {
+        ...rest,
+        ref: combinedRef,
+        role: "tablist",
+        "aria-label": "Bruk venste og h\xF8yre piltast for \xE5 bla",
+        id: uniqueId,
+        tabIndex: 0,
+        onFocus: handleOnFocus,
+        onBlur: handleOnBlur,
+        $gridTemplateColumns: widths.join(" "),
+        children: tabListChildren
+      }
+    ) });
   }
 );
 TabList.displayName = "TabList";