diff --git a/.changeset/green-dryers-flow.md b/.changeset/green-dryers-flow.md new file mode 100644 index 00000000000..f2a30486be7 --- /dev/null +++ b/.changeset/green-dryers-flow.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +Add focusPrependedElements prop to useFocusZone, FilteredActionList, and SelectPanel diff --git a/package-lock.json b/package-lock.json index 1f149f43422..9f8b79cb759 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6396,9 +6396,9 @@ } }, "node_modules/@primer/behaviors": { - "version": "1.9.0", - "resolved": "https://registry.npmjs.org/@primer/behaviors/-/behaviors-1.9.0.tgz", - "integrity": "sha512-MIVSZlQGJzas44DZDwo4Dqiev289K918oDl/AcA+zTpQAjp+PrJ0LUxEnrSOapyivLYpRpmSCeF0XPh7NgXpCA==", + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/@primer/behaviors/-/behaviors-1.9.1.tgz", + "integrity": "sha512-wssAE1ezYP3rZjt/dOPju3E7s3wsNkM08QoX33yA6hXUfuXTbGkEKsYnnbLT691/S/sNoZR2GMAkSkIyNDDyJA==", "license": "MIT" }, "node_modules/@primer/css": { @@ -26421,7 +26421,7 @@ "@github/tab-container-element": "^4.8.2", "@lit-labs/react": "1.2.1", "@oddbird/popover-polyfill": "^0.5.2", - "@primer/behaviors": "^1.9.0", + "@primer/behaviors": "^1.9.1", "@primer/live-region-element": "^0.7.1", "@primer/octicons-react": "^19.21.0", "@primer/primitives": "10.x || 11.x", diff --git a/packages/react/package.json b/packages/react/package.json index 674a73e6c47..5bc08e3812c 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -79,7 +79,7 @@ "@github/tab-container-element": "^4.8.2", "@lit-labs/react": "1.2.1", "@oddbird/popover-polyfill": "^0.5.2", - "@primer/behaviors": "^1.9.0", + "@primer/behaviors": "^1.9.1", "@primer/live-region-element": "^0.7.1", "@primer/octicons-react": "^19.21.0", "@primer/primitives": "10.x || 11.x", diff --git a/packages/react/src/FilteredActionList/FilteredActionList.tsx b/packages/react/src/FilteredActionList/FilteredActionList.tsx index fa5164ecc57..90983ec2a75 100644 --- a/packages/react/src/FilteredActionList/FilteredActionList.tsx +++ b/packages/react/src/FilteredActionList/FilteredActionList.tsx @@ -101,6 +101,11 @@ export interface FilteredActionListProps extends Partial { diff --git a/packages/react/src/SelectPanel/SelectPanel.tsx b/packages/react/src/SelectPanel/SelectPanel.tsx index a705ea647a0..112327b846c 100644 --- a/packages/react/src/SelectPanel/SelectPanel.tsx +++ b/packages/react/src/SelectPanel/SelectPanel.tsx @@ -118,6 +118,11 @@ interface SelectPanelBaseProps { */ disableFullscreenOnNarrow?: boolean showSelectAll?: boolean + /** + * Set to true to allow focus to move to elements that are dynamically prepended to the container. + * Default is false. + */ + focusPrependedElements?: boolean } // onCancel is optional with variant=anchored, but required with variant=modal @@ -193,6 +198,7 @@ function Panel({ disableFullscreenOnNarrow, align, showSelectAll = false, + focusPrependedElements, ...listProps }: SelectPanelProps): JSX.Element { const titleId = useId() @@ -884,6 +890,7 @@ function Panel({ }} fullScreenOnNarrow={usingFullScreenOnNarrow} className={clsx(className, classes.FilteredActionList)} + focusPrependedElements={focusPrependedElements} /> {footer ? (
{footer}
diff --git a/packages/react/src/hooks/useFocusZone.ts b/packages/react/src/hooks/useFocusZone.ts index a4e5a7bce4d..94901937564 100644 --- a/packages/react/src/hooks/useFocusZone.ts +++ b/packages/react/src/hooks/useFocusZone.ts @@ -23,6 +23,11 @@ export interface FocusZoneHookSettings extends Omit