Task/htl 112172 additional drawer work (#1539)

* task(HTL-112172): Remove max height constraint

* Rush change

* task(HTL-112172): Fix unit tests

* task(HTL-112172): Small fix to initial snap height

* task(HTL-112171): Update unit test and comment

* task(HTL-112172): Modify the comments a bit

* task(HTL-112172): Remove unnecessary comments

* task(HTL-112172): Additional drawer work

* task(HTL-112172): Removed curly brace warnings

common/changes/pcln-design-system/task-htl-112172-additional-drawer-work_2024-12-17-15-22.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "pcln-design-system",
+      "comment": "Add prop to disable max height, add z-index to outer container, add error handling to snap hook",
+      "type": "patch"
+    }
+  ],
+  "packageName": "pcln-design-system"
+}

packages/core/src/Drawer/Drawer.stories.tsx

@@ -214,6 +214,12 @@ export const WithContentOverflow = (args) => (
   </DrawerStory>
 )
 
+export const CustomMaxHeight = (args) => (
+  <DrawerStory {...args} height='800px' maxHeight='100px' isMobile isFloating={false}>
+    {CustomPennyContent}
+  </DrawerStory>
+)
+
 /**
  * Use case for Snap behavior
  */
@@ -236,12 +242,13 @@ function DrawerScrollable(props) {
 
 export const DrawerDragToSnap = () => (
   <DrawerScrollable
-    snapHeights={['0%', '-30%', '-70%']}
-    snapDimensions={{ width: '100%', height: '800px' }}
+    snapHeights={['20%', '0%', '-20%']}
+    snapDimensions={{ width: '100%', height: '400px' }}
     disableEnterAnimation
     isMobile
     isFloating={false}
     heading={NeighborhoodsHeader}
+    height='400px'
   >
     {CustomPennyContent}
   </DrawerScrollable>

packages/core/src/Drawer/Drawer.tsx

@@ -27,8 +27,9 @@ export type DrawerProps = SpaceProps &
     onCollapse?: () => void
     placement?: PlacementOptions
     position?: string
+    zIndex?: number
 
-    // top, middle, bottom - 3 snap points required
+    // top, middle (initial position), bottom snap points relative to viewport
     snapHeights?: [string, string, string]
 
     // When snap enabled, lock-in drawer dimensions
@@ -38,7 +39,7 @@ export type DrawerProps = SpaceProps &
     }
 
     // Disable enter animation to eliminate side effects on viewport change
-    disableEnterAnimation?: false
+    disableEnterAnimation?: boolean
   }
 
 export const Drawer: React.FC<DrawerProps> = ({
@@ -53,13 +54,14 @@ export const Drawer: React.FC<DrawerProps> = ({
   onClose,
   onCollapse,
   placement = 'right',
+  zIndex = 1,
   snapHeights,
   snapDimensions,
   disableEnterAnimation,
   ...props
 }) => {
   const { boxShadow, onScrollHandler } = useScrollWithShadow()
-  const { snapPosition, handleSnap } = useSnap(snapHeights)
+  const { snapPosition, handleSnap } = useSnap(snapHeights, snapDimensions)
   const SnapContainer = snapHeights ? motion.div : 'div'
 
   return (
@@ -72,21 +74,29 @@ export const Drawer: React.FC<DrawerProps> = ({
               bottom: snapPosition,
               width: snapDimensions.width,
               height: snapDimensions.height,
+              zIndex: zIndex,
             }
           : {}
       }
       transition={{ type: 'spring', bounce: 0 }}
       drag='y'
       dragConstraints={{ top: 0, bottom: 0 }}
       onDragEnd={handleSnap}
+      {...(snapHeights ? { onDragEnd: handleSnap } : {})}
       data-testid='snap-container'
     >
       <AnimatePresence>
         {isOpen && (
           <DrawerWrapper
             placement={isMobile ? 'bottom' : placement}
             padding={isFloating ? 3 : 0}
-            maxHeight={isMobile ? ['290px', '400px', '480px', 'calc(100vh - 64px)'] : props.height ?? '100%'}
+            maxHeight={
+              props?.maxHeight
+                ? props.maxHeight
+                : isMobile
+                ? ['290px', '400px', '480px', 'calc(100vh - 64px)']
+                : props.height ?? '100%'
+            }
             maxWidth={isMobile ? '100%' : ['400px', '600px', '800px', '100%']}
             width={isMobile ? '100%' : props.width}
             {...props}

packages/core/src/Drawer/hooks/useSnap.spec.ts

@@ -3,23 +3,16 @@ import { renderHook } from '@testing-library/react'
 
 describe('Drawer snap hook unit test', () => {
   test('Snap position initialized correctly', () => {
-    const { result } = renderHook(() => useSnap(['0%', '20%', '30%']))
+    const { result } = renderHook(() => useSnap(['0%', '20%', '30%'], ['100%', '100%', '100%']))
     const { snapPosition, handleSnap } = result.current
-    expect(snapPosition).toBe('0%')
+    expect(snapPosition).toBe('20%')
 
-    // Scroll all the way up, and back down should return to original position
-    // To middle
-    handleSnap('', { offset: { y: 0 } })
+    // Start middle, scroll up and scroll down should be back to initial position
+    // Scroll to top
     handleSnap('', { offset: { y: 101 } })
-
-    // To top
-    handleSnap('', { offset: { y: 101 } })
-
-    // Back to middle
+    // Scroll back to middle
     handleSnap('', { offset: { y: -101 } })
 
-    // Back to bottom
-    handleSnap('', { offset: { y: -101 } })
-    expect(snapPosition).toBe('0%')
+    expect(snapPosition).toBe('20%')
   })
 })

packages/core/src/Drawer/hooks/useSnap.ts

@@ -8,10 +8,15 @@ import { useState } from 'react'
  *
  * Designed to support 3 snap points.
  */
-export function useSnap(snapHeights) {
-  const [TOP, MIDDLE, BOTTOM] = snapHeights || []
+export function useSnap(snapHeights, snapDimensions) {
+  if (!snapHeights || !snapDimensions) {
+    return { snapPosition: null, handleSnap: () => {} }
+  }
+
+  const [TOP, MIDDLE, BOTTOM] = snapHeights
+
   const SCROLL_THRESHOLD = 100
-  const [snapPosition, setSnapPosition] = useState(TOP)
+  const [snapPosition, setSnapPosition] = useState(MIDDLE)
 
   const handleSnap = (...args) => {
     const info = args?.[1]