@dxos/react-ui-tabs 0.8.2-main.fbd8ed0 → 0.8.2-staging.4d6ad0f

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.
Files changed (10) hide show
  1. package/dist/lib/browser/index.mjs +154 -118
  2. package/dist/lib/browser/index.mjs.map +1 -1
  3. package/dist/lib/browser/meta.json +1 -1
  4. package/dist/lib/node/index.cjs +154 -118
  5. package/dist/lib/node/index.cjs.map +1 -1
  6. package/dist/lib/node/meta.json +1 -1
  7. package/dist/lib/node-esm/index.mjs +154 -118
  8. package/dist/lib/node-esm/index.mjs.map +1 -1
  9. package/dist/lib/node-esm/meta.json +1 -1
  10. package/package.json +10 -9
package/dist/lib/browser/index.mjs CHANGED
@@ -1,4 +1,5 @@
1
1
  // packages/ui/react-ui-tabs/src/Tabs.tsx
2
+ import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
2
3
  import { useFocusFinders, useArrowNavigationGroup, useFocusableGroup } from "@fluentui/react-tabster";
3
4
  import { createContext } from "@radix-ui/react-context";
4
5
  import * as TabsPrimitive from "@radix-ui/react-tabs";
@@ -15,136 +16,171 @@ var [TabsContextProvider, useTabsContext] = createContext(TABS_NAME, {
15
16
  orientation: "vertical"
16
17
  });
17
18
  var TabsRoot = ({ children, classNames, activePart: propsActivePart, onActivePartChange, defaultActivePart, value: propsValue, onValueChange, defaultValue, orientation = "vertical", activationMode = "manual", verticalVariant = "stateful", attendableId, ...props }) => {
18
- const _1 = useArrowNavigationGroup();
19
- const _2 = useFocusableGroup();
20
- const [activePart = "list", setActivePart] = useControllableState({
21
- prop: propsActivePart,
22
- onChange: onActivePartChange,
23
- defaultProp: defaultActivePart
24
- });
25
- const [value, setValue] = useControllableState({
26
- prop: propsValue,
27
- onChange: onValueChange,
28
- defaultProp: defaultValue
29
- });
30
- const handleValueChange = useCallback((nextValue) => {
31
- setActivePart("panel");
32
- setValue(nextValue);
33
- }, [
34
- value
35
- ]);
36
- const { findFirstFocusable } = useFocusFinders();
37
- const tabsRoot = useRef(null);
38
- useLayoutEffect(() => {
39
- if (tabsRoot.current) {
40
- findFirstFocusable(tabsRoot.current)?.focus();
41
- }
42
- }, [
43
- activePart
44
- ]);
45
- return /* @__PURE__ */ React.createElement(TabsContextProvider, {
46
- orientation,
47
- activePart,
48
- setActivePart,
49
- value,
50
- attendableId,
51
- verticalVariant
52
- }, /* @__PURE__ */ React.createElement(TabsPrimitive.Root, {
53
- activationMode,
54
- "data-active": activePart,
55
- orientation,
56
- ...props,
57
- value,
58
- onValueChange: handleValueChange,
59
- className: mx("overflow-hidden", orientation === "vertical" && verticalVariant === "stateful" && "[&[data-active=list]_[role=tabpanel]]:invisible @md:[&[data-active=list]_[role=tabpanel]]:visible", classNames),
60
- ref: tabsRoot
61
- }, children));
19
+ var _effect = _useSignals();
20
+ try {
21
+ const _1 = useArrowNavigationGroup();
22
+ const _2 = useFocusableGroup();
23
+ const [activePart = "list", setActivePart] = useControllableState({
24
+ prop: propsActivePart,
25
+ onChange: onActivePartChange,
26
+ defaultProp: defaultActivePart
27
+ });
28
+ const [value, setValue] = useControllableState({
29
+ prop: propsValue,
30
+ onChange: onValueChange,
31
+ defaultProp: defaultValue
32
+ });
33
+ const handleValueChange = useCallback((nextValue) => {
34
+ setActivePart("panel");
35
+ setValue(nextValue);
36
+ }, [
37
+ value
38
+ ]);
39
+ const { findFirstFocusable } = useFocusFinders();
40
+ const tabsRoot = useRef(null);
41
+ useLayoutEffect(() => {
42
+ if (tabsRoot.current) {
43
+ findFirstFocusable(tabsRoot.current)?.focus();
44
+ }
45
+ }, [
46
+ activePart
47
+ ]);
48
+ return /* @__PURE__ */ React.createElement(TabsContextProvider, {
49
+ orientation,
50
+ activePart,
51
+ setActivePart,
52
+ value,
53
+ attendableId,
54
+ verticalVariant
55
+ }, /* @__PURE__ */ React.createElement(TabsPrimitive.Root, {
56
+ activationMode,
57
+ "data-active": activePart,
58
+ orientation,
59
+ ...props,
60
+ value,
61
+ onValueChange: handleValueChange,
62
+ className: mx("overflow-hidden", orientation === "vertical" && verticalVariant === "stateful" && "[&[data-active=list]_[role=tabpanel]]:invisible @md:[&[data-active=list]_[role=tabpanel]]:visible", classNames),
63
+ ref: tabsRoot
64
+ }, children));
65
+ } finally {
66
+ _effect.f();
67
+ }
62
68
  };
63
69
  var TabsViewport = ({ classNames, children, ...props }) => {
64
- const { orientation, activePart, verticalVariant } = useTabsContext("TabsViewport");
65
- return /* @__PURE__ */ React.createElement("div", {
66
- role: "none",
67
- ...props,
68
- "data-active": activePart,
69
- className: mx(orientation === "vertical" && verticalVariant === "stateful" && [
70
- "grid is-[200%] grid-cols-2 data-[active=panel]:mis-[-100%]",
71
- "@md:is-auto @md:data-[active=panel]:mis-0 @md:grid-cols-[minmax(min-content,1fr)_3fr] @md:gap-1"
72
- ], classNames)
73
- }, children);
70
+ var _effect = _useSignals();
71
+ try {
72
+ const { orientation, activePart, verticalVariant } = useTabsContext("TabsViewport");
73
+ return /* @__PURE__ */ React.createElement("div", {
74
+ role: "none",
75
+ ...props,
76
+ "data-active": activePart,
77
+ className: mx(orientation === "vertical" && verticalVariant === "stateful" && [
78
+ "grid is-[200%] grid-cols-2 data-[active=panel]:mis-[-100%]",
79
+ "@md:is-auto @md:data-[active=panel]:mis-0 @md:grid-cols-[minmax(min-content,1fr)_3fr] @md:gap-1"
80
+ ], classNames)
81
+ }, children);
82
+ } finally {
83
+ _effect.f();
84
+ }
74
85
  };
75
86
  var TabsTablist = ({ children, classNames, ...props }) => {
76
- const { orientation, verticalVariant } = useTabsContext("TabsTablist");
77
- return /* @__PURE__ */ React.createElement(TabsPrimitive.List, {
78
- ...props,
79
- className: mx(
80
- "max-bs-full is-full",
81
- // NOTE: Padding should be common to Toolbar.
82
- orientation === "vertical" ? "overflow-y-auto" : "flex items-stretch justify-start overflow-x-auto p-1 gap-1",
83
- orientation === "vertical" && verticalVariant === "stateful" && "place-self-start p-1",
84
- classNames
85
- )
86
- }, children);
87
+ var _effect = _useSignals();
88
+ try {
89
+ const { orientation, verticalVariant } = useTabsContext("TabsTablist");
90
+ return /* @__PURE__ */ React.createElement(TabsPrimitive.List, {
91
+ ...props,
92
+ className: mx(
93
+ "max-bs-full is-full",
94
+ // NOTE: Padding should be common to Toolbar.
95
+ orientation === "vertical" ? "overflow-y-auto" : "flex items-stretch justify-start overflow-x-auto p-1 gap-1",
96
+ orientation === "vertical" && verticalVariant === "stateful" && "place-self-start p-1",
97
+ classNames
98
+ )
99
+ }, children);
100
+ } finally {
101
+ _effect.f();
102
+ }
87
103
  };
88
104
  var TabsBackButton = ({ onClick, classNames, ...props }) => {
89
- const { setActivePart } = useTabsContext("TabsBackButton");
90
- const handleClick = useCallback((event) => {
91
- setActivePart("list");
92
- return onClick?.(event);
93
- }, [
94
- onClick,
95
- setActivePart
96
- ]);
97
- return /* @__PURE__ */ React.createElement(Button, {
98
- ...props,
99
- classNames: [
100
- "is-full text-start @md:hidden mbe-2",
101
- classNames
102
- ],
103
- onClick: handleClick
104
- });
105
+ var _effect = _useSignals();
106
+ try {
107
+ const { setActivePart } = useTabsContext("TabsBackButton");
108
+ const handleClick = useCallback((event) => {
109
+ setActivePart("list");
110
+ return onClick?.(event);
111
+ }, [
112
+ onClick,
113
+ setActivePart
114
+ ]);
115
+ return /* @__PURE__ */ React.createElement(Button, {
116
+ ...props,
117
+ classNames: [
118
+ "is-full text-start @md:hidden mbe-2",
119
+ classNames
120
+ ],
121
+ onClick: handleClick
122
+ });
123
+ } finally {
124
+ _effect.f();
125
+ }
105
126
  };
106
127
  var TabsTabGroupHeading = ({ children, classNames, ...props }) => {
107
- return /* @__PURE__ */ React.createElement("h2", {
108
- ...props,
109
- className: mx("mlb-1 pli-2 text-sm text-unAccent", classNames)
110
- }, children);
128
+ var _effect = _useSignals();
129
+ try {
130
+ return /* @__PURE__ */ React.createElement("h2", {
131
+ ...props,
132
+ className: mx("mlb-1 pli-2 text-sm text-unAccent", classNames)
133
+ }, children);
134
+ } finally {
135
+ _effect.f();
136
+ }
111
137
  };
