uikit-react-public 0.37.0 → 0.37.2

package/lib/components/Pagination/subcomponents/PaginationCompactControls.tsx

@@ -0,0 +1,266 @@
+import {
+  ChangeEvent,
+  HTMLAttributes,
+  KeyboardEvent,
+  memo,
+  useContext,
+  useEffect,
+  useId,
+  useState,
+} from 'react';
+import { css, cx } from '@emotion/css';
+import useTheme from '../../../theme/useTheme';
+import { PaginationContext } from '../Pagination';
+import Button from '../../Button';
+import Icon from '../../Icon';
+import Input from '../../Input';
+import Text from '../../Text';
+import announce from '../../../utils/announce';
+
+export interface PaginationCompactControlsProps extends HTMLAttributes<HTMLDivElement> {
+  name: string;
+  testId: string;
+}
+
+const PaginationCompactControls = ({
+  name,
+  testId,
+  className,
+  ...props
+}: PaginationCompactControlsProps) => {
+  const [theme] = useTheme();
+  const contextValue = useContext(PaginationContext);
+  const [pageInputValue, setPageInputValue] = useState(
+    String(contextValue?.currentPage ?? 1)
+  );
+  const [pageInputError, setPageInputError] = useState('');
+  const pageInputDescriptionId = useId();
+
+  useEffect(() => {
+    setPageInputValue(String(contextValue?.currentPage ?? 1));
+    setPageInputError('');
+  }, [contextValue?.currentPage]);
+
+  if (!contextValue) {
+    return null;
+  }
+
+  const {
+    mode,
+    limit,
+    total,
+    currentPage,
+    trackedMaxPage,
+    hasPreviousPage,
+    hasNextPage,
+    onPageChange,
+    onNextPage,
+    onPreviousPage,
+  } = contextValue;
+
+  const totalPages =
+    typeof total === 'number' ? Math.ceil(total / limit) : undefined;
+  const lastPageNumber = totalPages ?? trackedMaxPage;
+  const displayedCurrentPage = totalPages === 0 ? 0 : currentPage;
+
+  const handlePageChange = (newPage: number) => {
+    if (mode === 'tracked') {
+      if (newPage < 1 || newPage > trackedMaxPage || newPage === currentPage) {
+        return;
+      }
+      onPageChange?.(newPage);
+      return;
+    }
+
+    onPageChange?.((newPage - 1) * limit);
+  };
+
+  const handlePreviousPage = () => {
+    if (mode === 'tracked' && onPreviousPage) {
+      onPreviousPage();
+      return;
+    }
+    handlePageChange(currentPage - 1);
+  };
+
+  const handleNextPage = () => {
+    if (mode === 'tracked') {
+      onNextPage?.();
+      return;
+    }
+    handlePageChange(currentPage + 1);
+  };
+
+  const handlePageInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setPageInputValue(event.target.value);
+    setPageInputError('');
+  };
+
+  const resetPageInput = () => {
+    setPageInputValue(String(currentPage));
+    setPageInputError('');
+  };
+
+  const handlePageInputKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Escape') {
+      resetPageInput();
+      event.currentTarget.blur();
+      return;
+    }
+
+    if (event.key !== 'Enter') {
+      return;
+    }
+
+    event.preventDefault();
+
+    const isDigitsOnly = /^\d+$/.test(pageInputValue);
+    const newPageNumber = Number(pageInputValue);
+
+    if (
+      !isDigitsOnly ||
+      !Number.isInteger(newPageNumber) ||
+      newPageNumber < 1 ||
+      newPageNumber > lastPageNumber
+    ) {
+      const errorMessage = `Enter a page number from 1 to ${lastPageNumber}.`;
+      setPageInputError(errorMessage);
+      announce(errorMessage, true);
+      return;
+    }
+
+    setPageInputError('');
+    handlePageChange(newPageNumber);
+    event.currentTarget.blur();
+  };
+
+  const controlsListStyle = css`
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    list-style: none;
+    gap: ${theme.margin.m8};
+  `;
+
+  const navigationButtonStyle = css`
+    gap: ${theme.margin.m8};
+  `;
+
+  const pageInputStyle = css`
+    height: 48px;
+    width: 48px;
+    box-sizing: border-box;
+    border: ${theme.thickness.t2} solid ${theme.colour.border.default};
+    border-radius: ${theme.radius.r4};
+    padding: 0;
+    text-align: center;
+    color: ${theme.colour.text.default};
+    font-family: ${theme.typography.body.md.fontFamily};
+    font-size: ${theme.typography.body.md.fontSize};
+
+    &[aria-invalid='true'] {
+      border-color: ${theme.colour.border.critical};
+    }
+  `;
+
+  const totalPagesLabelStyle = css`
+    color: ${theme.colour.text.secondary};
+    white-space: nowrap;
+  `;
+
+  const visuallyHiddenStyle = css`
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  `;
+
+  const pageInputDescription =
+    typeof totalPages === 'number'
+      ? `Page ${displayedCurrentPage} of ${totalPages}.${
+          totalPages === 0 ? '' : ' Enter a page number and press Enter.'
+        }`
+      : `Page ${currentPage}. Enter a page number and press Enter.`;
+
+  const style = cx(name, className);
+
+  return (
+    <nav
+      {...props}
+      className={style}
+      aria-label={
+        typeof totalPages === 'number'
+          ? `Pagination, ${totalPages} pages total`
+          : 'Pagination'
+      }
+      data-testid={testId}
+    >
+      <ul className={controlsListStyle}>
+        <li>
+          <Button
+            className={navigationButtonStyle}
+            variant='tertiary'
+            icon={<Icon.ChevronLeft />}
+            aria-label='Go to previous page'
+            onClick={handlePreviousPage}
+            disabled={!hasPreviousPage}
+          >
+            Previous
+          </Button>
+        </li>
+        <li>
+          <Input
+            inputClassName={pageInputStyle}
+            type='text'
+            inputMode='numeric'
+            pattern='[0-9]*'
+            value={
+              totalPages === 0 ? String(displayedCurrentPage) : pageInputValue
+            }
+            aria-label='Page number'
+            aria-current={totalPages === 0 ? undefined : 'page'}
+            aria-describedby={pageInputDescriptionId}
+            aria-invalid={pageInputError ? true : undefined}
+            disabled={totalPages === 0}
+            onChange={handlePageInputChange}
+            onBlur={resetPageInput}
+            onKeyDown={handlePageInputKeyDown}
+          />
+          <span
+            id={pageInputDescriptionId}
+            className={visuallyHiddenStyle}
+          >
+            {pageInputDescription}
+          </span>
+        </li>
+        {typeof totalPages === 'number' && (
+          <li>
+            <Text className={totalPagesLabelStyle}>of {totalPages}</Text>
+          </li>
+        )}
+        <li>
+          <Button
+            className={navigationButtonStyle}
+            variant='tertiary'
+            icon={<Icon.ChevronRight />}
+            iconPosition='right'
+            aria-label='Go to next page'
+            onClick={handleNextPage}
+            disabled={!hasNextPage}
+          >
+            Next
+          </Button>
+        </li>
+      </ul>
+    </nav>
+  );
+};
+
+export default memo(PaginationCompactControls);

