@norges-domstoler/dds-components 4.0.2 → 4.2.0

package/dist/cjs/components/Typography/Typography.tokens.d.ts

@@ -0,0 +1,230 @@
+import { CSSObject } from 'styled-components';
+export declare const textColors: {
+    interactive: string;
+    primary: string;
+    danger: string;
+    success: string;
+    warning: string;
+    onLight: string;
+    onDark: string;
+    gray1: string;
+    gray2: string;
+    gray3: string;
+    gray4: string;
+    gray5: string;
+    gray6: string;
+    gray7: string;
+    gray8: string;
+    gray9: string;
+};
+export declare const textColorsArray: string[];
+export declare const typographyTokens: {
+    selection: {
+        base: CSSObject;
+    };
+    typographyType: {
+        a: {
+            base: CSSObject;
+            hover: {
+                base: CSSObject;
+            };
+            margins: {
+                base: CSSObject;
+            };
+            focus: {
+                base: CSSObject;
+            };
+            bold: {
+                base: CSSObject;
+            };
+            icon: {
+                marginLeft: string;
+            };
+        };
+        headingSans01: {
+            base: CSSObject;
+            margins: {
+                base: CSSObject;
+            };
+        };
+        headingSans02: {
+            base: CSSObject;
+            margins: {
+                base: CSSObject;
+            };
+        };
+        headingSans03: {
+            base: CSSObject;
+            margins: {
+                base: CSSObject;
+            };
+        };
+        headingSans04: {
+            base: CSSObject;
+            margins: {
+                base: CSSObject;
+            };
+        };
+        headingSans05: {
+            base: CSSObject;
+            margins: {
+                base: CSSObject;
+            };
+        };
+        headingSans06: {
+            base: CSSObject;
+            margins: {
+                base: CSSObject;
+            };
+        };
+        headingSans07: {
+            base: CSSObject;
+            margins: {
+                base: CSSObject;
+            };
+        };
+        headingSans08: {
+            base: CSSObject;
+            margins: {
+                base: CSSObject;
+            };
+        };
+        bodySans01: {
+            base: CSSObject;
+            margins: {
+                base: CSSObject;
+            };
+        };
+        bodySans02: {
+            base: CSSObject;
+            margins: {
+                base: CSSObject;
+            };
+        };
+        bodySans03: {
+            base: CSSObject;
+            margins: {
+                base: CSSObject;
+            };
+        };
+        bodySans04: {
+            base: CSSObject;
+            margins: {
+                base: CSSObject;
+            };
+        };
+        bodySerif01: {
+            base: CSSObject;
+            margins: {
+                base: CSSObject;
+            };
+        };
+        bodySerif02: {
+            base: CSSObject;
+            margins: {
+                base: CSSObject;
+            };
+        };
+        bodySerif03: {
+            base: CSSObject;
+            margins: {
+                base: CSSObject;
+            };
+        };
+        bodySerif04: {
+            base: CSSObject;
+            margins: {
+                base: CSSObject;
+            };
+        };
+        leadSans01: {
+            base: CSSObject;
+            margins: {
+                base: CSSObject;
+            };
+        };
+        leadSans02: {
+            base: CSSObject;
+            margins: {
+                base: CSSObject;
+            };
+        };
+        leadSans03: {
+            base: CSSObject;
+            margins: {
+                base: CSSObject;
+            };
+        };
+        leadSans04: {
+            base: CSSObject;
+            margins: {
+                base: CSSObject;
+            };
+        };
+        leadSans05: {
+            base: CSSObject;
+            margins: {
+                base: CSSObject;
+            };
+        };
+        supportingStyleLabel01: {
+            base: CSSObject;
+            margins: {
+                base: CSSObject;
+            };
+        };
+        supportingStyleHelperText01: {
+            base: CSSObject;
+            margins: {
+                base: CSSObject;
+            };
+        };
+        supportingStyleInputText01: {
+            base: CSSObject;
+            margins: {
+                base: CSSObject;
+            };
+        };
+        supportingStyleInputText02: {
+            base: CSSObject;
+            margins: {
+                base: CSSObject;
+            };
+        };
+        supportingStyleInputText03: {
+            base: CSSObject;
+            margins: {
+                base: CSSObject;
+            };
+        };
+        supportingStylePlaceholderText01: {
+            base: CSSObject;
+            margins: {
+                base: CSSObject;
+            };
+        };
+        supportingStyleTiny01: {
+            base: CSSObject;
+            margins: {
+                base: CSSObject;
+            };
+        };
+        supportingStyleTiny02: {
+            base: CSSObject;
+            margins: {
+                base: CSSObject;
+            };
+        };
+    };
+    style: {
+        bold: {
+            base: CSSObject;
+        };
+        italic: {
+            base: CSSObject;
+        };
+        underline: {
+            base: CSSObject;
+        };
+    };
+};

