@xsolla/xui-tabs 0.119.0 → 0.121.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/package.json +4 -4
- package/native/index.js.flow +0 -159
- package/web/index.js.flow +0 -159
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-tabs",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.121.0",
|
|
4
4
|
"main": "./web/index.js",
|
|
5
5
|
"module": "./web/index.mjs",
|
|
6
6
|
"types": "./web/index.d.ts",
|
|
@@ -12,9 +12,9 @@
|
|
|
12
12
|
"test:watch": "vitest"
|
|
13
13
|
},
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@xsolla/xui-badge": "0.
|
|
16
|
-
"@xsolla/xui-core": "0.
|
|
17
|
-
"@xsolla/xui-primitives-core": "0.
|
|
15
|
+
"@xsolla/xui-badge": "0.121.0",
|
|
16
|
+
"@xsolla/xui-core": "0.121.0",
|
|
17
|
+
"@xsolla/xui-primitives-core": "0.121.0"
|
|
18
18
|
},
|
|
19
19
|
"peerDependencies": {
|
|
20
20
|
"react": ">=16.8.0",
|
package/native/index.js.flow
DELETED
|
@@ -1,159 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Flowtype definitions for index
|
|
3
|
-
* Generated by Flowgen from a Typescript Definition
|
|
4
|
-
* Flowgen v1.21.0
|
|
5
|
-
* @flow
|
|
6
|
-
*/
|
|
7
|
-
|
|
8
|
-
import React from "react";
|
|
9
|
-
declare interface TabItemType {
|
|
10
|
-
/**
|
|
11
|
-
* Unique identifier for the tab
|
|
12
|
-
*/
|
|
13
|
-
id: string;
|
|
14
|
-
|
|
15
|
-
/**
|
|
16
|
-
* Display label for the tab
|
|
17
|
-
*/
|
|
18
|
-
label: string;
|
|
19
|
-
|
|
20
|
-
/**
|
|
21
|
-
* Optional icon to display before the label
|
|
22
|
-
*/
|
|
23
|
-
icon?: React.ReactNode;
|
|
24
|
-
|
|
25
|
-
/**
|
|
26
|
-
* Optional counter to display after the label
|
|
27
|
-
*/
|
|
28
|
-
counter?: string | number;
|
|
29
|
-
|
|
30
|
-
/**
|
|
31
|
-
* Optional badge to display
|
|
32
|
-
*/
|
|
33
|
-
badge?: boolean | string | number;
|
|
34
|
-
|
|
35
|
-
/**
|
|
36
|
-
* Whether the tab is disabled
|
|
37
|
-
*/
|
|
38
|
-
disabled?: boolean;
|
|
39
|
-
|
|
40
|
-
/**
|
|
41
|
-
* Accessible label for screen readers (defaults to label)
|
|
42
|
-
*/
|
|
43
|
-
"aria-label"?: string;
|
|
44
|
-
}
|
|
45
|
-
declare interface TabsProps {
|
|
46
|
-
/**
|
|
47
|
-
* Array of tab items
|
|
48
|
-
*/
|
|
49
|
-
tabs: TabItemType[];
|
|
50
|
-
|
|
51
|
-
/**
|
|
52
|
-
* ID of the currently active tab
|
|
53
|
-
*/
|
|
54
|
-
activeTabId?: string;
|
|
55
|
-
|
|
56
|
-
/**
|
|
57
|
-
* Callback when a tab is selected
|
|
58
|
-
*/
|
|
59
|
-
onChange?: (id: string) => void;
|
|
60
|
-
|
|
61
|
-
/**
|
|
62
|
-
* Size variant of the tabs
|
|
63
|
-
*/
|
|
64
|
-
size?: "xl" | "lg" | "md" | "sm";
|
|
65
|
-
|
|
66
|
-
/**
|
|
67
|
-
* Visual variant of the tabs
|
|
68
|
-
*/
|
|
69
|
-
variant?: "line" | "segmented";
|
|
70
|
-
|
|
71
|
-
/**
|
|
72
|
-
* Whether to align tabs to the left (only for line variant)
|
|
73
|
-
*/
|
|
74
|
-
alignLeft?: boolean;
|
|
75
|
-
|
|
76
|
-
/**
|
|
77
|
-
* Whether the component should stretch to fill its container
|
|
78
|
-
*/
|
|
79
|
-
stretched?: boolean;
|
|
80
|
-
|
|
81
|
-
/**
|
|
82
|
-
* Accessible label for the tab list
|
|
83
|
-
*/
|
|
84
|
-
"aria-label"?: string;
|
|
85
|
-
|
|
86
|
-
/**
|
|
87
|
-
* ID of element that labels this tab list
|
|
88
|
-
*/
|
|
89
|
-
"aria-labelledby"?: string;
|
|
90
|
-
|
|
91
|
-
/**
|
|
92
|
-
* Whether keyboard navigation should automatically activate tabs
|
|
93
|
-
*/
|
|
94
|
-
activateOnFocus?: boolean;
|
|
95
|
-
|
|
96
|
-
/**
|
|
97
|
-
* HTML id attribute
|
|
98
|
-
*/
|
|
99
|
-
id?: string;
|
|
100
|
-
|
|
101
|
-
/**
|
|
102
|
-
* Test ID for testing frameworks
|
|
103
|
-
*/
|
|
104
|
-
testID?: string;
|
|
105
|
-
}
|
|
106
|
-
/**
|
|
107
|
-
* Tabs - An accessible tabbed interface component
|
|
108
|
-
*
|
|
109
|
-
* Implements WAI-ARIA Tabs pattern with proper keyboard navigation:
|
|
110
|
-
* - Arrow Left/Right: Navigate between tabs
|
|
111
|
-
* - Home: Jump to first tab
|
|
112
|
-
* - End: Jump to last tab
|
|
113
|
-
* - Enter/Space: Activate focused tab (when activateOnFocus is false)
|
|
114
|
-
*
|
|
115
|
-
* Variants:
|
|
116
|
-
* - "line" (default): Traditional underlined tabs
|
|
117
|
-
* - "segmented": Button-group style segmented control
|
|
118
|
-
*/
|
|
119
|
-
declare var Tabs: React.FC<TabsProps>;
|
|
120
|
-
/**
|
|
121
|
-
* TabPanel - Container for tab content with proper accessibility attributes
|
|
122
|
-
* @example <TabPanel id="tab1" tabsId="my-tabs" hidden={activeTab !== 'tab1'}>
|
|
123
|
-
* <p>Content for tab 1</p>
|
|
124
|
-
* </TabPanel>
|
|
125
|
-
*/
|
|
126
|
-
declare interface TabPanelProps {
|
|
127
|
-
/**
|
|
128
|
-
* ID matching the tab's id
|
|
129
|
-
*/
|
|
130
|
-
id: string;
|
|
131
|
-
|
|
132
|
-
/**
|
|
133
|
-
* ID of the parent Tabs component
|
|
134
|
-
*/
|
|
135
|
-
tabsId: string;
|
|
136
|
-
|
|
137
|
-
/**
|
|
138
|
-
* Whether the panel is hidden
|
|
139
|
-
*/
|
|
140
|
-
hidden?: boolean;
|
|
141
|
-
|
|
142
|
-
/**
|
|
143
|
-
* Panel content
|
|
144
|
-
*/
|
|
145
|
-
children: React.ReactNode;
|
|
146
|
-
|
|
147
|
-
/**
|
|
148
|
-
* Accessible label for the panel
|
|
149
|
-
*/
|
|
150
|
-
"aria-label"?: string;
|
|
151
|
-
|
|
152
|
-
/**
|
|
153
|
-
* Test ID for testing frameworks
|
|
154
|
-
*/
|
|
155
|
-
testID?: string;
|
|
156
|
-
}
|
|
157
|
-
declare var TabPanel: React.FC<TabPanelProps>;
|
|
158
|
-
export type { TabItemType, TabPanelProps, TabsProps };
|
|
159
|
-
declare export { TabPanel, Tabs };
|
package/web/index.js.flow
DELETED
|
@@ -1,159 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Flowtype definitions for index
|
|
3
|
-
* Generated by Flowgen from a Typescript Definition
|
|
4
|
-
* Flowgen v1.21.0
|
|
5
|
-
* @flow
|
|
6
|
-
*/
|
|
7
|
-
|
|
8
|
-
import React from "react";
|
|
9
|
-
declare interface TabItemType {
|
|
10
|
-
/**
|
|
11
|
-
* Unique identifier for the tab
|
|
12
|
-
*/
|
|
13
|
-
id: string;
|
|
14
|
-
|
|
15
|
-
/**
|
|
16
|
-
* Display label for the tab
|
|
17
|
-
*/
|
|
18
|
-
label: string;
|
|
19
|
-
|
|
20
|
-
/**
|
|
21
|
-
* Optional icon to display before the label
|
|
22
|
-
*/
|
|
23
|
-
icon?: React.ReactNode;
|
|
24
|
-
|
|
25
|
-
/**
|
|
26
|
-
* Optional counter to display after the label
|
|
27
|
-
*/
|
|
28
|
-
counter?: string | number;
|
|
29
|
-
|
|
30
|
-
/**
|
|
31
|
-
* Optional badge to display
|
|
32
|
-
*/
|
|
33
|
-
badge?: boolean | string | number;
|
|
34
|
-
|
|
35
|
-
/**
|
|
36
|
-
* Whether the tab is disabled
|
|
37
|
-
*/
|
|
38
|
-
disabled?: boolean;
|
|
39
|
-
|
|
40
|
-
/**
|
|
41
|
-
* Accessible label for screen readers (defaults to label)
|
|
42
|
-
*/
|
|
43
|
-
"aria-label"?: string;
|
|
44
|
-
}
|
|
45
|
-
declare interface TabsProps {
|
|
46
|
-
/**
|
|
47
|
-
* Array of tab items
|
|
48
|
-
*/
|
|
49
|
-
tabs: TabItemType[];
|
|
50
|
-
|
|
51
|
-
/**
|
|
52
|
-
* ID of the currently active tab
|
|
53
|
-
*/
|
|
54
|
-
activeTabId?: string;
|
|
55
|
-
|
|
56
|
-
/**
|
|
57
|
-
* Callback when a tab is selected
|
|
58
|
-
*/
|
|
59
|
-
onChange?: (id: string) => void;
|
|
60
|
-
|
|
61
|
-
/**
|
|
62
|
-
* Size variant of the tabs
|
|
63
|
-
*/
|
|
64
|
-
size?: "xl" | "lg" | "md" | "sm";
|
|
65
|
-
|
|
66
|
-
/**
|
|
67
|
-
* Visual variant of the tabs
|
|
68
|
-
*/
|
|
69
|
-
variant?: "line" | "segmented";
|
|
70
|
-
|
|
71
|
-
/**
|
|
72
|
-
* Whether to align tabs to the left (only for line variant)
|
|
73
|
-
*/
|
|
74
|
-
alignLeft?: boolean;
|
|
75
|
-
|
|
76
|
-
/**
|
|
77
|
-
* Whether the component should stretch to fill its container
|
|
78
|
-
*/
|
|
79
|
-
stretched?: boolean;
|
|
80
|
-
|
|
81
|
-
/**
|
|
82
|
-
* Accessible label for the tab list
|
|
83
|
-
*/
|
|
84
|
-
"aria-label"?: string;
|
|
85
|
-
|
|
86
|
-
/**
|
|
87
|
-
* ID of element that labels this tab list
|
|
88
|
-
*/
|
|
89
|
-
"aria-labelledby"?: string;
|
|
90
|
-
|
|
91
|
-
/**
|
|
92
|
-
* Whether keyboard navigation should automatically activate tabs
|
|
93
|
-
*/
|
|
94
|
-
activateOnFocus?: boolean;
|
|
95
|
-
|
|
96
|
-
/**
|
|
97
|
-
* HTML id attribute
|
|
98
|
-
*/
|
|
99
|
-
id?: string;
|
|
100
|
-
|
|
101
|
-
/**
|
|
102
|
-
* Test ID for testing frameworks
|
|
103
|
-
*/
|
|
104
|
-
testID?: string;
|
|
105
|
-
}
|
|
106
|
-
/**
|
|
107
|
-
* Tabs - An accessible tabbed interface component
|
|
108
|
-
*
|
|
109
|
-
* Implements WAI-ARIA Tabs pattern with proper keyboard navigation:
|
|
110
|
-
* - Arrow Left/Right: Navigate between tabs
|
|
111
|
-
* - Home: Jump to first tab
|
|
112
|
-
* - End: Jump to last tab
|
|
113
|
-
* - Enter/Space: Activate focused tab (when activateOnFocus is false)
|
|
114
|
-
*
|
|
115
|
-
* Variants:
|
|
116
|
-
* - "line" (default): Traditional underlined tabs
|
|
117
|
-
* - "segmented": Button-group style segmented control
|
|
118
|
-
*/
|
|
119
|
-
declare var Tabs: React.FC<TabsProps>;
|
|
120
|
-
/**
|
|
121
|
-
* TabPanel - Container for tab content with proper accessibility attributes
|
|
122
|
-
* @example <TabPanel id="tab1" tabsId="my-tabs" hidden={activeTab !== 'tab1'}>
|
|
123
|
-
* <p>Content for tab 1</p>
|
|
124
|
-
* </TabPanel>
|
|
125
|
-
*/
|
|
126
|
-
declare interface TabPanelProps {
|
|
127
|
-
/**
|
|
128
|
-
* ID matching the tab's id
|
|
129
|
-
*/
|
|
130
|
-
id: string;
|
|
131
|
-
|
|
132
|
-
/**
|
|
133
|
-
* ID of the parent Tabs component
|
|
134
|
-
*/
|
|
135
|
-
tabsId: string;
|
|
136
|
-
|
|
137
|
-
/**
|
|
138
|
-
* Whether the panel is hidden
|
|
139
|
-
*/
|
|
140
|
-
hidden?: boolean;
|
|
141
|
-
|
|
142
|
-
/**
|
|
143
|
-
* Panel content
|
|
144
|
-
*/
|
|
145
|
-
children: React.ReactNode;
|
|
146
|
-
|
|
147
|
-
/**
|
|
148
|
-
* Accessible label for the panel
|
|
149
|
-
*/
|
|
150
|
-
"aria-label"?: string;
|
|
151
|
-
|
|
152
|
-
/**
|
|
153
|
-
* Test ID for testing frameworks
|
|
154
|
-
*/
|
|
155
|
-
testID?: string;
|
|
156
|
-
}
|
|
157
|
-
declare var TabPanel: React.FC<TabPanelProps>;
|
|
158
|
-
export type { TabItemType, TabPanelProps, TabsProps };
|
|
159
|
-
declare export { TabPanel, Tabs };
|