@tamagui/tabs 1.14.9 → 1.15.1

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
  1. package/dist/cjs/Tabs.js +1 -3
  2. package/dist/cjs/Tabs.js.map +2 -2
  3. package/dist/esm/Tabs.js +1 -3
  4. package/dist/esm/Tabs.js.map +2 -2
  5. package/dist/esm/Tabs.mjs +1 -3
  6. package/dist/esm/Tabs.mjs.map +2 -2
  7. package/dist/jsx/Tabs.js +1 -3
  8. package/dist/jsx/Tabs.js.map +2 -2
  9. package/dist/jsx/Tabs.mjs +1 -3
  10. package/dist/jsx/Tabs.mjs.map +2 -2
  11. package/package.json +10 -10
  12. package/src/Tabs.tsx +2 -3
  13. package/types/Tabs.d.ts +10 -10
  14. package/types/Tabs.d.ts.map +1 -1
package/dist/cjs/Tabs.js CHANGED
@@ -45,9 +45,6 @@ const TAB_LIST_NAME = "TabsList";
45
45
  const TabsListFrame = (0, import_web.styled)(import_group.Group, {
46
46
  name: TAB_LIST_NAME,
47
47
  focusable: true
48
- // defaultVariants: {
49
- // flexGrow: 0,
50
- // },
51
48
  });
