Bernardo Sunderhus

This commit introduces a **bug fix** to prevent the `ArrowRight` key from inadvertently opening submenus when navigating within the **`MenuGrid` component**. A new `shouldOpenOnArrowRight` property was added to `MenuListContextValue` in the **`react-menu` package**, allowing `MenuGrid` to explicitly opt out of this behavior by setting the context value to `false` via `useMenuGridContextValues_unstable`. This **enhances keyboard accessibility** for `MenuGrid` users by ensuring `ArrowRight` correctly moves focus within the grid without triggering submenus, and includes a new Cypress test to validate the fix. The `useMenuTrigger_unstable` hook was updated to respect this new context property, providing a general mechanism for controlling `ArrowRight` submenu behavior.

This commit delivers a **bug fix** for the **`@fluentui-react-menu-grid-preview`** package, resolving an issue where submenus would prematurely close when a user moved their mouse from the trigger to the submenu popover. The fix involves correctly providing the `MenuListContext` within the `MenuGrid` component by wrapping `MenuGridContextProvider` with `MenuListProvider` in `renderMenuGrid.tsx` and updating `useMenuGridContextValues_unstable` to supply the `menuList` context. This **improves the user experience** by ensuring stable submenu hover behavior and is validated by **new Cypress tests** specifically targeting this interaction. The API documentation for `MenuGridContextValues` was also updated to reflect the inclusion of `MenuListContextValue`.

This commit introduces a **new capability** to the **`@fluentui-react-tag-picker`** component by adding a `disableAutoFocus` prop. This prop allows developers to **control the auto-focus behavior** of the `TagPicker`'s input field upon initial render or when the component gains focus, preventing unwanted focus shifts. The `disableAutoFocus` prop is added to `TagPickerProps` and integrated into the `useTagPicker_unstable` hook, with a deprecated version also present on `TagPickerListProps`. This **feature enhancement** provides greater flexibility for integrating the `TagPicker` into diverse UI contexts, and its usage is reflected in updated API documentation and a story example.

This commit performs a **style adjustment** within the **`react-dialog`** package by **removing the `boxShadow` property** from the `DialogSurfaceMotion` component's keyframe animation definition. Specifically, the `boxShadow` style was removed from the `packages/react-components/react-dialog/library/src/components/DialogSurfaceMotion.ts` file. This change refines the visual presentation of dialog surfaces, ensuring they no longer display a shadow during motion, which impacts the overall aesthetic of dialogs rendered by the Fluent UI React components.

This commit introduces a **bug fix** to the **Fluent UI React TagPicker component**, specifically addressing an unexpected interaction behavior. It modifies the `selectOption` logic within `useTagPicker.ts` to prevent an already selected option from being toggled off when re-selected. This ensures that re-clicking an item only deselects it if the event originates from within the tag picker group, significantly improving the **predictability and user experience** of the `TagPicker` by preventing unintended deselection.

This commit **re-introduces the active state style** for the **`TreeItemLayout`** component within the **`react-tree`** package. This **maintenance** task ensures that tree items display the correct visual feedback when actively interacted with, restoring a previously intended visual state. The change involved reordering the `:active` state styles within the `useRootBaseStyles` constant in `useTreeItemLayoutStyles.styles.ts` to correctly apply the styling. This improves the **user experience** and visual consistency of the tree component by providing clear interaction cues.

This commit delivers a **bug fix** for the **`react-list` package**, specifically targeting the `ListItem` component's accessibility integration. It modifies the `useListItem_unstable` hook to correctly merge **external Tabster attributes** with internal ones, ensuring proper attribute order and preventing unintended overwrites or omissions. This resolves an issue where externally provided accessibility properties might have been ignored or incorrectly applied, thereby improving the **accessibility and robustness** of list items within applications.

