@norges-domstoler/dds-components 0.0.0-dev-20250929080131 → 0.0.0-dev-20251001072842

package/dist/index.d.mts

@@ -3446,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 },
@@ -3473,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

@@ -3446,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 },
@@ -3473,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.js

@@ -10671,6 +10671,7 @@ var Pagination = ({
   itemsAmount,
   defaultItemsPerPage = 10,
   defaultActivePage = 1,
+  activePage: activePageProp,
   withPagination = true,
   withCounter,
   withSelect,
@@ -10690,7 +10691,15 @@ var Pagination = ({
   ...rest
 }) => {
   const { t } = useTranslation();
-  const [activePage, setActivePage] = (0, import_react73.useState)(defaultActivePage);
+  if (withSelect && !selectOptions.some((o) => o.value === defaultItemsPerPage)) {
+    console.warn(
+      `[Pagination] defaultItemsPerPage prop value (${defaultItemsPerPage}) is not included in customOptions prop. Please add it to ensure it appears in the dropdown.`
+    );
+  }
+  const [activePage, setActivePage] = useControllableState({
+    value: activePageProp,
+    defaultValue: defaultActivePage
+  });
   const [itemsPerPage, setItemsPerPage] = (0, import_react73.useState)(defaultItemsPerPage);
   const pagesLength = Math.ceil(itemsAmount / itemsPerPage);
   const items = PaginationGenerator(pagesLength, activePage);
@@ -10908,7 +10917,7 @@ var Pagination = ({
             {
               options: selectOptions,
               isSearchable: false,
-              width: "74px",
+              width: "90px",
               defaultValue: {
                 label: itemsPerPage.toString(),
                 value: itemsPerPage