@norges-domstoler/dds-components 13.5.0 → 13.6.1

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

@@ -1,9 +0,0 @@
-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 +0,0 @@
-import { Property } from 'csstype';
-export declare const normalizeButton: {
-    margin: number;
-    textTransform: Property.TextTransform;
-};

package/dist/helpers/styling/normalize.js

@@ -1,6 +0,0 @@
-var normalizeButton = {
-  margin: 0,
-  textTransform: 'none'
-};
-
-export { normalizeButton };

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

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

package/dist/helpers/styling/removeButtonStyling.js

@@ -1,11 +0,0 @@
-var removeButtonStyling = {
-  background: 'none',
-  color: 'inherit',
-  border: 'none',
-  padding: 0,
-  font: 'inherit',
-  cursor: 'pointer',
-  outline: 'inherit'
-};
-
-export { removeButtonStyling };

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

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

package/dist/helpers/styling/removeListStyling.js

@@ -1,7 +0,0 @@
-var removeListStyling = {
-  listStyle: 'none',
-  padding: 0,
-  margin: 0
-};
-
-export { removeListStyling };

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

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

package/dist/helpers/styling/selection.js

@@ -1,9 +0,0 @@
-import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
-
-var colors = ddsBaseTokens.colors;
-var selection = {
-  color: colors.DdsColorNeutralsGray9,
-  backgroundColor: colors.DdsColorTertiaryLightest
-};
-
-export { selection };

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

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

package/dist/helpers/styling/visibilityTransition.js

@@ -1,7 +0,0 @@
-import { css } from 'styled-components';
-
-var visibilityTransition = function visibilityTransition(open) {
-  return css(["@media (prefers-reduced-motion:no-preference){transition:visibility 0.4s,opacity 0.2s;}visibility:", ";opacity:", ";"], open ? 'visible' : 'hidden', open ? 1 : 0);
-};
-
-export { visibilityTransition };

package/dist/hooks/index.d.ts

@@ -1,9 +0,0 @@
-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 +0,0 @@
-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,33 +0,0 @@
-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];
-  }
-  return useCallback(function (element) {
-    refs.forEach(function (ref) {
-      if (typeof ref === 'function') ref(element);else if (ref && _typeof(ref) === 'object') ref.current = element;
-    });
-  }, refs);
-}
-
-export { useCombinedRef };

package/dist/hooks/useFloatPosition.d.ts

@@ -1,48 +0,0 @@
-/// <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/useFloatPosition.js

@@ -1,91 +0,0 @@
-import { toConsumableArray as _toConsumableArray, defineProperty as _defineProperty } from '../_virtual/_rollupPluginBabelHelpers.js';
-import { offset, flip, shift, arrow, useFloating, autoUpdate } from '@floating-ui/react-dom';
-import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
-
-var defaultOffset = ddsBaseTokens.spacing.SizesDdsSpacingLocalX05NumberPx;
-var useFloatPosition = function useFloatPosition(arrowRef) {
-  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var _options$animationFra = options.animationFrame,
-    animationFrame = _options$animationFra === void 0 ? true : _options$animationFra,
-    _options$offset = options.offset,
-    offset$1 = _options$offset === void 0 ? defaultOffset : _options$offset,
-    _options$placement = options.placement,
-    placement = _options$placement === void 0 ? 'bottom' : _options$placement;
-  var middleware = [offset(offset$1), flip(), shift()].concat(_toConsumableArray(arrowRef ? [arrow({
-    element: arrowRef
-  })] : []));
-  var _useFloating = useFloating({
-      placement: placement,
-      middleware: middleware,
-      whileElementsMounted: function whileElementsMounted(reference, floating, update) {
-        return autoUpdate(reference, floating, update, {
-          animationFrame: animationFrame
-        });
-      }
-    }),
-    x = _useFloating.x,
-    y = _useFloating.y,
-    reference = _useFloating.reference,
-    floating = _useFloating.floating,
-    strategy = _useFloating.strategy,
-    middlewareData = _useFloating.middlewareData,
-    actualPlacement = _useFloating.placement,
-    refs = _useFloating.refs;
-  return {
-    reference: reference,
-    floating: floating,
-    refs: refs,
-    styles: {
-      floating: {
-        position: strategy,
-        top: y !== null && y !== void 0 ? y : '',
-        left: x !== null && x !== void 0 ? x : ''
-      },
-      arrow: middlewareData.arrow ? getArrowStyling(strategy, actualPlacement, middlewareData.arrow) : undefined
-    }
-  };
-};
-function getArrowStyling(strategy, placement, arrow) {
-  var _ref;
-  var _a, _b;
-  var arrowPlacement = placementToArrowPlacement(placement);
-  var arrowPlacementOffset = {
-    top: '-15px',
-    bottom: '-15px',
-    right: '-21px',
-    left: '-21px'
-  }[arrowPlacement];
-  var rotateArrow = {
-    top: 'rotate(180deg)',
-    right: 'rotate(-90deg)',
-    bottom: '',
-    left: 'rotate(90deg)'
-  }[arrowPlacement];
-  return _ref = {
-    position: strategy,
-    top: (_a = arrow === null || arrow === void 0 ? void 0 : arrow.y) !== null && _a !== void 0 ? _a : '',
-    left: (_b = arrow === null || arrow === void 0 ? void 0 : arrow.x) !== null && _b !== void 0 ? _b : ''
-  }, _defineProperty(_ref, arrowPlacement, arrowPlacementOffset), _defineProperty(_ref, "transform", rotateArrow), _ref;
-}
-function placementToArrowPlacement(placement) {
-  switch (placement) {
-    case 'top':
-    case 'top-start':
-    case 'top-end':
-      return 'bottom';
-    case 'bottom':
-    case 'bottom-start':
-    case 'bottom-end':
-      return 'top';
-    case 'left':
-    case 'left-start':
-    case 'left-end':
-      return 'right';
-    case 'right':
-    case 'right-start':
-    case 'right-end':
-      return 'left';
-  }
-}
-
-export { useFloatPosition };

