@coreui/react 4.7.0 → 4.9.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react",
-  "version": "4.7.0",
+  "version": "4.9.0-alpha.0",
   "description": "UI Components Library for React.js",
   "keywords": [
     "react",
@@ -37,15 +37,15 @@
     "test:update": "jest --coverage --updateSnapshot"
   },
   "devDependencies": {
-    "@popperjs/core": "^2.11.6",
-    "@rollup/plugin-commonjs": "^24.0.1",
-    "@rollup/plugin-node-resolve": "^15.0.1",
-    "@rollup/plugin-typescript": "^11.0.0",
+    "@popperjs/core": "^2.11.7",
+    "@rollup/plugin-commonjs": "^24.1.0",
+    "@rollup/plugin-node-resolve": "^15.0.2",
+    "@rollup/plugin-typescript": "^11.1.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
-    "@types/react": "18.0.28",
-    "@types/react-dom": "^18.0.11",
-    "@types/react-transition-group": "^4.4.5",
+    "@types/react": "18.2.6",
+    "@types/react-dom": "^18.2.4",
+    "@types/react-transition-group": "^4.4.6",
     "classnames": "^2.3.2",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
@@ -54,12 +54,13 @@
     "react-dom": "^18.2.0",
     "react-popper": "^2.3.0",
     "react-transition-group": "^4.4.5",
-    "rollup": "^3.19.1",
+    "rollup": "^3.21.6",
     "tslib": "^2.5.0",
-    "ts-jest": "^29.0.5",
+    "ts-jest": "^29.1.0",
     "typescript": "^4.9.5"
   },
   "peerDependencies": {
+    "@coreui/coreui": "4.3.0-alpha.0",
     "react": ">=17",
     "react-dom": ">=17"
   }

package/src/components/accordion/index.ts

@@ -1,7 +1,6 @@
 import { CAccordion } from './CAccordion'
 import { CAccordionBody } from './CAccordionBody'
 import { CAccordionButton } from './CAccordionButton'
-import { CAccordionCollapse } from './CAccordionCollapse'
 import { CAccordionHeader } from './CAccordionHeader'
 import { CAccordionItem } from './CAccordionItem'
 
@@ -9,7 +8,6 @@ export {
   CAccordion,
   CAccordionBody,
   CAccordionButton,
-  CAccordionCollapse,
   CAccordionHeader,
   CAccordionItem,
 }

package/src/components/dropdown/CDropdown.tsx

@@ -3,6 +3,7 @@ import React, {
   ElementType,
   forwardRef,
   HTMLAttributes,
+  ReactNode,
   RefObject,
   useEffect,
   useRef,
@@ -77,6 +78,12 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
    * 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.
    */
@@ -87,10 +94,15 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
   visible?: boolean
 }
 
+const PopperManagerWrapper = ({ children, popper }: { children: ReactNode; popper: boolean }) => {
+  return popper ? <Manager>{children}</Manager> : <>{children}</>
+}
+
 interface ContextProps extends CDropdownProps {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   dropdownToggleRef: RefObject<any> | undefined
   setVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>
+  portal: boolean
 }
 
 export const CDropdownContext = createContext({} as ContextProps)
@@ -108,6 +120,7 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
       onShow,
       placement = 'bottom-start',
       popper = true,
+      portal = false,
       variant = 'btn-group',
       component = 'div',
       visible = false,
@@ -135,6 +148,7 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
       dropdownToggleRef,
       placement: placement,
       popper,
+      portal: portal,
       variant,
       visible: _visible,
       setVisible,
@@ -149,38 +163,31 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
       !_visible && onHide && onHide()
     }, [_visible])
 
-    const DropdownContent = () => {
-      return variant === 'input-group' ? (
-        <>{children}</>
-      ) : (
-        <Component
-          className={classNames(
-            variant === 'nav-item' ? 'nav-item dropdown' : variant,
-            {
-              'dropdown-center': direction === 'center',
-              'dropup dropup-center': direction === 'dropup-center',
-              direction: direction && direction !== 'center' && direction !== 'dropup-center',
-              show: _visible,
-            },
-            className,
-          )}
-          {...rest}
-          ref={forkedRef}
-        >
-          {children}
-        </Component>
-      )
-    }
-
     return (
       <CDropdownContext.Provider value={contextValues}>
-        {popper ? (
-          <Manager>
-            <DropdownContent />
-          </Manager>
-        ) : (
-          <DropdownContent />
-        )}
+        <PopperManagerWrapper popper={popper}>
+          {variant === 'input-group' ? (
+            <>{children}</>
+          ) : (
+            <Component
+              className={classNames(
+                variant === 'nav-item' ? 'nav-item dropdown' : variant,
+                {
+                  'dropdown-center': direction === 'center',
+                  'dropup dropup-center': direction === 'dropup-center',
+                  [`${direction}`]:
+                    direction && direction !== 'center' && direction !== 'dropup-center',
+                  show: _visible,
+                },
+                className,
+              )}
+              {...rest}
+              ref={forkedRef}
+            >
+              {children}
+            </Component>
+          )}
+        </PopperManagerWrapper>
       </CDropdownContext.Provider>
     )
   },
