Merge branch 'master' into feat/use-motion-presence-hook

change/@fluentui-azure-themes-cfae358f-02a7-46ba-8e4d-ee45180e9eb8.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Updated focus state border for detailslist",
+  "packageName": "@fluentui/azure-themes",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-tooltip-79e44460-a719-40d8-9aeb-cc3737e454a2.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: Add documentKeyboardEvent to OnVisibleChangeData when Tooltip is hidden via Escape",
+  "packageName": "@fluentui/react-tooltip",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/azure-themes/src/azure/AzureColors.ts

@@ -904,7 +904,7 @@ export const LightSemanticColors: IAzureSemanticColors = {
     background: BaseColors.WHITE,
     disabled: BaseColors.GRAY_F3F2F1,
     hover: BaseColors.GRAY_605E5C,
-    accent: BaseColors.BLUE_0078D4,
+    accent: BaseColors.GRAY_605E5C,
     focus: BaseColors.BLUE_0078D4,
     error: BaseColors.RED_A4262C,
     dirty: BaseColors.PURPLE_8A2DA5,

packages/azure-themes/src/azure/styles/DetailsList.styles.ts

@@ -17,7 +17,6 @@ export const CheckStyles = (props: ICheckStyleProps): Partial<ICheckStyles> => {
     circle: [
       {
         fontSize: 0,
-        paddingTop: 1,
         paddingLeft: 1,
         borderRadius: StyleConstants.borderRadius,
         color: semanticColors.listBackground,
@@ -134,9 +133,6 @@ export const DetailsRowStyles = (props: IDetailsRowStyleProps): Partial<IDetails
                 },
               },
             },
-            ':after': {
-              border: `1px solid ${extendedSemanticColors.listItemBackgroundSelected} !important`,
-            },
             ':focus': {
               backgroundColor: extendedSemanticColors.rowFocus,
             },

packages/react-components/react-tooltip/etc/react-tooltip.api.md

@@ -16,6 +16,7 @@ import type { TriggerProps } from '@fluentui/react-utilities';
 // @public
 export type OnVisibleChangeData = {
     visible: boolean;
+    documentKeyboardEvent?: KeyboardEvent;
 };
 
 // @public

packages/react-components/react-tooltip/src/components/Tooltip/Tooltip.types.ts

@@ -28,6 +28,12 @@ export type TooltipChildProps = {
  */
 export type OnVisibleChangeData = {
   visible: boolean;
+
+  /**
+   * The event object, if this visibility change was triggered by a keyboard event on the document element
+   * (such as Escape to hide the visible tooltip). Otherwise undefined.
+   */
+  documentKeyboardEvent?: KeyboardEvent;
 };
 
 /**
@@ -52,7 +58,10 @@ export type TooltipProps = ComponentProps<TooltipSlots> &
     hideDelay?: number;
 
     /**
-     * Notification when the visibility of the tooltip is changing
+     * Notification when the visibility of the tooltip is changing.
+     *
+     * **Note**: for backwards compatibility, `event` will be undefined if this was triggered by a keyboard event on
+     * the document element. Use `data.documentKeyboardEvent` if the keyboard event object is needed.
      */
     onVisibleChange?: (
       event: React.PointerEvent<HTMLElement> | React.FocusEvent<HTMLElement> | undefined,

packages/react-components/react-tooltip/src/components/Tooltip/useTooltip.tsx

@@ -17,7 +17,7 @@ import {
   useEventCallback,
   slot,
 } from '@fluentui/react-utilities';
-import type { TooltipProps, TooltipState, TooltipChildProps } from './Tooltip.types';
+import type { TooltipProps, TooltipState, TooltipChildProps, OnVisibleChangeData } from './Tooltip.types';
 import { arrowHeight, tooltipBorderRadius } from './private/constants';
 import { Escape } from '@fluentui/keyboard-keys';
 
@@ -50,13 +50,13 @@ export const useTooltip_unstable = (props: TooltipProps): TooltipState => {
 
   const [visible, setVisibleInternal] = useControllableState({ state: props.visible, initialState: false });
   const setVisible = React.useCallback(
-    (newVisible: boolean, ev?: React.PointerEvent<HTMLElement> | React.FocusEvent<HTMLElement>) => {
+    (ev: React.PointerEvent<HTMLElement> | React.FocusEvent<HTMLElement> | undefined, data: OnVisibleChangeData) => {
       clearDelayTimeout();
       setVisibleInternal(oldVisible => {
-        if (newVisible !== oldVisible) {
-          onVisibleChange?.(ev, { visible: newVisible });
+        if (data.visible !== oldVisible) {
+          onVisibleChange?.(ev, data);
         }
-        return newVisible;
+        return data.visible;
       });
     },
     [clearDelayTimeout, setVisibleInternal, onVisibleChange],
@@ -117,14 +117,16 @@ export const useTooltip_unstable = (props: TooltipProps): TooltipState => {
   // Also add a listener on document to hide the tooltip if Escape is pressed
   useIsomorphicLayoutEffect(() => {
     if (visible) {
-      const thisTooltip = { hide: () => setVisible(false) };
+      const thisTooltip = {
+        hide: (ev?: KeyboardEvent) => setVisible(undefined, { visible: false, documentKeyboardEvent: ev }),
+      };
 
       context.visibleTooltip?.hide();
       context.visibleTooltip = thisTooltip;
 
       const onDocumentKeyDown = (ev: KeyboardEvent) => {
         if (ev.key === Escape) {
-          thisTooltip.hide();
+          thisTooltip.hide(ev);
           // stop propagation to avoid conflicting with other elements that listen for `Escape`
           // e,g: Dialog, Popover, Menu
           ev.stopPropagation();
@@ -166,7 +168,7 @@ export const useTooltip_unstable = (props: TooltipProps): TooltipState => {
       const delay = context.visibleTooltip ? 0 : state.showDelay;
 
       setDelayTimeout(() => {
-        setVisible(true, ev);
+        setVisible(ev, { visible: true });
       }, delay);
 
       ev.persist(); // Persist the event since the setVisible call will happen asynchronously
@@ -187,7 +189,7 @@ export const useTooltip_unstable = (props: TooltipProps): TooltipState => {
       }
 
       setDelayTimeout(() => {
-        setVisible(false, ev);
+        setVisible(ev, { visible: false });
       }, delay);
 
       ev.persist(); // Persist the event since the setVisible call will happen asynchronously