@dxos/react-ui-tabs 0.9.1-main.c7dcc2e112 → 0.10.0
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.
- package/dist/lib/browser/index.mjs +1 -1
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/node-esm/index.mjs +1 -1
- package/dist/lib/node-esm/index.mjs.map +3 -3
- package/dist/types/src/Tabs.d.ts +1 -1
- package/dist/types/src/Tabs.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +14 -14
- package/src/Tabs.tsx +4 -4
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
// src/Tabs.tsx
|
|
2
|
-
import { useArrowNavigationGroup,
|
|
2
|
+
import { useArrowNavigationGroup, useFocusableGroup, useFocusFinders } from "@fluentui/react-tabster";
|
|
3
3
|
import { createContext } from "@radix-ui/react-context";
|
|
4
4
|
import { Slot } from "@radix-ui/react-slot";
|
|
5
5
|
import * as TabsPrimitive from "@radix-ui/react-tabs";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/Tabs.tsx"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { useArrowNavigationGroup, useFocusFinders, useFocusableGroup } from '@fluentui/react-tabster';\nimport { createContext } from '@radix-ui/react-context';\nimport { Slot } from '@radix-ui/react-slot';\nimport * as TabsPrimitive from '@radix-ui/react-tabs';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { type ComponentPropsWithoutRef, type MouseEvent, useCallback, useLayoutEffect } from 'react';\n\nimport {\n Button,\n type ButtonProps,\n IconButton,\n type IconButtonProps,\n type SlottableProps,\n type ThemedClassName,\n composableProps,\n slottable,\n useForwardedRef,\n} from '@dxos/react-ui';\nimport { useAttention } from '@dxos/react-ui-attention';\nimport { mx } from '@dxos/ui-theme';\n\n// TODO(burdon): Rewrite this; there are too many hacks/quirks.\n\ntype TabsActivePart = 'list' | 'panel';\n\nconst TABS_NAME = 'Tabs';\n\n//\n// Context\n//\n\ntype TabsContextValue = {\n activePart: TabsActivePart;\n setActivePart: (nextActivePart: TabsActivePart) => void;\n attendableId?: string;\n} & Pick<TabsPrimitive.TabsProps, 'orientation' | 'value'>;\n\nconst [TabsContextProvider, useTabsContext] = createContext<TabsContextValue>(TABS_NAME, {\n orientation: 'vertical',\n activePart: 'list',\n setActivePart: () => {},\n});\n\n//\n// Root\n//\n\ntype TabsRootCustomProps = TabsPrimitive.TabsProps &\n Partial<\n Pick<TabsContextValue, 'activePart' | 'attendableId'> & {\n onActivePartChange: (nextActivePart: TabsActivePart) => void;\n defaultActivePart: TabsActivePart;\n /** Skip master-detail focus moves (e.g. when a child form owns initial focus). */\n suppressRegionFocus?: boolean;\n }\n >;\n\ntype TabsRootProps = SlottableProps<TabsRootCustomProps>;\n\nconst TabsRoot = slottable<HTMLDivElement, TabsRootCustomProps>(\n (\n {\n children,\n activePart: propsActivePart,\n onActivePartChange,\n defaultActivePart,\n value: propsValue,\n onValueChange,\n defaultValue,\n orientation = 'vertical',\n activationMode = 'manual',\n attendableId,\n suppressRegionFocus = false,\n asChild,\n ...props\n },\n forwardedRef,\n ) => {\n const tabsRoot = useForwardedRef(forwardedRef);\n\n // TODO(thure): Without these, we get Groupper/Mover `API used before initialization`, but why?\n useArrowNavigationGroup();\n useFocusableGroup();\n const [activePart = 'list', setActivePart] = useControllableState({\n prop: propsActivePart,\n onChange: onActivePartChange,\n defaultProp: defaultActivePart,\n });\n\n const [value, setValue] = useControllableState({\n prop: propsValue,\n onChange: onValueChange,\n defaultProp: defaultValue,\n });\n\n const handleValueChange = useCallback(\n (nextValue: string) => {\n setActivePart('panel');\n setValue(nextValue);\n },\n [value],\n );\n\n const { findFirstFocusable, findNextFocusable } = useFocusFinders();\n\n useLayoutEffect(() => {\n if (suppressRegionFocus) {\n return;\n }\n\n const root = tabsRoot.current;\n if (!root) {\n return;\n }\n\n if (activePart === 'list') {\n const tablist = root.querySelector<HTMLElement>('[role=\"tablist\"]');\n findFirstFocusable(tablist)?.focus();\n return;\n }\n\n const panel = root.querySelector<HTMLElement>('[role=\"tabpanel\"][data-state=\"active\"]');\n if (!panel) {\n return;\n }\n\n // Radix marks the active panel focusable for roving tabindex; skip it so content receives focus.\n let target = findFirstFocusable(panel);\n if (target === panel) {\n target = findNextFocusable(panel, { container: panel }) ?? undefined;\n }\n target?.focus();\n }, [activePart, value, findFirstFocusable, findNextFocusable, suppressRegionFocus]);\n\n return (\n <TabsContextProvider\n orientation={orientation}\n activePart={activePart}\n setActivePart={setActivePart}\n value={value}\n attendableId={attendableId}\n >\n <TabsPrimitive.Root\n {...composableProps<HTMLDivElement>(props)}\n asChild={asChild}\n orientation={orientation}\n activationMode={activationMode}\n data-active={activePart}\n value={value}\n onValueChange={handleValueChange}\n ref={tabsRoot}\n >\n {children}\n </TabsPrimitive.Root>\n </TabsContextProvider>\n );\n },\n);\n\nTabsRoot.displayName = 'Tabs.Root';\n\n//\n// Viewport\n//\n\ntype TabsViewportProps = SlottableProps<\n Omit<ComponentPropsWithoutRef<'div'>, 'className' | 'style' | 'children' | 'role'>\n>;\n\nconst TabsViewport = slottable<\n HTMLDivElement,\n Omit<ComponentPropsWithoutRef<'div'>, 'className' | 'style' | 'children' | 'role'>\n>(({ children, asChild, ...props }, forwardedRef) => {\n const { activePart } = useTabsContext('TabsViewport');\n const Comp = asChild ? Slot : 'div';\n return (\n <Comp {...composableProps<HTMLDivElement>(props)} data-active={activePart} ref={forwardedRef}>\n {children}\n </Comp>\n );\n});\n\nTabsViewport.displayName = 'Tabs.Viewport';\n\n//\n// Tablist\n//\n\ntype TabsTablistProps = ThemedClassName<TabsPrimitive.TabsListProps>;\n\nconst TabsTablist = ({ children, classNames, ...props }: TabsTablistProps) => {\n const { orientation } = useTabsContext('TabsTablist');\n return (\n <TabsPrimitive.List\n {...props}\n data-arrow-keys={orientation === 'vertical' ? 'up down' : 'left right'}\n className={mx(\n 'max-h-full w-full',\n // TODO(burdon): Should be embeddable inside Toolbar (if horizontal).\n orientation === 'vertical' ? 'overflow-y-auto' : 'flex p-1 gap-1 items-stretch justify-start overflow-x-auto',\n classNames,\n )}\n >\n {children}\n </TabsPrimitive.List>\n );\n};\n\nTabsTablist.displayName = 'Tabs.Tablist';\n\n//\n// BackButton\n//\n\nconst TabsBackButton = ({ onClick, classNames, ...props }: ButtonProps) => {\n const { setActivePart } = useTabsContext('TabsBackButton');\n const handleClick = useCallback(\n (event: MouseEvent<HTMLButtonElement>) => {\n setActivePart('list');\n return onClick?.(event);\n },\n [setActivePart, onClick],\n );\n\n return <Button {...props} classNames={['@md:hidden text-start', classNames]} onClick={handleClick} />;\n};\n\nTabsBackButton.displayName = 'Tabs.BackButton';\n\n//\n// TabGroupHeading\n//\n\ntype TabsTabGroupHeadingProps = ThemedClassName<ComponentPropsWithoutRef<'h2'>>;\n\nconst TabsTabGroupHeading = ({ children, classNames, ...props }: TabsTabGroupHeadingProps) => (\n <h2 {...props} className={mx('my-1 px-2 text-sm text-un-accent', classNames)}>\n {children}\n </h2>\n);\n\nTabsTabGroupHeading.displayName = 'Tabs.TabGroupHeading';\n\n//\n// Tab\n//\n\ntype TabsTabProps = ButtonProps & Pick<TabsPrimitive.TabsTriggerProps, 'value'>;\n\nconst TabsTab = ({ value, classNames, children, onClick, ...props }: TabsTabProps) => {\n const { setActivePart, orientation, value: contextValue, attendableId } = useTabsContext('TabsTab');\n const { hasAttention } = useAttention(attendableId);\n\n const handleClick = useCallback(\n // NOTE: This handler is only called if the tab is *already active*.\n (event: MouseEvent<HTMLButtonElement>) => {\n setActivePart('panel');\n onClick?.(event);\n },\n [setActivePart, onClick],\n );\n\n return (\n <TabsPrimitive.Trigger value={value} asChild>\n <Button\n {...props}\n variant={\n orientation === 'horizontal' && contextValue === value ? (hasAttention ? 'primary' : 'default') : 'ghost'\n }\n classNames={[\n orientation === 'vertical' && 'block justify-start text-start w-full',\n orientation === 'vertical' && 'dx-selected',\n classNames,\n ]}\n onClick={handleClick}\n >\n {children}\n </Button>\n </TabsPrimitive.Trigger>\n );\n};\n\nTabsTab.displayName = 'Tabs.Tab';\n\n//\n// IconTab\n//\n\ntype TabsIconTabProps = IconButtonProps & Pick<TabsPrimitive.TabsTriggerProps, 'value'>;\n\nconst TabsIconTab = ({ value, classNames, onClick, ...props }: TabsIconTabProps) => {\n const { setActivePart, orientation, value: contextValue, attendableId } = useTabsContext('TabsTab');\n const { hasAttention } = useAttention(attendableId);\n\n // NOTE: This handler is only called if the tab is *already active*.\n const handleClick = useCallback(\n (event: MouseEvent<HTMLButtonElement>) => {\n setActivePart('panel');\n onClick?.(event);\n },\n [setActivePart, onClick],\n );\n\n return (\n <TabsPrimitive.Trigger value={value} asChild>\n <IconButton\n {...props}\n variant={\n orientation === 'horizontal' && contextValue === value ? (hasAttention ? 'primary' : 'default') : 'ghost'\n }\n classNames={[\n orientation === 'vertical' && 'justify-start text-start w-full',\n orientation === 'vertical' && 'dx-selected',\n classNames,\n ]}\n onClick={handleClick}\n />\n </TabsPrimitive.Trigger>\n );\n};\n\nTabsIconTab.displayName = 'Tabs.IconTab';\n\n//\n// Panel\n//\n// Do NOT wrap TabsPanel children in React.Activity.\n// Radix TabsPrimitive.Content already unmounts inactive panels (no forceMount) — inactive tab\n// content is not in the DOM and effects do not run, which is the desired behaviour.\n// React.Activity (experimental in React 19) is a reconciler-level symbol that deactivates its\n// subtree when mode='hidden'. It was redundant here and prevented initial render of active panels.\n//\n\ntype TabsPanelProps = ThemedClassName<TabsPrimitive.TabsContentProps>;\n\nconst TabsPanel = ({ classNames, children, ...props }: TabsPanelProps) => (\n <TabsPrimitive.Content {...props} className={mx('p-0! dx-focus-ring-inset-over-all', classNames)}>\n {children}\n </TabsPrimitive.Content>\n);\n\nTabsPanel.displayName = 'Tabs.Panel';\n\ntype TabsTabPrimitiveProps = TabsPrimitive.TabsTriggerProps;\n\n//\n// Tabs\n//\n\nexport const Tabs = {\n Root: TabsRoot,\n Tablist: TabsTablist,\n Tab: TabsTab,\n IconTab: TabsIconTab,\n TabPrimitive: TabsPrimitive.Trigger,\n TabGroupHeading: TabsTabGroupHeading,\n Viewport: TabsViewport,\n Panel: TabsPanel,\n BackButton: TabsBackButton,\n};\n\nexport type {\n TabsActivePart,\n TabsRootProps,\n TabsTablistProps,\n TabsTabProps,\n TabsTabPrimitiveProps,\n TabsTabGroupHeadingProps,\n TabsViewportProps,\n TabsPanelProps,\n};\n"],
|
|
5
|
-
"mappings": ";AAIA,SAASA,yBAAyBC,
|
|
6
|
-
"names": ["useArrowNavigationGroup", "
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { useArrowNavigationGroup, useFocusableGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport { createContext } from '@radix-ui/react-context';\nimport { Slot } from '@radix-ui/react-slot';\nimport * as TabsPrimitive from '@radix-ui/react-tabs';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { type ComponentPropsWithoutRef, type MouseEvent, useCallback, useLayoutEffect } from 'react';\n\nimport {\n Button,\n type ButtonProps,\n IconButton,\n type IconButtonProps,\n type SlottableProps,\n type ThemedClassName,\n composableProps,\n slottable,\n useForwardedRef,\n} from '@dxos/react-ui';\nimport { useAttention } from '@dxos/react-ui-attention';\nimport { mx } from '@dxos/ui-theme';\n\n// TODO(burdon): Rewrite this; there are too many hacks/quirks.\n\ntype TabsActivePart = 'list' | 'panel';\n\nconst TABS_NAME = 'Tabs';\n\n//\n// Context\n//\n\ntype TabsContextValue = {\n activePart: TabsActivePart;\n setActivePart: (nextActivePart: TabsActivePart) => void;\n attendableId?: string;\n} & Pick<TabsPrimitive.TabsProps, 'orientation' | 'value'>;\n\nconst [TabsContextProvider, useTabsContext] = createContext<TabsContextValue>(TABS_NAME, {\n orientation: 'vertical',\n activePart: 'list',\n setActivePart: () => {},\n});\n\n//\n// Root\n//\n\ntype TabsRootCustomProps = TabsPrimitive.TabsProps &\n Partial<\n Pick<TabsContextValue, 'activePart' | 'attendableId'> & {\n onActivePartChange: (nextActivePart: TabsActivePart) => void;\n defaultActivePart: TabsActivePart;\n /** Skip master-detail focus moves (e.g. when a child form owns initial focus). */\n suppressRegionFocus?: boolean;\n }\n >;\n\ntype TabsRootProps = SlottableProps<TabsRootCustomProps>;\n\nconst TabsRoot = slottable<HTMLDivElement, TabsRootCustomProps>(\n (\n {\n children,\n activePart: propsActivePart,\n onActivePartChange,\n defaultActivePart,\n value: propsValue,\n onValueChange,\n defaultValue,\n orientation = 'vertical',\n activationMode = 'manual',\n attendableId,\n suppressRegionFocus = false,\n asChild,\n ...props\n },\n forwardedRef,\n ) => {\n const tabsRoot = useForwardedRef(forwardedRef);\n\n // TODO(thure): Without these, we get Groupper/Mover `API used before initialization`, but why?\n useArrowNavigationGroup();\n useFocusableGroup();\n const [activePart = 'list', setActivePart] = useControllableState({\n prop: propsActivePart,\n onChange: onActivePartChange,\n defaultProp: defaultActivePart,\n });\n\n const [value, setValue] = useControllableState({\n prop: propsValue,\n onChange: onValueChange,\n defaultProp: defaultValue,\n });\n\n const handleValueChange = useCallback(\n (nextValue: string) => {\n setActivePart('panel');\n setValue(nextValue);\n },\n [value],\n );\n\n const { findFirstFocusable, findNextFocusable } = useFocusFinders();\n\n useLayoutEffect(() => {\n if (suppressRegionFocus) {\n return;\n }\n\n const root = tabsRoot.current;\n if (!root) {\n return;\n }\n\n if (activePart === 'list') {\n const tablist = root.querySelector<HTMLElement>('[role=\"tablist\"]');\n findFirstFocusable(tablist)?.focus();\n return;\n }\n\n const panel = root.querySelector<HTMLElement>('[role=\"tabpanel\"][data-state=\"active\"]');\n if (!panel) {\n return;\n }\n\n // Radix marks the active panel focusable for roving tabindex; skip it so content receives focus.\n let target = findFirstFocusable(panel);\n if (target === panel) {\n target = findNextFocusable(panel, { container: panel }) ?? undefined;\n }\n target?.focus();\n }, [activePart, value, findFirstFocusable, findNextFocusable, suppressRegionFocus]);\n\n return (\n <TabsContextProvider\n orientation={orientation}\n activePart={activePart}\n setActivePart={setActivePart}\n value={value}\n attendableId={attendableId}\n >\n <TabsPrimitive.Root\n {...composableProps<HTMLDivElement>(props)}\n asChild={asChild}\n orientation={orientation}\n activationMode={activationMode}\n data-active={activePart}\n value={value}\n onValueChange={handleValueChange}\n ref={tabsRoot}\n >\n {children}\n </TabsPrimitive.Root>\n </TabsContextProvider>\n );\n },\n);\n\nTabsRoot.displayName = 'Tabs.Root';\n\n//\n// Viewport\n//\n\ntype TabsViewportProps = SlottableProps<\n Omit<ComponentPropsWithoutRef<'div'>, 'className' | 'style' | 'children' | 'role'>\n>;\n\nconst TabsViewport = slottable<\n HTMLDivElement,\n Omit<ComponentPropsWithoutRef<'div'>, 'className' | 'style' | 'children' | 'role'>\n>(({ children, asChild, ...props }, forwardedRef) => {\n const { activePart } = useTabsContext('TabsViewport');\n const Comp = asChild ? Slot : 'div';\n return (\n <Comp {...composableProps<HTMLDivElement>(props)} data-active={activePart} ref={forwardedRef}>\n {children}\n </Comp>\n );\n});\n\nTabsViewport.displayName = 'Tabs.Viewport';\n\n//\n// Tablist\n//\n\ntype TabsTablistProps = ThemedClassName<TabsPrimitive.TabsListProps>;\n\nconst TabsTablist = ({ children, classNames, ...props }: TabsTablistProps) => {\n const { orientation } = useTabsContext('TabsTablist');\n return (\n <TabsPrimitive.List\n {...props}\n data-arrow-keys={orientation === 'vertical' ? 'up down' : 'left right'}\n className={mx(\n 'max-h-full w-full',\n // TODO(burdon): Should be embeddable inside Toolbar (if horizontal).\n orientation === 'vertical' ? 'overflow-y-auto' : 'flex p-1 gap-1 items-stretch justify-start overflow-x-auto',\n classNames,\n )}\n >\n {children}\n </TabsPrimitive.List>\n );\n};\n\nTabsTablist.displayName = 'Tabs.Tablist';\n\n//\n// BackButton\n//\n\nconst TabsBackButton = ({ onClick, classNames, ...props }: ButtonProps) => {\n const { setActivePart } = useTabsContext('TabsBackButton');\n const handleClick = useCallback(\n (event: MouseEvent<HTMLButtonElement>) => {\n setActivePart('list');\n return onClick?.(event);\n },\n [setActivePart, onClick],\n );\n\n return <Button {...props} classNames={['@md:hidden text-start', classNames]} onClick={handleClick} />;\n};\n\nTabsBackButton.displayName = 'Tabs.BackButton';\n\n//\n// TabGroupHeading\n//\n\ntype TabsTabGroupHeadingProps = ThemedClassName<ComponentPropsWithoutRef<'h2'>>;\n\nconst TabsTabGroupHeading = ({ children, classNames, ...props }: TabsTabGroupHeadingProps) => (\n <h2 {...props} className={mx('my-1 px-2 text-sm text-un-accent', classNames)}>\n {children}\n </h2>\n);\n\nTabsTabGroupHeading.displayName = 'Tabs.TabGroupHeading';\n\n//\n// Tab\n//\n\ntype TabsTabProps = ButtonProps & Pick<TabsPrimitive.TabsTriggerProps, 'value'>;\n\nconst TabsTab = ({ value, classNames, children, onClick, ...props }: TabsTabProps) => {\n const { setActivePart, orientation, value: contextValue, attendableId } = useTabsContext('TabsTab');\n const { hasAttention } = useAttention(attendableId);\n\n const handleClick = useCallback(\n // NOTE: This handler is only called if the tab is *already active*.\n (event: MouseEvent<HTMLButtonElement>) => {\n setActivePart('panel');\n onClick?.(event);\n },\n [setActivePart, onClick],\n );\n\n return (\n <TabsPrimitive.Trigger value={value} asChild>\n <Button\n {...props}\n variant={\n orientation === 'horizontal' && contextValue === value ? (hasAttention ? 'primary' : 'default') : 'ghost'\n }\n classNames={[\n orientation === 'vertical' && 'block justify-start text-start w-full',\n orientation === 'vertical' && 'dx-selected',\n classNames,\n ]}\n onClick={handleClick}\n >\n {children}\n </Button>\n </TabsPrimitive.Trigger>\n );\n};\n\nTabsTab.displayName = 'Tabs.Tab';\n\n//\n// IconTab\n//\n\ntype TabsIconTabProps = IconButtonProps & Pick<TabsPrimitive.TabsTriggerProps, 'value'>;\n\nconst TabsIconTab = ({ value, classNames, onClick, ...props }: TabsIconTabProps) => {\n const { setActivePart, orientation, value: contextValue, attendableId } = useTabsContext('TabsTab');\n const { hasAttention } = useAttention(attendableId);\n\n // NOTE: This handler is only called if the tab is *already active*.\n const handleClick = useCallback(\n (event: MouseEvent<HTMLButtonElement>) => {\n setActivePart('panel');\n onClick?.(event);\n },\n [setActivePart, onClick],\n );\n\n return (\n <TabsPrimitive.Trigger value={value} asChild>\n <IconButton\n {...props}\n variant={\n orientation === 'horizontal' && contextValue === value ? (hasAttention ? 'primary' : 'default') : 'ghost'\n }\n classNames={[\n orientation === 'vertical' && 'justify-start text-start w-full',\n orientation === 'vertical' && 'dx-selected',\n classNames,\n ]}\n onClick={handleClick}\n />\n </TabsPrimitive.Trigger>\n );\n};\n\nTabsIconTab.displayName = 'Tabs.IconTab';\n\n//\n// Panel\n//\n// Do NOT wrap TabsPanel children in React.Activity.\n// Radix TabsPrimitive.Content already unmounts inactive panels (no forceMount) — inactive tab\n// content is not in the DOM and effects do not run, which is the desired behaviour.\n// React.Activity (experimental in React 19) is a reconciler-level symbol that deactivates its\n// subtree when mode='hidden'. It was redundant here and prevented initial render of active panels.\n//\n\ntype TabsPanelProps = ThemedClassName<TabsPrimitive.TabsContentProps>;\n\nconst TabsPanel = ({ classNames, children, ...props }: TabsPanelProps) => (\n <TabsPrimitive.Content {...props} className={mx('p-0! dx-focus-ring-inset-over-all', classNames)}>\n {children}\n </TabsPrimitive.Content>\n);\n\nTabsPanel.displayName = 'Tabs.Panel';\n\ntype TabsTabPrimitiveProps = TabsPrimitive.TabsTriggerProps;\n\n//\n// Tabs\n//\n\nexport const Tabs = {\n Root: TabsRoot,\n Tablist: TabsTablist,\n Tab: TabsTab,\n IconTab: TabsIconTab,\n TabPrimitive: TabsPrimitive.Trigger,\n TabGroupHeading: TabsTabGroupHeading,\n Viewport: TabsViewport,\n Panel: TabsPanel,\n BackButton: TabsBackButton,\n};\n\nexport type {\n TabsActivePart,\n TabsPanelProps,\n TabsRootProps,\n TabsTabGroupHeadingProps,\n TabsTablistProps,\n TabsTabPrimitiveProps,\n TabsTabProps,\n TabsViewportProps,\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["useArrowNavigationGroup", "useFocusableGroup", "useFocusFinders", "createContext", "Slot", "TabsPrimitive", "useControllableState", "React", "useCallback", "useLayoutEffect", "Button", "IconButton", "composableProps", "slottable", "useForwardedRef", "useAttention", "mx", "TABS_NAME", "TabsContextProvider", "useTabsContext", "orientation", "activePart", "setActivePart", "TabsRoot", "children", "propsActivePart", "onActivePartChange", "defaultActivePart", "value", "propsValue", "onValueChange", "defaultValue", "activationMode", "attendableId", "suppressRegionFocus", "asChild", "props", "forwardedRef", "tabsRoot", "prop", "onChange", "defaultProp", "setValue", "handleValueChange", "nextValue", "findFirstFocusable", "findNextFocusable", "root", "current", "tablist", "querySelector", "focus", "panel", "target", "container", "undefined", "Root", "data-active", "ref", "displayName", "TabsViewport", "Comp", "TabsTablist", "classNames", "List", "data-arrow-keys", "className", "TabsBackButton", "onClick", "handleClick", "event", "TabsTabGroupHeading", "h2", "TabsTab", "contextValue", "hasAttention", "Trigger", "variant", "TabsIconTab", "TabsPanel", "Content", "Tabs", "Tablist", "Tab", "IconTab", "TabPrimitive", "TabGroupHeading", "Viewport", "Panel", "BackButton"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
|
|
2
2
|
|
|
3
3
|
// src/Tabs.tsx
|
|
4
|
-
import { useArrowNavigationGroup,
|
|
4
|
+
import { useArrowNavigationGroup, useFocusableGroup, useFocusFinders } from "@fluentui/react-tabster";
|
|
5
5
|
import { createContext } from "@radix-ui/react-context";
|
|
6
6
|
import { Slot } from "@radix-ui/react-slot";
|
|
7
7
|
import * as TabsPrimitive from "@radix-ui/react-tabs";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/Tabs.tsx"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { useArrowNavigationGroup, useFocusFinders, useFocusableGroup } from '@fluentui/react-tabster';\nimport { createContext } from '@radix-ui/react-context';\nimport { Slot } from '@radix-ui/react-slot';\nimport * as TabsPrimitive from '@radix-ui/react-tabs';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { type ComponentPropsWithoutRef, type MouseEvent, useCallback, useLayoutEffect } from 'react';\n\nimport {\n Button,\n type ButtonProps,\n IconButton,\n type IconButtonProps,\n type SlottableProps,\n type ThemedClassName,\n composableProps,\n slottable,\n useForwardedRef,\n} from '@dxos/react-ui';\nimport { useAttention } from '@dxos/react-ui-attention';\nimport { mx } from '@dxos/ui-theme';\n\n// TODO(burdon): Rewrite this; there are too many hacks/quirks.\n\ntype TabsActivePart = 'list' | 'panel';\n\nconst TABS_NAME = 'Tabs';\n\n//\n// Context\n//\n\ntype TabsContextValue = {\n activePart: TabsActivePart;\n setActivePart: (nextActivePart: TabsActivePart) => void;\n attendableId?: string;\n} & Pick<TabsPrimitive.TabsProps, 'orientation' | 'value'>;\n\nconst [TabsContextProvider, useTabsContext] = createContext<TabsContextValue>(TABS_NAME, {\n orientation: 'vertical',\n activePart: 'list',\n setActivePart: () => {},\n});\n\n//\n// Root\n//\n\ntype TabsRootCustomProps = TabsPrimitive.TabsProps &\n Partial<\n Pick<TabsContextValue, 'activePart' | 'attendableId'> & {\n onActivePartChange: (nextActivePart: TabsActivePart) => void;\n defaultActivePart: TabsActivePart;\n /** Skip master-detail focus moves (e.g. when a child form owns initial focus). */\n suppressRegionFocus?: boolean;\n }\n >;\n\ntype TabsRootProps = SlottableProps<TabsRootCustomProps>;\n\nconst TabsRoot = slottable<HTMLDivElement, TabsRootCustomProps>(\n (\n {\n children,\n activePart: propsActivePart,\n onActivePartChange,\n defaultActivePart,\n value: propsValue,\n onValueChange,\n defaultValue,\n orientation = 'vertical',\n activationMode = 'manual',\n attendableId,\n suppressRegionFocus = false,\n asChild,\n ...props\n },\n forwardedRef,\n ) => {\n const tabsRoot = useForwardedRef(forwardedRef);\n\n // TODO(thure): Without these, we get Groupper/Mover `API used before initialization`, but why?\n useArrowNavigationGroup();\n useFocusableGroup();\n const [activePart = 'list', setActivePart] = useControllableState({\n prop: propsActivePart,\n onChange: onActivePartChange,\n defaultProp: defaultActivePart,\n });\n\n const [value, setValue] = useControllableState({\n prop: propsValue,\n onChange: onValueChange,\n defaultProp: defaultValue,\n });\n\n const handleValueChange = useCallback(\n (nextValue: string) => {\n setActivePart('panel');\n setValue(nextValue);\n },\n [value],\n );\n\n const { findFirstFocusable, findNextFocusable } = useFocusFinders();\n\n useLayoutEffect(() => {\n if (suppressRegionFocus) {\n return;\n }\n\n const root = tabsRoot.current;\n if (!root) {\n return;\n }\n\n if (activePart === 'list') {\n const tablist = root.querySelector<HTMLElement>('[role=\"tablist\"]');\n findFirstFocusable(tablist)?.focus();\n return;\n }\n\n const panel = root.querySelector<HTMLElement>('[role=\"tabpanel\"][data-state=\"active\"]');\n if (!panel) {\n return;\n }\n\n // Radix marks the active panel focusable for roving tabindex; skip it so content receives focus.\n let target = findFirstFocusable(panel);\n if (target === panel) {\n target = findNextFocusable(panel, { container: panel }) ?? undefined;\n }\n target?.focus();\n }, [activePart, value, findFirstFocusable, findNextFocusable, suppressRegionFocus]);\n\n return (\n <TabsContextProvider\n orientation={orientation}\n activePart={activePart}\n setActivePart={setActivePart}\n value={value}\n attendableId={attendableId}\n >\n <TabsPrimitive.Root\n {...composableProps<HTMLDivElement>(props)}\n asChild={asChild}\n orientation={orientation}\n activationMode={activationMode}\n data-active={activePart}\n value={value}\n onValueChange={handleValueChange}\n ref={tabsRoot}\n >\n {children}\n </TabsPrimitive.Root>\n </TabsContextProvider>\n );\n },\n);\n\nTabsRoot.displayName = 'Tabs.Root';\n\n//\n// Viewport\n//\n\ntype TabsViewportProps = SlottableProps<\n Omit<ComponentPropsWithoutRef<'div'>, 'className' | 'style' | 'children' | 'role'>\n>;\n\nconst TabsViewport = slottable<\n HTMLDivElement,\n Omit<ComponentPropsWithoutRef<'div'>, 'className' | 'style' | 'children' | 'role'>\n>(({ children, asChild, ...props }, forwardedRef) => {\n const { activePart } = useTabsContext('TabsViewport');\n const Comp = asChild ? Slot : 'div';\n return (\n <Comp {...composableProps<HTMLDivElement>(props)} data-active={activePart} ref={forwardedRef}>\n {children}\n </Comp>\n );\n});\n\nTabsViewport.displayName = 'Tabs.Viewport';\n\n//\n// Tablist\n//\n\ntype TabsTablistProps = ThemedClassName<TabsPrimitive.TabsListProps>;\n\nconst TabsTablist = ({ children, classNames, ...props }: TabsTablistProps) => {\n const { orientation } = useTabsContext('TabsTablist');\n return (\n <TabsPrimitive.List\n {...props}\n data-arrow-keys={orientation === 'vertical' ? 'up down' : 'left right'}\n className={mx(\n 'max-h-full w-full',\n // TODO(burdon): Should be embeddable inside Toolbar (if horizontal).\n orientation === 'vertical' ? 'overflow-y-auto' : 'flex p-1 gap-1 items-stretch justify-start overflow-x-auto',\n classNames,\n )}\n >\n {children}\n </TabsPrimitive.List>\n );\n};\n\nTabsTablist.displayName = 'Tabs.Tablist';\n\n//\n// BackButton\n//\n\nconst TabsBackButton = ({ onClick, classNames, ...props }: ButtonProps) => {\n const { setActivePart } = useTabsContext('TabsBackButton');\n const handleClick = useCallback(\n (event: MouseEvent<HTMLButtonElement>) => {\n setActivePart('list');\n return onClick?.(event);\n },\n [setActivePart, onClick],\n );\n\n return <Button {...props} classNames={['@md:hidden text-start', classNames]} onClick={handleClick} />;\n};\n\nTabsBackButton.displayName = 'Tabs.BackButton';\n\n//\n// TabGroupHeading\n//\n\ntype TabsTabGroupHeadingProps = ThemedClassName<ComponentPropsWithoutRef<'h2'>>;\n\nconst TabsTabGroupHeading = ({ children, classNames, ...props }: TabsTabGroupHeadingProps) => (\n <h2 {...props} className={mx('my-1 px-2 text-sm text-un-accent', classNames)}>\n {children}\n </h2>\n);\n\nTabsTabGroupHeading.displayName = 'Tabs.TabGroupHeading';\n\n//\n// Tab\n//\n\ntype TabsTabProps = ButtonProps & Pick<TabsPrimitive.TabsTriggerProps, 'value'>;\n\nconst TabsTab = ({ value, classNames, children, onClick, ...props }: TabsTabProps) => {\n const { setActivePart, orientation, value: contextValue, attendableId } = useTabsContext('TabsTab');\n const { hasAttention } = useAttention(attendableId);\n\n const handleClick = useCallback(\n // NOTE: This handler is only called if the tab is *already active*.\n (event: MouseEvent<HTMLButtonElement>) => {\n setActivePart('panel');\n onClick?.(event);\n },\n [setActivePart, onClick],\n );\n\n return (\n <TabsPrimitive.Trigger value={value} asChild>\n <Button\n {...props}\n variant={\n orientation === 'horizontal' && contextValue === value ? (hasAttention ? 'primary' : 'default') : 'ghost'\n }\n classNames={[\n orientation === 'vertical' && 'block justify-start text-start w-full',\n orientation === 'vertical' && 'dx-selected',\n classNames,\n ]}\n onClick={handleClick}\n >\n {children}\n </Button>\n </TabsPrimitive.Trigger>\n );\n};\n\nTabsTab.displayName = 'Tabs.Tab';\n\n//\n// IconTab\n//\n\ntype TabsIconTabProps = IconButtonProps & Pick<TabsPrimitive.TabsTriggerProps, 'value'>;\n\nconst TabsIconTab = ({ value, classNames, onClick, ...props }: TabsIconTabProps) => {\n const { setActivePart, orientation, value: contextValue, attendableId } = useTabsContext('TabsTab');\n const { hasAttention } = useAttention(attendableId);\n\n // NOTE: This handler is only called if the tab is *already active*.\n const handleClick = useCallback(\n (event: MouseEvent<HTMLButtonElement>) => {\n setActivePart('panel');\n onClick?.(event);\n },\n [setActivePart, onClick],\n );\n\n return (\n <TabsPrimitive.Trigger value={value} asChild>\n <IconButton\n {...props}\n variant={\n orientation === 'horizontal' && contextValue === value ? (hasAttention ? 'primary' : 'default') : 'ghost'\n }\n classNames={[\n orientation === 'vertical' && 'justify-start text-start w-full',\n orientation === 'vertical' && 'dx-selected',\n classNames,\n ]}\n onClick={handleClick}\n />\n </TabsPrimitive.Trigger>\n );\n};\n\nTabsIconTab.displayName = 'Tabs.IconTab';\n\n//\n// Panel\n//\n// Do NOT wrap TabsPanel children in React.Activity.\n// Radix TabsPrimitive.Content already unmounts inactive panels (no forceMount) — inactive tab\n// content is not in the DOM and effects do not run, which is the desired behaviour.\n// React.Activity (experimental in React 19) is a reconciler-level symbol that deactivates its\n// subtree when mode='hidden'. It was redundant here and prevented initial render of active panels.\n//\n\ntype TabsPanelProps = ThemedClassName<TabsPrimitive.TabsContentProps>;\n\nconst TabsPanel = ({ classNames, children, ...props }: TabsPanelProps) => (\n <TabsPrimitive.Content {...props} className={mx('p-0! dx-focus-ring-inset-over-all', classNames)}>\n {children}\n </TabsPrimitive.Content>\n);\n\nTabsPanel.displayName = 'Tabs.Panel';\n\ntype TabsTabPrimitiveProps = TabsPrimitive.TabsTriggerProps;\n\n//\n// Tabs\n//\n\nexport const Tabs = {\n Root: TabsRoot,\n Tablist: TabsTablist,\n Tab: TabsTab,\n IconTab: TabsIconTab,\n TabPrimitive: TabsPrimitive.Trigger,\n TabGroupHeading: TabsTabGroupHeading,\n Viewport: TabsViewport,\n Panel: TabsPanel,\n BackButton: TabsBackButton,\n};\n\nexport type {\n TabsActivePart,\n TabsRootProps,\n TabsTablistProps,\n TabsTabProps,\n TabsTabPrimitiveProps,\n TabsTabGroupHeadingProps,\n TabsViewportProps,\n TabsPanelProps,\n};\n"],
|
|
5
|
-
"mappings": ";;;AAIA,SAASA,yBAAyBC,
|
|
6
|
-
"names": ["useArrowNavigationGroup", "
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { useArrowNavigationGroup, useFocusableGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport { createContext } from '@radix-ui/react-context';\nimport { Slot } from '@radix-ui/react-slot';\nimport * as TabsPrimitive from '@radix-ui/react-tabs';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { type ComponentPropsWithoutRef, type MouseEvent, useCallback, useLayoutEffect } from 'react';\n\nimport {\n Button,\n type ButtonProps,\n IconButton,\n type IconButtonProps,\n type SlottableProps,\n type ThemedClassName,\n composableProps,\n slottable,\n useForwardedRef,\n} from '@dxos/react-ui';\nimport { useAttention } from '@dxos/react-ui-attention';\nimport { mx } from '@dxos/ui-theme';\n\n// TODO(burdon): Rewrite this; there are too many hacks/quirks.\n\ntype TabsActivePart = 'list' | 'panel';\n\nconst TABS_NAME = 'Tabs';\n\n//\n// Context\n//\n\ntype TabsContextValue = {\n activePart: TabsActivePart;\n setActivePart: (nextActivePart: TabsActivePart) => void;\n attendableId?: string;\n} & Pick<TabsPrimitive.TabsProps, 'orientation' | 'value'>;\n\nconst [TabsContextProvider, useTabsContext] = createContext<TabsContextValue>(TABS_NAME, {\n orientation: 'vertical',\n activePart: 'list',\n setActivePart: () => {},\n});\n\n//\n// Root\n//\n\ntype TabsRootCustomProps = TabsPrimitive.TabsProps &\n Partial<\n Pick<TabsContextValue, 'activePart' | 'attendableId'> & {\n onActivePartChange: (nextActivePart: TabsActivePart) => void;\n defaultActivePart: TabsActivePart;\n /** Skip master-detail focus moves (e.g. when a child form owns initial focus). */\n suppressRegionFocus?: boolean;\n }\n >;\n\ntype TabsRootProps = SlottableProps<TabsRootCustomProps>;\n\nconst TabsRoot = slottable<HTMLDivElement, TabsRootCustomProps>(\n (\n {\n children,\n activePart: propsActivePart,\n onActivePartChange,\n defaultActivePart,\n value: propsValue,\n onValueChange,\n defaultValue,\n orientation = 'vertical',\n activationMode = 'manual',\n attendableId,\n suppressRegionFocus = false,\n asChild,\n ...props\n },\n forwardedRef,\n ) => {\n const tabsRoot = useForwardedRef(forwardedRef);\n\n // TODO(thure): Without these, we get Groupper/Mover `API used before initialization`, but why?\n useArrowNavigationGroup();\n useFocusableGroup();\n const [activePart = 'list', setActivePart] = useControllableState({\n prop: propsActivePart,\n onChange: onActivePartChange,\n defaultProp: defaultActivePart,\n });\n\n const [value, setValue] = useControllableState({\n prop: propsValue,\n onChange: onValueChange,\n defaultProp: defaultValue,\n });\n\n const handleValueChange = useCallback(\n (nextValue: string) => {\n setActivePart('panel');\n setValue(nextValue);\n },\n [value],\n );\n\n const { findFirstFocusable, findNextFocusable } = useFocusFinders();\n\n useLayoutEffect(() => {\n if (suppressRegionFocus) {\n return;\n }\n\n const root = tabsRoot.current;\n if (!root) {\n return;\n }\n\n if (activePart === 'list') {\n const tablist = root.querySelector<HTMLElement>('[role=\"tablist\"]');\n findFirstFocusable(tablist)?.focus();\n return;\n }\n\n const panel = root.querySelector<HTMLElement>('[role=\"tabpanel\"][data-state=\"active\"]');\n if (!panel) {\n return;\n }\n\n // Radix marks the active panel focusable for roving tabindex; skip it so content receives focus.\n let target = findFirstFocusable(panel);\n if (target === panel) {\n target = findNextFocusable(panel, { container: panel }) ?? undefined;\n }\n target?.focus();\n }, [activePart, value, findFirstFocusable, findNextFocusable, suppressRegionFocus]);\n\n return (\n <TabsContextProvider\n orientation={orientation}\n activePart={activePart}\n setActivePart={setActivePart}\n value={value}\n attendableId={attendableId}\n >\n <TabsPrimitive.Root\n {...composableProps<HTMLDivElement>(props)}\n asChild={asChild}\n orientation={orientation}\n activationMode={activationMode}\n data-active={activePart}\n value={value}\n onValueChange={handleValueChange}\n ref={tabsRoot}\n >\n {children}\n </TabsPrimitive.Root>\n </TabsContextProvider>\n );\n },\n);\n\nTabsRoot.displayName = 'Tabs.Root';\n\n//\n// Viewport\n//\n\ntype TabsViewportProps = SlottableProps<\n Omit<ComponentPropsWithoutRef<'div'>, 'className' | 'style' | 'children' | 'role'>\n>;\n\nconst TabsViewport = slottable<\n HTMLDivElement,\n Omit<ComponentPropsWithoutRef<'div'>, 'className' | 'style' | 'children' | 'role'>\n>(({ children, asChild, ...props }, forwardedRef) => {\n const { activePart } = useTabsContext('TabsViewport');\n const Comp = asChild ? Slot : 'div';\n return (\n <Comp {...composableProps<HTMLDivElement>(props)} data-active={activePart} ref={forwardedRef}>\n {children}\n </Comp>\n );\n});\n\nTabsViewport.displayName = 'Tabs.Viewport';\n\n//\n// Tablist\n//\n\ntype TabsTablistProps = ThemedClassName<TabsPrimitive.TabsListProps>;\n\nconst TabsTablist = ({ children, classNames, ...props }: TabsTablistProps) => {\n const { orientation } = useTabsContext('TabsTablist');\n return (\n <TabsPrimitive.List\n {...props}\n data-arrow-keys={orientation === 'vertical' ? 'up down' : 'left right'}\n className={mx(\n 'max-h-full w-full',\n // TODO(burdon): Should be embeddable inside Toolbar (if horizontal).\n orientation === 'vertical' ? 'overflow-y-auto' : 'flex p-1 gap-1 items-stretch justify-start overflow-x-auto',\n classNames,\n )}\n >\n {children}\n </TabsPrimitive.List>\n );\n};\n\nTabsTablist.displayName = 'Tabs.Tablist';\n\n//\n// BackButton\n//\n\nconst TabsBackButton = ({ onClick, classNames, ...props }: ButtonProps) => {\n const { setActivePart } = useTabsContext('TabsBackButton');\n const handleClick = useCallback(\n (event: MouseEvent<HTMLButtonElement>) => {\n setActivePart('list');\n return onClick?.(event);\n },\n [setActivePart, onClick],\n );\n\n return <Button {...props} classNames={['@md:hidden text-start', classNames]} onClick={handleClick} />;\n};\n\nTabsBackButton.displayName = 'Tabs.BackButton';\n\n//\n// TabGroupHeading\n//\n\ntype TabsTabGroupHeadingProps = ThemedClassName<ComponentPropsWithoutRef<'h2'>>;\n\nconst TabsTabGroupHeading = ({ children, classNames, ...props }: TabsTabGroupHeadingProps) => (\n <h2 {...props} className={mx('my-1 px-2 text-sm text-un-accent', classNames)}>\n {children}\n </h2>\n);\n\nTabsTabGroupHeading.displayName = 'Tabs.TabGroupHeading';\n\n//\n// Tab\n//\n\ntype TabsTabProps = ButtonProps & Pick<TabsPrimitive.TabsTriggerProps, 'value'>;\n\nconst TabsTab = ({ value, classNames, children, onClick, ...props }: TabsTabProps) => {\n const { setActivePart, orientation, value: contextValue, attendableId } = useTabsContext('TabsTab');\n const { hasAttention } = useAttention(attendableId);\n\n const handleClick = useCallback(\n // NOTE: This handler is only called if the tab is *already active*.\n (event: MouseEvent<HTMLButtonElement>) => {\n setActivePart('panel');\n onClick?.(event);\n },\n [setActivePart, onClick],\n );\n\n return (\n <TabsPrimitive.Trigger value={value} asChild>\n <Button\n {...props}\n variant={\n orientation === 'horizontal' && contextValue === value ? (hasAttention ? 'primary' : 'default') : 'ghost'\n }\n classNames={[\n orientation === 'vertical' && 'block justify-start text-start w-full',\n orientation === 'vertical' && 'dx-selected',\n classNames,\n ]}\n onClick={handleClick}\n >\n {children}\n </Button>\n </TabsPrimitive.Trigger>\n );\n};\n\nTabsTab.displayName = 'Tabs.Tab';\n\n//\n// IconTab\n//\n\ntype TabsIconTabProps = IconButtonProps & Pick<TabsPrimitive.TabsTriggerProps, 'value'>;\n\nconst TabsIconTab = ({ value, classNames, onClick, ...props }: TabsIconTabProps) => {\n const { setActivePart, orientation, value: contextValue, attendableId } = useTabsContext('TabsTab');\n const { hasAttention } = useAttention(attendableId);\n\n // NOTE: This handler is only called if the tab is *already active*.\n const handleClick = useCallback(\n (event: MouseEvent<HTMLButtonElement>) => {\n setActivePart('panel');\n onClick?.(event);\n },\n [setActivePart, onClick],\n );\n\n return (\n <TabsPrimitive.Trigger value={value} asChild>\n <IconButton\n {...props}\n variant={\n orientation === 'horizontal' && contextValue === value ? (hasAttention ? 'primary' : 'default') : 'ghost'\n }\n classNames={[\n orientation === 'vertical' && 'justify-start text-start w-full',\n orientation === 'vertical' && 'dx-selected',\n classNames,\n ]}\n onClick={handleClick}\n />\n </TabsPrimitive.Trigger>\n );\n};\n\nTabsIconTab.displayName = 'Tabs.IconTab';\n\n//\n// Panel\n//\n// Do NOT wrap TabsPanel children in React.Activity.\n// Radix TabsPrimitive.Content already unmounts inactive panels (no forceMount) — inactive tab\n// content is not in the DOM and effects do not run, which is the desired behaviour.\n// React.Activity (experimental in React 19) is a reconciler-level symbol that deactivates its\n// subtree when mode='hidden'. It was redundant here and prevented initial render of active panels.\n//\n\ntype TabsPanelProps = ThemedClassName<TabsPrimitive.TabsContentProps>;\n\nconst TabsPanel = ({ classNames, children, ...props }: TabsPanelProps) => (\n <TabsPrimitive.Content {...props} className={mx('p-0! dx-focus-ring-inset-over-all', classNames)}>\n {children}\n </TabsPrimitive.Content>\n);\n\nTabsPanel.displayName = 'Tabs.Panel';\n\ntype TabsTabPrimitiveProps = TabsPrimitive.TabsTriggerProps;\n\n//\n// Tabs\n//\n\nexport const Tabs = {\n Root: TabsRoot,\n Tablist: TabsTablist,\n Tab: TabsTab,\n IconTab: TabsIconTab,\n TabPrimitive: TabsPrimitive.Trigger,\n TabGroupHeading: TabsTabGroupHeading,\n Viewport: TabsViewport,\n Panel: TabsPanel,\n BackButton: TabsBackButton,\n};\n\nexport type {\n TabsActivePart,\n TabsPanelProps,\n TabsRootProps,\n TabsTabGroupHeadingProps,\n TabsTablistProps,\n TabsTabPrimitiveProps,\n TabsTabProps,\n TabsViewportProps,\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["useArrowNavigationGroup", "useFocusableGroup", "useFocusFinders", "createContext", "Slot", "TabsPrimitive", "useControllableState", "React", "useCallback", "useLayoutEffect", "Button", "IconButton", "composableProps", "slottable", "useForwardedRef", "useAttention", "mx", "TABS_NAME", "TabsContextProvider", "useTabsContext", "orientation", "activePart", "setActivePart", "TabsRoot", "children", "propsActivePart", "onActivePartChange", "defaultActivePart", "value", "propsValue", "onValueChange", "defaultValue", "activationMode", "attendableId", "suppressRegionFocus", "asChild", "props", "forwardedRef", "tabsRoot", "prop", "onChange", "defaultProp", "setValue", "handleValueChange", "nextValue", "findFirstFocusable", "findNextFocusable", "root", "current", "tablist", "querySelector", "focus", "panel", "target", "container", "undefined", "Root", "data-active", "ref", "displayName", "TabsViewport", "Comp", "TabsTablist", "classNames", "List", "data-arrow-keys", "className", "TabsBackButton", "onClick", "handleClick", "event", "TabsTabGroupHeading", "h2", "TabsTab", "contextValue", "hasAttention", "Trigger", "variant", "TabsIconTab", "TabsPanel", "Content", "Tabs", "Tablist", "Tab", "IconTab", "TabPrimitive", "TabGroupHeading", "Viewport", "Panel", "BackButton"]
|
|
7
7
|
}
|
package/dist/types/src/Tabs.d.ts
CHANGED
|
@@ -87,5 +87,5 @@ export declare const Tabs: {
|
|
|
87
87
|
displayName: string;
|
|
88
88
|
};
|
|
89
89
|
};
|
|
90
|
-
export type { TabsActivePart, TabsRootProps,
|
|
90
|
+
export type { TabsActivePart, TabsPanelProps, TabsRootProps, TabsTabGroupHeadingProps, TabsTablistProps, TabsTabPrimitiveProps, TabsTabProps, TabsViewportProps, };
|
|
91
91
|
//# sourceMappingURL=Tabs.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/Tabs.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,aAAa,MAAM,sBAAsB,CAAC;AAEtD,OAAO,KAAK,EAAE,EAAE,KAAK,wBAAwB,EAAiD,MAAM,OAAO,CAAC;AAE5G,OAAO,EAEL,KAAK,WAAW,EAEhB,KAAK,eAAe,EACpB,KAAK,cAAc,EACnB,KAAK,eAAe,EAIrB,MAAM,gBAAgB,CAAC;AAMxB,KAAK,cAAc,GAAG,MAAM,GAAG,OAAO,CAAC;AAQvC,KAAK,gBAAgB,GAAG;IACtB,UAAU,EAAE,cAAc,CAAC;IAC3B,aAAa,EAAE,CAAC,cAAc,EAAE,cAAc,KAAK,IAAI,CAAC;IACxD,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,GAAG,IAAI,CAAC,aAAa,CAAC,SAAS,EAAE,aAAa,GAAG,OAAO,CAAC,CAAC;AAY3D,KAAK,mBAAmB,GAAG,aAAa,CAAC,SAAS,GAChD,OAAO,CACL,IAAI,CAAC,gBAAgB,EAAE,YAAY,GAAG,cAAc,CAAC,GAAG;IACtD,kBAAkB,EAAE,CAAC,cAAc,EAAE,cAAc,KAAK,IAAI,CAAC;IAC7D,iBAAiB,EAAE,cAAc,CAAC;IAClC,kFAAkF;IAClF,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B,CACF,CAAC;AAEJ,KAAK,aAAa,GAAG,cAAc,CAAC,mBAAmB,CAAC,CAAC;AA4GzD,KAAK,iBAAiB,GAAG,cAAc,CACrC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,WAAW,GAAG,OAAO,GAAG,UAAU,GAAG,MAAM,CAAC,CACnF,CAAC;AAqBF,KAAK,gBAAgB,GAAG,eAAe,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;6BAEhD,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB;;;;gCAwBjD,EAAE,OAAO,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW;;;;AAmBtE,KAAK,wBAAwB,GAAG,eAAe,CAAC,wBAAwB,CAAC,IAAI,CAAC,CAAC,CAAC;qCAEnD,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,EAAE,wBAAwB;;;;AAYzF,KAAK,YAAY,GAAG,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,gBAAgB,EAAE,OAAO,CAAC,CAAC;yBAE/D,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY;;;;AAuCjF,KAAK,gBAAgB,GAAG,eAAe,GAAG,IAAI,CAAC,aAAa,CAAC,gBAAgB,EAAE,OAAO,CAAC,CAAC;6BAEnE,EAAE,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB;;;;AA2C/E,KAAK,cAAc,GAAG,eAAe,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;2BAEnD,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc;;;;AAQrE,KAAK,qBAAqB,GAAG,aAAa,CAAC,gBAAgB,CAAC;AAM5D,eAAO,MAAM,IAAI;IACf,IAAI;4BA5SoB,CAAC,cAAc,EAAE,cAAc,KAAK,IAAI;2BACzC,cAAc;QACjC,kFAAkF;8BAC5D,OAAO;;;;;;IA0SjC,OAAO;6CAjKgD,gBAAgB;;;IAkKvE,GAAG;6DAvGgE,YAAY;;;IAwG/E,OAAO;mDA/DsD,gBAAgB;;;IAgE7E,YAAY;IACZ,eAAe;6CAxHgD,wBAAwB;;;IAyHvF,QAAQ;;;;;IACR,KAAK;6CAtBgD,cAAc;;;IAuBnE,UAAU;4CAhJ+C,WAAW;;;CAiJrE,CAAC;AAEF,YAAY,EACV,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,
|
|
1
|
+
{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/Tabs.tsx"],"names":[],"mappings":"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"}
|