@norges-domstoler/dds-components 5.5.0 → 6.0.0

package/dist/components/RadioButton/RadioButtonGroup.js

@@ -1,7 +1,7 @@
 import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useId } from 'react';
+import { forwardRef, useState, useId } from 'react';
 import styled, { css } from 'styled-components';
 import '../../helpers/Backdrop/Backdrop.js';
 import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
@@ -34,24 +34,25 @@ var Label = styled(Typography).withConfig({
   displayName: "RadioButtonGroup__Label",
   componentId: "sc-1xsll60-2"
 })(["padding-left:", ";"], radioButtonGroupTokens.label.spaceLeft);
-var RadioButtonGroup = function RadioButtonGroup(_a) {
-  var name = _a.name,
-      label = _a.label,
-      groupId = _a.groupId,
-      errorMessage = _a.errorMessage,
-      tip = _a.tip,
-      disabled = _a.disabled,
-      readOnly = _a.readOnly,
-      _a$direction = _a.direction,
-      direction = _a$direction === void 0 ? 'row' : _a$direction,
-      value = _a.value,
-      children = _a.children,
-      required = _a.required,
-      onChange = _a.onChange,
-      id = _a.id,
-      className = _a.className,
-      htmlProps = _a.htmlProps,
-      rest = __rest(_a, ["name", "label", "groupId", "errorMessage", "tip", "disabled", "readOnly", "direction", "value", "children", "required", "onChange", "id", "className", "htmlProps"]);
+
+var RadioButtonGroupInner = function RadioButtonGroupInner(props, ref) {
+  var name = props.name,
+      label = props.label,
+      groupId = props.groupId,
+      errorMessage = props.errorMessage,
+      tip = props.tip,
+      disabled = props.disabled,
+      readOnly = props.readOnly,
+      _props$direction = props.direction,
+      direction = _props$direction === void 0 ? 'row' : _props$direction,
+      value = props.value,
+      children = props.children,
+      required = props.required,
+      onChange = props.onChange,
+      id = props.id,
+      className = props.className,
+      htmlProps = props.htmlProps,
+      rest = __rest(props, ["name", "label", "groupId", "errorMessage", "tip", "disabled", "readOnly", "direction", "value", "children", "required", "onChange", "id", "className", "htmlProps"]);
 
   var _useState = useState(value),
       _useState2 = _slicedToArray(_useState, 2),
@@ -80,6 +81,8 @@ var RadioButtonGroup = function RadioButtonGroup(_a) {
     onChange: handleChange
   };
   return jsxs(Container, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
+    ref: ref
+  }, {
     children: [jsxs(Label, Object.assign({
       forwardedAs: "span",
       typographyType: "supportingStyleLabel01",
@@ -110,4 +113,6 @@ var RadioButtonGroup = function RadioButtonGroup(_a) {
   }));
 };
 
+var RadioButtonGroup = /*#__PURE__*/forwardRef(RadioButtonGroupInner);
+
 export { RadioButtonGroup };

package/dist/components/RadioButton/RadioButtonGroup.stories.d.ts

@@ -1,7 +1,25 @@
 import { RadioButtonGroupProps } from '.';
 declare const _default: {
     title: string;
-    component: <T extends string | number = string>({ name, label, groupId, errorMessage, tip, disabled, readOnly, direction, value, children, required, onChange, id, className, htmlProps, ...rest }: RadioButtonGroupProps<T>) => JSX.Element;
+    component: <T extends string | number = string>(props: Pick<Omit<import("react").HTMLAttributes<HTMLDivElement>, "onChange">, "id" | "className"> & {
+        name?: string | undefined;
+        label?: string | undefined;
+        onChange?: ((event: import("react").ChangeEvent<HTMLInputElement>, value: T | undefined) => void) | undefined;
+        required?: boolean | undefined;
+        errorMessage?: string | undefined;
+        tip?: string | undefined;
+        disabled?: boolean | undefined;
+        readOnly?: boolean | undefined;
+        direction?: ("row" | "column") | undefined;
+        value?: T | undefined;
+        groupId?: string | undefined;
+    } & {
+        children?: import("react").ReactNode;
+    } & {
+        htmlProps?: Omit<import("react").HTMLAttributes<HTMLDivElement>, "onChange"> | undefined;
+    } & {
+        ref?: import("react").Ref<HTMLDivElement> | undefined;
+    }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     argTypes: {
         label: {
             control: {

package/dist/components/Tabs/Tab.d.ts

@@ -1,14 +1,11 @@
 import { ButtonHTMLAttributes, Dispatch, SetStateAction } from 'react';
 import { BaseComponentPropsWithChildren } from '../../types';
-import { Property } from 'csstype';
 import { SvgIcon } from '../../icons/utils';
 export declare type TabProps = BaseComponentPropsWithChildren<HTMLButtonElement, {
     /**Spesifiserer om fanen er aktiv. */
     active?: boolean;
     /** Ikon. */
     icon?: SvgIcon;
-    /** Custom bredde for enkel fane. */
-    width?: Property.Width;
     /** Spesifiserer om `<Tab />` skal ha fokus. **OBS!** settes automatisk av forelder.*/
     focus?: boolean;
     /**  Callback som setter fokus. **OBS!** settes automatisk av forelder.*/
@@ -21,8 +18,6 @@ export declare const Tab: import("react").ForwardRefExoticComponent<Pick<Omit<Bu
     active?: boolean | undefined;
     /** Ikon. */
     icon?: SvgIcon | undefined;
-    /** Custom bredde for enkel fane. */
-    width?: Property.Width<0 | (string & {})> | undefined;
     /** Spesifiserer om `<Tab />` skal ha fokus. **OBS!** settes automatisk av forelder.*/
     focus?: boolean | undefined;
     /**  Callback som setter fokus. **OBS!** settes automatisk av forelder.*/

package/dist/components/Tabs/Tab.js

@@ -19,20 +19,16 @@ import '../../helpers/styling/selection.js';
 var Button = styled.button.withConfig({
   displayName: "Tab__Button",
   componentId: "sc-1dd8soq-0"
-})(["@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s,border-bottom 0.2s,color 0.2s,", ";}", " width:", ";", ";", " &:focus-visible{", "}&:hover{", "}"], focusVisibleTransitionValue, tabsTokens.tab.base, function (_ref) {
-  var width = _ref.width;
-  return width;
-}, function (_ref2) {
-  var direction = _ref2.direction;
+})(["@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s,border-bottom 0.2s,color 0.2s,", ";}", " ", ";", " &:focus-visible{", "}&:hover{", "}"], focusVisibleTransitionValue, tabsTokens.tab.base, function (_ref) {
+  var direction = _ref.direction;
   return tabsTokens.tab.direction[direction].base;
-}, function (_ref3) {
-  var active = _ref3.active;
+}, function (_ref2) {
+  var active = _ref2.active;
   return active && css(["", ""], tabsTokens.tab.active.base);
 }, tabsTokens.tab.focus.base, tabsTokens.tab.hover.base);
 var Tab = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$active = props.active,
       active = _props$active === void 0 ? false : _props$active,
-      width = props.width,
       icon = props.icon,
       children = props.children,
       focus = props.focus,
@@ -43,7 +39,7 @@ var Tab = /*#__PURE__*/forwardRef(function (props, ref) {
       id = props.id,
       className = props.className,
       htmlProps = props.htmlProps,
-      rest = __rest(props, ["active", "width", "icon", "children", "focus", "setFocus", "index", "onClick", "onKeyDown", "id", "className", "htmlProps"]);
+      rest = __rest(props, ["active", "icon", "children", "focus", "setFocus", "index", "onClick", "onKeyDown", "id", "className", "htmlProps"]);
 
   var itemRef = useRef(null);
   var combinedRef = useCombinedRef(ref, itemRef);
@@ -51,8 +47,7 @@ var Tab = /*#__PURE__*/forwardRef(function (props, ref) {
   var _useTabsContext = useTabsContext(),
       tabPanelsRef = _useTabsContext.tabPanelsRef,
       setHasTabFocus = _useTabsContext.setHasTabFocus,
-      tabContentDirection = _useTabsContext.tabContentDirection,
-      tabWidth = _useTabsContext.tabWidth;
+      tabContentDirection = _useTabsContext.tabContentDirection;
 
   useEffect(function () {
     var _a;
@@ -89,7 +84,6 @@ var Tab = /*#__PURE__*/forwardRef(function (props, ref) {
     'aria-selected': active,
     role: 'tab',
     active: active,
-    width: width !== null && width !== void 0 ? width : tabWidth,
     direction: tabContentDirection,
     onClick: handleOnClick,
     onKeyDown: handleOnKeyDown,

package/dist/components/Tabs/TabList.js

@@ -14,11 +14,17 @@ import { useTabsContext } from './Tabs.context.js';
 import '../ScrollableContainer/Scrollbar.js';
 import '../ScrollableContainer/ScrollableContainer.js';
 import { scrollbarStyling } from '../ScrollableContainer/scrollbarStyling.js';
+import { focusVisibleTransitionValue, focusVisible } from '../../helpers/styling/focusVisible.js';
+import '../../helpers/styling/hover.js';
+import '../../helpers/styling/focus.js';
+import '../../helpers/styling/danger.js';
+import '../../helpers/styling/selection.js';
 
+var tabList = tabsTokens.tabList;
 var TabRow = styled.div.withConfig({
   displayName: "TabList__TabRow",
   componentId: "sc-1ldr0lz-0"
-})(["", " ", " ", " scroll-snap-type:x mandatory;@media (prefers-reduced-motion:no-preference){scroll-behavior:smooth;}&:focus-visible{", "}&:focus-visible button{outline:none;}"], tabsTokens.tabList.base, scrollbarStyling.webkit, scrollbarStyling.firefox, tabsTokens.tabList.focus.base);
+})(["border-bottom:", ";display:grid;grid-auto-flow:column;grid-auto-columns:1fr;overflow-x:auto;", " ", " scroll-snap-type:x mandatory;@media (prefers-reduced-motion:no-preference){scroll-behavior:smooth;transition:", ";}&:focus-visible{", "}&:focus-visible button{outline:none;}"], tabList.borderBottom, scrollbarStyling.webkit, scrollbarStyling.firefox, focusVisibleTransitionValue, focusVisible);
 var TabList = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
       id = _a.id,

package/dist/components/Tabs/Tabs.context.d.ts

@@ -1,6 +1,5 @@
 import { RefObject } from 'react';
 import { Direction } from '../../types';
-import { Property } from 'csstype';
 declare type Tabs = {
     activeTab: number;
     tabsId: string;
@@ -10,7 +9,6 @@ declare type Tabs = {
     hasTabFocus: boolean;
     setHasTabFocus: (hasFocus: boolean) => void;
     tabContentDirection: Direction;
-    tabWidth: Property.Width;
 };
 export declare const TabsContext: import("react").Context<Tabs>;
 export declare const useTabsContext: () => Tabs;

package/dist/components/Tabs/Tabs.context.js

@@ -12,8 +12,7 @@ var TabsContext = /*#__PURE__*/createContext({
   setHasTabFocus: function setHasTabFocus() {
     return null;
   },
-  tabContentDirection: 'row',
-  tabWidth: '150px'
+  tabContentDirection: 'row'
 });
 var useTabsContext = function useTabsContext() {
   return useContext(TabsContext);

package/dist/components/Tabs/Tabs.d.ts

@@ -8,8 +8,8 @@ export declare type TabsProps = BaseComponentPropsWithChildren<HTMLDivElement, {
     onChange?: (index: number) => void;
     /** Retningen ikon og tekst vises i `<Tab />`-elementer. */
     tabContentDirection?: Direction;
-    /**Custom bredde lik for alle `<Tab />`. */
-    tabWidth?: Property.Width;
+    /**Bredde for hele komponenten. */
+    width?: Property.Width;
 }, Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>>;
 export declare const Tabs: import("react").ForwardRefExoticComponent<Pick<Omit<HTMLAttributes<HTMLDivElement>, "onChange">, "className" | "id"> & {
     /** Indeksen til den aktive fanen. **OBS!** Ved å sette denne vil brukere aldri kunne endre tab uten at du også registrerer en `onChange`-lytter for å ta vare på aktiv tab utenfor komponenten. */
@@ -18,8 +18,8 @@ export declare const Tabs: import("react").ForwardRefExoticComponent<Pick<Omit<H
     onChange?: ((index: number) => void) | undefined;
     /** Retningen ikon og tekst vises i `<Tab />`-elementer. */
     tabContentDirection?: Direction | undefined;
-    /**Custom bredde lik for alle `<Tab />`. */
-    tabWidth?: Property.Width<0 | (string & {})> | undefined;
+    /**Bredde for hele komponenten. */
+    width?: Property.Width<0 | (string & {})> | undefined;
 } & {
     children?: import("react").ReactNode;
 } & {

package/dist/components/Tabs/Tabs.js

@@ -1,15 +1,18 @@
 import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
+import styled, { css } from 'styled-components';
 import { forwardRef, useId, useState, useRef, useEffect } from 'react';
-import styled from 'styled-components';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 import { TabsContext } from './Tabs.context.js';
 
 var Container = styled.div.withConfig({
   displayName: "Tabs__Container",
   componentId: "sc-7ta5g2-0"
-})([""]);
+})(["", ";"], function (_ref) {
+  var width = _ref.width;
+  return width && css(["width:", ";"], width);
+});
 var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
   var id = props.id,
       _props$activeTab = props.activeTab,
@@ -17,12 +20,11 @@ var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
       onChange = props.onChange,
       _props$tabContentDire = props.tabContentDirection,
       tabContentDirection = _props$tabContentDire === void 0 ? 'row' : _props$tabContentDire,
-      _props$tabWidth = props.tabWidth,
-      tabWidth = _props$tabWidth === void 0 ? '150px' : _props$tabWidth,
+      width = props.width,
       children = props.children,
       className = props.className,
       htmlProps = props.htmlProps,
-      rest = __rest(props, ["id", "activeTab", "onChange", "tabContentDirection", "tabWidth", "children", "className", "htmlProps"]);
+      rest = __rest(props, ["id", "activeTab", "onChange", "tabContentDirection", "width", "children", "className", "htmlProps"]);
 
   var generatedId = useId();
   var uniqueId = id !== null && id !== void 0 ? id : "".concat(generatedId, "-tabs");
@@ -62,11 +64,12 @@ var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
       tabPanelsRef: tabPanelsRef,
       hasTabFocus: hasTabFocus,
       setHasTabFocus: setHasTabFocus,
-      tabContentDirection: tabContentDirection,
-      tabWidth: tabWidth
+      tabContentDirection: tabContentDirection
     }
   }, {
     children: jsx(Container, Object.assign({}, containerProps, {
+      width: width
+    }, {
       children: children
     }))
   }));

package/dist/components/Tabs/Tabs.stories.d.ts

@@ -6,5 +6,6 @@ export declare const Overview: Story<TabsProps>;
 export declare const Default: Story<TabsProps>;
 export declare const WithIcon: Story<TabsProps>;
 export declare const ActiveTab: Story<TabsProps>;
-export declare const TabWidth: Story<TabsProps>;
+export declare const WithWidth: Story<TabsProps>;
+export declare const TabLongNames: Story<TabsProps>;
 export declare const ManyTabs: Story<TabsProps>;

package/dist/components/Tabs/Tabs.tokens.d.ts

@@ -1,11 +1,6 @@
 import { CSSObject } from 'styled-components';
 export declare const tabsTokens: {
-    tabList: {
-        base: CSSObject;
-        focus: {
-            base: CSSObject;
-        };
-    };
+    tabList: CSSObject;
     tab: {
         base: CSSObject;
         direction: {

package/dist/components/Tabs/Tabs.tokens.js

@@ -1,7 +1,7 @@
 import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
 import { removeButtonStyling } from '../../helpers/styling/removeButtonStyling.js';
 import 'styled-components';
-import { focusVisibleTransitionValue, focusVisible } from '../../helpers/styling/focusVisible.js';
+import { focusVisible } from '../../helpers/styling/focusVisible.js';
 import '../../helpers/styling/hover.js';
 import '../../helpers/styling/focus.js';
 import '../../helpers/styling/danger.js';
@@ -10,15 +10,9 @@ import '../../helpers/styling/selection.js';
 var Border = ddsBaseTokens.border,
     Spacing = ddsBaseTokens.spacing,
     Colors = ddsBaseTokens.colors;
-var tabListBase = {
-  '@media (prefers-reduced-motion: no-preference)': {
-    transition: focusVisibleTransitionValue
-  },
-  display: 'flex',
-  borderBottom: "".concat(Border.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(Border.BordersDdsBorderStyleLightStroke),
-  overflowX: 'auto'
+var tabList = {
+  borderBottom: "".concat(Border.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(Border.BordersDdsBorderStyleLightStroke)
 };
-var tabListFocusBase = Object.assign({}, focusVisible);
 var tabBase = Object.assign(Object.assign({}, removeButtonStyling), {
   display: 'flex',
   alignItems: 'center',
@@ -61,12 +55,7 @@ var tabPanelBase = {
 };
 var tabPanelFocusVisibleBase = Object.assign({}, focusVisible);
 var tabsTokens = {
-  tabList: {
-    base: tabListBase,
-    focus: {
-      base: tabListFocusBase
-    }
-  },
+  tabList: tabList,
   tab: {
     base: tabBase,
     direction: {

package/dist/components/Tooltip/Tooltip.stories.d.ts

@@ -3,7 +3,7 @@ declare const _default: {
     title: string;
     component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").HTMLAttributes<HTMLDivElement>, "children" | "style" | "onMouseLeave" | "onMouseOver">, "id" | "className"> & {
         text: string;
-        placement?: import("../../hooks").Placement | undefined;
+        placement?: import("../..").Placement | undefined;
         children: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> & import("react").RefAttributes<HTMLElement>;
         delay?: number | undefined;
         tooltipId?: string | undefined;

package/dist/hooks/index.d.ts

@@ -5,5 +5,4 @@ export * from './useFloatPosition';
 export * from './useRoveFocus';
 export * from './useFocusTrap';
 export * from './useMountTransition';
-export * from './useId';
 export * from './useScreenSize';

package/dist/hooks/useCombinedRefs.d.ts

@@ -1,2 +1,20 @@
 import type { RefCallback } from 'react';
+/**
+ * Kombinerer refs for et element.
+ * Eksempel på bruk:
+ * ```
+ * const MyComponent = forwardRef<HTMLDivElement, Props>((props, ref) => {
+ *
+ *  const itemRef = useRef<HTMLDivElement>(null);
+ *  const combinedRef = useCombinedRef(ref, itemRef);
+ *
+ *  return <div ref={combinedRef}>innhold</div>
+ * });
+ * ```
+ * @param refs array med refs.
+ * @template T elementet som refereres til.
+ * @returns  callback med kombinerte refs.
+ *
+ * {@link useCombinedRef}
+ */
 export declare function useCombinedRef<T>(...refs: React.Ref<T>[]): RefCallback<T>;

package/dist/hooks/useCombinedRefs.js

@@ -1,6 +1,25 @@
 import { typeof as _typeof } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { useCallback } from 'react';
 
+/**
+ * Kombinerer refs for et element.
+ * Eksempel på bruk:
+ * ```
+ * const MyComponent = forwardRef<HTMLDivElement, Props>((props, ref) => {
+ *
+ *  const itemRef = useRef<HTMLDivElement>(null);
+ *  const combinedRef = useCombinedRef(ref, itemRef);
+ *
+ *  return <div ref={combinedRef}>innhold</div>
+ * });
+ * ```
+ * @param refs array med refs.
+ * @template T elementet som refereres til.
+ * @returns  callback med kombinerte refs.
+ *
+ * {@link useCombinedRef}
+ */
+
 function useCombinedRef() {
   for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
     refs[_key] = arguments[_key];

package/dist/hooks/useFocusTrap.d.ts

@@ -1 +1,16 @@
-export declare function useFocusTrap<T extends HTMLElement>(active: boolean): import("react").RefObject<T>;
+import { RefObject } from 'react';
+/**
+ * Fanger fokus i en loop inni et element. Typisk bruk:
+ * ```
+ * const MyComponent = (props) => {
+ *
+ *  const componentRef = useFocusTrap<HTMLDivElement>(props.isOpen);
+ *
+ *  return props.isOpen ? <div><button>click</button></div> : null;
+ *
+ * }
+ * ```
+ * @param active om focus skal fanges, f.eks. når en modal åpnes.
+ * @returns ref til elementet som fanger fokus.
+ */
+export declare function useFocusTrap<T extends HTMLElement>(active: boolean): RefObject<T>;

package/dist/hooks/useFocusTrap.js

@@ -1,5 +1,20 @@
 import { useRef, useEffect } from 'react';
 
+/**
+ * Fanger fokus i en loop inni et element. Typisk bruk:
+ * ```
+ * const MyComponent = (props) => {
+ *
+ *  const componentRef = useFocusTrap<HTMLDivElement>(props.isOpen);
+ *
+ *  return props.isOpen ? <div><button>click</button></div> : null;
+ *
+ * }
+ * ```
+ * @param active om focus skal fanges, f.eks. når en modal åpnes.
+ * @returns ref til elementet som fanger fokus.
+ */
+
 function useFocusTrap(active) {
   var elementRef = useRef(null);
   useEffect(function () {

package/dist/hooks/useMountTransition.d.ts

@@ -1 +1,33 @@
+/**
+ * Tillater effekter og animasjoner å bli gjennomført like etter et element blir lagt til eller like før det blir fjernet fra DOM.
+ * Typisk bruk:
+ * ```
+ * // CSS
+ * .component {
+ *  transition: opacity 0.2s;
+ *  opacity: 0;
+ * }
+ *
+ * .transitionedIn.mounted {
+ *  opacity: 1;
+ * }
+ *
+ * const MyComponent = (props) => {
+ *
+ * const hasTransitionedIn = useMountTransition(props.isMounted, 500);
+ *
+ *  return props.isMounted || hasTransitionedIn ? (
+ *  <div
+ *  className={`component ${hasTransitionedIn && 'transitionedIn'} ${props.isMounted && 'mounted'}`}
+ *  >
+ *    innhold
+ *  </div>)
+ * : null;
+ *
+ * }
+ * ```
+ * @param isMounted om elementet er mounted.
+ * @param unmountDelay hvor lenge transition skal vare før unmount.
+ * @returns om transition er ferdig.
+ */
 export declare const useMountTransition: (isMounted: boolean, unmountDelay: number) => boolean;

package/dist/hooks/useMountTransition.js

@@ -1,6 +1,39 @@
 import { slicedToArray as _slicedToArray } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { useState, useEffect } from 'react';
 
+/**
+ * Tillater effekter og animasjoner å bli gjennomført like etter et element blir lagt til eller like før det blir fjernet fra DOM.
+ * Typisk bruk:
+ * ```
+ * // CSS
+ * .component {
+ *  transition: opacity 0.2s;
+ *  opacity: 0;
+ * }
+ *
+ * .transitionedIn.mounted {
+ *  opacity: 1;
+ * }
+ *
+ * const MyComponent = (props) => {
+ *
+ * const hasTransitionedIn = useMountTransition(props.isMounted, 500);
+ *
+ *  return props.isMounted || hasTransitionedIn ? (
+ *  <div
+ *  className={`component ${hasTransitionedIn && 'transitionedIn'} ${props.isMounted && 'mounted'}`}
+ *  >
+ *    innhold
+ *  </div>)
+ * : null;
+ *
+ * }
+ * ```
+ * @param isMounted om elementet er mounted.
+ * @param unmountDelay hvor lenge transition skal vare før unmount.
+ * @returns om transition er ferdig.
+ */
+
 var useMountTransition = function useMountTransition(isMounted, unmountDelay) {
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),

package/dist/hooks/useOnClickOutside.d.ts

@@ -1 +1,14 @@
+/**
+ * Kjører logikk når brukeren klikker utenfor et element, f.eks at elementet fjernes fra DOM.
+ * Typisk bruk:
+ * ```
+ * const [isOpen, setOpen] = useState(true);
+ * const ref = useRef<HTMLElement>(null);
+ * useOnClickOutside(ref, () => setOpen(false));
+ *
+ * return <div ref={ref}>innhold</div>
+ * ```
+ * @param element HTML elementet man klikker utenfor.
+ * @param handler funksjonen som kjøres ved klikk utenfor.
+ */
 export declare function useOnClickOutside(element: HTMLElement | null | (HTMLElement | null)[], handler: (event: MouseEvent | TouchEvent) => void): void;

package/dist/hooks/useOnClickOutside.js

@@ -1,5 +1,19 @@
 import { useEffect } from 'react';
 
+/**
+ * Kjører logikk når brukeren klikker utenfor et element, f.eks at elementet fjernes fra DOM.
+ * Typisk bruk:
+ * ```
+ * const [isOpen, setOpen] = useState(true);
+ * const ref = useRef<HTMLElement>(null);
+ * useOnClickOutside(ref, () => setOpen(false));
+ *
+ * return <div ref={ref}>innhold</div>
+ * ```
+ * @param element HTML elementet man klikker utenfor.
+ * @param handler funksjonen som kjøres ved klikk utenfor.
+ */
+
 function useOnClickOutside(element, handler) {
   useEffect(function () {
     var listener = function listener(event) {

package/dist/hooks/useOnKeyDown.d.ts

@@ -1 +1,14 @@
+/**
+ * Kjører logikk når en spesifisert tast blir trykt ned.
+ * Typisk bruk:
+ * ```
+ * const [isOpen, setOpen] = useState(true);
+ * const ref = useRef<HTMLElement>(null);
+ * useOnKeyDown(['Escape', 'Esc'], () => setOpen(false));
+ *
+ * return isOpen ? <div>innhold</div> : null;
+ * ```
+ * @param key tasten som trykkes.
+ * @param handler funksjonen som skal kjøres.
+ */
 export declare const useOnKeyDown: (key: string | string[], handler: (event: KeyboardEvent) => void) => void;

package/dist/hooks/useOnKeyDown.js

@@ -1,5 +1,19 @@
 import { useEffect } from 'react';
 
+/**
+ * Kjører logikk når en spesifisert tast blir trykt ned.
+ * Typisk bruk:
+ * ```
+ * const [isOpen, setOpen] = useState(true);
+ * const ref = useRef<HTMLElement>(null);
+ * useOnKeyDown(['Escape', 'Esc'], () => setOpen(false));
+ *
+ * return isOpen ? <div>innhold</div> : null;
+ * ```
+ * @param key tasten som trykkes.
+ * @param handler funksjonen som skal kjøres.
+ */
+
 var useOnKeyDown = function useOnKeyDown(key, handler) {
   useEffect(function () {
     var listener = function listener(event) {

package/dist/hooks/useRoveFocus.d.ts

@@ -1,4 +1,28 @@
 import { Dispatch, SetStateAction, KeyboardEvent } from 'react';
 import { Direction } from '../types';
 export declare const isKeyboardEvent: (e: Event | KeyboardEvent<Element>) => e is KeyboardEvent<Element>;
-export declare function useRoveFocus(size: number | undefined, reset?: boolean, direction?: Direction): [number, Dispatch<SetStateAction<number>>];
+/**
+ * Bytter fokus mellom elementer i en gruppe med piltaster og ikke Tab, og looper fokus i gruppen. Typisk bruk:
+ * ```
+ * import elements from './elements';
+ * import RoveItem from './RoveItem';
+ *
+ * const MyComponent = () => {
+ *  const [focus, setFocus] = useRoveFocus(elements.length);
+ *
+ *  return (
+ *  <ul>
+ *    {elements.map((element, index) => (
+ *    <li key={element}>
+ *      <RoveItem index={index} focus={focus === index} setFocus={setFocus}>{element.name}</RoveItem>
+ *    </li>
+ *    ))}
+ *  </ul>)
+ * }
+ * ```
+ * @param size antall elementer i gruppen.
+ * @param reset om fokus i gruppen skal nullstilles; når man tabber seg inn i gruppen skal focus være nullstilt.
+ * @param direction retning elementene blas i.
+ * @returns hook par: indeksen til fokuserte elemenentet og funksjonen som håndterer fokus.
+ */
+export declare function useRoveFocus(size?: number, reset?: boolean, direction?: Direction): [number, Dispatch<SetStateAction<number>>];