message: chore: cleanup tabs
diff: @@ -244,19 +244,34 @@ export interface UseTabProps extends UseClickableProps {
  onFocus?: React.FocusEventHandler
  }
  -export function useTabState(props: any) {
  - const { isDisabled, isFocusable } = props
  - const { enabledDomContext, domContext, selectedIndex } = useTabsContext()
  +/**
  + * Tabs hook to manage each tab button.
  + *
  + * A tab can be disabled and focusable, or both,
  + * hence the use of `useClickable` to handle this scenario
  + */
  +export function useTab<P extends UseTabProps>(props: P) {
  + const { isDisabled, isFocusable, ...htmlProps } = props
  +
  + const {
  + setSelectedIndex,
  + isManual,
  + id,
  + setFocusedIndex,
  + enabledDomContext,
  + domContext,
  + selectedIndex,
  + } = useTabsContext()
  const ref = React.useRef<HTMLElement>(null)
  /**
  - * Think of `useDescendant` as the function that actually registers this tab
  - * to the corresponding `manager`, and returns it's index.
  + * Think of `useDescendant` as the function that registers tab node
  + * to the `enabledDomContext`, and returns it's index.
  *
  - * In this case, it registers the tab only if it's enabled and focusable
  + * Tab is registered if it's enabled or focusable
  */
  - useDescendant({
  + const enabledIndex = useDescendant({
  disabled: Boolean(isDisabled),
  focusable: Boolean(isFocusable),
  context: enabledDomContext,
  @@ -264,47 +279,15 @@ export function useTabState(props: any) {
  })
  /**
  - * In this case, it registers the tab (whether disabled or not)
  + * Registers all tabs (whether disabled or not)
  */
  - useDescendant({
  + const index = useDescendant({
  context: domContext,
  element: ref.current,
  })
  - const index = domContext.descendants.findIndex(
  - (item) => item.element === ref.current,
  - )
  -
  - const enabledIndex = enabledDomContext.descendants.findIndex(
  - (item) => item.element === ref.current,
  - )
  -
  const isSelected = index === selectedIndex
  - return {
  - ref,
  - isSelected,
  - index,
  - enabledIndex,
  - }
  -}
  -
  -/**
  - * Tabs hook to manage each tab button.
  - *
  - * A tab can be disabled and focusable, or both,
  - * hence the use of `useClickable` to handle this scenario
  - */
  -export function useTab<P extends UseTabProps>(props: P) {
  - const { isDisabled, isFocusable, ...htmlProps } = props
  -
  - const { setSelectedIndex, isManual, id, setFocusedIndex } = useTabsContext()
  -
  - const { index, ref, isSelected, enabledIndex } = useTabState({
  - isDisabled,
  - isFocusable,
  - })
  -
  const onClick = () => {
  setFocusedIndex(enabledIndex)
  setSelectedIndex(index)
  