uikit-react-public 0.36.1 → 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/lib/components/Table/Table.context.ts

@@ -0,0 +1,12 @@
+import { createContext, use } from 'react';
+import type { TableColumnMetadata } from './Table.types';
+
+export type TableContextValue = {
+  columns: TableColumnMetadata[];
+};
+
+const TableContext = createContext<TableContextValue>({ columns: [] });
+
+export const TableContextProvider = TableContext.Provider;
+
+export const useTableContext = () => use(TableContext);

package/lib/components/Table/Table.tsx

@@ -1,10 +1,77 @@
+import { Children, isValidElement } from 'react';
 import { css, cx } from '@emotion/css';
 import { Head, HeadCell, Body, Row, Cell } from './subcomponents';
 import { useTheme } from '../../theme';
-import type { TableProps } from './Table.types';
+import { TableContextProvider } from './Table.context';
+import type {
+  ColumnVariant,
+  NormalizedTableMobileRole,
+  TableColumnMetadata,
+  TableMobileRole,
+  TableProps,
+} from './Table.types';
+import type { TableHeadCellProps } from './subcomponents';
 
 const NAME = 'ucl-uikit-table';
 
+const getTextFromChildren = (children: React.ReactNode): string => {
+  if (typeof children === 'string' || typeof children === 'number')
+    return String(children);
+
+  if (Array.isArray(children))
+    return children.map(getTextFromChildren).join('').trim();
+
+  if (isValidElement<{ children?: React.ReactNode }>(children))
+    return getTextFromChildren(children.props.children);
+
+  return '';
+};
+
+const normalizeMobileRole = (
+  mobileRole: TableMobileRole | undefined,
+  variant: ColumnVariant | undefined
+): NormalizedTableMobileRole => {
+  if (mobileRole === 'primaryStatus') return 'status';
+  if (mobileRole) return mobileRole;
+  if (variant === 'checkbox') return 'selection';
+  return 'field';
+};
+
+const getColumnsFromChildren = (
+  children: React.ReactNode
+): TableColumnMetadata[] => {
+  const head = Children.toArray(children).find(
+    (child) => isValidElement(child) && child.type === Head
+  );
+
+  if (!isValidElement<{ children?: React.ReactNode }>(head)) return [];
+
+  const columns = Children.toArray(head.props.children)
+    .filter(isValidElement<TableHeadCellProps>)
+    .map((cell) => ({
+      mobileRole: normalizeMobileRole(
+        cell.props.mobileRole,
+        cell.props.variant
+      ),
+      mobileLabel:
+        cell.props.mobileLabel ?? getTextFromChildren(cell.props.children),
+    }));
+
+  if (columns.some((column) => column.mobileRole === 'primary')) return columns;
+
+  const fallbackPrimaryIndex = columns.findIndex(
+    (column) => column.mobileRole === 'field'
+  );
+
+  if (fallbackPrimaryIndex === -1) return columns;
+
+  return columns.map((column, index) =>
+    index === fallbackPrimaryIndex
+      ? { ...column, mobileRole: 'primary' }
+      : column
+  );
+};
+
 const Table = ({
   testId = NAME,
   className,
@@ -14,25 +81,37 @@ const Table = ({
   ...props
 }: TableProps) => {
   const [theme] = useTheme();
+  const columns = getColumnsFromChildren(children);
 
   const baseStyle = css`
-    font-family: ${theme.font.family.primary};
-    font-size: ${theme.font.size.f14};
+    width: 100%;
+    font-family: ${theme.typography.body.sm.fontFamily};
+    font-feature-settings: ${theme.typography.body.sm.fontSettings};
+    font-size: ${theme.typography.body.sm.fontSize}px;
+    font-weight: ${theme.typography.body.sm.fontWeight};
+    line-height: ${theme.typography.body.sm.lineHeight}%;
     border-collapse: collapse;
+
+    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+      display: block;
+      border-collapse: separate;
+    }
   `;
 
   const style = cx(baseStyle, className, NAME);
 
   return (
-    <table
-      className={style}
-      data-testid={testId}
-      aria-label={ariaLabel}
-      ref={ref}
-      {...props}
-    >
-      {children}
-    </table>
+    <TableContextProvider value={{ columns }}>
+      <table
+        className={style}
+        data-testid={testId}
+        aria-label={ariaLabel}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </table>
+    </TableContextProvider>
   );
 };
 

package/lib/components/Table/Table.types.ts

@@ -2,6 +2,27 @@ export type ColumnVariant = 'default' | 'numeric' | 'checkbox' | 'button';
 
 export type SortOrder = 'asc' | 'desc' | null;
 
+export type TableMobileRole =
+  | 'selection'
+  | 'primaryMeta'
+  | 'primary'
+  | 'status'
+  | 'primaryStatus'
+  | 'field'
+  | 'primaryAction'
+  | 'contextMenu'
+  | 'hidden';
+
+export type NormalizedTableMobileRole = Exclude<
+  TableMobileRole,
+  'primaryStatus'
+>;
+
+export type TableColumnMetadata = {
+  mobileRole: NormalizedTableMobileRole;
+  mobileLabel?: string;
+};
+
 export type SortPattern = {
   accessor: string | null;
   order: SortOrder;