@norges-domstoler/dds-components 13.3.0 → 13.5.0

package/dist/helpers/styling/focusVisible.d.ts

@@ -1,37 +1,37 @@
-export declare const outlineOffset = "2px";
-export declare const focusVisible: {
-    outline: string;
-    outlineOffset: string;
-};
-export declare const focusVisibleOnDark: {
-    outline: string;
-    outlineOffset: string;
-};
-export declare const focusVisibleTransitionValue = "outline-offset 0.2s";
-export declare const focusVisibleLink: {
-    outline: string;
-    backgroundColor: string;
-    color: string;
-    textDecoration: string;
-};
-export declare const focusVisibleLinkOnDark: {
-    outline: string;
-    backgroundColor: string;
-    color: string;
-    textDecoration: string;
-};
-export declare const focusVisibleLinkTransitionValue = "background-color 0.2s, text-decoration 0.2s, color 0.2s";
-export declare const focusVisibleWithBorder: {
-    outline: string;
-    borderColor: string;
-    boxShadow: string;
-};
-export declare const focusVisibleThickWithBorderOnDark: {
-    outline: string;
-    borderColor: string;
-    boxShadow: string;
-};
-export declare const focusVisibleInset: {
-    outline: string;
-    boxShadow: string;
-};
+export declare const outlineOffset = "2px";
+export declare const focusVisible: {
+    outline: string;
+    outlineOffset: string;
+};
+export declare const focusVisibleOnDark: {
+    outline: string;
+    outlineOffset: string;
+};
+export declare const focusVisibleTransitionValue = "outline-offset 0.2s";
+export declare const focusVisibleLink: {
+    outline: string;
+    backgroundColor: string;
+    color: string;
+    textDecoration: string;
+};
+export declare const focusVisibleLinkOnDark: {
+    outline: string;
+    backgroundColor: string;
+    color: string;
+    textDecoration: string;
+};
+export declare const focusVisibleLinkTransitionValue = "background-color 0.2s, text-decoration 0.2s, color 0.2s";
+export declare const focusVisibleWithBorder: {
+    outline: string;
+    borderColor: string;
+    boxShadow: string;
+};
+export declare const focusVisibleThickWithBorderOnDark: {
+    outline: string;
+    borderColor: string;
+    boxShadow: string;
+};
+export declare const focusVisibleInset: {
+    outline: string;
+    boxShadow: string;
+};

package/dist/helpers/styling/hideInput.d.ts

@@ -1,7 +1,7 @@
-export declare const hideInput: {
-    clip: string;
-    position: string;
-    height: string;
-    width: string;
-    margin: number;
-};
+export declare const hideInput: {
+    clip: string;
+    position: string;
+    height: string;
+    width: string;
+    margin: number;
+};

package/dist/helpers/styling/hover.d.ts

@@ -1,12 +1,12 @@
-export declare const hoverWithBorder: {
-    borderColor: string;
-    boxShadow: string;
-};
-export declare const hoverInputfield: {
-    borderColor: string;
-    boxShadow: string;
-};
-export declare const hoverDangerInputfield: {
-    borderColor: string;
-    boxShadow: string;
-};
+export declare const hoverWithBorder: {
+    borderColor: string;
+    boxShadow: string;
+};
+export declare const hoverInputfield: {
+    borderColor: string;
+    boxShadow: string;
+};
+export declare const hoverDangerInputfield: {
+    borderColor: string;
+    boxShadow: string;
+};

package/dist/helpers/styling/index.d.ts

@@ -1,9 +1,9 @@
-export * from './removeButtonStyling';
-export * from './visibilityTransition';
-export * from './focusVisible';
-export * from './hover';
-export * from './focus';
-export * from './danger';
-export * from './hideInput';
-export * from './selection';
-export * from './normalize';
+export * from './removeButtonStyling';
+export * from './visibilityTransition';
+export * from './focusVisible';
+export * from './hover';
+export * from './focus';
+export * from './danger';
+export * from './hideInput';
+export * from './selection';
+export * from './normalize';

package/dist/helpers/styling/normalize.d.ts

@@ -1,5 +1,5 @@
-import { Property } from 'csstype';
-export declare const normalizeButton: {
-    margin: number;
-    textTransform: Property.TextTransform;
-};
+import { Property } from 'csstype';
+export declare const normalizeButton: {
+    margin: number;
+    textTransform: Property.TextTransform;
+};

package/dist/helpers/styling/removeButtonStyling.d.ts

@@ -1,9 +1,9 @@
-export declare const removeButtonStyling: {
-    background: string;
-    color: string;
-    border: string;
-    padding: number;
-    font: string;
-    cursor: string;
-    outline: string;
-};
+export declare const removeButtonStyling: {
+    background: string;
+    color: string;
+    border: string;
+    padding: number;
+    font: string;
+    cursor: string;
+    outline: string;
+};

package/dist/helpers/styling/removeListStyling.d.ts

@@ -1,5 +1,5 @@
-export declare const removeListStyling: {
-    listStyle: string;
-    padding: number;
-    margin: number;
-};
+export declare const removeListStyling: {
+    listStyle: string;
+    padding: number;
+    margin: number;
+};

package/dist/helpers/styling/selection.d.ts

@@ -1,4 +1,4 @@
-export declare const selection: {
-    color: string;
-    backgroundColor: string;
-};
+export declare const selection: {
+    color: string;
+    backgroundColor: string;
+};

package/dist/helpers/styling/visibilityTransition.d.ts

@@ -1 +1 @@
-export declare const visibilityTransition: (open: boolean) => import("styled-components").FlattenSimpleInterpolation;
+export declare const visibilityTransition: (open: boolean) => import("styled-components").FlattenSimpleInterpolation;

