feat(fluentui/react-provider): Export all types required for complete custom stylehooks

change/@fluentui-react-dialog-a27a006c-4b45-4030-8a49-2d8e6af3353c.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: Export dialog style constants",
+  "packageName": "@fluentui/react-dialog",
+  "email": "mifraser@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-drawer-90ba3f80-3485-42f6-94cd-6f7abcc77117.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: Enable custom style hooks on OverlayDrawerSurface",
+  "packageName": "@fluentui/react-drawer",
+  "email": "mifraser@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-shared-contexts-01e5189d-a9e1-4498-96f1-da2ece9bf1a8.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: Add DrawerSurfaceStyle custom style hook",
+  "packageName": "@fluentui/react-shared-contexts",
+  "email": "mifraser@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-tabs-65ced89f-3e02-4450-aa4a-729e5381851d.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: Export tabReservedSpaceClassNames and useTabAnimatedIndicatorStyles_unstable for style overrides",
+  "packageName": "@fluentui/react-tabs",
+  "email": "mifraser@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-toast-213ed5af-e9e3-44d7-a136-ba202f583a40.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: Export ToastContainer state and classNames nessecary for style overrides",
+  "packageName": "@fluentui/react-toast",
+  "email": "mifraser@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-tree-d996b541-0709-4b79-a872-717af378c09c.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: Export TreeItemCSSProperties for external usage",
+  "packageName": "@fluentui/react-tree",
+  "email": "mifraser@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-dialog/library/etc/react-dialog.api.md

@@ -24,6 +24,15 @@ import { useModalAttributes } from '@fluentui/react-tabster';
 // @public
 export const Dialog: React_2.FC<DialogProps>;
 
+// @public (undocumented)
+export const DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET = "4px";
+
+// @public (undocumented)
+export const DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR = "@media screen and (max-width: 480px)";
+
+// @public (undocumented)
+export const DIALOG_MEDIA_QUERY_SHORT_SCREEN = "@media screen and (max-height: 359px)";
+
 // @public
 export const DialogActions: ForwardRefComponent<DialogActionsProps>;
 

packages/react-components/react-dialog/library/src/components/DialogActions/useDialogActionsStyles.styles.ts

@@ -1,7 +1,7 @@
 import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
 import type { DialogActionsSlots, DialogActionsState } from './DialogActions.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
