chore(clerk-js): Fix minor discrepancies

Author: panteliselef

packages/clerk-js/src/ui/components/OrganizationSwitcher/OtherOrganizationActions.tsx

@@ -27,13 +27,6 @@ type OrganizationActionListProps = {
   onOrganizationClick: (org: OrganizationResource) => unknown;
 };
 
-export interface IntersectionOptions extends IntersectionObserverInit {
-  /** Only trigger the inView callback once */
-  triggerOnce?: boolean;
-  /** Call this function whenever the in view state changes */
-  onChange?: (inView: boolean, entry: IntersectionObserverEntry) => void;
-}
-
 export const OrganizationActionList = (props: OrganizationActionListProps) => {
   const { onCreateOrganizationClick, onPersonalWorkspaceClick, onOrganizationClick } = props;
   const { organizationList, userInvitations } = useCoreOrganizationList({
@@ -46,7 +39,7 @@ export const OrganizationActionList = (props: OrganizationActionListProps) => {
     threshold: 0,
     onChange: inView => {
       if (inView) {
-        void userInvitations.fetchNext?.();
+        userInvitations.fetchNext?.();
       }
     },
   });
@@ -119,20 +112,18 @@ export const OrganizationActionList = (props: OrganizationActionListProps) => {
 
       {(userInvitations.count ?? 0) > 0 && (
         <Flex
-          direction={'col'}
+          direction='col'
           elementDescriptor={descriptors.organizationSwitcherPopoverInvitationActions}
         >
           <Text
-            variant={'smallRegular'}
-            sx={[
-              t => ({
-                minHeight: 'unset',
-                height: t.space.$12,
-                padding: `${t.space.$3} ${t.space.$6}`,
-                display: 'flex',
-                alignItems: 'center',
-              }),
-            ]}
+            variant='smallRegular'
+            sx={t => ({
+              minHeight: 'unset',
+              height: t.space.$12,
+              padding: `${t.space.$3} ${t.space.$6}`,
+              display: 'flex',
+              alignItems: 'center',
+            })}
             // Handle plurals
             localizationKey={localizationKeys(
               (userInvitations.count ?? 0) > 1
@@ -162,13 +153,11 @@ export const OrganizationActionList = (props: OrganizationActionListProps) => {
             {(userInvitations.hasNextPage || userInvitations.isFetching) && (
               <Box
                 ref={ref}
-                sx={[
-                  t => ({
-                    width: '100%',
-                    height: t.space.$12,
-                    position: 'relative',
-                  }),
-                ]}
+                sx={t => ({
+                  width: '100%',
+                  height: t.space.$12,
+                  position: 'relative',
+                })}
               >
                 <Box
                   sx={{
@@ -230,16 +219,14 @@ const AcceptRejectInvitationButtons = (props: UserOrganizationInvitationResource
 const InvitationPreview = withCardStateProvider((props: UserOrganizationInvitationResource) => {
   return (
     <Flex
-      align={'center'}
+      align='center'
       gap={2}
-      sx={[
-        t => ({
-          minHeight: 'unset',
-          height: t.space.$12,
-          justifyContent: 'space-between',
-          padding: `0 ${t.space.$6}`,
-        }),
-      ]}
+      sx={t => ({
+        minHeight: 'unset',
+        height: t.space.$12,
+        justifyContent: 'space-between',
+        padding: `0 ${t.space.$6}`,
+      })}
     >
       <OrganizationPreview
         elementId={'organizationSwitcher'}

packages/clerk-js/src/ui/components/OrganizationSwitcher/__tests__/OrganizationSwitcher.test.tsx

@@ -175,7 +175,6 @@ describe('OrganizationSwitcher', () => {
       expect(queryByText('OrgTwo')).toBeInTheDocument();
     });
 
-    it.todo('switches between active organizations when one is clicked');
     it("switches between active organizations when one is clicked'", async () => {
       const { wrapper, props, fixtures } = await createFixtures(f => {
         f.withOrganizations();

packages/clerk-js/src/ui/hooks/useInView.ts

@@ -1,16 +1,32 @@
-import React, { useCallback, useRef, useState } from 'react';
-
-import type { IntersectionOptions } from '../components/OrganizationSwitcher/OtherOrganizationActions';
-
+import { useCallback, useRef, useState } from 'react';
+
+interface IntersectionOptions extends IntersectionObserverInit {
+  /** Only trigger the inView callback once */
+  triggerOnce?: boolean;
+  /** Call this function whenever the in view state changes */
+  onChange?: (inView: boolean, entry: IntersectionObserverEntry) => void;
+}
+
+/**
+ * A custom React hook that provides the ability to track whether an element is in view
+ * based on the IntersectionObserver API.
+ *
+ * @param {IntersectionOptions} params - IntersectionObserver configuration options.
+ * @returns {{
+ *   inView: boolean,
+ *   ref: (element: HTMLElement | null) => void
+ * }} An object containing the current inView status and a ref function to attach to the target element.
+ */
 export const useInView = (params: IntersectionOptions) => {
   const [inView, setInView] = useState(false);
   const observerRef = useRef<IntersectionObserver | null>(null);
   const thresholds = Array.isArray(params.threshold) ? params.threshold : [params.threshold || 0];
-  const internalOnChange = React.useRef<IntersectionOptions['onChange']>();
+  const internalOnChange = useRef<IntersectionOptions['onChange']>();
 
   internalOnChange.current = params.onChange;
 
   const ref = useCallback((element: HTMLElement | null) => {
+    // Callback refs are called with null to clear the value, so we rely on that to cleanup the observer. (ref: https://react.dev/learn/manipulating-the-dom-with-refs#how-to-manage-a-list-of-refs-using-a-ref-callback)
     if (!element) {
       if (observerRef.current) {
         observerRef.current.disconnect();