feat: migrate components to restart/ui

Author: kyletsang

src/Accordion.tsx

@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import * as React from 'react';
 import { useMemo } from 'react';
 import PropTypes from 'prop-types';
+import { SelectCallback } from '@restart/ui/types';
 import { useUncontrolled } from 'uncontrollable';
 import { useBootstrapPrefix } from './ThemeProvider';
 import AccordionBody from './AccordionBody';
@@ -10,11 +11,7 @@ import AccordionCollapse from './AccordionCollapse';
 import AccordionContext from './AccordionContext';
 import AccordionHeader from './AccordionHeader';
 import AccordionItem from './AccordionItem';
-import {
-  BsPrefixProps,
-  BsPrefixRefForwardingComponent,
-  SelectCallback,
-} from './helpers';
+import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
 
 export interface AccordionProps
   extends Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'>,

src/AccordionContext.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SelectCallback } from './helpers';
+import { SelectCallback } from '@restart/ui/types';
 
 export interface AccordionContextValue {
   activeEventKey?: string;

src/Alert.tsx

@@ -4,13 +4,13 @@ import PropTypes from 'prop-types';
 import { elementType } from 'prop-types-extra';
 import { useUncontrolled } from 'uncontrollable';
 import useEventCallback from '@restart/hooks/useEventCallback';
+import Anchor from '@restart/ui/Anchor';
 import { useBootstrapPrefix } from './ThemeProvider';
 import Fade from './Fade';
 import CloseButton, { CloseButtonVariant } from './CloseButton';
 import { Variant } from './types';
 import divWithClassName from './divWithClassName';
 import createWithBsPrefix from './createWithBsPrefix';
-import SafeAnchor from './SafeAnchor';
 import { TransitionType } from './helpers';
 
 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -32,7 +32,7 @@ const AlertHeading = createWithBsPrefix('alert-heading', {
 });
 
 const AlertLink = createWithBsPrefix('alert-link', {
-  Component: SafeAnchor,
+  Component: Anchor,
 });
 
 const propTypes = {

src/BreadcrumbItem.tsx

@@ -1,8 +1,7 @@
 import classNames from 'classnames';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-
-import SafeAnchor from './SafeAnchor';
+import Anchor from '@restart/ui/Anchor';
 import { useBootstrapPrefix } from './ThemeProvider';
 import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
 
@@ -68,7 +67,7 @@ const BreadcrumbItem: BsPrefixRefForwardingComponent<
       className,
       // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
       as: Component = 'li',
-      linkAs: LinkComponent = SafeAnchor,
+      linkAs: LinkComponent = Anchor,
       linkProps,
       href,
       title,

src/Button.tsx

@@ -1,24 +1,20 @@
 import classNames from 'classnames';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-
+import {
+  useButtonProps,
+  ButtonProps as BaseButtonProps,
+} from '@restart/ui/Button';
 import { useBootstrapPrefix } from './ThemeProvider';
-import SafeAnchor from './SafeAnchor';
 import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
 import { ButtonVariant } from './types';
 
-export type ButtonType = 'button' | 'reset' | 'submit' | string;
-
 export interface ButtonProps
-  extends React.HTMLAttributes<HTMLElement>,
-    BsPrefixProps {
+  extends BaseButtonProps,
+    Omit<BsPrefixProps, 'as'> {
   active?: boolean;
   variant?: ButtonVariant;
   size?: 'sm' | 'lg';
-  type?: ButtonType;
-  href?: string;
-  disabled?: boolean;
-  target?: any;
 }
 
 export type CommonButtonProps = 'href' | 'size' | 'variant' | 'disabled';
@@ -79,37 +75,30 @@ const defaultProps = {
 
 const Button: BsPrefixRefForwardingComponent<'button', ButtonProps> =
   React.forwardRef<HTMLButtonElement, ButtonProps>(
-    (
-      { bsPrefix, variant, size, active, className, type, as, ...props },
-      ref,
-    ) => {
+    ({ as, bsPrefix, variant, size, active, className, ...props }, ref) => {
       const prefix = useBootstrapPrefix(bsPrefix, 'btn');
-
-      const classes = classNames(
-        className,
-        prefix,
-        active && 'active',
-        variant && `${prefix}-${variant}`,
-        size && `${prefix}-${size}`,
+      const [buttonProps, { tagName }] = useButtonProps({
+        tagName: as,
+        ...props,
+      });
+
+      const Component = tagName as React.ElementType;
+
+      return (
+        <Component
+          {...props}
+          {...buttonProps}
+          ref={ref}
+          className={classNames(
+            className,
+            prefix,
+            active && 'active',
+            variant && `${prefix}-${variant}`,
+            size && `${prefix}-${size}`,
+            props.href && props.disabled && 'disabled',
+          )}
+        />
       );
-
-      if (props.href) {
-        return (
-          <SafeAnchor
-            {...props}
-            as={as}
-            ref={ref}
-            className={classNames(classes, props.disabled && 'disabled')}
-          />
-        );
-      }
-
-      if (!type && !as) {
-        type = 'button';
-      }
-
-      const Component = as || 'button';
-      return <Component {...props} ref={ref} type={type} className={classes} />;
     },
   );
 

src/Carousel.tsx

@@ -2,6 +2,7 @@ import useEventCallback from '@restart/hooks/useEventCallback';
 import useUpdateEffect from '@restart/hooks/useUpdateEffect';
 import useCommittedRef from '@restart/hooks/useCommittedRef';
 import useTimeout from '@restart/hooks/useTimeout';
+import Anchor from '@restart/ui/Anchor';
 import classNames from 'classnames';
 import { TransitionStatus } from 'react-transition-group/Transition';
 import PropTypes from 'prop-types';
@@ -18,7 +19,6 @@ import { useUncontrolled } from 'uncontrollable';
 import CarouselCaption from './CarouselCaption';
 import CarouselItem from './CarouselItem';
 import { map, forEach } from './ElementChildren';
-import SafeAnchor from './SafeAnchor';
 import { useBootstrapPrefix, useIsRTL } from './ThemeProvider';
 import transitionEndListener from './transitionEndListener';
 import triggerBrowserReflow from './triggerBrowserReflow';
@@ -616,20 +616,20 @@ const Carousel: BsPrefixRefForwardingComponent<'div', CarouselProps> =
         {controls && (
           <>
             {(wrap || activeIndex !== 0) && (
-              <SafeAnchor className={`${prefix}-control-prev`} onClick={prev}>
+              <Anchor className={`${prefix}-control-prev`} onClick={prev}>
                 {prevIcon}
                 {prevLabel && (
                   <span className="visually-hidden">{prevLabel}</span>
                 )}
-              </SafeAnchor>
+              </Anchor>
             )}
             {(wrap || activeIndex !== numChildren - 1) && (
-              <SafeAnchor className={`${prefix}-control-next`} onClick={next}>
+              <Anchor className={`${prefix}-control-next`} onClick={next}>
                 {nextIcon}
                 {nextLabel && (
                   <span className="visually-hidden">{nextLabel}</span>
                 )}
-              </SafeAnchor>
+              </Anchor>
             )}
           </>
         )}

src/Collapse.tsx

@@ -9,8 +9,8 @@ import Transition, {
   EXITED,
   EXITING,
 } from 'react-transition-group/Transition';
+import { TransitionCallbacks } from '@restart/ui/types';
 import transitionEndListener from './transitionEndListener';
-import { TransitionCallbacks } from './helpers';
 import createChainedFunction from './createChainedFunction';
 import triggerBrowserReflow from './triggerBrowserReflow';
 import TransitionWrapper from './TransitionWrapper';

src/Fade.tsx

@@ -7,8 +7,8 @@ import Transition, {
   ENTERED,
   ENTERING,
 } from 'react-transition-group/Transition';
+import { TransitionCallbacks } from '@restart/ui/types';
 import transitionEndListener from './transitionEndListener';
-import { TransitionCallbacks } from './helpers';
 import triggerBrowserReflow from './triggerBrowserReflow';
 import TransitionWrapper from './TransitionWrapper';
 
@@ -93,9 +93,9 @@ const fadeStyles = {
 const Fade = React.forwardRef<Transition<any>, FadeProps>(
   ({ className, children, ...props }, ref) => {
     const handleEnter = useCallback(
-      (node) => {
+      (node, isAppearing) => {
         triggerBrowserReflow(node);
-        props.onEnter?.(node);
+        props.onEnter?.(node, isAppearing);
       },
       [props],
     );

src/FormCheckInput.tsx

@@ -11,7 +11,6 @@ type FormCheckInputType = 'checkbox' | 'radio';
 export interface FormCheckInputProps
   extends BsPrefixProps,
     React.InputHTMLAttributes<HTMLInputElement> {
-  id?: string;
   type?: FormCheckInputType;
   isValid?: boolean;
   isInvalid?: boolean;

src/FormControl.tsx

@@ -21,7 +21,6 @@ export interface FormControlProps
   value?: string | string[] | number;
   onChange?: React.ChangeEventHandler<FormControlElement>;
   type?: string;
-  id?: string;
   isValid?: boolean;
   isInvalid?: boolean;
 }

src/ListGroup.tsx

@@ -2,27 +2,17 @@ import classNames from 'classnames';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import warning from 'warning';
-
 import { useUncontrolled } from 'uncontrollable';
-
+import BaseNav, { NavProps as BaseNavProps } from '@restart/ui/Nav';
+import { EventKey } from '@restart/ui/types';
 import { useBootstrapPrefix } from './ThemeProvider';
-import AbstractNav from './AbstractNav';
 import ListGroupItem from './ListGroupItem';
-import {
-  BsPrefixProps,
-  BsPrefixRefForwardingComponent,
-  SelectCallback,
-} from './helpers';
-import { EventKey } from './types';
+import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
 
-export interface ListGroupProps
-  extends BsPrefixProps,
-    Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {
+export interface ListGroupProps extends BsPrefixProps, BaseNavProps {
   variant?: 'flush';
   horizontal?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
-  activeKey?: EventKey;
   defaultActiveKey?: EventKey;
-  onSelect?: SelectCallback;
 }
 
 const propTypes = {
@@ -81,7 +71,7 @@ const ListGroup: BsPrefixRefForwardingComponent<'div', ListGroupProps> =
     );
 
     return (
-      <AbstractNav
+      <BaseNav
         ref={ref}
         {...controlledProps}
         as={as}

src/ListGroupItem.tsx

@@ -2,20 +2,17 @@ import classNames from 'classnames';
 import * as React from 'react';
 import { useCallback } from 'react';
 import PropTypes from 'prop-types';
-
-import AbstractNavItem from './AbstractNavItem';
+import BaseNavItem, {
+  NavItemProps as BaseNavItemProps,
+} from '@restart/ui/NavItem';
 import { useBootstrapPrefix } from './ThemeProvider';
 import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
-import { Variant, EventKey } from './types';
+import { Variant } from './types';
 
 export interface ListGroupItemProps
-  extends Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'>,
+  extends Omit<BaseNavItemProps, 'onSelect'>,
     BsPrefixProps {
   action?: boolean;
-  active?: boolean;
-  disabled?: boolean;
-  eventKey?: EventKey;
-  href?: string;
   onClick?: React.MouseEventHandler;
   variant?: Variant;
 }
@@ -104,7 +101,7 @@ const ListGroupItem: BsPrefixRefForwardingComponent<'a', ListGroupItemProps> =
       }
 
       return (
-        <AbstractNavItem
+        <BaseNavItem
           ref={ref}
           {...props}
           // eslint-disable-next-line no-nested-ternary

src/NavDropdown.tsx

@@ -10,7 +10,6 @@ import { BsPrefixRefForwardingComponent } from './helpers';
 
 export interface NavDropdownProps
   extends Omit<DropdownProps, 'onSelect' | 'title'> {
-  id: string;
   title: React.ReactNode;
   disabled?: boolean;
   active?: boolean;
@@ -23,10 +22,9 @@ export interface NavDropdownProps
 const propTypes = {
   /**
    * An html id attribute for the Toggle button, necessary for assistive technologies, such as screen readers.
-   * @type {string|number}
-   * @required
+   * @type {string}
    */
-  id: PropTypes.any,
+  id: PropTypes.string,
 
   /** An `onClick` handler passed to the Toggle component */
   onClick: PropTypes.func,

src/Navbar.tsx

@@ -2,7 +2,8 @@ import classNames from 'classnames';
 import * as React from 'react';
 import { useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
-
+import SelectableContext from '@restart/ui/SelectableContext';
+import { SelectCallback } from '@restart/ui/types';
 import { useUncontrolled } from 'uncontrollable';
 
 import createWithBsPrefix from './createWithBsPrefix';
@@ -11,12 +12,7 @@ import NavbarCollapse from './NavbarCollapse';
 import NavbarToggle from './NavbarToggle';
 import { useBootstrapPrefix } from './ThemeProvider';
 import NavbarContext, { NavbarContextType } from './NavbarContext';
-import SelectableContext from './SelectableContext';
-import {
-  BsPrefixProps,
-  BsPrefixRefForwardingComponent,
-  SelectCallback,
-} from './helpers';
+import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
 
 const NavbarText = createWithBsPrefix('navbar-text', {
   Component: 'span',

src/Offcanvas.tsx

@@ -6,7 +6,7 @@ import { useCallback, useMemo, useRef } from 'react';
 import BaseModal, {
   ModalProps as BaseModalProps,
   ModalHandle,
-} from 'react-overlays/Modal';
+} from '@restart/ui/Modal';
 import Fade from './Fade';
 import OffcanvasBody from './OffcanvasBody';
 import OffcanvasToggling from './OffcanvasToggling';
@@ -306,7 +306,6 @@ const Offcanvas: BsPrefixRefForwardingComponent<'div', OffcanvasProps> =
             onExiting={onExiting}
             onExited={handleExited}
             manager={getModalManager()}
-            containerClassName={`${bsPrefix}-open`}
             transition={DialogTransition}
             backdropTransition={BackdropTransition}
             renderBackdrop={renderBackdrop}

src/OffcanvasToggling.tsx

@@ -7,8 +7,9 @@ import Transition, {
   ENTERING,
   EXITING,
 } from 'react-transition-group/Transition';
+import { TransitionCallbacks } from '@restart/ui/types';
 import transitionEndListener from './transitionEndListener';
-import { TransitionCallbacks, BsPrefixOnlyProps } from './helpers';
+import { BsPrefixOnlyProps } from './helpers';
 import TransitionWrapper from './TransitionWrapper';
 import { useBootstrapPrefix } from './ThemeProvider';