Valentyna

This commit introduces a **new feature** to the **`react-calendar-compat`** package, significantly enhancing keyboard navigation within the **`CalendarDayGrid`** component. Users can now seamlessly navigate to the next date using arrow keys, improving accessibility and overall user experience. The implementation updates the internal arrow navigation group to utilize a `grid-linear` axis for more intuitive movement across the calendar grid. Comprehensive test cases have been added to `CalendarDayGrid.test.tsx` to ensure the correct behavior of this new navigation, including various boundary conditions.

This commit introduces a **new feature** to the **`react-calendar-compat` package**, enabling **reverse date selection** within the `CalendarMultiDayView` component. It modifies the `getDateRangeArray` utility to correctly handle negative `daysToSelectInDayView` values, allowing date ranges to be selected backward from a specified end date. This enhancement provides greater flexibility for users when selecting date ranges. The change includes new unit tests for the updated **date math utilities**, a storybook example demonstrating the new functionality, and **visual regression tests** to ensure the UI behaves as expected.

This commit introduces a **bug fix** for the **`@fluentui/priority-overflow`** package, resolving an issue where the `overflowMenuSize` was not correctly included in the `occupiedSize` calculation, leading to improper overflow behavior. To facilitate this, a **new feature** was added to the **`@fluentui/react-overflow`** package: a `hasHiddenItems` prop for the `Overflow` component and an option for the `useOverflowContainer` hook. This allows consumers to explicitly indicate when items are initially hidden, ensuring the `createOverflowManager` accurately accounts for the overflow menu's space. The change improves the reliability of overflow components across Fluent UI, with updated API documentation and a `BreadcrumbOverflowExample` story demonstrating its usage.

This commit delivers a **bug fix** for the **`react-datepicker-compat`** component, resolving an issue where clicking the date picker's icon would inadvertently trigger the `useOnClickOutside` hook. Previously, this interaction could cause the date picker to immediately close or fail to open correctly after an icon click. The fix involves adding `ev.preventDefault()` to the `onIconClick` handler within `useDatePicker.tsx`, preventing the default event behavior from interfering with the picker's state. This ensures that **clicking the date picker icon** now functions as expected, providing a more reliable user experience for the **date picker component**.

This commit **improves the developer experience** for the **`@fluentui-react-popover` package** by **updating documentation**. Specifically, it adds a direct link to comprehensive positioning documentation within the JSDoc comment for the `positioning` prop in `PopoverProps` located in `Popover.types.ts`. This **documentation update** ensures that developers can easily access relevant information about how to configure popover positioning directly from their IDEs or generated API docs, streamlining the development process.

This commit performs a **documentation update** for the **`@fluentui/react-color-picker`** package. It specifically **removes a line of text** from the component's "preview stage" information, as indicated by the changelog entry `change/@fluentui-react-color-picker-874b61c9-eeae-4d2e-a3a1-a8220e5a4154.json`. This is a **documentation maintenance** task aimed at improving the clarity and accuracy of the `react-color-picker` component's usage guidelines for developers.

This commit provides a **bug fix** for the **`react-calendar-compat`** package, specifically addressing an **accessibility issue** within the `CalendarMonth` component. It corrects the `headerAriaLabelFormatString` used by the `getYearStrings` utility, changing it from `yearPickerHeaderAriaLabel` to `monthPickerHeaderAriaLabel`. This ensures that screen readers provide the correct contextual `aria-label` when users are interacting with the year selection header, thereby improving the overall **user experience and accessibility** of the calendar component.

This commit provides a **documentation fix** within the **`react-calendar-compat`** package, specifically addressing an issue in the `CalendarMultiDayView.stories.tsx` example. It corrects how options are displayed in a dropdown within the **`CalendarMultiDayView`** story by ensuring the option's value is properly rendered as children of the `Dropdown.Option` component. This **maintenance** change improves the accuracy and functionality of the component's usage example, making the storybook documentation more reliable for developers.

This commit introduces comprehensive **keyboard accessibility** for the **resizable `Drawer` component** within the **`react-drawer`** package. It enables users to adjust the drawer's size through various methods, including **arrow key adjustments**, a dedicated **input field with validation** for setting width, and a **dialog for precise width input**. This **new feature** significantly enhances the component's usability and accessibility, allowing for more robust interaction without relying solely on mouse input, as demonstrated in the `DrawerResizable.stories.tsx` story file.

This commit introduces **HEX8 color code support** to the **`react-color-picker`** component, enabling the use of 8-digit hexadecimal values that include an alpha channel. It also resolves a **bug** where the alpha channel was not properly synchronized when the hex color value was modified. These **enhancements** improve the accuracy and flexibility of color input, particularly within the `Default` story example. The changes involve updating the HEX color regex, adjusting input width, and ensuring alpha channel synchronization when the hex value changes in `ColorPickerDefault.stories.tsx`.

