feat(Offcanvas): add top placement (react-bootstrap#5847)

https://getbootstrap.com/docs/5.0/components/offcanvas/

Author: ken604

src/Offcanvas.tsx

@@ -19,7 +19,7 @@ import OffcanvasTitle from './OffcanvasTitle';
 import { BsPrefixRefForwardingComponent } from './helpers';
 import { useBootstrapPrefix } from './ThemeProvider';
 
-export type OffcanvasPlacement = 'start' | 'end' | 'bottom';
+export type OffcanvasPlacement = 'start' | 'end' | 'top' | 'bottom';
 
 export interface OffcanvasProps
   extends Omit<
@@ -66,7 +66,12 @@ const propTypes = {
   /**
    * Which side of the viewport the offcanvas will appear from.
    */
-  placement: PropTypes.oneOf<OffcanvasPlacement>(['start', 'end', 'bottom']),
+  placement: PropTypes.oneOf<OffcanvasPlacement>([
+    'start',
+    'end',
+    'top',
+    'bottom',
+  ]),
 
   /**
    * When `true` The offcanvas will automatically shift focus to itself when it

www/src/examples/Offcanvas/Placement.js

@@ -25,7 +25,7 @@ function OffCanvasExample({ name, ...props }) {
 function Example() {
   return (
     <>
-      {['start', 'end', 'bottom'].map((placement, idx) => (
+      {['start', 'end', 'top', 'bottom'].map((placement, idx) => (
         <OffCanvasExample key={idx} placement={placement} name={placement} />
       ))}
     </>

www/src/pages/components/offcanvas.mdx

@@ -30,6 +30,7 @@ actions whenever possible, or provide an explicit dismiss action.
 Offcanvas supports a few different placements:
 - `start` places offcanvas on the left of the viewport
 - `end` places offcanvas on the right of the viewport
+- `top` places offcanvas on the top of the viewport
 - `bottom` places offcanvas on the bottom of the viewport
 
 <ReactPlayground codeText={Placement} />