fix: remove padding wrappers (stipsan#57)

BREAKING CHANGE:
The resize observer logic is rewritten to no longer require wrapper elements like `[data-rsbs-footer-padding]`. If you're not using custom CSS and are simply importing `react-spring-bottom-sheet/dist/style.css` in your app then this isn't a breaking change for you.


If you're using custom CSS, here's the breaking changes:
- `[data-rsbs-header-padding]` removed, update selectors to `[data-rsbs-header]`
- `[data-rsbs-content-padding]` removed, update selectors to `[data-rsbs-scroll]`
- `[data-rsbs-footer-padding]` removed, update selectors to `[data-rsbs-footer]`
- `[data-rsbs-antigap]` removed, update selectors to `[data-rsbs-root]:after` and make sure to add `content: '';`.
- `[data-rsbs-content]` is changed, update selectors to `[data-rsbs-scroll]`.
- The `<div style="overflow:hidden;">` wrapper that used to be between `[data-rsbs-content]` and `[data-rsbs-content-padding]` is now within `[data-rsbs-scroll]`, and no longer hardcode `overflow: hidden`, add `[data-rsbs-content] { overflow: hidden; }` to your CSS.

README.md

@@ -6,7 +6,7 @@
 
 ![Logo with the text Accessible, Delightful and Performant](https://react-spring-bottom-sheet.cocody.dev/readme.svg)
 
-**react-spring-bottom-sheet** is built on top of **react-spring** and **react-use-gesture**. It busts the myth that accessibility and supporting keyboard navigation and screen readers are allegedly at odds with delightful, beautiful and highly animated UIs. Every animation and transition is implemented using CSS custom properties instead of manipulating them directly, allowing complete control over the experience from CSS alone.
+**react-spring-bottom-sheet** is built on top of **[react-spring]** and **[react-use-gesture]**. It busts the myth that accessibility and supporting keyboard navigation and screen readers are allegedly at odds with delightful, beautiful, and highly animated UIs. Every animation and transition use CSS custom properties instead of manipulating them directly, allowing complete control over the experience from CSS alone.
 
 # Install
 
@@ -241,3 +241,5 @@ ref.current.snapTo(({ // Showing all the available props
 [size-badge]: http://img.badgesize.io/https://unpkg.com/react-spring-bottom-sheet/dist/index.es.js?label=size&style=flat-square
 [unpkg-dist]: https://unpkg.com/react-spring-bottom-sheet/dist/
 [module-formats-badge]: https://img.shields.io/badge/module%20formats-cjs%2C%20es%2C%20modern-green.svg?style=flat-square
+[react-spring]: https://github.com/pmndrs/react-spring
+[react-use-gesture]: https://github.com/pmndrs/react-use-gesture

defaults.json

@@ -9,8 +9,8 @@
     "--rsbs-max-w": "auto",
     "--rsbs-ml": "env(safe-area-inset-left)",
     "--rsbs-mr": "env(safe-area-inset-right)",
+    "--rsbs-overlay-h": "0px",
     "--rsbs-overlay-rounded": "16px",
-    "--rsbs-overlay-translate-y": "0px",
-    "--rsbs-overlay-h": "0px"
+    "--rsbs-overlay-translate-y": "0px"
   }
 }

docs/style.css

@@ -31,10 +31,10 @@
     --rsbs-mr: 0px;
 
     /* the bottom sheet doesn't need display cutout paddings when in the iframe */
-    & [data-rsbs-has-footer='false'] [data-rsbs-content-padding] {
+    & [data-rsbs-has-footer='false'] [data-rsbs-scroll] {
       padding-bottom: 0px !important;
     }
-    & [data-rsbs-footer-padding] {
+    & [data-rsbs-footer] {
       padding-bottom: 16px !important;
     }
   }

package.json

@@ -33,19 +33,20 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
+    "@juggle/resize-observer": "^3.2.0",
     "@reach/portal": "^0.12.1",
     "@xstate/react": "^1.2.0",
     "body-scroll-lock": "^3.1.5",
     "focus-trap": "^6.2.2",
     "react-spring": "^8.0.27",
     "react-use-gesture": "^8.0.1",
-    "resize-observer-polyfill": "^1.5.1",
     "xstate": "^4.15.1"
   },
   "peerDependencies": {
     "react": "^16.14.0 || 17"
   },
   "devDependencies": {
+    "@rooks/use-raf": "^4.5.0",
     "@semantic-release/changelog": "^5.0.1",
     "@semantic-release/git": "^9.0.0",
     "@tailwindcss/forms": "^0.2.1",

pages/fixtures/experiments.tsx

@@ -1,3 +1,4 @@
+import useRaf from '@rooks/use-raf'
 import useInterval from '@use-it/interval'
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import Button from '../../docs/fixtures/Button'
@@ -14,7 +15,7 @@ const MemoBottomSheet = memo(BottomSheet)
 function One() {
   const [open, setOpen] = useState(false)
 
-  const [seconds, setSeconds] = useState(1)
+  const [renders, setRenders] = useState(1)
 
   const style = useMemo(() => ({ ['--rsbs-bg' as any]: '#EFF6FF' }), [])
   const onDismiss = useCallback(() => setOpen(false), [])
@@ -37,23 +38,21 @@ function One() {
     [onDismiss]
   )
 
-  useInterval(() => {
-    if (open) {
-      setSeconds(seconds + 1)
-    }
-  }, 100)
+  useRaf(() => {
+    setRenders(renders + 1)
+  }, open)
 
   useEffect(() => {
     if (open) {
       return () => {
-        setSeconds(1)
+        setRenders(1)
       }
     }
   }, [open])
 
   return (
     <>
-      <Button onClick={() => setOpen(true)}>{seconds}</Button>
+      <Button onClick={() => setOpen(true)}>{renders}</Button>
       <MemoBottomSheet
         style={style}
         open={open}
@@ -380,7 +379,6 @@ function Nine() {
       >
         <SheetContent>
           <Button onClick={() => setExpandContent(true)}>Expand</Button>
-          <br />
           {expandContent && (
             <Button onClick={() => setExpandContent(false)}>No!</Button>
           )}

src/BottomSheet.tsx

@@ -89,8 +89,8 @@ export const BottomSheet = React.forwardRef<
   const [spring, set] = useSpring()
 
   const containerRef = useRef<HTMLDivElement>(null)
+  const scrollRef = useRef<HTMLDivElement>(null)
   const contentRef = useRef<HTMLDivElement>(null)
-  const contentContainerRef = useRef<HTMLDivElement>(null)
   const headerRef = useRef<HTMLDivElement>(null)
   const footerRef = useRef<HTMLDivElement>(null)
   const overlayRef = useRef<HTMLDivElement | null>(null)
@@ -102,7 +102,7 @@ export const BottomSheet = React.forwardRef<
 
   // "Plugins" huhuhu
   const scrollLockRef = useScrollLock({
-    targetRef: contentRef,
+    targetRef: scrollRef,
     enabled: ready && scrollLocking,
     reserveScrollBarGap,
   })
@@ -118,7 +118,7 @@ export const BottomSheet = React.forwardRef<
   })
 
   const { minSnap, maxSnap, maxHeight, findSnap } = useSnapPoints({
-    contentContainerRef,
+    contentRef,
     controlledMaxHeight,
     footerEnabled: !!footer,
     footerRef,
@@ -542,25 +542,20 @@ export const BottomSheet = React.forwardRef<
       >
         {header !== false && (
           <div key="header" data-rsbs-header ref={headerRef} {...bind()}>
-            <div data-rsbs-header-padding>{header}</div>
+            {header}
           </div>
         )}
-        <div key="content" data-rsbs-content ref={contentRef}>
-          <div
-            ref={contentContainerRef}
-            // The overflow hidden is for the resize observer to get dimensions including margins and paddings
-            style={{ overflow: 'hidden' }}
-          >
-            <div data-rsbs-content-padding>{children}</div>
+        <div key="scroll" data-rsbs-scroll ref={scrollRef}>
+          <div data-rsbs-content ref={contentRef}>
+            {children}
           </div>
         </div>
         {footer && (
           <div key="footer" ref={footerRef} data-rsbs-footer {...bind()}>
-            <div data-rsbs-footer-padding>{footer}</div>
+            {footer}
           </div>
         )}
       </div>
-      <div key="antigap" data-rsbs-antigap />
     </animated.div>
   )
 })