@norges-domstoler/dds-components 4.0.1 → 4.1.1

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

@@ -0,0 +1,15 @@
+import { CSSObject } from 'styled-components';
+export declare const popoverTokens: {
+    wrapper: {
+        base: CSSObject;
+    };
+    button: {
+        base: CSSObject;
+    };
+    title: {
+        base: CSSObject;
+    };
+    content: {
+        spaceTopNoTitle: string;
+    };
+};

package/dist/cjs/components/Popover/PopoverGroup.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+export declare type PopoverGroupProps = {
+    /**Callback når det trykkes på lukkeknappen. */
+    onCloseButtonClick?: () => void;
+    /** Callback når det trykkes på anchor-elementet (trigger-elementet). */
+    onTriggerClick?: () => void;
+    /**Forteller `<Popover />` om den skal være åpen.  */
+    isOpen?: boolean;
+    /** `id` til `<Popover />.` */
+    popoverId?: string;
+    /** Barna til wrapperen: anchor-element som det første og `<Popover />` so det adnre.  */
+    children: ReactNode;
+};
+export declare const PopoverGroup: ({ isOpen, onCloseButtonClick, onTriggerClick, children, popoverId }: PopoverGroupProps) => JSX.Element;

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

@@ -0,0 +1,2 @@
+export * from './Popover';
+export * from './PopoverGroup';

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export declare const RadioButton: import("react").ForwardRefExoticComponent<{
+    htmlProps?: Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "name" | "readOnly" | "checked" | "value" | "required" | "onChange" | "aria-describedby"> | undefined;
+} & Pick<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "name" | "readOnly" | "checked" | "value" | "required" | "onChange" | "aria-describedby">, "id" | "className"> & {
+    label?: string | undefined;
+    disabled?: boolean | undefined;
+    error?: boolean | undefined;
+} & {
+    name?: string | undefined;
+    readOnly?: boolean | undefined;
+    checked?: boolean | undefined;
+    value?: string | number | readonly string[] | undefined;
+    required?: boolean | undefined;
+    onChange?: import("react").ChangeEventHandler<HTMLInputElement> | undefined;
+    'aria-describedby'?: string | undefined;
+} & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,50 @@
+/// <reference types="react" />
+import { RadioButtonProps } from '.';
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<{
+        htmlProps?: Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "aria-describedby" | "onChange" | "name" | "value" | "checked" | "readOnly" | "required"> | undefined;
+    } & Pick<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "aria-describedby" | "onChange" | "name" | "value" | "checked" | "readOnly" | "required">, "id" | "className"> & {
+        label?: string | undefined;
+        disabled?: boolean | undefined;
+        error?: boolean | undefined;
+    } & {
+        'aria-describedby'?: string | undefined;
+        onChange?: import("react").ChangeEventHandler<HTMLInputElement> | undefined;
+        name?: string | undefined;
+        value?: string | number | readonly string[] | undefined;
+        checked?: boolean | undefined;
+        readOnly?: boolean | undefined;
+        required?: boolean | undefined;
+    } & import("react").RefAttributes<HTMLInputElement>>;
+    argTypes: {
+        label: {
+            control: {
+                type: string;
+            };
+        };
+        error: {
+            control: {
+                type: string;
+            };
+        };
+        disabled: {
+            control: {
+                type: string;
+            };
+        };
+        readOnly: {
+            control: {
+                type: string;
+            };
+        };
+        className: {
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Overview: (args: RadioButtonProps) => JSX.Element;
+export declare const Default: (args: RadioButtonProps) => JSX.Element;

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { RadioButtonProps } from './RadioButton.types';
+export declare const CustomRadioButton: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const Input: import("styled-components").StyledComponent<"input", any, {
+    type: import("react").HTMLInputTypeAttribute;
+}, "type">;
+declare type ContainerProps = Pick<RadioButtonProps, 'error' | 'disabled' | 'readOnly'>;
+export declare const Container: import("styled-components").StyledComponent<"label", any, ContainerProps, never>;
+export {};

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

@@ -0,0 +1,43 @@
+import { CSSObject } from 'styled-components';
+export declare const radioButtonTokens: {
+    radioButton: {
+        base: CSSObject;
+        spaceLeft: string;
+        hover: {
+            base: CSSObject;
+        };
+        disabled: {
+            base: CSSObject;
+        };
+        readOnly: {
+            base: CSSObject;
+        };
+        checked: {
+            base: CSSObject;
+            hover: {
+                base: CSSObject;
+            };
+            disabled: {
+                base: CSSObject;
+            };
+            readOnly: {
+                base: CSSObject;
+            };
+        };
+        danger: {
+            base: CSSObject;
+            hover: {
+                base: CSSObject;
+            };
+        };
+    };
+    checkmark: {
+        base: CSSObject;
+    };
+    container: {
+        base: CSSObject;
+        focus: {
+            base: CSSObject;
+        };
+    };
+};

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

@@ -0,0 +1,12 @@
+import { InputHTMLAttributes } from 'react';
+import { BaseComponentProps } from '../../types';
+declare type PickedInputHTMLAttributes = Pick<InputHTMLAttributes<HTMLInputElement>, 'name' | 'readOnly' | 'checked' | 'value' | 'required' | 'onChange' | 'aria-describedby'>;
+export declare type RadioButtonProps = BaseComponentProps<HTMLInputElement, {
+    /**Ledetekst for alternativet. */
+    label?: string;
+    /**Spesifiserer om input er disabled. */
+    disabled?: boolean;
+    /**Indikerer valideringsfeil. Påvirker styling. */
+    error?: boolean;
+} & PickedInputHTMLAttributes, Omit<InputHTMLAttributes<HTMLInputElement>, keyof PickedInputHTMLAttributes>>;
+export {};

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

@@ -0,0 +1,29 @@
+import { ChangeEvent, HTMLAttributes } from 'react';
+import { BaseComponentPropsWithChildren } from '../../types';
+declare type Direction = 'column' | 'row';
+export declare type RadioButtonGroupProps<T extends string | number> = BaseComponentPropsWithChildren<HTMLDivElement, {
+    /** Gir alle barna `name` prop.*/
+    name?: string;
+    /**Ledetekst for hele gruppen. */
+    label?: string;
+    /**Funksjonen for onChange-event for barna. */
+    onChange?: (event: ChangeEvent<HTMLInputElement>, value: T | undefined) => void;
+    /**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;
+    /**Meldingen som vises ved valideringsfeil. Gir alle barna error prop. */
+    errorMessage?: string;
+    /**Hjelpetekst for gruppen. */
+    tip?: string;
+    /**Gir alle barna `disabled` prop. */
+    disabled?: boolean;
+    /**Gir alle barna `readOnly` prop */
+    readOnly?: boolean;
+    /**Retningen radioknappene skal gjengis i. */
+    direction?: Direction;
+    /**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;
+}, 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 {};

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

@@ -0,0 +1,47 @@
+/// <reference types="react" />
+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;
+    argTypes: {
+        label: {
+            control: {
+                type: string;
+            };
+        };
+        errorMessage: {
+            control: {
+                type: string;
+            };
+        };
+        tip: {
+            control: {
+                type: string;
+            };
+        };
+        disabled: {
+            control: {
+                type: string;
+            };
+        };
+        readOnly: {
+            control: {
+                type: string;
+            };
+        };
+        required: {
+            control: {
+                type: string;
+            };
+        };
+    };
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+};
+export default _default;
+export declare const Overview: (args: RadioButtonGroupProps<string>) => JSX.Element;
+export declare const Default: (args: RadioButtonGroupProps<number>) => JSX.Element;
+export declare const WithDefaultValue: (args: RadioButtonGroupProps<number>) => JSX.Element;

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

@@ -0,0 +1,19 @@
+import { CSSObject } from 'styled-components';
+export declare const radioButtonGroupTokens: {
+    label: {
+        spaceLeft: string;
+    };
+    container: {
+        base: CSSObject;
+    };
+    groupContainer: {
+        direction: {
+            row: {
+                base: CSSObject;
+            };
+            column: {
+                base: CSSObject;
+            };
+        };
+    };
+};

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

@@ -0,0 +1,13 @@
+import React, { ChangeEvent } from 'react';
+export interface RadioButtonGroup {
+    disabled?: boolean;
+    readOnly?: boolean;
+    name?: string;
+    value?: string | number | null;
+    error?: boolean;
+    errorMessageId?: string;
+    required?: boolean;
+    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+}
+export declare const RadioButtonGroupContext: React.Context<Nullable<RadioButtonGroup>>;
+export declare const useRadioButtonGroup: () => Nullable<RadioButtonGroup>;

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

@@ -0,0 +1,3 @@
+export * from './RadioButton';
+export * from './RadioButton.types';
+export * from './RadioButtonGroup';

package/dist/cjs/components/Search/Search.d.ts

@@ -0,0 +1,21 @@
+import { ButtonHTMLAttributes, InputHTMLAttributes, MouseEvent } from 'react';
+import { InputProps as BaseInputProps } from '../../helpers';
+export declare type SearchSize = 'small' | 'medium' | 'large';
+declare type ButtonProps = {
+    onClick: (event: MouseEvent<HTMLButtonElement>) => void;
+    label?: string;
+    loading?: boolean;
+} & ButtonHTMLAttributes<HTMLButtonElement>;
+export declare type SearchProps = Pick<BaseInputProps, 'tip'> & {
+    /**Størrelsen på komponenten. */
+    componentSize?: SearchSize;
+    /**Props for søkeknappen. */
+    buttonProps?: ButtonProps;
+} & InputHTMLAttributes<HTMLInputElement>;
+export declare const Search: import("react").ForwardRefExoticComponent<Pick<BaseInputProps, "tip"> & {
+    /**Størrelsen på komponenten. */
+    componentSize?: SearchSize | undefined;
+    /**Props for søkeknappen. */
+    buttonProps?: ButtonProps | undefined;
+} & InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>;
+export {};

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

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import { SearchProps } from './Search';
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<Pick<import("../../helpers").InputProps, "tip"> & {
+        componentSize?: import("./Search").SearchSize | undefined;
+        buttonProps?: ({
+            onClick: (event: import("react").MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+            label?: string | undefined;
+            loading?: boolean | undefined;
+        } & import("react").ButtonHTMLAttributes<HTMLButtonElement>) | undefined;
+    } & import("react").InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>;
+    argTypes: {
+        tip: {
+            control: {
+                type: string;
+            };
+        };
+    };
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+};
+export default _default;
+export declare const Overview: (args: SearchProps) => JSX.Element;
+export declare const Default: (args: SearchProps) => JSX.Element;
+export declare const WithButton: (args: SearchProps) => JSX.Element;

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

@@ -0,0 +1,25 @@
+import { CSSObject } from 'styled-components';
+export declare const searchTokens: {
+    input: {
+        base: CSSObject;
+        small: {
+            base: CSSObject;
+        };
+        medium: {
+            base: CSSObject;
+        };
+        large: {
+            base: CSSObject;
+        };
+    };
+    icon: {
+        spaceTop: string;
+        spaceLeft: string;
+    };
+    iconWrapper: {
+        base: CSSObject;
+    };
+    container: {
+        base: CSSObject;
+    };
+};

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

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

package/dist/cjs/components/Select/MultiSelect.stories.d.ts

@@ -0,0 +1,74 @@
+/// <reference types="react" />
+import { SelectProps } from './Select';
+declare const _default: {
+    title: string;
+    component: <TOption extends Record<string, unknown>, IsMulti extends boolean = false>({ id, label, errorMessage, tip, required, readOnly, options, isMulti, value, defaultValue, width, closeMenuOnSelect, className, style, isDisabled, isClearable, placeholder, ...rest }: SelectProps<TOption, IsMulti>, ref: ((instance: import("react-select").SelectInstance<TOption, IsMulti, import("react-select").GroupBase<TOption>> | null) => void) | import("react").MutableRefObject<import("react-select").SelectInstance<TOption, IsMulti, import("react-select").GroupBase<TOption>> | null> | null) => JSX.Element;
+    argTypes: {
+        label: {
+            control: {
+                type: string;
+            };
+        };
+        tip: {
+            control: {
+                type: string;
+            };
+        };
+        errorMessage: {
+            control: {
+                type: string;
+            };
+        };
+        width: {
+            control: {
+                type: string;
+            };
+        };
+        placeholder: {
+            control: {
+                type: string;
+            };
+        };
+        isDisabled: {
+            control: {
+                type: string;
+            };
+        };
+        isClearable: {
+            control: {
+                type: string;
+            };
+        };
+        required: {
+            control: {
+                type: string;
+            };
+        };
+        readOnly: {
+            control: {
+                type: string;
+            };
+        };
+        isLoading: {
+            control: {
+                type: string;
+            };
+        };
+    };
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+};
+export default _default;
+declare type Option = {
+    label: string;
+    value: string;
+};
+declare type MultiSelectProps = SelectProps<Option, true>;
+export declare const Overview: (args: MultiSelectProps) => JSX.Element;
+export declare const Default: (args: MultiSelectProps) => JSX.Element;
+export declare const WithLabel: (args: MultiSelectProps) => JSX.Element;
+export declare const WithDefaultValue: (args: MultiSelectProps) => JSX.Element;
+export declare const WithFitContent: (args: MultiSelectProps) => JSX.Element;

package/dist/cjs/components/Select/Select.d.ts

@@ -0,0 +1,32 @@
+import { Property } from 'csstype';
+import React from 'react';
+import { GroupBase, Props as ReactSelectProps, SelectInstance } from 'react-select';
+import { WithRequiredIf } from '../../types/utils';
+export declare type SelectOption<TValue = unknown> = {
+    label: string | number;
+    value: TValue;
+};
+export declare const createSelectOptions: <TValue extends string | number>(...args: TValue[]) => SelectOption<TValue>[];
+export declare function searchFilter(text: string, search: string): boolean;
+declare type WrappedReactSelectProps<TOption extends Record<string, unknown>, IsMulti extends boolean, Group extends GroupBase<TOption>> = WithRequiredIf<TOption extends SelectOption ? false : true, ReactSelectProps<TOption, IsMulti, Group>, 'getOptionLabel' | 'getOptionValue'>;
+export declare type SelectProps<TOption extends Record<string, unknown>, IsMulti extends boolean> = {
+    /**Ledetekst for nedtrekkslisten. */
+    label?: string;
+    /**Gir required styling. **OBS!** støtter ikke DOM `required` attributt.   */
+    required?: boolean;
+    /**Nedtrekkslisten blir disabled og får readOnly styling. */
+    readOnly?: boolean;
+    /**Meldingen som vises ved valideringsfeil. */
+    errorMessage?: string;
+    /**Hjelpetekst. */
+    tip?: string;
+    /**Custom bredde ved behov. */
+    width?: Property.Width<string>;
+    /** CSS klassenavn. */
+    className?: string;
+    /** Inline styling. */
+    style?: React.CSSProperties;
+} & WrappedReactSelectProps<TOption, IsMulti, GroupBase<TOption>>;
+declare type ForwardRefType<TOption, IsMulti extends boolean> = React.ForwardedRef<SelectInstance<TOption, IsMulti, GroupBase<TOption>>>;
+export declare const Select: <TOption extends Record<string, unknown>, IsMulti extends boolean = false>({ id, label, errorMessage, tip, required, readOnly, options, isMulti, value, defaultValue, width, closeMenuOnSelect, className, style, isDisabled, isClearable, placeholder, ...rest }: SelectProps<TOption, IsMulti>, ref: ForwardRefType<TOption, IsMulti>) => JSX.Element;
+export {};

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

@@ -0,0 +1,69 @@
+/// <reference types="react" />
+import { SelectOption, SelectProps } from '.';
+declare const _default: {
+    title: string;
+    component: <TOption extends Record<string, unknown>, IsMulti extends boolean = false>({ id, label, errorMessage, tip, required, readOnly, options, isMulti, value, defaultValue, width, closeMenuOnSelect, className, style, isDisabled, isClearable, placeholder, ...rest }: SelectProps<TOption, IsMulti>, ref: ((instance: import("react-select").SelectInstance<TOption, IsMulti, import("react-select").GroupBase<TOption>> | null) => void) | import("react").MutableRefObject<import("react-select").SelectInstance<TOption, IsMulti, import("react-select").GroupBase<TOption>> | null> | null) => JSX.Element;
+    argTypes: {
+        label: {
+            control: {
+                type: string;
+            };
+        };
+        tip: {
+            control: {
+                type: string;
+            };
+        };
+        errorMessage: {
+            control: {
+                type: string;
+            };
+        };
+        width: {
+            control: {
+                type: string;
+            };
+        };
+        placeholder: {
+            control: {
+                type: string;
+            };
+        };
+        isDisabled: {
+            control: {
+                type: string;
+            };
+        };
+        isClearable: {
+            control: {
+                type: string;
+            };
+        };
+        required: {
+            control: {
+                type: string;
+            };
+        };
+        readOnly: {
+            control: {
+                type: string;
+            };
+        };
+        isLoading: {
+            control: {
+                type: string;
+            };
+        };
+    };
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+};
+export default _default;
+declare type SingleSelectProps = SelectProps<SelectOption, false>;
+export declare const Overview: (args: SingleSelectProps) => JSX.Element;
+export declare const Default: (args: SingleSelectProps) => JSX.Element;
+export declare const WithLabel: (args: SingleSelectProps) => JSX.Element;
+export declare const ManyItems: (args: SingleSelectProps) => JSX.Element;

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

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { GroupBase, StylesConfig } from 'react-select';
+import { IconWrapper } from '../IconWrapper';
+export declare const prefix = "dds-select";
+export declare const Label: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Typography").TypographyProps & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
+declare type StyledContainerProps = {
+    errorMessage?: string;
+    isDisabled?: boolean;
+    readOnly?: boolean;
+    hasLabel: boolean;
+    isMulti?: boolean;
+};
+export declare const Container: import("styled-components").StyledComponent<"div", any, StyledContainerProps, never>;
+export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {
+    width?: string | number | undefined;
+}, never>;
+export declare const SelectedIconWrapper: import("styled-components").StyledComponent<typeof IconWrapper, any, {}, never>;
+export declare const getCustomStyles: <TOption>() => Partial<StylesConfig<TOption, boolean, GroupBase<TOption>>>;
+export {};