package/dist/hooks/useFocusTrap.d.ts

@@ -1,16 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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.
- */
-function useFocusTrap(active) {
-  var elementRef = useRef(null);
-  useEffect(function () {
-    function handleFocus(e) {
-      if (e.key !== 'Tab' || !active || !elementRef.current) return;
-      var focusableElements = getFocusableElements(elementRef);
-      var firstElement = focusableElements[0];
-      var lastElement = focusableElements[focusableElements.length - 1];
-      if (!e.shiftKey && document.activeElement === lastElement) {
-        firstElement.focus();
-        e.preventDefault();
-      }
-      if (e.shiftKey && document.activeElement === firstElement) {
-        lastElement.focus();
-        e.preventDefault();
-      }
-    }
-    var element = elementRef.current;
-    if (element && active) {
-      element.focus();
-      element.addEventListener('keydown', handleFocus);
-    }
-    return function () {
-      element === null || element === void 0 ? void 0 : element.removeEventListener('keydown', handleFocus);
-    };
-  }, [active]);
-  return elementRef;
-}
-
-export { useFocusTrap };

package/dist/hooks/useIsMounted.d.ts

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

package/dist/hooks/useIsMounted.js

@@ -1,16 +0,0 @@
-import { useRef, useEffect, useCallback } from 'react';
-
-var useIsMounted = function useIsMounted() {
-  var isMounted = useRef(false);
-  useEffect(function () {
-    isMounted.current = true;
-    return function () {
-      isMounted.current = false;
-    };
-  }, []);
-  return useCallback(function () {
-    return isMounted.current;
-  }, []);
-};
-
-export { useIsMounted as default };

package/dist/hooks/useMountTransition.d.ts

