feat(v5): add Offcanvas component (#5738)

src/AbstractModalHeader.tsx

@@ -0,0 +1,81 @@
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import { useContext } from 'react';
+import useEventCallback from '@restart/hooks/useEventCallback';
+import CloseButton, { CloseButtonVariant } from './CloseButton';
+import ModalContext from './ModalContext';
+
+export interface AbstractModalHeaderProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  closeLabel?: string;
+  closeVariant?: CloseButtonVariant;
+  closeButton?: boolean;
+  onHide?: () => void;
+}
+
+const propTypes = {
+  /**
+   * Provides an accessible label for the close
+   * button. It is used for Assistive Technology when the label text is not
+   * readable.
+   */
+  closeLabel: PropTypes.string,
+
+  /**
+   * Sets the variant for close button.
+   */
+  closeVariant: PropTypes.oneOf<CloseButtonVariant>(['white']),
+
+  /**
+   * Specify whether the Component should contain a close button
+   */
+  closeButton: PropTypes.bool,
+
+  /**
+   * A Callback fired when the close button is clicked. If used directly inside
+   * a ModalContext, the onHide will automatically be propagated up
+   * to the parent `onHide`.
+   */
+  onHide: PropTypes.func,
+};
+
+const defaultProps = {
+  closeLabel: 'Close',
+  closeButton: false,
+};
+
+const AbstractModalHeader = React.forwardRef<
+  HTMLDivElement,
+  AbstractModalHeaderProps
+>(
+  (
+    { closeLabel, closeVariant, closeButton, onHide, children, ...props },
+    ref,
+  ) => {
+    const context = useContext(ModalContext);
+
+    const handleClick = useEventCallback(() => {
+      context?.onHide();
+      onHide?.();
+    });
+
+    return (
+      <div ref={ref} {...props}>
+        {children}
+
+        {closeButton && (
+          <CloseButton
+            aria-label={closeLabel}
+            variant={closeVariant}
+            onClick={handleClick}
+          />
+        )}
+      </div>
+    );
+  },
+);
+
+AbstractModalHeader.propTypes = propTypes;
+AbstractModalHeader.defaultProps = defaultProps;
+
+export default AbstractModalHeader;

src/ModalHeader.tsx

@@ -1,24 +1,21 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import * as React from 'react';
-import { useContext } from 'react';
-import useEventCallback from '@restart/hooks/useEventCallback';
-
 import { useBootstrapPrefix } from './ThemeProvider';
-import CloseButton, { CloseButtonVariant } from './CloseButton';
-import ModalContext from './ModalContext';
+import { CloseButtonVariant } from './CloseButton';
+import AbstractModalHeader, {
+  AbstractModalHeaderProps,
+} from './AbstractModalHeader';
 import { BsPrefixOnlyProps } from './helpers';
 
 export interface ModalHeaderProps
-  extends BsPrefixOnlyProps,
-    React.HTMLAttributes<HTMLDivElement> {
-  closeLabel?: string;
-  closeVariant?: CloseButtonVariant;
-  closeButton?: boolean;
-  onHide?: () => void;
-}
+  extends AbstractModalHeaderProps,
+    BsPrefixOnlyProps {}
 
 const propTypes = {
+  /**
+   * @default 'modal-header'
+   */
   bsPrefix: PropTypes.string,
 
   /**
@@ -52,40 +49,14 @@ const defaultProps = {
 };
 
 const ModalHeader = React.forwardRef<HTMLDivElement, ModalHeaderProps>(
-  (
-    {
-      bsPrefix,
-      closeLabel,
-      closeVariant,
-      closeButton,
-      onHide,
-      className,
-      children,
-      ...props
-    }: ModalHeaderProps,
-    ref,
-  ) => {
+  ({ bsPrefix, className, ...props }, ref) => {
     bsPrefix = useBootstrapPrefix(bsPrefix, 'modal-header');
-
-    const context = useContext(ModalContext);
-
-    const handleClick = useEventCallback(() => {
-      context?.onHide();
-      onHide?.();
-    });
-
     return (
-      <div ref={ref} {...props} className={classNames(className, bsPrefix)}>
-        {children}
-
-        {closeButton && (
-          <CloseButton
-            aria-label={closeLabel}
-            variant={closeVariant}
-            onClick={handleClick}
-          />
-        )}
-      </div>
+      <AbstractModalHeader
+        ref={ref}
+        {...props}
+        className={classNames(className, bsPrefix)}
+      />
     );
   },
 );