@norges-domstoler/dds-components 21.13.0 → 21.15.0

package/dist/index.d.mts

@@ -526,7 +526,7 @@ declare function createSizes<T extends Array<Size>>(...sizes: T): T;
 declare const BORDER_RADII: readonly ["button", "input", "surface", "chip", "rounded", "0"];
 declare const ELEVATIONS: readonly [1, 2, 3, 4];
 declare const BORDER_COLORS: readonly ["border-default", "border-subtle", "border-inverse", "border-action-default", "border-action-hover", "border-success", "border-warning", "border-danger", "border-info", "border-on-action"];
-declare const BACKGROUNDS: readonly ["surface-subtle", "surface-medium", "surface-inverse-default", "surface-danger-default", "surface-danger-strong", "surface-success-default", "surface-success-strong", "surface-warning-default", "surface-warning-strong", "surface-info-default", "surface-info-strong", "surface-paper-default", "surface-notification", "brand-primary-default", "brand-primary-subtle", "brand-primary-medium", "brand-primary-strong", "brand-secondary-default", "brand-secondary-subtle", "brand-secondary-medium", "brand-secondary-strong", "brand-tertiary-default", "brand-tertiary-subtle", "brand-tertiary-medium", "brand-tertiary-strong"];
+declare const BACKGROUNDS: readonly ["surface-subtle", "surface-medium", "surface-inverse-default", "surface-danger-default", "surface-danger-strong", "surface-success-default", "surface-success-strong", "surface-warning-default", "surface-warning-strong", "surface-info-default", "surface-info-strong", "surface-paper-default", "surface-notification", "surface-field-disabled", "brand-primary-default", "brand-primary-subtle", "brand-primary-medium", "brand-primary-strong", "brand-secondary-default", "brand-secondary-subtle", "brand-secondary-medium", "brand-secondary-strong", "brand-tertiary-default", "brand-tertiary-subtle", "brand-tertiary-medium", "brand-tertiary-strong"];
 type BorderRadius = (typeof BORDER_RADII)[number];
 type Elevation = (typeof ELEVATIONS)[number];
 type BorderColor = (typeof BORDER_COLORS)[number];