112
138
  var TabsTab = ({ value, classNames, children, onClick, ...props }) => {
113
- const { setActivePart, orientation, value: contextValue, attendableId } = useTabsContext("TabsTab");
114
- const { hasAttention } = useAttention(attendableId);
115
- const handleClick = useCallback(
116
- // NOTE: This handler is only called if the tab is *already active*.
117
- (event) => {
118
- setActivePart("panel");
119
- onClick?.(event);
120
- },
121
- [
122
- setActivePart,
123
- onClick
124
- ]
125
- );
126
- return /* @__PURE__ */ React.createElement(TabsPrimitive.Trigger, {
127
- value,
128
- asChild: true
129
- }, /* @__PURE__ */ React.createElement(Button, {
130
- density: "fine",
131
- variant: orientation === "horizontal" && contextValue === value ? hasAttention ? "primary" : "default" : "ghost",
132
- ...props,
133
- onClick: handleClick,
134
- classNames: [
135
- "pli-2 rounded-sm",
136
- orientation === "vertical" && "block justify-start text-start is-full",
137
- orientation === "vertical" && ghostSelectedContainerMd,
138
- ghostHover,
139
- classNames
140
- ]
141
- }, children));
139
+ var _effect = _useSignals();
140
+ try {
141
+ const { setActivePart, orientation, value: contextValue, attendableId } = useTabsContext("TabsTab");
142
+ const { hasAttention } = useAttention(attendableId);
143
+ const handleClick = useCallback(
144
+ // NOTE: This handler is only called if the tab is *already active*.
145
+ (event) => {
146
+ setActivePart("panel");
147
+ onClick?.(event);
148
+ },
149
+ [
150
+ setActivePart,
151
+ onClick
152
+ ]
153
+ );
154
+ return /* @__PURE__ */ React.createElement(TabsPrimitive.Trigger, {
155
+ value,
156
+ asChild: true
157
+ }, /* @__PURE__ */ React.createElement(Button, {
158
+ density: "fine",
159
+ variant: orientation === "horizontal" && contextValue === value ? hasAttention ? "primary" : "default" : "ghost",
160
+ ...props,
161
+ onClick: handleClick,
162
+ classNames: [
163
+ "pli-2 rounded-sm",
164
+ orientation === "vertical" && "block justify-start text-start is-full",
165
+ orientation === "vertical" && ghostSelectedContainerMd,
166
+ ghostHover,
167
+ classNames
168
+ ]
169
+ }, children));
170
+ } finally {
171
+ _effect.f();
172
+ }
142
173
  };
143
174
  var TabsTabpanel = ({ classNames, children, ...props }) => {
144
- return /* @__PURE__ */ React.createElement(TabsPrimitive.Content, {
145
- ...props,
146
- className: mx("dx-focus-ring-inset-over-all", classNames)
147
- }, children);
175
+ var _effect = _useSignals();
176
+ try {
177
+ return /* @__PURE__ */ React.createElement(TabsPrimitive.Content, {
178
+ ...props,
179
+ className: mx("dx-focus-ring-inset-over-all", classNames)
180
+ }, children);
181
+ } finally {
182
+ _effect.f();
183
+ }
148
184
  };
