@helsenorge/designsystem-react 14.9.2 → 15.0.0-beta.1

package/lib/useLayoutEvent.js

@@ -1,21 +0,0 @@
-import { t as debounce } from "./debounce.js";
-import { useEffect } from "react";
-const useLayoutEvent = (callback, events = [
-	"layoutchange",
-	"resize",
-	"orientationchange"
-], debounceMs = 10) => {
-	useEffect(() => {
-		if (typeof window !== "object") return;
-		const [debouncedCallback, teardown] = debounce(callback, debounceMs);
-		events.forEach((eventName) => window.addEventListener(eventName, debouncedCallback));
-		debouncedCallback();
-		return () => {
-			teardown();
-			events.forEach((eventName) => window.removeEventListener(eventName, debouncedCallback));
-		};
-	}, []);
-};
-export { useLayoutEvent as t };
-
-//# sourceMappingURL=useLayoutEvent.js.map

package/lib/useLayoutEvent.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useLayoutEvent.js","names":[],"sources":["../src/hooks/useLayoutEvent.ts"],"sourcesContent":["import { useEffect } from 'react';\n\nimport { debounce } from '../utils/debounce';\n\n/**\n * Lytt på ulike layout-events som har betydning for rendring og størrelse på elementer.\n *\n * @param callback Kalles for hver event\n * @param events Liste med events som skal lyttes på\n * @param debounceMs Begrens kall til callback til x antall ms\n */\nexport const useLayoutEvent = (callback: () => void, events = ['layoutchange', 'resize', 'orientationchange'], debounceMs = 10): void => {\n  useEffect(() => {\n    if (typeof window !== 'object') return;\n    const [debouncedCallback, teardown] = debounce(callback, debounceMs);\n\n    events.forEach(eventName => window.addEventListener(eventName, debouncedCallback));\n\n    debouncedCallback();\n\n    return (): void => {\n      teardown();\n      events.forEach(eventName => window.removeEventListener(eventName, debouncedCallback));\n    };\n  }, []);\n};\n"],"mappings":";;AAWA,MAAa,kBAAkB,UAAsB,SAAS;CAAC;CAAgB;CAAU;CAAoB,EAAE,aAAa,OAAa;AACvI,iBAAgB;AACd,MAAI,OAAO,WAAW,SAAU;EAChC,MAAM,CAAC,mBAAmB,YAAY,SAAS,UAAU,WAAW;AAEpE,SAAO,SAAQ,cAAa,OAAO,iBAAiB,WAAW,kBAAkB,CAAC;AAElF,qBAAmB;AAEnB,eAAmB;AACjB,aAAU;AACV,UAAO,SAAQ,cAAa,OAAO,oBAAoB,WAAW,kBAAkB,CAAC;;IAEtF,EAAE,CAAC"}

package/lib/useOutsideEvent.js

@@ -1,20 +0,0 @@
-import { useEffect } from "react";
-const useOutsideEvent = (ref, callback, events = ["mousedown"]) => {
-	const refArray = Array.isArray(ref) ? ref : [ref];
-	const handleOutsideEvent = (event) => {
-		if (refArray.every((r) => r.current && !event.composedPath().includes(r.current))) callback(event);
-	};
-	useEffect(() => {
-		events.forEach((eventName) => document.addEventListener(eventName, handleOutsideEvent));
-		return () => {
-			events.forEach((eventName) => document.removeEventListener(eventName, handleOutsideEvent));
-		};
-	}, [
-		refArray,
-		callback,
-		events
-	]);
-};
-export { useOutsideEvent as t };
-
-//# sourceMappingURL=useOutsideEvent.js.map

package/lib/useOutsideEvent.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useOutsideEvent.js","names":[],"sources":["../src/hooks/useOutsideEvent.ts"],"sourcesContent":["import { useEffect } from 'react';\n\ntype OutsideEvents = {\n  [K in keyof DocumentEventMap]: DocumentEventMap[K] extends MouseEvent | FocusEvent ? K : never;\n}[keyof DocumentEventMap];\n\n/**\n * Custom hook for klikk eller fokus utenfor et gitt element (eller flere elementer)\n * @param ref Sjekker om det klikkes utenfor dette elementet/elementene\n * @param callback Callback-funksjon ved klikk utenfor elementet/elementene\n * @param events Type eventer å lytte på. Default: mousedown\n */\nexport const useOutsideEvent = (\n  ref: React.RefObject<HTMLElement | null> | React.RefObject<HTMLElement | null>[],\n  callback: (event: MouseEvent | FocusEvent) => void,\n  events: OutsideEvents[] = ['mousedown']\n): void => {\n  const refArray = Array.isArray(ref) ? ref : [ref];\n\n  const handleOutsideEvent = (event: MouseEvent | FocusEvent): void => {\n    if (refArray.every(r => r.current && !event.composedPath().includes(r.current))) {\n      callback(event);\n    }\n  };\n\n  useEffect(() => {\n    events.forEach(eventName => document.addEventListener(eventName, handleOutsideEvent));\n\n    return (): void => {\n      events.forEach(eventName => document.removeEventListener(eventName, handleOutsideEvent));\n    };\n  }, [refArray, callback, events]);\n};\n"],"mappings":";AAYA,MAAa,mBACX,KACA,UACA,SAA0B,CAAC,YAAY,KAC9B;CACT,MAAM,WAAW,MAAM,QAAQ,IAAI,GAAG,MAAM,CAAC,IAAI;CAEjD,MAAM,sBAAsB,UAAyC;AACnE,MAAI,SAAS,OAAM,MAAK,EAAE,WAAW,CAAC,MAAM,cAAc,CAAC,SAAS,EAAE,QAAQ,CAAC,CAC7E,UAAS,MAAM;;AAInB,iBAAgB;AACd,SAAO,SAAQ,cAAa,SAAS,iBAAiB,WAAW,mBAAmB,CAAC;AAErF,eAAmB;AACjB,UAAO,SAAQ,cAAa,SAAS,oBAAoB,WAAW,mBAAmB,CAAC;;IAEzF;EAAC;EAAU;EAAU;EAAO,CAAC"}

