chore(RovingTabIndex): Remove deprecated as prop (#1906)

digdir · Apr 30, 2024 · a8b4188 · a8b4188
1 parent 1139b31
commit a8b4188
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 71 deletions.
diff --git a/packages/react/src/utilities/RovingTabIndex/RovingTabindexItem.tsx b/packages/react/src/utilities/RovingTabIndex/RovingTabindexItem.tsx
@@ -6,8 +6,6 @@ import type { HTMLAttributes } from 'react';
 import { useMergeRefs } from '@floating-ui/react';
 import { Slot } from '@radix-ui/react-slot';
 
-import type { OverridableComponent } from '../../types/OverridableComponent';
-
 import type { RovingTabindexElement } from './RovingTabindexRoot';
 
 import { useRovingTabindex } from '.';
@@ -40,11 +38,11 @@ export function getPrevFocusableValue(
   return items.at(currIndex === 0 ? -1 : currIndex - 1);
 }
 
-export const RovingTabindexItem: OverridableComponent<
-  RovingTabindexItemProps,
-  HTMLElement
-> = forwardRef(({ value, as = 'div', asChild, ...rest }, ref) => {
-  const Component = asChild ? Slot : as;
+export const RovingTabindexItem = forwardRef<
+  HTMLElement,
+  RovingTabindexItemProps
+>(({ value, asChild, ...rest }, ref) => {
+  const Component = asChild ? Slot : 'div';
 
   const focusValue =
     value ?? (typeof rest.children == 'string' ? rest.children : '');

diff --git a/packages/react/src/utilities/RovingTabIndex/RovingTabindexRoot.tsx b/packages/react/src/utilities/RovingTabIndex/RovingTabindexRoot.tsx
@@ -11,8 +11,6 @@ import type {
 import { useMergeRefs } from '@floating-ui/react';
 import { Slot } from '@radix-ui/react-slot';
 
-import type { OverridableComponent } from '../../types/OverridableComponent';
-
 type RovingTabindexRootBaseProps = {
   /** The children of the `RovingTabindexRoot`. The children should get their roving-relevant props from the `useRovingTabIndex` hook. */
   children: ReactNode;
@@ -50,72 +48,69 @@ export const RovingTabindexContext = createContext<RovingTabindexProps>({
   focusableValue: null,
 });
 
-export const RovingTabindexRoot: OverridableComponent<
-  RovingTabindexRootBaseProps,
-  HTMLElement
-> = forwardRef(
-  ({ valueId, as = 'div', asChild, onBlur, onFocus, ...rest }, ref) => {
-    const Component = asChild ? Slot : as;
+export const RovingTabindexRoot = forwardRef<
+  HTMLElement,
+  RovingTabindexRootBaseProps
+>(({ valueId, asChild, onBlur, onFocus, ...rest }, ref) => {
+  const Component = asChild ? Slot : 'div';
 
-    const [focusableValue, setFocusableValue] = useState<string | null>(null);
-    const [isShiftTabbing, setIsShiftTabbing] = useState(false);
-    const elements = useRef(new Map<string, HTMLElement>());
-    const myRef = useRef<HTMLElement>();
+  const [focusableValue, setFocusableValue] = useState<string | null>(null);
+  const [isShiftTabbing, setIsShiftTabbing] = useState(false);
+  const elements = useRef(new Map<string, HTMLElement>());
+  const myRef = useRef<HTMLElement>();
 
-    const refs = useMergeRefs([ref, myRef]);
+  const refs = useMergeRefs([ref, myRef]);
 
-    const getOrderedItems = (): RovingTabindexElement[] => {
-      if (!myRef.current) return [];
-      const elementsFromDOM = Array.from(
-        myRef.current.querySelectorAll<HTMLElement>(
-          '[data-roving-tabindex-item]',
-        ),
-      );
+  const getOrderedItems = (): RovingTabindexElement[] => {
+    if (!myRef.current) return [];
+    const elementsFromDOM = Array.from(
+      myRef.current.querySelectorAll<HTMLElement>(
+        '[data-roving-tabindex-item]',
+      ),
+    );
 
-      return Array.from(elements.current)
-        .sort(
-          (a, b) =>
-            elementsFromDOM.indexOf(a[1]) - elementsFromDOM.indexOf(b[1]),
-        )
-        .map(([value, element]) => ({ value, element }));
-    };
+    return Array.from(elements.current)
+      .sort(
+        (a, b) => elementsFromDOM.indexOf(a[1]) - elementsFromDOM.indexOf(b[1]),
+      )
+      .map(([value, element]) => ({ value, element }));
+  };
 
-    return (
-      <RovingTabindexContext.Provider
-        value={{
-          elements,
-          getOrderedItems,
-          focusableValue,
-          setFocusableValue,
-          onShiftTab: () => {
-            setIsShiftTabbing(true);
-          },
+  return (
+    <RovingTabindexContext.Provider
+      value={{
+        elements,
+        getOrderedItems,
+        focusableValue,
+        setFocusableValue,
+        onShiftTab: () => {
+          setIsShiftTabbing(true);
+        },
+      }}
+    >
+      <Component
+        {...rest}
+        tabIndex={isShiftTabbing ? -1 : 0}
+        onBlur={(e: FocusEvent<HTMLElement>) => {
+          onBlur?.(e);
+          setIsShiftTabbing(false);
         }}
-      >
-        <Component
-          {...rest}
-          tabIndex={isShiftTabbing ? -1 : 0}
-          onBlur={(e: FocusEvent<HTMLElement>) => {
-            onBlur?.(e);
-            setIsShiftTabbing(false);
-          }}
-          onFocus={(e: FocusEvent<HTMLElement>) => {
-            onFocus?.(e);
-            if (e.target !== e.currentTarget) return;
-            const orderedItems = getOrderedItems();
-            if (orderedItems.length === 0) return;
+        onFocus={(e: FocusEvent<HTMLElement>) => {
+          onFocus?.(e);
+          if (e.target !== e.currentTarget) return;
+          const orderedItems = getOrderedItems();
+          if (orderedItems.length === 0) return;
 
-            if (focusableValue != null) {
-              elements.current.get(focusableValue)?.focus();
-            } else if (valueId != null) {
-              elements.current.get(valueId)?.focus();
-            } else {
-              orderedItems.at(0)?.element.focus();
-            }
-          }}
-          ref={refs}
-        />
-      </RovingTabindexContext.Provider>
-    );
-  },
-);
+          if (focusableValue != null) {
+            elements.current.get(focusableValue)?.focus();
+          } else if (valueId != null) {
+            elements.current.get(valueId)?.focus();
+          } else {
+            orderedItems.at(0)?.element.focus();
+          }
+        }}
+        ref={refs}
+      />
+    </RovingTabindexContext.Provider>
+  );
+});