@tamagui/tabs 1.7.5 → 1.7.7

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 +11 -1
  2. package/dist/cjs/Tabs.js.map +2 -2
  3. package/dist/esm/Tabs.js +12 -1
  4. package/dist/esm/Tabs.js.map +2 -2
  5. package/dist/esm/Tabs.mjs +12 -1
  6. package/dist/esm/Tabs.mjs.map +2 -2
  7. package/dist/jsx/Tabs.js +12 -1
  8. package/dist/jsx/Tabs.js.map +2 -2
  9. package/dist/jsx/Tabs.mjs +12 -1
  10. package/dist/jsx/Tabs.mjs.map +2 -2
  11. package/package.json +10 -10
  12. package/src/Tabs.tsx +17 -1
  13. package/types/Tabs.d.ts +25 -21
  14. package/types/Tabs.d.ts.map +1 -1
package/dist/cjs/Tabs.js CHANGED
@@ -134,6 +134,10 @@ const TabsTrigger = TabsTriggerFrame.extractable(
134
134
  const [layout, setLayout] = React.useState(null);
135
135
  const triggerRef = React.useRef(null);
136
136
  const groupItemProps = (0, import_group.useGroupItem)({ disabled });
137
+ React.useEffect(() => {
138
+ context.registerTrigger();
139
+ return () => context.unregisterTrigger();
140
+ }, []);
137
141
  React.useEffect(() => {
138
142
  if (!triggerRef.current || !import_web.isWeb)
139
143
  return;
@@ -155,7 +159,7 @@ const TabsTrigger = TabsTriggerFrame.extractable(
155
159
  return;
156
160
  observer.unobserve(triggerRef.current);
157
161
  };
158
- }, []);
162
+ }, [context.triggersCount]);
159
163
  React.useEffect(() => {
160
164
  if (isSelected && layout) {
161
165
  onInteraction == null ? void 0 : onInteraction("select", layout);
@@ -296,6 +300,9 @@ const Tabs = (0, import_web.withStaticProperties)(
296
300
  onChange: onValueChange,
297
301
  defaultProp: defaultValue ?? ""
298
302
  });
303
+ const [triggersCount, setTriggersCount] = React.useState(0);
304
+ const registerTrigger = (0, import_web.useEvent)(() => setTriggersCount((v) => v + 1));
305
+ const unregisterTrigger = (0, import_web.useEvent)(() => setTriggersCount((v) => v - 1));
299
306
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
300
307
  TabsProvider,
301
308
  {
@@ -307,6 +314,9 @@ const Tabs = (0, import_web.withStaticProperties)(
307
314
  dir: direction,
308
315
  activationMode,
309
316
  size,
317
+ registerTrigger,
318
+ triggersCount,
319
+ unregisterTrigger,
310
320
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
311
321
  TabsFrame,
312
322
  {
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 useId,\n withStaticProperties,\n} from '@tamagui/web'\nimport * as React from 'react'\nimport type { LayoutRectangle } from 'react-native'\n\n/* -------------------------------------------------------------------------------------------------\n * TabsList\n * -----------------------------------------------------------------------------------------------*/\n\nconst TAB_LIST_NAME = 'TabsList'\n\nconst TabsListFrame = styled(Group, {\n name: TAB_LIST_NAME,\n focusable: true,\n // defaultVariants: {\n // flexGrow: 0,\n // },\n})\n\ntype TabsListFrameProps = GroupProps\n\ntype TabsListProps = TabsListFrameProps & {\n /**\n * Whether to loop over after reaching the end or start of the items\n * @default true\n */\n loop?: boolean\n}\n\nconst TabsList = 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\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\n variants: {\n size: {\n '...size': getButtonSized,\n },\n disabled: {\n true: {\n pointerEvents: 'none',\n },\n },\n theme: {\n Button: {\n focusable: true,\n hoverTheme: true,\n pressTheme: true,\n backgrounded: true,\n borderWidth: 1,\n borderColor: 'transparent',\n\n pressStyle: {\n borderColor: 'transparent',\n },\n\n hoverStyle: {\n borderColor: 'transparent',\n },\n\n focusStyle: {\n borderColor: '$borderColorFocus',\n },\n },\n },\n },\n})\n\ntype TabTriggerLayout = LayoutRectangle\ntype InteractionType = 'select' | 'focus' | 'hover'\n\ntype TabsTriggerFrameProps = ThemeableStackProps\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: TabTriggerLayout | null) => void\n}\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<TabTriggerLayout | null>(null)\n const triggerRef = React.useRef<HTMLButtonElement>(null)\n const groupItemProps = useGroupItem({ disabled })\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 }, [])\n\n React.useEffect(() => {\n if (isSelected && layout) {\n onInteraction?.('select', layout)\n }\n }, [isSelected, value, layout])\n\n return (\n <Theme forceClassName name={isSelected ? 'active' : null}>\n <RovingFocusGroup.Item\n asChild\n {...rovingFocusGroupScope}\n focusable={!disabled}\n active={isSelected}\n >\n <TabsTriggerFrame\n onLayout={(event) => {\n if (!isWeb) {\n setLayout(event.nativeEvent.layout)\n }\n }}\n onHoverIn={composeEventHandlers(props.onHoverIn, () => {\n if (layout) {\n onInteraction?.('hover', layout)\n }\n })}\n onHoverOut={composeEventHandlers(props.onHoverOut, () => {\n onInteraction?.('hover', null)\n })}\n role=\"tab\"\n aria-selected={isSelected}\n aria-controls={contentId}\n data-state={isSelected ? 'active' : 'inactive'}\n data-disabled={disabled ? '' : undefined}\n disabled={disabled}\n id={triggerId}\n // @ts-ignore\n size={context.size}\n {...triggerProps}\n ref={composeRefs(forwardedRef, triggerRef)}\n onPress={composeEventHandlers(props.onPress ?? undefined, (event) => {\n // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n // but not when the control key is pressed (avoiding MacOS right click)\n\n const webChecks =\n !isWeb ||\n ((event as unknown as React.MouseEvent).button === 0 &&\n (event as unknown as React.MouseEvent).ctrlKey === false)\n if (!disabled && !isSelected && webChecks) {\n context.onChange(value)\n } else {\n // prevent focus to avoid accidental activation\n event.preventDefault()\n }\n })}\n {...(isWeb && {\n type: 'button',\n onKeyDown: composeEventHandlers(\n (props as React.HTMLProps<HTMLButtonElement>).onKeyDown,\n (event) => {\n if ([' ', 'Enter'].includes(event.key)) {\n context.onChange(value)\n }\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 = 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\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}\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 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\n return (\n <TabsProvider\n scope={__scopeTabs}\n baseId={useId()}\n value={value}\n onChange={setValue}\n orientation={orientation}\n dir={direction}\n activationMode={activationMode}\n size={size}\n >\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 List: TabsList,\n Trigger: TabsTrigger,\n Content: TabsContent,\n }\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 TabsContentProps,\n TabTriggerLayout,\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 useId,\n withStaticProperties,\n} from '@tamagui/web'\nimport * as React from 'react'\nimport type { LayoutRectangle } from 'react-native'\n\n/* -------------------------------------------------------------------------------------------------\n * TabsList\n * -----------------------------------------------------------------------------------------------*/\n\nconst TAB_LIST_NAME = 'TabsList'\n\nconst TabsListFrame = styled(Group, {\n name: TAB_LIST_NAME,\n focusable: true,\n // defaultVariants: {\n // flexGrow: 0,\n // },\n})\n\ntype TabsListFrameProps = GroupProps\n\ntype TabsListProps = TabsListFrameProps & {\n /**\n * Whether to loop over after reaching the end or start of the items\n * @default true\n */\n loop?: boolean\n}\n\nconst TabsList = 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\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\n variants: {\n size: {\n '...size': getButtonSized,\n },\n disabled: {\n true: {\n pointerEvents: 'none',\n },\n },\n theme: {\n Button: {\n focusable: true,\n hoverTheme: true,\n pressTheme: true,\n backgrounded: true,\n borderWidth: 1,\n borderColor: 'transparent',\n\n pressStyle: {\n borderColor: 'transparent',\n },\n\n hoverStyle: {\n borderColor: 'transparent',\n },\n\n focusStyle: {\n borderColor: '$borderColorFocus',\n },\n },\n },\n },\n})\n\ntype TabTriggerLayout = LayoutRectangle\ntype InteractionType = 'select' | 'focus' | 'hover'\n\ntype TabsTriggerFrameProps = ThemeableStackProps\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: TabTriggerLayout | null) => void\n}\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<TabTriggerLayout | null>(null)\n const triggerRef = React.useRef<HTMLButtonElement>(null)\n const groupItemProps = useGroupItem({ disabled })\n\n React.useEffect(() => {\n context.registerTrigger()\n return () => context.unregisterTrigger()\n }, [])\n\n React.useEffect(() => {\n if (!triggerRef.current || !isWeb) return\n\n function getTriggerSize() {\n if (!triggerRef.current) return\n setLayout({\n width: triggerRef.current.offsetWidth,\n height: triggerRef.current.offsetHeight,\n x: triggerRef.current.offsetLeft,\n y: triggerRef.current.offsetTop,\n })\n }\n getTriggerSize()\n\n const observer = new ResizeObserver(getTriggerSize)\n observer.observe(triggerRef.current)\n\n return () => {\n if (!triggerRef.current) return\n observer.unobserve(triggerRef.current)\n }\n }, [context.triggersCount])\n\n React.useEffect(() => {\n if (isSelected && layout) {\n onInteraction?.('select', layout)\n }\n }, [isSelected, value, layout])\n\n return (\n <Theme forceClassName name={isSelected ? 'active' : null}>\n <RovingFocusGroup.Item\n asChild\n {...rovingFocusGroupScope}\n focusable={!disabled}\n active={isSelected}\n >\n <TabsTriggerFrame\n onLayout={(event) => {\n if (!isWeb) {\n setLayout(event.nativeEvent.layout)\n }\n }}\n onHoverIn={composeEventHandlers(props.onHoverIn, () => {\n if (layout) {\n onInteraction?.('hover', layout)\n }\n })}\n onHoverOut={composeEventHandlers(props.onHoverOut, () => {\n onInteraction?.('hover', null)\n })}\n role=\"tab\"\n aria-selected={isSelected}\n aria-controls={contentId}\n data-state={isSelected ? 'active' : 'inactive'}\n data-disabled={disabled ? '' : undefined}\n disabled={disabled}\n id={triggerId}\n // @ts-ignore\n size={context.size}\n {...triggerProps}\n ref={composeRefs(forwardedRef, triggerRef)}\n onPress={composeEventHandlers(props.onPress ?? undefined, (event) => {\n // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n // but not when the control key is pressed (avoiding MacOS right click)\n\n const webChecks =\n !isWeb ||\n ((event as unknown as React.MouseEvent).button === 0 &&\n (event as unknown as React.MouseEvent).ctrlKey === false)\n if (!disabled && !isSelected && webChecks) {\n context.onChange(value)\n } else {\n // prevent focus to avoid accidental activation\n event.preventDefault()\n }\n })}\n {...(isWeb && {\n type: 'button',\n onKeyDown: composeEventHandlers(\n (props as React.HTMLProps<HTMLButtonElement>).onKeyDown,\n (event) => {\n if ([' ', 'Enter'].includes(event.key)) {\n context.onChange(value)\n }\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 = 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\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 React.forwardRef<HTMLDivElement, TabsProps>(\n (props: ScopedProps<TabsProps>, forwardedRef) => {\n const {\n __scopeTabs,\n value: valueProp,\n onValueChange,\n defaultValue,\n orientation = 'horizontal',\n dir,\n activationMode = 'automatic',\n size = '$true',\n ...tabsProps\n } = props\n const direction = useDirection(dir)\n const [value, setValue] = useControllableState({\n prop: valueProp,\n onChange: onValueChange,\n defaultProp: defaultValue ?? '',\n })\n const [triggersCount, setTriggersCount] = React.useState(0)\n const registerTrigger = useEvent(() => setTriggersCount((v) => v + 1))\n const unregisterTrigger = useEvent(() => setTriggersCount((v) => v - 1))\n\n return (\n <TabsProvider\n scope={__scopeTabs}\n baseId={useId()}\n value={value}\n onChange={setValue}\n orientation={orientation}\n dir={direction}\n activationMode={activationMode}\n size={size}\n registerTrigger={registerTrigger}\n triggersCount={triggersCount}\n unregisterTrigger={unregisterTrigger}\n >\n <TabsFrame\n direction={direction}\n // dir={direction}\n data-orientation={orientation}\n {...tabsProps}\n ref={forwardedRef}\n />\n </TabsProvider>\n )\n }\n ),\n {\n List: TabsList,\n Trigger: TabsTrigger,\n Content: TabsContent,\n }\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 TabsContentProps,\n TabTriggerLayout,\n}\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/esm/Tabs.js CHANGED
@@ -12,6 +12,7 @@ import {
12
12
  composeRefs,
13
13
  isWeb,
14
14
  styled,
15
+ useEvent,
15
16
  useId,
16
17
  withStaticProperties
17
18
  } from "@tamagui/web";
@@ -109,6 +110,10 @@ const TabsTrigger = TabsTriggerFrame.extractable(
109
110
  const [layout, setLayout] = React.useState(null);
110
111
  const triggerRef = React.useRef(null);
111
112
  const groupItemProps = useGroupItem({ disabled });
113
+ React.useEffect(() => {
114
+ context.registerTrigger();
115
+ return () => context.unregisterTrigger();
116
+ }, []);
112
117
  React.useEffect(() => {
113
118
  if (!triggerRef.current || !isWeb)
114
119
  return;
@@ -130,7 +135,7 @@ const TabsTrigger = TabsTriggerFrame.extractable(
130
135
  return;
131
136
  observer.unobserve(triggerRef.current);
132
137
  };
133
- }, []);
138
+ }, [context.triggersCount]);
134
139
  React.useEffect(() => {
135
140
  if (isSelected && layout) {
136
141
  onInteraction == null ? void 0 : onInteraction("select", layout);
@@ -271,6 +276,9 @@ const Tabs = withStaticProperties(
271
276
  onChange: onValueChange,
272
277
  defaultProp: defaultValue ?? ""
273
278
  });
279
+ const [triggersCount, setTriggersCount] = React.useState(0);
280
+ const registerTrigger = useEvent(() => setTriggersCount((v) => v + 1));
281
+ const unregisterTrigger = useEvent(() => setTriggersCount((v) => v - 1));
274
282
  return /* @__PURE__ */ jsx(
275
283
  TabsProvider,
276
284
  {
@@ -282,6 +290,9 @@ const Tabs = withStaticProperties(
282
290
  dir: direction,
283
291
  activationMode,
284
292
  size,
293
+ registerTrigger,
294
+ triggersCount,
295
+ unregisterTrigger,
285
296
  children: /* @__PURE__ */ jsx(
286
297
  TabsFrame,
287
298
  {
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 useId,\n withStaticProperties,\n} from '@tamagui/web'\nimport * as React from 'react'\nimport type { LayoutRectangle } from 'react-native'\n\n/* -------------------------------------------------------------------------------------------------\n * TabsList\n * -----------------------------------------------------------------------------------------------*/\n\nconst TAB_LIST_NAME = 'TabsList'\n\nconst TabsListFrame = styled(Group, {\n name: TAB_LIST_NAME,\n focusable: true,\n // defaultVariants: {\n // flexGrow: 0,\n // },\n})\n\ntype TabsListFrameProps = GroupProps\n\ntype TabsListProps = TabsListFrameProps & {\n /**\n * Whether to loop over after reaching the end or start of the items\n * @default true\n */\n loop?: boolean\n}\n\nconst TabsList = 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\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\n variants: {\n size: {\n '...size': getButtonSized,\n },\n disabled: {\n true: {\n pointerEvents: 'none',\n },\n },\n theme: {\n Button: {\n focusable: true,\n hoverTheme: true,\n pressTheme: true,\n backgrounded: true,\n borderWidth: 1,\n borderColor: 'transparent',\n\n pressStyle: {\n borderColor: 'transparent',\n },\n\n hoverStyle: {\n borderColor: 'transparent',\n },\n\n focusStyle: {\n borderColor: '$borderColorFocus',\n },\n },\n },\n },\n})\n\ntype TabTriggerLayout = LayoutRectangle\ntype InteractionType = 'select' | 'focus' | 'hover'\n\ntype TabsTriggerFrameProps = ThemeableStackProps\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: TabTriggerLayout | null) => void\n}\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<TabTriggerLayout | null>(null)\n const triggerRef = React.useRef<HTMLButtonElement>(null)\n const groupItemProps = useGroupItem({ disabled })\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 }, [])\n\n React.useEffect(() => {\n if (isSelected && layout) {\n onInteraction?.('select', layout)\n }\n }, [isSelected, value, layout])\n\n return (\n <Theme forceClassName name={isSelected ? 'active' : null}>\n <RovingFocusGroup.Item\n asChild\n {...rovingFocusGroupScope}\n focusable={!disabled}\n active={isSelected}\n >\n <TabsTriggerFrame\n onLayout={(event) => {\n if (!isWeb) {\n setLayout(event.nativeEvent.layout)\n }\n }}\n onHoverIn={composeEventHandlers(props.onHoverIn, () => {\n if (layout) {\n onInteraction?.('hover', layout)\n }\n })}\n onHoverOut={composeEventHandlers(props.onHoverOut, () => {\n onInteraction?.('hover', null)\n })}\n role=\"tab\"\n aria-selected={isSelected}\n aria-controls={contentId}\n data-state={isSelected ? 'active' : 'inactive'}\n data-disabled={disabled ? '' : undefined}\n disabled={disabled}\n id={triggerId}\n // @ts-ignore\n size={context.size}\n {...triggerProps}\n ref={composeRefs(forwardedRef, triggerRef)}\n onPress={composeEventHandlers(props.onPress ?? undefined, (event) => {\n // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n // but not when the control key is pressed (avoiding MacOS right click)\n\n const webChecks =\n !isWeb ||\n ((event as unknown as React.MouseEvent).button === 0 &&\n (event as unknown as React.MouseEvent).ctrlKey === false)\n if (!disabled && !isSelected && webChecks) {\n context.onChange(value)\n } else {\n // prevent focus to avoid accidental activation\n event.preventDefault()\n }\n })}\n {...(isWeb && {\n type: 'button',\n onKeyDown: composeEventHandlers(\n (props as React.HTMLProps<HTMLButtonElement>).onKeyDown,\n (event) => {\n if ([' ', 'Enter'].includes(event.key)) {\n context.onChange(value)\n }\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 = 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\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}\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 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\n return (\n <TabsProvider\n scope={__scopeTabs}\n baseId={useId()}\n value={value}\n onChange={setValue}\n orientation={orientation}\n dir={direction}\n activationMode={activationMode}\n size={size}\n >\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 List: TabsList,\n Trigger: TabsTrigger,\n Content: TabsContent,\n }\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 TabsContentProps,\n TabTriggerLayout,\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 useId,\n withStaticProperties,\n} from '@tamagui/web'\nimport * as React from 'react'\nimport type { LayoutRectangle } from 'react-native'\n\n/* -------------------------------------------------------------------------------------------------\n * TabsList\n * -----------------------------------------------------------------------------------------------*/\n\nconst TAB_LIST_NAME = 'TabsList'\n\nconst TabsListFrame = styled(Group, {\n name: TAB_LIST_NAME,\n focusable: true,\n // defaultVariants: {\n // flexGrow: 0,\n // },\n})\n\ntype TabsListFrameProps = GroupProps\n\ntype TabsListProps = TabsListFrameProps & {\n /**\n * Whether to loop over after reaching the end or start of the items\n * @default true\n */\n loop?: boolean\n}\n\nconst TabsList = 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\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\n variants: {\n size: {\n '...size': getButtonSized,\n },\n disabled: {\n true: {\n pointerEvents: 'none',\n },\n },\n theme: {\n Button: {\n focusable: true,\n hoverTheme: true,\n pressTheme: true,\n backgrounded: true,\n borderWidth: 1,\n borderColor: 'transparent',\n\n pressStyle: {\n borderColor: 'transparent',\n },\n\n hoverStyle: {\n borderColor: 'transparent',\n },\n\n focusStyle: {\n borderColor: '$borderColorFocus',\n },\n },\n },\n },\n})\n\ntype TabTriggerLayout = LayoutRectangle\ntype InteractionType = 'select' | 'focus' | 'hover'\n\ntype TabsTriggerFrameProps = ThemeableStackProps\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: TabTriggerLayout | null) => void\n}\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<TabTriggerLayout | null>(null)\n const triggerRef = React.useRef<HTMLButtonElement>(null)\n const groupItemProps = useGroupItem({ disabled })\n\n React.useEffect(() => {\n context.registerTrigger()\n return () => context.unregisterTrigger()\n }, [])\n\n React.useEffect(() => {\n if (!triggerRef.current || !isWeb) return\n\n function getTriggerSize() {\n if (!triggerRef.current) return\n setLayout({\n width: triggerRef.current.offsetWidth,\n height: triggerRef.current.offsetHeight,\n x: triggerRef.current.offsetLeft,\n y: triggerRef.current.offsetTop,\n })\n }\n getTriggerSize()\n\n const observer = new ResizeObserver(getTriggerSize)\n observer.observe(triggerRef.current)\n\n return () => {\n if (!triggerRef.current) return\n observer.unobserve(triggerRef.current)\n }\n }, [context.triggersCount])\n\n React.useEffect(() => {\n if (isSelected && layout) {\n onInteraction?.('select', layout)\n }\n }, [isSelected, value, layout])\n\n return (\n <Theme forceClassName name={isSelected ? 'active' : null}>\n <RovingFocusGroup.Item\n asChild\n {...rovingFocusGroupScope}\n focusable={!disabled}\n active={isSelected}\n >\n <TabsTriggerFrame\n onLayout={(event) => {\n if (!isWeb) {\n setLayout(event.nativeEvent.layout)\n }\n }}\n onHoverIn={composeEventHandlers(props.onHoverIn, () => {\n if (layout) {\n onInteraction?.('hover', layout)\n }\n })}\n onHoverOut={composeEventHandlers(props.onHoverOut, () => {\n onInteraction?.('hover', null)\n })}\n role=\"tab\"\n aria-selected={isSelected}\n aria-controls={contentId}\n data-state={isSelected ? 'active' : 'inactive'}\n data-disabled={disabled ? '' : undefined}\n disabled={disabled}\n id={triggerId}\n // @ts-ignore\n size={context.size}\n {...triggerProps}\n ref={composeRefs(forwardedRef, triggerRef)}\n onPress={composeEventHandlers(props.onPress ?? undefined, (event) => {\n // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n // but not when the control key is pressed (avoiding MacOS right click)\n\n const webChecks =\n !isWeb ||\n ((event as unknown as React.MouseEvent).button === 0 &&\n (event as unknown as React.MouseEvent).ctrlKey === false)\n if (!disabled && !isSelected && webChecks) {\n context.onChange(value)\n } else {\n // prevent focus to avoid accidental activation\n event.preventDefault()\n }\n })}\n {...(isWeb && {\n type: 'button',\n onKeyDown: composeEventHandlers(\n (props as React.HTMLProps<HTMLButtonElement>).onKeyDown,\n (event) => {\n if ([' ', 'Enter'].includes(event.key)) {\n context.onChange(value)\n }\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 = 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\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 React.forwardRef<HTMLDivElement, TabsProps>(\n (props: ScopedProps<TabsProps>, forwardedRef) => {\n const {\n __scopeTabs,\n value: valueProp,\n onValueChange,\n defaultValue,\n orientation = 'horizontal',\n dir,\n activationMode = 'automatic',\n size = '$true',\n ...tabsProps\n } = props\n const direction = useDirection(dir)\n const [value, setValue] = useControllableState({\n prop: valueProp,\n onChange: onValueChange,\n defaultProp: defaultValue ?? '',\n })\n const [triggersCount, setTriggersCount] = React.useState(0)\n const registerTrigger = useEvent(() => setTriggersCount((v) => v + 1))\n const unregisterTrigger = useEvent(() => setTriggersCount((v) => v - 1))\n\n return (\n <TabsProvider\n scope={__scopeTabs}\n baseId={useId()}\n value={value}\n onChange={setValue}\n orientation={orientation}\n dir={direction}\n activationMode={activationMode}\n size={size}\n registerTrigger={registerTrigger}\n triggersCount={triggersCount}\n unregisterTrigger={unregisterTrigger}\n >\n <TabsFrame\n direction={direction}\n // dir={direction}\n data-orientation={orientation}\n {...tabsProps}\n ref={forwardedRef}\n />\n </TabsProvider>\n )\n }\n ),\n {\n List: TabsList,\n Trigger: TabsTrigger,\n Content: TabsContent,\n }\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 TabsContentProps,\n TabTriggerLayout,\n}\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/esm/Tabs.mjs CHANGED
@@ -12,6 +12,7 @@ import {
12
12
  composeRefs,
13
13
  isWeb,
14
14
  styled,
15
+ useEvent,
15
16
  useId,
16
17
  withStaticProperties
17
18
  } from "@tamagui/web";
@@ -109,6 +110,10 @@ const TabsTrigger = TabsTriggerFrame.extractable(
109
110
  const [layout, setLayout] = React.useState(null);
110
111
  const triggerRef = React.useRef(null);
111
112
  const groupItemProps = useGroupItem({ disabled });
113
+ React.useEffect(() => {
114
+ context.registerTrigger();
115
+ return () => context.unregisterTrigger();
116
+ }, []);
112
117
  React.useEffect(() => {
113
118
  if (!triggerRef.current || !isWeb)
114
119
  return;
@@ -130,7 +135,7 @@ const TabsTrigger = TabsTriggerFrame.extractable(
130
135
  return;
131
136
  observer.unobserve(triggerRef.current);
132
137
  };
133
- }, []);
138
+ }, [context.triggersCount]);
134
139
  React.useEffect(() => {
135
140
  if (isSelected && layout) {
136
141
  onInteraction == null ? void 0 : onInteraction("select", layout);
@@ -271,6 +276,9 @@ const Tabs = withStaticProperties(
271
276
  onChange: onValueChange,
272
277
  defaultProp: defaultValue ?? ""
273
278
  });
279
+ const [triggersCount, setTriggersCount] = React.useState(0);
280
+ const registerTrigger = useEvent(() => setTriggersCount((v) => v + 1));
281
+ const unregisterTrigger = useEvent(() => setTriggersCount((v) => v - 1));
274
282
  return /* @__PURE__ */ jsx(
275
283
  TabsProvider,
276
284
  {
@@ -282,6 +290,9 @@ const Tabs = withStaticProperties(
282
290
  dir: direction,
283
291
  activationMode,
284
292
  size,
293
+ registerTrigger,
294
+ triggersCount,
295
+ unregisterTrigger,
285
296
  children: /* @__PURE__ */ jsx(
286
297
  TabsFrame,
287
298
  {
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 useId,\n withStaticProperties,\n} from '@tamagui/web'\nimport * as React from 'react'\nimport type { LayoutRectangle } from 'react-native'\n\n/* -------------------------------------------------------------------------------------------------\n * TabsList\n * -----------------------------------------------------------------------------------------------*/\n\nconst TAB_LIST_NAME = 'TabsList'\n\nconst TabsListFrame = styled(Group, {\n name: TAB_LIST_NAME,\n focusable: true,\n // defaultVariants: {\n // flexGrow: 0,\n // },\n})\n\ntype TabsListFrameProps = GroupProps\n\ntype TabsListProps = TabsListFrameProps & {\n /**\n * Whether to loop over after reaching the end or start of the items\n * @default true\n */\n loop?: boolean\n}\n\nconst TabsList = 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\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\n variants: {\n size: {\n '...size': getButtonSized,\n },\n disabled: {\n true: {\n pointerEvents: 'none',\n },\n },\n theme: {\n Button: {\n focusable: true,\n hoverTheme: true,\n pressTheme: true,\n backgrounded: true,\n borderWidth: 1,\n borderColor: 'transparent',\n\n pressStyle: {\n borderColor: 'transparent',\n },\n\n hoverStyle: {\n borderColor: 'transparent',\n },\n\n focusStyle: {\n borderColor: '$borderColorFocus',\n },\n },\n },\n },\n})\n\ntype TabTriggerLayout = LayoutRectangle\ntype InteractionType = 'select' | 'focus' | 'hover'\n\ntype TabsTriggerFrameProps = ThemeableStackProps\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: TabTriggerLayout | null) => void\n}\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<TabTriggerLayout | null>(null)\n const triggerRef = React.useRef<HTMLButtonElement>(null)\n const groupItemProps = useGroupItem({ disabled })\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 }, [])\n\n React.useEffect(() => {\n if (isSelected && layout) {\n onInteraction?.('select', layout)\n }\n }, [isSelected, value, layout])\n\n return (\n <Theme forceClassName name={isSelected ? 'active' : null}>\n <RovingFocusGroup.Item\n asChild\n {...rovingFocusGroupScope}\n focusable={!disabled}\n active={isSelected}\n >\n <TabsTriggerFrame\n onLayout={(event) => {\n if (!isWeb) {\n setLayout(event.nativeEvent.layout)\n }\n }}\n onHoverIn={composeEventHandlers(props.onHoverIn, () => {\n if (layout) {\n onInteraction?.('hover', layout)\n }\n })}\n onHoverOut={composeEventHandlers(props.onHoverOut, () => {\n onInteraction?.('hover', null)\n })}\n role=\"tab\"\n aria-selected={isSelected}\n aria-controls={contentId}\n data-state={isSelected ? 'active' : 'inactive'}\n data-disabled={disabled ? '' : undefined}\n disabled={disabled}\n id={triggerId}\n // @ts-ignore\n size={context.size}\n {...triggerProps}\n ref={composeRefs(forwardedRef, triggerRef)}\n onPress={composeEventHandlers(props.onPress ?? undefined, (event) => {\n // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n // but not when the control key is pressed (avoiding MacOS right click)\n\n const webChecks =\n !isWeb ||\n ((event as unknown as React.MouseEvent).button === 0 &&\n (event as unknown as React.MouseEvent).ctrlKey === false)\n if (!disabled && !isSelected && webChecks) {\n context.onChange(value)\n } else {\n // prevent focus to avoid accidental activation\n event.preventDefault()\n }\n })}\n {...(isWeb && {\n type: 'button',\n onKeyDown: composeEventHandlers(\n (props as React.HTMLProps<HTMLButtonElement>).onKeyDown,\n (event) => {\n if ([' ', 'Enter'].includes(event.key)) {\n context.onChange(value)\n }\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 = 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\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}\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 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\n return (\n <TabsProvider\n scope={__scopeTabs}\n baseId={useId()}\n value={value}\n onChange={setValue}\n orientation={orientation}\n dir={direction}\n activationMode={activationMode}\n size={size}\n >\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 List: TabsList,\n Trigger: TabsTrigger,\n Content: TabsContent,\n }\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 TabsContentProps,\n TabTriggerLayout,\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 useId,\n withStaticProperties,\n} from '@tamagui/web'\nimport * as React from 'react'\nimport type { LayoutRectangle } from 'react-native'\n\n/* -------------------------------------------------------------------------------------------------\n * TabsList\n * -----------------------------------------------------------------------------------------------*/\n\nconst TAB_LIST_NAME = 'TabsList'\n\nconst TabsListFrame = styled(Group, {\n name: TAB_LIST_NAME,\n focusable: true,\n // defaultVariants: {\n // flexGrow: 0,\n // },\n})\n\ntype TabsListFrameProps = GroupProps\n\ntype TabsListProps = TabsListFrameProps & {\n /**\n * Whether to loop over after reaching the end or start of the items\n * @default true\n */\n loop?: boolean\n}\n\nconst TabsList = 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\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\n variants: {\n size: {\n '...size': getButtonSized,\n },\n disabled: {\n true: {\n pointerEvents: 'none',\n },\n },\n theme: {\n Button: {\n focusable: true,\n hoverTheme: true,\n pressTheme: true,\n backgrounded: true,\n borderWidth: 1,\n borderColor: 'transparent',\n\n pressStyle: {\n borderColor: 'transparent',\n },\n\n hoverStyle: {\n borderColor: 'transparent',\n },\n\n focusStyle: {\n borderColor: '$borderColorFocus',\n },\n },\n },\n },\n})\n\ntype TabTriggerLayout = LayoutRectangle\ntype InteractionType = 'select' | 'focus' | 'hover'\n\ntype TabsTriggerFrameProps = ThemeableStackProps\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: TabTriggerLayout | null) => void\n}\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<TabTriggerLayout | null>(null)\n const triggerRef = React.useRef<HTMLButtonElement>(null)\n const groupItemProps = useGroupItem({ disabled })\n\n React.useEffect(() => {\n context.registerTrigger()\n return () => context.unregisterTrigger()\n }, [])\n\n React.useEffect(() => {\n if (!triggerRef.current || !isWeb) return\n\n function getTriggerSize() {\n if (!triggerRef.current) return\n setLayout({\n width: triggerRef.current.offsetWidth,\n height: triggerRef.current.offsetHeight,\n x: triggerRef.current.offsetLeft,\n y: triggerRef.current.offsetTop,\n })\n }\n getTriggerSize()\n\n const observer = new ResizeObserver(getTriggerSize)\n observer.observe(triggerRef.current)\n\n return () => {\n if (!triggerRef.current) return\n observer.unobserve(triggerRef.current)\n }\n }, [context.triggersCount])\n\n React.useEffect(() => {\n if (isSelected && layout) {\n onInteraction?.('select', layout)\n }\n }, [isSelected, value, layout])\n\n return (\n <Theme forceClassName name={isSelected ? 'active' : null}>\n <RovingFocusGroup.Item\n asChild\n {...rovingFocusGroupScope}\n focusable={!disabled}\n active={isSelected}\n >\n <TabsTriggerFrame\n onLayout={(event) => {\n if (!isWeb) {\n setLayout(event.nativeEvent.layout)\n }\n }}\n onHoverIn={composeEventHandlers(props.onHoverIn, () => {\n if (layout) {\n onInteraction?.('hover', layout)\n }\n })}\n onHoverOut={composeEventHandlers(props.onHoverOut, () => {\n onInteraction?.('hover', null)\n })}\n role=\"tab\"\n aria-selected={isSelected}\n aria-controls={contentId}\n data-state={isSelected ? 'active' : 'inactive'}\n data-disabled={disabled ? '' : undefined}\n disabled={disabled}\n id={triggerId}\n // @ts-ignore\n size={context.size}\n {...triggerProps}\n ref={composeRefs(forwardedRef, triggerRef)}\n onPress={composeEventHandlers(props.onPress ?? undefined, (event) => {\n // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n // but not when the control key is pressed (avoiding MacOS right click)\n\n const webChecks =\n !isWeb ||\n ((event as unknown as React.MouseEvent).button === 0 &&\n (event as unknown as React.MouseEvent).ctrlKey === false)\n if (!disabled && !isSelected && webChecks) {\n context.onChange(value)\n } else {\n // prevent focus to avoid accidental activation\n event.preventDefault()\n }\n })}\n {...(isWeb && {\n type: 'button',\n onKeyDown: composeEventHandlers(\n (props as React.HTMLProps<HTMLButtonElement>).onKeyDown,\n (event) => {\n if ([' ', 'Enter'].includes(event.key)) {\n context.onChange(value)\n }\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 = 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\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 React.forwardRef<HTMLDivElement, TabsProps>(\n (props: ScopedProps<TabsProps>, forwardedRef) => {\n const {\n __scopeTabs,\n value: valueProp,\n onValueChange,\n defaultValue,\n orientation = 'horizontal',\n dir,\n activationMode = 'automatic',\n size = '$true',\n ...tabsProps\n } = props\n const direction = useDirection(dir)\n const [value, setValue] = useControllableState({\n prop: valueProp,\n onChange: onValueChange,\n defaultProp: defaultValue ?? '',\n })\n const [triggersCount, setTriggersCount] = React.useState(0)\n const registerTrigger = useEvent(() => setTriggersCount((v) => v + 1))\n const unregisterTrigger = useEvent(() => setTriggersCount((v) => v - 1))\n\n return (\n <TabsProvider\n scope={__scopeTabs}\n baseId={useId()}\n value={value}\n onChange={setValue}\n orientation={orientation}\n dir={direction}\n activationMode={activationMode}\n size={size}\n registerTrigger={registerTrigger}\n triggersCount={triggersCount}\n unregisterTrigger={unregisterTrigger}\n >\n <TabsFrame\n direction={direction}\n // dir={direction}\n data-orientation={orientation}\n {...tabsProps}\n ref={forwardedRef}\n />\n </TabsProvider>\n )\n }\n ),\n {\n List: TabsList,\n Trigger: TabsTrigger,\n Content: TabsContent,\n }\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 TabsContentProps,\n TabTriggerLayout,\n}\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/jsx/Tabs.js CHANGED
@@ -11,6 +11,7 @@ import {
11
11
  composeRefs,
12
12
  isWeb,
13
13
  styled,
14
+ useEvent,
14
15
  useId,
15
16
  withStaticProperties
16
17
  } from "@tamagui/web";
@@ -100,6 +101,10 @@ const TabsTrigger = TabsTriggerFrame.extractable(
100
101
  const [layout, setLayout] = React.useState(null);
101
102
  const triggerRef = React.useRef(null);
102
103
  const groupItemProps = useGroupItem({ disabled });
104
+ React.useEffect(() => {
105
+ context.registerTrigger();
106
+ return () => context.unregisterTrigger();
107
+ }, []);
103
108
  React.useEffect(() => {
104
109
  if (!triggerRef.current || !isWeb)
105
110
  return;
@@ -121,7 +126,7 @@ const TabsTrigger = TabsTriggerFrame.extractable(
121
126
  return;
122
127
  observer.unobserve(triggerRef.current);
123
128
  };
124
- }, []);
129
+ }, [context.triggersCount]);
125
130
  React.useEffect(() => {
126
131
  if (isSelected && layout) {
127
132
  onInteraction?.("select", layout);
@@ -251,6 +256,9 @@ const Tabs = withStaticProperties(
251
256
  onChange: onValueChange,
252
257
  defaultProp: defaultValue ?? ""
253
258
  });
259
+ const [triggersCount, setTriggersCount] = React.useState(0);
260
+ const registerTrigger = useEvent(() => setTriggersCount((v) => v + 1));
261
+ const unregisterTrigger = useEvent(() => setTriggersCount((v) => v - 1));
254
262
  return <TabsProvider
255
263
  scope={__scopeTabs}
256
264
  baseId={useId()}
@@ -260,6 +268,9 @@ const Tabs = withStaticProperties(
260
268
  dir={direction}
261
269
  activationMode={activationMode}
262
270
  size={size}
271
+ registerTrigger={registerTrigger}
272
+ triggersCount={triggersCount}
273
+ unregisterTrigger={unregisterTrigger}
263
274
  ><TabsFrame
264
275
  direction={direction}
265
276
  data-orientation={orientation}
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 useId,\n withStaticProperties,\n} from '@tamagui/web'\nimport * as React from 'react'\nimport type { LayoutRectangle } from 'react-native'\n\n/* -------------------------------------------------------------------------------------------------\n * TabsList\n * -----------------------------------------------------------------------------------------------*/\n\nconst TAB_LIST_NAME = 'TabsList'\n\nconst TabsListFrame = styled(Group, {\n name: TAB_LIST_NAME,\n focusable: true,\n // defaultVariants: {\n // flexGrow: 0,\n // },\n})\n\ntype TabsListFrameProps = GroupProps\n\ntype TabsListProps = TabsListFrameProps & {\n /**\n * Whether to loop over after reaching the end or start of the items\n * @default true\n */\n loop?: boolean\n}\n\nconst TabsList = 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\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\n variants: {\n size: {\n '...size': getButtonSized,\n },\n disabled: {\n true: {\n pointerEvents: 'none',\n },\n },\n theme: {\n Button: {\n focusable: true,\n hoverTheme: true,\n pressTheme: true,\n backgrounded: true,\n borderWidth: 1,\n borderColor: 'transparent',\n\n pressStyle: {\n borderColor: 'transparent',\n },\n\n hoverStyle: {\n borderColor: 'transparent',\n },\n\n focusStyle: {\n borderColor: '$borderColorFocus',\n },\n },\n },\n },\n})\n\ntype TabTriggerLayout = LayoutRectangle\ntype InteractionType = 'select' | 'focus' | 'hover'\n\ntype TabsTriggerFrameProps = ThemeableStackProps\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: TabTriggerLayout | null) => void\n}\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<TabTriggerLayout | null>(null)\n const triggerRef = React.useRef<HTMLButtonElement>(null)\n const groupItemProps = useGroupItem({ disabled })\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 }, [])\n\n React.useEffect(() => {\n if (isSelected && layout) {\n onInteraction?.('select', layout)\n }\n }, [isSelected, value, layout])\n\n return (\n <Theme forceClassName name={isSelected ? 'active' : null}>\n <RovingFocusGroup.Item\n asChild\n {...rovingFocusGroupScope}\n focusable={!disabled}\n active={isSelected}\n >\n <TabsTriggerFrame\n onLayout={(event) => {\n if (!isWeb) {\n setLayout(event.nativeEvent.layout)\n }\n }}\n onHoverIn={composeEventHandlers(props.onHoverIn, () => {\n if (layout) {\n onInteraction?.('hover', layout)\n }\n })}\n onHoverOut={composeEventHandlers(props.onHoverOut, () => {\n onInteraction?.('hover', null)\n })}\n role=\"tab\"\n aria-selected={isSelected}\n aria-controls={contentId}\n data-state={isSelected ? 'active' : 'inactive'}\n data-disabled={disabled ? '' : undefined}\n disabled={disabled}\n id={triggerId}\n // @ts-ignore\n size={context.size}\n {...triggerProps}\n ref={composeRefs(forwardedRef, triggerRef)}\n onPress={composeEventHandlers(props.onPress ?? undefined, (event) => {\n // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n // but not when the control key is pressed (avoiding MacOS right click)\n\n const webChecks =\n !isWeb ||\n ((event as unknown as React.MouseEvent).button === 0 &&\n (event as unknown as React.MouseEvent).ctrlKey === false)\n if (!disabled && !isSelected && webChecks) {\n context.onChange(value)\n } else {\n // prevent focus to avoid accidental activation\n event.preventDefault()\n }\n })}\n {...(isWeb && {\n type: 'button',\n onKeyDown: composeEventHandlers(\n (props as React.HTMLProps<HTMLButtonElement>).onKeyDown,\n (event) => {\n if ([' ', 'Enter'].includes(event.key)) {\n context.onChange(value)\n }\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 = 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\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}\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 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\n return (\n <TabsProvider\n scope={__scopeTabs}\n baseId={useId()}\n value={value}\n onChange={setValue}\n orientation={orientation}\n dir={direction}\n activationMode={activationMode}\n size={size}\n >\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 List: TabsList,\n Trigger: TabsTrigger,\n Content: TabsContent,\n }\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 TabsContentProps,\n TabTriggerLayout,\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 useId,\n withStaticProperties,\n} from '@tamagui/web'\nimport * as React from 'react'\nimport type { LayoutRectangle } from 'react-native'\n\n/* -------------------------------------------------------------------------------------------------\n * TabsList\n * -----------------------------------------------------------------------------------------------*/\n\nconst TAB_LIST_NAME = 'TabsList'\n\nconst TabsListFrame = styled(Group, {\n name: TAB_LIST_NAME,\n focusable: true,\n // defaultVariants: {\n // flexGrow: 0,\n // },\n})\n\ntype TabsListFrameProps = GroupProps\n\ntype TabsListProps = TabsListFrameProps & {\n /**\n * Whether to loop over after reaching the end or start of the items\n * @default true\n */\n loop?: boolean\n}\n\nconst TabsList = 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\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\n variants: {\n size: {\n '...size': getButtonSized,\n },\n disabled: {\n true: {\n pointerEvents: 'none',\n },\n },\n theme: {\n Button: {\n focusable: true,\n hoverTheme: true,\n pressTheme: true,\n backgrounded: true,\n borderWidth: 1,\n borderColor: 'transparent',\n\n pressStyle: {\n borderColor: 'transparent',\n },\n\n hoverStyle: {\n borderColor: 'transparent',\n },\n\n focusStyle: {\n borderColor: '$borderColorFocus',\n },\n },\n },\n },\n})\n\ntype TabTriggerLayout = LayoutRectangle\ntype InteractionType = 'select' | 'focus' | 'hover'\n\ntype TabsTriggerFrameProps = ThemeableStackProps\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: TabTriggerLayout | null) => void\n}\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<TabTriggerLayout | null>(null)\n const triggerRef = React.useRef<HTMLButtonElement>(null)\n const groupItemProps = useGroupItem({ disabled })\n\n React.useEffect(() => {\n context.registerTrigger()\n return () => context.unregisterTrigger()\n }, [])\n\n React.useEffect(() => {\n if (!triggerRef.current || !isWeb) return\n\n function getTriggerSize() {\n if (!triggerRef.current) return\n setLayout({\n width: triggerRef.current.offsetWidth,\n height: triggerRef.current.offsetHeight,\n x: triggerRef.current.offsetLeft,\n y: triggerRef.current.offsetTop,\n })\n }\n getTriggerSize()\n\n const observer = new ResizeObserver(getTriggerSize)\n observer.observe(triggerRef.current)\n\n return () => {\n if (!triggerRef.current) return\n observer.unobserve(triggerRef.current)\n }\n }, [context.triggersCount])\n\n React.useEffect(() => {\n if (isSelected && layout) {\n onInteraction?.('select', layout)\n }\n }, [isSelected, value, layout])\n\n return (\n <Theme forceClassName name={isSelected ? 'active' : null}>\n <RovingFocusGroup.Item\n asChild\n {...rovingFocusGroupScope}\n focusable={!disabled}\n active={isSelected}\n >\n <TabsTriggerFrame\n onLayout={(event) => {\n if (!isWeb) {\n setLayout(event.nativeEvent.layout)\n }\n }}\n onHoverIn={composeEventHandlers(props.onHoverIn, () => {\n if (layout) {\n onInteraction?.('hover', layout)\n }\n })}\n onHoverOut={composeEventHandlers(props.onHoverOut, () => {\n onInteraction?.('hover', null)\n })}\n role=\"tab\"\n aria-selected={isSelected}\n aria-controls={contentId}\n data-state={isSelected ? 'active' : 'inactive'}\n data-disabled={disabled ? '' : undefined}\n disabled={disabled}\n id={triggerId}\n // @ts-ignore\n size={context.size}\n {...triggerProps}\n ref={composeRefs(forwardedRef, triggerRef)}\n onPress={composeEventHandlers(props.onPress ?? undefined, (event) => {\n // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n // but not when the control key is pressed (avoiding MacOS right click)\n\n const webChecks =\n !isWeb ||\n ((event as unknown as React.MouseEvent).button === 0 &&\n (event as unknown as React.MouseEvent).ctrlKey === false)\n if (!disabled && !isSelected && webChecks) {\n context.onChange(value)\n } else {\n // prevent focus to avoid accidental activation\n event.preventDefault()\n }\n })}\n {...(isWeb && {\n type: 'button',\n onKeyDown: composeEventHandlers(\n (props as React.HTMLProps<HTMLButtonElement>).onKeyDown,\n (event) => {\n if ([' ', 'Enter'].includes(event.key)) {\n context.onChange(value)\n }\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 = 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\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 React.forwardRef<HTMLDivElement, TabsProps>(\n (props: ScopedProps<TabsProps>, forwardedRef) => {\n const {\n __scopeTabs,\n value: valueProp,\n onValueChange,\n defaultValue,\n orientation = 'horizontal',\n dir,\n activationMode = 'automatic',\n size = '$true',\n ...tabsProps\n } = props\n const direction = useDirection(dir)\n const [value, setValue] = useControllableState({\n prop: valueProp,\n onChange: onValueChange,\n defaultProp: defaultValue ?? '',\n })\n const [triggersCount, setTriggersCount] = React.useState(0)\n const registerTrigger = useEvent(() => setTriggersCount((v) => v + 1))\n const unregisterTrigger = useEvent(() => setTriggersCount((v) => v - 1))\n\n return (\n <TabsProvider\n scope={__scopeTabs}\n baseId={useId()}\n value={value}\n onChange={setValue}\n orientation={orientation}\n dir={direction}\n activationMode={activationMode}\n size={size}\n registerTrigger={registerTrigger}\n triggersCount={triggersCount}\n unregisterTrigger={unregisterTrigger}\n >\n <TabsFrame\n direction={direction}\n // dir={direction}\n data-orientation={orientation}\n {...tabsProps}\n ref={forwardedRef}\n />\n </TabsProvider>\n )\n }\n ),\n {\n List: TabsList,\n Trigger: TabsTrigger,\n Content: TabsContent,\n }\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 TabsContentProps,\n TabTriggerLayout,\n}\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/jsx/Tabs.mjs CHANGED
@@ -11,6 +11,7 @@ import {
11
11
  composeRefs,
12
12
  isWeb,
13
13
  styled,
14
+ useEvent,
14
15
  useId,
15
16
  withStaticProperties
16
17
  } from "@tamagui/web";
@@ -100,6 +101,10 @@ const TabsTrigger = TabsTriggerFrame.extractable(
100
101
  const [layout, setLayout] = React.useState(null);
101
102
  const triggerRef = React.useRef(null);
102
103
  const groupItemProps = useGroupItem({ disabled });
104
+ React.useEffect(() => {
105
+ context.registerTrigger();
106
+ return () => context.unregisterTrigger();
107
+ }, []);
103
108
  React.useEffect(() => {
104
109
  if (!triggerRef.current || !isWeb)
105
110
  return;
@@ -121,7 +126,7 @@ const TabsTrigger = TabsTriggerFrame.extractable(
121
126
  return;
122
127
  observer.unobserve(triggerRef.current);
123
128
  };
124
- }, []);
129
+ }, [context.triggersCount]);
125
130
  React.useEffect(() => {
126
131
  if (isSelected && layout) {
127
132
  onInteraction?.("select", layout);
@@ -251,6 +256,9 @@ const Tabs = withStaticProperties(
251
256
  onChange: onValueChange,
252
257
  defaultProp: defaultValue ?? ""
253
258
  });
259
+ const [triggersCount, setTriggersCount] = React.useState(0);
260
+ const registerTrigger = useEvent(() => setTriggersCount((v) => v + 1));
261
+ const unregisterTrigger = useEvent(() => setTriggersCount((v) => v - 1));
254
262
  return <TabsProvider
255
263
  scope={__scopeTabs}
256
264
  baseId={useId()}
@@ -260,6 +268,9 @@ const Tabs = withStaticProperties(
260
268
  dir={direction}
261
269
  activationMode={activationMode}
262
270
  size={size}
271
+ registerTrigger={registerTrigger}
272
+ triggersCount={triggersCount}
273
+ unregisterTrigger={unregisterTrigger}
263
274
  ><TabsFrame
264
275
  direction={direction}
265
276
  data-orientation={orientation}
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 useId,\n withStaticProperties,\n} from '@tamagui/web'\nimport * as React from 'react'\nimport type { LayoutRectangle } from 'react-native'\n\n/* -------------------------------------------------------------------------------------------------\n * TabsList\n * -----------------------------------------------------------------------------------------------*/\n\nconst TAB_LIST_NAME = 'TabsList'\n\nconst TabsListFrame = styled(Group, {\n name: TAB_LIST_NAME,\n focusable: true,\n // defaultVariants: {\n // flexGrow: 0,\n // },\n})\n\ntype TabsListFrameProps = GroupProps\n\ntype TabsListProps = TabsListFrameProps & {\n /**\n * Whether to loop over after reaching the end or start of the items\n * @default true\n */\n loop?: boolean\n}\n\nconst TabsList = 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\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\n variants: {\n size: {\n '...size': getButtonSized,\n },\n disabled: {\n true: {\n pointerEvents: 'none',\n },\n },\n theme: {\n Button: {\n focusable: true,\n hoverTheme: true,\n pressTheme: true,\n backgrounded: true,\n borderWidth: 1,\n borderColor: 'transparent',\n\n pressStyle: {\n borderColor: 'transparent',\n },\n\n hoverStyle: {\n borderColor: 'transparent',\n },\n\n focusStyle: {\n borderColor: '$borderColorFocus',\n },\n },\n },\n },\n})\n\ntype TabTriggerLayout = LayoutRectangle\ntype InteractionType = 'select' | 'focus' | 'hover'\n\ntype TabsTriggerFrameProps = ThemeableStackProps\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: TabTriggerLayout | null) => void\n}\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<TabTriggerLayout | null>(null)\n const triggerRef = React.useRef<HTMLButtonElement>(null)\n const groupItemProps = useGroupItem({ disabled })\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 }, [])\n\n React.useEffect(() => {\n if (isSelected && layout) {\n onInteraction?.('select', layout)\n }\n }, [isSelected, value, layout])\n\n return (\n <Theme forceClassName name={isSelected ? 'active' : null}>\n <RovingFocusGroup.Item\n asChild\n {...rovingFocusGroupScope}\n focusable={!disabled}\n active={isSelected}\n >\n <TabsTriggerFrame\n onLayout={(event) => {\n if (!isWeb) {\n setLayout(event.nativeEvent.layout)\n }\n }}\n onHoverIn={composeEventHandlers(props.onHoverIn, () => {\n if (layout) {\n onInteraction?.('hover', layout)\n }\n })}\n onHoverOut={composeEventHandlers(props.onHoverOut, () => {\n onInteraction?.('hover', null)\n })}\n role=\"tab\"\n aria-selected={isSelected}\n aria-controls={contentId}\n data-state={isSelected ? 'active' : 'inactive'}\n data-disabled={disabled ? '' : undefined}\n disabled={disabled}\n id={triggerId}\n // @ts-ignore\n size={context.size}\n {...triggerProps}\n ref={composeRefs(forwardedRef, triggerRef)}\n onPress={composeEventHandlers(props.onPress ?? undefined, (event) => {\n // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n // but not when the control key is pressed (avoiding MacOS right click)\n\n const webChecks =\n !isWeb ||\n ((event as unknown as React.MouseEvent).button === 0 &&\n (event as unknown as React.MouseEvent).ctrlKey === false)\n if (!disabled && !isSelected && webChecks) {\n context.onChange(value)\n } else {\n // prevent focus to avoid accidental activation\n event.preventDefault()\n }\n })}\n {...(isWeb && {\n type: 'button',\n onKeyDown: composeEventHandlers(\n (props as React.HTMLProps<HTMLButtonElement>).onKeyDown,\n (event) => {\n if ([' ', 'Enter'].includes(event.key)) {\n context.onChange(value)\n }\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 = 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\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}\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 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\n return (\n <TabsProvider\n scope={__scopeTabs}\n baseId={useId()}\n value={value}\n onChange={setValue}\n orientation={orientation}\n dir={direction}\n activationMode={activationMode}\n size={size}\n >\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 List: TabsList,\n Trigger: TabsTrigger,\n Content: TabsContent,\n }\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 TabsContentProps,\n TabTriggerLayout,\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 useId,\n withStaticProperties,\n} from '@tamagui/web'\nimport * as React from 'react'\nimport type { LayoutRectangle } from 'react-native'\n\n/* -------------------------------------------------------------------------------------------------\n * TabsList\n * -----------------------------------------------------------------------------------------------*/\n\nconst TAB_LIST_NAME = 'TabsList'\n\nconst TabsListFrame = styled(Group, {\n name: TAB_LIST_NAME,\n focusable: true,\n // defaultVariants: {\n // flexGrow: 0,\n // },\n})\n\ntype TabsListFrameProps = GroupProps\n\ntype TabsListProps = TabsListFrameProps & {\n /**\n * Whether to loop over after reaching the end or start of the items\n * @default true\n */\n loop?: boolean\n}\n\nconst TabsList = 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\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\n variants: {\n size: {\n '...size': getButtonSized,\n },\n disabled: {\n true: {\n pointerEvents: 'none',\n },\n },\n theme: {\n Button: {\n focusable: true,\n hoverTheme: true,\n pressTheme: true,\n backgrounded: true,\n borderWidth: 1,\n borderColor: 'transparent',\n\n pressStyle: {\n borderColor: 'transparent',\n },\n\n hoverStyle: {\n borderColor: 'transparent',\n },\n\n focusStyle: {\n borderColor: '$borderColorFocus',\n },\n },\n },\n },\n})\n\ntype TabTriggerLayout = LayoutRectangle\ntype InteractionType = 'select' | 'focus' | 'hover'\n\ntype TabsTriggerFrameProps = ThemeableStackProps\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: TabTriggerLayout | null) => void\n}\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<TabTriggerLayout | null>(null)\n const triggerRef = React.useRef<HTMLButtonElement>(null)\n const groupItemProps = useGroupItem({ disabled })\n\n React.useEffect(() => {\n context.registerTrigger()\n return () => context.unregisterTrigger()\n }, [])\n\n React.useEffect(() => {\n if (!triggerRef.current || !isWeb) return\n\n function getTriggerSize() {\n if (!triggerRef.current) return\n setLayout({\n width: triggerRef.current.offsetWidth,\n height: triggerRef.current.offsetHeight,\n x: triggerRef.current.offsetLeft,\n y: triggerRef.current.offsetTop,\n })\n }\n getTriggerSize()\n\n const observer = new ResizeObserver(getTriggerSize)\n observer.observe(triggerRef.current)\n\n return () => {\n if (!triggerRef.current) return\n observer.unobserve(triggerRef.current)\n }\n }, [context.triggersCount])\n\n React.useEffect(() => {\n if (isSelected && layout) {\n onInteraction?.('select', layout)\n }\n }, [isSelected, value, layout])\n\n return (\n <Theme forceClassName name={isSelected ? 'active' : null}>\n <RovingFocusGroup.Item\n asChild\n {...rovingFocusGroupScope}\n focusable={!disabled}\n active={isSelected}\n >\n <TabsTriggerFrame\n onLayout={(event) => {\n if (!isWeb) {\n setLayout(event.nativeEvent.layout)\n }\n }}\n onHoverIn={composeEventHandlers(props.onHoverIn, () => {\n if (layout) {\n onInteraction?.('hover', layout)\n }\n })}\n onHoverOut={composeEventHandlers(props.onHoverOut, () => {\n onInteraction?.('hover', null)\n })}\n role=\"tab\"\n aria-selected={isSelected}\n aria-controls={contentId}\n data-state={isSelected ? 'active' : 'inactive'}\n data-disabled={disabled ? '' : undefined}\n disabled={disabled}\n id={triggerId}\n // @ts-ignore\n size={context.size}\n {...triggerProps}\n ref={composeRefs(forwardedRef, triggerRef)}\n onPress={composeEventHandlers(props.onPress ?? undefined, (event) => {\n // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n // but not when the control key is pressed (avoiding MacOS right click)\n\n const webChecks =\n !isWeb ||\n ((event as unknown as React.MouseEvent).button === 0 &&\n (event as unknown as React.MouseEvent).ctrlKey === false)\n if (!disabled && !isSelected && webChecks) {\n context.onChange(value)\n } else {\n // prevent focus to avoid accidental activation\n event.preventDefault()\n }\n })}\n {...(isWeb && {\n type: 'button',\n onKeyDown: composeEventHandlers(\n (props as React.HTMLProps<HTMLButtonElement>).onKeyDown,\n (event) => {\n if ([' ', 'Enter'].includes(event.key)) {\n context.onChange(value)\n }\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 = 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\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 React.forwardRef<HTMLDivElement, TabsProps>(\n (props: ScopedProps<TabsProps>, forwardedRef) => {\n const {\n __scopeTabs,\n value: valueProp,\n onValueChange,\n defaultValue,\n orientation = 'horizontal',\n dir,\n activationMode = 'automatic',\n size = '$true',\n ...tabsProps\n } = props\n const direction = useDirection(dir)\n const [value, setValue] = useControllableState({\n prop: valueProp,\n onChange: onValueChange,\n defaultProp: defaultValue ?? '',\n })\n const [triggersCount, setTriggersCount] = React.useState(0)\n const registerTrigger = useEvent(() => setTriggersCount((v) => v + 1))\n const unregisterTrigger = useEvent(() => setTriggersCount((v) => v - 1))\n\n return (\n <TabsProvider\n scope={__scopeTabs}\n baseId={useId()}\n value={value}\n onChange={setValue}\n orientation={orientation}\n dir={direction}\n activationMode={activationMode}\n size={size}\n registerTrigger={registerTrigger}\n triggersCount={triggersCount}\n unregisterTrigger={unregisterTrigger}\n >\n <TabsFrame\n direction={direction}\n // dir={direction}\n data-orientation={orientation}\n {...tabsProps}\n ref={forwardedRef}\n />\n </TabsProvider>\n )\n }\n ),\n {\n List: TabsList,\n Trigger: TabsTrigger,\n Content: TabsContent,\n }\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 TabsContentProps,\n TabTriggerLayout,\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.7.5",
3
+ "version": "1.7.7",
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.7.5",
29
- "@tamagui/get-button-sized": "1.7.5",
30
- "@tamagui/group": "1.7.5",
31
- "@tamagui/roving-focus": "1.7.5",
32
- "@tamagui/stacks": "1.7.5",
33
- "@tamagui/use-controllable-state": "1.7.5",
34
- "@tamagui/use-direction": "1.7.5",
35
- "@tamagui/web": "1.7.5"
28
+ "@tamagui/create-context": "1.7.7",
29
+ "@tamagui/get-button-sized": "1.7.7",
30
+ "@tamagui/group": "1.7.7",
31
+ "@tamagui/roving-focus": "1.7.7",
32
+ "@tamagui/stacks": "1.7.7",
33
+ "@tamagui/use-controllable-state": "1.7.7",
34
+ "@tamagui/use-direction": "1.7.7",
35
+ "@tamagui/web": "1.7.7"
36
36
  },
37
37
  "peerDependencies": {
38
38
  "react": "*",
39
39
  "react-dom": "*"
40
40
  },
41
41
  "devDependencies": {
42
- "@tamagui/build": "1.7.5",
42
+ "@tamagui/build": "1.7.7",
43
43
  "react": "^18.2.0",
44
44
  "react-dom": "^18.2.0"
45
45
  },
package/src/Tabs.tsx CHANGED
@@ -14,6 +14,7 @@ import {
14
14
  composeRefs,
15
15
  isWeb,
16
16
  styled,
17
+ useEvent,
17
18
  useId,
18
19
  withStaticProperties,
19
20
  } from '@tamagui/web'
@@ -152,6 +153,12 @@ const TabsTrigger = TabsTriggerFrame.extractable(
152
153
  const [layout, setLayout] = React.useState<TabTriggerLayout | null>(null)
153
154
  const triggerRef = React.useRef<HTMLButtonElement>(null)
154
155
  const groupItemProps = useGroupItem({ disabled })
156
+
157
+ React.useEffect(() => {
158
+ context.registerTrigger()
159
+ return () => context.unregisterTrigger()
160
+ }, [])
161
+
155
162
  React.useEffect(() => {
156
163
  if (!triggerRef.current || !isWeb) return
157
164
 
@@ -173,7 +180,7 @@ const TabsTrigger = TabsTriggerFrame.extractable(
173
180
  if (!triggerRef.current) return
174
181
  observer.unobserve(triggerRef.current)
175
182
  }
176
- }, [])
183
+ }, [context.triggersCount])
177
184
 
178
185
  React.useEffect(() => {
179
186
  if (isSelected && layout) {
@@ -339,6 +346,9 @@ type TabsContextValue = {
339
346
  dir?: TabsProps['dir']
340
347
  activationMode?: TabsProps['activationMode']
341
348
  size: SizeTokens
349
+ registerTrigger: () => void
350
+ unregisterTrigger: () => void
351
+ triggersCount: number
342
352
  }
343
353
 
344
354
  const [TabsProvider, useTabsContext] = createTabsContext<TabsContextValue>(TABS_NAME)
@@ -392,6 +402,9 @@ export const Tabs = withStaticProperties(
392
402
  onChange: onValueChange,
393
403
  defaultProp: defaultValue ?? '',
394
404
  })
405
+ const [triggersCount, setTriggersCount] = React.useState(0)
406
+ const registerTrigger = useEvent(() => setTriggersCount((v) => v + 1))
407
+ const unregisterTrigger = useEvent(() => setTriggersCount((v) => v - 1))
395
408
 
396
409
  return (
397
410
  <TabsProvider
@@ -403,6 +416,9 @@ export const Tabs = withStaticProperties(
403
416
  dir={direction}
404
417
  activationMode={activationMode}
405
418
  size={size}
419
+ registerTrigger={registerTrigger}
420
+ triggersCount={triggersCount}
421
+ unregisterTrigger={unregisterTrigger}
406
422
  >
407
423
  <TabsFrame
408
424
  direction={direction}
package/types/Tabs.d.ts CHANGED
@@ -31,10 +31,7 @@ declare const TabsContentFrame: import("@tamagui/web").TamaguiComponent<(Omit<im
31
31
  readonly pressTheme?: boolean | undefined;
32
32
  readonly focusTheme?: boolean | undefined;
33
33
  readonly circular?: boolean | undefined;
34
- readonly padded?: boolean | undefined; /**
35
- * Whether to loop over after reaching the end or start of the items
36
- * @default true
37
- */
34
+ readonly padded?: boolean | undefined;
38
35
  readonly elevate?: boolean | undefined;
39
36
  readonly bordered?: number | boolean | undefined;
40
37
  readonly transparent?: boolean | undefined;
@@ -151,7 +148,8 @@ type TabsContentProps = TabsContentFrameProps & {
151
148
  declare const TabsFrame: import("@tamagui/web").TamaguiComponent<(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<{
152
149
  readonly fullscreen?: boolean | undefined;
153
150
  readonly elevation?: SizeTokens | undefined;
154
- }, "size" | "hoverTheme" | "pressTheme" | "focusTheme" | "circular" | "elevate" | "bordered"> & {
151
+ }, "size" | "unstyled" | "hoverTheme" | "pressTheme" | "focusTheme" | "circular" | "elevate" | "bordered"> & {
152
+ readonly unstyled?: boolean | undefined;
155
153
  readonly hoverTheme?: boolean | undefined;
156
154
  readonly pressTheme?: boolean | undefined;
157
155
  readonly focusTheme?: boolean | undefined;
@@ -162,7 +160,8 @@ declare const TabsFrame: import("@tamagui/web").TamaguiComponent<(Omit<import("r
162
160
  } & 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<{
163
161
  readonly fullscreen?: boolean | undefined;
164
162
  readonly elevation?: SizeTokens | undefined;
165
- }, "size" | "hoverTheme" | "pressTheme" | "focusTheme" | "circular" | "elevate" | "bordered"> & {
163
+ }, "size" | "unstyled" | "hoverTheme" | "pressTheme" | "focusTheme" | "circular" | "elevate" | "bordered"> & {
164
+ readonly unstyled?: boolean | undefined;
166
165
  readonly hoverTheme?: boolean | undefined;
167
166
  readonly pressTheme?: boolean | undefined;
168
167
  readonly focusTheme?: boolean | undefined;
@@ -173,10 +172,11 @@ declare const TabsFrame: import("@tamagui/web").TamaguiComponent<(Omit<import("r
173
172
  }>> & import("@tamagui/web").PseudoProps<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<{
174
173
  readonly fullscreen?: boolean | undefined;
175
174
  readonly elevation?: SizeTokens | undefined;
176
- }, "size" | "hoverTheme" | "pressTheme" | "focusTheme" | "circular" | "elevate" | "bordered"> & {
175
+ }, "size" | "unstyled" | "hoverTheme" | "pressTheme" | "focusTheme" | "circular" | "elevate" | "bordered"> & {
176
+ readonly unstyled?: boolean | undefined;
177
177
  readonly hoverTheme?: boolean | undefined;
178
178
  readonly pressTheme?: boolean | undefined;
179
- readonly focusTheme?: boolean | undefined;
179
+ readonly focusTheme?: boolean | undefined; /** The value for the tabs state to be changed to after activation of the trigger */
180
180
  readonly circular?: boolean | undefined;
181
181
  readonly elevate?: boolean | undefined;
182
182
  readonly bordered?: number | boolean | undefined;
@@ -185,6 +185,7 @@ declare const TabsFrame: import("@tamagui/web").TamaguiComponent<(Omit<import("r
185
185
  readonly fullscreen?: boolean | undefined;
186
186
  readonly elevation?: SizeTokens | undefined;
187
187
  } & {
188
+ readonly unstyled?: boolean | undefined;
188
189
  readonly hoverTheme?: boolean | undefined;
189
190
  readonly pressTheme?: boolean | undefined;
190
191
  readonly focusTheme?: boolean | undefined;
@@ -198,6 +199,7 @@ declare const TabsFrame: import("@tamagui/web").TamaguiComponent<(Omit<import("r
198
199
  readonly fullscreen?: boolean | undefined;
199
200
  readonly elevation?: SizeTokens | undefined;
200
201
  } & {
202
+ readonly unstyled?: boolean | undefined;
201
203
  readonly hoverTheme?: boolean | undefined;
202
204
  readonly pressTheme?: boolean | undefined;
203
205
  readonly focusTheme?: boolean | undefined;
@@ -211,6 +213,7 @@ declare const TabsFrame: import("@tamagui/web").TamaguiComponent<(Omit<import("r
211
213
  readonly fullscreen?: boolean | undefined;
212
214
  readonly elevation?: SizeTokens | undefined;
213
215
  } & {
216
+ readonly unstyled?: boolean | undefined;
214
217
  readonly hoverTheme?: boolean | undefined;
215
218
  readonly pressTheme?: boolean | undefined;
216
219
  readonly focusTheme?: boolean | undefined;
@@ -224,6 +227,7 @@ declare const TabsFrame: import("@tamagui/web").TamaguiComponent<(Omit<import("r
224
227
  readonly fullscreen?: boolean | undefined;
225
228
  readonly elevation?: SizeTokens | undefined;
226
229
  } & {
230
+ readonly unstyled?: boolean | undefined;
227
231
  readonly hoverTheme?: boolean | undefined;
228
232
  readonly pressTheme?: boolean | undefined;
229
233
  readonly focusTheme?: boolean | undefined;
@@ -262,7 +266,8 @@ type TabsProps = TabsFrameProps & {
262
266
  export declare const Tabs: React.ForwardRefExoticComponent<((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<{
263
267
  readonly fullscreen?: boolean | undefined;
264
268
  readonly elevation?: SizeTokens | undefined;
265
- }, "size" | "hoverTheme" | "pressTheme" | "focusTheme" | "circular" | "elevate" | "bordered"> & {
269
+ }, "size" | "unstyled" | "hoverTheme" | "pressTheme" | "focusTheme" | "circular" | "elevate" | "bordered"> & {
270
+ readonly unstyled?: boolean | undefined;
266
271
  readonly hoverTheme?: boolean | undefined;
267
272
  readonly pressTheme?: boolean | undefined;
268
273
  readonly focusTheme?: boolean | undefined;
@@ -273,7 +278,8 @@ export declare const Tabs: React.ForwardRefExoticComponent<((Omit<import("react-
273
278
  } & 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<{
274
279
  readonly fullscreen?: boolean | undefined;
275
280
  readonly elevation?: SizeTokens | undefined;
276
- }, "size" | "hoverTheme" | "pressTheme" | "focusTheme" | "circular" | "elevate" | "bordered"> & {
281
+ }, "size" | "unstyled" | "hoverTheme" | "pressTheme" | "focusTheme" | "circular" | "elevate" | "bordered"> & {
282
+ readonly unstyled?: boolean | undefined;
277
283
  readonly hoverTheme?: boolean | undefined;
278
284
  readonly pressTheme?: boolean | undefined;
279
285
  readonly focusTheme?: boolean | undefined;
@@ -284,10 +290,11 @@ export declare const Tabs: React.ForwardRefExoticComponent<((Omit<import("react-
284
290
  }>> & import("@tamagui/web").PseudoProps<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<{
285
291
  readonly fullscreen?: boolean | undefined;
286
292
  readonly elevation?: SizeTokens | undefined;
287
- }, "size" | "hoverTheme" | "pressTheme" | "focusTheme" | "circular" | "elevate" | "bordered"> & {
293
+ }, "size" | "unstyled" | "hoverTheme" | "pressTheme" | "focusTheme" | "circular" | "elevate" | "bordered"> & {
294
+ readonly unstyled?: boolean | undefined;
288
295
  readonly hoverTheme?: boolean | undefined;
289
296
  readonly pressTheme?: boolean | undefined;
290
- readonly focusTheme?: boolean | undefined;
297
+ readonly focusTheme?: boolean | undefined; /** The value for the tabs state to be changed to after activation of the trigger */
291
298
  readonly circular?: boolean | undefined;
292
299
  readonly elevate?: boolean | undefined;
293
300
  readonly bordered?: number | boolean | undefined;
@@ -318,6 +325,7 @@ export declare const Tabs: React.ForwardRefExoticComponent<((Omit<import("react-
318
325
  readonly fullscreen?: boolean | undefined;
319
326
  readonly elevation?: SizeTokens | undefined;
320
327
  } & {
328
+ readonly unstyled?: boolean | undefined;
321
329
  readonly hoverTheme?: boolean | undefined;
322
330
  readonly pressTheme?: boolean | undefined;
323
331
  readonly focusTheme?: boolean | undefined;
@@ -331,6 +339,7 @@ export declare const Tabs: React.ForwardRefExoticComponent<((Omit<import("react-
331
339
  readonly fullscreen?: boolean | undefined;
332
340
  readonly elevation?: SizeTokens | undefined;
333
341
  } & {
342
+ readonly unstyled?: boolean | undefined;
334
343
  readonly hoverTheme?: boolean | undefined;
335
344
  readonly pressTheme?: boolean | undefined;
336
345
  readonly focusTheme?: boolean | undefined;
@@ -344,6 +353,7 @@ export declare const Tabs: React.ForwardRefExoticComponent<((Omit<import("react-
344
353
  readonly fullscreen?: boolean | undefined;
345
354
  readonly elevation?: SizeTokens | undefined;
346
355
  } & {
356
+ readonly unstyled?: boolean | undefined;
347
357
  readonly hoverTheme?: boolean | undefined;
348
358
  readonly pressTheme?: boolean | undefined;
349
359
  readonly focusTheme?: boolean | undefined;
@@ -413,7 +423,7 @@ export declare const Tabs: React.ForwardRefExoticComponent<((Omit<import("react-
413
423
  readonly unstyled?: boolean | undefined;
414
424
  readonly size?: any;
415
425
  }>> & import("@tamagui/web").PseudoProps<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<{
416
- readonly fullscreen?: boolean | undefined; /** Used for making custom indicators when trigger interacted with */
426
+ readonly fullscreen?: boolean | undefined;
417
427
  readonly elevation?: SizeTokens | undefined;
418
428
  } & {
419
429
  readonly backgrounded?: boolean | undefined;
@@ -454,10 +464,7 @@ export declare const Tabs: React.ForwardRefExoticComponent<((Omit<import("react-
454
464
  readonly pressTheme?: boolean | undefined;
455
465
  readonly focusTheme?: boolean | undefined;
456
466
  readonly circular?: boolean | undefined;
457
- readonly padded?: boolean | undefined; /**
458
- * Whether to loop over after reaching the end or start of the items
459
- * @default true
460
- */
467
+ readonly padded?: boolean | undefined;
461
468
  readonly elevate?: boolean | undefined;
462
469
  readonly bordered?: number | boolean | undefined;
463
470
  readonly transparent?: boolean | undefined;
@@ -508,10 +515,7 @@ export declare const Tabs: React.ForwardRefExoticComponent<((Omit<import("react-
508
515
  readonly pressTheme?: boolean | undefined;
509
516
  readonly focusTheme?: boolean | undefined;
510
517
  readonly circular?: boolean | undefined;
511
- readonly padded?: boolean | undefined; /**
512
- * Whether to loop over after reaching the end or start of the items
513
- * @default true
514
- */
518
+ readonly padded?: boolean | undefined;
515
519
  readonly elevate?: boolean | undefined;
516
520
  readonly bordered?: number | boolean | undefined;
517
521
  readonly transparent?: 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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"}