@xsolla/xui-b2b-accordion 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.
Files changed (2) hide show
  1. package/README.md +99 -68
  2. package/package.json +4 -4
package/README.md CHANGED
@@ -1,25 +1,67 @@
1
- # B2B Accordion
1
+ # Accordion
2
2
 
3
- A stacked list of `Collapsible` items with coordinated open/close behaviour. By default only one item can be open at a time (single mode). Use for FAQ sections, setup guides, or any ordered list of expandable content.
3
+ A stacked list of `Collapsible` items with coordinated open/close behaviour. By default only one item can be open at a time; pass `multiple` to allow several open simultaneously.
4
4
 
5
- For a single standalone expandable section, use `@xsolla/xui-b2b-collapsible` instead.
5
+ For a single standalone expandable section, use `@xsolla/xui-b2b-collapsible`.
6
6
 
7
7
  ## Installation
8
8
 
9
9
  ```bash
10
10
  npm install @xsolla/xui-b2b-accordion
11
- # or
12
- yarn add @xsolla/xui-b2b-accordion
13
11
  ```
14
12
 
15
- > `@xsolla/xui-b2b-collapsible` is a peer dependency and is installed automatically.
13
+ `@xsolla/xui-b2b-collapsible` is a peer dependency and is installed automatically.
16
14
 
17
- ## Demo
15
+ ## Imports
18
16
 
19
- ### Setup Guide Pattern
17
+ ```tsx
18
+ import { Accordion, type AccordionItem, type AccordionProps } from '@xsolla/xui-b2b-accordion';
19
+ ```
20
+
21
+ ## Quick start
22
+
23
+ ```tsx
24
+ import { Accordion, type AccordionItem } from '@xsolla/xui-b2b-accordion';
25
+
26
+ const items: AccordionItem[] = [
27
+ { key: 'what', title: 'What is Xsolla?', content: <p>Global video game commerce.</p> },
28
+ { key: 'sdk', title: 'How do I integrate the SDK?', content: <p>Follow the integration guide.</p> },
29
+ ];
30
+
31
+ <Accordion items={items} defaultOpenKeys={['what']} />;
32
+ ```
33
+
34
+ ## API Reference
35
+
36
+ ### `<Accordion>`
37
+
38
+ | Prop | Type | Default | Description |
39
+ | --- | --- | --- | --- |
40
+ | `items` | `AccordionItem[]` | — | Required. Array of item definitions. |
41
+ | `multiple` | `boolean` | `false` | Allow more than one item open simultaneously. |
42
+ | `defaultOpenKeys` | `string[]` | `[]` | Keys open on first render (uncontrolled). |
43
+ | `openKeys` | `string[]` | — | Controlled open keys. |
44
+ | `onOpenChange` | `(keys: string[]) => void` | — | Called when open keys change. |
45
+ | `className` | `string` | — | CSS class applied to the root wrapper. |
46
+
47
+ Inherits `ThemeOverrideProps` (`themeMode`, `themeProductContext`).
48
+
49
+ ### `AccordionItem`
50
+
51
+ | Field | Type | Description |
52
+ | --- | --- | --- |
53
+ | `key` | `string` | Required. Unique identifier used for open/close tracking. |
54
+ | `title` | `ReactNode` | Required. Title text or node in the trigger row. |
55
+ | `content` | `ReactNode` | Required. Body content shown when expanded. |
56
+ | `caption` | `ReactNode` | Secondary text below the title. |
57
+ | `icon` | `ReactNode` | Optional 32×32 left slot. Wrap with `IconWrapper`, or pass a `Checkbox` for selection-style accordions. Click events on this slot are stopped before they reach the trigger. |
58
+ | `trailing` | `ReactNode` | Content to the right of the text, before the chevron (e.g. `Status`). |
59
+
60
+ ## Examples
61
+
62
+ ### Setup guide pattern
20
63
 
21
64
  ```tsx
22
- import React from 'react';
23
65
  import { Accordion, type AccordionItem } from '@xsolla/xui-b2b-accordion';
24
66
  import { Status } from '@xsolla/xui-status';
25
67
 
@@ -44,81 +86,70 @@ const items: AccordionItem[] = [
44
86
  },
45
87
  ];
46
88
 
47
- <Accordion items={items} defaultOpenKeys={['template']} />
89
+ <Accordion items={items} defaultOpenKeys={['template']} />;
48
90
  ```
49
91
 
50
- ### FAQ Pattern
92
+ ### With checkbox left slot
51
93
 