package/lib/components/Pagination/subcomponents/PaginationStandardControls.tsx

@@ -0,0 +1,246 @@
+import { HTMLAttributes, memo, useContext } from 'react';
+import { css, cx } from '@emotion/css';
+import useTheme from '../../../theme/useTheme';
+import { PaginationContext } from '../Pagination';
+import Button from '../../Button';
+import getPaginationButtons from '../getPaginationButtons';
+import { useMediaQuery } from '../../../hooks';
+
+export interface PaginationStandardControlsProps extends HTMLAttributes<HTMLDivElement> {
+  maxNumberButtons: number;
+  name: string;
+  testId: string;
+}
+
+const PaginationStandardControls = ({
+  maxNumberButtons,
+  name,
+  testId,
+  className,
+  ...props
+}: PaginationStandardControlsProps) => {
+  const [theme] = useTheme();
+
+  const isTabletPlus = useMediaQuery(
+    `(min-width: ${theme.breakpoints.tablet}px)`
+  );
+
+  const contextValue = useContext(PaginationContext);
+
+  if (!contextValue) {
+    return null;
+  }
+
+  const {
+    mode,
+    limit,
+    total,
+    currentPage,
+    trackedMaxPage,
+    hasPreviousPage,
+    hasNextPage,
+    onPageChange,
+    onNextPage,
+    onPreviousPage,
+  } = contextValue;
+
+  const handlePageChange = (newPage: number) => {
+    if (mode === 'tracked') {
+      if (newPage < 1 || newPage > trackedMaxPage || newPage === currentPage) {
+        return;
+      }
+      onPageChange?.(newPage);
+      return;
+    }
+
+    onPageChange?.((newPage - 1) * limit);
+  };
+
+  const totalPages =
+    typeof total === 'number' ? Math.ceil(total / limit) : undefined;
+
+  const paginationButtons =
+    mode === 'tracked'
+      ? Array.from({ length: trackedMaxPage }, (_, i) => i + 1)
+      : getPaginationButtons(
+          currentPage,
+          totalPages ?? 0,
+          isTabletPlus ? maxNumberButtons : 5
+        );
+
+  const style = cx(name, className);
+
+  const listStyle = css`
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    list-style: none;
+    gap: ${theme.margin.m4};
+    flex-wrap: nowrap;
+
+    @media (min-width: ${theme.breakpoints.tablet}px) {
+      gap: ${theme.margin.m8};
+    }
+  `;
+
+  const buttonBaseStyle = css`
+    @media (max-width: ${theme.breakpoints.tablet}px) {
+      gap: ${theme.margin.m4};
+    }
+  `;
+
+  const previousButtonStyle = cx(
+    buttonBaseStyle,
+    css`
+      margin-right: ${theme.margin.m16};
+      display: none;
+
+      @media (min-width: ${theme.breakpoints.tablet}px) {
+        display: inline-block;
+      }
+    `
+  );
+
+  const nextButtonStyle = cx(
+    buttonBaseStyle,
+    css`
+      margin-left: ${theme.margin.m16};
+      display: none;
+
+      @media (min-width: ${theme.breakpoints.tablet}px) {
+        display: inline-block;
+      }
+    `
+  );
+
+  const pageNumberButtonBaseStyle = cx(
+    buttonBaseStyle,
+    css`
+      height: 40px;
+      min-width: 40px;
+      padding: 0;
+
+      @media (min-width: ${theme.breakpoints.tablet}px) {
+        height: 48px;
+        min-width: 48px;
+      }
+    `
+  );
+
+  const pageNumberButtonStyle = cx(
+    pageNumberButtonBaseStyle,
+    css`
+      border: none;
+      color: ${theme.colour.text.secondary};
+    `
+  );
+
+  const currentPageNumberButtonStyle = cx(
+    pageNumberButtonBaseStyle,
+    css`
+      color: ${theme.colour.text.brand};
+      border-color: ${theme.colour.border.brand};
+    `
+  );
+
+  const buttonNumberLabelStyle = css`
+    padding: 0 ${theme.padding.p8};
+  `;
+
+  return (
+    <nav
+      {...props}
+      className={style}
+      aria-label={
+        typeof totalPages === 'number'
+          ? `Pagination, ${totalPages} pages total`
+          : 'Pagination'
+      }
+      data-testid={testId}
+    >
+      <ul className={listStyle}>
+        <li>
+          <Button
+            className={previousButtonStyle}
+            variant='tertiary'
+            size={isTabletPlus ? 'default' : 'small'}
+            aria-label='Go to previous page'
+            onClick={() => {
+              if (mode === 'tracked') {
+                if (onPreviousPage) {
+                  onPreviousPage();
+                } else {
+                  handlePageChange(currentPage - 1);
+                }
+                return;
+              }
+              handlePageChange(currentPage - 1);
+            }}
+            disabled={!hasPreviousPage}
+          >
+            Previous
+          </Button>
+        </li>
+
+        {paginationButtons.map((page) => (
+          <li key={page}>
+            {page === '...1' || page === '...2' ? (
+              <span aria-hidden>...</span>
+            ) : (
+              <>
+                {page !== currentPage && (
+                  <Button
+                    className={pageNumberButtonStyle}
+                    variant='secondary'
+                    size={isTabletPlus ? 'default' : 'small'}
+                    aria-label={`Page ${page}`}
+                    onClick={() => handlePageChange(page)}
+                  >
+                    <span className={buttonNumberLabelStyle}>{page}</span>
+                  </Button>
+                )}
+                {page === currentPage && (
+                  <Button
+                    className={currentPageNumberButtonStyle}
+                    variant='secondary'
+                    size={isTabletPlus ? 'default' : 'small'}
+                    aria-label={`Page ${page}, current page`}
+                    aria-current='page'
+                    disabled
+                    onClick={() => handlePageChange(page)}
+                  >
+                    <span className={buttonNumberLabelStyle}>{page}</span>
+                  </Button>
+                )}
+              </>
+            )}
+          </li>
+        ))}
+
+        <li>
+          <Button
+            className={nextButtonStyle}
+            variant='tertiary'
+            aria-label='Go to next page'
+            onClick={() => {
+              if (mode === 'tracked') {
+                if (onNextPage) {
+                  onNextPage();
+                }
+                return;
+              }
+              handlePageChange(currentPage + 1);
+            }}
+            disabled={!hasNextPage}
+          >
+            Next
+          </Button>
+        </li>
+      </ul>
+    </nav>
+  );
+};
+
+export default memo(PaginationStandardControls);

