Carousel: subscribe before calling setApi (#214)

The lint fix in #211 left the listeners in an effect declared after the one
that calls setApi. Effects run in order, so a consumer that scrolls as soon as
it gets the api (e.g. `setApi={(api) => api?.scrollTo(2, true)}`) moved the
carousel before anyone was listening. The triggers and indicators then stayed
on slide 1. Subscribing first fixes it, with no setState in an effect.

Author: deebov

components/application/carousel/carousel-base.tsx

@@ -109,12 +109,8 @@ const CarouselRoot = ({ orientation = "horizontal", opts, setApi, plugins, class
         [scrollPrev, scrollNext],
     );
 
-    useEffect(() => {
-        if (!api || !setApi) return;
-
-        setApi(api);
-    }, [api, setApi]);
-
+    // Subscribe before handing the api to setApi: effects run in order, so a consumer that
+    // scrolls as soon as it gets the api must find these listeners already attached.
     useEffect(() => {
         if (!api) return;
 
@@ -129,6 +125,12 @@ const CarouselRoot = ({ orientation = "horizontal", opts, setApi, plugins, class
         };
     }, [api, onInit, onSelect]);
 
+    useEffect(() => {
+        if (!api || !setApi) return;
+
+        setApi(api);
+    }, [api, setApi]);
+
     return (
         <CarouselContext.Provider
             value={{