feat(use-presence): allow use-presence to be driven by arbitrary data

packages/use-presence/src/index.ts

@@ -0,0 +1,5 @@
+import usePresence from './use-presence';
+
+export * from './use-presence-switch';
+
+export default usePresence;

packages/use-presence/src/use-presence-switch.tsx

@@ -0,0 +1,35 @@
+import {useState, useEffect} from 'react';
+import usePresence from './use-presence';
+
+export function usePresenceSwitch<ItemType>(
+  latestItem: ItemType,
+  opts: Parameters<typeof usePresence>[1]
+) {
+  const [item, setItem] = useState(latestItem);
+  const [shouldBeMounted, setShouldBeMounted] = useState(!isNil(item));
+  const {isMounted, ...otherStates} = usePresence(shouldBeMounted, opts);
+  useEffect(() => {
+    if (item !== latestItem) {
+      if (isMounted) {
+        setShouldBeMounted(false);
+      } else if (!isNil(latestItem)) {
+        setItem(latestItem);
+        setShouldBeMounted(true);
+      }
+    } else if (isNil(latestItem)) {
+      setShouldBeMounted(false);
+    } else if (!isNil(latestItem)) {
+      setShouldBeMounted(true);
+    }
+  }, [latestItem, item, shouldBeMounted, isMounted]);
+
+  return {
+    ...otherStates,
+    isMounted: isMounted && !isNil(item),
+    item
+  };
+}
+
+function isNil<ItemType>(value: ItemType) {
+  return value === null || value === undefined;
+}

packages/use-presence/test/use-presence-switch.test.tsx

@@ -0,0 +1,62 @@
+import {render, waitFor} from '@testing-library/react';
+import * as React from 'react';
+import {usePresenceSwitch} from '../src';
+
+function Expander({
+  initialEnter,
+  latestItem,
+  transitionDuration = 50
+}: {
+  initialEnter?: boolean;
+  latestItem: {text: string};
+  transitionDuration?: number;
+}) {
+  const {item, ...values} = usePresenceSwitch(latestItem, {
+    transitionDuration,
+    initialEnter
+  });
+  const {isAnimating, isMounted, isVisible} = values;
+  const testId =
+    Object.entries(values)
+      .filter(([, value]) => value)
+      .map(([key]) => key)
+      .join(', ') || 'none';
+
+  return (
+    <div data-testid={testId}>
+      {isMounted && (
+        <div
+          style={{
+            overflow: 'hidden',
+            maxHeight: 0,
+            transitionDuration: `${transitionDuration}ms`,
+            transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
+            transitionProperty: 'max-height, opacity',
+            opacity: 0,
+            ...(isVisible && {
+              maxHeight: 9999,
+              opacity: 1,
+              transitionTimingFunction: 'cubic-bezier(0.8, 0, 0.6, 1)'
+            }),
+            ...(isAnimating && {willChange: 'max-height, opacity'})
+          }}
+        >
+          {item.text}
+        </div>
+      )}
+    </div>
+  );
+}
+
+it("can animate the exit and re-entrance of a component that has changed it's rendered data", async () => {
+  const {getByTestId, getByText, rerender} = render(
+    <Expander latestItem={{text: 'initial value'}} />
+  );
+  getByTestId('isVisible, isMounted');
+  getByText('initial value');
+  rerender(<Expander latestItem={{text: 're-assigned value'}} />);
+  getByTestId('isAnimating, isExiting, isMounted');
+  getByText('initial value');
+  await waitFor(() => getByTestId('isVisible, isMounted'));
+  getByText('re-assigned value');
+});