@dxos/react-ui-tabs 0.6.14-main.7bd9c89 → 0.6.14-main.f49f251
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.
|
@@ -27,7 +27,9 @@ var TabsRoot = ({ children, classNames, activePart: propsActivePart, onActivePar
|
|
|
27
27
|
const handleValueChange = useCallback((nextValue) => {
|
|
28
28
|
setActivePart("panel");
|
|
29
29
|
setValue(nextValue);
|
|
30
|
-
}, [
|
|
30
|
+
}, [
|
|
31
|
+
value
|
|
32
|
+
]);
|
|
31
33
|
const { findFirstFocusable } = useFocusFinders();
|
|
32
34
|
const tabsRoot = useRef(null);
|
|
33
35
|
useLayoutEffect(() => {
|
|
@@ -56,7 +58,10 @@ var TabsViewport = ({ classNames, children, ...props }) => {
|
|
|
56
58
|
role: "none",
|
|
57
59
|
...props,
|
|
58
60
|
"data-active": activePart,
|
|
59
|
-
className: mx(orientation === "vertical" &&
|
|
61
|
+
className: mx(orientation === "vertical" && [
|
|
62
|
+
"grid is-[200%] grid-cols-2 data-[active=panel]:mis-[-100%]",
|
|
63
|
+
"@md:is-auto @md:data-[active=panel]:mis-0 @md:grid-cols-[minmax(min-content,1fr)_3fr] @md:gap-1"
|
|
64
|
+
], classNames)
|
|
60
65
|
}, children);
|
|
61
66
|
};
|
|
62
67
|
var TabsTablist = ({ children, classNames, ...props }) => {
|
|
@@ -91,13 +96,17 @@ var TabsTabGroupHeading = ({ children, classNames, ...props }) => {
|
|
|
91
96
|
};
|
|
92
97
|
var TabsTab = ({ value, classNames, children, onClick, ...props }) => {
|
|
93
98
|
const { setActivePart } = useTabsContext("TabsTab");
|
|
94
|
-
const handleClick = useCallback(
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
99
|
+
const handleClick = useCallback(
|
|
100
|
+
// NOTE: this handler is only called if the tab is *already active*.
|
|
101
|
+
(event) => {
|
|
102
|
+
setActivePart("panel");
|
|
103
|
+
onClick?.(event);
|
|
104
|
+
},
|
|
105
|
+
[
|
|
106
|
+
setActivePart,
|
|
107
|
+
onClick
|
|
108
|
+
]
|
|
109
|
+
);
|
|
101
110
|
return /* @__PURE__ */ React.createElement(TabsPrimitive.Trigger, {
|
|
102
111
|
value,
|
|
103
112
|
asChild: true
|
|
@@ -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((nextValue: 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,WAAWC,YAAYC,0BAA0BC,UAAU;AAIpE,IAAMC,YAAY;AAOlB,IAAM,CAACC,qBAAqBC,cAAAA,IAAkBC,cAAgCH,WAAW;EACvFI,YAAY;EACZC,eAAe,MAAA;EAAO;EACtBC,aAAa;AACf,CAAA;AASA,IAAMC,WAAW,CAAC,EAChBC,UACAC,YACAL,YAAYM,iBACZC,oBACAC,mBACAC,OAAOC,YACPC,eACAC,cACAV,cAAc,YACdW,iBAAiB,UACjB,GAAGC,MAAAA,MACW;AACd,QAAM,CAACd,aAAa,QAAQC,aAAAA,IAAiBc,qBAAqB;IAChEC,MAAMV;IACNW,UAAUV;IACVW,aAAaV;EACf,CAAA;AAEA,QAAM,CAACC,OAAOU,QAAAA,IAAYJ,qBAAqB;IAC7CC,MAAMN;IACNO,UAAUN;IACVO,aAAaN;EACf,CAAA;AAEA,QAAMQ,oBAAoBC,
|
|
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 orientation={orientation} activePart={activePart} setActivePart={setActivePart}>\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 return (\n <TabsPrimitive.List\n {...props}\n className={mx('place-self-start max-bs-full is-full overflow-y-auto p-1', classNames)}\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 } = useTabsContext('TabsTab');\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='ghost'\n {...props}\n onClick={handleClick}\n classNames={[\n 'block is-full justify-start text-start pli-2 rounded-sm',\n 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
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"]
|
|
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":18920,"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-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":10266},"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-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":4668},"packages/ui/react-ui-tabs/src/index.ts":{"bytesInOutput":0}},"bytes":4764}}}
|
|
@@ -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;AAGhF,KAAK,cAAc,GAAG,MAAM,GAAG,OAAO,CAAC;AAevC,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;CACnC,CAAC,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;AAGhF,KAAK,cAAc,GAAG,MAAM,GAAG,OAAO,CAAC;AAevC,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;CACnC,CAAC,CAAC;AAkEL,KAAK,iBAAiB,GAAG,eAAe,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAC;AAsB1E,KAAK,gBAAgB,GAAG,eAAe,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;AA0BrE,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;AAiChF,KAAK,iBAAiB,GAAG,eAAe,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;AAUzE,eAAO,MAAM,IAAI;gMAzJd,aAAa;kDA4EyC,gBAAgB;8DAoCJ,YAAY;0DAVhB,eAAe,CAAC,wBAAwB,CAAC;mDA2ChD,iBAAiB;oDA1DhB,WAAW;mDAjCZ,iBAAiB;CA2G1E,CAAC;AAEF,YAAY,EACV,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,wBAAwB,EACxB,iBAAiB,EACjB,iBAAiB,GAClB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,15 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/react-ui-tabs",
|
|
3
|
-
"version": "0.6.14-main.
|
|
3
|
+
"version": "0.6.14-main.f49f251",
|
|
4
4
|
"description": "Components for facilitating a Tabs pattern.",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
7
7
|
"license": "MIT",
|
|
8
8
|
"author": "DXOS.org",
|
|
9
|
+
"sideEffects": true,
|
|
9
10
|
"exports": {
|
|
10
11
|
".": {
|
|
11
|
-
"
|
|
12
|
-
"
|
|
12
|
+
"types": "./dist/types/src/index.d.ts",
|
|
13
|
+
"browser": "./dist/lib/browser/index.mjs"
|
|
13
14
|
}
|
|
14
15
|
},
|
|
15
16
|
"types": "dist/types/src/index.d.ts",
|
|
@@ -28,7 +29,7 @@
|
|
|
28
29
|
"@radix-ui/react-slot": "^1.0.1",
|
|
29
30
|
"@radix-ui/react-tabs": "^1.0.4",
|
|
30
31
|
"@radix-ui/react-use-controllable-state": "^1.0.0",
|
|
31
|
-
"@dxos/util": "0.6.14-main.
|
|
32
|
+
"@dxos/util": "0.6.14-main.f49f251"
|
|
32
33
|
},
|
|
33
34
|
"devDependencies": {
|
|
34
35
|
"@types/react": "~18.2.0",
|
|
@@ -36,16 +37,16 @@
|
|
|
36
37
|
"react": "~18.2.0",
|
|
37
38
|
"react-dom": "~18.2.0",
|
|
38
39
|
"vite": "5.4.7",
|
|
39
|
-
"@dxos/
|
|
40
|
-
"@dxos/
|
|
41
|
-
"@dxos/
|
|
42
|
-
"@dxos/
|
|
40
|
+
"@dxos/react-ui-theme": "0.6.14-main.f49f251",
|
|
41
|
+
"@dxos/random": "0.6.14-main.f49f251",
|
|
42
|
+
"@dxos/storybook-utils": "0.6.14-main.f49f251",
|
|
43
|
+
"@dxos/react-ui": "0.6.14-main.f49f251"
|
|
43
44
|
},
|
|
44
45
|
"peerDependencies": {
|
|
45
46
|
"react": "~18.2.0",
|
|
46
47
|
"react-dom": "~18.2.0",
|
|
47
|
-
"@dxos/react-ui": "0.6.14-main.
|
|
48
|
-
"@dxos/react-ui-theme": "0.6.14-main.
|
|
48
|
+
"@dxos/react-ui": "0.6.14-main.f49f251",
|
|
49
|
+
"@dxos/react-ui-theme": "0.6.14-main.f49f251"
|
|
49
50
|
},
|
|
50
51
|
"publishConfig": {
|
|
51
52
|
"access": "public"
|
package/src/Tabs.tsx
CHANGED
|
@@ -58,10 +58,13 @@ const TabsRoot = ({
|
|
|
58
58
|
defaultProp: defaultValue,
|
|
59
59
|
});
|
|
60
60
|
|
|
61
|
-
const handleValueChange = useCallback(
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
61
|
+
const handleValueChange = useCallback(
|
|
62
|
+
(nextValue: string) => {
|
|
63
|
+
setActivePart('panel');
|
|
64
|
+
setValue(nextValue);
|
|
65
|
+
},
|
|
66
|
+
[value],
|
|
67
|
+
);
|
|
65
68
|
|
|
66
69
|
const { findFirstFocusable } = useFocusFinders();
|
|
67
70
|
|
|
@@ -104,8 +107,10 @@ const TabsViewport = ({ classNames, children, ...props }: TabsViewportProps) =>
|
|
|
104
107
|
{...props}
|
|
105
108
|
data-active={activePart}
|
|
106
109
|
className={mx(
|
|
107
|
-
orientation === 'vertical' &&
|
|
108
|
-
'grid is-[200%] grid-cols-2 data-[active=panel]:mis-[-100%]
|
|
110
|
+
orientation === 'vertical' && [
|
|
111
|
+
'grid is-[200%] grid-cols-2 data-[active=panel]:mis-[-100%]',
|
|
112
|
+
'@md:is-auto @md:data-[active=panel]:mis-0 @md:grid-cols-[minmax(min-content,1fr)_3fr] @md:gap-1',
|
|
113
|
+
],
|
|
109
114
|
classNames,
|
|
110
115
|
)}
|
|
111
116
|
>
|
|
@@ -136,6 +141,7 @@ const TabsBackButton = ({ onClick, classNames, ...props }: ButtonProps) => {
|
|
|
136
141
|
},
|
|
137
142
|
[onClick, setActivePart],
|
|
138
143
|
);
|
|
144
|
+
|
|
139
145
|
return <Button {...props} classNames={['is-full text-start @md:hidden mbe-2', classNames]} onClick={handleClick} />;
|
|
140
146
|
};
|
|
141
147
|
|
|
@@ -153,14 +159,15 @@ type TabsTabProps = ButtonProps & Pick<TabsPrimitive.TabsTriggerProps, 'value'>;
|
|
|
153
159
|
|
|
154
160
|
const TabsTab = ({ value, classNames, children, onClick, ...props }: TabsTabProps) => {
|
|
155
161
|
const { setActivePart } = useTabsContext('TabsTab');
|
|
156
|
-
// NOTE: this handler is only called if the tab is *already active*.
|
|
157
162
|
const handleClick = useCallback(
|
|
163
|
+
// NOTE: this handler is only called if the tab is *already active*.
|
|
158
164
|
(event: MouseEvent<HTMLButtonElement>) => {
|
|
159
165
|
setActivePart('panel');
|
|
160
166
|
onClick?.(event);
|
|
161
167
|
},
|
|
162
168
|
[setActivePart, onClick],
|
|
163
169
|
);
|
|
170
|
+
|
|
164
171
|
return (
|
|
165
172
|
<TabsPrimitive.Trigger value={value} asChild>
|
|
166
173
|
<Button
|