@norges-domstoler/dds-components 3.1.0 → 4.0.0

package/dist/components/Breadcrumbs/Breadcrumb.d.ts

@@ -1,4 +1,3 @@
-import { AnchorHTMLAttributes } from 'react';
-import { TypographyProps } from '../Typography';
-export declare type BreadcrumbProps = TypographyProps & AnchorHTMLAttributes<HTMLAnchorElement>;
-export declare const Breadcrumb: import("react").ForwardRefExoticComponent<BreadcrumbProps & import("react").RefAttributes<HTMLAnchorElement>>;
+import { AnchorHTMLAttributes, HTMLAttributes } from 'react';
+export declare type BreadcrumbProps = HTMLAttributes<HTMLSpanElement> | AnchorHTMLAttributes<HTMLAnchorElement>;
+export declare const Breadcrumb: import("react").ForwardRefExoticComponent<BreadcrumbProps & import("react").RefAttributes<HTMLElement>>;

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

@@ -2,7 +2,7 @@
 import { SelectProps } from './Select';
 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: {

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/Tag/Tag.d.ts

@@ -9,7 +9,7 @@ export declare type TagProps = BaseComponentProps<HTMLSpanElement, {
 }>;
 export declare const Tag: import("react").ForwardRefExoticComponent<{
     htmlProps?: import("react").HTMLAttributes<HTMLSpanElement> | undefined;
-} & Pick<import("react").HTMLAttributes<HTMLSpanElement>, "className" | "id"> & {
+} & 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/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 {};