52
49
  const TabsList = TabsListFrame.extractable(
53
50
  React.forwardRef(
@@ -88,6 +85,7 @@ const TabsTriggerFrame = (0, import_web.styled)(import_stacks.ThemeableStack, {
88
85
  flexWrap: "nowrap",
89
86
  flexDirection: "row",
90
87
  cursor: "pointer",
88
+ backgroundColor: "$background",
91
89
  focusable: true,
92
90
  variants: {
93
91
  size: {
package/dist/cjs/Tabs.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/Tabs.tsx"],
4
- "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 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"],
5
- "mappings": "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",
4
+ "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})\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 backgroundColor: '$background',\n focusable: true,\n\n variants: {\n size: {\n '...size': getButtonSized,\n },\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 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"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/esm/Tabs.js CHANGED
@@ -20,9 +20,6 @@ const TAB_LIST_NAME = "TabsList";
20
20
  const TabsListFrame = styled(Group, {
21
21
  name: TAB_LIST_NAME,
22
22
  focusable: true
23
- // defaultVariants: {
24
- // flexGrow: 0,
25
- // },
26
23
  });
27
24
  const TabsList = TabsListFrame.extractable(
28
25
  React.forwardRef(
@@ -63,6 +60,7 @@ const TabsTriggerFrame = styled(ThemeableStack, {
63
60
  flexWrap: "nowrap",
64
61
  flexDirection: "row",
65
62
  cursor: "pointer",
63
+ backgroundColor: "$background",
66
64
  focusable: true,
67
65
  variants: {
68
66
  size: {
package/dist/esm/Tabs.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/Tabs.tsx"],
4
- "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 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"],
5
- "mappings": "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",
4
+ "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})\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 backgroundColor: '$background',\n focusable: true,\n\n variants: {\n size: {\n '...size': getButtonSized,\n },\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 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"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/esm/Tabs.mjs CHANGED
@@ -20,9 +20,6 @@ const TAB_LIST_NAME = "TabsList";
20
20
  const TabsListFrame = styled(Group, {
21
21
  name: TAB_LIST_NAME,
22
22
  focusable: true
23
- // defaultVariants: {
24
- // flexGrow: 0,
25
- // },
26
23
  });
27
24
  const TabsList = TabsListFrame.extractable(
28
25
  React.forwardRef(
@@ -63,6 +60,7 @@ const TabsTriggerFrame = styled(ThemeableStack, {
63
60
  flexWrap: "nowrap",
64
61
  flexDirection: "row",
65
62
  cursor: "pointer",
63
+ backgroundColor: "$background",
66
64
  focusable: true,
67
65
  variants: {
68
66
  size: {
package/dist/esm/Tabs.mjs.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/Tabs.tsx"],
4
- "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 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"],
5
- "mappings": "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",
4
+ "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})\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 backgroundColor: '$background',\n focusable: true,\n\n variants: {\n size: {\n '...size': getButtonSized,\n },\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 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"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/jsx/Tabs.js CHANGED
@@ -19,9 +19,6 @@ const TAB_LIST_NAME = "TabsList";
19
19
  const TabsListFrame = styled(Group, {
20
20
  name: TAB_LIST_NAME,
21
21
  focusable: true
22
- // defaultVariants: {
23
- // flexGrow: 0,
24
- // },
25
22
  });
26
23
  const TabsList = TabsListFrame.extractable(
27
24
  React.forwardRef(
@@ -54,6 +51,7 @@ const TabsTriggerFrame = styled(ThemeableStack, {
54
51
  flexWrap: "nowrap",
55
52
  flexDirection: "row",
56
53
  cursor: "pointer",
54
+ backgroundColor: "$background",
57
55
  focusable: true,
58
56
  variants: {
59
57
  size: {
package/dist/jsx/Tabs.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/Tabs.tsx"],
4
- "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 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"],
5
- "mappings": "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",
4
+ "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})\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 backgroundColor: '$background',\n focusable: true,\n\n variants: {\n size: {\n '...size': getButtonSized,\n },\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 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"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/jsx/Tabs.mjs CHANGED
@@ -19,9 +19,6 @@ const TAB_LIST_NAME = "TabsList";
19
19
  const TabsListFrame = styled(Group, {
20
20
  name: TAB_LIST_NAME,
21
21
  focusable: true
22
- // defaultVariants: {
23
- // flexGrow: 0,
24
- // },
25
22
  });
26
23
  const TabsList = TabsListFrame.extractable(
27
24
  React.forwardRef(
@@ -54,6 +51,7 @@ const TabsTriggerFrame = styled(ThemeableStack, {
54
51
  flexWrap: "nowrap",
55
52
  flexDirection: "row",
56
53
  cursor: "pointer",
54
+ backgroundColor: "$background",
57
55
  focusable: true,
58
56
  variants: {
59
57
  size: {
package/dist/jsx/Tabs.mjs.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/Tabs.tsx"],
4
- "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 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"],
5
- "mappings": "AACA,SAAS,0BAA0B;AACnC,SAAS,sBAAsB;AAC/B,SAAS,OAAmB,oBAAoB;AAChD,SAAS,kBAAkB,mCAAmC;AAC9D,SAAS,cAAc,sBAA2C;AAClE,SAAS,4BAA4B;AACrC,SAAS,oBAAoB;AAC7B;AAAA,EAGE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,YAAY,WAAW;AAOvB,MAAM,gBAAgB;AAEtB,MAAM,gBAAgB,OAAO,OAAO;AAAA,EAClC,MAAM;AAAA,EACN,WAAW;AAAA;AAAA;AAAA;AAIb,CAAC;AAYD,MAAM,WAAW,cAAc;AAAA,EAC7B,MAAM;AAAA,IACJ,CAAC,OAAmC,iBAAiB;AACnD,YAAM,EAAE,aAAa,OAAO,MAAM,UAAU,GAAG,UAAU,IAAI;AAC7D,YAAM,UAAU,eAAe,eAAe,WAAW;AACzD,YAAM,wBAAwB,yBAAyB,WAAW;AAElE,aACE,CAAC;AAAA,QACC;AAAA,QACA,aAAa,QAAQ;AAAA,QACrB,KAAK,QAAQ;AAAA,QACb,MAAM;AAAA,YACF;AAAA,OAEJ,CAAC;AAAA,QACC,KAAK;AAAA,QACL,kBAAkB,QAAQ;AAAA,QAC1B,KAAK;AAAA,QACL,MAAM,QAAQ;AAAA,YACV;AAAA,QAEH,SACH,EARC,cASH,EAhBC;AAAA,IAkBL;AAAA,EACF;AACF;AAEA,SAAS,cAAc;AAMvB,MAAM,eAAe;AAErB,MAAM,mBAAmB,OAAO,gBAAgB;AAAA,EAC9C,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,eAAe;AAAA,EACf,QAAQ;AAAA,EACR,WAAW;AAAA,EAEX,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,WAAW;AAAA,IACb;AAAA,IACA,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,eAAe;AAAA,MACjB;AAAA,IACF;AAAA,IACA,UAAU;AAAA,MACR,OAAO;AAAA,QACL,iBAAiB;AAAA,QAEjB,YAAY;AAAA,UACV,iBAAiB;AAAA,QACnB;AAAA,QAEA,YAAY;AAAA,UACV,iBAAiB;AAAA,QACnB;AAAA,QAEA,YAAY;AAAA,UACV,iBAAiB;AAAA,QACnB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,UAAU;AAAA,EACZ;AACF,CAAC;AAuBD,MAAM,cAAc,iBAAiB;AAAA,EACnC,MAAM;AAAA,IACJ,CAAC,OAAsC,iBAAiB;AACtD,YAAM;AAAA,QACJ;AAAA,QACA;AAAA,QACA,WAAW;AAAA,QACX;AAAA,QACA,GAAG;AAAA,MACL,IAAI;AACJ,YAAM,UAAU,eAAe,cAAc,WAAW;AACxD,YAAM,wBAAwB,yBAAyB,WAAW;AAClE,YAAM,YAAY,cAAc,QAAQ,QAAQ,KAAK;AACrD,YAAM,YAAY,cAAc,QAAQ,QAAQ,KAAK;AACrD,YAAM,aAAa,UAAU,QAAQ;AACrC,YAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAA2B,IAAI;AACjE,YAAM,aAAa,MAAM,OAA0B,IAAI;AACvD,YAAM,iBAAiB,aAAa,EAAE,SAAS,CAAC;AAEhD,YAAM,UAAU,MAAM;AACpB,gBAAQ,gBAAgB;AACxB,eAAO,MAAM,QAAQ,kBAAkB;AAAA,MACzC,GAAG,CAAC,CAAC;AAEL,YAAM,UAAU,MAAM;AACpB,YAAI,CAAC,WAAW,WAAW,CAAC;AAAO;AAEnC,iBAAS,iBAAiB;AACxB,cAAI,CAAC,WAAW;AAAS;AACzB,oBAAU;AAAA,YACR,OAAO,WAAW,QAAQ;AAAA,YAC1B,QAAQ,WAAW,QAAQ;AAAA,YAC3B,GAAG,WAAW,QAAQ;AAAA,YACtB,GAAG,WAAW,QAAQ;AAAA,UACxB,CAAC;AAAA,QACH;AACA,uBAAe;AAEf,cAAM,WAAW,IAAI,eAAe,cAAc;AAClD,iBAAS,QAAQ,WAAW,OAAO;AAEnC,eAAO,MAAM;AACX,cAAI,CAAC,WAAW;AAAS;AACzB,mBAAS,UAAU,WAAW,OAAO;AAAA,QACvC;AAAA,MACF,GAAG,CAAC,QAAQ,aAAa,CAAC;AAE1B,YAAM,UAAU,MAAM;AACpB,YAAI,cAAc,QAAQ;AACxB,0BAAgB,UAAU,MAAM;AAAA,QAClC;AAAA,MACF,GAAG,CAAC,YAAY,OAAO,MAAM,CAAC;AAE9B,aACE,CAAC,MAAM,MAAM,aAAa,WAAW,MACnC,CAAC,iBAAiB;AAAA,QAChB;AAAA,YACI;AAAA,QACJ,WAAW,CAAC;AAAA,QACZ,QAAQ;AAAA,OAER,CAAC;AAAA,QACC,UAAU,CAAC,UAAU;AACnB,cAAI,CAAC,OAAO;AACV,sBAAU,MAAM,YAAY,MAAM;AAAA,UACpC;AAAA,QACF;AAAA,QACA,WAAW,qBAAqB,MAAM,WAAW,MAAM;AACrD,cAAI,QAAQ;AACV,4BAAgB,SAAS,MAAM;AAAA,UACjC;AAAA,QACF,CAAC;AAAA,QACD,YAAY,qBAAqB,MAAM,YAAY,MAAM;AACvD,0BAAgB,SAAS,IAAI;AAAA,QAC/B,CAAC;AAAA,QACD,KAAK;AAAA,QACL,eAAe;AAAA,QACf,eAAe;AAAA,QACf,YAAY,aAAa,WAAW;AAAA,QACpC,eAAe,WAAW,KAAK;AAAA,QAC/B,UAAU;AAAA,QACV,IAAI;AAAA,QAEJ,MAAM,QAAQ;AAAA,YACV;AAAA,QACJ,KAAK,YAAY,cAAc,UAAU;AAAA,QACzC,SAAS,qBAAqB,MAAM,WAAW,QAAW,CAAC,UAAU;AAInE,gBAAM,YACJ,CAAC,SACC,MAAsC,WAAW,KAChD,MAAsC,YAAY;AACvD,cAAI,CAAC,YAAY,CAAC,cAAc,WAAW;AACzC,oBAAQ,SAAS,KAAK;AAAA,UACxB,OAAO;AAEL,kBAAM,eAAe;AAAA,UACvB;AAAA,QACF,CAAC;AAAA,YACI,SAAS;AAAA,UACZ,MAAM;AAAA,UACN,WAAW;AAAA,YACR,MAA6C;AAAA,YAC9C,CAAC,UAAU;AACT,kBAAI,CAAC,KAAK,OAAO,EAAE,SAAS,MAAM,GAAG,GAAG;AACtC,wBAAQ,SAAS,KAAK;AACtB,sBAAM,eAAe;AAAA,cACvB;AAAA,YACF;AAAA,UACF;AAAA,UACA,SAAS,qBAAqB,MAAM,SAAS,CAAC,UAAU;AACtD,gBAAI,QAAQ;AACV,8BAAgB,SAAS,MAAM;AAAA,YACjC;AAGA,kBAAM,wBAAwB,QAAQ,mBAAmB;AACzD,gBAAI,CAAC,cAAc,CAAC,YAAY,uBAAuB;AACrD,sBAAQ,SAAS,KAAK;AAAA,YACxB;AAAA,UACF,CAAC;AAAA,UACD,QAAQ,qBAAqB,MAAM,SAAS,MAAM;AAChD,4BAAgB,SAAS,IAAI;AAAA,UAC/B,CAAC;AAAA,QACH;AAAA,YACI;AAAA,MACN,EACF,EA1EC,iBAAiB,KA2EpB,EA5EC;AAAA,IA8EL;AAAA,EACF;AACF;AAEA,YAAY,cAAc;AAM1B,MAAM,eAAe;AAErB,MAAM,mBAAmB,OAAO,gBAAgB;AAAA,EAC9C,MAAM;AACR,CAAC;AAaD,MAAM,cAAc,iBAAiB;AAAA,EACnC,MAAM;AAAA,IACJ,CAAC,OAAsC,iBAAiB;AACtD,YAAM,EAAE,aAAa,OAAO,YAAY,UAAU,GAAG,aAAa,IAAI;AACtE,YAAM,UAAU,eAAe,cAAc,WAAW;AACxD,YAAM,aAAa,UAAU,QAAQ;AACrC,YAAM,OAAO,cAAc;AAE3B,YAAM,YAAY,cAAc,QAAQ,QAAQ,KAAK;AACrD,YAAM,YAAY,cAAc,QAAQ,QAAQ,KAAK;AAErD,UAAI,CAAC;AAAM,eAAO;AAClB,aACE,CAAC;AAAA,QACC,KAAK;AAAA,QACL,YAAY,aAAa,WAAW;AAAA,QACpC,kBAAkB,QAAQ;AAAA,QAC1B,KAAK;AAAA,QACL,iBAAiB;AAAA,QAEjB,QAAQ,CAAC;AAAA,QACT,IAAI;AAAA,QACJ,UAAU;AAAA,YACN;AAAA,QACJ,KAAK;AAAA,QAEJ,SACH,EAdC;AAAA,IAgBL;AAAA,EACF;AACF;AAEA,YAAY,cAAc;AAM1B,MAAM,YAAY;AAGlB,MAAM,CAAC,mBAAmB,eAAe,IAAI,mBAAmB,WAAW;AAAA,EACzE;AACF,CAAC;AACD,MAAM,2BAA2B,4BAA4B;AAe7D,MAAM,CAAC,cAAc,cAAc,IAAI,kBAAoC,SAAS;AAEpF,MAAM,YAAY,OAAO,cAAc;AAAA,EACrC,MAAM;AACR,CAAC;AA2BM,MAAM,OAAO;AAAA,EAClB,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,CAAC,OAA+B,iBAAiB;AAC/C,cAAM;AAAA,UACJ;AAAA,UACA,OAAO;AAAA,UACP;AAAA,UACA;AAAA,UACA,cAAc;AAAA,UACd;AAAA,UACA,iBAAiB;AAAA,UACjB,OAAO;AAAA,UACP,GAAG;AAAA,QACL,IAAI;AACJ,cAAM,YAAY,aAAa,GAAG;AAClC,cAAM,CAAC,OAAO,QAAQ,IAAI,qBAAqB;AAAA,UAC7C,MAAM;AAAA,UACN,UAAU;AAAA,UACV,aAAa,gBAAgB;AAAA,QAC/B,CAAC;AACD,cAAM,CAAC,eAAe,gBAAgB,IAAI,MAAM,SAAS,CAAC;AAC1D,cAAM,kBAAkB,SAAS,MAAM,iBAAiB,CAAC,MAAM,IAAI,CAAC,CAAC;AACrE,cAAM,oBAAoB,SAAS,MAAM,iBAAiB,CAAC,MAAM,IAAI,CAAC,CAAC;AAEvE,eACE,CAAC;AAAA,UACC,OAAO;AAAA,UACP,QAAQ,MAAM,MAAM;AAAA,UACpB,OAAO;AAAA,UACP,UAAU;AAAA,UACV,aAAa;AAAA,UACb,KAAK;AAAA,UACL,gBAAgB;AAAA,UAChB,MAAM;AAAA,UACN,iBAAiB;AAAA,UACjB,eAAe;AAAA,UACf,mBAAmB;AAAA,SAEnB,CAAC;AAAA,UACC,WAAW;AAAA,UAEX,kBAAkB;AAAA,cACd;AAAA,UACJ,KAAK;AAAA,QACP,EACF,EApBC;AAAA,MAsBL;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,MAAM;AAAA;AAAA;AAAA;AAAA,IAIN,SAAS;AAAA,IACT,KAAK;AAAA,IACL,SAAS;AAAA,EACX;AACF;AACA,KAAK,cAAc;AAInB,SAAS,cAAc,QAAgB,OAAe;AACpD,SAAO,GAAG,kBAAkB;AAC9B;AAEA,SAAS,cAAc,QAAgB,OAAe;AACpD,SAAO,GAAG,kBAAkB;AAC9B;",
4
+ "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})\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 backgroundColor: '$background',\n focusable: true,\n\n variants: {\n size: {\n '...size': getButtonSized,\n },\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 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"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tamagui/tabs",
3
- "version": "1.14.9",
3
+ "version": "1.15.1",
4
4
  "sideEffects": false,
5
5
  "source": "src/index.ts",
6
6
  "types": "./types/index.d.ts",
@@ -25,21 +25,21 @@
25
25
  }
26
26
  },
27
27
  "dependencies": {
28
- "@tamagui/create-context": "1.14.9",
29
- "@tamagui/get-button-sized": "1.14.9",
30
- "@tamagui/group": "1.14.9",
31
- "@tamagui/roving-focus": "1.14.9",
32
- "@tamagui/stacks": "1.14.9",
33
- "@tamagui/use-controllable-state": "1.14.9",
34
- "@tamagui/use-direction": "1.14.9",
35
- "@tamagui/web": "1.14.9"
28
+ "@tamagui/create-context": "1.15.1",
29
+ "@tamagui/get-button-sized": "1.15.1",
30
+ "@tamagui/group": "1.15.1",
31
+ "@tamagui/roving-focus": "1.15.1",
32
+ "@tamagui/stacks": "1.15.1",
33
+ "@tamagui/use-controllable-state": "1.15.1",
34
+ "@tamagui/use-direction": "1.15.1",
35
+ "@tamagui/web": "1.15.1"
36
36
  },
37
37
  "peerDependencies": {
38
38
  "react": "*",
39
39
  "react-dom": "*"
40
40
  },
41
41
  "devDependencies": {
42
- "@tamagui/build": "1.14.9",
42
+ "@tamagui/build": "1.15.1",
43
43
  "react": "^18.2.0",
44
44
  "react-dom": "^18.2.0"
45
45
  },
package/src/Tabs.tsx CHANGED
@@ -29,9 +29,6 @@ const TAB_LIST_NAME = 'TabsList'
29
29
  const TabsListFrame = styled(Group, {
30
30
  name: TAB_LIST_NAME,
31
31
  focusable: true,
32
- // defaultVariants: {
33
- // flexGrow: 0,
34
- // },
35
32
  })
36
33
 
37
34
  type TabsListFrameProps = GroupProps
@@ -89,12 +86,14 @@ const TabsTriggerFrame = styled(ThemeableStack, {
89
86
  flexWrap: 'nowrap',
90
87
  flexDirection: 'row',
91
88
  cursor: 'pointer',
89
+ backgroundColor: '$background',
92
90
  focusable: true,
93
91
 
94
92
  variants: {
95
93
  size: {
96
94
  '...size': getButtonSized,
97
95
  },
96
+
98
97
  disabled: {
99
98
  true: {
100
99
  pointerEvents: 'none',
package/types/Tabs.d.ts CHANGED
@@ -141,7 +141,7 @@ declare const TabsContentFrame: import("@tamagui/web").TamaguiComponent<(Omit<im
141
141
  readonly fullscreen?: boolean | undefined;
142
142
  readonly elevation?: SizeTokens | undefined;
143
143
  }, "backgrounded" | "radiused" | "hoverTheme" | "pressTheme" | "focusTheme" | "circular" | "padded" | "elevate" | "bordered" | "transparent" | "chromeless"> & {
144
- readonly backgrounded?: boolean | undefined;
144
+ readonly backgrounded?: boolean | undefined; /** Used for making custom indicators when trigger interacted with */
145
145
  readonly radiused?: boolean | undefined;
146
146
  readonly hoverTheme?: boolean | undefined;
147
147
  readonly pressTheme?: boolean | undefined;
@@ -243,7 +243,10 @@ declare const TabsFrame: import("@tamagui/web").TamaguiComponent<(Omit<import("r
243
243
  readonly focusTheme?: boolean | undefined;
244
244
  readonly circular?: boolean | undefined;
245
245
  readonly elevate?: boolean | undefined;
246
- readonly bordered?: number | boolean | undefined;
246
+ readonly bordered?: number | boolean | undefined; /**
247
+ * Whether to loop over after reaching the end or start of the items
248
+ * @default true
249
+ */
247
250
  readonly size?: SizeTokens | undefined;
248
251
  } & import("@tamagui/web").MediaProps<Partial<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<{
249
252
  readonly fullscreen?: boolean | undefined;
@@ -267,9 +270,6 @@ declare const TabsFrame: import("@tamagui/web").TamaguiComponent<(Omit<import("r
267
270
  readonly focusTheme?: boolean | undefined;
268
271
  readonly circular?: boolean | undefined;
269
272
  readonly elevate?: boolean | undefined;
270
- /**
271
- * @deprecated use `TabTabsProps` instead
272
- */
273
273
  readonly bordered?: number | boolean | undefined;
274
274
  readonly size?: SizeTokens | undefined;
275
275
  }>>) | (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<{
@@ -366,7 +366,10 @@ export declare const Tabs: React.ForwardRefExoticComponent<((Omit<import("react-
366
366
  readonly focusTheme?: boolean | undefined;
367
367
  readonly circular?: boolean | undefined;
368
368
  readonly elevate?: boolean | undefined;
369
- readonly bordered?: number | boolean | undefined;
369
+ readonly bordered?: number | boolean | undefined; /**
370
+ * Whether to loop over after reaching the end or start of the items
371
+ * @default true
372
+ */
370
373
  readonly size?: SizeTokens | undefined;
371
374
  } & import("@tamagui/web").MediaProps<Partial<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<{
372
375
  readonly fullscreen?: boolean | undefined;
@@ -390,9 +393,6 @@ export declare const Tabs: React.ForwardRefExoticComponent<((Omit<import("react-
390
393
  readonly focusTheme?: boolean | undefined;
391
394
  readonly circular?: boolean | undefined;
392
395
  readonly elevate?: boolean | undefined;
393
- /**
394
- * @deprecated use `TabTabsProps` instead
395
- */
396
396
  readonly bordered?: number | boolean | undefined;
397
397
  readonly size?: SizeTokens | undefined;
398
398
  }>> & {
@@ -714,7 +714,7 @@ export declare const Tabs: React.ForwardRefExoticComponent<((Omit<import("react-
714
714
  readonly fullscreen?: boolean | undefined;
715
715
  readonly elevation?: SizeTokens | undefined;
716
716
  }, "backgrounded" | "radiused" | "hoverTheme" | "pressTheme" | "focusTheme" | "circular" | "padded" | "elevate" | "bordered" | "transparent" | "chromeless"> & {
717
- readonly backgrounded?: boolean | undefined;
717
+ readonly backgrounded?: boolean | undefined; /** Used for making custom indicators when trigger interacted with */
718
718
  readonly radiused?: boolean | undefined;
719
719
  readonly hoverTheme?: boolean | undefined;
720
720
  readonly pressTheme?: boolean | undefined;
package/types/Tabs.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../src/Tabs.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../src/Tabs.tsx"],"names":[],"mappings":"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"}