@coreui/react 4.4.0 → 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.4.0",
+  "version": "4.4.1",
   "description": "UI Components Library for React.js",
   "keywords": [
     "react",
@@ -32,16 +32,16 @@
     "src/"
   ],
   "scripts": {
-    "build": "rollup -c"
+    "build": "rollup -c --bundleConfigAsCjs"
   },
   "devDependencies": {
     "@popperjs/core": "^2.11.5",
-    "@rollup/plugin-commonjs": "^22.0.2",
-    "@rollup/plugin-node-resolve": "^13.3.0",
-    "@rollup/plugin-typescript": "^8.5.0",
+    "@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.19",
+    "@types/react": "18.0.26",
     "@types/react-dom": "^18.0.6",
     "@types/react-transition-group": "^4.4.5",
     "classnames": "^2.3.2",
@@ -50,10 +50,9 @@
     "react-dom": "^18.2.0",
     "react-popper": "^2.2.5",
     "react-transition-group": "^4.4.5",
-    "rollup": "^2.79.0",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "tslib": "^2.4.0",
-    "typescript": "^4.8.3"
+    "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/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/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.
    */