@dxos/react-ui-tabs 0.6.13 → 0.6.14-main.69511f5
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 +19 -10
- package/dist/lib/browser/index.mjs.map +2 -2
- package/dist/lib/browser/meta.json +1 -1
- package/dist/types/src/Tabs.d.ts.map +1 -1
- package/package.json +14 -11
- package/src/Tabs.stories.tsx +1 -1
- package/src/Tabs.tsx +15 -8
|
@@ -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 }) => {
|
|
@@ -86,18 +91,22 @@ var TabsBackButton = ({ onClick, classNames, ...props }) => {
|
|
|
86
91
|
var TabsTabGroupHeading = ({ children, classNames, ...props }) => {
|
|
87
92
|
return /* @__PURE__ */ React.createElement("h2", {
|
|
88
93
|
...props,
|
|
89
|
-
className: mx("mlb-1 pli-2 text-sm
|
|
94
|
+
className: mx("mlb-1 pli-2 text-sm text-unAccent", classNames)
|
|
90
95
|
}, children);
|
|
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.
|
|
3
|
+
"version": "0.6.14-main.69511f5",
|
|
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,22 +29,24 @@
|
|
|
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/
|
|
32
|
-
"@dxos/react-ui-theme": "0.6.13",
|
|
33
|
-
"@dxos/util": "0.6.13"
|
|
32
|
+
"@dxos/util": "0.6.14-main.69511f5"
|
|
34
33
|
},
|
|
35
34
|
"devDependencies": {
|
|
36
35
|
"@types/react": "~18.2.0",
|
|
37
36
|
"@types/react-dom": "~18.2.0",
|
|
38
37
|
"react": "~18.2.0",
|
|
39
38
|
"react-dom": "~18.2.0",
|
|
40
|
-
"vite": "
|
|
41
|
-
"@dxos/random": "0.6.
|
|
42
|
-
"@dxos/
|
|
39
|
+
"vite": "5.4.7",
|
|
40
|
+
"@dxos/random": "0.6.14-main.69511f5",
|
|
41
|
+
"@dxos/react-ui": "0.6.14-main.69511f5",
|
|
42
|
+
"@dxos/react-ui-theme": "0.6.14-main.69511f5",
|
|
43
|
+
"@dxos/storybook-utils": "0.6.14-main.69511f5"
|
|
43
44
|
},
|
|
44
45
|
"peerDependencies": {
|
|
45
|
-
"react": "
|
|
46
|
-
"react-dom": "
|
|
46
|
+
"react": "~18.2.0",
|
|
47
|
+
"react-dom": "~18.2.0",
|
|
48
|
+
"@dxos/react-ui": "0.6.14-main.69511f5",
|
|
49
|
+
"@dxos/react-ui-theme": "0.6.14-main.69511f5"
|
|
47
50
|
},
|
|
48
51
|
"publishConfig": {
|
|
49
52
|
"access": "public"
|
package/src/Tabs.stories.tsx
CHANGED
|
@@ -21,7 +21,7 @@ const content = [...Array(24)].reduce((acc: { [key: string]: { title: string; pa
|
|
|
21
21
|
}, {});
|
|
22
22
|
|
|
23
23
|
export default {
|
|
24
|
-
title: 'react-ui-tabs/Tabs',
|
|
24
|
+
title: 'ui/react-ui-tabs/Tabs',
|
|
25
25
|
component: NaturalTabs.Root,
|
|
26
26
|
decorators: [withTheme],
|
|
27
27
|
// parameters: { translations },
|
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
|
|
|
@@ -143,7 +149,7 @@ type TabsTabGroupHeadingProps = ThemedClassName<ComponentPropsWithoutRef<'h2'>>;
|
|
|
143
149
|
|
|
144
150
|
const TabsTabGroupHeading = ({ children, classNames, ...props }: ThemedClassName<TabsTabGroupHeadingProps>) => {
|
|
145
151
|
return (
|
|
146
|
-
<h2 {...props} className={mx('mlb-1 pli-2 text-sm
|
|
152
|
+
<h2 {...props} className={mx('mlb-1 pli-2 text-sm text-unAccent', classNames)}>
|
|
147
153
|
{children}
|
|
148
154
|
</h2>
|
|
149
155
|
);
|
|
@@ -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
|