chore(@clayui/core): add focus to table

liferay · Nov 8, 2023 · de324ff · de324ff
1 parent cf82313
commit de324ff
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 4 deletions.
diff --git a/packages/clay-core/src/aria/useFocusWithin.tsx b/packages/clay-core/src/aria/useFocusWithin.tsx
@@ -75,16 +75,34 @@ export function FocusWithinProvider<T extends HTMLElement>({
 type FocusWithinProps = {
 	id: React.Key;
 	disabled: boolean;
+	onFocusChange?: (isFocused: boolean) => void;
 };
 
-export function useFocusWithin({disabled, id}: FocusWithinProps) {
+export function useFocusWithin({
+	disabled,
+	id,
+	onFocusChange: onFocusChanged,
+}: FocusWithinProps) {
 	const {focusId, onFocusChange} = useContext(FocusContext);
 
 	const onFocus = useCallback(
 		function onFocusInner<T>(event: React.FocusEvent<T>) {
 			if (focusId !== id) {
 				event.stopPropagation();
 				onFocusChange(id);
+
+				if (onFocusChanged) {
+					onFocusChanged(true);
+				}
+			}
+		},
+		[focusId]
+	);
+
+	const onBlur = useCallback(
+		function onFocusInner() {
+			if (onFocusChanged) {
+				onFocusChanged(false);
 			}
 		},
 		[focusId]
@@ -98,8 +116,9 @@ export function useFocusWithin({disabled, id}: FocusWithinProps) {
 		}
 
 		return {
+			onBlur,
 			onFocus,
 			tabIndex: focusId === id ? 0 : -1,
 		};
-	}, [focusId, onFocus]);
+	}, [focusId, onFocus, onBlur]);
 }
diff --git a/packages/clay-core/src/table/Cell.tsx b/packages/clay-core/src/table/Cell.tsx
@@ -8,7 +8,7 @@ import Icon from '@clayui/icon';
 import Layout from '@clayui/layout';
 import {Keys} from '@clayui/shared';
 import classNames from 'classnames';
-import React, {useCallback} from 'react';
+import React, {useCallback, useState} from 'react';
 
 import {useFocusWithin} from '../aria';
 import {Scope, useScope} from './ScopeContext';
@@ -104,9 +104,13 @@ export const Cell = React.forwardRef<HTMLTableCellElement, Props>(
 			sortDescriptionId,
 			treegrid,
 		} = useTable();
+
+		const [isFocused, setIsFocused] = useState(false);
+
 		const focusWithinProps = useFocusWithin({
 			disabled: !treegrid,
 			id: keyValue!,
+			onFocusChange: setIsFocused,
 		});
 		const scope = useScope();
 		const {expandable, key, level} = useRow();
@@ -152,6 +156,7 @@ export const Cell = React.forwardRef<HTMLTableCellElement, Props>(
 					[`table-column-text-${textAlign}`]: textAlign,
 					[`text-${align}`]: align,
 					'table-cell-ws-nowrap': !wrap,
+					'table-focus': focusWithinProps.tabIndex === 0 && isFocused,
 					'table-head-title': isHead,
 				})}
 				data-id={

diff --git a/packages/clay-core/src/table/Row.tsx b/packages/clay-core/src/table/Row.tsx
@@ -5,7 +5,7 @@
 
 import {Keys} from '@clayui/shared';
 import classNames from 'classnames';
-import React from 'react';
+import React, {useState} from 'react';
 
 import {useFocusWithin} from '../aria';
 import {ChildrenFunction, Collection} from '../collection';
@@ -85,9 +85,11 @@ function RowInner<T extends Record<string, any>>(
 	outRef: React.Ref<HTMLTableRowElement>
 ) {
 	const {expandedKeys, onExpandedChange, treegrid} = useTable();
+	const [isFocused, setIsFocused] = useState(false);
 	const focusWithinProps = useFocusWithin({
 		disabled: !treegrid,
 		id: keyValue!,
+		onFocusChange: setIsFocused,
 	});
 
 	const ref = useForwardRef(outRef);
@@ -105,6 +107,7 @@ function RowInner<T extends Record<string, any>>(
 			className={classNames(className, {
 				'table-divider': divider,
 				[`table-row-${delimiter}`]: delimiter,
+				'table-focus': focusWithinProps.tabIndex === 0 && isFocused,
 			})}
 			data-id={
 				typeof keyValue === 'number'