@tamagui/accordion 1.135.4 → 1.135.6
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.cjs +1 -1
- package/dist/cjs/Accordion.js +1 -1
- package/dist/cjs/Accordion.js.map +1 -1
- package/dist/cjs/Accordion.native.js +354 -259
- package/dist/cjs/Accordion.native.js.map +1 -6
- package/dist/cjs/index.native.js +13 -12
- package/dist/cjs/index.native.js.map +1 -6
- package/dist/jsx/Accordion.native.js +372 -260
- package/dist/jsx/Accordion.native.js.map +1 -6
- package/dist/jsx/index.native.js +21 -2
- package/dist/jsx/index.native.js.map +1 -6
- package/package.json +15 -14
|
@@ -1,299 +1,398 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
|
|
2
3
|
var __create = Object.create;
|
|
3
4
|
var __defProp = Object.defineProperty;
|
|
4
5
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
6
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
-
var __getProtoOf = Object.getPrototypeOf,
|
|
7
|
+
var __getProtoOf = Object.getPrototypeOf,
|
|
8
|
+
__hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
9
|
var __export = (target, all) => {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
10
|
+
for (var name in all) __defProp(target, name, {
|
|
11
|
+
get: all[name],
|
|
12
|
+
enumerable: !0
|
|
13
|
+
});
|
|
14
|
+
},
|
|
15
|
+
__copyProps = (to, from, except, desc) => {
|
|
16
|
+
if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
|
|
17
|
+
get: () => from[key],
|
|
18
|
+
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
19
|
+
});
|
|
20
|
+
return to;
|
|
21
|
+
};
|
|
16
22
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
17
23
|
// If the importer is in node compatibility mode or this is not an ESM
|
|
18
24
|
// file that has been converted to a CommonJS file using a Babel-
|
|
19
25
|
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
20
26
|
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
21
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
|
22
|
-
|
|
23
|
-
|
|
27
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
|
28
|
+
value: mod,
|
|
29
|
+
enumerable: !0
|
|
30
|
+
}) : target, mod)),
|
|
31
|
+
__toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
|
|
32
|
+
value: !0
|
|
33
|
+
}), mod);
|
|
24
34
|
var Accordion_exports = {};
|
|
25
35
|
__export(Accordion_exports, {
|
|
26
36
|
Accordion: () => Accordion
|
|
27
37
|
});
|
|
28
38
|
module.exports = __toCommonJS(Accordion_exports);
|
|
29
|
-
var import_jsx_runtime = require("react/jsx-runtime"),
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"
|
|
33
|
-
"
|
|
34
|
-
"
|
|
35
|
-
"
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
39
|
+
var import_jsx_runtime = require("react/jsx-runtime"),
|
|
40
|
+
import_collapsible = require("@tamagui/collapsible"),
|
|
41
|
+
import_collection = require("@tamagui/collection"),
|
|
42
|
+
import_compose_refs = require("@tamagui/compose-refs"),
|
|
43
|
+
import_constants = require("@tamagui/constants"),
|
|
44
|
+
import_core = require("@tamagui/core"),
|
|
45
|
+
import_helpers = require("@tamagui/helpers"),
|
|
46
|
+
import_stacks = require("@tamagui/stacks"),
|
|
47
|
+
import_text = require("@tamagui/text"),
|
|
48
|
+
import_use_controllable_state = require("@tamagui/use-controllable-state"),
|
|
49
|
+
import_use_direction = require("@tamagui/use-direction"),
|
|
50
|
+
React = __toESM(require("react"), 1),
|
|
51
|
+
ACCORDION_NAME = "Accordion",
|
|
52
|
+
ACCORDION_KEYS = ["Home", "End", "ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"],
|
|
53
|
+
[Collection, useCollection] = (0, import_collection.createCollection)(ACCORDION_NAME),
|
|
54
|
+
ACCORDION_CONTEXT = "Accordion",
|
|
55
|
+
AccordionComponent = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
|
|
56
|
+
var {
|
|
57
|
+
type,
|
|
58
|
+
...accordionProps
|
|
59
|
+
} = props,
|
|
60
|
+
singleProps = accordionProps,
|
|
61
|
+
multipleProps = accordionProps;
|
|
62
|
+
return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Collection.Provider, {
|
|
63
|
+
scope: props.__scopeAccordion || ACCORDION_CONTEXT,
|
|
64
|
+
children: type === "multiple" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(AccordionImplMultiple, {
|
|
65
|
+
...multipleProps,
|
|
66
|
+
ref: forwardedRef
|
|
67
|
+
}) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(AccordionImplSingle, {
|
|
68
|
+
...singleProps,
|
|
69
|
+
ref: forwardedRef
|
|
70
|
+
})
|
|
71
|
+
});
|
|
47
72
|
});
|
|
48
|
-
});
|
|
49
73
|
AccordionComponent.displayName = ACCORDION_NAME;
|
|
50
74
|
AccordionComponent.propTypes = {
|
|
51
75
|
type(props) {
|
|
52
76
|
var value = props.value || props.defaultValue;
|
|
53
|
-
return props.type && ![
|
|
54
|
-
"single",
|
|
55
|
-
"multiple"
|
|
56
|
-
].includes(props.type) ? new Error("Invalid prop `type` supplied to `Accordion`. Expected one of `single | multiple`.") : props.type === "multiple" && typeof value == "string" ? new Error("Invalid prop `type` supplied to `Accordion`. Expected `single` when `defaultValue` or `value` is type `string`.") : props.type === "single" && Array.isArray(value) ? new Error("Invalid prop `type` supplied to `Accordion`. Expected `multiple` when `defaultValue` or `value` is type `string[]`.") : null;
|
|
77
|
+
return props.type && !["single", "multiple"].includes(props.type) ? new Error("Invalid prop `type` supplied to `Accordion`. Expected one of `single | multiple`.") : props.type === "multiple" && typeof value == "string" ? new Error("Invalid prop `type` supplied to `Accordion`. Expected `single` when `defaultValue` or `value` is type `string`.") : props.type === "single" && Array.isArray(value) ? new Error("Invalid prop `type` supplied to `Accordion`. Expected `multiple` when `defaultValue` or `value` is type `string[]`.") : null;
|
|
57
78
|
}
|
|
58
79
|
};
|
|
59
|
-
var {
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
80
|
+
var {
|
|
81
|
+
Provider: AccordionValueProvider,
|
|
82
|
+
useStyledContext: useAccordionValueContext
|
|
83
|
+
} = (0, import_core.createStyledContext)(),
|
|
84
|
+
{
|
|
85
|
+
Provider: AccordionCollapsibleProvider,
|
|
86
|
+
useStyledContext: useAccordionCollapsibleContext
|
|
87
|
+
} = (0, import_core.createStyledContext)(),
|
|
88
|
+
AccordionImplSingle = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
|
|
89
|
+
var {
|
|
90
|
+
value: valueProp,
|
|
91
|
+
defaultValue,
|
|
92
|
+
control,
|
|
93
|
+
onValueChange = function () {},
|
|
94
|
+
collapsible = !1,
|
|
95
|
+
...accordionSingleProps
|
|
96
|
+
} = props,
|
|
97
|
+
[value, setValue] = (0, import_use_controllable_state.useControllableState)({
|
|
98
|
+
prop: valueProp,
|
|
99
|
+
defaultProp: defaultValue || "",
|
|
100
|
+
onChange: onValueChange
|
|
101
|
+
});
|
|
102
|
+
return /* @__PURE__ */(0, import_jsx_runtime.jsx)(AccordionValueProvider, {
|
|
79
103
|
scope: props.__scopeAccordion,
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
104
|
+
value: value ? [value] : [],
|
|
105
|
+
onItemOpen: setValue,
|
|
106
|
+
onItemClose: React.useCallback(function () {
|
|
107
|
+
return collapsible && setValue("");
|
|
108
|
+
}, [setValue, collapsible]),
|
|
109
|
+
children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(AccordionCollapsibleProvider, {
|
|
110
|
+
scope: props.__scopeAccordion,
|
|
111
|
+
collapsible,
|
|
112
|
+
children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(AccordionImpl, {
|
|
113
|
+
...accordionSingleProps,
|
|
114
|
+
ref: forwardedRef
|
|
115
|
+
})
|
|
84
116
|
})
|
|
85
|
-
})
|
|
86
|
-
});
|
|
87
|
-
}), AccordionImplMultiple = /* @__PURE__ */ React.forwardRef(function(props, forwardedRef) {
|
|
88
|
-
var { value: valueProp, defaultValue, onValueChange = function() {
|
|
89
|
-
}, ...accordionMultipleProps } = props, [value, setValue] = (0, import_use_controllable_state.useControllableState)({
|
|
90
|
-
prop: valueProp,
|
|
91
|
-
defaultProp: defaultValue || [],
|
|
92
|
-
onChange: onValueChange
|
|
93
|
-
}), handleItemOpen = React.useCallback(function(itemValue) {
|
|
94
|
-
return setValue(function() {
|
|
95
|
-
var prevValue = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];
|
|
96
|
-
return [
|
|
97
|
-
...prevValue,
|
|
98
|
-
itemValue
|
|
99
|
-
];
|
|
100
|
-
});
|
|
101
|
-
}, [
|
|
102
|
-
setValue
|
|
103
|
-
]), handleItemClose = React.useCallback(function(itemValue) {
|
|
104
|
-
return setValue(function() {
|
|
105
|
-
var prevValue = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];
|
|
106
|
-
return prevValue.filter(function(value2) {
|
|
107
|
-
return value2 !== itemValue;
|
|
108
|
-
});
|
|
109
117
|
});
|
|
110
|
-
},
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
118
|
+
}),
|
|
119
|
+
AccordionImplMultiple = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
|
|
120
|
+
var {
|
|
121
|
+
value: valueProp,
|
|
122
|
+
defaultValue,
|
|
123
|
+
onValueChange = function () {},
|
|
124
|
+
...accordionMultipleProps
|
|
125
|
+
} = props,
|
|
126
|
+
[value, setValue] = (0, import_use_controllable_state.useControllableState)({
|
|
127
|
+
prop: valueProp,
|
|
128
|
+
defaultProp: defaultValue || [],
|
|
129
|
+
onChange: onValueChange
|
|
130
|
+
}),
|
|
131
|
+
handleItemOpen = React.useCallback(function (itemValue) {
|
|
132
|
+
return setValue(function () {
|
|
133
|
+
var prevValue = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];
|
|
134
|
+
return [...prevValue, itemValue];
|
|
135
|
+
});
|
|
136
|
+
}, [setValue]),
|
|
137
|
+
handleItemClose = React.useCallback(function (itemValue) {
|
|
138
|
+
return setValue(function () {
|
|
139
|
+
var prevValue = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];
|
|
140
|
+
return prevValue.filter(function (value2) {
|
|
141
|
+
return value2 !== itemValue;
|
|
142
|
+
});
|
|
143
|
+
});
|
|
144
|
+
}, [setValue]);
|
|
145
|
+
return /* @__PURE__ */(0, import_jsx_runtime.jsx)(AccordionValueProvider, {
|
|
119
146
|
scope: props.__scopeAccordion,
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
147
|
+
value: value || [],
|
|
148
|
+
onItemOpen: handleItemOpen,
|
|
149
|
+
onItemClose: handleItemClose,
|
|
150
|
+
children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(AccordionCollapsibleProvider, {
|
|
151
|
+
scope: props.__scopeAccordion,
|
|
152
|
+
collapsible: !0,
|
|
153
|
+
children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(AccordionImpl, {
|
|
154
|
+
...accordionMultipleProps,
|
|
155
|
+
ref: forwardedRef
|
|
156
|
+
})
|
|
124
157
|
})
|
|
125
|
-
})
|
|
126
|
-
})
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
158
|
+
});
|
|
159
|
+
}),
|
|
160
|
+
{
|
|
161
|
+
Provider: AccordionImplProvider,
|
|
162
|
+
useStyledContext: useAccordionContext
|
|
163
|
+
} = (0, import_core.createStyledContext)(),
|
|
164
|
+
AccordionImpl = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
|
|
165
|
+
var {
|
|
166
|
+
__scopeAccordion,
|
|
167
|
+
disabled,
|
|
168
|
+
dir,
|
|
169
|
+
orientation = "vertical",
|
|
170
|
+
...accordionProps
|
|
171
|
+
} = props,
|
|
172
|
+
accordionRef = React.useRef(null),
|
|
173
|
+
composedRef = (0, import_compose_refs.useComposedRefs)(accordionRef, forwardedRef),
|
|
174
|
+
getItems = useCollection(__scopeAccordion || ACCORDION_CONTEXT),
|
|
175
|
+
direction = (0, import_use_direction.useDirection)(dir),
|
|
176
|
+
isDirectionLTR = direction === "ltr",
|
|
177
|
+
handleKeyDown = (0, import_helpers.composeEventHandlers)(props.onKeyDown, function (event) {
|
|
178
|
+
var _triggerCollection_clampedIndex_ref_current;
|
|
179
|
+
if (ACCORDION_KEYS.includes(event.key)) {
|
|
180
|
+
var target = event.target,
|
|
181
|
+
triggerCollection = getItems().filter(function (item) {
|
|
182
|
+
var el = item.ref.current;
|
|
183
|
+
return !el?.disabled;
|
|
184
|
+
}),
|
|
185
|
+
triggerIndex = triggerCollection.findIndex(function (item) {
|
|
186
|
+
return item.ref.current === target;
|
|
187
|
+
}),
|
|
188
|
+
triggerCount = triggerCollection.length;
|
|
189
|
+
if (triggerIndex !== -1) {
|
|
190
|
+
event.preventDefault();
|
|
191
|
+
var nextIndex = triggerIndex,
|
|
192
|
+
homeIndex = 0,
|
|
193
|
+
endIndex = triggerCount - 1,
|
|
194
|
+
moveNext = function () {
|
|
195
|
+
nextIndex = triggerIndex + 1, nextIndex > endIndex && (nextIndex = homeIndex);
|
|
196
|
+
},
|
|
197
|
+
movePrev = function () {
|
|
198
|
+
nextIndex = triggerIndex - 1, nextIndex < homeIndex && (nextIndex = endIndex);
|
|
199
|
+
};
|
|
200
|
+
switch (event.key) {
|
|
201
|
+
case "Home":
|
|
202
|
+
nextIndex = homeIndex;
|
|
203
|
+
break;
|
|
204
|
+
case "End":
|
|
205
|
+
nextIndex = endIndex;
|
|
206
|
+
break;
|
|
207
|
+
case "ArrowRight":
|
|
208
|
+
orientation === "horizontal" && (isDirectionLTR ? moveNext() : movePrev());
|
|
209
|
+
break;
|
|
210
|
+
case "ArrowDown":
|
|
211
|
+
orientation === "vertical" && moveNext();
|
|
212
|
+
break;
|
|
213
|
+
case "ArrowLeft":
|
|
214
|
+
orientation === "horizontal" && (isDirectionLTR ? movePrev() : moveNext());
|
|
215
|
+
break;
|
|
216
|
+
case "ArrowUp":
|
|
217
|
+
orientation === "vertical" && movePrev();
|
|
218
|
+
break;
|
|
219
|
+
}
|
|
220
|
+
var clampedIndex = nextIndex % triggerCount;
|
|
221
|
+
(_triggerCollection_clampedIndex_ref_current = triggerCollection[clampedIndex].ref.current) === null || _triggerCollection_clampedIndex_ref_current === void 0 || _triggerCollection_clampedIndex_ref_current.focus();
|
|
222
|
+
}
|
|
182
223
|
}
|
|
183
|
-
})
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
}), ITEM_NAME = "AccordionItem", { Provider: AccordionItemProvider, useStyledContext: useAccordionItemContext } = (0, import_core.createStyledContext)(), AccordionItem = /* @__PURE__ */ React.forwardRef(function(props, forwardedRef) {
|
|
187
|
-
var { __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;
|
|
188
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccordionItemProvider, {
|
|
189
|
-
scope: __scopeAccordion,
|
|
190
|
-
open,
|
|
191
|
-
disabled,
|
|
192
|
-
triggerId,
|
|
193
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_collapsible.Collapsible, {
|
|
194
|
-
"data-orientation": accordionContext.orientation,
|
|
195
|
-
"data-state": open ? "open" : "closed",
|
|
196
|
-
__scopeCollapsible: __scopeAccordion || ACCORDION_CONTEXT,
|
|
197
|
-
...accordionItemProps,
|
|
198
|
-
ref: forwardedRef,
|
|
224
|
+
});
|
|
225
|
+
return /* @__PURE__ */(0, import_jsx_runtime.jsx)(AccordionImplProvider, {
|
|
226
|
+
scope: __scopeAccordion,
|
|
199
227
|
disabled,
|
|
228
|
+
direction: dir,
|
|
229
|
+
orientation,
|
|
230
|
+
children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(Collection.Slot, {
|
|
231
|
+
scope: __scopeAccordion || ACCORDION_CONTEXT,
|
|
232
|
+
children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_stacks.YStack, {
|
|
233
|
+
"data-orientation": orientation,
|
|
234
|
+
ref: composedRef,
|
|
235
|
+
...accordionProps,
|
|
236
|
+
...(import_constants.isWeb && {
|
|
237
|
+
onKeyDown: handleKeyDown
|
|
238
|
+
})
|
|
239
|
+
})
|
|
240
|
+
})
|
|
241
|
+
});
|
|
242
|
+
}),
|
|
243
|
+
ITEM_NAME = "AccordionItem",
|
|
244
|
+
{
|
|
245
|
+
Provider: AccordionItemProvider,
|
|
246
|
+
useStyledContext: useAccordionItemContext
|
|
247
|
+
} = (0, import_core.createStyledContext)(),
|
|
248
|
+
AccordionItem = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
|
|
249
|
+
var {
|
|
250
|
+
__scopeAccordion,
|
|
251
|
+
value,
|
|
252
|
+
...accordionItemProps
|
|
253
|
+
} = props,
|
|
254
|
+
accordionContext = useAccordionContext(__scopeAccordion),
|
|
255
|
+
valueContext = useAccordionValueContext(__scopeAccordion),
|
|
256
|
+
triggerId = React.useId(),
|
|
257
|
+
open = value && valueContext.value.includes(value) || !1,
|
|
258
|
+
disabled = accordionContext.disabled || props.disabled;
|
|
259
|
+
return /* @__PURE__ */(0, import_jsx_runtime.jsx)(AccordionItemProvider, {
|
|
260
|
+
scope: __scopeAccordion,
|
|
200
261
|
open,
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
262
|
+
disabled,
|
|
263
|
+
triggerId,
|
|
264
|
+
children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_collapsible.Collapsible, {
|
|
265
|
+
"data-orientation": accordionContext.orientation,
|
|
266
|
+
"data-state": open ? "open" : "closed",
|
|
267
|
+
__scopeCollapsible: __scopeAccordion || ACCORDION_CONTEXT,
|
|
268
|
+
...accordionItemProps,
|
|
269
|
+
ref: forwardedRef,
|
|
270
|
+
disabled,
|
|
271
|
+
open,
|
|
272
|
+
onOpenChange: function (open2) {
|
|
273
|
+
open2 ? valueContext.onItemOpen(value) : valueContext.onItemClose(value);
|
|
274
|
+
}
|
|
275
|
+
})
|
|
276
|
+
});
|
|
205
277
|
});
|
|
206
|
-
});
|
|
207
278
|
AccordionItem.displayName = ITEM_NAME;
|
|
208
|
-
var HEADER_NAME = "AccordionHeader",
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
279
|
+
var HEADER_NAME = "AccordionHeader",
|
|
280
|
+
AccordionHeader = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
|
|
281
|
+
var {
|
|
282
|
+
__scopeAccordion,
|
|
283
|
+
...headerProps
|
|
284
|
+
} = props,
|
|
285
|
+
accordionContext = useAccordionContext(__scopeAccordion),
|
|
286
|
+
itemContext = useAccordionItemContext(__scopeAccordion);
|
|
287
|
+
return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_text.H1, {
|
|
288
|
+
"data-orientation": accordionContext.orientation,
|
|
289
|
+
"data-state": getState(itemContext.open),
|
|
290
|
+
"data-disabled": itemContext.disabled ? "" : void 0,
|
|
291
|
+
...headerProps,
|
|
292
|
+
ref: forwardedRef
|
|
293
|
+
});
|
|
216
294
|
});
|
|
217
|
-
});
|
|
218
295
|
AccordionHeader.displayName = HEADER_NAME;
|
|
219
296
|
var AccordionTriggerFrame = (0, import_core.styled)(import_collapsible.Collapsible.Trigger, {
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
297
|
+
variants: {
|
|
298
|
+
unstyled: {
|
|
299
|
+
false: {
|
|
300
|
+
cursor: "pointer",
|
|
301
|
+
backgroundColor: "$background",
|
|
302
|
+
borderColor: "$borderColor",
|
|
303
|
+
borderWidth: 1,
|
|
304
|
+
padding: "$true",
|
|
305
|
+
hoverStyle: {
|
|
306
|
+
backgroundColor: "$backgroundHover"
|
|
307
|
+
},
|
|
308
|
+
focusStyle: {
|
|
309
|
+
backgroundColor: "$backgroundFocus"
|
|
310
|
+
},
|
|
311
|
+
pressStyle: {
|
|
312
|
+
backgroundColor: "$backgroundPress"
|
|
313
|
+
}
|
|
236
314
|
}
|
|
237
315
|
}
|
|
316
|
+
},
|
|
317
|
+
defaultVariants: {
|
|
318
|
+
unstyled: process.env.TAMAGUI_HEADLESS === "1"
|
|
238
319
|
}
|
|
239
|
-
},
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
320
|
+
}),
|
|
321
|
+
AccordionTrigger = AccordionTriggerFrame.styleable(function (props, forwardedRef) {
|
|
322
|
+
var {
|
|
323
|
+
__scopeAccordion,
|
|
324
|
+
...triggerProps
|
|
325
|
+
} = props,
|
|
326
|
+
accordionContext = useAccordionContext(__scopeAccordion),
|
|
327
|
+
itemContext = useAccordionItemContext(__scopeAccordion),
|
|
328
|
+
collapsibleContext = useAccordionCollapsibleContext(__scopeAccordion);
|
|
329
|
+
return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Collection.ItemSlot, {
|
|
330
|
+
scope: __scopeAccordion || ACCORDION_CONTEXT,
|
|
331
|
+
children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(AccordionTriggerFrame, {
|
|
332
|
+
// @ts-ignore
|
|
333
|
+
__scopeCollapsible: __scopeAccordion || ACCORDION_CONTEXT,
|
|
334
|
+
"aria-disabled": itemContext.open && !collapsibleContext.collapsible || void 0,
|
|
335
|
+
"data-orientation": accordionContext.orientation,
|
|
336
|
+
id: itemContext.triggerId,
|
|
337
|
+
...triggerProps,
|
|
338
|
+
ref: forwardedRef
|
|
339
|
+
})
|
|
340
|
+
});
|
|
341
|
+
}),
|
|
342
|
+
AccordionContentFrame = (0, import_core.styled)(import_collapsible.Collapsible.Content, {
|
|
343
|
+
variants: {
|
|
344
|
+
unstyled: {
|
|
345
|
+
false: {
|
|
346
|
+
padding: "$true",
|
|
347
|
+
backgroundColor: "$background"
|
|
348
|
+
}
|
|
263
349
|
}
|
|
350
|
+
},
|
|
351
|
+
defaultVariants: {
|
|
352
|
+
unstyled: process.env.TAMAGUI_HEADLESS === "1"
|
|
264
353
|
}
|
|
265
|
-
},
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
354
|
+
}),
|
|
355
|
+
AccordionContent = AccordionContentFrame.styleable(function (props, forwardedRef) {
|
|
356
|
+
var {
|
|
357
|
+
__scopeAccordion,
|
|
358
|
+
...contentProps
|
|
359
|
+
} = props,
|
|
360
|
+
accordionContext = useAccordionContext(__scopeAccordion),
|
|
361
|
+
itemContext = useAccordionItemContext(__scopeAccordion);
|
|
362
|
+
return /* @__PURE__ */(0, import_jsx_runtime.jsx)(AccordionContentFrame, {
|
|
363
|
+
role: "region",
|
|
364
|
+
"aria-labelledby": itemContext.triggerId,
|
|
365
|
+
"data-orientation": accordionContext.orientation,
|
|
366
|
+
// @ts-ignore
|
|
367
|
+
__scopeCollapsible: __scopeAccordion || ACCORDION_CONTEXT,
|
|
368
|
+
...contentProps,
|
|
369
|
+
ref: forwardedRef
|
|
370
|
+
});
|
|
371
|
+
}),
|
|
372
|
+
HeightAnimator = import_core.View.styleable(function (props, ref) {
|
|
373
|
+
var itemContext = useAccordionItemContext(),
|
|
374
|
+
{
|
|
375
|
+
children,
|
|
376
|
+
...rest
|
|
377
|
+
} = props,
|
|
378
|
+
[height, setHeight] = React.useState(0);
|
|
379
|
+
return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.View, {
|
|
380
|
+
ref,
|
|
381
|
+
height: itemContext.open ? height : 0,
|
|
382
|
+
...rest,
|
|
383
|
+
children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.View, {
|
|
384
|
+
position: "absolute",
|
|
385
|
+
width: "100%",
|
|
386
|
+
onLayout: function (param) {
|
|
387
|
+
var {
|
|
388
|
+
nativeEvent
|
|
389
|
+
} = param;
|
|
390
|
+
nativeEvent.layout.height && setHeight(nativeEvent.layout.height);
|
|
391
|
+
},
|
|
392
|
+
children
|
|
393
|
+
})
|
|
394
|
+
});
|
|
295
395
|
});
|
|
296
|
-
});
|
|
297
396
|
function getState(open) {
|
|
298
397
|
return open ? "open" : "closed";
|
|
299
398
|
}
|
|
@@ -304,8 +403,4 @@ var Accordion = (0, import_helpers.withStaticProperties)(AccordionComponent, {
|
|
|
304
403
|
Item: AccordionItem,
|
|
305
404
|
HeightAnimator
|
|
306
405
|
});
|
|
307
|
-
|
|
308
|
-
0 && (module.exports = {
|
|
309
|
-
Accordion
|
|
310
|
-
});
|
|
311
|
-
//# sourceMappingURL=Accordion.js.map
|
|
406
|
+
//# sourceMappingURL=Accordion.native.js.map
|