Merge pull request #2189 from matuzalemsteles/issue-1987

feat(@clayui/shared): add experimental useFocusManagement hook

Author: matuzalemsteles

packages/clay-autocomplete/src/Item.tsx

@@ -11,6 +11,8 @@ import React from 'react';
 interface IProps extends React.ComponentProps<typeof ClayDropDown.Item> {
 	forwardRef?: React.Ref<HTMLLIElement>;
 
+	innerRef?: React.Ref<HTMLAnchorElement>;
+
 	/**
 	 * Match is the string that will be compared with value.
 	 */
@@ -27,14 +29,20 @@ const optionsFuzzy = {post: '</strong>', pre: '<strong>'};
 
 const ClayAutocompleteItem: React.FunctionComponent<IProps> = ({
 	forwardRef,
+	innerRef,
 	match = '',
 	value,
 	...otherProps
 }: IProps) => {
 	const fuzzyMatch = fuzzy.match(match, value, optionsFuzzy);
 
 	return (
-		<ClayDropDown.Item {...otherProps} ref={forwardRef}>
+		<ClayDropDown.Item
+			{...otherProps}
+			innerRef={innerRef}
+			ref={forwardRef}
+			tabIndex={-1}
+		>
 			{match && fuzzyMatch ? (
 				<div
 					dangerouslySetInnerHTML={{

packages/clay-autocomplete/src/__tests__/__snapshots__/index.tsx.snap

@@ -51,6 +51,7 @@ exports[`ClayAutocomplete renders Item with matches values 1`] = `
   >
     <span
       class="dropdown-item"
+      tabindex="-1"
     >
       Bar
     </span>

packages/clay-autocomplete/stories/index.tsx

@@ -9,11 +9,15 @@ import ClayDropDown from '@clayui/drop-down';
 import React, {useEffect, useRef, useState} from 'react';
 import {FetchPolicy, NetworkStatus} from '@clayui/data-provider/src/types';
 import {storiesOf} from '@storybook/react';
-import {useDebounce, useKeyHandlerForList} from '@clayui/shared';
+import {useDebounce, useFocusManagement} from '@clayui/shared';
 import {useResource} from '@clayui/data-provider';
 
 import '@clayui/css/lib/css/atlas.css';
 
+const TAB_KEY_CODE = 9;
+const ARROW_UP_KEY_CODE = 38;
+const ARROW_DOWN_KEY_CODE = 40;
+
 const LoadingWithDebounce = ({
 	loading,
 	networkStatus,
@@ -65,56 +69,58 @@ const AutocompleteBasic = () => {
 };
 
 const AutocompleteWithKeyboardFunctionality = () => {
-	const activeListItemRef = useRef<HTMLLIElement>(null);
-	const inputRef = useRef<HTMLInputElement>(null);
+	const inputRef = useRef<HTMLInputElement | null>(null);
 	const [value, setValue] = useState('');
-	const [activeIndex, setActiveIndex] = useState(0);
-
 	const [active, setActive] = useState(!!value);
+	const focusManager = useFocusManagement();
 
 	const filteredItems = ['one', 'two', 'three', 'four', 'five'].filter(item =>
 		item.match(value)
 	);
 
-	const keyHandler = useKeyHandlerForList({
-		activeListItemRef,
-		index: activeIndex,
-		inputRef,
-		onIndexChange: setActiveIndex,
-		onIndexSelect: (index: number) => setValue(filteredItems[index]),
-		totalItems: filteredItems.length,
-	});
+	const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+		const {keyCode, shiftKey} = event;
+
+		if (
+			keyCode === ARROW_DOWN_KEY_CODE ||
+			(keyCode === TAB_KEY_CODE && !shiftKey)
+		) {
+			event.preventDefault();
+			focusManager.focusNext();
+		} else if (
+			keyCode === ARROW_UP_KEY_CODE ||
+			(keyCode === TAB_KEY_CODE && shiftKey)
+		) {
+			event.preventDefault();
+			focusManager.focusPrevious();
+		}
+	};
 
 	useEffect(() => {
 		setActive(!!value);
 	}, [value]);
 
-	useEffect(() => {
-		setActiveIndex(0);
-	}, [active]);
-
 	return (
-		<ClayAutocomplete>
+		<ClayAutocomplete onKeyDown={onKeyDown}>
 			<ClayAutocomplete.Input
 				onChange={(event: any) => setValue(event.target.value)}
-				onKeyDown={keyHandler}
-				ref={inputRef}
+				ref={ref => {
+					focusManager.createScope(ref, 'input');
+					inputRef.current = ref;
+				}}
 				value={value}
 			/>
 
 			<ClayAutocomplete.DropDown active={active} onSetActive={setActive}>
 				<ClayDropDown.ItemList>
 					{filteredItems.map((item, i) => (
 						<ClayAutocomplete.Item
-							active={i === activeIndex}
+							innerRef={ref =>
+								focusManager.createScope(ref, `item${i}`, true)
+							}
 							key={item}
 							match={value}
 							onClick={() => setValue(item)}
-							ref={
-								activeIndex === i
-									? activeListItemRef
-									: undefined
-							}
 							value={item}
 						/>
 					))}

packages/clay-button/src/Button.tsx

@@ -42,38 +42,44 @@ interface IProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 	small?: boolean;
 }
 
-interface IClayButton extends React.FunctionComponent<IProps> {
-	Group: typeof ButtonGroup;
-}
+type Button = React.ForwardRefExoticComponent<
+	IProps & React.RefAttributes<HTMLButtonElement>
+> & {Group: typeof ButtonGroup};
 
-const ClayButton: IClayButton = ({
-	block,
-	borderless,
-	children,
-	className,
-	displayType = 'primary',
-	monospaced,
-	outline,
-	small,
-	type = 'button',
-	...otherProps
-}: IProps) => (
-	<button
-		className={classNames(className, 'btn', {
-			'btn-block': block,
-			'btn-monospaced': monospaced,
-			'btn-outline-borderless': borderless,
-			'btn-sm': small,
-			[`btn-${displayType}`]: displayType && !outline && !borderless,
-			[`btn-outline-${displayType}`]:
-				displayType && (outline || borderless),
-		})}
-		type={type}
-		{...otherProps}
-	>
-		{children}
-	</button>
-);
+const ClayButton = React.forwardRef(
+	(
+		{
+			block,
+			borderless,
+			children,
+			className,
+			displayType = 'primary',
+			monospaced,
+			outline,
+			small,
+			type = 'button',
+			...otherProps
+		}: IProps,
+		ref
+	) => (
+		<button
+			className={classNames(className, 'btn', {
+				'btn-block': block,
+				'btn-monospaced': monospaced,
+				'btn-outline-borderless': borderless,
+				'btn-sm': small,
+				[`btn-${displayType}`]: displayType && !outline && !borderless,
+				[`btn-outline-${displayType}`]:
+					displayType && (outline || borderless),
+			})}
+			ref={ref}
+			type={type}
+			{...otherProps}
+		>
+			{children}
+		</button>
+	)
+) as Button;
 
 ClayButton.Group = ButtonGroup;
 

packages/clay-drop-down/src/DropDownWithBasicItems.tsx

@@ -6,6 +6,7 @@
 
 import ClayDropDown from './DropDown';
 import React, {useState} from 'react';
+import {useFocusManagement} from '@clayui/shared';
 
 interface IItem {
 	active?: boolean;
@@ -31,23 +32,49 @@ interface IProps {
 	spritemap?: string;
 }
 
+const TAB_KEY_CODE = 9;
+const ARROW_UP_KEY_CODE = 38;
+const ARROW_DOWN_KEY_CODE = 40;
+
 export const ClayDropDownWithBasicItems: React.FunctionComponent<IProps> = ({
 	items,
 	spritemap,
 	trigger,
 }: IProps) => {
 	const [active, setActive] = useState(false);
+	const focusManager = useFocusManagement();
 
 	const hasRightSymbols = !!items.find(item => item.symbolRight);
 	const hasLeftSymbols = !!items.find(item => item.symbolLeft);
 
+	const onKeyDown = (event: React.KeyboardEvent<any>) => {
+		const {keyCode, shiftKey} = event;
+
+		if (
+			keyCode === ARROW_DOWN_KEY_CODE ||
+			(keyCode === TAB_KEY_CODE && !shiftKey)
+		) {
+			event.preventDefault();
+			focusManager.focusNext();
+		} else if (
+			keyCode === ARROW_UP_KEY_CODE ||
+			(keyCode === TAB_KEY_CODE && shiftKey)
+		) {
+			event.preventDefault();
+			focusManager.focusPrevious();
+		}
+	};
+
 	return (
 		<ClayDropDown
 			active={active}
 			hasLeftSymbols={hasLeftSymbols}
 			hasRightSymbols={hasRightSymbols}
 			onActiveChange={(newVal: boolean) => setActive(newVal)}
-			trigger={trigger}
+			onKeyDown={onKeyDown}
+			trigger={React.cloneElement(trigger, {
+				ref: (ref: any) => focusManager.createScope(ref, 'trigger'),
+			})}
 		>
 			<ClayDropDown.ItemList>
 				{items.map((item: IItem, i: number) => {
@@ -57,6 +84,9 @@ export const ClayDropDownWithBasicItems: React.FunctionComponent<IProps> = ({
 
 					return (
 						<ClayDropDown.Item
+							innerRef={(ref: HTMLLinkElement) =>
+								focusManager.createScope(ref, `item${i}`, true)
+							}
 							key={i}
 							spritemap={spritemap}
 							{...item}

packages/clay-drop-down/src/Item.tsx

@@ -27,6 +27,8 @@ interface IProps
 	 */
 	href?: string;
 
+	innerRef?: React.Ref<any>;
+
 	/**
 	 * Path to icon spritemap from clay-css.
 	 */
@@ -50,6 +52,7 @@ const ClayDropDownItem: React.FunctionComponent<IProps> = ({
 	disabled,
 	forwardRef,
 	href,
+	innerRef,
 	onClick,
 	spritemap,
 	symbolLeft,
@@ -69,6 +72,7 @@ const ClayDropDownItem: React.FunctionComponent<IProps> = ({
 				})}
 				href={href}
 				onClick={onClick}
+				ref={innerRef}
 			>
 				{symbolLeft && (
 					<span className="dropdown-item-indicator-start">

packages/clay-shared/src/index.tsx

@@ -8,3 +8,4 @@ export {ClayPortal} from './Portal';
 export {useKeyHandlerForList} from './useKeyHandlerForList';
 export {useDebounce} from './useDebounce';
 export {useTransitionHeight} from './useTransitionHeight';
+export {useFocusManagement} from './useFocusManagement';