@@ -212,6 +219,7 @@ CDropdown.propTypes = {
   onShow: PropTypes.func,
   placement: placementPropType,
   popper: PropTypes.bool,
+  portal: PropTypes.bool,
   variant: PropTypes.oneOf(['btn-group', 'dropdown', 'input-group', 'nav-item']),
   visible: PropTypes.bool,
 }

package/src/components/dropdown/CDropdownMenu.tsx

@@ -4,6 +4,7 @@ import classNames from 'classnames'
 import { Popper, PopperChildrenProps } from 'react-popper'
 
 import { Alignments, CDropdownContext } from './CDropdown'
+import { CConditionalPortal } from '../conditional-portal'
 
 import type { Placements } from '../../types'
 
@@ -30,6 +31,21 @@ export interface CDropdownMenuProps
   component?: string | ElementType
 }
 
+const alignmentClassNames = (alignment: Alignments) => {
+  const classNames: string[] = []
+  if (typeof alignment === 'object') {
+    Object.keys(alignment).map((key) => {
+      classNames.push(`dropdown-menu${key === 'xs' ? '' : `-${key}`}-${alignment[key]}`)
+    })
+  }
+
+  if (typeof alignment === 'string') {
+    classNames.push(`dropdown-menu-${alignment}`)
+  }
+
+  return classNames
+}
+
 export const CDropdownMenu: FC<CDropdownMenuProps> = ({
   children,
   className,
@@ -44,6 +60,7 @@ export const CDropdownMenu: FC<CDropdownMenuProps> = ({
     dropdownToggleRef,
     placement,
     popper,
+    portal,
     visible,
     setVisible,
   } = useContext(CDropdownContext)
@@ -111,48 +128,35 @@ export const CDropdownMenu: FC<CDropdownMenuProps> = ({
     _placement = 'bottom-end'
   }
 
-  const alignmentClassNames = (alignment: Alignments) => {
-    const classNames: string[] = []
-    if (typeof alignment === 'object') {
-      Object.keys(alignment).map((key) => {
-        classNames.push(`dropdown-menu${key === 'xs' ? '' : `-${key}`}-${alignment[key]}`)
-      })
-    }
-
-    if (typeof alignment === 'string') {
-      classNames.push(`dropdown-menu-${alignment}`)
-    }
-
-    return classNames
-  }
-
   const dropdownMenuComponent = (style?: React.CSSProperties, ref?: React.Ref<HTMLDivElement>) => (
-    <Component
-      className={classNames(
-        'dropdown-menu',
-        {
-          'dropdown-menu-dark': dark,
-          show: visible,
-        },
-        alignment && alignmentClassNames(alignment),
-        className,
-      )}
-      ref={ref}
-      style={style}
-      role="menu"
-      aria-hidden={!visible}
-      {...(!popper && { 'data-coreui-popper': 'static' })}
-      {...rest}
-    >
-      {Component === 'ul'
-        ? React.Children.map(children, (child, index) => {
-            if (React.isValidElement(child)) {
-              return <li key={index}>{React.cloneElement(child)}</li>
-            }
-            return
-          })
-        : children}
-    </Component>
+    <CConditionalPortal portal={portal ?? false}>
+      <Component
+        className={classNames(
+          'dropdown-menu',
+          {
+            'dropdown-menu-dark': dark,
+            show: visible,
+          },
+          alignment && alignmentClassNames(alignment),
+          className,
+        )}
+        ref={ref}
+        style={style}
+        role="menu"
+        aria-hidden={!visible}
+        {...(!popper && { 'data-coreui-popper': 'static' })}
+        {...rest}
+      >
+        {Component === 'ul'
+          ? React.Children.map(children, (child, index) => {
+              if (React.isValidElement(child)) {
+                return <li key={index}>{React.cloneElement(child)}</li>
+              }
+              return
+            })
+          : children}
+      </Component>
+    </CConditionalPortal>
   )
 
   return popper && visible ? (

package/src/components/form/CFormCheck.tsx

@@ -112,7 +112,7 @@ export const CFormCheck = forwardRef<HTMLInputElement, CFormCheckProps>(
       if (inputRef.current && indeterminate) {
         inputRef.current.indeterminate = indeterminate
       }
-    }, [indeterminate])
+    }, [indeterminate, inputRef.current])
 
     const FormControl = () => (
       <input

package/src/components/offcanvas/COffcanvas.tsx

@@ -80,11 +80,9 @@ export const COffcanvas = forwardRef<HTMLDivElement, COffcanvasProps>(
     }, [visible])
 
     useEffect(() => {
-      if (_visible) {
-        if (!scroll) {
-          document.body.style.overflow = 'hidden'
-          document.body.style.paddingRight = '0px'
-        }
+      if (_visible && !scroll) {
+        document.body.style.overflow = 'hidden'
+        document.body.style.paddingRight = '0px'
         return
       }
 

package/src/components/popover/CPopover.tsx

@@ -8,7 +8,7 @@ import { Transition } from 'react-transition-group'
 import { triggerPropType } from '../../props'
 import type { Triggers } from '../../types'
 
-export interface CPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+export interface CPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'content'> {
   /**
    * A string of all className you want applied to the component.
    */

package/src/components/tooltip/CTooltip.tsx

@@ -8,7 +8,7 @@ import { Transition } from 'react-transition-group'
 import { triggerPropType } from '../../props'
 import type { Triggers } from '../../types'
 
-export interface CTooltipProps extends HTMLAttributes<HTMLDivElement> {
+export interface CTooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {
   /**
    * A string of all className you want applied to the component.
    */

package/dist/components/Types.d.ts

@@ -1,12 +0,0 @@
-import PropTypes from 'prop-types';
-export type Breakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
-export type Colors = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string;
-export declare const colorPropType: PropTypes.Requireable<string>;
-export type Placements = 'auto' | 'auto-start' | 'auto-end' | 'top-end' | 'top' | 'top-start' | 'bottom-end' | 'bottom' | 'bottom-start' | 'right-start' | 'right' | 'right-end' | 'left-start' | 'left' | 'left-end' | undefined;
-export declare const placementPropType: PropTypes.Requireable<Placements>;
-export type Shapes = 'rounded' | 'rounded-top' | 'rounded-end' | 'rounded-bottom' | 'rounded-start' | 'rounded-circle' | 'rounded-pill' | 'rounded-0' | 'rounded-1' | 'rounded-2' | 'rounded-3' | string;
-export declare const shapePropType: PropTypes.Requireable<string>;
-export type TextColors = Colors | 'white' | 'muted' | 'high-emphasis' | 'medium-emphasis' | 'disabled' | 'high-emphasis-inverse' | 'medium-emphasis-inverse' | 'disabled-inverse' | string;
-export declare const textColorsPropType: PropTypes.Requireable<string>;
-export type Triggers = 'hover' | 'focus' | 'click';
-export declare const triggerPropType: PropTypes.Requireable<Triggers>;

package/src/components/accordion/CAccordionCollapse.tsx

@@ -1,20 +0,0 @@
-import React, { forwardRef } from 'react'
-import PropTypes from 'prop-types'
-
-import { CCollapse, CCollapseProps } from '../collapse/CCollapse'
-
-export const CAccordionCollapse = forwardRef<HTMLDivElement, Omit<CCollapseProps, 'horizontal'>>(
-  ({ children, ...props }, ref) => {
-    return (
-      <CCollapse className="accordion-collapse" {...props} ref={ref}>
-        {children}
-      </CCollapse>
-    )
-  },
-)
-
-CAccordionCollapse.propTypes = {
-  children: PropTypes.node,
-}
-
-CAccordionCollapse.displayName = 'CAccordionCollapse'

package/src/components/accordion/__tests__/CAccordionCollapse.spec.tsx

@@ -1,10 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
-import { CAccordionCollapse } from '../../../index'
-
-test('loads and displays CAccordionCollapse component', async () => {
-  const { container } = render(<CAccordionCollapse>Test</CAccordionCollapse>)
-  expect(container.firstChild).toHaveClass('accordion-collapse')
-  expect(container).toMatchSnapshot()
-})