package/dist/hooks/index.d.ts

@@ -1,9 +1,9 @@
-export * from './useCombinedRefs';
-export * from './useOnClickOutside';
-export * from './useOnKeyDown';
-export * from './useFloatPosition';
-export * from './useRoveFocus';
-export * from './useFocusTrap';
-export * from './useMountTransition';
-export * from './useScreenSize';
-export * from './useReturnFocusOnBlur';
+export * from './useCombinedRefs';
+export * from './useOnClickOutside';
+export * from './useOnKeyDown';
+export * from './useFloatPosition';
+export * from './useRoveFocus';
+export * from './useFocusTrap';
+export * from './useMountTransition';
+export * from './useScreenSize';
+export * from './useReturnFocusOnBlur';

package/dist/hooks/useCombinedRefs.d.ts

@@ -1,20 +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>;
+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,23 +1,23 @@
 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}
+/**
+ * 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++) {

package/dist/hooks/useFloatPosition.d.ts

@@ -1,48 +1,48 @@
-/// <reference types="react" />
-import { Strategy } from '@floating-ui/react-dom';
-export type Placement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
-interface UseFloatPositionOptions {
-    /**
-     * Whether to update the position of the floating element on every animation frame if required.
-     * This is optimized for performance but can still be costly.
-     * @default true
-     */
-    animationFrame?: boolean;
-    /**
-     * `offset` is used to displace the floating element from its core placement.
-     * The value passed is logical, meaning its effect on the
-     * physical result is dependent on the writing direction (e.g. RTL).
-     * @default 8
-     */
-    offset?: number;
-    /**
-     * Where to place the floating element relative to its reference element.
-     * @default 'bottom'
-     */
-    placement?: Placement;
-}
-export declare const useFloatPosition: (arrowRef: HTMLElement | null, options?: UseFloatPositionOptions) => {
-    reference: (node: import("@floating-ui/react-dom").ReferenceType | null) => void;
-    floating: (node: HTMLElement | null) => void;
-    refs: {
-        reference: import("react").MutableRefObject<import("@floating-ui/react-dom").ReferenceType | null>;
-        floating: import("react").MutableRefObject<HTMLElement | null>;
-        setReference: (node: import("@floating-ui/react-dom").ReferenceType | null) => void;
-        setFloating: (node: HTMLElement | null) => void;
-    };
-    styles: {
-        floating: {
-            position: Strategy;
-            top: string | number;
-            left: string | number;
-        };
-        arrow: {
-            [x: string]: string | number;
-            position: Strategy;
-            top: string | number;
-            left: string | number;
-            transform: string;
-        } | undefined;
-    };
-};
-export {};
+/// <reference types="react" />
+import { Strategy } from '@floating-ui/react-dom';
+export type Placement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
+interface UseFloatPositionOptions {
+    /**
+     * Whether to update the position of the floating element on every animation frame if required.
+     * This is optimized for performance but can still be costly.
+     * @default true
+     */
+    animationFrame?: boolean;
+    /**
+     * `offset` is used to displace the floating element from its core placement.
+     * The value passed is logical, meaning its effect on the
+     * physical result is dependent on the writing direction (e.g. RTL).
+     * @default 8
+     */
+    offset?: number;
+    /**
+     * Where to place the floating element relative to its reference element.
+     * @default 'bottom'
+     */
+    placement?: Placement;
+}
+export declare const useFloatPosition: (arrowRef: HTMLElement | null, options?: UseFloatPositionOptions) => {
+    reference: (node: import("@floating-ui/react-dom").ReferenceType | null) => void;
+    floating: (node: HTMLElement | null) => void;
+    refs: {
+        reference: import("react").MutableRefObject<import("@floating-ui/react-dom").ReferenceType | null>;
+        floating: import("react").MutableRefObject<HTMLElement | null>;
+        setReference: (node: import("@floating-ui/react-dom").ReferenceType | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+    };
+    styles: {
+        floating: {
+            position: Strategy;
+            top: string | number;
+            left: string | number;
+        };
+        arrow: {
+            [x: string]: string | number;
+            position: Strategy;
+            top: string | number;
+            left: string | number;
+            transform: string;
+        } | undefined;
+    };
+};
+export {};

package/dist/hooks/useFocusTrap.d.ts

@@ -1,16 +1,16 @@
-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 ref={componentRef}><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>;
+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 ref={componentRef}><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

@@ -2,19 +2,19 @@ import { useRef, useEffect } from 'react';
 import '../utils/color.js';
 import { getFocusableElements } from '../utils/getFocusableElements.js';
 
-/**
- * Fanger fokus i en loop inni et element. Typisk bruk:
- * ```
- * const MyComponent = (props) => {
- *
- *  const componentRef = useFocusTrap<HTMLDivElement>(props.isOpen);
- *
- *  return props.isOpen ? <div ref={componentRef}><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.
+/**
+ * Fanger fokus i en loop inni et element. Typisk bruk:
+ * ```
+ * const MyComponent = (props) => {
+ *
+ *  const componentRef = useFocusTrap<HTMLDivElement>(props.isOpen);
+ *
+ *  return props.isOpen ? <div ref={componentRef}><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);

package/dist/hooks/useIsMounted.d.ts

@@ -1,2 +1,2 @@
-declare const useIsMounted: () => () => boolean;
-export default useIsMounted;
+declare const useIsMounted: () => () => boolean;
+export default useIsMounted;

package/dist/hooks/useMountTransition.d.ts

@@ -1,33 +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;
+/**
+ * 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,37 +1,37 @@
 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.
+/**
+ * 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),

package/dist/hooks/useOnClickOutside.d.ts

@@ -1,14 +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;
+/**
+ * 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;