@tamagui/accordion 1.61.3 → 1.62.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/dist/cjs/Accordion.js +52 -157
- package/dist/cjs/Accordion.js.map +2 -2
- package/dist/cjs/Accordion.native.js +309 -0
- package/dist/cjs/Accordion.native.js.map +6 -0
- package/dist/cjs/index.js +4 -8
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/index.native.js +20 -0
- package/dist/cjs/index.native.js.map +6 -0
- package/dist/esm/Accordion.js +45 -135
- package/dist/esm/Accordion.js.map +2 -2
- package/dist/jsx/Accordion.js +43 -132
- package/dist/jsx/Accordion.js.map +2 -2
- package/dist/jsx/Accordion.native.js +258 -0
- package/dist/jsx/Accordion.native.js.map +6 -0
- package/dist/jsx/index.native.js +2 -0
- package/dist/jsx/index.native.js.map +6 -0
- package/package.json +10 -10
package/dist/esm/Accordion.js
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
1
|
import { Collapsible, createCollapsibleScope } from "@tamagui/collapsible";
|
|
3
2
|
import { createCollection } from "@tamagui/collection";
|
|
4
3
|
import { createContextScope } from "@tamagui/create-context";
|
|
@@ -14,55 +13,37 @@ import {
|
|
|
14
13
|
withStaticProperties
|
|
15
14
|
} from "@tamagui/web";
|
|
16
15
|
import * as React from "react";
|
|
17
|
-
|
|
18
|
-
const ACCORDION_KEYS = ["Home", "End", "ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"]
|
|
19
|
-
const [Collection, useCollection, createCollectionScope] = createCollection(ACCORDION_NAME);
|
|
20
|
-
const [createAccordionContext, createAccordionScope] = createContextScope(
|
|
16
|
+
import { jsx } from "react/jsx-runtime";
|
|
17
|
+
const ACCORDION_NAME = "Accordion", ACCORDION_KEYS = ["Home", "End", "ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"], [Collection, useCollection, createCollectionScope] = createCollection(ACCORDION_NAME), [createAccordionContext, createAccordionScope] = createContextScope(
|
|
21
18
|
ACCORDION_NAME,
|
|
22
19
|
[createCollectionScope, createCollapsibleScope]
|
|
23
|
-
)
|
|
24
|
-
const
|
|
25
|
-
const AccordionComponent = React.forwardRef((props, forwardedRef) => {
|
|
26
|
-
const { type, ...accordionProps } = props;
|
|
27
|
-
const singleProps = accordionProps;
|
|
28
|
-
const multipleProps = accordionProps;
|
|
20
|
+
), useCollapsibleScope = createCollapsibleScope(), AccordionComponent = React.forwardRef((props, forwardedRef) => {
|
|
21
|
+
const { type, ...accordionProps } = props, singleProps = accordionProps, multipleProps = accordionProps;
|
|
29
22
|
return /* @__PURE__ */ jsx(Collection.Provider, { scope: props.__scopeAccordion, children: type === "multiple" ? /* @__PURE__ */ jsx(AccordionImplMultiple, { ...multipleProps, ref: forwardedRef }) : /* @__PURE__ */ jsx(AccordionImplSingle, { ...singleProps, ref: forwardedRef }) });
|
|
30
23
|
});
|
|
31
24
|
AccordionComponent.displayName = ACCORDION_NAME;
|
|
32
25
|
AccordionComponent.propTypes = {
|
|
33
26
|
type(props) {
|
|
34
27
|
const value = props.value || props.defaultValue;
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
"Invalid prop `type` supplied to `Accordion`. Expected `single` when `defaultValue` or `value` is type `string`."
|
|
43
|
-
);
|
|
44
|
-
}
|
|
45
|
-
if (props.type === "single" && Array.isArray(value)) {
|
|
46
|
-
return new Error(
|
|
47
|
-
"Invalid prop `type` supplied to `Accordion`. Expected `multiple` when `defaultValue` or `value` is type `string[]`."
|
|
48
|
-
);
|
|
49
|
-
}
|
|
50
|
-
return null;
|
|
28
|
+
return props.type && !["single", "multiple"].includes(props.type) ? new Error(
|
|
29
|
+
"Invalid prop `type` supplied to `Accordion`. Expected one of `single | multiple`."
|
|
30
|
+
) : props.type === "multiple" && typeof value == "string" ? new Error(
|
|
31
|
+
"Invalid prop `type` supplied to `Accordion`. Expected `single` when `defaultValue` or `value` is type `string`."
|
|
32
|
+
) : props.type === "single" && Array.isArray(value) ? new Error(
|
|
33
|
+
"Invalid prop `type` supplied to `Accordion`. Expected `multiple` when `defaultValue` or `value` is type `string[]`."
|
|
34
|
+
) : null;
|
|
51
35
|
}
|
|
52
36
|
};
|
|
53
|
-
const [AccordionValueProvider, useAccordionValueContext] = createAccordionContext(ACCORDION_NAME)
|
|
54
|
-
const [AccordionCollapsibleProvider, useAccordionCollapsibleContext] = createAccordionContext(ACCORDION_NAME, { collapsible: false });
|
|
55
|
-
const AccordionImplSingle = React.forwardRef((props, forwardedRef) => {
|
|
37
|
+
const [AccordionValueProvider, useAccordionValueContext] = createAccordionContext(ACCORDION_NAME), [AccordionCollapsibleProvider, useAccordionCollapsibleContext] = createAccordionContext(ACCORDION_NAME, { collapsible: !1 }), AccordionImplSingle = React.forwardRef((props, forwardedRef) => {
|
|
56
38
|
const {
|
|
57
39
|
value: valueProp,
|
|
58
40
|
defaultValue,
|
|
59
41
|
control,
|
|
60
42
|
onValueChange = () => {
|
|
61
43
|
},
|
|
62
|
-
collapsible =
|
|
44
|
+
collapsible = !1,
|
|
63
45
|
...accordionSingleProps
|
|
64
|
-
} = props
|
|
65
|
-
const [value, setValue] = useControllableState({
|
|
46
|
+
} = props, [value, setValue] = useControllableState({
|
|
66
47
|
prop: valueProp,
|
|
67
48
|
defaultProp: defaultValue || "",
|
|
68
49
|
onChange: onValueChange
|
|
@@ -87,25 +68,21 @@ const AccordionImplSingle = React.forwardRef((props, forwardedRef) => {
|
|
|
87
68
|
)
|
|
88
69
|
}
|
|
89
70
|
);
|
|
90
|
-
})
|
|
91
|
-
const AccordionImplMultiple = React.forwardRef((props, forwardedRef) => {
|
|
71
|
+
}), AccordionImplMultiple = React.forwardRef((props, forwardedRef) => {
|
|
92
72
|
const {
|
|
93
73
|
value: valueProp,
|
|
94
74
|
defaultValue,
|
|
95
75
|
onValueChange = () => {
|
|
96
76
|
},
|
|
97
77
|
...accordionMultipleProps
|
|
98
|
-
} = props
|
|
99
|
-
const [value, setValue] = useControllableState({
|
|
78
|
+
} = props, [value, setValue] = useControllableState({
|
|
100
79
|
prop: valueProp,
|
|
101
80
|
defaultProp: defaultValue || [],
|
|
102
81
|
onChange: onValueChange
|
|
103
|
-
})
|
|
104
|
-
const handleItemOpen = React.useCallback(
|
|
82
|
+
}), handleItemOpen = React.useCallback(
|
|
105
83
|
(itemValue) => setValue((prevValue = []) => [...prevValue, itemValue]),
|
|
106
84
|
[setValue]
|
|
107
|
-
)
|
|
108
|
-
const handleItemClose = React.useCallback(
|
|
85
|
+
), handleItemClose = React.useCallback(
|
|
109
86
|
(itemValue) => setValue((prevValue = []) => prevValue.filter((value2) => value2 !== itemValue)),
|
|
110
87
|
[setValue]
|
|
111
88
|
);
|
|
@@ -116,12 +93,10 @@ const AccordionImplMultiple = React.forwardRef((props, forwardedRef) => {
|
|
|
116
93
|
value: value || [],
|
|
117
94
|
onItemOpen: handleItemOpen,
|
|
118
95
|
onItemClose: handleItemClose,
|
|
119
|
-
children: /* @__PURE__ */ jsx(AccordionCollapsibleProvider, { scope: props.__scopeAccordion, collapsible:
|
|
96
|
+
children: /* @__PURE__ */ jsx(AccordionCollapsibleProvider, { scope: props.__scopeAccordion, collapsible: !0, children: /* @__PURE__ */ jsx(AccordionImpl, { ...accordionMultipleProps, ref: forwardedRef }) })
|
|
120
97
|
}
|
|
121
98
|
);
|
|
122
|
-
})
|
|
123
|
-
const [AccordionImplProvider, useAccordionContext] = createAccordionContext(ACCORDION_NAME);
|
|
124
|
-
const AccordionImpl = React.forwardRef(
|
|
99
|
+
}), [AccordionImplProvider, useAccordionContext] = createAccordionContext(ACCORDION_NAME), AccordionImpl = React.forwardRef(
|
|
125
100
|
(props, forwardedRef) => {
|
|
126
101
|
const {
|
|
127
102
|
__scopeAccordion,
|
|
@@ -129,44 +104,22 @@ const AccordionImpl = React.forwardRef(
|
|
|
129
104
|
dir,
|
|
130
105
|
orientation = "vertical",
|
|
131
106
|
...accordionProps
|
|
132
|
-
} = props
|
|
133
|
-
const accordionRef = React.useRef(null);
|
|
134
|
-
const composedRef = useComposedRefs(accordionRef, forwardedRef);
|
|
135
|
-
const getItems = useCollection(__scopeAccordion);
|
|
136
|
-
const direction = useDirection(dir);
|
|
137
|
-
const isDirectionLTR = direction === "ltr";
|
|
138
|
-
const handleKeyDown = composeEventHandlers(
|
|
107
|
+
} = props, accordionRef = React.useRef(null), composedRef = useComposedRefs(accordionRef, forwardedRef), getItems = useCollection(__scopeAccordion), isDirectionLTR = useDirection(dir) === "ltr", handleKeyDown = composeEventHandlers(
|
|
139
108
|
props.onKeyDown,
|
|
140
109
|
(event) => {
|
|
141
|
-
var _a;
|
|
142
110
|
if (!ACCORDION_KEYS.includes(event.key))
|
|
143
111
|
return;
|
|
144
|
-
const target = event.target
|
|
145
|
-
const triggerCollection = getItems().filter((item) => {
|
|
146
|
-
const el = item.ref.current;
|
|
147
|
-
return !(el == null ? void 0 : el.disabled);
|
|
148
|
-
});
|
|
149
|
-
const triggerIndex = triggerCollection.findIndex(
|
|
112
|
+
const target = event.target, triggerCollection = getItems().filter((item) => !item.ref.current?.disabled), triggerIndex = triggerCollection.findIndex(
|
|
150
113
|
(item) => item.ref.current === target
|
|
151
|
-
);
|
|
152
|
-
const triggerCount = triggerCollection.length;
|
|
114
|
+
), triggerCount = triggerCollection.length;
|
|
153
115
|
if (triggerIndex === -1)
|
|
154
116
|
return;
|
|
155
117
|
event.preventDefault();
|
|
156
118
|
let nextIndex = triggerIndex;
|
|
157
|
-
const homeIndex = 0
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
nextIndex = triggerIndex
|
|
161
|
-
if (nextIndex > endIndex) {
|
|
162
|
-
nextIndex = homeIndex;
|
|
163
|
-
}
|
|
164
|
-
};
|
|
165
|
-
const movePrev = () => {
|
|
166
|
-
nextIndex = triggerIndex - 1;
|
|
167
|
-
if (nextIndex < homeIndex) {
|
|
168
|
-
nextIndex = endIndex;
|
|
169
|
-
}
|
|
119
|
+
const homeIndex = 0, endIndex = triggerCount - 1, moveNext = () => {
|
|
120
|
+
nextIndex = triggerIndex + 1, nextIndex > endIndex && (nextIndex = homeIndex);
|
|
121
|
+
}, movePrev = () => {
|
|
122
|
+
nextIndex = triggerIndex - 1, nextIndex < homeIndex && (nextIndex = endIndex);
|
|
170
123
|
};
|
|
171
124
|
switch (event.key) {
|
|
172
125
|
case "Home":
|
|
@@ -176,36 +129,20 @@ const AccordionImpl = React.forwardRef(
|
|
|
176
129
|
nextIndex = endIndex;
|
|
177
130
|
break;
|
|
178
131
|
case "ArrowRight":
|
|
179
|
-
|
|
180
|
-
if (isDirectionLTR) {
|
|
181
|
-
moveNext();
|
|
182
|
-
} else {
|
|
183
|
-
movePrev();
|
|
184
|
-
}
|
|
185
|
-
}
|
|
132
|
+
orientation === "horizontal" && (isDirectionLTR ? moveNext() : movePrev());
|
|
186
133
|
break;
|
|
187
134
|
case "ArrowDown":
|
|
188
|
-
|
|
189
|
-
moveNext();
|
|
190
|
-
}
|
|
135
|
+
orientation === "vertical" && moveNext();
|
|
191
136
|
break;
|
|
192
137
|
case "ArrowLeft":
|
|
193
|
-
|
|
194
|
-
if (isDirectionLTR) {
|
|
195
|
-
movePrev();
|
|
196
|
-
} else {
|
|
197
|
-
moveNext();
|
|
198
|
-
}
|
|
199
|
-
}
|
|
138
|
+
orientation === "horizontal" && (isDirectionLTR ? movePrev() : moveNext());
|
|
200
139
|
break;
|
|
201
140
|
case "ArrowUp":
|
|
202
|
-
|
|
203
|
-
movePrev();
|
|
204
|
-
}
|
|
141
|
+
orientation === "vertical" && movePrev();
|
|
205
142
|
break;
|
|
206
143
|
}
|
|
207
144
|
const clampedIndex = nextIndex % triggerCount;
|
|
208
|
-
|
|
145
|
+
triggerCollection[clampedIndex].ref.current?.focus();
|
|
209
146
|
}
|
|
210
147
|
);
|
|
211
148
|
return /* @__PURE__ */ jsx(
|
|
@@ -229,18 +166,9 @@ const AccordionImpl = React.forwardRef(
|
|
|
229
166
|
}
|
|
230
167
|
);
|
|
231
168
|
}
|
|
232
|
-
)
|
|
233
|
-
const ITEM_NAME = "AccordionItem";
|
|
234
|
-
const [AccordionItemProvider, useAccordionItemContext] = createAccordionContext(ITEM_NAME);
|
|
235
|
-
const AccordionItem = React.forwardRef(
|
|
169
|
+
), ITEM_NAME = "AccordionItem", [AccordionItemProvider, useAccordionItemContext] = createAccordionContext(ITEM_NAME), AccordionItem = React.forwardRef(
|
|
236
170
|
(props, forwardedRef) => {
|
|
237
|
-
const { __scopeAccordion, value, ...accordionItemProps } = props;
|
|
238
|
-
const accordionContext = useAccordionContext(ITEM_NAME, __scopeAccordion);
|
|
239
|
-
const valueContext = useAccordionValueContext(ITEM_NAME, __scopeAccordion);
|
|
240
|
-
const collapsibleScope = useCollapsibleScope(__scopeAccordion);
|
|
241
|
-
const triggerId = React.useId();
|
|
242
|
-
const open = value && valueContext.value.includes(value) || false;
|
|
243
|
-
const disabled = accordionContext.disabled || props.disabled;
|
|
171
|
+
const { __scopeAccordion, value, ...accordionItemProps } = props, accordionContext = useAccordionContext(ITEM_NAME, __scopeAccordion), valueContext = useAccordionValueContext(ITEM_NAME, __scopeAccordion), collapsibleScope = useCollapsibleScope(__scopeAccordion), triggerId = React.useId(), open = value && valueContext.value.includes(value) || !1, disabled = accordionContext.disabled || props.disabled;
|
|
244
172
|
return /* @__PURE__ */ jsx(
|
|
245
173
|
AccordionItemProvider,
|
|
246
174
|
{
|
|
@@ -259,11 +187,7 @@ const AccordionItem = React.forwardRef(
|
|
|
259
187
|
disabled,
|
|
260
188
|
open,
|
|
261
189
|
onOpenChange: (open2) => {
|
|
262
|
-
|
|
263
|
-
valueContext.onItemOpen(value);
|
|
264
|
-
} else {
|
|
265
|
-
valueContext.onItemClose(value);
|
|
266
|
-
}
|
|
190
|
+
open2 ? valueContext.onItemOpen(value) : valueContext.onItemClose(value);
|
|
267
191
|
}
|
|
268
192
|
}
|
|
269
193
|
)
|
|
@@ -272,12 +196,9 @@ const AccordionItem = React.forwardRef(
|
|
|
272
196
|
}
|
|
273
197
|
);
|
|
274
198
|
AccordionItem.displayName = ITEM_NAME;
|
|
275
|
-
const HEADER_NAME = "AccordionHeader"
|
|
276
|
-
const AccordionHeader = React.forwardRef(
|
|
199
|
+
const HEADER_NAME = "AccordionHeader", AccordionHeader = React.forwardRef(
|
|
277
200
|
(props, forwardedRef) => {
|
|
278
|
-
const { __scopeAccordion, ...headerProps } = props;
|
|
279
|
-
const accordionContext = useAccordionContext(ACCORDION_NAME, __scopeAccordion);
|
|
280
|
-
const itemContext = useAccordionItemContext(HEADER_NAME, __scopeAccordion);
|
|
201
|
+
const { __scopeAccordion, ...headerProps } = props, accordionContext = useAccordionContext(ACCORDION_NAME, __scopeAccordion), itemContext = useAccordionItemContext(HEADER_NAME, __scopeAccordion);
|
|
281
202
|
return /* @__PURE__ */ jsx(
|
|
282
203
|
H1,
|
|
283
204
|
{
|
|
@@ -313,19 +234,13 @@ const AccordionTriggerFrame = styled(Collapsible.Trigger, {
|
|
|
313
234
|
}
|
|
314
235
|
},
|
|
315
236
|
defaultVariants: {
|
|
316
|
-
unstyled:
|
|
237
|
+
unstyled: !1
|
|
317
238
|
}
|
|
318
|
-
})
|
|
319
|
-
const TRIGGER_NAME =
|
|
320
|
-
const AccordionTrigger = AccordionTriggerFrame.styleable(function AccordionTrigger2(props, forwardedRef) {
|
|
321
|
-
const { __scopeAccordion, ...triggerProps } = props;
|
|
322
|
-
const accordionContext = useAccordionContext(ACCORDION_NAME, __scopeAccordion);
|
|
323
|
-
const itemContext = useAccordionItemContext(TRIGGER_NAME, __scopeAccordion);
|
|
324
|
-
const collapsibleContext = useAccordionCollapsibleContext(
|
|
239
|
+
}), TRIGGER_NAME = "AccordionTrigger", AccordionTrigger = AccordionTriggerFrame.styleable(function(props, forwardedRef) {
|
|
240
|
+
const { __scopeAccordion, ...triggerProps } = props, accordionContext = useAccordionContext(ACCORDION_NAME, __scopeAccordion), itemContext = useAccordionItemContext(TRIGGER_NAME, __scopeAccordion), collapsibleContext = useAccordionCollapsibleContext(
|
|
325
241
|
TRIGGER_NAME,
|
|
326
242
|
__scopeAccordion
|
|
327
|
-
);
|
|
328
|
-
const collapsibleScope = useCollapsibleScope(__scopeAccordion);
|
|
243
|
+
), collapsibleScope = useCollapsibleScope(__scopeAccordion);
|
|
329
244
|
return /* @__PURE__ */ jsx(Collection.ItemSlot, { scope: __scopeAccordion, children: /* @__PURE__ */ jsx(
|
|
330
245
|
AccordionTriggerFrame,
|
|
331
246
|
{
|
|
@@ -337,8 +252,7 @@ const AccordionTrigger = AccordionTriggerFrame.styleable(function AccordionTrigg
|
|
|
337
252
|
ref: forwardedRef
|
|
338
253
|
}
|
|
339
254
|
) });
|
|
340
|
-
})
|
|
341
|
-
const AccordionContentFrame = styled(Collapsible.Content, {
|
|
255
|
+
}), AccordionContentFrame = styled(Collapsible.Content, {
|
|
342
256
|
variants: {
|
|
343
257
|
unstyled: {
|
|
344
258
|
false: {
|
|
@@ -348,14 +262,10 @@ const AccordionContentFrame = styled(Collapsible.Content, {
|
|
|
348
262
|
}
|
|
349
263
|
},
|
|
350
264
|
defaultVariants: {
|
|
351
|
-
unstyled:
|
|
265
|
+
unstyled: !1
|
|
352
266
|
}
|
|
353
|
-
})
|
|
354
|
-
const
|
|
355
|
-
const { __scopeAccordion, ...contentProps } = props;
|
|
356
|
-
const accordionContext = useAccordionContext(ACCORDION_NAME, __scopeAccordion);
|
|
357
|
-
const itemContext = useAccordionItemContext("AccordionContent", __scopeAccordion);
|
|
358
|
-
const collapsibleScope = useCollapsibleScope(__scopeAccordion);
|
|
267
|
+
}), AccordionContent = AccordionContentFrame.styleable(function(props, forwardedRef) {
|
|
268
|
+
const { __scopeAccordion, ...contentProps } = props, accordionContext = useAccordionContext(ACCORDION_NAME, __scopeAccordion), itemContext = useAccordionItemContext("AccordionContent", __scopeAccordion), collapsibleScope = useCollapsibleScope(__scopeAccordion);
|
|
359
269
|
return /* @__PURE__ */ jsx(
|
|
360
270
|
AccordionContentFrame,
|
|
361
271
|
{
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Accordion.tsx"],
|
|
4
|
-
"mappings": "
|
|
5
|
-
"names": ["value", "open"
|
|
4
|
+
"mappings": "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",
|
|
5
|
+
"names": ["value", "open"]
|
|
6
6
|
}
|
package/dist/jsx/Accordion.js
CHANGED
|
@@ -13,55 +13,36 @@ import {
|
|
|
13
13
|
withStaticProperties
|
|
14
14
|
} from "@tamagui/web";
|
|
15
15
|
import * as React from "react";
|
|
16
|
-
const ACCORDION_NAME = "Accordion"
|
|
17
|
-
const ACCORDION_KEYS = ["Home", "End", "ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"];
|
|
18
|
-
const [Collection, useCollection, createCollectionScope] = createCollection(ACCORDION_NAME);
|
|
19
|
-
const [createAccordionContext, createAccordionScope] = createContextScope(
|
|
16
|
+
const ACCORDION_NAME = "Accordion", ACCORDION_KEYS = ["Home", "End", "ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"], [Collection, useCollection, createCollectionScope] = createCollection(ACCORDION_NAME), [createAccordionContext, createAccordionScope] = createContextScope(
|
|
20
17
|
ACCORDION_NAME,
|
|
21
18
|
[createCollectionScope, createCollapsibleScope]
|
|
22
|
-
)
|
|
23
|
-
const
|
|
24
|
-
const AccordionComponent = React.forwardRef((props, forwardedRef) => {
|
|
25
|
-
const { type, ...accordionProps } = props;
|
|
26
|
-
const singleProps = accordionProps;
|
|
27
|
-
const multipleProps = accordionProps;
|
|
19
|
+
), useCollapsibleScope = createCollapsibleScope(), AccordionComponent = React.forwardRef((props, forwardedRef) => {
|
|
20
|
+
const { type, ...accordionProps } = props, singleProps = accordionProps, multipleProps = accordionProps;
|
|
28
21
|
return <Collection.Provider scope={props.__scopeAccordion}>{type === "multiple" ? <AccordionImplMultiple {...multipleProps} ref={forwardedRef} /> : <AccordionImplSingle {...singleProps} ref={forwardedRef} />}</Collection.Provider>;
|
|
29
22
|
});
|
|
30
23
|
AccordionComponent.displayName = ACCORDION_NAME;
|
|
31
24
|
AccordionComponent.propTypes = {
|
|
32
25
|
type(props) {
|
|
33
26
|
const value = props.value || props.defaultValue;
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
"Invalid prop `type` supplied to `Accordion`. Expected `single` when `defaultValue` or `value` is type `string`."
|
|
42
|
-
);
|
|
43
|
-
}
|
|
44
|
-
if (props.type === "single" && Array.isArray(value)) {
|
|
45
|
-
return new Error(
|
|
46
|
-
"Invalid prop `type` supplied to `Accordion`. Expected `multiple` when `defaultValue` or `value` is type `string[]`."
|
|
47
|
-
);
|
|
48
|
-
}
|
|
49
|
-
return null;
|
|
27
|
+
return props.type && !["single", "multiple"].includes(props.type) ? new Error(
|
|
28
|
+
"Invalid prop `type` supplied to `Accordion`. Expected one of `single | multiple`."
|
|
29
|
+
) : props.type === "multiple" && typeof value == "string" ? new Error(
|
|
30
|
+
"Invalid prop `type` supplied to `Accordion`. Expected `single` when `defaultValue` or `value` is type `string`."
|
|
31
|
+
) : props.type === "single" && Array.isArray(value) ? new Error(
|
|
32
|
+
"Invalid prop `type` supplied to `Accordion`. Expected `multiple` when `defaultValue` or `value` is type `string[]`."
|
|
33
|
+
) : null;
|
|
50
34
|
}
|
|
51
35
|
};
|
|
52
|
-
const [AccordionValueProvider, useAccordionValueContext] = createAccordionContext(ACCORDION_NAME)
|
|
53
|
-
const [AccordionCollapsibleProvider, useAccordionCollapsibleContext] = createAccordionContext(ACCORDION_NAME, { collapsible: false });
|
|
54
|
-
const AccordionImplSingle = React.forwardRef((props, forwardedRef) => {
|
|
36
|
+
const [AccordionValueProvider, useAccordionValueContext] = createAccordionContext(ACCORDION_NAME), [AccordionCollapsibleProvider, useAccordionCollapsibleContext] = createAccordionContext(ACCORDION_NAME, { collapsible: !1 }), AccordionImplSingle = React.forwardRef((props, forwardedRef) => {
|
|
55
37
|
const {
|
|
56
38
|
value: valueProp,
|
|
57
39
|
defaultValue,
|
|
58
40
|
control,
|
|
59
41
|
onValueChange = () => {
|
|
60
42
|
},
|
|
61
|
-
collapsible =
|
|
43
|
+
collapsible = !1,
|
|
62
44
|
...accordionSingleProps
|
|
63
|
-
} = props
|
|
64
|
-
const [value, setValue] = useControllableState({
|
|
45
|
+
} = props, [value, setValue] = useControllableState({
|
|
65
46
|
prop: valueProp,
|
|
66
47
|
defaultProp: defaultValue || "",
|
|
67
48
|
onChange: onValueChange
|
|
@@ -78,25 +59,21 @@ const AccordionImplSingle = React.forwardRef((props, forwardedRef) => {
|
|
|
78
59
|
scope={props.__scopeAccordion}
|
|
79
60
|
collapsible={collapsible}
|
|
80
61
|
><AccordionImpl {...accordionSingleProps} ref={forwardedRef} /></AccordionCollapsibleProvider></AccordionValueProvider>;
|
|
81
|
-
})
|
|
82
|
-
const AccordionImplMultiple = React.forwardRef((props, forwardedRef) => {
|
|
62
|
+
}), AccordionImplMultiple = React.forwardRef((props, forwardedRef) => {
|
|
83
63
|
const {
|
|
84
64
|
value: valueProp,
|
|
85
65
|
defaultValue,
|
|
86
66
|
onValueChange = () => {
|
|
87
67
|
},
|
|
88
68
|
...accordionMultipleProps
|
|
89
|
-
} = props
|
|
90
|
-
const [value, setValue] = useControllableState({
|
|
69
|
+
} = props, [value, setValue] = useControllableState({
|
|
91
70
|
prop: valueProp,
|
|
92
71
|
defaultProp: defaultValue || [],
|
|
93
72
|
onChange: onValueChange
|
|
94
|
-
})
|
|
95
|
-
const handleItemOpen = React.useCallback(
|
|
73
|
+
}), handleItemOpen = React.useCallback(
|
|
96
74
|
(itemValue) => setValue((prevValue = []) => [...prevValue, itemValue]),
|
|
97
75
|
[setValue]
|
|
98
|
-
)
|
|
99
|
-
const handleItemClose = React.useCallback(
|
|
76
|
+
), handleItemClose = React.useCallback(
|
|
100
77
|
(itemValue) => setValue((prevValue = []) => prevValue.filter((value2) => value2 !== itemValue)),
|
|
101
78
|
[setValue]
|
|
102
79
|
);
|
|
@@ -105,10 +82,8 @@ const AccordionImplMultiple = React.forwardRef((props, forwardedRef) => {
|
|
|
105
82
|
value={value || []}
|
|
106
83
|
onItemOpen={handleItemOpen}
|
|
107
84
|
onItemClose={handleItemClose}
|
|
108
|
-
><AccordionCollapsibleProvider scope={props.__scopeAccordion} collapsible={
|
|
109
|
-
})
|
|
110
|
-
const [AccordionImplProvider, useAccordionContext] = createAccordionContext(ACCORDION_NAME);
|
|
111
|
-
const AccordionImpl = React.forwardRef(
|
|
85
|
+
><AccordionCollapsibleProvider scope={props.__scopeAccordion} collapsible={!0}><AccordionImpl {...accordionMultipleProps} ref={forwardedRef} /></AccordionCollapsibleProvider></AccordionValueProvider>;
|
|
86
|
+
}), [AccordionImplProvider, useAccordionContext] = createAccordionContext(ACCORDION_NAME), AccordionImpl = React.forwardRef(
|
|
112
87
|
(props, forwardedRef) => {
|
|
113
88
|
const {
|
|
114
89
|
__scopeAccordion,
|
|
@@ -116,43 +91,22 @@ const AccordionImpl = React.forwardRef(
|
|
|
116
91
|
dir,
|
|
117
92
|
orientation = "vertical",
|
|
118
93
|
...accordionProps
|
|
119
|
-
} = props
|
|
120
|
-
const accordionRef = React.useRef(null);
|
|
121
|
-
const composedRef = useComposedRefs(accordionRef, forwardedRef);
|
|
122
|
-
const getItems = useCollection(__scopeAccordion);
|
|
123
|
-
const direction = useDirection(dir);
|
|
124
|
-
const isDirectionLTR = direction === "ltr";
|
|
125
|
-
const handleKeyDown = composeEventHandlers(
|
|
94
|
+
} = props, accordionRef = React.useRef(null), composedRef = useComposedRefs(accordionRef, forwardedRef), getItems = useCollection(__scopeAccordion), isDirectionLTR = useDirection(dir) === "ltr", handleKeyDown = composeEventHandlers(
|
|
126
95
|
props.onKeyDown,
|
|
127
96
|
(event) => {
|
|
128
97
|
if (!ACCORDION_KEYS.includes(event.key))
|
|
129
98
|
return;
|
|
130
|
-
const target = event.target
|
|
131
|
-
const triggerCollection = getItems().filter((item) => {
|
|
132
|
-
const el = item.ref.current;
|
|
133
|
-
return !el?.disabled;
|
|
134
|
-
});
|
|
135
|
-
const triggerIndex = triggerCollection.findIndex(
|
|
99
|
+
const target = event.target, triggerCollection = getItems().filter((item) => !item.ref.current?.disabled), triggerIndex = triggerCollection.findIndex(
|
|
136
100
|
(item) => item.ref.current === target
|
|
137
|
-
);
|
|
138
|
-
const triggerCount = triggerCollection.length;
|
|
101
|
+
), triggerCount = triggerCollection.length;
|
|
139
102
|
if (triggerIndex === -1)
|
|
140
103
|
return;
|
|
141
104
|
event.preventDefault();
|
|
142
105
|
let nextIndex = triggerIndex;
|
|
143
|
-
const homeIndex = 0
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
nextIndex = triggerIndex
|
|
147
|
-
if (nextIndex > endIndex) {
|
|
148
|
-
nextIndex = homeIndex;
|
|
149
|
-
}
|
|
150
|
-
};
|
|
151
|
-
const movePrev = () => {
|
|
152
|
-
nextIndex = triggerIndex - 1;
|
|
153
|
-
if (nextIndex < homeIndex) {
|
|
154
|
-
nextIndex = endIndex;
|
|
155
|
-
}
|
|
106
|
+
const homeIndex = 0, endIndex = triggerCount - 1, moveNext = () => {
|
|
107
|
+
nextIndex = triggerIndex + 1, nextIndex > endIndex && (nextIndex = homeIndex);
|
|
108
|
+
}, movePrev = () => {
|
|
109
|
+
nextIndex = triggerIndex - 1, nextIndex < homeIndex && (nextIndex = endIndex);
|
|
156
110
|
};
|
|
157
111
|
switch (event.key) {
|
|
158
112
|
case "Home":
|
|
@@ -162,32 +116,16 @@ const AccordionImpl = React.forwardRef(
|
|
|
162
116
|
nextIndex = endIndex;
|
|
163
117
|
break;
|
|
164
118
|
case "ArrowRight":
|
|
165
|
-
|
|
166
|
-
if (isDirectionLTR) {
|
|
167
|
-
moveNext();
|
|
168
|
-
} else {
|
|
169
|
-
movePrev();
|
|
170
|
-
}
|
|
171
|
-
}
|
|
119
|
+
orientation === "horizontal" && (isDirectionLTR ? moveNext() : movePrev());
|
|
172
120
|
break;
|
|
173
121
|
case "ArrowDown":
|
|
174
|
-
|
|
175
|
-
moveNext();
|
|
176
|
-
}
|
|
122
|
+
orientation === "vertical" && moveNext();
|
|
177
123
|
break;
|
|
178
124
|
case "ArrowLeft":
|
|
179
|
-
|
|
180
|
-
if (isDirectionLTR) {
|
|
181
|
-
movePrev();
|
|
182
|
-
} else {
|
|
183
|
-
moveNext();
|
|
184
|
-
}
|
|
185
|
-
}
|
|
125
|
+
orientation === "horizontal" && (isDirectionLTR ? movePrev() : moveNext());
|
|
186
126
|
break;
|
|
187
127
|
case "ArrowUp":
|
|
188
|
-
|
|
189
|
-
movePrev();
|
|
190
|
-
}
|
|
128
|
+
orientation === "vertical" && movePrev();
|
|
191
129
|
break;
|
|
192
130
|
}
|
|
193
131
|
const clampedIndex = nextIndex % triggerCount;
|
|
@@ -208,18 +146,9 @@ const AccordionImpl = React.forwardRef(
|
|
|
208
146
|
}}
|
|
209
147
|
/></Collection.Slot></AccordionImplProvider>;
|
|
210
148
|
}
|
|
211
|
-
)
|
|
212
|
-
const ITEM_NAME = "AccordionItem";
|
|
213
|
-
const [AccordionItemProvider, useAccordionItemContext] = createAccordionContext(ITEM_NAME);
|
|
214
|
-
const AccordionItem = React.forwardRef(
|
|
149
|
+
), ITEM_NAME = "AccordionItem", [AccordionItemProvider, useAccordionItemContext] = createAccordionContext(ITEM_NAME), AccordionItem = React.forwardRef(
|
|
215
150
|
(props, forwardedRef) => {
|
|
216
|
-
const { __scopeAccordion, value, ...accordionItemProps } = props;
|
|
217
|
-
const accordionContext = useAccordionContext(ITEM_NAME, __scopeAccordion);
|
|
218
|
-
const valueContext = useAccordionValueContext(ITEM_NAME, __scopeAccordion);
|
|
219
|
-
const collapsibleScope = useCollapsibleScope(__scopeAccordion);
|
|
220
|
-
const triggerId = React.useId();
|
|
221
|
-
const open = value && valueContext.value.includes(value) || false;
|
|
222
|
-
const disabled = accordionContext.disabled || props.disabled;
|
|
151
|
+
const { __scopeAccordion, value, ...accordionItemProps } = props, accordionContext = useAccordionContext(ITEM_NAME, __scopeAccordion), valueContext = useAccordionValueContext(ITEM_NAME, __scopeAccordion), collapsibleScope = useCollapsibleScope(__scopeAccordion), triggerId = React.useId(), open = value && valueContext.value.includes(value) || !1, disabled = accordionContext.disabled || props.disabled;
|
|
223
152
|
return <AccordionItemProvider
|
|
224
153
|
scope={__scopeAccordion}
|
|
225
154
|
open={open}
|
|
@@ -234,22 +163,15 @@ const AccordionItem = React.forwardRef(
|
|
|
234
163
|
disabled={disabled}
|
|
235
164
|
open={open}
|
|
236
165
|
onOpenChange={(open2) => {
|
|
237
|
-
|
|
238
|
-
valueContext.onItemOpen(value);
|
|
239
|
-
} else {
|
|
240
|
-
valueContext.onItemClose(value);
|
|
241
|
-
}
|
|
166
|
+
open2 ? valueContext.onItemOpen(value) : valueContext.onItemClose(value);
|
|
242
167
|
}}
|
|
243
168
|
/></AccordionItemProvider>;
|
|
244
169
|
}
|
|
245
170
|
);
|
|
246
171
|
AccordionItem.displayName = ITEM_NAME;
|
|
247
|
-
const HEADER_NAME = "AccordionHeader"
|
|
248
|
-
const AccordionHeader = React.forwardRef(
|
|
172
|
+
const HEADER_NAME = "AccordionHeader", AccordionHeader = React.forwardRef(
|
|
249
173
|
(props, forwardedRef) => {
|
|
250
|
-
const { __scopeAccordion, ...headerProps } = props;
|
|
251
|
-
const accordionContext = useAccordionContext(ACCORDION_NAME, __scopeAccordion);
|
|
252
|
-
const itemContext = useAccordionItemContext(HEADER_NAME, __scopeAccordion);
|
|
174
|
+
const { __scopeAccordion, ...headerProps } = props, accordionContext = useAccordionContext(ACCORDION_NAME, __scopeAccordion), itemContext = useAccordionItemContext(HEADER_NAME, __scopeAccordion);
|
|
253
175
|
return <H1
|
|
254
176
|
data-orientation={accordionContext.orientation}
|
|
255
177
|
data-state={getState(itemContext.open)}
|
|
@@ -282,19 +204,13 @@ const AccordionTriggerFrame = styled(Collapsible.Trigger, {
|
|
|
282
204
|
}
|
|
283
205
|
},
|
|
284
206
|
defaultVariants: {
|
|
285
|
-
unstyled:
|
|
207
|
+
unstyled: !1
|
|
286
208
|
}
|
|
287
|
-
})
|
|
288
|
-
const TRIGGER_NAME =
|
|
289
|
-
const AccordionTrigger = AccordionTriggerFrame.styleable(function AccordionTrigger2(props, forwardedRef) {
|
|
290
|
-
const { __scopeAccordion, ...triggerProps } = props;
|
|
291
|
-
const accordionContext = useAccordionContext(ACCORDION_NAME, __scopeAccordion);
|
|
292
|
-
const itemContext = useAccordionItemContext(TRIGGER_NAME, __scopeAccordion);
|
|
293
|
-
const collapsibleContext = useAccordionCollapsibleContext(
|
|
209
|
+
}), TRIGGER_NAME = "AccordionTrigger", AccordionTrigger = AccordionTriggerFrame.styleable(function(props, forwardedRef) {
|
|
210
|
+
const { __scopeAccordion, ...triggerProps } = props, accordionContext = useAccordionContext(ACCORDION_NAME, __scopeAccordion), itemContext = useAccordionItemContext(TRIGGER_NAME, __scopeAccordion), collapsibleContext = useAccordionCollapsibleContext(
|
|
294
211
|
TRIGGER_NAME,
|
|
295
212
|
__scopeAccordion
|
|
296
|
-
);
|
|
297
|
-
const collapsibleScope = useCollapsibleScope(__scopeAccordion);
|
|
213
|
+
), collapsibleScope = useCollapsibleScope(__scopeAccordion);
|
|
298
214
|
return <Collection.ItemSlot scope={__scopeAccordion}><AccordionTriggerFrame
|
|
299
215
|
aria-disabled={itemContext.open && !collapsibleContext.collapsible || void 0}
|
|
300
216
|
data-orientation={accordionContext.orientation}
|
|
@@ -303,8 +219,7 @@ const AccordionTrigger = AccordionTriggerFrame.styleable(function AccordionTrigg
|
|
|
303
219
|
{...triggerProps}
|
|
304
220
|
ref={forwardedRef}
|
|
305
221
|
/></Collection.ItemSlot>;
|
|
306
|
-
})
|
|
307
|
-
const AccordionContentFrame = styled(Collapsible.Content, {
|
|
222
|
+
}), AccordionContentFrame = styled(Collapsible.Content, {
|
|
308
223
|
variants: {
|
|
309
224
|
unstyled: {
|
|
310
225
|
false: {
|
|
@@ -314,14 +229,10 @@ const AccordionContentFrame = styled(Collapsible.Content, {
|
|
|
314
229
|
}
|
|
315
230
|
},
|
|
316
231
|
defaultVariants: {
|
|
317
|
-
unstyled:
|
|
232
|
+
unstyled: !1
|
|
318
233
|
}
|
|
319
|
-
})
|
|
320
|
-
const
|
|
321
|
-
const { __scopeAccordion, ...contentProps } = props;
|
|
322
|
-
const accordionContext = useAccordionContext(ACCORDION_NAME, __scopeAccordion);
|
|
323
|
-
const itemContext = useAccordionItemContext("AccordionContent", __scopeAccordion);
|
|
324
|
-
const collapsibleScope = useCollapsibleScope(__scopeAccordion);
|
|
234
|
+
}), AccordionContent = AccordionContentFrame.styleable(function(props, forwardedRef) {
|
|
235
|
+
const { __scopeAccordion, ...contentProps } = props, accordionContext = useAccordionContext(ACCORDION_NAME, __scopeAccordion), itemContext = useAccordionItemContext("AccordionContent", __scopeAccordion), collapsibleScope = useCollapsibleScope(__scopeAccordion);
|
|
325
236
|
return <AccordionContentFrame
|
|
326
237
|
role="region"
|
|
327
238
|
aria-labelledby={itemContext.triggerId}
|