This commit delivers a **bug fix** for the **`react-tree` component** within `@fluentui/react-components`, specifically addressing an issue with keyboard navigation. It ensures that the roving tab index is correctly initialized and updated for `TreeItem` components, particularly when a tree transitions from an empty state to being populated with items. The fix, implemented in `useTreeItem_unstable`, guarantees proper `tabindex` management upon `TreeItem` mounting, preventing accessibility regressions. A new test case has been added to `Tree.cy.tsx` to validate this behavior, improving the overall **keyboard accessibility** of dynamic tree structures.

This commit delivers a **bug fix** addressing a **styling regression** within the **`react-tag-picker`** component, specifically impacting the `TagPickerOption`. It resolves an issue introduced by a previous change (referenced by #33689) that caused incorrect rendering of the option. The fix involves **refactoring the styling implementation** for `TagPickerOption` in `useTagPickerOptionStyles.styles.ts` by introducing `makeResetStyles` and separating style hooks. This ensures the `TagPickerOption` component now displays correctly, restoring its intended visual appearance and resolving the regression.

This commit delivers a **bug fix** for the **`react-tree` component**, addressing an issue where interactive actions within tree items would incorrectly lose visibility. Specifically, actions would disappear when a user, navigating via keyboard, subsequently hovered their mouse over a focused tree item. The fix modifies the `setActionsInvisibleIfNotFromSubtree` function within `packages/react-components/react-tree/library/src/components/TreeItemLayout/useTreeItemLayout.tsx` to prevent actions from hiding during these mixed keyboard and mouse interactions. A new Cypress test has been added to the `Tree` component to ensure this behavior is correctly maintained, significantly improving the **usability and accessibility** for users of the `react-tree`.

This commit introduces a **single-line layout** option for the **`TagPicker` component** within the `@fluentui/react-tag-picker` package, enabling tags to display compactly on one line with overflow handling. This **new capability** involves significant **styling adjustments** to `useTagPickerControlStyles_unstable` for the `TagPickerControl` and the addition of `TagPickerContextValue` and `useTagPickerContext_unstable` for internal context management. The `@fluentui/react-components` package is updated to re-export these new API members, ensuring broader availability. New storybook examples have been added to demonstrate the single-line behavior and overflow handling, enhancing the `TagPicker`'s display flexibility for space-constrained user interfaces.

This commit introduces a **new `navigationMode` property** to the **`Tree` and `FlatTree` components** within the `react-tree` package, providing a **new capability** to control keyboard navigation behavior. Specifically, it enables a 'treegrid' mode that allows arrow keys to navigate seamlessly between tree items and their embedded actions. This enhancement impacts core navigation logic within hooks like `useTreeNavigation`, `useFlatTreeNavigation`, and `useTreeItem`, offering greater flexibility for accessibility and user experience in complex tree structures. The API documentation has been updated to reflect this property, and new stories demonstrate its functionality.

This commit delivers a **bug fix** for the **`TagPickerOption` component** within the **`@fluentui/react-tag-picker` package**, addressing an issue where the `secondaryContent` was not displaying correctly. The fix involves applying `caption1` typography styles to the `secondaryContent` slot and reordering style application within the `useTagPickerOptionStyles_unstable` hook. This ensures that the `secondaryContent` renders as expected, improving the visual consistency and functionality of the **TagPicker** component.

This commit introduces the **`TreeRootReset` component** within the **`@fluentui/react-tree`** package, providing a **new capability** to treat a subtree as a new root tree. This enhancement allows for more flexible and robust **nested tree structures** in applications. To support this, the `useRovingTabIndexes` hook was updated to correctly identify the tree root for proper focus management, addressing a **bug fix** related to accessibility. The new component is also exported from `@fluentui/react-components`, with comprehensive Cypress tests and API documentation updates ensuring its stability and discoverability.

This commit **improves the documentation examples** for the **`react-dialog`** component by **reordering buttons** within various dialog stories. Specifically, it places the primary action button before the secondary close button in all affected `Dialog*.stories.tsx` files. This **documentation enhancement** ensures that the visual hierarchy of actions in the Storybook examples aligns with common user experience patterns, making the examples clearer and more intuitive for developers. The change affects only the **Storybook stories** and has no impact on the runtime behavior or API of the `react-dialog` component itself.