@fremtind/jkl-react-hooks - npm Package Compare versions

Comparing version 11.5.0 to 11.5.1

build/useAnimatedHeight/useAnimatedHeight.d.ts

		import { type RefObject } from "react";
		import { UseAnimatedHeightOptions } from "./types";
		/**
		* Lar deg animere et element opp til sin maksimale høyde, eller ned til 0.
		*
		* @param isOpen Om elementet er åpent eller lukket.
		* @param options Konfigurer display-property, easing og timing, og eventuelle callbacks for life cycle til animasjonen.
		* @returns Ref til elementet som skal animeres, og en funksjon for å trigge animasjonen manuelt.
		*/
		export declare function useAnimatedHeight<T extends HTMLElement>(isOpen: boolean, options?: UseAnimatedHeightOptions<T>): [RefObject<T>, () => void];

build/useBrowserPreferences/useBrowserPreferences.d.ts

		@@ -12,2 +12,6 @@ import { ColorScheme } from "@fremtind/jkl-core";
		};
		/**
		* Hook som gir informasjon om brukerens foretrukne konfigurasjon.
		* @returns Objekt med informasjon om brukerens foretrukne tema (lyst vs mørkt), redusert bevegelse, og høykontrast (forced colors).
		*/
		export declare const useBrowserPreferences: () => BrowserPreferences;

build/useClickOutside.d.ts

		import { RefObject } from "react";
		/**
		* Hook for å sette opp en lytter ved klikk utenfor et element.
		* @param ref Elementet du ønsker å sjekke om en klikk er utenfor.
		* @param fn Callback-funksjon som kalles når det klikkes utenfor elementet.
		*/
		export declare function useClickOutside(ref: RefObject<HTMLElement> \| null, fn: () => void): void;

build/useElementDimensions.d.ts

		@@ -6,2 +6,7 @@ import { RefObject } from "react";
		};
		/**
		* Lar deg måle størrelsen på et element, og oppdatere målene når vinduet endrer størrelse.
		* @param throttleDelay Antall milisekunder som skal gå mellom hver gang dimensjonene oppdateres.
		* @returns Ref til elementet som skal måles, og dimensjonene til elementet.
		*/
		export declare function useElementDimensions<T extends HTMLElement>(throttleDelay?: number): [RefObject<T>, Dimensions];

build/useFocusOutside.d.ts

		import { RefObject } from "react";
		/**
		* Hook for å lytte etter fokus utenfor et element. Nyttig dersom flere fokuserbare elementer samspiller i en komponent.
		* @param ref Elementet som skal observeres
		* @param fn Funksjon som kalles når fokus flyttes utenfor elementet
		*/
		export declare function useFocusOutside(ref: RefObject<HTMLElement> \| null, fn: () => void): void;

build/useId.d.ts

		@@ -5,2 +5,7 @@ export interface UseIdOptions {
		}
		/**
		* Hook som genererer en unik ID. For React 18 brukes React.useId, ellers brukes nanoid.
		* @param id En valgfri eksisterende ID som kan brukes som prefix.
		* @param options Objekt med innstillinger, dersom du angir et prefix.
		*/
		export declare const useId: (id?: string, options?: UseIdOptions) => string;

build/useIntersectionObserver/useIntersectionObserver.d.ts

		import { RefObject, MutableRefObject } from "react";
		type ValidElement = HTMLElement \| SVGElement;
		type Target = MutableRefObject<ValidElement> \| RefObject<ValidElement> \| MutableRefObject<NodeListOf<ValidElement>> \| RefObject<NodeListOf<ValidElement>> \| NodeListOf<ValidElement>;
		/**
		* Hook som gjør det enkelt å observere om et element er synlig i viewporten.
		*
		* @param target Elementet eller elementene som skal observeres. Du kan sende in en React ref til et HTMLElement eller SVG Element, eller en NodeList av samme type elementer (returneres f.eks. av document.querySelectorAll), eller en React ref med en NodeList av samme type elementer.
		* @param onIntersect Callback-funksjon som utføres når et av elementene som observeres overlapper angitt mål. Se https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#parameters for mer info.
		* @param fallback Funksjon som kalles dersom nettleseren ikke støtter IntersectionOpserver-APIet.
		* @param options Objekt med innstillinger for oberveren. Se https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#parameters for mer info.
		*/
		export declare const useIntersectionObserver: (target: Target, onIntersect: IntersectionObserverCallback, fallback?: VoidFunction \| null, options?: Partial<IntersectionObserverInit>) => void;
		export {};

build/useKeyListener.d.ts

		import { RefObject } from "react";
		/**
		* Lar deg sette opp en tastaturlytter på et element.
		* @param ref Element som skal observeres
		* @param keys Taster som skal lyttes på
		* @param fn Funksjon som kalles når en tastetrykk observeres
		*/
		export declare function useKeyListener(ref: RefObject<HTMLElement> \| null, keys: string[] \| string \| null, fn: (event: KeyboardEvent) => void): void;

build/useListNavigation.d.ts

		import { RefObject } from "react";
		type UseListNavigationProps<T> = {
		/** Ref til et element med rollen `listbox` */
		ref: RefObject<T>;
		@@ -4,0 +5,0 @@ };

build/useMutationObserver/useMutationObserver.d.ts

		import { RefObject } from "react";
		/**
		* Hook som gjør det enklere å sjekke en komponents children for endringer.
		*
		* @param targetRef Container som skal observeres. Containeren må ikke rerendres, da vil observereren bli opprettet på nytt.
		* @param onObservation Callback-funksjon som utføres når en mutasjon observeres.
		* @param config Parametere til observereren. Se https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit#properties for mer info.
		*/
		export declare const useMutationObserver: (targetRef: RefObject<HTMLElement>, onObservation: MutationCallback, config?: Partial<MutationObserverInit>) => void;

build/usePreviousValue/usePreviousValue.d.ts

		@@ -0,1 +1,6 @@
		/**
		* Lar deg huske en verdi fra forrige render.
		* @param value Verdien som skal huskes.
		* @returns Forrige render av verdien, eller undefined første render.
		*/
		export declare const usePreviousValue: <T>(value: T) => T \| undefined;

build/useScreen/useScreen.d.ts

		import { ScreenState } from "./state";
		/**
		* Finn størrelsen og orienteringen til skjermen.
		* @returns Et objekt med boolean som indikerer om skjermstørrelsen er liten, medium, stor eller ekstra stor, og om skjermen er i portrett- eller landskapsmodus.
		*/
		export declare const useScreen: () => ScreenState;

package.json

		{
		"name": "@fremtind/jkl-react-hooks",
		"version": "11.5.0",
		"version": "11.5.1",
		"publishConfig": {
		@@ -57,3 +57,3 @@ "access": "public"
		},
		"gitHead": "25d2b07272a4a604d30a49585da19a75725115a2"
		"gitHead": "dc634e3c2efc8bec23677f0691376ed48208deb4"
		}

build/cjs/useAnimatedHeight/useAnimatedHeight.js.map