package/lib/usePrevious.js

@@ -1,11 +0,0 @@
-import { useEffect, useRef } from "react";
-const usePrevious = (value) => {
-	const ref = useRef(null);
-	useEffect(() => {
-		ref.current = value;
-	}, [value]);
-	return ref.current;
-};
-export { usePrevious as t };
-
-//# sourceMappingURL=usePrevious.js.map

package/lib/usePrevious.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"usePrevious.js","names":[],"sources":["../src/hooks/usePrevious.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\n/**\n * Brukes f.eks. i forbindelse med useState for å kunne sammenlikne ny verdi med gammel.\n * @param value Verdi du ønsker å ta vare på\n * @returns Forrige verdi\n */\nexport const usePrevious = <T>(value: T): T | null => {\n  const ref = useRef<T | null>(null);\n\n  useEffect(() => {\n    ref.current = value;\n  }, [value]);\n\n  return ref.current;\n};\n"],"mappings":";AAOA,MAAa,eAAkB,UAAuB;CACpD,MAAM,MAAM,OAAiB,KAAK;AAElC,iBAAgB;AACd,MAAI,UAAU;IACb,CAAC,MAAM,CAAC;AAEX,QAAO,IAAI"}

package/lib/usePseudoClasses.js

@@ -1,46 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-const usePseudoClasses = (ref) => {
-	const internalRef = useRef(null);
-	const refObject = ref ?? internalRef;
-	const [isHovered, setIsHovered] = useState(false);
-	const [isFocused, setIsFocused] = useState(false);
-	const [isActive, setIsActive] = useState(false);
-	useEffect(() => {
-		const handleMouseEnter = () => setIsHovered(true);
-		const handleMouseLeave = () => setIsHovered(false);
-		const handleFocusIn = () => setIsFocused(true);
-		const handleFocusOut = () => setIsFocused(false);
-		const handlePointerDown = () => setIsActive(true);
-		const handlePointerUp = () => setIsActive(false);
-		const handlePointerLeave = () => setIsActive(false);
-		refObject.current?.addEventListener("mouseenter", handleMouseEnter);
-		refObject.current?.addEventListener("mouseleave", handleMouseLeave);
-		refObject.current?.addEventListener("pointerenter", handleMouseEnter);
-		refObject.current?.addEventListener("pointerleave", handleMouseLeave);
-		refObject.current?.addEventListener("focusin", handleFocusIn);
-		refObject.current?.addEventListener("focusout", handleFocusOut);
-		refObject.current?.addEventListener("pointerdown", handlePointerDown);
-		refObject.current?.addEventListener("pointerup", handlePointerUp);
-		refObject.current?.addEventListener("pointerleave", handlePointerLeave);
-		return () => {
-			refObject.current?.removeEventListener("mouseenter", handleMouseEnter);
-			refObject.current?.removeEventListener("mouseleave", handleMouseLeave);
-			refObject.current?.removeEventListener("pointerenter", handleMouseEnter);
-			refObject.current?.removeEventListener("pointerleave", handleMouseLeave);
-			refObject.current?.removeEventListener("focusin", handleFocusIn);
-			refObject.current?.removeEventListener("focusout", handleFocusOut);
-			refObject.current?.removeEventListener("pointerdown", handlePointerDown);
-			refObject.current?.removeEventListener("pointerup", handlePointerUp);
-			refObject.current?.removeEventListener("pointerleave", handlePointerLeave);
-		};
-	}, [refObject]);
-	return {
-		refObject,
-		isHovered,
-		isFocused,
-		isActive
-	};
-};
-export { usePseudoClasses as t };
-
-//# sourceMappingURL=usePseudoClasses.js.map