@@ -3048,8 +3048,7 @@ type MimeType = `image/${ImageMimeType | AnyMimeType}` | `video/${VideoMimeType
 type FileUploaderAccept = MimeType | FileExtensionAccept;
 type FileList = Array<File>;
 
-interface FileUploaderHookProps {
-    id: string | undefined;
+type FileUploaderHookProps = {
     /**Dersom komponenten skal styres internt. Utgangspunktet for filene som har blitt lastet opp. */
     initialFiles: FileList | undefined;
     /**Dersom komponenten styres utenfra. Filene som har blitt lastet opp. */
@@ -3058,13 +3057,14 @@ interface FileUploaderHookProps {
     onChange: (newFiles: FileList) => void;
     /**Hvilke filendelser eller mime-typer som filopplasteren skal akseptere. */
     accept: Array<FileUploaderAccept> | undefined;
-    /**Om filopplasteren er avslått eller ikke */
-    disabled: boolean | undefined;
+    /**Om filopplasteren er avslått eller ikke. */
+    disabled?: boolean;
+    /**Om filopplasteren er read-only. */
+    readOnly?: boolean;
     /**Maks antall filer som tillates. */
     maxFiles: number | undefined;
-    /**Feilmelding. Setter også error state. */
-    errorMessage: string | undefined;
-}
+    onKeyDown?: ComponentProps<'input'>['onKeyDown'];
+} & Pick<InputProps, 'errorMessage' | 'id'>;
 
 type FileUploaderProps = {
     /**Id til filopplasteren. */
@@ -3079,8 +3079,6 @@ type FileUploaderProps = {
      * @default Velg fil
      */
     btnLabel?: string;
-    /**Hjelpetekst. */
-    tip?: string;
     /**Om det er påkrevd med minst én fil. */
     required?: boolean;
     /**Callback for når fil-listen endres. */
@@ -3091,7 +3089,7 @@ type FileUploaderProps = {
     withDragAndDrop?: boolean;
     /**Om listen med opplastede filer skal skjules. Brukes kun hvis listen blir vist på egen måte. */
     hideFileList?: boolean;
-} & Pick<ResponsiveProps, 'width'> & Partial<FileUploaderHookProps> & Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'id'>;
+} & Pick<ResponsiveProps, 'width'> & Partial<FileUploaderHookProps> & Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'id'> & Pick<InputProps, 'tip'>;
 declare const FileUploader: {
     (props: FileUploaderProps): react_jsx_runtime.JSX.Element;
     displayName: string;
@@ -3448,25 +3446,27 @@ interface PaginationOption {
     value: number;
 }
 type PaginationProps = BaseComponentProps<HTMLElement, {
-    /**Totalt antall elementer å paginere. */
+    /**Totalt antall elementer som skal pagineres. */
     itemsAmount: number;
-    /**Antall elementer per side ved innlastning av komponenten.
+    /**Antall elementer per side ved innlastning.
      * @default 10
      */
     defaultItemsPerPage?: number;
-    /**Den aktive siden ved innlastning av komponenten.
+    /**Den aktive siden ved innlastning.
      * @default 1
      */
     defaultActivePage?: number;
+    /**Den aktive siden. Brukes til kontrollert tilstand - når denne er satt styrer du siden utenfra. */
+    activePage?: number;
     /**Spesifiserer om selve pagineringen skal vises.
      * @default true
      */
     withPagination?: boolean;
-    /**Spesifiserer om teksten `'Vis x-y av z'` skal vises. */
+    /**Om teksten `'Vis x-y av z'` skal vises. */
     withCounter?: boolean;
-    /**Spesifiserer om `<Select />` til å velge antall resultater per side skal vises. */
+    /**Om `<Select>` for å velge antall per side skal vises. */
     withSelect?: boolean;
-    /**Custom options for `<Select />`. **OBS!** hvis det settes custom `selectOptions` bør "alle"-alternativet inkluderes der det er relevant, da brukere ofte liker å ha muligheten.
+    /**Custom options for `<Select>`. **OBS!** husk å inkludere "Alle"-alternativet hvis relevant - brukere forventer ofte den muligheten.
      * @default [
         { label: '10', value: 10 },
         { label: '25', value: 25 },
@@ -3475,15 +3475,17 @@ type PaginationProps = BaseComponentProps<HTMLElement, {
       ]
      */
     selectOptions?: Array<PaginationOption>;
-    /**Brukes til å hente side og eventuelt annen logikk ved endring av side. */
+    /**Kalles ved sideendring - henter ny aktiv side og kjører ekstra logikk. */
     onChange?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, page: number) => void;
-    /**Brukes til å hente `selectedOption` og eventuelt kjøre annen logikk når `withSelect=true` ved endring av alternativ. */
+    /**Kalles når `selectedOption` endres, hvis `withSelect="true"`.
+     * Brukes til å hente valgt alternativ og evt. kjøre ekstra logikk.
+     */
     onSelectOptionChange?: (option: PaginationOption | null) => void;
-    /**Spesifiserer ved hvilket brekkpunkt og nedover versjonen for små skjermer skal vises; den viser færre sideknapper og stacker subkomponentene. */
+    /**Brekkpunkt for mobilvisning; den viser færre sideknapper og stacker delkomponentene. */
     smallScreenBreakpoint?: Breakpoint;
 }, Omit<HTMLAttributes<HTMLElement>, 'onChange'>>;
 declare const Pagination: {
-    ({ itemsAmount, defaultItemsPerPage, defaultActivePage, withPagination, withCounter, withSelect, selectOptions, smallScreenBreakpoint, onChange, onSelectOptionChange, id, className, htmlProps, ref, ...rest }: PaginationProps): react_jsx_runtime.JSX.Element | null;
+    ({ itemsAmount, defaultItemsPerPage, defaultActivePage, activePage: activePageProp, withPagination, withCounter, withSelect, selectOptions, smallScreenBreakpoint, onChange, onSelectOptionChange, id, className, htmlProps, ref, ...rest }: PaginationProps): react_jsx_runtime.JSX.Element | null;
     displayName: string;
 };
 

package/dist/index.d.ts

@@ -526,7 +526,7 @@ declare function createSizes<T extends Array<Size>>(...sizes: T): T;
 declare const BORDER_RADII: readonly ["button", "input", "surface", "chip", "rounded", "0"];
 declare const ELEVATIONS: readonly [1, 2, 3, 4];
 declare const BORDER_COLORS: readonly ["border-default", "border-subtle", "border-inverse", "border-action-default", "border-action-hover", "border-success", "border-warning", "border-danger", "border-info", "border-on-action"];
-declare const BACKGROUNDS: readonly ["surface-subtle", "surface-medium", "surface-inverse-default", "surface-danger-default", "surface-danger-strong", "surface-success-default", "surface-success-strong", "surface-warning-default", "surface-warning-strong", "surface-info-default", "surface-info-strong", "surface-paper-default", "surface-notification", "brand-primary-default", "brand-primary-subtle", "brand-primary-medium", "brand-primary-strong", "brand-secondary-default", "brand-secondary-subtle", "brand-secondary-medium", "brand-secondary-strong", "brand-tertiary-default", "brand-tertiary-subtle", "brand-tertiary-medium", "brand-tertiary-strong"];
+declare const BACKGROUNDS: readonly ["surface-subtle", "surface-medium", "surface-inverse-default", "surface-danger-default", "surface-danger-strong", "surface-success-default", "surface-success-strong", "surface-warning-default", "surface-warning-strong", "surface-info-default", "surface-info-strong", "surface-paper-default", "surface-notification", "surface-field-disabled", "brand-primary-default", "brand-primary-subtle", "brand-primary-medium", "brand-primary-strong", "brand-secondary-default", "brand-secondary-subtle", "brand-secondary-medium", "brand-secondary-strong", "brand-tertiary-default", "brand-tertiary-subtle", "brand-tertiary-medium", "brand-tertiary-strong"];
 type BorderRadius = (typeof BORDER_RADII)[number];
 type Elevation = (typeof ELEVATIONS)[number];
 type BorderColor = (typeof BORDER_COLORS)[number];
@@ -3048,8 +3048,7 @@ type MimeType = `image/${ImageMimeType | AnyMimeType}` | `video/${VideoMimeType
 type FileUploaderAccept = MimeType | FileExtensionAccept;
 type FileList = Array<File>;
 
-interface FileUploaderHookProps {
-    id: string | undefined;
+type FileUploaderHookProps = {
     /**Dersom komponenten skal styres internt. Utgangspunktet for filene som har blitt lastet opp. */
     initialFiles: FileList | undefined;
     /**Dersom komponenten styres utenfra. Filene som har blitt lastet opp. */
@@ -3058,13 +3057,14 @@ interface FileUploaderHookProps {
     onChange: (newFiles: FileList) => void;
     /**Hvilke filendelser eller mime-typer som filopplasteren skal akseptere. */
     accept: Array<FileUploaderAccept> | undefined;
-    /**Om filopplasteren er avslått eller ikke */
-    disabled: boolean | undefined;
+    /**Om filopplasteren er avslått eller ikke. */
+    disabled?: boolean;
+    /**Om filopplasteren er read-only. */
+    readOnly?: boolean;
     /**Maks antall filer som tillates. */
     maxFiles: number | undefined;
-    /**Feilmelding. Setter også error state. */
-    errorMessage: string | undefined;
-}
+    onKeyDown?: ComponentProps<'input'>['onKeyDown'];
+} & Pick<InputProps, 'errorMessage' | 'id'>;
 
 type FileUploaderProps = {
     /**Id til filopplasteren. */
@@ -3079,8 +3079,6 @@ type FileUploaderProps = {
      * @default Velg fil
      */
     btnLabel?: string;
-    /**Hjelpetekst. */
-    tip?: string;
     /**Om det er påkrevd med minst én fil. */
     required?: boolean;
     /**Callback for når fil-listen endres. */
@@ -3091,7 +3089,7 @@ type FileUploaderProps = {
     withDragAndDrop?: boolean;
     /**Om listen med opplastede filer skal skjules. Brukes kun hvis listen blir vist på egen måte. */
     hideFileList?: boolean;
-} & Pick<ResponsiveProps, 'width'> & Partial<FileUploaderHookProps> & Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'id'>;
+} & Pick<ResponsiveProps, 'width'> & Partial<FileUploaderHookProps> & Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'id'> & Pick<InputProps, 'tip'>;
 declare const FileUploader: {
     (props: FileUploaderProps): react_jsx_runtime.JSX.Element;
     displayName: string;
@@ -3448,25 +3446,27 @@ interface PaginationOption {
     value: number;
 }
 type PaginationProps = BaseComponentProps<HTMLElement, {
-    /**Totalt antall elementer å paginere. */
+    /**Totalt antall elementer som skal pagineres. */
     itemsAmount: number;
-    /**Antall elementer per side ved innlastning av komponenten.
+    /**Antall elementer per side ved innlastning.
      * @default 10
      */
     defaultItemsPerPage?: number;
-    /**Den aktive siden ved innlastning av komponenten.
+    /**Den aktive siden ved innlastning.
      * @default 1
      */
     defaultActivePage?: number;
+    /**Den aktive siden. Brukes til kontrollert tilstand - når denne er satt styrer du siden utenfra. */
+    activePage?: number;
     /**Spesifiserer om selve pagineringen skal vises.
      * @default true
      */
     withPagination?: boolean;
-    /**Spesifiserer om teksten `'Vis x-y av z'` skal vises. */
+    /**Om teksten `'Vis x-y av z'` skal vises. */
     withCounter?: boolean;
-    /**Spesifiserer om `<Select />` til å velge antall resultater per side skal vises. */
+    /**Om `<Select>` for å velge antall per side skal vises. */
     withSelect?: boolean;
-    /**Custom options for `<Select />`. **OBS!** hvis det settes custom `selectOptions` bør "alle"-alternativet inkluderes der det er relevant, da brukere ofte liker å ha muligheten.
+    /**Custom options for `<Select>`. **OBS!** husk å inkludere "Alle"-alternativet hvis relevant - brukere forventer ofte den muligheten.
      * @default [
         { label: '10', value: 10 },
         { label: '25', value: 25 },
@@ -3475,15 +3475,17 @@ type PaginationProps = BaseComponentProps<HTMLElement, {
       ]
      */
     selectOptions?: Array<PaginationOption>;
-    /**Brukes til å hente side og eventuelt annen logikk ved endring av side. */
+    /**Kalles ved sideendring - henter ny aktiv side og kjører ekstra logikk. */
     onChange?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, page: number) => void;
-    /**Brukes til å hente `selectedOption` og eventuelt kjøre annen logikk når `withSelect=true` ved endring av alternativ. */
+    /**Kalles når `selectedOption` endres, hvis `withSelect="true"`.
+     * Brukes til å hente valgt alternativ og evt. kjøre ekstra logikk.
+     */
     onSelectOptionChange?: (option: PaginationOption | null) => void;
-    /**Spesifiserer ved hvilket brekkpunkt og nedover versjonen for små skjermer skal vises; den viser færre sideknapper og stacker subkomponentene. */
+    /**Brekkpunkt for mobilvisning; den viser færre sideknapper og stacker delkomponentene. */
     smallScreenBreakpoint?: Breakpoint;
 }, Omit<HTMLAttributes<HTMLElement>, 'onChange'>>;
 declare const Pagination: {
-    ({ itemsAmount, defaultItemsPerPage, defaultActivePage, withPagination, withCounter, withSelect, selectOptions, smallScreenBreakpoint, onChange, onSelectOptionChange, id, className, htmlProps, ref, ...rest }: PaginationProps): react_jsx_runtime.JSX.Element | null;
+    ({ itemsAmount, defaultItemsPerPage, defaultActivePage, activePage: activePageProp, withPagination, withCounter, withSelect, selectOptions, smallScreenBreakpoint, onChange, onSelectOptionChange, id, className, htmlProps, ref, ...rest }: PaginationProps): react_jsx_runtime.JSX.Element | null;
     displayName: string;
 };