@norges-domstoler/dds-components 3.0.0 → 4.0.1

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

@@ -1,8 +1,15 @@
 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;
-export declare type SelectProps<TOption, IsMulti extends 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.   */
@@ -19,7 +26,7 @@ export declare type SelectProps<TOption, IsMulti extends boolean> = {
     className?: string;
     /** Inline styling. */
     style?: React.CSSProperties;
-} & ReactSelectProps<TOption, IsMulti, GroupBase<TOption>>;
+} & WrappedReactSelectProps<TOption, IsMulti, GroupBase<TOption>>;
 declare type ForwardRefType<TOption, IsMulti extends boolean> = React.ForwardedRef<SelectInstance<TOption, IsMulti, GroupBase<TOption>>>;
-export declare const Select: <TOption, 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 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/components/Select/Select.stories.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import { SelectProps } from '.';
+import { SelectOption, SelectProps } from '.';
 declare const _default: {
     title: string;
-    component: <TOption, 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;
+    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: {
@@ -62,11 +62,7 @@ declare const _default: {
     };
 };
 export default _default;
-declare type Option = {
-    label: string;
-    value: string;
-};
-declare type SingleSelectProps = SelectProps<Option, false>;
+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;

package/dist/components/SkipToContent/SkipToContent.d.ts

@@ -10,9 +10,8 @@ export declare type SkipToContentProps = BaseComponentProps<HTMLAnchorElement, {
     top?: Property.Top<string | number>;
 }>;
 export declare const SkipToContent: import("react").ForwardRefExoticComponent<{
-    id?: string | undefined;
-    htmlProps?: Omit<import("react").HTMLAttributes<HTMLAnchorElement>, "id"> | undefined;
-} & {
+    htmlProps?: import("react").HTMLAttributes<HTMLAnchorElement> | undefined;
+} & Pick<import("react").HTMLAttributes<HTMLAnchorElement>, "className" | "id"> & {
     /** Teksten som vises i lenka. */
     text?: string | undefined;
     /**Spesifiserer hvor det skal hoppes til via `id`-attributtet til innholdet. */

package/dist/components/SkipToContent/SkipToContent.stories.d.ts

@@ -3,9 +3,8 @@ import { SkipToContentProps } from '.';
 declare const _default: {
     title: string;
     component: import("react").ForwardRefExoticComponent<{
-        id?: string | undefined;
-        htmlProps?: Omit<import("react").HTMLAttributes<HTMLAnchorElement>, "id"> | undefined;
-    } & {
+        htmlProps?: import("react").HTMLAttributes<HTMLAnchorElement> | undefined;
+    } & Pick<import("react").HTMLAttributes<HTMLAnchorElement>, "id" | "className"> & {
         text?: string | undefined;
         href: string;
         top?: import("csstype").Property.Top<string | number> | undefined;

package/dist/components/Tabs/Tab.d.ts

@@ -18,9 +18,8 @@ export declare type TabProps = BaseComponentPropsWithChildren<HTMLButtonElement,
     index?: number;
 } & Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onKeyDown'>, Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onKeyDown'>>;
 export declare const Tab: import("react").ForwardRefExoticComponent<{
-    id?: string | undefined;
-    htmlProps?: Omit<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onKeyDown" | "onClick">, "id"> | undefined;
-} & {
+    htmlProps?: Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onKeyDown" | "onClick"> | undefined;
+} & Pick<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onKeyDown" | "onClick">, "className" | "id"> & {
     /**Spesifiserer om fanen er aktiv. */
     active?: boolean | undefined;
     /** Ikon. */

package/dist/components/Tabs/TabPanel.d.ts

@@ -5,9 +5,8 @@ export declare type TabPanelProps = BaseComponentPropsWithChildren<HTMLDivElemen
     active?: boolean;
 }>;
 export declare const TabPanel: import("react").ForwardRefExoticComponent<{
-    id?: string | undefined;
-    htmlProps?: Omit<import("react").HTMLAttributes<HTMLDivElement>, "id"> | undefined;
-} & {
+    htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined;
+} & Pick<import("react").HTMLAttributes<HTMLDivElement>, "className" | "id"> & {
     /** Spesifiserer om panelet skal vises basert på aktiv fane. */
     active?: boolean | undefined;
 } & {

package/dist/components/Tabs/Tabs.d.ts

@@ -2,7 +2,7 @@ import { HTMLAttributes } from 'react';
 import { BaseComponentPropsWithChildren, Direction } from '../../types';
 import { Property } from 'csstype';
 export declare type TabsProps = BaseComponentPropsWithChildren<HTMLDivElement, {
-    /** Indeksen til den aktive fanen. */
+    /** 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. */
     activeTab?: number;
     /** Ekstra logikk ved endring av aktiv fane. */
     onChange?: (index: number) => void;
@@ -12,10 +12,9 @@ export declare type TabsProps = BaseComponentPropsWithChildren<HTMLDivElement, {
     tabWidth?: Property.Width;
 }, Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>>;
 export declare const Tabs: import("react").ForwardRefExoticComponent<{
-    id?: string | undefined;
-    htmlProps?: Omit<Omit<HTMLAttributes<HTMLDivElement>, "onChange">, "id"> | undefined;
-} & {
-    /** Indeksen til den aktive fanen. */
+    htmlProps?: Omit<HTMLAttributes<HTMLDivElement>, "onChange"> | undefined;
+} & 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. */
     activeTab?: number | undefined;
     /** Ekstra logikk ved endring av aktiv fane. */
     onChange?: ((index: number) => void) | undefined;

package/dist/components/Tag/Tag.d.ts

@@ -8,9 +8,8 @@ export declare type TagProps = BaseComponentProps<HTMLSpanElement, {
     purpose?: TagPurpose;
 }>;
 export declare const Tag: import("react").ForwardRefExoticComponent<{
-    id?: string | undefined;
-    htmlProps?: Omit<import("react").HTMLAttributes<HTMLSpanElement>, "id"> | undefined;
-} & {
+    htmlProps?: import("react").HTMLAttributes<HTMLSpanElement> | undefined;
+} & Pick<import("react").HTMLAttributes<HTMLSpanElement>, "id" | "className"> & {
     /**Tekst som vises i `<Tag />.` */
     text?: string | undefined;
     /**Formål med status eller kategorisering. Påvirker styling. */

package/dist/components/Tag/Tag.stories.d.ts

@@ -3,9 +3,8 @@ import { TagProps } from '.';
 declare const _default: {
     title: string;
     component: import("react").ForwardRefExoticComponent<{
-        id?: string | undefined;
-        htmlProps?: Omit<import("react").HTMLAttributes<HTMLSpanElement>, "id"> | undefined;
-    } & {
+        htmlProps?: import("react").HTMLAttributes<HTMLSpanElement> | undefined;
+    } & Pick<import("react").HTMLAttributes<HTMLSpanElement>, "id" | "className"> & {
         text?: string | undefined;
         purpose?: import("./Tag").TagPurpose | undefined;
     } & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/ToggleButton/ToggleButton.d.ts

@@ -9,9 +9,8 @@ export declare type ToggleButtonProps = BaseComponentProps<HTMLInputElement, {
     Icon?: OverridableComponent<SvgIconTypeMap<Record<string, unknown>, 'svg'>>;
 }, InputHTMLAttributes<HTMLInputElement>>;
 export declare const ToggleButton: import("react").ForwardRefExoticComponent<{
-    id?: string | undefined;
-    htmlProps?: Omit<InputHTMLAttributes<HTMLInputElement>, "id"> | undefined;
-} & {
+    htmlProps?: InputHTMLAttributes<HTMLInputElement> | undefined;
+} & Pick<InputHTMLAttributes<HTMLInputElement>, "className" | "id"> & {
     /**Ledetekst for inputelementet. */
     label?: string | undefined;
     /** Ikon. */

package/dist/components/ToggleButton/ToggleButton.stories.d.ts

@@ -3,9 +3,8 @@ import { ToggleButtonProps } from '.';
 declare const _default: {
     title: string;
     component: import("react").ForwardRefExoticComponent<{
-        id?: string | undefined;
-        htmlProps?: Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "id"> | undefined;
-    } & {
+        htmlProps?: import("react").InputHTMLAttributes<HTMLInputElement> | undefined;
+    } & Pick<import("react").InputHTMLAttributes<HTMLInputElement>, "id" | "className"> & {
         label?: string | undefined;
         Icon?: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<Record<string, unknown>, "svg">> | undefined;
     } & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/Tooltip/Tooltip.d.ts

@@ -2,7 +2,7 @@ import React, { HTMLAttributes } from 'react';
 import { Placement } from '../../hooks';
 import { BaseComponentProps } from '../../types';
 declare type AnchorElement = React.ReactElement & React.RefAttributes<HTMLElement>;
-declare type PickedHTMLAttributes = Pick<HTMLAttributes<HTMLDivElement>, 'style' | 'onMouseLeave' | 'onMouseOver' | 'className'>;
+declare type PickedHTMLAttributes = Pick<HTMLAttributes<HTMLDivElement>, 'style' | 'onMouseLeave' | 'onMouseOver'>;
 export declare type TooltipProps = BaseComponentProps<HTMLDivElement, {
     /**Innhold i tooltip. */
     text: string;
@@ -16,9 +16,8 @@ export declare type TooltipProps = BaseComponentProps<HTMLDivElement, {
     tooltipId?: string;
 } & PickedHTMLAttributes, Omit<HTMLAttributes<HTMLDivElement>, 'children' | keyof PickedHTMLAttributes>>;
 export declare const Tooltip: React.ForwardRefExoticComponent<{
-    id?: string | undefined;
-    htmlProps?: Omit<Omit<React.HTMLAttributes<HTMLDivElement>, "style" | "onMouseLeave" | "onMouseOver" | "className" | "children">, "id"> | undefined;
-} & {
+    htmlProps?: Omit<React.HTMLAttributes<HTMLDivElement>, "style" | "onMouseLeave" | "onMouseOver" | "children"> | undefined;
+} & Pick<Omit<React.HTMLAttributes<HTMLDivElement>, "style" | "onMouseLeave" | "onMouseOver" | "children">, "className" | "id"> & {
     /**Innhold i tooltip. */
     text: string;
     /**Plassering i forhold til anchor-elementet. */

package/dist/components/Tooltip/Tooltip.stories.d.ts

@@ -3,16 +3,14 @@ import { TooltipProps } from '.';
 declare const _default: {
     title: string;
     component: import("react").ForwardRefExoticComponent<{
-        id?: string | undefined;
-        htmlProps?: Omit<Omit<import("react").HTMLAttributes<HTMLDivElement>, "children" | "className" | "style" | "onMouseLeave" | "onMouseOver">, "id"> | undefined;
-    } & {
+        htmlProps?: Omit<import("react").HTMLAttributes<HTMLDivElement>, "children" | "style" | "onMouseLeave" | "onMouseOver"> | undefined;
+    } & Pick<Omit<import("react").HTMLAttributes<HTMLDivElement>, "children" | "style" | "onMouseLeave" | "onMouseOver">, "id" | "className"> & {
         text: string;
         placement?: import("../../hooks").Placement | undefined;
         children: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> & import("react").RefAttributes<HTMLElement>;
         delay?: number | undefined;
         tooltipId?: string | undefined;
     } & {
-        className?: string | undefined;
         style?: import("react").CSSProperties | undefined;
         onMouseLeave?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
         onMouseOver?: import("react").MouseEventHandler<HTMLDivElement> | undefined;

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

@@ -1,6 +1,7 @@
 import { ElementType, PropsWithChildren, HTMLAttributes, AnchorHTMLAttributes } from 'react';
 import { CSSObject } from 'styled-components';
 import { TextColor, OtherTypographyType, AnchorTypographyType, LabelTypographyType } from './Typography.types';
+import { BaseComponentProps } from '../../types';
 export declare function isTextColor(color: string): color is TextColor;
 export declare const getTextColor: (color: TextColor | string) => string;
 export declare type TypographyInteractionProps = {
@@ -22,24 +23,25 @@ declare type BaseTypographyProps = PropsWithChildren<{
     underline?: boolean;
     /**Støtte for å enkelt kunne endre på hover- og active-styling. Bruk `@dds-design-tokens` til farger osv. */
     interactionProps?: TypographyInteractionProps;
-}>;
-declare type AnchorTypographyProps = BaseTypographyProps & {
-    /**Styling basert på det typografiske utvalget definert i Figma. Returnerer default HTML tag for hver type. **OBS!** Ved bruk av `'a'` er det flere tilgjengelige props, se under.  */
-    typographyType?: AnchorTypographyType;
+}> & Pick<HTMLAttributes<HTMLElement>, 'style'>;
+declare type AnchorTypographyProps = BaseComponentProps<HTMLAnchorElement, BaseTypographyProps & {
     href?: string | undefined;
     /** Spesifiserer om lenka er ekstern ved `typographyType='a'` eller `as='a'`.*/
     externalLink?: boolean;
     /**nativ `target`-prop ved `typographyType='a'`.  */
     target?: string;
-} & AnchorHTMLAttributes<HTMLAnchorElement>;
-declare type LabelTypographyProps = BaseTypographyProps & {
+}, AnchorHTMLAttributes<HTMLAnchorElement>>;
+declare type LabelTypographyProps = BaseComponentProps<HTMLLabelElement, BaseTypographyProps, HTMLAttributes<HTMLLabelElement>>;
+declare type OtherTypographyProps = BaseComponentProps<HTMLElement, BaseTypographyProps, HTMLAttributes<HTMLElement>>;
+export declare type TypographyProps = ({
+    /**Styling basert på det typografiske utvalget definert i Figma. Returnerer default HTML tag for hver type. **OBS!** Ved bruk av `'a'` er det flere tilgjengelige props, se under.  */
+    typographyType?: AnchorTypographyType;
+} & AnchorTypographyProps) | ({
     /**Styling basert på det typografiske utvalget definert i Figma. Returnerer default HTML tag for hver type. **OBS!** Ved bruk av `'a'` er det flere tilgjengelige props, se under.  */
     typographyType?: LabelTypographyType;
-} & HTMLAttributes<HTMLLabelElement>;
-declare type OtherTypographyProps = BaseTypographyProps & {
+} & LabelTypographyProps) | ({
     /**Styling basert på det typografiske utvalget definert i Figma. Returnerer default HTML tag for hver type. **OBS!** Ved bruk av `'a'` er det flere tilgjengelige props, se under.  */
     typographyType?: OtherTypographyType;
-} & HTMLAttributes<HTMLLabelElement>;
-export declare type TypographyProps = AnchorTypographyProps | LabelTypographyProps | OtherTypographyProps;
+} & OtherTypographyProps);
 export declare const Typography: import("react").ForwardRefExoticComponent<TypographyProps & import("react").RefAttributes<HTMLElement>>;
 export {};