Merge pull request #5714 from matuzalemsteles/table-focus

chore(@clayui/core): add focus to table
liferay · Nov 20, 2023 · ecf8214 · ecf8214
2 parents 6b42508 + ca74d74
commit ecf8214
Show file tree

Hide file tree

Showing 5 changed files with 34 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
@@ -9,7 +9,7 @@ import Layout from '@clayui/layout';
 import LoadingIndicator from '@clayui/loading-indicator';
 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';
@@ -105,9 +105,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, isLoading, key, lazy, level, loadMore} = useRow();
@@ -153,6 +157,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
@@ -107,9 +107,11 @@ function RowInner<T extends Record<string, any>>(
 ) {
 	const {expandedKeys, onExpandedChange, onLoadMore, treegrid} = useTable();
 	const {insert} = useBody();
+	const [isFocused, setIsFocused] = useState(false);
 	const focusWithinProps = useFocusWithin({
 		disabled: !treegrid,
 		id: keyValue!,
+		onFocusChange: setIsFocused,
 	});
 
 	const [isLoading, setIsLoading] = useState(false);
@@ -155,6 +157,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'

diff --git a/packages/clay-css/src/scss/_license-text.scss b/packages/clay-css/src/scss/_license-text.scss
@@ -1,5 +1,5 @@
 /**
- * Clay 3.104.0
+ * Clay 3.106.1
  *
  * SPDX-FileCopyrightText: © 2020 Liferay, Inc. <https://liferay.com>
  * SPDX-FileCopyrightText: © 2020 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>

diff --git a/packages/clay-css/src/scss/variables/_tables.scss b/packages/clay-css/src/scss/variables/_tables.scss
@@ -390,7 +390,9 @@ $c-table-hover: map-deep-merge(
 $c-tr-table-focus: () !default;
 $c-tr-table-focus: map-deep-merge(
 	(
+		outline: 0,
 		td: (
+			outline: 0,
 			before: (
 				box-shadow: (
 					inset 0 0.2rem 0 0 rgba($primary, 0.25),
@@ -442,6 +444,7 @@ $c-tr-table-focus: map-deep-merge(
 $c-td-table-focus: () !default;
 $c-td-table-focus: map-deep-merge(
 	(
+		outline: 'none',
 		box-shadow: clay-enable-shadows($component-focus-inset-box-shadow),
 	),
 	$c-td-table-focus