-import { DIALOG_GAP, MEDIA_QUERY_BREAKPOINT_SELECTOR } from '../../contexts/constants';
+import { DIALOG_GAP, DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR } from '../../contexts/constants';
 
 export const dialogActionsClassNames: SlotClassNames<DialogActionsSlots> = {
   root: 'fui-DialogActions',
@@ -17,7 +17,7 @@ const useResetStyles = makeResetStyles({
   display: 'flex',
   gridRowStart: 3,
   gridRowEnd: 3,
-  [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {
+  [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {
     flexDirection: 'column',
     justifySelf: 'stretch',
   },
@@ -28,7 +28,7 @@ const useStyles = makeStyles({
     justifySelf: 'end',
     gridColumnStart: 2,
     gridColumnEnd: 4,
-    [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {
+    [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {
       gridColumnStart: 1,
       gridRowStart: 4,
       gridRowEnd: 'auto',
@@ -38,7 +38,7 @@ const useStyles = makeStyles({
     justifySelf: 'start',
     gridColumnStart: 1,
     gridColumnEnd: 2,
-    [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {
+    [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {
       gridColumnEnd: 4,
       gridRowStart: 3,
       gridRowEnd: 'auto',

packages/react-components/react-dialog/library/src/components/DialogBody/useDialogBodyStyles.styles.ts

@@ -1,7 +1,12 @@
 import { makeResetStyles, mergeClasses } from '@griffel/react';
 import type { DialogBodySlots, DialogBodyState } from './DialogBody.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
-import { DIALOG_GAP, MEDIA_QUERY_BREAKPOINT_SELECTOR, MEDIA_QUERY_SHORT_SCREEN, SURFACE_PADDING } from '../../contexts';
+import {
+  DIALOG_GAP,
+  DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR,
+  DIALOG_MEDIA_QUERY_SHORT_SCREEN,
+  SURFACE_PADDING,
+} from '../../contexts';
 
 export const dialogBodyClassNames: SlotClassNames<DialogBodySlots> = {
   root: 'fui-DialogBody',
@@ -19,12 +24,12 @@ const useResetStyles = makeResetStyles({
   gridTemplateRows: 'auto 1fr',
   gridTemplateColumns: '1fr 1fr auto',
 
-  [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {
+  [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {
     maxWidth: '100vw',
     gridTemplateRows: 'auto 1fr auto',
   },
 
-  [MEDIA_QUERY_SHORT_SCREEN]: {
+  [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {
     maxHeight: 'unset',
   },
 });

packages/react-components/react-dialog/library/src/components/DialogContent/useDialogContentStyles.styles.ts

@@ -2,7 +2,7 @@ import { makeResetStyles, mergeClasses } from '@griffel/react';
 import type { DialogContentSlots, DialogContentState } from './DialogContent.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
-import { MEDIA_QUERY_SHORT_SCREEN } from '../../contexts';
+import { DIALOG_MEDIA_QUERY_SHORT_SCREEN } from '../../contexts';
 
 export const dialogContentClassNames: SlotClassNames<DialogContentSlots> = {
   root: 'fui-DialogContent',
@@ -23,7 +23,7 @@ const useStyles = makeResetStyles({
   gridColumnStart: 1,
   gridColumnEnd: 4,
 
-  [MEDIA_QUERY_SHORT_SCREEN]: {
+  [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {
     overflowY: 'unset',
   },
 });

packages/react-components/react-dialog/library/src/components/DialogSurface/useDialogSurfaceStyles.styles.ts

@@ -3,9 +3,9 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 import { tokens } from '@fluentui/react-theme';
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 import {
-  FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,
-  MEDIA_QUERY_BREAKPOINT_SELECTOR,
-  MEDIA_QUERY_SHORT_SCREEN,
+  DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,
+  DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR,
+  DIALOG_MEDIA_QUERY_SHORT_SCREEN,
   SURFACE_BORDER_WIDTH,
   SURFACE_PADDING,
 } from '../../contexts';
@@ -43,18 +43,18 @@ const useRootBaseStyle = makeResetStyles({
   // to ensure dialog will be properly styled when surfaceMotion is opted-out
   boxShadow: tokens.shadow64,
 
-  [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {
+  [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {
     maxWidth: '100vw',
   },
 
-  [MEDIA_QUERY_SHORT_SCREEN]: {
+  [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {
     overflowY: 'auto',
     // We need to offset the scrollbar by adding transparent borders otherwise
     // it conflicts with the border radius.
-    paddingRight: `calc(${SURFACE_PADDING} - ${FULLSCREEN_DIALOG_SCROLLBAR_OFFSET})`,
-    borderRightWidth: FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,
-    borderTopWidth: FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,
-    borderBottomWidth: FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,
+    paddingRight: `calc(${SURFACE_PADDING} - ${DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET})`,
+    borderRightWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,
+    borderTopWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,
+    borderBottomWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,
   },
 });
 

packages/react-components/react-dialog/library/src/contexts/constants.ts

@@ -1,6 +1,6 @@
-export const MEDIA_QUERY_BREAKPOINT_SELECTOR = '@media screen and (max-width: 480px)';
-export const MEDIA_QUERY_SHORT_SCREEN = '@media screen and (max-height: 359px)';
+export const DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR = '@media screen and (max-width: 480px)';
+export const DIALOG_MEDIA_QUERY_SHORT_SCREEN = '@media screen and (max-height: 359px)';
 export const SURFACE_PADDING = '24px';
 export const DIALOG_GAP = '8px';
 export const SURFACE_BORDER_WIDTH = '1px';
-export const FULLSCREEN_DIALOG_SCROLLBAR_OFFSET = '4px';
+export const DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET = '4px';

packages/react-components/react-dialog/library/src/contexts/index.ts

@@ -1,8 +1,8 @@
 export {
   DIALOG_GAP,
-  FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,
-  MEDIA_QUERY_BREAKPOINT_SELECTOR,
-  MEDIA_QUERY_SHORT_SCREEN,
+  DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,
+  DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR,
+  DIALOG_MEDIA_QUERY_SHORT_SCREEN,
   SURFACE_BORDER_WIDTH,
   SURFACE_PADDING,
 } from './constants';

packages/react-components/react-dialog/library/src/index.ts

@@ -83,3 +83,9 @@ export {
 } from './contexts/index';
 
 export type { DialogContextValue, DialogSurfaceContextValue } from './contexts/index';
+
+export {
+  DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR,
+  DIALOG_MEDIA_QUERY_SHORT_SCREEN,
+  DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,
+} from './contexts/constants';

packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawerSurface/OverlayDrawerSurface.tsx

@@ -8,6 +8,7 @@ import {
 
 import { useOverlayDrawerSurfaceStyles_unstable } from './useOverlayDrawerSurfaceStyles.styles';
 import type { OverlayDrawerSurfaceProps } from './OverlayDrawerSurface.types';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 
 /**
  * @internal
@@ -30,6 +31,7 @@ export const OverlayDrawerSurface: ForwardRefComponent<OverlayDrawerSurfaceProps
   const dialogSurfaceContextValues = useDialogSurfaceContextValues_unstable(dialogSurfaceState);
 
   useOverlayDrawerSurfaceStyles_unstable(dialogSurfaceState);
+  useCustomStyleHook_unstable('useOverlayDrawerSurfaceStyles_unstable')(dialogSurfaceState);
 
   return renderDialogSurface_unstable(dialogSurfaceState, dialogSurfaceContextValues);
 });

packages/react-components/react-shared-contexts/library/etc/react-shared-contexts.api.md

@@ -92,6 +92,7 @@ export const CustomStyleHooksContext_unstable: React_2.Context<Partial<{
     useDrawerHeaderTitleStyles_unstable: CustomStyleHook;
     useDrawerInlineStyles_unstable: CustomStyleHook;
     useDrawerOverlayStyles_unstable: CustomStyleHook;
+    useOverlayDrawerSurfaceStyles_unstable: CustomStyleHook;
     useDrawerStyles_unstable: CustomStyleHook;
     useDropdownStyles_unstable: CustomStyleHook;
     useEmptySwatchStyles_unstable: CustomStyleHook;
@@ -288,6 +289,7 @@ export type CustomStyleHooksContextValue_unstable = Partial<{
     useDrawerHeaderTitleStyles_unstable: CustomStyleHook;
     useDrawerInlineStyles_unstable: CustomStyleHook;
     useDrawerOverlayStyles_unstable: CustomStyleHook;
+    useOverlayDrawerSurfaceStyles_unstable: CustomStyleHook;
     useDrawerStyles_unstable: CustomStyleHook;
     useDropdownStyles_unstable: CustomStyleHook;
     useEmptySwatchStyles_unstable: CustomStyleHook;
@@ -484,6 +486,7 @@ export const CustomStyleHooksProvider_unstable: React_2.Provider<Partial<{
     useDrawerHeaderTitleStyles_unstable: CustomStyleHook;
     useDrawerInlineStyles_unstable: CustomStyleHook;
     useDrawerOverlayStyles_unstable: CustomStyleHook;
+    useOverlayDrawerSurfaceStyles_unstable: CustomStyleHook;
     useDrawerStyles_unstable: CustomStyleHook;
     useDropdownStyles_unstable: CustomStyleHook;
     useEmptySwatchStyles_unstable: CustomStyleHook;

packages/react-components/react-shared-contexts/library/src/CustomStyleHooksContext/CustomStyleHooksContext.ts

@@ -65,6 +65,7 @@ export type CustomStyleHooksContextValue = Partial<{
   useDrawerInlineStyles_unstable: CustomStyleHook;
   /** @deprecated Use useOverlayDrawerStyles_unstable instead. */
   useDrawerOverlayStyles_unstable: CustomStyleHook;
+  useOverlayDrawerSurfaceStyles_unstable: CustomStyleHook;
   useDrawerStyles_unstable: CustomStyleHook;
   useDropdownStyles_unstable: CustomStyleHook;
   useEmptySwatchStyles_unstable: CustomStyleHook;

packages/react-components/react-tabs/library/etc/react-tabs.api.md

@@ -100,6 +100,11 @@ export type TabRegisterData = {
     ref: React_2.RefObject<HTMLElement>;
 };
 
+// @public (undocumented)
+export const tabReservedSpaceClassNames: {
+    content: string;
+};
+
 // @public (undocumented)
 export type TabSlots = {
     root: Slot<'button'>;
@@ -123,6 +128,9 @@ export type TabValue = unknown;
 // @public
 export const useTab_unstable: (props: TabProps, ref: React_2.Ref<HTMLElement>) => TabState;
 
+// @public
+export const useTabAnimatedIndicatorStyles_unstable: (state: TabState) => TabState;
+
 // @public
 export const useTabButtonStyles_unstable: (state: TabState, slot: TabState["root"]) => TabState;
 

packages/react-components/react-tabs/library/src/Tab.ts

@@ -3,6 +3,7 @@ export {
   Tab,
   renderTab_unstable,
   tabClassNames,
+  tabReservedSpaceClassNames,
   useTabAnimatedIndicatorStyles_unstable,
   useTabButtonStyles_unstable,
   useTabContentStyles_unstable,

packages/react-components/react-tabs/library/src/components/Tab/index.ts

@@ -4,6 +4,7 @@ export { renderTab_unstable } from './renderTab';
 export { useTab_unstable } from './useTab';
 export {
   tabClassNames,
+  tabReservedSpaceClassNames,
   useTabButtonStyles_unstable,
   useTabContentStyles_unstable,
   useTabIndicatorStyles_unstable,

packages/react-components/react-tabs/library/src/components/Tab/useTabStyles.styles.ts

@@ -11,7 +11,7 @@ export const tabClassNames: SlotClassNames<TabSlots> = {
   content: 'fui-Tab__content',
 };
 
-const reservedSpaceClassNames = {
+export const tabReservedSpaceClassNames = {
   content: 'fui-Tab__content--reserved-space',
 };
 
@@ -755,7 +755,7 @@ export const useTabContentStyles_unstable = (state: TabState): TabState => {
   // This needs to be before state.content.className is updated
   if (state.contentReservedSpace) {
     state.contentReservedSpace.className = mergeClasses(
-      reservedSpaceClassNames.content,
+      tabReservedSpaceClassNames.content,
       contentStyles.base,
       size === 'large' ? contentStyles.largeSelected : contentStyles.selected,
       state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore,

packages/react-components/react-tabs/library/src/index.ts

@@ -3,6 +3,8 @@ export {
   renderTab_unstable,
   Tab,
   tabClassNames,
+  tabReservedSpaceClassNames,
+  useTabAnimatedIndicatorStyles_unstable,
   useTabButtonStyles_unstable,
   useTabContentStyles_unstable,
   useTabIndicatorStyles_unstable,

packages/react-components/react-toast/library/etc/react-toast.api.md

@@ -62,6 +62,21 @@ export type ToastBodyState = ComponentState<ToastBodySlots> & {
 // @public (undocumented)
 export const toastClassNames: SlotClassNames<ToastSlots>;
 
+// @public (undocumented)
+export const toastContainerClassNames: SlotClassNames<ToastContainerSlots>;
+
+// @public
+export type ToastContainerState = ComponentState<ToastContainerSlots> & Pick<ToastContainerProps, 'remove' | 'close' | 'updateId' | 'visible' | 'intent'> & Pick<ToastContainerContextValue, 'titleId' | 'bodyId'> & {
+    transitionTimeout: number;
+    timerTimeout: number;
+    running: boolean;
+    onTransitionEntering: () => void;
+    nodeRef: React_2.Ref<HTMLDivElement>;
+    onMotionFinish?: (event: null, data: {
+        direction: 'enter' | 'exit';
+    }) => void;
+};
+
 // @public
 export const Toaster: React_2.FC<ToasterProps>;
 

packages/react-components/react-toast/library/src/components/ToastContainer/ToastContainer.types.ts

@@ -42,7 +42,7 @@ export type ToastContainerState = ComponentState<ToastContainerSlots> &
      */
     onTransitionEntering: () => void;
     /**
-     * @deprecated
+     * @deprecated now merged with root ref
      */
     nodeRef: React.Ref<HTMLDivElement>;
 

packages/react-components/react-toast/library/src/index.ts

@@ -40,3 +40,6 @@ export {
   toastFooterClassNames,
 } from './ToastFooter';
 export type { ToastFooterProps, ToastFooterState, ToastFooterSlots } from './ToastFooter';
+
+export { toastContainerClassNames } from './ToastContainer';
+export type { ToastContainerState } from './ToastContainer';

packages/react-components/react-tree/library/etc/react-tree.api.md

@@ -190,6 +190,11 @@ export type TreeItemContextValue = {
     checked: TreeSelectionValue;
 };
 
+// @public (undocumented)
+export type TreeItemCSSProperties = React_2.CSSProperties & {
+    [treeItemLevelToken]?: string | number;
+};
+
 // @public
 export const TreeItemLayout: ForwardRefComponent<TreeItemLayoutProps>;
 

packages/react-components/react-tree/library/src/index.ts

@@ -69,6 +69,7 @@ export type {
   TreeItemValue,
   TreeItemOpenChangeData,
   TreeItemOpenChangeEvent,
+  TreeItemCSSProperties,
 } from './TreeItem';
 
 export { FlatTreeItem } from './FlatTreeItem';