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

package/lib/getFilterChips.js

@@ -1,5 +1,6 @@
 import { t as Chip_default } from "./Chip.js";
 import { jsx } from "react/jsx-runtime";
+//#region src/components/Filter/getFilterChips/getFilterChips.tsx
 function getFilterChips({ filter, getLabel, onChipClick, onChipRemove, onOverflowChipClick, willShowCloseButton }) {
 	const maxVisible = 5;
 	const allChips = Object.entries(filter.filters).flatMap(([key, raw]) => {
@@ -24,7 +25,10 @@ function getFilterChips({ filter, getLabel, onChipClick, onChipRemove, onOverflo
 		children: `+${overflowCount}`
 	}, "overflow")];
 }
-var getFilterChips_default$1 = getFilterChips;
-export { getFilterChips_default$1 as t };
+//#endregion
+//#region src/components/Filter/getFilterChips/index.ts
+var getFilterChips_default = getFilterChips;
+//#endregion
+export { getFilterChips_default as t };
 
 //# sourceMappingURL=getFilterChips.js.map

package/lib/getFilterChips.js.map

@@ -1 +1 @@
-{"version":3,"file":"getFilterChips.js","names":[],"sources":["../src/components/Filter/getFilterChips/getFilterChips.tsx","../src/components/Filter/getFilterChips/index.ts"],"sourcesContent":["import type { FilterValues, UseFilterReturn } from '../useFilter';\n\nimport Chip from '../../Chip';\n\nexport interface GetFilterChipsArgs<T extends FilterValues> {\n  /** The filter instance from useFilter */\n  filter: UseFilterReturn<T>;\n  /** Look up the display label for a filter key + value */\n  getLabel: (key: keyof T, value: unknown) => string;\n  /** Called when a chip is clicked (f.ex. to open the drawer at that filter category) */\n  onChipClick: (key: keyof T, value: unknown) => void;\n  /** Called when a chip's close button is clicked. If not provided, defaults to filter.removeFilter */\n  onChipRemove?: (key: keyof T, value: unknown) => void;\n  /** Called when the overflow chip is clicked */\n  onOverflowChipClick: () => void;\n  /** Function for mapping if close button is shown on chip or not */\n  willShowCloseButton?: (key: keyof T, value?: unknown) => boolean;\n}\n\nfunction getFilterChips<T extends FilterValues>({\n  filter,\n  getLabel,\n  onChipClick,\n  onChipRemove,\n  onOverflowChipClick,\n  willShowCloseButton,\n}: GetFilterChipsArgs<T>): React.ReactNode[] {\n  const maxVisible = 5;\n\n  const allChips = Object.entries(filter.filters).flatMap(([key, raw]) => {\n    const values = [raw ?? []].flat();\n    return values.map(v => ({ key, value: v }));\n  });\n\n  const visibleChips = allChips.slice(0, maxVisible);\n  const overflowCount = allChips.length - maxVisible;\n\n  return [\n    visibleChips.map(({ key, value: v }) => (\n      <Chip\n        key={`${key}-${v}`}\n        onChipClick={() => onChipClick(key as keyof T, v)}\n        onCloseClick={() => {\n          if (onChipRemove) {\n            onChipRemove(key as keyof T, v);\n          } else {\n            filter.removeFilter(key, v);\n          }\n        }}\n        withCloseButton={willShowCloseButton?.(key, v)}\n      >\n        {getLabel(key as keyof T, v)}\n      </Chip>\n    )),\n    overflowCount > 0 && <Chip key=\"overflow\" onChipClick={onOverflowChipClick} withCloseButton={false}>{`+${overflowCount}`}</Chip>,\n  ];\n}\n\nexport default getFilterChips;\n","import getFilterChips from './getFilterChips';\nexport * from './getFilterChips';\nexport default getFilterChips;\n"],"mappings":";;AAmBA,SAAS,eAAuC,EAC9C,QACA,UACA,aACA,cACA,qBACA,uBAC2C;CAC3C,MAAM,aAAa;CAEnB,MAAM,WAAW,OAAO,QAAQ,OAAO,QAAQ,CAAC,SAAS,CAAC,KAAK,SAAS;AAEtE,SADe,CAAC,OAAO,EAAE,CAAC,CAAC,MAAM,CACnB,KAAI,OAAM;GAAE;GAAK,OAAO;GAAG,EAAE;GAC3C;CAEF,MAAM,eAAe,SAAS,MAAM,GAAG,WAAW;CAClD,MAAM,gBAAgB,SAAS,SAAS;AAExC,QAAO,CACL,aAAa,KAAK,EAAE,KAAK,OAAO,QAC9B,oBAAC,cAAA;EAEC,mBAAmB,YAAY,KAAgB,EAAE;EACjD,oBAAoB;AAClB,OAAI,aACF,cAAa,KAAgB,EAAE;OAE/B,QAAO,aAAa,KAAK,EAAE;;EAG/B,iBAAiB,sBAAsB,KAAK,EAAE;YAE7C,SAAS,KAAgB,EAAE;IAXvB,GAAG,IAAI,GAAG,IAYV,CACP,EACF,gBAAgB,KAAK,oBAAC,cAAA;EAAoB,aAAa;EAAqB,iBAAiB;YAAQ,IAAI;IAA1E,WAAiG,CACjI;;ACrDH,IAAA,2BDwDe"}
+{"version":3,"file":"getFilterChips.js","names":[],"sources":["../src/components/Filter/getFilterChips/getFilterChips.tsx","../src/components/Filter/getFilterChips/index.ts"],"sourcesContent":["import type { FilterValues, UseFilterReturn } from '../useFilter';\n\nimport Chip from '../../Chip';\n\nexport interface GetFilterChipsArgs<T extends FilterValues> {\n  /** The filter instance from useFilter */\n  filter: UseFilterReturn<T>;\n  /** Look up the display label for a filter key + value */\n  getLabel: (key: keyof T, value: unknown) => string;\n  /** Called when a chip is clicked (f.ex. to open the drawer at that filter category) */\n  onChipClick: (key: keyof T, value: unknown) => void;\n  /** Called when a chip's close button is clicked. If not provided, defaults to filter.removeFilter */\n  onChipRemove?: (key: keyof T, value: unknown) => void;\n  /** Called when the overflow chip is clicked */\n  onOverflowChipClick: () => void;\n  /** Function for mapping if close button is shown on chip or not */\n  willShowCloseButton?: (key: keyof T, value?: unknown) => boolean;\n}\n\nfunction getFilterChips<T extends FilterValues>({\n  filter,\n  getLabel,\n  onChipClick,\n  onChipRemove,\n  onOverflowChipClick,\n  willShowCloseButton,\n}: GetFilterChipsArgs<T>): React.ReactNode[] {\n  const maxVisible = 5;\n\n  const allChips = Object.entries(filter.filters).flatMap(([key, raw]) => {\n    const values = [raw ?? []].flat();\n    return values.map(v => ({ key, value: v }));\n  });\n\n  const visibleChips = allChips.slice(0, maxVisible);\n  const overflowCount = allChips.length - maxVisible;\n\n  return [\n    visibleChips.map(({ key, value: v }) => (\n      <Chip\n        key={`${key}-${v}`}\n        onChipClick={() => onChipClick(key as keyof T, v)}\n        onCloseClick={() => {\n          if (onChipRemove) {\n            onChipRemove(key as keyof T, v);\n          } else {\n            filter.removeFilter(key, v);\n          }\n        }}\n        withCloseButton={willShowCloseButton?.(key, v)}\n      >\n        {getLabel(key as keyof T, v)}\n      </Chip>\n    )),\n    overflowCount > 0 && <Chip key=\"overflow\" onChipClick={onOverflowChipClick} withCloseButton={false}>{`+${overflowCount}`}</Chip>,\n  ];\n}\n\nexport default getFilterChips;\n","import getFilterChips from './getFilterChips';\nexport * from './getFilterChips';\nexport default getFilterChips;\n"],"mappings":";;;AAmBA,SAAS,eAAuC,EAC9C,QACA,UACA,aACA,cACA,qBACA,uBAC2C;CAC3C,MAAM,aAAa;CAEnB,MAAM,WAAW,OAAO,QAAQ,OAAO,QAAQ,CAAC,SAAS,CAAC,KAAK,SAAS;EAEtE,OADe,CAAC,OAAO,EAAE,CAAC,CAAC,MACpB,CAAO,KAAI,OAAM;GAAE;GAAK,OAAO;GAAG,EAAE;GAC3C;CAEF,MAAM,eAAe,SAAS,MAAM,GAAG,WAAW;CAClD,MAAM,gBAAgB,SAAS,SAAS;CAExC,OAAO,CACL,aAAa,KAAK,EAAE,KAAK,OAAO,QAC9B,oBAAC,cAAD;EAEE,mBAAmB,YAAY,KAAgB,EAAE;EACjD,oBAAoB;GAClB,IAAI,cACF,aAAa,KAAgB,EAAE;QAE/B,OAAO,aAAa,KAAK,EAAE;;EAG/B,iBAAiB,sBAAsB,KAAK,EAAE;YAE7C,SAAS,KAAgB,EAAE;EACvB,EAZA,GAAG,IAAI,GAAG,IAYV,CACP,EACF,gBAAgB,KAAK,oBAAC,cAAD;EAAqB,aAAa;EAAqB,iBAAiB;YAAQ,IAAI;EAAuB,EAAjG,WAAiG,CACjI;;;;ACrDH,IAAA,yBAAe"}

package/lib/hoc/withBreakpoint/index.js

@@ -1,5 +1,7 @@
-import { n as withBreakpoint_default$1, t as withBreakpoint } from "../../withBreakpoint.js";
-var withBreakpoint_default = withBreakpoint_default$1;
+import withBreakpoint from "./withBreakpoint.js";
+//#region src/hoc/withBreakpoint/index.ts
+var withBreakpoint_default = withBreakpoint;
+//#endregion
 export { withBreakpoint_default as default, withBreakpoint };
 
 //# sourceMappingURL=index.js.map

package/lib/hoc/withBreakpoint/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/hoc/withBreakpoint/index.ts"],"sourcesContent":["import withBreakpoint from './withBreakpoint';\nexport * from './withBreakpoint';\nexport default withBreakpoint;\n"],"mappings":";AAEA,IAAA,yBAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/hoc/withBreakpoint/index.ts"],"sourcesContent":["import withBreakpoint from './withBreakpoint';\nexport * from './withBreakpoint';\nexport default withBreakpoint;\n"],"mappings":";;AAEA,IAAA,yBAAe"}

package/lib/hoc/withBreakpoint/withBreakpoint.js

@@ -1,2 +1,17 @@
-import { n as withBreakpoint_default, t as withBreakpoint } from "../../withBreakpoint.js";
-export { withBreakpoint_default as default, withBreakpoint };
+import { useBreakpoint } from "../../hooks/useBreakpoint.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/hoc/withBreakpoint/withBreakpoint.tsx
+function withBreakpoint(Component) {
+	const WithBreakpoint = (props) => {
+		const breakpoint = useBreakpoint();
+		return /* @__PURE__ */ jsx(Component, {
+			...props,
+			breakpoint
+		});
+	};
+	return WithBreakpoint;
+}
+//#endregion
+export { withBreakpoint as default, withBreakpoint };
+
+//# sourceMappingURL=withBreakpoint.js.map

package/lib/hoc/withBreakpoint/withBreakpoint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"withBreakpoint.js","names":[],"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,MAAM,kBAA2D,UAAS;EACxE,MAAM,aAAa,eAAe;EAClC,OAAO,oBAAC,WAAD;GAAW,GAAK;GAAyB;GAAc,CAAA;;CAEhE,OAAO"}

