@primer/react 38.40.0 → 38.40.1-rc.65ba5ef2b

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @primer/react
 
+## 38.40.1
+
+### Patch Changes
+
+- [#8413](https://github.com/primer/react/pull/8413) [`d4e30ed`](https://github.com/primer/react/commit/d4e30ed186af6ae781b3adcf83278e0c2001a834) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - SelectPanel: Announce the filter input label when focus moves into the panel
+
 ## 38.40.0
 
 ### Minor Changes

package/dist/FilteredActionList/FilteredActionList.js

@@ -96,6 +96,7 @@ function FilteredActionList({ loading = false, placeholderText, filterValue: ext
 		}
 	}, [activeDescendantRef]);
 	const listContainerRefCallback = useCallback((node) => {
+		listRef.current = node;
 		setListContainerElement(node);
 		onListContainerRefChanged === null || onListContainerRefChanged === void 0 || onListContainerRefChanged(node);
 	}, [onListContainerRefChanged]);
@@ -201,7 +202,7 @@ function FilteredActionList({ loading = false, placeholderText, filterValue: ext
 		readInputRef,
 		usingRovingTabindex
 	]);
-	useAnnouncements(items, usingRovingTabindex ? listRef : { current: listContainerElement }, readInputRef, announcementsEnabled, loading, messageText, _PrivateFocusManagement);
+	const onInputFocus = useAnnouncements(items, listRef, readInputRef, announcementsEnabled, loading, messageText, _PrivateFocusManagement, filterValue);
 	useScrollFlash(readScrollContainerRef);
 	const handleSelectAllChange = useCallback((e) => {
 		if (onSelectAllChange) onSelectAllChange(e.target.checked);
@@ -302,6 +303,7 @@ function FilteredActionList({ loading = false, placeholderText, filterValue: ext
 		children: [
 			/*#__PURE__*/ jsx(FilteredActionListInput, {
 				inputRef: appliedInputRef,
+				onInputFocus,
 				value: filterValue,
 				onInputChange,
 				onInputKeyPress,

package/dist/FilteredActionList/FilteredActionListInput.d.ts

@@ -5,6 +5,7 @@ import React from "react";
 interface FilteredActionListInputProps extends Partial<Omit<TextInputProps, 'onChange' | 'onKeyDown'>> {
   inputRef: React.Ref<HTMLInputElement | null>;
   onInputChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onInputFocus?: React.FocusEventHandler<HTMLInputElement>;
   onInputKeyPress?: React.KeyboardEventHandler<HTMLInputElement>;
   onInputKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
   placeholderText?: string;
@@ -17,6 +18,7 @@ declare function FilteredActionListInput({
   inputRef,
   value,
   onInputChange,
+  onInputFocus,
   onInputKeyPress,
   onInputKeyDown,
   placeholderText,
@@ -25,6 +27,7 @@ declare function FilteredActionListInput({
   loading,
   fullScreenOnNarrow,
   className,
+  onFocus,
   ...restTextInputProps
 }: FilteredActionListInputProps): React.JSX.Element;
 //#endregion

package/dist/FilteredActionList/FilteredActionListInput.js

@@ -5,21 +5,23 @@ import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 //#region src/FilteredActionList/FilteredActionListInput.tsx
 function FilteredActionListInput(t0) {
-	const $ = c(28);
+	const $ = c(34);
 	let className;
 	let fullScreenOnNarrow;
 	let inputDescriptionTextId;
 	let inputRef;
 	let listId;
 	let loading;
+	let onFocus;
 	let onInputChange;
+	let onInputFocus;
 	let onInputKeyDown;
 	let onInputKeyPress;
 	let placeholderText;
 	let restTextInputProps;
 	let value;
 	if ($[0] !== t0) {
-		({inputRef, value, onInputChange, onInputKeyPress, onInputKeyDown, placeholderText, listId, inputDescriptionTextId, loading, fullScreenOnNarrow, className, ...restTextInputProps} = t0);
+		({inputRef, value, onInputChange, onInputFocus, onInputKeyPress, onInputKeyDown, placeholderText, listId, inputDescriptionTextId, loading, fullScreenOnNarrow, className, onFocus, ...restTextInputProps} = t0);
 		$[0] = t0;
 		$[1] = className;
 		$[2] = fullScreenOnNarrow;
@@ -27,12 +29,14 @@ function FilteredActionListInput(t0) {
 		$[4] = inputRef;
 		$[5] = listId;
 		$[6] = loading;
-		$[7] = onInputChange;
-		$[8] = onInputKeyDown;
-		$[9] = onInputKeyPress;
-		$[10] = placeholderText;
-		$[11] = restTextInputProps;
-		$[12] = value;
+		$[7] = onFocus;
+		$[8] = onInputChange;
+		$[9] = onInputFocus;
+		$[10] = onInputKeyDown;
+		$[11] = onInputKeyPress;
+		$[12] = placeholderText;
+		$[13] = restTextInputProps;
+		$[14] = value;
 	} else {
 		className = $[1];
 		fullScreenOnNarrow = $[2];
@@ -40,23 +44,36 @@ function FilteredActionListInput(t0) {
 		inputRef = $[4];
 		listId = $[5];
 		loading = $[6];
-		onInputChange = $[7];
-		onInputKeyDown = $[8];
-		onInputKeyPress = $[9];
-		placeholderText = $[10];
-		restTextInputProps = $[11];
-		value = $[12];
+		onFocus = $[7];
+		onInputChange = $[8];
+		onInputFocus = $[9];
+		onInputKeyDown = $[10];
+		onInputKeyPress = $[11];
+		placeholderText = $[12];
+		restTextInputProps = $[13];
+		value = $[14];
 	}
 	let t1;
-	if ($[13] !== className || $[14] !== fullScreenOnNarrow) {
-		t1 = clsx(className, { [FilteredActionList_module_css_default.FullScreenTextInput]: fullScreenOnNarrow });
-		$[13] = className;
-		$[14] = fullScreenOnNarrow;
-		$[15] = t1;
-	} else t1 = $[15];
+	if ($[15] !== onFocus || $[16] !== onInputFocus) {
+		t1 = (event) => {
+			var _onInputFocus, _onFocus;
+			(_onInputFocus = onInputFocus) === null || _onInputFocus === void 0 || _onInputFocus(event);
+			(_onFocus = onFocus) === null || _onFocus === void 0 || _onFocus(event);
+		};
+		$[15] = onFocus;
+		$[16] = onInputFocus;
+		$[17] = t1;
+	} else t1 = $[17];
 	let t2;
-	if ($[16] !== inputDescriptionTextId || $[17] !== inputRef || $[18] !== listId || $[19] !== loading || $[20] !== onInputChange || $[21] !== onInputKeyDown || $[22] !== onInputKeyPress || $[23] !== placeholderText || $[24] !== restTextInputProps || $[25] !== t1 || $[26] !== value) {
-		t2 = /*#__PURE__*/ jsx("div", {
+	if ($[18] !== className || $[19] !== fullScreenOnNarrow) {
+		t2 = clsx(className, { [FilteredActionList_module_css_default.FullScreenTextInput]: fullScreenOnNarrow });
+		$[18] = className;
+		$[19] = fullScreenOnNarrow;
+		$[20] = t2;
+	} else t2 = $[20];
+	let t3;
+	if ($[21] !== inputDescriptionTextId || $[22] !== inputRef || $[23] !== listId || $[24] !== loading || $[25] !== onInputChange || $[26] !== onInputKeyDown || $[27] !== onInputKeyPress || $[28] !== placeholderText || $[29] !== restTextInputProps || $[30] !== t1 || $[31] !== t2 || $[32] !== value) {
+		t3 = /*#__PURE__*/ jsx("div", {
 			className: FilteredActionList_module_css_default.Header,
 			"data-component": "FilteredActionList.Header",
 			children: /*#__PURE__*/ jsx(TextInput_default, {
@@ -66,6 +83,7 @@ function FilteredActionListInput(t0) {
 				color: "fg.default",
 				value,
 				onChange: onInputChange,
+				onFocus: t1,
 				onKeyPress: onInputKeyPress,
 				onKeyDown: onInputKeyDown,
 				placeholder: placeholderText,
@@ -77,24 +95,25 @@ function FilteredActionListInput(t0) {
 				"aria-describedby": inputDescriptionTextId,
 				loaderPosition: "leading",
 				loading,
-				className: t1,
+				className: t2,
 				...restTextInputProps
 			})
 		});
-		$[16] = inputDescriptionTextId;
-		$[17] = inputRef;
-		$[18] = listId;
-		$[19] = loading;
-		$[20] = onInputChange;
-		$[21] = onInputKeyDown;
-		$[22] = onInputKeyPress;
-		$[23] = placeholderText;
-		$[24] = restTextInputProps;
-		$[25] = t1;
-		$[26] = value;
-		$[27] = t2;
-	} else t2 = $[27];
-	return t2;
+		$[21] = inputDescriptionTextId;
+		$[22] = inputRef;
+		$[23] = listId;
+		$[24] = loading;
+		$[25] = onInputChange;
+		$[26] = onInputKeyDown;
+		$[27] = onInputKeyPress;
+		$[28] = placeholderText;
+		$[29] = restTextInputProps;
+		$[30] = t1;
+		$[31] = t2;
+		$[32] = value;
+		$[33] = t3;
+	} else t3 = $[33];
+	return t3;
 }
 //#endregion
 export { FilteredActionListInput };

package/dist/FilteredActionList/useAnnouncements.js

@@ -2,12 +2,20 @@ import { useCallback, useEffect, useRef } from "react";
 import { announce } from "@primer/live-region-element";
 //#region src/FilteredActionList/useAnnouncements.tsx
 const delayMs = 500;
-const useFirstRender = () => {
-	const firstRender = useRef(true);
-	useEffect(() => {
-		firstRender.current = false;
-	}, []);
-	return firstRender.current;
+const getInputLabel = (input) => {
+	var _input$labels;
+	if (!input) return;
+	const labelledBy = input.getAttribute("aria-labelledby");
+	if (labelledBy) {
+		const label = labelledBy.split(/\s+/).map((id) => {
+			var _input$ownerDocument$;
+			return (_input$ownerDocument$ = input.ownerDocument.getElementById(id)) === null || _input$ownerDocument$ === void 0 ? void 0 : _input$ownerDocument$.textContent.trim();
+		}).filter(Boolean).join(" ");
+		if (label) return label;
+	}
+	const ariaLabel = input.getAttribute("aria-label");
+	if (ariaLabel) return ariaLabel;
+	return Array.from((_input$labels = input.labels) !== null && _input$labels !== void 0 ? _input$labels : []).map((label) => label.textContent.trim()).filter(Boolean).join(" ") || void 0;
 };
 const getItemWithActiveDescendant = (listRef, items) => {
 	const listElement = listRef.current;
@@ -22,52 +30,65 @@ const getItemWithActiveDescendant = (listRef, items) => {
 		selected: activeItem === null || activeItem === void 0 ? void 0 : activeItem.selected
 	};
 };
-const useAnnouncements = (items, listContainerRef, inputRef, enabled = true, loading = false, message, focusManagement) => {
+const getAnnouncementState = (items, loading, message, filterValue) => JSON.stringify({
+	items: items.map((item, index) => {
+		var _ref, _item$id;
+		return [
+			(_ref = (_item$id = item.id) !== null && _item$id !== void 0 ? _item$id : item.text) !== null && _ref !== void 0 ? _ref : index,
+			item.text,
+			item.selected
+		];
+	}),
+	loading,
+	message,
+	filterValue
+});
+const useAnnouncements = (items, listContainerRef, inputRef, enabled = true, loading = false, message, focusManagement, filterValue) => {
 	const usingRovingTabindex = focusManagement === "roving-tabindex";
 	const liveRegion = document.querySelector("live-region");
 	const selectedItems = items.filter((item) => item.selected).length;
 	const announce$1 = useCallback((...args) => {
 		if (enabled) return announce(...args);
 	}, [enabled]);
-	useEffect(function announceInitialFocus() {
-		const focusHandler = () => {
-			if (usingRovingTabindex) {
-				const announcementText = `${items.length} item${items.length > 1 ? "s" : ""} available, ${selectedItems} selected.`;
-				announce$1(announcementText, {
-					delayMs,
-					from: liveRegion ? liveRegion : void 0
-				});
-			} else window.requestAnimationFrame(() => {
-				const activeItem = getItemWithActiveDescendant(listContainerRef, items);
-				if (!activeItem) return;
-				const { index, text, selected } = activeItem;
-				const announcementText = [
-					`Focus on filter text box and list of items`,
-					`Focused item: ${text}`,
-					`${selected ? "selected" : "not selected"}`,
-					`${index + 1} of ${items.length}`
-				].join(", ");
-				announce$1(announcementText, {
-					delayMs,
-					from: liveRegion ? liveRegion : void 0
-				});
+	const onInputFocus = useCallback(() => {
+		if (usingRovingTabindex) {
+			const announcementText = `${items.length} item${items.length > 1 ? "s" : ""} available, ${selectedItems} selected.`;
+			announce$1(announcementText, {
+				delayMs,
+				from: liveRegion ? liveRegion : void 0
+			});
+			return;
+		}
+		window.setTimeout(() => {
+			const activeItem = getItemWithActiveDescendant(listContainerRef, items);
+			if (!activeItem) return;
+			const { index, text, selected } = activeItem;
+			const inputLabel = getInputLabel(inputRef.current);
+			const announcementText = [
+				inputLabel ? `${inputLabel}, filter text box and list of items` : "Focus on filter text box and list of items",
+				`Focused item: ${text}`,
+				`${selected ? "selected" : "not selected"}`,
+				`${index + 1} of ${items.length}`
+			].join(", ");
+			announce$1(announcementText, {
+				delayMs,
+				from: liveRegion ? liveRegion : void 0
 			});
-		};
-		const inputElement = inputRef.current;
-		inputElement === null || inputElement === void 0 || inputElement.addEventListener("focus", focusHandler);
-		return () => inputElement === null || inputElement === void 0 ? void 0 : inputElement.removeEventListener("focus", focusHandler);
+		});
 	}, [
-		listContainerRef,
+		announce$1,
 		inputRef,
 		items,
+		listContainerRef,
 		liveRegion,
-		announce$1,
-		usingRovingTabindex,
-		selectedItems
+		selectedItems,
+		usingRovingTabindex
 	]);
-	const isFirstRender = useFirstRender();
+	const announcementState = getAnnouncementState(items, loading, message, filterValue);
+	const previousAnnouncementState = useRef(announcementState);
 	useEffect(function announceListUpdates() {
-		if (isFirstRender) return;
+		if (previousAnnouncementState.current === announcementState) return;
+		previousAnnouncementState.current = announcementState;
 		liveRegion === null || liveRegion === void 0 || liveRegion.clear();
 		if (items.length === 0 && !loading) {
 			announce$1(`${message === null || message === void 0 ? void 0 : message.title}. ${message === null || message === void 0 ? void 0 : message.description}`, { delayMs });
@@ -96,7 +117,7 @@ const useAnnouncements = (items, listContainerRef, inputRef, enabled = true, loa
 		});
 	}, [
 		announce$1,
-		isFirstRender,
+		announcementState,
 		items,
 		listContainerRef,
 		liveRegion,
@@ -106,6 +127,7 @@ const useAnnouncements = (items, listContainerRef, inputRef, enabled = true, loa
 		loading,
 		selectedItems
 	]);
+	return onInputFocus;
 };
 //#endregion
 export { useAnnouncements };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.40.0",
+  "version": "38.40.1-rc.65ba5ef2b",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",