fix: improve rubber band effect when out of bounds (#29)

Author: stipsan

README.md

@@ -18,7 +18,7 @@ npm i react-spring-bottom-sheet
 
 ## [Basic](https://react-spring-bottom-sheet.cocody.dev/fixtures/simple)
 
-> [View demo code](/pages/fixtures/simple.tsx#L43-L47)
+> [View demo code](/pages/fixtures/simple.tsx#L44-L48)
 
 MVP example, showing what you get by implementing `open`, `onDismiss` and a single **snap point** always set to `minHeight`.
 
@@ -30,13 +30,13 @@ A more elaborate example that showcases how snap points work. It also shows how
 
 ## [Sticky header & footer](https://react-spring-bottom-sheet.cocody.dev/fixtures/sticky)
 
-> [View demo code](/pages/fixtures/sticky.tsx#L40-L60)
+> [View demo code](/pages/fixtures/sticky.tsx#L41-L61)
 
 If you provide either a `header` or `footer` prop you'll enable the special behavior seen in this example. And they're not just sticky positioned, both areas support touch gestures.
 
 ## [Non-blocking overlay mode](https://react-spring-bottom-sheet.cocody.dev/fixtures/aside)
 
-> [View demo code](/pages/fixtures/aside.tsx#L41-L46)
+> [View demo code](/pages/fixtures/aside.tsx#L41-L53)
 
 In most cases you use a bottom sheet the same way you do with a dialog: you want it to overlay the page and block out distractions. But there are times when you want a bottom sheet but without it taking all the attention and overlaying the entire page. Providing `blocking={false}` helps this use case. By doing so you disable a couple of behaviors that are there for accessibility (focus-locking and more) that prevents a screen reader or a keyboard user from accidentally leaving the bottom sheet.
 
@@ -226,9 +226,9 @@ ef.current.snapTo(({ // Showing all the available props
 
 # Credits
 
-- Play icon used on frame overlays: https://fontawesome.com/icons/play-circle?style=regular
-- Phone frame used in logo: https://www.figma.com/community/file/896042888090872154/Mono-Devices-1.0
-- iPhone frame used to wrap examples: https://www.figma.com/community/file/858143367356468985/(Variants)-iOS-%26-iPadOS-14-UI-Kit-for-Figma
+- Play icon used on frame overlays: [font-awesome](https://fontawesome.com/icons/play-circle?style=regular)
+- Phone frame used in logo: [Mono Devices 1.0](https://www.figma.com/community/file/896042888090872154/Mono-Devices-1.0)
+- iPhone frame used to wrap examples: [iOS 14 UI Kit for Figma](<https://www.figma.com/community/file/858143367356468985/(Variants)-iOS-%26-iPadOS-14-UI-Kit-for-Figma>)
 
 [gzip-badge]: http://img.badgesize.io/https://unpkg.com/react-spring-bottom-sheet/dist/index.es.js?compression=gzip&label=gzip%20size&style=flat-square
 [size-badge]: http://img.badgesize.io/https://unpkg.com/react-spring-bottom-sheet/dist/index.es.js?label=size&style=flat-square

package-lock.json

@@ -45,6 +45,7 @@
   "devDependencies": {
     "@semantic-release/changelog": "^5.0.1",
     "@semantic-release/git": "^9.0.0",
+    "@tailwindcss/forms": "^0.2.1",
     "@types/classnames": "^2.2.11",
     "@types/node": "^14.14.10",
     "@types/react": "^17.0.0",

package.json

@@ -42,6 +42,13 @@ const AsideFixturePage: NextPage<GetStaticProps> = ({
           open={open}
           onDismiss={() => setOpen(false)}
           blocking={false}
+          header={
+            <input
+              className="mt-1 block w-full rounded-md bg-gray-100 border-transparent focus:border-gray-300 focus:bg-white focus:ring-0"
+              type="text"
+              placeholder="Text input field in a sticky header"
+            />
+          }
           snapPoints={({ maxHeight }) => [maxHeight / 4, maxHeight * 0.6]}
         >
           <SheetContent>

pages/fixtures/aside.tsx

@@ -3,6 +3,7 @@ import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import Button from '../../docs/fixtures/Button'
 import Code from '../../docs/fixtures/Code'
 import Container from '../../docs/fixtures/Container'
+import Expandable from '../../docs/fixtures/Expandable'
 import Kbd from '../../docs/fixtures/Kbd'
 import SheetContent from '../../docs/fixtures/SheetContent'
 import { BottomSheet } from '../../src'
@@ -155,17 +156,39 @@ function Four() {
     <>
       <Button onClick={() => setOpen(true)}>4</Button>
       <BottomSheet
-        style={{ ['--rsbs-bg' as any]: '#EFF6FF' }}
         open={open}
         onDismiss={onDismiss}
-        snapPoints={({ minHeight }) => [0, minHeight]}
+        header={
+          <input
+            className="mt-1 block w-full rounded-md bg-gray-100 border-transparent focus:border-gray-300 focus:bg-white focus:ring-0"
+            type="text"
+            placeholder="Text input field in a sticky header"
+          />
+        }
+        footer={
+          <input
+            className="mt-1 block w-full rounded-md bg-gray-100 border-transparent focus:border-gray-300 focus:bg-white focus:ring-0"
+            type="text"
+            placeholder="Text input field in a sticky header"
+          />
+        }
       >
         <SheetContent>
-          <p>
-            Using <Code>onDismiss</Code> lets users close the sheet by swiping
-            it down, tapping on the backdrop or by hitting <Kbd>esc</Kbd> on
-            their keyboard.
-          </p>
+          <input
+            className="mt-1 block w-full rounded-md bg-gray-100 border-transparent focus:border-gray-300 focus:bg-white focus:ring-0"
+            type="text"
+            placeholder="Text input field in a sticky header"
+          />
+          <Expandable>
+            <div className="bg-gray-200 block rounded-md h-10 w-full my-10" />
+            <p>Testing focus management and keyboard behavior on open.</p>
+            <div className="bg-gray-200 block rounded-md h-10 w-full my-10" />
+          </Expandable>
+          <input
+            className="mt-1 block w-full rounded-md bg-gray-100 border-transparent focus:border-gray-300 focus:bg-white focus:ring-0"
+            type="text"
+            placeholder="Text input field in a sticky header"
+          />
         </SheetContent>
       </BottomSheet>
     </>

pages/fixtures/experiments.tsx

@@ -42,7 +42,7 @@ const StickyFixturePage: NextPage<GetStaticProps> = ({
           open={open}
           onDismiss={onDismiss}
           defaultSnap={({ snapPoints, lastSnap }) =>
-            lastSnap ?? Math.max(...snapPoints)
+            lastSnap ?? Math.min(...snapPoints)
           }
           snapPoints={({ maxHeight }) => [
             maxHeight - maxHeight / 5,
@@ -67,8 +67,10 @@ const StickyFixturePage: NextPage<GetStaticProps> = ({
             <Expandable>
               <div className="bg-gray-200 block rounded-md h-10 w-full my-10" />
               <p>
-                Notice how much better the UX is on resize events when the
-                "Dismiss" button is sticky.
+                Putting the "Done" button in a sticky footer is a nice touch on
+                long bottom sheets with a lot of content. And on resize events
+                the sticky elements are always visible, unlike the "Dismiss"
+                button in the first example that needs to be animated first.
               </p>
               <div className="bg-gray-200 block rounded-md h-10 w-full my-10" />
             </Expandable>
@@ -81,6 +83,17 @@ const StickyFixturePage: NextPage<GetStaticProps> = ({
               as well to optimize for large phones where the header might be
               difficult to reach with one hand.
             </p>
+            <Expandable>
+              <div className="bg-gray-200 block rounded-md h-10 w-full my-10" />
+              <p>
+                Additionally this bottom sheet uses stable viewpoints that are
+                equivalent to vh CSS units. Predictable heights like this is
+                also handy if there's content loaded async, or you're
+                implementing a virtual list so the sheet can't rely on measuring
+                the height of its content.
+              </p>
+              <div className="bg-gray-200 block rounded-md h-10 w-full my-10" />
+            </Expandable>
           </SheetContent>
         </BottomSheet>
       </Container>