@norges-domstoler/dds-components 0.0.0-dev-20240223113502 → 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,
@@ -1973,6 +1973,8 @@ type FileUploaderProps = {
     onChange: (newFiles: FileList) => void;
     /**Bredde for filopplasteren. */
     width?: Property.Width<string>;
+    /**Om drag-and-drop zone skal vises. */
+    withDragAndDrop?: boolean;
 } & Partial<FileUploaderHookProps>;
 declare const FileUploader: {
     (props: FileUploaderProps): react_jsx_runtime.JSX.Element;

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,
@@ -1973,6 +1973,8 @@ type FileUploaderProps = {
     onChange: (newFiles: FileList) => void;
     /**Bredde for filopplasteren. */
     width?: Property.Width<string>;
+    /**Om drag-and-drop zone skal vises. */
+    withDragAndDrop?: boolean;
 } & Partial<FileUploaderHookProps>;
 declare const FileUploader: {
     (props: FileUploaderProps): react_jsx_runtime.JSX.Element;

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) => {
@@ -8089,6 +8061,9 @@ var rootTokens = {
     backgroundColor: colors20.DdsColorInteractiveLightest
   }
 };
+var noZoneContainerTokens = {
+  padding: [spacing20.SizesDdsSpacingX05, 0].join(" ")
+};
 var fileTokens = {
   marginTop: spacing20.SizesDdsSpacingX05,
   paddingLeftRight: spacing20.SizesDdsSpacingX05,
@@ -8493,6 +8468,9 @@ var Root = import_styled_components56.default.div`
   gap: ${rootTokens.gap};
   background-color: ${({ $isDragActive }) => $isDragActive ? rootTokens.dragActive.backgroundColor : rootTokens.backgroundColor};
 `;
+var NoZoneContainer = import_styled_components56.default.div`
+  padding: ${noZoneContainerTokens.padding};
+`;
 var FileUploaderInput = import_styled_components56.default.input``;
 var FileListElement = import_styled_components56.default.ul`
   margin: 0;
@@ -8505,6 +8483,7 @@ var FileUploader = (props) => {
     label: label3,
     tip,
     required = false,
+    withDragAndDrop = true,
     initialFiles,
     value,
     accept,
@@ -8552,10 +8531,30 @@ var FileUploader = (props) => {
     id: derivativeIdGenerator(uniqueId, `error-${index}`),
     message: e
   }));
+  const button3 = /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(
+    Button,
+    {
+      ...getButtonProps(),
+      id: uniqueId,
+      size: "medium",
+      type: "button",
+      appearance: "filled",
+      purpose: "secondary",
+      icon: UploadIcon,
+      htmlProps: {
+        "aria-invalid": hasRootErrors ? true : void 0,
+        "aria-describedby": spaceSeparatedIdListGenerator([
+          hasTip ? tipId : void 0,
+          ...rootErrorsList.map((e) => e.id)
+        ])
+      },
+      children: "Velg fil"
+    }
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime219.jsxs)(Wrapper3, { width, children: [
     hasLabel && /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(Label, { showRequiredStyling: showRequiredMarker, htmlFor: uniqueId, children: label3 }),
     hasTip && /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(InputMessage, { id: tipId, message: tip, messageType: "tip" }),
-    /* @__PURE__ */ (0, import_jsx_runtime219.jsxs)(
+    withDragAndDrop ? /* @__PURE__ */ (0, import_jsx_runtime219.jsxs)(
       Root,
       {
         ...getRootProps(),
@@ -8566,29 +8565,13 @@ var FileUploader = (props) => {
           "Dra og slipp filer her eller",
           " ",
           /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(VisuallyHidden, { as: "span", children: "velg fil med p\xE5f\xF8lgende knapp" }),
-          /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(
-            Button,
-            {
-              ...getButtonProps(),
-              id: uniqueId,
-              size: "medium",
-              type: "button",
-              appearance: "filled",
-              purpose: "secondary",
-              icon: UploadIcon,
-              htmlProps: {
-                "aria-invalid": hasRootErrors ? true : void 0,
-                "aria-describedby": spaceSeparatedIdListGenerator([
-                  hasTip ? tipId : void 0,
-                  ...rootErrorsList.map((e) => e.id)
-                ])
-              },
-              children: "Velg fil"
-            }
-          )
+          button3
         ]
       }
-    ),
+    ) : /* @__PURE__ */ (0, import_jsx_runtime219.jsxs)(NoZoneContainer, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(FileUploaderInput, { ...getInputProps() }),
+      button3
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(ErrorList, { errors: rootErrorsList }),
     /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(FileListElement, { children: fileListElements })
   ] });
@@ -11607,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)(
@@ -11615,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,
@@ -13520,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);
@@ -13606,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, {
@@ -13625,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";