package/lib/usePseudoClasses.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"usePseudoClasses.js","names":[],"sources":["../src/hooks/usePseudoClasses.ts"],"sourcesContent":["import type { RefObject } from 'react';\nimport { useRef, useEffect, useState } from 'react';\n\n/**\n * Få vite når et element hovres over eller mottar fokus.\n * @param ref Element som skal observeres\n * @returns Objekt med ref og om objekt er hovered/focused\n */\nexport const usePseudoClasses = <T extends HTMLElement | SVGElement | null>(\n  ref?: RefObject<T> | null\n): { refObject: RefObject<T | null>; isHovered: boolean; isFocused: boolean; isActive: boolean } => {\n  const internalRef = useRef<T | null>(null);\n  const refObject = ref ?? internalRef;\n  const [isHovered, setIsHovered] = useState(false);\n  const [isFocused, setIsFocused] = useState(false);\n  const [isActive, setIsActive] = useState(false);\n\n  useEffect(() => {\n    const handleMouseEnter = (): void => setIsHovered(true);\n    const handleMouseLeave = (): void => setIsHovered(false);\n    const handleFocusIn = (): void => setIsFocused(true);\n    const handleFocusOut = (): void => setIsFocused(false);\n    const handlePointerDown = (): void => setIsActive(true);\n    const handlePointerUp = (): void => setIsActive(false);\n    const handlePointerLeave = (): void => setIsActive(false);\n\n    refObject.current?.addEventListener('mouseenter', handleMouseEnter);\n    refObject.current?.addEventListener('mouseleave', handleMouseLeave);\n    refObject.current?.addEventListener('pointerenter', handleMouseEnter);\n    refObject.current?.addEventListener('pointerleave', handleMouseLeave);\n    refObject.current?.addEventListener('focusin', handleFocusIn);\n    refObject.current?.addEventListener('focusout', handleFocusOut);\n    refObject.current?.addEventListener('pointerdown', handlePointerDown);\n    refObject.current?.addEventListener('pointerup', handlePointerUp);\n    refObject.current?.addEventListener('pointerleave', handlePointerLeave);\n\n    return (): void => {\n      refObject.current?.removeEventListener('mouseenter', handleMouseEnter);\n      refObject.current?.removeEventListener('mouseleave', handleMouseLeave);\n      refObject.current?.removeEventListener('pointerenter', handleMouseEnter);\n      refObject.current?.removeEventListener('pointerleave', handleMouseLeave);\n      refObject.current?.removeEventListener('focusin', handleFocusIn);\n      refObject.current?.removeEventListener('focusout', handleFocusOut);\n      refObject.current?.removeEventListener('pointerdown', handlePointerDown);\n      refObject.current?.removeEventListener('pointerup', handlePointerUp);\n      refObject.current?.removeEventListener('pointerleave', handlePointerLeave);\n    };\n  }, [refObject]);\n\n  return { refObject, isHovered, isFocused, isActive };\n};\n"],"mappings":";AAQA,MAAa,oBACX,QACkG;CAClG,MAAM,cAAc,OAAiB,KAAK;CAC1C,MAAM,YAAY,OAAO;CACzB,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;CACjD,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;CACjD,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;AAE/C,iBAAgB;EACd,MAAM,yBAA+B,aAAa,KAAK;EACvD,MAAM,yBAA+B,aAAa,MAAM;EACxD,MAAM,sBAA4B,aAAa,KAAK;EACpD,MAAM,uBAA6B,aAAa,MAAM;EACtD,MAAM,0BAAgC,YAAY,KAAK;EACvD,MAAM,wBAA8B,YAAY,MAAM;EACtD,MAAM,2BAAiC,YAAY,MAAM;AAEzD,YAAU,SAAS,iBAAiB,cAAc,iBAAiB;AACnE,YAAU,SAAS,iBAAiB,cAAc,iBAAiB;AACnE,YAAU,SAAS,iBAAiB,gBAAgB,iBAAiB;AACrE,YAAU,SAAS,iBAAiB,gBAAgB,iBAAiB;AACrE,YAAU,SAAS,iBAAiB,WAAW,cAAc;AAC7D,YAAU,SAAS,iBAAiB,YAAY,eAAe;AAC/D,YAAU,SAAS,iBAAiB,eAAe,kBAAkB;AACrE,YAAU,SAAS,iBAAiB,aAAa,gBAAgB;AACjE,YAAU,SAAS,iBAAiB,gBAAgB,mBAAmB;AAEvE,eAAmB;AACjB,aAAU,SAAS,oBAAoB,cAAc,iBAAiB;AACtE,aAAU,SAAS,oBAAoB,cAAc,iBAAiB;AACtE,aAAU,SAAS,oBAAoB,gBAAgB,iBAAiB;AACxE,aAAU,SAAS,oBAAoB,gBAAgB,iBAAiB;AACxE,aAAU,SAAS,oBAAoB,WAAW,cAAc;AAChE,aAAU,SAAS,oBAAoB,YAAY,eAAe;AAClE,aAAU,SAAS,oBAAoB,eAAe,kBAAkB;AACxE,aAAU,SAAS,oBAAoB,aAAa,gBAAgB;AACpE,aAAU,SAAS,oBAAoB,gBAAgB,mBAAmB;;IAE3E,CAAC,UAAU,CAAC;AAEf,QAAO;EAAE;EAAW;EAAW;EAAW;EAAU"}

package/lib/useResizeObserver.js

