@norges-domstoler/dds-components 19.1.0 → 19.2.0

package/dist/index.d.mts

@@ -448,14 +448,14 @@ declare const useMountTransition: (isMounted: boolean, unmountDelay: number) =>
  * ```
  * const [isOpen, setOpen] = useState(true);
  * const ref = useRef<HTMLElement>(null);
- * useOnClickOutside(ref, () => setOpen(false));
+ * useOnClickOutside(ref.current, () => setOpen(false));
  *
  * return <div ref={ref}>innhold</div>
  * ```
  * @param element HTML elementet man klikker utenfor.
  * @param handler funksjonen som kjøres ved klikk utenfor.
  */
-declare function useOnClickOutside(element: HTMLElement | null | Array<HTMLElement | null>, handler: (event: MouseEvent | TouchEvent) => void): void;
+declare function useOnClickOutside(element: HTMLElement | null | Array<HTMLElement | null | undefined>, handler: (event: MouseEvent | TouchEvent) => void): void;
 
 /**
  * Kjører logikk når en spesifisert tast blir trykt ned.
@@ -2391,6 +2391,12 @@ type PopoverProps = BaseComponentPropsWithChildren<HTMLDivElement, {
      * @default true
      */
     returnFocusOnBlur?: boolean;
+    /**Anchor ref ved custom kontrollert bruk uten `<PopoverGroup>` Kun for corner cases. */
+    anchorRef?: RefObject<HTMLElement | null>;
+    /**Spesifiserer om popover er åpen ved custom kontrollert bruk uten `<PopoverGroup>` Kun for corner cases. */
+    isOpen?: boolean;
+    /**Callback for lukking ved custom kontrollert bruk uten `<PopoverGroup>` Kun for corner cases. */
+    onClose?: () => void;
 }>;
 declare const Popover: react.ForwardRefExoticComponent<Pick<react.HTMLAttributes<HTMLDivElement>, "id" | "className"> & {
     /**Header. Bruker default semantisk heading hvis verdien er en `string`.  */
@@ -2415,6 +2421,12 @@ declare const Popover: react.ForwardRefExoticComponent<Pick<react.HTMLAttributes
      * @default true
      */
     returnFocusOnBlur?: boolean;
+    /**Anchor ref ved custom kontrollert bruk uten `<PopoverGroup>` Kun for corner cases. */
+    anchorRef?: RefObject<HTMLElement | null>;
+    /**Spesifiserer om popover er åpen ved custom kontrollert bruk uten `<PopoverGroup>` Kun for corner cases. */
+    isOpen?: boolean;
+    /**Callback for lukking ved custom kontrollert bruk uten `<PopoverGroup>` Kun for corner cases. */
+    onClose?: () => void;
 } & {
     children?: ReactNode | undefined;
 } & {

package/dist/index.d.ts

@@ -448,14 +448,14 @@ declare const useMountTransition: (isMounted: boolean, unmountDelay: number) =>
  * ```
  * const [isOpen, setOpen] = useState(true);
  * const ref = useRef<HTMLElement>(null);
- * useOnClickOutside(ref, () => setOpen(false));
+ * useOnClickOutside(ref.current, () => setOpen(false));
  *
  * return <div ref={ref}>innhold</div>
  * ```
  * @param element HTML elementet man klikker utenfor.
  * @param handler funksjonen som kjøres ved klikk utenfor.
  */
-declare function useOnClickOutside(element: HTMLElement | null | Array<HTMLElement | null>, handler: (event: MouseEvent | TouchEvent) => void): void;
+declare function useOnClickOutside(element: HTMLElement | null | Array<HTMLElement | null | undefined>, handler: (event: MouseEvent | TouchEvent) => void): void;
 
 /**
  * Kjører logikk når en spesifisert tast blir trykt ned.
@@ -2391,6 +2391,12 @@ type PopoverProps = BaseComponentPropsWithChildren<HTMLDivElement, {
      * @default true
      */
     returnFocusOnBlur?: boolean;
+    /**Anchor ref ved custom kontrollert bruk uten `<PopoverGroup>` Kun for corner cases. */
+    anchorRef?: RefObject<HTMLElement | null>;
+    /**Spesifiserer om popover er åpen ved custom kontrollert bruk uten `<PopoverGroup>` Kun for corner cases. */
+    isOpen?: boolean;
+    /**Callback for lukking ved custom kontrollert bruk uten `<PopoverGroup>` Kun for corner cases. */
+    onClose?: () => void;
 }>;
 declare const Popover: react.ForwardRefExoticComponent<Pick<react.HTMLAttributes<HTMLDivElement>, "id" | "className"> & {
     /**Header. Bruker default semantisk heading hvis verdien er en `string`.  */
@@ -2415,6 +2421,12 @@ declare const Popover: react.ForwardRefExoticComponent<Pick<react.HTMLAttributes
      * @default true
      */
     returnFocusOnBlur?: boolean;
+    /**Anchor ref ved custom kontrollert bruk uten `<PopoverGroup>` Kun for corner cases. */
+    anchorRef?: RefObject<HTMLElement | null>;
+    /**Spesifiserer om popover er åpen ved custom kontrollert bruk uten `<PopoverGroup>` Kun for corner cases. */
+    isOpen?: boolean;
+    /**Callback for lukking ved custom kontrollert bruk uten `<PopoverGroup>` Kun for corner cases. */
+    onClose?: () => void;
 } & {
     children?: ReactNode | undefined;
 } & {

package/dist/index.js

@@ -2868,7 +2868,7 @@ var import_react19 = require("react");
 function useOnClickOutside(element, handler) {
   (0, import_react19.useEffect)(() => {
     const listener = (event) => {
-      const elements = Array.isArray(element) ? element : [element];
+      const elements = Array.isArray(element) ? element : [element].filter(Boolean);
       const hasClickedInside = elements.some(
         (el) => el == null ? void 0 : el.contains(event.target)
       );
@@ -9933,6 +9933,7 @@ var import_jsx_runtime271 = require("react/jsx-runtime");
 var Popover = (0, import_react113.forwardRef)(
   (props, ref) => {
     const {
+      id,
       header,
       withCloseButton = true,
       onBlur,
@@ -9943,23 +9944,59 @@ var Popover = (0, import_react113.forwardRef)(
       returnFocusOnBlur = true,
       className,
       htmlProps = {},
+      anchorRef,
+      isOpen: propIsOpen,
+      onClose: propOnClose,
       ...rest
     } = props;
+    const { refs, styles: positionStyles } = useFloatPosition(null, {
+      offset,
+      placement
+    });
+    const context = usePopoverContext();
     const {
-      floatStyling,
+      floatStyling: contextFloatStyling,
       setFloatOptions,
-      floatingRef,
+      floatingRef: contextFloatingRef,
+      popoverId: contextPopoverId,
+      onClose: contextOnClose,
+      isOpen: contextIsOpen,
+      anchorEl: contextAnchorEl
+    } = context;
+    const hasContext = contextPopoverId !== void 0;
+    const generatedId = (0, import_react113.useId)();
+    const uniquePopoverId = id != null ? id : `${generatedId}-popover`;
+    const [
       popoverId,
-      onClose,
+      anchorEl,
       isOpen = false,
-      anchorEl
-    } = usePopoverContext();
+      floatingRef,
+      floatStyling,
+      onClose
+    ] = hasContext ? [
+      contextPopoverId,
+      contextAnchorEl,
+      contextIsOpen,
+      contextFloatingRef,
+      contextFloatStyling,
+      contextOnClose
+    ] : [
+      uniquePopoverId,
+      (anchorRef == null ? void 0 : anchorRef.current) && anchorRef.current,
+      propIsOpen,
+      refs.setFloating,
+      positionStyles.floating,
+      propOnClose
+    ];
+    if (!hasContext) {
+      refs.setReference(anchorEl || null);
+    }
     const hasTransitionedIn = useMountTransition(isOpen, 400);
     const popoverRef = useReturnFocusOnBlur(
       isOpen && hasTransitionedIn && returnFocusOnBlur,
       () => {
-        onClose && onClose();
-        onBlur && onBlur();
+        onClose == null ? void 0 : onClose();
+        onBlur == null ? void 0 : onBlur();
       },
       anchorEl && anchorEl
     );
@@ -9967,6 +10004,12 @@ var Popover = (0, import_react113.forwardRef)(
     (0, import_react113.useEffect)(() => {
       setFloatOptions && setFloatOptions({ placement, offset });
     }, [placement, offset]);
+    useOnClickOutside([popoverRef.current, anchorEl], () => {
+      if (isOpen && !hasContext) onClose == null ? void 0 : onClose();
+    });
+    useOnKeyDown("Escape", () => {
+      if (isOpen && !hasContext) onClose == null ? void 0 : onClose();
+    });
     const hasTitle = !!header;
     const openCn = hasTransitionedIn && isOpen ? "open" : "closed";
     return isOpen || hasTransitionedIn ? /* @__PURE__ */ (0, import_jsx_runtime271.jsxs)(