@dxos/react-ui-tabs 0.7.5-main.9d2a38b → 0.7.5-main.ff8607b
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 +11 -9
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node/index.cjs +10 -8
- package/dist/lib/node/index.cjs.map +3 -3
- package/dist/lib/node/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +11 -9
- package/dist/lib/node-esm/index.mjs.map +3 -3
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/types/src/Tabs.d.ts +10 -4
- package/dist/types/src/Tabs.d.ts.map +1 -1
- package/dist/types/src/Tabs.stories.d.ts +1 -1
- package/package.json +16 -16
- package/src/Tabs.stories.tsx +1 -1
- package/src/Tabs.tsx +21 -14
|
@@ -6,7 +6,7 @@ import { useControllableState } from "@radix-ui/react-use-controllable-state";
|
|
|
6
6
|
import React, { useCallback, useLayoutEffect, useRef } from "react";
|
|
7
7
|
import { Button } from "@dxos/react-ui";
|
|
8
8
|
import { useAttention } from "@dxos/react-ui-attention";
|
|
9
|
-
import {
|
|
9
|
+
import { ghostHover, ghostSelectedContainerMd, mx } from "@dxos/react-ui-theme";
|
|
10
10
|
var TABS_NAME = "Tabs";
|
|
11
11
|
var [TabsContextProvider, useTabsContext] = createContext(TABS_NAME, {
|
|
12
12
|
activePart: "list",
|
|
@@ -14,7 +14,7 @@ var [TabsContextProvider, useTabsContext] = createContext(TABS_NAME, {
|
|
|
14
14
|
},
|
|
15
15
|
orientation: "vertical"
|
|
16
16
|
});
|
|
17
|
-
var TabsRoot = ({ children, classNames, activePart: propsActivePart, onActivePartChange, defaultActivePart, value: propsValue, onValueChange, defaultValue, orientation = "vertical", activationMode = "manual", attendableId, ...props }) => {
|
|
17
|
+
var TabsRoot = ({ children, classNames, activePart: propsActivePart, onActivePartChange, defaultActivePart, value: propsValue, onValueChange, defaultValue, orientation = "vertical", activationMode = "manual", verticalVariant = "stateful", attendableId, ...props }) => {
|
|
18
18
|
const [activePart = "list", setActivePart] = useControllableState({
|
|
19
19
|
prop: propsActivePart,
|
|
20
20
|
onChange: onActivePartChange,
|
|
@@ -43,7 +43,8 @@ var TabsRoot = ({ children, classNames, activePart: propsActivePart, onActivePar
|
|
|
43
43
|
activePart,
|
|
44
44
|
setActivePart,
|
|
45
45
|
value,
|
|
46
|
-
attendableId
|
|
46
|
+
attendableId,
|
|
47
|
+
verticalVariant
|
|
47
48
|
}, /* @__PURE__ */ React.createElement(TabsPrimitive.Root, {
|
|
48
49
|
activationMode,
|
|
49
50
|
"data-active": activePart,
|
|
@@ -51,27 +52,27 @@ var TabsRoot = ({ children, classNames, activePart: propsActivePart, onActivePar
|
|
|
51
52
|
...props,
|
|
52
53
|
value,
|
|
53
54
|
onValueChange: handleValueChange,
|
|
54
|
-
className: mx("overflow-hidden", orientation === "vertical" && "[&[data-active=list]_[role=tabpanel]]:invisible @md:[&[data-active=list]_[role=tabpanel]]:visible", classNames),
|
|
55
|
+
className: mx("overflow-hidden", orientation === "vertical" && verticalVariant === "stateful" && "[&[data-active=list]_[role=tabpanel]]:invisible @md:[&[data-active=list]_[role=tabpanel]]:visible", classNames),
|
|
55
56
|
ref: tabsRoot
|
|
56
57
|
}, children));
|
|
57
58
|
};
|
|
58
59
|
var TabsViewport = ({ classNames, children, ...props }) => {
|
|
59
|
-
const { orientation, activePart } = useTabsContext("TabsViewport");
|
|
60
|
+
const { orientation, activePart, verticalVariant } = useTabsContext("TabsViewport");
|
|
60
61
|
return /* @__PURE__ */ React.createElement("div", {
|
|
61
62
|
role: "none",
|
|
62
63
|
...props,
|
|
63
64
|
"data-active": activePart,
|
|
64
|
-
className: mx(orientation === "vertical" && [
|
|
65
|
+
className: mx(orientation === "vertical" && verticalVariant === "stateful" && [
|
|
65
66
|
"grid is-[200%] grid-cols-2 data-[active=panel]:mis-[-100%]",
|
|
66
67
|
"@md:is-auto @md:data-[active=panel]:mis-0 @md:grid-cols-[minmax(min-content,1fr)_3fr] @md:gap-1"
|
|
67
68
|
], classNames)
|
|
68
69
|
}, children);
|
|
69
70
|
};
|
|
70
71
|
var TabsTablist = ({ children, classNames, ...props }) => {
|
|
71
|
-
const { orientation } = useTabsContext("TabsTablist");
|
|
72
|
+
const { orientation, verticalVariant } = useTabsContext("TabsTablist");
|
|
72
73
|
return /* @__PURE__ */ React.createElement(TabsPrimitive.List, {
|
|
73
74
|
...props,
|
|
74
|
-
className: mx("
|
|
75
|
+
className: mx("max-bs-full is-full", orientation === "vertical" ? "overflow-y-auto" : "flex items-stretch justify-start gap-2 overflow-x-auto p-2", orientation === "vertical" && verticalVariant === "stateful" && "place-self-start p-1", classNames)
|
|
75
76
|
}, children);
|
|
76
77
|
};
|
|
77
78
|
var TabsBackButton = ({ onClick, classNames, ...props }) => {
|
|
@@ -132,13 +133,14 @@ var TabsTab = ({ value, classNames, children, onClick, ...props }) => {
|
|
|
132
133
|
var TabsTabpanel = ({ classNames, children, ...props }) => {
|
|
133
134
|
return /* @__PURE__ */ React.createElement(TabsPrimitive.Content, {
|
|
134
135
|
...props,
|
|
135
|
-
className: mx("
|
|
136
|
+
className: mx("dx-focus-ring-inset", classNames)
|
|
136
137
|
}, children);
|
|
137
138
|
};
|
|
138
139
|
var Tabs = {
|
|
139
140
|
Root: TabsRoot,
|
|
140
141
|
Tablist: TabsTablist,
|
|
141
142
|
Tab: TabsTab,
|
|
143
|
+
TabPrimitive: TabsPrimitive.Trigger,
|
|
142
144
|
TabGroupHeading: TabsTabGroupHeading,
|
|
143
145
|
Tabpanel: TabsTabpanel,
|
|
144
146
|
BackButton: TabsBackButton,
|
|
@@ -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 { useFocusFinders } from '@fluentui/react-tabster';\nimport { createContext } from '@radix-ui/react-context';\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, useRef } from 'react';\n\nimport { Button, type ButtonProps, type ThemedClassName } from '@dxos/react-ui';\nimport { useAttention } from '@dxos/react-ui-attention';\nimport {
|
|
5
|
-
"mappings": ";AAIA,SAASA,uBAAuB;AAChC,SAASC,qBAAqB;AAC9B,YAAYC,mBAAmB;AAC/B,SAASC,4BAA4B;AACrC,OAAOC,SAAyDC,aAAaC,iBAAiBC,cAAc;AAE5G,SAASC,cAAsD;AAC/D,SAASC,oBAAoB;AAC7B,SAASC,
|
|
6
|
-
"names": ["useFocusFinders", "createContext", "TabsPrimitive", "useControllableState", "React", "useCallback", "useLayoutEffect", "useRef", "Button", "useAttention", "
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { createContext } from '@radix-ui/react-context';\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, useRef } from 'react';\n\nimport { Button, type ButtonProps, type ThemedClassName } from '@dxos/react-ui';\nimport { useAttention } from '@dxos/react-ui-attention';\nimport { ghostHover, ghostSelectedContainerMd, mx } from '@dxos/react-ui-theme';\n\ntype TabsActivePart = 'list' | 'panel';\n\nconst TABS_NAME = 'Tabs';\n\ntype TabsContextValue = {\n activePart: TabsActivePart;\n setActivePart: (nextActivePart: TabsActivePart) => void;\n attendableId?: string;\n verticalVariant?: 'stateful' | 'stateless';\n} & Pick<TabsPrimitive.TabsProps, 'orientation' | 'value'>;\n\nconst [TabsContextProvider, useTabsContext] = createContext<TabsContextValue>(TABS_NAME, {\n activePart: 'list',\n setActivePart: () => {},\n orientation: 'vertical',\n});\n\ntype TabsRootProps = ThemedClassName<TabsPrimitive.TabsProps> &\n Partial<Pick<TabsContextValue, 'activePart' | 'verticalVariant' | 'attendableId'>> &\n Partial<{\n onActivePartChange: (nextActivePart: TabsActivePart) => void;\n defaultActivePart: TabsActivePart;\n }>;\n\nconst TabsRoot = ({\n children,\n classNames,\n activePart: propsActivePart,\n onActivePartChange,\n defaultActivePart,\n value: propsValue,\n onValueChange,\n defaultValue,\n orientation = 'vertical',\n activationMode = 'manual',\n verticalVariant = 'stateful',\n attendableId,\n ...props\n}: TabsRootProps) => {\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 } = useFocusFinders();\n\n const tabsRoot = useRef<HTMLDivElement | null>(null);\n\n useLayoutEffect(() => {\n tabsRoot.current && findFirstFocusable(tabsRoot.current)?.focus();\n }, [activePart]);\n\n return (\n <TabsContextProvider\n orientation={orientation}\n activePart={activePart}\n setActivePart={setActivePart}\n value={value}\n attendableId={attendableId}\n verticalVariant={verticalVariant}\n >\n <TabsPrimitive.Root\n activationMode={activationMode}\n data-active={activePart}\n orientation={orientation}\n {...props}\n value={value}\n onValueChange={handleValueChange}\n className={mx(\n 'overflow-hidden',\n orientation === 'vertical' &&\n verticalVariant === 'stateful' &&\n '[&[data-active=list]_[role=tabpanel]]:invisible @md:[&[data-active=list]_[role=tabpanel]]:visible',\n classNames,\n )}\n ref={tabsRoot}\n >\n {children}\n </TabsPrimitive.Root>\n </TabsContextProvider>\n );\n};\n\ntype TabsViewportProps = ThemedClassName<ComponentPropsWithoutRef<'div'>>;\n\nconst TabsViewport = ({ classNames, children, ...props }: TabsViewportProps) => {\n const { orientation, activePart, verticalVariant } = useTabsContext('TabsViewport');\n return (\n <div\n role='none'\n {...props}\n data-active={activePart}\n className={mx(\n orientation === 'vertical' &&\n verticalVariant === 'stateful' && [\n 'grid is-[200%] grid-cols-2 data-[active=panel]:mis-[-100%]',\n '@md:is-auto @md:data-[active=panel]:mis-0 @md:grid-cols-[minmax(min-content,1fr)_3fr] @md:gap-1',\n ],\n classNames,\n )}\n >\n {children}\n </div>\n );\n};\n\ntype TabsTablistProps = ThemedClassName<TabsPrimitive.TabsListProps>;\n\nconst TabsTablist = ({ children, classNames, ...props }: TabsTablistProps) => {\n const { orientation, verticalVariant } = useTabsContext('TabsTablist');\n return (\n <TabsPrimitive.List\n {...props}\n className={mx(\n 'max-bs-full is-full',\n orientation === 'vertical' ? 'overflow-y-auto' : 'flex items-stretch justify-start gap-2 overflow-x-auto p-2',\n orientation === 'vertical' && verticalVariant === 'stateful' && 'place-self-start p-1',\n classNames,\n )}\n >\n {children}\n </TabsPrimitive.List>\n );\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 [onClick, setActivePart],\n );\n\n return <Button {...props} classNames={['is-full text-start @md:hidden mbe-2', classNames]} onClick={handleClick} />;\n};\n\ntype TabsTabGroupHeadingProps = ThemedClassName<ComponentPropsWithoutRef<'h2'>>;\n\nconst TabsTabGroupHeading = ({ children, classNames, ...props }: ThemedClassName<TabsTabGroupHeadingProps>) => {\n return (\n <h2 {...props} className={mx('mlb-1 pli-2 text-sm text-unAccent', classNames)}>\n {children}\n </h2>\n );\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 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 density='fine'\n variant={\n orientation === 'horizontal' && contextValue === value ? (hasAttention ? 'primary' : 'default') : 'ghost'\n }\n {...props}\n onClick={handleClick}\n classNames={[\n 'pli-2 rounded-sm',\n orientation === 'vertical' && 'block justify-start text-start is-full',\n orientation === 'vertical' && ghostSelectedContainerMd,\n ghostHover,\n classNames,\n ]}\n >\n {children}\n </Button>\n </TabsPrimitive.Trigger>\n );\n};\n\ntype TabsTabpanelProps = ThemedClassName<TabsPrimitive.TabsContentProps>;\n\nconst TabsTabpanel = ({ classNames, children, ...props }: TabsTabpanelProps) => {\n return (\n <TabsPrimitive.Content {...props} className={mx('dx-focus-ring-inset', classNames)}>\n {children}\n </TabsPrimitive.Content>\n );\n};\n\ntype TabsTabPrimitiveProps = TabsPrimitive.TabsTriggerProps;\n\nexport const Tabs = {\n Root: TabsRoot,\n Tablist: TabsTablist,\n Tab: TabsTab,\n TabPrimitive: TabsPrimitive.Trigger,\n TabGroupHeading: TabsTabGroupHeading,\n Tabpanel: TabsTabpanel,\n BackButton: TabsBackButton,\n Viewport: TabsViewport,\n};\n\nexport type {\n TabsActivePart,\n TabsRootProps,\n TabsTablistProps,\n TabsTabProps,\n TabsTabPrimitiveProps,\n TabsTabGroupHeadingProps,\n TabsTabpanelProps,\n TabsViewportProps,\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["useFocusFinders", "createContext", "TabsPrimitive", "useControllableState", "React", "useCallback", "useLayoutEffect", "useRef", "Button", "useAttention", "ghostHover", "ghostSelectedContainerMd", "mx", "TABS_NAME", "TabsContextProvider", "useTabsContext", "createContext", "activePart", "setActivePart", "orientation", "TabsRoot", "children", "classNames", "propsActivePart", "onActivePartChange", "defaultActivePart", "value", "propsValue", "onValueChange", "defaultValue", "activationMode", "verticalVariant", "attendableId", "props", "useControllableState", "prop", "onChange", "defaultProp", "setValue", "handleValueChange", "useCallback", "nextValue", "findFirstFocusable", "useFocusFinders", "tabsRoot", "useRef", "useLayoutEffect", "current", "focus", "Root", "data-active", "className", "mx", "ref", "TabsViewport", "div", "role", "TabsTablist", "List", "TabsBackButton", "onClick", "handleClick", "event", "Button", "TabsTabGroupHeading", "h2", "TabsTab", "contextValue", "hasAttention", "useAttention", "Trigger", "asChild", "density", "variant", "ghostSelectedContainerMd", "ghostHover", "TabsTabpanel", "Content", "Tabs", "Tablist", "Tab", "TabPrimitive", "TabGroupHeading", "Tabpanel", "BackButton", "Viewport"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/ui/react-ui-tabs/src/Tabs.tsx":{"bytes":
|
|
1
|
+
{"inputs":{"packages/ui/react-ui-tabs/src/Tabs.tsx":{"bytes":22008,"imports":[{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"@radix-ui/react-tabs","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-attention","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-tabs/src/index.ts":{"bytes":489,"imports":[{"path":"packages/ui/react-ui-tabs/src/Tabs.tsx","kind":"import-statement","original":"./Tabs"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-tabs/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":11891},"packages/ui/react-ui-tabs/dist/lib/browser/index.mjs":{"imports":[{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"@radix-ui/react-tabs","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-attention","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"exports":["Tabs"],"entryPoint":"packages/ui/react-ui-tabs/src/index.ts","inputs":{"packages/ui/react-ui-tabs/src/Tabs.tsx":{"bytesInOutput":5434},"packages/ui/react-ui-tabs/src/index.ts":{"bytesInOutput":0}},"bytes":5530}}}
|
package/dist/lib/node/index.cjs
CHANGED
|
@@ -46,7 +46,7 @@ var [TabsContextProvider, useTabsContext] = (0, import_react_context.createConte
|
|
|
46
46
|
},
|
|
47
47
|
orientation: "vertical"
|
|
48
48
|
});
|
|
49
|
-
var TabsRoot = ({ children, classNames, activePart: propsActivePart, onActivePartChange, defaultActivePart, value: propsValue, onValueChange, defaultValue, orientation = "vertical", activationMode = "manual", attendableId, ...props }) => {
|
|
49
|
+
var TabsRoot = ({ children, classNames, activePart: propsActivePart, onActivePartChange, defaultActivePart, value: propsValue, onValueChange, defaultValue, orientation = "vertical", activationMode = "manual", verticalVariant = "stateful", attendableId, ...props }) => {
|
|
50
50
|
const [activePart = "list", setActivePart] = (0, import_react_use_controllable_state.useControllableState)({
|
|
51
51
|
prop: propsActivePart,
|
|
52
52
|
onChange: onActivePartChange,
|
|
@@ -75,7 +75,8 @@ var TabsRoot = ({ children, classNames, activePart: propsActivePart, onActivePar
|
|
|
75
75
|
activePart,
|
|
76
76
|
setActivePart,
|
|
77
77
|
value,
|
|
78
|
-
attendableId
|
|
78
|
+
attendableId,
|
|
79
|
+
verticalVariant
|
|
79
80
|
}, /* @__PURE__ */ import_react.default.createElement(TabsPrimitive.Root, {
|
|
80
81
|
activationMode,
|
|
81
82
|
"data-active": activePart,
|
|
@@ -83,27 +84,27 @@ var TabsRoot = ({ children, classNames, activePart: propsActivePart, onActivePar
|
|
|
83
84
|
...props,
|
|
84
85
|
value,
|
|
85
86
|
onValueChange: handleValueChange,
|
|
86
|
-
className: (0, import_react_ui_theme.mx)("overflow-hidden", orientation === "vertical" && "[&[data-active=list]_[role=tabpanel]]:invisible @md:[&[data-active=list]_[role=tabpanel]]:visible", classNames),
|
|
87
|
+
className: (0, import_react_ui_theme.mx)("overflow-hidden", orientation === "vertical" && verticalVariant === "stateful" && "[&[data-active=list]_[role=tabpanel]]:invisible @md:[&[data-active=list]_[role=tabpanel]]:visible", classNames),
|
|
87
88
|
ref: tabsRoot
|
|
88
89
|
}, children));
|
|
89
90
|
};
|
|
90
91
|
var TabsViewport = ({ classNames, children, ...props }) => {
|
|
91
|
-
const { orientation, activePart } = useTabsContext("TabsViewport");
|
|
92
|
+
const { orientation, activePart, verticalVariant } = useTabsContext("TabsViewport");
|
|
92
93
|
return /* @__PURE__ */ import_react.default.createElement("div", {
|
|
93
94
|
role: "none",
|
|
94
95
|
...props,
|
|
95
96
|
"data-active": activePart,
|
|
96
|
-
className: (0, import_react_ui_theme.mx)(orientation === "vertical" && [
|
|
97
|
+
className: (0, import_react_ui_theme.mx)(orientation === "vertical" && verticalVariant === "stateful" && [
|
|
97
98
|
"grid is-[200%] grid-cols-2 data-[active=panel]:mis-[-100%]",
|
|
98
99
|
"@md:is-auto @md:data-[active=panel]:mis-0 @md:grid-cols-[minmax(min-content,1fr)_3fr] @md:gap-1"
|
|
99
100
|
], classNames)
|
|
100
101
|
}, children);
|
|
101
102
|
};
|
|
102
103
|
var TabsTablist = ({ children, classNames, ...props }) => {
|
|
103
|
-
const { orientation } = useTabsContext("TabsTablist");
|
|
104
|
+
const { orientation, verticalVariant } = useTabsContext("TabsTablist");
|
|
104
105
|
return /* @__PURE__ */ import_react.default.createElement(TabsPrimitive.List, {
|
|
105
106
|
...props,
|
|
106
|
-
className: (0, import_react_ui_theme.mx)("
|
|
107
|
+
className: (0, import_react_ui_theme.mx)("max-bs-full is-full", orientation === "vertical" ? "overflow-y-auto" : "flex items-stretch justify-start gap-2 overflow-x-auto p-2", orientation === "vertical" && verticalVariant === "stateful" && "place-self-start p-1", classNames)
|
|
107
108
|
}, children);
|
|
108
109
|
};
|
|
109
110
|
var TabsBackButton = ({ onClick, classNames, ...props }) => {
|
|
@@ -164,13 +165,14 @@ var TabsTab = ({ value, classNames, children, onClick, ...props }) => {
|
|
|
164
165
|
var TabsTabpanel = ({ classNames, children, ...props }) => {
|
|
165
166
|
return /* @__PURE__ */ import_react.default.createElement(TabsPrimitive.Content, {
|
|
166
167
|
...props,
|
|
167
|
-
className: (0, import_react_ui_theme.mx)("
|
|
168
|
+
className: (0, import_react_ui_theme.mx)("dx-focus-ring-inset", classNames)
|
|
168
169
|
}, children);
|
|
169
170
|
};
|
|
170
171
|
var Tabs = {
|
|
171
172
|
Root: TabsRoot,
|
|
172
173
|
Tablist: TabsTablist,
|
|
173
174
|
Tab: TabsTab,
|
|
175
|
+
TabPrimitive: TabsPrimitive.Trigger,
|
|
174
176
|
TabGroupHeading: TabsTabGroupHeading,
|
|
175
177
|
Tabpanel: TabsTabpanel,
|
|
176
178
|
BackButton: TabsBackButton,
|
|
@@ -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 { useFocusFinders } from '@fluentui/react-tabster';\nimport { createContext } from '@radix-ui/react-context';\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, useRef } from 'react';\n\nimport { Button, type ButtonProps, type ThemedClassName } from '@dxos/react-ui';\nimport { useAttention } from '@dxos/react-ui-attention';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,2BAAgC;AAChC,2BAA8B;AAC9B,oBAA+B;AAC/B,0CAAqC;AACrC,mBAA4G;AAE5G,sBAA+D;AAC/D,gCAA6B;AAC7B,
|
|
6
|
-
"names": ["TABS_NAME", "TabsContextProvider", "useTabsContext", "createContext", "activePart", "setActivePart", "orientation", "TabsRoot", "children", "classNames", "propsActivePart", "onActivePartChange", "defaultActivePart", "value", "propsValue", "onValueChange", "defaultValue", "activationMode", "attendableId", "props", "useControllableState", "prop", "onChange", "defaultProp", "setValue", "handleValueChange", "useCallback", "nextValue", "findFirstFocusable", "useFocusFinders", "tabsRoot", "useRef", "useLayoutEffect", "current", "focus", "React", "Root", "data-active", "className", "mx", "ref", "TabsViewport", "div", "role", "TabsTablist", "List", "TabsBackButton", "onClick", "handleClick", "event", "Button", "TabsTabGroupHeading", "h2", "TabsTab", "contextValue", "hasAttention", "useAttention", "Trigger", "asChild", "density", "variant", "ghostSelectedContainerMd", "ghostHover", "TabsTabpanel", "Content", "
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { createContext } from '@radix-ui/react-context';\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, useRef } from 'react';\n\nimport { Button, type ButtonProps, type ThemedClassName } from '@dxos/react-ui';\nimport { useAttention } from '@dxos/react-ui-attention';\nimport { ghostHover, ghostSelectedContainerMd, mx } from '@dxos/react-ui-theme';\n\ntype TabsActivePart = 'list' | 'panel';\n\nconst TABS_NAME = 'Tabs';\n\ntype TabsContextValue = {\n activePart: TabsActivePart;\n setActivePart: (nextActivePart: TabsActivePart) => void;\n attendableId?: string;\n verticalVariant?: 'stateful' | 'stateless';\n} & Pick<TabsPrimitive.TabsProps, 'orientation' | 'value'>;\n\nconst [TabsContextProvider, useTabsContext] = createContext<TabsContextValue>(TABS_NAME, {\n activePart: 'list',\n setActivePart: () => {},\n orientation: 'vertical',\n});\n\ntype TabsRootProps = ThemedClassName<TabsPrimitive.TabsProps> &\n Partial<Pick<TabsContextValue, 'activePart' | 'verticalVariant' | 'attendableId'>> &\n Partial<{\n onActivePartChange: (nextActivePart: TabsActivePart) => void;\n defaultActivePart: TabsActivePart;\n }>;\n\nconst TabsRoot = ({\n children,\n classNames,\n activePart: propsActivePart,\n onActivePartChange,\n defaultActivePart,\n value: propsValue,\n onValueChange,\n defaultValue,\n orientation = 'vertical',\n activationMode = 'manual',\n verticalVariant = 'stateful',\n attendableId,\n ...props\n}: TabsRootProps) => {\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 } = useFocusFinders();\n\n const tabsRoot = useRef<HTMLDivElement | null>(null);\n\n useLayoutEffect(() => {\n tabsRoot.current && findFirstFocusable(tabsRoot.current)?.focus();\n }, [activePart]);\n\n return (\n <TabsContextProvider\n orientation={orientation}\n activePart={activePart}\n setActivePart={setActivePart}\n value={value}\n attendableId={attendableId}\n verticalVariant={verticalVariant}\n >\n <TabsPrimitive.Root\n activationMode={activationMode}\n data-active={activePart}\n orientation={orientation}\n {...props}\n value={value}\n onValueChange={handleValueChange}\n className={mx(\n 'overflow-hidden',\n orientation === 'vertical' &&\n verticalVariant === 'stateful' &&\n '[&[data-active=list]_[role=tabpanel]]:invisible @md:[&[data-active=list]_[role=tabpanel]]:visible',\n classNames,\n )}\n ref={tabsRoot}\n >\n {children}\n </TabsPrimitive.Root>\n </TabsContextProvider>\n );\n};\n\ntype TabsViewportProps = ThemedClassName<ComponentPropsWithoutRef<'div'>>;\n\nconst TabsViewport = ({ classNames, children, ...props }: TabsViewportProps) => {\n const { orientation, activePart, verticalVariant } = useTabsContext('TabsViewport');\n return (\n <div\n role='none'\n {...props}\n data-active={activePart}\n className={mx(\n orientation === 'vertical' &&\n verticalVariant === 'stateful' && [\n 'grid is-[200%] grid-cols-2 data-[active=panel]:mis-[-100%]',\n '@md:is-auto @md:data-[active=panel]:mis-0 @md:grid-cols-[minmax(min-content,1fr)_3fr] @md:gap-1',\n ],\n classNames,\n )}\n >\n {children}\n </div>\n );\n};\n\ntype TabsTablistProps = ThemedClassName<TabsPrimitive.TabsListProps>;\n\nconst TabsTablist = ({ children, classNames, ...props }: TabsTablistProps) => {\n const { orientation, verticalVariant } = useTabsContext('TabsTablist');\n return (\n <TabsPrimitive.List\n {...props}\n className={mx(\n 'max-bs-full is-full',\n orientation === 'vertical' ? 'overflow-y-auto' : 'flex items-stretch justify-start gap-2 overflow-x-auto p-2',\n orientation === 'vertical' && verticalVariant === 'stateful' && 'place-self-start p-1',\n classNames,\n )}\n >\n {children}\n </TabsPrimitive.List>\n );\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 [onClick, setActivePart],\n );\n\n return <Button {...props} classNames={['is-full text-start @md:hidden mbe-2', classNames]} onClick={handleClick} />;\n};\n\ntype TabsTabGroupHeadingProps = ThemedClassName<ComponentPropsWithoutRef<'h2'>>;\n\nconst TabsTabGroupHeading = ({ children, classNames, ...props }: ThemedClassName<TabsTabGroupHeadingProps>) => {\n return (\n <h2 {...props} className={mx('mlb-1 pli-2 text-sm text-unAccent', classNames)}>\n {children}\n </h2>\n );\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 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 density='fine'\n variant={\n orientation === 'horizontal' && contextValue === value ? (hasAttention ? 'primary' : 'default') : 'ghost'\n }\n {...props}\n onClick={handleClick}\n classNames={[\n 'pli-2 rounded-sm',\n orientation === 'vertical' && 'block justify-start text-start is-full',\n orientation === 'vertical' && ghostSelectedContainerMd,\n ghostHover,\n classNames,\n ]}\n >\n {children}\n </Button>\n </TabsPrimitive.Trigger>\n );\n};\n\ntype TabsTabpanelProps = ThemedClassName<TabsPrimitive.TabsContentProps>;\n\nconst TabsTabpanel = ({ classNames, children, ...props }: TabsTabpanelProps) => {\n return (\n <TabsPrimitive.Content {...props} className={mx('dx-focus-ring-inset', classNames)}>\n {children}\n </TabsPrimitive.Content>\n );\n};\n\ntype TabsTabPrimitiveProps = TabsPrimitive.TabsTriggerProps;\n\nexport const Tabs = {\n Root: TabsRoot,\n Tablist: TabsTablist,\n Tab: TabsTab,\n TabPrimitive: TabsPrimitive.Trigger,\n TabGroupHeading: TabsTabGroupHeading,\n Tabpanel: TabsTabpanel,\n BackButton: TabsBackButton,\n Viewport: TabsViewport,\n};\n\nexport type {\n TabsActivePart,\n TabsRootProps,\n TabsTablistProps,\n TabsTabProps,\n TabsTabPrimitiveProps,\n TabsTabGroupHeadingProps,\n TabsTabpanelProps,\n TabsViewportProps,\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["TABS_NAME", "TabsContextProvider", "useTabsContext", "createContext", "activePart", "setActivePart", "orientation", "TabsRoot", "children", "classNames", "propsActivePart", "onActivePartChange", "defaultActivePart", "value", "propsValue", "onValueChange", "defaultValue", "activationMode", "verticalVariant", "attendableId", "props", "useControllableState", "prop", "onChange", "defaultProp", "setValue", "handleValueChange", "useCallback", "nextValue", "findFirstFocusable", "useFocusFinders", "tabsRoot", "useRef", "useLayoutEffect", "current", "focus", "React", "Root", "data-active", "className", "mx", "ref", "TabsViewport", "div", "role", "TabsTablist", "List", "TabsBackButton", "onClick", "handleClick", "event", "Button", "TabsTabGroupHeading", "h2", "TabsTab", "contextValue", "hasAttention", "useAttention", "Trigger", "asChild", "density", "variant", "ghostSelectedContainerMd", "ghostHover", "TabsTabpanel", "Content", "Tabs", "Tablist", "Tab", "TabPrimitive", "TabGroupHeading", "Tabpanel", "BackButton", "Viewport"]
|
|
7
7
|
}
|
package/dist/lib/node/meta.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/ui/react-ui-tabs/src/Tabs.tsx":{"bytes":
|
|
1
|
+
{"inputs":{"packages/ui/react-ui-tabs/src/Tabs.tsx":{"bytes":22008,"imports":[{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"@radix-ui/react-tabs","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-attention","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-tabs/src/index.ts":{"bytes":489,"imports":[{"path":"packages/ui/react-ui-tabs/src/Tabs.tsx","kind":"import-statement","original":"./Tabs"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-tabs/dist/lib/node/index.cjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":11891},"packages/ui/react-ui-tabs/dist/lib/node/index.cjs":{"imports":[{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"@radix-ui/react-tabs","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-attention","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"exports":["Tabs"],"entryPoint":"packages/ui/react-ui-tabs/src/index.ts","inputs":{"packages/ui/react-ui-tabs/src/Tabs.tsx":{"bytesInOutput":5434},"packages/ui/react-ui-tabs/src/index.ts":{"bytesInOutput":0}},"bytes":5530}}}
|
|
@@ -8,7 +8,7 @@ import { useControllableState } from "@radix-ui/react-use-controllable-state";
|
|
|
8
8
|
import React, { useCallback, useLayoutEffect, useRef } from "react";
|
|
9
9
|
import { Button } from "@dxos/react-ui";
|
|
10
10
|
import { useAttention } from "@dxos/react-ui-attention";
|
|
11
|
-
import {
|
|
11
|
+
import { ghostHover, ghostSelectedContainerMd, mx } from "@dxos/react-ui-theme";
|
|
12
12
|
var TABS_NAME = "Tabs";
|
|
13
13
|
var [TabsContextProvider, useTabsContext] = createContext(TABS_NAME, {
|
|
14
14
|
activePart: "list",
|
|
@@ -16,7 +16,7 @@ var [TabsContextProvider, useTabsContext] = createContext(TABS_NAME, {
|
|
|
16
16
|
},
|
|
17
17
|
orientation: "vertical"
|
|
18
18
|
});
|
|
19
|
-
var TabsRoot = ({ children, classNames, activePart: propsActivePart, onActivePartChange, defaultActivePart, value: propsValue, onValueChange, defaultValue, orientation = "vertical", activationMode = "manual", attendableId, ...props }) => {
|
|
19
|
+
var TabsRoot = ({ children, classNames, activePart: propsActivePart, onActivePartChange, defaultActivePart, value: propsValue, onValueChange, defaultValue, orientation = "vertical", activationMode = "manual", verticalVariant = "stateful", attendableId, ...props }) => {
|
|
20
20
|
const [activePart = "list", setActivePart] = useControllableState({
|
|
21
21
|
prop: propsActivePart,
|
|
22
22
|
onChange: onActivePartChange,
|
|
@@ -45,7 +45,8 @@ var TabsRoot = ({ children, classNames, activePart: propsActivePart, onActivePar
|
|
|
45
45
|
activePart,
|
|
46
46
|
setActivePart,
|
|
47
47
|
value,
|
|
48
|
-
attendableId
|
|
48
|
+
attendableId,
|
|
49
|
+
verticalVariant
|
|
49
50
|
}, /* @__PURE__ */ React.createElement(TabsPrimitive.Root, {
|
|
50
51
|
activationMode,
|
|
51
52
|
"data-active": activePart,
|
|
@@ -53,27 +54,27 @@ var TabsRoot = ({ children, classNames, activePart: propsActivePart, onActivePar
|
|
|
53
54
|
...props,
|
|
54
55
|
value,
|
|
55
56
|
onValueChange: handleValueChange,
|
|
56
|
-
className: mx("overflow-hidden", orientation === "vertical" && "[&[data-active=list]_[role=tabpanel]]:invisible @md:[&[data-active=list]_[role=tabpanel]]:visible", classNames),
|
|
57
|
+
className: mx("overflow-hidden", orientation === "vertical" && verticalVariant === "stateful" && "[&[data-active=list]_[role=tabpanel]]:invisible @md:[&[data-active=list]_[role=tabpanel]]:visible", classNames),
|
|
57
58
|
ref: tabsRoot
|
|
58
59
|
}, children));
|
|
59
60
|
};
|
|
60
61
|
var TabsViewport = ({ classNames, children, ...props }) => {
|
|
61
|
-
const { orientation, activePart } = useTabsContext("TabsViewport");
|
|
62
|
+
const { orientation, activePart, verticalVariant } = useTabsContext("TabsViewport");
|
|
62
63
|
return /* @__PURE__ */ React.createElement("div", {
|
|
63
64
|
role: "none",
|
|
64
65
|
...props,
|
|
65
66
|
"data-active": activePart,
|
|
66
|
-
className: mx(orientation === "vertical" && [
|
|
67
|
+
className: mx(orientation === "vertical" && verticalVariant === "stateful" && [
|
|
67
68
|
"grid is-[200%] grid-cols-2 data-[active=panel]:mis-[-100%]",
|
|
68
69
|
"@md:is-auto @md:data-[active=panel]:mis-0 @md:grid-cols-[minmax(min-content,1fr)_3fr] @md:gap-1"
|
|
69
70
|
], classNames)
|
|
70
71
|
}, children);
|
|
71
72
|
};
|
|
72
73
|
var TabsTablist = ({ children, classNames, ...props }) => {
|
|
73
|
-
const { orientation } = useTabsContext("TabsTablist");
|
|
74
|
+
const { orientation, verticalVariant } = useTabsContext("TabsTablist");
|
|
74
75
|
return /* @__PURE__ */ React.createElement(TabsPrimitive.List, {
|
|
75
76
|
...props,
|
|
76
|
-
className: mx("
|
|
77
|
+
className: mx("max-bs-full is-full", orientation === "vertical" ? "overflow-y-auto" : "flex items-stretch justify-start gap-2 overflow-x-auto p-2", orientation === "vertical" && verticalVariant === "stateful" && "place-self-start p-1", classNames)
|
|
77
78
|
}, children);
|
|
78
79
|
};
|
|
79
80
|
var TabsBackButton = ({ onClick, classNames, ...props }) => {
|
|
@@ -134,13 +135,14 @@ var TabsTab = ({ value, classNames, children, onClick, ...props }) => {
|
|
|
134
135
|
var TabsTabpanel = ({ classNames, children, ...props }) => {
|
|
135
136
|
return /* @__PURE__ */ React.createElement(TabsPrimitive.Content, {
|
|
136
137
|
...props,
|
|
137
|
-
className: mx("
|
|
138
|
+
className: mx("dx-focus-ring-inset", classNames)
|
|
138
139
|
}, children);
|
|
139
140
|
};
|
|
140
141
|
var Tabs = {
|
|
141
142
|
Root: TabsRoot,
|
|
142
143
|
Tablist: TabsTablist,
|
|
143
144
|
Tab: TabsTab,
|
|
145
|
+
TabPrimitive: TabsPrimitive.Trigger,
|
|
144
146
|
TabGroupHeading: TabsTabGroupHeading,
|
|
145
147
|
Tabpanel: TabsTabpanel,
|
|
146
148
|
BackButton: TabsBackButton,
|
|
@@ -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 { useFocusFinders } from '@fluentui/react-tabster';\nimport { createContext } from '@radix-ui/react-context';\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, useRef } from 'react';\n\nimport { Button, type ButtonProps, type ThemedClassName } from '@dxos/react-ui';\nimport { useAttention } from '@dxos/react-ui-attention';\nimport {
|
|
5
|
-
"mappings": ";;;AAIA,SAASA,uBAAuB;AAChC,SAASC,qBAAqB;AAC9B,YAAYC,mBAAmB;AAC/B,SAASC,4BAA4B;AACrC,OAAOC,SAAyDC,aAAaC,iBAAiBC,cAAc;AAE5G,SAASC,cAAsD;AAC/D,SAASC,oBAAoB;AAC7B,SAASC,
|
|
6
|
-
"names": ["useFocusFinders", "createContext", "TabsPrimitive", "useControllableState", "React", "useCallback", "useLayoutEffect", "useRef", "Button", "useAttention", "
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { createContext } from '@radix-ui/react-context';\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, useRef } from 'react';\n\nimport { Button, type ButtonProps, type ThemedClassName } from '@dxos/react-ui';\nimport { useAttention } from '@dxos/react-ui-attention';\nimport { ghostHover, ghostSelectedContainerMd, mx } from '@dxos/react-ui-theme';\n\ntype TabsActivePart = 'list' | 'panel';\n\nconst TABS_NAME = 'Tabs';\n\ntype TabsContextValue = {\n activePart: TabsActivePart;\n setActivePart: (nextActivePart: TabsActivePart) => void;\n attendableId?: string;\n verticalVariant?: 'stateful' | 'stateless';\n} & Pick<TabsPrimitive.TabsProps, 'orientation' | 'value'>;\n\nconst [TabsContextProvider, useTabsContext] = createContext<TabsContextValue>(TABS_NAME, {\n activePart: 'list',\n setActivePart: () => {},\n orientation: 'vertical',\n});\n\ntype TabsRootProps = ThemedClassName<TabsPrimitive.TabsProps> &\n Partial<Pick<TabsContextValue, 'activePart' | 'verticalVariant' | 'attendableId'>> &\n Partial<{\n onActivePartChange: (nextActivePart: TabsActivePart) => void;\n defaultActivePart: TabsActivePart;\n }>;\n\nconst TabsRoot = ({\n children,\n classNames,\n activePart: propsActivePart,\n onActivePartChange,\n defaultActivePart,\n value: propsValue,\n onValueChange,\n defaultValue,\n orientation = 'vertical',\n activationMode = 'manual',\n verticalVariant = 'stateful',\n attendableId,\n ...props\n}: TabsRootProps) => {\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 } = useFocusFinders();\n\n const tabsRoot = useRef<HTMLDivElement | null>(null);\n\n useLayoutEffect(() => {\n tabsRoot.current && findFirstFocusable(tabsRoot.current)?.focus();\n }, [activePart]);\n\n return (\n <TabsContextProvider\n orientation={orientation}\n activePart={activePart}\n setActivePart={setActivePart}\n value={value}\n attendableId={attendableId}\n verticalVariant={verticalVariant}\n >\n <TabsPrimitive.Root\n activationMode={activationMode}\n data-active={activePart}\n orientation={orientation}\n {...props}\n value={value}\n onValueChange={handleValueChange}\n className={mx(\n 'overflow-hidden',\n orientation === 'vertical' &&\n verticalVariant === 'stateful' &&\n '[&[data-active=list]_[role=tabpanel]]:invisible @md:[&[data-active=list]_[role=tabpanel]]:visible',\n classNames,\n )}\n ref={tabsRoot}\n >\n {children}\n </TabsPrimitive.Root>\n </TabsContextProvider>\n );\n};\n\ntype TabsViewportProps = ThemedClassName<ComponentPropsWithoutRef<'div'>>;\n\nconst TabsViewport = ({ classNames, children, ...props }: TabsViewportProps) => {\n const { orientation, activePart, verticalVariant } = useTabsContext('TabsViewport');\n return (\n <div\n role='none'\n {...props}\n data-active={activePart}\n className={mx(\n orientation === 'vertical' &&\n verticalVariant === 'stateful' && [\n 'grid is-[200%] grid-cols-2 data-[active=panel]:mis-[-100%]',\n '@md:is-auto @md:data-[active=panel]:mis-0 @md:grid-cols-[minmax(min-content,1fr)_3fr] @md:gap-1',\n ],\n classNames,\n )}\n >\n {children}\n </div>\n );\n};\n\ntype TabsTablistProps = ThemedClassName<TabsPrimitive.TabsListProps>;\n\nconst TabsTablist = ({ children, classNames, ...props }: TabsTablistProps) => {\n const { orientation, verticalVariant } = useTabsContext('TabsTablist');\n return (\n <TabsPrimitive.List\n {...props}\n className={mx(\n 'max-bs-full is-full',\n orientation === 'vertical' ? 'overflow-y-auto' : 'flex items-stretch justify-start gap-2 overflow-x-auto p-2',\n orientation === 'vertical' && verticalVariant === 'stateful' && 'place-self-start p-1',\n classNames,\n )}\n >\n {children}\n </TabsPrimitive.List>\n );\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 [onClick, setActivePart],\n );\n\n return <Button {...props} classNames={['is-full text-start @md:hidden mbe-2', classNames]} onClick={handleClick} />;\n};\n\ntype TabsTabGroupHeadingProps = ThemedClassName<ComponentPropsWithoutRef<'h2'>>;\n\nconst TabsTabGroupHeading = ({ children, classNames, ...props }: ThemedClassName<TabsTabGroupHeadingProps>) => {\n return (\n <h2 {...props} className={mx('mlb-1 pli-2 text-sm text-unAccent', classNames)}>\n {children}\n </h2>\n );\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 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 density='fine'\n variant={\n orientation === 'horizontal' && contextValue === value ? (hasAttention ? 'primary' : 'default') : 'ghost'\n }\n {...props}\n onClick={handleClick}\n classNames={[\n 'pli-2 rounded-sm',\n orientation === 'vertical' && 'block justify-start text-start is-full',\n orientation === 'vertical' && ghostSelectedContainerMd,\n ghostHover,\n classNames,\n ]}\n >\n {children}\n </Button>\n </TabsPrimitive.Trigger>\n );\n};\n\ntype TabsTabpanelProps = ThemedClassName<TabsPrimitive.TabsContentProps>;\n\nconst TabsTabpanel = ({ classNames, children, ...props }: TabsTabpanelProps) => {\n return (\n <TabsPrimitive.Content {...props} className={mx('dx-focus-ring-inset', classNames)}>\n {children}\n </TabsPrimitive.Content>\n );\n};\n\ntype TabsTabPrimitiveProps = TabsPrimitive.TabsTriggerProps;\n\nexport const Tabs = {\n Root: TabsRoot,\n Tablist: TabsTablist,\n Tab: TabsTab,\n TabPrimitive: TabsPrimitive.Trigger,\n TabGroupHeading: TabsTabGroupHeading,\n Tabpanel: TabsTabpanel,\n BackButton: TabsBackButton,\n Viewport: TabsViewport,\n};\n\nexport type {\n TabsActivePart,\n TabsRootProps,\n TabsTablistProps,\n TabsTabProps,\n TabsTabPrimitiveProps,\n TabsTabGroupHeadingProps,\n TabsTabpanelProps,\n TabsViewportProps,\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["useFocusFinders", "createContext", "TabsPrimitive", "useControllableState", "React", "useCallback", "useLayoutEffect", "useRef", "Button", "useAttention", "ghostHover", "ghostSelectedContainerMd", "mx", "TABS_NAME", "TabsContextProvider", "useTabsContext", "createContext", "activePart", "setActivePart", "orientation", "TabsRoot", "children", "classNames", "propsActivePart", "onActivePartChange", "defaultActivePart", "value", "propsValue", "onValueChange", "defaultValue", "activationMode", "verticalVariant", "attendableId", "props", "useControllableState", "prop", "onChange", "defaultProp", "setValue", "handleValueChange", "useCallback", "nextValue", "findFirstFocusable", "useFocusFinders", "tabsRoot", "useRef", "useLayoutEffect", "current", "focus", "Root", "data-active", "className", "mx", "ref", "TabsViewport", "div", "role", "TabsTablist", "List", "TabsBackButton", "onClick", "handleClick", "event", "Button", "TabsTabGroupHeading", "h2", "TabsTab", "contextValue", "hasAttention", "useAttention", "Trigger", "asChild", "density", "variant", "ghostSelectedContainerMd", "ghostHover", "TabsTabpanel", "Content", "Tabs", "Tablist", "Tab", "TabPrimitive", "TabGroupHeading", "Tabpanel", "BackButton", "Viewport"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/ui/react-ui-tabs/src/Tabs.tsx":{"bytes":
|
|
1
|
+
{"inputs":{"packages/ui/react-ui-tabs/src/Tabs.tsx":{"bytes":22008,"imports":[{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"@radix-ui/react-tabs","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-attention","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-tabs/src/index.ts":{"bytes":489,"imports":[{"path":"packages/ui/react-ui-tabs/src/Tabs.tsx","kind":"import-statement","original":"./Tabs"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-tabs/dist/lib/node-esm/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":11893},"packages/ui/react-ui-tabs/dist/lib/node-esm/index.mjs":{"imports":[{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"@radix-ui/react-tabs","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-attention","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"exports":["Tabs"],"entryPoint":"packages/ui/react-ui-tabs/src/index.ts","inputs":{"packages/ui/react-ui-tabs/src/Tabs.tsx":{"bytesInOutput":5434},"packages/ui/react-ui-tabs/src/index.ts":{"bytesInOutput":0}},"bytes":5623}}}
|
package/dist/types/src/Tabs.d.ts
CHANGED
|
@@ -2,25 +2,31 @@ import * as TabsPrimitive from '@radix-ui/react-tabs';
|
|
|
2
2
|
import React, { type ComponentPropsWithoutRef } from 'react';
|
|
3
3
|
import { type ButtonProps, type ThemedClassName } from '@dxos/react-ui';
|
|
4
4
|
type TabsActivePart = 'list' | 'panel';
|
|
5
|
-
type
|
|
5
|
+
type TabsContextValue = {
|
|
6
6
|
activePart: TabsActivePart;
|
|
7
|
+
setActivePart: (nextActivePart: TabsActivePart) => void;
|
|
8
|
+
attendableId?: string;
|
|
9
|
+
verticalVariant?: 'stateful' | 'stateless';
|
|
10
|
+
} & Pick<TabsPrimitive.TabsProps, 'orientation' | 'value'>;
|
|
11
|
+
type TabsRootProps = ThemedClassName<TabsPrimitive.TabsProps> & Partial<Pick<TabsContextValue, 'activePart' | 'verticalVariant' | 'attendableId'>> & Partial<{
|
|
7
12
|
onActivePartChange: (nextActivePart: TabsActivePart) => void;
|
|
8
13
|
defaultActivePart: TabsActivePart;
|
|
9
|
-
attendableId?: string;
|
|
10
14
|
}>;
|
|
11
15
|
type TabsViewportProps = ThemedClassName<ComponentPropsWithoutRef<'div'>>;
|
|
12
16
|
type TabsTablistProps = ThemedClassName<TabsPrimitive.TabsListProps>;
|
|
13
17
|
type TabsTabGroupHeadingProps = ThemedClassName<ComponentPropsWithoutRef<'h2'>>;
|
|
14
18
|
type TabsTabProps = ButtonProps & Pick<TabsPrimitive.TabsTriggerProps, 'value'>;
|
|
15
19
|
type TabsTabpanelProps = ThemedClassName<TabsPrimitive.TabsContentProps>;
|
|
20
|
+
type TabsTabPrimitiveProps = TabsPrimitive.TabsTriggerProps;
|
|
16
21
|
export declare const Tabs: {
|
|
17
|
-
Root: ({ children, classNames, activePart: propsActivePart, onActivePartChange, defaultActivePart, value: propsValue, onValueChange, defaultValue, orientation, activationMode, attendableId, ...props }: TabsRootProps) => React.JSX.Element;
|
|
22
|
+
Root: ({ children, classNames, activePart: propsActivePart, onActivePartChange, defaultActivePart, value: propsValue, onValueChange, defaultValue, orientation, activationMode, verticalVariant, attendableId, ...props }: TabsRootProps) => React.JSX.Element;
|
|
18
23
|
Tablist: ({ children, classNames, ...props }: TabsTablistProps) => React.JSX.Element;
|
|
19
24
|
Tab: ({ value, classNames, children, onClick, ...props }: TabsTabProps) => React.JSX.Element;
|
|
25
|
+
TabPrimitive: React.ForwardRefExoticComponent<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
20
26
|
TabGroupHeading: ({ children, classNames, ...props }: ThemedClassName<TabsTabGroupHeadingProps>) => React.JSX.Element;
|
|
21
27
|
Tabpanel: ({ classNames, children, ...props }: TabsTabpanelProps) => React.JSX.Element;
|
|
22
28
|
BackButton: ({ onClick, classNames, ...props }: ButtonProps) => React.JSX.Element;
|
|
23
29
|
Viewport: ({ classNames, children, ...props }: TabsViewportProps) => React.JSX.Element;
|
|
24
30
|
};
|
|
25
|
-
export type { TabsActivePart, TabsRootProps, TabsTablistProps, TabsTabProps, TabsTabGroupHeadingProps, TabsTabpanelProps, TabsViewportProps, };
|
|
31
|
+
export type { TabsActivePart, TabsRootProps, TabsTablistProps, TabsTabProps, TabsTabPrimitiveProps, TabsTabGroupHeadingProps, TabsTabpanelProps, TabsViewportProps, };
|
|
26
32
|
//# sourceMappingURL=Tabs.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/Tabs.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,aAAa,MAAM,sBAAsB,CAAC;AAEtD,OAAO,KAAK,EAAE,EAAE,KAAK,wBAAwB,EAAyD,MAAM,OAAO,CAAC;AAEpH,OAAO,EAAU,KAAK,WAAW,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAIhF,KAAK,cAAc,GAAG,MAAM,GAAG,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/Tabs.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,aAAa,MAAM,sBAAsB,CAAC;AAEtD,OAAO,KAAK,EAAE,EAAE,KAAK,wBAAwB,EAAyD,MAAM,OAAO,CAAC;AAEpH,OAAO,EAAU,KAAK,WAAW,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAIhF,KAAK,cAAc,GAAG,MAAM,GAAG,OAAO,CAAC;AAIvC,KAAK,gBAAgB,GAAG;IACtB,UAAU,EAAE,cAAc,CAAC;IAC3B,aAAa,EAAE,CAAC,cAAc,EAAE,cAAc,KAAK,IAAI,CAAC;IACxD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC;CAC5C,GAAG,IAAI,CAAC,aAAa,CAAC,SAAS,EAAE,aAAa,GAAG,OAAO,CAAC,CAAC;AAQ3D,KAAK,aAAa,GAAG,eAAe,CAAC,aAAa,CAAC,SAAS,CAAC,GAC3D,OAAO,CAAC,IAAI,CAAC,gBAAgB,EAAE,YAAY,GAAG,iBAAiB,GAAG,cAAc,CAAC,CAAC,GAClF,OAAO,CAAC;IACN,kBAAkB,EAAE,CAAC,cAAc,EAAE,cAAc,KAAK,IAAI,CAAC;IAC7D,iBAAiB,EAAE,cAAc,CAAC;CACnC,CAAC,CAAC;AA4EL,KAAK,iBAAiB,GAAG,eAAe,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAC;AAuB1E,KAAK,gBAAgB,GAAG,eAAe,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;AAgCrE,KAAK,wBAAwB,GAAG,eAAe,CAAC,wBAAwB,CAAC,IAAI,CAAC,CAAC,CAAC;AAUhF,KAAK,YAAY,GAAG,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,gBAAgB,EAAE,OAAO,CAAC,CAAC;AAqChF,KAAK,iBAAiB,GAAG,eAAe,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;AAUzE,KAAK,qBAAqB,GAAG,aAAa,CAAC,gBAAgB,CAAC;AAE5D,eAAO,MAAM,IAAI;+NA9Kd,aAAa;kDAqFyC,gBAAgB;8DA0CJ,YAAY;;0DAVhB,eAAe,CAAC,wBAAwB,CAAC;mDA+ChD,iBAAiB;oDA9DhB,WAAW;mDAxCZ,iBAAiB;CAyH1E,CAAC;AAEF,YAAY,EACV,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,qBAAqB,EACrB,wBAAwB,EACxB,iBAAiB,EACjB,iBAAiB,GAClB,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
declare const _default: {
|
|
3
3
|
title: string;
|
|
4
|
-
component: ({ children, classNames, activePart: propsActivePart, onActivePartChange, defaultActivePart, value: propsValue, onValueChange, defaultValue, orientation, activationMode, attendableId, ...props }: import("./Tabs").TabsRootProps) => React.JSX.Element;
|
|
4
|
+
component: ({ children, classNames, activePart: propsActivePart, onActivePartChange, defaultActivePart, value: propsValue, onValueChange, defaultValue, orientation, activationMode, verticalVariant, attendableId, ...props }: import("./Tabs").TabsRootProps) => React.JSX.Element;
|
|
5
5
|
decorators: import("@storybook/react/*").Decorator[];
|
|
6
6
|
};
|
|
7
7
|
export default _default;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/react-ui-tabs",
|
|
3
|
-
"version": "0.7.5-main.
|
|
3
|
+
"version": "0.7.5-main.ff8607b",
|
|
4
4
|
"description": "Components for facilitating a Tabs pattern.",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
@@ -23,15 +23,15 @@
|
|
|
23
23
|
"src"
|
|
24
24
|
],
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"@fluentui/react-tabster": "
|
|
27
|
-
"@radix-ui/primitive": "
|
|
28
|
-
"@radix-ui/react-context": "
|
|
29
|
-
"@radix-ui/react-primitive": "
|
|
30
|
-
"@radix-ui/react-slot": "
|
|
31
|
-
"@radix-ui/react-tabs": "
|
|
32
|
-
"@radix-ui/react-use-controllable-state": "
|
|
33
|
-
"@dxos/react-ui-attention": "0.7.5-main.
|
|
34
|
-
"@dxos/util": "0.7.5-main.
|
|
26
|
+
"@fluentui/react-tabster": "9.23.3",
|
|
27
|
+
"@radix-ui/primitive": "1.1.1",
|
|
28
|
+
"@radix-ui/react-context": "1.1.1",
|
|
29
|
+
"@radix-ui/react-primitive": "2.0.2",
|
|
30
|
+
"@radix-ui/react-slot": "1.1.2",
|
|
31
|
+
"@radix-ui/react-tabs": "1.1.3",
|
|
32
|
+
"@radix-ui/react-use-controllable-state": "1.1.0",
|
|
33
|
+
"@dxos/react-ui-attention": "0.7.5-main.ff8607b",
|
|
34
|
+
"@dxos/util": "0.7.5-main.ff8607b"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
37
|
"@types/react": "~18.2.0",
|
|
@@ -39,16 +39,16 @@
|
|
|
39
39
|
"react": "~18.2.0",
|
|
40
40
|
"react-dom": "~18.2.0",
|
|
41
41
|
"vite": "5.4.7",
|
|
42
|
-
"@dxos/random": "0.7.5-main.
|
|
43
|
-
"@dxos/react-ui": "0.7.5-main.
|
|
44
|
-
"@dxos/react-ui-theme": "0.7.5-main.
|
|
45
|
-
"@dxos/storybook-utils": "0.7.5-main.
|
|
42
|
+
"@dxos/random": "0.7.5-main.ff8607b",
|
|
43
|
+
"@dxos/react-ui": "0.7.5-main.ff8607b",
|
|
44
|
+
"@dxos/react-ui-theme": "0.7.5-main.ff8607b",
|
|
45
|
+
"@dxos/storybook-utils": "0.7.5-main.ff8607b"
|
|
46
46
|
},
|
|
47
47
|
"peerDependencies": {
|
|
48
48
|
"react": "~18.2.0",
|
|
49
49
|
"react-dom": "~18.2.0",
|
|
50
|
-
"@dxos/react-ui
|
|
51
|
-
"@dxos/react-ui": "0.7.5-main.
|
|
50
|
+
"@dxos/react-ui": "0.7.5-main.ff8607b",
|
|
51
|
+
"@dxos/react-ui-theme": "0.7.5-main.ff8607b"
|
|
52
52
|
},
|
|
53
53
|
"publishConfig": {
|
|
54
54
|
"access": "public"
|
package/src/Tabs.stories.tsx
CHANGED
|
@@ -33,7 +33,7 @@ export const Tabs = {
|
|
|
33
33
|
<Dialog.Root open>
|
|
34
34
|
<Dialog.Overlay blockAlign='start'>
|
|
35
35
|
<Dialog.Content classNames='is-[calc(100dvw-4rem)] !max-is-full'>
|
|
36
|
-
<NaturalTabs.Root orientation='vertical' defaultValue={Object.keys(content)[3]}>
|
|
36
|
+
<NaturalTabs.Root orientation='vertical' defaultValue={Object.keys(content)[3]} defaultActivePart='list'>
|
|
37
37
|
<NaturalTabs.Viewport>
|
|
38
38
|
<NaturalTabs.Tablist>
|
|
39
39
|
{Object.entries(content).map(([id, { title }]) => {
|
package/src/Tabs.tsx
CHANGED
|
@@ -10,7 +10,7 @@ import React, { type ComponentPropsWithoutRef, type MouseEvent, useCallback, use
|
|
|
10
10
|
|
|
11
11
|
import { Button, type ButtonProps, type ThemedClassName } from '@dxos/react-ui';
|
|
12
12
|
import { useAttention } from '@dxos/react-ui-attention';
|
|
13
|
-
import {
|
|
13
|
+
import { ghostHover, ghostSelectedContainerMd, mx } from '@dxos/react-ui-theme';
|
|
14
14
|
|
|
15
15
|
type TabsActivePart = 'list' | 'panel';
|
|
16
16
|
|
|
@@ -20,6 +20,7 @@ type TabsContextValue = {
|
|
|
20
20
|
activePart: TabsActivePart;
|
|
21
21
|
setActivePart: (nextActivePart: TabsActivePart) => void;
|
|
22
22
|
attendableId?: string;
|
|
23
|
+
verticalVariant?: 'stateful' | 'stateless';
|
|
23
24
|
} & Pick<TabsPrimitive.TabsProps, 'orientation' | 'value'>;
|
|
24
25
|
|
|
25
26
|
const [TabsContextProvider, useTabsContext] = createContext<TabsContextValue>(TABS_NAME, {
|
|
@@ -29,11 +30,10 @@ const [TabsContextProvider, useTabsContext] = createContext<TabsContextValue>(TA
|
|
|
29
30
|
});
|
|
30
31
|
|
|
31
32
|
type TabsRootProps = ThemedClassName<TabsPrimitive.TabsProps> &
|
|
33
|
+
Partial<Pick<TabsContextValue, 'activePart' | 'verticalVariant' | 'attendableId'>> &
|
|
32
34
|
Partial<{
|
|
33
|
-
activePart: TabsActivePart;
|
|
34
35
|
onActivePartChange: (nextActivePart: TabsActivePart) => void;
|
|
35
36
|
defaultActivePart: TabsActivePart;
|
|
36
|
-
attendableId?: string;
|
|
37
37
|
}>;
|
|
38
38
|
|
|
39
39
|
const TabsRoot = ({
|
|
@@ -47,6 +47,7 @@ const TabsRoot = ({
|
|
|
47
47
|
defaultValue,
|
|
48
48
|
orientation = 'vertical',
|
|
49
49
|
activationMode = 'manual',
|
|
50
|
+
verticalVariant = 'stateful',
|
|
50
51
|
attendableId,
|
|
51
52
|
...props
|
|
52
53
|
}: TabsRootProps) => {
|
|
@@ -85,6 +86,7 @@ const TabsRoot = ({
|
|
|
85
86
|
setActivePart={setActivePart}
|
|
86
87
|
value={value}
|
|
87
88
|
attendableId={attendableId}
|
|
89
|
+
verticalVariant={verticalVariant}
|
|
88
90
|
>
|
|
89
91
|
<TabsPrimitive.Root
|
|
90
92
|
activationMode={activationMode}
|
|
@@ -96,6 +98,7 @@ const TabsRoot = ({
|
|
|
96
98
|
className={mx(
|
|
97
99
|
'overflow-hidden',
|
|
98
100
|
orientation === 'vertical' &&
|
|
101
|
+
verticalVariant === 'stateful' &&
|
|
99
102
|
'[&[data-active=list]_[role=tabpanel]]:invisible @md:[&[data-active=list]_[role=tabpanel]]:visible',
|
|
100
103
|
classNames,
|
|
101
104
|
)}
|
|
@@ -110,17 +113,18 @@ const TabsRoot = ({
|
|
|
110
113
|
type TabsViewportProps = ThemedClassName<ComponentPropsWithoutRef<'div'>>;
|
|
111
114
|
|
|
112
115
|
const TabsViewport = ({ classNames, children, ...props }: TabsViewportProps) => {
|
|
113
|
-
const { orientation, activePart } = useTabsContext('TabsViewport');
|
|
116
|
+
const { orientation, activePart, verticalVariant } = useTabsContext('TabsViewport');
|
|
114
117
|
return (
|
|
115
118
|
<div
|
|
116
119
|
role='none'
|
|
117
120
|
{...props}
|
|
118
121
|
data-active={activePart}
|
|
119
122
|
className={mx(
|
|
120
|
-
orientation === 'vertical' &&
|
|
121
|
-
'
|
|
122
|
-
|
|
123
|
-
|
|
123
|
+
orientation === 'vertical' &&
|
|
124
|
+
verticalVariant === 'stateful' && [
|
|
125
|
+
'grid is-[200%] grid-cols-2 data-[active=panel]:mis-[-100%]',
|
|
126
|
+
'@md:is-auto @md:data-[active=panel]:mis-0 @md:grid-cols-[minmax(min-content,1fr)_3fr] @md:gap-1',
|
|
127
|
+
],
|
|
124
128
|
classNames,
|
|
125
129
|
)}
|
|
126
130
|
>
|
|
@@ -132,15 +136,14 @@ const TabsViewport = ({ classNames, children, ...props }: TabsViewportProps) =>
|
|
|
132
136
|
type TabsTablistProps = ThemedClassName<TabsPrimitive.TabsListProps>;
|
|
133
137
|
|
|
134
138
|
const TabsTablist = ({ children, classNames, ...props }: TabsTablistProps) => {
|
|
135
|
-
const { orientation } = useTabsContext('TabsTablist');
|
|
139
|
+
const { orientation, verticalVariant } = useTabsContext('TabsTablist');
|
|
136
140
|
return (
|
|
137
141
|
<TabsPrimitive.List
|
|
138
142
|
{...props}
|
|
139
143
|
className={mx(
|
|
140
|
-
'
|
|
141
|
-
orientation === 'vertical'
|
|
142
|
-
|
|
143
|
-
: 'flex items-stretch justify-start gap-2 overflow-x-auto p-2',
|
|
144
|
+
'max-bs-full is-full',
|
|
145
|
+
orientation === 'vertical' ? 'overflow-y-auto' : 'flex items-stretch justify-start gap-2 overflow-x-auto p-2',
|
|
146
|
+
orientation === 'vertical' && verticalVariant === 'stateful' && 'place-self-start p-1',
|
|
144
147
|
classNames,
|
|
145
148
|
)}
|
|
146
149
|
>
|
|
@@ -213,16 +216,19 @@ type TabsTabpanelProps = ThemedClassName<TabsPrimitive.TabsContentProps>;
|
|
|
213
216
|
|
|
214
217
|
const TabsTabpanel = ({ classNames, children, ...props }: TabsTabpanelProps) => {
|
|
215
218
|
return (
|
|
216
|
-
<TabsPrimitive.Content {...props} className={mx('
|
|
219
|
+
<TabsPrimitive.Content {...props} className={mx('dx-focus-ring-inset', classNames)}>
|
|
217
220
|
{children}
|
|
218
221
|
</TabsPrimitive.Content>
|
|
219
222
|
);
|
|
220
223
|
};
|
|
221
224
|
|
|
225
|
+
type TabsTabPrimitiveProps = TabsPrimitive.TabsTriggerProps;
|
|
226
|
+
|
|
222
227
|
export const Tabs = {
|
|
223
228
|
Root: TabsRoot,
|
|
224
229
|
Tablist: TabsTablist,
|
|
225
230
|
Tab: TabsTab,
|
|
231
|
+
TabPrimitive: TabsPrimitive.Trigger,
|
|
226
232
|
TabGroupHeading: TabsTabGroupHeading,
|
|
227
233
|
Tabpanel: TabsTabpanel,
|
|
228
234
|
BackButton: TabsBackButton,
|
|
@@ -234,6 +240,7 @@ export type {
|
|
|
234
240
|
TabsRootProps,
|
|
235
241
|
TabsTablistProps,
|
|
236
242
|
TabsTabProps,
|
|
243
|
+
TabsTabPrimitiveProps,
|
|
237
244
|
TabsTabGroupHeadingProps,
|
|
238
245
|
TabsTabpanelProps,
|
|
239
246
|
TabsViewportProps,
|