@@ -1,23 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-const useResizeObserver = (ref) => {
-	const ticking = useRef(false);
-	const [size, setSize] = useState();
-	useEffect(() => {
-		const resizeObserver = new ResizeObserver((entries) => {
-			if (!ticking.current) window.requestAnimationFrame(() => {
-				setSize(entries[0].target.getBoundingClientRect());
-				ticking.current = false;
-			});
-			ticking.current = true;
-		});
-		if (ref?.current) resizeObserver.observe(ref?.current);
-		return () => {
-			if (ref?.current) resizeObserver.unobserve(ref.current);
-			else resizeObserver.disconnect();
-		};
-	}, [ref]);
-	return size;
-};
-export { useResizeObserver as t };
-
-//# sourceMappingURL=useResizeObserver.js.map

package/lib/useResizeObserver.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useResizeObserver.js","names":[],"sources":["../src/hooks/useResizeObserver.ts"],"sourcesContent":["import { useEffect, useState, useRef } from 'react';\n\n/**\n * Lytt på endringer i størrelse på et element. Bruker ResizeObserver-APIet.\n *\n * @param ref Element som skal observeres.\n * @returns Object med høyde, bredde, x og y til elementet\n */\nexport const useResizeObserver = (ref?: React.RefObject<HTMLElement | null>): DOMRect | undefined => {\n  const ticking = useRef(false);\n  const [size, setSize] = useState<DOMRect>();\n  useEffect(() => {\n    const resizeObserver = new ResizeObserver(entries => {\n      if (!ticking.current) {\n        window.requestAnimationFrame(() => {\n          setSize(entries[0].target.getBoundingClientRect());\n          ticking.current = false;\n        });\n      }\n      ticking.current = true;\n    });\n    if (ref?.current) {\n      resizeObserver.observe(ref?.current);\n    }\n\n    return (): void => {\n      if (ref?.current) {\n        resizeObserver.unobserve(ref.current);\n      } else {\n        resizeObserver.disconnect();\n      }\n    };\n  }, [ref]);\n\n  return size;\n};\n"],"mappings":";AAQA,MAAa,qBAAqB,QAAmE;CACnG,MAAM,UAAU,OAAO,MAAM;CAC7B,MAAM,CAAC,MAAM,WAAW,UAAmB;AAC3C,iBAAgB;EACd,MAAM,iBAAiB,IAAI,gBAAe,YAAW;AACnD,OAAI,CAAC,QAAQ,QACX,QAAO,4BAA4B;AACjC,YAAQ,QAAQ,GAAG,OAAO,uBAAuB,CAAC;AAClD,YAAQ,UAAU;KAClB;AAEJ,WAAQ,UAAU;IAClB;AACF,MAAI,KAAK,QACP,gBAAe,QAAQ,KAAK,QAAQ;AAGtC,eAAmB;AACjB,OAAI,KAAK,QACP,gBAAe,UAAU,IAAI,QAAQ;OAErC,gBAAe,YAAY;;IAG9B,CAAC,IAAI,CAAC;AAET,QAAO"}

package/lib/useReturnFocusOnUnmount.js

@@ -1,16 +0,0 @@
-import { t as getDocumentActiveElement } from "./focus.js";
-import { t as deepContains } from "./deepContains.js";
-import { useEffect, useRef } from "react";
-const useReturnFocusOnUnmount = (ref) => {
-	const previouslyFocusedElementRef = useRef(null);
-	useEffect(() => {
-		const activeElement = ref.current ? getDocumentActiveElement(ref.current) : null;
-		if (activeElement instanceof HTMLElement) previouslyFocusedElementRef.current = activeElement;
-		return () => {
-			if (previouslyFocusedElementRef.current instanceof HTMLElement && deepContains(document, previouslyFocusedElementRef.current)) previouslyFocusedElementRef.current.focus();
-		};
-	}, []);
-};
-export { useReturnFocusOnUnmount as t };
-
-//# sourceMappingURL=useReturnFocusOnUnmount.js.map

