chore(TimePickerCompat): add custom style hook (#30058)

* add custom style hook

* api in provider

Author: YuanboXue-Amber

change/@fluentui-react-provider-980b45ce-c5d7-44c8-bdad-8da918a3036a.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: add custom style hook for TimePicker compat.",
+  "packageName": "@fluentui/react-provider",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-shared-contexts-faf34243-39b4-41b2-9439-cec30485d855.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: add custom style hook for TimePicker compat.",
+  "packageName": "@fluentui/react-shared-contexts",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-timepicker-compat-preview-e3b253c7-389b-4820-9289-7dff1b689e33.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: add custom style hook for TimePicker compat.",
+  "packageName": "@fluentui/react-timepicker-compat-preview",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -148,6 +148,7 @@ export const FluentProvider: React_2.ForwardRefExoticComponent<Omit<ComponentPro
         useTeachingPopoverPageCountStyles_unstable: (state: unknown) => void;
         useTeachingPopoverSurfaceStyles_unstable: (state: unknown) => void;
         useTeachingPopoverTitleStyles_unstable: (state: unknown) => void;
+        useTimePickerCompatStyles_unstable: (state: unknown) => void;
     }> | undefined;
     dir?: "ltr" | "rtl" | undefined;
     targetDocument?: Document | undefined;

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

@@ -143,6 +143,7 @@ export const CustomStyleHooksContext_unstable: React_2.Context<Partial<{
     useTeachingPopoverPageCountStyles_unstable: CustomStyleHook;
     useTeachingPopoverSurfaceStyles_unstable: CustomStyleHook;
     useTeachingPopoverTitleStyles_unstable: CustomStyleHook;
+    useTimePickerCompatStyles_unstable: CustomStyleHook;
 }> | undefined>;
 
 // @public (undocumented)
@@ -267,6 +268,7 @@ export type CustomStyleHooksContextValue_unstable = Partial<{
     useTeachingPopoverPageCountStyles_unstable: CustomStyleHook;
     useTeachingPopoverSurfaceStyles_unstable: CustomStyleHook;
     useTeachingPopoverTitleStyles_unstable: CustomStyleHook;
+    useTimePickerCompatStyles_unstable: CustomStyleHook;
 }>;
 
 // @internal (undocumented)
@@ -391,6 +393,7 @@ export const CustomStyleHooksProvider_unstable: React_2.Provider<Partial<{
     useTeachingPopoverPageCountStyles_unstable: CustomStyleHook;
     useTeachingPopoverSurfaceStyles_unstable: CustomStyleHook;
     useTeachingPopoverTitleStyles_unstable: CustomStyleHook;
+    useTimePickerCompatStyles_unstable: CustomStyleHook;
 }> | undefined>;
 
 // @internal (undocumented)

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

@@ -128,6 +128,7 @@ export type CustomStyleHooksContextValue = Partial<{
   useTeachingPopoverPageCountStyles_unstable: CustomStyleHook;
   useTeachingPopoverSurfaceStyles_unstable: CustomStyleHook;
   useTeachingPopoverTitleStyles_unstable: CustomStyleHook;
+  useTimePickerCompatStyles_unstable: CustomStyleHook;
 }>;
 
 /**

packages/react-components/react-timepicker-compat-preview/package.json

@@ -36,6 +36,7 @@
     "@fluentui/keyboard-keys": "^9.0.7",
     "@fluentui/react-combobox": "^9.5.33",
     "@fluentui/react-jsx-runtime": "^9.0.21",
+    "@fluentui/react-shared-contexts": "^9.13.1",
     "@fluentui/react-theme": "^9.1.16",
     "@fluentui/react-utilities": "^9.15.3",
     "@griffel/react": "^1.5.14",

packages/react-components/react-timepicker-compat-preview/src/components/TimePicker/TimePicker.tsx

@@ -4,17 +4,18 @@ import { useTimePicker_unstable } from './useTimePicker';
 import { useTimePickerStyles_unstable } from './useTimePickerStyles.styles';
 import type { TimePickerProps } from './TimePicker.types';
 import { renderCombobox_unstable, useComboboxContextValues } from '@fluentui/react-combobox';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 
 /**
- * TimePicker component - TODO: add more docs
+ * TimePicker Compat component
  */
 export const TimePicker: ForwardRefComponent<TimePickerProps> = React.forwardRef((props, ref) => {
   const state = useTimePicker_unstable(props, ref);
 
   const contextValues = useComboboxContextValues(state);
 
   useTimePickerStyles_unstable(state);
-  // TODO customStyles hook
+  useCustomStyleHook_unstable('useTimePickerCompatStyles_unstable')(state);
 
   return renderCombobox_unstable(state, contextValues);
 });