@westpac/ui 0.43.0 → 0.44.0

package/dist/components/accordion/components/accordion-item/accordion-item.component.js

@@ -30,7 +30,9 @@ export function AccordionItem({ className, tag: Tag = 'div', look = 'soft', ...p
         ...mergeProps(buttonProps, hoverProps, focusProps),
         ref: ref,
         className: styles.itemHeader()
-    }, React.createElement("span", null, item.props.title), direction === 'ltr' ? React.createElement(ArrowRightIcon, {
+    }, React.createElement("span", {
+        className: styles.headerTitleWrapper()
+    }, item.props.title), direction === 'ltr' ? React.createElement(ArrowRightIcon, {
         "aria-hidden": "true",
         className: styles.indicator()
     }) : React.createElement(ArrowLeftIcon, {

package/dist/components/accordion/components/accordion-item/accordion-item.styles.d.ts

@@ -31,6 +31,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
 }, {
     base: string;
     itemHeader: string;
+    headerTitleWrapper: string;
     indicator: string;
     content: string;
 }, undefined, {
@@ -68,6 +69,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
 }, {
     base: string;
     itemHeader: string;
+    headerTitleWrapper: string;
     indicator: string;
     content: string;
 }, import("tailwind-variants").TVReturnType<{
@@ -103,6 +105,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
 }, {
     base: string;
     itemHeader: string;
+    headerTitleWrapper: string;
     indicator: string;
     content: string;
 }, undefined, {

package/dist/components/accordion/components/accordion-item/accordion-item.styles.js

@@ -2,7 +2,8 @@ import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
         base: 'relative',
-        itemHeader: 'typography-body-9 flex w-full items-center justify-between px-3 py-2',
+        itemHeader: 'typography-body-9 flex w-full flex-1 items-center justify-between px-3 py-2',
+        headerTitleWrapper: 'flex-1 pr-2 text-left',
         indicator: 'size-3 rotate-90',
         content: 'hidden'
     },

package/dist/components/pagination/components/pagination-item/pagination-item.component.js

@@ -11,6 +11,10 @@ export function PaginationItem({ className, firstItem = false, lastItem = false,
         }),
         ...props,
         disabled: disabled,
-        "aria-current": active ? 'page' : undefined
+        "aria-disabled": disabled ? 'true' : 'false',
+        "aria-current": active ? 'page' : undefined,
+        ...Tag === 'button' && {
+            type: 'button'
+        }
     }, children);
 }

package/dist/components/pagination/components/pagination-item/pagination-item.styles.d.ts