package/dist/cjs/components/Typography/Typography.types.d.ts

@@ -0,0 +1,13 @@
+declare type TypographyBodySansType = 'bodySans01' | 'bodySans02' | 'bodySans03' | 'bodySans04';
+declare type TypographyBodySerifType = 'bodySerif01' | 'bodySerif02' | 'bodySerif03' | 'bodySerif04';
+export declare type TypographyBodyType = TypographyBodySansType | TypographyBodySerifType;
+declare type TypographyHeadingType = 'headingSans01' | 'headingSans02' | 'headingSans03' | 'headingSans04' | 'headingSans05' | 'headingSans06' | 'headingSans07' | 'headingSans08';
+declare type TypographyLeadType = 'leadSans01' | 'leadSans02' | 'leadSans03' | 'leadSans04' | 'leadSans05';
+declare type TypographySupportingType = 'supportingStyleInputText01' | 'supportingStyleInputText02' | 'supportingStyleInputText03' | 'supportingStyleHelperText01' | 'supportingStylePlaceholderText01' | 'supportingStyleTiny01' | 'supportingStyleTiny02';
+export declare type AnchorTypographyType = 'a';
+export declare type LabelTypographyType = 'supportingStyleLabel01';
+export declare type OtherTypographyType = TypographyHeadingType | TypographyBodyType | TypographyLeadType | TypographySupportingType;
+export declare type TypographyType = AnchorTypographyType | LabelTypographyType | OtherTypographyType;
+export declare type TextColor = 'interactive' | 'primary' | 'danger' | 'warning' | 'success' | 'onLight' | 'onDark' | 'gray1' | 'gray2' | 'gray3' | 'gray4' | 'gray5' | 'gray6' | 'gray7' | 'gray8' | 'gray9';
+export declare type InlineElement = 'a' | 'abbr' | 'audio' | 'b' | 'bdi' | 'bdo' | 'big' | 'br' | 'button' | 'canvas' | 'cite' | 'code' | 'data' | 'datalist' | 'del' | 'dfn' | 'em' | 'embed' | 'i' | 'iframe' | 'img' | 'input' | 'ins' | 'kbd' | 'label' | 'map' | 'mark' | 'meter' | 'noscript' | 'object' | 'output' | 'picture' | 'progress' | 'q' | 'ruby' | 's' | 'samp' | 'script' | 'select' | 'slot' | 'small' | 'span' | 'strong' | 'sub' | 'sup' | 'svg' | 'template' | 'textarea' | 'time' | 'u' | 'var' | 'video' | 'wbr';
+export {};

package/dist/cjs/components/Typography/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Typography';
+export * from './Typography.types';

package/dist/cjs/helpers/Backdrop/Backdrop.d.ts

@@ -0,0 +1,5 @@
+declare type BackdropProps = {
+    isOpen: boolean;
+};
+export declare const Backdrop: import("styled-components").StyledComponent<"div", any, BackdropProps, never>;
+export {};

package/dist/cjs/helpers/Backdrop/Backdrop.utils.d.ts

@@ -0,0 +1,2 @@
+export declare function handleElementWithBackdropMount(container: HTMLElement): void;
+export declare function handleElementWithBackdropUnmount(container: HTMLElement): void;

package/dist/cjs/helpers/Backdrop/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Backdrop';
+export * from './Backdrop.utils';

package/dist/cjs/helpers/Chevron/AnimatedChevronUpDown.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { Property } from 'csstype';
+declare type SvgChevronProps = {
+    isUp?: boolean;
+    height?: Property.Height<string>;
+    width?: Property.Width<string>;
+};
+export declare const AnimatedChevronUpDown: ({ isUp, height, width }: SvgChevronProps) => JSX.Element;
+export {};

package/dist/cjs/helpers/Chevron/AnimatedChevronUpDown.styles.d.ts

@@ -0,0 +1,7 @@
+export declare type StyledSvgChevronProps = {
+    isUp?: boolean;
+};
+export declare const SvgChevron: import("styled-components").StyledComponent<"svg", any, StyledSvgChevronProps, never>;
+export declare const SvgChevronlGroup: import("styled-components").StyledComponent<"g", any, StyledSvgChevronProps, never>;
+export declare const SvgChevronlLeft: import("styled-components").StyledComponent<"path", any, StyledSvgChevronProps, never>;
+export declare const SvgChevronlRight: import("styled-components").StyledComponent<"path", any, StyledSvgChevronProps, never>;

