@coreui/react 4.3.1 → 4.4.1

package/dist/utils/hooks/useForkedRef.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare type AssignableRef<ValueType> = {
+export type AssignableRef<ValueType> = {
     bivarianceHack(instance: ValueType | null): void;
 }['bivarianceHack'] | React.MutableRefObject<ValueType | null>;
 export declare function useForkedRef<RefValueType = any>(...refs: (AssignableRef<RefValueType> | null | undefined)[]): ((node: any) => void) | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react",
-  "version": "4.3.1",
+  "version": "4.4.1",
   "description": "UI Components Library for React.js",
   "keywords": [
     "react",
@@ -32,28 +32,27 @@
     "src/"
   ],
   "scripts": {
-    "build": "rollup -c"
+    "build": "rollup -c --bundleConfigAsCjs"
   },
   "devDependencies": {
     "@popperjs/core": "^2.11.5",
-    "@rollup/plugin-commonjs": "^22.0.1",
-    "@rollup/plugin-node-resolve": "^13.3.0",
-    "@rollup/plugin-typescript": "^8.3.4",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.3.0",
-    "@types/react": "18.0.15",
+    "@rollup/plugin-commonjs": "^23.0.4",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-typescript": "^10.0.1",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@types/react": "18.0.26",
     "@types/react-dom": "^18.0.6",
     "@types/react-transition-group": "^4.4.5",
-    "classnames": "^2.3.1",
+    "classnames": "^2.3.2",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-popper": "^2.2.5",
     "react-transition-group": "^4.4.5",
-    "rollup": "^2.77.2",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "tslib": "^2.4.0",
-    "typescript": "^4.7.4"
+    "rollup": "^3.7.2",
+    "tslib": "^2.4.1",
+    "typescript": "^4.9.4"
   },
   "peerDependencies": {
     "react": ">=17",

package/src/components/button/CButton.tsx

@@ -1,11 +1,11 @@
-import React, { ButtonHTMLAttributes, ElementType, forwardRef } from 'react'
+import React, { ElementType, forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
 import { Colors, Shapes, colorPropType } from '../Types'
-import { CLink } from '../link/CLink'
+import { CLink, CLinkProps } from '../link/CLink'
 
-export interface CButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+export interface CButtonProps extends Omit<CLinkProps, 'size'> {
   /**
    * Toggle the active state for the component.
    */

package/src/components/carousel/CCarousel.tsx

@@ -235,7 +235,7 @@ export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
           <div className="carousel-inner">
             {Children.map(children, (child, index) => {
               if (React.isValidElement(child)) {
-                return React.cloneElement(child, {
+                return React.cloneElement(child as React.ReactElement<any>, {
                   active: active === index ? true : false,
                   direction: direction,
                   key: index,

package/src/components/dropdown/CDropdown.tsx

@@ -56,10 +56,8 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
   dark?: boolean
   /**
    * Sets a specified  direction and location of the dropdown menu.
-   *
-   * @type 'dropup' | 'dropend' | 'dropstart'
    */
-  direction?: 'dropup' | 'dropend' | 'dropstart'
+  direction?: 'center' | 'dropup' | 'dropup-center' | 'dropend' | 'dropstart'
   /**
    * Callback fired when the component requests to be hidden.
    */
@@ -146,7 +144,11 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
       {
         show: _visible,
       },
-      direction,
+      direction === 'center'
+        ? 'dropdown-center'
+        : direction === 'dropup-center'
+        ? 'dropup dropup-center'
+        : direction,
       className,
     )
 
@@ -202,7 +204,7 @@ CDropdown.propTypes = {
   className: PropTypes.string,
   component: PropTypes.elementType,
   dark: PropTypes.bool,
-  direction: PropTypes.oneOf(['dropup', 'dropend', 'dropstart']),
+  direction: PropTypes.oneOf(['center', 'dropup', 'dropup-center', 'dropend', 'dropstart']),
   onHide: PropTypes.func,
   onShow: PropTypes.func,
   placement: placementPropType,

package/src/components/dropdown/CDropdownMenu.tsx

@@ -86,10 +86,18 @@ export const CDropdownMenu: FC<CDropdownMenuProps> = ({
 
   let _placement: Placements = placement
 
+  if (direction === 'center') {
+    _placement = 'bottom'
+  }
+
   if (direction === 'dropup') {
     _placement = 'top-start'
   }
 
+  if (direction === 'dropup-center') {
+    _placement = 'top'
+  }
+
   if (direction === 'dropend') {
     _placement = 'right-start'
   }

package/src/components/dropdown/CDropdownToggle.tsx

@@ -75,7 +75,7 @@ export const CDropdownToggle: FC<CDropdownToggleProps> = ({
   const Toggler = (ref?: React.Ref<any>) => {
     return custom && React.isValidElement(children) ? (
       <>
-        {React.cloneElement(children, {
+        {React.cloneElement(children as React.ReactElement<any>, {
           'aria-expanded': visible,
           ...(!rest.disabled && { ...triggers }),
           ref: useForkedRef(ref, dropdownToggleRef),

package/src/components/form/CFormLabel.tsx

@@ -1,8 +1,8 @@
-import React, { forwardRef, AllHTMLAttributes } from 'react'
+import React, { forwardRef, LabelHTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-export interface CFormLabelProps extends AllHTMLAttributes<HTMLLabelElement> {
+export interface CFormLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
   /**
    * A string of all className you want applied to the component.
    */

package/src/components/form/CFormRange.tsx

@@ -38,7 +38,7 @@ export interface CFormRangeProps extends InputHTMLAttributes<HTMLInputElement> {
   /**
    * Specifies the interval between legal numbers in the component.
    */
-  steps: number
+  step?: number
   /**
    * The `value` attribute of component.
    *

package/src/components/form/CInputGroupText.tsx

@@ -1,8 +1,9 @@
-import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
+import React, { ElementType, forwardRef, LabelHTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-export interface CInputGroupTextProps extends HTMLAttributes<HTMLLabelElement | HTMLSpanElement> {
+export interface CInputGroupTextProps
+  extends LabelHTMLAttributes<HTMLLabelElement | HTMLSpanElement> {
   /**
    * A string of all className you want applied to the component.
    */

package/src/components/form/__tests__/CFormRange.spec.tsx

@@ -4,7 +4,7 @@ import '@testing-library/jest-dom/extend-expect'
 import { CFormRange } from '../../../index'
 
 test('loads and displays CFormRange component', async () => {
-  const { container } = render(<CFormRange steps={3} />)
+  const { container } = render(<CFormRange step={3} />)
   expect(container).toMatchSnapshot()
 })
 
@@ -12,7 +12,7 @@ test('CFormRange customize', async () => {
   const { container } = render(
     <CFormRange
       className="bazinga"
-      steps={2}
+      step={2}
       disabled={true}
       max={150}
       min={20}

package/src/components/form/__tests__/CInputGroupText.spec.tsx

@@ -8,6 +8,15 @@ test('loads and displays CInputGroupText component', async () => {
   expect(container).toMatchSnapshot()
 })
 
+test('renders CInputGroupText component as a label', async () => {
+  const { container } = render(
+    <CInputGroupText component="label" htmlFor="input">
+      Test
+    </CInputGroupText>,
+  )
+  expect(container).toMatchSnapshot()
+})
+
 test('CInputGroupText customize', async () => {
   const { container } = render(<CInputGroupText className="bazinga">Test</CInputGroupText>)
   expect(container).toMatchSnapshot()

package/src/components/form/__tests__/__snapshots__/CInputGroupText.spec.tsx.snap

@@ -19,3 +19,14 @@ exports[`loads and displays CInputGroupText component 1`] = `
   </span>
 </div>
 `;
+
+exports[`renders CInputGroupText component as a label 1`] = `
+<div>
+  <label
+    class="input-group-text"
+    for="input"
+  >
+    Test
+  </label>
+</div>
+`;

package/src/components/form/index.ts

@@ -1,5 +1,7 @@
 import { CForm } from './CForm'
 import { CFormCheck } from './CFormCheck'
+import { CFormControlValidation } from './CFormControlValidation'
+import { CFormControlWrapper } from './CFormControlWrapper'
 import { CFormFeedback } from './CFormFeedback'
 import { CFormFloating } from './CFormFloating'
 import { CFormInput } from './CFormInput'
@@ -15,6 +17,8 @@ import { CInputGroupText } from './CInputGroupText'
 export {
   CForm,
   CFormCheck,
+  CFormControlValidation,
+  CFormControlWrapper,
   CFormFeedback,
   CFormFloating,
   CFormInput,

package/src/components/header/CHeaderBrand.tsx

@@ -1,8 +1,9 @@
-import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
+import React, { ElementType, forwardRef, AnchorHTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-export interface CHeaderBrandProps extends HTMLAttributes<HTMLAnchorElement | HTMLSpanElement> {
+export interface CHeaderBrandProps
+  extends AnchorHTMLAttributes<HTMLAnchorElement | HTMLSpanElement> {
   /**
    * A string of all className you want applied to the component.
    */

package/src/components/link/CLink.tsx

@@ -2,7 +2,7 @@ import React, { AllHTMLAttributes, ElementType, forwardRef, MouseEvent } from 'r
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-export interface CLinkProps extends AllHTMLAttributes<HTMLElement> {
+export interface CLinkProps extends AllHTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {
   /**
    * Toggle the active state for the component.
    */
@@ -36,7 +36,7 @@ export const CLink = forwardRef<HTMLButtonElement | HTMLAnchorElement, CLinkProp
         {...(active && { 'aria-current': 'page' })}
         {...(Component === 'a' && disabled && { 'aria-disabled': true, tabIndex: -1 })}
         {...((Component === 'a' || Component === 'button') && {
-          onClick: (event: MouseEvent<HTMLElement>) => {
+          onClick: (event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
             event.preventDefault
             !disabled && rest.onClick && rest.onClick(event)
           },

package/src/components/list-group/CListGroupItem.tsx

@@ -1,4 +1,4 @@
-import React, { ElementType, HTMLAttributes, forwardRef } from 'react'
+import React, { ElementType, AnchorHTMLAttributes, forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
@@ -6,7 +6,7 @@ import { Colors, colorPropType } from '../Types'
 import { CLink } from '../link/CLink'
 
 export interface CListGroupItemProps
-  extends HTMLAttributes<HTMLLIElement | HTMLAnchorElement | HTMLButtonElement> {
+  extends AnchorHTMLAttributes<HTMLLIElement | HTMLAnchorElement | HTMLButtonElement> {
   /**
    * Toggle the active state for the component.
    */

package/src/components/modal/CModal.tsx

@@ -171,6 +171,12 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
     useLayoutEffect(() => {
       if (_visible) {
         document.body.classList.add('modal-open')
+
+        if (backdrop) {
+          document.body.style.overflow = 'hidden'
+          document.body.style.paddingRight = '0px'
+        }
+
         setTimeout(
           () => {
             modalRef.current?.focus()
@@ -179,8 +185,19 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
         )
       } else {
         document.body.classList.remove('modal-open')
+
+        if (backdrop) {
+          document.body.style.removeProperty('overflow')
+          document.body.style.removeProperty('padding-right')
+        }
+      }
+      return () => {
+        document.body.classList.remove('modal-open')
+        if (backdrop) {
+          document.body.style.removeProperty('overflow')
+          document.body.style.removeProperty('padding-right')
+        }
       }
-      return () => document.body.classList.remove('modal-open')
     }, [_visible])
 
     const handleClickOutside = (event: Event) => {

package/src/components/nav/CNavGroup.tsx

@@ -124,7 +124,10 @@ export const CNavGroup = forwardRef<HTMLLIElement, CNavGroupProps>(
             >
               {React.Children.map(children, (child, index) => {
                 if (React.isValidElement(child)) {
-                  return React.cloneElement(child, { key: index, idx: `${idx}.${index}` })
+                  return React.cloneElement(child as React.ReactElement<any>, {
+                    key: index,
+                    idx: `${idx}.${index}`,
+                  })
                 }
                 return
               })}

package/src/components/sidebar/CSidebarNav.tsx

@@ -29,7 +29,10 @@ export const CSidebarNav = forwardRef<HTMLUListElement, CSidebarNavProps>(
         <CNavContext.Provider value={CNavContextValues}>
           {React.Children.map(children, (child, index) => {
             if (React.isValidElement(child)) {
-              return React.cloneElement(child, { key: index, idx: `${index}` })
+              return React.cloneElement(child as React.ReactElement<any>, {
+                key: index,
+                idx: `${index}`,
+              })
             }
             return
           })}

package/src/components/toast/CToastClose.tsx

@@ -3,7 +3,10 @@ import PropTypes from 'prop-types'
 import { CToastContext } from './CToast'
 import { CCloseButton, CCloseButtonProps } from '../close-button/CCloseButton'
 
-export interface CToastCloseProps extends CCloseButtonProps {
+import type { CButtonProps } from '../button/CButton'
+
+type CombineButtonProps = CCloseButtonProps & CButtonProps
+export interface CToastCloseProps extends CombineButtonProps {
   /**
    * Component used for the root node. Either a string to use a HTML element or a component.
    */

package/src/components/toast/__tests__/__snapshots__/CToast.spec.tsx.snap

@@ -53,6 +53,19 @@ exports[`CToast customize 4`] = `
 `;
 
 exports[`CToast customize 5`] = `
+<div>
+  <div
+    aria-atomic="true"
+    aria-live="assertive"
+    class="toast fade bg-warning border-0 bazinga showing"
+    role="alert"
+  >
+    Test
+  </div>
+</div>
+`;
+
+exports[`CToast customize 6`] = `
 <div>
   <div
     aria-atomic="true"