fix: add per page dropdown target portal

.changeset/bumpy-bats-go.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": patch
+---
+
+add per page dropdown target portal

packages/ui/src/components/Pagination/PerPage.tsx

@@ -32,6 +32,7 @@ type PerPageProps = {
   numberOfItemsText?: string
   page: number
   numberOfItems: number
+  portalTarget?: HTMLElement
 }
 
 export const PerPage = ({
@@ -42,6 +43,7 @@ export const PerPage = ({
   numberOfItemsText,
   page,
   numberOfItems,
+  portalTarget,
 }: PerPageProps) => {
   const handleChange = (value: string) => {
     const intValue = Number.parseInt(value, 10)
@@ -58,6 +60,7 @@ export const PerPage = ({
         name="select-items-per-page"
         onChange={handleChange}
         options={optionsItemsPerPage}
+        portalTarget={portalTarget}
         size="small"
         style={{
           width: 'fit-content',

packages/ui/src/components/Pagination/index.tsx

@@ -52,13 +52,18 @@ type PaginationProps = {
        * Number of items in the list
        */
       numberOfItems: number
+      /**
+       * Defines the target element for the perPage dropdown menu
+       */
+      perPagePortalTarget?: HTMLElement
     }
   | {
       perPage?: never
       onChangePerPage?: never
       perPageText?: never
       numberOfItemsText?: never
       numberOfItems?: never
+      perPagePortalTarget?: never
     }
 )
 
@@ -78,6 +83,7 @@ export const Pagination = ({
   perPageText,
   numberOfItemsText,
   numberOfItems,
+  perPagePortalTarget,
   'data-testid': dataTestId,
   style,
 }: PaginationProps) => {
@@ -108,6 +114,7 @@ export const Pagination = ({
           page={page}
           perPage={perPageComputed}
           perPageText={perPageText}
+          portalTarget={perPagePortalTarget}
           setPerPage={setPerPage}
         />
       ) : null}