@tamagui/tabs 2.7.7 → 3.0.0-beta.643.1

package/src/createTabs.tsx

@@ -1,438 +0,0 @@
-import { composeRefs } from '@tamagui/compose-refs'
-import { isWeb } from '@tamagui/constants'
-import type { GroupProps } from '@tamagui/group'
-import { Group, useGroupItem } from '@tamagui/group'
-import { composeEventHandlers, withStaticProperties } from '@tamagui/helpers'
-import { RovingFocusGroup, type RovingFocusGroupProps } from '@tamagui/roving-focus'
-import { SizableContext } from '@tamagui/sizable-context'
-import { useControllableState } from '@tamagui/use-controllable-state'
-import { useDirection } from '@tamagui/use-direction'
-import type { GetProps, TamaguiElement, ViewProps } from '@tamagui/web'
-import { useEvent } from '@tamagui/web'
-import * as React from 'react'
-import type { LayoutRectangle } from 'react-native'
-import { TabsProvider, useTabsContext } from './StyledContext'
-import { DefaultTabsContentFrame, DefaultTabsFrame, DefaultTabsTabFrame } from './Tabs'
-
-type TabsComponent = (props: { direction: 'horizontal' | 'vertical' } & ViewProps) => any
-type TabComponent = (props: { active?: boolean } & ViewProps) => any
-type ContentComponent = (props: ViewProps) => any
-
-export function createTabs<
-  C extends TabsComponent,
-  T extends TabComponent,
-  F extends ContentComponent,
->(createProps: { ContentFrame: F; TabFrame: T; TabsFrame: C }) {
-  const {
-    ContentFrame = DefaultTabsContentFrame,
-    TabFrame = DefaultTabsTabFrame,
-    TabsFrame = DefaultTabsFrame,
-  } = createProps as unknown as {
-    ContentFrame: typeof DefaultTabsContentFrame
-    TabFrame: typeof DefaultTabsTabFrame
-    TabsFrame: typeof DefaultTabsFrame
-  }
-
-  const TABS_CONTEXT = 'TabsContext'
-
-  const TAB_LIST_NAME = 'TabsList'
-
-  const TabsList = React.forwardRef<TamaguiElement, TabsListProps>(
-    (props: ScopedProps<TabsListProps>, forwardedRef) => {
-      const { __scopeTabs, loop = true, children, ...listProps } = props
-      const context = useTabsContext(__scopeTabs)
-
-      return (
-        <RovingFocusGroup
-          __scopeRovingFocusGroup={__scopeTabs || TABS_CONTEXT}
-          orientation={context.orientation}
-          dir={context.dir}
-          loop={loop}
-          asChild
-        >
-          <Group
-            role="tablist"
-            componentName={TAB_LIST_NAME}
-            aria-orientation={context.orientation}
-            ref={forwardedRef}
-            orientation={context.orientation}
-            {...listProps}
-          >
-            {children}
-          </Group>
-        </RovingFocusGroup>
-      )
-    }
-  )
-
-  TabsList.displayName = TAB_LIST_NAME
-
-  /* -------------------------------------------------------------------------------------------------
-   * TabsTrigger
-   * -----------------------------------------------------------------------------------------------*/
-
-  const TRIGGER_NAME = 'TabsTrigger'
-
-  /**
-   * @deprecated Use `TabLayout` instead
-   */
-
-  const TabsTrigger = TabFrame.styleable<ScopedProps<TabsTabProps>>(
-    (props, forwardedRef) => {
-      const {
-        __scopeTabs,
-        value,
-        disabled = false,
-        onInteraction,
-        activeStyle,
-        activeTheme,
-        unstyled = false,
-        ...triggerProps
-      } = props
-      const context = useTabsContext(__scopeTabs)
-      const triggerId = makeTriggerId(context.baseId, value)
-      const contentId = makeContentId(context.baseId, value)
-      const isSelected = value === context.value
-      const [layout, setLayout] = React.useState<TabLayout | null>(null)
-      const triggerRef = React.useRef<TamaguiElement>(null)
-      const groupItemProps = useGroupItem({ disabled: !!disabled })
-
-      React.useEffect(() => {
-        context.registerTrigger()
-        return () => context.unregisterTrigger()
-      }, [])
-
-      React.useEffect(() => {
-        if (!triggerRef.current || !isWeb) return
-
-        const el = triggerRef.current as unknown as HTMLElement
-
-        function getTriggerSize() {
-          if (!el) return
-          setLayout({
-            width: el.offsetWidth,
-            height: el.offsetHeight,
-            x: el.offsetLeft,
-            y: el.offsetTop,
-          })
-        }
-        getTriggerSize()
-
-        const observer = new ResizeObserver(getTriggerSize)
-        observer.observe(el)
-
-        return () => {
-          observer.disconnect()
-        }
-      }, [context.triggersCount])
-
-      React.useEffect(() => {
-        if (isSelected && layout) {
-          onInteraction?.('select', layout)
-        }
-      }, [isSelected, value, layout])
-
-      return (
-        <RovingFocusGroup.Item
-          __scopeRovingFocusGroup={__scopeTabs || TABS_CONTEXT}
-          asChild
-          focusable={!disabled}
-          active={isSelected}
-        >
-          <TabFrame
-            {...(!isWeb && {
-              onLayout: (event) => {
-                setLayout(event.nativeEvent.layout)
-              },
-            })}
-            onMouseEnter={composeEventHandlers(props.onMouseEnter, () => {
-              if (layout) {
-                onInteraction?.('hover', layout)
-              }
-            })}
-            onMouseLeave={composeEventHandlers(props.onMouseLeave, () => {
-              onInteraction?.('hover', null)
-            })}
-            role="tab"
-            aria-selected={isSelected}
-            aria-controls={contentId}
-            data-state={isSelected ? 'active' : 'inactive'}
-            data-disabled={disabled ? '' : undefined}
-            id={triggerId}
-            theme={activeTheme ?? null}
-            unstyled={unstyled}
-            {...(!unstyled && {
-              size: context.size,
-            })}
-            {...(isSelected && {
-              ...(!unstyled &&
-                !activeStyle && {
-                  backgroundColor: '$backgroundActive',
-                }),
-              ...(activeStyle as object),
-            })}
-            {...groupItemProps}
-            disabled={disabled ?? groupItemProps.disabled}
-            {...triggerProps}
-            ref={composeRefs(forwardedRef, triggerRef)}
-            onPress={composeEventHandlers(props.onPress ?? undefined, (event) => {
-              // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)
-              // but not when the control key is pressed (avoiding MacOS right click)
-
-              const webChecks =
-                !isWeb ||
-                ((event as unknown as React.MouseEvent).button === 0 &&
-                  (event as unknown as React.MouseEvent).ctrlKey === false)
-              if (!disabled && !isSelected && webChecks) {
-                context.onChange(value)
-              }
-            })}
-            {...(isWeb && {
-              onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
-                if ([' ', 'Enter'].includes(event.key)) {
-                  context.onChange(value)
-                  event.preventDefault()
-                }
-              }),
-              onFocus: composeEventHandlers(props.onFocus, (event) => {
-                if (layout) {
-                  onInteraction?.('focus', layout)
-                }
-                // handle "automatic" activation if necessary
-                // ie. activate tab following focus
-                const isAutomaticActivation = context.activationMode !== 'manual'
-                if (!isSelected && !disabled && isAutomaticActivation) {
-                  context.onChange(value)
-                }
-              }),
-              onBlur: composeEventHandlers(props.onBlur, () => {
-                onInteraction?.('focus', null)
-              }),
-            })}
-          />
-        </RovingFocusGroup.Item>
-      )
-    }
-  )
-
-  TabsTrigger.displayName = TRIGGER_NAME
-
-  /* -------------------------------------------------------------------------------------------------
-   * TabsContent
-   * -----------------------------------------------------------------------------------------------*/
-
-  const TabsContent = ContentFrame.styleable<TabsContentExtraProps>(function TabsContent(
-    props: ScopedProps<TabsContentProps>,
-    forwardedRef
-  ) {
-    const { __scopeTabs, value, forceMount, children, ...contentProps } = props
-    const context = useTabsContext(__scopeTabs)
-    const isSelected = value === context.value
-    const show = forceMount || isSelected
-
-    const triggerId = makeTriggerId(context.baseId, value)
-    const contentId = makeContentId(context.baseId, value)
-
-    if (!show) {
-      return null
-    }
-
-    return (
-      <ContentFrame
-        key={value}
-        data-state={isSelected ? 'active' : 'inactive'}
-        data-orientation={context.orientation}
-        role="tabpanel"
-        aria-labelledby={triggerId}
-        // @ts-ignore
-        hidden={!show}
-        id={contentId}
-        tabIndex={0}
-        {...contentProps}
-        ref={forwardedRef}
-      >
-        {children}
-      </ContentFrame>
-    )
-  })
-
-  /* -------------------------------------------------------------------------------------------------
-   * Tabs
-   * -----------------------------------------------------------------------------------------------*/
-
-  type ScopedProps<P> = P & { __scopeTabs?: string }
-  // const [createTabsContext, createTabsScope] = createContextScope(TABS_NAME, [
-  //   createRovingFocusGroupScope,
-  // ])
-  // const useRovingFocusGroupScope = createRovingFocusGroupScope()
-
-  type RovingFocusGroupProps = React.ComponentPropsWithoutRef<typeof RovingFocusGroup>
-
-  const TabsComponent = TabsFrame.styleable<TabsExtraProps>(function Tabs(
-    props: ScopedProps<TabsProps>,
-    forwardedRef
-  ) {
-    const {
-      __scopeTabs,
-      value: valueProp,
-      onValueChange,
-      defaultValue,
-      orientation = 'horizontal',
-      dir,
-      activationMode = 'manual',
-      size = '$true',
-      ...tabsProps
-    } = props
-    const direction = useDirection(dir)
-    const [value, setValue] = useControllableState({
-      prop: valueProp,
-      onChange: onValueChange,
-      defaultProp: defaultValue ?? '',
-    })
-    const [triggersCount, setTriggersCount] = React.useState(0)
-    const registerTrigger = useEvent(() => setTriggersCount((v) => v + 1))
-    const unregisterTrigger = useEvent(() => setTriggersCount((v) => v - 1))
-
-    return (
-      <SizableContext.Provider size={size}>
-        <TabsProvider
-          scope={__scopeTabs}
-          baseId={React.useId()}
-          value={value}
-          onChange={setValue}
-          orientation={orientation}
-          dir={direction}
-          activationMode={activationMode}
-          size={size}
-          registerTrigger={registerTrigger}
-          triggersCount={triggersCount}
-          unregisterTrigger={unregisterTrigger}
-        >
-          <TabsFrame
-            direction={direction}
-            data-orientation={orientation}
-            {...tabsProps}
-            ref={forwardedRef}
-          />
-        </TabsProvider>
-      </SizableContext.Provider>
-    )
-  })
-
-  // make it so it can accept a generic
-  // this broke things outside our repo, but not sure why, all non style props were missing
-  // like onPress etc
-  // as <Tab = string>(
-  //   props: TabsProps<Tab> & { ref?: React.Ref<TamaguiElement> }
-  // ) => React.JSX.Element
-
-  return withStaticProperties(TabsComponent, {
-    List: TabsList,
-    /**
-     * @deprecated Use Tabs.Tab instead
-     */
-    Trigger: TabsTrigger,
-    Tab: TabsTrigger,
-    Content: TabsContent,
-  })
-}
-/* ---------------------------------------------------------------------------------------------- */
-
-function makeTriggerId(baseId: string, value: string) {
-  return `${baseId}-trigger-${value}`
-}
-
-function makeContentId(baseId: string, value: string) {
-  return `${baseId}-content-${value}`
-}
-
-// Types
-type TabsFrameProps = GetProps<typeof DefaultTabsFrame>
-
-type TabsExtraProps<Tab = string> = {
-  /** The value for the selected tab, if controlled */
-  value?: string
-  /** The value of the tab to select by default, if uncontrolled */
-  defaultValue?: Tab
-  /** A function called when a new tab is selected */
-  onValueChange?: (value: Tab) => void
-  /**
-   * The orientation the tabs are layed out.
-   * Mainly so arrow navigation is done accordingly (left & right vs. up & down)
-   * @defaultValue horizontal
-   */
-  orientation?: RovingFocusGroupProps['orientation']
-  /**
-   * The direction of navigation between toolbar items.
-   */
-  dir?: RovingFocusGroupProps['dir']
-  /**
-   * Whether a tab is activated automatically or manually. Only supported in web.
-   * @defaultValue automatic
-   * */
-  activationMode?: 'automatic' | 'manual'
-}
-
-type TabsProps<Tab = string> = TabsFrameProps & TabsExtraProps<Tab>
-
-type TabsListFrameProps = GroupProps
-
-type TabsListProps = TabsListFrameProps & {
-  /**
-   * Whether to loop over after reaching the end or start of the items
-   * @default true
-   */
-  loop?: boolean
-}
-
-type InteractionType = 'select' | 'focus' | 'hover'
-
-type TabLayout = LayoutRectangle
-
-type TabsTriggerFrameProps = GetProps<typeof DefaultTabsTabFrame>
-
-/**
- * @deprecated use `TabTabsProps` instead
- */
-type TabsTriggerProps = TabsTriggerFrameProps & {
-  /** The value for the tabs state to be changed to after activation of the trigger */
-  value: string
-
-  /** Used for making custom indicators when trigger interacted with */
-  onInteraction?: (type: InteractionType, layout: TabLayout | null) => void
-
-  /** Custom styles to apply when tab is active */
-  activeStyle?: TabsTriggerFrameProps
-
-  /** Theme to apply when tab is active (use null for no theme) */
-  activeTheme?: string | null
-}
-
-type TabsTabProps = TabsTriggerProps
-
-type TabsTriggerLayout = LayoutRectangle
-
-type TabsContentFrameProps = GetProps<typeof DefaultTabsContentFrame>
-
-type TabsContentExtraProps = {
-  /** Will show the content when the value matches the state of Tabs root */
-  value: string
-
-  /**
-   * Used to force mounting when more control is needed. Useful when
-   * controlling animation with Tamagui animations.
-   */
-  forceMount?: boolean
-}
-
-type TabsContentProps = TabsContentFrameProps & TabsContentExtraProps
-
-export type {
-  TabLayout,
-  TabsContentProps,
-  TabsListProps,
-  TabsProps,
-  TabsTabProps,
-  TabsTriggerLayout,
-  TabsTriggerProps,
-}