@tamagui/accordion 2.7.7 → 3.0.0-beta.643.1

package/dist/cjs/Accordion.native.cjs

@@ -0,0 +1,440 @@
+"use strict";
+
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: () => from[key],
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Accordion_exports = {};
+__export(Accordion_exports, { Accordion: () => Accordion });
+module.exports = __toCommonJS(Accordion_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_core = require("@tamagui/core");
+var import_collapsible = require("@tamagui/collapsible");
+var import_collection = require("@tamagui/collection");
+var import_compose_refs = require("@tamagui/compose-refs");
+var import_constants = require("@tamagui/constants");
+var import_core2 = require("@tamagui/core");
+var import_helpers = require("@tamagui/helpers");
+var import_stacks = require("@tamagui/stacks");
+var import_text = require("@tamagui/text");
+var import_use_controllable_state = require("@tamagui/use-controllable-state");
+var import_use_direction = require("@tamagui/use-direction");
+var React = __toESM(require("react"), 1);
+var ACCORDION_NAME = "Accordion";
+var ACCORDION_KEYS = [
+	"Home",
+	"End",
+	"ArrowDown",
+	"ArrowUp",
+	"ArrowLeft",
+	"ArrowRight"
+];
+var [Collection, useCollection] = (0, import_collection.createCollection)(ACCORDION_NAME);
+var ACCORDION_CONTEXT = "Accordion";
+var AccordionComponent = (0, import_core.createRefComponent)(function(props, forwardedRef) {
+	var { type, ...accordionProps } = props;
+	var singleProps = accordionProps;
+	var multipleProps = accordionProps;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.Provider, {
+		scope: props.__scopeAccordion || ACCORDION_CONTEXT,
+		children: type === "multiple" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccordionImplMultiple, {
+			...multipleProps,
+			ref: forwardedRef
+		}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccordionImplSingle, {
+			...singleProps,
+			ref: forwardedRef
+		})
+	});
+});
+AccordionComponent.displayName = ACCORDION_NAME;
+AccordionComponent.propTypes = { type(props) {
+	var value = props.value || props.defaultValue;
+	if (props.type && !["single", "multiple"].includes(props.type)) {
+		return new Error("Invalid prop `type` supplied to `Accordion`. Expected one of `single | multiple`.");
+	}
+	if (props.type === "multiple" && typeof value === "string") {
+		return new Error("Invalid prop `type` supplied to `Accordion`. Expected `single` when `defaultValue` or `value` is type `string`.");
+	}
+	if (props.type === "single" && Array.isArray(value)) {
+		return new Error("Invalid prop `type` supplied to `Accordion`. Expected `multiple` when `defaultValue` or `value` is type `string[]`.");
+	}
+	return null;
+} };
+var { Provider: AccordionValueProvider, useStyledContext: useAccordionValueContext } = (0, import_core2.createStyledContext)();
+var { Provider: AccordionCollapsibleProvider, useStyledContext: useAccordionCollapsibleContext } = (0, import_core2.createStyledContext)();
+var AccordionImplSingle = (0, import_core.createRefComponent)(function(props, forwardedRef) {
+	var { value: valueProp, defaultValue, control, onValueChange = function() {}, collapsible = false, ...accordionSingleProps } = props;
+	var [value, setValue] = (0, import_use_controllable_state.useControllableState)({
+		prop: valueProp,
+		defaultProp: defaultValue || "",
+		onChange: onValueChange
+	});
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccordionValueProvider, {
+		scope: props.__scopeAccordion,
+		value: value ? [value] : [],
+		onItemOpen: setValue,
+		onItemClose: React.useCallback(function() {
+			return collapsible && setValue("");
+		}, [setValue, collapsible]),
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccordionCollapsibleProvider, {
+			scope: props.__scopeAccordion,
+			collapsible,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccordionImpl, {
+				...accordionSingleProps,
+				ref: forwardedRef
+			})
+		})
+	});
+});
+var AccordionImplMultiple = (0, import_core.createRefComponent)(function(props, forwardedRef) {
+	var { value: valueProp, defaultValue, onValueChange = function() {}, ...accordionMultipleProps } = props;
+	var [value, setValue] = (0, import_use_controllable_state.useControllableState)({
+		prop: valueProp,
+		defaultProp: defaultValue || [],
+		onChange: onValueChange
+	});
+	var handleItemOpen = React.useCallback(function(itemValue) {
+		return setValue(function() {
+			var prevValue = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];
+			return [...prevValue, itemValue];
+		});
+	}, [setValue]);
+	var handleItemClose = React.useCallback(function(itemValue) {
+		return setValue(function() {
+			var prevValue = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];
+			return prevValue.filter(function(value2) {
+				return value2 !== itemValue;
+			});
+		});
+	}, [setValue]);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccordionValueProvider, {
+		scope: props.__scopeAccordion,
+		value: value || [],
+		onItemOpen: handleItemOpen,
+		onItemClose: handleItemClose,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccordionCollapsibleProvider, {
+			scope: props.__scopeAccordion,
+			collapsible: true,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccordionImpl, {
+				...accordionMultipleProps,
+				ref: forwardedRef
+			})
+		})
+	});
+});
+var { Provider: AccordionImplProvider, useStyledContext: useAccordionContext } = (0, import_core2.createStyledContext)();
+var AccordionImpl = (0, import_core.createRefComponent)(function(props, forwardedRef) {
+	var { __scopeAccordion, disabled, dir, orientation = "vertical", ...accordionProps } = props;
+	var accordionRef = React.useRef(null);
+	var composedRef = (0, import_compose_refs.useComposedRefs)(accordionRef, forwardedRef);
+	var getItems = useCollection(__scopeAccordion || ACCORDION_CONTEXT);
+	var direction = (0, import_use_direction.useDirection)(dir);
+	var isDirectionLTR = direction === "ltr";
+	var handleKeyDown = (0, import_helpers.composeEventHandlers)(props.onKeyDown, function(event) {
+		var _triggerCollection_clampedIndex_ref_current;
+		if (!ACCORDION_KEYS.includes(event.key)) return;
+		var target = event.target;
+		var triggerCollection = getItems().filter(function(item) {
+			var el = item.ref.current;
+			return !(el === null || el === void 0 ? void 0 : el.disabled);
+		});
+		var triggerIndex = triggerCollection.findIndex(function(item) {
+			return item.ref.current === target;
+		});
+		var triggerCount = triggerCollection.length;
+		if (triggerIndex === -1) return;
+		event.preventDefault();
+		var nextIndex = triggerIndex;
+		var homeIndex = 0;
+		var endIndex = triggerCount - 1;
+		var moveNext = function() {
+			nextIndex = triggerIndex + 1;
+			if (nextIndex > endIndex) {
+				nextIndex = homeIndex;
+			}
+		};
+		var movePrev = function() {
+			nextIndex = triggerIndex - 1;
+			if (nextIndex < homeIndex) {
+				nextIndex = endIndex;
+			}
+		};
+		switch (event.key) {
+			case "Home":
+				nextIndex = homeIndex;
+				break;
+			case "End":
+				nextIndex = endIndex;
+				break;
+			case "ArrowRight":
+				if (orientation === "horizontal") {
+					if (isDirectionLTR) {
+						moveNext();
+					} else {
+						movePrev();
+					}
+				}
+				break;
+			case "ArrowDown":
+				if (orientation === "vertical") {
+					moveNext();
+				}
+				break;
+			case "ArrowLeft":
+				if (orientation === "horizontal") {
+					if (isDirectionLTR) {
+						movePrev();
+					} else {
+						moveNext();
+					}
+				}
+				break;
+			case "ArrowUp":
+				if (orientation === "vertical") {
+					movePrev();
+				}
+				break;
+		}
+		var clampedIndex = nextIndex % triggerCount;
+		(_triggerCollection_clampedIndex_ref_current = triggerCollection[clampedIndex].ref.current) === null || _triggerCollection_clampedIndex_ref_current === void 0 ? void 0 : _triggerCollection_clampedIndex_ref_current.focus();
+	});
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccordionImplProvider, {
+		scope: __scopeAccordion,
+		disabled,
+		direction: dir,
+		orientation,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.Slot, {
+			scope: __scopeAccordion || ACCORDION_CONTEXT,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stacks.YStack, {
+				"data-orientation": orientation,
+				ref: composedRef,
+				...accordionProps,
+				...import_constants.isWeb && { onKeyDown: handleKeyDown }
+			})
+		})
+	});
+});
+var ITEM_NAME = "AccordionItem";
+var { Provider: AccordionItemProvider, useStyledContext: useAccordionItemContext } = (0, import_core2.createStyledContext)();
+var AccordionItem = (0, import_core.createRefComponent)(function(props, forwardedRef) {
+	var { __scopeAccordion, value, ...accordionItemProps } = props;
+	var accordionContext = useAccordionContext(__scopeAccordion);
+	var valueContext = useAccordionValueContext(__scopeAccordion);
+	var triggerId = React.useId();
+	var open = value && valueContext.value.includes(value) || false;
+	var disabled = accordionContext.disabled || props.disabled;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccordionItemProvider, {
+		scope: __scopeAccordion,
+		open,
+		disabled,
+		triggerId,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_collapsible.Collapsible, {
+			"data-orientation": accordionContext.orientation,
+			"data-state": open ? "open" : "closed",
+			__scopeCollapsible: __scopeAccordion || ACCORDION_CONTEXT,
+			...accordionItemProps,
+			ref: forwardedRef,
+			disabled,
+			open,
+			onOpenChange: function(open2) {
+				if (open2) {
+					valueContext.onItemOpen(value);
+				} else {
+					valueContext.onItemClose(value);
+				}
+			}
+		})
+	});
+});
+AccordionItem.displayName = ITEM_NAME;
+var HEADER_NAME = "AccordionHeader";
+var AccordionHeader = (0, import_core.createRefComponent)(function(props, forwardedRef) {
+	var { __scopeAccordion, ...headerProps } = props;
+	var accordionContext = useAccordionContext(__scopeAccordion);
+	var itemContext = useAccordionItemContext(__scopeAccordion);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_text.H1, {
+		"data-orientation": accordionContext.orientation,
+		"data-state": getState(itemContext.open),
+		"data-disabled": itemContext.disabled ? "" : void 0,
+		...headerProps,
+		ref: forwardedRef
+	});
+});
+AccordionHeader.displayName = HEADER_NAME;
+var AccordionTriggerFrame = (0, import_core2.styled)(import_collapsible.Collapsible.Trigger, { displayName: "AccordionTrigger" });
+var AccordionTrigger = (0, import_core.createStyledHOC)(AccordionTriggerFrame, function AccordionTrigger2(props, forwardedRef) {
+	var { __scopeAccordion, ...triggerProps } = props;
+	var accordionContext = useAccordionContext(__scopeAccordion);
+	var itemContext = useAccordionItemContext(__scopeAccordion);
+	var collapsibleContext = useAccordionCollapsibleContext(__scopeAccordion);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.ItemSlot, {
+		scope: __scopeAccordion || ACCORDION_CONTEXT,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccordionTriggerFrame, {
+			__scopeCollapsible: __scopeAccordion || ACCORDION_CONTEXT,
+			"aria-disabled": itemContext.open && !collapsibleContext.collapsible || void 0,
+			"data-orientation": accordionContext.orientation,
+			id: itemContext.triggerId,
+			...triggerProps,
+			ref: forwardedRef
+		})
+	});
+});
+var AccordionContentFrame = (0, import_core2.styled)(import_collapsible.Collapsible.Content, { displayName: "AccordionContent" });
+var AccordionHeightAnimatorContext = /* @__PURE__ */ React.createContext(false);
+var AccordionContent = (0, import_core.createStyledHOC)(AccordionContentFrame, function AccordionContent2(props, forwardedRef) {
+	var { __scopeAccordion, forceMount, ...contentProps } = props;
+	var accordionContext = useAccordionContext(__scopeAccordion);
+	var itemContext = useAccordionItemContext(__scopeAccordion);
+	var heightAnimatorPresent = React.useContext(AccordionHeightAnimatorContext);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccordionContentFrame, {
+		role: "region",
+		"aria-labelledby": itemContext.triggerId,
+		"data-orientation": accordionContext.orientation,
+		__scopeCollapsible: __scopeAccordion || ACCORDION_CONTEXT,
+		...contentProps,
+		forceMount: forceMount || heightAnimatorPresent,
+		ref: forwardedRef
+	});
+});
+var HeightAnimator = (0, import_core.createStyledHOC)(import_core2.View, function(props, ref) {
+	var itemContext = useAccordionItemContext();
+	var { children, transition, ...rest } = props;
+	var open = !!itemContext.open;
+	var [fixed, setFixed] = React.useState(!open);
+	var [pinned, setPinned] = React.useState(false);
+	var [contentPresent, setContentPresent] = React.useState(open);
+	var [contentHeight, setContentHeight] = React.useState(0);
+	var outerRef = React.useRef(null);
+	var innerRef = React.useRef(null);
+	var composedRef = (0, import_compose_refs.useComposedRefs)(outerRef, ref);
+	var lastOuterHeightRef = React.useRef(0);
+	var pinnedHeightRef = React.useRef(0);
+	var settleTimerRef = React.useRef(void 0);
+	var prevOpenRef = React.useRef(open);
+	if (prevOpenRef.current !== open) {
+		prevOpenRef.current = open;
+		clearTimeout(settleTimerRef.current);
+		if (open) {
+			setContentPresent(true);
+		} else if (lastOuterHeightRef.current < 1) {
+			setContentPresent(false);
+		}
+		if (!fixed) {
+			pinnedHeightRef.current = lastOuterHeightRef.current;
+			setFixed(true);
+			setPinned(true);
+		}
+	}
+	(0, import_constants.useIsomorphicLayoutEffect)(function() {
+		if (!pinned) return;
+		if (import_constants.isWeb) {
+			var _outerRef_current;
+			void ((_outerRef_current = outerRef.current) === null || _outerRef_current === void 0 ? void 0 : _outerRef_current.offsetHeight);
+			setPinned(false);
+			return;
+		}
+		var frame = requestAnimationFrame(function() {
+			return setPinned(false);
+		});
+		return function() {
+			return cancelAnimationFrame(frame);
+		};
+	}, [pinned]);
+	React.useEffect(function() {
+		return function() {
+			return clearTimeout(settleTimerRef.current);
+		};
+	}, []);
+	(0, import_constants.useIsomorphicLayoutEffect)(function() {
+		var _el_getBoundingClientRect;
+		if (!fixed || !open) return;
+		var el = innerRef.current;
+		var naturalHeight = el === null || el === void 0 ? void 0 : (_el_getBoundingClientRect = el.getBoundingClientRect) === null || _el_getBoundingClientRect === void 0 ? void 0 : _el_getBoundingClientRect.call(el).height;
+		if (naturalHeight && naturalHeight > 0 && naturalHeight !== contentHeight) {
+			setContentHeight(naturalHeight);
+		}
+	});
+	var minHeight = pinned ? pinnedHeightRef.current : open ? contentHeight : 0;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core2.View, {
+		ref: composedRef,
+		position: "relative",
+		...rest,
+		transition: fixed ? transition : void 0,
+		height: "auto",
+		minHeight,
+		overflow: "hidden",
+		onLayout: function(param) {
+			var { nativeEvent } = param;
+			var outerHeight = nativeEvent.layout.height;
+			lastOuterHeightRef.current = outerHeight;
+			if (import_constants.isWeb && !open && contentPresent && outerHeight < 1) {
+				setContentPresent(false);
+			}
+			clearTimeout(settleTimerRef.current);
+			if (fixed && !pinned && open && contentHeight > 0) {
+				if (Math.abs(outerHeight - contentHeight) < 1) {
+					settleTimerRef.current = setTimeout(function() {
+						return setFixed(false);
+					}, 100);
+				}
+			}
+		},
+		onTransition: function(event) {
+			if (event.phase !== "end" || event.cause !== "update" || !event.finished) return;
+			if (!prevOpenRef.current && !pinned) {
+				setContentPresent(false);
+			}
+		},
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core2.View, {
+			ref: innerRef,
+			position: fixed ? "absolute" : "relative",
+			top: fixed ? 0 : void 0,
+			left: fixed ? 0 : void 0,
+			right: fixed ? 0 : void 0,
+			onLayout: function(param) {
+				var { nativeEvent } = param;
+				var naturalHeight = nativeEvent.layout.height;
+				if (open && naturalHeight !== contentHeight) {
+					setContentHeight(naturalHeight);
+				}
+			},
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccordionHeightAnimatorContext.Provider, {
+				value: contentPresent,
+				children
+			})
+		})
+	});
+});
+function getState(open) {
+	return open ? "open" : "closed";
+}
+var Accordion = (0, import_helpers.withStaticProperties)(AccordionComponent, {
+	Trigger: AccordionTrigger,
+	Header: AccordionHeader,
+	Content: AccordionContent,
+	Item: AccordionItem,
+	HeightAnimator
+});