package/lib/components/Pagination/subcomponents/index.ts

@@ -0,0 +1,2 @@
+export { default as PaginationCompactControls } from './PaginationCompactControls';
+export { default as PaginationStandardControls } from './PaginationStandardControls';

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit-react-public",
   "private": false,
   "license": "UNLICENSED",
-  "version": "0.37.0",
+  "version": "0.37.2",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -55,11 +55,10 @@
     "@eslint/compat": "^1.2.7",
     "@eslint/eslintrc": "^3.3.0",
     "@eslint/js": "^9.22.0",
+    "@storybook/addon-docs": "10.4.6",
     "@storybook/addon-links": "10.4.6",
     "@storybook/addon-onboarding": "10.4.6",
     "@storybook/react-vite": "10.4.6",
-    "@storybook/addon-docs": "10.4.6",
-    "eslint-plugin-storybook": "10.4.6",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^14.6.1",
@@ -77,9 +76,10 @@
     "eslint-plugin-jest": "^28.11.0",
     "eslint-plugin-no-for-of-loops": "^1.0.1",
     "eslint-plugin-no-function-declare-after-return": "^1.1.0",
-    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.19",
+    "eslint-plugin-storybook": "10.4.6",
     "gh-pages": "^6.3.0",
     "globals": "^16.0.0",
     "husky": "^9.1.7",
@@ -88,7 +88,7 @@
     "prettier": "^3.5.3",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "react-router": "^7.13.1",
+    "react-router": "^8.3.0",
     "storybook": "10.4.6",
     "typescript": "^5.8.2",
     "typescript-eslint": "^8.26.1",