diff --git a/package.json b/package.json index 14f5962..53c9cd7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@near-pagoda/ui", - "version": "3.0.0", + "version": "3.0.1", "description": "A React component library that implements the official NEAR design system.", "license": "MIT", "repository": { diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx index 27e1a58..82f63ca 100644 --- a/src/components/Table/Table.tsx +++ b/src/components/Table/Table.tsx @@ -11,6 +11,7 @@ import type { import { createContext, forwardRef, useContext, useEffect, useRef } from 'react'; import { usePagodaUi } from '../../context/PagodaUi'; +import { mergeRefs } from '../../utils'; import { Flex } from '../Flex'; import { Placeholder } from '../Placeholder'; import { SvgIcon } from '../SvgIcon'; @@ -140,14 +141,16 @@ export const Row = forwardRef(({ className = '', const clickable = !!props.onClick; const role = clickable ? 'button' : undefined; const tabIndex = clickable ? 0 : undefined; + const rowRef = useRef(null); const onKeyDown: KeyboardEventHandler = (event) => { - if (event.key === 'Enter') { + if (props.onKeyDown) props.onKeyDown(event); + + if (event.key === 'Enter' && rowRef.current === event.target) { event.preventDefault(); event.stopPropagation(); event.target.dispatchEvent(new Event('click', { bubbles: true, cancelable: true })); } - if (props.onKeyDown) props.onKeyDown(event); }; return ( @@ -156,7 +159,7 @@ export const Row = forwardRef(({ className = '', data-clickable={clickable} role={role} tabIndex={tabIndex} - ref={ref} + ref={mergeRefs([ref, rowRef])} {...props} onKeyDown={onKeyDown} /> @@ -187,11 +190,12 @@ export const HeadCell = forwardRef( const role = clickable ? 'button' : undefined; const tabIndex = clickable ? 0 : undefined; const columnHasActiveSort = sort?.column === column; + const cellRef = useRef(null); const onKeyDown: KeyboardEventHandler = (event) => { if (props.onKeyDown) props.onKeyDown(event); - if (event.key === 'Enter') { + if (event.key === 'Enter' && cellRef.current === event.target) { event.preventDefault(); event.stopPropagation(); event.target.dispatchEvent(new Event('click', { bubbles: true, cancelable: true })); @@ -225,7 +229,7 @@ export const HeadCell = forwardRef( data-clickable={clickable} role={role} tabIndex={tabIndex} - ref={ref} + ref={mergeRefs([ref, cellRef])} {...props} onKeyDown={onKeyDown} onClick={onClick} @@ -266,14 +270,16 @@ export const Cell = forwardRef( const role = isButton ? 'button' : undefined; const tabIndex = isButton ? (disabled ? -1 : 0) : undefined; const { Link } = usePagodaUi(); + const cellRef = useRef(null); const onKeyDown: KeyboardEventHandler = (event) => { - if (event.key === 'Enter') { + if (props.onKeyDown) props.onKeyDown(event); + + if (event.key === 'Enter' && cellRef.current === event.target) { event.preventDefault(); event.stopPropagation(); event.target.dispatchEvent(new Event('click', { bubbles: true, cancelable: true })); } - if (props.onKeyDown) props.onKeyDown(event); }; return ( @@ -283,7 +289,7 @@ export const Cell = forwardRef( data-clickable={clickable} role={role} tabIndex={tabIndex} - ref={ref} + ref={mergeRefs([ref, cellRef])} {...props} colSpan={spanAllColumns ? 10_000 : props.colSpan} onKeyDown={onKeyDown}