149
185
  var Tabs = {
150
186
  Root: TabsRoot,
package/dist/lib/browser/index.mjs.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../src/Tabs.tsx"],
4
4
  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { useFocusFinders, useArrowNavigationGroup, useFocusableGroup } from '@fluentui/react-tabster';\nimport { createContext } from '@radix-ui/react-context';\nimport * as TabsPrimitive from '@radix-ui/react-tabs';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { type ComponentPropsWithoutRef, type MouseEvent, useCallback, useLayoutEffect, useRef } from 'react';\n\nimport { Button, type ButtonProps, type ThemedClassName } from '@dxos/react-ui';\nimport { useAttention } from '@dxos/react-ui-attention';\nimport { ghostHover, ghostSelectedContainerMd, mx } from '@dxos/react-ui-theme';\n\ntype TabsActivePart = 'list' | 'panel';\n\nconst TABS_NAME = 'Tabs';\n\ntype TabsContextValue = {\n activePart: TabsActivePart;\n setActivePart: (nextActivePart: TabsActivePart) => void;\n attendableId?: string;\n verticalVariant?: 'stateful' | 'stateless';\n} & Pick<TabsPrimitive.TabsProps, 'orientation' | 'value'>;\n\nconst [TabsContextProvider, useTabsContext] = createContext<TabsContextValue>(TABS_NAME, {\n activePart: 'list',\n setActivePart: () => {},\n orientation: 'vertical',\n});\n\ntype TabsRootProps = ThemedClassName<TabsPrimitive.TabsProps> &\n Partial<Pick<TabsContextValue, 'activePart' | 'verticalVariant' | 'attendableId'>> &\n Partial<{\n onActivePartChange: (nextActivePart: TabsActivePart) => void;\n defaultActivePart: TabsActivePart;\n }>;\n\nconst TabsRoot = ({\n children,\n classNames,\n activePart: propsActivePart,\n onActivePartChange,\n defaultActivePart,\n value: propsValue,\n onValueChange,\n defaultValue,\n orientation = 'vertical',\n activationMode = 'manual',\n verticalVariant = 'stateful',\n attendableId,\n ...props\n}: TabsRootProps) => {\n // TODO(thure): Without these, we get Groupper/Mover `API used before initialization`, but why?\n const _1 = useArrowNavigationGroup();\n const _2 = useFocusableGroup();\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 const tabsRoot = useRef<HTMLDivElement | null>(null);\n\n useLayoutEffect(() => {\n if (tabsRoot.current) {\n findFirstFocusable(tabsRoot.current)?.focus();\n }\n }, [activePart]);\n\n return (\n <TabsContextProvider\n orientation={orientation}\n activePart={activePart}\n setActivePart={setActivePart}\n value={value}\n attendableId={attendableId}\n verticalVariant={verticalVariant}\n >\n <TabsPrimitive.Root\n activationMode={activationMode}\n data-active={activePart}\n orientation={orientation}\n {...props}\n value={value}\n onValueChange={handleValueChange}\n className={mx(\n 'overflow-hidden',\n orientation === 'vertical' &&\n verticalVariant === 'stateful' &&\n '[&[data-active=list]_[role=tabpanel]]:invisible @md:[&[data-active=list]_[role=tabpanel]]:visible',\n classNames,\n )}\n ref={tabsRoot}\n >\n {children}\n </TabsPrimitive.Root>\n </TabsContextProvider>\n );\n};\n\ntype TabsViewportProps = ThemedClassName<ComponentPropsWithoutRef<'div'>>;\n\nconst TabsViewport = ({ classNames, children, ...props }: TabsViewportProps) => {\n const { orientation, activePart, verticalVariant } = useTabsContext('TabsViewport');\n return (\n <div\n role='none'\n {...props}\n data-active={activePart}\n className={mx(\n orientation === 'vertical' &&\n verticalVariant === 'stateful' && [\n 'grid is-[200%] grid-cols-2 data-[active=panel]:mis-[-100%]',\n '@md:is-auto @md:data-[active=panel]:mis-0 @md:grid-cols-[minmax(min-content,1fr)_3fr] @md:gap-1',\n ],\n classNames,\n )}\n >\n {children}\n </div>\n );\n};\n\ntype TabsTablistProps = ThemedClassName<TabsPrimitive.TabsListProps>;\n\nconst TabsTablist = ({ children, classNames, ...props }: TabsTablistProps) => {\n const { orientation, verticalVariant } = useTabsContext('TabsTablist');\n return (\n <TabsPrimitive.List\n {...props}\n className={mx(\n 'max-bs-full is-full',\n // NOTE: Padding should be common to Toolbar.\n orientation === 'vertical' ? 'overflow-y-auto' : 'flex items-stretch justify-start overflow-x-auto p-1 gap-1',\n orientation === 'vertical' && verticalVariant === 'stateful' && 'place-self-start p-1',\n classNames,\n )}\n >\n {children}\n </TabsPrimitive.List>\n );\n};\n\nconst TabsBackButton = ({ onClick, classNames, ...props }: ButtonProps) => {\n const { setActivePart } = useTabsContext('TabsBackButton');\n const handleClick = useCallback(\n (event: MouseEvent<HTMLButtonElement>) => {\n setActivePart('list');\n return onClick?.(event);\n },\n [onClick, setActivePart],\n );\n\n return <Button {...props} classNames={['is-full text-start @md:hidden mbe-2', classNames]} onClick={handleClick} />;\n};\n\ntype TabsTabGroupHeadingProps = ThemedClassName<ComponentPropsWithoutRef<'h2'>>;\n\nconst TabsTabGroupHeading = ({ children, classNames, ...props }: ThemedClassName<TabsTabGroupHeadingProps>) => {\n return (\n <h2 {...props} className={mx('mlb-1 pli-2 text-sm text-unAccent', classNames)}>\n {children}\n </h2>\n );\n};\n\ntype TabsTabProps = ButtonProps & Pick<TabsPrimitive.TabsTriggerProps, 'value'>;\n\nconst TabsTab = ({ value, classNames, children, onClick, ...props }: TabsTabProps) => {\n const { setActivePart, orientation, value: contextValue, attendableId } = useTabsContext('TabsTab');\n const { hasAttention } = useAttention(attendableId);\n const handleClick = useCallback(\n // NOTE: This handler is only called if the tab is *already active*.\n (event: MouseEvent<HTMLButtonElement>) => {\n setActivePart('panel');\n onClick?.(event);\n },\n [setActivePart, onClick],\n );\n\n return (\n <TabsPrimitive.Trigger value={value} asChild>\n <Button\n density='fine'\n variant={\n orientation === 'horizontal' && contextValue === value ? (hasAttention ? 'primary' : 'default') : 'ghost'\n }\n {...props}\n onClick={handleClick}\n classNames={[\n 'pli-2 rounded-sm',\n orientation === 'vertical' && 'block justify-start text-start is-full',\n orientation === 'vertical' && ghostSelectedContainerMd,\n ghostHover,\n classNames,\n ]}\n >\n {children}\n </Button>\n </TabsPrimitive.Trigger>\n );\n};\n\ntype TabsTabpanelProps = ThemedClassName<TabsPrimitive.TabsContentProps>;\n\nconst TabsTabpanel = ({ classNames, children, ...props }: TabsTabpanelProps) => {\n return (\n <TabsPrimitive.Content {...props} className={mx('dx-focus-ring-inset-over-all', classNames)}>\n {children}\n </TabsPrimitive.Content>\n );\n};\n\ntype TabsTabPrimitiveProps = TabsPrimitive.TabsTriggerProps;\n\nexport const Tabs = {\n Root: TabsRoot,\n Tablist: TabsTablist,\n Tab: TabsTab,\n TabPrimitive: TabsPrimitive.Trigger,\n TabGroupHeading: TabsTabGroupHeading,\n Tabpanel: TabsTabpanel,\n BackButton: TabsBackButton,\n Viewport: TabsViewport,\n};\n\nexport type {\n TabsActivePart,\n TabsRootProps,\n TabsTablistProps,\n TabsTabProps,\n TabsTabPrimitiveProps,\n TabsTabGroupHeadingProps,\n TabsTabpanelProps,\n TabsViewportProps,\n};\n"],
5
- "mappings": "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",
5
+ "mappings": ";;AAIA,SAASA,iBAAiBC,yBAAyBC,yBAAyB;AAC5E,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;AAIzD,IAAMC,YAAY;AASlB,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,UACjBC,kBAAkB,YAClBC,cACA,GAAGC,MAAAA,MACW;;;AAEd,UAAMC,KAAKC,wBAAAA;AACX,UAAMC,KAAKC,kBAAAA;AACX,UAAM,CAACpB,aAAa,QAAQC,aAAAA,IAAiBoB,qBAAqB;MAChEC,MAAMhB;MACNiB,UAAUhB;MACViB,aAAahB;IACf,CAAA;AAEA,UAAM,CAACC,OAAOgB,QAAAA,IAAYJ,qBAAqB;MAC7CC,MAAMZ;MACNa,UAAUZ;MACVa,aAAaZ;IACf,CAAA;AAEA,UAAMc,oBAAoBC,YACxB,CAACC,cAAAA;AACC3B,oBAAc,OAAA;AACdwB,eAASG,SAAAA;IACX,GACA;MAACnB;KAAM;AAGT,UAAM,EAAEoB,mBAAkB,IAAKC,gBAAAA;AAC/B,UAAMC,WAAWC,OAA8B,IAAA;AAE/CC,oBAAgB,MAAA;AACd,UAAIF,SAASG,SAAS;AACpBL,2BAAmBE,SAASG,OAAO,GAAGC,MAAAA;MACxC;IACF,GAAG;MAACnC;KAAW;AAEf,WACE,sBAAA,cAACH,qBAAAA;MACCK;MACAF;MACAC;MACAQ;MACAM;MACAD;OAEA,sBAAA,cAAesB,oBAAI;MACjBvB;MACAwB,eAAarC;MACbE;MACC,GAAGc;MACJP;MACAE,eAAee;MACfY,WAAWC,GACT,mBACArC,gBAAgB,cACdY,oBAAoB,cACpB,qGACFT,UAAAA;MAEFmC,KAAKT;OAEJ3B,QAAAA,CAAAA;;;;AAIT;AAIA,IAAMqC,eAAe,CAAC,EAAEpC,YAAYD,UAAU,GAAGY,MAAAA,MAA0B;;;AACzE,UAAM,EAAEd,aAAaF,YAAYc,gBAAe,IAAKhB,eAAe,cAAA;AACpE,WACE,sBAAA,cAAC4C,OAAAA;MACCC,MAAK;MACJ,GAAG3B;MACJqB,eAAarC;MACbsC,WAAWC,GACTrC,gBAAgB,cACdY,oBAAoB,cAAc;QAChC;QACA;SAEJT,UAAAA;OAGDD,QAAAA;;;;AAGP;AAIA,IAAMwC,cAAc,CAAC,EAAExC,UAAUC,YAAY,GAAGW,MAAAA,MAAyB;;;AACvE,UAAM,EAAEd,aAAaY,gBAAe,IAAKhB,eAAe,aAAA;AACxD,WACE,sBAAA,cAAe+C,oBAAI;MAChB,GAAG7B;MACJsB,WAAWC;QACT;;QAEArC,gBAAgB,aAAa,oBAAoB;QACjDA,gBAAgB,cAAcY,oBAAoB,cAAc;QAChET;MAAAA;OAGDD,QAAAA;;;;AAGP;AAEA,IAAM0C,iBAAiB,CAAC,EAAEC,SAAS1C,YAAY,GAAGW,MAAAA,MAAoB;;;AACpE,UAAM,EAAEf,cAAa,IAAKH,eAAe,gBAAA;AACzC,UAAMkD,cAAcrB,YAClB,CAACsB,UAAAA;AACChD,oBAAc,MAAA;AACd,aAAO8C,UAAUE,KAAAA;IACnB,GACA;MAACF;MAAS9C;KAAc;AAG1B,WAAO,sBAAA,cAACiD,QAAAA;MAAQ,GAAGlC;MAAOX,YAAY;QAAC;QAAuCA;;MAAa0C,SAASC;;;;;AACtG;AAIA,IAAMG,sBAAsB,CAAC,EAAE/C,UAAUC,YAAY,GAAGW,MAAAA,MAAkD;;;AACxG,WACE,sBAAA,cAACoC,MAAAA;MAAI,GAAGpC;MAAOsB,WAAWC,GAAG,qCAAqClC,UAAAA;OAC/DD,QAAAA;;;;AAGP;AAIA,IAAMiD,UAAU,CAAC,EAAE5C,OAAOJ,YAAYD,UAAU2C,SAAS,GAAG/B,MAAAA,MAAqB;;;AAC/E,UAAM,EAAEf,eAAeC,aAAaO,OAAO6C,cAAcvC,aAAY,IAAKjB,eAAe,SAAA;AACzF,UAAM,EAAEyD,aAAY,IAAKC,aAAazC,YAAAA;AACtC,UAAMiC,cAAcrB;;MAElB,CAACsB,UAAAA;AACChD,sBAAc,OAAA;AACd8C,kBAAUE,KAAAA;MACZ;MACA;QAAChD;QAAe8C;;IAAQ;AAG1B,WACE,sBAAA,cAAeU,uBAAO;MAAChD;MAAciD,SAAAA;OACnC,sBAAA,cAACR,QAAAA;MACCS,SAAQ;MACRC,SACE1D,gBAAgB,gBAAgBoD,iBAAiB7C,QAAS8C,eAAe,YAAY,YAAa;MAEnG,GAAGvC;MACJ+B,SAASC;MACT3C,YAAY;QACV;QACAH,gBAAgB,cAAc;QAC9BA,gBAAgB,cAAc2D;QAC9BC;QACAzD;;OAGDD,QAAAA,CAAAA;;;;AAIT;AAIA,IAAM2D,eAAe,CAAC,EAAE1D,YAAYD,UAAU,GAAGY,MAAAA,MAA0B;;;AACzE,WACE,sBAAA,cAAegD,uBAAO;MAAE,GAAGhD;MAAOsB,WAAWC,GAAG,gCAAgClC,UAAAA;OAC7ED,QAAAA;;;;AAGP;AAIO,IAAM6D,OAAO;EAClB7B,MAAMjC;EACN+D,SAAStB;EACTuB,KAAKd;EACLe,cAA4BX;EAC5BY,iBAAiBlB;EACjBmB,UAAUP;EACVQ,YAAYzB;EACZ0B,UAAU/B;AACZ;",
6
6
  "names": ["useFocusFinders", "useArrowNavigationGroup", "useFocusableGroup", "createContext", "TabsPrimitive", "useControllableState", "React", "useCallback", "useLayoutEffect", "useRef", "Button", "useAttention", "ghostHover", "ghostSelectedContainerMd", "mx", "TABS_NAME", "TabsContextProvider", "useTabsContext", "createContext", "activePart", "setActivePart", "orientation", "TabsRoot", "children", "classNames", "propsActivePart", "onActivePartChange", "defaultActivePart", "value", "propsValue", "onValueChange", "defaultValue", "activationMode", "verticalVariant", "attendableId", "props", "_1", "useArrowNavigationGroup", "_2", "useFocusableGroup", "useControllableState", "prop", "onChange", "defaultProp", "setValue", "handleValueChange", "useCallback", "nextValue", "findFirstFocusable", "useFocusFinders", "tabsRoot", "useRef", "useLayoutEffect", "current", "focus", "Root", "data-active", "className", "mx", "ref", "TabsViewport", "div", "role", "TabsTablist", "List", "TabsBackButton", "onClick", "handleClick", "event", "Button", "TabsTabGroupHeading", "h2", "TabsTab", "contextValue", "hasAttention", "useAttention", "Trigger", "asChild", "density", "variant", "ghostSelectedContainerMd", "ghostHover", "TabsTabpanel", "Content", "Tabs", "Tablist", "Tab", "TabPrimitive", "TabGroupHeading", "Tabpanel", "BackButton", "Viewport"]
7
7
  }
package/dist/lib/browser/meta.json CHANGED
@@ -1 +1 @@
1
- {"inputs":{"packages/ui/react-ui-tabs/src/Tabs.tsx":{"bytes":22947,"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":12383},"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":5659},"packages/ui/react-ui-tabs/src/index.ts":{"bytesInOutput":0}},"bytes":5755}}}
1
+ {"inputs":{"packages/ui/react-ui-tabs/src/Tabs.tsx":{"bytes":23899,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"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":457,"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":12419},"packages/ui/react-ui-tabs/dist/lib/browser/index.mjs":{"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"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":6494},"packages/ui/react-ui-tabs/src/index.ts":{"bytesInOutput":0}},"bytes":6590}}}
package/dist/lib/node/index.cjs CHANGED
@@ -31,6 +31,7 @@ __export(node_exports, {
31
31
  Tabs: () => Tabs
32
32
  });
33
33
  module.exports = __toCommonJS(node_exports);
34
+ var import_tracking = require("@preact-signals/safe-react/tracking");
34
35
  var import_react_tabster = require("@fluentui/react-tabster");
35
36
  var import_react_context = require("@radix-ui/react-context");
36
37
  var TabsPrimitive = __toESM(require("@radix-ui/react-tabs"));
@@ -47,136 +48,171 @@ var [TabsContextProvider, useTabsContext] = (0, import_react_context.createConte
47
48
  orientation: "vertical"
48
49
  });
49
50
  var TabsRoot = ({ children, classNames, activePart: propsActivePart, onActivePartChange, defaultActivePart, value: propsValue, onValueChange, defaultValue, orientation = "vertical", activationMode = "manual", verticalVariant = "stateful", attendableId, ...props }) => {
50
- const _1 = (0, import_react_tabster.useArrowNavigationGroup)();
51
- const _2 = (0, import_react_tabster.useFocusableGroup)();
52
- const [activePart = "list", setActivePart] = (0, import_react_use_controllable_state.useControllableState)({
53
- prop: propsActivePart,
54
- onChange: onActivePartChange,
55
- defaultProp: defaultActivePart
56
- });
57
- const [value, setValue] = (0, import_react_use_controllable_state.useControllableState)({
58
- prop: propsValue,
59
- onChange: onValueChange,
60
- defaultProp: defaultValue
61
- });
62
- const handleValueChange = (0, import_react.useCallback)((nextValue) => {
63
- setActivePart("panel");
64
- setValue(nextValue);
65
- }, [
66
- value
67
- ]);
68
- const { findFirstFocusable } = (0, import_react_tabster.useFocusFinders)();
69
- const tabsRoot = (0, import_react.useRef)(null);
70
- (0, import_react.useLayoutEffect)(() => {
71
- if (tabsRoot.current) {
72
- findFirstFocusable(tabsRoot.current)?.focus();
73
- }
74
- }, [
75
- activePart
76
- ]);
77
- return /* @__PURE__ */ import_react.default.createElement(TabsContextProvider, {
78
- orientation,
79
- activePart,
80
- setActivePart,
81
- value,
82
- attendableId,
83
- verticalVariant
84
- }, /* @__PURE__ */ import_react.default.createElement(TabsPrimitive.Root, {
85
- activationMode,
86
- "data-active": activePart,
87
- orientation,
88
- ...props,
89
- value,
90
- onValueChange: handleValueChange,
91
- className: (0, import_react_ui_theme.mx)("overflow-hidden", orientation === "vertical" && verticalVariant === "stateful" && "[&[data-active=list]_[role=tabpanel]]:invisible @md:[&[data-active=list]_[role=tabpanel]]:visible", classNames),
92
- ref: tabsRoot
93
- }, children));
51
+ var _effect = (0, import_tracking.useSignals)();
52
+ try {
53
+ const _1 = (0, import_react_tabster.useArrowNavigationGroup)();
54
+ const _2 = (0, import_react_tabster.useFocusableGroup)();
55
+ const [activePart = "list", setActivePart] = (0, import_react_use_controllable_state.useControllableState)({
56
+ prop: propsActivePart,
57
+ onChange: onActivePartChange,
58
+ defaultProp: defaultActivePart
59
+ });
60
+ const [value, setValue] = (0, import_react_use_controllable_state.useControllableState)({
61
+ prop: propsValue,
62
+ onChange: onValueChange,
63
+ defaultProp: defaultValue
64
+ });
65
+ const handleValueChange = (0, import_react.useCallback)((nextValue) => {
66
+ setActivePart("panel");
67
+ setValue(nextValue);
68
+ }, [
69
+ value
70
+ ]);
71
+ const { findFirstFocusable } = (0, import_react_tabster.useFocusFinders)();
72
+ const tabsRoot = (0, import_react.useRef)(null);
73
+ (0, import_react.useLayoutEffect)(() => {
74
+ if (tabsRoot.current) {
75
+ findFirstFocusable(tabsRoot.current)?.focus();
76
+ }
77
+ }, [
78
+ activePart
79
+ ]);
80
+ return /* @__PURE__ */ import_react.default.createElement(TabsContextProvider, {
81
+ orientation,
82
+ activePart,
83
+ setActivePart,
84
+ value,
85
+ attendableId,
86
+ verticalVariant
87
+ }, /* @__PURE__ */ import_react.default.createElement(TabsPrimitive.Root, {
88
+ activationMode,
89
+ "data-active": activePart,
90
+ orientation,
91
+ ...props,
92
+ value,
93
+ onValueChange: handleValueChange,
94
+ className: (0, import_react_ui_theme.mx)("overflow-hidden", orientation === "vertical" && verticalVariant === "stateful" && "[&[data-active=list]_[role=tabpanel]]:invisible @md:[&[data-active=list]_[role=tabpanel]]:visible", classNames),
95
+ ref: tabsRoot
96
+ }, children));
97
+ } finally {
98
+ _effect.f();
99
+ }
94
100
  };
95
101
  var TabsViewport = ({ classNames, children, ...props }) => {
96
- const { orientation, activePart, verticalVariant } = useTabsContext("TabsViewport");
97
- return /* @__PURE__ */ import_react.default.createElement("div", {
98
- role: "none",
99
- ...props,
100
- "data-active": activePart,
101
- className: (0, import_react_ui_theme.mx)(orientation === "vertical" && verticalVariant === "stateful" && [
102
- "grid is-[200%] grid-cols-2 data-[active=panel]:mis-[-100%]",
103
- "@md:is-auto @md:data-[active=panel]:mis-0 @md:grid-cols-[minmax(min-content,1fr)_3fr] @md:gap-1"
104
- ], classNames)
105
- }, children);
102
+ var _effect = (0, import_tracking.useSignals)();
103
+ try {
104
+ const { orientation, activePart, verticalVariant } = useTabsContext("TabsViewport");
105
+ return /* @__PURE__ */ import_react.default.createElement("div", {
106
+ role: "none",
107
+ ...props,
108
+ "data-active": activePart,
109
+ className: (0, import_react_ui_theme.mx)(orientation === "vertical" && verticalVariant === "stateful" && [
110
+ "grid is-[200%] grid-cols-2 data-[active=panel]:mis-[-100%]",
111
+ "@md:is-auto @md:data-[active=panel]:mis-0 @md:grid-cols-[minmax(min-content,1fr)_3fr] @md:gap-1"
112
+ ], classNames)
113
+ }, children);
114
+ } finally {
115
+ _effect.f();
116
+ }
106
117
  };
107
118
  var TabsTablist = ({ children, classNames, ...props }) => {
108
- const { orientation, verticalVariant } = useTabsContext("TabsTablist");
109
- return /* @__PURE__ */ import_react.default.createElement(TabsPrimitive.List, {
110
- ...props,
111
- className: (0, import_react_ui_theme.mx)(
112
- "max-bs-full is-full",
113
- // NOTE: Padding should be common to Toolbar.
114
- orientation === "vertical" ? "overflow-y-auto" : "flex items-stretch justify-start overflow-x-auto p-1 gap-1",
115
- orientation === "vertical" && verticalVariant === "stateful" && "place-self-start p-1",
116
- classNames
117
- )
118
- }, children);
119
+ var _effect = (0, import_tracking.useSignals)();
120
+ try {
121
+ const { orientation, verticalVariant } = useTabsContext("TabsTablist");
122
+ return /* @__PURE__ */ import_react.default.createElement(TabsPrimitive.List, {
123
+ ...props,
124
+ className: (0, import_react_ui_theme.mx)(
125
+ "max-bs-full is-full",
126
+ // NOTE: Padding should be common to Toolbar.
127
+ orientation === "vertical" ? "overflow-y-auto" : "flex items-stretch justify-start overflow-x-auto p-1 gap-1",
128
+ orientation === "vertical" && verticalVariant === "stateful" && "place-self-start p-1",
129
+ classNames
130
+ )
131
+ }, children);
132
+ } finally {
133
+ _effect.f();
134
+ }
119
135
  };
120
136
  var TabsBackButton = ({ onClick, classNames, ...props }) => {
121
- const { setActivePart } = useTabsContext("TabsBackButton");
122
- const handleClick = (0, import_react.useCallback)((event) => {
123
- setActivePart("list");
124
- return onClick?.(event);
125
- }, [
126
- onClick,
127
- setActivePart
128
- ]);
129
- return /* @__PURE__ */ import_react.default.createElement(import_react_ui.Button, {
130
- ...props,
131
- classNames: [
132
- "is-full text-start @md:hidden mbe-2",
133
- classNames
134
- ],
135
- onClick: handleClick
136
- });
137
+ var _effect = (0, import_tracking.useSignals)();
138
+ try {
139
+ const { setActivePart } = useTabsContext("TabsBackButton");
140
+ const handleClick = (0, import_react.useCallback)((event) => {
141
+ setActivePart("list");
142
+ return onClick?.(event);
143
+ }, [
144
+ onClick,
145
+ setActivePart
146
+ ]);
147
+ return /* @__PURE__ */ import_react.default.createElement(import_react_ui.Button, {
148
+ ...props,
149
+ classNames: [
150
+ "is-full text-start @md:hidden mbe-2",
151
+ classNames
152
+ ],
153
+ onClick: handleClick
154
+ });
155
+ } finally {
156
+ _effect.f();
157
+ }
137
158
  };
138
159
  var TabsTabGroupHeading = ({ children, classNames, ...props }) => {
139
- return /* @__PURE__ */ import_react.default.createElement("h2", {
140
- ...props,
141
- className: (0, import_react_ui_theme.mx)("mlb-1 pli-2 text-sm text-unAccent", classNames)
142
- }, children);
160
+ var _effect = (0, import_tracking.useSignals)();
161
+ try {
162
+ return /* @__PURE__ */ import_react.default.createElement("h2", {
163
+ ...props,
164
+ className: (0, import_react_ui_theme.mx)("mlb-1 pli-2 text-sm text-unAccent", classNames)
165
+ }, children);
166
+ } finally {
167
+ _effect.f();
168
+ }
143
169
  };
144
170
  var TabsTab = ({ value, classNames, children, onClick, ...props }) => {
145
- const { setActivePart, orientation, value: contextValue, attendableId } = useTabsContext("TabsTab");
146
- const { hasAttention } = (0, import_react_ui_attention.useAttention)(attendableId);
147
- const handleClick = (0, import_react.useCallback)(
148
- // NOTE: This handler is only called if the tab is *already active*.
149
- (event) => {
150
- setActivePart("panel");
151
- onClick?.(event);
152
- },
153
- [
154
- setActivePart,
155
- onClick
156
- ]
157
- );
158
- return /* @__PURE__ */ import_react.default.createElement(TabsPrimitive.Trigger, {
159
- value,
160
- asChild: true
161
- }, /* @__PURE__ */ import_react.default.createElement(import_react_ui.Button, {
162
- density: "fine",
163
- variant: orientation === "horizontal" && contextValue === value ? hasAttention ? "primary" : "default" : "ghost",
164
- ...props,
165
- onClick: handleClick,
166
- classNames: [
167
- "pli-2 rounded-sm",
168
- orientation === "vertical" && "block justify-start text-start is-full",
169
- orientation === "vertical" && import_react_ui_theme.ghostSelectedContainerMd,
170
- import_react_ui_theme.ghostHover,
171
- classNames
172
- ]
173
- }, children));
171
+ var _effect = (0, import_tracking.useSignals)();
172
+ try {
173
+ const { setActivePart, orientation, value: contextValue, attendableId } = useTabsContext("TabsTab");
174
+ const { hasAttention } = (0, import_react_ui_attention.useAttention)(attendableId);
175
+ const handleClick = (0, import_react.useCallback)(
176
+ // NOTE: This handler is only called if the tab is *already active*.
177
+ (event) => {
178
+ setActivePart("panel");
179
+ onClick?.(event);
180
+ },
181
+ [
182
+ setActivePart,
183
+ onClick
184
+ ]
185
+ );
186
+ return /* @__PURE__ */ import_react.default.createElement(TabsPrimitive.Trigger, {
187
+ value,
188
+ asChild: true
189
+ }, /* @__PURE__ */ import_react.default.createElement(import_react_ui.Button, {
190
+ density: "fine",
191
+ variant: orientation === "horizontal" && contextValue === value ? hasAttention ? "primary" : "default" : "ghost",
192
+ ...props,
193
+ onClick: handleClick,
194
+ classNames: [
195
+ "pli-2 rounded-sm",
196
+ orientation === "vertical" && "block justify-start text-start is-full",
197
+ orientation === "vertical" && import_react_ui_theme.ghostSelectedContainerMd,
198
+ import_react_ui_theme.ghostHover,
199
+ classNames
200
+ ]
201
+ }, children));
202
+ } finally {
203
+ _effect.f();
204
+ }
174
205
  };
175
206
  var TabsTabpanel = ({ classNames, children, ...props }) => {
176
- return /* @__PURE__ */ import_react.default.createElement(TabsPrimitive.Content, {
177
- ...props,
178
- className: (0, import_react_ui_theme.mx)("dx-focus-ring-inset-over-all", classNames)
179
- }, children);
207
+ var _effect = (0, import_tracking.useSignals)();
208
+ try {
209
+ return /* @__PURE__ */ import_react.default.createElement(TabsPrimitive.Content, {
210
+ ...props,
211
+ className: (0, import_react_ui_theme.mx)("dx-focus-ring-inset-over-all", classNames)
212
+ }, children);
213
+ } finally {
214
+ _effect.f();
215
+ }
180
216
  };
181
217
  var Tabs = {
182
218
  Root: TabsRoot,
package/dist/lib/node/index.cjs.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../src/Tabs.tsx"],
4
4
  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { useFocusFinders, useArrowNavigationGroup, useFocusableGroup } from '@fluentui/react-tabster';\nimport { createContext } from '@radix-ui/react-context';\nimport * as TabsPrimitive from '@radix-ui/react-tabs';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { type ComponentPropsWithoutRef, type MouseEvent, useCallback, useLayoutEffect, useRef } from 'react';\n\nimport { Button, type ButtonProps, type ThemedClassName } from '@dxos/react-ui';\nimport { useAttention } from '@dxos/react-ui-attention';\nimport { ghostHover, ghostSelectedContainerMd, mx } from '@dxos/react-ui-theme';\n\ntype TabsActivePart = 'list' | 'panel';\n\nconst TABS_NAME = 'Tabs';\n\ntype TabsContextValue = {\n activePart: TabsActivePart;\n setActivePart: (nextActivePart: TabsActivePart) => void;\n attendableId?: string;\n verticalVariant?: 'stateful' | 'stateless';\n} & Pick<TabsPrimitive.TabsProps, 'orientation' | 'value'>;\n\nconst [TabsContextProvider, useTabsContext] = createContext<TabsContextValue>(TABS_NAME, {\n activePart: 'list',\n setActivePart: () => {},\n orientation: 'vertical',\n});\n\ntype TabsRootProps = ThemedClassName<TabsPrimitive.TabsProps> &\n Partial<Pick<TabsContextValue, 'activePart' | 'verticalVariant' | 'attendableId'>> &\n Partial<{\n onActivePartChange: (nextActivePart: TabsActivePart) => void;\n defaultActivePart: TabsActivePart;\n }>;\n\nconst TabsRoot = ({\n children,\n classNames,\n activePart: propsActivePart,\n onActivePartChange,\n defaultActivePart,\n value: propsValue,\n onValueChange,\n defaultValue,\n orientation = 'vertical',\n activationMode = 'manual',\n verticalVariant = 'stateful',\n attendableId,\n ...props\n}: TabsRootProps) => {\n // TODO(thure): Without these, we get Groupper/Mover `API used before initialization`, but why?\n const _1 = useArrowNavigationGroup();\n const _2 = useFocusableGroup();\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 const tabsRoot = useRef<HTMLDivElement | null>(null);\n\n useLayoutEffect(() => {\n if (tabsRoot.current) {\n findFirstFocusable(tabsRoot.current)?.focus();\n }\n }, [activePart]);\n\n return (\n <TabsContextProvider\n orientation={orientation}\n activePart={activePart}\n setActivePart={setActivePart}\n value={value}\n attendableId={attendableId}\n verticalVariant={verticalVariant}\n >\n <TabsPrimitive.Root\n activationMode={activationMode}\n data-active={activePart}\n orientation={orientation}\n {...props}\n value={value}\n onValueChange={handleValueChange}\n className={mx(\n 'overflow-hidden',\n orientation === 'vertical' &&\n verticalVariant === 'stateful' &&\n '[&[data-active=list]_[role=tabpanel]]:invisible @md:[&[data-active=list]_[role=tabpanel]]:visible',\n classNames,\n )}\n ref={tabsRoot}\n >\n {children}\n </TabsPrimitive.Root>\n </TabsContextProvider>\n );\n};\n\ntype TabsViewportProps = ThemedClassName<ComponentPropsWithoutRef<'div'>>;\n\nconst TabsViewport = ({ classNames, children, ...props }: TabsViewportProps) => {\n const { orientation, activePart, verticalVariant } = useTabsContext('TabsViewport');\n return (\n <div\n role='none'\n {...props}\n data-active={activePart}\n className={mx(\n orientation === 'vertical' &&\n verticalVariant === 'stateful' && [\n 'grid is-[200%] grid-cols-2 data-[active=panel]:mis-[-100%]',\n '@md:is-auto @md:data-[active=panel]:mis-0 @md:grid-cols-[minmax(min-content,1fr)_3fr] @md:gap-1',\n ],\n classNames,\n )}\n >\n {children}\n </div>\n );\n};\n\ntype TabsTablistProps = ThemedClassName<TabsPrimitive.TabsListProps>;\n\nconst TabsTablist = ({ children, classNames, ...props }: TabsTablistProps) => {\n const { orientation, verticalVariant } = useTabsContext('TabsTablist');\n return (\n <TabsPrimitive.List\n {...props}\n className={mx(\n 'max-bs-full is-full',\n // NOTE: Padding should be common to Toolbar.\n orientation === 'vertical' ? 'overflow-y-auto' : 'flex items-stretch justify-start overflow-x-auto p-1 gap-1',\n orientation === 'vertical' && verticalVariant === 'stateful' && 'place-self-start p-1',\n classNames,\n )}\n >\n {children}\n </TabsPrimitive.List>\n );\n};\n\nconst TabsBackButton = ({ onClick, classNames, ...props }: ButtonProps) => {\n const { setActivePart } = useTabsContext('TabsBackButton');\n const handleClick = useCallback(\n (event: MouseEvent<HTMLButtonElement>) => {\n setActivePart('list');\n return onClick?.(event);\n },\n [onClick, setActivePart],\n );\n\n return <Button {...props} classNames={['is-full text-start @md:hidden mbe-2', classNames]} onClick={handleClick} />;\n};\n\ntype TabsTabGroupHeadingProps = ThemedClassName<ComponentPropsWithoutRef<'h2'>>;\n\nconst TabsTabGroupHeading = ({ children, classNames, ...props }: ThemedClassName<TabsTabGroupHeadingProps>) => {\n return (\n <h2 {...props} className={mx('mlb-1 pli-2 text-sm text-unAccent', classNames)}>\n {children}\n </h2>\n );\n};\n\ntype TabsTabProps = ButtonProps & Pick<TabsPrimitive.TabsTriggerProps, 'value'>;\n\nconst TabsTab = ({ value, classNames, children, onClick, ...props }: TabsTabProps) => {\n const { setActivePart, orientation, value: contextValue, attendableId } = useTabsContext('TabsTab');\n const { hasAttention } = useAttention(attendableId);\n const handleClick = useCallback(\n // NOTE: This handler is only called if the tab is *already active*.\n (event: MouseEvent<HTMLButtonElement>) => {\n setActivePart('panel');\n onClick?.(event);\n },\n [setActivePart, onClick],\n );\n\n return (\n <TabsPrimitive.Trigger value={value} asChild>\n <Button\n density='fine'\n variant={\n orientation === 'horizontal' && contextValue === value ? (hasAttention ? 'primary' : 'default') : 'ghost'\n }\n {...props}\n onClick={handleClick}\n classNames={[\n 'pli-2 rounded-sm',\n orientation === 'vertical' && 'block justify-start text-start is-full',\n orientation === 'vertical' && ghostSelectedContainerMd,\n ghostHover,\n classNames,\n ]}\n >\n {children}\n </Button>\n </TabsPrimitive.Trigger>\n );\n};\n\ntype TabsTabpanelProps = ThemedClassName<TabsPrimitive.TabsContentProps>;\n\nconst TabsTabpanel = ({ classNames, children, ...props }: TabsTabpanelProps) => {\n return (\n <TabsPrimitive.Content {...props} className={mx('dx-focus-ring-inset-over-all', classNames)}>\n {children}\n </TabsPrimitive.Content>\n );\n};\n\ntype TabsTabPrimitiveProps = TabsPrimitive.TabsTriggerProps;\n\nexport const Tabs = {\n Root: TabsRoot,\n Tablist: TabsTablist,\n Tab: TabsTab,\n TabPrimitive: TabsPrimitive.Trigger,\n TabGroupHeading: TabsTabGroupHeading,\n Tabpanel: TabsTabpanel,\n BackButton: TabsBackButton,\n Viewport: TabsViewport,\n};\n\nexport type {\n TabsActivePart,\n TabsRootProps,\n TabsTablistProps,\n TabsTabProps,\n TabsTabPrimitiveProps,\n TabsTabGroupHeadingProps,\n TabsTabpanelProps,\n TabsViewportProps,\n};\n"],
5
- "mappings": "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",
5
+ "mappings": "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",
6
6
  "names": ["TABS_NAME", "TabsContextProvider", "useTabsContext", "createContext", "activePart", "setActivePart", "orientation", "TabsRoot", "children", "classNames", "propsActivePart", "onActivePartChange", "defaultActivePart", "value", "propsValue", "onValueChange", "defaultValue", "activationMode", "verticalVariant", "attendableId", "props", "_1", "useArrowNavigationGroup", "_2", "useFocusableGroup", "useControllableState", "prop", "onChange", "defaultProp", "setValue", "handleValueChange", "useCallback", "nextValue", "findFirstFocusable", "useFocusFinders", "tabsRoot", "useRef", "useLayoutEffect", "current", "focus", "React", "Root", "data-active", "className", "mx", "ref", "TabsViewport", "div", "role", "TabsTablist", "List", "TabsBackButton", "onClick", "handleClick", "event", "Button", "TabsTabGroupHeading", "h2", "TabsTab", "contextValue", "hasAttention", "useAttention", "Trigger", "asChild", "density", "variant", "ghostSelectedContainerMd", "ghostHover", "TabsTabpanel", "Content", "Tabs", "Tablist", "Tab", "TabPrimitive", "TabGroupHeading", "Tabpanel", "BackButton", "Viewport"]
7
7
  }
package/dist/lib/node/meta.json CHANGED
@@ -1 +1 @@
1
- {"inputs":{"packages/ui/react-ui-tabs/src/Tabs.tsx":{"bytes":22947,"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":12383},"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":5659},"packages/ui/react-ui-tabs/src/index.ts":{"bytesInOutput":0}},"bytes":5755}}}
1
+ {"inputs":{"packages/ui/react-ui-tabs/src/Tabs.tsx":{"bytes":23899,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"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":457,"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":12419},"packages/ui/react-ui-tabs/dist/lib/node/index.cjs":{"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"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":6494},"packages/ui/react-ui-tabs/src/index.ts":{"bytesInOutput":0}},"bytes":6590}}}
package/dist/lib/node-esm/index.mjs CHANGED
@@ -1,6 +1,7 @@
1
1
  import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
2
2
 
3
3
  // packages/ui/react-ui-tabs/src/Tabs.tsx
4
+ import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
4
5
  import { useFocusFinders, useArrowNavigationGroup, useFocusableGroup } from "@fluentui/react-tabster";
5
6
  import { createContext } from "@radix-ui/react-context";
6
7
  import * as TabsPrimitive from "@radix-ui/react-tabs";
@@ -17,136 +18,171 @@ var [TabsContextProvider, useTabsContext] = createContext(TABS_NAME, {
17
18
  orientation: "vertical"
18
19
  });
19
20
  var TabsRoot = ({ children, classNames, activePart: propsActivePart, onActivePartChange, defaultActivePart, value: propsValue, onValueChange, defaultValue, orientation = "vertical", activationMode = "manual", verticalVariant = "stateful", attendableId, ...props }) => {
20
- const _1 = useArrowNavigationGroup();
21
- const _2 = useFocusableGroup();
22
- const [activePart = "list", setActivePart] = useControllableState({
23
- prop: propsActivePart,
24
- onChange: onActivePartChange,
25
- defaultProp: defaultActivePart
26
- });
27
- const [value, setValue] = useControllableState({
28
- prop: propsValue,
29
- onChange: onValueChange,
30
- defaultProp: defaultValue
31
- });
32
- const handleValueChange = useCallback((nextValue) => {
33
- setActivePart("panel");
34
- setValue(nextValue);
35
- }, [
36
- value
37
- ]);
38
- const { findFirstFocusable } = useFocusFinders();
39
- const tabsRoot = useRef(null);
40
- useLayoutEffect(() => {
41
- if (tabsRoot.current) {
42
- findFirstFocusable(tabsRoot.current)?.focus();
43
- }
44
- }, [
45
- activePart
46
- ]);
47
- return /* @__PURE__ */ React.createElement(TabsContextProvider, {
48
- orientation,
49
- activePart,
50
- setActivePart,
51
- value,
52
- attendableId,
53
- verticalVariant
54
- }, /* @__PURE__ */ React.createElement(TabsPrimitive.Root, {
55
- activationMode,
56
- "data-active": activePart,
57
- orientation,
58
- ...props,
59
- value,
60
- onValueChange: handleValueChange,
61
- className: mx("overflow-hidden", orientation === "vertical" && verticalVariant === "stateful" && "[&[data-active=list]_[role=tabpanel]]:invisible @md:[&[data-active=list]_[role=tabpanel]]:visible", classNames),
62
- ref: tabsRoot
63
- }, children));
21
+ var _effect = _useSignals();
22
+ try {
23
+ const _1 = useArrowNavigationGroup();
24
+ const _2 = useFocusableGroup();
25
+ const [activePart = "list", setActivePart] = useControllableState({
26
+ prop: propsActivePart,
27
+ onChange: onActivePartChange,
28
+ defaultProp: defaultActivePart
29
+ });
30
+ const [value, setValue] = useControllableState({
31
+ prop: propsValue,
32
+ onChange: onValueChange,
33
+ defaultProp: defaultValue
34
+ });
35
+ const handleValueChange = useCallback((nextValue) => {
36
+ setActivePart("panel");
37
+ setValue(nextValue);
38
+ }, [
39
+ value
40
+ ]);
41
+ const { findFirstFocusable } = useFocusFinders();
42
+ const tabsRoot = useRef(null);
43
+ useLayoutEffect(() => {
44
+ if (tabsRoot.current) {
45
+ findFirstFocusable(tabsRoot.current)?.focus();
46
+ }
47
+ }, [
48
+ activePart
49
+ ]);
50
+ return /* @__PURE__ */ React.createElement(TabsContextProvider, {
51
+ orientation,
52
+ activePart,
53
+ setActivePart,
54
+ value,
55
+ attendableId,
56
+ verticalVariant
57
+ }, /* @__PURE__ */ React.createElement(TabsPrimitive.Root, {
58
+ activationMode,
59
+ "data-active": activePart,
60
+ orientation,
61
+ ...props,
62
+ value,
63
+ onValueChange: handleValueChange,
64
+ className: mx("overflow-hidden", orientation === "vertical" && verticalVariant === "stateful" && "[&[data-active=list]_[role=tabpanel]]:invisible @md:[&[data-active=list]_[role=tabpanel]]:visible", classNames),
65
+ ref: tabsRoot
66
+ }, children));
67
+ } finally {
68
+ _effect.f();
69
+ }
64
70
  };
65
71
  var TabsViewport = ({ classNames, children, ...props }) => {
66
- const { orientation, activePart, verticalVariant } = useTabsContext("TabsViewport");
67
- return /* @__PURE__ */ React.createElement("div", {
68
- role: "none",
69
- ...props,
70
- "data-active": activePart,
71
- className: mx(orientation === "vertical" && verticalVariant === "stateful" && [
72
- "grid is-[200%] grid-cols-2 data-[active=panel]:mis-[-100%]",
73
- "@md:is-auto @md:data-[active=panel]:mis-0 @md:grid-cols-[minmax(min-content,1fr)_3fr] @md:gap-1"
74
- ], classNames)
75
- }, children);
72
+ var _effect = _useSignals();
73
+ try {
74
+ const { orientation, activePart, verticalVariant } = useTabsContext("TabsViewport");
75
+ return /* @__PURE__ */ React.createElement("div", {
76
+ role: "none",
77
+ ...props,
78
+ "data-active": activePart,
79
+ className: mx(orientation === "vertical" && verticalVariant === "stateful" && [
80
+ "grid is-[200%] grid-cols-2 data-[active=panel]:mis-[-100%]",
81
+ "@md:is-auto @md:data-[active=panel]:mis-0 @md:grid-cols-[minmax(min-content,1fr)_3fr] @md:gap-1"
82
+ ], classNames)
83
+ }, children);
84
+ } finally {
85
+ _effect.f();
86
+ }
76
87
  };
77
88
  var TabsTablist = ({ children, classNames, ...props }) => {
78
- const { orientation, verticalVariant } = useTabsContext("TabsTablist");
79
- return /* @__PURE__ */ React.createElement(TabsPrimitive.List, {
80
- ...props,
81
- className: mx(
82
- "max-bs-full is-full",
83
- // NOTE: Padding should be common to Toolbar.
84
- orientation === "vertical" ? "overflow-y-auto" : "flex items-stretch justify-start overflow-x-auto p-1 gap-1",
85
- orientation === "vertical" && verticalVariant === "stateful" && "place-self-start p-1",
86
- classNames
87
- )
88
- }, children);
89
+ var _effect = _useSignals();
90
+ try {
91
+ const { orientation, verticalVariant } = useTabsContext("TabsTablist");
92
+ return /* @__PURE__ */ React.createElement(TabsPrimitive.List, {
93
+ ...props,
94
+ className: mx(
95
+ "max-bs-full is-full",
96
+ // NOTE: Padding should be common to Toolbar.
97
+ orientation === "vertical" ? "overflow-y-auto" : "flex items-stretch justify-start overflow-x-auto p-1 gap-1",
98
+ orientation === "vertical" && verticalVariant === "stateful" && "place-self-start p-1",
99
+ classNames
100
+ )
101
+ }, children);
102
+ } finally {
103
+ _effect.f();
104
+ }
89
105
  };
90
106
  var TabsBackButton = ({ onClick, classNames, ...props }) => {
91
- const { setActivePart } = useTabsContext("TabsBackButton");
92
- const handleClick = useCallback((event) => {
93
- setActivePart("list");
94
- return onClick?.(event);
95
- }, [
96
- onClick,
97
- setActivePart
98
- ]);
99
- return /* @__PURE__ */ React.createElement(Button, {
100
- ...props,
101
- classNames: [
102
- "is-full text-start @md:hidden mbe-2",
103
- classNames
104
- ],
105
- onClick: handleClick
106
- });
107
+ var _effect = _useSignals();
108
+ try {
109
+ const { setActivePart } = useTabsContext("TabsBackButton");
110
+ const handleClick = useCallback((event) => {
111
+ setActivePart("list");
112
+ return onClick?.(event);
113
+ }, [
114
+ onClick,
115
+ setActivePart
116
+ ]);
117
+ return /* @__PURE__ */ React.createElement(Button, {
118
+ ...props,
119
+ classNames: [
120
+ "is-full text-start @md:hidden mbe-2",
121
+ classNames
122
+ ],
123
+ onClick: handleClick
124
+ });
125
+ } finally {
126
+ _effect.f();
127
+ }
107
128
  };
108
129
  var TabsTabGroupHeading = ({ children, classNames, ...props }) => {
109
- return /* @__PURE__ */ React.createElement("h2", {
110
- ...props,
111
- className: mx("mlb-1 pli-2 text-sm text-unAccent", classNames)
112
- }, children);
130
+ var _effect = _useSignals();
131
+ try {
132
+ return /* @__PURE__ */ React.createElement("h2", {
133
+ ...props,
134
+ className: mx("mlb-1 pli-2 text-sm text-unAccent", classNames)
135
+ }, children);
136
+ } finally {
137
+ _effect.f();
138
+ }
113
139
  };
114
140
  var TabsTab = ({ value, classNames, children, onClick, ...props }) => {
115
- const { setActivePart, orientation, value: contextValue, attendableId } = useTabsContext("TabsTab");
116
- const { hasAttention } = useAttention(attendableId);
117
- const handleClick = useCallback(
118
- // NOTE: This handler is only called if the tab is *already active*.
119
- (event) => {
120
- setActivePart("panel");
121
- onClick?.(event);
122
- },
123
- [
124
- setActivePart,
125
- onClick
126
- ]
127
- );
128
- return /* @__PURE__ */ React.createElement(TabsPrimitive.Trigger, {
129
- value,
130
- asChild: true
131
- }, /* @__PURE__ */ React.createElement(Button, {
132
- density: "fine",
133
- variant: orientation === "horizontal" && contextValue === value ? hasAttention ? "primary" : "default" : "ghost",
134
- ...props,
135
- onClick: handleClick,
136
- classNames: [
137
- "pli-2 rounded-sm",
138
- orientation === "vertical" && "block justify-start text-start is-full",
139
- orientation === "vertical" && ghostSelectedContainerMd,
140
- ghostHover,
141
- classNames
142
- ]
143
- }, children));
141
+ var _effect = _useSignals();
142
+ try {
143
+ const { setActivePart, orientation, value: contextValue, attendableId } = useTabsContext("TabsTab");
144
+ const { hasAttention } = useAttention(attendableId);
145
+ const handleClick = useCallback(
146
+ // NOTE: This handler is only called if the tab is *already active*.
147
+ (event) => {
148
+ setActivePart("panel");
149
+ onClick?.(event);
150
+ },
151
+ [
152
+ setActivePart,
153
+ onClick
154
+ ]
155
+ );
156
+ return /* @__PURE__ */ React.createElement(TabsPrimitive.Trigger, {
157
+ value,
158
+ asChild: true
159
+ }, /* @__PURE__ */ React.createElement(Button, {
160
+ density: "fine",
161
+ variant: orientation === "horizontal" && contextValue === value ? hasAttention ? "primary" : "default" : "ghost",
162
+ ...props,
163
+ onClick: handleClick,
164
+ classNames: [
165
+ "pli-2 rounded-sm",
166
+ orientation === "vertical" && "block justify-start text-start is-full",
167
+ orientation === "vertical" && ghostSelectedContainerMd,
168
+ ghostHover,
169
+ classNames
170
+ ]
171
+ }, children));
172
+ } finally {
173
+ _effect.f();
174
+ }
144
175
  };
145
176
  var TabsTabpanel = ({ classNames, children, ...props }) => {
146
- return /* @__PURE__ */ React.createElement(TabsPrimitive.Content, {
147
- ...props,
148
- className: mx("dx-focus-ring-inset-over-all", classNames)
149
- }, children);
177
+ var _effect = _useSignals();
178
+ try {
179
+ return /* @__PURE__ */ React.createElement(TabsPrimitive.Content, {
180
+ ...props,
181
+ className: mx("dx-focus-ring-inset-over-all", classNames)
182
+ }, children);
183
+ } finally {
184
+ _effect.f();
185
+ }
150
186
  };
151
187
  var Tabs = {
152
188
  Root: TabsRoot,
package/dist/lib/node-esm/index.mjs.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../src/Tabs.tsx"],
4
4
  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { useFocusFinders, useArrowNavigationGroup, useFocusableGroup } from '@fluentui/react-tabster';\nimport { createContext } from '@radix-ui/react-context';\nimport * as TabsPrimitive from '@radix-ui/react-tabs';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { type ComponentPropsWithoutRef, type MouseEvent, useCallback, useLayoutEffect, useRef } from 'react';\n\nimport { Button, type ButtonProps, type ThemedClassName } from '@dxos/react-ui';\nimport { useAttention } from '@dxos/react-ui-attention';\nimport { ghostHover, ghostSelectedContainerMd, mx } from '@dxos/react-ui-theme';\n\ntype TabsActivePart = 'list' | 'panel';\n\nconst TABS_NAME = 'Tabs';\n\ntype TabsContextValue = {\n activePart: TabsActivePart;\n setActivePart: (nextActivePart: TabsActivePart) => void;\n attendableId?: string;\n verticalVariant?: 'stateful' | 'stateless';\n} & Pick<TabsPrimitive.TabsProps, 'orientation' | 'value'>;\n\nconst [TabsContextProvider, useTabsContext] = createContext<TabsContextValue>(TABS_NAME, {\n activePart: 'list',\n setActivePart: () => {},\n orientation: 'vertical',\n});\n\ntype TabsRootProps = ThemedClassName<TabsPrimitive.TabsProps> &\n Partial<Pick<TabsContextValue, 'activePart' | 'verticalVariant' | 'attendableId'>> &\n Partial<{\n onActivePartChange: (nextActivePart: TabsActivePart) => void;\n defaultActivePart: TabsActivePart;\n }>;\n\nconst TabsRoot = ({\n children,\n classNames,\n activePart: propsActivePart,\n onActivePartChange,\n defaultActivePart,\n value: propsValue,\n onValueChange,\n defaultValue,\n orientation = 'vertical',\n activationMode = 'manual',\n verticalVariant = 'stateful',\n attendableId,\n ...props\n}: TabsRootProps) => {\n // TODO(thure): Without these, we get Groupper/Mover `API used before initialization`, but why?\n const _1 = useArrowNavigationGroup();\n const _2 = useFocusableGroup();\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 const tabsRoot = useRef<HTMLDivElement | null>(null);\n\n useLayoutEffect(() => {\n if (tabsRoot.current) {\n findFirstFocusable(tabsRoot.current)?.focus();\n }\n }, [activePart]);\n\n return (\n <TabsContextProvider\n orientation={orientation}\n activePart={activePart}\n setActivePart={setActivePart}\n value={value}\n attendableId={attendableId}\n verticalVariant={verticalVariant}\n >\n <TabsPrimitive.Root\n activationMode={activationMode}\n data-active={activePart}\n orientation={orientation}\n {...props}\n value={value}\n onValueChange={handleValueChange}\n className={mx(\n 'overflow-hidden',\n orientation === 'vertical' &&\n verticalVariant === 'stateful' &&\n '[&[data-active=list]_[role=tabpanel]]:invisible @md:[&[data-active=list]_[role=tabpanel]]:visible',\n classNames,\n )}\n ref={tabsRoot}\n >\n {children}\n </TabsPrimitive.Root>\n </TabsContextProvider>\n );\n};\n\ntype TabsViewportProps = ThemedClassName<ComponentPropsWithoutRef<'div'>>;\n\nconst TabsViewport = ({ classNames, children, ...props }: TabsViewportProps) => {\n const { orientation, activePart, verticalVariant } = useTabsContext('TabsViewport');\n return (\n <div\n role='none'\n {...props}\n data-active={activePart}\n className={mx(\n orientation === 'vertical' &&\n verticalVariant === 'stateful' && [\n 'grid is-[200%] grid-cols-2 data-[active=panel]:mis-[-100%]',\n '@md:is-auto @md:data-[active=panel]:mis-0 @md:grid-cols-[minmax(min-content,1fr)_3fr] @md:gap-1',\n ],\n classNames,\n )}\n >\n {children}\n </div>\n );\n};\n\ntype TabsTablistProps = ThemedClassName<TabsPrimitive.TabsListProps>;\n\nconst TabsTablist = ({ children, classNames, ...props }: TabsTablistProps) => {\n const { orientation, verticalVariant } = useTabsContext('TabsTablist');\n return (\n <TabsPrimitive.List\n {...props}\n className={mx(\n 'max-bs-full is-full',\n // NOTE: Padding should be common to Toolbar.\n orientation === 'vertical' ? 'overflow-y-auto' : 'flex items-stretch justify-start overflow-x-auto p-1 gap-1',\n orientation === 'vertical' && verticalVariant === 'stateful' && 'place-self-start p-1',\n classNames,\n )}\n >\n {children}\n </TabsPrimitive.List>\n );\n};\n\nconst TabsBackButton = ({ onClick, classNames, ...props }: ButtonProps) => {\n const { setActivePart } = useTabsContext('TabsBackButton');\n const handleClick = useCallback(\n (event: MouseEvent<HTMLButtonElement>) => {\n setActivePart('list');\n return onClick?.(event);\n },\n [onClick, setActivePart],\n );\n\n return <Button {...props} classNames={['is-full text-start @md:hidden mbe-2', classNames]} onClick={handleClick} />;\n};\n\ntype TabsTabGroupHeadingProps = ThemedClassName<ComponentPropsWithoutRef<'h2'>>;\n\nconst TabsTabGroupHeading = ({ children, classNames, ...props }: ThemedClassName<TabsTabGroupHeadingProps>) => {\n return (\n <h2 {...props} className={mx('mlb-1 pli-2 text-sm text-unAccent', classNames)}>\n {children}\n </h2>\n );\n};\n\ntype TabsTabProps = ButtonProps & Pick<TabsPrimitive.TabsTriggerProps, 'value'>;\n\nconst TabsTab = ({ value, classNames, children, onClick, ...props }: TabsTabProps) => {\n const { setActivePart, orientation, value: contextValue, attendableId } = useTabsContext('TabsTab');\n const { hasAttention } = useAttention(attendableId);\n const handleClick = useCallback(\n // NOTE: This handler is only called if the tab is *already active*.\n (event: MouseEvent<HTMLButtonElement>) => {\n setActivePart('panel');\n onClick?.(event);\n },\n [setActivePart, onClick],\n );\n\n return (\n <TabsPrimitive.Trigger value={value} asChild>\n <Button\n density='fine'\n variant={\n orientation === 'horizontal' && contextValue === value ? (hasAttention ? 'primary' : 'default') : 'ghost'\n }\n {...props}\n onClick={handleClick}\n classNames={[\n 'pli-2 rounded-sm',\n orientation === 'vertical' && 'block justify-start text-start is-full',\n orientation === 'vertical' && ghostSelectedContainerMd,\n ghostHover,\n classNames,\n ]}\n >\n {children}\n </Button>\n </TabsPrimitive.Trigger>\n );\n};\n\ntype TabsTabpanelProps = ThemedClassName<TabsPrimitive.TabsContentProps>;\n\nconst TabsTabpanel = ({ classNames, children, ...props }: TabsTabpanelProps) => {\n return (\n <TabsPrimitive.Content {...props} className={mx('dx-focus-ring-inset-over-all', classNames)}>\n {children}\n </TabsPrimitive.Content>\n );\n};\n\ntype TabsTabPrimitiveProps = TabsPrimitive.TabsTriggerProps;\n\nexport const Tabs = {\n Root: TabsRoot,\n Tablist: TabsTablist,\n Tab: TabsTab,\n TabPrimitive: TabsPrimitive.Trigger,\n TabGroupHeading: TabsTabGroupHeading,\n Tabpanel: TabsTabpanel,\n BackButton: TabsBackButton,\n Viewport: TabsViewport,\n};\n\nexport type {\n TabsActivePart,\n TabsRootProps,\n TabsTablistProps,\n TabsTabProps,\n TabsTabPrimitiveProps,\n TabsTabGroupHeadingProps,\n TabsTabpanelProps,\n TabsViewportProps,\n};\n"],
5
- "mappings": "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",
5
+ "mappings": "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",
6
6
  "names": ["useFocusFinders", "useArrowNavigationGroup", "useFocusableGroup", "createContext", "TabsPrimitive", "useControllableState", "React", "useCallback", "useLayoutEffect", "useRef", "Button", "useAttention", "ghostHover", "ghostSelectedContainerMd", "mx", "TABS_NAME", "TabsContextProvider", "useTabsContext", "createContext", "activePart", "setActivePart", "orientation", "TabsRoot", "children", "classNames", "propsActivePart", "onActivePartChange", "defaultActivePart", "value", "propsValue", "onValueChange", "defaultValue", "activationMode", "verticalVariant", "attendableId", "props", "_1", "useArrowNavigationGroup", "_2", "useFocusableGroup", "useControllableState", "prop", "onChange", "defaultProp", "setValue", "handleValueChange", "useCallback", "nextValue", "findFirstFocusable", "useFocusFinders", "tabsRoot", "useRef", "useLayoutEffect", "current", "focus", "Root", "data-active", "className", "mx", "ref", "TabsViewport", "div", "role", "TabsTablist", "List", "TabsBackButton", "onClick", "handleClick", "event", "Button", "TabsTabGroupHeading", "h2", "TabsTab", "contextValue", "hasAttention", "useAttention", "Trigger", "asChild", "density", "variant", "ghostSelectedContainerMd", "ghostHover", "TabsTabpanel", "Content", "Tabs", "Tablist", "Tab", "TabPrimitive", "TabGroupHeading", "Tabpanel", "BackButton", "Viewport"]
7
7
  }
package/dist/lib/node-esm/meta.json CHANGED
@@ -1 +1 @@
1
- {"inputs":{"packages/ui/react-ui-tabs/src/Tabs.tsx":{"bytes":22947,"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":12385},"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":5659},"packages/ui/react-ui-tabs/src/index.ts":{"bytesInOutput":0}},"bytes":5848}}}
1
+ {"inputs":{"packages/ui/react-ui-tabs/src/Tabs.tsx":{"bytes":23899,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"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":457,"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":12421},"packages/ui/react-ui-tabs/dist/lib/node-esm/index.mjs":{"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"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":6494},"packages/ui/react-ui-tabs/src/index.ts":{"bytesInOutput":0}},"bytes":6683}}}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dxos/react-ui-tabs",
3
- "version": "0.8.2-main.fbd8ed0",
3
+ "version": "0.8.2-staging.4d6ad0f",
4
4
  "description": "Components for facilitating a Tabs pattern.",
5
5
  "homepage": "https://dxos.org",
6
6
  "bugs": "https://github.com/dxos/dxos/issues",
@@ -25,14 +25,15 @@
25
25
  ],
26
26
  "dependencies": {
27
27
  "@fluentui/react-tabster": "^9.24.2",
28
+ "@preact-signals/safe-react": "^0.9.0",
28
29
  "@radix-ui/primitive": "1.1.1",
29
30
  "@radix-ui/react-context": "1.1.1",
30
31
  "@radix-ui/react-primitive": "2.0.2",
31
32
  "@radix-ui/react-slot": "1.1.2",
32
33
  "@radix-ui/react-tabs": "1.1.3",
33
34
  "@radix-ui/react-use-controllable-state": "1.1.0",
34
- "@dxos/react-ui-attention": "0.8.2-main.fbd8ed0",
35
- "@dxos/util": "0.8.2-main.fbd8ed0"
35
+ "@dxos/react-ui-attention": "0.8.2-staging.4d6ad0f",
36
+ "@dxos/util": "0.8.2-staging.4d6ad0f"
36
37
  },
37
38
  "devDependencies": {
38
39
  "@types/react": "~18.2.0",
@@ -40,16 +41,16 @@
40
41
  "react": "~18.2.0",
41
42
  "react-dom": "~18.2.0",
42
43
  "vite": "5.4.7",
43
- "@dxos/random": "0.8.2-main.fbd8ed0",
44
- "@dxos/react-ui": "0.8.2-main.fbd8ed0",
45
- "@dxos/react-ui-theme": "0.8.2-main.fbd8ed0",
46
- "@dxos/storybook-utils": "0.8.2-main.fbd8ed0"
44
+ "@dxos/random": "0.8.2-staging.4d6ad0f",
45
+ "@dxos/react-ui": "0.8.2-staging.4d6ad0f",
46
+ "@dxos/react-ui-theme": "0.8.2-staging.4d6ad0f",
47
+ "@dxos/storybook-utils": "0.8.2-staging.4d6ad0f"
47
48
  },
48
49
  "peerDependencies": {
49
50
  "react": "~18.2.0",
50
51
  "react-dom": "~18.2.0",
51
- "@dxos/react-ui": "0.8.2-main.fbd8ed0",
52
- "@dxos/react-ui-theme": "0.8.2-main.fbd8ed0"
52
+ "@dxos/react-ui": "0.8.2-staging.4d6ad0f",
53
+ "@dxos/react-ui-theme": "0.8.2-staging.4d6ad0f"
53
54
  },
54
55
  "publishConfig": {
55
56
  "access": "public"