package/dist/cjs/helpers/Chevron/index.d.ts

@@ -0,0 +1 @@
+export * from './AnimatedChevronUpDown';

package/dist/cjs/helpers/Input/Input.styles.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { StyledLabelProps } from '.';
+import { Property } from 'csstype';
+export declare const Input: import("styled-components").StyledComponent<"input", any, {}, never>;
+export declare const StatefulInput: import("styled-components").StyledComponent<"input", any, Pick<import("./Input.types").InputProps, "disabled" | "readOnly"> & {
+    hasErrorMessage: boolean;
+    hasLabel: import("./Input.types").LabelPresence;
+}, never>;
+export declare const Label: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../components/Typography").TypographyProps & import("react").RefAttributes<HTMLElement>>, any, StyledLabelProps, never>;
+export declare const InputContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare type OuterInputContainerProps = {
+    width?: Property.Width<string>;
+};
+export declare const OuterInputContainer: import("styled-components").StyledComponent<"div", any, OuterInputContainerProps, never>;
+export {};

package/dist/cjs/helpers/Input/Input.tokens.d.ts

@@ -0,0 +1,78 @@
+import { CSSObject } from 'styled-components';
+export declare const inputTokens: {
+    baseInput: {
+        base: CSSObject;
+        focus: {
+            base: CSSObject;
+        };
+        hover: {
+            base: CSSObject;
+        };
+    };
+    general: {
+        input: {
+            borderRadius: string;
+            borderWidth: string;
+            borderColor: string;
+            textColor: string;
+            font: {
+                lineHeight: any;
+                fontSize: string;
+                letterSpacing: any;
+                fontFamily: any;
+                fontWeight: any;
+                fontStyle: any;
+            };
+            hover: {
+                backgroundColor: string;
+                borderColor: string;
+                borderWidth: string;
+            };
+            focus: {
+                borderColor: string;
+                borderWidth: string;
+            };
+        };
+        label: {
+            hover: {
+                textColor: string;
+            };
+            focus: {
+                textColor: string;
+            };
+        };
+    };
+    hasLabel: {
+        base: CSSObject;
+    };
+    noLabel: {
+        base: CSSObject;
+    };
+    readOnly: {
+        base: CSSObject;
+    };
+    disabled: {
+        base: CSSObject;
+    };
+    error: {
+        base: CSSObject;
+        hover: {
+            base: CSSObject;
+        };
+        focus: {
+            base: CSSObject;
+        };
+    };
+    label: {
+        base: CSSObject;
+        hover: {
+            base: CSSObject;
+        };
+        focus: {
+            base: CSSObject;
+        };
+        disabled: {
+            base: CSSObject;
+        };
+    };
+};

package/dist/cjs/helpers/Input/Input.types.d.ts

@@ -0,0 +1,20 @@
+import { InputHTMLAttributes } from 'react';
+import { Property } from 'csstype';
+export declare type InputProps = {
+    /**Ledetekst for input. */
+    label?: string;
+    /**Bredde for inputfeltet. */
+    width?: Property.Width<string>;
+    /**Hjelpetekst. */
+    tip?: string;
+    /**Feilmelding. Setter også error state. */
+    errorMessage?: string;
+} & InputHTMLAttributes<HTMLInputElement>;
+export declare type LabelPresence = 'hasLabel' | 'noLabel';
+export declare type StyledInputProps = Pick<InputProps, 'readOnly' | 'disabled'> & {
+    hasErrorMessage: boolean;
+    hasLabel: LabelPresence;
+};
+export declare type StyledLabelProps = {
+    disabled?: boolean;
+};

package/dist/cjs/helpers/Input/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Input.styles';
+export * from './Input.types';
+export * from './Input.tokens';

package/dist/cjs/helpers/Paper/Paper.d.ts

@@ -0,0 +1 @@
+export declare const Paper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/cjs/helpers/Paper/Paper.tokens.d.ts

@@ -0,0 +1,4 @@
+import { CSSObject } from 'styled-components';
+export declare const paperTokens: {
+    base: CSSObject;
+};

package/dist/cjs/helpers/Paper/index.d.ts

@@ -0,0 +1 @@
+export * from './Paper';

package/dist/cjs/helpers/RequiredMarker/RequiredMarker.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const RequiredMarker: () => JSX.Element;

