@ankhorage/surface 9.2.0 → 9.3.0
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/CHANGELOG.md +6 -0
- package/README.md +1 -1
- package/dist/features/tabs/adapters/inbound/Tab.d.ts.map +1 -1
- package/dist/features/tabs/adapters/inbound/Tab.js +14 -2
- package/dist/features/tabs/adapters/inbound/Tab.js.map +1 -1
- package/dist/features/tabs/adapters/inbound/TabPanel.d.ts +1 -1
- package/dist/features/tabs/adapters/inbound/TabPanel.d.ts.map +1 -1
- package/dist/features/tabs/adapters/inbound/TabPanel.js +8 -3
- package/dist/features/tabs/adapters/inbound/TabPanel.js.map +1 -1
- package/dist/features/tabs/adapters/inbound/Tabs.d.ts +1 -1
- package/dist/features/tabs/adapters/inbound/Tabs.d.ts.map +1 -1
- package/dist/features/tabs/adapters/inbound/Tabs.js +2 -2
- package/dist/features/tabs/adapters/inbound/Tabs.js.map +1 -1
- package/dist/features/tabs/composition/useTabsController.d.ts +1 -1
- package/dist/features/tabs/composition/useTabsController.d.ts.map +1 -1
- package/dist/features/tabs/composition/useTabsController.js +3 -2
- package/dist/features/tabs/composition/useTabsController.js.map +1 -1
- package/dist/features/tabs/public.d.ts +1 -1
- package/dist/features/tabs/public.d.ts.map +1 -1
- package/dist/features/tabs/public.js.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js.map +1 -1
- package/dist/types/tabs.d.ts +3 -0
- package/dist/types/tabs.d.ts.map +1 -1
- package/dist/types/tabs.js.map +1 -1
- package/package.json +2 -2
- package/src/features/tabs/adapters/inbound/Tab.tsx +23 -1
- package/src/features/tabs/adapters/inbound/TabPanel.tsx +8 -2
- package/src/features/tabs/adapters/inbound/Tabs.presentation.test.tsx +70 -1
- package/src/features/tabs/adapters/inbound/Tabs.tsx +2 -1
- package/src/features/tabs/composition/useTabsController.ts +7 -2
- package/src/features/tabs/public.ts +7 -1
- package/src/index.ts +7 -1
- package/src/types/tabs.ts +4 -0
package/CHANGELOG.md
CHANGED
package/README.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
|
|
4
4
|
# @ankhorage/surface
|
|
5
5
|
|
|
6
|
-
         
