@westpac/ui 0.43.0 → 0.44.0

package/src/components/pagination/pagination.types.ts

@@ -1,46 +1,32 @@
-import { HTMLAttributes, ReactNode } from 'react';
+import { ReactNode } from 'react';
 
-import { type PaginationItemProps } from './components/index.js';
+import { Breakpoint } from '../../tailwind/constants/breakpoints.js';
+
+import { PaginationItemProps } from './components/index.js';
+import { PaginationPageProps } from './components/pagination-pages/pagination-pages.types.js';
+import { PaginationTotalPagesProps } from './components/pagination-total-pages/pagination-total-pages.types.js';
 
 export type PageProps = {
   href: string;
   text: ReactNode;
 };
 
-export type PaginationAsLinkProps = {
-  /**
-   * on page change
-   */
-  onChange?: never;
+export type PaginationBase = {
   /**
-   * Pages items
-   */
-  pages: PageProps[];
-};
-
-export type PaginationAsButtonProps = {
-  /**
-   * on page change
+   * Back aria label
+   * @default Back
    */
-  onChange: (page: number) => unknown;
-  /**
-   * Pages items
-   */
-  pages: Omit<PageProps, 'href'>[];
-};
-
-export type PaginationHookProps = {
-  defaultCurrent?: number;
-  infinite?: boolean;
-  pages: (Omit<PageProps, 'href'> & { href?: string })[];
-};
-
-export type PaginationProps = {
+  backAriaLabel?: string;
   /**
    * Back label
    * @default Back
    */
   backLabel?: ReactNode;
+  /**
+   * boundaryCount
+   * @default 1
+   */
+  boundaryCount?: number | Partial<Record<Breakpoint | 'initial', number>>;
   /**
    * Current page
    */
@@ -54,15 +40,32 @@ export type PaginationProps = {
    * Link component to render
    */
   linkComponent?: PaginationItemProps['tag'];
+  /**
+   * Next aria label
+   * @default Next
+   */
+  nextAriaLabel?: string;
   /**
    * Next label
    * @default Next
    */
   nextLabel?: ReactNode;
+  /**
+   * siblingCount
+   * @default 1
+   */
+  siblingCount?: number | Partial<Record<Breakpoint | 'initial', number>>;
   /**
    * Tag to render
    * @default nav
    */
   tag?: keyof JSX.IntrinsicElements;
-} & (PaginationAsLinkProps | PaginationAsButtonProps) &
-  Omit<HTMLAttributes<Element>, 'onChange'>;
+};
+
+export type PaginationHookProps = {
+  defaultCurrent?: number;
+  infinite?: boolean;
+  pages: (Omit<PageProps, 'href'> & { href?: string })[];
+};
+
+export type PaginationProps = PaginationPageProps | PaginationTotalPagesProps;

package/src/components/pagination/pagination.utils.ts

@@ -0,0 +1,11 @@
+import { Breakpoint } from '../../tailwind/index.js';
+
+export function getSiblingOrBoundaryCount(
+  count: Partial<Record<Breakpoint | 'initial', number>>,
+  breakpoint: Breakpoint | 'initial',
+) {
+  const finalBreakPoint = [breakpoint, 'initial', 'xsl', 'sm', 'md', 'lg', 'xl'].find(
+    currentBreakpoint => count[currentBreakpoint as Breakpoint | 'initial'] !== undefined,
+  ) as Breakpoint | 'initial';
+  return count[finalBreakPoint] || 0;
+}

package/src/components/progress-indicator/progress-indicator.component.tsx

@@ -34,7 +34,7 @@ export function ProgressIndicator({
 
   return (
     <div aria-label={ariaLabel} className={styles.container()}>
-      <div className="relative">
+      <div className="relative flex items-center justify-center">
         <Icon viewBox="0 0 180 180" fill="none" color={color} className={styles.base({ className })} {...props}>
           <defs>
             <linearGradient id={`${id}-1`}>

package/src/hook/breakpoints.hook.ts

@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react';
+
+import { BREAKPOINTS, Breakpoint } from '../tailwind/constants/index.js';
+
+function checkBreakpoint(): Breakpoint | 'initial' {
+  const breakpointsAsArray = Object.entries(BREAKPOINTS).reverse() as [Breakpoint, string][];
+  const breakpoint = breakpointsAsArray.find(([, value]) => window.matchMedia(`(min-width: ${value})`).matches) as [
+    Breakpoint,
+    string,
+  ];
+  return breakpoint ? breakpoint[0] : 'initial';
+}
+
+export function useBreakpoint() {
+  const [breakpoint, setBreakpoint] = useState<Breakpoint | 'initial'>(checkBreakpoint());
+
+  useEffect(() => {
+    const listener = () => {
+      const breakpoint = checkBreakpoint();
+      setBreakpoint(breakpoint);
+    };
+    window.addEventListener('resize', listener);
+    return () => {
+      window.removeEventListener('resize', listener);
+    };
+  }, []);
+
+  return breakpoint;
+}