package/dist/cjs/helpers/RequiredMarker/index.d.ts

@@ -0,0 +1 @@
+export * from './RequiredMarker';

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

@@ -0,0 +1,5 @@
+export * from './Backdrop';
+export * from './Chevron';
+export * from './Input';
+export * from './Paper';
+export * from './RequiredMarker';

package/dist/cjs/helpers/styling/danger.d.ts

@@ -0,0 +1,4 @@
+export declare const dangerInputfield: {
+    borderColor: string;
+    boxShadow: string;
+};

package/dist/cjs/helpers/styling/focus.d.ts

@@ -0,0 +1,9 @@
+export declare const focusInputfield: {
+    outline: string;
+    borderColor: string;
+    boxShadow: string;
+};
+export declare const focusDangerInputfield: {
+    borderColor: string;
+    boxShadow: string;
+};

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

@@ -0,0 +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;
+};

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

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

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

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

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

@@ -0,0 +1,8 @@
+export * from './removeButtonStyling';
+export * from './visibilityTransition';
+export * from './focusVisible';
+export * from './hover';
+export * from './focus';
+export * from './danger';
+export * from './hideInput';
+export * from './scrollbarStyling';

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

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

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

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

package/dist/cjs/helpers/styling/scrollbarStyling.d.ts

@@ -0,0 +1,3 @@
+export declare const scrollbarWidthNumberPx = 10;
+export declare const scrollbarWidth: string;
+export declare const scrollbarStyling: import("styled-components").FlattenSimpleInterpolation;

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

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

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

@@ -0,0 +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 './useId';
+export * from './useScreenSize';

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

@@ -0,0 +1,2 @@
+import type { RefCallback } from 'react';
+export declare function useCombinedRef<T>(...refs: React.Ref<T>[]): RefCallback<T>;

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

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import { Strategy } from '@floating-ui/react-dom';
+export declare type Placement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
+export declare const useFloatPosition: (arrowRef: HTMLElement | null, placement?: Placement, offset?: number) => {
+    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>;
+    };
+    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;
+    };
+};

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function useFocusTrap<T extends HTMLElement>(active: boolean): import("react").RefObject<T>;

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

@@ -0,0 +1 @@
+export declare function useId(prefix: string, suffix?: string): string;

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

@@ -0,0 +1 @@
+export declare const useMountTransition: (isMounted: boolean, unmountDelay: number) => boolean;

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

@@ -0,0 +1 @@
+export declare function useOnClickOutside(element: HTMLElement | null | (HTMLElement | null)[], handler: (event: MouseEvent | TouchEvent) => void): void;

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

@@ -0,0 +1 @@
+export declare const useOnKeyDown: (key: string | string[], handler: (event: KeyboardEvent) => void) => void;

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

@@ -0,0 +1,3 @@
+import { Dispatch, SetStateAction } from 'react';
+import { Direction } from '../types';
+export declare function useRoveFocus(size: number | undefined, reset?: boolean, direction?: Direction): [number, Dispatch<SetStateAction<number>>];

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

@@ -0,0 +1,8 @@
+export declare enum ScreenSize {
+    XSmall = 0,
+    Small = 1,
+    Medium = 2,
+    Large = 3,
+    XLarge = 4
+}
+export declare const useScreenSize: () => ScreenSize;

package/dist/cjs/index.d.ts

@@ -0,0 +1,34 @@
+import 'focus-visible';
+import './styles/fontStyles.css';
+import './styles/selection.css';
+export * from './components/RadioButton';
+export * from './components/Checkbox';
+export * from './components/Button';
+export * from './components/TextInput';
+export * from './components/Select';
+export * from './components/GlobalMessage';
+export * from './components/LocalMessage';
+export * from './components/Search';
+export * from './components/Typography';
+export * from './components/Table';
+export * from './components/Breadcrumbs';
+export * from './components/IconWrapper';
+export * from './components/Pagination';
+export * from './components/Divider';
+export * from './components/List';
+export * from './components/DescriptionList';
+export * from './components/Spinner';
+export * from './components/Card';
+export * from './components/InternalHeader';
+export * from './components/Datepicker';
+export * from './components/SkipToContent';
+export * from './components/Tooltip';
+export * from './components/Modal';
+export * from './components/Drawer';
+export * from './components/OverflowMenu';
+export * from './components/Popover';
+export * from './components/InputMessage';
+export * from './components/ToggleButton';
+export * from './components/Tabs';
+export * from './components/Tag';
+export * from './components/Chip';