@coreui/react 5.0.0-alpha.3 → 5.0.0-beta.1

package/src/components/tooltip/CTooltip.tsx

@@ -1,10 +1,10 @@
-import React, { FC, HTMLAttributes, ReactNode, useRef, useEffect, useState } from 'react'
-import { createPortal } from 'react-dom'
+import React, { forwardRef, HTMLAttributes, ReactNode, useRef, useEffect, useState } from 'react'
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
 import { Transition } from 'react-transition-group'
 
-import { usePopper } from '../../hooks'
+import { CConditionalPortal } from '../conditional-portal'
+import { useForkedRef, usePopper } from '../../hooks'
 import { fallbackPlacementsPropType, triggerPropType } from '../../props'
 import type { Placements, Triggers } from '../../types'
 import { getRTLPlacement, getTransitionDurationFromElement } from '../../utils'
@@ -20,6 +20,12 @@ export interface CTooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'con
    * A string of all className you want applied to the component.
    */
   className?: string
+  /**
+   * Appends the react tooltip to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
+   *
+   * @since v4.11.0
+   */
+  container?: Element | (() => Element | null) | null
   /**
    * Content node for your component.
    */
@@ -64,101 +70,110 @@ export interface CTooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'con
   visible?: boolean
 }
 
-export const CTooltip: FC<CTooltipProps> = ({
-  children,
-  animation = true,
-  className,
-  content,
-  delay = 0,
-  fallbackPlacements = ['top', 'right', 'bottom', 'left'],
-  offset = [0, 6],
-  onHide,
-  onShow,
-  placement = 'top',
-  trigger = ['hover', 'focus'],
-  visible,
-  ...rest
-}) => {
-  const tooltipRef = useRef(null)
-  const togglerRef = useRef(null)
-  const { initPopper, destroyPopper } = usePopper()
-  const [_visible, setVisible] = useState(visible)
+export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
+  (
+    {
+      children,
+      animation = true,
+      className,
+      container,
+      content,
+      delay = 0,
+      fallbackPlacements = ['top', 'right', 'bottom', 'left'],
+      offset = [0, 6],
+      onHide,
+      onShow,
+      placement = 'top',
+      trigger = ['hover', 'focus'],
+      visible,
+      ...rest
+    },
+    ref,
+  ) => {
+    const tooltipRef = useRef(null)
+    const togglerRef = useRef(null)
+    const forkedRef = useForkedRef(ref, tooltipRef)
 
-  const _delay = typeof delay === 'number' ? { show: delay, hide: delay } : delay
+    const { initPopper, destroyPopper } = usePopper()
+    const [_visible, setVisible] = useState(visible)
 
-  const popperConfig = {
-    modifiers: [
-      {
-        name: 'arrow',
-        options: {
-          element: '.tooltip-arrow',
+    const _delay = typeof delay === 'number' ? { show: delay, hide: delay } : delay
+
+    const popperConfig = {
+      modifiers: [
+        {
+          name: 'arrow',
+          options: {
+            element: '.tooltip-arrow',
+          },
         },
-      },
-      {
-        name: 'flip',
-        options: {
-          fallbackPlacements: fallbackPlacements,
+        {
+          name: 'flip',
+          options: {
+            fallbackPlacements: fallbackPlacements,
+          },
         },
-      },
-      {
-        name: 'offset',
-        options: {
-          offset: offset,
+        {
+          name: 'offset',
+          options: {
+            offset: offset,
+          },
         },
-      },
-    ],
-    placement: getRTLPlacement(placement, togglerRef.current),
-  }
+      ],
+      placement: getRTLPlacement(placement, togglerRef.current),
+    }
 
-  useEffect(() => {
-    setVisible(visible)
-  }, [visible])
+    useEffect(() => {
+      setVisible(visible)
+    }, [visible])
 
-  useEffect(() => {
-    if (_visible && togglerRef.current && tooltipRef.current) {
-      initPopper(togglerRef.current, tooltipRef.current, popperConfig)
-    }
+    useEffect(() => {
+      if (_visible && togglerRef.current && tooltipRef.current) {
+        initPopper(togglerRef.current, tooltipRef.current, popperConfig)
+      }
 
-    return () => {
-      destroyPopper()
-    }
-  }, [_visible])
+      return () => {
+        destroyPopper()
+      }
+    }, [_visible])
 
-  const toggleVisible = (visible: boolean) => {
-    if (visible) {
-      setTimeout(() => setVisible(true), _delay.show)
-      return
-    }
+    const toggleVisible = (visible: boolean) => {
+      if (visible) {
+        setTimeout(() => setVisible(true), _delay.show)
+        return
+      }
 
-    setTimeout(() => setVisible(false), _delay.hide)
-  }
+      setTimeout(() => setVisible(false), _delay.hide)
+    }
 
-  return (
-    <>
-      {React.cloneElement(children as React.ReactElement<any>, {
-        ref: togglerRef,
-        ...((trigger === 'click' || trigger.includes('click')) && {
-          onClick: () => toggleVisible(!_visible),
-        }),
-        ...((trigger === 'focus' || trigger.includes('focus')) && {
-          onFocus: () => toggleVisible(true),
-          onBlur: () => toggleVisible(false),
-        }),
-        ...((trigger === 'hover' || trigger.includes('hover')) && {
-          onMouseEnter: () => toggleVisible(true),
-          onMouseLeave: () => toggleVisible(false),
-        }),
-      })}
-      {typeof window !== 'undefined' &&
-        createPortal(
+    return (
+      <>
+        {React.cloneElement(children as React.ReactElement<any>, {
+          ref: togglerRef,
+          ...((trigger === 'click' || trigger.includes('click')) && {
+            onClick: () => toggleVisible(!_visible),
+          }),
+          ...((trigger === 'focus' || trigger.includes('focus')) && {
+            onFocus: () => toggleVisible(true),
+            onBlur: () => toggleVisible(false),
+          }),
+          ...((trigger === 'hover' || trigger.includes('hover')) && {
+            onMouseEnter: () => toggleVisible(true),
+            onMouseLeave: () => toggleVisible(false),
+          }),
+        })}
+        <CConditionalPortal container={container} portal={true}>
           <Transition
             in={_visible}
             mountOnEnter
+            nodeRef={tooltipRef}
             onEnter={onShow}
             onExit={onHide}
             timeout={{
               enter: 0,
-              exit: tooltipRef.current ? getTransitionDurationFromElement(tooltipRef.current) + 50 : 200,
+              exit: tooltipRef.current
+                ? getTransitionDurationFromElement(tooltipRef.current) + 50
+                : 200,
             }}
             unmountOnExit
           >
@@ -173,7 +188,7 @@ export const CTooltip: FC<CTooltipProps> = ({
                   },
                   className,
                 )}
-                ref={tooltipRef}
+                ref={forkedRef}
                 role="tooltip"
                 {...rest}
               >
@@ -181,16 +196,17 @@ export const CTooltip: FC<CTooltipProps> = ({
                 <div className="tooltip-inner">{content}</div>
               </div>
             )}
-          </Transition>,
-          document.body,
-        )}
-    </>
-  )
-}
+          </Transition>
+        </CConditionalPortal>
+      </>
+    )
+  },
+)
 
 CTooltip.propTypes = {
   animation: PropTypes.bool,
   children: PropTypes.node,
+  container: PropTypes.any,
   content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   delay: PropTypes.oneOfType([
     PropTypes.number,

package/src/components/tooltip/__tests__/CTooltip.spec.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import ReactDOM from 'react-dom'
 import { act } from 'react-dom/test-utils'
 import { fireEvent } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CTooltip, CLink } from '../../../index'
 
 let container: HTMLDivElement | null

package/src/components/widgets/__tests__/CWidgetStatsA.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CWidgetStatsA } from '../../../index'
 
 test('loads and displays CWidgetStatsA component', async () => {

package/src/components/widgets/__tests__/CWidgetStatsB.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CWidgetStatsB } from '../../../index'
 
 test('loads and displays CWidgetStatsB component', async () => {

package/src/components/widgets/__tests__/CWidgetStatsC.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CWidgetStatsC } from '../../../index'
 
 test('loads and displays CWidgetStatsC component', async () => {
@@ -25,11 +25,11 @@ test('CWidgetStatsC customize', async () => {
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')
   expect(container.firstChild).toHaveClass('card')
+  expect(container.firstChild).toHaveClass('text-white')
   if (container.firstChild === null || container.firstChild.firstChild === null) {
     expect(true).toBe(false)
   } else {
     expect(container.firstChild.firstChild).toHaveClass('card-body')
-    expect(container.firstChild.firstChild.firstChild).toHaveClass('text-white')
     expect(container.firstChild.firstChild.firstChild).toHaveClass('text-end')
     expect(container.firstChild.firstChild.firstChild).toHaveClass('mb-4')
     expect(container.firstChild.firstChild.firstChild).toHaveTextContent('icon')

package/src/components/widgets/__tests__/CWidgetStatsD.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CWidgetStatsD } from '../../../index'
 
 test('loads and displays CWidgetStatsD component', async () => {

package/src/components/widgets/__tests__/CWidgetStatsE.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CWidgetStatsE } from '../../../index'
 
 test('loads and displays CWidgetStatsE component', async () => {

package/src/components/widgets/__tests__/CWidgetStatsF.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CWidgetStatsF } from '../../../index'
 
 test('loads and displays CWidgetStatsF component', async () => {

package/dist/components/accordion/CAccordionCollapse.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { CCollapseProps } from '../collapse/CCollapse';
-export declare const CAccordionCollapse: React.ForwardRefExoticComponent<Omit<CCollapseProps, "horizontal"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/conditional-portal/CConditionalPortal.d.ts

@@ -1,12 +0,0 @@
-import { FC, ReactNode } from 'react';
-export interface CConditionalPortalProps {
-    /**
-     * @ignore
-     */
-    children: ReactNode;
-    /**
-     * Render some children into a different part of the DOM
-     */
-    portal: boolean;
-}
-export declare const CConditionalPortal: FC<CConditionalPortalProps>;

package/dist/components/dropdown/CDropdown.d.ts

@@ -1,97 +0,0 @@
-import React, { ElementType, HTMLAttributes, RefObject } from 'react';
-import type { Placements } from '../../types';
-export type Directions = 'start' | 'end';
-export type Breakpoints = {
-    xs: Directions;
-} | {
-    sm: Directions;
-} | {
-    md: Directions;
-} | {
-    lg: Directions;
-} | {
-    xl: Directions;
-} | {
-    xxl: Directions;
-};
-export type Alignments = Directions | Breakpoints;
-export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIElement> {
-    /**
-     * Set aligment of dropdown menu.
-     *
-     * @type 'start' | 'end' | { xs: 'start' | 'end' } | { sm: 'start' | 'end' } | { md: 'start' | 'end' } | { lg: 'start' | 'end' } | { xl: 'start' | 'end'} | { xxl: 'start' | 'end'}
-     */
-    alignment?: Alignments;
-    /**
-     * Configure the auto close behavior of the dropdown:
-     * - `true` - the dropdown will be closed by clicking outside or inside the dropdown menu.
-     * - `false` - the dropdown will be closed by clicking the toggle button and manually calling hide or toggle method. (Also will not be closed by pressing esc key)
-     * - `'inside'` - the dropdown will be closed (only) by clicking inside the dropdown menu.
-     * - `'outside'` - the dropdown will be closed (only) by clicking outside the dropdown menu.
-     */
-    autoClose?: 'inside' | 'outside' | boolean;
-    /**
-     * A string of all className you want applied to the base component.
-     */
-    className?: string;
-    /**
-     * Component used for the root node. Either a string to use a HTML element or a component.
-     */
-    component?: string | ElementType;
-    /**
-     * Sets a darker color scheme to match a dark navbar.
-     */
-    dark?: boolean;
-    /**
-     * Sets a specified  direction and location of the dropdown menu.
-     */
-    direction?: 'center' | 'dropup' | 'dropup-center' | 'dropend' | 'dropstart';
-    /**
-     * Offset of the dropdown menu relative to its target.
-     */
-    offset?: [number, number];
-    /**
-     * Callback fired when the component requests to be hidden.
-     *
-     * @since 4.9.0
-     */
-    onHide?: () => void;
-    /**
-     * Callback fired when the component requests to be shown.
-     */
-    onShow?: () => void;
-    /**
-     * Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.
-     *
-     * @type 'auto' | 'top-end' | 'top' | 'top-start' | 'bottom-end' | 'bottom' | 'bottom-start' | 'right-start' | 'right' | 'right-end' | 'left-start' | 'left' | 'left-end'
-     */
-    placement?: Placements;
-    /**
-     * If you want to disable dynamic positioning set this property to `true`.
-     */
-    popper?: boolean;
-    /**
-     * Generates dropdown menu using createPortal.
-     *
-     * @since 4.8.0
-     */
-    portal?: boolean;
-    /**
-     * Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item.
-     */
-    variant?: 'btn-group' | 'dropdown' | 'input-group' | 'nav-item';
-    /**
-     * Toggle the visibility of dropdown menu component.
-     */
-    visible?: boolean;
-}
-interface ContextProps extends CDropdownProps {
-    dropdownToggleRef: RefObject<any | undefined>;
-    dropdownMenuRef: RefObject<HTMLDivElement | HTMLUListElement | undefined>;
-    setVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>;
-    portal: boolean;
-}
-export declare const getNextActiveElement: (list: HTMLElement[], activeElement: HTMLElement, shouldGetNext: boolean, isCycleAllowed: boolean) => HTMLElement;
-export declare const CDropdownContext: React.Context<ContextProps>;
-export declare const CDropdown: React.ForwardRefExoticComponent<CDropdownProps & React.RefAttributes<HTMLDivElement | HTMLLIElement>>;
-export {};

package/dist/components/dropdown/CDropdownToggle.d.ts

@@ -1,30 +0,0 @@
-import { FC } from 'react';
-import { CButtonProps } from '../button/CButton';
-import type { Triggers } from '../../types';
-export interface CDropdownToggleProps extends Omit<CButtonProps, 'type'> {
-    /**
-     * Enables pseudo element caret on toggler.
-     */
-    caret?: boolean;
-    /**
-     * Create a custom toggler which accepts any content.
-     */
-    custom?: boolean;
-    /**
-     * If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button.
-     *
-     * @since v5.0.0-alpha.3
-     */
-    navLink?: boolean;
-    /**
-     * Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of `.dropdown-toggle-split` className for proper spacing around the dropdown caret.
-     */
-    split?: boolean;
-    /**
-     * Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.
-     *
-     * @type 'hover' | 'focus' | 'click'
-     */
-    trigger?: Triggers | Triggers[];
-}
-export declare const CDropdownToggle: FC<CDropdownToggleProps>;

package/dist/components/dropdown copy/CDropdown.d.ts

@@ -1,89 +0,0 @@
-import React, { ElementType, HTMLAttributes, RefObject } from 'react';
-import type { Placements } from '../../types';
-export type Directions = 'start' | 'end';
-export type Breakpoints = {
-    xs: Directions;
-} | {
-    sm: Directions;
-} | {
-    md: Directions;
-} | {
-    lg: Directions;
-} | {
-    xl: Directions;
-} | {
-    xxl: Directions;
-};
-export type Alignments = Directions | Breakpoints;
-export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIElement> {
-    /**
-     * Set aligment of dropdown menu.
-     *
-     * @type 'start' | 'end' | { xs: 'start' | 'end' } | { sm: 'start' | 'end' } | { md: 'start' | 'end' } | { lg: 'start' | 'end' } | { xl: 'start' | 'end'} | { xxl: 'start' | 'end'}
-     */
-    alignment?: Alignments;
-    /**
-     * Configure the auto close behavior of the dropdown:
-     * - `true` - the dropdown will be closed by clicking outside or inside the dropdown menu.
-     * - `false` - the dropdown will be closed by clicking the toggle button and manually calling hide or toggle method. (Also will not be closed by pressing esc key)
-     * - `'inside'` - the dropdown will be closed (only) by clicking inside the dropdown menu.
-     * - `'outside'` - the dropdown will be closed (only) by clicking outside the dropdown menu.
-     */
-    autoClose?: 'inside' | 'outside' | boolean;
-    /**
-     * A string of all className you want applied to the base component.
-     */
-    className?: string;
-    /**
-     * Component used for the root node. Either a string to use a HTML element or a component.
-     */
-    component?: string | ElementType;
-    /**
-     * Sets a darker color scheme to match a dark navbar.
-     */
-    dark?: boolean;
-    /**
-     * Sets a specified  direction and location of the dropdown menu.
-     */
-    direction?: 'center' | 'dropup' | 'dropup-center' | 'dropend' | 'dropstart';
-    /**
-     * Callback fired when the component requests to be hidden.
-     */
-    onHide?: () => void;
-    /**
-     * Callback fired when the component requests to be shown.
-     */
-    onShow?: () => void;
-    /**
-     * Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.
-     *
-     * @type 'auto' | 'top-end' | 'top' | 'top-start' | 'bottom-end' | 'bottom' | 'bottom-start' | 'right-start' | 'right' | 'right-end' | 'left-start' | 'left' | 'left-end'
-     */
-    placement?: Placements;
-    /**
-     * If you want to disable dynamic positioning set this property to `true`.
-     */
-    popper?: boolean;
-    /**
-     * Generates dropdown menu using createPortal.
-     *
-     * @since 4.8.0
-     */
-    portal?: boolean;
-    /**
-     * Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item.
-     */
-    variant?: 'btn-group' | 'dropdown' | 'input-group' | 'nav-item';
-    /**
-     * Toggle the visibility of dropdown menu component.
-     */
-    visible?: boolean;
-}
-interface ContextProps extends CDropdownProps {
-    dropdownToggleRef: RefObject<any> | undefined;
-    setVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>;
-    portal: boolean;
-}
-export declare const CDropdownContext: React.Context<ContextProps>;
-export declare const CDropdown: React.ForwardRefExoticComponent<CDropdownProps & React.RefAttributes<HTMLDivElement | HTMLLIElement>>;
-export {};

package/dist/components/dropdown copy/CDropdownMenu.d.ts

@@ -1,13 +0,0 @@
-import { ElementType, FC, HTMLAttributes } from 'react';
-import { PopperChildrenProps } from 'react-popper';
-export interface CDropdownMenuProps extends HTMLAttributes<HTMLDivElement | HTMLUListElement>, Omit<PopperChildrenProps, 'arrowProps' | 'forceUpdate' | 'hasPopperEscaped' | 'isReferenceHidden' | 'placement' | 'ref' | 'style' | 'update'> {
-    /**
-     * A string of all className you want applied to the base component.
-     */
-    className?: string;
-    /**
-     * Component used for the root node. Either a string to use a HTML element or a component.
-     */
-    component?: string | ElementType;
-}
-export declare const CDropdownMenu: FC<CDropdownMenuProps>;

package/dist/components/dropdown copy/CDropdownToggle.d.ts

@@ -1,24 +0,0 @@
-import { FC } from 'react';
-import { CButtonProps } from '../button/CButton';
-import type { Triggers } from '../../types';
-export interface CDropdownToggleProps extends Omit<CButtonProps, 'type'> {
-    /**
-     * Enables pseudo element caret on toggler.
-     */
-    caret?: boolean;
-    /**
-     * Create a custom toggler which accepts any content.
-     */
-    custom?: boolean;
-    /**
-     * Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of `.dropdown-toggle-split` className for proper spacing around the dropdown caret.
-     */
-    split?: boolean;
-    /**
-     * Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.
-     *
-     * @type 'hover' | 'focus' | 'click'
-     */
-    trigger?: Triggers | Triggers[];
-}
-export declare const CDropdownToggle: FC<CDropdownToggleProps>;

package/dist/components/nav/CNav.d.ts

@@ -1,20 +0,0 @@
-import React, { ElementType, HTMLAttributes } from 'react';
-export interface CNavProps extends HTMLAttributes<HTMLDivElement | HTMLUListElement | HTMLOListElement> {
-    /**
-     * A string of all className you want applied to the base component.
-     */
-    className?: string;
-    /**
-     * Component used for the root node. Either a string to use a HTML element or a component.
-     */
-    component?: string | ElementType;
-    /**
-     * Specify a layout type for component.
-     */
-    layout?: 'fill' | 'justified';
-    /**
-     * Set the nav variant to tabs or pills.
-     */
-    variant?: 'pills' | 'tabs' | 'underline';
-}
-export declare const CNav: React.ForwardRefExoticComponent<CNavProps & React.RefAttributes<HTMLDivElement | HTMLOListElement | HTMLUListElement>>;