@norges-domstoler/dds-components 21.14.0 → 21.15.0

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

@@ -10177,7 +10177,7 @@ var getCustomStyles = (size2, hasError, hasIcon, isReadOnly) => ({
     cursor: "pointer",
     display: "flex",
     alignItems: "center",
-    gap: "var(--dds-spacing-x0-5)",
+    gap: "var(--dds-spacing-x0-25)",
     padding: "var(--dds-spacing-x0-75)",
     backgroundColor: "var(--dds-color-surface-default)",
     ...typography.option[size2],
@@ -10243,10 +10243,9 @@ var getIndicatorIconSize = (componentSize) => {
   }
 };
 var DDSOption = ({
-  componentSize,
   ...props
 }) => /* @__PURE__ */ (0, import_jsx_runtime285.jsxs)(Option, { ...props, children: [
-  props.isSelected && /* @__PURE__ */ (0, import_jsx_runtime285.jsx)(Icon, { icon: CheckIcon, iconSize: getFormInputIconSize(componentSize) }),
+  props.isSelected && /* @__PURE__ */ (0, import_jsx_runtime285.jsx)(Icon, { icon: CheckIcon, iconSize: "small" }),
   props.children
 ] });
 var CustomOption = (props) => /* @__PURE__ */ (0, import_jsx_runtime285.jsx)(Option, { ...props, children: import_react70.default.createElement(props.customElement, props) });
@@ -10437,7 +10436,7 @@ function Select({
       if (customOptionElement) {
         return /* @__PURE__ */ (0, import_jsx_runtime286.jsx)(CustomOption, { ...props, customElement: customOptionElement });
       } else {
-        return /* @__PURE__ */ (0, import_jsx_runtime286.jsx)(DDSOption, { ...props, componentSize });
+        return /* @__PURE__ */ (0, import_jsx_runtime286.jsx)(DDSOption, { ...props });
       }
     },
     [customOptionElement, componentSize]
@@ -10672,6 +10671,7 @@ var Pagination = ({
   itemsAmount,
   defaultItemsPerPage = 10,
   defaultActivePage = 1,
+  activePage: activePageProp,
   withPagination = true,
   withCounter,
   withSelect,
@@ -10691,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);
@@ -10909,7 +10917,7 @@ var Pagination = ({
             {
               options: selectOptions,
               isSearchable: false,
-              width: "74px",
+              width: "90px",
               defaultValue: {
                 label: itemsPerPage.toString(),
                 value: itemsPerPage