This commit **fixes** an issue in the **`ColorArea` component** within the **`@fluentui-react-color-picker` package** by introducing **touch event support**. It refactors the event handling logic in `useColorArea.ts` and `getCoordinates.ts` to utilize `PointerEvent` instead of `MouseEvent`, updating types and tests accordingly. This **enhancement** significantly improves the **usability** and **accessibility** of the color picker for users interacting via touch-enabled devices, ensuring a more consistent experience across input methods.

This commit **enhances the `react-drawer` component's documentation** by updating the `DrawerResizable` story. It **replaces the direct drag-to-resize functionality with a new dialog-based input** for precisely setting the drawer's width. This **story enhancement** improves the interactive examples within `DrawerResizable.stories.tsx`, offering developers a more controlled way to test and understand the component's resizing behavior.

This commit **enhances the documentation** for the **`react-badge` component** by introducing a new Storybook example. It adds a dedicated story, `BadgeColorVsAppearance.stories.tsx`, to visually demonstrate the various combinations and interactions between the `Badge` component's `color` and `appearance` properties. This **new example** provides clearer guidance for developers on how to effectively style badges, improving the overall usability of the component's documentation. Additionally, a minor reordering of appearance types was made in `BadgeAppearance.stories.tsx` for consistency.

This commit introduces a **fix** to the **`@fluentui/react-tags`** package, specifically enhancing the **`Tag` component**. It **increases the clickable area** of `extra-small` tags by 2 pixels from the top and bottom, improving their interactive target size. This adjustment, implemented within the `useRootStyles` function in `useTagStyles.styles.ts`, significantly enhances the **accessibility** and **user experience** for users interacting with these smaller tag elements.

This commit **fixes a usability issue** in the **`react-drawer` component** by **increasing the target size for its resizable `Drawer`**. It specifically **widens the resizer element** and adds a pseudo-element for a visual border, making it easier for users to interact with and resize the drawer. This **usability improvement** ensures a more forgiving and intuitive experience for users of the `react-drawer` component within the `react-components` package.

This commit implements a **design fix** for the **`ColorSwatch`** component within the **`react-swatch-picker`** package. It specifically **adjusts the styling of the selected state**, particularly for small and extra-small sizes, to improve its visual appearance. The changes are applied in `useColorSwatchStyles.styles.ts`, ensuring a more refined and consistent user experience when interacting with selected color swatches. This update enhances the overall aesthetic and usability of the color selection interface.

This commit **updates the documentation** for the **React v9 contribution guide**, specifically the `docs/react-v9/contributing/new-release-process-v9-packages.md` file. It **adds a new TIP block** to provide additional guidance and **corrects project names** within the `yarn nx g` commands used for the release process. This **documentation maintenance** ensures that contributors have accurate and up-to-date instructions for the stable release process, improving the overall clarity and correctness of the contribution workflow.

This commit **adds a new migration guide** for the **ColorPicker component** within the React UI library. The documentation, located at `ColorPicker.stories.mdx`, details the necessary changes for developers transitioning their usage of the component **from v8 to v9**. It includes practical examples and comprehensive prop mappings to facilitate a smoother upgrade process. This **documentation update** aims to reduce friction for users adopting the latest version of the component by providing clear instructions for migration.

This commit **releases the `ColorPicker` component as stable (v9.0.0)** within the `@fluentui/react-color-picker` package. It **promotes `ColorPicker`, `AlphaSlider`, `ColorArea`, and `ColorSlider` to stable status**, enabling custom style hooks for styling overrides and removing preview-specific performance tests. This involved extensive **refactoring** of file paths, imports, and configuration across the codebase, including storybook files, VR tests, and TypeScript path mappings, to align with the stable package name. Consequently, these stable components are now exported from the main `@fluentui/react-components` package, providing a finalized API for consumers.

This commit introduces a **new `selected` state** for the **`Tag` and `InteractionTag` components** within the `@fluentui-react-tags` package, enabling users to visually and programmatically indicate selection. This **feature enhancement** adds a `selected` prop to both components and integrates selection logic into the `useTagGroup` and `useInteractionTag` hooks, allowing for controllable selection management. New styles are applied to reflect the `selected` state across `InteractionTagPrimary` and `InteractionTagSecondary` sub-components, enhancing their interactive capabilities. Comprehensive visual regression tests, Cypress tests for `TagGroup` selection, updated API documentation, and new Storybook examples are included to validate and demonstrate this new functionality. This significantly improves the interactivity and state management of tag components, providing a richer user experience.