@tamagui/accordion 2.7.7 → 3.0.0-beta.643.1

package/dist/esm/Accordion.mjs

@@ -1,8 +1,8 @@
+import { View, createRefComponent, createStyledContext, createStyledHOC, styled } from "@tamagui/core";
 import { Collapsible } from "@tamagui/collapsible";
 import { createCollection } from "@tamagui/collection";
 import { useComposedRefs } from "@tamagui/compose-refs";
 import { isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
-import { View, createStyledContext, styled } from "@tamagui/core";
 import { composeEventHandlers, withStaticProperties } from "@tamagui/helpers";
 import { YStack } from "@tamagui/stacks";
 import { H1 } from "@tamagui/text";
@@ -10,454 +10,371 @@ import { useControllableState } from "@tamagui/use-controllable-state";
 import { useDirection } from "@tamagui/use-direction";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
+
 const ACCORDION_NAME = "Accordion";
-const ACCORDION_KEYS = ["Home", "End", "ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"];
+const ACCORDION_KEYS = [
+	"Home",
+	"End",
+	"ArrowDown",
+	"ArrowUp",
+	"ArrowLeft",
+	"ArrowRight"
+];
 const [Collection, useCollection] = createCollection(ACCORDION_NAME);
 const ACCORDION_CONTEXT = "Accordion";
-const AccordionComponent = React.forwardRef((props, forwardedRef) => {
-  const {
-    type,
-    ...accordionProps
-  } = props;
-  const singleProps = accordionProps;
-  const multipleProps = accordionProps;
-  return /* @__PURE__ */jsx(Collection.Provider, {
-    scope: props.__scopeAccordion || ACCORDION_CONTEXT,
-    children: type === "multiple" ? /* @__PURE__ */jsx(AccordionImplMultiple, {
-      ...multipleProps,
-      ref: forwardedRef
-    }) : /* @__PURE__ */jsx(AccordionImplSingle, {
-      ...singleProps,
-      ref: forwardedRef
-    })
-  });
+const AccordionComponent = createRefComponent((props, forwardedRef) => {
+	const { type, ...accordionProps } = props;
+	const singleProps = accordionProps;
+	const multipleProps = accordionProps;
+	return /* @__PURE__ */ jsx(Collection.Provider, {
+		scope: props.__scopeAccordion || ACCORDION_CONTEXT,
+		children: type === "multiple" ? /* @__PURE__ */ jsx(AccordionImplMultiple, {
+			...multipleProps,
+			ref: forwardedRef
+		}) : /* @__PURE__ */ jsx(AccordionImplSingle, {
+			...singleProps,
+			ref: forwardedRef
+		})
+	});
 });
 AccordionComponent.displayName = ACCORDION_NAME;
-AccordionComponent.propTypes = {
-  type(props) {
-    const 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;
-  }
-};
-const {
-  Provider: AccordionValueProvider,
-  useStyledContext: useAccordionValueContext
-} = createStyledContext();
-const {
-  Provider: AccordionCollapsibleProvider,
-  useStyledContext: useAccordionCollapsibleContext
-} = createStyledContext();
-const AccordionImplSingle = React.forwardRef((props, forwardedRef) => {
-  const {
-    value: valueProp,
-    defaultValue,
-    control,
-    onValueChange = () => {},
-    collapsible = false,
-    ...accordionSingleProps
-  } = props;
-  const [value, setValue] = useControllableState({
-    prop: valueProp,
-    defaultProp: defaultValue || "",
-    onChange: onValueChange
-  });
-  return /* @__PURE__ */jsx(AccordionValueProvider, {
-    scope: props.__scopeAccordion,
-    value: value ? [value] : [],
-    onItemOpen: setValue,
-    onItemClose: React.useCallback(() => collapsible && setValue(""), [setValue, collapsible]),
-    children: /* @__PURE__ */jsx(AccordionCollapsibleProvider, {
-      scope: props.__scopeAccordion,
-      collapsible,
-      children: /* @__PURE__ */jsx(AccordionImpl, {
-        ...accordionSingleProps,
-        ref: forwardedRef
-      })
-    })
-  });
+AccordionComponent.propTypes = { type(props) {
+	const 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;
+} };
+const { Provider: AccordionValueProvider, useStyledContext: useAccordionValueContext } = createStyledContext();
+const { Provider: AccordionCollapsibleProvider, useStyledContext: useAccordionCollapsibleContext } = createStyledContext();
+const AccordionImplSingle = createRefComponent((props, forwardedRef) => {
+	const { value: valueProp, defaultValue, control, onValueChange = () => {}, collapsible = false, ...accordionSingleProps } = props;
+	const [value, setValue] = useControllableState({
+		prop: valueProp,
+		defaultProp: defaultValue || "",
+		onChange: onValueChange
+	});
+	return /* @__PURE__ */ jsx(AccordionValueProvider, {
+		scope: props.__scopeAccordion,
+		value: value ? [value] : [],
+		onItemOpen: setValue,
+		onItemClose: React.useCallback(() => collapsible && setValue(""), [setValue, collapsible]),
+		children: /* @__PURE__ */ jsx(AccordionCollapsibleProvider, {
+			scope: props.__scopeAccordion,
+			collapsible,
+			children: /* @__PURE__ */ jsx(AccordionImpl, {
+				...accordionSingleProps,
+				ref: forwardedRef
+			})
+		})
+	});
 });
-const AccordionImplMultiple = React.forwardRef((props, forwardedRef) => {
-  const {
-    value: valueProp,
-    defaultValue,
-    onValueChange = () => {},
-    ...accordionMultipleProps
-  } = props;
-  const [value, setValue] = useControllableState({
-    prop: valueProp,
-    defaultProp: defaultValue || [],
-    onChange: onValueChange
-  });
-  const handleItemOpen = React.useCallback(itemValue => setValue((prevValue = []) => [...prevValue, itemValue]), [setValue]);
-  const handleItemClose = React.useCallback(itemValue => setValue((prevValue = []) => prevValue.filter(value2 => value2 !== itemValue)), [setValue]);
-  return /* @__PURE__ */jsx(AccordionValueProvider, {
-    scope: props.__scopeAccordion,
-    value: value || [],
-    onItemOpen: handleItemOpen,
-    onItemClose: handleItemClose,
-    children: /* @__PURE__ */jsx(AccordionCollapsibleProvider, {
-      scope: props.__scopeAccordion,
-      collapsible: true,
-      children: /* @__PURE__ */jsx(AccordionImpl, {
-        ...accordionMultipleProps,
-        ref: forwardedRef
-      })
-    })
-  });
+const AccordionImplMultiple = createRefComponent((props, forwardedRef) => {
+	const { value: valueProp, defaultValue, onValueChange = () => {}, ...accordionMultipleProps } = props;
+	const [value, setValue] = useControllableState({
+		prop: valueProp,
+		defaultProp: defaultValue || [],
+		onChange: onValueChange
+	});
+	const handleItemOpen = React.useCallback((itemValue) => setValue((prevValue = []) => [...prevValue, itemValue]), [setValue]);
+	const handleItemClose = React.useCallback((itemValue) => setValue((prevValue = []) => prevValue.filter((value2) => value2 !== itemValue)), [setValue]);
+	return /* @__PURE__ */ jsx(AccordionValueProvider, {
+		scope: props.__scopeAccordion,
+		value: value || [],
+		onItemOpen: handleItemOpen,
+		onItemClose: handleItemClose,
+		children: /* @__PURE__ */ jsx(AccordionCollapsibleProvider, {
+			scope: props.__scopeAccordion,
+			collapsible: true,
+			children: /* @__PURE__ */ jsx(AccordionImpl, {
+				...accordionMultipleProps,
+				ref: forwardedRef
+			})
+		})
+	});
 });
-const {
-  Provider: AccordionImplProvider,
-  useStyledContext: useAccordionContext
-} = createStyledContext();
-const AccordionImpl = React.forwardRef((props, forwardedRef) => {
-  const {
-    __scopeAccordion,
-    disabled,
-    dir,
-    orientation = "vertical",
-    ...accordionProps
-  } = props;
-  const accordionRef = React.useRef(null);
-  const composedRef = useComposedRefs(accordionRef, forwardedRef);
-  const getItems = useCollection(__scopeAccordion || ACCORDION_CONTEXT);
-  const direction = useDirection(dir);
-  const isDirectionLTR = direction === "ltr";
-  const handleKeyDown = composeEventHandlers(props.onKeyDown, event => {
-    if (!ACCORDION_KEYS.includes(event.key)) return;
-    const target = event.target;
-    const triggerCollection = getItems().filter(item => {
-      const el = item.ref.current;
-      return !el?.disabled;
-    });
-    const triggerIndex = triggerCollection.findIndex(item => item.ref.current === target);
-    const triggerCount = triggerCollection.length;
-    if (triggerIndex === -1) return;
-    event.preventDefault();
-    let nextIndex = triggerIndex;
-    const homeIndex = 0;
-    const endIndex = triggerCount - 1;
-    const moveNext = () => {
-      nextIndex = triggerIndex + 1;
-      if (nextIndex > endIndex) {
-        nextIndex = homeIndex;
-      }
-    };
-    const movePrev = () => {
-      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;
-    }
-    const clampedIndex = nextIndex % triggerCount;
-    triggerCollection[clampedIndex].ref.current?.focus();
-  });
-  return /* @__PURE__ */jsx(AccordionImplProvider, {
-    scope: __scopeAccordion,
-    disabled,
-    direction: dir,
-    orientation,
-    children: /* @__PURE__ */jsx(Collection.Slot, {
-      scope: __scopeAccordion || ACCORDION_CONTEXT,
-      children: /* @__PURE__ */jsx(YStack, {
-        "data-orientation": orientation,
-        ref: composedRef,
-        ...accordionProps,
-        ...(isWeb && {
-          onKeyDown: handleKeyDown
-        })
-      })
-    })
-  });
+const { Provider: AccordionImplProvider, useStyledContext: useAccordionContext } = createStyledContext();
+const AccordionImpl = createRefComponent((props, forwardedRef) => {
+	const { __scopeAccordion, disabled, dir, orientation = "vertical", ...accordionProps } = props;
+	const accordionRef = React.useRef(null);
+	const composedRef = useComposedRefs(accordionRef, forwardedRef);
+	const getItems = useCollection(__scopeAccordion || ACCORDION_CONTEXT);
+	const direction = useDirection(dir);
+	const isDirectionLTR = direction === "ltr";
+	const handleKeyDown = composeEventHandlers(props.onKeyDown, (event) => {
+		if (!ACCORDION_KEYS.includes(event.key)) return;
+		const target = event.target;
+		const triggerCollection = getItems().filter((item) => {
+			const el = item.ref.current;
+			return !el?.disabled;
+		});
+		const triggerIndex = triggerCollection.findIndex((item) => item.ref.current === target);
+		const triggerCount = triggerCollection.length;
+		if (triggerIndex === -1) return;
+		event.preventDefault();
+		let nextIndex = triggerIndex;
+		const homeIndex = 0;
+		const endIndex = triggerCount - 1;
+		const moveNext = () => {
+			nextIndex = triggerIndex + 1;
+			if (nextIndex > endIndex) {
+				nextIndex = homeIndex;
+			}
+		};
+		const movePrev = () => {
+			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;
+		}
+		const clampedIndex = nextIndex % triggerCount;
+		triggerCollection[clampedIndex].ref.current?.focus();
+	});
+	return /* @__PURE__ */ jsx(AccordionImplProvider, {
+		scope: __scopeAccordion,
+		disabled,
+		direction: dir,
+		orientation,
+		children: /* @__PURE__ */ jsx(Collection.Slot, {
+			scope: __scopeAccordion || ACCORDION_CONTEXT,
+			children: /* @__PURE__ */ jsx(YStack, {
+				"data-orientation": orientation,
+				ref: composedRef,
+				...accordionProps,
+				...isWeb && { onKeyDown: handleKeyDown }
+			})
+		})
+	});
 });
 const ITEM_NAME = "AccordionItem";
-const {
-  Provider: AccordionItemProvider,
-  useStyledContext: useAccordionItemContext
-} = createStyledContext();
-const AccordionItem = React.forwardRef((props, forwardedRef) => {
-  const {
-    __scopeAccordion,
-    value,
-    ...accordionItemProps
-  } = props;
-  const accordionContext = useAccordionContext(__scopeAccordion);
-  const valueContext = useAccordionValueContext(__scopeAccordion);
-  const triggerId = React.useId();
-  const open = value && valueContext.value.includes(value) || false;
-  const disabled = accordionContext.disabled || props.disabled;
-  return /* @__PURE__ */jsx(AccordionItemProvider, {
-    scope: __scopeAccordion,
-    open,
-    disabled,
-    triggerId,
-    children: /* @__PURE__ */jsx(Collapsible, {
-      "data-orientation": accordionContext.orientation,
-      "data-state": open ? "open" : "closed",
-      __scopeCollapsible: __scopeAccordion || ACCORDION_CONTEXT,
-      ...accordionItemProps,
-      ref: forwardedRef,
-      disabled,
-      open,
-      onOpenChange: open2 => {
-        if (open2) {
-          valueContext.onItemOpen(value);
-        } else {
-          valueContext.onItemClose(value);
-        }
-      }
-    })
-  });
+const { Provider: AccordionItemProvider, useStyledContext: useAccordionItemContext } = createStyledContext();
+const AccordionItem = createRefComponent((props, forwardedRef) => {
+	const { __scopeAccordion, value, ...accordionItemProps } = props;
+	const accordionContext = useAccordionContext(__scopeAccordion);
+	const valueContext = useAccordionValueContext(__scopeAccordion);
+	const triggerId = React.useId();
+	const open = value && valueContext.value.includes(value) || false;
+	const disabled = accordionContext.disabled || props.disabled;
+	return /* @__PURE__ */ jsx(AccordionItemProvider, {
+		scope: __scopeAccordion,
+		open,
+		disabled,
+		triggerId,
+		children: /* @__PURE__ */ jsx(Collapsible, {
+			"data-orientation": accordionContext.orientation,
+			"data-state": open ? "open" : "closed",
+			__scopeCollapsible: __scopeAccordion || ACCORDION_CONTEXT,
+			...accordionItemProps,
+			ref: forwardedRef,
+			disabled,
+			open,
+			onOpenChange: (open2) => {
+				if (open2) {
+					valueContext.onItemOpen(value);
+				} else {
+					valueContext.onItemClose(value);
+				}
+			}
+		})
+	});
 });
 AccordionItem.displayName = ITEM_NAME;
 const HEADER_NAME = "AccordionHeader";
-const AccordionHeader = React.forwardRef((props, forwardedRef) => {
-  const {
-    __scopeAccordion,
-    ...headerProps
-  } = props;
-  const accordionContext = useAccordionContext(__scopeAccordion);
-  const itemContext = useAccordionItemContext(__scopeAccordion);
-  return /* @__PURE__ */jsx(H1, {
-    "data-orientation": accordionContext.orientation,
-    "data-state": getState(itemContext.open),
-    "data-disabled": itemContext.disabled ? "" : void 0,
-    ...headerProps,
-    ref: forwardedRef
-  });
+const AccordionHeader = createRefComponent((props, forwardedRef) => {
+	const { __scopeAccordion, ...headerProps } = props;
+	const accordionContext = useAccordionContext(__scopeAccordion);
+	const itemContext = useAccordionItemContext(__scopeAccordion);
+	return /* @__PURE__ */ jsx(H1, {
+		"data-orientation": accordionContext.orientation,
+		"data-state": getState(itemContext.open),
+		"data-disabled": itemContext.disabled ? "" : void 0,
+		...headerProps,
+		ref: forwardedRef
+	});
 });
 AccordionHeader.displayName = HEADER_NAME;
-const AccordionTriggerFrame = styled(Collapsible.Trigger, {
-  variants: {
-    unstyled: {
-      false: {
-        cursor: "pointer",
-        backgroundColor: "$background",
-        padding: "$true",
-        hoverStyle: {
-          backgroundColor: "$backgroundHover"
-        },
-        focusStyle: {
-          backgroundColor: "$backgroundFocus"
-        },
-        pressStyle: {
-          backgroundColor: "$backgroundPress"
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1"
-  }
-});
-const AccordionTrigger = AccordionTriggerFrame.styleable(function AccordionTrigger2(props, forwardedRef) {
-  const {
-    __scopeAccordion,
-    ...triggerProps
-  } = props;
-  const accordionContext = useAccordionContext(__scopeAccordion);
-  const itemContext = useAccordionItemContext(__scopeAccordion);
-  const collapsibleContext = useAccordionCollapsibleContext(__scopeAccordion);
-  return /* @__PURE__ */jsx(Collection.ItemSlot, {
-    scope: __scopeAccordion || ACCORDION_CONTEXT,
-    children: /* @__PURE__ */jsx(AccordionTriggerFrame, {
-      __scopeCollapsible: __scopeAccordion || ACCORDION_CONTEXT,
-      "aria-disabled": itemContext.open && !collapsibleContext.collapsible || void 0,
-      "data-orientation": accordionContext.orientation,
-      id: itemContext.triggerId,
-      ...triggerProps,
-      ref: forwardedRef
-    })
-  });
-});
-const AccordionContentFrame = styled(Collapsible.Content, {
-  variants: {
-    unstyled: {
-      false: {
-        padding: "$true",
-        backgroundColor: "$background"
-      }
-    }
-  },
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1"
-  }
+const AccordionTriggerFrame = styled(Collapsible.Trigger, { displayName: "AccordionTrigger" });
+const AccordionTrigger = createStyledHOC(AccordionTriggerFrame, function AccordionTrigger2(props, forwardedRef) {
+	const { __scopeAccordion, ...triggerProps } = props;
+	const accordionContext = useAccordionContext(__scopeAccordion);
+	const itemContext = useAccordionItemContext(__scopeAccordion);
+	const collapsibleContext = useAccordionCollapsibleContext(__scopeAccordion);
+	return /* @__PURE__ */ jsx(Collection.ItemSlot, {
+		scope: __scopeAccordion || ACCORDION_CONTEXT,
+		children: /* @__PURE__ */ jsx(AccordionTriggerFrame, {
+			__scopeCollapsible: __scopeAccordion || ACCORDION_CONTEXT,
+			"aria-disabled": itemContext.open && !collapsibleContext.collapsible || void 0,
+			"data-orientation": accordionContext.orientation,
+			id: itemContext.triggerId,
+			...triggerProps,
+			ref: forwardedRef
+		})
+	});
 });
+const AccordionContentFrame = styled(Collapsible.Content, { displayName: "AccordionContent" });
 const AccordionHeightAnimatorContext = React.createContext(false);
-const AccordionContent = AccordionContentFrame.styleable(function AccordionContent2(props, forwardedRef) {
-  const {
-    __scopeAccordion,
-    forceMount,
-    ...contentProps
-  } = props;
-  const accordionContext = useAccordionContext(__scopeAccordion);
-  const itemContext = useAccordionItemContext(__scopeAccordion);
-  const heightAnimatorPresent = React.useContext(AccordionHeightAnimatorContext);
-  return /* @__PURE__ */jsx(AccordionContentFrame, {
-    role: "region",
-    "aria-labelledby": itemContext.triggerId,
-    "data-orientation": accordionContext.orientation,
-    __scopeCollapsible: __scopeAccordion || ACCORDION_CONTEXT,
-    ...contentProps,
-    forceMount: forceMount || heightAnimatorPresent,
-    ref: forwardedRef
-  });
+const AccordionContent = createStyledHOC(AccordionContentFrame, function AccordionContent2(props, forwardedRef) {
+	const { __scopeAccordion, forceMount, ...contentProps } = props;
+	const accordionContext = useAccordionContext(__scopeAccordion);
+	const itemContext = useAccordionItemContext(__scopeAccordion);
+	const heightAnimatorPresent = React.useContext(AccordionHeightAnimatorContext);
+	return /* @__PURE__ */ jsx(AccordionContentFrame, {
+		role: "region",
+		"aria-labelledby": itemContext.triggerId,
+		"data-orientation": accordionContext.orientation,
+		__scopeCollapsible: __scopeAccordion || ACCORDION_CONTEXT,
+		...contentProps,
+		forceMount: forceMount || heightAnimatorPresent,
+		ref: forwardedRef
+	});
 });
-const HeightAnimator = View.styleable((props, ref) => {
-  const itemContext = useAccordionItemContext();
-  const {
-    children,
-    transition,
-    ...rest
-  } = props;
-  const open = !!itemContext.open;
-  const [fixed, setFixed] = React.useState(!open);
-  const [pinned, setPinned] = React.useState(false);
-  const [contentPresent, setContentPresent] = React.useState(open);
-  const [contentHeight, setContentHeight] = React.useState(0);
-  const outerRef = React.useRef(null);
-  const innerRef = React.useRef(null);
-  const composedRef = useComposedRefs(outerRef, ref);
-  const lastOuterHeightRef = React.useRef(0);
-  const pinnedHeightRef = React.useRef(0);
-  const settleTimerRef = React.useRef(void 0);
-  const 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);
-    }
-  }
-  useIsomorphicLayoutEffect(() => {
-    if (!pinned) return;
-    if (isWeb) {
-      void outerRef.current?.offsetHeight;
-      setPinned(false);
-      return;
-    }
-    const frame = requestAnimationFrame(() => setPinned(false));
-    return () => cancelAnimationFrame(frame);
-  }, [pinned]);
-  React.useEffect(() => () => clearTimeout(settleTimerRef.current), []);
-  useIsomorphicLayoutEffect(() => {
-    if (!fixed || !open) return;
-    const el = innerRef.current;
-    const naturalHeight = el?.getBoundingClientRect?.().height;
-    if (naturalHeight && naturalHeight > 0 && naturalHeight !== contentHeight) {
-      setContentHeight(naturalHeight);
-    }
-  });
-  const minHeight = pinned ? pinnedHeightRef.current : open ? contentHeight : 0;
-  return /* @__PURE__ */jsx(View, {
-    ref: composedRef,
-    position: "relative",
-    ...rest,
-    transition: fixed ? transition : void 0,
-    height: "auto",
-    minHeight,
-    overflow: "hidden",
-    onLayout: ({
-      nativeEvent
-    }) => {
-      const outerHeight = nativeEvent.layout.height;
-      lastOuterHeightRef.current = outerHeight;
-      if (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(() => setFixed(false), 100);
-        }
-      }
-    },
-    onDidAnimate: () => {
-      if (!prevOpenRef.current && !pinned) {
-        setContentPresent(false);
-      }
-    },
-    children: /* @__PURE__ */jsx(View, {
-      ref: innerRef,
-      position: fixed ? "absolute" : "relative",
-      top: fixed ? 0 : void 0,
-      left: fixed ? 0 : void 0,
-      right: fixed ? 0 : void 0,
-      onLayout: ({
-        nativeEvent
-      }) => {
-        const naturalHeight = nativeEvent.layout.height;
-        if (open && naturalHeight !== contentHeight) {
-          setContentHeight(naturalHeight);
-        }
-      },
-      children: /* @__PURE__ */jsx(AccordionHeightAnimatorContext.Provider, {
-        value: contentPresent,
-        children
-      })
-    })
-  });
+const HeightAnimator = createStyledHOC(View, (props, ref) => {
+	const itemContext = useAccordionItemContext();
+	const { children, transition, ...rest } = props;
+	const open = !!itemContext.open;
+	const [fixed, setFixed] = React.useState(!open);
+	const [pinned, setPinned] = React.useState(false);
+	const [contentPresent, setContentPresent] = React.useState(open);
+	const [contentHeight, setContentHeight] = React.useState(0);
+	const outerRef = React.useRef(null);
+	const innerRef = React.useRef(null);
+	const composedRef = useComposedRefs(outerRef, ref);
+	const lastOuterHeightRef = React.useRef(0);
+	const pinnedHeightRef = React.useRef(0);
+	const settleTimerRef = React.useRef(void 0);
+	const 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);
+		}
+	}
+	useIsomorphicLayoutEffect(() => {
+		if (!pinned) return;
+		if (isWeb) {
+			void outerRef.current?.offsetHeight;
+			setPinned(false);
+			return;
+		}
+		const frame = requestAnimationFrame(() => setPinned(false));
+		return () => cancelAnimationFrame(frame);
+	}, [pinned]);
+	React.useEffect(() => () => clearTimeout(settleTimerRef.current), []);
+	useIsomorphicLayoutEffect(() => {
+		if (!fixed || !open) return;
+		const el = innerRef.current;
+		const naturalHeight = el?.getBoundingClientRect?.().height;
+		if (naturalHeight && naturalHeight > 0 && naturalHeight !== contentHeight) {
+			setContentHeight(naturalHeight);
+		}
+	});
+	const minHeight = pinned ? pinnedHeightRef.current : open ? contentHeight : 0;
+	return /* @__PURE__ */ jsx(View, {
+		ref: composedRef,
+		position: "relative",
+		...rest,
+		transition: fixed ? transition : void 0,
+		height: "auto",
+		minHeight,
+		overflow: "hidden",
+		onLayout: ({ nativeEvent }) => {
+			const outerHeight = nativeEvent.layout.height;
+			lastOuterHeightRef.current = outerHeight;
+			if (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(() => setFixed(false), 100);
+				}
+			}
+		},
+		onTransition: (event) => {
+			if (event.phase !== "end" || event.cause !== "update" || !event.finished) return;
+			if (!prevOpenRef.current && !pinned) {
+				setContentPresent(false);
+			}
+		},
+		children: /* @__PURE__ */ jsx(View, {
+			ref: innerRef,
+			position: fixed ? "absolute" : "relative",
+			top: fixed ? 0 : void 0,
+			left: fixed ? 0 : void 0,
+			right: fixed ? 0 : void 0,
+			onLayout: ({ nativeEvent }) => {
+				const naturalHeight = nativeEvent.layout.height;
+				if (open && naturalHeight !== contentHeight) {
+					setContentHeight(naturalHeight);
+				}
+			},
+			children: /* @__PURE__ */ jsx(AccordionHeightAnimatorContext.Provider, {
+				value: contentPresent,
+				children
+			})
+		})
+	});
 });
 function getState(open) {
-  return open ? "open" : "closed";
+	return open ? "open" : "closed";
 }
 const Accordion = withStaticProperties(AccordionComponent, {
-  Trigger: AccordionTrigger,
-  Header: AccordionHeader,
-  Content: AccordionContent,
-  Item: AccordionItem,
-  HeightAnimator
+	Trigger: AccordionTrigger,
+	Header: AccordionHeader,
+	Content: AccordionContent,
+	Item: AccordionItem,
+	HeightAnimator
 });
+
 export { Accordion };
 //# sourceMappingURL=Accordion.mjs.map