@dxos/react-ui-tabs 0.7.4 → 0.7.5-feature-compute.4d9d99a
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 +13 -7
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node/index.cjs +13 -7
- package/dist/lib/node/index.cjs.map +3 -3
- package/dist/lib/node/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +13 -7
- 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 +2 -1
- package/dist/types/src/Tabs.d.ts.map +1 -1
- package/dist/types/src/Tabs.stories.d.ts +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -0
- package/package.json +9 -8
- package/src/Tabs.tsx +28 -7
|
@@ -5,6 +5,7 @@ import * as TabsPrimitive from "@radix-ui/react-tabs";
|
|
|
5
5
|
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
|
+
import { useAttention } from "@dxos/react-ui-attention";
|
|
8
9
|
import { focusRing, ghostHover, ghostSelectedContainerMd, mx } from "@dxos/react-ui-theme";
|
|
9
10
|
var TABS_NAME = "Tabs";
|
|
10
11
|
var [TabsContextProvider, useTabsContext] = createContext(TABS_NAME, {
|
|
@@ -13,7 +14,7 @@ var [TabsContextProvider, useTabsContext] = createContext(TABS_NAME, {
|
|
|
13
14
|
},
|
|
14
15
|
orientation: "vertical"
|
|
15
16
|
});
|
|
16
|
-
var TabsRoot = ({ children, classNames, activePart: propsActivePart, onActivePartChange, defaultActivePart, value: propsValue, onValueChange, defaultValue, orientation = "vertical", activationMode = "manual", ...props }) => {
|
|
17
|
+
var TabsRoot = ({ children, classNames, activePart: propsActivePart, onActivePartChange, defaultActivePart, value: propsValue, onValueChange, defaultValue, orientation = "vertical", activationMode = "manual", attendableId, ...props }) => {
|
|
17
18
|
const [activePart = "list", setActivePart] = useControllableState({
|
|
18
19
|
prop: propsActivePart,
|
|
19
20
|
onChange: onActivePartChange,
|
|
@@ -40,7 +41,9 @@ var TabsRoot = ({ children, classNames, activePart: propsActivePart, onActivePar
|
|
|
40
41
|
return /* @__PURE__ */ React.createElement(TabsContextProvider, {
|
|
41
42
|
orientation,
|
|
42
43
|
activePart,
|
|
43
|
-
setActivePart
|
|
44
|
+
setActivePart,
|
|
45
|
+
value,
|
|
46
|
+
attendableId
|
|
44
47
|
}, /* @__PURE__ */ React.createElement(TabsPrimitive.Root, {
|
|
45
48
|
activationMode,
|
|
46
49
|
"data-active": activePart,
|
|
@@ -65,9 +68,10 @@ var TabsViewport = ({ classNames, children, ...props }) => {
|
|
|
65
68
|
}, children);
|
|
66
69
|
};
|
|
67
70
|
var TabsTablist = ({ children, classNames, ...props }) => {
|
|
71
|
+
const { orientation } = useTabsContext("TabsTablist");
|
|
68
72
|
return /* @__PURE__ */ React.createElement(TabsPrimitive.List, {
|
|
69
73
|
...props,
|
|
70
|
-
className: mx("place-self-start max-bs-full is-full overflow-y-auto p-1", classNames)
|
|
74
|
+
className: mx("place-self-start max-bs-full is-full", orientation === "vertical" ? "overflow-y-auto p-1" : "flex items-stretch justify-start gap-2 overflow-x-auto p-2", classNames)
|
|
71
75
|
}, children);
|
|
72
76
|
};
|
|
73
77
|
var TabsBackButton = ({ onClick, classNames, ...props }) => {
|
|
@@ -95,7 +99,8 @@ var TabsTabGroupHeading = ({ children, classNames, ...props }) => {
|
|
|
95
99
|
}, children);
|
|
96
100
|
};
|
|
97
101
|
var TabsTab = ({ value, classNames, children, onClick, ...props }) => {
|
|
98
|
-
const { setActivePart } = useTabsContext("TabsTab");
|
|
102
|
+
const { setActivePart, orientation, value: contextValue, attendableId } = useTabsContext("TabsTab");
|
|
103
|
+
const { hasAttention } = useAttention(attendableId);
|
|
99
104
|
const handleClick = useCallback(
|
|
100
105
|
// NOTE: this handler is only called if the tab is *already active*.
|
|
101
106
|
(event) => {
|
|
@@ -112,12 +117,13 @@ var TabsTab = ({ value, classNames, children, onClick, ...props }) => {
|
|
|
112
117
|
asChild: true
|
|
113
118
|
}, /* @__PURE__ */ React.createElement(Button, {
|
|
114
119
|
density: "fine",
|
|
115
|
-
variant: "ghost",
|
|
120
|
+
variant: orientation === "horizontal" && contextValue === value ? hasAttention ? "primary" : "default" : "ghost",
|
|
116
121
|
...props,
|
|
117
122
|
onClick: handleClick,
|
|
118
123
|
classNames: [
|
|
119
|
-
"
|
|
120
|
-
|
|
124
|
+
"pli-2 rounded-sm",
|
|
125
|
+
orientation === "vertical" && "block justify-start text-start is-full",
|
|
126
|
+
orientation === "vertical" && ghostSelectedContainerMd,
|
|
121
127
|
ghostHover,
|
|
122
128
|
classNames
|
|
123
129
|
]
|
|
@@ -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 { focusRing, 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} & Pick<TabsPrimitive.TabsProps, 'orientation'>;\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<{\n activePart: TabsActivePart;\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 ...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
|
|
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,WAAWC,YAAYC,0BAA0BC,UAAU;AAIpE,IAAMC,YAAY;
|
|
6
|
-
"names": ["useFocusFinders", "createContext", "TabsPrimitive", "useControllableState", "React", "useCallback", "useLayoutEffect", "useRef", "Button", "focusRing", "ghostHover", "ghostSelectedContainerMd", "mx", "TABS_NAME", "TabsContextProvider", "useTabsContext", "createContext", "activePart", "setActivePart", "orientation", "TabsRoot", "children", "classNames", "propsActivePart", "onActivePartChange", "defaultActivePart", "value", "propsValue", "onValueChange", "defaultValue", "activationMode", "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", "Trigger", "asChild", "density", "variant", "ghostSelectedContainerMd", "ghostHover", "TabsTabpanel", "Content", "focusRing", "Tabs", "Tablist", "Tab", "TabGroupHeading", "Tabpanel", "BackButton", "Viewport"]
|
|
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 { focusRing, 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} & 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<{\n activePart: TabsActivePart;\n onActivePartChange: (nextActivePart: TabsActivePart) => void;\n defaultActivePart: TabsActivePart;\n attendableId?: string;\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 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 >\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 '[&[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 } = useTabsContext('TabsViewport');\n return (\n <div\n role='none'\n {...props}\n data-active={activePart}\n className={mx(\n orientation === 'vertical' && [\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 } = useTabsContext('TabsTablist');\n return (\n <TabsPrimitive.List\n {...props}\n className={mx(\n 'place-self-start max-bs-full is-full',\n orientation === 'vertical'\n ? 'overflow-y-auto p-1'\n : 'flex items-stretch justify-start gap-2 overflow-x-auto p-2',\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('rounded-sm', focusRing, classNames)}>\n {children}\n </TabsPrimitive.Content>\n );\n};\n\nexport const Tabs = {\n Root: TabsRoot,\n Tablist: TabsTablist,\n Tab: TabsTab,\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 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", "focusRing", "ghostHover", "ghostSelectedContainerMd", "mx", "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", "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", "focusRing", "Tabs", "Tablist", "Tab", "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":20931,"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":11328},"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":5188},"packages/ui/react-ui-tabs/src/index.ts":{"bytesInOutput":0}},"bytes":5284}}}
|
package/dist/lib/node/index.cjs
CHANGED
|
@@ -37,6 +37,7 @@ var TabsPrimitive = __toESM(require("@radix-ui/react-tabs"));
|
|
|
37
37
|
var import_react_use_controllable_state = require("@radix-ui/react-use-controllable-state");
|
|
38
38
|
var import_react = __toESM(require("react"));
|
|
39
39
|
var import_react_ui = require("@dxos/react-ui");
|
|
40
|
+
var import_react_ui_attention = require("@dxos/react-ui-attention");
|
|
40
41
|
var import_react_ui_theme = require("@dxos/react-ui-theme");
|
|
41
42
|
var TABS_NAME = "Tabs";
|
|
42
43
|
var [TabsContextProvider, useTabsContext] = (0, import_react_context.createContext)(TABS_NAME, {
|
|
@@ -45,7 +46,7 @@ var [TabsContextProvider, useTabsContext] = (0, import_react_context.createConte
|
|
|
45
46
|
},
|
|
46
47
|
orientation: "vertical"
|
|
47
48
|
});
|
|
48
|
-
var TabsRoot = ({ children, classNames, activePart: propsActivePart, onActivePartChange, defaultActivePart, value: propsValue, onValueChange, defaultValue, orientation = "vertical", activationMode = "manual", ...props }) => {
|
|
49
|
+
var TabsRoot = ({ children, classNames, activePart: propsActivePart, onActivePartChange, defaultActivePart, value: propsValue, onValueChange, defaultValue, orientation = "vertical", activationMode = "manual", attendableId, ...props }) => {
|
|
49
50
|
const [activePart = "list", setActivePart] = (0, import_react_use_controllable_state.useControllableState)({
|
|
50
51
|
prop: propsActivePart,
|
|
51
52
|
onChange: onActivePartChange,
|
|
@@ -72,7 +73,9 @@ var TabsRoot = ({ children, classNames, activePart: propsActivePart, onActivePar
|
|
|
72
73
|
return /* @__PURE__ */ import_react.default.createElement(TabsContextProvider, {
|
|
73
74
|
orientation,
|
|
74
75
|
activePart,
|
|
75
|
-
setActivePart
|
|
76
|
+
setActivePart,
|
|
77
|
+
value,
|
|
78
|
+
attendableId
|
|
76
79
|
}, /* @__PURE__ */ import_react.default.createElement(TabsPrimitive.Root, {
|
|
77
80
|
activationMode,
|
|
78
81
|
"data-active": activePart,
|
|
@@ -97,9 +100,10 @@ var TabsViewport = ({ classNames, children, ...props }) => {
|
|
|
97
100
|
}, children);
|
|
98
101
|
};
|
|
99
102
|
var TabsTablist = ({ children, classNames, ...props }) => {
|
|
103
|
+
const { orientation } = useTabsContext("TabsTablist");
|
|
100
104
|
return /* @__PURE__ */ import_react.default.createElement(TabsPrimitive.List, {
|
|
101
105
|
...props,
|
|
102
|
-
className: (0, import_react_ui_theme.mx)("place-self-start max-bs-full is-full overflow-y-auto p-1", classNames)
|
|
106
|
+
className: (0, import_react_ui_theme.mx)("place-self-start max-bs-full is-full", orientation === "vertical" ? "overflow-y-auto p-1" : "flex items-stretch justify-start gap-2 overflow-x-auto p-2", classNames)
|
|
103
107
|
}, children);
|
|
104
108
|
};
|
|
105
109
|
var TabsBackButton = ({ onClick, classNames, ...props }) => {
|
|
@@ -127,7 +131,8 @@ var TabsTabGroupHeading = ({ children, classNames, ...props }) => {
|
|
|
127
131
|
}, children);
|
|
128
132
|
};
|
|
129
133
|
var TabsTab = ({ value, classNames, children, onClick, ...props }) => {
|
|
130
|
-
const { setActivePart } = useTabsContext("TabsTab");
|
|
134
|
+
const { setActivePart, orientation, value: contextValue, attendableId } = useTabsContext("TabsTab");
|
|
135
|
+
const { hasAttention } = (0, import_react_ui_attention.useAttention)(attendableId);
|
|
131
136
|
const handleClick = (0, import_react.useCallback)(
|
|
132
137
|
// NOTE: this handler is only called if the tab is *already active*.
|
|
133
138
|
(event) => {
|
|
@@ -144,12 +149,13 @@ var TabsTab = ({ value, classNames, children, onClick, ...props }) => {
|
|
|
144
149
|
asChild: true
|
|
145
150
|
}, /* @__PURE__ */ import_react.default.createElement(import_react_ui.Button, {
|
|
146
151
|
density: "fine",
|
|
147
|
-
variant: "ghost",
|
|
152
|
+
variant: orientation === "horizontal" && contextValue === value ? hasAttention ? "primary" : "default" : "ghost",
|
|
148
153
|
...props,
|
|
149
154
|
onClick: handleClick,
|
|
150
155
|
classNames: [
|
|
151
|
-
"
|
|
152
|
-
|
|
156
|
+
"pli-2 rounded-sm",
|
|
157
|
+
orientation === "vertical" && "block justify-start text-start is-full",
|
|
158
|
+
orientation === "vertical" && import_react_ui_theme.ghostSelectedContainerMd,
|
|
153
159
|
import_react_ui_theme.ghostHover,
|
|
154
160
|
classNames
|
|
155
161
|
]
|
|
@@ -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 { focusRing, 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} & Pick<TabsPrimitive.TabsProps, 'orientation'>;\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<{\n activePart: TabsActivePart;\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 ...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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,2BAAgC;AAChC,2BAA8B;AAC9B,oBAA+B;AAC/B,0CAAqC;AACrC,mBAA4G;AAE5G,sBAA+D;AAC/D,4BAAoE;AAIpE,IAAMA,YAAY;
|
|
6
|
-
"names": ["TABS_NAME", "TabsContextProvider", "useTabsContext", "createContext", "activePart", "setActivePart", "orientation", "TabsRoot", "children", "classNames", "propsActivePart", "onActivePartChange", "defaultActivePart", "value", "propsValue", "onValueChange", "defaultValue", "activationMode", "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", "Trigger", "asChild", "density", "variant", "ghostSelectedContainerMd", "ghostHover", "TabsTabpanel", "Content", "focusRing", "Tabs", "Tablist", "Tab", "TabGroupHeading", "Tabpanel", "BackButton", "Viewport"]
|
|
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 { focusRing, 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} & 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<{\n activePart: TabsActivePart;\n onActivePartChange: (nextActivePart: TabsActivePart) => void;\n defaultActivePart: TabsActivePart;\n attendableId?: string;\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 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 >\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 '[&[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 } = useTabsContext('TabsViewport');\n return (\n <div\n role='none'\n {...props}\n data-active={activePart}\n className={mx(\n orientation === 'vertical' && [\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 } = useTabsContext('TabsTablist');\n return (\n <TabsPrimitive.List\n {...props}\n className={mx(\n 'place-self-start max-bs-full is-full',\n orientation === 'vertical'\n ? 'overflow-y-auto p-1'\n : 'flex items-stretch justify-start gap-2 overflow-x-auto p-2',\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('rounded-sm', focusRing, classNames)}>\n {children}\n </TabsPrimitive.Content>\n );\n};\n\nexport const Tabs = {\n Root: TabsRoot,\n Tablist: TabsTablist,\n Tab: TabsTab,\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 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", "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", "focusRing", "Tabs", "Tablist", "Tab", "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":20931,"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":11328},"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":5188},"packages/ui/react-ui-tabs/src/index.ts":{"bytesInOutput":0}},"bytes":5284}}}
|
|
@@ -7,6 +7,7 @@ import * as TabsPrimitive from "@radix-ui/react-tabs";
|
|
|
7
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
|
+
import { useAttention } from "@dxos/react-ui-attention";
|
|
10
11
|
import { focusRing, ghostHover, ghostSelectedContainerMd, mx } from "@dxos/react-ui-theme";
|
|
11
12
|
var TABS_NAME = "Tabs";
|
|
12
13
|
var [TabsContextProvider, useTabsContext] = createContext(TABS_NAME, {
|
|
@@ -15,7 +16,7 @@ var [TabsContextProvider, useTabsContext] = createContext(TABS_NAME, {
|
|
|
15
16
|
},
|
|
16
17
|
orientation: "vertical"
|
|
17
18
|
});
|
|
18
|
-
var TabsRoot = ({ children, classNames, activePart: propsActivePart, onActivePartChange, defaultActivePart, value: propsValue, onValueChange, defaultValue, orientation = "vertical", activationMode = "manual", ...props }) => {
|
|
19
|
+
var TabsRoot = ({ children, classNames, activePart: propsActivePart, onActivePartChange, defaultActivePart, value: propsValue, onValueChange, defaultValue, orientation = "vertical", activationMode = "manual", attendableId, ...props }) => {
|
|
19
20
|
const [activePart = "list", setActivePart] = useControllableState({
|
|
20
21
|
prop: propsActivePart,
|
|
21
22
|
onChange: onActivePartChange,
|
|
@@ -42,7 +43,9 @@ var TabsRoot = ({ children, classNames, activePart: propsActivePart, onActivePar
|
|
|
42
43
|
return /* @__PURE__ */ React.createElement(TabsContextProvider, {
|
|
43
44
|
orientation,
|
|
44
45
|
activePart,
|
|
45
|
-
setActivePart
|
|
46
|
+
setActivePart,
|
|
47
|
+
value,
|
|
48
|
+
attendableId
|
|
46
49
|
}, /* @__PURE__ */ React.createElement(TabsPrimitive.Root, {
|
|
47
50
|
activationMode,
|
|
48
51
|
"data-active": activePart,
|
|
@@ -67,9 +70,10 @@ var TabsViewport = ({ classNames, children, ...props }) => {
|
|
|
67
70
|
}, children);
|
|
68
71
|
};
|
|
69
72
|
var TabsTablist = ({ children, classNames, ...props }) => {
|
|
73
|
+
const { orientation } = useTabsContext("TabsTablist");
|
|
70
74
|
return /* @__PURE__ */ React.createElement(TabsPrimitive.List, {
|
|
71
75
|
...props,
|
|
72
|
-
className: mx("place-self-start max-bs-full is-full overflow-y-auto p-1", classNames)
|
|
76
|
+
className: mx("place-self-start max-bs-full is-full", orientation === "vertical" ? "overflow-y-auto p-1" : "flex items-stretch justify-start gap-2 overflow-x-auto p-2", classNames)
|
|
73
77
|
}, children);
|
|
74
78
|
};
|
|
75
79
|
var TabsBackButton = ({ onClick, classNames, ...props }) => {
|
|
@@ -97,7 +101,8 @@ var TabsTabGroupHeading = ({ children, classNames, ...props }) => {
|
|
|
97
101
|
}, children);
|
|
98
102
|
};
|
|
99
103
|
var TabsTab = ({ value, classNames, children, onClick, ...props }) => {
|
|
100
|
-
const { setActivePart } = useTabsContext("TabsTab");
|
|
104
|
+
const { setActivePart, orientation, value: contextValue, attendableId } = useTabsContext("TabsTab");
|
|
105
|
+
const { hasAttention } = useAttention(attendableId);
|
|
101
106
|
const handleClick = useCallback(
|
|
102
107
|
// NOTE: this handler is only called if the tab is *already active*.
|
|
103
108
|
(event) => {
|
|
@@ -114,12 +119,13 @@ var TabsTab = ({ value, classNames, children, onClick, ...props }) => {
|
|
|
114
119
|
asChild: true
|
|
115
120
|
}, /* @__PURE__ */ React.createElement(Button, {
|
|
116
121
|
density: "fine",
|
|
117
|
-
variant: "ghost",
|
|
122
|
+
variant: orientation === "horizontal" && contextValue === value ? hasAttention ? "primary" : "default" : "ghost",
|
|
118
123
|
...props,
|
|
119
124
|
onClick: handleClick,
|
|
120
125
|
classNames: [
|
|
121
|
-
"
|
|
122
|
-
|
|
126
|
+
"pli-2 rounded-sm",
|
|
127
|
+
orientation === "vertical" && "block justify-start text-start is-full",
|
|
128
|
+
orientation === "vertical" && ghostSelectedContainerMd,
|
|
123
129
|
ghostHover,
|
|
124
130
|
classNames
|
|
125
131
|
]
|
|
@@ -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 { focusRing, 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} & Pick<TabsPrimitive.TabsProps, 'orientation'>;\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<{\n activePart: TabsActivePart;\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 ...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
|
|
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,WAAWC,YAAYC,0BAA0BC,UAAU;AAIpE,IAAMC,YAAY;
|
|
6
|
-
"names": ["useFocusFinders", "createContext", "TabsPrimitive", "useControllableState", "React", "useCallback", "useLayoutEffect", "useRef", "Button", "focusRing", "ghostHover", "ghostSelectedContainerMd", "mx", "TABS_NAME", "TabsContextProvider", "useTabsContext", "createContext", "activePart", "setActivePart", "orientation", "TabsRoot", "children", "classNames", "propsActivePart", "onActivePartChange", "defaultActivePart", "value", "propsValue", "onValueChange", "defaultValue", "activationMode", "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", "Trigger", "asChild", "density", "variant", "ghostSelectedContainerMd", "ghostHover", "TabsTabpanel", "Content", "focusRing", "Tabs", "Tablist", "Tab", "TabGroupHeading", "Tabpanel", "BackButton", "Viewport"]
|
|
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 { focusRing, 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} & 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<{\n activePart: TabsActivePart;\n onActivePartChange: (nextActivePart: TabsActivePart) => void;\n defaultActivePart: TabsActivePart;\n attendableId?: string;\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 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 >\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 '[&[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 } = useTabsContext('TabsViewport');\n return (\n <div\n role='none'\n {...props}\n data-active={activePart}\n className={mx(\n orientation === 'vertical' && [\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 } = useTabsContext('TabsTablist');\n return (\n <TabsPrimitive.List\n {...props}\n className={mx(\n 'place-self-start max-bs-full is-full',\n orientation === 'vertical'\n ? 'overflow-y-auto p-1'\n : 'flex items-stretch justify-start gap-2 overflow-x-auto p-2',\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('rounded-sm', focusRing, classNames)}>\n {children}\n </TabsPrimitive.Content>\n );\n};\n\nexport const Tabs = {\n Root: TabsRoot,\n Tablist: TabsTablist,\n Tab: TabsTab,\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 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", "focusRing", "ghostHover", "ghostSelectedContainerMd", "mx", "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", "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", "focusRing", "Tabs", "Tablist", "Tab", "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":20931,"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":11330},"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":5188},"packages/ui/react-ui-tabs/src/index.ts":{"bytesInOutput":0}},"bytes":5377}}}
|
package/dist/types/src/Tabs.d.ts
CHANGED
|
@@ -6,6 +6,7 @@ type TabsRootProps = ThemedClassName<TabsPrimitive.TabsProps> & Partial<{
|
|
|
6
6
|
activePart: TabsActivePart;
|
|
7
7
|
onActivePartChange: (nextActivePart: TabsActivePart) => void;
|
|
8
8
|
defaultActivePart: TabsActivePart;
|
|
9
|
+
attendableId?: string;
|
|
9
10
|
}>;
|
|
10
11
|
type TabsViewportProps = ThemedClassName<ComponentPropsWithoutRef<'div'>>;
|
|
11
12
|
type TabsTablistProps = ThemedClassName<TabsPrimitive.TabsListProps>;
|
|
@@ -13,7 +14,7 @@ type TabsTabGroupHeadingProps = ThemedClassName<ComponentPropsWithoutRef<'h2'>>;
|
|
|
13
14
|
type TabsTabProps = ButtonProps & Pick<TabsPrimitive.TabsTriggerProps, 'value'>;
|
|
14
15
|
type TabsTabpanelProps = ThemedClassName<TabsPrimitive.TabsContentProps>;
|
|
15
16
|
export declare const Tabs: {
|
|
16
|
-
Root: ({ children, classNames, activePart: propsActivePart, onActivePartChange, defaultActivePart, value: propsValue, onValueChange, defaultValue, orientation, activationMode, ...props }: TabsRootProps) => React.JSX.Element;
|
|
17
|
+
Root: ({ children, classNames, activePart: propsActivePart, onActivePartChange, defaultActivePart, value: propsValue, onValueChange, defaultValue, orientation, activationMode, attendableId, ...props }: TabsRootProps) => React.JSX.Element;
|
|
17
18
|
Tablist: ({ children, classNames, ...props }: TabsTablistProps) => React.JSX.Element;
|
|
18
19
|
Tab: ({ value, classNames, children, onClick, ...props }: TabsTabProps) => React.JSX.Element;
|
|
19
20
|
TabGroupHeading: ({ children, classNames, ...props }: ThemedClassName<TabsTabGroupHeadingProps>) => React.JSX.Element;
|
|
@@ -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;
|
|
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;AAgBvC,KAAK,aAAa,GAAG,eAAe,CAAC,aAAa,CAAC,SAAS,CAAC,GAC3D,OAAO,CAAC;IACN,UAAU,EAAE,cAAc,CAAC;IAC3B,kBAAkB,EAAE,CAAC,cAAc,EAAE,cAAc,KAAK,IAAI,CAAC;IAC7D,iBAAiB,EAAE,cAAc,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC,CAAC;AAyEL,KAAK,iBAAiB,GAAG,eAAe,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAC;AAsB1E,KAAK,gBAAgB,GAAG,eAAe,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;AAiCrE,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,eAAO,MAAM,IAAI;8MA1Kd,aAAa;kDAkFyC,gBAAgB;8DA2CJ,YAAY;0DAVhB,eAAe,CAAC,wBAAwB,CAAC;mDA+ChD,iBAAiB;oDA9DhB,WAAW;mDAxCZ,iBAAiB;CAsH1E,CAAC;AAEF,YAAY,EACV,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,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, ...props }: import("./Tabs").TabsRootProps) => React.JSX.Element;
|
|
4
|
+
component: ({ children, classNames, activePart: propsActivePart, onActivePartChange, defaultActivePart, value: propsValue, onValueChange, defaultValue, orientation, activationMode, attendableId, ...props }: import("./Tabs").TabsRootProps) => React.JSX.Element;
|
|
5
5
|
decorators: import("@storybook/react/*").Decorator[];
|
|
6
6
|
};
|
|
7
7
|
export default _default;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":"5.7.2"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/react-ui-tabs",
|
|
3
|
-
"version": "0.7.
|
|
3
|
+
"version": "0.7.5-feature-compute.4d9d99a",
|
|
4
4
|
"description": "Components for facilitating a Tabs pattern.",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
@@ -30,7 +30,8 @@
|
|
|
30
30
|
"@radix-ui/react-slot": "^1.0.1",
|
|
31
31
|
"@radix-ui/react-tabs": "^1.0.4",
|
|
32
32
|
"@radix-ui/react-use-controllable-state": "^1.0.0",
|
|
33
|
-
"@dxos/util": "0.7.
|
|
33
|
+
"@dxos/util": "0.7.5-feature-compute.4d9d99a",
|
|
34
|
+
"@dxos/react-ui-attention": "0.7.5-feature-compute.4d9d99a"
|
|
34
35
|
},
|
|
35
36
|
"devDependencies": {
|
|
36
37
|
"@types/react": "~18.2.0",
|
|
@@ -38,16 +39,16 @@
|
|
|
38
39
|
"react": "~18.2.0",
|
|
39
40
|
"react-dom": "~18.2.0",
|
|
40
41
|
"vite": "5.4.7",
|
|
41
|
-
"@dxos/random": "0.7.
|
|
42
|
-
"@dxos/react-ui": "0.7.
|
|
43
|
-
"@dxos/
|
|
44
|
-
"@dxos/
|
|
42
|
+
"@dxos/random": "0.7.5-feature-compute.4d9d99a",
|
|
43
|
+
"@dxos/react-ui": "0.7.5-feature-compute.4d9d99a",
|
|
44
|
+
"@dxos/react-ui-theme": "0.7.5-feature-compute.4d9d99a",
|
|
45
|
+
"@dxos/storybook-utils": "0.7.5-feature-compute.4d9d99a"
|
|
45
46
|
},
|
|
46
47
|
"peerDependencies": {
|
|
47
48
|
"react": "~18.2.0",
|
|
48
49
|
"react-dom": "~18.2.0",
|
|
49
|
-
"@dxos/react-ui": "0.7.
|
|
50
|
-
"@dxos/react-ui-theme": "0.7.
|
|
50
|
+
"@dxos/react-ui": "0.7.5-feature-compute.4d9d99a",
|
|
51
|
+
"@dxos/react-ui-theme": "0.7.5-feature-compute.4d9d99a"
|
|
51
52
|
},
|
|
52
53
|
"publishConfig": {
|
|
53
54
|
"access": "public"
|
package/src/Tabs.tsx
CHANGED
|
@@ -9,6 +9,7 @@ import { useControllableState } from '@radix-ui/react-use-controllable-state';
|
|
|
9
9
|
import React, { type ComponentPropsWithoutRef, type MouseEvent, useCallback, useLayoutEffect, useRef } from 'react';
|
|
10
10
|
|
|
11
11
|
import { Button, type ButtonProps, type ThemedClassName } from '@dxos/react-ui';
|
|
12
|
+
import { useAttention } from '@dxos/react-ui-attention';
|
|
12
13
|
import { focusRing, ghostHover, ghostSelectedContainerMd, mx } from '@dxos/react-ui-theme';
|
|
13
14
|
|
|
14
15
|
type TabsActivePart = 'list' | 'panel';
|
|
@@ -18,7 +19,8 @@ const TABS_NAME = 'Tabs';
|
|
|
18
19
|
type TabsContextValue = {
|
|
19
20
|
activePart: TabsActivePart;
|
|
20
21
|
setActivePart: (nextActivePart: TabsActivePart) => void;
|
|
21
|
-
|
|
22
|
+
attendableId?: string;
|
|
23
|
+
} & Pick<TabsPrimitive.TabsProps, 'orientation' | 'value'>;
|
|
22
24
|
|
|
23
25
|
const [TabsContextProvider, useTabsContext] = createContext<TabsContextValue>(TABS_NAME, {
|
|
24
26
|
activePart: 'list',
|
|
@@ -31,6 +33,7 @@ type TabsRootProps = ThemedClassName<TabsPrimitive.TabsProps> &
|
|
|
31
33
|
activePart: TabsActivePart;
|
|
32
34
|
onActivePartChange: (nextActivePart: TabsActivePart) => void;
|
|
33
35
|
defaultActivePart: TabsActivePart;
|
|
36
|
+
attendableId?: string;
|
|
34
37
|
}>;
|
|
35
38
|
|
|
36
39
|
const TabsRoot = ({
|
|
@@ -44,6 +47,7 @@ const TabsRoot = ({
|
|
|
44
47
|
defaultValue,
|
|
45
48
|
orientation = 'vertical',
|
|
46
49
|
activationMode = 'manual',
|
|
50
|
+
attendableId,
|
|
47
51
|
...props
|
|
48
52
|
}: TabsRootProps) => {
|
|
49
53
|
const [activePart = 'list', setActivePart] = useControllableState({
|
|
@@ -75,7 +79,13 @@ const TabsRoot = ({
|
|
|
75
79
|
}, [activePart]);
|
|
76
80
|
|
|
77
81
|
return (
|
|
78
|
-
<TabsContextProvider
|
|
82
|
+
<TabsContextProvider
|
|
83
|
+
orientation={orientation}
|
|
84
|
+
activePart={activePart}
|
|
85
|
+
setActivePart={setActivePart}
|
|
86
|
+
value={value}
|
|
87
|
+
attendableId={attendableId}
|
|
88
|
+
>
|
|
79
89
|
<TabsPrimitive.Root
|
|
80
90
|
activationMode={activationMode}
|
|
81
91
|
data-active={activePart}
|
|
@@ -122,10 +132,17 @@ const TabsViewport = ({ classNames, children, ...props }: TabsViewportProps) =>
|
|
|
122
132
|
type TabsTablistProps = ThemedClassName<TabsPrimitive.TabsListProps>;
|
|
123
133
|
|
|
124
134
|
const TabsTablist = ({ children, classNames, ...props }: TabsTablistProps) => {
|
|
135
|
+
const { orientation } = useTabsContext('TabsTablist');
|
|
125
136
|
return (
|
|
126
137
|
<TabsPrimitive.List
|
|
127
138
|
{...props}
|
|
128
|
-
className={mx(
|
|
139
|
+
className={mx(
|
|
140
|
+
'place-self-start max-bs-full is-full',
|
|
141
|
+
orientation === 'vertical'
|
|
142
|
+
? 'overflow-y-auto p-1'
|
|
143
|
+
: 'flex items-stretch justify-start gap-2 overflow-x-auto p-2',
|
|
144
|
+
classNames,
|
|
145
|
+
)}
|
|
129
146
|
>
|
|
130
147
|
{children}
|
|
131
148
|
</TabsPrimitive.List>
|
|
@@ -158,7 +175,8 @@ const TabsTabGroupHeading = ({ children, classNames, ...props }: ThemedClassName
|
|
|
158
175
|
type TabsTabProps = ButtonProps & Pick<TabsPrimitive.TabsTriggerProps, 'value'>;
|
|
159
176
|
|
|
160
177
|
const TabsTab = ({ value, classNames, children, onClick, ...props }: TabsTabProps) => {
|
|
161
|
-
const { setActivePart } = useTabsContext('TabsTab');
|
|
178
|
+
const { setActivePart, orientation, value: contextValue, attendableId } = useTabsContext('TabsTab');
|
|
179
|
+
const { hasAttention } = useAttention(attendableId);
|
|
162
180
|
const handleClick = useCallback(
|
|
163
181
|
// NOTE: this handler is only called if the tab is *already active*.
|
|
164
182
|
(event: MouseEvent<HTMLButtonElement>) => {
|
|
@@ -172,12 +190,15 @@ const TabsTab = ({ value, classNames, children, onClick, ...props }: TabsTabProp
|
|
|
172
190
|
<TabsPrimitive.Trigger value={value} asChild>
|
|
173
191
|
<Button
|
|
174
192
|
density='fine'
|
|
175
|
-
variant=
|
|
193
|
+
variant={
|
|
194
|
+
orientation === 'horizontal' && contextValue === value ? (hasAttention ? 'primary' : 'default') : 'ghost'
|
|
195
|
+
}
|
|
176
196
|
{...props}
|
|
177
197
|
onClick={handleClick}
|
|
178
198
|
classNames={[
|
|
179
|
-
'
|
|
180
|
-
|
|
199
|
+
'pli-2 rounded-sm',
|
|
200
|
+
orientation === 'vertical' && 'block justify-start text-start is-full',
|
|
201
|
+
orientation === 'vertical' && ghostSelectedContainerMd,
|
|
181
202
|
ghostHover,
|
|
182
203
|
classNames,
|
|
183
204
|
]}
|