@helsenorge/designsystem-react 12.12.2 → 12.12.3

package/lib/hoc/withBreakpoint/index.d.ts

@@ -0,0 +1,3 @@
+import { default as withBreakpoint } from './withBreakpoint';
+export * from './withBreakpoint';
+export default withBreakpoint;

package/lib/hoc/withBreakpoint/index.js

@@ -0,0 +1,6 @@
+import { withBreakpoint } from "./withBreakpoint.js";
+export {
+  withBreakpoint as default,
+  withBreakpoint
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/lib/hoc/withBreakpoint/withBreakpoint.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { Breakpoint } from '../../hooks/useBreakpoint';
+export interface BreakpointProps {
+    breakpoint: Breakpoint;
+}
+export declare function withBreakpoint<P extends BreakpointProps, C extends React.ComponentClass<P>>(Component: C & React.ComponentType<P>): React.ForwardRefExoticComponent<Omit<React.ComponentPropsWithoutRef<C> & {
+    ref?: React.Ref<InstanceType<C>>;
+}, keyof BreakpointProps>>;
+export declare function withBreakpoint<P extends BreakpointProps & {
+    ref?: React.Ref<unknown>;
+}>(Component: React.ForwardRefExoticComponent<P>): React.ForwardRefExoticComponent<Omit<P, keyof BreakpointProps>>;
+export declare function withBreakpoint<P extends BreakpointProps>(Component: React.FunctionComponent<P>): React.ForwardRefExoticComponent<Omit<P, keyof BreakpointProps>>;
+export default withBreakpoint;

package/lib/hoc/withBreakpoint/withBreakpoint.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import { useBreakpoint } from "../../hooks/useBreakpoint.js";
+function withBreakpoint(Component) {
+  return React__default.forwardRef((props, ref) => {
+    const breakpoint = useBreakpoint();
+    return /* @__PURE__ */ jsx(Component, { ref, ...props, breakpoint });
+  });
+}
+export {
+  withBreakpoint as default,
+  withBreakpoint
+};
+//# sourceMappingURL=withBreakpoint.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"withBreakpoint.js","sources":["../../../src/hoc/withBreakpoint/withBreakpoint.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Breakpoint, 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.ForwardRefExoticComponent<Omit<React.ComponentPropsWithoutRef<C> & { ref?: React.Ref<InstanceType<C>> }, keyof BreakpointProps>>;\n\nexport function withBreakpoint<P extends BreakpointProps & { ref?: React.Ref<unknown> }>(\n  Component: React.ForwardRefExoticComponent<P>\n): React.ForwardRefExoticComponent<Omit<P, keyof BreakpointProps>>;\n\nexport function withBreakpoint<P extends BreakpointProps>(\n  Component: React.FunctionComponent<P>\n): React.ForwardRefExoticComponent<Omit<P, keyof BreakpointProps>>;\n\nexport function withBreakpoint<P extends BreakpointProps>(Component: React.ComponentType<P>) {\n  return React.forwardRef((props, ref) => {\n    const breakpoint = useBreakpoint();\n    return <Component ref={ref} {...(props as P)} breakpoint={breakpoint} />;\n  });\n}\n\nexport default withBreakpoint;\n"],"names":["React"],"mappings":";;;AAqBO,SAAS,eAA0C,WAAmC;AAC3F,SAAOA,eAAM,WAAW,CAAC,OAAO,QAAQ;AACtC,UAAM,aAAa,cAAA;AACnB,WAAO,oBAAC,WAAA,EAAU,KAAW,GAAI,OAAa,YAAwB;AAAA,EACxE,CAAC;AACH;"}

package/lib/hoc/withBreakpoint/withBreakpoint.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/hooks/useBreakpoint.d.ts

@@ -0,0 +1,9 @@
+export declare enum Breakpoint {
+    xxs,
+    xs,
+    sm,
+    md,
+    lg,
+    xl
+}
+export declare const useBreakpoint: () => Breakpoint;

package/lib/hooks/useBreakpoint.js

@@ -0,0 +1,56 @@
+import { useState, useEffect } from "react";
+import { breakpoints, screen } from "../theme/grid.js";
+var Breakpoint = ((Breakpoint2) => {
+  Breakpoint2[Breakpoint2["xxs"] = breakpoints.xxs] = "xxs";
+  Breakpoint2[Breakpoint2["xs"] = breakpoints.xs] = "xs";
+  Breakpoint2[Breakpoint2["sm"] = breakpoints.sm] = "sm";
+  Breakpoint2[Breakpoint2["md"] = breakpoints.md] = "md";
+  Breakpoint2[Breakpoint2["lg"] = breakpoints.lg] = "lg";
+  Breakpoint2[Breakpoint2["xl"] = breakpoints.xl] = "xl";
+  return Breakpoint2;
+})(Breakpoint || {});
+function getCurrentBreakpoint() {
+  const mediaQueryList = Object.entries(screen).reverse().map(([size, mediaQuery]) => {
+    return {
+      breakpoint: Breakpoint[size],
+      mq: window.matchMedia(mediaQuery)
+    };
+  });
+  const matched = mediaQueryList.find((entry) => entry.mq.matches);
+  return (matched == null ? void 0 : matched.breakpoint) ?? Breakpoint.xxs;
+}
+const useBreakpoint = () => {
+  const [breakpoint, setBreakpoint] = useState(Breakpoint.xxs);
+  useEffect(() => {
+    setBreakpoint(getCurrentBreakpoint());
+  }, []);
+  useEffect(() => {
+    const mediaQueryList = Object.values(screen).map((mediaQuery) => {
+      const mq = window.matchMedia(mediaQuery);
+      const handler = () => {
+        setBreakpoint(getCurrentBreakpoint());
+      };
+      if (mq.addEventListener) {
+        mq.addEventListener("change", handler);
+      } else if (mq.addListener) {
+        mq.addListener(handler);
+      }
+      return { mq, handler };
+    });
+    return () => {
+      mediaQueryList.forEach(({ mq, handler }) => {
+        if (mq.removeEventListener) {
+          mq.removeEventListener("change", handler);
+        } else if (mq.removeListener) {
+          mq.removeListener(handler);
+        }
+      });
+    };
+  }, []);
+  return breakpoint;
+};
+export {
+  Breakpoint,
+  useBreakpoint
+};
+//# sourceMappingURL=useBreakpoint.js.map

package/lib/hooks/useBreakpoint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBreakpoint.js","sources":["../../src/hooks/useBreakpoint.ts"],"sourcesContent":["import { useState, useEffect } 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\nfunction getCurrentBreakpoint(): Breakpoint {\n  // We read from largest -> smallest or vice versa\n  // so that the first match is the \"highest\" one that applies\n  const mediaQueryList = Object.entries(screen)\n    .reverse() // e.g. check xl, lg, md, etc. in descending order\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\nexport const useBreakpoint = (): Breakpoint => {\n  const [breakpoint, setBreakpoint] = useState<Breakpoint>(Breakpoint.xxs);\n\n  useEffect(() => {\n    // Oppdater breakpoint i useEffect for å støtte server side rendering\n    setBreakpoint(getCurrentBreakpoint());\n  }, []);\n\n  useEffect(() => {\n    const mediaQueryList = Object.values(screen).map(mediaQuery => {\n      const mq = window.matchMedia(mediaQuery);\n      // iOS <=13 har ikke støtte for addEventListener/removeEventListener på MediaQueryList,\n      // men har støtte for addListener\n      const handler = (): void => {\n        setBreakpoint(getCurrentBreakpoint());\n      };\n\n      if (mq.addEventListener) {\n        mq.addEventListener('change', handler);\n      } else if (mq.addListener) {\n        mq.addListener(handler);\n      }\n      return { mq, handler };\n    });\n\n    return (): void => {\n      mediaQueryList.forEach(({ mq, handler }) => {\n        if (mq.removeEventListener) {\n          mq.removeEventListener('change', handler);\n        } else if (mq.removeListener) {\n          mq.removeListener(handler);\n        }\n      });\n    };\n  }, []);\n\n  return breakpoint;\n};\n"],"names":["Breakpoint"],"mappings":";;AAIO,IAAK,cAAL,CAAKA,gBAAL;AACLA,cAAAA,YAAA,KAAA,IAAM,YAAY,GAAA,IAAlB;AACAA,cAAAA,YAAA,IAAA,IAAK,YAAY,EAAA,IAAjB;AACAA,cAAAA,YAAA,IAAA,IAAK,YAAY,EAAA,IAAjB;AACAA,cAAAA,YAAA,IAAA,IAAK,YAAY,EAAA,IAAjB;AACAA,cAAAA,YAAA,IAAA,IAAK,YAAY,EAAA,IAAjB;AACAA,cAAAA,YAAA,IAAA,IAAK,YAAY,EAAA,IAAjB;AANU,SAAAA;AAAA,GAAA,cAAA,CAAA,CAAA;AASZ,SAAS,uBAAmC;AAG1C,QAAM,iBAAiB,OAAO,QAAQ,MAAM,EACzC,QAAA,EACA,IAAI,CAAC,CAAC,MAAM,UAAU,MAAM;AAC3B,WAAO;AAAA,MACL,YAAY,WAAW,IAA+B;AAAA,MACtD,IAAI,OAAO,WAAW,UAAU;AAAA,IAAA;AAAA,EAEpC,CAAC;AAEH,QAAM,UAAU,eAAe,KAAK,CAAA,UAAS,MAAM,GAAG,OAAO;AAC7D,UAAO,mCAAS,eAAc,WAAW;AAC3C;AAEO,MAAM,gBAAgB,MAAkB;AAC7C,QAAM,CAAC,YAAY,aAAa,IAAI,SAAqB,WAAW,GAAG;AAEvE,YAAU,MAAM;AAEd,kBAAc,sBAAsB;AAAA,EACtC,GAAG,CAAA,CAAE;AAEL,YAAU,MAAM;AACd,UAAM,iBAAiB,OAAO,OAAO,MAAM,EAAE,IAAI,CAAA,eAAc;AAC7D,YAAM,KAAK,OAAO,WAAW,UAAU;AAGvC,YAAM,UAAU,MAAY;AAC1B,sBAAc,sBAAsB;AAAA,MACtC;AAEA,UAAI,GAAG,kBAAkB;AACvB,WAAG,iBAAiB,UAAU,OAAO;AAAA,MACvC,WAAW,GAAG,aAAa;AACzB,WAAG,YAAY,OAAO;AAAA,MACxB;AACA,aAAO,EAAE,IAAI,QAAA;AAAA,IACf,CAAC;AAED,WAAO,MAAY;AACjB,qBAAe,QAAQ,CAAC,EAAE,IAAI,cAAc;AAC1C,YAAI,GAAG,qBAAqB;AAC1B,aAAG,oBAAoB,UAAU,OAAO;AAAA,QAC1C,WAAW,GAAG,gBAAgB;AAC5B,aAAG,eAAe,OAAO;AAAA,QAC3B;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,SAAO;AACT;"}

package/lib/hooks/useElementList.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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
+ */
+export declare const useElementList: (ref: React.RefObject<HTMLElement>, selectors: string, options?: MutationObserverInit) => NodeListOf<HTMLElement> | undefined;

package/lib/hooks/useElementList.js

@@ -0,0 +1,24 @@
+import { useState, useEffect } from "react";
+const useElementList = (ref, selectors, options) => {
+  const [elementList, setElementList] = useState();
+  useEffect(() => {
+    const handleMutationChange = () => {
+      var _a;
+      const elements = (_a = ref.current) == null ? void 0 : _a.querySelectorAll(selectors);
+      setElementList(elements);
+    };
+    const mutationObserver = new MutationObserver(handleMutationChange);
+    if (ref == null ? void 0 : ref.current) {
+      mutationObserver.observe(ref.current, { subtree: true, childList: true, attributes: true, ...options });
+    }
+    handleMutationChange();
+    return () => {
+      mutationObserver.disconnect();
+    };
+  }, [ref, selectors]);
+  return elementList;
+};
+export {
+  useElementList
+};
+//# sourceMappingURL=useElementList.js.map

package/lib/hooks/useElementList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useElementList.js","sources":["../../src/hooks/useElementList.ts"],"sourcesContent":["import { useState, useEffect } 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>,\n  selectors: string,\n  options?: MutationObserverInit\n): NodeListOf<HTMLElement> | undefined => {\n  const [elementList, setElementList] = useState<NodeListOf<HTMLElement>>();\n\n  useEffect(() => {\n    const handleMutationChange = (): void => {\n      const elements = ref.current?.querySelectorAll<HTMLElement>(selectors);\n      setElementList(elements);\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"],"names":[],"mappings":";AASO,MAAM,iBAAiB,CAC5B,KACA,WACA,YACwC;AACxC,QAAM,CAAC,aAAa,cAAc,IAAI,SAAA;AAEtC,YAAU,MAAM;AACd,UAAM,uBAAuB,MAAY;;AACvC,YAAM,YAAW,SAAI,YAAJ,mBAAa,iBAA8B;AAC5D,qBAAe,QAAQ;AAAA,IACzB;AAEA,UAAM,mBAAmB,IAAI,iBAAiB,oBAAoB;AAClE,QAAI,2BAAK,SAAS;AAChB,uBAAiB,QAAQ,IAAI,SAAS,EAAE,SAAS,MAAM,WAAW,MAAM,YAAY,MAAM,GAAG,QAAA,CAAS;AAAA,IACxG;AAEA,yBAAA;AAEA,WAAO,MAAY;AACjB,uBAAiB,WAAA;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,KAAK,SAAS,CAAC;AAEnB,SAAO;AACT;"}

package/lib/hooks/useEventListenerState.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const useEventListenerState: <T>(initial?: T) => [valueRef: React.MutableRefObject<T | undefined>, setValue: (x: T) => void];

package/lib/hooks/useEventListenerState.js

@@ -0,0 +1,14 @@
+import React__default from "react";
+const useEventListenerState = (initial) => {
+  const [value, _setValue] = React__default.useState(initial);
+  const valueRef = React__default.useRef(value);
+  const setValue = (x) => {
+    valueRef.current = x;
+    _setValue(x);
+  };
+  return [valueRef, setValue];
+};
+export {
+  useEventListenerState
+};
+//# sourceMappingURL=useEventListenerState.js.map

package/lib/hooks/useEventListenerState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEventListenerState.js","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"],"names":["React"],"mappings":";AAEO,MAAM,wBAAwB,CAAI,YAA6F;AACpI,QAAM,CAAC,OAAO,SAAS,IAAIA,eAAM,SAAwB,OAAO;AAEhE,QAAM,WAAWA,eAAM,OAAO,KAAK;AAEnC,QAAM,WAAW,CAAC,MAAe;AAC/B,aAAS,UAAU;AACnB,cAAU,CAAC;AAAA,EACb;AAEA,SAAO,CAAC,UAAU,QAAQ;AAC5B;"}

package/lib/hooks/useExpand.d.ts

@@ -0,0 +1,2 @@
+import { Dispatch, SetStateAction } from 'react';
+export declare const useExpand: (expanded: boolean, onExpand?: (isExpanded: boolean) => void) => [boolean, Dispatch<SetStateAction<boolean>>];

package/lib/hooks/useExpand.js

@@ -0,0 +1,21 @@
+import { useState, useEffect } from "react";
+import { usePrevious } from "./usePrevious.js";
+const useExpand = (expanded, onExpand) => {
+  const [isExpanded, setIsExpanded] = useState(expanded);
+  const previousIsExpanded = usePrevious(isExpanded);
+  useEffect(() => {
+    if (expanded !== isExpanded) {
+      setIsExpanded(expanded);
+    }
+  }, [expanded]);
+  useEffect(() => {
+    if (onExpand && isExpanded !== !!previousIsExpanded) {
+      onExpand(isExpanded);
+    }
+  }, [isExpanded, onExpand]);
+  return [isExpanded, setIsExpanded];
+};
+export {
+  useExpand
+};
+//# sourceMappingURL=useExpand.js.map

package/lib/hooks/useExpand.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useExpand.js","sources":["../../src/hooks/useExpand.ts"],"sourcesContent":["import { Dispatch, SetStateAction, 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 previousIsExpanded = usePrevious(isExpanded);\n\n  useEffect(() => {\n    if (expanded !== isExpanded) {\n      setIsExpanded(expanded);\n    }\n  }, [expanded]);\n\n  useEffect(() => {\n    if (onExpand && isExpanded !== !!previousIsExpanded) {\n      onExpand(isExpanded);\n    }\n  }, [isExpanded, onExpand]);\n\n  return [isExpanded, setIsExpanded];\n};\n"],"names":[],"mappings":";;AAIO,MAAM,YAAY,CAAC,UAAmB,aAA2F;AACtI,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,QAAQ;AACrD,QAAM,qBAAqB,YAAY,UAAU;AAEjD,YAAU,MAAM;AACd,QAAI,aAAa,YAAY;AAC3B,oBAAc,QAAQ;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,YAAU,MAAM;AACd,QAAI,YAAY,eAAe,CAAC,CAAC,oBAAoB;AACnD,eAAS,UAAU;AAAA,IACrB;AAAA,EACF,GAAG,CAAC,YAAY,QAAQ,CAAC;AAEzB,SAAO,CAAC,YAAY,aAAa;AACnC;"}

package/lib/hooks/useFocusToggle.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+/**
+ * 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
+ */
+export declare const useFocusToggle: (ref: React.RefObject<HTMLElement>, allowFocus?: boolean) => void;

package/lib/hooks/useFocusToggle.js

@@ -0,0 +1,31 @@
+import { useEffect } from "react";
+import { useElementList } from "./useElementList.js";
+import { FOCUSABLE_SELECTORS } from "./useFocusableElements.js";
+const 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 == null ? void 0 : 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 == null ? void 0 : focusableElementList.forEach((el) => {
+        if (el.hasAttribute(TABINDEX_ATTRIBUTE_NAME)) {
+          el.setAttribute(PREVIOUS_TABINDEX_ATTRIBUTE_NAME, `${el.tabIndex}`);
+        }
+        el.tabIndex = -1;
+      });
+    }
+  }, [ref, allowFocus, focusableElementList]);
+};
+export {
+  useFocusToggle
+};
+//# sourceMappingURL=useFocusToggle.js.map

package/lib/hooks/useFocusToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusToggle.js","sources":["../../src/hooks/useFocusToggle.ts"],"sourcesContent":["import React, { 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>, 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"],"names":[],"mappings":";;;AAYO,MAAM,iBAAiB,CAAC,KAAmC,eAA+B;AAE/F,QAAM,uBAAuB,eAAe,KAAK,qBAAqB,EAAE,YAAY,OAAO;AAE3F,YAAU,MAAM;AACd,UAAM,0BAA0B;AAChC,UAAM,mCAAmC;AACzC,QAAI,YAAY;AACd,mEAAsB,QAAQ,CAAA,OAAM;AAGlC,cAAM,eAAe,GAAG,aAAa,gCAAgC;AACrE,YAAI,cAAc;AAChB,aAAG,aAAa,yBAAyB,YAAY;AAAA,QACvD,OAAO;AACL,aAAG,gBAAgB,uBAAuB;AAAA,QAC5C;AAAA,MACF;AAAA,IACF,OAAO;AACL,mEAAsB,QAAQ,CAAA,OAAM;AAGlC,YAAI,GAAG,aAAa,uBAAuB,GAAG;AAC5C,aAAG,aAAa,kCAAkC,GAAG,GAAG,QAAQ,EAAE;AAAA,QACpE;AACA,WAAG,WAAW;AAAA,MAChB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,KAAK,YAAY,oBAAoB,CAAC;AAC5C;"}

package/lib/hooks/useFocusTrap.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+/**
+ * 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.
+ */
+export declare const useFocusTrap: (ref: React.RefObject<HTMLElement>, trapFocus?: boolean) => void;
+export default useFocusTrap;

package/lib/hooks/useFocusTrap.js

@@ -0,0 +1,33 @@
+import { useEffect } from "react";
+import { useFocusableElements } from "./useFocusableElements.js";
+import { getDocumentActiveElement } from "../utils/focus.js";
+const useFocusTrap = (ref, trapFocus = true) => {
+  const focusableElementList = useFocusableElements(ref);
+  const handleKeyboardEvent = (e) => {
+    if (trapFocus && ref.current && (focusableElementList == null ? void 0 : 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(() => {
+    var _a;
+    (_a = ref.current) == null ? void 0 : _a.addEventListener("keydown", handleKeyboardEvent);
+    return () => {
+      var _a2;
+      (_a2 = ref.current) == null ? void 0 : _a2.removeEventListener("keydown", handleKeyboardEvent);
+    };
+  }, [ref, trapFocus, focusableElementList]);
+};
+export {
+  useFocusTrap as default,
+  useFocusTrap
+};
+//# sourceMappingURL=useFocusTrap.js.map

package/lib/hooks/useFocusTrap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusTrap.js","sources":["../../src/hooks/useFocusTrap.ts"],"sourcesContent":["import React, { 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>, 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"],"names":["_a"],"mappings":";;;AAUO,MAAM,eAAe,CAAC,KAAmC,YAAY,SAAe;AACzF,QAAM,uBAAuB,qBAAqB,GAAG;AAErD,QAAM,sBAAsB,CAAC,MAA2B;AACtD,QAAI,aAAa,IAAI,YAAW,6DAAsB,WAAU,EAAE,QAAQ,OAAO;AAC/E,YAAM,gBAAgB,yBAAyB,IAAI,OAAO;AAC1D,YAAM,eAAe,qBAAqB,CAAC;AAC3C,YAAM,cAAc,qBAAqB,WAAW,IAAI,eAAe,qBAAqB,qBAAqB,SAAS,CAAC;AAE3H,UAAI,EAAE,YAAY,kBAAkB,cAAc;AAEhD,oBAAY,MAAA;AACZ,UAAE,eAAA;AAAA,MACJ,WAAW,CAAC,EAAE,YAAY,kBAAkB,aAAa;AAEvD,qBAAa,MAAA;AACb,UAAE,eAAA;AAAA,MACJ;AAAA,IACF;AAAA,EACF;AAEA,YAAU,MAAM;;AACd,cAAI,YAAJ,mBAAa,iBAAiB,WAAW;AAEzC,WAAO,MAAY;;AACjB,OAAAA,MAAA,IAAI,YAAJ,gBAAAA,IAAa,oBAAoB,WAAW;AAAA,IAC9C;AAAA,EACF,GAAG,CAAC,KAAK,WAAW,oBAAoB,CAAC;AAC3C;"}

package/lib/hooks/useFocusableElements.d.ts

@@ -0,0 +1,8 @@
+export declare const FOCUSABLE_SELECTORS: string;
+/**
+ * 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
+ */
+export declare const useFocusableElements: (ref: React.RefObject<HTMLElement>) => NodeListOf<HTMLElement> | undefined;

package/lib/hooks/useFocusableElements.js

@@ -0,0 +1,21 @@
+import { useElementList } from "./useElementList.js";
+const 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(",");
+const useFocusableElements = (ref) => useElementList(ref, FOCUSABLE_SELECTORS, { attributeFilter: ["href", "tabindex", "type", "disabled", "controls", "contenteditable"] });
+export {
+  FOCUSABLE_SELECTORS,
+  useFocusableElements
+};
+//# sourceMappingURL=useFocusableElements.js.map

package/lib/hooks/useFocusableElements.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusableElements.js","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>): NodeListOf<HTMLElement> | undefined =>\n  useElementList(ref, FOCUSABLE_SELECTORS, { attributeFilter: ['href', 'tabindex', 'type', 'disabled', 'controls', 'contenteditable'] });\n"],"names":[],"mappings":";AAGO,MAAM,sBAAsB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK,GAAG;AAQH,MAAM,uBAAuB,CAAC,QACnC,eAAe,KAAK,qBAAqB,EAAE,iBAAiB,CAAC,QAAQ,YAAY,QAAQ,YAAY,YAAY,iBAAiB,GAAG;"}

package/lib/hooks/useHover.d.ts

@@ -0,0 +1,10 @@
+import { RefObject } from 'react';
+/**
+ * Få vite når et element hovres over eller mottar fokus.
+ * @param ref Element som skal observeres
+ * @returns Objekt med ref og om objekt er hovered/focused
+ */
+export declare const useHover: <T extends HTMLElement | SVGElement>(ref?: RefObject<T>, includeFocus?: boolean) => {
+    hoverRef: RefObject<T>;
+    isHovered: boolean;
+};

package/lib/hooks/useHover.js

@@ -0,0 +1,9 @@
+import { usePseudoClasses } from "./usePseudoClasses.js";
+const useHover = (ref, includeFocus = true) => {
+  const { refObject, isHovered, isFocused } = usePseudoClasses(ref);
+  return { hoverRef: refObject, isHovered: isHovered || includeFocus && isFocused };
+};
+export {
+  useHover
+};
+//# sourceMappingURL=useHover.js.map

package/lib/hooks/useHover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHover.js","sources":["../../src/hooks/useHover.ts"],"sourcesContent":["import { RefObject } from 'react';\n\nimport { usePseudoClasses } from './usePseudoClasses';\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 useHover = <T extends HTMLElement | SVGElement>(\n  ref?: RefObject<T>,\n  includeFocus: boolean = true\n): { hoverRef: RefObject<T>; isHovered: boolean } => {\n  const { refObject, isHovered, isFocused } = usePseudoClasses(ref);\n\n  return { hoverRef: refObject, isHovered: isHovered || (includeFocus && isFocused) };\n};\n"],"names":[],"mappings":";AASO,MAAM,WAAW,CACtB,KACA,eAAwB,SAC2B;AACnD,QAAM,EAAE,WAAW,WAAW,UAAA,IAAc,iBAAiB,GAAG;AAEhE,SAAO,EAAE,UAAU,WAAW,WAAW,aAAc,gBAAgB,UAAA;AACzE;"}

package/lib/hooks/useIcons.d.ts

@@ -0,0 +1,3 @@
+import { BaseIconProps } from '../components/Icon';
+export type BaseIconElement = React.ReactElement<BaseIconProps>;
+export declare const useIcons: (children: React.ReactNode[]) => [BaseIconElement | null, BaseIconElement | null, React.ReactNode[] | null];

package/lib/hooks/useIcons.js

@@ -0,0 +1,23 @@
+import { I as Icon } from "../Icon.js";
+import { L as LazyIcon } from "../LazyIcon.js";
+import { isComponent } from "../utils/component.js";
+const useIcons = (children) => {
+  let leftIcon = null;
+  let rightIcon = null;
+  const firstChild = children[0];
+  if (isComponent(firstChild, Icon) || isComponent(firstChild, LazyIcon)) {
+    leftIcon = firstChild;
+    children.shift();
+  }
+  const lastChild = children[children.length - 1];
+  if (isComponent(lastChild, Icon) || isComponent(lastChild, LazyIcon)) {
+    rightIcon = lastChild;
+    children.pop();
+  }
+  const restChildren = children.filter((child) => child);
+  return [leftIcon, rightIcon, restChildren.length > 0 ? restChildren : null];
+};
+export {
+  useIcons
+};
+//# sourceMappingURL=useIcons.js.map

package/lib/hooks/useIcons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIcons.js","sources":["../../src/hooks/useIcons.ts"],"sourcesContent":["import Icon, { BaseIconProps, IconProps } from '../components/Icon';\nimport LazyIcon, { LazyIconProps } 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"],"names":[],"mappings":";;;AAMO,MAAM,WAAW,CAAC,aAA4G;AACnI,MAAI,WAAmC;AACvC,MAAI,YAAoC;AAExC,QAAM,aAAa,SAAS,CAAC;AAC7B,MAAI,YAAuB,YAAY,IAAI,KAAK,YAA2B,YAAY,QAAQ,GAAG;AAChG,eAAW;AACX,aAAS,MAAA;AAAA,EACX;AAEA,QAAM,YAAY,SAAS,SAAS,SAAS,CAAC;AAC9C,MAAI,YAAuB,WAAW,IAAI,KAAK,YAA2B,WAAW,QAAQ,GAAG;AAC9F,gBAAY;AACZ,aAAS,IAAA;AAAA,EACX;AACA,QAAM,eAAe,SAAS,OAAO,CAAA,UAAS,KAAK;AAEnD,SAAO,CAAC,UAAU,WAAW,aAAa,SAAS,IAAI,eAAe,IAAI;AAC5E;"}

package/lib/hooks/useIntersectionObserver.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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
+ */
+export declare const useIntersectionObserver: (ref: React.RefObject<Element>, callback: IntersectionObserverCallback, options?: IntersectionObserverInit) => void;

package/lib/hooks/useIntersectionObserver.js

@@ -0,0 +1,20 @@
+import { useEffect } from "react";
+const useIntersectionObserver = (ref, callback, options) => {
+  useEffect(() => {
+    const intersectionObserver = new IntersectionObserver(callback, options);
+    if (ref == null ? void 0 : ref.current) {
+      intersectionObserver.observe(ref.current);
+    }
+    return () => {
+      if (ref == null ? void 0 : ref.current) {
+        intersectionObserver.unobserve(ref.current);
+      } else {
+        intersectionObserver.disconnect();
+      }
+    };
+  }, [ref, options]);
+};
+export {
+  useIntersectionObserver
+};
+//# sourceMappingURL=useIntersectionObserver.js.map

package/lib/hooks/useIntersectionObserver.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIntersectionObserver.js","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>,\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"],"names":[],"mappings":";AAWO,MAAM,0BAA0B,CACrC,KACA,UACA,YACS;AACT,YAAU,MAAM;AACd,UAAM,uBAAuB,IAAI,qBAAqB,UAAU,OAAO;AAEvE,QAAI,2BAAK,SAAS;AAChB,2BAAqB,QAAQ,IAAI,OAAO;AAAA,IAC1C;AAEA,WAAO,MAAY;AACjB,UAAI,2BAAK,SAAS;AAChB,6BAAqB,UAAU,IAAI,OAAO;AAAA,MAC5C,OAAO;AACL,6BAAqB,WAAA;AAAA,MACvB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,KAAK,OAAO,CAAC;AACnB;"}

package/lib/hooks/useInterval.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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
+ */
+export declare const useInterval: (callback: () => void, frequency?: number) => void;

package/lib/hooks/useInterval.js

@@ -0,0 +1,13 @@
+import { useEffect } from "react";
+const useInterval = (callback, frequency = 10) => {
+  useEffect(() => {
+    const timer = setInterval(callback, frequency);
+    return () => {
+      clearInterval(timer);
+    };
+  }, [callback, frequency]);
+};
+export {
+  useInterval
+};
+//# sourceMappingURL=useInterval.js.map

package/lib/hooks/useInterval.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInterval.js","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"],"names":[],"mappings":";AASO,MAAM,cAAc,CAAC,UAAsB,YAAY,OAAa;AACzE,YAAU,MAAM;AACd,UAAM,QAAQ,YAAY,UAAU,SAAS;AAE7C,WAAO,MAAY;AACjB,oBAAc,KAAK;AAAA,IACrB;AAAA,EACF,GAAG,CAAC,UAAU,SAAS,CAAC;AAC1B;"}

package/lib/hooks/useIsMobileBreakpoint.d.ts

@@ -0,0 +1 @@
+export declare const useIsMobileBreakpoint: () => boolean;

package/lib/hooks/useIsMobileBreakpoint.js

@@ -0,0 +1,10 @@
+import { useBreakpoint } from "./useBreakpoint.js";
+import { breakpoints } from "../theme/grid.js";
+const useIsMobileBreakpoint = () => {
+  const breakpoint = useBreakpoint();
+  return breakpoint < breakpoints.md;
+};
+export {
+  useIsMobileBreakpoint
+};
+//# sourceMappingURL=useIsMobileBreakpoint.js.map

package/lib/hooks/useIsMobileBreakpoint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsMobileBreakpoint.js","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"],"names":[],"mappings":";;AAGO,MAAM,wBAAwB,MAAe;AAClD,QAAM,aAAa,cAAA;AACnB,SAAO,aAAa,YAAY;AAClC;"}

package/lib/hooks/useIsServerSide.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Sjekk om React kjører på server, eller ikke. (useEffect kjører ikke på server)
+ *
+ * @returns true dersom koden kjører på server
+ */
+export declare const useIsServerSide: () => boolean;

package/lib/hooks/useIsServerSide.js

@@ -0,0 +1,12 @@
+import { useState, useEffect } from "react";
+const useIsServerSide = () => {
+  const [isServerSide, setIsServerSide] = useState(true);
+  useEffect(() => {
+    setIsServerSide(false);
+  }, []);
+  return isServerSide;
+};
+export {
+  useIsServerSide
+};
+//# sourceMappingURL=useIsServerSide.js.map

package/lib/hooks/useIsServerSide.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsServerSide.js","sources":["../../src/hooks/useIsServerSide.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\n\n/**\n * Sjekk om React kjører på server, eller ikke. (useEffect kjører ikke på server)\n *\n * @returns true dersom koden kjører på server\n */\nexport const useIsServerSide = (): boolean => {\n  const [isServerSide, setIsServerSide] = useState(true);\n\n  useEffect(() => {\n    setIsServerSide(false);\n  }, []);\n\n  return isServerSide;\n};\n"],"names":[],"mappings":";AAOO,MAAM,kBAAkB,MAAe;AAC5C,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,IAAI;AAErD,YAAU,MAAM;AACd,oBAAgB,KAAK;AAAA,EACvB,GAAG,CAAA,CAAE;AAEL,SAAO;AACT;"}

package/lib/hooks/useIsVisible.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 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
+ */
+export declare const useIsVisible: (ref: React.RefObject<Element>, threshold?: number, options?: IntersectionObserverInit, initial?: boolean) => boolean;

package/lib/hooks/useIsVisible.js

@@ -0,0 +1,14 @@
+import { useState } from "react";
+import { useIntersectionObserver } from "./useIntersectionObserver.js";
+const 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;
+};
+export {
+  useIsVisible
+};
+//# sourceMappingURL=useIsVisible.js.map

package/lib/hooks/useIsVisible.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsVisible.js","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>,\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"],"names":[],"mappings":";;AAaO,MAAM,eAAe,CAC1B,KACA,YAAY,GACZ,SACA,UAAU,UACE;AACZ,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,OAAO;AAElD,QAAM,wBAAsD,CAAA,YAAW;AACrE,iBAAa,cAAc,IAAI,QAAQ,CAAC,EAAE,sBAAsB,YAAY,QAAQ,CAAC,EAAE,qBAAqB,SAAS;AAAA,EACvH;AAEA,0BAAwB,KAAK,uBAAuB,EAAE,WAAW,GAAG,SAAS;AAE7E,SAAO;AACT;"}

package/lib/hooks/useKeyboardEvent.d.ts

@@ -0,0 +1,10 @@
+type KeyboardEvents = keyof PickByValue<HTMLElementEventMap, KeyboardEvent>;
+/**
+ * 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"
+ */
+export declare const useKeyboardEvent: (ref: React.RefObject<HTMLElement>, callback: (event: HTMLElementEventMap[KeyboardEvents]) => void, key: string | string[], events?: KeyboardEvents[]) => void;
+export {};