Merge pull request #66 from absurdprofit/development

Refactor shared element layer to stack elements. Ignoring element box semantics.
absurdprofit · Sep 7, 2024 · 690a94c · 690a94c
2 parents f913e1c + 8459f96
commit 690a94c
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/packages/core/src/SharedElementTransitionLayer.tsx b/packages/core/src/SharedElementTransitionLayer.tsx
@@ -194,19 +194,21 @@ export class SharedElementTransitionLayer extends Component<SharedElementTransit
             const endClone = end.clone();
             const startClone = start.clone();
             if (!startClone || !endClone) continue;
-            const styleList = Array.from(new Set([...start.styles, ...end.styles, 'width' as const, 'height' as const]));
+            const styleList = Array.from(new Set([...start.styles, ...end.styles, 'width', 'height']));
             if (end.transitionType !== "morph") {
                 startClone.id = `${id}-start`;
                 startClone.style.position = "absolute";
+                startClone.style.gridArea = "1 / 1";
                 this.copyStyles(start.ref.current?.firstElementChild, startClone, styleList);
                 this.copyStyles(end.ref.current?.firstElementChild, endClone, styleList);
                 this.ref.current?.prepend(startClone);
-            } else if (isStylableElement(start.ref.current?.firstElementChild)) {
-                this.copyStyles(start.ref.current.firstElementChild, endClone, styleList);
+            } else {
+                this.copyStyles(start.ref.current?.firstElementChild, endClone, styleList);
             }
 
             endClone.id = `${id}${end.transitionType === "morph" ? '' : '-end'}`;
             endClone.style.position = "absolute";
+            endClone.style.gridArea = "1 / 1";
             this.ref.current?.prepend(endClone);
             start.hide();
             end.hide();
@@ -242,7 +244,8 @@ export class SharedElementTransitionLayer extends Component<SharedElementTransit
                 padding: 0,
                 border: 'none',
                 backgroundColor: 'transparent',
-                isolation: 'isolate'
+                isolation: 'isolate',
+                display: "grid"
             }}>
                 <style>{".shared-element-layer::backdrop {display: none}"}</style>
             </dialog>

diff --git a/packages/stack/src/Anchor.tsx b/packages/stack/src/Anchor.tsx
@@ -7,7 +7,7 @@ import { searchParamsFromObject } from "./common/utils";
 
 interface BaseAnchorProps extends React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> {
     onClick?: React.MouseEventHandler<HTMLAnchorElement>;
-    navigation?: Navigation;
+    navigation?: Navigation | null;
 }
 
 interface ForwardAnchorProps extends BaseAnchorProps {
@@ -23,7 +23,7 @@ interface BackAnchorProps extends BaseAnchorProps {
 
 type AnchorProps = XOR<ForwardAnchorProps, BackAnchorProps>;
 
-function useNavigationOrDefault(navigation?: Navigation) {
+function useNavigationOrDefault(navigation?: Navigation | null) {
     const defaultNavigation = useNavigation();
     return navigation ?? defaultNavigation;
 }