successfully used CSSTransitionGroup to trigger state changes - can n…

…ow use FocusTrap to wrap the elements in focus, although they will need a semantic group name now
theericzhang · Jan 30, 2023 · 079bc53 · 079bc53
1 parent 6c193b7
commit 079bc53
Showing 1 changed file with 4 additions and 3 deletions.
diff --git a/components/CartSheet/CartSheet.tsx b/components/CartSheet/CartSheet.tsx
@@ -11,10 +11,10 @@ import CartSheetBackground from './CartSheetBackground';
 const CartSheetWrapper = styled.aside<ICartSheetWrapper>`
     display: flex;
     position: fixed;
-    // width of the wrapper + box shadow = 340px + 24px
-    right: ${(props) => (props.isOpenFromCartSheet ? '0px' : '-370px')};
+    // width of the wrapper + box shadow = 340px + 24px ≈ 370px
+    right: ${(props) => (props.state === 'entered' ? '0px' : '-370px')};
     top: 0px;
-    pointer-events: ${(props) => (props.isOpenFromCartSheet ? 'all' : 'none')};
+    pointer-events: ${(props) => (props.state === 'entered' ? 'all' : 'none')};
     z-index: 4;
     background-color: var(--primary-white);
     height: 100%;
@@ -96,6 +96,7 @@ export default function CartSheet({ isStoreCartSheet }: TCartSheet) {
                             isOpenFromCartSheet={!!isOpenFromCartSheet}
                             isStoreCartSheet={!!isStoreCartSheet}
                             aria-hidden={!isOpenFromCartSheet}
+                            ref={nodeRef}
                         >
                             <CartOverview isInCartSheet>
                                 <CartSheetButtonClose