package/lib/hooks/useBreakpoint.js

@@ -1,2 +1,43 @@
-import { n as useBreakpoint, t as Breakpoint } from "../useBreakpoint.js";
+import { breakpoints, screen } from "../theme/grid.js";
+import { useSyncExternalStore } from "react";
+//#region src/hooks/useBreakpoint.ts
+var Breakpoint = /* @__PURE__ */ function(Breakpoint) {
+	Breakpoint[Breakpoint["xxs"] = breakpoints.xxs] = "xxs";
+	Breakpoint[Breakpoint["xs"] = breakpoints.xs] = "xs";
+	Breakpoint[Breakpoint["sm"] = breakpoints.sm] = "sm";
+	Breakpoint[Breakpoint["md"] = breakpoints.md] = "md";
+	Breakpoint[Breakpoint["lg"] = breakpoints.lg] = "lg";
+	Breakpoint[Breakpoint["xl"] = breakpoints.xl] = "xl";
+	return Breakpoint;
+}({});
+/** Sjekker nettleserens media queries fra største til minste; det høyeste treffet gjelder */
+function getCurrentBreakpoint() {
+	return Object.entries(screen).reverse().map(([size, mediaQuery]) => {
+		return {
+			breakpoint: Breakpoint[size],
+			mq: window.matchMedia(mediaQuery)
+		};
+	}).find((entry) => entry.mq.matches)?.breakpoint ?? Breakpoint.xxs;
+}
+/** Event listeners for media queries - dette varslet React ved endringer */
+function subscribeToBreakpointChanges(callback) {
+	const mediaQueryList = Object.values(screen).map((mediaQuery) => {
+		const mq = window.matchMedia(mediaQuery);
+		mq.addEventListener("change", callback);
+		return mq;
+	});
+	return () => {
+		mediaQueryList.forEach((mq) => {
+			mq.removeEventListener("change", callback);
+		});
+	};
+}
+/** Brukes ved server side rendering der window ikke finnes. Returnerer minste breakpoint som default */
+var getServerSnapshot = () => Breakpoint.xxs;
+var useBreakpoint = () => {
+	return useSyncExternalStore(subscribeToBreakpointChanges, getCurrentBreakpoint, getServerSnapshot);
+};
+//#endregion
 export { Breakpoint, useBreakpoint };
+
+//# sourceMappingURL=useBreakpoint.js.map