52
94
  ```tsx
53
- const items: AccordionItem[] = [
54
- {
55
- key: 'what',
56
- title: 'What is Xsolla?',
57
- caption: 'About',
58
- content: <p>Xsolla is a global video game commerce company.</p>,
59
- },
60
- {
61
- key: 'sdk',
62
- title: 'How do I integrate the SDK?',
63
- caption: 'Integration',
64
- content: <p>Follow the integration guide in the developer docs.</p>,
65
- },
66
- ];
67
-
68
- <Accordion items={items} defaultOpenKeys={['what']} />
95
+ import { useState } from 'react';
96
+ import { Accordion, type AccordionItem } from '@xsolla/xui-b2b-accordion';
97
+ import { Checkbox } from '@xsolla/xui-checkbox';
98
+
99
+ function Selectable() {
100
+ const [done, setDone] = useState<Record<string, boolean>>({});
101
+ const make = (key: string, title: string): AccordionItem => ({
102
+ key,
103
+ title,
104
+ icon: (
105
+ <Checkbox
106
+ size="md"
107
+ checked={!!done[key]}
108
+ onChange={(e) => setDone((d) => ({ ...d, [key]: e.target.checked }))}
109
+ />
110
+ ),
111
+ content: <p>Step body.</p>,
112
+ });
113
+
114
+ return (
115
+ <Accordion
116
+ items={[
117
+ make('one', 'Connect your store'),
118
+ make('two', 'Add at least one product'),
119
+ make('three', 'Publish'),
120
+ ]}
121
+ />
122
+ );
123
+ }
69
124
  ```
70
125
 
71
- ### Multiple Open Items
126
+ ### Multiple open
72
127
 
73
128
  ```tsx
74
- // Allow more than one item open at the same time
75
- <Accordion items={items} multiple defaultOpenKeys={['what', 'payments']} />
129
+ <Accordion items={items} multiple defaultOpenKeys={['what', 'sdk']} />
76
130
  ```
77
131
 
78
132
  ### Controlled
79
133
 
80
134
  ```tsx
81
- import React, { useState } from 'react';
82
-
83
- const [openKeys, setOpenKeys] = useState<string[]>(['what']);
84
-
85
- <Accordion
86
- items={items}
87
- multiple
88
- openKeys={openKeys}
89
- onOpenChange={setOpenKeys}
90
- />
135
+ import { useState } from 'react';
136
+
137
+ function ControlledAccordion({ items }) {
138
+ const [openKeys, setOpenKeys] = useState<string[]>(['what']);
139
+ return (
140
+ <Accordion items={items} multiple openKeys={openKeys} onOpenChange={setOpenKeys} />
141
+ );
142
+ }
91
143
  ```
92
144
 
93
- ## API Reference
94
-
95
- ### Accordion
96
-
97
- | Prop | Type | Default | Description |
98
- | :--- | :--- | :------ | :---------- |
99
- | `items` | `AccordionItem[]` | — | **Required.** Array of item definitions. |
100
- | `multiple` | `boolean` | `false` | Allow more than one item open simultaneously. |
101
- | `defaultOpenKeys` | `string[]` | `[]` | Keys open on first render (uncontrolled). |
102
- | `openKeys` | `string[]` | — | Controlled open keys. |
103
- | `onOpenChange` | `(keys: string[]) => void` | — | Called when open keys change. |
104
- | `className` | `string` | — | CSS class applied to the root wrapper. |
105
- | `themeMode` | `string` | — | Override the global theme mode. |
106
- | `themeProductContext` | `string` | — | Override the global product context. |
145
+ ## Accessibility
107
146
 
108
- ### AccordionItem
109
-
110
- | Field | Type | Description |
111
- | :---- | :--- | :---------- |
112
- | `key` | `string` | **Required.** Unique identifier used for open/close tracking. |
113
- | `title` | `ReactNode` | **Required.** Title text or node in the trigger row. |
114
- | `content` | `ReactNode` | **Required.** Body content shown when expanded. |
115
- | `caption` | `ReactNode` | Secondary text below the title (e.g. category label). |
116
- | `trailing` | `ReactNode` | Content to the right of the text, before the chevron (e.g. `Status`). |
147
+ - Each item's trigger inherits `Collapsible`'s `role="button"`, `tabIndex={0}`, and `aria-expanded` semantics.
148
+ - Triggers respond to Enter and Space; the `icon` and `trailing` slots stop click propagation so interactive elements inside them (checkboxes, buttons) do not toggle the panel.
149
+ - Panel content is always in the DOM (hidden via `grid-template-rows: 0fr`) so screen readers can reach it.
117
150
 
118
151
  ## Behaviour
119
152
 
120
- - Items always use `view="white-surface"` — the Accordion composes `Collapsible` internally.
121
- - In **single mode** (default), opening an item closes all others.
122
- - In **multiple mode**, items toggle independently.
123
- - Controlled mode (`openKeys` + `onOpenChange`) overrides all internal state.
124
- - Panel content is always in the DOM (hidden via CSS `grid-template-rows: 0fr`) — no mount/unmount on toggle.
153
+ - All items render as `Collapsible` with `view="white-surface"`.
154
+ - In single mode (default), opening an item closes the others; in multiple mode, items toggle independently.
155
+ - Controlled mode (`openKeys` + `onOpenChange`) overrides internal state.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xsolla/xui-b2b-accordion",
3
- "version": "0.149.1",
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-b2b-collapsible": "0.149.1",
17
- "@xsolla/xui-core": "0.149.1",
18
- "@xsolla/xui-primitives-core": "0.149.1"
16
+ "@xsolla/xui-b2b-collapsible": "0.151.0",
17
+ "@xsolla/xui-core": "0.151.0",
18
+ "@xsolla/xui-primitives-core": "0.151.0"
19
19
  },
20
20
  "peerDependencies": {
21
21
  "react": ">=16.8.0",