|
|
7
7
|
|
|
8
8
|
Cross-platform UI foundation for React Native and React Native Web. Provides theming, layout primitives, and core building blocks for modern apps.
|
|
9
9
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../../../src/features/tabs/adapters/inbound/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAOvD,oEAAoE;AACpE,wBAAgB,GAAG,CAAC,EAClB,KAAK,EACL,QAAQ,EACR,QAAgB,EAChB,iBAA6B,EAC7B,MAAM,EACN,QAAQ,GACT,EAAE,QAAQ,
|
|
1
|
+
{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../../../src/features/tabs/adapters/inbound/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAOvD,oEAAoE;AACpE,wBAAgB,GAAG,CAAC,EAClB,KAAK,EACL,QAAQ,EACR,QAAgB,EAChB,iBAA6B,EAC7B,MAAM,EACN,QAAQ,GACT,EAAE,QAAQ,qBAuCV"}
|
|
@@ -8,15 +8,19 @@ import { useTabsContext } from '../../composition/useTabsContext';
|
|
|
8
8
|
/*** Renders one accessible selectable tab inside a Tabs context. */
|
|
9
9
|
export function Tab({ value, children, disabled = false, interactionPolicy = 'enabled', testID, trailing, }) {
|
|
10
10
|
const { theme } = useTheme();
|
|
11
|
-
const { activeValue, getPanelId, getTabId, setActiveValue, setFocusedValue } = useTabsContext();
|
|
11
|
+
const { activeValue, getPanelId, getTabId, setActiveValue, setFocusedValue, variant } = useTabsContext();
|
|
12
12
|
const pressableRef = useTabRegistration({ disabled, value });
|
|
13
13
|
const selected = activeValue === value;
|
|
14
14
|
const passive = interactionPolicy === 'passive';
|
|
15
15
|
const onPress = passive || disabled ? undefined : () => setActiveValue(value);
|
|
16
16
|
return (<Pressable accessibilityLabel={undefined} accessibilityRole="tab" accessibilityState={{ disabled, selected }} aria-controls={getPanelId(value)} disabled={disabled} nativeID={getTabId(value)} onBlur={() => setFocusedValue(undefined)} onFocus={() => setFocusedValue(value)} onPress={onPress} ref={pressableRef} testID={testID}>
|
|
17
17
|
<View px="m" py="s" style={resolveTabStyle({
|
|
18
|
+
activeBackground: theme.semantics.surface.subtle,
|
|
18
19
|
borderColor: selected ? 'transparent' : theme.semantics.border.default,
|
|
19
20
|
disabled,
|
|
21
|
+
radius: theme.radii.s,
|
|
22
|
+
selected,
|
|
23
|
+
variant,
|
|
20
24
|
})}>
|
|
21
25
|
{renderTabContent(children, trailing, selected)}
|
|
22
26
|
</View>
|
|
@@ -35,7 +39,15 @@ function renderTabContent(children, trailing, selected) {
|
|
|
35
39
|
</View>);
|
|
36
40
|
}
|
|
37
41
|
/*** Resolves active and disabled visual state without inline JSX styles. */
|
|
38
|
-
function resolveTabStyle({ borderColor, disabled, }) {
|
|
42
|
+
function resolveTabStyle({ activeBackground, borderColor, disabled, radius, selected, variant, }) {
|
|
43
|
+
if (variant === 'attached') {
|
|
44
|
+
return {
|
|
45
|
+
backgroundColor: selected ? activeBackground : 'transparent',
|
|
46
|
+
borderTopLeftRadius: selected ? radius : 0,
|
|
47
|
+
borderTopRightRadius: selected ? radius : 0,
|
|
48
|
+
opacity: disabled ? 0.64 : 1,
|
|
49
|
+
};
|
|
50
|
+
}
|
|
39
51
|
return { borderBottomColor: borderColor, borderBottomWidth: 2, opacity: disabled ? 0.64 : 1 };
|
|
40
52
|
}
|
|
41
53
|
//# sourceMappingURL=Tab.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../../../src/features/tabs/adapters/inbound/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAkB,MAAM,cAAc,CAAC;AAGzD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAClD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAC1E,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAElE,oEAAoE;AACpE,MAAM,UAAU,GAAG,CAAC,EAClB,KAAK,EACL,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,iBAAiB,GAAG,SAAS,EAC7B,MAAM,EACN,QAAQ,GACC;IACT,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,EAAE,CAAC;IAC7B,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc,EAAE,eAAe,EAAE,
|
|
1
|
+
{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../../../src/features/tabs/adapters/inbound/Tab.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Pressable, type ViewStyle } from 'react-native';\n\nimport type { TabProps } from '../../../../types/tabs';\nimport { View } from '../../../layout/public';\nimport { useTheme } from '../../../theme/runtime';\nimport { Text } from '../../../typography/public';\nimport { useTabRegistration } from '../../composition/useTabRegistration';\nimport { useTabsContext } from '../../composition/useTabsContext';\n\n/*** Renders one accessible selectable tab inside a Tabs context. */\nexport function Tab({\n value,\n children,\n disabled = false,\n interactionPolicy = 'enabled',\n testID,\n trailing,\n}: TabProps) {\n const { theme } = useTheme();\n const { activeValue, getPanelId, getTabId, setActiveValue, setFocusedValue, variant } =\n useTabsContext();\n const pressableRef = useTabRegistration({ disabled, value });\n const selected = activeValue === value;\n const passive = interactionPolicy === 'passive';\n const onPress = passive || disabled ? undefined : () => setActiveValue(value);\n\n return (\n <Pressable\n accessibilityLabel={undefined}\n accessibilityRole=\"tab\"\n accessibilityState={{ disabled, selected }}\n aria-controls={getPanelId(value)}\n disabled={disabled}\n nativeID={getTabId(value)}\n onBlur={() => setFocusedValue(undefined)}\n onFocus={() => setFocusedValue(value)}\n onPress={onPress}\n ref={pressableRef}\n testID={testID}\n >\n <View\n px=\"m\"\n py=\"s\"\n style={resolveTabStyle({\n activeBackground: theme.semantics.surface.subtle,\n borderColor: selected ? 'transparent' : theme.semantics.border.default,\n disabled,\n radius: theme.radii.s,\n selected,\n variant,\n })}\n >\n {renderTabContent(children, trailing, selected)}\n </View>\n </Pressable>\n );\n}\n\n/*** Renders the canonical tab label with optional trailing content. */\nfunction renderTabContent(\n children: React.ReactNode,\n trailing: React.ReactNode,\n selected: boolean,\n): React.ReactNode {\n const label = (\n <Text color={selected ? 'primary' : undefined} variant=\"label\" weight=\"medium\">\n {children}\n </Text>\n );\n if (trailing === undefined) return label;\n return (\n <View align=\"center\" direction=\"row\" gap=\"xs\">\n {label}\n {trailing}\n </View>\n );\n}\n\n/*** Resolves active and disabled visual state without inline JSX styles. */\nfunction resolveTabStyle({\n activeBackground,\n borderColor,\n disabled,\n radius,\n selected,\n variant,\n}: {\n activeBackground: string;\n borderColor: string;\n disabled: boolean;\n radius: number;\n selected: boolean;\n variant: 'line' | 'attached';\n}): ViewStyle {\n if (variant === 'attached') {\n return {\n backgroundColor: selected ? activeBackground : 'transparent',\n borderTopLeftRadius: selected ? radius : 0,\n borderTopRightRadius: selected ? radius : 0,\n opacity: disabled ? 0.64 : 1,\n };\n }\n\n return { borderBottomColor: borderColor, borderBottomWidth: 2, opacity: disabled ? 0.64 : 1 };\n}\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { TabPanelProps } from '../../../../types/tabs';
|
|
3
3
|
/*** Renders the active content panel with the supplied View layout and tab accessibility linkage. */
|
|
4
|
-
export declare function TabPanel({ value, children, testID, ...layoutProps }: TabPanelProps): React.JSX.Element | null;
|
|
4
|
+
export declare function TabPanel({ value, children, testID, style, ...layoutProps }: TabPanelProps): React.JSX.Element | null;
|
|
5
5
|
//# sourceMappingURL=TabPanel.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabPanel.d.ts","sourceRoot":"","sources":["../../../../../src/features/tabs/adapters/inbound/TabPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"TabPanel.d.ts","sourceRoot":"","sources":["../../../../../src/features/tabs/adapters/inbound/TabPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAO5D,qGAAqG;AACrG,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,WAAW,EAAE,EAAE,aAAa,4BAqBzF"}
|
|
@@ -1,13 +1,18 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { View } from '../../../layout/public';
|
|
3
|
+
import { useTheme } from '../../../theme/runtime';
|
|
3
4
|
import { useTabsContext } from '../../composition/useTabsContext';
|
|
4
5
|
const TAB_PANEL_ROLE = 'tabpanel';
|
|
5
6
|
/*** Renders the active content panel with the supplied View layout and tab accessibility linkage. */
|
|
6
|
-
export function TabPanel({ value, children, testID, ...layoutProps }) {
|
|
7
|
-
const {
|
|
7
|
+
export function TabPanel({ value, children, testID, style, ...layoutProps }) {
|
|
8
|
+
const { theme } = useTheme();
|
|
9
|
+
const { activeValue, getPanelId, getTabId, variant } = useTabsContext();
|
|
8
10
|
if (activeValue !== value)
|
|
9
11
|
return null;
|
|
10
|
-
return (<View {...layoutProps} accessibilityLabelledBy={getTabId(value)} accessibilityRole={TAB_PANEL_ROLE} nativeID={getPanelId(value)}
|
|
12
|
+
return (<View {...layoutProps} accessibilityLabelledBy={getTabId(value)} accessibilityRole={TAB_PANEL_ROLE} nativeID={getPanelId(value)} style={[
|
|
13
|
+
style,
|
|
14
|
+
variant === 'attached' ? { backgroundColor: theme.semantics.surface.subtle } : undefined,
|
|
15
|
+
]} testID={testID}>
|
|
11
16
|
{children}
|
|
12
17
|
</View>);
|
|
13
18
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabPanel.js","sourceRoot":"","sources":["../../../../../src/features/tabs/adapters/inbound/TabPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAElE,MAAM,cAAc,GAAG,UAAoE,CAAC;AAE5F,qGAAqG;AACrG,MAAM,UAAU,QAAQ,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,WAAW,EAAiB;
|
|
1
|
+
{"version":3,"file":"TabPanel.js","sourceRoot":"","sources":["../../../../../src/features/tabs/adapters/inbound/TabPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAElE,MAAM,cAAc,GAAG,UAAoE,CAAC;AAE5F,qGAAqG;AACrG,MAAM,UAAU,QAAQ,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,WAAW,EAAiB;IACxF,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,EAAE,CAAC;IAC7B,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,cAAc,EAAE,CAAC;IAExE,IAAI,WAAW,KAAK,KAAK;QAAE,OAAO,IAAI,CAAC;IAEvC,OAAO,CACL,CAAC,IAAI,CACH,IAAI,WAAW,CAAC,CAChB,uBAAuB,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CACzC,iBAAiB,CAAC,CAAC,cAAc,CAAC,CAClC,QAAQ,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAC5B,KAAK,CAAC,CAAC;YACL,KAAK;YACL,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,EAAE,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,SAAS;SACzF,CAAC,CACF,MAAM,CAAC,CAAC,MAAM,CAAC,CAEf;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\n\nimport type { TabPanelProps } from '../../../../types/tabs';\nimport { View } from '../../../layout/public';\nimport { useTheme } from '../../../theme/runtime';\nimport { useTabsContext } from '../../composition/useTabsContext';\n\nconst TAB_PANEL_ROLE = 'tabpanel' as React.ComponentProps<typeof View>['accessibilityRole'];\n\n/*** Renders the active content panel with the supplied View layout and tab accessibility linkage. */\nexport function TabPanel({ value, children, testID, style, ...layoutProps }: TabPanelProps) {\n const { theme } = useTheme();\n const { activeValue, getPanelId, getTabId, variant } = useTabsContext();\n\n if (activeValue !== value) return null;\n\n return (\n <View\n {...layoutProps}\n accessibilityLabelledBy={getTabId(value)}\n accessibilityRole={TAB_PANEL_ROLE}\n nativeID={getPanelId(value)}\n style={[\n style,\n variant === 'attached' ? { backgroundColor: theme.semantics.surface.subtle } : undefined,\n ]}\n testID={testID}\n >\n {children}\n </View>\n );\n}\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { TabsProps } from '../../../../types/tabs';
|
|
3
3
|
/*** Provides accessible tab selection and forwards View layout to the tab container. */
|
|
4
|
-
export declare function Tabs({ children, defaultValue, onValueChange, testID, value, ...layoutProps }: TabsProps): React.JSX.Element;
|
|
4
|
+
export declare function Tabs({ children, defaultValue, onValueChange, testID, value, variant, ...layoutProps }: TabsProps): React.JSX.Element;
|
|
5
5
|
//# sourceMappingURL=Tabs.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../../src/features/tabs/adapters/inbound/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAKxD,wFAAwF;AACxF,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,YAAY,EACZ,aAAa,EACb,MAAM,EACN,KAAK,EACL,GAAG,WAAW,EACf,EAAE,SAAS,qBAUX"}
|
|
1
|
+
{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../../src/features/tabs/adapters/inbound/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAKxD,wFAAwF;AACxF,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,YAAY,EACZ,aAAa,EACb,MAAM,EACN,KAAK,EACL,OAAO,EACP,GAAG,WAAW,EACf,EAAE,SAAS,qBAUX"}
|
|
@@ -3,8 +3,8 @@ import { View } from '../../../layout/public';
|
|
|
3
3
|
import { TabsContext } from '../../composition/TabsContext';
|
|
4
4
|
import { useTabsController } from '../../composition/useTabsController';
|
|
5
5
|
/*** Provides accessible tab selection and forwards View layout to the tab container. */
|
|
6
|
-
export function Tabs({ children, defaultValue, onValueChange, testID, value, ...layoutProps }) {
|
|
7
|
-
const contextValue = useTabsController({ defaultValue, onValueChange, testID, value });
|
|
6
|
+
export function Tabs({ children, defaultValue, onValueChange, testID, value, variant, ...layoutProps }) {
|
|
7
|
+
const contextValue = useTabsController({ defaultValue, onValueChange, testID, value, variant });
|
|
8
8
|
return (<TabsContext value={contextValue}>
|
|
9
9
|
<View {...layoutProps} testID={testID}>
|
|
10
10
|
{children}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../../../src/features/tabs/adapters/inbound/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AAExE,wFAAwF;AACxF,MAAM,UAAU,IAAI,CAAC,EACnB,QAAQ,EACR,YAAY,EACZ,aAAa,EACb,MAAM,EACN,KAAK,EACL,GAAG,WAAW,EACJ;IACV,MAAM,YAAY,GAAG,iBAAiB,CAAC,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../../../src/features/tabs/adapters/inbound/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AAExE,wFAAwF;AACxF,MAAM,UAAU,IAAI,CAAC,EACnB,QAAQ,EACR,YAAY,EACZ,aAAa,EACb,MAAM,EACN,KAAK,EACL,OAAO,EACP,GAAG,WAAW,EACJ;IACV,MAAM,YAAY,GAAG,iBAAiB,CAAC,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC;IAEhG,OAAO,CACL,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,CAC/B;MAAA,CAAC,IAAI,CAAC,IAAI,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CACpC;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,WAAW,CAAC,CACf,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\n\nimport type { TabsProps } from '../../../../types/tabs';\nimport { View } from '../../../layout/public';\nimport { TabsContext } from '../../composition/TabsContext';\nimport { useTabsController } from '../../composition/useTabsController';\n\n/*** Provides accessible tab selection and forwards View layout to the tab container. */\nexport function Tabs({\n children,\n defaultValue,\n onValueChange,\n testID,\n value,\n variant,\n ...layoutProps\n}: TabsProps) {\n const contextValue = useTabsController({ defaultValue, onValueChange, testID, value, variant });\n\n return (\n <TabsContext value={contextValue}>\n <View {...layoutProps} testID={testID}>\n {children}\n </View>\n </TabsContext>\n );\n}\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import type { TabsContextValue, TabsProps } from '../../../types/tabs';
|
|
2
2
|
/*** Owns controlled state, registration, focus state, and ids for one Tabs instance. */
|
|
3
|
-
export declare function useTabsController({ defaultValue, onValueChange, testID, value, }: Pick<TabsProps, 'defaultValue' | 'onValueChange' | 'testID' | 'value'>): TabsContextValue;
|
|
3
|
+
export declare function useTabsController({ defaultValue, onValueChange, testID, value, variant, }: Pick<TabsProps, 'defaultValue' | 'onValueChange' | 'testID' | 'value' | 'variant'>): TabsContextValue;
|
|
4
4
|
//# sourceMappingURL=useTabsController.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTabsController.d.ts","sourceRoot":"","sources":["../../../../src/features/tabs/composition/useTabsController.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAmB,gBAAgB,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAGxF,wFAAwF;AACxF,wBAAgB,iBAAiB,CAAC,EAChC,YAAY,EACZ,aAAa,EACb,MAAM,EACN,KAAK,
|
|
1
|
+
{"version":3,"file":"useTabsController.d.ts","sourceRoot":"","sources":["../../../../src/features/tabs/composition/useTabsController.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAmB,gBAAgB,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAGxF,wFAAwF;AACxF,wBAAgB,iBAAiB,CAAC,EAChC,YAAY,EACZ,aAAa,EACb,MAAM,EACN,KAAK,EACL,OAAgB,GACjB,EAAE,IAAI,CACL,SAAS,EACT,cAAc,GAAG,eAAe,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAClE,GAAG,gBAAgB,CA2CnB"}
|
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import { useControllableState } from '../../../internal/useControllableState';
|
|
3
3
|
import { resolveTabElementId } from '../utils/resolveTabElementId';
|
|
4
4
|
/*** Owns controlled state, registration, focus state, and ids for one Tabs instance. */
|
|
5
|
-
export function useTabsController({ defaultValue, onValueChange, testID, value, }) {
|
|
5
|
+
export function useTabsController({ defaultValue, onValueChange, testID, value, variant = 'line', }) {
|
|
6
6
|
const [activeValue, setActiveValue] = useControllableState({
|
|
7
7
|
defaultValue,
|
|
8
8
|
onChange: (nextValue) => {
|
|
@@ -38,6 +38,7 @@ export function useTabsController({ defaultValue, onValueChange, testID, value,
|
|
|
38
38
|
setFocusedValue,
|
|
39
39
|
tabs,
|
|
40
40
|
unregisterTab,
|
|
41
|
-
|
|
41
|
+
variant,
|
|
42
|
+
}), [activeValue, focusedValue, registerTab, setActiveValue, tabs, testID, unregisterTab, variant]);
|
|
42
43
|
}
|
|
43
44
|
//# sourceMappingURL=useTabsController.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTabsController.js","sourceRoot":"","sources":["../../../../src/features/tabs/composition/useTabsController.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,oBAAoB,EAAE,MAAM,wCAAwC,CAAC;AAE9E,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAEnE,wFAAwF;AACxF,MAAM,UAAU,iBAAiB,CAAC,EAChC,YAAY,EACZ,aAAa,EACb,MAAM,EACN,KAAK,
|
|
1
|
+
{"version":3,"file":"useTabsController.js","sourceRoot":"","sources":["../../../../src/features/tabs/composition/useTabsController.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,oBAAoB,EAAE,MAAM,wCAAwC,CAAC;AAE9E,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAEnE,wFAAwF;AACxF,MAAM,UAAU,iBAAiB,CAAC,EAChC,YAAY,EACZ,aAAa,EACb,MAAM,EACN,KAAK,EACL,OAAO,GAAG,MAAM,GAIjB;IACC,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,oBAAoB,CAAqB;QAC7E,YAAY;QACZ,QAAQ,EAAE,CAAC,SAAS,EAAE,EAAE;YACtB,IAAI,SAAS,KAAK,SAAS;gBAAE,aAAa,EAAE,CAAC,SAAS,CAAC,CAAC;QAC1D,CAAC;QACD,KAAK;KACN,CAAC,CAAC;IACH,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAqB,SAAS,CAAC,CAAC;IACtF,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC,QAAQ,CAA6B,EAAE,CAAC,CAAC;IAEvE,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,GAAoB,EAAE,EAAE;QAC7D,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE,CAClB,OAAO,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,KAAK,GAAG,CAAC,KAAK,CAAC;YAChD,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,KAAK,KAAK,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;YACnE,CAAC,CAAC,CAAC,GAAG,OAAO,EAAE,GAAG,CAAC,CACtB,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,aAAqB,EAAE,EAAE;QAChE,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,KAAK,aAAa,CAAC,CAAC,CAAC;IACjF,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,WAAW,KAAK,SAAS;YAAE,OAAO;QACtC,MAAM,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QAC9D,IAAI,eAAe;YAAE,cAAc,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;IAC7D,CAAC,EAAE,CAAC,WAAW,EAAE,cAAc,EAAE,IAAI,CAAC,CAAC,CAAC;IAExC,OAAO,KAAK,CAAC,OAAO,CAClB,GAAG,EAAE,CAAC,CAAC;QACL,WAAW;QACX,YAAY;QACZ,UAAU,EAAE,CAAC,QAAgB,EAAE,EAAE,CAAC,mBAAmB,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC;QAChF,QAAQ,EAAE,CAAC,QAAgB,EAAE,EAAE,CAAC,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC;QAC5E,WAAW;QACX,cAAc,EAAE,CAAC,SAAiB,EAAE,EAAE,CAAC,cAAc,CAAC,SAAS,CAAC;QAChE,eAAe;QACf,IAAI;QACJ,aAAa;QACb,OAAO;KACR,CAAC,EACF,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM,EAAE,aAAa,EAAE,OAAO,CAAC,CAC/F,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\n\nimport { useControllableState } from '../../../internal/useControllableState';\nimport type { TabRegistration, TabsContextValue, TabsProps } from '../../../types/tabs';\nimport { resolveTabElementId } from '../utils/resolveTabElementId';\n\n/*** Owns controlled state, registration, focus state, and ids for one Tabs instance. */\nexport function useTabsController({\n defaultValue,\n onValueChange,\n testID,\n value,\n variant = 'line',\n}: Pick<\n TabsProps,\n 'defaultValue' | 'onValueChange' | 'testID' | 'value' | 'variant'\n>): TabsContextValue {\n const [activeValue, setActiveValue] = useControllableState<string | undefined>({\n defaultValue,\n onChange: (nextValue) => {\n if (nextValue !== undefined) onValueChange?.(nextValue);\n },\n value,\n });\n const [focusedValue, setFocusedValue] = React.useState<string | undefined>(undefined);\n const [tabs, setTabs] = React.useState<readonly TabRegistration[]>([]);\n\n const registerTab = React.useCallback((tab: TabRegistration) => {\n setTabs((current) =>\n current.some((entry) => entry.value === tab.value)\n ? current.map((entry) => (entry.value === tab.value ? tab : entry))\n : [...current, tab],\n );\n }, []);\n const unregisterTab = React.useCallback((valueToRemove: string) => {\n setTabs((current) => current.filter((entry) => entry.value !== valueToRemove));\n }, []);\n\n React.useEffect(() => {\n if (activeValue !== undefined) return;\n const firstEnabledTab = tabs.find((entry) => !entry.disabled);\n if (firstEnabledTab) setActiveValue(firstEnabledTab.value);\n }, [activeValue, setActiveValue, tabs]);\n\n return React.useMemo(\n () => ({\n activeValue,\n focusedValue,\n getPanelId: (tabValue: string) => resolveTabElementId('panel', testID, tabValue),\n getTabId: (tabValue: string) => resolveTabElementId('tab', testID, tabValue),\n registerTab,\n setActiveValue: (nextValue: string) => setActiveValue(nextValue),\n setFocusedValue,\n tabs,\n unregisterTab,\n variant,\n }),\n [activeValue, focusedValue, registerTab, setActiveValue, tabs, testID, unregisterTab, variant],\n );\n}\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export type { TabListProps, TabPanelProps, TabProps, TabsProps } from '../../types/tabs';
|
|
1
|
+
export type { TabListProps, TabPanelProps, TabProps, TabsProps, TabsVariant, } from '../../types/tabs';
|
|
2
2
|
export { Tab } from './adapters/inbound/Tab';
|
|
3
3
|
export { TabList } from './adapters/inbound/TabList';
|
|
4
4
|
export { TabPanel } from './adapters/inbound/TabPanel';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../../src/features/tabs/public.ts"],"names":[],"mappings":"AAAA,YAAY,
|
|
1
|
+
{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../../src/features/tabs/public.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,YAAY,EACZ,aAAa,EACb,QAAQ,EACR,SAAS,EACT,WAAW,GACZ,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"public.js","sourceRoot":"","sources":["../../../src/features/tabs/public.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"public.js","sourceRoot":"","sources":["../../../src/features/tabs/public.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC","sourcesContent":["export type {\n TabListProps,\n TabPanelProps,\n TabProps,\n TabsProps,\n TabsVariant,\n} from '../../types/tabs';\nexport { Tab } from './adapters/inbound/Tab';\nexport { TabList } from './adapters/inbound/TabList';\nexport { TabPanel } from './adapters/inbound/TabPanel';\nexport { Tabs } from './adapters/inbound/Tabs';\n"]}
|
package/dist/index.d.ts
CHANGED
|
@@ -42,7 +42,7 @@ export type { PressableProps } from './features/pressable/public';
|
|
|
42
42
|
export { Pressable } from './features/pressable/public';
|
|
43
43
|
export type { SurfaceProps, SurfaceVariant } from './features/surface/public';
|
|
44
44
|
export { Surface } from './features/surface/public';
|
|
45
|
-
export type { TabListProps, TabPanelProps, TabProps, TabsProps } from './features/tabs/public';
|
|
45
|
+
export type { TabListProps, TabPanelProps, TabProps, TabsProps, TabsVariant, } from './features/tabs/public';
|
|
46
46
|
export { Tab, TabList, TabPanel, Tabs } from './features/tabs/public';
|
|
47
47
|
export type { ActionSemantics, BorderSemantics, ContentSemantics, FontWeight, NeutralSemantics, RoleSemantics, SelectionSemantics, SurfaceColorDiagnostics, SurfaceColorSelectionDiagnostic, SurfaceContrastDiagnostic, SurfaceSemantics, SurfaceTheme, ThemeMode, ThemeSemantics, ThemeTokens, } from './features/theme/public';
|
|
48
48
|
export { createTheme } from './features/theme/public';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,gBAAgB,EAChB,sBAAsB,EACtB,qBAAqB,GACtB,MAAM,0BAA0B,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAUlC,OAAO,EACL,SAAS,EACT,gBAAgB,EAChB,aAAa,EACb,gBAAgB,GACjB,MAAM,6BAA6B,CAAC;AAErC,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAEnD,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEhD,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAE9D,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAE9C,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAEtD,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAE3D,OAAO,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AAErD,OAAO,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AAErD,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAEvD,OAAO,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAS9D,OAAO,EAAE,IAAI,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAExE,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAKhD,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;AAEhF,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAE3E,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAExD,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAMhD,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAMpD,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAE7D,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAExD,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,gBAAgB,EAChB,sBAAsB,EACtB,qBAAqB,GACtB,MAAM,0BAA0B,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAUlC,OAAO,EACL,SAAS,EACT,gBAAgB,EAChB,aAAa,EACb,gBAAgB,GACjB,MAAM,6BAA6B,CAAC;AAErC,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAEnD,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEhD,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAE9D,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAE9C,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAEtD,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAE3D,OAAO,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AAErD,OAAO,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AAErD,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAEvD,OAAO,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAS9D,OAAO,EAAE,IAAI,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAExE,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAKhD,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;AAEhF,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAE3E,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAExD,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAMhD,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAMpD,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAE7D,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAExD,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAQpD,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAkBtE,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAQ/E,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAEzE,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAEpD,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAC","sourcesContent":["export {\n SURFACE_COLORS,\n SURFACE_EMPHASES,\n SURFACE_PALETTE_COLORS,\n SURFACE_STATUS_COLORS,\n} from './constants/surfaceColor';\nexport * from './core/responsive';\nexport type {\n AccordionContentProps,\n AccordionItemProps,\n AccordionMode,\n AccordionMultipleProps,\n AccordionProps,\n AccordionSingleProps,\n AccordionTriggerProps,\n} from './features/accordion/public';\nexport {\n Accordion,\n AccordionContent,\n AccordionItem,\n AccordionTrigger,\n} from './features/accordion/public';\nexport type { AppBarProps } from './features/app-bar/public';\nexport { AppBar } from './features/app-bar/public';\nexport type { BadgeProps } from './features/badge/public';\nexport { Badge } from './features/badge/public';\nexport type { ButtonIconSpec, ButtonProps, IconButtonProps } from './features/button/public';\nexport { Button, IconButton } from './features/button/public';\nexport type { CardProps } from './features/card/public';\nexport { Card } from './features/card/public';\nexport type { FontProviderProps, FontRuntime } from './features/font/public';\nexport { FontProvider } from './features/font/public';\nexport type { CheckboxProps } from './features/form/checkbox/public';\nexport { Checkbox } from './features/form/checkbox/public';\nexport type { FieldProps } from './features/form/field/public';\nexport { Field } from './features/form/field/public';\nexport type { RadioProps } from './features/form/radio/public';\nexport { Radio } from './features/form/radio/public';\nexport type { SwitchProps } from './features/form/switch/public';\nexport { Switch } from './features/form/switch/public';\nexport type { TextInputProps } from './features/form/text-input/public';\nexport { TextInput } from './features/form/text-input/public';\nexport type {\n FontIconSource,\n IconProps,\n IconProvider,\n IconSource,\n IconVariant,\n SvgIconSource,\n} from './features/icon/public';\nexport { Icon, SUPPORTED_ICON_PROVIDERS } from './features/icon/public';\nexport type { ImageFit, ImageProps, SurfaceImageSource } from './features/image/public';\nexport { Image } from './features/image/public';\nexport type {\n KeyboardAvoidingViewBehavior,\n KeyboardAvoidingViewProps,\n} from './features/keyboard-avoiding-view/public';\nexport { KeyboardAvoidingView } from './features/keyboard-avoiding-view/public';\nexport type { DividerProps, GridProps, ScrollViewProps, ViewProps } from './features/layout/public';\nexport { Divider, Grid, ScrollView, View } from './features/layout/public';\nexport type { ListItemProps, ListProps } from './features/list/public';\nexport { List, ListItem } from './features/list/public';\nexport type { ModalProps } from './features/modal/public';\nexport { Modal } from './features/modal/public';\nexport type {\n PopoverAnchorRenderProps,\n PopoverPlacement,\n PopoverProps,\n} from './features/popover/public';\nexport { Popover } from './features/popover/public';\nexport type {\n PopoverMenuAction,\n PopoverMenuActionIntent,\n PopoverMenuProps,\n} from './features/popover-menu/public';\nexport { PopoverMenu } from './features/popover-menu/public';\nexport type { PressableProps } from './features/pressable/public';\nexport { Pressable } from './features/pressable/public';\nexport type { SurfaceProps, SurfaceVariant } from './features/surface/public';\nexport { Surface } from './features/surface/public';\nexport type {\n TabListProps,\n TabPanelProps,\n TabProps,\n TabsProps,\n TabsVariant,\n} from './features/tabs/public';\nexport { Tab, TabList, TabPanel, Tabs } from './features/tabs/public';\nexport type {\n ActionSemantics,\n BorderSemantics,\n ContentSemantics,\n FontWeight,\n NeutralSemantics,\n RoleSemantics,\n SelectionSemantics,\n SurfaceColorDiagnostics,\n SurfaceColorSelectionDiagnostic,\n SurfaceContrastDiagnostic,\n SurfaceSemantics,\n SurfaceTheme,\n ThemeMode,\n ThemeSemantics,\n ThemeTokens,\n} from './features/theme/public';\nexport { createTheme } from './features/theme/public';\nexport type { ThemeProviderProps, ThemeRuntime, ThemeScopeProps } from './features/theme/runtime';\nexport { ThemeProvider, ThemeScope, useTheme } from './features/theme/runtime';\nexport type {\n ToastController,\n ToastOptions,\n ToastProps,\n ToastProviderProps,\n ToastStatus,\n} from './features/toast/public';\nexport { Toast, ToastProvider, useToast } from './features/toast/public';\nexport type { TooltipProps } from './features/tooltip/public';\nexport { Tooltip } from './features/tooltip/public';\nexport type { HeadingLevel, HeadingProps, TextProps } from './features/typography/public';\nexport { Heading, Text } from './features/typography/public';\nexport type { InteractionPolicy, InteractionPolicyProps } from './types/interactionPolicy';\nexport type {\n SurfaceColor,\n SurfaceEmphasis,\n SurfacePaletteColor,\n SurfaceStatusColor,\n} from './types/surfaceColor';\n"]}
|
package/dist/types/tabs.d.ts
CHANGED
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
import type React from 'react';
|
|
2
2
|
import type { InteractionPolicy } from './interactionPolicy';
|
|
3
3
|
import type { ViewStyleProps } from './layout';
|
|
4
|
+
export type TabsVariant = 'line' | 'attached';
|
|
4
5
|
export interface TabsProps extends ViewStyleProps {
|
|
5
6
|
children?: React.ReactNode;
|
|
6
7
|
value?: string;
|
|
7
8
|
defaultValue?: string;
|
|
8
9
|
onValueChange?: ((value: string) => void) | undefined;
|
|
9
10
|
testID?: string;
|
|
11
|
+
variant?: TabsVariant;
|
|
10
12
|
}
|
|
11
13
|
export interface TabListProps {
|
|
12
14
|
children?: React.ReactNode;
|
|
@@ -41,6 +43,7 @@ export interface TabsContextValue {
|
|
|
41
43
|
setFocusedValue: (value: string | undefined) => void;
|
|
42
44
|
tabs: readonly TabRegistration[];
|
|
43
45
|
unregisterTab: (value: string) => void;
|
|
46
|
+
variant: TabsVariant;
|
|
44
47
|
}
|
|
45
48
|
export type TabNavigationKey = 'ArrowLeft' | 'ArrowRight' | 'ArrowUp' | 'ArrowDown' | 'Home' | 'End';
|
|
46
49
|
//# sourceMappingURL=tabs.d.ts.map
|
package/dist/types/tabs.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/types/tabs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/C,MAAM,WAAW,SAAU,SAAQ,cAAc;IAC/C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACtD,MAAM,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/types/tabs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/C,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,UAAU,CAAC;AAE9C,MAAM,WAAW,SAAU,SAAQ,cAAc;IAC/C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACtD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAED,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,gBAAgB;IAC/B,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,YAAY,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACtC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,WAAW,EAAE,CAAC,GAAG,EAAE,eAAe,KAAK,IAAI,CAAC;IAC5C,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IACrD,IAAI,EAAE,SAAS,eAAe,EAAE,CAAC;IACjC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,EAAE,WAAW,CAAC;CACtB;AAED,MAAM,MAAM,gBAAgB,GAC1B,WAAW,GAAG,YAAY,GAAG,SAAS,GAAG,WAAW,GAAG,MAAM,GAAG,KAAK,CAAC"}
|
package/dist/types/tabs.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../src/types/tabs.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\n\nimport type { InteractionPolicy } from './interactionPolicy';\nimport type { ViewStyleProps } from './layout';\n\nexport interface TabsProps extends ViewStyleProps {\n children?: React.ReactNode;\n value?: string;\n defaultValue?: string;\n onValueChange?: ((value: string) => void) | undefined;\n testID?: string;\n}\n\nexport interface TabListProps {\n children?: React.ReactNode;\n fill?: boolean;\n testID?: string;\n}\n\nexport interface TabProps {\n value: string;\n children?: React.ReactNode;\n disabled?: boolean;\n interactionPolicy?: InteractionPolicy;\n testID?: string;\n trailing?: React.ReactNode;\n}\n\nexport interface TabPanelProps extends ViewStyleProps {\n value: string;\n children?: React.ReactNode;\n testID?: string;\n}\n\nexport interface TabRegistration {\n disabled: boolean;\n focus: () => void;\n value: string;\n}\n\nexport interface TabsContextValue {\n activeValue: string | undefined;\n focusedValue: string | undefined;\n getPanelId: (value: string) => string;\n getTabId: (value: string) => string;\n registerTab: (tab: TabRegistration) => void;\n setActiveValue: (value: string) => void;\n setFocusedValue: (value: string | undefined) => void;\n tabs: readonly TabRegistration[];\n unregisterTab: (value: string) => void;\n}\n\nexport type TabNavigationKey =\n 'ArrowLeft' | 'ArrowRight' | 'ArrowUp' | 'ArrowDown' | 'Home' | 'End';\n"]}
|
|
1
|
+
{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../src/types/tabs.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\n\nimport type { InteractionPolicy } from './interactionPolicy';\nimport type { ViewStyleProps } from './layout';\n\nexport type TabsVariant = 'line' | 'attached';\n\nexport interface TabsProps extends ViewStyleProps {\n children?: React.ReactNode;\n value?: string;\n defaultValue?: string;\n onValueChange?: ((value: string) => void) | undefined;\n testID?: string;\n variant?: TabsVariant;\n}\n\nexport interface TabListProps {\n children?: React.ReactNode;\n fill?: boolean;\n testID?: string;\n}\n\nexport interface TabProps {\n value: string;\n children?: React.ReactNode;\n disabled?: boolean;\n interactionPolicy?: InteractionPolicy;\n testID?: string;\n trailing?: React.ReactNode;\n}\n\nexport interface TabPanelProps extends ViewStyleProps {\n value: string;\n children?: React.ReactNode;\n testID?: string;\n}\n\nexport interface TabRegistration {\n disabled: boolean;\n focus: () => void;\n value: string;\n}\n\nexport interface TabsContextValue {\n activeValue: string | undefined;\n focusedValue: string | undefined;\n getPanelId: (value: string) => string;\n getTabId: (value: string) => string;\n registerTab: (tab: TabRegistration) => void;\n setActiveValue: (value: string) => void;\n setFocusedValue: (value: string | undefined) => void;\n tabs: readonly TabRegistration[];\n unregisterTab: (value: string) => void;\n variant: TabsVariant;\n}\n\nexport type TabNavigationKey =\n 'ArrowLeft' | 'ArrowRight' | 'ArrowUp' | 'ArrowDown' | 'Home' | 'End';\n"]}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ankhorage/surface",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "9.
|
|
4
|
+
"version": "9.3.0",
|
|
5
5
|
"description": "Stable UI foundation for React Native and React Native Web.",
|
|
6
6
|
"homepage": "https://github.com/ankhorage/surface#readme",
|
|
7
7
|
"bugs": {
|
|
@@ -107,7 +107,7 @@
|
|
|
107
107
|
"version-packages": "ankhorage-changeset version"
|
|
108
108
|
},
|
|
109
109
|
"devDependencies": {
|
|
110
|
-
"@ankhorage/devtools": "^2.1.
|
|
110
|
+
"@ankhorage/devtools": "^2.1.13",
|
|
111
111
|
"@ankhorage/paradox": "^0.2.28",
|
|
112
112
|
"@react-native-vector-icons/fontawesome": "^13.1.4",
|
|
113
113
|
"@react-native-vector-icons/fontawesome5": "^13.1.4",
|
|
@@ -18,7 +18,8 @@ export function Tab({
|
|
|
18
18
|
trailing,
|
|
19
19
|
}: TabProps) {
|
|
20
20
|
const { theme } = useTheme();
|
|
21
|
-
const { activeValue, getPanelId, getTabId, setActiveValue, setFocusedValue } =
|
|
21
|
+
const { activeValue, getPanelId, getTabId, setActiveValue, setFocusedValue, variant } =
|
|
22
|
+
useTabsContext();
|
|
22
23
|
const pressableRef = useTabRegistration({ disabled, value });
|
|
23
24
|
const selected = activeValue === value;
|
|
24
25
|
const passive = interactionPolicy === 'passive';
|
|
@@ -42,8 +43,12 @@ export function Tab({
|
|
|
42
43
|
px="m"
|
|
43
44
|
py="s"
|
|
44
45
|
style={resolveTabStyle({
|
|
46
|
+
activeBackground: theme.semantics.surface.subtle,
|
|
45
47
|
borderColor: selected ? 'transparent' : theme.semantics.border.default,
|
|
46
48
|
disabled,
|
|
49
|
+
radius: theme.radii.s,
|
|
50
|
+
selected,
|
|
51
|
+
variant,
|
|
47
52
|
})}
|
|
48
53
|
>
|
|
49
54
|
{renderTabContent(children, trailing, selected)}
|
|
@@ -74,11 +79,28 @@ function renderTabContent(
|
|
|
74
79
|
|
|
75
80
|
/*** Resolves active and disabled visual state without inline JSX styles. */
|
|
76
81
|
function resolveTabStyle({
|
|
82
|
+
activeBackground,
|
|
77
83
|
borderColor,
|
|
78
84
|
disabled,
|
|
85
|
+
radius,
|
|
86
|
+
selected,
|
|
87
|
+
variant,
|
|
79
88
|
}: {
|
|
89
|
+
activeBackground: string;
|
|
80
90
|
borderColor: string;
|
|
81
91
|
disabled: boolean;
|
|
92
|
+
radius: number;
|
|
93
|
+
selected: boolean;
|
|
94
|
+
variant: 'line' | 'attached';
|
|
82
95
|
}): ViewStyle {
|
|
96
|
+
if (variant === 'attached') {
|
|
97
|
+
return {
|
|
98
|
+
backgroundColor: selected ? activeBackground : 'transparent',
|
|
99
|
+
borderTopLeftRadius: selected ? radius : 0,
|
|
100
|
+
borderTopRightRadius: selected ? radius : 0,
|
|
101
|
+
opacity: disabled ? 0.64 : 1,
|
|
102
|
+
};
|
|
103
|
+
}
|
|
104
|
+
|
|
83
105
|
return { borderBottomColor: borderColor, borderBottomWidth: 2, opacity: disabled ? 0.64 : 1 };
|
|
84
106
|
}
|
|
@@ -2,13 +2,15 @@ import React from 'react';
|
|
|
2
2
|
|
|
3
3
|
import type { TabPanelProps } from '../../../../types/tabs';
|
|
4
4
|
import { View } from '../../../layout/public';
|
|
5
|
+
import { useTheme } from '../../../theme/runtime';
|
|
5
6
|
import { useTabsContext } from '../../composition/useTabsContext';
|
|
6
7
|
|
|
7
8
|
const TAB_PANEL_ROLE = 'tabpanel' as React.ComponentProps<typeof View>['accessibilityRole'];
|
|
8
9
|
|
|
9
10
|
/*** Renders the active content panel with the supplied View layout and tab accessibility linkage. */
|
|
10
|
-
export function TabPanel({ value, children, testID, ...layoutProps }: TabPanelProps) {
|
|
11
|
-
const {
|
|
11
|
+
export function TabPanel({ value, children, testID, style, ...layoutProps }: TabPanelProps) {
|
|
12
|
+
const { theme } = useTheme();
|
|
13
|
+
const { activeValue, getPanelId, getTabId, variant } = useTabsContext();
|
|
12
14
|
|
|
13
15
|
if (activeValue !== value) return null;
|
|
14
16
|
|
|
@@ -18,6 +20,10 @@ export function TabPanel({ value, children, testID, ...layoutProps }: TabPanelPr
|
|
|
18
20
|
accessibilityLabelledBy={getTabId(value)}
|
|
19
21
|
accessibilityRole={TAB_PANEL_ROLE}
|
|
20
22
|
nativeID={getPanelId(value)}
|
|
23
|
+
style={[
|
|
24
|
+
style,
|
|
25
|
+
variant === 'attached' ? { backgroundColor: theme.semantics.surface.subtle } : undefined,
|
|
26
|
+
]}
|
|
21
27
|
testID={testID}
|
|
22
28
|
>
|
|
23
29
|
{children}
|
|
@@ -6,9 +6,12 @@ import * as ReactNativeWeb from 'react-native-web';
|
|
|
6
6
|
|
|
7
7
|
await mock.module('react-native', () => ReactNativeWeb);
|
|
8
8
|
|
|
9
|
-
const
|
|
9
|
+
const CONSUMER_PANEL_STYLE = { backgroundColor: '#ff00ff' };
|
|
10
|
+
|
|
11
|
+
const { ThemeProvider, ThemeScope } = await import('../../../theme/runtime');
|
|
10
12
|
const { Tab } = await import('./Tab');
|
|
11
13
|
const { TabList } = await import('./TabList');
|
|
14
|
+
const { TabPanel } = await import('./TabPanel');
|
|
12
15
|
const { Tabs } = await import('./Tabs');
|
|
13
16
|
|
|
14
17
|
test('opens the selected tab into its panel while retaining inactive separators', () => {
|
|
@@ -40,3 +43,69 @@ test('opens the selected tab into its panel while retaining inactive separators'
|
|
|
40
43
|
expect(activeStyle).toMatch(/border-bottom-color:(?:transparent|rgba\(0,0,0,0(?:\.0+)?\))/u);
|
|
41
44
|
browserWindow.close();
|
|
42
45
|
});
|
|
46
|
+
|
|
47
|
+
test.each([
|
|
48
|
+
['light', false],
|
|
49
|
+
['light', true],
|
|
50
|
+
['dark', false],
|
|
51
|
+
['dark', true],
|
|
52
|
+
] as const)('%s attached tabs own one semantic surface (inverted=%p)', (mode, inverted) => {
|
|
53
|
+
const styles = renderAttachedStyles(mode, inverted);
|
|
54
|
+
|
|
55
|
+
expect(styles.active).not.toContain('border-bottom-width');
|
|
56
|
+
expect(styles.inactive).not.toContain('border-bottom-width');
|
|
57
|
+
expect(styles.inactive).toMatch(/background-color:(?:transparent|rgba\(0,0,0,0(?:\.0+)?\))/u);
|
|
58
|
+
expect(styles.activeBackground).toBeTruthy();
|
|
59
|
+
expect(styles.panel).toContain(`background-color:${styles.activeBackground}`);
|
|
60
|
+
expect(styles.panel).not.toContain('rgb(255, 0, 255)');
|
|
61
|
+
});
|
|
62
|
+
|
|
63
|
+
test.each(['light', 'dark'] as const)(
|
|
64
|
+
'%s attached tabs follow inherited surface polarity',
|
|
65
|
+
(mode) => {
|
|
66
|
+
const normal = renderAttachedStyles(mode, false);
|
|
67
|
+
const inverted = renderAttachedStyles(mode, true);
|
|
68
|
+
|
|
69
|
+
expect(normal.activeBackground).not.toBe(inverted.activeBackground);
|
|
70
|
+
expect(normal.panel).toContain(`background-color:${normal.activeBackground}`);
|
|
71
|
+
expect(inverted.panel).toContain(`background-color:${inverted.activeBackground}`);
|
|
72
|
+
},
|
|
73
|
+
);
|
|
74
|
+
|
|
75
|
+
/*** Render attached tabs and return their observable web presentation styles. */
|
|
76
|
+
function renderAttachedStyles(mode: 'light' | 'dark', inverted: boolean) {
|
|
77
|
+
const markup = renderToStaticMarkup(
|
|
78
|
+
<ThemeProvider initialMode={mode}>
|
|
79
|
+
<ThemeScope inverted={inverted}>
|
|
80
|
+
<Tabs defaultValue="tree" variant="attached">
|
|
81
|
+
<TabList>
|
|
82
|
+
<Tab testID="tree-tab" value="tree">
|
|
83
|
+
Tree
|
|
84
|
+
</Tab>
|
|
85
|
+
<Tab testID="export-tab" value="export">
|
|
86
|
+
Export
|
|
87
|
+
</Tab>
|
|
88
|
+
</TabList>
|
|
89
|
+
<TabPanel style={CONSUMER_PANEL_STYLE} testID="tree-panel" value="tree">
|
|
90
|
+
Content
|
|
91
|
+
</TabPanel>
|
|
92
|
+
</Tabs>
|
|
93
|
+
</ThemeScope>
|
|
94
|
+
</ThemeProvider>,
|
|
95
|
+
);
|
|
96
|
+
|
|
97
|
+
const browserWindow = new Window();
|
|
98
|
+
browserWindow.document.body.innerHTML = markup;
|
|
99
|
+
const active = browserWindow.document.querySelector('[data-testid="tree-tab"] > div');
|
|
100
|
+
const inactive = browserWindow.document.querySelector('[data-testid="export-tab"] > div');
|
|
101
|
+
const panel = browserWindow.document.querySelector('[data-testid="tree-panel"]');
|
|
102
|
+
const activeStyle = active?.getAttribute('style') ?? '';
|
|
103
|
+
const result = {
|
|
104
|
+
active: activeStyle,
|
|
105
|
+
inactive: inactive?.getAttribute('style') ?? '',
|
|
106
|
+
panel: panel?.getAttribute('style') ?? '',
|
|
107
|
+
activeBackground: /background-color:([^;]+)/u.exec(activeStyle)?.[1],
|
|
108
|
+
};
|
|
109
|
+
browserWindow.close();
|
|
110
|
+
return result;
|
|
111
|
+
}
|
|
@@ -12,9 +12,10 @@ export function Tabs({
|
|
|
12
12
|
onValueChange,
|
|
13
13
|
testID,
|
|
14
14
|
value,
|
|
15
|
+
variant,
|
|
15
16
|
...layoutProps
|
|
16
17
|
}: TabsProps) {
|
|
17
|
-
const contextValue = useTabsController({ defaultValue, onValueChange, testID, value });
|
|
18
|
+
const contextValue = useTabsController({ defaultValue, onValueChange, testID, value, variant });
|
|
18
19
|
|
|
19
20
|
return (
|
|
20
21
|
<TabsContext value={contextValue}>
|
|
@@ -10,7 +10,11 @@ export function useTabsController({
|
|
|
10
10
|
onValueChange,
|
|
11
11
|
testID,
|
|
12
12
|
value,
|
|
13
|
-
|
|
13
|
+
variant = 'line',
|
|
14
|
+
}: Pick<
|
|
15
|
+
TabsProps,
|
|
16
|
+
'defaultValue' | 'onValueChange' | 'testID' | 'value' | 'variant'
|
|
17
|
+
>): TabsContextValue {
|
|
14
18
|
const [activeValue, setActiveValue] = useControllableState<string | undefined>({
|
|
15
19
|
defaultValue,
|
|
16
20
|
onChange: (nextValue) => {
|
|
@@ -49,7 +53,8 @@ export function useTabsController({
|
|
|
49
53
|
setFocusedValue,
|
|
50
54
|
tabs,
|
|
51
55
|
unregisterTab,
|
|
56
|
+
variant,
|
|
52
57
|
}),
|
|
53
|
-
[activeValue, focusedValue, registerTab, setActiveValue, tabs, testID, unregisterTab],
|
|
58
|
+
[activeValue, focusedValue, registerTab, setActiveValue, tabs, testID, unregisterTab, variant],
|
|
54
59
|
);
|
|
55
60
|
}
|
|
@@ -1,4 +1,10 @@
|
|
|
1
|
-
export type {
|
|
1
|
+
export type {
|
|
2
|
+
TabListProps,
|
|
3
|
+
TabPanelProps,
|
|
4
|
+
TabProps,
|
|
5
|
+
TabsProps,
|
|
6
|
+
TabsVariant,
|
|
7
|
+
} from '../../types/tabs';
|
|
2
8
|
export { Tab } from './adapters/inbound/Tab';
|
|
3
9
|
export { TabList } from './adapters/inbound/TabList';
|
|
4
10
|
export { TabPanel } from './adapters/inbound/TabPanel';
|
package/src/index.ts
CHANGED
|
@@ -78,7 +78,13 @@ export type { PressableProps } from './features/pressable/public';
|
|
|
78
78
|
export { Pressable } from './features/pressable/public';
|
|
79
79
|
export type { SurfaceProps, SurfaceVariant } from './features/surface/public';
|
|
80
80
|
export { Surface } from './features/surface/public';
|
|
81
|
-
export type {
|
|
81
|
+
export type {
|
|
82
|
+
TabListProps,
|
|
83
|
+
TabPanelProps,
|
|
84
|
+
TabProps,
|
|
85
|
+
TabsProps,
|
|
86
|
+
TabsVariant,
|
|
87
|
+
} from './features/tabs/public';
|
|
82
88
|
export { Tab, TabList, TabPanel, Tabs } from './features/tabs/public';
|
|
83
89
|
export type {
|
|
84
90
|
ActionSemantics,
|
package/src/types/tabs.ts
CHANGED
|
@@ -3,12 +3,15 @@ import type React from 'react';
|
|
|
3
3
|
import type { InteractionPolicy } from './interactionPolicy';
|
|
4
4
|
import type { ViewStyleProps } from './layout';
|
|
5
5
|
|
|
6
|
+
export type TabsVariant = 'line' | 'attached';
|
|
7
|
+
|
|
6
8
|
export interface TabsProps extends ViewStyleProps {
|
|
7
9
|
children?: React.ReactNode;
|
|
8
10
|
value?: string;
|
|
9
11
|
defaultValue?: string;
|
|
10
12
|
onValueChange?: ((value: string) => void) | undefined;
|
|
11
13
|
testID?: string;
|
|
14
|
+
variant?: TabsVariant;
|
|
12
15
|
}
|
|
13
16
|
|
|
14
17
|
export interface TabListProps {
|
|
@@ -48,6 +51,7 @@ export interface TabsContextValue {
|
|
|
48
51
|
setFocusedValue: (value: string | undefined) => void;
|
|
49
52
|
tabs: readonly TabRegistration[];
|
|
50
53
|
unregisterTab: (value: string) => void;
|
|
54
|
+
variant: TabsVariant;
|
|
51
55
|
}
|
|
52
56
|
|
|
53
57
|
export type TabNavigationKey =
|