@norges-domstoler/dds-components 5.5.0 → 6.0.0

package/dist/_virtual/_rollupPluginBabelHelpers.js

@@ -98,4 +98,61 @@ function _nonIterableRest() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
-export { _arrayLikeToArray as arrayLikeToArray, _arrayWithHoles as arrayWithHoles, _arrayWithoutHoles as arrayWithoutHoles, _defineProperty as defineProperty, _iterableToArray as iterableToArray, _iterableToArrayLimit as iterableToArrayLimit, _nonIterableRest as nonIterableRest, _nonIterableSpread as nonIterableSpread, _slicedToArray as slicedToArray, _toConsumableArray as toConsumableArray, _typeof as typeof, _unsupportedIterableToArray as unsupportedIterableToArray };
+function _createForOfIteratorHelper(o, allowArrayLike) {
+  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
+
+  if (!it) {
+    if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+      if (it) o = it;
+      var i = 0;
+
+      var F = function () {};
+
+      return {
+        s: F,
+        n: function () {
+          if (i >= o.length) return {
+            done: true
+          };
+          return {
+            done: false,
+            value: o[i++]
+          };
+        },
+        e: function (e) {
+          throw e;
+        },
+        f: F
+      };
+    }
+
+    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
+
+  var normalCompletion = true,
+      didErr = false,
+      err;
+  return {
+    s: function () {
+      it = it.call(o);
+    },
+    n: function () {
+      var step = it.next();
+      normalCompletion = step.done;
+      return step;
+    },
+    e: function (e) {
+      didErr = true;
+      err = e;
+    },
+    f: function () {
+      try {
+        if (!normalCompletion && it.return != null) it.return();
+      } finally {
+        if (didErr) throw err;
+      }
+    }
+  };
+}
+
+export { _arrayLikeToArray as arrayLikeToArray, _arrayWithHoles as arrayWithHoles, _arrayWithoutHoles as arrayWithoutHoles, _createForOfIteratorHelper as createForOfIteratorHelper, _defineProperty as defineProperty, _iterableToArray as iterableToArray, _iterableToArrayLimit as iterableToArrayLimit, _nonIterableRest as nonIterableRest, _nonIterableSpread as nonIterableSpread, _slicedToArray as slicedToArray, _toConsumableArray as toConsumableArray, _typeof as typeof, _unsupportedIterableToArray as unsupportedIterableToArray };

package/dist/cjs/components/InternalHeader/InternalHeader.styles.d.ts

@@ -21,7 +21,7 @@ export declare const StyledOverflowMenu: import("styled-components").StyledCompo
     isOpen?: boolean | undefined;
     onClose?: (() => void) | undefined;
     anchorRef?: import("react").RefObject<HTMLButtonElement> | undefined;
-    placement?: import("../../hooks").Placement | undefined;
+    placement?: import("../..").Placement | undefined;
     offset?: number | undefined;
 } & {
     htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined;

package/dist/cjs/components/OverflowMenu/OverflowMenu.stories.d.ts

@@ -11,7 +11,7 @@ declare const _default: {
         isOpen?: boolean | undefined;
         onClose?: (() => void) | undefined;
         anchorRef?: import("react").RefObject<HTMLButtonElement> | undefined;
-        placement?: import("../../hooks").Placement | undefined;
+        placement?: import("../..").Placement | undefined;
         offset?: number | undefined;
     } & {
         htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined;

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

@@ -1,4 +1,4 @@
-import { ChangeEvent, HTMLAttributes } from 'react';
+import React, { ChangeEvent, HTMLAttributes, ReactElement, Ref } from 'react';
 import { BaseComponentPropsWithChildren } from '../../types';
 declare type Direction = 'column' | 'row';
 export declare type RadioButtonGroupProps<T extends string | number> = BaseComponentPropsWithChildren<HTMLDivElement, {
@@ -25,5 +25,34 @@ export declare type RadioButtonGroupProps<T extends string | number> = BaseCompo
     /**custom id for for gruppen, knytter `label` til gruppen via `aria-label`. */
     groupId?: string;
 }, Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>>;
-export declare const RadioButtonGroup: <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;
+export declare const RadioButtonGroup: <T extends string | number = string>(props: Pick<Omit<React.HTMLAttributes<HTMLDivElement>, "onChange">, "className" | "id"> & {
+    /** Gir alle barna `name` prop.*/
+    name?: string | undefined;
+    /**Ledetekst for hele gruppen. */
+    label?: string | undefined;
+    /**Funksjonen for onChange-event for barna. */
+    onChange?: ((event: ChangeEvent<HTMLInputElement>, value: T | undefined) => void) | undefined;
+    /**Legger en markør (*) bak label som indikerer at input er påkrevd. Gjør alle barna påkrevd ved å gi dem `required` prop. */
+    required?: boolean | undefined;
+    /**Meldingen som vises ved valideringsfeil. Gir alle barna error prop. */
+    errorMessage?: string | undefined;
+    /**Hjelpetekst for gruppen. */
+    tip?: string | undefined;
+    /**Gir alle barna `disabled` prop. */
+    disabled?: boolean | undefined;
+    /**Gir alle barna `readOnly` prop */
+    readOnly?: boolean | undefined;
+    /**Retningen radioknappene skal gjengis i. */
+    direction?: Direction | undefined;
+    /**Default verdi - en `<RadioButton />` blir forhåndsvalgt. **OBS!** brukes kun når brukeren ikke skal fylle ut selv. */
+    value?: T | undefined;
+    /**custom id for for gruppen, knytter `label` til gruppen via `aria-label`. */
+    groupId?: string | undefined;
+} & {
+    children?: React.ReactNode;
+} & {
+    htmlProps?: Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> | undefined;
+} & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => ReactElement;
 export {};

package/dist/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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>>];

package/dist/cjs/hooks/useScreenSize.d.ts

@@ -5,4 +5,16 @@ export declare enum ScreenSize {
     Large = 3,
     XLarge = 4
 }
+/**
+ * Sjekker skjermstørrelsen basert på brekkpunkter definerte i designsystemet. Eksempel på bruk:
+ * ```
+ * const MyComponent = () => {
+ *  const screenSize = useScreenSize();
+ *  const isSmallScreen = screenSize === ScreenSize.Small;
+ *
+ *  return <div className={isSmallScreen && 'smallDiv'} >innhold</div>
+ * }
+ * ```
+ * @returns den aktuelle skjermstørrelsen basert på {@link ScreenSize}.
+ */
 export declare const useScreenSize: () => ScreenSize;

package/dist/cjs/index.d.ts

@@ -37,3 +37,4 @@ export * from './components/ScrollableContainer';
 export * from './icons/tsx';
 export * from './components/ToggleBar';
 export * from './components/Stepper';
+export * from './hooks';