@norges-domstoler/dds-components 7.2.0 → 8.0.0

package/dist/cjs/components/Popover/Popover.d.ts

@@ -25,10 +25,14 @@ export declare type PopoverProps = BaseComponentPropsWithChildren<HTMLDivElement
     offset?: number;
     /** Ekstra logikk kjørt når lukkeknappen trykkes. */
     onCloseButtonClick?: () => void;
-    /** Ekstra logikk kjørt når lukkeknappen mister fokus. */
-    onCloseButtonBlur?: () => void;
+    /** Ekstra logikk kjørt når popover mister fokus. */
+    onBlur?: () => void;
     /**Custom størrelse. */
     sizeProps?: PopoverSizeProps;
+    /** **OBS!** Propen settes automatisk av `<PopoverGroup />`. Funksjon kjørt ved lukking. */
+    onClose?: () => void;
+    /**Spesifiserer hvilken DOM node `<Popover />` skal ha som forelder via React portal. Brukes med f.eks `document.getElementById("id")` (skaper ikke ny DOM node). */
+    parentElement?: HTMLElement;
 }>;
 export declare const Popover: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "className" | "id"> & {
     /**Tittel. */
@@ -45,10 +49,14 @@ export declare const Popover: import("react").ForwardRefExoticComponent<Pick<imp
     offset?: number | undefined;
     /** Ekstra logikk kjørt når lukkeknappen trykkes. */
     onCloseButtonClick?: (() => void) | undefined;
-    /** Ekstra logikk kjørt når lukkeknappen mister fokus. */
-    onCloseButtonBlur?: (() => void) | undefined;
+    /** Ekstra logikk kjørt når popover mister fokus. */
+    onBlur?: (() => void) | undefined;
     /**Custom størrelse. */
     sizeProps?: PopoverSizeProps | undefined;
+    /** **OBS!** Propen settes automatisk av `<PopoverGroup />`. Funksjon kjørt ved lukking. */
+    onClose?: (() => void) | undefined;
+    /**Spesifiserer hvilken DOM node `<Popover />` skal ha som forelder via React portal. Brukes med f.eks `document.getElementById("id")` (skaper ikke ny DOM node). */
+    parentElement?: HTMLElement | undefined;
 } & {
     children?: ReactNode;
 } & {

package/dist/cjs/components/Popover/Popover.stories.d.ts

@@ -10,8 +10,10 @@ declare const _default: {
         placement?: Placement | undefined;
         offset?: number | undefined;
         onCloseButtonClick?: (() => void) | undefined;
-        onCloseButtonBlur?: (() => void) | undefined;
+        onBlur?: (() => void) | undefined;
         sizeProps?: import("./Popover").PopoverSizeProps | undefined;
+        onClose?: (() => void) | undefined;
+        parentElement?: HTMLElement | undefined;
     } & {
         children?: import("react").ReactNode;
     } & {

package/dist/cjs/components/Popover/Popover.tokens.d.ts

@@ -1,15 +1,18 @@
-import { CSSObject } from 'styled-components';
 export declare const popoverTokens: {
+    content: {
+        noTitle: {
+            marginTop: string;
+        };
+    };
     wrapper: {
-        base: CSSObject;
+        padding: string;
     };
-    button: {
-        base: CSSObject;
+    closeButton: {
+        position: string;
+        top: string;
+        right: string;
     };
     title: {
-        base: CSSObject;
-    };
-    content: {
-        spaceTopNoTitle: string;
+        marginRight: string;
     };
 };

package/dist/cjs/helpers/Paper/Paper.d.ts

@@ -1 +1,8 @@
-export declare const Paper: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare type Elevation = 1 | 2 | 3 | 4;
+declare type Border = 'light' | 'dark';
+declare type PaperProps = {
+    elevation?: Elevation;
+    border?: Border;
+};
+export declare const Paper: import("styled-components").StyledComponent<"div", any, PaperProps, never>;
+export {};

package/dist/cjs/helpers/Paper/Paper.tokens.d.ts

@@ -1,4 +1,7 @@
-import { CSSObject } from 'styled-components';
 export declare const paperTokens: {
-    base: CSSObject;
+    paper: {
+        backgroundColor: string;
+        borderRadius: string;
+        fontFamily: string;
+    };
 };

package/dist/cjs/hooks/index.d.ts

@@ -6,3 +6,4 @@ export * from './useRoveFocus';
 export * from './useFocusTrap';
 export * from './useMountTransition';
 export * from './useScreenSize';
+export * from './useReturnFocusOnBlur';

package/dist/cjs/hooks/useFocusTrap.d.ts

@@ -6,7 +6,7 @@ import { RefObject } from 'react';
  *
  *  const componentRef = useFocusTrap<HTMLDivElement>(props.isOpen);
  *
- *  return props.isOpen ? <div><button>click</button></div> : null;
+ *  return props.isOpen ? <div ref={componentRef}><button>click</button></div> : null;
  *
  * }
  * ```

package/dist/cjs/hooks/useReturnFocusOnBlur.d.ts

@@ -0,0 +1,31 @@
+import { RefObject } from 'react';
+/**
+ * Returnerer fokus til et element når første eller siste barn i en container mister fokus ved tastaturnavigasjon. Typisk bruk:
+ * ```
+ * const MyComponent = (props) => {
+ *
+ *  const [isOpen, setOpen] = useState(true);
+ *  const close = () => setOpen(false);
+ *  const triggerRef = useRef<HTMLButtonElement>(null);
+ *  const containerRef = useReturnFocusOnBlur<HTMLDivElement>(
+ *    isOpen,
+ *    triggerRef.current,
+ *    () => close()
+ *  );
+ *
+ *  return (
+ *    <div>
+ *      <button ref={triggerRef} >Åpne popover</button>
+ *      <div ref={containerRef}>
+ *        <button>gjør noe</button>
+ *      </div>
+ *    </div>
+ *  )
+ * }
+ * ```
+ * @param active om container skal få fokus, f.eks. når en modal åpnes.
+ * @param triggerElement elementet som skal få fokus når fokus forlater container.
+ * @param onBlur ekstra logikk når fokus forlater container.
+ * @returns ref til container som får fokus.
+ */
+export declare function useReturnFocusOnBlur<T extends HTMLElement>(active: boolean, onBlur: () => void, triggerElement?: HTMLElement | null): RefObject<T>;