package/lib/hooks/useBreakpoint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBreakpoint.js","names":[],"sources":["../../src/hooks/useBreakpoint.ts"],"sourcesContent":["import { useSyncExternalStore } from 'react';\n\nimport { breakpoints, screen } from '../theme/grid';\n\nexport enum Breakpoint {\n  xxs = breakpoints.xxs,\n  xs = breakpoints.xs,\n  sm = breakpoints.sm,\n  md = breakpoints.md,\n  lg = breakpoints.lg,\n  xl = breakpoints.xl,\n}\n\n/** Sjekker nettleserens media queries fra største til minste; det høyeste treffet gjelder */\nfunction getCurrentBreakpoint(): Breakpoint {\n  const mediaQueryList = Object.entries(screen)\n    .reverse() // Sjekk xl, lg, md, osv. i synkende rekkefølge\n    .map(([size, mediaQuery]) => {\n      return {\n        breakpoint: Breakpoint[size as keyof typeof Breakpoint],\n        mq: window.matchMedia(mediaQuery),\n      };\n    });\n\n  const matched = mediaQueryList.find(entry => entry.mq.matches);\n  return matched?.breakpoint ?? Breakpoint.xxs;\n}\n\n/** Event listeners for media queries - dette varslet React ved endringer */\nfunction subscribeToBreakpointChanges(callback: () => void): () => void {\n  const mediaQueryList = Object.values(screen).map(mediaQuery => {\n    const mq = window.matchMedia(mediaQuery);\n    mq.addEventListener('change', callback);\n    return mq;\n  });\n\n  return (): void => {\n    mediaQueryList.forEach(mq => {\n      mq.removeEventListener('change', callback);\n    });\n  };\n}\n\n/** Brukes ved server side rendering der window ikke finnes. Returnerer minste breakpoint som default */\nconst getServerSnapshot = (): Breakpoint => Breakpoint.xxs;\n\nexport const useBreakpoint = (): Breakpoint => {\n  return useSyncExternalStore(subscribeToBreakpointChanges, getCurrentBreakpoint, getServerSnapshot);\n};\n"],"mappings":";;;AAIA,IAAY,aAAL,yBAAA,YAAA;CACL,WAAA,WAAA,SAAM,YAAY,OAAA;CAClB,WAAA,WAAA,QAAK,YAAY,MAAA;CACjB,WAAA,WAAA,QAAK,YAAY,MAAA;CACjB,WAAA,WAAA,QAAK,YAAY,MAAA;CACjB,WAAA,WAAA,QAAK,YAAY,MAAA;CACjB,WAAA,WAAA,QAAK,YAAY,MAAA;;KAClB;;AAGD,SAAS,uBAAmC;CAW1C,OAVuB,OAAO,QAAQ,OAAO,CAC1C,SAAS,CACT,KAAK,CAAC,MAAM,gBAAgB;EAC3B,OAAO;GACL,YAAY,WAAW;GACvB,IAAI,OAAO,WAAW,WAAW;GAClC;GAGW,CAAe,MAAK,UAAS,MAAM,GAAG,QAC/C,EAAS,cAAc,WAAW;;;AAI3C,SAAS,6BAA6B,UAAkC;CACtE,MAAM,iBAAiB,OAAO,OAAO,OAAO,CAAC,KAAI,eAAc;EAC7D,MAAM,KAAK,OAAO,WAAW,WAAW;EACxC,GAAG,iBAAiB,UAAU,SAAS;EACvC,OAAO;GACP;CAEF,aAAmB;EACjB,eAAe,SAAQ,OAAM;GAC3B,GAAG,oBAAoB,UAAU,SAAS;IAC1C;;;;AAKN,IAAM,0BAAsC,WAAW;AAEvD,IAAa,sBAAkC;CAC7C,OAAO,qBAAqB,8BAA8B,sBAAsB,kBAAkB"}

package/lib/hooks/useElementList.js

@@ -1,2 +1,47 @@
-import { t as useElementList } from "../useElementList.js";
+import { useEffect, useRef, useState } from "react";
+//#region src/hooks/useElementList.ts
+/**
+* Hent ut en liste med HTML-elementer. Bruker MutationObserver-APIet.
+* @param ref Element som skal observeres
+* @param selectors Selektorer som sendes til querySelectorAll for å hente ut liste med elementer
+* @param options MutationObserver-options. Default er å lytte på endringer på child-elementer og deres attributter.
+* @returns Liste med HTML-elementer
+*/
+var useElementList = (ref, selectors, options) => {
+	const [elementList, setElementList] = useState();
+	const previousElementsRef = useRef([]);
+	useEffect(() => {
+		const handleMutationChange = () => {
+			const elements = ref.current?.querySelectorAll(selectors);
+			if (!elements) {
+				if (previousElementsRef.current.length > 0) {
+					previousElementsRef.current = [];
+					setElementList(void 0);
+				}
+				return;
+			}
+			const elementsArray = Array.from(elements);
+			const previousElements = previousElementsRef.current;
+			if (elementsArray.length !== previousElements.length || elementsArray.some((el, i) => el !== previousElements[i])) {
+				previousElementsRef.current = elementsArray;
+				setElementList(elements);
+			}
+		};
+		const mutationObserver = new MutationObserver(handleMutationChange);
+		if (ref?.current) mutationObserver.observe(ref.current, {
+			subtree: true,
+			childList: true,
+			attributes: true,
+			...options
+		});
+		handleMutationChange();
+		return () => {
+			mutationObserver.disconnect();
+		};
+	}, [ref, selectors]);
+	return elementList;
+};
+//#endregion
 export { useElementList };
+
+//# sourceMappingURL=useElementList.js.map

package/lib/hooks/useElementList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useElementList.js","names":[],"sources":["../../src/hooks/useElementList.ts"],"sourcesContent":["import { useState, useEffect, useRef } from 'react';\n\n/**\n * Hent ut en liste med HTML-elementer. Bruker MutationObserver-APIet.\n * @param ref Element som skal observeres\n * @param selectors Selektorer som sendes til querySelectorAll for å hente ut liste med elementer\n * @param options MutationObserver-options. Default er å lytte på endringer på child-elementer og deres attributter.\n * @returns Liste med HTML-elementer\n */\nexport const useElementList = (\n  ref: React.RefObject<HTMLElement | null>,\n  selectors: string,\n  options?: MutationObserverInit\n): NodeListOf<HTMLElement> | undefined => {\n  const [elementList, setElementList] = useState<NodeListOf<HTMLElement>>();\n  const previousElementsRef = useRef<HTMLElement[]>([]);\n\n  useEffect(() => {\n    const handleMutationChange = (): void => {\n      const elements = ref.current?.querySelectorAll<HTMLElement>(selectors);\n      if (!elements) {\n        if (previousElementsRef.current.length > 0) {\n          previousElementsRef.current = [];\n          setElementList(undefined);\n        }\n        return;\n      }\n\n      // We check if an element has been added/removed to avoid extra state updates on other changes.\n      const elementsArray = Array.from(elements);\n      const previousElements = previousElementsRef.current;\n\n      const hasChanged = elementsArray.length !== previousElements.length || elementsArray.some((el, i) => el !== previousElements[i]);\n\n      if (hasChanged) {\n        previousElementsRef.current = elementsArray;\n        setElementList(elements);\n      }\n    };\n\n    const mutationObserver = new MutationObserver(handleMutationChange);\n    if (ref?.current) {\n      mutationObserver.observe(ref.current, { subtree: true, childList: true, attributes: true, ...options });\n    }\n\n    handleMutationChange();\n\n    return (): void => {\n      mutationObserver.disconnect();\n    };\n  }, [ref, selectors]);\n\n  return elementList;\n};\n"],"mappings":";;;;;;;;;AASA,IAAa,kBACX,KACA,WACA,YACwC;CACxC,MAAM,CAAC,aAAa,kBAAkB,UAAmC;CACzE,MAAM,sBAAsB,OAAsB,EAAE,CAAC;CAErD,gBAAgB;EACd,MAAM,6BAAmC;GACvC,MAAM,WAAW,IAAI,SAAS,iBAA8B,UAAU;GACtE,IAAI,CAAC,UAAU;IACb,IAAI,oBAAoB,QAAQ,SAAS,GAAG;KAC1C,oBAAoB,UAAU,EAAE;KAChC,eAAe,KAAA,EAAU;;IAE3B;;GAIF,MAAM,gBAAgB,MAAM,KAAK,SAAS;GAC1C,MAAM,mBAAmB,oBAAoB;GAI7C,IAFmB,cAAc,WAAW,iBAAiB,UAAU,cAAc,MAAM,IAAI,MAAM,OAAO,iBAAiB,GAAG,EAEhH;IACd,oBAAoB,UAAU;IAC9B,eAAe,SAAS;;;EAI5B,MAAM,mBAAmB,IAAI,iBAAiB,qBAAqB;EACnE,IAAI,KAAK,SACP,iBAAiB,QAAQ,IAAI,SAAS;GAAE,SAAS;GAAM,WAAW;GAAM,YAAY;GAAM,GAAG;GAAS,CAAC;EAGzG,sBAAsB;EAEtB,aAAmB;GACjB,iBAAiB,YAAY;;IAE9B,CAAC,KAAK,UAAU,CAAC;CAEpB,OAAO"}

package/lib/hooks/useEventListenerState.js

@@ -1,5 +1,6 @@
 import React from "react";
-const useEventListenerState = (initial) => {
+//#region src/hooks/useEventListenerState.ts
+var useEventListenerState = (initial) => {
 	const [value, _setValue] = React.useState(initial);
 	const valueRef = React.useRef(value);
 	const setValue = (x) => {
@@ -8,6 +9,7 @@ const useEventListenerState = (initial) => {
 	};
 	return [valueRef, setValue];
 };
+//#endregion
 export { useEventListenerState };
 
 //# sourceMappingURL=useEventListenerState.js.map

package/lib/hooks/useEventListenerState.js.map

@@ -1 +1 @@
-{"version":3,"file":"useEventListenerState.js","names":[],"sources":["../../src/hooks/useEventListenerState.ts"],"sourcesContent":["import React from 'react';\n\nexport const useEventListenerState = <T>(initial?: T): [valueRef: React.MutableRefObject<T | undefined>, setValue: (x: T) => void] => {\n  const [value, _setValue] = React.useState<T | undefined>(initial);\n\n  const valueRef = React.useRef(value);\n\n  const setValue = (x: T): void => {\n    valueRef.current = x;\n    _setValue(x);\n  };\n\n  return [valueRef, setValue];\n};\n"],"mappings":";AAEA,MAAa,yBAA4B,YAA6F;CACpI,MAAM,CAAC,OAAO,aAAa,MAAM,SAAwB,QAAQ;CAEjE,MAAM,WAAW,MAAM,OAAO,MAAM;CAEpC,MAAM,YAAY,MAAe;AAC/B,WAAS,UAAU;AACnB,YAAU,EAAE;;AAGd,QAAO,CAAC,UAAU,SAAS"}
+{"version":3,"file":"useEventListenerState.js","names":[],"sources":["../../src/hooks/useEventListenerState.ts"],"sourcesContent":["import React from 'react';\n\nexport const useEventListenerState = <T>(initial?: T): [valueRef: React.MutableRefObject<T | undefined>, setValue: (x: T) => void] => {\n  const [value, _setValue] = React.useState<T | undefined>(initial);\n\n  const valueRef = React.useRef(value);\n\n  const setValue = (x: T): void => {\n    valueRef.current = x;\n    _setValue(x);\n  };\n\n  return [valueRef, setValue];\n};\n"],"mappings":";;AAEA,IAAa,yBAA4B,YAA6F;CACpI,MAAM,CAAC,OAAO,aAAa,MAAM,SAAwB,QAAQ;CAEjE,MAAM,WAAW,MAAM,OAAO,MAAM;CAEpC,MAAM,YAAY,MAAe;EAC/B,SAAS,UAAU;EACnB,UAAU,EAAE;;CAGd,OAAO,CAAC,UAAU,SAAS"}

package/lib/hooks/useExpand.js

@@ -1,2 +1,20 @@
-import { t as useExpand } from "../useExpand.js";
+import { usePrevious } from "./usePrevious.js";
+import { useEffect, useState } from "react";
+//#region src/hooks/useExpand.ts
+var useExpand = (expanded, onExpand) => {
+	const [isExpanded, setIsExpanded] = useState(expanded);
+	const [prevExpanded, setPrevExpanded] = useState(expanded);
+	const previousIsExpanded = usePrevious(isExpanded);
+	if (expanded !== prevExpanded) {
+		setPrevExpanded(expanded);
+		setIsExpanded(expanded);
+	}
+	useEffect(() => {
+		if (onExpand && isExpanded !== !!previousIsExpanded) onExpand(isExpanded);
+	}, [isExpanded, onExpand]);
+	return [isExpanded, setIsExpanded];
+};
+//#endregion
 export { useExpand };
+
+//# sourceMappingURL=useExpand.js.map

package/lib/hooks/useExpand.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useExpand.js","names":[],"sources":["../../src/hooks/useExpand.ts"],"sourcesContent":["import type { Dispatch, SetStateAction } from 'react';\nimport { useEffect, useState } from 'react';\n\nimport { usePrevious } from './usePrevious';\n\nexport const useExpand = (expanded: boolean, onExpand?: (isExpanded: boolean) => void): [boolean, Dispatch<SetStateAction<boolean>>] => {\n  const [isExpanded, setIsExpanded] = useState(expanded);\n  const [prevExpanded, setPrevExpanded] = useState(expanded);\n  const previousIsExpanded = usePrevious(isExpanded);\n\n  if (expanded !== prevExpanded) {\n    setPrevExpanded(expanded);\n    setIsExpanded(expanded);\n  }\n\n  useEffect(() => {\n    if (onExpand && isExpanded !== !!previousIsExpanded) {\n      onExpand(isExpanded);\n    }\n  }, [isExpanded, onExpand]);\n\n  return [isExpanded, setIsExpanded];\n};\n"],"mappings":";;;AAKA,IAAa,aAAa,UAAmB,aAA2F;CACtI,MAAM,CAAC,YAAY,iBAAiB,SAAS,SAAS;CACtD,MAAM,CAAC,cAAc,mBAAmB,SAAS,SAAS;CAC1D,MAAM,qBAAqB,YAAY,WAAW;CAElD,IAAI,aAAa,cAAc;EAC7B,gBAAgB,SAAS;EACzB,cAAc,SAAS;;CAGzB,gBAAgB;EACd,IAAI,YAAY,eAAe,CAAC,CAAC,oBAC/B,SAAS,WAAW;IAErB,CAAC,YAAY,SAAS,CAAC;CAE1B,OAAO,CAAC,YAAY,cAAc"}

package/lib/hooks/useFocusToggle.js

@@ -1,2 +1,35 @@
-import { t as useFocusToggle } from "../useFocusToggle.js";
+import { useElementList } from "./useElementList.js";
+import { FOCUSABLE_SELECTORS } from "./useFocusableElements.js";
+import { useEffect } from "react";
+//#region src/hooks/useFocusToggle.ts
+/**
+* Skru av og på fokus på fokuserbare elementer slik at de kan være en del av DOMen, men samtidig
+* ikke kunne fokuseres/tabbes til med tastaturet.
+* @param ref Alle barn av dette elementet vil sjekkes for om de er fokuserbare
+* @param allowFocus Om elementene skal være fokuserbare eller ikke
+* @returns void
+*/
+var useFocusToggle = (ref, allowFocus) => {
+	const focusableElementList = useElementList(ref, FOCUSABLE_SELECTORS, { attributes: false });
+	useEffect(() => {
+		const TABINDEX_ATTRIBUTE_NAME = "tabindex";
+		const PREVIOUS_TABINDEX_ATTRIBUTE_NAME = "data-tabindex";
+		if (allowFocus) focusableElementList?.forEach((el) => {
+			const prevTabIndex = el.getAttribute(PREVIOUS_TABINDEX_ATTRIBUTE_NAME);
+			if (prevTabIndex) el.setAttribute(TABINDEX_ATTRIBUTE_NAME, prevTabIndex);
+			else el.removeAttribute(TABINDEX_ATTRIBUTE_NAME);
+		});
+		else focusableElementList?.forEach((el) => {
+			if (el.hasAttribute(TABINDEX_ATTRIBUTE_NAME)) el.setAttribute(PREVIOUS_TABINDEX_ATTRIBUTE_NAME, `${el.tabIndex}`);
+			el.tabIndex = -1;
+		});
+	}, [
+		ref,
+		allowFocus,
+		focusableElementList
+	]);
+};
+//#endregion
 export { useFocusToggle };
+
+//# sourceMappingURL=useFocusToggle.js.map

package/lib/hooks/useFocusToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusToggle.js","names":[],"sources":["../../src/hooks/useFocusToggle.ts"],"sourcesContent":["import { useEffect } from 'react';\n\nimport { useElementList } from './useElementList';\nimport { FOCUSABLE_SELECTORS } from './useFocusableElements';\n\n/**\n * Skru av og på fokus på fokuserbare elementer slik at de kan være en del av DOMen, men samtidig\n * ikke kunne fokuseres/tabbes til med tastaturet.\n * @param ref Alle barn av dette elementet vil sjekkes for om de er fokuserbare\n * @param allowFocus Om elementene skal være fokuserbare eller ikke\n * @returns void\n */\nexport const useFocusToggle = (ref: React.RefObject<HTMLElement | null>, allowFocus?: boolean): void => {\n  // Kan ikke lytte på endringer i attributter, fordi det vil føre til en loop når vi endrer dem etterpå\n  const focusableElementList = useElementList(ref, FOCUSABLE_SELECTORS, { attributes: false });\n\n  useEffect(() => {\n    const TABINDEX_ATTRIBUTE_NAME = 'tabindex';\n    const PREVIOUS_TABINDEX_ATTRIBUTE_NAME = 'data-tabindex';\n    if (allowFocus) {\n      focusableElementList?.forEach(el => {\n        // Sett tabIndex tilbake til verdien den hadde før, eller fjern tabIndex\n        // slik at elementet kan tabbes til igjen.\n        const prevTabIndex = el.getAttribute(PREVIOUS_TABINDEX_ATTRIBUTE_NAME);\n        if (prevTabIndex) {\n          el.setAttribute(TABINDEX_ATTRIBUTE_NAME, prevTabIndex);\n        } else {\n          el.removeAttribute(TABINDEX_ATTRIBUTE_NAME);\n        }\n      });\n    } else {\n      focusableElementList?.forEach(el => {\n        // Hvis elementet allerede har tabIndex, ta vare på den før vi gjør det umulig å\n        // tabbe til det.\n        if (el.hasAttribute(TABINDEX_ATTRIBUTE_NAME)) {\n          el.setAttribute(PREVIOUS_TABINDEX_ATTRIBUTE_NAME, `${el.tabIndex}`);\n        }\n        el.tabIndex = -1;\n      });\n    }\n  }, [ref, allowFocus, focusableElementList]);\n};\n"],"mappings":";;;;;;;;;;;AAYA,IAAa,kBAAkB,KAA0C,eAA+B;CAEtG,MAAM,uBAAuB,eAAe,KAAK,qBAAqB,EAAE,YAAY,OAAO,CAAC;CAE5F,gBAAgB;EACd,MAAM,0BAA0B;EAChC,MAAM,mCAAmC;EACzC,IAAI,YACF,sBAAsB,SAAQ,OAAM;GAGlC,MAAM,eAAe,GAAG,aAAa,iCAAiC;GACtE,IAAI,cACF,GAAG,aAAa,yBAAyB,aAAa;QAEtD,GAAG,gBAAgB,wBAAwB;IAE7C;OAEF,sBAAsB,SAAQ,OAAM;GAGlC,IAAI,GAAG,aAAa,wBAAwB,EAC1C,GAAG,aAAa,kCAAkC,GAAG,GAAG,WAAW;GAErE,GAAG,WAAW;IACd;IAEH;EAAC;EAAK;EAAY;EAAqB,CAAC"}

package/lib/hooks/useFocusTrap.js

@@ -1,2 +1,40 @@
-import { n as useFocusTrap_default, t as useFocusTrap } from "../useFocusTrap.js";
-export { useFocusTrap_default as default, useFocusTrap };
+import { useFocusableElements } from "./useFocusableElements.js";
+import { getDocumentActiveElement } from "../utils/focus.js";
+import { useEffect } from "react";
+//#region src/hooks/useFocusTrap.ts
+/**
+* Lås fokus til et bestemt element. Bruker vil bare kunne tabbe mellom fokuserbare elementer innenfor elementet.
+* @param ref Alle barn av dette elementet vil være fokuserbare, elementer utenfor vil ikke det
+* @param trapFocus Om fokus skal "trappes" innenfor elementet eller ikke. Default=true.
+*/
+var useFocusTrap = (ref, trapFocus = true) => {
+	const focusableElementList = useFocusableElements(ref);
+	const handleKeyboardEvent = (e) => {
+		if (trapFocus && ref.current && focusableElementList?.length && e.key === "Tab") {
+			const activeElement = getDocumentActiveElement(ref.current);
+			const firstElement = focusableElementList[0];
+			const lastElement = focusableElementList.length === 1 ? firstElement : focusableElementList[focusableElementList.length - 1];
+			if (e.shiftKey && activeElement === firstElement) {
+				lastElement.focus();
+				e.preventDefault();
+			} else if (!e.shiftKey && activeElement === lastElement) {
+				firstElement.focus();
+				e.preventDefault();
+			}
+		}
+	};
+	useEffect(() => {
+		ref.current?.addEventListener("keydown", handleKeyboardEvent);
+		return () => {
+			ref.current?.removeEventListener("keydown", handleKeyboardEvent);
+		};
+	}, [
+		ref,
+		trapFocus,
+		focusableElementList
+	]);
+};
+//#endregion
+export { useFocusTrap as default, useFocusTrap };
+
+//# sourceMappingURL=useFocusTrap.js.map

package/lib/hooks/useFocusTrap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusTrap.js","names":[],"sources":["../../src/hooks/useFocusTrap.ts"],"sourcesContent":["import { useEffect } from 'react';\n\nimport { useFocusableElements } from './useFocusableElements';\nimport { getDocumentActiveElement } from '../utils/focus';\n\n/**\n * Lås fokus til et bestemt element. Bruker vil bare kunne tabbe mellom fokuserbare elementer innenfor elementet.\n * @param ref Alle barn av dette elementet vil være fokuserbare, elementer utenfor vil ikke det\n * @param trapFocus Om fokus skal \"trappes\" innenfor elementet eller ikke. Default=true.\n */\nexport const useFocusTrap = (ref: React.RefObject<HTMLElement | null>, trapFocus = true): void => {\n  const focusableElementList = useFocusableElements(ref);\n\n  const handleKeyboardEvent = (e: KeyboardEvent): void => {\n    if (trapFocus && ref.current && focusableElementList?.length && e.key === 'Tab') {\n      const activeElement = getDocumentActiveElement(ref.current);\n      const firstElement = focusableElementList[0];\n      const lastElement = focusableElementList.length === 1 ? firstElement : focusableElementList[focusableElementList.length - 1];\n\n      if (e.shiftKey && activeElement === firstElement) {\n        /* shift + tab */\n        lastElement.focus();\n        e.preventDefault();\n      } else if (!e.shiftKey && activeElement === lastElement) {\n        /* tab */\n        firstElement.focus();\n        e.preventDefault();\n      }\n    }\n  };\n\n  useEffect(() => {\n    ref.current?.addEventListener('keydown', handleKeyboardEvent);\n\n    return (): void => {\n      ref.current?.removeEventListener('keydown', handleKeyboardEvent);\n    };\n  }, [ref, trapFocus, focusableElementList]); // focusableElementList må være med som dependency for at handleKeyboardEvent skal få oppdatert state\n};\n\nexport default useFocusTrap;\n"],"mappings":";;;;;;;;;AAUA,IAAa,gBAAgB,KAA0C,YAAY,SAAe;CAChG,MAAM,uBAAuB,qBAAqB,IAAI;CAEtD,MAAM,uBAAuB,MAA2B;EACtD,IAAI,aAAa,IAAI,WAAW,sBAAsB,UAAU,EAAE,QAAQ,OAAO;GAC/E,MAAM,gBAAgB,yBAAyB,IAAI,QAAQ;GAC3D,MAAM,eAAe,qBAAqB;GAC1C,MAAM,cAAc,qBAAqB,WAAW,IAAI,eAAe,qBAAqB,qBAAqB,SAAS;GAE1H,IAAI,EAAE,YAAY,kBAAkB,cAAc;IAEhD,YAAY,OAAO;IACnB,EAAE,gBAAgB;UACb,IAAI,CAAC,EAAE,YAAY,kBAAkB,aAAa;IAEvD,aAAa,OAAO;IACpB,EAAE,gBAAgB;;;;CAKxB,gBAAgB;EACd,IAAI,SAAS,iBAAiB,WAAW,oBAAoB;EAE7D,aAAmB;GACjB,IAAI,SAAS,oBAAoB,WAAW,oBAAoB;;IAEjE;EAAC;EAAK;EAAW;EAAqB,CAAC"}

package/lib/hooks/useFocusableElements.js

@@ -1,2 +1,34 @@
-import { n as useFocusableElements, t as FOCUSABLE_SELECTORS } from "../useFocusableElements.js";
+import { useElementList } from "./useElementList.js";
+//#region src/hooks/useFocusableElements.ts
+var FOCUSABLE_SELECTORS = [
+	"a[href]:not([tabindex^=\"-\"])",
+	"area[href]:not([tabindex^=\"-\"])",
+	"input:not([type=\"hidden\"]):not([type=\"radio\"]):not([disabled]):not([tabindex^=\"-\"])",
+	"input[type=\"radio\"]:not([disabled]):not([tabindex^=\"-\"])",
+	"select:not([disabled]):not([tabindex^=\"-\"])",
+	"textarea:not([disabled]):not([tabindex^=\"-\"])",
+	"button:not([disabled]):not([tabindex^=\"-\"])",
+	"iframe:not([tabindex^=\"-\"])",
+	"audio[controls]:not([tabindex^=\"-\"])",
+	"video[controls]:not([tabindex^=\"-\"])",
+	"[contenteditable]:not([tabindex^=\"-\"])",
+	"[tabindex]:not([tabindex^=\"-\"])"
+].join(",");
+/**
+* Overvåk et element og finn alle fokuserbare elementer inne i elementet. Bruker MutationObserver slik at eventuelle
+* nye elementer som legges til også vil inkluderes i listen.
+* @param ref Element som skal observeres
+* @returns Liste med fokuserbare HTML-elementer
+*/
+var useFocusableElements = (ref) => useElementList(ref, FOCUSABLE_SELECTORS, { attributeFilter: [
+	"href",
+	"tabindex",
+	"type",
+	"disabled",
+	"controls",
+	"contenteditable"
+] });
+//#endregion
 export { FOCUSABLE_SELECTORS, useFocusableElements };
+
+//# sourceMappingURL=useFocusableElements.js.map

package/lib/hooks/useFocusableElements.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusableElements.js","names":[],"sources":["../../src/hooks/useFocusableElements.ts"],"sourcesContent":["import { useElementList } from './useElementList';\n\n// Fra https://github.com/KittyGiraudel/focusable-selectors\nexport const FOCUSABLE_SELECTORS = [\n  'a[href]:not([tabindex^=\"-\"])',\n  'area[href]:not([tabindex^=\"-\"])',\n  'input:not([type=\"hidden\"]):not([type=\"radio\"]):not([disabled]):not([tabindex^=\"-\"])',\n  'input[type=\"radio\"]:not([disabled]):not([tabindex^=\"-\"])',\n  'select:not([disabled]):not([tabindex^=\"-\"])',\n  'textarea:not([disabled]):not([tabindex^=\"-\"])',\n  'button:not([disabled]):not([tabindex^=\"-\"])',\n  'iframe:not([tabindex^=\"-\"])',\n  'audio[controls]:not([tabindex^=\"-\"])',\n  'video[controls]:not([tabindex^=\"-\"])',\n  '[contenteditable]:not([tabindex^=\"-\"])',\n  '[tabindex]:not([tabindex^=\"-\"])',\n].join(',');\n\n/**\n * Overvåk et element og finn alle fokuserbare elementer inne i elementet. Bruker MutationObserver slik at eventuelle\n * nye elementer som legges til også vil inkluderes i listen.\n * @param ref Element som skal observeres\n * @returns Liste med fokuserbare HTML-elementer\n */\nexport const useFocusableElements = (ref: React.RefObject<HTMLElement | null>): NodeListOf<HTMLElement> | undefined =>\n  useElementList(ref, FOCUSABLE_SELECTORS, { attributeFilter: ['href', 'tabindex', 'type', 'disabled', 'controls', 'contenteditable'] });\n"],"mappings":";;AAGA,IAAa,sBAAsB;CACjC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,CAAC,KAAK,IAAI;;;;;;;AAQX,IAAa,wBAAwB,QACnC,eAAe,KAAK,qBAAqB,EAAE,iBAAiB;CAAC;CAAQ;CAAY;CAAQ;CAAY;CAAY;CAAkB,EAAE,CAAC"}

package/lib/hooks/useIcons.js

@@ -1,2 +1,28 @@
-import { t as useIcons } from "../useIcons.js";
+import { t as Icon_default } from "../Icon.js";
+import { t as LazyIcon_default } from "../LazyIcon.js";
+import { isComponent } from "../utils/component.js";
+//#region src/hooks/useIcons.ts
+var useIcons = (children) => {
+	let leftIcon = null;
+	let rightIcon = null;
+	const firstChild = children[0];
+	if (isComponent(firstChild, Icon_default) || isComponent(firstChild, LazyIcon_default)) {
+		leftIcon = firstChild;
+		children.shift();
+	}
+	const lastChild = children[children.length - 1];
+	if (isComponent(lastChild, Icon_default) || isComponent(lastChild, LazyIcon_default)) {
+		rightIcon = lastChild;
+		children.pop();
+	}
+	const restChildren = children.filter((child) => child);
+	return [
+		leftIcon,
+		rightIcon,
+		restChildren.length > 0 ? restChildren : null
+	];
+};
+//#endregion
 export { useIcons };
+
+//# sourceMappingURL=useIcons.js.map

package/lib/hooks/useIcons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIcons.js","names":[],"sources":["../../src/hooks/useIcons.ts"],"sourcesContent":["import type { BaseIconProps, IconProps } from '../components/Icon';\nimport type { LazyIconProps } from '../components/LazyIcon';\n\nimport Icon from '../components/Icon';\nimport LazyIcon from '../components/LazyIcon';\nimport { isComponent } from '../utils/component';\n\nexport type BaseIconElement = React.ReactElement<BaseIconProps>;\n\nexport const useIcons = (children: React.ReactNode[]): [BaseIconElement | null, BaseIconElement | null, React.ReactNode[] | null] => {\n  let leftIcon: BaseIconElement | null = null;\n  let rightIcon: BaseIconElement | null = null;\n\n  const firstChild = children[0];\n  if (isComponent<IconProps>(firstChild, Icon) || isComponent<LazyIconProps>(firstChild, LazyIcon)) {\n    leftIcon = firstChild;\n    children.shift();\n  }\n\n  const lastChild = children[children.length - 1];\n  if (isComponent<IconProps>(lastChild, Icon) || isComponent<LazyIconProps>(lastChild, LazyIcon)) {\n    rightIcon = lastChild;\n    children.pop();\n  }\n  const restChildren = children.filter(child => child);\n\n  return [leftIcon, rightIcon, restChildren.length > 0 ? restChildren : null];\n};\n"],"mappings":";;;;AASA,IAAa,YAAY,aAA4G;CACnI,IAAI,WAAmC;CACvC,IAAI,YAAoC;CAExC,MAAM,aAAa,SAAS;CAC5B,IAAI,YAAuB,YAAY,aAAK,IAAI,YAA2B,YAAY,iBAAS,EAAE;EAChG,WAAW;EACX,SAAS,OAAO;;CAGlB,MAAM,YAAY,SAAS,SAAS,SAAS;CAC7C,IAAI,YAAuB,WAAW,aAAK,IAAI,YAA2B,WAAW,iBAAS,EAAE;EAC9F,YAAY;EACZ,SAAS,KAAK;;CAEhB,MAAM,eAAe,SAAS,QAAO,UAAS,MAAM;CAEpD,OAAO;EAAC;EAAU;EAAW,aAAa,SAAS,IAAI,eAAe;EAAK"}

package/lib/hooks/useIdWithFallback.js

@@ -1,2 +1,15 @@
-import { t as useIdWithFallback } from "../useIdWithFallback.js";
+import { useId } from "react";
+//#region src/hooks/useIdWithFallback.ts
+/**
+* Returner unik id som ikke endrer seg for hver render
+* @param initial id som vil overstyre react sin useId
+* @returns stable id-string
+*/
+var useIdWithFallback = (initial) => {
+	const fallbackId = useId();
+	return initial || fallbackId;
+};
+//#endregion
 export { useIdWithFallback };
+
+//# sourceMappingURL=useIdWithFallback.js.map

package/lib/hooks/useIdWithFallback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIdWithFallback.js","names":[],"sources":["../../src/hooks/useIdWithFallback.ts"],"sourcesContent":["import { useId } from 'react';\n\n/**\n * Returner unik id som ikke endrer seg for hver render\n * @param initial id som vil overstyre react sin useId\n * @returns stable id-string\n */\nexport const useIdWithFallback = (initial?: string): string => {\n  const fallbackId = useId();\n\n  return initial || fallbackId;\n};\n"],"mappings":";;;;;;;AAOA,IAAa,qBAAqB,YAA6B;CAC7D,MAAM,aAAa,OAAO;CAE1B,OAAO,WAAW"}

package/lib/hooks/useIntersectionObserver.js

@@ -1,2 +1,24 @@
-import { t as useIntersectionObserver } from "../useIntersectionObserver.js";
+import { useEffect } from "react";
+//#region src/hooks/useIntersectionObserver.ts
+/**
+* Lytt på endringer i synligheten (intersection) til et HTML-element. F.eks. kan du bruke denne til å kalle en callback
+* når elementet er i ferd med å forsvinne ut av vinduet.
+*
+* @param ref Element som skal observeres
+* @param callback Kalles når en endring i intersection er observert
+* @param options Objekt med options for IntersectionObserver, f.eks. threshold for å bestemme når callbacken skal fyres
+*/
+var useIntersectionObserver = (ref, callback, options) => {
+	useEffect(() => {
+		const intersectionObserver = new IntersectionObserver(callback, options);
+		if (ref?.current) intersectionObserver.observe(ref.current);
+		return () => {
+			if (ref?.current) intersectionObserver.unobserve(ref.current);
+			else intersectionObserver.disconnect();
+		};
+	}, [ref, options]);
+};
+//#endregion
 export { useIntersectionObserver };
+
+//# sourceMappingURL=useIntersectionObserver.js.map

package/lib/hooks/useIntersectionObserver.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIntersectionObserver.js","names":[],"sources":["../../src/hooks/useIntersectionObserver.ts"],"sourcesContent":["import { useEffect } from 'react';\n\n/**\n * Lytt på endringer i synligheten (intersection) til et HTML-element. F.eks. kan du bruke denne til å kalle en callback\n * når elementet er i ferd med å forsvinne ut av vinduet.\n *\n * @param ref Element som skal observeres\n * @param callback Kalles når en endring i intersection er observert\n * @param options Objekt med options for IntersectionObserver, f.eks. threshold for å bestemme når callbacken skal fyres\n */\n\nexport const useIntersectionObserver = (\n  ref: React.RefObject<Element | null>,\n  callback: IntersectionObserverCallback,\n  options?: IntersectionObserverInit\n): void => {\n  useEffect(() => {\n    const intersectionObserver = new IntersectionObserver(callback, options);\n\n    if (ref?.current) {\n      intersectionObserver.observe(ref.current);\n    }\n\n    return (): void => {\n      if (ref?.current) {\n        intersectionObserver.unobserve(ref.current);\n      } else {\n        intersectionObserver.disconnect();\n      }\n    };\n  }, [ref, options]);\n};\n"],"mappings":";;;;;;;;;;AAWA,IAAa,2BACX,KACA,UACA,YACS;CACT,gBAAgB;EACd,MAAM,uBAAuB,IAAI,qBAAqB,UAAU,QAAQ;EAExE,IAAI,KAAK,SACP,qBAAqB,QAAQ,IAAI,QAAQ;EAG3C,aAAmB;GACjB,IAAI,KAAK,SACP,qBAAqB,UAAU,IAAI,QAAQ;QAE3C,qBAAqB,YAAY;;IAGpC,CAAC,KAAK,QAAQ,CAAC"}

package/lib/hooks/useInterval.js

@@ -1,5 +1,13 @@
 import { useEffect } from "react";
-const useInterval = (callback, frequency = 10) => {
+//#region src/hooks/useInterval.ts
+/**
+* Kjør en funksjon ved intervaller basert på ønsket frequency.
+*
+* @param callback Funksjon som skal kjøres
+* @param frequency Hvor ofte vi skal kjøre funksjonen
+* @returns void
+*/
+var useInterval = (callback, frequency = 10) => {
 	useEffect(() => {
 		const timer = setInterval(callback, frequency);
 		return () => {
@@ -7,6 +15,7 @@ const useInterval = (callback, frequency = 10) => {
 		};
 	}, [callback, frequency]);
 };
+//#endregion
 export { useInterval };
 
 //# sourceMappingURL=useInterval.js.map

package/lib/hooks/useInterval.js.map

@@ -1 +1 @@
-{"version":3,"file":"useInterval.js","names":[],"sources":["../../src/hooks/useInterval.ts"],"sourcesContent":["import { useEffect } from 'react';\n\n/**\n * Kjør en funksjon ved intervaller basert på ønsket frequency.\n *\n * @param callback Funksjon som skal kjøres\n * @param frequency Hvor ofte vi skal kjøre funksjonen\n * @returns void\n */\nexport const useInterval = (callback: () => void, frequency = 10): void => {\n  useEffect(() => {\n    const timer = setInterval(callback, frequency);\n\n    return (): void => {\n      clearInterval(timer);\n    };\n  }, [callback, frequency]);\n};\n"],"mappings":";AASA,MAAa,eAAe,UAAsB,YAAY,OAAa;AACzE,iBAAgB;EACd,MAAM,QAAQ,YAAY,UAAU,UAAU;AAE9C,eAAmB;AACjB,iBAAc,MAAM;;IAErB,CAAC,UAAU,UAAU,CAAC"}
+{"version":3,"file":"useInterval.js","names":[],"sources":["../../src/hooks/useInterval.ts"],"sourcesContent":["import { useEffect } from 'react';\n\n/**\n * Kjør en funksjon ved intervaller basert på ønsket frequency.\n *\n * @param callback Funksjon som skal kjøres\n * @param frequency Hvor ofte vi skal kjøre funksjonen\n * @returns void\n */\nexport const useInterval = (callback: () => void, frequency = 10): void => {\n  useEffect(() => {\n    const timer = setInterval(callback, frequency);\n\n    return (): void => {\n      clearInterval(timer);\n    };\n  }, [callback, frequency]);\n};\n"],"mappings":";;;;;;;;;AASA,IAAa,eAAe,UAAsB,YAAY,OAAa;CACzE,gBAAgB;EACd,MAAM,QAAQ,YAAY,UAAU,UAAU;EAE9C,aAAmB;GACjB,cAAc,MAAM;;IAErB,CAAC,UAAU,UAAU,CAAC"}

package/lib/hooks/useIsMobileBreakpoint.js

@@ -1,2 +1,10 @@
-import { t as useIsMobileBreakpoint } from "../useIsMobileBreakpoint.js";
+import { breakpoints } from "../theme/grid.js";
+import { useBreakpoint } from "./useBreakpoint.js";
+//#region src/hooks/useIsMobileBreakpoint.ts
+var useIsMobileBreakpoint = () => {
+	return useBreakpoint() < breakpoints.md;
+};
+//#endregion
 export { useIsMobileBreakpoint };
+
+//# sourceMappingURL=useIsMobileBreakpoint.js.map

package/lib/hooks/useIsMobileBreakpoint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsMobileBreakpoint.js","names":[],"sources":["../../src/hooks/useIsMobileBreakpoint.ts"],"sourcesContent":["import { useBreakpoint } from './useBreakpoint';\nimport { breakpoints } from '../theme/grid';\n\nexport const useIsMobileBreakpoint = (): boolean => {\n  const breakpoint = useBreakpoint();\n  return breakpoint < breakpoints.md;\n};\n"],"mappings":";;;AAGA,IAAa,8BAAuC;CAElD,OADmB,eACZ,GAAa,YAAY"}

package/lib/hooks/useIsServerSide.js

@@ -1,2 +1,17 @@
-import { t as useIsServerSide } from "../useIsServerSide.js";
+import { useSyncExternalStore } from "react";
+//#region src/hooks/useIsServerSide.ts
+var emptySubscribe = () => () => {};
+var getClientSnapshot = () => false;
+var getServerSnapshot = () => true;
+/**
+* Sjekk om React kjører på server, eller ikke.
+*
+* @returns true dersom koden kjører på server
+*/
+var useIsServerSide = () => {
+	return useSyncExternalStore(emptySubscribe, getClientSnapshot, getServerSnapshot);
+};
+//#endregion
 export { useIsServerSide };
+
+//# sourceMappingURL=useIsServerSide.js.map

package/lib/hooks/useIsServerSide.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsServerSide.js","names":[],"sources":["../../src/hooks/useIsServerSide.ts"],"sourcesContent":["import { useSyncExternalStore } from 'react';\n\nconst emptySubscribe = (): (() => void) => (): void => {};\nconst getClientSnapshot = (): boolean => false;\nconst getServerSnapshot = (): boolean => true;\n\n/**\n * Sjekk om React kjører på server, eller ikke.\n *\n * @returns true dersom koden kjører på server\n */\nexport const useIsServerSide = (): boolean => {\n  return useSyncExternalStore(emptySubscribe, getClientSnapshot, getServerSnapshot);\n};\n"],"mappings":";;AAEA,IAAM,6BAAiD;AACvD,IAAM,0BAAmC;AACzC,IAAM,0BAAmC;;;;;;AAOzC,IAAa,wBAAiC;CAC5C,OAAO,qBAAqB,gBAAgB,mBAAmB,kBAAkB"}

package/lib/hooks/useIsVisible.js

@@ -1,2 +1,27 @@
-import { t as useIsVisible } from "../useIsVisible.js";
+import { useIntersectionObserver } from "./useIntersectionObserver.js";
+import { useState } from "react";
+//#region src/hooks/useIsVisible.ts
+/**
+* Sjekk om et HTML-element er synlig i vinduet, eller ikke.
+*
+* @param ref Element som skal observeres
+* @param threshold Hvor synlig må elementet være? Default = 1 (helt synlig)
+* @param options Objekt med options for IntersectionObserver, f.eks. threshold for å bestemme når callbacken skal fyres
+* @param initial Om elementet default skal antas å være synlig eller ikke. Default: ikke synlig
+* @returns true hvis objektet er synlig lik threshold eller mer, false hvis ikke
+*/
+var useIsVisible = (ref, threshold = 1, options, initial = false) => {
+	const [isVisible, setIsVisible] = useState(initial);
+	const handleIntersectChange = (entries) => {
+		setIsVisible(threshold === 0 ? entries[0].intersectionRatio !== threshold : entries[0].intersectionRatio >= threshold);
+	};
+	useIntersectionObserver(ref, handleIntersectChange, {
+		threshold,
+		...options
+	});
+	return isVisible;
+};
+//#endregion
 export { useIsVisible };
+
+//# sourceMappingURL=useIsVisible.js.map

package/lib/hooks/useIsVisible.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsVisible.js","names":[],"sources":["../../src/hooks/useIsVisible.ts"],"sourcesContent":["import { useState } from 'react';\n\nimport { useIntersectionObserver } from './useIntersectionObserver';\n\n/**\n * Sjekk om et HTML-element er synlig i vinduet, eller ikke.\n *\n * @param ref Element som skal observeres\n * @param threshold Hvor synlig må elementet være? Default = 1 (helt synlig)\n * @param options Objekt med options for IntersectionObserver, f.eks. threshold for å bestemme når callbacken skal fyres\n * @param initial Om elementet default skal antas å være synlig eller ikke. Default: ikke synlig\n * @returns true hvis objektet er synlig lik threshold eller mer, false hvis ikke\n */\nexport const useIsVisible = (\n  ref: React.RefObject<Element | null>,\n  threshold = 1,\n  options?: IntersectionObserverInit,\n  initial = false\n): boolean => {\n  const [isVisible, setIsVisible] = useState(initial);\n\n  const handleIntersectChange: IntersectionObserverCallback = entries => {\n    setIsVisible(threshold === 0 ? entries[0].intersectionRatio !== threshold : entries[0].intersectionRatio >= threshold);\n  };\n\n  useIntersectionObserver(ref, handleIntersectChange, { threshold, ...options });\n\n  return isVisible;\n};\n"],"mappings":";;;;;;;;;;;;AAaA,IAAa,gBACX,KACA,YAAY,GACZ,SACA,UAAU,UACE;CACZ,MAAM,CAAC,WAAW,gBAAgB,SAAS,QAAQ;CAEnD,MAAM,yBAAsD,YAAW;EACrE,aAAa,cAAc,IAAI,QAAQ,GAAG,sBAAsB,YAAY,QAAQ,GAAG,qBAAqB,UAAU;;CAGxH,wBAAwB,KAAK,uBAAuB;EAAE;EAAW,GAAG;EAAS,CAAC;CAE9E,OAAO"}

package/lib/hooks/useKeyboardEvent.js

@@ -1,2 +1,31 @@
-import { t as useKeyboardEvent } from "../useKeyboardEvent.js";
+import { useEffect } from "react";
+//#region src/hooks/useKeyboardEvent.ts
+/**
+* Kjør en callback når bruker skriver på tastaturet.
+* @param ref Element som skal lyttes på.
+* @param callback Callback som kjøres når det skjer en event.
+* @param key Knapp, eller liste med knapper, som skal trigge callback
+* @param events Liste med keyboard-events som skal trigge callback. Default: "keydown"
+*/
+var useKeyboardEvent = (ref, callback, key, events = ["keydown"]) => {
+	useEffect(() => {
+		const element = ref.current;
+		if (!element) return;
+		const handleKeyboardEvent = (event) => {
+			if (event.key === key || Array.isArray(key) && key.includes(event.key)) callback(event);
+		};
+		events.forEach((eventName) => element.addEventListener(eventName, handleKeyboardEvent));
+		return () => {
+			events.forEach((eventName) => element.removeEventListener(eventName, handleKeyboardEvent));
+		};
+	}, [
+		ref,
+		callback,
+		events,
+		key
+	]);
+};
+//#endregion
 export { useKeyboardEvent };
+
+//# sourceMappingURL=useKeyboardEvent.js.map

package/lib/hooks/useKeyboardEvent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyboardEvent.js","names":[],"sources":["../../src/hooks/useKeyboardEvent.ts"],"sourcesContent":["import { useEffect } from 'react';\n\ntype KeyboardEvents = {\n  [K in keyof HTMLElementEventMap]: HTMLElementEventMap[K] extends KeyboardEvent ? K : never;\n}[keyof HTMLElementEventMap];\n\n/**\n * Kjør en callback når bruker skriver på tastaturet.\n * @param ref Element som skal lyttes på.\n * @param callback Callback som kjøres når det skjer en event.\n * @param key Knapp, eller liste med knapper, som skal trigge callback\n * @param events Liste med keyboard-events som skal trigge callback. Default: \"keydown\"\n */\nexport const useKeyboardEvent = (\n  ref: React.RefObject<HTMLElement | null>,\n  callback: (event: KeyboardEvent) => void,\n  key: string | string[],\n  events: KeyboardEvents[] = ['keydown']\n): void => {\n  useEffect(() => {\n    const element = ref.current;\n    if (!element) {\n      return;\n    }\n\n    const handleKeyboardEvent = (event: KeyboardEvent): void => {\n      if (event.key === key || (Array.isArray(key) && key.includes(event.key))) {\n        callback(event);\n      }\n    };\n\n    events.forEach(eventName => element.addEventListener(eventName, handleKeyboardEvent));\n\n    return (): void => {\n      events.forEach(eventName => element.removeEventListener(eventName, handleKeyboardEvent));\n    };\n  }, [ref, callback, events, key]);\n};\n"],"mappings":";;;;;;;;;AAaA,IAAa,oBACX,KACA,UACA,KACA,SAA2B,CAAC,UAAU,KAC7B;CACT,gBAAgB;EACd,MAAM,UAAU,IAAI;EACpB,IAAI,CAAC,SACH;EAGF,MAAM,uBAAuB,UAA+B;GAC1D,IAAI,MAAM,QAAQ,OAAQ,MAAM,QAAQ,IAAI,IAAI,IAAI,SAAS,MAAM,IAAI,EACrE,SAAS,MAAM;;EAInB,OAAO,SAAQ,cAAa,QAAQ,iBAAiB,WAAW,oBAAoB,CAAC;EAErF,aAAmB;GACjB,OAAO,SAAQ,cAAa,QAAQ,oBAAoB,WAAW,oBAAoB,CAAC;;IAEzF;EAAC;EAAK;EAAU;EAAQ;EAAI,CAAC"}