@@ -15,7 +15,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "typography-body-10 relative block border border-border px-2 py-1.5 text-center text-text transition-colors", {
+}, undefined, "typography-body-10 relative block min-w-7 border border-border px-2 py-1.5 text-center text-text", {
     responsiveVariants: string[];
 }, {
     firstItem: {
@@ -51,6 +51,6 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "typography-body-10 relative block border border-border px-2 py-1.5 text-center text-text transition-colors", {
+}, undefined, "typography-body-10 relative block min-w-7 border border-border px-2 py-1.5 text-center text-text", {
     responsiveVariants: string[];
 }, unknown, unknown, undefined>>;

package/dist/components/pagination/components/pagination-item/pagination-item.styles.js

@@ -1,6 +1,6 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
-    base: 'typography-body-10 relative block border border-border px-2 py-1.5 text-center text-text transition-colors',
+    base: 'typography-body-10 relative block min-w-7 border border-border px-2 py-1.5 text-center text-text',
     variants: {
         firstItem: {
             true: 'rounded-l',

package/dist/components/pagination/components/pagination-pages/pagination-pages.component.d.ts

@@ -0,0 +1,2 @@
+import { type PaginationPageProps } from './pagination-pages.types.js';
+export declare function PaginationPage({ className, pages, tag, role, current, linkComponent, infinite, onChange, backLabel, nextLabel, nextAriaLabel, backAriaLabel, siblingCount, boundaryCount, ...props }: PaginationPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/pagination/components/pagination-pages/pagination-pages.component.js

@@ -0,0 +1,185 @@
+'use client';
+import React, { useCallback, useMemo } from 'react';
+import { useBreakpoint } from '../../../../hook/breakpoints.hook.js';
+import { getSiblingOrBoundaryCount } from '../../pagination.utils.js';
+import { PaginationPresentational } from '../pagination-presentational/pagination-presentational.component.js';
+export function PaginationPage({ className, pages, tag = 'nav', role = 'navigation', current = 1, linkComponent, infinite = false, onChange, backLabel = 'Back', nextLabel = 'Next', nextAriaLabel = 'Next', backAriaLabel = 'Back', siblingCount = 2, boundaryCount = 1, ...props }) {
+    const breakpoint = useBreakpoint();
+    const finalSiblingCount = useMemo(()=>{
+        if (typeof siblingCount === 'number') {
+            return siblingCount;
+        }
+        return getSiblingOrBoundaryCount(siblingCount, breakpoint);
+    }, [
+        breakpoint,
+        siblingCount
+    ]);
+    const finalBoundaryCount = useMemo(()=>{
+        if (typeof boundaryCount === 'number') {
+            return boundaryCount;
+        }
+        return getSiblingOrBoundaryCount(boundaryCount, breakpoint);
+    }, [
+        boundaryCount,
+        breakpoint
+    ]);
+    const generateHandleOnClickBackwards = useCallback((current, infinite, forwardOnly, onChange, pages)=>()=>{
+            if (infinite && forwardOnly) {
+                return onChange(pages.length);
+            }
+            if (!forwardOnly) {
+                return onChange(current - 1);
+            }
+        }, []);
+    const paginationBackProps = useMemo(()=>{
+        var _pages_;
+        const fowardOnly = (current || 1) <= 1;
+        const defaultBackProps = {
+            disabled: !infinite && fowardOnly,
+            firstItem: true,
+            'aria-label': backAriaLabel
+        };
+        if (defaultBackProps.disabled) {
+            return {
+                ...defaultBackProps,
+                tag: 'button'
+            };
+        }
+        if (onChange) {
+            return {
+                ...defaultBackProps,
+                tag: linkComponent || 'button',
+                ...current && {
+                    onClick: generateHandleOnClickBackwards(current, infinite, fowardOnly, onChange, pages)
+                }
+            };
+        }
+        return {
+            ...defaultBackProps,
+            tag: linkComponent || 'a',
+            href: fowardOnly ? pages[pages.length - 1].href : (_pages_ = pages[(current || 0) - 2]) === null || _pages_ === void 0 ? void 0 : _pages_.href
+        };
+    }, [
+        current,
+        infinite,
+        backAriaLabel,
+        onChange,
+        linkComponent,
+        pages,
+        generateHandleOnClickBackwards
+    ]);
+    const generateHandleOnClickForward = useCallback((current, infinite, backwardsOnly, onChange)=>()=>{
+            if (infinite && backwardsOnly) {
+                return onChange(1);
+            }
+            if (backwardsOnly) {
+                return;
+            }
+            return onChange(current + 1);
+        }, []);
+    const paginationNextProps = useMemo(()=>{
+        var _pages_;
+        const backwardsOnly = (current || 1) >= pages.length;
+        const defaultNextProps = {
+            disabled: !infinite && backwardsOnly,
+            tag: linkComponent,
+            lastItem: true,
+            'aria-label': nextAriaLabel
+        };
+        if (defaultNextProps.disabled) {
+            return {
+                ...defaultNextProps,
+                tag: 'button'
+            };
+        }
+        if (onChange) {
+            return {
+                ...defaultNextProps,
+                tag: linkComponent || 'button',
+                ...current && {
+                    onClick: generateHandleOnClickForward(current, infinite, backwardsOnly, onChange)
+                }
+            };
+        }
+        return {
+            ...defaultNextProps,
+            tag: linkComponent || 'a',
+            href: backwardsOnly ? pages[0].href : (_pages_ = pages[current || 0]) === null || _pages_ === void 0 ? void 0 : _pages_.href
+        };
+    }, [
+        current,
+        pages,
+        infinite,
+        linkComponent,
+        nextAriaLabel,
+        onChange,
+        generateHandleOnClickForward
+    ]);
+    const numberedPages = useMemo(()=>pages.map((page, index)=>({
+                ...page,
+                page: index + 1
+            })), [
+        pages
+    ]);
+    const pagesToRender = useMemo(()=>{
+        const minEdgePagesVisible = Math.min(finalSiblingCount * 2 + finalBoundaryCount + 2, pages.length);
+        let leftCorner = numberedPages.slice(0, finalBoundaryCount);
+        let rightCorner = finalBoundaryCount > 0 ? numberedPages.slice(-finalBoundaryCount).filter((page)=>!leftCorner.some((leftItem)=>leftItem.page === page.page)) : [];
+        let middle = [];
+        if (current) {
+            var _middle_, _leftCorner_at, _rightCorner_;
+            const nearStart = current < minEdgePagesVisible - finalSiblingCount;
+            const nearEnd = current > numberedPages.length - minEdgePagesVisible + finalSiblingCount;
+            if (nearStart) {
+                leftCorner = numberedPages.slice(0, minEdgePagesVisible);
+            }
+            if (nearEnd) {
+                rightCorner = numberedPages.slice(-minEdgePagesVisible);
+            }
+            rightCorner = rightCorner.filter((page)=>!leftCorner.some((leftItem)=>leftItem.page === page.page));
+            const currentIndex = current - 1;
+            const leftEdge = currentIndex - finalSiblingCount;
+            middle = numberedPages.slice(Math.max(0, leftEdge), leftEdge + (finalSiblingCount * 2 + 1)).filter((middleItem)=>{
+                return !(leftCorner.some((left)=>left.page === middleItem.page) || rightCorner.some((right)=>right.page === middleItem.page));
+            });
+            const lastItemMiddle = middle.at(-1);
+            const hasLeftDots = ((_middle_ = middle[0]) === null || _middle_ === void 0 ? void 0 : _middle_.page) && middle[0].page - 1 !== ((_leftCorner_at = leftCorner.at(-1)) === null || _leftCorner_at === void 0 ? void 0 : _leftCorner_at.page);
+            const hasRightDots = (lastItemMiddle === null || lastItemMiddle === void 0 ? void 0 : lastItemMiddle.page) && lastItemMiddle.page + 1 !== ((_rightCorner_ = rightCorner[0]) === null || _rightCorner_ === void 0 ? void 0 : _rightCorner_.page);
+            if (middle.length === 0 && leftCorner.length + rightCorner.length !== numberedPages.length) {
+                middle = [
+                    null
+                ];
+            } else {
+                if (hasLeftDots) middle.unshift(null);
+                if (hasRightDots) middle.push(null);
+            }
+        }
+        return [
+            ...leftCorner,
+            ...middle,
+            ...rightCorner
+        ];
+    }, [
+        finalBoundaryCount,
+        current,
+        numberedPages,
+        finalSiblingCount,
+        pages.length
+    ]);
+    if (!pages.length) {
+        return React.createElement(React.Fragment, null);
+    }
+    return React.createElement(PaginationPresentational, {
+        className: className,
+        current: current,
+        paginationBackProps: paginationBackProps,
+        paginationNextProps: paginationNextProps,
+        pagesToRender: pagesToRender,
+        tag: tag,
+        role: role,
+        backLabel: backLabel,
+        nextLabel: nextLabel,
+        onChange: onChange,
+        ...props
+    });
+}

package/dist/components/pagination/components/pagination-pages/pagination-pages.types.d.ts

@@ -0,0 +1,36 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { PaginationBase } from '../../pagination.types.js';
+export type PageProps = {
+    'aria-label'?: string;
+    href: string;
+    text: ReactNode;
+};
+export type PaginationAsLinkProps = {
+    /**
+     * on page change
+     */
+    onChange?: never;
+    /**
+     * Pages items
+     */
+    pages: PageProps[];
+};
+export type PaginationAsButtonProps = {
+    /**
+     * on page change
+     */
+    onChange: (page: number) => unknown;
+    /**
+     * Pages items
+     */
+    pages: Omit<PageProps, 'href'>[];
+};
+export type PaginationPageProps = PaginationBase & (PaginationAsLinkProps | PaginationAsButtonProps) & Omit<HTMLAttributes<Element>, 'onChange'>;
+export type PageToRender = {
+    href: string;
+    page: number;
+    text: React.ReactNode;
+} | {
+    page: number;
+    text: React.ReactNode;
+} | null;

package/dist/components/pagination/components/pagination-pages/pagination-pages.types.js

@@ -0,0 +1 @@
+export { };

package/dist/components/pagination/components/pagination-presentational/pagination-presentational.component.d.ts

@@ -0,0 +1,2 @@
+import { type PaginationPresentationalProps } from './pagination-presentational.types.js';
+export declare function PaginationPresentational({ className, tag: Tag, role, paginationBackProps, backLabel, pagesToRender, current, linkComponent, onChange, paginationNextProps, nextLabel, ...props }: PaginationPresentationalProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/pagination/components/pagination-presentational/pagination-presentational.component.js

@@ -0,0 +1,44 @@
+'use client';
+import React from 'react';
+import { PaginationItem } from '../../components/index.js';
+import { styles as paginationStyles } from './pagination-presentational.styles.js';
+export function PaginationPresentational({ className, tag: Tag = 'nav', role = 'navigation', paginationBackProps, backLabel, pagesToRender, current, linkComponent, onChange, paginationNextProps, nextLabel, ...props }) {
+    const styles = paginationStyles({});
+    return React.createElement(Tag, {
+        className: styles.base({
+            className
+        }),
+        role: role,
+        "aria-label": "Page number",
+        ...props
+    }, React.createElement("ul", {
+        className: styles.ul({})
+    }, React.createElement("li", null, React.createElement(PaginationItem, paginationBackProps, backLabel)), pagesToRender.map((page, index)=>{
+        if (page === null) {
+            return React.createElement("li", {
+                className: styles.emptyItem(),
+                key: `index-${index}`
+            }, "…");
+        }
+        const commonProps = {
+            active: (current || 0) === page.page,
+            'aria-label': page['aria-label'] || `Go to page ${page.page}`
+        };
+        return React.createElement("li", {
+            key: page.page
+        }, 'href' in page ? React.createElement(PaginationItem, {
+            ...commonProps,
+            tag: linkComponent || 'a',
+            href: page.href
+        }, page.text) : React.createElement(PaginationItem, {
+            ...commonProps,
+            tag: linkComponent || 'button',
+            onClick: onChange && (()=>{
+                onChange(page.page);
+            })
+        }, page.text));
+    }), React.createElement("li", null, React.createElement(PaginationItem, paginationNextProps, nextLabel))), current && React.createElement("span", {
+        className: "sr-only",
+        role: "status"
+    }, "Page ", current));
+}

package/dist/components/pagination/{pagination.styles.d.ts → components/pagination-presentational/pagination-presentational.styles.d.ts}

@@ -1,14 +1,17 @@
 export declare const styles: import("tailwind-variants").TVReturnType<{}, {
     base: string;
     ul: string;
+    emptyItem: string;
 }, undefined, {
     responsiveVariants: string[];
 }, {}, {
     base: string;
     ul: string;
+    emptyItem: string;
 }, import("tailwind-variants").TVReturnType<{}, {
     base: string;
     ul: string;
+    emptyItem: string;
 }, undefined, {
     responsiveVariants: string[];
 }, unknown, unknown, undefined>>;

package/dist/components/pagination/{pagination.styles.js → components/pagination-presentational/pagination-presentational.styles.js}

@@ -2,7 +2,8 @@ import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
         base: 'flex flex-col items-center',
-        ul: 'flex overflow-hidden'
+        ul: 'flex overflow-hidden',
+        emptyItem: 'typography-body-10 relative block min-w-7 cursor-default border-y border-border px-2 py-1.5 text-center text-text'
     },
     variants: {}
 }, {

package/dist/components/pagination/components/pagination-presentational/pagination-presentational.types.d.ts

@@ -0,0 +1,41 @@
+import { HTMLAttributes } from 'react';
+import { type PaginationItemProps } from '../../components/index.js';
+import { PaginationBase } from '../../pagination.types.js';
+export type PageToRender = {
+    'aria-label'?: string;
+    href: string;
+    page: number;
+    text: React.ReactNode;
+} | {
+    'aria-label'?: string;
+    page: number;
+    text: React.ReactNode;
+} | null;
+export type PaginationPresentationalProps = PaginationBase & {
+    /**
+     * on page change
+     */
+    onChange?: (page: number) => unknown;
+    /**
+     * Pages to render where the null value is rendered as [...]
+     */
+    pagesToRender: PageToRender[];
+    /**
+     * Props to back button
+     */
+    paginationBackProps?: PaginationItemProps;
+    /**
+     * Props to back button
+     */
+    paginationNextProps?: PaginationItemProps;
+    /**
+     * siblingCount
+     * @default 1
+     */
+    siblingCount?: number;
+    /**
+     * Tag to render
+     * @default nav
+     */
+    tag?: keyof JSX.IntrinsicElements;
+} & Omit<HTMLAttributes<Element>, 'onChange'>;

package/dist/components/pagination/components/pagination-presentational/pagination-presentational.types.js

@@ -0,0 +1 @@
+export { };

package/dist/components/pagination/components/pagination-total-pages/pagination-total-pages.component.d.ts

@@ -0,0 +1,2 @@
+import { type PaginationTotalPagesProps } from './pagination-total-pages.types.js';
+export declare function PaginationTotalPages({ className, totalPages, tag, role, current, linkComponent, infinite, onChange, backLabel, backAriaLabel, nextLabel, nextAriaLabel, siblingCount, boundaryCount, onPageItemProps, ...props }: PaginationTotalPagesProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/pagination/components/pagination-total-pages/pagination-total-pages.component.js

@@ -0,0 +1,188 @@
+'use client';
+import React, { useCallback, useMemo } from 'react';
+import { useBreakpoint } from '../../../../hook/breakpoints.hook.js';
+import { getSiblingOrBoundaryCount } from '../../pagination.utils.js';
+import { PaginationPresentational } from '../pagination-presentational/pagination-presentational.component.js';
+function generateArray(from, to) {
+    return Array.from({
+        length: to - from + 1
+    }, (_, i)=>i + from);
+}
+export function PaginationTotalPages({ className, totalPages, tag = 'nav', role = 'navigation', current = 1, linkComponent, infinite = false, onChange, backLabel = 'Back', backAriaLabel = 'Back', nextLabel = 'Next', nextAriaLabel = 'Next', siblingCount = 2, boundaryCount = 1, onPageItemProps, ...props }) {
+    const breakpoint = useBreakpoint();
+    const finalSiblingCount = useMemo(()=>{
+        if (typeof siblingCount === 'number') {
+            return siblingCount;
+        }
+        return getSiblingOrBoundaryCount(siblingCount, breakpoint);
+    }, [
+        breakpoint,
+        siblingCount
+    ]);
+    const finalBoundaryCount = useMemo(()=>{
+        if (typeof boundaryCount === 'number') {
+            return boundaryCount;
+        }
+        return getSiblingOrBoundaryCount(boundaryCount, breakpoint);
+    }, [
+        boundaryCount,
+        breakpoint
+    ]);
+    const generateHandleOnClickBackwards = useCallback((current, infinite, forwardOnly, onChange, totalPages)=>()=>{
+            if (infinite && forwardOnly) {
+                return onChange(totalPages);
+            }
+            if (!forwardOnly) {
+                return onChange(current - 1);
+            }
+        }, []);
+    const paginationBackProps = useMemo(()=>{
+        var _onPageItemProps;
+        const fowardOnly = (current || 1) <= 1;
+        const defaultBackProps = {
+            disabled: !infinite && fowardOnly,
+            firstItem: true,
+            'aria-label': backAriaLabel
+        };
+        if (defaultBackProps.disabled) {
+            return {
+                ...defaultBackProps,
+                tag: 'button'
+            };
+        }
+        if (onChange) {
+            return {
+                ...defaultBackProps,
+                tag: linkComponent || 'button',
+                ...current && {
+                    onClick: generateHandleOnClickBackwards(current, infinite, fowardOnly, onChange, totalPages)
+                }
+            };
+        }
+        return {
+            ...defaultBackProps,
+            tag: linkComponent || 'a',
+            href: fowardOnly ? onPageItemProps(totalPages).href : (_onPageItemProps = onPageItemProps(current - 1)) === null || _onPageItemProps === void 0 ? void 0 : _onPageItemProps.href
+        };
+    }, [
+        current,
+        infinite,
+        backAriaLabel,
+        onChange,
+        linkComponent,
+        onPageItemProps,
+        totalPages,
+        generateHandleOnClickBackwards
+    ]);
+    const generateHandleOnClickForward = useCallback((current, infinite, backwardsOnly, onChange)=>()=>{
+            if (infinite && backwardsOnly) {
+                return onChange(1);
+            }
+            if (backwardsOnly) {
+                return;
+            }
+            return onChange(current + 1);
+        }, []);
+    const paginationNextProps = useMemo(()=>{
+        var _onPageItemProps, _onPageItemProps1;
+        const backwardsOnly = (current || 1) >= totalPages;
+        const defaultNextProps = {
+            disabled: !infinite && backwardsOnly,
+            tag: linkComponent,
+            lastItem: true,
+            'aria-label': nextAriaLabel
+        };
+        if (defaultNextProps.disabled) {
+            return {
+                ...defaultNextProps,
+                tag: 'button'
+            };
+        }
+        if (onChange) {
+            return {
+                ...defaultNextProps,
+                tag: linkComponent || 'button',
+                ...current && {
+                    onClick: generateHandleOnClickForward(current, infinite, backwardsOnly, onChange)
+                }
+            };
+        }
+        return {
+            ...defaultNextProps,
+            tag: linkComponent || 'a',
+            href: backwardsOnly ? (_onPageItemProps = onPageItemProps(1)) === null || _onPageItemProps === void 0 ? void 0 : _onPageItemProps.href : (_onPageItemProps1 = onPageItemProps(current || 0)) === null || _onPageItemProps1 === void 0 ? void 0 : _onPageItemProps1.href
+        };
+    }, [
+        current,
+        totalPages,
+        infinite,
+        linkComponent,
+        nextAriaLabel,
+        onChange,
+        onPageItemProps,
+        generateHandleOnClickForward
+    ]);
+    const pagesToRender = useMemo(()=>{
+        const minEdgePagesVisible = Math.min(finalSiblingCount * 2 + finalBoundaryCount + 2, totalPages);
+        let leftCorner = generateArray(1, Math.min(finalBoundaryCount, totalPages));
+        let rightCorner = finalBoundaryCount > 0 ? generateArray(totalPages + 1 - finalBoundaryCount, totalPages).filter((page)=>!leftCorner.some((leftItem)=>leftItem === page)) : [];
+        let middle = [];
+        if (current) {
+            const nearStart = current < minEdgePagesVisible - finalSiblingCount;
+            const nearEnd = current > totalPages - minEdgePagesVisible + finalSiblingCount;
+            if (nearStart) {
+                leftCorner = generateArray(1, minEdgePagesVisible);
+            }
+            if (nearEnd) {
+                rightCorner = generateArray(totalPages - minEdgePagesVisible + 1, totalPages);
+            }
+            rightCorner = rightCorner.filter((page)=>!leftCorner.some((leftItem)=>leftItem === page));
+            const leftEdge = current - finalSiblingCount;
+            middle = generateArray(Math.max(1, leftEdge), Math.min(leftEdge + finalSiblingCount * 2, totalPages)).filter((middleItem)=>{
+                return !(leftCorner.some((left)=>left === middleItem) || rightCorner.some((right)=>right === middleItem));
+            });
+            const lastItemMiddle = middle.at(-1);
+            const hasLeftDots = middle[0] && middle[0] - 1 !== leftCorner.at(-1);
+            const hasRightDots = lastItemMiddle && lastItemMiddle + 1 !== rightCorner[0];
+            if (middle.length === 0 && leftCorner.length + rightCorner.length !== totalPages) {
+                middle = [
+                    null
+                ];
+            } else {
+                if (hasLeftDots) middle.unshift(null);
+                if (hasRightDots) middle.push(null);
+            }
+        }
+        return [
+            ...leftCorner,
+            ...middle,
+            ...rightCorner
+        ].map((page)=>page ? {
+                page,
+                text: page,
+                ...onPageItemProps === null || onPageItemProps === void 0 ? void 0 : onPageItemProps(page)
+            } : null);
+    }, [
+        finalBoundaryCount,
+        current,
+        onPageItemProps,
+        finalSiblingCount,
+        totalPages
+    ]);
+    if (totalPages <= 0) {
+        return React.createElement(React.Fragment, null);
+    }
+    return React.createElement(PaginationPresentational, {
+        className: className,
+        current: current,
+        paginationBackProps: paginationBackProps,
+        paginationNextProps: paginationNextProps,
+        pagesToRender: pagesToRender,
+        tag: tag,
+        role: role,
+        backLabel: backLabel,
+        nextLabel: nextLabel,
+        onChange: onChange,
+        ...props
+    });
+}

package/dist/components/pagination/components/pagination-total-pages/pagination-total-pages.types.d.ts

@@ -0,0 +1,40 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { PaginationBase } from '../../pagination.types.js';
+export type PageProps = {
+    href: string;
+    text: ReactNode;
+};
+export type PaginationAsLinkProps = {
+    /**
+     * on page change
+     */
+    onChange?: never;
+    /**
+     * Pages items
+     */
+    onPageItemProps: (page: number) => Omit<PageToRenderHref, 'page'>;
+};
+export type PaginationAsButtonProps = {
+    /**
+     * on page change
+     */
+    onChange: (page: number) => unknown;
+    /**
+     * Pages items
+     */
+    onPageItemProps?: (page: number) => Omit<PageToRenderBase, 'page'>;
+};
+export type PaginationTotalPagesProps = {
+    /**
+     * total of pages
+     */
+    totalPages: number;
+} & PaginationBase & (PaginationAsLinkProps | PaginationAsButtonProps) & Omit<HTMLAttributes<Element>, 'onChange'>;
+export type PageToRenderBase = {
+    'aria-label'?: string;
+    page: number;
+    text: React.ReactNode;
+};
+export type PageToRenderHref = PageToRenderBase & {
+    href: string;
+};