npm - @tamagui/tabs - Versions diffs - 1.14.3 → 1.14.5 - Mend

@tamagui/tabs 1.14.3 → 1.14.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/dist/cjs/Tabs.js CHANGED Viewed

@@ -312,7 +312,7 @@ const Tabs = (0, import_web.withStaticProperties)(
           TabsProvider,
           {
             scope: __scopeTabs,
-            baseId: (0, import_web.useId)(),
+            baseId: React.useId(),
             value,
             onChange: setValue,
             orientation,

package/dist/cjs/Tabs.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Tabs.tsx"],
-  "sourcesContent": ["import type { Scope } from '@tamagui/create-context'\nimport { createContextScope } from '@tamagui/create-context'\nimport { getButtonSized } from '@tamagui/get-button-sized'\nimport { Group, GroupProps, useGroupItem } from '@tamagui/group'\nimport { RovingFocusGroup, createRovingFocusGroupScope } from '@tamagui/roving-focus'\nimport { SizableStack, ThemeableStack, ThemeableStackProps } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport { useDirection } from '@tamagui/use-direction'\nimport {\n  GetProps,\n  SizeTokens,\n  Theme,\n  composeEventHandlers,\n  composeRefs,\n  isWeb,\n  styled,\n  useEvent,\n  useId,\n  withStaticProperties,\n} from '@tamagui/web'\nimport * as React from 'react'\nimport type { LayoutRectangle } from 'react-native'\n\n/* -------------------------------------------------------------------------------------------------\n * TabsList\n * -----------------------------------------------------------------------------------------------*/\n\nconst TAB_LIST_NAME = 'TabsList'\n\nconst TabsListFrame = styled(Group, {\n  name: TAB_LIST_NAME,\n  focusable: true,\n  // defaultVariants: {\n  //   flexGrow: 0,\n  // },\n})\n\ntype TabsListFrameProps = GroupProps\n\ntype TabsListProps = TabsListFrameProps & {\n  /**\n   * Whether to loop over after reaching the end or start of the items\n   * @default true\n   */\n  loop?: boolean\n}\n\nconst TabsList = TabsListFrame.extractable(\n  React.forwardRef<HTMLDivElement, TabsListProps>(\n    (props: ScopedProps<TabsListProps>, forwardedRef) => {\n      const { __scopeTabs, loop = true, children, ...listProps } = props\n      const context = useTabsContext(TAB_LIST_NAME, __scopeTabs)\n      const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs)\n\n      return (\n        <RovingFocusGroup\n          asChild\n          orientation={context.orientation}\n          dir={context.dir}\n          loop={loop}\n          {...rovingFocusGroupScope}\n        >\n          <TabsListFrame\n            role=\"tablist\"\n            aria-orientation={context.orientation}\n            ref={forwardedRef}\n            axis={context.orientation}\n            {...listProps}\n          >\n            {children}\n          </TabsListFrame>\n        </RovingFocusGroup>\n      )\n    }\n  )\n)\n\nTabsList.displayName = TAB_LIST_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * TabsTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'TabsTrigger'\n\nconst TabsTriggerFrame = styled(ThemeableStack, {\n  name: TRIGGER_NAME,\n  justifyContent: 'center',\n  alignItems: 'center',\n  flexWrap: 'nowrap',\n  flexDirection: 'row',\n  cursor: 'pointer',\n  focusable: true,\n\n  variants: {\n    size: {\n      '...size': getButtonSized,\n    },\n    disabled: {\n      true: {\n        pointerEvents: 'none',\n      },\n    },\n    unstyled: {\n      false: {\n        backgroundColor: '$background',\n\n        pressStyle: {\n          backgroundColor: '$backgroundPress',\n        },\n\n        hoverStyle: {\n          backgroundColor: '$backgroundHover',\n        },\n\n        focusStyle: {\n          backgroundColor: '$backgroundFocus',\n        },\n      },\n    },\n  } as const,\n  defaultVariants: {\n    unstyled: false,\n  },\n})\n\n/**\n * @deprecated Use `TabLayout` instead\n */\ntype TabsTriggerLayout = LayoutRectangle\ntype TabLayout = LayoutRectangle\ntype InteractionType = 'select' | 'focus' | 'hover'\n\ntype TabsTriggerFrameProps = GetProps<typeof TabsTriggerFrame>\n/**\n * @deprecated use `TabTabsProps` instead\n */\ntype TabsTriggerProps = TabsTriggerFrameProps & {\n  /** The value for the tabs state to be changed to after activation of the trigger */\n  value: string\n\n  /** Used for making custom indicators when trigger interacted with */\n  onInteraction?: (type: InteractionType, layout: TabLayout | null) => void\n}\n\ntype TabsTabProps = TabsTriggerProps\n\nconst TabsTrigger = TabsTriggerFrame.extractable(\n  React.forwardRef<HTMLButtonElement, TabsTriggerProps>(\n    (props: ScopedProps<TabsTriggerProps>, forwardedRef) => {\n      const {\n        __scopeTabs,\n        value,\n        disabled = false,\n        onInteraction,\n        ...triggerProps\n      } = props\n      const context = useTabsContext(TRIGGER_NAME, __scopeTabs)\n      const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs)\n      const triggerId = makeTriggerId(context.baseId, value)\n      const contentId = makeContentId(context.baseId, value)\n      const isSelected = value === context.value\n      const [layout, setLayout] = React.useState<TabLayout | null>(null)\n      const triggerRef = React.useRef<HTMLButtonElement>(null)\n      const groupItemProps = useGroupItem({ disabled })\n\n      React.useEffect(() => {\n        context.registerTrigger()\n        return () => context.unregisterTrigger()\n      }, [])\n\n      React.useEffect(() => {\n        if (!triggerRef.current || !isWeb) return\n\n        function getTriggerSize() {\n          if (!triggerRef.current) return\n          setLayout({\n            width: triggerRef.current.offsetWidth,\n            height: triggerRef.current.offsetHeight,\n            x: triggerRef.current.offsetLeft,\n            y: triggerRef.current.offsetTop,\n          })\n        }\n        getTriggerSize()\n\n        const observer = new ResizeObserver(getTriggerSize)\n        observer.observe(triggerRef.current)\n\n        return () => {\n          if (!triggerRef.current) return\n          observer.unobserve(triggerRef.current)\n        }\n      }, [context.triggersCount])\n\n      React.useEffect(() => {\n        if (isSelected && layout) {\n          onInteraction?.('select', layout)\n        }\n      }, [isSelected, value, layout])\n\n      return (\n        <Theme forceClassName name={isSelected ? 'active' : null}>\n          <RovingFocusGroup.Item\n            asChild\n            {...rovingFocusGroupScope}\n            focusable={!disabled}\n            active={isSelected}\n          >\n            <TabsTriggerFrame\n              onLayout={(event) => {\n                if (!isWeb) {\n                  setLayout(event.nativeEvent.layout)\n                }\n              }}\n              onHoverIn={composeEventHandlers(props.onHoverIn, () => {\n                if (layout) {\n                  onInteraction?.('hover', layout)\n                }\n              })}\n              onHoverOut={composeEventHandlers(props.onHoverOut, () => {\n                onInteraction?.('hover', null)\n              })}\n              role=\"tab\"\n              aria-selected={isSelected}\n              aria-controls={contentId}\n              data-state={isSelected ? 'active' : 'inactive'}\n              data-disabled={disabled ? '' : undefined}\n              disabled={disabled}\n              id={triggerId}\n              // @ts-ignore\n              size={context.size}\n              {...triggerProps}\n              ref={composeRefs(forwardedRef, triggerRef)}\n              onPress={composeEventHandlers(props.onPress ?? undefined, (event) => {\n                // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n                // but not when the control key is pressed (avoiding MacOS right click)\n\n                const webChecks =\n                  !isWeb ||\n                  ((event as unknown as React.MouseEvent).button === 0 &&\n                    (event as unknown as React.MouseEvent).ctrlKey === false)\n                if (!disabled && !isSelected && webChecks) {\n                  context.onChange(value)\n                } else {\n                  // prevent focus to avoid accidental activation\n                  event.preventDefault()\n                }\n              })}\n              {...(isWeb && {\n                type: 'button',\n                onKeyDown: composeEventHandlers(\n                  (props as React.HTMLProps<HTMLButtonElement>).onKeyDown,\n                  (event) => {\n                    if ([' ', 'Enter'].includes(event.key)) {\n                      context.onChange(value)\n                      event.preventDefault()\n                    }\n                  }\n                ),\n                onFocus: composeEventHandlers(props.onFocus, (event) => {\n                  if (layout) {\n                    onInteraction?.('focus', layout)\n                  }\n                  // handle \"automatic\" activation if necessary\n                  // ie. activate tab following focus\n                  const isAutomaticActivation = context.activationMode !== 'manual'\n                  if (!isSelected && !disabled && isAutomaticActivation) {\n                    context.onChange(value)\n                  }\n                }),\n                onBlur: composeEventHandlers(props.onFocus, () => {\n                  onInteraction?.('focus', null)\n                }),\n              })}\n              {...groupItemProps}\n            />\n          </RovingFocusGroup.Item>\n        </Theme>\n      )\n    }\n  )\n)\n\nTabsTrigger.displayName = TRIGGER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * TabsContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'TabsContent'\n\nconst TabsContentFrame = styled(ThemeableStack, {\n  name: CONTENT_NAME,\n})\ntype TabsContentFrameProps = GetProps<typeof TabsContentFrame>\ntype TabsContentProps = TabsContentFrameProps & {\n  /** Will show the content when the value matches the state of Tabs root */\n  value: string\n\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with Tamagui animations.\n   */\n  forceMount?: true\n}\n\nconst TabsContent = TabsContentFrame.extractable(\n  React.forwardRef<HTMLDivElement, TabsContentProps>(\n    (props: ScopedProps<TabsContentProps>, forwardedRef) => {\n      const { __scopeTabs, value, forceMount, children, ...contentProps } = props\n      const context = useTabsContext(CONTENT_NAME, __scopeTabs)\n      const isSelected = value === context.value\n      const show = forceMount || isSelected\n\n      const triggerId = makeTriggerId(context.baseId, value)\n      const contentId = makeContentId(context.baseId, value)\n\n      if (!show) return null\n      return (\n        <TabsContentFrame\n          key={value}\n          data-state={isSelected ? 'active' : 'inactive'}\n          data-orientation={context.orientation}\n          role=\"tabpanel\"\n          aria-labelledby={triggerId}\n          // @ts-ignore\n          hidden={!show}\n          id={contentId}\n          tabIndex={0}\n          {...contentProps}\n          ref={forwardedRef}\n        >\n          {children}\n        </TabsContentFrame>\n      )\n    }\n  )\n)\n\nTabsContent.displayName = CONTENT_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Tabs\n * -----------------------------------------------------------------------------------------------*/\n\nconst TABS_NAME = 'Tabs'\n\ntype ScopedProps<P> = P & { __scopeTabs?: Scope }\nconst [createTabsContext, createTabsScope] = createContextScope(TABS_NAME, [\n  createRovingFocusGroupScope,\n])\nconst useRovingFocusGroupScope = createRovingFocusGroupScope()\n\ntype TabsContextValue = {\n  baseId: string\n  value?: string\n  onChange: (value: string) => void\n  orientation?: TabsProps['orientation']\n  dir?: TabsProps['dir']\n  activationMode?: TabsProps['activationMode']\n  size: SizeTokens\n  registerTrigger: () => void\n  unregisterTrigger: () => void\n  triggersCount: number\n}\n\nconst [TabsProvider, useTabsContext] = createTabsContext<TabsContextValue>(TABS_NAME)\n\nconst TabsFrame = styled(SizableStack, {\n  name: TABS_NAME,\n})\ntype RovingFocusGroupProps = React.ComponentPropsWithoutRef<typeof RovingFocusGroup>\ntype TabsFrameProps = GetProps<typeof TabsFrame>\ntype TabsProps = TabsFrameProps & {\n  /** The value for the selected tab, if controlled */\n  value?: string\n  /** The value of the tab to select by default, if uncontrolled */\n  defaultValue?: string\n  /** A function called when a new tab is selected */\n  onValueChange?: (value: string) => void\n  /**\n   * The orientation the tabs are layed out.\n   * Mainly so arrow navigation is done accordingly (left & right vs. up & down)\n   * @defaultValue horizontal\n   */\n  orientation?: RovingFocusGroupProps['orientation']\n  /**\n   * The direction of navigation between toolbar items.\n   */\n  dir?: RovingFocusGroupProps['dir']\n  /**\n   * Whether a tab is activated automatically or manually. Only supported in web.\n   * @defaultValue automatic\n   * */\n  activationMode?: 'automatic' | 'manual'\n}\n\nexport const Tabs = withStaticProperties(\n  TabsFrame.extractable(\n    React.forwardRef<HTMLDivElement, TabsProps>(\n      (props: ScopedProps<TabsProps>, forwardedRef) => {\n        const {\n          __scopeTabs,\n          value: valueProp,\n          onValueChange,\n          defaultValue,\n          orientation = 'horizontal',\n          dir,\n          activationMode = 'automatic',\n          size = '$true',\n          ...tabsProps\n        } = props\n        const direction = useDirection(dir)\n        const [value, setValue] = useControllableState({\n          prop: valueProp,\n          onChange: onValueChange,\n          defaultProp: defaultValue ?? '',\n        })\n        const [triggersCount, setTriggersCount] = React.useState(0)\n        const registerTrigger = useEvent(() => setTriggersCount((v) => v + 1))\n        const unregisterTrigger = useEvent(() => setTriggersCount((v) => v - 1))\n\n        return (\n          <TabsProvider\n            scope={__scopeTabs}\n            baseId={useId()}\n            value={value}\n            onChange={setValue}\n            orientation={orientation}\n            dir={direction}\n            activationMode={activationMode}\n            size={size}\n            registerTrigger={registerTrigger}\n            triggersCount={triggersCount}\n            unregisterTrigger={unregisterTrigger}\n          >\n            <TabsFrame\n              direction={direction}\n              //   dir={direction}\n              data-orientation={orientation}\n              {...tabsProps}\n              ref={forwardedRef}\n            />\n          </TabsProvider>\n        )\n      }\n    )\n  ),\n  {\n    List: TabsList,\n    /**\n     * @deprecated Use Tabs.Tab instead\n     */\n    Trigger: TabsTrigger,\n    Tab: TabsTrigger,\n    Content: TabsContent,\n  }\n)\nTabs.displayName = TABS_NAME\n\n/* ---------------------------------------------------------------------------------------------- */\n\nfunction makeTriggerId(baseId: string, value: string) {\n  return `${baseId}-trigger-${value}`\n}\n\nfunction makeContentId(baseId: string, value: string) {\n  return `${baseId}-content-${value}`\n}\n\nexport type {\n  TabsProps,\n  TabsListProps,\n  TabsTriggerProps,\n  TabsTriggerLayout,\n  TabsTabProps,\n  TabsContentProps,\n  TabLayout,\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { Scope } from '@tamagui/create-context'\nimport { createContextScope } from '@tamagui/create-context'\nimport { getButtonSized } from '@tamagui/get-button-sized'\nimport { Group, GroupProps, useGroupItem } from '@tamagui/group'\nimport { RovingFocusGroup, createRovingFocusGroupScope } from '@tamagui/roving-focus'\nimport { SizableStack, ThemeableStack, ThemeableStackProps } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport { useDirection } from '@tamagui/use-direction'\nimport {\n  GetProps,\n  SizeTokens,\n  Theme,\n  composeEventHandlers,\n  composeRefs,\n  isWeb,\n  styled,\n  useEvent,\n  withStaticProperties,\n} from '@tamagui/web'\nimport * as React from 'react'\nimport type { LayoutRectangle } from 'react-native'\n\n/* -------------------------------------------------------------------------------------------------\n * TabsList\n * -----------------------------------------------------------------------------------------------*/\n\nconst TAB_LIST_NAME = 'TabsList'\n\nconst TabsListFrame = styled(Group, {\n  name: TAB_LIST_NAME,\n  focusable: true,\n  // defaultVariants: {\n  //   flexGrow: 0,\n  // },\n})\n\ntype TabsListFrameProps = GroupProps\n\ntype TabsListProps = TabsListFrameProps & {\n  /**\n   * Whether to loop over after reaching the end or start of the items\n   * @default true\n   */\n  loop?: boolean\n}\n\nconst TabsList = TabsListFrame.extractable(\n  React.forwardRef<HTMLDivElement, TabsListProps>(\n    (props: ScopedProps<TabsListProps>, forwardedRef) => {\n      const { __scopeTabs, loop = true, children, ...listProps } = props\n      const context = useTabsContext(TAB_LIST_NAME, __scopeTabs)\n      const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs)\n\n      return (\n        <RovingFocusGroup\n          asChild\n          orientation={context.orientation}\n          dir={context.dir}\n          loop={loop}\n          {...rovingFocusGroupScope}\n        >\n          <TabsListFrame\n            role=\"tablist\"\n            aria-orientation={context.orientation}\n            ref={forwardedRef}\n            axis={context.orientation}\n            {...listProps}\n          >\n            {children}\n          </TabsListFrame>\n        </RovingFocusGroup>\n      )\n    }\n  )\n)\n\nTabsList.displayName = TAB_LIST_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * TabsTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'TabsTrigger'\n\nconst TabsTriggerFrame = styled(ThemeableStack, {\n  name: TRIGGER_NAME,\n  justifyContent: 'center',\n  alignItems: 'center',\n  flexWrap: 'nowrap',\n  flexDirection: 'row',\n  cursor: 'pointer',\n  focusable: true,\n\n  variants: {\n    size: {\n      '...size': getButtonSized,\n    },\n    disabled: {\n      true: {\n        pointerEvents: 'none',\n      },\n    },\n    unstyled: {\n      false: {\n        backgroundColor: '$background',\n\n        pressStyle: {\n          backgroundColor: '$backgroundPress',\n        },\n\n        hoverStyle: {\n          backgroundColor: '$backgroundHover',\n        },\n\n        focusStyle: {\n          backgroundColor: '$backgroundFocus',\n        },\n      },\n    },\n  } as const,\n  defaultVariants: {\n    unstyled: false,\n  },\n})\n\n/**\n * @deprecated Use `TabLayout` instead\n */\ntype TabsTriggerLayout = LayoutRectangle\ntype TabLayout = LayoutRectangle\ntype InteractionType = 'select' | 'focus' | 'hover'\n\ntype TabsTriggerFrameProps = GetProps<typeof TabsTriggerFrame>\n/**\n * @deprecated use `TabTabsProps` instead\n */\ntype TabsTriggerProps = TabsTriggerFrameProps & {\n  /** The value for the tabs state to be changed to after activation of the trigger */\n  value: string\n\n  /** Used for making custom indicators when trigger interacted with */\n  onInteraction?: (type: InteractionType, layout: TabLayout | null) => void\n}\n\ntype TabsTabProps = TabsTriggerProps\n\nconst TabsTrigger = TabsTriggerFrame.extractable(\n  React.forwardRef<HTMLButtonElement, TabsTriggerProps>(\n    (props: ScopedProps<TabsTriggerProps>, forwardedRef) => {\n      const {\n        __scopeTabs,\n        value,\n        disabled = false,\n        onInteraction,\n        ...triggerProps\n      } = props\n      const context = useTabsContext(TRIGGER_NAME, __scopeTabs)\n      const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs)\n      const triggerId = makeTriggerId(context.baseId, value)\n      const contentId = makeContentId(context.baseId, value)\n      const isSelected = value === context.value\n      const [layout, setLayout] = React.useState<TabLayout | null>(null)\n      const triggerRef = React.useRef<HTMLButtonElement>(null)\n      const groupItemProps = useGroupItem({ disabled })\n\n      React.useEffect(() => {\n        context.registerTrigger()\n        return () => context.unregisterTrigger()\n      }, [])\n\n      React.useEffect(() => {\n        if (!triggerRef.current || !isWeb) return\n\n        function getTriggerSize() {\n          if (!triggerRef.current) return\n          setLayout({\n            width: triggerRef.current.offsetWidth,\n            height: triggerRef.current.offsetHeight,\n            x: triggerRef.current.offsetLeft,\n            y: triggerRef.current.offsetTop,\n          })\n        }\n        getTriggerSize()\n\n        const observer = new ResizeObserver(getTriggerSize)\n        observer.observe(triggerRef.current)\n\n        return () => {\n          if (!triggerRef.current) return\n          observer.unobserve(triggerRef.current)\n        }\n      }, [context.triggersCount])\n\n      React.useEffect(() => {\n        if (isSelected && layout) {\n          onInteraction?.('select', layout)\n        }\n      }, [isSelected, value, layout])\n\n      return (\n        <Theme forceClassName name={isSelected ? 'active' : null}>\n          <RovingFocusGroup.Item\n            asChild\n            {...rovingFocusGroupScope}\n            focusable={!disabled}\n            active={isSelected}\n          >\n            <TabsTriggerFrame\n              onLayout={(event) => {\n                if (!isWeb) {\n                  setLayout(event.nativeEvent.layout)\n                }\n              }}\n              onHoverIn={composeEventHandlers(props.onHoverIn, () => {\n                if (layout) {\n                  onInteraction?.('hover', layout)\n                }\n              })}\n              onHoverOut={composeEventHandlers(props.onHoverOut, () => {\n                onInteraction?.('hover', null)\n              })}\n              role=\"tab\"\n              aria-selected={isSelected}\n              aria-controls={contentId}\n              data-state={isSelected ? 'active' : 'inactive'}\n              data-disabled={disabled ? '' : undefined}\n              disabled={disabled}\n              id={triggerId}\n              // @ts-ignore\n              size={context.size}\n              {...triggerProps}\n              ref={composeRefs(forwardedRef, triggerRef)}\n              onPress={composeEventHandlers(props.onPress ?? undefined, (event) => {\n                // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n                // but not when the control key is pressed (avoiding MacOS right click)\n\n                const webChecks =\n                  !isWeb ||\n                  ((event as unknown as React.MouseEvent).button === 0 &&\n                    (event as unknown as React.MouseEvent).ctrlKey === false)\n                if (!disabled && !isSelected && webChecks) {\n                  context.onChange(value)\n                } else {\n                  // prevent focus to avoid accidental activation\n                  event.preventDefault()\n                }\n              })}\n              {...(isWeb && {\n                type: 'button',\n                onKeyDown: composeEventHandlers(\n                  (props as React.HTMLProps<HTMLButtonElement>).onKeyDown,\n                  (event) => {\n                    if ([' ', 'Enter'].includes(event.key)) {\n                      context.onChange(value)\n                      event.preventDefault()\n                    }\n                  }\n                ),\n                onFocus: composeEventHandlers(props.onFocus, (event) => {\n                  if (layout) {\n                    onInteraction?.('focus', layout)\n                  }\n                  // handle \"automatic\" activation if necessary\n                  // ie. activate tab following focus\n                  const isAutomaticActivation = context.activationMode !== 'manual'\n                  if (!isSelected && !disabled && isAutomaticActivation) {\n                    context.onChange(value)\n                  }\n                }),\n                onBlur: composeEventHandlers(props.onFocus, () => {\n                  onInteraction?.('focus', null)\n                }),\n              })}\n              {...groupItemProps}\n            />\n          </RovingFocusGroup.Item>\n        </Theme>\n      )\n    }\n  )\n)\n\nTabsTrigger.displayName = TRIGGER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * TabsContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'TabsContent'\n\nconst TabsContentFrame = styled(ThemeableStack, {\n  name: CONTENT_NAME,\n})\ntype TabsContentFrameProps = GetProps<typeof TabsContentFrame>\ntype TabsContentProps = TabsContentFrameProps & {\n  /** Will show the content when the value matches the state of Tabs root */\n  value: string\n\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with Tamagui animations.\n   */\n  forceMount?: true\n}\n\nconst TabsContent = TabsContentFrame.extractable(\n  React.forwardRef<HTMLDivElement, TabsContentProps>(\n    (props: ScopedProps<TabsContentProps>, forwardedRef) => {\n      const { __scopeTabs, value, forceMount, children, ...contentProps } = props\n      const context = useTabsContext(CONTENT_NAME, __scopeTabs)\n      const isSelected = value === context.value\n      const show = forceMount || isSelected\n\n      const triggerId = makeTriggerId(context.baseId, value)\n      const contentId = makeContentId(context.baseId, value)\n\n      if (!show) return null\n      return (\n        <TabsContentFrame\n          key={value}\n          data-state={isSelected ? 'active' : 'inactive'}\n          data-orientation={context.orientation}\n          role=\"tabpanel\"\n          aria-labelledby={triggerId}\n          // @ts-ignore\n          hidden={!show}\n          id={contentId}\n          tabIndex={0}\n          {...contentProps}\n          ref={forwardedRef}\n        >\n          {children}\n        </TabsContentFrame>\n      )\n    }\n  )\n)\n\nTabsContent.displayName = CONTENT_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Tabs\n * -----------------------------------------------------------------------------------------------*/\n\nconst TABS_NAME = 'Tabs'\n\ntype ScopedProps<P> = P & { __scopeTabs?: Scope }\nconst [createTabsContext, createTabsScope] = createContextScope(TABS_NAME, [\n  createRovingFocusGroupScope,\n])\nconst useRovingFocusGroupScope = createRovingFocusGroupScope()\n\ntype TabsContextValue = {\n  baseId: string\n  value?: string\n  onChange: (value: string) => void\n  orientation?: TabsProps['orientation']\n  dir?: TabsProps['dir']\n  activationMode?: TabsProps['activationMode']\n  size: SizeTokens\n  registerTrigger: () => void\n  unregisterTrigger: () => void\n  triggersCount: number\n}\n\nconst [TabsProvider, useTabsContext] = createTabsContext<TabsContextValue>(TABS_NAME)\n\nconst TabsFrame = styled(SizableStack, {\n  name: TABS_NAME,\n})\ntype RovingFocusGroupProps = React.ComponentPropsWithoutRef<typeof RovingFocusGroup>\ntype TabsFrameProps = GetProps<typeof TabsFrame>\ntype TabsProps = TabsFrameProps & {\n  /** The value for the selected tab, if controlled */\n  value?: string\n  /** The value of the tab to select by default, if uncontrolled */\n  defaultValue?: string\n  /** A function called when a new tab is selected */\n  onValueChange?: (value: string) => void\n  /**\n   * The orientation the tabs are layed out.\n   * Mainly so arrow navigation is done accordingly (left & right vs. up & down)\n   * @defaultValue horizontal\n   */\n  orientation?: RovingFocusGroupProps['orientation']\n  /**\n   * The direction of navigation between toolbar items.\n   */\n  dir?: RovingFocusGroupProps['dir']\n  /**\n   * Whether a tab is activated automatically or manually. Only supported in web.\n   * @defaultValue automatic\n   * */\n  activationMode?: 'automatic' | 'manual'\n}\n\nexport const Tabs = withStaticProperties(\n  TabsFrame.extractable(\n    React.forwardRef<HTMLDivElement, TabsProps>(\n      (props: ScopedProps<TabsProps>, forwardedRef) => {\n        const {\n          __scopeTabs,\n          value: valueProp,\n          onValueChange,\n          defaultValue,\n          orientation = 'horizontal',\n          dir,\n          activationMode = 'automatic',\n          size = '$true',\n          ...tabsProps\n        } = props\n        const direction = useDirection(dir)\n        const [value, setValue] = useControllableState({\n          prop: valueProp,\n          onChange: onValueChange,\n          defaultProp: defaultValue ?? '',\n        })\n        const [triggersCount, setTriggersCount] = React.useState(0)\n        const registerTrigger = useEvent(() => setTriggersCount((v) => v + 1))\n        const unregisterTrigger = useEvent(() => setTriggersCount((v) => v - 1))\n\n        return (\n          <TabsProvider\n            scope={__scopeTabs}\n            baseId={React.useId()}\n            value={value}\n            onChange={setValue}\n            orientation={orientation}\n            dir={direction}\n            activationMode={activationMode}\n            size={size}\n            registerTrigger={registerTrigger}\n            triggersCount={triggersCount}\n            unregisterTrigger={unregisterTrigger}\n          >\n            <TabsFrame\n              direction={direction}\n              //   dir={direction}\n              data-orientation={orientation}\n              {...tabsProps}\n              ref={forwardedRef}\n            />\n          </TabsProvider>\n        )\n      }\n    )\n  ),\n  {\n    List: TabsList,\n    /**\n     * @deprecated Use Tabs.Tab instead\n     */\n    Trigger: TabsTrigger,\n    Tab: TabsTrigger,\n    Content: TabsContent,\n  }\n)\nTabs.displayName = TABS_NAME\n\n/* ---------------------------------------------------------------------------------------------- */\n\nfunction makeTriggerId(baseId: string, value: string) {\n  return `${baseId}-trigger-${value}`\n}\n\nfunction makeContentId(baseId: string, value: string) {\n  return `${baseId}-content-${value}`\n}\n\nexport type {\n  TabsProps,\n  TabsListProps,\n  TabsTriggerProps,\n  TabsTriggerLayout,\n  TabsTabProps,\n  TabsContentProps,\n  TabLayout,\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/Tabs.js CHANGED Viewed

@@ -13,7 +13,6 @@ import {
   isWeb,
   styled,
   useEvent,
-  useId,
   withStaticProperties
 } from "@tamagui/web";
 import * as React from "react";
@@ -288,7 +287,7 @@ const Tabs = withStaticProperties(
           TabsProvider,
           {
             scope: __scopeTabs,
-            baseId: useId(),
+            baseId: React.useId(),
             value,
             onChange: setValue,
             orientation,

package/dist/esm/Tabs.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Tabs.tsx"],
-  "sourcesContent": ["import type { Scope } from '@tamagui/create-context'\nimport { createContextScope } from '@tamagui/create-context'\nimport { getButtonSized } from '@tamagui/get-button-sized'\nimport { Group, GroupProps, useGroupItem } from '@tamagui/group'\nimport { RovingFocusGroup, createRovingFocusGroupScope } from '@tamagui/roving-focus'\nimport { SizableStack, ThemeableStack, ThemeableStackProps } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport { useDirection } from '@tamagui/use-direction'\nimport {\n  GetProps,\n  SizeTokens,\n  Theme,\n  composeEventHandlers,\n  composeRefs,\n  isWeb,\n  styled,\n  useEvent,\n  useId,\n  withStaticProperties,\n} from '@tamagui/web'\nimport * as React from 'react'\nimport type { LayoutRectangle } from 'react-native'\n\n/* -------------------------------------------------------------------------------------------------\n * TabsList\n * -----------------------------------------------------------------------------------------------*/\n\nconst TAB_LIST_NAME = 'TabsList'\n\nconst TabsListFrame = styled(Group, {\n  name: TAB_LIST_NAME,\n  focusable: true,\n  // defaultVariants: {\n  //   flexGrow: 0,\n  // },\n})\n\ntype TabsListFrameProps = GroupProps\n\ntype TabsListProps = TabsListFrameProps & {\n  /**\n   * Whether to loop over after reaching the end or start of the items\n   * @default true\n   */\n  loop?: boolean\n}\n\nconst TabsList = TabsListFrame.extractable(\n  React.forwardRef<HTMLDivElement, TabsListProps>(\n    (props: ScopedProps<TabsListProps>, forwardedRef) => {\n      const { __scopeTabs, loop = true, children, ...listProps } = props\n      const context = useTabsContext(TAB_LIST_NAME, __scopeTabs)\n      const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs)\n\n      return (\n        <RovingFocusGroup\n          asChild\n          orientation={context.orientation}\n          dir={context.dir}\n          loop={loop}\n          {...rovingFocusGroupScope}\n        >\n          <TabsListFrame\n            role=\"tablist\"\n            aria-orientation={context.orientation}\n            ref={forwardedRef}\n            axis={context.orientation}\n            {...listProps}\n          >\n            {children}\n          </TabsListFrame>\n        </RovingFocusGroup>\n      )\n    }\n  )\n)\n\nTabsList.displayName = TAB_LIST_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * TabsTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'TabsTrigger'\n\nconst TabsTriggerFrame = styled(ThemeableStack, {\n  name: TRIGGER_NAME,\n  justifyContent: 'center',\n  alignItems: 'center',\n  flexWrap: 'nowrap',\n  flexDirection: 'row',\n  cursor: 'pointer',\n  focusable: true,\n\n  variants: {\n    size: {\n      '...size': getButtonSized,\n    },\n    disabled: {\n      true: {\n        pointerEvents: 'none',\n      },\n    },\n    unstyled: {\n      false: {\n        backgroundColor: '$background',\n\n        pressStyle: {\n          backgroundColor: '$backgroundPress',\n        },\n\n        hoverStyle: {\n          backgroundColor: '$backgroundHover',\n        },\n\n        focusStyle: {\n          backgroundColor: '$backgroundFocus',\n        },\n      },\n    },\n  } as const,\n  defaultVariants: {\n    unstyled: false,\n  },\n})\n\n/**\n * @deprecated Use `TabLayout` instead\n */\ntype TabsTriggerLayout = LayoutRectangle\ntype TabLayout = LayoutRectangle\ntype InteractionType = 'select' | 'focus' | 'hover'\n\ntype TabsTriggerFrameProps = GetProps<typeof TabsTriggerFrame>\n/**\n * @deprecated use `TabTabsProps` instead\n */\ntype TabsTriggerProps = TabsTriggerFrameProps & {\n  /** The value for the tabs state to be changed to after activation of the trigger */\n  value: string\n\n  /** Used for making custom indicators when trigger interacted with */\n  onInteraction?: (type: InteractionType, layout: TabLayout | null) => void\n}\n\ntype TabsTabProps = TabsTriggerProps\n\nconst TabsTrigger = TabsTriggerFrame.extractable(\n  React.forwardRef<HTMLButtonElement, TabsTriggerProps>(\n    (props: ScopedProps<TabsTriggerProps>, forwardedRef) => {\n      const {\n        __scopeTabs,\n        value,\n        disabled = false,\n        onInteraction,\n        ...triggerProps\n      } = props\n      const context = useTabsContext(TRIGGER_NAME, __scopeTabs)\n      const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs)\n      const triggerId = makeTriggerId(context.baseId, value)\n      const contentId = makeContentId(context.baseId, value)\n      const isSelected = value === context.value\n      const [layout, setLayout] = React.useState<TabLayout | null>(null)\n      const triggerRef = React.useRef<HTMLButtonElement>(null)\n      const groupItemProps = useGroupItem({ disabled })\n\n      React.useEffect(() => {\n        context.registerTrigger()\n        return () => context.unregisterTrigger()\n      }, [])\n\n      React.useEffect(() => {\n        if (!triggerRef.current || !isWeb) return\n\n        function getTriggerSize() {\n          if (!triggerRef.current) return\n          setLayout({\n            width: triggerRef.current.offsetWidth,\n            height: triggerRef.current.offsetHeight,\n            x: triggerRef.current.offsetLeft,\n            y: triggerRef.current.offsetTop,\n          })\n        }\n        getTriggerSize()\n\n        const observer = new ResizeObserver(getTriggerSize)\n        observer.observe(triggerRef.current)\n\n        return () => {\n          if (!triggerRef.current) return\n          observer.unobserve(triggerRef.current)\n        }\n      }, [context.triggersCount])\n\n      React.useEffect(() => {\n        if (isSelected && layout) {\n          onInteraction?.('select', layout)\n        }\n      }, [isSelected, value, layout])\n\n      return (\n        <Theme forceClassName name={isSelected ? 'active' : null}>\n          <RovingFocusGroup.Item\n            asChild\n            {...rovingFocusGroupScope}\n            focusable={!disabled}\n            active={isSelected}\n          >\n            <TabsTriggerFrame\n              onLayout={(event) => {\n                if (!isWeb) {\n                  setLayout(event.nativeEvent.layout)\n                }\n              }}\n              onHoverIn={composeEventHandlers(props.onHoverIn, () => {\n                if (layout) {\n                  onInteraction?.('hover', layout)\n                }\n              })}\n              onHoverOut={composeEventHandlers(props.onHoverOut, () => {\n                onInteraction?.('hover', null)\n              })}\n              role=\"tab\"\n              aria-selected={isSelected}\n              aria-controls={contentId}\n              data-state={isSelected ? 'active' : 'inactive'}\n              data-disabled={disabled ? '' : undefined}\n              disabled={disabled}\n              id={triggerId}\n              // @ts-ignore\n              size={context.size}\n              {...triggerProps}\n              ref={composeRefs(forwardedRef, triggerRef)}\n              onPress={composeEventHandlers(props.onPress ?? undefined, (event) => {\n                // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n                // but not when the control key is pressed (avoiding MacOS right click)\n\n                const webChecks =\n                  !isWeb ||\n                  ((event as unknown as React.MouseEvent).button === 0 &&\n                    (event as unknown as React.MouseEvent).ctrlKey === false)\n                if (!disabled && !isSelected && webChecks) {\n                  context.onChange(value)\n                } else {\n                  // prevent focus to avoid accidental activation\n                  event.preventDefault()\n                }\n              })}\n              {...(isWeb && {\n                type: 'button',\n                onKeyDown: composeEventHandlers(\n                  (props as React.HTMLProps<HTMLButtonElement>).onKeyDown,\n                  (event) => {\n                    if ([' ', 'Enter'].includes(event.key)) {\n                      context.onChange(value)\n                      event.preventDefault()\n                    }\n                  }\n                ),\n                onFocus: composeEventHandlers(props.onFocus, (event) => {\n                  if (layout) {\n                    onInteraction?.('focus', layout)\n                  }\n                  // handle \"automatic\" activation if necessary\n                  // ie. activate tab following focus\n                  const isAutomaticActivation = context.activationMode !== 'manual'\n                  if (!isSelected && !disabled && isAutomaticActivation) {\n                    context.onChange(value)\n                  }\n                }),\n                onBlur: composeEventHandlers(props.onFocus, () => {\n                  onInteraction?.('focus', null)\n                }),\n              })}\n              {...groupItemProps}\n            />\n          </RovingFocusGroup.Item>\n        </Theme>\n      )\n    }\n  )\n)\n\nTabsTrigger.displayName = TRIGGER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * TabsContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'TabsContent'\n\nconst TabsContentFrame = styled(ThemeableStack, {\n  name: CONTENT_NAME,\n})\ntype TabsContentFrameProps = GetProps<typeof TabsContentFrame>\ntype TabsContentProps = TabsContentFrameProps & {\n  /** Will show the content when the value matches the state of Tabs root */\n  value: string\n\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with Tamagui animations.\n   */\n  forceMount?: true\n}\n\nconst TabsContent = TabsContentFrame.extractable(\n  React.forwardRef<HTMLDivElement, TabsContentProps>(\n    (props: ScopedProps<TabsContentProps>, forwardedRef) => {\n      const { __scopeTabs, value, forceMount, children, ...contentProps } = props\n      const context = useTabsContext(CONTENT_NAME, __scopeTabs)\n      const isSelected = value === context.value\n      const show = forceMount || isSelected\n\n      const triggerId = makeTriggerId(context.baseId, value)\n      const contentId = makeContentId(context.baseId, value)\n\n      if (!show) return null\n      return (\n        <TabsContentFrame\n          key={value}\n          data-state={isSelected ? 'active' : 'inactive'}\n          data-orientation={context.orientation}\n          role=\"tabpanel\"\n          aria-labelledby={triggerId}\n          // @ts-ignore\n          hidden={!show}\n          id={contentId}\n          tabIndex={0}\n          {...contentProps}\n          ref={forwardedRef}\n        >\n          {children}\n        </TabsContentFrame>\n      )\n    }\n  )\n)\n\nTabsContent.displayName = CONTENT_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Tabs\n * -----------------------------------------------------------------------------------------------*/\n\nconst TABS_NAME = 'Tabs'\n\ntype ScopedProps<P> = P & { __scopeTabs?: Scope }\nconst [createTabsContext, createTabsScope] = createContextScope(TABS_NAME, [\n  createRovingFocusGroupScope,\n])\nconst useRovingFocusGroupScope = createRovingFocusGroupScope()\n\ntype TabsContextValue = {\n  baseId: string\n  value?: string\n  onChange: (value: string) => void\n  orientation?: TabsProps['orientation']\n  dir?: TabsProps['dir']\n  activationMode?: TabsProps['activationMode']\n  size: SizeTokens\n  registerTrigger: () => void\n  unregisterTrigger: () => void\n  triggersCount: number\n}\n\nconst [TabsProvider, useTabsContext] = createTabsContext<TabsContextValue>(TABS_NAME)\n\nconst TabsFrame = styled(SizableStack, {\n  name: TABS_NAME,\n})\ntype RovingFocusGroupProps = React.ComponentPropsWithoutRef<typeof RovingFocusGroup>\ntype TabsFrameProps = GetProps<typeof TabsFrame>\ntype TabsProps = TabsFrameProps & {\n  /** The value for the selected tab, if controlled */\n  value?: string\n  /** The value of the tab to select by default, if uncontrolled */\n  defaultValue?: string\n  /** A function called when a new tab is selected */\n  onValueChange?: (value: string) => void\n  /**\n   * The orientation the tabs are layed out.\n   * Mainly so arrow navigation is done accordingly (left & right vs. up & down)\n   * @defaultValue horizontal\n   */\n  orientation?: RovingFocusGroupProps['orientation']\n  /**\n   * The direction of navigation between toolbar items.\n   */\n  dir?: RovingFocusGroupProps['dir']\n  /**\n   * Whether a tab is activated automatically or manually. Only supported in web.\n   * @defaultValue automatic\n   * */\n  activationMode?: 'automatic' | 'manual'\n}\n\nexport const Tabs = withStaticProperties(\n  TabsFrame.extractable(\n    React.forwardRef<HTMLDivElement, TabsProps>(\n      (props: ScopedProps<TabsProps>, forwardedRef) => {\n        const {\n          __scopeTabs,\n          value: valueProp,\n          onValueChange,\n          defaultValue,\n          orientation = 'horizontal',\n          dir,\n          activationMode = 'automatic',\n          size = '$true',\n          ...tabsProps\n        } = props\n        const direction = useDirection(dir)\n        const [value, setValue] = useControllableState({\n          prop: valueProp,\n          onChange: onValueChange,\n          defaultProp: defaultValue ?? '',\n        })\n        const [triggersCount, setTriggersCount] = React.useState(0)\n        const registerTrigger = useEvent(() => setTriggersCount((v) => v + 1))\n        const unregisterTrigger = useEvent(() => setTriggersCount((v) => v - 1))\n\n        return (\n          <TabsProvider\n            scope={__scopeTabs}\n            baseId={useId()}\n            value={value}\n            onChange={setValue}\n            orientation={orientation}\n            dir={direction}\n            activationMode={activationMode}\n            size={size}\n            registerTrigger={registerTrigger}\n            triggersCount={triggersCount}\n            unregisterTrigger={unregisterTrigger}\n          >\n            <TabsFrame\n              direction={direction}\n              //   dir={direction}\n              data-orientation={orientation}\n              {...tabsProps}\n              ref={forwardedRef}\n            />\n          </TabsProvider>\n        )\n      }\n    )\n  ),\n  {\n    List: TabsList,\n    /**\n     * @deprecated Use Tabs.Tab instead\n     */\n    Trigger: TabsTrigger,\n    Tab: TabsTrigger,\n    Content: TabsContent,\n  }\n)\nTabs.displayName = TABS_NAME\n\n/* ---------------------------------------------------------------------------------------------- */\n\nfunction makeTriggerId(baseId: string, value: string) {\n  return `${baseId}-trigger-${value}`\n}\n\nfunction makeContentId(baseId: string, value: string) {\n  return `${baseId}-content-${value}`\n}\n\nexport type {\n  TabsProps,\n  TabsListProps,\n  TabsTriggerProps,\n  TabsTriggerLayout,\n  TabsTabProps,\n  TabsContentProps,\n  TabLayout,\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { Scope } from '@tamagui/create-context'\nimport { createContextScope } from '@tamagui/create-context'\nimport { getButtonSized } from '@tamagui/get-button-sized'\nimport { Group, GroupProps, useGroupItem } from '@tamagui/group'\nimport { RovingFocusGroup, createRovingFocusGroupScope } from '@tamagui/roving-focus'\nimport { SizableStack, ThemeableStack, ThemeableStackProps } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport { useDirection } from '@tamagui/use-direction'\nimport {\n  GetProps,\n  SizeTokens,\n  Theme,\n  composeEventHandlers,\n  composeRefs,\n  isWeb,\n  styled,\n  useEvent,\n  withStaticProperties,\n} from '@tamagui/web'\nimport * as React from 'react'\nimport type { LayoutRectangle } from 'react-native'\n\n/* -------------------------------------------------------------------------------------------------\n * TabsList\n * -----------------------------------------------------------------------------------------------*/\n\nconst TAB_LIST_NAME = 'TabsList'\n\nconst TabsListFrame = styled(Group, {\n  name: TAB_LIST_NAME,\n  focusable: true,\n  // defaultVariants: {\n  //   flexGrow: 0,\n  // },\n})\n\ntype TabsListFrameProps = GroupProps\n\ntype TabsListProps = TabsListFrameProps & {\n  /**\n   * Whether to loop over after reaching the end or start of the items\n   * @default true\n   */\n  loop?: boolean\n}\n\nconst TabsList = TabsListFrame.extractable(\n  React.forwardRef<HTMLDivElement, TabsListProps>(\n    (props: ScopedProps<TabsListProps>, forwardedRef) => {\n      const { __scopeTabs, loop = true, children, ...listProps } = props\n      const context = useTabsContext(TAB_LIST_NAME, __scopeTabs)\n      const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs)\n\n      return (\n        <RovingFocusGroup\n          asChild\n          orientation={context.orientation}\n          dir={context.dir}\n          loop={loop}\n          {...rovingFocusGroupScope}\n        >\n          <TabsListFrame\n            role=\"tablist\"\n            aria-orientation={context.orientation}\n            ref={forwardedRef}\n            axis={context.orientation}\n            {...listProps}\n          >\n            {children}\n          </TabsListFrame>\n        </RovingFocusGroup>\n      )\n    }\n  )\n)\n\nTabsList.displayName = TAB_LIST_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * TabsTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'TabsTrigger'\n\nconst TabsTriggerFrame = styled(ThemeableStack, {\n  name: TRIGGER_NAME,\n  justifyContent: 'center',\n  alignItems: 'center',\n  flexWrap: 'nowrap',\n  flexDirection: 'row',\n  cursor: 'pointer',\n  focusable: true,\n\n  variants: {\n    size: {\n      '...size': getButtonSized,\n    },\n    disabled: {\n      true: {\n        pointerEvents: 'none',\n      },\n    },\n    unstyled: {\n      false: {\n        backgroundColor: '$background',\n\n        pressStyle: {\n          backgroundColor: '$backgroundPress',\n        },\n\n        hoverStyle: {\n          backgroundColor: '$backgroundHover',\n        },\n\n        focusStyle: {\n          backgroundColor: '$backgroundFocus',\n        },\n      },\n    },\n  } as const,\n  defaultVariants: {\n    unstyled: false,\n  },\n})\n\n/**\n * @deprecated Use `TabLayout` instead\n */\ntype TabsTriggerLayout = LayoutRectangle\ntype TabLayout = LayoutRectangle\ntype InteractionType = 'select' | 'focus' | 'hover'\n\ntype TabsTriggerFrameProps = GetProps<typeof TabsTriggerFrame>\n/**\n * @deprecated use `TabTabsProps` instead\n */\ntype TabsTriggerProps = TabsTriggerFrameProps & {\n  /** The value for the tabs state to be changed to after activation of the trigger */\n  value: string\n\n  /** Used for making custom indicators when trigger interacted with */\n  onInteraction?: (type: InteractionType, layout: TabLayout | null) => void\n}\n\ntype TabsTabProps = TabsTriggerProps\n\nconst TabsTrigger = TabsTriggerFrame.extractable(\n  React.forwardRef<HTMLButtonElement, TabsTriggerProps>(\n    (props: ScopedProps<TabsTriggerProps>, forwardedRef) => {\n      const {\n        __scopeTabs,\n        value,\n        disabled = false,\n        onInteraction,\n        ...triggerProps\n      } = props\n      const context = useTabsContext(TRIGGER_NAME, __scopeTabs)\n      const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs)\n      const triggerId = makeTriggerId(context.baseId, value)\n      const contentId = makeContentId(context.baseId, value)\n      const isSelected = value === context.value\n      const [layout, setLayout] = React.useState<TabLayout | null>(null)\n      const triggerRef = React.useRef<HTMLButtonElement>(null)\n      const groupItemProps = useGroupItem({ disabled })\n\n      React.useEffect(() => {\n        context.registerTrigger()\n        return () => context.unregisterTrigger()\n      }, [])\n\n      React.useEffect(() => {\n        if (!triggerRef.current || !isWeb) return\n\n        function getTriggerSize() {\n          if (!triggerRef.current) return\n          setLayout({\n            width: triggerRef.current.offsetWidth,\n            height: triggerRef.current.offsetHeight,\n            x: triggerRef.current.offsetLeft,\n            y: triggerRef.current.offsetTop,\n          })\n        }\n        getTriggerSize()\n\n        const observer = new ResizeObserver(getTriggerSize)\n        observer.observe(triggerRef.current)\n\n        return () => {\n          if (!triggerRef.current) return\n          observer.unobserve(triggerRef.current)\n        }\n      }, [context.triggersCount])\n\n      React.useEffect(() => {\n        if (isSelected && layout) {\n          onInteraction?.('select', layout)\n        }\n      }, [isSelected, value, layout])\n\n      return (\n        <Theme forceClassName name={isSelected ? 'active' : null}>\n          <RovingFocusGroup.Item\n            asChild\n            {...rovingFocusGroupScope}\n            focusable={!disabled}\n            active={isSelected}\n          >\n            <TabsTriggerFrame\n              onLayout={(event) => {\n                if (!isWeb) {\n                  setLayout(event.nativeEvent.layout)\n                }\n              }}\n              onHoverIn={composeEventHandlers(props.onHoverIn, () => {\n                if (layout) {\n                  onInteraction?.('hover', layout)\n                }\n              })}\n              onHoverOut={composeEventHandlers(props.onHoverOut, () => {\n                onInteraction?.('hover', null)\n              })}\n              role=\"tab\"\n              aria-selected={isSelected}\n              aria-controls={contentId}\n              data-state={isSelected ? 'active' : 'inactive'}\n              data-disabled={disabled ? '' : undefined}\n              disabled={disabled}\n              id={triggerId}\n              // @ts-ignore\n              size={context.size}\n              {...triggerProps}\n              ref={composeRefs(forwardedRef, triggerRef)}\n              onPress={composeEventHandlers(props.onPress ?? undefined, (event) => {\n                // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n                // but not when the control key is pressed (avoiding MacOS right click)\n\n                const webChecks =\n                  !isWeb ||\n                  ((event as unknown as React.MouseEvent).button === 0 &&\n                    (event as unknown as React.MouseEvent).ctrlKey === false)\n                if (!disabled && !isSelected && webChecks) {\n                  context.onChange(value)\n                } else {\n                  // prevent focus to avoid accidental activation\n                  event.preventDefault()\n                }\n              })}\n              {...(isWeb && {\n                type: 'button',\n                onKeyDown: composeEventHandlers(\n                  (props as React.HTMLProps<HTMLButtonElement>).onKeyDown,\n                  (event) => {\n                    if ([' ', 'Enter'].includes(event.key)) {\n                      context.onChange(value)\n                      event.preventDefault()\n                    }\n                  }\n                ),\n                onFocus: composeEventHandlers(props.onFocus, (event) => {\n                  if (layout) {\n                    onInteraction?.('focus', layout)\n                  }\n                  // handle \"automatic\" activation if necessary\n                  // ie. activate tab following focus\n                  const isAutomaticActivation = context.activationMode !== 'manual'\n                  if (!isSelected && !disabled && isAutomaticActivation) {\n                    context.onChange(value)\n                  }\n                }),\n                onBlur: composeEventHandlers(props.onFocus, () => {\n                  onInteraction?.('focus', null)\n                }),\n              })}\n              {...groupItemProps}\n            />\n          </RovingFocusGroup.Item>\n        </Theme>\n      )\n    }\n  )\n)\n\nTabsTrigger.displayName = TRIGGER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * TabsContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'TabsContent'\n\nconst TabsContentFrame = styled(ThemeableStack, {\n  name: CONTENT_NAME,\n})\ntype TabsContentFrameProps = GetProps<typeof TabsContentFrame>\ntype TabsContentProps = TabsContentFrameProps & {\n  /** Will show the content when the value matches the state of Tabs root */\n  value: string\n\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with Tamagui animations.\n   */\n  forceMount?: true\n}\n\nconst TabsContent = TabsContentFrame.extractable(\n  React.forwardRef<HTMLDivElement, TabsContentProps>(\n    (props: ScopedProps<TabsContentProps>, forwardedRef) => {\n      const { __scopeTabs, value, forceMount, children, ...contentProps } = props\n      const context = useTabsContext(CONTENT_NAME, __scopeTabs)\n      const isSelected = value === context.value\n      const show = forceMount || isSelected\n\n      const triggerId = makeTriggerId(context.baseId, value)\n      const contentId = makeContentId(context.baseId, value)\n\n      if (!show) return null\n      return (\n        <TabsContentFrame\n          key={value}\n          data-state={isSelected ? 'active' : 'inactive'}\n          data-orientation={context.orientation}\n          role=\"tabpanel\"\n          aria-labelledby={triggerId}\n          // @ts-ignore\n          hidden={!show}\n          id={contentId}\n          tabIndex={0}\n          {...contentProps}\n          ref={forwardedRef}\n        >\n          {children}\n        </TabsContentFrame>\n      )\n    }\n  )\n)\n\nTabsContent.displayName = CONTENT_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Tabs\n * -----------------------------------------------------------------------------------------------*/\n\nconst TABS_NAME = 'Tabs'\n\ntype ScopedProps<P> = P & { __scopeTabs?: Scope }\nconst [createTabsContext, createTabsScope] = createContextScope(TABS_NAME, [\n  createRovingFocusGroupScope,\n])\nconst useRovingFocusGroupScope = createRovingFocusGroupScope()\n\ntype TabsContextValue = {\n  baseId: string\n  value?: string\n  onChange: (value: string) => void\n  orientation?: TabsProps['orientation']\n  dir?: TabsProps['dir']\n  activationMode?: TabsProps['activationMode']\n  size: SizeTokens\n  registerTrigger: () => void\n  unregisterTrigger: () => void\n  triggersCount: number\n}\n\nconst [TabsProvider, useTabsContext] = createTabsContext<TabsContextValue>(TABS_NAME)\n\nconst TabsFrame = styled(SizableStack, {\n  name: TABS_NAME,\n})\ntype RovingFocusGroupProps = React.ComponentPropsWithoutRef<typeof RovingFocusGroup>\ntype TabsFrameProps = GetProps<typeof TabsFrame>\ntype TabsProps = TabsFrameProps & {\n  /** The value for the selected tab, if controlled */\n  value?: string\n  /** The value of the tab to select by default, if uncontrolled */\n  defaultValue?: string\n  /** A function called when a new tab is selected */\n  onValueChange?: (value: string) => void\n  /**\n   * The orientation the tabs are layed out.\n   * Mainly so arrow navigation is done accordingly (left & right vs. up & down)\n   * @defaultValue horizontal\n   */\n  orientation?: RovingFocusGroupProps['orientation']\n  /**\n   * The direction of navigation between toolbar items.\n   */\n  dir?: RovingFocusGroupProps['dir']\n  /**\n   * Whether a tab is activated automatically or manually. Only supported in web.\n   * @defaultValue automatic\n   * */\n  activationMode?: 'automatic' | 'manual'\n}\n\nexport const Tabs = withStaticProperties(\n  TabsFrame.extractable(\n    React.forwardRef<HTMLDivElement, TabsProps>(\n      (props: ScopedProps<TabsProps>, forwardedRef) => {\n        const {\n          __scopeTabs,\n          value: valueProp,\n          onValueChange,\n          defaultValue,\n          orientation = 'horizontal',\n          dir,\n          activationMode = 'automatic',\n          size = '$true',\n          ...tabsProps\n        } = props\n        const direction = useDirection(dir)\n        const [value, setValue] = useControllableState({\n          prop: valueProp,\n          onChange: onValueChange,\n          defaultProp: defaultValue ?? '',\n        })\n        const [triggersCount, setTriggersCount] = React.useState(0)\n        const registerTrigger = useEvent(() => setTriggersCount((v) => v + 1))\n        const unregisterTrigger = useEvent(() => setTriggersCount((v) => v - 1))\n\n        return (\n          <TabsProvider\n            scope={__scopeTabs}\n            baseId={React.useId()}\n            value={value}\n            onChange={setValue}\n            orientation={orientation}\n            dir={direction}\n            activationMode={activationMode}\n            size={size}\n            registerTrigger={registerTrigger}\n            triggersCount={triggersCount}\n            unregisterTrigger={unregisterTrigger}\n          >\n            <TabsFrame\n              direction={direction}\n              //   dir={direction}\n              data-orientation={orientation}\n              {...tabsProps}\n              ref={forwardedRef}\n            />\n          </TabsProvider>\n        )\n      }\n    )\n  ),\n  {\n    List: TabsList,\n    /**\n     * @deprecated Use Tabs.Tab instead\n     */\n    Trigger: TabsTrigger,\n    Tab: TabsTrigger,\n    Content: TabsContent,\n  }\n)\nTabs.displayName = TABS_NAME\n\n/* ---------------------------------------------------------------------------------------------- */\n\nfunction makeTriggerId(baseId: string, value: string) {\n  return `${baseId}-trigger-${value}`\n}\n\nfunction makeContentId(baseId: string, value: string) {\n  return `${baseId}-content-${value}`\n}\n\nexport type {\n  TabsProps,\n  TabsListProps,\n  TabsTriggerProps,\n  TabsTriggerLayout,\n  TabsTabProps,\n  TabsContentProps,\n  TabLayout,\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/Tabs.mjs CHANGED Viewed

@@ -13,7 +13,6 @@ import {
   isWeb,
   styled,
   useEvent,
-  useId,
   withStaticProperties
 } from "@tamagui/web";
 import * as React from "react";
@@ -288,7 +287,7 @@ const Tabs = withStaticProperties(
           TabsProvider,
           {
             scope: __scopeTabs,
-            baseId: useId(),
+            baseId: React.useId(),
             value,
             onChange: setValue,
             orientation,

package/dist/esm/Tabs.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Tabs.tsx"],
-  "sourcesContent": ["import type { Scope } from '@tamagui/create-context'\nimport { createContextScope } from '@tamagui/create-context'\nimport { getButtonSized } from '@tamagui/get-button-sized'\nimport { Group, GroupProps, useGroupItem } from '@tamagui/group'\nimport { RovingFocusGroup, createRovingFocusGroupScope } from '@tamagui/roving-focus'\nimport { SizableStack, ThemeableStack, ThemeableStackProps } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport { useDirection } from '@tamagui/use-direction'\nimport {\n  GetProps,\n  SizeTokens,\n  Theme,\n  composeEventHandlers,\n  composeRefs,\n  isWeb,\n  styled,\n  useEvent,\n  useId,\n  withStaticProperties,\n} from '@tamagui/web'\nimport * as React from 'react'\nimport type { LayoutRectangle } from 'react-native'\n\n/* -------------------------------------------------------------------------------------------------\n * TabsList\n * -----------------------------------------------------------------------------------------------*/\n\nconst TAB_LIST_NAME = 'TabsList'\n\nconst TabsListFrame = styled(Group, {\n  name: TAB_LIST_NAME,\n  focusable: true,\n  // defaultVariants: {\n  //   flexGrow: 0,\n  // },\n})\n\ntype TabsListFrameProps = GroupProps\n\ntype TabsListProps = TabsListFrameProps & {\n  /**\n   * Whether to loop over after reaching the end or start of the items\n   * @default true\n   */\n  loop?: boolean\n}\n\nconst TabsList = TabsListFrame.extractable(\n  React.forwardRef<HTMLDivElement, TabsListProps>(\n    (props: ScopedProps<TabsListProps>, forwardedRef) => {\n      const { __scopeTabs, loop = true, children, ...listProps } = props\n      const context = useTabsContext(TAB_LIST_NAME, __scopeTabs)\n      const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs)\n\n      return (\n        <RovingFocusGroup\n          asChild\n          orientation={context.orientation}\n          dir={context.dir}\n          loop={loop}\n          {...rovingFocusGroupScope}\n        >\n          <TabsListFrame\n            role=\"tablist\"\n            aria-orientation={context.orientation}\n            ref={forwardedRef}\n            axis={context.orientation}\n            {...listProps}\n          >\n            {children}\n          </TabsListFrame>\n        </RovingFocusGroup>\n      )\n    }\n  )\n)\n\nTabsList.displayName = TAB_LIST_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * TabsTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'TabsTrigger'\n\nconst TabsTriggerFrame = styled(ThemeableStack, {\n  name: TRIGGER_NAME,\n  justifyContent: 'center',\n  alignItems: 'center',\n  flexWrap: 'nowrap',\n  flexDirection: 'row',\n  cursor: 'pointer',\n  focusable: true,\n\n  variants: {\n    size: {\n      '...size': getButtonSized,\n    },\n    disabled: {\n      true: {\n        pointerEvents: 'none',\n      },\n    },\n    unstyled: {\n      false: {\n        backgroundColor: '$background',\n\n        pressStyle: {\n          backgroundColor: '$backgroundPress',\n        },\n\n        hoverStyle: {\n          backgroundColor: '$backgroundHover',\n        },\n\n        focusStyle: {\n          backgroundColor: '$backgroundFocus',\n        },\n      },\n    },\n  } as const,\n  defaultVariants: {\n    unstyled: false,\n  },\n})\n\n/**\n * @deprecated Use `TabLayout` instead\n */\ntype TabsTriggerLayout = LayoutRectangle\ntype TabLayout = LayoutRectangle\ntype InteractionType = 'select' | 'focus' | 'hover'\n\ntype TabsTriggerFrameProps = GetProps<typeof TabsTriggerFrame>\n/**\n * @deprecated use `TabTabsProps` instead\n */\ntype TabsTriggerProps = TabsTriggerFrameProps & {\n  /** The value for the tabs state to be changed to after activation of the trigger */\n  value: string\n\n  /** Used for making custom indicators when trigger interacted with */\n  onInteraction?: (type: InteractionType, layout: TabLayout | null) => void\n}\n\ntype TabsTabProps = TabsTriggerProps\n\nconst TabsTrigger = TabsTriggerFrame.extractable(\n  React.forwardRef<HTMLButtonElement, TabsTriggerProps>(\n    (props: ScopedProps<TabsTriggerProps>, forwardedRef) => {\n      const {\n        __scopeTabs,\n        value,\n        disabled = false,\n        onInteraction,\n        ...triggerProps\n      } = props\n      const context = useTabsContext(TRIGGER_NAME, __scopeTabs)\n      const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs)\n      const triggerId = makeTriggerId(context.baseId, value)\n      const contentId = makeContentId(context.baseId, value)\n      const isSelected = value === context.value\n      const [layout, setLayout] = React.useState<TabLayout | null>(null)\n      const triggerRef = React.useRef<HTMLButtonElement>(null)\n      const groupItemProps = useGroupItem({ disabled })\n\n      React.useEffect(() => {\n        context.registerTrigger()\n        return () => context.unregisterTrigger()\n      }, [])\n\n      React.useEffect(() => {\n        if (!triggerRef.current || !isWeb) return\n\n        function getTriggerSize() {\n          if (!triggerRef.current) return\n          setLayout({\n            width: triggerRef.current.offsetWidth,\n            height: triggerRef.current.offsetHeight,\n            x: triggerRef.current.offsetLeft,\n            y: triggerRef.current.offsetTop,\n          })\n        }\n        getTriggerSize()\n\n        const observer = new ResizeObserver(getTriggerSize)\n        observer.observe(triggerRef.current)\n\n        return () => {\n          if (!triggerRef.current) return\n          observer.unobserve(triggerRef.current)\n        }\n      }, [context.triggersCount])\n\n      React.useEffect(() => {\n        if (isSelected && layout) {\n          onInteraction?.('select', layout)\n        }\n      }, [isSelected, value, layout])\n\n      return (\n        <Theme forceClassName name={isSelected ? 'active' : null}>\n          <RovingFocusGroup.Item\n            asChild\n            {...rovingFocusGroupScope}\n            focusable={!disabled}\n            active={isSelected}\n          >\n            <TabsTriggerFrame\n              onLayout={(event) => {\n                if (!isWeb) {\n                  setLayout(event.nativeEvent.layout)\n                }\n              }}\n              onHoverIn={composeEventHandlers(props.onHoverIn, () => {\n                if (layout) {\n                  onInteraction?.('hover', layout)\n                }\n              })}\n              onHoverOut={composeEventHandlers(props.onHoverOut, () => {\n                onInteraction?.('hover', null)\n              })}\n              role=\"tab\"\n              aria-selected={isSelected}\n              aria-controls={contentId}\n              data-state={isSelected ? 'active' : 'inactive'}\n              data-disabled={disabled ? '' : undefined}\n              disabled={disabled}\n              id={triggerId}\n              // @ts-ignore\n              size={context.size}\n              {...triggerProps}\n              ref={composeRefs(forwardedRef, triggerRef)}\n              onPress={composeEventHandlers(props.onPress ?? undefined, (event) => {\n                // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n                // but not when the control key is pressed (avoiding MacOS right click)\n\n                const webChecks =\n                  !isWeb ||\n                  ((event as unknown as React.MouseEvent).button === 0 &&\n                    (event as unknown as React.MouseEvent).ctrlKey === false)\n                if (!disabled && !isSelected && webChecks) {\n                  context.onChange(value)\n                } else {\n                  // prevent focus to avoid accidental activation\n                  event.preventDefault()\n                }\n              })}\n              {...(isWeb && {\n                type: 'button',\n                onKeyDown: composeEventHandlers(\n                  (props as React.HTMLProps<HTMLButtonElement>).onKeyDown,\n                  (event) => {\n                    if ([' ', 'Enter'].includes(event.key)) {\n                      context.onChange(value)\n                      event.preventDefault()\n                    }\n                  }\n                ),\n                onFocus: composeEventHandlers(props.onFocus, (event) => {\n                  if (layout) {\n                    onInteraction?.('focus', layout)\n                  }\n                  // handle \"automatic\" activation if necessary\n                  // ie. activate tab following focus\n                  const isAutomaticActivation = context.activationMode !== 'manual'\n                  if (!isSelected && !disabled && isAutomaticActivation) {\n                    context.onChange(value)\n                  }\n                }),\n                onBlur: composeEventHandlers(props.onFocus, () => {\n                  onInteraction?.('focus', null)\n                }),\n              })}\n              {...groupItemProps}\n            />\n          </RovingFocusGroup.Item>\n        </Theme>\n      )\n    }\n  )\n)\n\nTabsTrigger.displayName = TRIGGER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * TabsContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'TabsContent'\n\nconst TabsContentFrame = styled(ThemeableStack, {\n  name: CONTENT_NAME,\n})\ntype TabsContentFrameProps = GetProps<typeof TabsContentFrame>\ntype TabsContentProps = TabsContentFrameProps & {\n  /** Will show the content when the value matches the state of Tabs root */\n  value: string\n\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with Tamagui animations.\n   */\n  forceMount?: true\n}\n\nconst TabsContent = TabsContentFrame.extractable(\n  React.forwardRef<HTMLDivElement, TabsContentProps>(\n    (props: ScopedProps<TabsContentProps>, forwardedRef) => {\n      const { __scopeTabs, value, forceMount, children, ...contentProps } = props\n      const context = useTabsContext(CONTENT_NAME, __scopeTabs)\n      const isSelected = value === context.value\n      const show = forceMount || isSelected\n\n      const triggerId = makeTriggerId(context.baseId, value)\n      const contentId = makeContentId(context.baseId, value)\n\n      if (!show) return null\n      return (\n        <TabsContentFrame\n          key={value}\n          data-state={isSelected ? 'active' : 'inactive'}\n          data-orientation={context.orientation}\n          role=\"tabpanel\"\n          aria-labelledby={triggerId}\n          // @ts-ignore\n          hidden={!show}\n          id={contentId}\n          tabIndex={0}\n          {...contentProps}\n          ref={forwardedRef}\n        >\n          {children}\n        </TabsContentFrame>\n      )\n    }\n  )\n)\n\nTabsContent.displayName = CONTENT_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Tabs\n * -----------------------------------------------------------------------------------------------*/\n\nconst TABS_NAME = 'Tabs'\n\ntype ScopedProps<P> = P & { __scopeTabs?: Scope }\nconst [createTabsContext, createTabsScope] = createContextScope(TABS_NAME, [\n  createRovingFocusGroupScope,\n])\nconst useRovingFocusGroupScope = createRovingFocusGroupScope()\n\ntype TabsContextValue = {\n  baseId: string\n  value?: string\n  onChange: (value: string) => void\n  orientation?: TabsProps['orientation']\n  dir?: TabsProps['dir']\n  activationMode?: TabsProps['activationMode']\n  size: SizeTokens\n  registerTrigger: () => void\n  unregisterTrigger: () => void\n  triggersCount: number\n}\n\nconst [TabsProvider, useTabsContext] = createTabsContext<TabsContextValue>(TABS_NAME)\n\nconst TabsFrame = styled(SizableStack, {\n  name: TABS_NAME,\n})\ntype RovingFocusGroupProps = React.ComponentPropsWithoutRef<typeof RovingFocusGroup>\ntype TabsFrameProps = GetProps<typeof TabsFrame>\ntype TabsProps = TabsFrameProps & {\n  /** The value for the selected tab, if controlled */\n  value?: string\n  /** The value of the tab to select by default, if uncontrolled */\n  defaultValue?: string\n  /** A function called when a new tab is selected */\n  onValueChange?: (value: string) => void\n  /**\n   * The orientation the tabs are layed out.\n   * Mainly so arrow navigation is done accordingly (left & right vs. up & down)\n   * @defaultValue horizontal\n   */\n  orientation?: RovingFocusGroupProps['orientation']\n  /**\n   * The direction of navigation between toolbar items.\n   */\n  dir?: RovingFocusGroupProps['dir']\n  /**\n   * Whether a tab is activated automatically or manually. Only supported in web.\n   * @defaultValue automatic\n   * */\n  activationMode?: 'automatic' | 'manual'\n}\n\nexport const Tabs = withStaticProperties(\n  TabsFrame.extractable(\n    React.forwardRef<HTMLDivElement, TabsProps>(\n      (props: ScopedProps<TabsProps>, forwardedRef) => {\n        const {\n          __scopeTabs,\n          value: valueProp,\n          onValueChange,\n          defaultValue,\n          orientation = 'horizontal',\n          dir,\n          activationMode = 'automatic',\n          size = '$true',\n          ...tabsProps\n        } = props\n        const direction = useDirection(dir)\n        const [value, setValue] = useControllableState({\n          prop: valueProp,\n          onChange: onValueChange,\n          defaultProp: defaultValue ?? '',\n        })\n        const [triggersCount, setTriggersCount] = React.useState(0)\n        const registerTrigger = useEvent(() => setTriggersCount((v) => v + 1))\n        const unregisterTrigger = useEvent(() => setTriggersCount((v) => v - 1))\n\n        return (\n          <TabsProvider\n            scope={__scopeTabs}\n            baseId={useId()}\n            value={value}\n            onChange={setValue}\n            orientation={orientation}\n            dir={direction}\n            activationMode={activationMode}\n            size={size}\n            registerTrigger={registerTrigger}\n            triggersCount={triggersCount}\n            unregisterTrigger={unregisterTrigger}\n          >\n            <TabsFrame\n              direction={direction}\n              //   dir={direction}\n              data-orientation={orientation}\n              {...tabsProps}\n              ref={forwardedRef}\n            />\n          </TabsProvider>\n        )\n      }\n    )\n  ),\n  {\n    List: TabsList,\n    /**\n     * @deprecated Use Tabs.Tab instead\n     */\n    Trigger: TabsTrigger,\n    Tab: TabsTrigger,\n    Content: TabsContent,\n  }\n)\nTabs.displayName = TABS_NAME\n\n/* ---------------------------------------------------------------------------------------------- */\n\nfunction makeTriggerId(baseId: string, value: string) {\n  return `${baseId}-trigger-${value}`\n}\n\nfunction makeContentId(baseId: string, value: string) {\n  return `${baseId}-content-${value}`\n}\n\nexport type {\n  TabsProps,\n  TabsListProps,\n  TabsTriggerProps,\n  TabsTriggerLayout,\n  TabsTabProps,\n  TabsContentProps,\n  TabLayout,\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { Scope } from '@tamagui/create-context'\nimport { createContextScope } from '@tamagui/create-context'\nimport { getButtonSized } from '@tamagui/get-button-sized'\nimport { Group, GroupProps, useGroupItem } from '@tamagui/group'\nimport { RovingFocusGroup, createRovingFocusGroupScope } from '@tamagui/roving-focus'\nimport { SizableStack, ThemeableStack, ThemeableStackProps } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport { useDirection } from '@tamagui/use-direction'\nimport {\n  GetProps,\n  SizeTokens,\n  Theme,\n  composeEventHandlers,\n  composeRefs,\n  isWeb,\n  styled,\n  useEvent,\n  withStaticProperties,\n} from '@tamagui/web'\nimport * as React from 'react'\nimport type { LayoutRectangle } from 'react-native'\n\n/* -------------------------------------------------------------------------------------------------\n * TabsList\n * -----------------------------------------------------------------------------------------------*/\n\nconst TAB_LIST_NAME = 'TabsList'\n\nconst TabsListFrame = styled(Group, {\n  name: TAB_LIST_NAME,\n  focusable: true,\n  // defaultVariants: {\n  //   flexGrow: 0,\n  // },\n})\n\ntype TabsListFrameProps = GroupProps\n\ntype TabsListProps = TabsListFrameProps & {\n  /**\n   * Whether to loop over after reaching the end or start of the items\n   * @default true\n   */\n  loop?: boolean\n}\n\nconst TabsList = TabsListFrame.extractable(\n  React.forwardRef<HTMLDivElement, TabsListProps>(\n    (props: ScopedProps<TabsListProps>, forwardedRef) => {\n      const { __scopeTabs, loop = true, children, ...listProps } = props\n      const context = useTabsContext(TAB_LIST_NAME, __scopeTabs)\n      const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs)\n\n      return (\n        <RovingFocusGroup\n          asChild\n          orientation={context.orientation}\n          dir={context.dir}\n          loop={loop}\n          {...rovingFocusGroupScope}\n        >\n          <TabsListFrame\n            role=\"tablist\"\n            aria-orientation={context.orientation}\n            ref={forwardedRef}\n            axis={context.orientation}\n            {...listProps}\n          >\n            {children}\n          </TabsListFrame>\n        </RovingFocusGroup>\n      )\n    }\n  )\n)\n\nTabsList.displayName = TAB_LIST_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * TabsTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'TabsTrigger'\n\nconst TabsTriggerFrame = styled(ThemeableStack, {\n  name: TRIGGER_NAME,\n  justifyContent: 'center',\n  alignItems: 'center',\n  flexWrap: 'nowrap',\n  flexDirection: 'row',\n  cursor: 'pointer',\n  focusable: true,\n\n  variants: {\n    size: {\n      '...size': getButtonSized,\n    },\n    disabled: {\n      true: {\n        pointerEvents: 'none',\n      },\n    },\n    unstyled: {\n      false: {\n        backgroundColor: '$background',\n\n        pressStyle: {\n          backgroundColor: '$backgroundPress',\n        },\n\n        hoverStyle: {\n          backgroundColor: '$backgroundHover',\n        },\n\n        focusStyle: {\n          backgroundColor: '$backgroundFocus',\n        },\n      },\n    },\n  } as const,\n  defaultVariants: {\n    unstyled: false,\n  },\n})\n\n/**\n * @deprecated Use `TabLayout` instead\n */\ntype TabsTriggerLayout = LayoutRectangle\ntype TabLayout = LayoutRectangle\ntype InteractionType = 'select' | 'focus' | 'hover'\n\ntype TabsTriggerFrameProps = GetProps<typeof TabsTriggerFrame>\n/**\n * @deprecated use `TabTabsProps` instead\n */\ntype TabsTriggerProps = TabsTriggerFrameProps & {\n  /** The value for the tabs state to be changed to after activation of the trigger */\n  value: string\n\n  /** Used for making custom indicators when trigger interacted with */\n  onInteraction?: (type: InteractionType, layout: TabLayout | null) => void\n}\n\ntype TabsTabProps = TabsTriggerProps\n\nconst TabsTrigger = TabsTriggerFrame.extractable(\n  React.forwardRef<HTMLButtonElement, TabsTriggerProps>(\n    (props: ScopedProps<TabsTriggerProps>, forwardedRef) => {\n      const {\n        __scopeTabs,\n        value,\n        disabled = false,\n        onInteraction,\n        ...triggerProps\n      } = props\n      const context = useTabsContext(TRIGGER_NAME, __scopeTabs)\n      const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs)\n      const triggerId = makeTriggerId(context.baseId, value)\n      const contentId = makeContentId(context.baseId, value)\n      const isSelected = value === context.value\n      const [layout, setLayout] = React.useState<TabLayout | null>(null)\n      const triggerRef = React.useRef<HTMLButtonElement>(null)\n      const groupItemProps = useGroupItem({ disabled })\n\n      React.useEffect(() => {\n        context.registerTrigger()\n        return () => context.unregisterTrigger()\n      }, [])\n\n      React.useEffect(() => {\n        if (!triggerRef.current || !isWeb) return\n\n        function getTriggerSize() {\n          if (!triggerRef.current) return\n          setLayout({\n            width: triggerRef.current.offsetWidth,\n            height: triggerRef.current.offsetHeight,\n            x: triggerRef.current.offsetLeft,\n            y: triggerRef.current.offsetTop,\n          })\n        }\n        getTriggerSize()\n\n        const observer = new ResizeObserver(getTriggerSize)\n        observer.observe(triggerRef.current)\n\n        return () => {\n          if (!triggerRef.current) return\n          observer.unobserve(triggerRef.current)\n        }\n      }, [context.triggersCount])\n\n      React.useEffect(() => {\n        if (isSelected && layout) {\n          onInteraction?.('select', layout)\n        }\n      }, [isSelected, value, layout])\n\n      return (\n        <Theme forceClassName name={isSelected ? 'active' : null}>\n          <RovingFocusGroup.Item\n            asChild\n            {...rovingFocusGroupScope}\n            focusable={!disabled}\n            active={isSelected}\n          >\n            <TabsTriggerFrame\n              onLayout={(event) => {\n                if (!isWeb) {\n                  setLayout(event.nativeEvent.layout)\n                }\n              }}\n              onHoverIn={composeEventHandlers(props.onHoverIn, () => {\n                if (layout) {\n                  onInteraction?.('hover', layout)\n                }\n              })}\n              onHoverOut={composeEventHandlers(props.onHoverOut, () => {\n                onInteraction?.('hover', null)\n              })}\n              role=\"tab\"\n              aria-selected={isSelected}\n              aria-controls={contentId}\n              data-state={isSelected ? 'active' : 'inactive'}\n              data-disabled={disabled ? '' : undefined}\n              disabled={disabled}\n              id={triggerId}\n              // @ts-ignore\n              size={context.size}\n              {...triggerProps}\n              ref={composeRefs(forwardedRef, triggerRef)}\n              onPress={composeEventHandlers(props.onPress ?? undefined, (event) => {\n                // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n                // but not when the control key is pressed (avoiding MacOS right click)\n\n                const webChecks =\n                  !isWeb ||\n                  ((event as unknown as React.MouseEvent).button === 0 &&\n                    (event as unknown as React.MouseEvent).ctrlKey === false)\n                if (!disabled && !isSelected && webChecks) {\n                  context.onChange(value)\n                } else {\n                  // prevent focus to avoid accidental activation\n                  event.preventDefault()\n                }\n              })}\n              {...(isWeb && {\n                type: 'button',\n                onKeyDown: composeEventHandlers(\n                  (props as React.HTMLProps<HTMLButtonElement>).onKeyDown,\n                  (event) => {\n                    if ([' ', 'Enter'].includes(event.key)) {\n                      context.onChange(value)\n                      event.preventDefault()\n                    }\n                  }\n                ),\n                onFocus: composeEventHandlers(props.onFocus, (event) => {\n                  if (layout) {\n                    onInteraction?.('focus', layout)\n                  }\n                  // handle \"automatic\" activation if necessary\n                  // ie. activate tab following focus\n                  const isAutomaticActivation = context.activationMode !== 'manual'\n                  if (!isSelected && !disabled && isAutomaticActivation) {\n                    context.onChange(value)\n                  }\n                }),\n                onBlur: composeEventHandlers(props.onFocus, () => {\n                  onInteraction?.('focus', null)\n                }),\n              })}\n              {...groupItemProps}\n            />\n          </RovingFocusGroup.Item>\n        </Theme>\n      )\n    }\n  )\n)\n\nTabsTrigger.displayName = TRIGGER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * TabsContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'TabsContent'\n\nconst TabsContentFrame = styled(ThemeableStack, {\n  name: CONTENT_NAME,\n})\ntype TabsContentFrameProps = GetProps<typeof TabsContentFrame>\ntype TabsContentProps = TabsContentFrameProps & {\n  /** Will show the content when the value matches the state of Tabs root */\n  value: string\n\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with Tamagui animations.\n   */\n  forceMount?: true\n}\n\nconst TabsContent = TabsContentFrame.extractable(\n  React.forwardRef<HTMLDivElement, TabsContentProps>(\n    (props: ScopedProps<TabsContentProps>, forwardedRef) => {\n      const { __scopeTabs, value, forceMount, children, ...contentProps } = props\n      const context = useTabsContext(CONTENT_NAME, __scopeTabs)\n      const isSelected = value === context.value\n      const show = forceMount || isSelected\n\n      const triggerId = makeTriggerId(context.baseId, value)\n      const contentId = makeContentId(context.baseId, value)\n\n      if (!show) return null\n      return (\n        <TabsContentFrame\n          key={value}\n          data-state={isSelected ? 'active' : 'inactive'}\n          data-orientation={context.orientation}\n          role=\"tabpanel\"\n          aria-labelledby={triggerId}\n          // @ts-ignore\n          hidden={!show}\n          id={contentId}\n          tabIndex={0}\n          {...contentProps}\n          ref={forwardedRef}\n        >\n          {children}\n        </TabsContentFrame>\n      )\n    }\n  )\n)\n\nTabsContent.displayName = CONTENT_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Tabs\n * -----------------------------------------------------------------------------------------------*/\n\nconst TABS_NAME = 'Tabs'\n\ntype ScopedProps<P> = P & { __scopeTabs?: Scope }\nconst [createTabsContext, createTabsScope] = createContextScope(TABS_NAME, [\n  createRovingFocusGroupScope,\n])\nconst useRovingFocusGroupScope = createRovingFocusGroupScope()\n\ntype TabsContextValue = {\n  baseId: string\n  value?: string\n  onChange: (value: string) => void\n  orientation?: TabsProps['orientation']\n  dir?: TabsProps['dir']\n  activationMode?: TabsProps['activationMode']\n  size: SizeTokens\n  registerTrigger: () => void\n  unregisterTrigger: () => void\n  triggersCount: number\n}\n\nconst [TabsProvider, useTabsContext] = createTabsContext<TabsContextValue>(TABS_NAME)\n\nconst TabsFrame = styled(SizableStack, {\n  name: TABS_NAME,\n})\ntype RovingFocusGroupProps = React.ComponentPropsWithoutRef<typeof RovingFocusGroup>\ntype TabsFrameProps = GetProps<typeof TabsFrame>\ntype TabsProps = TabsFrameProps & {\n  /** The value for the selected tab, if controlled */\n  value?: string\n  /** The value of the tab to select by default, if uncontrolled */\n  defaultValue?: string\n  /** A function called when a new tab is selected */\n  onValueChange?: (value: string) => void\n  /**\n   * The orientation the tabs are layed out.\n   * Mainly so arrow navigation is done accordingly (left & right vs. up & down)\n   * @defaultValue horizontal\n   */\n  orientation?: RovingFocusGroupProps['orientation']\n  /**\n   * The direction of navigation between toolbar items.\n   */\n  dir?: RovingFocusGroupProps['dir']\n  /**\n   * Whether a tab is activated automatically or manually. Only supported in web.\n   * @defaultValue automatic\n   * */\n  activationMode?: 'automatic' | 'manual'\n}\n\nexport const Tabs = withStaticProperties(\n  TabsFrame.extractable(\n    React.forwardRef<HTMLDivElement, TabsProps>(\n      (props: ScopedProps<TabsProps>, forwardedRef) => {\n        const {\n          __scopeTabs,\n          value: valueProp,\n          onValueChange,\n          defaultValue,\n          orientation = 'horizontal',\n          dir,\n          activationMode = 'automatic',\n          size = '$true',\n          ...tabsProps\n        } = props\n        const direction = useDirection(dir)\n        const [value, setValue] = useControllableState({\n          prop: valueProp,\n          onChange: onValueChange,\n          defaultProp: defaultValue ?? '',\n        })\n        const [triggersCount, setTriggersCount] = React.useState(0)\n        const registerTrigger = useEvent(() => setTriggersCount((v) => v + 1))\n        const unregisterTrigger = useEvent(() => setTriggersCount((v) => v - 1))\n\n        return (\n          <TabsProvider\n            scope={__scopeTabs}\n            baseId={React.useId()}\n            value={value}\n            onChange={setValue}\n            orientation={orientation}\n            dir={direction}\n            activationMode={activationMode}\n            size={size}\n            registerTrigger={registerTrigger}\n            triggersCount={triggersCount}\n            unregisterTrigger={unregisterTrigger}\n          >\n            <TabsFrame\n              direction={direction}\n              //   dir={direction}\n              data-orientation={orientation}\n              {...tabsProps}\n              ref={forwardedRef}\n            />\n          </TabsProvider>\n        )\n      }\n    )\n  ),\n  {\n    List: TabsList,\n    /**\n     * @deprecated Use Tabs.Tab instead\n     */\n    Trigger: TabsTrigger,\n    Tab: TabsTrigger,\n    Content: TabsContent,\n  }\n)\nTabs.displayName = TABS_NAME\n\n/* ---------------------------------------------------------------------------------------------- */\n\nfunction makeTriggerId(baseId: string, value: string) {\n  return `${baseId}-trigger-${value}`\n}\n\nfunction makeContentId(baseId: string, value: string) {\n  return `${baseId}-content-${value}`\n}\n\nexport type {\n  TabsProps,\n  TabsListProps,\n  TabsTriggerProps,\n  TabsTriggerLayout,\n  TabsTabProps,\n  TabsContentProps,\n  TabLayout,\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/jsx/Tabs.js CHANGED Viewed

@@ -12,7 +12,6 @@ import {
   isWeb,
   styled,
   useEvent,
-  useId,
   withStaticProperties
 } from "@tamagui/web";
 import * as React from "react";
@@ -266,7 +265,7 @@ const Tabs = withStaticProperties(
         const unregisterTrigger = useEvent(() => setTriggersCount((v) => v - 1));
         return <TabsProvider
           scope={__scopeTabs}
-          baseId={useId()}
+          baseId={React.useId()}
           value={value}
           onChange={setValue}
           orientation={orientation}

package/dist/jsx/Tabs.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Tabs.tsx"],
-  "sourcesContent": ["import type { Scope } from '@tamagui/create-context'\nimport { createContextScope } from '@tamagui/create-context'\nimport { getButtonSized } from '@tamagui/get-button-sized'\nimport { Group, GroupProps, useGroupItem } from '@tamagui/group'\nimport { RovingFocusGroup, createRovingFocusGroupScope } from '@tamagui/roving-focus'\nimport { SizableStack, ThemeableStack, ThemeableStackProps } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport { useDirection } from '@tamagui/use-direction'\nimport {\n  GetProps,\n  SizeTokens,\n  Theme,\n  composeEventHandlers,\n  composeRefs,\n  isWeb,\n  styled,\n  useEvent,\n  useId,\n  withStaticProperties,\n} from '@tamagui/web'\nimport * as React from 'react'\nimport type { LayoutRectangle } from 'react-native'\n\n/* -------------------------------------------------------------------------------------------------\n * TabsList\n * -----------------------------------------------------------------------------------------------*/\n\nconst TAB_LIST_NAME = 'TabsList'\n\nconst TabsListFrame = styled(Group, {\n  name: TAB_LIST_NAME,\n  focusable: true,\n  // defaultVariants: {\n  //   flexGrow: 0,\n  // },\n})\n\ntype TabsListFrameProps = GroupProps\n\ntype TabsListProps = TabsListFrameProps & {\n  /**\n   * Whether to loop over after reaching the end or start of the items\n   * @default true\n   */\n  loop?: boolean\n}\n\nconst TabsList = TabsListFrame.extractable(\n  React.forwardRef<HTMLDivElement, TabsListProps>(\n    (props: ScopedProps<TabsListProps>, forwardedRef) => {\n      const { __scopeTabs, loop = true, children, ...listProps } = props\n      const context = useTabsContext(TAB_LIST_NAME, __scopeTabs)\n      const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs)\n\n      return (\n        <RovingFocusGroup\n          asChild\n          orientation={context.orientation}\n          dir={context.dir}\n          loop={loop}\n          {...rovingFocusGroupScope}\n        >\n          <TabsListFrame\n            role=\"tablist\"\n            aria-orientation={context.orientation}\n            ref={forwardedRef}\n            axis={context.orientation}\n            {...listProps}\n          >\n            {children}\n          </TabsListFrame>\n        </RovingFocusGroup>\n      )\n    }\n  )\n)\n\nTabsList.displayName = TAB_LIST_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * TabsTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'TabsTrigger'\n\nconst TabsTriggerFrame = styled(ThemeableStack, {\n  name: TRIGGER_NAME,\n  justifyContent: 'center',\n  alignItems: 'center',\n  flexWrap: 'nowrap',\n  flexDirection: 'row',\n  cursor: 'pointer',\n  focusable: true,\n\n  variants: {\n    size: {\n      '...size': getButtonSized,\n    },\n    disabled: {\n      true: {\n        pointerEvents: 'none',\n      },\n    },\n    unstyled: {\n      false: {\n        backgroundColor: '$background',\n\n        pressStyle: {\n          backgroundColor: '$backgroundPress',\n        },\n\n        hoverStyle: {\n          backgroundColor: '$backgroundHover',\n        },\n\n        focusStyle: {\n          backgroundColor: '$backgroundFocus',\n        },\n      },\n    },\n  } as const,\n  defaultVariants: {\n    unstyled: false,\n  },\n})\n\n/**\n * @deprecated Use `TabLayout` instead\n */\ntype TabsTriggerLayout = LayoutRectangle\ntype TabLayout = LayoutRectangle\ntype InteractionType = 'select' | 'focus' | 'hover'\n\ntype TabsTriggerFrameProps = GetProps<typeof TabsTriggerFrame>\n/**\n * @deprecated use `TabTabsProps` instead\n */\ntype TabsTriggerProps = TabsTriggerFrameProps & {\n  /** The value for the tabs state to be changed to after activation of the trigger */\n  value: string\n\n  /** Used for making custom indicators when trigger interacted with */\n  onInteraction?: (type: InteractionType, layout: TabLayout | null) => void\n}\n\ntype TabsTabProps = TabsTriggerProps\n\nconst TabsTrigger = TabsTriggerFrame.extractable(\n  React.forwardRef<HTMLButtonElement, TabsTriggerProps>(\n    (props: ScopedProps<TabsTriggerProps>, forwardedRef) => {\n      const {\n        __scopeTabs,\n        value,\n        disabled = false,\n        onInteraction,\n        ...triggerProps\n      } = props\n      const context = useTabsContext(TRIGGER_NAME, __scopeTabs)\n      const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs)\n      const triggerId = makeTriggerId(context.baseId, value)\n      const contentId = makeContentId(context.baseId, value)\n      const isSelected = value === context.value\n      const [layout, setLayout] = React.useState<TabLayout | null>(null)\n      const triggerRef = React.useRef<HTMLButtonElement>(null)\n      const groupItemProps = useGroupItem({ disabled })\n\n      React.useEffect(() => {\n        context.registerTrigger()\n        return () => context.unregisterTrigger()\n      }, [])\n\n      React.useEffect(() => {\n        if (!triggerRef.current || !isWeb) return\n\n        function getTriggerSize() {\n          if (!triggerRef.current) return\n          setLayout({\n            width: triggerRef.current.offsetWidth,\n            height: triggerRef.current.offsetHeight,\n            x: triggerRef.current.offsetLeft,\n            y: triggerRef.current.offsetTop,\n          })\n        }\n        getTriggerSize()\n\n        const observer = new ResizeObserver(getTriggerSize)\n        observer.observe(triggerRef.current)\n\n        return () => {\n          if (!triggerRef.current) return\n          observer.unobserve(triggerRef.current)\n        }\n      }, [context.triggersCount])\n\n      React.useEffect(() => {\n        if (isSelected && layout) {\n          onInteraction?.('select', layout)\n        }\n      }, [isSelected, value, layout])\n\n      return (\n        <Theme forceClassName name={isSelected ? 'active' : null}>\n          <RovingFocusGroup.Item\n            asChild\n            {...rovingFocusGroupScope}\n            focusable={!disabled}\n            active={isSelected}\n          >\n            <TabsTriggerFrame\n              onLayout={(event) => {\n                if (!isWeb) {\n                  setLayout(event.nativeEvent.layout)\n                }\n              }}\n              onHoverIn={composeEventHandlers(props.onHoverIn, () => {\n                if (layout) {\n                  onInteraction?.('hover', layout)\n                }\n              })}\n              onHoverOut={composeEventHandlers(props.onHoverOut, () => {\n                onInteraction?.('hover', null)\n              })}\n              role=\"tab\"\n              aria-selected={isSelected}\n              aria-controls={contentId}\n              data-state={isSelected ? 'active' : 'inactive'}\n              data-disabled={disabled ? '' : undefined}\n              disabled={disabled}\n              id={triggerId}\n              // @ts-ignore\n              size={context.size}\n              {...triggerProps}\n              ref={composeRefs(forwardedRef, triggerRef)}\n              onPress={composeEventHandlers(props.onPress ?? undefined, (event) => {\n                // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n                // but not when the control key is pressed (avoiding MacOS right click)\n\n                const webChecks =\n                  !isWeb ||\n                  ((event as unknown as React.MouseEvent).button === 0 &&\n                    (event as unknown as React.MouseEvent).ctrlKey === false)\n                if (!disabled && !isSelected && webChecks) {\n                  context.onChange(value)\n                } else {\n                  // prevent focus to avoid accidental activation\n                  event.preventDefault()\n                }\n              })}\n              {...(isWeb && {\n                type: 'button',\n                onKeyDown: composeEventHandlers(\n                  (props as React.HTMLProps<HTMLButtonElement>).onKeyDown,\n                  (event) => {\n                    if ([' ', 'Enter'].includes(event.key)) {\n                      context.onChange(value)\n                      event.preventDefault()\n                    }\n                  }\n                ),\n                onFocus: composeEventHandlers(props.onFocus, (event) => {\n                  if (layout) {\n                    onInteraction?.('focus', layout)\n                  }\n                  // handle \"automatic\" activation if necessary\n                  // ie. activate tab following focus\n                  const isAutomaticActivation = context.activationMode !== 'manual'\n                  if (!isSelected && !disabled && isAutomaticActivation) {\n                    context.onChange(value)\n                  }\n                }),\n                onBlur: composeEventHandlers(props.onFocus, () => {\n                  onInteraction?.('focus', null)\n                }),\n              })}\n              {...groupItemProps}\n            />\n          </RovingFocusGroup.Item>\n        </Theme>\n      )\n    }\n  )\n)\n\nTabsTrigger.displayName = TRIGGER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * TabsContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'TabsContent'\n\nconst TabsContentFrame = styled(ThemeableStack, {\n  name: CONTENT_NAME,\n})\ntype TabsContentFrameProps = GetProps<typeof TabsContentFrame>\ntype TabsContentProps = TabsContentFrameProps & {\n  /** Will show the content when the value matches the state of Tabs root */\n  value: string\n\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with Tamagui animations.\n   */\n  forceMount?: true\n}\n\nconst TabsContent = TabsContentFrame.extractable(\n  React.forwardRef<HTMLDivElement, TabsContentProps>(\n    (props: ScopedProps<TabsContentProps>, forwardedRef) => {\n      const { __scopeTabs, value, forceMount, children, ...contentProps } = props\n      const context = useTabsContext(CONTENT_NAME, __scopeTabs)\n      const isSelected = value === context.value\n      const show = forceMount || isSelected\n\n      const triggerId = makeTriggerId(context.baseId, value)\n      const contentId = makeContentId(context.baseId, value)\n\n      if (!show) return null\n      return (\n        <TabsContentFrame\n          key={value}\n          data-state={isSelected ? 'active' : 'inactive'}\n          data-orientation={context.orientation}\n          role=\"tabpanel\"\n          aria-labelledby={triggerId}\n          // @ts-ignore\n          hidden={!show}\n          id={contentId}\n          tabIndex={0}\n          {...contentProps}\n          ref={forwardedRef}\n        >\n          {children}\n        </TabsContentFrame>\n      )\n    }\n  )\n)\n\nTabsContent.displayName = CONTENT_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Tabs\n * -----------------------------------------------------------------------------------------------*/\n\nconst TABS_NAME = 'Tabs'\n\ntype ScopedProps<P> = P & { __scopeTabs?: Scope }\nconst [createTabsContext, createTabsScope] = createContextScope(TABS_NAME, [\n  createRovingFocusGroupScope,\n])\nconst useRovingFocusGroupScope = createRovingFocusGroupScope()\n\ntype TabsContextValue = {\n  baseId: string\n  value?: string\n  onChange: (value: string) => void\n  orientation?: TabsProps['orientation']\n  dir?: TabsProps['dir']\n  activationMode?: TabsProps['activationMode']\n  size: SizeTokens\n  registerTrigger: () => void\n  unregisterTrigger: () => void\n  triggersCount: number\n}\n\nconst [TabsProvider, useTabsContext] = createTabsContext<TabsContextValue>(TABS_NAME)\n\nconst TabsFrame = styled(SizableStack, {\n  name: TABS_NAME,\n})\ntype RovingFocusGroupProps = React.ComponentPropsWithoutRef<typeof RovingFocusGroup>\ntype TabsFrameProps = GetProps<typeof TabsFrame>\ntype TabsProps = TabsFrameProps & {\n  /** The value for the selected tab, if controlled */\n  value?: string\n  /** The value of the tab to select by default, if uncontrolled */\n  defaultValue?: string\n  /** A function called when a new tab is selected */\n  onValueChange?: (value: string) => void\n  /**\n   * The orientation the tabs are layed out.\n   * Mainly so arrow navigation is done accordingly (left & right vs. up & down)\n   * @defaultValue horizontal\n   */\n  orientation?: RovingFocusGroupProps['orientation']\n  /**\n   * The direction of navigation between toolbar items.\n   */\n  dir?: RovingFocusGroupProps['dir']\n  /**\n   * Whether a tab is activated automatically or manually. Only supported in web.\n   * @defaultValue automatic\n   * */\n  activationMode?: 'automatic' | 'manual'\n}\n\nexport const Tabs = withStaticProperties(\n  TabsFrame.extractable(\n    React.forwardRef<HTMLDivElement, TabsProps>(\n      (props: ScopedProps<TabsProps>, forwardedRef) => {\n        const {\n          __scopeTabs,\n          value: valueProp,\n          onValueChange,\n          defaultValue,\n          orientation = 'horizontal',\n          dir,\n          activationMode = 'automatic',\n          size = '$true',\n          ...tabsProps\n        } = props\n        const direction = useDirection(dir)\n        const [value, setValue] = useControllableState({\n          prop: valueProp,\n          onChange: onValueChange,\n          defaultProp: defaultValue ?? '',\n        })\n        const [triggersCount, setTriggersCount] = React.useState(0)\n        const registerTrigger = useEvent(() => setTriggersCount((v) => v + 1))\n        const unregisterTrigger = useEvent(() => setTriggersCount((v) => v - 1))\n\n        return (\n          <TabsProvider\n            scope={__scopeTabs}\n            baseId={useId()}\n            value={value}\n            onChange={setValue}\n            orientation={orientation}\n            dir={direction}\n            activationMode={activationMode}\n            size={size}\n            registerTrigger={registerTrigger}\n            triggersCount={triggersCount}\n            unregisterTrigger={unregisterTrigger}\n          >\n            <TabsFrame\n              direction={direction}\n              //   dir={direction}\n              data-orientation={orientation}\n              {...tabsProps}\n              ref={forwardedRef}\n            />\n          </TabsProvider>\n        )\n      }\n    )\n  ),\n  {\n    List: TabsList,\n    /**\n     * @deprecated Use Tabs.Tab instead\n     */\n    Trigger: TabsTrigger,\n    Tab: TabsTrigger,\n    Content: TabsContent,\n  }\n)\nTabs.displayName = TABS_NAME\n\n/* ---------------------------------------------------------------------------------------------- */\n\nfunction makeTriggerId(baseId: string, value: string) {\n  return `${baseId}-trigger-${value}`\n}\n\nfunction makeContentId(baseId: string, value: string) {\n  return `${baseId}-content-${value}`\n}\n\nexport type {\n  TabsProps,\n  TabsListProps,\n  TabsTriggerProps,\n  TabsTriggerLayout,\n  TabsTabProps,\n  TabsContentProps,\n  TabLayout,\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { Scope } from '@tamagui/create-context'\nimport { createContextScope } from '@tamagui/create-context'\nimport { getButtonSized } from '@tamagui/get-button-sized'\nimport { Group, GroupProps, useGroupItem } from '@tamagui/group'\nimport { RovingFocusGroup, createRovingFocusGroupScope } from '@tamagui/roving-focus'\nimport { SizableStack, ThemeableStack, ThemeableStackProps } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport { useDirection } from '@tamagui/use-direction'\nimport {\n  GetProps,\n  SizeTokens,\n  Theme,\n  composeEventHandlers,\n  composeRefs,\n  isWeb,\n  styled,\n  useEvent,\n  withStaticProperties,\n} from '@tamagui/web'\nimport * as React from 'react'\nimport type { LayoutRectangle } from 'react-native'\n\n/* -------------------------------------------------------------------------------------------------\n * TabsList\n * -----------------------------------------------------------------------------------------------*/\n\nconst TAB_LIST_NAME = 'TabsList'\n\nconst TabsListFrame = styled(Group, {\n  name: TAB_LIST_NAME,\n  focusable: true,\n  // defaultVariants: {\n  //   flexGrow: 0,\n  // },\n})\n\ntype TabsListFrameProps = GroupProps\n\ntype TabsListProps = TabsListFrameProps & {\n  /**\n   * Whether to loop over after reaching the end or start of the items\n   * @default true\n   */\n  loop?: boolean\n}\n\nconst TabsList = TabsListFrame.extractable(\n  React.forwardRef<HTMLDivElement, TabsListProps>(\n    (props: ScopedProps<TabsListProps>, forwardedRef) => {\n      const { __scopeTabs, loop = true, children, ...listProps } = props\n      const context = useTabsContext(TAB_LIST_NAME, __scopeTabs)\n      const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs)\n\n      return (\n        <RovingFocusGroup\n          asChild\n          orientation={context.orientation}\n          dir={context.dir}\n          loop={loop}\n          {...rovingFocusGroupScope}\n        >\n          <TabsListFrame\n            role=\"tablist\"\n            aria-orientation={context.orientation}\n            ref={forwardedRef}\n            axis={context.orientation}\n            {...listProps}\n          >\n            {children}\n          </TabsListFrame>\n        </RovingFocusGroup>\n      )\n    }\n  )\n)\n\nTabsList.displayName = TAB_LIST_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * TabsTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'TabsTrigger'\n\nconst TabsTriggerFrame = styled(ThemeableStack, {\n  name: TRIGGER_NAME,\n  justifyContent: 'center',\n  alignItems: 'center',\n  flexWrap: 'nowrap',\n  flexDirection: 'row',\n  cursor: 'pointer',\n  focusable: true,\n\n  variants: {\n    size: {\n      '...size': getButtonSized,\n    },\n    disabled: {\n      true: {\n        pointerEvents: 'none',\n      },\n    },\n    unstyled: {\n      false: {\n        backgroundColor: '$background',\n\n        pressStyle: {\n          backgroundColor: '$backgroundPress',\n        },\n\n        hoverStyle: {\n          backgroundColor: '$backgroundHover',\n        },\n\n        focusStyle: {\n          backgroundColor: '$backgroundFocus',\n        },\n      },\n    },\n  } as const,\n  defaultVariants: {\n    unstyled: false,\n  },\n})\n\n/**\n * @deprecated Use `TabLayout` instead\n */\ntype TabsTriggerLayout = LayoutRectangle\ntype TabLayout = LayoutRectangle\ntype InteractionType = 'select' | 'focus' | 'hover'\n\ntype TabsTriggerFrameProps = GetProps<typeof TabsTriggerFrame>\n/**\n * @deprecated use `TabTabsProps` instead\n */\ntype TabsTriggerProps = TabsTriggerFrameProps & {\n  /** The value for the tabs state to be changed to after activation of the trigger */\n  value: string\n\n  /** Used for making custom indicators when trigger interacted with */\n  onInteraction?: (type: InteractionType, layout: TabLayout | null) => void\n}\n\ntype TabsTabProps = TabsTriggerProps\n\nconst TabsTrigger = TabsTriggerFrame.extractable(\n  React.forwardRef<HTMLButtonElement, TabsTriggerProps>(\n    (props: ScopedProps<TabsTriggerProps>, forwardedRef) => {\n      const {\n        __scopeTabs,\n        value,\n        disabled = false,\n        onInteraction,\n        ...triggerProps\n      } = props\n      const context = useTabsContext(TRIGGER_NAME, __scopeTabs)\n      const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs)\n      const triggerId = makeTriggerId(context.baseId, value)\n      const contentId = makeContentId(context.baseId, value)\n      const isSelected = value === context.value\n      const [layout, setLayout] = React.useState<TabLayout | null>(null)\n      const triggerRef = React.useRef<HTMLButtonElement>(null)\n      const groupItemProps = useGroupItem({ disabled })\n\n      React.useEffect(() => {\n        context.registerTrigger()\n        return () => context.unregisterTrigger()\n      }, [])\n\n      React.useEffect(() => {\n        if (!triggerRef.current || !isWeb) return\n\n        function getTriggerSize() {\n          if (!triggerRef.current) return\n          setLayout({\n            width: triggerRef.current.offsetWidth,\n            height: triggerRef.current.offsetHeight,\n            x: triggerRef.current.offsetLeft,\n            y: triggerRef.current.offsetTop,\n          })\n        }\n        getTriggerSize()\n\n        const observer = new ResizeObserver(getTriggerSize)\n        observer.observe(triggerRef.current)\n\n        return () => {\n          if (!triggerRef.current) return\n          observer.unobserve(triggerRef.current)\n        }\n      }, [context.triggersCount])\n\n      React.useEffect(() => {\n        if (isSelected && layout) {\n          onInteraction?.('select', layout)\n        }\n      }, [isSelected, value, layout])\n\n      return (\n        <Theme forceClassName name={isSelected ? 'active' : null}>\n          <RovingFocusGroup.Item\n            asChild\n            {...rovingFocusGroupScope}\n            focusable={!disabled}\n            active={isSelected}\n          >\n            <TabsTriggerFrame\n              onLayout={(event) => {\n                if (!isWeb) {\n                  setLayout(event.nativeEvent.layout)\n                }\n              }}\n              onHoverIn={composeEventHandlers(props.onHoverIn, () => {\n                if (layout) {\n                  onInteraction?.('hover', layout)\n                }\n              })}\n              onHoverOut={composeEventHandlers(props.onHoverOut, () => {\n                onInteraction?.('hover', null)\n              })}\n              role=\"tab\"\n              aria-selected={isSelected}\n              aria-controls={contentId}\n              data-state={isSelected ? 'active' : 'inactive'}\n              data-disabled={disabled ? '' : undefined}\n              disabled={disabled}\n              id={triggerId}\n              // @ts-ignore\n              size={context.size}\n              {...triggerProps}\n              ref={composeRefs(forwardedRef, triggerRef)}\n              onPress={composeEventHandlers(props.onPress ?? undefined, (event) => {\n                // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n                // but not when the control key is pressed (avoiding MacOS right click)\n\n                const webChecks =\n                  !isWeb ||\n                  ((event as unknown as React.MouseEvent).button === 0 &&\n                    (event as unknown as React.MouseEvent).ctrlKey === false)\n                if (!disabled && !isSelected && webChecks) {\n                  context.onChange(value)\n                } else {\n                  // prevent focus to avoid accidental activation\n                  event.preventDefault()\n                }\n              })}\n              {...(isWeb && {\n                type: 'button',\n                onKeyDown: composeEventHandlers(\n                  (props as React.HTMLProps<HTMLButtonElement>).onKeyDown,\n                  (event) => {\n                    if ([' ', 'Enter'].includes(event.key)) {\n                      context.onChange(value)\n                      event.preventDefault()\n                    }\n                  }\n                ),\n                onFocus: composeEventHandlers(props.onFocus, (event) => {\n                  if (layout) {\n                    onInteraction?.('focus', layout)\n                  }\n                  // handle \"automatic\" activation if necessary\n                  // ie. activate tab following focus\n                  const isAutomaticActivation = context.activationMode !== 'manual'\n                  if (!isSelected && !disabled && isAutomaticActivation) {\n                    context.onChange(value)\n                  }\n                }),\n                onBlur: composeEventHandlers(props.onFocus, () => {\n                  onInteraction?.('focus', null)\n                }),\n              })}\n              {...groupItemProps}\n            />\n          </RovingFocusGroup.Item>\n        </Theme>\n      )\n    }\n  )\n)\n\nTabsTrigger.displayName = TRIGGER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * TabsContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'TabsContent'\n\nconst TabsContentFrame = styled(ThemeableStack, {\n  name: CONTENT_NAME,\n})\ntype TabsContentFrameProps = GetProps<typeof TabsContentFrame>\ntype TabsContentProps = TabsContentFrameProps & {\n  /** Will show the content when the value matches the state of Tabs root */\n  value: string\n\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with Tamagui animations.\n   */\n  forceMount?: true\n}\n\nconst TabsContent = TabsContentFrame.extractable(\n  React.forwardRef<HTMLDivElement, TabsContentProps>(\n    (props: ScopedProps<TabsContentProps>, forwardedRef) => {\n      const { __scopeTabs, value, forceMount, children, ...contentProps } = props\n      const context = useTabsContext(CONTENT_NAME, __scopeTabs)\n      const isSelected = value === context.value\n      const show = forceMount || isSelected\n\n      const triggerId = makeTriggerId(context.baseId, value)\n      const contentId = makeContentId(context.baseId, value)\n\n      if (!show) return null\n      return (\n        <TabsContentFrame\n          key={value}\n          data-state={isSelected ? 'active' : 'inactive'}\n          data-orientation={context.orientation}\n          role=\"tabpanel\"\n          aria-labelledby={triggerId}\n          // @ts-ignore\n          hidden={!show}\n          id={contentId}\n          tabIndex={0}\n          {...contentProps}\n          ref={forwardedRef}\n        >\n          {children}\n        </TabsContentFrame>\n      )\n    }\n  )\n)\n\nTabsContent.displayName = CONTENT_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Tabs\n * -----------------------------------------------------------------------------------------------*/\n\nconst TABS_NAME = 'Tabs'\n\ntype ScopedProps<P> = P & { __scopeTabs?: Scope }\nconst [createTabsContext, createTabsScope] = createContextScope(TABS_NAME, [\n  createRovingFocusGroupScope,\n])\nconst useRovingFocusGroupScope = createRovingFocusGroupScope()\n\ntype TabsContextValue = {\n  baseId: string\n  value?: string\n  onChange: (value: string) => void\n  orientation?: TabsProps['orientation']\n  dir?: TabsProps['dir']\n  activationMode?: TabsProps['activationMode']\n  size: SizeTokens\n  registerTrigger: () => void\n  unregisterTrigger: () => void\n  triggersCount: number\n}\n\nconst [TabsProvider, useTabsContext] = createTabsContext<TabsContextValue>(TABS_NAME)\n\nconst TabsFrame = styled(SizableStack, {\n  name: TABS_NAME,\n})\ntype RovingFocusGroupProps = React.ComponentPropsWithoutRef<typeof RovingFocusGroup>\ntype TabsFrameProps = GetProps<typeof TabsFrame>\ntype TabsProps = TabsFrameProps & {\n  /** The value for the selected tab, if controlled */\n  value?: string\n  /** The value of the tab to select by default, if uncontrolled */\n  defaultValue?: string\n  /** A function called when a new tab is selected */\n  onValueChange?: (value: string) => void\n  /**\n   * The orientation the tabs are layed out.\n   * Mainly so arrow navigation is done accordingly (left & right vs. up & down)\n   * @defaultValue horizontal\n   */\n  orientation?: RovingFocusGroupProps['orientation']\n  /**\n   * The direction of navigation between toolbar items.\n   */\n  dir?: RovingFocusGroupProps['dir']\n  /**\n   * Whether a tab is activated automatically or manually. Only supported in web.\n   * @defaultValue automatic\n   * */\n  activationMode?: 'automatic' | 'manual'\n}\n\nexport const Tabs = withStaticProperties(\n  TabsFrame.extractable(\n    React.forwardRef<HTMLDivElement, TabsProps>(\n      (props: ScopedProps<TabsProps>, forwardedRef) => {\n        const {\n          __scopeTabs,\n          value: valueProp,\n          onValueChange,\n          defaultValue,\n          orientation = 'horizontal',\n          dir,\n          activationMode = 'automatic',\n          size = '$true',\n          ...tabsProps\n        } = props\n        const direction = useDirection(dir)\n        const [value, setValue] = useControllableState({\n          prop: valueProp,\n          onChange: onValueChange,\n          defaultProp: defaultValue ?? '',\n        })\n        const [triggersCount, setTriggersCount] = React.useState(0)\n        const registerTrigger = useEvent(() => setTriggersCount((v) => v + 1))\n        const unregisterTrigger = useEvent(() => setTriggersCount((v) => v - 1))\n\n        return (\n          <TabsProvider\n            scope={__scopeTabs}\n            baseId={React.useId()}\n            value={value}\n            onChange={setValue}\n            orientation={orientation}\n            dir={direction}\n            activationMode={activationMode}\n            size={size}\n            registerTrigger={registerTrigger}\n            triggersCount={triggersCount}\n            unregisterTrigger={unregisterTrigger}\n          >\n            <TabsFrame\n              direction={direction}\n              //   dir={direction}\n              data-orientation={orientation}\n              {...tabsProps}\n              ref={forwardedRef}\n            />\n          </TabsProvider>\n        )\n      }\n    )\n  ),\n  {\n    List: TabsList,\n    /**\n     * @deprecated Use Tabs.Tab instead\n     */\n    Trigger: TabsTrigger,\n    Tab: TabsTrigger,\n    Content: TabsContent,\n  }\n)\nTabs.displayName = TABS_NAME\n\n/* ---------------------------------------------------------------------------------------------- */\n\nfunction makeTriggerId(baseId: string, value: string) {\n  return `${baseId}-trigger-${value}`\n}\n\nfunction makeContentId(baseId: string, value: string) {\n  return `${baseId}-content-${value}`\n}\n\nexport type {\n  TabsProps,\n  TabsListProps,\n  TabsTriggerProps,\n  TabsTriggerLayout,\n  TabsTabProps,\n  TabsContentProps,\n  TabLayout,\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/jsx/Tabs.mjs CHANGED Viewed

@@ -12,7 +12,6 @@ import {
   isWeb,
   styled,
   useEvent,
-  useId,
   withStaticProperties
 } from "@tamagui/web";
 import * as React from "react";
@@ -266,7 +265,7 @@ const Tabs = withStaticProperties(
         const unregisterTrigger = useEvent(() => setTriggersCount((v) => v - 1));
         return <TabsProvider
           scope={__scopeTabs}
-          baseId={useId()}
+          baseId={React.useId()}
           value={value}
           onChange={setValue}
           orientation={orientation}

package/dist/jsx/Tabs.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Tabs.tsx"],
-  "sourcesContent": ["import type { Scope } from '@tamagui/create-context'\nimport { createContextScope } from '@tamagui/create-context'\nimport { getButtonSized } from '@tamagui/get-button-sized'\nimport { Group, GroupProps, useGroupItem } from '@tamagui/group'\nimport { RovingFocusGroup, createRovingFocusGroupScope } from '@tamagui/roving-focus'\nimport { SizableStack, ThemeableStack, ThemeableStackProps } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport { useDirection } from '@tamagui/use-direction'\nimport {\n  GetProps,\n  SizeTokens,\n  Theme,\n  composeEventHandlers,\n  composeRefs,\n  isWeb,\n  styled,\n  useEvent,\n  useId,\n  withStaticProperties,\n} from '@tamagui/web'\nimport * as React from 'react'\nimport type { LayoutRectangle } from 'react-native'\n\n/* -------------------------------------------------------------------------------------------------\n * TabsList\n * -----------------------------------------------------------------------------------------------*/\n\nconst TAB_LIST_NAME = 'TabsList'\n\nconst TabsListFrame = styled(Group, {\n  name: TAB_LIST_NAME,\n  focusable: true,\n  // defaultVariants: {\n  //   flexGrow: 0,\n  // },\n})\n\ntype TabsListFrameProps = GroupProps\n\ntype TabsListProps = TabsListFrameProps & {\n  /**\n   * Whether to loop over after reaching the end or start of the items\n   * @default true\n   */\n  loop?: boolean\n}\n\nconst TabsList = TabsListFrame.extractable(\n  React.forwardRef<HTMLDivElement, TabsListProps>(\n    (props: ScopedProps<TabsListProps>, forwardedRef) => {\n      const { __scopeTabs, loop = true, children, ...listProps } = props\n      const context = useTabsContext(TAB_LIST_NAME, __scopeTabs)\n      const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs)\n\n      return (\n        <RovingFocusGroup\n          asChild\n          orientation={context.orientation}\n          dir={context.dir}\n          loop={loop}\n          {...rovingFocusGroupScope}\n        >\n          <TabsListFrame\n            role=\"tablist\"\n            aria-orientation={context.orientation}\n            ref={forwardedRef}\n            axis={context.orientation}\n            {...listProps}\n          >\n            {children}\n          </TabsListFrame>\n        </RovingFocusGroup>\n      )\n    }\n  )\n)\n\nTabsList.displayName = TAB_LIST_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * TabsTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'TabsTrigger'\n\nconst TabsTriggerFrame = styled(ThemeableStack, {\n  name: TRIGGER_NAME,\n  justifyContent: 'center',\n  alignItems: 'center',\n  flexWrap: 'nowrap',\n  flexDirection: 'row',\n  cursor: 'pointer',\n  focusable: true,\n\n  variants: {\n    size: {\n      '...size': getButtonSized,\n    },\n    disabled: {\n      true: {\n        pointerEvents: 'none',\n      },\n    },\n    unstyled: {\n      false: {\n        backgroundColor: '$background',\n\n        pressStyle: {\n          backgroundColor: '$backgroundPress',\n        },\n\n        hoverStyle: {\n          backgroundColor: '$backgroundHover',\n        },\n\n        focusStyle: {\n          backgroundColor: '$backgroundFocus',\n        },\n      },\n    },\n  } as const,\n  defaultVariants: {\n    unstyled: false,\n  },\n})\n\n/**\n * @deprecated Use `TabLayout` instead\n */\ntype TabsTriggerLayout = LayoutRectangle\ntype TabLayout = LayoutRectangle\ntype InteractionType = 'select' | 'focus' | 'hover'\n\ntype TabsTriggerFrameProps = GetProps<typeof TabsTriggerFrame>\n/**\n * @deprecated use `TabTabsProps` instead\n */\ntype TabsTriggerProps = TabsTriggerFrameProps & {\n  /** The value for the tabs state to be changed to after activation of the trigger */\n  value: string\n\n  /** Used for making custom indicators when trigger interacted with */\n  onInteraction?: (type: InteractionType, layout: TabLayout | null) => void\n}\n\ntype TabsTabProps = TabsTriggerProps\n\nconst TabsTrigger = TabsTriggerFrame.extractable(\n  React.forwardRef<HTMLButtonElement, TabsTriggerProps>(\n    (props: ScopedProps<TabsTriggerProps>, forwardedRef) => {\n      const {\n        __scopeTabs,\n        value,\n        disabled = false,\n        onInteraction,\n        ...triggerProps\n      } = props\n      const context = useTabsContext(TRIGGER_NAME, __scopeTabs)\n      const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs)\n      const triggerId = makeTriggerId(context.baseId, value)\n      const contentId = makeContentId(context.baseId, value)\n      const isSelected = value === context.value\n      const [layout, setLayout] = React.useState<TabLayout | null>(null)\n      const triggerRef = React.useRef<HTMLButtonElement>(null)\n      const groupItemProps = useGroupItem({ disabled })\n\n      React.useEffect(() => {\n        context.registerTrigger()\n        return () => context.unregisterTrigger()\n      }, [])\n\n      React.useEffect(() => {\n        if (!triggerRef.current || !isWeb) return\n\n        function getTriggerSize() {\n          if (!triggerRef.current) return\n          setLayout({\n            width: triggerRef.current.offsetWidth,\n            height: triggerRef.current.offsetHeight,\n            x: triggerRef.current.offsetLeft,\n            y: triggerRef.current.offsetTop,\n          })\n        }\n        getTriggerSize()\n\n        const observer = new ResizeObserver(getTriggerSize)\n        observer.observe(triggerRef.current)\n\n        return () => {\n          if (!triggerRef.current) return\n          observer.unobserve(triggerRef.current)\n        }\n      }, [context.triggersCount])\n\n      React.useEffect(() => {\n        if (isSelected && layout) {\n          onInteraction?.('select', layout)\n        }\n      }, [isSelected, value, layout])\n\n      return (\n        <Theme forceClassName name={isSelected ? 'active' : null}>\n          <RovingFocusGroup.Item\n            asChild\n            {...rovingFocusGroupScope}\n            focusable={!disabled}\n            active={isSelected}\n          >\n            <TabsTriggerFrame\n              onLayout={(event) => {\n                if (!isWeb) {\n                  setLayout(event.nativeEvent.layout)\n                }\n              }}\n              onHoverIn={composeEventHandlers(props.onHoverIn, () => {\n                if (layout) {\n                  onInteraction?.('hover', layout)\n                }\n              })}\n              onHoverOut={composeEventHandlers(props.onHoverOut, () => {\n                onInteraction?.('hover', null)\n              })}\n              role=\"tab\"\n              aria-selected={isSelected}\n              aria-controls={contentId}\n              data-state={isSelected ? 'active' : 'inactive'}\n              data-disabled={disabled ? '' : undefined}\n              disabled={disabled}\n              id={triggerId}\n              // @ts-ignore\n              size={context.size}\n              {...triggerProps}\n              ref={composeRefs(forwardedRef, triggerRef)}\n              onPress={composeEventHandlers(props.onPress ?? undefined, (event) => {\n                // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n                // but not when the control key is pressed (avoiding MacOS right click)\n\n                const webChecks =\n                  !isWeb ||\n                  ((event as unknown as React.MouseEvent).button === 0 &&\n                    (event as unknown as React.MouseEvent).ctrlKey === false)\n                if (!disabled && !isSelected && webChecks) {\n                  context.onChange(value)\n                } else {\n                  // prevent focus to avoid accidental activation\n                  event.preventDefault()\n                }\n              })}\n              {...(isWeb && {\n                type: 'button',\n                onKeyDown: composeEventHandlers(\n                  (props as React.HTMLProps<HTMLButtonElement>).onKeyDown,\n                  (event) => {\n                    if ([' ', 'Enter'].includes(event.key)) {\n                      context.onChange(value)\n                      event.preventDefault()\n                    }\n                  }\n                ),\n                onFocus: composeEventHandlers(props.onFocus, (event) => {\n                  if (layout) {\n                    onInteraction?.('focus', layout)\n                  }\n                  // handle \"automatic\" activation if necessary\n                  // ie. activate tab following focus\n                  const isAutomaticActivation = context.activationMode !== 'manual'\n                  if (!isSelected && !disabled && isAutomaticActivation) {\n                    context.onChange(value)\n                  }\n                }),\n                onBlur: composeEventHandlers(props.onFocus, () => {\n                  onInteraction?.('focus', null)\n                }),\n              })}\n              {...groupItemProps}\n            />\n          </RovingFocusGroup.Item>\n        </Theme>\n      )\n    }\n  )\n)\n\nTabsTrigger.displayName = TRIGGER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * TabsContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'TabsContent'\n\nconst TabsContentFrame = styled(ThemeableStack, {\n  name: CONTENT_NAME,\n})\ntype TabsContentFrameProps = GetProps<typeof TabsContentFrame>\ntype TabsContentProps = TabsContentFrameProps & {\n  /** Will show the content when the value matches the state of Tabs root */\n  value: string\n\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with Tamagui animations.\n   */\n  forceMount?: true\n}\n\nconst TabsContent = TabsContentFrame.extractable(\n  React.forwardRef<HTMLDivElement, TabsContentProps>(\n    (props: ScopedProps<TabsContentProps>, forwardedRef) => {\n      const { __scopeTabs, value, forceMount, children, ...contentProps } = props\n      const context = useTabsContext(CONTENT_NAME, __scopeTabs)\n      const isSelected = value === context.value\n      const show = forceMount || isSelected\n\n      const triggerId = makeTriggerId(context.baseId, value)\n      const contentId = makeContentId(context.baseId, value)\n\n      if (!show) return null\n      return (\n        <TabsContentFrame\n          key={value}\n          data-state={isSelected ? 'active' : 'inactive'}\n          data-orientation={context.orientation}\n          role=\"tabpanel\"\n          aria-labelledby={triggerId}\n          // @ts-ignore\n          hidden={!show}\n          id={contentId}\n          tabIndex={0}\n          {...contentProps}\n          ref={forwardedRef}\n        >\n          {children}\n        </TabsContentFrame>\n      )\n    }\n  )\n)\n\nTabsContent.displayName = CONTENT_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Tabs\n * -----------------------------------------------------------------------------------------------*/\n\nconst TABS_NAME = 'Tabs'\n\ntype ScopedProps<P> = P & { __scopeTabs?: Scope }\nconst [createTabsContext, createTabsScope] = createContextScope(TABS_NAME, [\n  createRovingFocusGroupScope,\n])\nconst useRovingFocusGroupScope = createRovingFocusGroupScope()\n\ntype TabsContextValue = {\n  baseId: string\n  value?: string\n  onChange: (value: string) => void\n  orientation?: TabsProps['orientation']\n  dir?: TabsProps['dir']\n  activationMode?: TabsProps['activationMode']\n  size: SizeTokens\n  registerTrigger: () => void\n  unregisterTrigger: () => void\n  triggersCount: number\n}\n\nconst [TabsProvider, useTabsContext] = createTabsContext<TabsContextValue>(TABS_NAME)\n\nconst TabsFrame = styled(SizableStack, {\n  name: TABS_NAME,\n})\ntype RovingFocusGroupProps = React.ComponentPropsWithoutRef<typeof RovingFocusGroup>\ntype TabsFrameProps = GetProps<typeof TabsFrame>\ntype TabsProps = TabsFrameProps & {\n  /** The value for the selected tab, if controlled */\n  value?: string\n  /** The value of the tab to select by default, if uncontrolled */\n  defaultValue?: string\n  /** A function called when a new tab is selected */\n  onValueChange?: (value: string) => void\n  /**\n   * The orientation the tabs are layed out.\n   * Mainly so arrow navigation is done accordingly (left & right vs. up & down)\n   * @defaultValue horizontal\n   */\n  orientation?: RovingFocusGroupProps['orientation']\n  /**\n   * The direction of navigation between toolbar items.\n   */\n  dir?: RovingFocusGroupProps['dir']\n  /**\n   * Whether a tab is activated automatically or manually. Only supported in web.\n   * @defaultValue automatic\n   * */\n  activationMode?: 'automatic' | 'manual'\n}\n\nexport const Tabs = withStaticProperties(\n  TabsFrame.extractable(\n    React.forwardRef<HTMLDivElement, TabsProps>(\n      (props: ScopedProps<TabsProps>, forwardedRef) => {\n        const {\n          __scopeTabs,\n          value: valueProp,\n          onValueChange,\n          defaultValue,\n          orientation = 'horizontal',\n          dir,\n          activationMode = 'automatic',\n          size = '$true',\n          ...tabsProps\n        } = props\n        const direction = useDirection(dir)\n        const [value, setValue] = useControllableState({\n          prop: valueProp,\n          onChange: onValueChange,\n          defaultProp: defaultValue ?? '',\n        })\n        const [triggersCount, setTriggersCount] = React.useState(0)\n        const registerTrigger = useEvent(() => setTriggersCount((v) => v + 1))\n        const unregisterTrigger = useEvent(() => setTriggersCount((v) => v - 1))\n\n        return (\n          <TabsProvider\n            scope={__scopeTabs}\n            baseId={useId()}\n            value={value}\n            onChange={setValue}\n            orientation={orientation}\n            dir={direction}\n            activationMode={activationMode}\n            size={size}\n            registerTrigger={registerTrigger}\n            triggersCount={triggersCount}\n            unregisterTrigger={unregisterTrigger}\n          >\n            <TabsFrame\n              direction={direction}\n              //   dir={direction}\n              data-orientation={orientation}\n              {...tabsProps}\n              ref={forwardedRef}\n            />\n          </TabsProvider>\n        )\n      }\n    )\n  ),\n  {\n    List: TabsList,\n    /**\n     * @deprecated Use Tabs.Tab instead\n     */\n    Trigger: TabsTrigger,\n    Tab: TabsTrigger,\n    Content: TabsContent,\n  }\n)\nTabs.displayName = TABS_NAME\n\n/* ---------------------------------------------------------------------------------------------- */\n\nfunction makeTriggerId(baseId: string, value: string) {\n  return `${baseId}-trigger-${value}`\n}\n\nfunction makeContentId(baseId: string, value: string) {\n  return `${baseId}-content-${value}`\n}\n\nexport type {\n  TabsProps,\n  TabsListProps,\n  TabsTriggerProps,\n  TabsTriggerLayout,\n  TabsTabProps,\n  TabsContentProps,\n  TabLayout,\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { Scope } from '@tamagui/create-context'\nimport { createContextScope } from '@tamagui/create-context'\nimport { getButtonSized } from '@tamagui/get-button-sized'\nimport { Group, GroupProps, useGroupItem } from '@tamagui/group'\nimport { RovingFocusGroup, createRovingFocusGroupScope } from '@tamagui/roving-focus'\nimport { SizableStack, ThemeableStack, ThemeableStackProps } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport { useDirection } from '@tamagui/use-direction'\nimport {\n  GetProps,\n  SizeTokens,\n  Theme,\n  composeEventHandlers,\n  composeRefs,\n  isWeb,\n  styled,\n  useEvent,\n  withStaticProperties,\n} from '@tamagui/web'\nimport * as React from 'react'\nimport type { LayoutRectangle } from 'react-native'\n\n/* -------------------------------------------------------------------------------------------------\n * TabsList\n * -----------------------------------------------------------------------------------------------*/\n\nconst TAB_LIST_NAME = 'TabsList'\n\nconst TabsListFrame = styled(Group, {\n  name: TAB_LIST_NAME,\n  focusable: true,\n  // defaultVariants: {\n  //   flexGrow: 0,\n  // },\n})\n\ntype TabsListFrameProps = GroupProps\n\ntype TabsListProps = TabsListFrameProps & {\n  /**\n   * Whether to loop over after reaching the end or start of the items\n   * @default true\n   */\n  loop?: boolean\n}\n\nconst TabsList = TabsListFrame.extractable(\n  React.forwardRef<HTMLDivElement, TabsListProps>(\n    (props: ScopedProps<TabsListProps>, forwardedRef) => {\n      const { __scopeTabs, loop = true, children, ...listProps } = props\n      const context = useTabsContext(TAB_LIST_NAME, __scopeTabs)\n      const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs)\n\n      return (\n        <RovingFocusGroup\n          asChild\n          orientation={context.orientation}\n          dir={context.dir}\n          loop={loop}\n          {...rovingFocusGroupScope}\n        >\n          <TabsListFrame\n            role=\"tablist\"\n            aria-orientation={context.orientation}\n            ref={forwardedRef}\n            axis={context.orientation}\n            {...listProps}\n          >\n            {children}\n          </TabsListFrame>\n        </RovingFocusGroup>\n      )\n    }\n  )\n)\n\nTabsList.displayName = TAB_LIST_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * TabsTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'TabsTrigger'\n\nconst TabsTriggerFrame = styled(ThemeableStack, {\n  name: TRIGGER_NAME,\n  justifyContent: 'center',\n  alignItems: 'center',\n  flexWrap: 'nowrap',\n  flexDirection: 'row',\n  cursor: 'pointer',\n  focusable: true,\n\n  variants: {\n    size: {\n      '...size': getButtonSized,\n    },\n    disabled: {\n      true: {\n        pointerEvents: 'none',\n      },\n    },\n    unstyled: {\n      false: {\n        backgroundColor: '$background',\n\n        pressStyle: {\n          backgroundColor: '$backgroundPress',\n        },\n\n        hoverStyle: {\n          backgroundColor: '$backgroundHover',\n        },\n\n        focusStyle: {\n          backgroundColor: '$backgroundFocus',\n        },\n      },\n    },\n  } as const,\n  defaultVariants: {\n    unstyled: false,\n  },\n})\n\n/**\n * @deprecated Use `TabLayout` instead\n */\ntype TabsTriggerLayout = LayoutRectangle\ntype TabLayout = LayoutRectangle\ntype InteractionType = 'select' | 'focus' | 'hover'\n\ntype TabsTriggerFrameProps = GetProps<typeof TabsTriggerFrame>\n/**\n * @deprecated use `TabTabsProps` instead\n */\ntype TabsTriggerProps = TabsTriggerFrameProps & {\n  /** The value for the tabs state to be changed to after activation of the trigger */\n  value: string\n\n  /** Used for making custom indicators when trigger interacted with */\n  onInteraction?: (type: InteractionType, layout: TabLayout | null) => void\n}\n\ntype TabsTabProps = TabsTriggerProps\n\nconst TabsTrigger = TabsTriggerFrame.extractable(\n  React.forwardRef<HTMLButtonElement, TabsTriggerProps>(\n    (props: ScopedProps<TabsTriggerProps>, forwardedRef) => {\n      const {\n        __scopeTabs,\n        value,\n        disabled = false,\n        onInteraction,\n        ...triggerProps\n      } = props\n      const context = useTabsContext(TRIGGER_NAME, __scopeTabs)\n      const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs)\n      const triggerId = makeTriggerId(context.baseId, value)\n      const contentId = makeContentId(context.baseId, value)\n      const isSelected = value === context.value\n      const [layout, setLayout] = React.useState<TabLayout | null>(null)\n      const triggerRef = React.useRef<HTMLButtonElement>(null)\n      const groupItemProps = useGroupItem({ disabled })\n\n      React.useEffect(() => {\n        context.registerTrigger()\n        return () => context.unregisterTrigger()\n      }, [])\n\n      React.useEffect(() => {\n        if (!triggerRef.current || !isWeb) return\n\n        function getTriggerSize() {\n          if (!triggerRef.current) return\n          setLayout({\n            width: triggerRef.current.offsetWidth,\n            height: triggerRef.current.offsetHeight,\n            x: triggerRef.current.offsetLeft,\n            y: triggerRef.current.offsetTop,\n          })\n        }\n        getTriggerSize()\n\n        const observer = new ResizeObserver(getTriggerSize)\n        observer.observe(triggerRef.current)\n\n        return () => {\n          if (!triggerRef.current) return\n          observer.unobserve(triggerRef.current)\n        }\n      }, [context.triggersCount])\n\n      React.useEffect(() => {\n        if (isSelected && layout) {\n          onInteraction?.('select', layout)\n        }\n      }, [isSelected, value, layout])\n\n      return (\n        <Theme forceClassName name={isSelected ? 'active' : null}>\n          <RovingFocusGroup.Item\n            asChild\n            {...rovingFocusGroupScope}\n            focusable={!disabled}\n            active={isSelected}\n          >\n            <TabsTriggerFrame\n              onLayout={(event) => {\n                if (!isWeb) {\n                  setLayout(event.nativeEvent.layout)\n                }\n              }}\n              onHoverIn={composeEventHandlers(props.onHoverIn, () => {\n                if (layout) {\n                  onInteraction?.('hover', layout)\n                }\n              })}\n              onHoverOut={composeEventHandlers(props.onHoverOut, () => {\n                onInteraction?.('hover', null)\n              })}\n              role=\"tab\"\n              aria-selected={isSelected}\n              aria-controls={contentId}\n              data-state={isSelected ? 'active' : 'inactive'}\n              data-disabled={disabled ? '' : undefined}\n              disabled={disabled}\n              id={triggerId}\n              // @ts-ignore\n              size={context.size}\n              {...triggerProps}\n              ref={composeRefs(forwardedRef, triggerRef)}\n              onPress={composeEventHandlers(props.onPress ?? undefined, (event) => {\n                // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n                // but not when the control key is pressed (avoiding MacOS right click)\n\n                const webChecks =\n                  !isWeb ||\n                  ((event as unknown as React.MouseEvent).button === 0 &&\n                    (event as unknown as React.MouseEvent).ctrlKey === false)\n                if (!disabled && !isSelected && webChecks) {\n                  context.onChange(value)\n                } else {\n                  // prevent focus to avoid accidental activation\n                  event.preventDefault()\n                }\n              })}\n              {...(isWeb && {\n                type: 'button',\n                onKeyDown: composeEventHandlers(\n                  (props as React.HTMLProps<HTMLButtonElement>).onKeyDown,\n                  (event) => {\n                    if ([' ', 'Enter'].includes(event.key)) {\n                      context.onChange(value)\n                      event.preventDefault()\n                    }\n                  }\n                ),\n                onFocus: composeEventHandlers(props.onFocus, (event) => {\n                  if (layout) {\n                    onInteraction?.('focus', layout)\n                  }\n                  // handle \"automatic\" activation if necessary\n                  // ie. activate tab following focus\n                  const isAutomaticActivation = context.activationMode !== 'manual'\n                  if (!isSelected && !disabled && isAutomaticActivation) {\n                    context.onChange(value)\n                  }\n                }),\n                onBlur: composeEventHandlers(props.onFocus, () => {\n                  onInteraction?.('focus', null)\n                }),\n              })}\n              {...groupItemProps}\n            />\n          </RovingFocusGroup.Item>\n        </Theme>\n      )\n    }\n  )\n)\n\nTabsTrigger.displayName = TRIGGER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * TabsContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'TabsContent'\n\nconst TabsContentFrame = styled(ThemeableStack, {\n  name: CONTENT_NAME,\n})\ntype TabsContentFrameProps = GetProps<typeof TabsContentFrame>\ntype TabsContentProps = TabsContentFrameProps & {\n  /** Will show the content when the value matches the state of Tabs root */\n  value: string\n\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with Tamagui animations.\n   */\n  forceMount?: true\n}\n\nconst TabsContent = TabsContentFrame.extractable(\n  React.forwardRef<HTMLDivElement, TabsContentProps>(\n    (props: ScopedProps<TabsContentProps>, forwardedRef) => {\n      const { __scopeTabs, value, forceMount, children, ...contentProps } = props\n      const context = useTabsContext(CONTENT_NAME, __scopeTabs)\n      const isSelected = value === context.value\n      const show = forceMount || isSelected\n\n      const triggerId = makeTriggerId(context.baseId, value)\n      const contentId = makeContentId(context.baseId, value)\n\n      if (!show) return null\n      return (\n        <TabsContentFrame\n          key={value}\n          data-state={isSelected ? 'active' : 'inactive'}\n          data-orientation={context.orientation}\n          role=\"tabpanel\"\n          aria-labelledby={triggerId}\n          // @ts-ignore\n          hidden={!show}\n          id={contentId}\n          tabIndex={0}\n          {...contentProps}\n          ref={forwardedRef}\n        >\n          {children}\n        </TabsContentFrame>\n      )\n    }\n  )\n)\n\nTabsContent.displayName = CONTENT_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Tabs\n * -----------------------------------------------------------------------------------------------*/\n\nconst TABS_NAME = 'Tabs'\n\ntype ScopedProps<P> = P & { __scopeTabs?: Scope }\nconst [createTabsContext, createTabsScope] = createContextScope(TABS_NAME, [\n  createRovingFocusGroupScope,\n])\nconst useRovingFocusGroupScope = createRovingFocusGroupScope()\n\ntype TabsContextValue = {\n  baseId: string\n  value?: string\n  onChange: (value: string) => void\n  orientation?: TabsProps['orientation']\n  dir?: TabsProps['dir']\n  activationMode?: TabsProps['activationMode']\n  size: SizeTokens\n  registerTrigger: () => void\n  unregisterTrigger: () => void\n  triggersCount: number\n}\n\nconst [TabsProvider, useTabsContext] = createTabsContext<TabsContextValue>(TABS_NAME)\n\nconst TabsFrame = styled(SizableStack, {\n  name: TABS_NAME,\n})\ntype RovingFocusGroupProps = React.ComponentPropsWithoutRef<typeof RovingFocusGroup>\ntype TabsFrameProps = GetProps<typeof TabsFrame>\ntype TabsProps = TabsFrameProps & {\n  /** The value for the selected tab, if controlled */\n  value?: string\n  /** The value of the tab to select by default, if uncontrolled */\n  defaultValue?: string\n  /** A function called when a new tab is selected */\n  onValueChange?: (value: string) => void\n  /**\n   * The orientation the tabs are layed out.\n   * Mainly so arrow navigation is done accordingly (left & right vs. up & down)\n   * @defaultValue horizontal\n   */\n  orientation?: RovingFocusGroupProps['orientation']\n  /**\n   * The direction of navigation between toolbar items.\n   */\n  dir?: RovingFocusGroupProps['dir']\n  /**\n   * Whether a tab is activated automatically or manually. Only supported in web.\n   * @defaultValue automatic\n   * */\n  activationMode?: 'automatic' | 'manual'\n}\n\nexport const Tabs = withStaticProperties(\n  TabsFrame.extractable(\n    React.forwardRef<HTMLDivElement, TabsProps>(\n      (props: ScopedProps<TabsProps>, forwardedRef) => {\n        const {\n          __scopeTabs,\n          value: valueProp,\n          onValueChange,\n          defaultValue,\n          orientation = 'horizontal',\n          dir,\n          activationMode = 'automatic',\n          size = '$true',\n          ...tabsProps\n        } = props\n        const direction = useDirection(dir)\n        const [value, setValue] = useControllableState({\n          prop: valueProp,\n          onChange: onValueChange,\n          defaultProp: defaultValue ?? '',\n        })\n        const [triggersCount, setTriggersCount] = React.useState(0)\n        const registerTrigger = useEvent(() => setTriggersCount((v) => v + 1))\n        const unregisterTrigger = useEvent(() => setTriggersCount((v) => v - 1))\n\n        return (\n          <TabsProvider\n            scope={__scopeTabs}\n            baseId={React.useId()}\n            value={value}\n            onChange={setValue}\n            orientation={orientation}\n            dir={direction}\n            activationMode={activationMode}\n            size={size}\n            registerTrigger={registerTrigger}\n            triggersCount={triggersCount}\n            unregisterTrigger={unregisterTrigger}\n          >\n            <TabsFrame\n              direction={direction}\n              //   dir={direction}\n              data-orientation={orientation}\n              {...tabsProps}\n              ref={forwardedRef}\n            />\n          </TabsProvider>\n        )\n      }\n    )\n  ),\n  {\n    List: TabsList,\n    /**\n     * @deprecated Use Tabs.Tab instead\n     */\n    Trigger: TabsTrigger,\n    Tab: TabsTrigger,\n    Content: TabsContent,\n  }\n)\nTabs.displayName = TABS_NAME\n\n/* ---------------------------------------------------------------------------------------------- */\n\nfunction makeTriggerId(baseId: string, value: string) {\n  return `${baseId}-trigger-${value}`\n}\n\nfunction makeContentId(baseId: string, value: string) {\n  return `${baseId}-content-${value}`\n}\n\nexport type {\n  TabsProps,\n  TabsListProps,\n  TabsTriggerProps,\n  TabsTriggerLayout,\n  TabsTabProps,\n  TabsContentProps,\n  TabLayout,\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/tabs",
-  "version": "1.14.3",
+  "version": "1.14.5",
   "sideEffects": false,
   "source": "src/index.ts",
   "types": "./types/index.d.ts",
@@ -25,21 +25,21 @@
     }
   },
   "dependencies": {
-    "@tamagui/create-context": "1.14.3",
-    "@tamagui/get-button-sized": "1.14.3",
-    "@tamagui/group": "1.14.3",
-    "@tamagui/roving-focus": "1.14.3",
-    "@tamagui/stacks": "1.14.3",
-    "@tamagui/use-controllable-state": "1.14.3",
-    "@tamagui/use-direction": "1.14.3",
-    "@tamagui/web": "1.14.3"
+    "@tamagui/create-context": "1.14.5",
+    "@tamagui/get-button-sized": "1.14.5",
+    "@tamagui/group": "1.14.5",
+    "@tamagui/roving-focus": "1.14.5",
+    "@tamagui/stacks": "1.14.5",
+    "@tamagui/use-controllable-state": "1.14.5",
+    "@tamagui/use-direction": "1.14.5",
+    "@tamagui/web": "1.14.5"
   },
   "peerDependencies": {
     "react": "*",
     "react-dom": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.14.3",
+    "@tamagui/build": "1.14.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

package/src/Tabs.tsx CHANGED Viewed

@@ -15,7 +15,6 @@ import {
   isWeb,
   styled,
   useEvent,
-  useId,
   withStaticProperties,
 } from '@tamagui/web'
 import * as React from 'react'
@@ -423,7 +422,7 @@ export const Tabs = withStaticProperties(
         return (
           <TabsProvider
             scope={__scopeTabs}
-            baseId={useId()}
+            baseId={React.useId()}
             value={value}
             onChange={setValue}
             orientation={orientation}

package/types/Tabs.d.ts CHANGED Viewed

@@ -87,6 +87,8 @@ declare const TabsTriggerFrame: import("@tamagui/web").TamaguiComponent<Omit<imp
     readonly size?: SizeTokens | undefined;
     readonly disabled?: boolean | undefined;
     readonly unstyled?: boolean | undefined;
+}, {
+    displayName: string | undefined;
 }>;
 /**
  * @deprecated Use `TabLayout` instead
@@ -218,7 +220,9 @@ declare const TabsContentFrame: import("@tamagui/web").TamaguiComponent<(Omit<im
     readonly chromeless?: boolean | "all" | undefined;
 } & ({} | {
     [x: string]: undefined;
-})>;
+}), {
+    displayName: string | undefined;
+}>;
 type TabsContentFrameProps = GetProps<typeof TabsContentFrame>;
 type TabsContentProps = TabsContentFrameProps & {
     /** Will show the content when the value matches the state of Tabs root */
@@ -263,6 +267,9 @@ declare const TabsFrame: import("@tamagui/web").TamaguiComponent<(Omit<import("r
     readonly focusTheme?: boolean | undefined;
     readonly circular?: boolean | undefined;
     readonly elevate?: boolean | undefined;
+    /**
+     * @deprecated use `TabTabsProps` instead
+     */
     readonly bordered?: number | boolean | undefined;
     readonly size?: SizeTokens | undefined;
 }>>) | (Omit<import("react-native").ViewProps, "display" | "children" | "onLayout" | keyof import("react-native").GestureResponderHandlers> & import("@tamagui/web").ExtendBaseStackProps & import("@tamagui/web").TamaguiComponentPropsBase & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase>> & import("@tamagui/core/types/reactNativeTypes").RNViewProps & Omit<{
@@ -321,7 +328,9 @@ declare const TabsFrame: import("@tamagui/web").TamaguiComponent<(Omit<import("r
     readonly size?: SizeTokens | undefined;
 } & ({} | {
     [x: string]: undefined;
-})>;
+}), {
+    displayName: string | undefined;
+}>;
 type RovingFocusGroupProps = React.ComponentPropsWithoutRef<typeof RovingFocusGroup>;
 type TabsFrameProps = GetProps<typeof TabsFrame>;
 type TabsProps = TabsFrameProps & {
@@ -381,6 +390,9 @@ export declare const Tabs: React.ForwardRefExoticComponent<((Omit<import("react-
     readonly focusTheme?: boolean | undefined;
     readonly circular?: boolean | undefined;
     readonly elevate?: boolean | undefined;
+    /**
+     * @deprecated use `TabTabsProps` instead
+     */
     readonly bordered?: number | boolean | undefined;
     readonly size?: SizeTokens | undefined;
 }>> & {

package/types/Tabs.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../src/Tabs.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAS,UAAU,EAAgB,MAAM,gBAAgB,CAAA;AAChE,OAAO,EAAE,gBAAgB,EAA+B,MAAM,uBAAuB,CAAA;AAIrF,OAAO,EACL,QAAQ,EACR,UAAU,~~EASX~~,MAAM,cAAc,CAAA;AACrB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAgBnD,KAAK,kBAAkB,GAAG,UAAU,CAAA;AAEpC,KAAK,aAAa,GAAG,kBAAkB,GAAG;IACxC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,CAAA;AAwCD,QAAA,MAAM,gBAAgB~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~EAuCpB,CAAA;AAEF;;GAEG;AACH,KAAK,iBAAiB,GAAG,eAAe,CAAA;AACxC,KAAK,SAAS,GAAG,eAAe,CAAA;AAChC,KAAK,eAAe,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAA;AAEnD,KAAK,qBAAqB,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAC9D;;GAEG;AACH,KAAK,gBAAgB,GAAG,qBAAqB,GAAG;IAC9C,oFAAoF;IACpF,KAAK,EAAE,MAAM,CAAA;IAEb,qEAAqE;IACrE,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,EAAE,MAAM,EAAE,SAAS,GAAG,IAAI,KAAK,IAAI,CAAA;CAC1E,CAAA;AAED,KAAK,YAAY,GAAG,gBAAgB,CAAA;AAkJpC,QAAA,MAAM,gBAAgB~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAEpB~~,CAAA;AACF,KAAK,qBAAqB,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAC9D,KAAK,gBAAgB,GAAG,qBAAqB,GAAG;IAC9C,0EAA0E;IAC1E,KAAK,EAAE,MAAM,CAAA;IAEb;;;OAGG;IACH,UAAU,CAAC,EAAE,IAAI,CAAA;CAClB,CAAA;AAgED,QAAA,MAAM,SAAS~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAEb~~,CAAA;AACF,KAAK,qBAAqB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,CAAA;AACpF,KAAK,cAAc,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAA;AAChD,KAAK,SAAS,GAAG,cAAc,GAAG;IAChC,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,iEAAiE;IACjE,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,mDAAmD;IACnD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC;;;;OAIG;IACH,WAAW,CAAC,EAAE,qBAAqB,CAAC,aAAa,CAAC,CAAA;IAClD;;OAEG;IACH,GAAG,CAAC,EAAE,qBAAqB,CAAC,KAAK,CAAC,CAAA;IAClC;;;SAGK;IACL,cAAc,CAAC,EAAE,WAAW,GAAG,QAAQ,CAAA;CACxC,CAAA;AAED,eAAO,MAAM,IAAI~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAvBf~~,oDAAoD;;IAEpD,iEAAiE;;IAEjE,mDAAmD;6BAC3B,MAAM,KAAK,IAAI;IACvC;;;;OAIG;kBACW,qBAAqB,CAAC,aAAa,CAAC;IAClD;;OAEG;UACG,qBAAqB,CAAC,KAAK,CAAC;IAClC;;;SAGK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAnBL,oDAAoD;;IAEpD,iEAAiE;;IAEjE,mDAAmD;6BAC3B,MAAM,KAAK,IAAI;IACvC;;;;OAIG;kBACW,qBAAqB,CAAC,aAAa,CAAC;IAClD;;OAEG;UACG,qBAAqB,CAAC,KAAK,CAAC;IAClC;;;SAGK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAjWL;;;WAGG;;;IAuZD;;OAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA1TL,oFAAoF;eAC7E,MAAM;QAEb,qEAAqE;gCAC9C,eAAe,UAAU,SAAS,GAAG,IAAI,KAAK,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJzE,oFAAoF;eAC7E,MAAM;QAEb,qEAAqE;gCAC9C,eAAe,UAAU,SAAS,GAAG,IAAI,KAAK,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA0JzE,0EAA0E;eACnE,MAAM;QAEb;;;WAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QANH,0EAA0E;eACnE,MAAM;QAEb;;;WAGG;;;CA2JJ,CAAA;AAaD,YAAY,EACV,SAAS,EACT,aAAa,EACb,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,gBAAgB,EAChB,SAAS,GACV,CAAA"}
1	+ {"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../src/Tabs.tsx"],"names":[],"mappings":"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"}