@dxos/react-ui-tabs 0.7.5-labs.e27f9b9 → 0.7.5-main.2567c87
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 +9 -11
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node/index.cjs +8 -10
- package/dist/lib/node/index.cjs.map +3 -3
- package/dist/lib/node/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +9 -11
- 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 +4 -10
- 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 +14 -21
|
@@ -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 { ghostHover, ghostSelectedContainerMd, mx } from "@dxos/react-ui-theme";
|
|
9
|
+
import { focusRing, 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",
|
|
17
|
+
var TabsRoot = ({ children, classNames, activePart: propsActivePart, onActivePartChange, defaultActivePart, value: propsValue, onValueChange, defaultValue, orientation = "vertical", activationMode = "manual", attendableId, ...props }) => {
|
|
18
18
|
const [activePart = "list", setActivePart] = useControllableState({
|
|
19
19
|
prop: propsActivePart,
|
|
20
20
|
onChange: onActivePartChange,
|
|
@@ -43,8 +43,7 @@ var TabsRoot = ({ children, classNames, activePart: propsActivePart, onActivePar
|
|
|
43
43
|
activePart,
|
|
44
44
|
setActivePart,
|
|
45
45
|
value,
|
|
46
|
-
attendableId
|
|
47
|
-
verticalVariant
|
|
46
|
+
attendableId
|
|
48
47
|
}, /* @__PURE__ */ React.createElement(TabsPrimitive.Root, {
|
|
49
48
|
activationMode,
|
|
50
49
|
"data-active": activePart,
|
|
@@ -52,27 +51,27 @@ var TabsRoot = ({ children, classNames, activePart: propsActivePart, onActivePar
|
|
|
52
51
|
...props,
|
|
53
52
|
value,
|
|
54
53
|
onValueChange: handleValueChange,
|
|
55
|
-
className: mx("overflow-hidden", orientation === "vertical" &&
|
|
54
|
+
className: mx("overflow-hidden", orientation === "vertical" && "[&[data-active=list]_[role=tabpanel]]:invisible @md:[&[data-active=list]_[role=tabpanel]]:visible", classNames),
|
|
56
55
|
ref: tabsRoot
|
|
57
56
|
}, children));
|
|
58
57
|
};
|
|
59
58
|
var TabsViewport = ({ classNames, children, ...props }) => {
|
|
60
|
-
const { orientation, activePart
|
|
59
|
+
const { orientation, activePart } = useTabsContext("TabsViewport");
|
|
61
60
|
return /* @__PURE__ */ React.createElement("div", {
|
|
62
61
|
role: "none",
|
|
63
62
|
...props,
|
|
64
63
|
"data-active": activePart,
|
|
65
|
-
className: mx(orientation === "vertical" &&
|
|
64
|
+
className: mx(orientation === "vertical" && [
|
|
66
65
|
"grid is-[200%] grid-cols-2 data-[active=panel]:mis-[-100%]",
|
|
67
66
|
"@md:is-auto @md:data-[active=panel]:mis-0 @md:grid-cols-[minmax(min-content,1fr)_3fr] @md:gap-1"
|
|
68
67
|
], classNames)
|
|
69
68
|
}, children);
|
|
70
69
|
};
|
|
71
70
|
var TabsTablist = ({ children, classNames, ...props }) => {
|
|
72
|
-
const { orientation
|
|
71
|
+
const { orientation } = useTabsContext("TabsTablist");
|
|
73
72
|
return /* @__PURE__ */ React.createElement(TabsPrimitive.List, {
|
|
74
73
|
...props,
|
|
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",
|
|
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)
|
|
76
75
|
}, children);
|
|
77
76
|
};
|
|
78
77
|
var TabsBackButton = ({ onClick, classNames, ...props }) => {
|
|
@@ -133,14 +132,13 @@ var TabsTab = ({ value, classNames, children, onClick, ...props }) => {
|
|
|
133
132
|
var TabsTabpanel = ({ classNames, children, ...props }) => {
|
|
134
133
|
return /* @__PURE__ */ React.createElement(TabsPrimitive.Content, {
|
|
135
134
|
...props,
|
|
136
|
-
className: mx("
|
|
135
|
+
className: mx("rounded-sm", focusRing, classNames)
|
|
137
136
|
}, children);
|
|
138
137
|
};
|
|
139
138
|
var Tabs = {
|
|
140
139
|
Root: TabsRoot,
|
|
141
140
|
Tablist: TabsTablist,
|
|
142
141
|
Tab: TabsTab,
|
|
143
|
-
TabPrimitive: TabsPrimitive.Trigger,
|
|
144
142
|
TabGroupHeading: TabsTabGroupHeading,
|
|
145
143
|
Tabpanel: TabsTabpanel,
|
|
146
144
|
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 { 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
|
|
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,YAAYC,0BAA0BC,UAAU;
|
|
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", "
|
|
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": ";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,WAAWC,YAAYC,0BAA0BC,UAAU;AAIpE,IAAMC,YAAY;AAQlB,IAAM,CAACC,qBAAqBC,cAAAA,IAAkBC,cAAgCH,WAAW;EACvFI,YAAY;EACZC,eAAe,MAAA;EAAO;EACtBC,aAAa;AACf,CAAA;AAUA,IAAMC,WAAW,CAAC,EAChBC,UACAC,YACAL,YAAYM,iBACZC,oBACAC,mBACAC,OAAOC,YACPC,eACAC,cACAV,cAAc,YACdW,iBAAiB,UACjBC,cACA,GAAGC,MAAAA,MACW;AACd,QAAM,CAACf,aAAa,QAAQC,aAAAA,IAAiBe,qBAAqB;IAChEC,MAAMX;IACNY,UAAUX;IACVY,aAAaX;EACf,CAAA;AAEA,QAAM,CAACC,OAAOW,QAAAA,IAAYJ,qBAAqB;IAC7CC,MAAMP;IACNQ,UAAUP;IACVQ,aAAaP;EACf,CAAA;AAEA,QAAMS,oBAAoBC,YACxB,CAACC,cAAAA;AACCtB,kBAAc,OAAA;AACdmB,aAASG,SAAAA;EACX,GACA;IAACd;GAAM;AAGT,QAAM,EAAEe,mBAAkB,IAAKC,gBAAAA;AAE/B,QAAMC,WAAWC,OAA8B,IAAA;AAE/CC,kBAAgB,MAAA;AACdF,aAASG,WAAWL,mBAAmBE,SAASG,OAAO,GAAGC,MAAAA;EAC5D,GAAG;IAAC9B;GAAW;AAEf,SACE,sBAAA,cAACH,qBAAAA;IACCK;IACAF;IACAC;IACAQ;IACAK;KAEA,sBAAA,cAAeiB,oBAAI;IACjBlB;IACAmB,eAAahC;IACbE;IACC,GAAGa;IACJN;IACAE,eAAeU;IACfY,WAAWC,GACT,mBACAhC,gBAAgB,cACd,qGACFG,UAAAA;IAEF8B,KAAKT;KAEJtB,QAAAA,CAAAA;AAIT;AAIA,IAAMgC,eAAe,CAAC,EAAE/B,YAAYD,UAAU,GAAGW,MAAAA,MAA0B;AACzE,QAAM,EAAEb,aAAaF,WAAU,IAAKF,eAAe,cAAA;AACnD,SACE,sBAAA,cAACuC,OAAAA;IACCC,MAAK;IACJ,GAAGvB;IACJiB,eAAahC;IACbiC,WAAWC,GACThC,gBAAgB,cAAc;MAC5B;MACA;OAEFG,UAAAA;KAGDD,QAAAA;AAGP;AAIA,IAAMmC,cAAc,CAAC,EAAEnC,UAAUC,YAAY,GAAGU,MAAAA,MAAyB;AACvE,QAAM,EAAEb,YAAW,IAAKJ,eAAe,aAAA;AACvC,SACE,sBAAA,cAAe0C,oBAAI;IAChB,GAAGzB;IACJkB,WAAWC,GACT,wCACAhC,gBAAgB,aACZ,wBACA,8DACJG,UAAAA;KAGDD,QAAAA;AAGP;AAEA,IAAMqC,iBAAiB,CAAC,EAAEC,SAASrC,YAAY,GAAGU,MAAAA,MAAoB;AACpE,QAAM,EAAEd,cAAa,IAAKH,eAAe,gBAAA;AACzC,QAAM6C,cAAcrB,YAClB,CAACsB,UAAAA;AACC3C,kBAAc,MAAA;AACd,WAAOyC,UAAUE,KAAAA;EACnB,GACA;IAACF;IAASzC;GAAc;AAG1B,SAAO,sBAAA,cAAC4C,QAAAA;IAAQ,GAAG9B;IAAOV,YAAY;MAAC;MAAuCA;;IAAaqC,SAASC;;AACtG;AAIA,IAAMG,sBAAsB,CAAC,EAAE1C,UAAUC,YAAY,GAAGU,MAAAA,MAAkD;AACxG,SACE,sBAAA,cAACgC,MAAAA;IAAI,GAAGhC;IAAOkB,WAAWC,GAAG,qCAAqC7B,UAAAA;KAC/DD,QAAAA;AAGP;AAIA,IAAM4C,UAAU,CAAC,EAAEvC,OAAOJ,YAAYD,UAAUsC,SAAS,GAAG3B,MAAAA,MAAqB;AAC/E,QAAM,EAAEd,eAAeC,aAAaO,OAAOwC,cAAcnC,aAAY,IAAKhB,eAAe,SAAA;AACzF,QAAM,EAAEoD,aAAY,IAAKC,aAAarC,YAAAA;AACtC,QAAM6B,cAAcrB;;IAElB,CAACsB,UAAAA;AACC3C,oBAAc,OAAA;AACdyC,gBAAUE,KAAAA;IACZ;IACA;MAAC3C;MAAeyC;;EAAQ;AAG1B,SACE,sBAAA,cAAeU,uBAAO;IAAC3C;IAAc4C,SAAAA;KACnC,sBAAA,cAACR,QAAAA;IACCS,SAAQ;IACRC,SACErD,gBAAgB,gBAAgB+C,iBAAiBxC,QAASyC,eAAe,YAAY,YAAa;IAEnG,GAAGnC;IACJ2B,SAASC;IACTtC,YAAY;MACV;MACAH,gBAAgB,cAAc;MAC9BA,gBAAgB,cAAcsD;MAC9BC;MACApD;;KAGDD,QAAAA,CAAAA;AAIT;AAIA,IAAMsD,eAAe,CAAC,EAAErD,YAAYD,UAAU,GAAGW,MAAAA,MAA0B;AACzE,SACE,sBAAA,cAAe4C,uBAAO;IAAE,GAAG5C;IAAOkB,WAAWC,GAAG,cAAc0B,WAAWvD,UAAAA;KACtED,QAAAA;AAGP;AAEO,IAAMyD,OAAO;EAClB9B,MAAM5B;EACN2D,SAASvB;EACTwB,KAAKf;EACLgB,iBAAiBlB;EACjBmB,UAAUP;EACVQ,YAAYzB;EACZ0B,UAAU/B;AACZ;",
|
|
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
|
@@ -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",
|
|
49
|
+
var TabsRoot = ({ children, classNames, activePart: propsActivePart, onActivePartChange, defaultActivePart, value: propsValue, onValueChange, defaultValue, orientation = "vertical", activationMode = "manual", attendableId, ...props }) => {
|
|
50
50
|
const [activePart = "list", setActivePart] = (0, import_react_use_controllable_state.useControllableState)({
|
|
51
51
|
prop: propsActivePart,
|
|
52
52
|
onChange: onActivePartChange,
|
|
@@ -75,8 +75,7 @@ var TabsRoot = ({ children, classNames, activePart: propsActivePart, onActivePar
|
|
|
75
75
|
activePart,
|
|
76
76
|
setActivePart,
|
|
77
77
|
value,
|
|
78
|
-
attendableId
|
|
79
|
-
verticalVariant
|
|
78
|
+
attendableId
|
|
80
79
|
}, /* @__PURE__ */ import_react.default.createElement(TabsPrimitive.Root, {
|
|
81
80
|
activationMode,
|
|
82
81
|
"data-active": activePart,
|
|
@@ -84,27 +83,27 @@ var TabsRoot = ({ children, classNames, activePart: propsActivePart, onActivePar
|
|
|
84
83
|
...props,
|
|
85
84
|
value,
|
|
86
85
|
onValueChange: handleValueChange,
|
|
87
|
-
className: (0, import_react_ui_theme.mx)("overflow-hidden", orientation === "vertical" &&
|
|
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),
|
|
88
87
|
ref: tabsRoot
|
|
89
88
|
}, children));
|
|
90
89
|
};
|
|
91
90
|
var TabsViewport = ({ classNames, children, ...props }) => {
|
|
92
|
-
const { orientation, activePart
|
|
91
|
+
const { orientation, activePart } = useTabsContext("TabsViewport");
|
|
93
92
|
return /* @__PURE__ */ import_react.default.createElement("div", {
|
|
94
93
|
role: "none",
|
|
95
94
|
...props,
|
|
96
95
|
"data-active": activePart,
|
|
97
|
-
className: (0, import_react_ui_theme.mx)(orientation === "vertical" &&
|
|
96
|
+
className: (0, import_react_ui_theme.mx)(orientation === "vertical" && [
|
|
98
97
|
"grid is-[200%] grid-cols-2 data-[active=panel]:mis-[-100%]",
|
|
99
98
|
"@md:is-auto @md:data-[active=panel]:mis-0 @md:grid-cols-[minmax(min-content,1fr)_3fr] @md:gap-1"
|
|
100
99
|
], classNames)
|
|
101
100
|
}, children);
|
|
102
101
|
};
|
|
103
102
|
var TabsTablist = ({ children, classNames, ...props }) => {
|
|
104
|
-
const { orientation
|
|
103
|
+
const { orientation } = useTabsContext("TabsTablist");
|
|
105
104
|
return /* @__PURE__ */ import_react.default.createElement(TabsPrimitive.List, {
|
|
106
105
|
...props,
|
|
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",
|
|
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)
|
|
108
107
|
}, children);
|
|
109
108
|
};
|
|
110
109
|
var TabsBackButton = ({ onClick, classNames, ...props }) => {
|
|
@@ -165,14 +164,13 @@ var TabsTab = ({ value, classNames, children, onClick, ...props }) => {
|
|
|
165
164
|
var TabsTabpanel = ({ classNames, children, ...props }) => {
|
|
166
165
|
return /* @__PURE__ */ import_react.default.createElement(TabsPrimitive.Content, {
|
|
167
166
|
...props,
|
|
168
|
-
className: (0, import_react_ui_theme.mx)("
|
|
167
|
+
className: (0, import_react_ui_theme.mx)("rounded-sm", import_react_ui_theme.focusRing, classNames)
|
|
169
168
|
}, children);
|
|
170
169
|
};
|
|
171
170
|
var Tabs = {
|
|
172
171
|
Root: TabsRoot,
|
|
173
172
|
Tablist: TabsTablist,
|
|
174
173
|
Tab: TabsTab,
|
|
175
|
-
TabPrimitive: TabsPrimitive.Trigger,
|
|
176
174
|
TabGroupHeading: TabsTabGroupHeading,
|
|
177
175
|
Tabpanel: TabsTabpanel,
|
|
178
176
|
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 { 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
|
|
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", "
|
|
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}}}
|
|
@@ -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 { ghostHover, ghostSelectedContainerMd, mx } from "@dxos/react-ui-theme";
|
|
11
|
+
import { focusRing, 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",
|
|
19
|
+
var TabsRoot = ({ children, classNames, activePart: propsActivePart, onActivePartChange, defaultActivePart, value: propsValue, onValueChange, defaultValue, orientation = "vertical", activationMode = "manual", attendableId, ...props }) => {
|
|
20
20
|
const [activePart = "list", setActivePart] = useControllableState({
|
|
21
21
|
prop: propsActivePart,
|
|
22
22
|
onChange: onActivePartChange,
|
|
@@ -45,8 +45,7 @@ var TabsRoot = ({ children, classNames, activePart: propsActivePart, onActivePar
|
|
|
45
45
|
activePart,
|
|
46
46
|
setActivePart,
|
|
47
47
|
value,
|
|
48
|
-
attendableId
|
|
49
|
-
verticalVariant
|
|
48
|
+
attendableId
|
|
50
49
|
}, /* @__PURE__ */ React.createElement(TabsPrimitive.Root, {
|
|
51
50
|
activationMode,
|
|
52
51
|
"data-active": activePart,
|
|
@@ -54,27 +53,27 @@ var TabsRoot = ({ children, classNames, activePart: propsActivePart, onActivePar
|
|
|
54
53
|
...props,
|
|
55
54
|
value,
|
|
56
55
|
onValueChange: handleValueChange,
|
|
57
|
-
className: mx("overflow-hidden", orientation === "vertical" &&
|
|
56
|
+
className: mx("overflow-hidden", orientation === "vertical" && "[&[data-active=list]_[role=tabpanel]]:invisible @md:[&[data-active=list]_[role=tabpanel]]:visible", classNames),
|
|
58
57
|
ref: tabsRoot
|
|
59
58
|
}, children));
|
|
60
59
|
};
|
|
61
60
|
var TabsViewport = ({ classNames, children, ...props }) => {
|
|
62
|
-
const { orientation, activePart
|
|
61
|
+
const { orientation, activePart } = useTabsContext("TabsViewport");
|
|
63
62
|
return /* @__PURE__ */ React.createElement("div", {
|
|
64
63
|
role: "none",
|
|
65
64
|
...props,
|
|
66
65
|
"data-active": activePart,
|
|
67
|
-
className: mx(orientation === "vertical" &&
|
|
66
|
+
className: mx(orientation === "vertical" && [
|
|
68
67
|
"grid is-[200%] grid-cols-2 data-[active=panel]:mis-[-100%]",
|
|
69
68
|
"@md:is-auto @md:data-[active=panel]:mis-0 @md:grid-cols-[minmax(min-content,1fr)_3fr] @md:gap-1"
|
|
70
69
|
], classNames)
|
|
71
70
|
}, children);
|
|
72
71
|
};
|
|
73
72
|
var TabsTablist = ({ children, classNames, ...props }) => {
|
|
74
|
-
const { orientation
|
|
73
|
+
const { orientation } = useTabsContext("TabsTablist");
|
|
75
74
|
return /* @__PURE__ */ React.createElement(TabsPrimitive.List, {
|
|
76
75
|
...props,
|
|
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",
|
|
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)
|
|
78
77
|
}, children);
|
|
79
78
|
};
|
|
80
79
|
var TabsBackButton = ({ onClick, classNames, ...props }) => {
|
|
@@ -135,14 +134,13 @@ var TabsTab = ({ value, classNames, children, onClick, ...props }) => {
|
|
|
135
134
|
var TabsTabpanel = ({ classNames, children, ...props }) => {
|
|
136
135
|
return /* @__PURE__ */ React.createElement(TabsPrimitive.Content, {
|
|
137
136
|
...props,
|
|
138
|
-
className: mx("
|
|
137
|
+
className: mx("rounded-sm", focusRing, classNames)
|
|
139
138
|
}, children);
|
|
140
139
|
};
|
|
141
140
|
var Tabs = {
|
|
142
141
|
Root: TabsRoot,
|
|
143
142
|
Tablist: TabsTablist,
|
|
144
143
|
Tab: TabsTab,
|
|
145
|
-
TabPrimitive: TabsPrimitive.Trigger,
|
|
146
144
|
TabGroupHeading: TabsTabGroupHeading,
|
|
147
145
|
Tabpanel: TabsTabpanel,
|
|
148
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 { 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
|
|
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,YAAYC,0BAA0BC,UAAU;
|
|
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", "
|
|
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
|
@@ -2,31 +2,25 @@ 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 TabsRootProps = ThemedClassName<TabsPrimitive.TabsProps> & Partial<{
|
|
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<{
|
|
12
7
|
onActivePartChange: (nextActivePart: TabsActivePart) => void;
|
|
13
8
|
defaultActivePart: TabsActivePart;
|
|
9
|
+
attendableId?: string;
|
|
14
10
|
}>;
|
|
15
11
|
type TabsViewportProps = ThemedClassName<ComponentPropsWithoutRef<'div'>>;
|
|
16
12
|
type TabsTablistProps = ThemedClassName<TabsPrimitive.TabsListProps>;
|
|
17
13
|
type TabsTabGroupHeadingProps = ThemedClassName<ComponentPropsWithoutRef<'h2'>>;
|
|
18
14
|
type TabsTabProps = ButtonProps & Pick<TabsPrimitive.TabsTriggerProps, 'value'>;
|
|
19
15
|
type TabsTabpanelProps = ThemedClassName<TabsPrimitive.TabsContentProps>;
|
|
20
|
-
type TabsTabPrimitiveProps = TabsPrimitive.TabsTriggerProps;
|
|
21
16
|
export declare const Tabs: {
|
|
22
|
-
Root: ({ children, classNames, activePart: propsActivePart, onActivePartChange, defaultActivePart, value: propsValue, onValueChange, defaultValue, orientation, activationMode,
|
|
17
|
+
Root: ({ children, classNames, activePart: propsActivePart, onActivePartChange, defaultActivePart, value: propsValue, onValueChange, defaultValue, orientation, activationMode, attendableId, ...props }: TabsRootProps) => React.JSX.Element;
|
|
23
18
|
Tablist: ({ children, classNames, ...props }: TabsTablistProps) => React.JSX.Element;
|
|
24
19
|
Tab: ({ value, classNames, children, onClick, ...props }: TabsTabProps) => React.JSX.Element;
|
|
25
|
-
TabPrimitive: React.ForwardRefExoticComponent<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
26
20
|
TabGroupHeading: ({ children, classNames, ...props }: ThemedClassName<TabsTabGroupHeadingProps>) => React.JSX.Element;
|
|
27
21
|
Tabpanel: ({ classNames, children, ...props }: TabsTabpanelProps) => React.JSX.Element;
|
|
28
22
|
BackButton: ({ onClick, classNames, ...props }: ButtonProps) => React.JSX.Element;
|
|
29
23
|
Viewport: ({ classNames, children, ...props }: TabsViewportProps) => React.JSX.Element;
|
|
30
24
|
};
|
|
31
|
-
export type { TabsActivePart, TabsRootProps, TabsTablistProps, TabsTabProps,
|
|
25
|
+
export type { TabsActivePart, TabsRootProps, TabsTablistProps, TabsTabProps, TabsTabGroupHeadingProps, TabsTabpanelProps, TabsViewportProps, };
|
|
32
26
|
//# 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;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,
|
|
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;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/react-ui-tabs",
|
|
3
|
-
"version": "0.7.5-
|
|
3
|
+
"version": "0.7.5-main.2567c87",
|
|
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": "9.
|
|
27
|
-
"@radix-ui/primitive": "1.
|
|
28
|
-
"@radix-ui/react-context": "1.
|
|
29
|
-
"@radix-ui/react-primitive": "
|
|
30
|
-
"@radix-ui/react-slot": "1.1
|
|
31
|
-
"@radix-ui/react-tabs": "1.
|
|
32
|
-
"@radix-ui/react-use-controllable-state": "1.
|
|
33
|
-
"@dxos/react-ui-attention": "0.7.5-
|
|
34
|
-
"@dxos/util": "0.7.5-
|
|
26
|
+
"@fluentui/react-tabster": "^9.19.0",
|
|
27
|
+
"@radix-ui/primitive": "^1.0.0",
|
|
28
|
+
"@radix-ui/react-context": "^1.0.0",
|
|
29
|
+
"@radix-ui/react-primitive": "^1.0.2",
|
|
30
|
+
"@radix-ui/react-slot": "^1.0.1",
|
|
31
|
+
"@radix-ui/react-tabs": "^1.0.4",
|
|
32
|
+
"@radix-ui/react-use-controllable-state": "^1.0.0",
|
|
33
|
+
"@dxos/react-ui-attention": "0.7.5-main.2567c87",
|
|
34
|
+
"@dxos/util": "0.7.5-main.2567c87"
|
|
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/
|
|
43
|
-
"@dxos/
|
|
44
|
-
"@dxos/storybook-utils": "0.7.5-
|
|
45
|
-
"@dxos/react-ui
|
|
42
|
+
"@dxos/random": "0.7.5-main.2567c87",
|
|
43
|
+
"@dxos/react-ui-theme": "0.7.5-main.2567c87",
|
|
44
|
+
"@dxos/storybook-utils": "0.7.5-main.2567c87",
|
|
45
|
+
"@dxos/react-ui": "0.7.5-main.2567c87"
|
|
46
46
|
},
|
|
47
47
|
"peerDependencies": {
|
|
48
48
|
"react": "~18.2.0",
|
|
49
49
|
"react-dom": "~18.2.0",
|
|
50
|
-
"@dxos/react-ui": "0.7.5-
|
|
51
|
-
"@dxos/react-ui-theme": "0.7.5-
|
|
50
|
+
"@dxos/react-ui": "0.7.5-main.2567c87",
|
|
51
|
+
"@dxos/react-ui-theme": "0.7.5-main.2567c87"
|
|
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]}>
|
|
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 { ghostHover, ghostSelectedContainerMd, mx } from '@dxos/react-ui-theme';
|
|
13
|
+
import { focusRing, ghostHover, ghostSelectedContainerMd, mx } from '@dxos/react-ui-theme';
|
|
14
14
|
|
|
15
15
|
type TabsActivePart = 'list' | 'panel';
|
|
16
16
|
|
|
@@ -20,7 +20,6 @@ type TabsContextValue = {
|
|
|
20
20
|
activePart: TabsActivePart;
|
|
21
21
|
setActivePart: (nextActivePart: TabsActivePart) => void;
|
|
22
22
|
attendableId?: string;
|
|
23
|
-
verticalVariant?: 'stateful' | 'stateless';
|
|
24
23
|
} & Pick<TabsPrimitive.TabsProps, 'orientation' | 'value'>;
|
|
25
24
|
|
|
26
25
|
const [TabsContextProvider, useTabsContext] = createContext<TabsContextValue>(TABS_NAME, {
|
|
@@ -30,10 +29,11 @@ const [TabsContextProvider, useTabsContext] = createContext<TabsContextValue>(TA
|
|
|
30
29
|
});
|
|
31
30
|
|
|
32
31
|
type TabsRootProps = ThemedClassName<TabsPrimitive.TabsProps> &
|
|
33
|
-
Partial<Pick<TabsContextValue, 'activePart' | 'verticalVariant' | 'attendableId'>> &
|
|
34
32
|
Partial<{
|
|
33
|
+
activePart: TabsActivePart;
|
|
35
34
|
onActivePartChange: (nextActivePart: TabsActivePart) => void;
|
|
36
35
|
defaultActivePart: TabsActivePart;
|
|
36
|
+
attendableId?: string;
|
|
37
37
|
}>;
|
|
38
38
|
|
|
39
39
|
const TabsRoot = ({
|
|
@@ -47,7 +47,6 @@ const TabsRoot = ({
|
|
|
47
47
|
defaultValue,
|
|
48
48
|
orientation = 'vertical',
|
|
49
49
|
activationMode = 'manual',
|
|
50
|
-
verticalVariant = 'stateful',
|
|
51
50
|
attendableId,
|
|
52
51
|
...props
|
|
53
52
|
}: TabsRootProps) => {
|
|
@@ -86,7 +85,6 @@ const TabsRoot = ({
|
|
|
86
85
|
setActivePart={setActivePart}
|
|
87
86
|
value={value}
|
|
88
87
|
attendableId={attendableId}
|
|
89
|
-
verticalVariant={verticalVariant}
|
|
90
88
|
>
|
|
91
89
|
<TabsPrimitive.Root
|
|
92
90
|
activationMode={activationMode}
|
|
@@ -98,7 +96,6 @@ const TabsRoot = ({
|
|
|
98
96
|
className={mx(
|
|
99
97
|
'overflow-hidden',
|
|
100
98
|
orientation === 'vertical' &&
|
|
101
|
-
verticalVariant === 'stateful' &&
|
|
102
99
|
'[&[data-active=list]_[role=tabpanel]]:invisible @md:[&[data-active=list]_[role=tabpanel]]:visible',
|
|
103
100
|
classNames,
|
|
104
101
|
)}
|
|
@@ -113,18 +110,17 @@ const TabsRoot = ({
|
|
|
113
110
|
type TabsViewportProps = ThemedClassName<ComponentPropsWithoutRef<'div'>>;
|
|
114
111
|
|
|
115
112
|
const TabsViewport = ({ classNames, children, ...props }: TabsViewportProps) => {
|
|
116
|
-
const { orientation, activePart
|
|
113
|
+
const { orientation, activePart } = useTabsContext('TabsViewport');
|
|
117
114
|
return (
|
|
118
115
|
<div
|
|
119
116
|
role='none'
|
|
120
117
|
{...props}
|
|
121
118
|
data-active={activePart}
|
|
122
119
|
className={mx(
|
|
123
|
-
orientation === 'vertical' &&
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
],
|
|
120
|
+
orientation === 'vertical' && [
|
|
121
|
+
'grid is-[200%] grid-cols-2 data-[active=panel]:mis-[-100%]',
|
|
122
|
+
'@md:is-auto @md:data-[active=panel]:mis-0 @md:grid-cols-[minmax(min-content,1fr)_3fr] @md:gap-1',
|
|
123
|
+
],
|
|
128
124
|
classNames,
|
|
129
125
|
)}
|
|
130
126
|
>
|
|
@@ -136,14 +132,15 @@ const TabsViewport = ({ classNames, children, ...props }: TabsViewportProps) =>
|
|
|
136
132
|
type TabsTablistProps = ThemedClassName<TabsPrimitive.TabsListProps>;
|
|
137
133
|
|
|
138
134
|
const TabsTablist = ({ children, classNames, ...props }: TabsTablistProps) => {
|
|
139
|
-
const { orientation
|
|
135
|
+
const { orientation } = useTabsContext('TabsTablist');
|
|
140
136
|
return (
|
|
141
137
|
<TabsPrimitive.List
|
|
142
138
|
{...props}
|
|
143
139
|
className={mx(
|
|
144
|
-
'max-bs-full is-full',
|
|
145
|
-
orientation === 'vertical'
|
|
146
|
-
|
|
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',
|
|
147
144
|
classNames,
|
|
148
145
|
)}
|
|
149
146
|
>
|
|
@@ -216,19 +213,16 @@ type TabsTabpanelProps = ThemedClassName<TabsPrimitive.TabsContentProps>;
|
|
|
216
213
|
|
|
217
214
|
const TabsTabpanel = ({ classNames, children, ...props }: TabsTabpanelProps) => {
|
|
218
215
|
return (
|
|
219
|
-
<TabsPrimitive.Content {...props} className={mx('
|
|
216
|
+
<TabsPrimitive.Content {...props} className={mx('rounded-sm', focusRing, classNames)}>
|
|
220
217
|
{children}
|
|
221
218
|
</TabsPrimitive.Content>
|
|
222
219
|
);
|
|
223
220
|
};
|
|
224
221
|
|
|
225
|
-
type TabsTabPrimitiveProps = TabsPrimitive.TabsTriggerProps;
|
|
226
|
-
|
|
227
222
|
export const Tabs = {
|
|
228
223
|
Root: TabsRoot,
|
|
229
224
|
Tablist: TabsTablist,
|
|
230
225
|
Tab: TabsTab,
|
|
231
|
-
TabPrimitive: TabsPrimitive.Trigger,
|
|
232
226
|
TabGroupHeading: TabsTabGroupHeading,
|
|
233
227
|
Tabpanel: TabsTabpanel,
|
|
234
228
|
BackButton: TabsBackButton,
|
|
@@ -240,7 +234,6 @@ export type {
|
|
|
240
234
|
TabsRootProps,
|
|
241
235
|
TabsTablistProps,
|
|
242
236
|
TabsTabProps,
|
|
243
|
-
TabsTabPrimitiveProps,
|
|
244
237
|
TabsTabGroupHeadingProps,
|
|
245
238
|
TabsTabpanelProps,
|
|
246
239
|
TabsViewportProps,
|