@tamagui/accordion 1.70.0 → 1.72.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 +22 -27
- package/dist/cjs/Accordion.js.map +1 -1
- package/dist/cjs/Accordion.native.js +22 -27
- package/dist/cjs/Accordion.native.js.map +1 -1
- package/dist/esm/Accordion.js +22 -26
- package/dist/esm/Accordion.js.map +1 -1
- package/dist/jsx/Accordion.js +22 -26
- package/dist/jsx/Accordion.js.map +1 -1
- package/dist/jsx/Accordion.native.js +22 -26
- package/dist/jsx/Accordion.native.js.map +1 -1
- package/package.json +10 -10
- package/src/Accordion.tsx +37 -47
- package/types/Accordion.d.ts +15 -14
- package/types/Accordion.d.ts.map +1 -1
package/dist/jsx/Accordion.js
CHANGED
|
@@ -1,24 +1,21 @@
|
|
|
1
|
-
import { Collapsible
|
|
1
|
+
import { Collapsible } from "@tamagui/collapsible";
|
|
2
2
|
import { createCollection } from "@tamagui/collection";
|
|
3
|
-
import { createContextScope } from "@tamagui/create-context";
|
|
4
3
|
import { YStack } from "@tamagui/stacks";
|
|
5
4
|
import { H1 } from "@tamagui/text";
|
|
6
5
|
import { useControllableState } from "@tamagui/use-controllable-state";
|
|
7
6
|
import { useDirection } from "@tamagui/use-direction";
|
|
8
7
|
import {
|
|
9
8
|
composeEventHandlers,
|
|
9
|
+
createStyledContext,
|
|
10
10
|
isWeb,
|
|
11
11
|
styled,
|
|
12
12
|
useComposedRefs,
|
|
13
13
|
withStaticProperties
|
|
14
14
|
} from "@tamagui/web";
|
|
15
15
|
import * as React from "react";
|
|
16
|
-
const ACCORDION_NAME = "Accordion", ACCORDION_KEYS = ["Home", "End", "ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"], [Collection, useCollection
|
|
17
|
-
ACCORDION_NAME,
|
|
18
|
-
[createCollectionScope, createCollapsibleScope]
|
|
19
|
-
), useCollapsibleScope = createCollapsibleScope(), AccordionComponent = React.forwardRef((props, forwardedRef) => {
|
|
16
|
+
const ACCORDION_NAME = "Accordion", ACCORDION_KEYS = ["Home", "End", "ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"], [Collection, useCollection] = createCollection(ACCORDION_NAME), ACCORDION_CONTEXT = "Accordion", AccordionComponent = React.forwardRef((props, forwardedRef) => {
|
|
20
17
|
const { type, ...accordionProps } = props, singleProps = accordionProps, multipleProps = accordionProps;
|
|
21
|
-
return <Collection.Provider
|
|
18
|
+
return <Collection.Provider __scopeCollection={props.__scopeAccordion || ACCORDION_CONTEXT}>{type === "multiple" ? <AccordionImplMultiple {...multipleProps} ref={forwardedRef} /> : <AccordionImplSingle {...singleProps} ref={forwardedRef} />}</Collection.Provider>;
|
|
22
19
|
});
|
|
23
20
|
AccordionComponent.displayName = ACCORDION_NAME;
|
|
24
21
|
AccordionComponent.propTypes = {
|
|
@@ -33,7 +30,10 @@ AccordionComponent.propTypes = {
|
|
|
33
30
|
) : null;
|
|
34
31
|
}
|
|
35
32
|
};
|
|
36
|
-
const
|
|
33
|
+
const { Provider: AccordionValueProvider, useStyledContext: useAccordionValueContext } = createStyledContext(), {
|
|
34
|
+
Provider: AccordionCollapsibleProvider,
|
|
35
|
+
useStyledContext: useAccordionCollapsibleContext
|
|
36
|
+
} = createStyledContext(), AccordionImplSingle = React.forwardRef((props, forwardedRef) => {
|
|
37
37
|
const {
|
|
38
38
|
value: valueProp,
|
|
39
39
|
defaultValue,
|
|
@@ -83,7 +83,7 @@ const [AccordionValueProvider, useAccordionValueContext] = createAccordionContex
|
|
|
83
83
|
onItemOpen={handleItemOpen}
|
|
84
84
|
onItemClose={handleItemClose}
|
|
85
85
|
><AccordionCollapsibleProvider scope={props.__scopeAccordion} collapsible={!0}><AccordionImpl {...accordionMultipleProps} ref={forwardedRef} /></AccordionCollapsibleProvider></AccordionValueProvider>;
|
|
86
|
-
}),
|
|
86
|
+
}), { Provider: AccordionImplProvider, useStyledContext: useAccordionContext } = createStyledContext(), AccordionImpl = React.forwardRef(
|
|
87
87
|
(props, forwardedRef) => {
|
|
88
88
|
const {
|
|
89
89
|
__scopeAccordion,
|
|
@@ -91,7 +91,7 @@ const [AccordionValueProvider, useAccordionValueContext] = createAccordionContex
|
|
|
91
91
|
dir,
|
|
92
92
|
orientation = "vertical",
|
|
93
93
|
...accordionProps
|
|
94
|
-
} = props, accordionRef = React.useRef(null), composedRef = useComposedRefs(accordionRef, forwardedRef), getItems = useCollection(__scopeAccordion), isDirectionLTR = useDirection(dir) === "ltr", handleKeyDown = composeEventHandlers(
|
|
94
|
+
} = props, accordionRef = React.useRef(null), composedRef = useComposedRefs(accordionRef, forwardedRef), getItems = useCollection(__scopeAccordion || ACCORDION_CONTEXT), isDirectionLTR = useDirection(dir) === "ltr", handleKeyDown = composeEventHandlers(
|
|
95
95
|
props.onKeyDown,
|
|
96
96
|
(event) => {
|
|
97
97
|
if (!ACCORDION_KEYS.includes(event.key))
|
|
@@ -137,7 +137,7 @@ const [AccordionValueProvider, useAccordionValueContext] = createAccordionContex
|
|
|
137
137
|
disabled={disabled}
|
|
138
138
|
direction={dir}
|
|
139
139
|
orientation={orientation}
|
|
140
|
-
><Collection.Slot
|
|
140
|
+
><Collection.Slot __scopeCollection={__scopeAccordion || ACCORDION_CONTEXT}><YStack
|
|
141
141
|
data-orientation={orientation}
|
|
142
142
|
ref={composedRef}
|
|
143
143
|
{...accordionProps}
|
|
@@ -146,9 +146,9 @@ const [AccordionValueProvider, useAccordionValueContext] = createAccordionContex
|
|
|
146
146
|
}}
|
|
147
147
|
/></Collection.Slot></AccordionImplProvider>;
|
|
148
148
|
}
|
|
149
|
-
), ITEM_NAME = "AccordionItem",
|
|
149
|
+
), ITEM_NAME = "AccordionItem", { Provider: AccordionItemProvider, useStyledContext: useAccordionItemContext } = createStyledContext(), AccordionItem = React.forwardRef(
|
|
150
150
|
(props, forwardedRef) => {
|
|
151
|
-
const { __scopeAccordion, value, ...accordionItemProps } = props, accordionContext = useAccordionContext(
|
|
151
|
+
const { __scopeAccordion, value, ...accordionItemProps } = props, accordionContext = useAccordionContext(__scopeAccordion), valueContext = useAccordionValueContext(__scopeAccordion), triggerId = React.useId(), open = value && valueContext.value.includes(value) || !1, disabled = accordionContext.disabled || props.disabled;
|
|
152
152
|
return <AccordionItemProvider
|
|
153
153
|
scope={__scopeAccordion}
|
|
154
154
|
open={open}
|
|
@@ -157,7 +157,7 @@ const [AccordionValueProvider, useAccordionValueContext] = createAccordionContex
|
|
|
157
157
|
><Collapsible
|
|
158
158
|
data-orientation={accordionContext.orientation}
|
|
159
159
|
data-state={open ? "open" : "closed"}
|
|
160
|
-
{
|
|
160
|
+
__scopeCollapsible={__scopeAccordion || ACCORDION_CONTEXT}
|
|
161
161
|
{...accordionItemProps}
|
|
162
162
|
ref={forwardedRef}
|
|
163
163
|
disabled={disabled}
|
|
@@ -171,7 +171,7 @@ const [AccordionValueProvider, useAccordionValueContext] = createAccordionContex
|
|
|
171
171
|
AccordionItem.displayName = ITEM_NAME;
|
|
172
172
|
const HEADER_NAME = "AccordionHeader", AccordionHeader = React.forwardRef(
|
|
173
173
|
(props, forwardedRef) => {
|
|
174
|
-
const { __scopeAccordion, ...headerProps } = props, accordionContext = useAccordionContext(
|
|
174
|
+
const { __scopeAccordion, ...headerProps } = props, accordionContext = useAccordionContext(__scopeAccordion), itemContext = useAccordionItemContext(__scopeAccordion);
|
|
175
175
|
return <H1
|
|
176
176
|
data-orientation={accordionContext.orientation}
|
|
177
177
|
data-state={getState(itemContext.open)}
|
|
@@ -206,16 +206,13 @@ const AccordionTriggerFrame = styled(Collapsible.Trigger, {
|
|
|
206
206
|
defaultVariants: {
|
|
207
207
|
unstyled: !1
|
|
208
208
|
}
|
|
209
|
-
}),
|
|
210
|
-
const { __scopeAccordion, ...triggerProps } = props, accordionContext = useAccordionContext(
|
|
211
|
-
|
|
212
|
-
__scopeAccordion
|
|
213
|
-
), collapsibleScope = useCollapsibleScope(__scopeAccordion);
|
|
214
|
-
return <Collection.ItemSlot scope={__scopeAccordion}><AccordionTriggerFrame
|
|
209
|
+
}), AccordionTrigger = AccordionTriggerFrame.styleable(function(props, forwardedRef) {
|
|
210
|
+
const { __scopeAccordion, ...triggerProps } = props, accordionContext = useAccordionContext(__scopeAccordion), itemContext = useAccordionItemContext(__scopeAccordion), collapsibleContext = useAccordionCollapsibleContext(__scopeAccordion);
|
|
211
|
+
return <Collection.ItemSlot __scopeCollection={__scopeAccordion || ACCORDION_CONTEXT}><AccordionTriggerFrame
|
|
212
|
+
__scopeCollapsible={__scopeAccordion || ACCORDION_CONTEXT}
|
|
215
213
|
aria-disabled={itemContext.open && !collapsibleContext.collapsible || void 0}
|
|
216
214
|
data-orientation={accordionContext.orientation}
|
|
217
215
|
id={itemContext.triggerId}
|
|
218
|
-
{...collapsibleScope}
|
|
219
216
|
{...triggerProps}
|
|
220
217
|
ref={forwardedRef}
|
|
221
218
|
/></Collection.ItemSlot>;
|
|
@@ -232,12 +229,12 @@ const AccordionTriggerFrame = styled(Collapsible.Trigger, {
|
|
|
232
229
|
unstyled: !1
|
|
233
230
|
}
|
|
234
231
|
}), AccordionContent = AccordionContentFrame.styleable(function(props, forwardedRef) {
|
|
235
|
-
const { __scopeAccordion, ...contentProps } = props, accordionContext = useAccordionContext(
|
|
232
|
+
const { __scopeAccordion, ...contentProps } = props, accordionContext = useAccordionContext(__scopeAccordion), itemContext = useAccordionItemContext(__scopeAccordion);
|
|
236
233
|
return <AccordionContentFrame
|
|
237
234
|
role="region"
|
|
238
235
|
aria-labelledby={itemContext.triggerId}
|
|
239
236
|
data-orientation={accordionContext.orientation}
|
|
240
|
-
{
|
|
237
|
+
__scopeCollapsible={__scopeAccordion || ACCORDION_CONTEXT}
|
|
241
238
|
{...contentProps}
|
|
242
239
|
ref={forwardedRef}
|
|
243
240
|
/>;
|
|
@@ -252,7 +249,6 @@ const Accordion = withStaticProperties(AccordionComponent, {
|
|
|
252
249
|
Item: AccordionItem
|
|
253
250
|
});
|
|
254
251
|
export {
|
|
255
|
-
Accordion
|
|
256
|
-
createAccordionScope
|
|
252
|
+
Accordion
|
|
257
253
|
};
|
|
258
254
|
//# sourceMappingURL=Accordion.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Accordion.tsx"],
|
|
4
|
-
"mappings": "AAAA,SAAS,
|
|
4
|
+
"mappings": "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",
|
|
5
5
|
"names": ["value", "open"]
|
|
6
6
|
}
|
|
@@ -1,24 +1,21 @@
|
|
|
1
|
-
import { Collapsible
|
|
1
|
+
import { Collapsible } from "@tamagui/collapsible";
|
|
2
2
|
import { createCollection } from "@tamagui/collection";
|
|
3
|
-
import { createContextScope } from "@tamagui/create-context";
|
|
4
3
|
import { YStack } from "@tamagui/stacks";
|
|
5
4
|
import { H1 } from "@tamagui/text";
|
|
6
5
|
import { useControllableState } from "@tamagui/use-controllable-state";
|
|
7
6
|
import { useDirection } from "@tamagui/use-direction";
|
|
8
7
|
import {
|
|
9
8
|
composeEventHandlers,
|
|
9
|
+
createStyledContext,
|
|
10
10
|
isWeb,
|
|
11
11
|
styled,
|
|
12
12
|
useComposedRefs,
|
|
13
13
|
withStaticProperties
|
|
14
14
|
} from "@tamagui/web";
|
|
15
15
|
import * as React from "react";
|
|
16
|
-
const ACCORDION_NAME = "Accordion", ACCORDION_KEYS = ["Home", "End", "ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"], [Collection, useCollection
|
|
17
|
-
ACCORDION_NAME,
|
|
18
|
-
[createCollectionScope, createCollapsibleScope]
|
|
19
|
-
), useCollapsibleScope = createCollapsibleScope(), AccordionComponent = React.forwardRef((props, forwardedRef) => {
|
|
16
|
+
const ACCORDION_NAME = "Accordion", ACCORDION_KEYS = ["Home", "End", "ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"], [Collection, useCollection] = createCollection(ACCORDION_NAME), ACCORDION_CONTEXT = "Accordion", AccordionComponent = React.forwardRef((props, forwardedRef) => {
|
|
20
17
|
const { type, ...accordionProps } = props, singleProps = accordionProps, multipleProps = accordionProps;
|
|
21
|
-
return <Collection.Provider
|
|
18
|
+
return <Collection.Provider __scopeCollection={props.__scopeAccordion || ACCORDION_CONTEXT}>{type === "multiple" ? <AccordionImplMultiple {...multipleProps} ref={forwardedRef} /> : <AccordionImplSingle {...singleProps} ref={forwardedRef} />}</Collection.Provider>;
|
|
22
19
|
});
|
|
23
20
|
AccordionComponent.displayName = ACCORDION_NAME;
|
|
24
21
|
AccordionComponent.propTypes = {
|
|
@@ -33,7 +30,10 @@ AccordionComponent.propTypes = {
|
|
|
33
30
|
) : null;
|
|
34
31
|
}
|
|
35
32
|
};
|
|
36
|
-
const
|
|
33
|
+
const { Provider: AccordionValueProvider, useStyledContext: useAccordionValueContext } = createStyledContext(), {
|
|
34
|
+
Provider: AccordionCollapsibleProvider,
|
|
35
|
+
useStyledContext: useAccordionCollapsibleContext
|
|
36
|
+
} = createStyledContext(), AccordionImplSingle = React.forwardRef((props, forwardedRef) => {
|
|
37
37
|
const {
|
|
38
38
|
value: valueProp,
|
|
39
39
|
defaultValue,
|
|
@@ -83,7 +83,7 @@ const [AccordionValueProvider, useAccordionValueContext] = createAccordionContex
|
|
|
83
83
|
onItemOpen={handleItemOpen}
|
|
84
84
|
onItemClose={handleItemClose}
|
|
85
85
|
><AccordionCollapsibleProvider scope={props.__scopeAccordion} collapsible={!0}><AccordionImpl {...accordionMultipleProps} ref={forwardedRef} /></AccordionCollapsibleProvider></AccordionValueProvider>;
|
|
86
|
-
}),
|
|
86
|
+
}), { Provider: AccordionImplProvider, useStyledContext: useAccordionContext } = createStyledContext(), AccordionImpl = React.forwardRef(
|
|
87
87
|
(props, forwardedRef) => {
|
|
88
88
|
const {
|
|
89
89
|
__scopeAccordion,
|
|
@@ -91,7 +91,7 @@ const [AccordionValueProvider, useAccordionValueContext] = createAccordionContex
|
|
|
91
91
|
dir,
|
|
92
92
|
orientation = "vertical",
|
|
93
93
|
...accordionProps
|
|
94
|
-
} = props, accordionRef = React.useRef(null), composedRef = useComposedRefs(accordionRef, forwardedRef), getItems = useCollection(__scopeAccordion), isDirectionLTR = useDirection(dir) === "ltr", handleKeyDown = composeEventHandlers(
|
|
94
|
+
} = props, accordionRef = React.useRef(null), composedRef = useComposedRefs(accordionRef, forwardedRef), getItems = useCollection(__scopeAccordion || ACCORDION_CONTEXT), isDirectionLTR = useDirection(dir) === "ltr", handleKeyDown = composeEventHandlers(
|
|
95
95
|
props.onKeyDown,
|
|
96
96
|
(event) => {
|
|
97
97
|
var _a;
|
|
@@ -141,7 +141,7 @@ const [AccordionValueProvider, useAccordionValueContext] = createAccordionContex
|
|
|
141
141
|
disabled={disabled}
|
|
142
142
|
direction={dir}
|
|
143
143
|
orientation={orientation}
|
|
144
|
-
><Collection.Slot
|
|
144
|
+
><Collection.Slot __scopeCollection={__scopeAccordion || ACCORDION_CONTEXT}><YStack
|
|
145
145
|
data-orientation={orientation}
|
|
146
146
|
ref={composedRef}
|
|
147
147
|
{...accordionProps}
|
|
@@ -150,9 +150,9 @@ const [AccordionValueProvider, useAccordionValueContext] = createAccordionContex
|
|
|
150
150
|
}}
|
|
151
151
|
/></Collection.Slot></AccordionImplProvider>;
|
|
152
152
|
}
|
|
153
|
-
), ITEM_NAME = "AccordionItem",
|
|
153
|
+
), ITEM_NAME = "AccordionItem", { Provider: AccordionItemProvider, useStyledContext: useAccordionItemContext } = createStyledContext(), AccordionItem = React.forwardRef(
|
|
154
154
|
(props, forwardedRef) => {
|
|
155
|
-
const { __scopeAccordion, value, ...accordionItemProps } = props, accordionContext = useAccordionContext(
|
|
155
|
+
const { __scopeAccordion, value, ...accordionItemProps } = props, accordionContext = useAccordionContext(__scopeAccordion), valueContext = useAccordionValueContext(__scopeAccordion), triggerId = React.useId(), open = value && valueContext.value.includes(value) || !1, disabled = accordionContext.disabled || props.disabled;
|
|
156
156
|
return <AccordionItemProvider
|
|
157
157
|
scope={__scopeAccordion}
|
|
158
158
|
open={open}
|
|
@@ -161,7 +161,7 @@ const [AccordionValueProvider, useAccordionValueContext] = createAccordionContex
|
|
|
161
161
|
><Collapsible
|
|
162
162
|
data-orientation={accordionContext.orientation}
|
|
163
163
|
data-state={open ? "open" : "closed"}
|
|
164
|
-
{
|
|
164
|
+
__scopeCollapsible={__scopeAccordion || ACCORDION_CONTEXT}
|
|
165
165
|
{...accordionItemProps}
|
|
166
166
|
ref={forwardedRef}
|
|
167
167
|
disabled={disabled}
|
|
@@ -175,7 +175,7 @@ const [AccordionValueProvider, useAccordionValueContext] = createAccordionContex
|
|
|
175
175
|
AccordionItem.displayName = ITEM_NAME;
|
|
176
176
|
const HEADER_NAME = "AccordionHeader", AccordionHeader = React.forwardRef(
|
|
177
177
|
(props, forwardedRef) => {
|
|
178
|
-
const { __scopeAccordion, ...headerProps } = props, accordionContext = useAccordionContext(
|
|
178
|
+
const { __scopeAccordion, ...headerProps } = props, accordionContext = useAccordionContext(__scopeAccordion), itemContext = useAccordionItemContext(__scopeAccordion);
|
|
179
179
|
return <H1
|
|
180
180
|
data-orientation={accordionContext.orientation}
|
|
181
181
|
data-state={getState(itemContext.open)}
|
|
@@ -210,16 +210,13 @@ const AccordionTriggerFrame = styled(Collapsible.Trigger, {
|
|
|
210
210
|
defaultVariants: {
|
|
211
211
|
unstyled: !1
|
|
212
212
|
}
|
|
213
|
-
}),
|
|
214
|
-
const { __scopeAccordion, ...triggerProps } = props, accordionContext = useAccordionContext(
|
|
215
|
-
|
|
216
|
-
__scopeAccordion
|
|
217
|
-
), collapsibleScope = useCollapsibleScope(__scopeAccordion);
|
|
218
|
-
return <Collection.ItemSlot scope={__scopeAccordion}><AccordionTriggerFrame
|
|
213
|
+
}), AccordionTrigger = AccordionTriggerFrame.styleable(function(props, forwardedRef) {
|
|
214
|
+
const { __scopeAccordion, ...triggerProps } = props, accordionContext = useAccordionContext(__scopeAccordion), itemContext = useAccordionItemContext(__scopeAccordion), collapsibleContext = useAccordionCollapsibleContext(__scopeAccordion);
|
|
215
|
+
return <Collection.ItemSlot __scopeCollection={__scopeAccordion || ACCORDION_CONTEXT}><AccordionTriggerFrame
|
|
216
|
+
__scopeCollapsible={__scopeAccordion || ACCORDION_CONTEXT}
|
|
219
217
|
aria-disabled={itemContext.open && !collapsibleContext.collapsible || void 0}
|
|
220
218
|
data-orientation={accordionContext.orientation}
|
|
221
219
|
id={itemContext.triggerId}
|
|
222
|
-
{...collapsibleScope}
|
|
223
220
|
{...triggerProps}
|
|
224
221
|
ref={forwardedRef}
|
|
225
222
|
/></Collection.ItemSlot>;
|
|
@@ -236,12 +233,12 @@ const AccordionTriggerFrame = styled(Collapsible.Trigger, {
|
|
|
236
233
|
unstyled: !1
|
|
237
234
|
}
|
|
238
235
|
}), AccordionContent = AccordionContentFrame.styleable(function(props, forwardedRef) {
|
|
239
|
-
const { __scopeAccordion, ...contentProps } = props, accordionContext = useAccordionContext(
|
|
236
|
+
const { __scopeAccordion, ...contentProps } = props, accordionContext = useAccordionContext(__scopeAccordion), itemContext = useAccordionItemContext(__scopeAccordion);
|
|
240
237
|
return <AccordionContentFrame
|
|
241
238
|
role="region"
|
|
242
239
|
aria-labelledby={itemContext.triggerId}
|
|
243
240
|
data-orientation={accordionContext.orientation}
|
|
244
|
-
{
|
|
241
|
+
__scopeCollapsible={__scopeAccordion || ACCORDION_CONTEXT}
|
|
245
242
|
{...contentProps}
|
|
246
243
|
ref={forwardedRef}
|
|
247
244
|
/>;
|
|
@@ -256,7 +253,6 @@ const Accordion = withStaticProperties(AccordionComponent, {
|
|
|
256
253
|
Item: AccordionItem
|
|
257
254
|
});
|
|
258
255
|
export {
|
|
259
|
-
Accordion
|
|
260
|
-
createAccordionScope
|
|
256
|
+
Accordion
|
|
261
257
|
};
|
|
262
258
|
//# sourceMappingURL=Accordion.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Accordion.tsx"],
|
|
4
|
-
"mappings": "AAAA,SAAS,
|
|
4
|
+
"mappings": "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",
|
|
5
5
|
"names": ["value", "open"]
|
|
6
6
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/accordion",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.72.0",
|
|
4
4
|
"sideEffects": [
|
|
5
5
|
"*.css"
|
|
6
6
|
],
|
|
@@ -22,20 +22,20 @@
|
|
|
22
22
|
"lint:fix": "../../node_modules/.bin/biome check --apply-unsafe src"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@tamagui/collapsible": "1.
|
|
26
|
-
"@tamagui/collection": "1.
|
|
27
|
-
"@tamagui/compose-refs": "1.
|
|
28
|
-
"@tamagui/core": "1.
|
|
29
|
-
"@tamagui/create-context": "1.
|
|
30
|
-
"@tamagui/polyfill-dev": "1.
|
|
31
|
-
"@tamagui/stacks": "1.
|
|
32
|
-
"@tamagui/use-controllable-state": "1.
|
|
25
|
+
"@tamagui/collapsible": "1.72.0",
|
|
26
|
+
"@tamagui/collection": "1.72.0",
|
|
27
|
+
"@tamagui/compose-refs": "1.72.0",
|
|
28
|
+
"@tamagui/core": "1.72.0",
|
|
29
|
+
"@tamagui/create-context": "1.72.0",
|
|
30
|
+
"@tamagui/polyfill-dev": "1.72.0",
|
|
31
|
+
"@tamagui/stacks": "1.72.0",
|
|
32
|
+
"@tamagui/use-controllable-state": "1.72.0"
|
|
33
33
|
},
|
|
34
34
|
"peerDependencies": {
|
|
35
35
|
"react": "*"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
|
-
"@tamagui/build": "1.
|
|
38
|
+
"@tamagui/build": "1.72.0",
|
|
39
39
|
"react": "^18.2.0"
|
|
40
40
|
},
|
|
41
41
|
"publishConfig": {
|
package/src/Accordion.tsx
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
|
-
import { Collapsible
|
|
1
|
+
import { Collapsible } from '@tamagui/collapsible'
|
|
2
2
|
import { createCollection } from '@tamagui/collection'
|
|
3
|
-
import type { Scope } from '@tamagui/create-context'
|
|
4
|
-
import { createContextScope } from '@tamagui/create-context'
|
|
5
3
|
import { YStack } from '@tamagui/stacks'
|
|
6
4
|
import { H1, H3 } from '@tamagui/text'
|
|
7
5
|
import { useControllableState } from '@tamagui/use-controllable-state'
|
|
@@ -12,6 +10,7 @@ import {
|
|
|
12
10
|
Stack,
|
|
13
11
|
TamaguiElement,
|
|
14
12
|
composeEventHandlers,
|
|
13
|
+
createStyledContext,
|
|
15
14
|
isWeb,
|
|
16
15
|
styled,
|
|
17
16
|
useComposedRefs,
|
|
@@ -28,16 +27,10 @@ type Direction = 'ltr' | 'rtl'
|
|
|
28
27
|
const ACCORDION_NAME = 'Accordion'
|
|
29
28
|
const ACCORDION_KEYS = ['Home', 'End', 'ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight']
|
|
30
29
|
|
|
31
|
-
const [Collection, useCollection
|
|
32
|
-
createCollection<AccordionTrigger>(ACCORDION_NAME)
|
|
30
|
+
const [Collection, useCollection] = createCollection<AccordionTrigger>(ACCORDION_NAME)
|
|
33
31
|
|
|
34
|
-
type ScopedProps<P> = P & { __scopeAccordion?:
|
|
35
|
-
const [createAccordionContext, createAccordionScope] = createContextScope(
|
|
36
|
-
ACCORDION_NAME,
|
|
37
|
-
[createCollectionScope, createCollapsibleScope]
|
|
38
|
-
)
|
|
32
|
+
type ScopedProps<P> = P & { __scopeAccordion?: string }
|
|
39
33
|
|
|
40
|
-
const useCollapsibleScope = createCollapsibleScope()
|
|
41
34
|
type AccordionElement = AccordionImplMultipleElement | AccordionImplSingleElement
|
|
42
35
|
interface AccordionSingleProps extends AccordionImplSingleProps {
|
|
43
36
|
type: 'single'
|
|
@@ -46,16 +39,18 @@ interface AccordionMultipleProps extends AccordionImplMultipleProps {
|
|
|
46
39
|
type: 'multiple'
|
|
47
40
|
}
|
|
48
41
|
|
|
42
|
+
const ACCORDION_CONTEXT = 'Accordion'
|
|
43
|
+
|
|
49
44
|
const AccordionComponent = React.forwardRef<
|
|
50
45
|
AccordionElement,
|
|
51
|
-
AccordionSingleProps | AccordionMultipleProps
|
|
46
|
+
ScopedProps<AccordionSingleProps | AccordionMultipleProps>
|
|
52
47
|
>((props: ScopedProps<AccordionSingleProps | AccordionMultipleProps>, forwardedRef) => {
|
|
53
48
|
const { type, ...accordionProps } = props
|
|
54
49
|
const singleProps = accordionProps as AccordionImplSingleProps
|
|
55
50
|
const multipleProps = accordionProps as AccordionImplMultipleProps
|
|
56
51
|
|
|
57
52
|
return (
|
|
58
|
-
<Collection.Provider
|
|
53
|
+
<Collection.Provider __scopeCollection={props.__scopeAccordion || ACCORDION_CONTEXT}>
|
|
59
54
|
{type === 'multiple' ? (
|
|
60
55
|
<AccordionImplMultiple {...multipleProps} ref={forwardedRef} />
|
|
61
56
|
) : (
|
|
@@ -97,11 +92,13 @@ type AccordionValueContextValue = {
|
|
|
97
92
|
onItemClose(value: string): void
|
|
98
93
|
}
|
|
99
94
|
|
|
100
|
-
const
|
|
101
|
-
|
|
95
|
+
const { Provider: AccordionValueProvider, useStyledContext: useAccordionValueContext } =
|
|
96
|
+
createStyledContext<AccordionValueContextValue>()
|
|
102
97
|
|
|
103
|
-
const
|
|
104
|
-
|
|
98
|
+
const {
|
|
99
|
+
Provider: AccordionCollapsibleProvider,
|
|
100
|
+
useStyledContext: useAccordionCollapsibleContext,
|
|
101
|
+
} = createStyledContext()
|
|
105
102
|
|
|
106
103
|
type AccordionImplSingleElement = AccordionImplElement
|
|
107
104
|
|
|
@@ -128,7 +125,7 @@ interface AccordionImplSingleProps extends AccordionImplProps {
|
|
|
128
125
|
|
|
129
126
|
const AccordionImplSingle = React.forwardRef<
|
|
130
127
|
AccordionImplSingleElement,
|
|
131
|
-
AccordionImplSingleProps
|
|
128
|
+
ScopedProps<AccordionImplSingleProps>
|
|
132
129
|
>((props: ScopedProps<AccordionImplSingleProps>, forwardedRef) => {
|
|
133
130
|
const {
|
|
134
131
|
value: valueProp,
|
|
@@ -185,7 +182,7 @@ interface AccordionImplMultipleProps extends AccordionImplProps {
|
|
|
185
182
|
|
|
186
183
|
const AccordionImplMultiple = React.forwardRef<
|
|
187
184
|
AccordionImplMultipleElement,
|
|
188
|
-
AccordionImplMultipleProps
|
|
185
|
+
ScopedProps<AccordionImplMultipleProps>
|
|
189
186
|
>((props: ScopedProps<AccordionImplMultipleProps>, forwardedRef) => {
|
|
190
187
|
const {
|
|
191
188
|
value: valueProp,
|
|
@@ -233,8 +230,8 @@ type AccordionImplContextValue = {
|
|
|
233
230
|
orientation: AccordionImplProps['orientation']
|
|
234
231
|
}
|
|
235
232
|
|
|
236
|
-
const
|
|
237
|
-
|
|
233
|
+
const { Provider: AccordionImplProvider, useStyledContext: useAccordionContext } =
|
|
234
|
+
createStyledContext<AccordionImplContextValue>()
|
|
238
235
|
|
|
239
236
|
type AccordionImplElement = TamaguiElement
|
|
240
237
|
type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Stack>
|
|
@@ -273,7 +270,7 @@ const AccordionImpl = React.forwardRef<AccordionImplElement, AccordionImplProps>
|
|
|
273
270
|
|
|
274
271
|
const accordionRef = React.useRef<AccordionImplElement>(null)
|
|
275
272
|
const composedRef = useComposedRefs(accordionRef, forwardedRef)
|
|
276
|
-
const getItems = useCollection(__scopeAccordion)
|
|
273
|
+
const getItems = useCollection(__scopeAccordion || ACCORDION_CONTEXT)
|
|
277
274
|
const direction = useDirection(dir)
|
|
278
275
|
const isDirectionLTR = direction === 'ltr'
|
|
279
276
|
const handleKeyDown = composeEventHandlers(
|
|
@@ -362,7 +359,7 @@ const AccordionImpl = React.forwardRef<AccordionImplElement, AccordionImplProps>
|
|
|
362
359
|
direction={dir}
|
|
363
360
|
orientation={orientation}
|
|
364
361
|
>
|
|
365
|
-
<Collection.Slot
|
|
362
|
+
<Collection.Slot __scopeCollection={__scopeAccordion || ACCORDION_CONTEXT}>
|
|
366
363
|
<YStack
|
|
367
364
|
data-orientation={orientation}
|
|
368
365
|
ref={composedRef}
|
|
@@ -384,8 +381,8 @@ const AccordionImpl = React.forwardRef<AccordionImplElement, AccordionImplProps>
|
|
|
384
381
|
const ITEM_NAME = 'AccordionItem'
|
|
385
382
|
|
|
386
383
|
type AccordionItemContextValue = { open?: boolean; disabled?: boolean; triggerId: string }
|
|
387
|
-
const
|
|
388
|
-
|
|
384
|
+
const { Provider: AccordionItemProvider, useStyledContext: useAccordionItemContext } =
|
|
385
|
+
createStyledContext<AccordionItemContextValue>()
|
|
389
386
|
type AccordionItemElement = React.ElementRef<typeof Collapsible>
|
|
390
387
|
type CollapsibleProps = React.ComponentPropsWithoutRef<typeof Collapsible>
|
|
391
388
|
interface AccordionItemProps
|
|
@@ -409,9 +406,8 @@ interface AccordionItemProps
|
|
|
409
406
|
const AccordionItem = React.forwardRef<AccordionItemElement, AccordionItemProps>(
|
|
410
407
|
(props: ScopedProps<AccordionItemProps>, forwardedRef) => {
|
|
411
408
|
const { __scopeAccordion, value, ...accordionItemProps } = props
|
|
412
|
-
const accordionContext = useAccordionContext(
|
|
413
|
-
const valueContext = useAccordionValueContext(
|
|
414
|
-
const collapsibleScope = useCollapsibleScope(__scopeAccordion)
|
|
409
|
+
const accordionContext = useAccordionContext(__scopeAccordion)
|
|
410
|
+
const valueContext = useAccordionValueContext(__scopeAccordion)
|
|
415
411
|
const triggerId = React.useId()
|
|
416
412
|
const open = (value && valueContext.value.includes(value)) || false
|
|
417
413
|
const disabled = accordionContext.disabled || props.disabled
|
|
@@ -426,7 +422,7 @@ const AccordionItem = React.forwardRef<AccordionItemElement, AccordionItemProps>
|
|
|
426
422
|
<Collapsible
|
|
427
423
|
data-orientation={accordionContext.orientation}
|
|
428
424
|
data-state={open ? 'open' : 'closed'}
|
|
429
|
-
{
|
|
425
|
+
__scopeCollapsible={__scopeAccordion || ACCORDION_CONTEXT}
|
|
430
426
|
{...accordionItemProps}
|
|
431
427
|
ref={forwardedRef}
|
|
432
428
|
disabled={disabled}
|
|
@@ -463,8 +459,8 @@ type AccordionHeaderProps = PrimitiveHeading3Props
|
|
|
463
459
|
const AccordionHeader = React.forwardRef<AccordionHeaderElement, AccordionHeaderProps>(
|
|
464
460
|
(props: ScopedProps<AccordionHeaderProps>, forwardedRef) => {
|
|
465
461
|
const { __scopeAccordion, ...headerProps } = props
|
|
466
|
-
const accordionContext = useAccordionContext(
|
|
467
|
-
const itemContext = useAccordionItemContext(
|
|
462
|
+
const accordionContext = useAccordionContext(__scopeAccordion)
|
|
463
|
+
const itemContext = useAccordionItemContext(__scopeAccordion)
|
|
468
464
|
return (
|
|
469
465
|
<H1
|
|
470
466
|
data-orientation={accordionContext.orientation}
|
|
@@ -513,8 +509,6 @@ const AccordionTriggerFrame = styled(Collapsible.Trigger, {
|
|
|
513
509
|
},
|
|
514
510
|
})
|
|
515
511
|
|
|
516
|
-
const TRIGGER_NAME = 'AccordionTrigger'
|
|
517
|
-
|
|
518
512
|
type AccordionTrigger = GetRef<typeof AccordionTriggerFrame>
|
|
519
513
|
type AccordionTriggerProps = GetProps<typeof AccordionTriggerFrame>
|
|
520
514
|
|
|
@@ -527,21 +521,18 @@ const AccordionTrigger = AccordionTriggerFrame.styleable(function AccordionTrigg
|
|
|
527
521
|
forwardedRef
|
|
528
522
|
) {
|
|
529
523
|
const { __scopeAccordion, ...triggerProps } = props
|
|
530
|
-
const accordionContext = useAccordionContext(
|
|
531
|
-
const itemContext = useAccordionItemContext(
|
|
532
|
-
const collapsibleContext = useAccordionCollapsibleContext(
|
|
533
|
-
TRIGGER_NAME,
|
|
534
|
-
__scopeAccordion
|
|
535
|
-
)
|
|
536
|
-
const collapsibleScope = useCollapsibleScope(__scopeAccordion)
|
|
524
|
+
const accordionContext = useAccordionContext(__scopeAccordion)
|
|
525
|
+
const itemContext = useAccordionItemContext(__scopeAccordion)
|
|
526
|
+
const collapsibleContext = useAccordionCollapsibleContext(__scopeAccordion)
|
|
537
527
|
|
|
538
528
|
return (
|
|
539
|
-
<Collection.ItemSlot
|
|
529
|
+
<Collection.ItemSlot __scopeCollection={__scopeAccordion || ACCORDION_CONTEXT}>
|
|
540
530
|
<AccordionTriggerFrame
|
|
531
|
+
// @ts-ignore
|
|
532
|
+
__scopeCollapsible={__scopeAccordion || ACCORDION_CONTEXT}
|
|
541
533
|
aria-disabled={(itemContext.open && !collapsibleContext.collapsible) || undefined}
|
|
542
534
|
data-orientation={accordionContext.orientation}
|
|
543
535
|
id={itemContext.triggerId}
|
|
544
|
-
{...collapsibleScope}
|
|
545
536
|
{...triggerProps}
|
|
546
537
|
ref={forwardedRef}
|
|
547
538
|
/>
|
|
@@ -578,15 +569,14 @@ const AccordionContent = AccordionContentFrame.styleable(function AccordionConte
|
|
|
578
569
|
forwardedRef
|
|
579
570
|
) {
|
|
580
571
|
const { __scopeAccordion, ...contentProps } = props
|
|
581
|
-
const accordionContext = useAccordionContext(
|
|
582
|
-
const itemContext = useAccordionItemContext(
|
|
583
|
-
const collapsibleScope = useCollapsibleScope(__scopeAccordion)
|
|
572
|
+
const accordionContext = useAccordionContext(__scopeAccordion)
|
|
573
|
+
const itemContext = useAccordionItemContext(__scopeAccordion)
|
|
584
574
|
return (
|
|
585
575
|
<AccordionContentFrame
|
|
586
576
|
role="region"
|
|
587
577
|
aria-labelledby={itemContext.triggerId}
|
|
588
578
|
data-orientation={accordionContext.orientation}
|
|
589
|
-
{
|
|
579
|
+
__scopeCollapsible={__scopeAccordion || ACCORDION_CONTEXT}
|
|
590
580
|
{...contentProps}
|
|
591
581
|
ref={forwardedRef}
|
|
592
582
|
/>
|
|
@@ -605,7 +595,7 @@ const Accordion = withStaticProperties(AccordionComponent, {
|
|
|
605
595
|
Item: AccordionItem,
|
|
606
596
|
})
|
|
607
597
|
|
|
608
|
-
export { Accordion
|
|
598
|
+
export { Accordion }
|
|
609
599
|
|
|
610
600
|
export type {
|
|
611
601
|
AccordionContentProps,
|