@xsolla/xui-b2b-collapsible 0.149.1 → 0.151.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/README.md +113 -102
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -1,167 +1,178 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Collapsible
|
|
2
2
|
|
|
3
|
-
A single expandable section with animated open/close. Use for "Show more" patterns, technical details, or any card-level secondary content
|
|
4
|
-
|
|
5
|
-
> **Migrating from `@xsolla/publisher-account-core`?** See the [prop migration table](#migrating-from-publisher-account-core) below.
|
|
3
|
+
A single expandable section with animated open/close. Use for "Show more" patterns, technical details, or any card-level secondary content; for stacked lists, use `@xsolla/xui-b2b-accordion`.
|
|
6
4
|
|
|
7
5
|
## Installation
|
|
8
6
|
|
|
9
7
|
```bash
|
|
10
8
|
npm install @xsolla/xui-b2b-collapsible
|
|
11
|
-
# or
|
|
12
|
-
yarn add @xsolla/xui-b2b-collapsible
|
|
13
9
|
```
|
|
14
10
|
|
|
15
|
-
##
|
|
11
|
+
## Imports
|
|
12
|
+
|
|
13
|
+
```tsx
|
|
14
|
+
import {
|
|
15
|
+
Collapsible,
|
|
16
|
+
type CollapsibleProps,
|
|
17
|
+
type CollapsibleView,
|
|
18
|
+
} from '@xsolla/xui-b2b-collapsible';
|
|
19
|
+
```
|
|
16
20
|
|
|
17
|
-
|
|
21
|
+
## Quick start
|
|
18
22
|
|
|
19
23
|
```tsx
|
|
20
|
-
import React from 'react';
|
|
21
24
|
import { Collapsible } from '@xsolla/xui-b2b-collapsible';
|
|
22
25
|
|
|
23
|
-
<Collapsible
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
view="white-surface"
|
|
27
|
-
>
|
|
28
|
-
<p>Content goes here.</p>
|
|
29
|
-
</Collapsible>
|
|
26
|
+
<Collapsible title="Setup" caption="Step 1 of 3" view="white-surface">
|
|
27
|
+
<p>Body content goes here.</p>
|
|
28
|
+
</Collapsible>;
|
|
30
29
|
```
|
|
31
30
|
|
|
32
|
-
|
|
31
|
+
## API Reference
|
|
33
32
|
|
|
34
|
-
|
|
35
|
-
// No background — shows a bottom border divider
|
|
36
|
-
<Collapsible title="Without surface" view="without-surface">
|
|
37
|
-
<p>Content</p>
|
|
38
|
-
</Collapsible>
|
|
33
|
+
### `<Collapsible>`
|
|
39
34
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
35
|
+
| Prop | Type | Default | Description |
|
|
36
|
+
| --- | --- | --- | --- |
|
|
37
|
+
| `title` | `ReactNode` | — | Required. Title text or node in the trigger row. |
|
|
38
|
+
| `children` | `ReactNode` | — | Required. Body content shown when expanded. |
|
|
39
|
+
| `view` | `CollapsibleView` | `"without-surface"` | Visual surface style. |
|
|
40
|
+
| `caption` | `ReactNode` | — | Secondary text rendered below the title. |
|
|
41
|
+
| `icon` | `ReactNode` | — | Optional 32×32 left slot. Consumer controls styling — wrap with `IconWrapper` or pass a `Checkbox`. Click events on this slot are stopped before they reach the trigger. |
|
|
42
|
+
| `trailing` | `ReactNode` | — | Content to the right of the text, before the chevron (e.g. `Status`). |
|
|
43
|
+
| `defaultOpen` | `boolean` | `false` | Initial open state for uncontrolled usage. |
|
|
44
|
+
| `open` | `boolean` | — | Controlled open state. |
|
|
45
|
+
| `onOpenChange` | `(open: boolean) => void` | — | Called when open state changes. |
|
|
46
|
+
| `className` | `string` | — | CSS class applied to the root element. |
|
|
47
|
+
| `aria-label` | `string` | auto | Accessible label for the trigger. Defaults to `title` when it is a string. |
|
|
44
48
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
+
Inherits `ThemeOverrideProps` (`themeMode`, `themeProductContext`).
|
|
50
|
+
|
|
51
|
+
### `CollapsibleView`
|
|
52
|
+
|
|
53
|
+
```ts
|
|
54
|
+
type CollapsibleView = 'without-surface' | 'white-surface' | 'grey-surface';
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
| Value | Appearance |
|
|
58
|
+
| --- | --- |
|
|
59
|
+
| `without-surface` | No background; bottom border divider. |
|
|
60
|
+
| `white-surface` | White card with rounded corners. |
|
|
61
|
+
| `grey-surface` | Tinted overlay-mono card with rounded corners. |
|
|
62
|
+
|
|
63
|
+
### Deprecated props
|
|
64
|
+
|
|
65
|
+
The following are still accepted for migration from `@xsolla/publisher-account-core` and trigger an IDE `@deprecated` warning:
|
|
66
|
+
|
|
67
|
+
| Deprecated | Replacement | Notes |
|
|
68
|
+
| --- | --- | --- |
|
|
69
|
+
| `onChange` | `onOpenChange` | Same `(isOpen: boolean) => void` signature. |
|
|
70
|
+
| `statusIcon` | `trailing` | Same shape. |
|
|
71
|
+
| `description` | `caption` | Covers the legacy `lg`-size `description`. |
|
|
72
|
+
|
|
73
|
+
Props with no equivalent (intentional redesign): `backgroundColor`, `size`, `childContentPadding`, `label` (sm size), `openingState` (use `open` / `defaultOpen`).
|
|
74
|
+
|
|
75
|
+
## Examples
|
|
76
|
+
|
|
77
|
+
### Three view variants
|
|
78
|
+
|
|
79
|
+
```tsx
|
|
80
|
+
import { Collapsible } from '@xsolla/xui-b2b-collapsible';
|
|
81
|
+
|
|
82
|
+
<>
|
|
83
|
+
<Collapsible title="Without surface" view="without-surface">
|
|
84
|
+
<p>Content</p>
|
|
85
|
+
</Collapsible>
|
|
86
|
+
<Collapsible title="White surface" view="white-surface">
|
|
87
|
+
<p>Content</p>
|
|
88
|
+
</Collapsible>
|
|
89
|
+
<Collapsible title="Grey surface" view="grey-surface">
|
|
90
|
+
<p>Content</p>
|
|
91
|
+
</Collapsible>
|
|
92
|
+
</>;
|
|
49
93
|
```
|
|
50
94
|
|
|
51
|
-
### Open by
|
|
95
|
+
### Open by default
|
|
52
96
|
|
|
53
97
|
```tsx
|
|
98
|
+
import { Collapsible } from '@xsolla/xui-b2b-collapsible';
|
|
99
|
+
|
|
54
100
|
<Collapsible title="Pre-expanded" view="white-surface" defaultOpen>
|
|
55
101
|
<p>Visible on first render.</p>
|
|
56
|
-
</Collapsible
|
|
102
|
+
</Collapsible>;
|
|
57
103
|
```
|
|
58
104
|
|
|
59
|
-
### With
|
|
60
|
-
|
|
61
|
-
The `icon` slot is a pass-through — wrap with `IconWrapper` or use a `Checkbox` directly.
|
|
105
|
+
### With icon slot
|
|
62
106
|
|
|
63
107
|
```tsx
|
|
108
|
+
import { Collapsible } from '@xsolla/xui-b2b-collapsible';
|
|
64
109
|
import { IconWrapper } from '@xsolla/xui-icon-wrapper';
|
|
65
110
|
import { ReverseLeft } from '@xsolla/xui-icons-base';
|
|
66
|
-
import { Checkbox } from '@xsolla/xui-checkbox';
|
|
67
111
|
|
|
68
|
-
// Icon with grey rounded background
|
|
69
112
|
<Collapsible
|
|
70
113
|
title="Setup"
|
|
71
114
|
view="white-surface"
|
|
72
115
|
icon={
|
|
73
116
|
<IconWrapper size="md" shape="smooth">
|
|
74
|
-
<ReverseLeft />
|
|
117
|
+
<ReverseLeft aria-hidden />
|
|
75
118
|
</IconWrapper>
|
|
76
119
|
}
|
|
77
120
|
>
|
|
78
121
|
<p>Content</p>
|
|
79
|
-
</Collapsible
|
|
80
|
-
|
|
81
|
-
// Checkbox as the left slot
|
|
82
|
-
<Collapsible
|
|
83
|
-
title="Mark as complete"
|
|
84
|
-
view="white-surface"
|
|
85
|
-
icon={<Checkbox size="md" checked={checked} onChange={(e) => setChecked(e.target.checked)} />}
|
|
86
|
-
>
|
|
87
|
-
<p>Content</p>
|
|
88
|
-
</Collapsible>
|
|
122
|
+
</Collapsible>;
|
|
89
123
|
```
|
|
90
124
|
|
|
91
|
-
### With
|
|
125
|
+
### With trailing slot
|
|
92
126
|
|
|
93
127
|
```tsx
|
|
128
|
+
import { Collapsible } from '@xsolla/xui-b2b-collapsible';
|
|
94
129
|
import { Status } from '@xsolla/xui-status';
|
|
95
130
|
|
|
96
131
|
<Collapsible
|
|
97
132
|
title="Publish your game store page"
|
|
98
133
|
caption="Publishing"
|
|
99
134
|
view="white-surface"
|
|
100
|
-
trailing={
|
|
135
|
+
trailing={
|
|
136
|
+
<Status palette="warning" size="md" labelType="dot-color">In progress</Status>
|
|
137
|
+
}
|
|
101
138
|
>
|
|
102
139
|
<p>Content</p>
|
|
103
|
-
</Collapsible
|
|
140
|
+
</Collapsible>;
|
|
104
141
|
```
|
|
105
142
|
|
|
106
143
|
### Controlled
|
|
107
144
|
|
|
108
145
|
```tsx
|
|
109
|
-
import
|
|
110
|
-
|
|
111
|
-
const [open, setOpen] = useState(false);
|
|
146
|
+
import { useState } from 'react';
|
|
147
|
+
import { Collapsible } from '@xsolla/xui-b2b-collapsible';
|
|
112
148
|
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
149
|
+
function ControlledCollapsible() {
|
|
150
|
+
const [open, setOpen] = useState(false);
|
|
151
|
+
return (
|
|
152
|
+
<Collapsible
|
|
153
|
+
title="Controlled"
|
|
154
|
+
view="white-surface"
|
|
155
|
+
open={open}
|
|
156
|
+
onOpenChange={setOpen}
|
|
157
|
+
>
|
|
158
|
+
<p>Content</p>
|
|
159
|
+
</Collapsible>
|
|
160
|
+
);
|
|
161
|
+
}
|
|
121
162
|
```
|
|
122
163
|
|
|
123
|
-
## API Reference
|
|
124
|
-
|
|
125
|
-
### Collapsible
|
|
126
|
-
|
|
127
|
-
| Prop | Type | Default | Description |
|
|
128
|
-
| :--- | :--- | :------ | :---------- |
|
|
129
|
-
| `title` | `ReactNode` | — | **Required.** Title text or node in the trigger row. |
|
|
130
|
-
| `children` | `ReactNode` | — | **Required.** Body content shown when expanded. |
|
|
131
|
-
| `view` | `"without-surface" \| "white-surface" \| "grey-surface"` | `"without-surface"` | Visual surface style. |
|
|
132
|
-
| `caption` | `ReactNode` | — | Secondary text rendered below the title. |
|
|
133
|
-
| `icon` | `ReactNode` | — | Optional slot at the left of the trigger. Consumer controls styling (use `IconWrapper` or `Checkbox`). |
|
|
134
|
-
| `trailing` | `ReactNode` | — | Optional slot to the right of the text, before the chevron (e.g. `Status`). |
|
|
135
|
-
| `defaultOpen` | `boolean` | `false` | Initial open state for uncontrolled usage. |
|
|
136
|
-
| `open` | `boolean` | — | Controlled open state. |
|
|
137
|
-
| `onOpenChange` | `(open: boolean) => void` | — | Called when open state changes. |
|
|
138
|
-
| `className` | `string` | — | CSS class applied to the root element. |
|
|
139
|
-
| `aria-label` | `string` | auto | Accessible label for the trigger button. Defaults to `title` when it is a string. |
|
|
140
|
-
| `themeMode` | `string` | — | Override the global theme mode for this component. |
|
|
141
|
-
| `themeProductContext` | `string` | — | Override the global product context for this component. |
|
|
142
|
-
|
|
143
|
-
### Deprecated Props (migrating from `@xsolla/publisher-account-core`)
|
|
144
|
-
|
|
145
|
-
These props are still accepted but will log a TypeScript `@deprecated` warning in your IDE.
|
|
146
|
-
|
|
147
|
-
| Deprecated prop | Use instead | Notes |
|
|
148
|
-
| :-------------- | :---------- | :---- |
|
|
149
|
-
| `onChange` | `onOpenChange` | Same signature `(isOpen: boolean) => void` |
|
|
150
|
-
| `statusIcon` | `trailing` | Same shape |
|
|
151
|
-
| `description` | `caption` | Covers the `lg` size `description` prop from the legacy API |
|
|
152
|
-
|
|
153
|
-
Props with no equivalent in the new API (intentional redesign): `backgroundColor`, `size`, `childContentPadding`, `label` (sm size), `openingState` (use `open` / `defaultOpen`).
|
|
154
|
-
|
|
155
164
|
## Accessibility
|
|
156
165
|
|
|
157
|
-
- Trigger has `role="button"`, `tabIndex={0}`, and `aria-
|
|
158
|
-
- Responds to Enter and Space
|
|
166
|
+
- Trigger has `role="button"`, `tabIndex={0}`, `aria-expanded`, and `aria-controls` linking to the panel.
|
|
167
|
+
- Responds to Enter and Space; the `icon` and `trailing` slots stop click/keyboard events so embedded controls do not toggle the trigger.
|
|
159
168
|
- Panel content is always in the DOM (hidden via `grid-template-rows: 0fr`) for screen-reader access.
|
|
160
169
|
|
|
161
|
-
##
|
|
170
|
+
## Migration
|
|
171
|
+
|
|
172
|
+
Migrating from `@xsolla/publisher-account-core`:
|
|
162
173
|
|
|
163
174
|
```tsx
|
|
164
|
-
//
|
|
175
|
+
// Before
|
|
165
176
|
import { Collapsible } from '@xsolla/publisher-account-core';
|
|
166
177
|
|
|
167
178
|
<Collapsible
|
|
@@ -174,19 +185,19 @@ import { Collapsible } from '@xsolla/publisher-account-core';
|
|
|
174
185
|
onChange={(isOpen) => console.log(isOpen)}
|
|
175
186
|
>
|
|
176
187
|
content
|
|
177
|
-
</Collapsible
|
|
188
|
+
</Collapsible>;
|
|
178
189
|
|
|
179
|
-
//
|
|
190
|
+
// After
|
|
180
191
|
import { Collapsible } from '@xsolla/xui-b2b-collapsible';
|
|
181
192
|
|
|
182
193
|
<Collapsible
|
|
183
194
|
title="Setup"
|
|
184
195
|
caption="Step 1 of 3"
|
|
185
196
|
view="white-surface"
|
|
186
|
-
trailing={<CheckIcon />}
|
|
197
|
+
trailing={<CheckIcon aria-hidden />}
|
|
187
198
|
defaultOpen={false}
|
|
188
199
|
onOpenChange={(isOpen) => console.log(isOpen)}
|
|
189
200
|
>
|
|
190
201
|
content
|
|
191
|
-
</Collapsible
|
|
202
|
+
</Collapsible>;
|
|
192
203
|
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-b2b-collapsible",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.151.0",
|
|
4
4
|
"main": "./web/index.js",
|
|
5
5
|
"module": "./web/index.mjs",
|
|
6
6
|
"types": "./web/index.d.ts",
|
|
@@ -13,9 +13,9 @@
|
|
|
13
13
|
"test:coverage": "vitest run --coverage"
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
|
-
"@xsolla/xui-core": "0.
|
|
17
|
-
"@xsolla/xui-icons-base": "0.
|
|
18
|
-
"@xsolla/xui-primitives-core": "0.
|
|
16
|
+
"@xsolla/xui-core": "0.151.0",
|
|
17
|
+
"@xsolla/xui-icons-base": "0.151.0",
|
|
18
|
+
"@xsolla/xui-primitives-core": "0.151.0"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|
|
21
21
|
"react": ">=16.8.0",
|