package/lib/useReturnFocusOnUnmount.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useReturnFocusOnUnmount.js","names":[],"sources":["../src/hooks/useReturnFocusOnUnmount.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport { deepContains } from '../utils/deepContains';\nimport { getDocumentActiveElement } from '../utils/focus';\n\n/**\n * A hook that stores the currently focused element when the component mounts,\n * and returns focus to it when the component unmounts.\n */\nexport const useReturnFocusOnUnmount = (ref: React.RefObject<HTMLElement | null>): void => {\n  const previouslyFocusedElementRef = useRef<HTMLElement | null>(null);\n\n  useEffect(() => {\n    // Captures which element was focused on mount\n    // const activeElement = document.activeElement;\n    const activeElement = ref.current ? getDocumentActiveElement(ref.current) : null;\n    if (activeElement instanceof HTMLElement) {\n      previouslyFocusedElementRef.current = activeElement;\n    }\n\n    // Restores focus to the stored element on unmount\n    return (): void => {\n      if (previouslyFocusedElementRef.current instanceof HTMLElement && deepContains(document, previouslyFocusedElementRef.current)) {\n        previouslyFocusedElementRef.current.focus();\n      }\n    };\n  }, []);\n};\n"],"mappings":";;;AASA,MAAa,2BAA2B,QAAmD;CACzF,MAAM,8BAA8B,OAA2B,KAAK;AAEpE,iBAAgB;EAGd,MAAM,gBAAgB,IAAI,UAAU,yBAAyB,IAAI,QAAQ,GAAG;AAC5E,MAAI,yBAAyB,YAC3B,6BAA4B,UAAU;AAIxC,eAAmB;AACjB,OAAI,4BAA4B,mBAAmB,eAAe,aAAa,UAAU,4BAA4B,QAAQ,CAC3H,6BAA4B,QAAQ,OAAO;;IAG9C,EAAE,CAAC"}

package/lib/useRovingFocus.js

@@ -1,44 +0,0 @@
-import { o as KeyboardEventKey } from "./constants2.js";
-import { t as useKeyboardEvent } from "./useKeyboardEvent.js";
-import { useEffect } from "react";
-const useRovingFocus = (handleNewIndex, inputRefList, containerRef, leftRightNavigation) => {
-	leftRightNavigation = leftRightNavigation ?? false;
-	useEffect(() => {
-		if (!inputRefList.current) return;
-		inputRefList.current.forEach((ref) => {
-			ref.current?.setAttribute("tabIndex", "-1");
-		});
-		inputRefList.current[0]?.current?.setAttribute("tabIndex", "0");
-	}, []);
-	const handleKeyboardNavigation = (event) => {
-		if (event.key === KeyboardEventKey.Tab) return;
-		event.preventDefault();
-		if (!inputRefList.current) return;
-		const index = inputRefList.current.findIndex((x) => x.current === event.target);
-		let nextIndex = index;
-		if (event.key === KeyboardEventKey.Home) nextIndex = 0;
-		else if (event.key === KeyboardEventKey.End) nextIndex = inputRefList.current.length - 1;
-		else if ((event.key === KeyboardEventKey.ArrowDown || event.key === KeyboardEventKey.ArrowRight) && index < inputRefList.current.length - 1) nextIndex = index + 1;
-		else if ((event.key === KeyboardEventKey.ArrowUp || event.key === KeyboardEventKey.ArrowLeft) && index > 0) nextIndex = index - 1;
-		else if (event.key === KeyboardEventKey.Enter || event.key === KeyboardEventKey.Space) nextIndex = index;
-		if (nextIndex !== -1) {
-			inputRefList.current?.forEach((ref, i) => {
-				if (ref.current) ref.current.tabIndex = i === nextIndex ? 0 : -1;
-			});
-			inputRefList.current[nextIndex]?.current?.focus();
-			inputRefList.current[nextIndex]?.current?.click?.();
-			handleNewIndex(nextIndex);
-		}
-	};
-	const commonKeys = [
-		KeyboardEventKey.End,
-		KeyboardEventKey.Enter,
-		KeyboardEventKey.Escape,
-		KeyboardEventKey.Home
-	];
-	const arrowKeys = leftRightNavigation ? [KeyboardEventKey.ArrowRight, KeyboardEventKey.ArrowLeft] : [KeyboardEventKey.ArrowUp, KeyboardEventKey.ArrowDown];
-	useKeyboardEvent(containerRef, handleKeyboardNavigation, [...commonKeys, ...arrowKeys]);
-};
-export { useRovingFocus as t };
-
-//# sourceMappingURL=useRovingFocus.js.map

package/lib/useRovingFocus.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useRovingFocus.js","names":[],"sources":["../src/hooks/useRovingFocus.tsx"],"sourcesContent":["// Inspiration from https://www.joshuawootonn.com/react-roving-tabindex\nimport { useEffect } from 'react';\n\nimport { useKeyboardEvent } from './useKeyboardEvent';\nimport { KeyboardEventKey } from '../constants';\n\nexport const useRovingFocus = (\n  /** Function to run when new index is set */\n  handleNewIndex: (index: number) => void,\n  /** List of elements that should have rocing focus */\n  inputRefList: React.RefObject<React.RefObject<HTMLElement | null>[] | null | undefined>,\n  /** Ref of container that should have the keyboard event handler */\n  containerRef: React.RefObject<HTMLElement | null>,\n  /** Indicated wether right/left or up/down arrows should be used for navigation. Default is up/down. */\n  leftRightNavigation?: boolean\n): void => {\n  leftRightNavigation = leftRightNavigation ?? false;\n\n  // Initialize only first index to be tabbable\n  useEffect(() => {\n    if (!inputRefList.current) {\n      return;\n    }\n    inputRefList.current.forEach(ref => {\n      ref.current?.setAttribute('tabIndex', '-1');\n    });\n    inputRefList.current[0]?.current?.setAttribute('tabIndex', '0');\n  }, []);\n\n  const handleKeyboardNavigation = (event: KeyboardEvent): void => {\n    if (event.key === KeyboardEventKey.Tab) {\n      return;\n    }\n    event.preventDefault();\n\n    if (!inputRefList.current) {\n      return;\n    }\n    const index = inputRefList.current.findIndex(x => x.current === event.target);\n    let nextIndex = index;\n\n    if (event.key === KeyboardEventKey.Home) {\n      nextIndex = 0;\n    } else if (event.key === KeyboardEventKey.End) {\n      nextIndex = inputRefList.current.length - 1;\n    } else if (\n      (event.key === KeyboardEventKey.ArrowDown || event.key === KeyboardEventKey.ArrowRight) &&\n      index < inputRefList.current.length - 1\n    ) {\n      nextIndex = index + 1;\n    } else if ((event.key === KeyboardEventKey.ArrowUp || event.key === KeyboardEventKey.ArrowLeft) && index > 0) {\n      nextIndex = index - 1;\n    } else if (event.key === KeyboardEventKey.Enter || event.key === KeyboardEventKey.Space) {\n      nextIndex = index;\n    }\n\n    if (nextIndex !== -1) {\n      inputRefList.current?.forEach((ref, i) => {\n        if (ref.current) {\n          ref.current.tabIndex = i === nextIndex ? 0 : -1;\n        }\n      });\n      inputRefList.current[nextIndex]?.current?.focus();\n      inputRefList.current[nextIndex]?.current?.click?.();\n      handleNewIndex(nextIndex);\n    }\n  };\n\n  const commonKeys = [KeyboardEventKey.End, KeyboardEventKey.Enter, KeyboardEventKey.Escape, KeyboardEventKey.Home];\n\n  const arrowKeys = leftRightNavigation\n    ? [KeyboardEventKey.ArrowRight, KeyboardEventKey.ArrowLeft]\n    : [KeyboardEventKey.ArrowUp, KeyboardEventKey.ArrowDown];\n\n  useKeyboardEvent(containerRef, handleKeyboardNavigation, [...commonKeys, ...arrowKeys]);\n};\n"],"mappings":";;;AAMA,MAAa,kBAEX,gBAEA,cAEA,cAEA,wBACS;AACT,uBAAsB,uBAAuB;AAG7C,iBAAgB;AACd,MAAI,CAAC,aAAa,QAChB;AAEF,eAAa,QAAQ,SAAQ,QAAO;AAClC,OAAI,SAAS,aAAa,YAAY,KAAK;IAC3C;AACF,eAAa,QAAQ,IAAI,SAAS,aAAa,YAAY,IAAI;IAC9D,EAAE,CAAC;CAEN,MAAM,4BAA4B,UAA+B;AAC/D,MAAI,MAAM,QAAQ,iBAAiB,IACjC;AAEF,QAAM,gBAAgB;AAEtB,MAAI,CAAC,aAAa,QAChB;EAEF,MAAM,QAAQ,aAAa,QAAQ,WAAU,MAAK,EAAE,YAAY,MAAM,OAAO;EAC7E,IAAI,YAAY;AAEhB,MAAI,MAAM,QAAQ,iBAAiB,KACjC,aAAY;WACH,MAAM,QAAQ,iBAAiB,IACxC,aAAY,aAAa,QAAQ,SAAS;YAEzC,MAAM,QAAQ,iBAAiB,aAAa,MAAM,QAAQ,iBAAiB,eAC5E,QAAQ,aAAa,QAAQ,SAAS,EAEtC,aAAY,QAAQ;YACV,MAAM,QAAQ,iBAAiB,WAAW,MAAM,QAAQ,iBAAiB,cAAc,QAAQ,EACzG,aAAY,QAAQ;WACX,MAAM,QAAQ,iBAAiB,SAAS,MAAM,QAAQ,iBAAiB,MAChF,aAAY;AAGd,MAAI,cAAc,IAAI;AACpB,gBAAa,SAAS,SAAS,KAAK,MAAM;AACxC,QAAI,IAAI,QACN,KAAI,QAAQ,WAAW,MAAM,YAAY,IAAI;KAE/C;AACF,gBAAa,QAAQ,YAAY,SAAS,OAAO;AACjD,gBAAa,QAAQ,YAAY,SAAS,SAAS;AACnD,kBAAe,UAAU;;;CAI7B,MAAM,aAAa;EAAC,iBAAiB;EAAK,iBAAiB;EAAO,iBAAiB;EAAQ,iBAAiB;EAAK;CAEjH,MAAM,YAAY,sBACd,CAAC,iBAAiB,YAAY,iBAAiB,UAAU,GACzD,CAAC,iBAAiB,SAAS,iBAAiB,UAAU;AAE1D,kBAAiB,cAAc,0BAA0B,CAAC,GAAG,YAAY,GAAG,UAAU,CAAC"}

package/lib/useSize.js

@@ -1,23 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-const useSize = (ref) => {
-	const ticking = useRef(false);
-	const [size, setSize] = useState();
-	useEffect(() => {
-		const resizeObserver = new ResizeObserver((entries) => {
-			if (!ticking.current) window.requestAnimationFrame(() => {
-				setSize(entries[0].target.getBoundingClientRect());
-				ticking.current = false;
-			});
-			ticking.current = true;
-		});
-		if (ref?.current) resizeObserver.observe(ref?.current);
-		return () => {
-			if (ref?.current) resizeObserver.unobserve(ref.current);
-			else resizeObserver.disconnect();
-		};
-	}, [ref?.current]);
-	return size;
-};
-export { useSize as t };
-
-//# sourceMappingURL=useSize.js.map

package/lib/useSize.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useSize.js","names":[],"sources":["../src/hooks/useSize.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\n/**\n * Lytt på endringer i størrelse på et element\n *\n * @param ref Element som skal observeres.\n * @returns Object med høyde, bredde, x og y til elementet. Merk at objektet bare oppdates når høyde eller bredde endres, ikke når\n * posisjonen (x og y) endres.\n */\nexport const useSize = (ref?: React.RefObject<HTMLElement | null>): DOMRect | undefined => {\n  const ticking = useRef(false);\n  const [size, setSize] = useState<DOMRect>();\n  useEffect(() => {\n    const resizeObserver = new ResizeObserver(entries => {\n      if (!ticking.current) {\n        window.requestAnimationFrame(() => {\n          setSize(entries[0].target.getBoundingClientRect());\n          ticking.current = false;\n        });\n      }\n      ticking.current = true;\n    });\n    if (ref?.current) {\n      resizeObserver.observe(ref?.current);\n    }\n    return (): void => {\n      if (ref?.current) {\n        resizeObserver.unobserve(ref.current);\n      } else {\n        resizeObserver.disconnect();\n      }\n    };\n  }, [ref?.current]);\n\n  return size;\n};\n"],"mappings":";AASA,MAAa,WAAW,QAAmE;CACzF,MAAM,UAAU,OAAO,MAAM;CAC7B,MAAM,CAAC,MAAM,WAAW,UAAmB;AAC3C,iBAAgB;EACd,MAAM,iBAAiB,IAAI,gBAAe,YAAW;AACnD,OAAI,CAAC,QAAQ,QACX,QAAO,4BAA4B;AACjC,YAAQ,QAAQ,GAAG,OAAO,uBAAuB,CAAC;AAClD,YAAQ,UAAU;KAClB;AAEJ,WAAQ,UAAU;IAClB;AACF,MAAI,KAAK,QACP,gBAAe,QAAQ,KAAK,QAAQ;AAEtC,eAAmB;AACjB,OAAI,KAAK,QACP,gBAAe,UAAU,IAAI,QAAQ;OAErC,gBAAe,YAAY;;IAG9B,CAAC,KAAK,QAAQ,CAAC;AAElB,QAAO"}

package/lib/useToggle.js

@@ -1,24 +0,0 @@
-import { t as usePrevious } from "./usePrevious.js";
-import { useEffect, useState } from "react";
-const useToggle = (initialValue, callback) => {
-	const [value, setValue] = useState(initialValue);
-	const [prevInitialValue, setPrevInitialValue] = useState(initialValue);
-	const previousValue = usePrevious(value);
-	if (initialValue !== prevInitialValue) {
-		setPrevInitialValue(initialValue);
-		setValue(initialValue);
-	}
-	const toggleValue = () => {
-		setValue(!value);
-	};
-	useEffect(() => {
-		if (callback && value !== !!previousValue) callback(value);
-	}, [value, callback]);
-	return {
-		value,
-		toggleValue
-	};
-};
-export { useToggle as t };
-
-//# sourceMappingURL=useToggle.js.map

package/lib/useToggle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useToggle.js","names":[],"sources":["../src/hooks/useToggle.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\n\nimport { usePrevious } from './usePrevious';\n\n/**\n * Hook for å toggle en boolean og kjøre en callback når verdien endres\n *\n * @param initialValue Initiell verdi for boolean\n * @param callback Funksjon som kalles når value endrer verdi (optional)\n * @returns Objekt med nåværende verdi og funksjon som kan kalles for å toggle verdien\n */\nexport const useToggle = (initialValue: boolean, callback?: (value: boolean) => void): { value: boolean; toggleValue: () => void } => {\n  const [value, setValue] = useState(initialValue);\n  const [prevInitialValue, setPrevInitialValue] = useState(initialValue);\n  const previousValue = usePrevious(value);\n\n  if (initialValue !== prevInitialValue) {\n    setPrevInitialValue(initialValue);\n    setValue(initialValue);\n  }\n\n  const toggleValue = (): void => {\n    setValue(!value);\n  };\n\n  useEffect(() => {\n    if (callback && value !== !!previousValue) {\n      callback(value);\n    }\n  }, [value, callback]);\n\n  return { value, toggleValue };\n};\n"],"mappings":";;AAWA,MAAa,aAAa,cAAuB,aAAqF;CACpI,MAAM,CAAC,OAAO,YAAY,SAAS,aAAa;CAChD,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,aAAa;CACtE,MAAM,gBAAgB,YAAY,MAAM;AAExC,KAAI,iBAAiB,kBAAkB;AACrC,sBAAoB,aAAa;AACjC,WAAS,aAAa;;CAGxB,MAAM,oBAA0B;AAC9B,WAAS,CAAC,MAAM;;AAGlB,iBAAgB;AACd,MAAI,YAAY,UAAU,CAAC,CAAC,cAC1B,UAAS,MAAM;IAEhB,CAAC,OAAO,SAAS,CAAC;AAErB,QAAO;EAAE;EAAO;EAAa"}

package/lib/usestopPropagation.js

@@ -1,11 +0,0 @@
-import { useEffect } from "react";
-const useStopPropagation = (ref, events) => {
-	const handleEvent = (e) => e.stopPropagation();
-	useEffect(() => {
-		events.forEach((name) => ref?.current?.addEventListener(name, handleEvent));
-		return () => events.forEach((name) => ref.current?.removeEventListener(name, handleEvent));
-	}, [ref]);
-};
-export { useStopPropagation as t };
-
-//# sourceMappingURL=usestopPropagation.js.map

package/lib/usestopPropagation.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"usestopPropagation.js","names":[],"sources":["../src/hooks/usestopPropagation.ts"],"sourcesContent":["import { useEffect } from 'react';\n\n/**\n * Stopp eventer fra å boble opp videre i DOMen\n * @param ref Element som skal overvåkes\n * @param events Navn på eventer som ikke skal boble opp\n */\nexport const useStopPropagation = (ref: React.RefObject<HTMLElement | null>, events: string[]): void => {\n  const handleEvent = (e: Event): void => e.stopPropagation();\n\n  useEffect(() => {\n    events.forEach(name => ref?.current?.addEventListener(name, handleEvent));\n\n    return (): void => events.forEach(name => ref.current?.removeEventListener(name, handleEvent));\n  }, [ref]);\n};\n"],"mappings":";AAOA,MAAa,sBAAsB,KAA0C,WAA2B;CACtG,MAAM,eAAe,MAAmB,EAAE,iBAAiB;AAE3D,iBAAgB;AACd,SAAO,SAAQ,SAAQ,KAAK,SAAS,iBAAiB,MAAM,YAAY,CAAC;AAEzE,eAAmB,OAAO,SAAQ,SAAQ,IAAI,SAAS,oBAAoB,MAAM,YAAY,CAAC;IAC7F,CAAC,IAAI,CAAC"}

package/lib/viewport.js

@@ -1,7 +0,0 @@
-const isElementInViewport = (el) => {
-	const { top, left, bottom, right } = el.getBoundingClientRect();
-	return top >= 0 && left >= 0 && bottom <= (window.innerHeight || document.documentElement.clientHeight) && right <= (window.innerWidth || document.documentElement.clientWidth);
-};
-export { isElementInViewport as t };
-
-//# sourceMappingURL=viewport.js.map

package/lib/viewport.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"viewport.js","names":[],"sources":["../src/utils/viewport.ts"],"sourcesContent":["export const isElementInViewport = (el: HTMLElement): boolean => {\n  const { top, left, bottom, right } = el.getBoundingClientRect();\n\n  return (\n    top >= 0 &&\n    left >= 0 &&\n    bottom <= (window.innerHeight || document.documentElement.clientHeight) &&\n    right <= (window.innerWidth || document.documentElement.clientWidth)\n  );\n};\n"],"mappings":"AAAA,MAAa,uBAAuB,OAA6B;CAC/D,MAAM,EAAE,KAAK,MAAM,QAAQ,UAAU,GAAG,uBAAuB;AAE/D,QACE,OAAO,KACP,QAAQ,KACR,WAAW,OAAO,eAAe,SAAS,gBAAgB,iBAC1D,UAAU,OAAO,cAAc,SAAS,gBAAgB"}

package/lib/withBreakpoint.js

@@ -1,16 +0,0 @@
-import { n as useBreakpoint } from "./useBreakpoint.js";
-import { jsx } from "react/jsx-runtime";
-function withBreakpoint(Component) {
-	const WithBreakpoint = (props) => {
-		const breakpoint = useBreakpoint();
-		return /* @__PURE__ */ jsx(Component, {
-			...props,
-			breakpoint
-		});
-	};
-	return WithBreakpoint;
-}
-var withBreakpoint_default = withBreakpoint;
-export { withBreakpoint_default as n, withBreakpoint as t };
-
-//# sourceMappingURL=withBreakpoint.js.map

package/lib/withBreakpoint.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"withBreakpoint.js","names":["WithBreakpoint: React.FC<Omit<P, keyof BreakpointProps>>"],"sources":["../src/hoc/withBreakpoint/withBreakpoint.tsx"],"sourcesContent":["import type { Breakpoint } from '../../hooks/useBreakpoint';\n\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\n\nexport interface BreakpointProps {\n  breakpoint: Breakpoint;\n}\n\n// Hentet fra https://github.com/DefinitelyTyped/DefinitelyTyped/issues/35834#issuecomment-497605842\nexport function withBreakpoint<P extends BreakpointProps, C extends React.ComponentClass<P>>(\n  Component: C & React.ComponentType<P>\n): React.FC<Omit<React.ComponentPropsWithoutRef<C>, keyof BreakpointProps>>;\n\nexport function withBreakpoint<P extends BreakpointProps>(Component: React.FC<P>): React.FC<Omit<P, keyof BreakpointProps>>;\n\nexport function withBreakpoint<P extends BreakpointProps>(Component: React.ComponentType<P>): React.FC<Omit<P, keyof BreakpointProps>> {\n  const WithBreakpoint: React.FC<Omit<P, keyof BreakpointProps>> = props => {\n    const breakpoint = useBreakpoint();\n    return <Component {...(props as P)} breakpoint={breakpoint} />;\n  };\n  return WithBreakpoint;\n}\n\nexport default withBreakpoint;\n"],"mappings":";;AAeA,SAAgB,eAA0C,WAA6E;CACrI,MAAMA,kBAA2D,UAAS;EACxE,MAAM,aAAa,eAAe;AAClC,SAAO,oBAAC,WAAA;GAAU,GAAK;GAAyB;IAAc;;AAEhE,QAAO;;AAGT,IAAA,yBAAe"}