From c6fdb4ee76bdf67f0ef3d643c4b6819166d72f73 Mon Sep 17 00:00:00 2001
From: Jason <jason@scurker.com>
Date: Mon, 30 Sep 2024 15:01:34 -0500
Subject: [PATCH] fix a few things

---
 docs/pages/components/BottomSheet.mdx         | 29 +++++++++++++++++--
 .../src/components/BottomSheet/index.tsx      |  8 ++---
 .../src/components/Drawer/Drawer.test.tsx     |  1 -
 3 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/docs/pages/components/BottomSheet.mdx b/docs/pages/components/BottomSheet.mdx
index 1a4d8b0ef..99fb369e7 100644
--- a/docs/pages/components/BottomSheet.mdx
+++ b/docs/pages/components/BottomSheet.mdx
@@ -1,6 +1,6 @@
 ---
 title: BottomSheet
-description: A primitive component with an initially hidden off-screen container anchored to the bottom of the page to provide quick access to additional content or information.
+description: A primitive component with an initially hidden off-screen overlay anchored to the bottom of the page to provide quick access to additional content or information.
 source: https://github.com/dequelabs/cauldron/tree/develop/packages/react/src/components/BottomSheet/index.tsx
 ---
 
@@ -11,6 +11,8 @@ import { BottomSheet, IconButton, Icon, Button } from '@deque/cauldron-react'
 import { BottomSheet } from '@deque/cauldron-react'
 ```
 
+`BottomSheet` is an extension of the [`Drawer`](./Drawer) component to display additional information, typically on smaller devices.
+
 ## Examples
 
 ```jsx example
@@ -35,7 +37,30 @@ function BottomSheetExample() {
     required: true
   }}
   refType="HTMLDivElement"
-  props={[]}
+  props={[
+    {
+      name: 'open',
+      type: 'boolean',
+      defaultValue: 'false',
+      description: 'Sets the current "open" state of the bottom sheet.'
+    },
+    {
+      name: 'focusOptions',
+      type: 'object',
+      description: 'Advanced customization of focus state when the bottom sheet open state changes.'
+    },
+    {
+      name: 'onClose',
+      type: 'function',
+      description: 'Callback function when the bottom sheet is closed.'
+    },
+    {
+      name: 'portal',
+      type: ['Element', 'React.RefObject<Element>'],
+      defaultValue: 'document.body',
+      description: 'Sets the container in which the bottom sheet is rendered.'
+    }
+  ]}
 />
 
 ## Related Components
diff --git a/packages/react/src/components/BottomSheet/index.tsx b/packages/react/src/components/BottomSheet/index.tsx
index 4b8a42701..5a1798f32 100644
--- a/packages/react/src/components/BottomSheet/index.tsx
+++ b/packages/react/src/components/BottomSheet/index.tsx
@@ -13,7 +13,7 @@ type BottomSheetProps = {
 } & React.HTMLAttributes<HTMLDivElement> &
   Pick<
     React.ComponentProps<typeof Drawer>,
-    'open' | 'onClose' | 'focusOptions'
+    'open' | 'onClose' | 'focusOptions' | 'portal'
   >;
 
 const BottomSheet = forwardRef<HTMLDivElement, BottomSheetProps>(
@@ -41,15 +41,15 @@ const BottomSheet = forwardRef<HTMLDivElement, BottomSheetProps>(
 
     return (
       <Drawer
-        behavior="modal"
-        position="bottom"
         open={open}
+        onClose={handleClose}
         focusOptions={{
           initialFocus: bottomSheetRef,
           ...focusOptions
         }}
-        onClose={handleClose}
         {...props}
+        behavior="modal"
+        position="bottom"
       >
         <div
           ref={bottomSheetRef}
diff --git a/packages/react/src/components/Drawer/Drawer.test.tsx b/packages/react/src/components/Drawer/Drawer.test.tsx
index 333a0ee7e..211d9084f 100644
--- a/packages/react/src/components/Drawer/Drawer.test.tsx
+++ b/packages/react/src/components/Drawer/Drawer.test.tsx
@@ -277,7 +277,6 @@ test('should not trap focus when behavior is non-modal', async () => {
       </Drawer>
     </>
   );
-  
   expect(screen.getByRole('button', { name: 'outside' })).not.toHaveAttribute(
     'aria-hidden',
     'true'