@@ -1,33 +0,0 @@
-/**
- * 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,55 +0,0 @@
-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),
-    hasTransitionedIn = _useState2[0],
-    setHasTransitionedIn = _useState2[1];
-  useEffect(function () {
-    var timeoutId;
-    if (isMounted && !hasTransitionedIn) setHasTransitionedIn(true);else if (!isMounted && hasTransitionedIn) {
-      timeoutId = setTimeout(function () {
-        return setHasTransitionedIn(false);
-      }, unmountDelay);
-    }
-    return function () {
-      clearTimeout(timeoutId);
-    };
-  }, [unmountDelay, isMounted, hasTransitionedIn]);
-  return hasTransitionedIn;
-};
-
-export { useMountTransition };

package/dist/hooks/useOnClickOutside.d.ts

@@ -1,14 +0,0 @@
-/**
- * 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,38 +0,0 @@
-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) {
-      var elements = Array.isArray(element) ? element : [element];
-      var targetElement = event.target;
-      while (targetElement) {
-        if (elements.indexOf(targetElement) != -1) {
-          return;
-        }
-        targetElement = targetElement.parentNode;
-      }
-      handler(event);
-    };
-    document.addEventListener('mousedown', listener);
-    document.addEventListener('touchstart', listener);
-    return function () {
-      document.removeEventListener('mousedown', listener);
-      document.removeEventListener('touchstart', listener);
-    };
-  }, [element, handler]);
-}
-
-export { useOnClickOutside };

package/dist/hooks/useOnKeyDown.d.ts

@@ -1,14 +0,0 @@
-/**
- * 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,31 +0,0 @@
-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) {
-      var keys = Array.isArray(key) ? key : [key];
-      if (keys.indexOf(event.key) !== -1) {
-        handler(event);
-      }
-    };
-    document.addEventListener('keydown', listener, true);
-    return function () {
-      document.removeEventListener('keydown', listener, true);
-    };
-  }, [handler]);
-};
-
-export { useOnKeyDown };

package/dist/hooks/useReturnFocusOnBlur.d.ts

@@ -1,31 +0,0 @@
-import { RefObject } from 'react';
-/**
- * Returnerer fokus til et element når første eller siste barn i en container mister fokus ved tastaturnavigasjon. Typisk bruk:
- * ```
- * const MyComponent = (props) => {
- *
- *  const [isOpen, setOpen] = useState(true);
- *  const close = () => setOpen(false);
- *  const triggerRef = useRef<HTMLButtonElement>(null);
- *  const containerRef = useReturnFocusOnBlur<HTMLDivElement>(
- *    isOpen,
- *    triggerRef.current,
- *    () => close()
- *  );
- *
- *  return (
- *    <div>
- *      <button ref={triggerRef} >Åpne popover</button>
- *      <div ref={containerRef}>
- *        <button>gjør noe</button>
- *      </div>
- *    </div>
- *  )
- * }
- * ```
- * @param active om container skal få fokus, f.eks. når en modal åpnes.
- * @param triggerElement elementet som skal få fokus når fokus forlater container.
- * @param onBlur ekstra logikk når fokus forlater container.
- * @returns ref til container som får fokus.
- */
-export declare function useReturnFocusOnBlur<T extends HTMLElement>(active: boolean, onBlur: () => void, triggerElement?: HTMLElement | null): RefObject<T>;

package/dist/hooks/useReturnFocusOnBlur.js

@@ -1,60 +0,0 @@
-import { useRef, useEffect } from 'react';
-import '../utils/color.js';
-import { getFocusableElements } from '../utils/getFocusableElements.js';
-
-/**
- * Returnerer fokus til et element når første eller siste barn i en container mister fokus ved tastaturnavigasjon. Typisk bruk:
- * ```
- * const MyComponent = (props) => {
- *
- *  const [isOpen, setOpen] = useState(true);
- *  const close = () => setOpen(false);
- *  const triggerRef = useRef<HTMLButtonElement>(null);
- *  const containerRef = useReturnFocusOnBlur<HTMLDivElement>(
- *    isOpen,
- *    triggerRef.current,
- *    () => close()
- *  );
- *
- *  return (
- *    <div>
- *      <button ref={triggerRef} >Åpne popover</button>
- *      <div ref={containerRef}>
- *        <button>gjør noe</button>
- *      </div>
- *    </div>
- *  )
- * }
- * ```
- * @param active om container skal få fokus, f.eks. når en modal åpnes.
- * @param triggerElement elementet som skal få fokus når fokus forlater container.
- * @param onBlur ekstra logikk når fokus forlater container.
- * @returns ref til container som får fokus.
- */
-function useReturnFocusOnBlur(active, onBlur, triggerElement) {
-  var elementRef = useRef(null);
-  useEffect(function () {
-    function handleFocus(e) {
-      if (e.key !== 'Tab' || !active || !elementRef.current || !triggerElement) return;
-      var focusableElements = getFocusableElements(elementRef);
-      var lastElement = focusableElements[focusableElements.length - 1];
-      var firstElement = focusableElements[0];
-      if (!e.shiftKey && document.activeElement === lastElement || e.shiftKey && document.activeElement === firstElement || e.shiftKey && document.activeElement === element) {
-        triggerElement.focus();
-        e.preventDefault();
-        onBlur();
-      }
-    }
-    var element = elementRef.current;
-    if (element && active) {
-      element.focus();
-      element.addEventListener('keydown', handleFocus);
-    }
-    return function () {
-      element === null || element === void 0 ? void 0 : element.removeEventListener('keydown', handleFocus);
-    };
-  }, [active]);
-  return elementRef;
-}
-
-export { useReturnFocusOnBlur };