@coreui/react 4.4.0 → 4.5.0

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/dist/utils/index.d.ts

@@ -0,0 +1,2 @@
+import isVisible from './isVisible';
+export { isVisible };

package/dist/utils/isVisible.d.ts

@@ -0,0 +1,2 @@
+declare const isVisible: (element: HTMLElement) => boolean;
+export default isVisible;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react",
-  "version": "4.4.0",
+  "version": "4.5.0",
   "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.7",
+    "@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.5",
+    "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

@@ -3,6 +3,7 @@ import React, {
   createContext,
   forwardRef,
   HTMLAttributes,
+  TouchEvent,
   useState,
   useEffect,
   useRef,
@@ -10,18 +11,9 @@ import React, {
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { isVisible } from '../../utils'
 import { useForkedRef } from '../../utils/hooks'
 
-const isVisible = (element: HTMLDivElement) => {
-  const rect = element.getBoundingClientRect()
-  return (
-    rect.top >= 0 &&
-    rect.left >= 0 &&
-    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
-    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
-  )
-}
-
 export interface CCarouselProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * index of the active item.
@@ -59,6 +51,12 @@ export interface CCarouselProps extends HTMLAttributes<HTMLDivElement> {
    * If set to 'hover', pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to false, hovering over the carousel won't pause it.
    */
   pause?: boolean | 'hover'
+  /**
+   * Set whether the carousel should support left/right swipe interactions on touchscreen devices.
+   *
+   * @since 4.5.0
+   */
+  touch?: boolean
   /**
    * Set type of the transition.
    */
@@ -93,6 +91,7 @@ export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
       onSlid,
       onSlide,
       pause = 'hover',
+      touch = true,
       transition,
       wrap = true,
       ...rest
@@ -108,6 +107,7 @@ export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
     const [customInterval, setCustomInterval] = useState<boolean | number>()
     const [direction, setDirection] = useState<string>('next')
     const [itemsNumber, setItemsNumber] = useState<number>(0)
+    const [touchPosition, setTouchPosition] = useState<number | null>(null)
     const [visible, setVisible] = useState<boolean>()
 
     useEffect(() => {
@@ -202,11 +202,38 @@ export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
       }
     }
 
+    const handleTouchMove = (e: TouchEvent) => {
+      const touchDown = touchPosition
+
+      if (touchDown === null) {
+        return
+      }
+
+      const currentTouch = e.touches[0].clientX
+      const diff = touchDown - currentTouch
+
+      if (diff > 5) {
+        handleControlClick('next')
+      }
+
+      if (diff < -5) {
+        handleControlClick('prev')
+      }
+
+      setTouchPosition(null)
+    }
+
+    const handleTouchStart = (e: TouchEvent) => {
+      const touchDown = e.touches[0].clientX
+      setTouchPosition(touchDown)
+    }
+
     return (
       <div
         className={_className}
         onMouseEnter={_pause}
         onMouseLeave={cycle}
+        {...(touch && { onTouchStart: handleTouchStart, onTouchMove: handleTouchMove })}
         {...rest}
         ref={forkedRef}
       >
@@ -271,6 +298,7 @@ CCarousel.propTypes = {
   onSlid: PropTypes.func,
   onSlide: PropTypes.func,
   pause: PropTypes.oneOf([false, 'hover']),
+  touch: PropTypes.bool,
   transition: PropTypes.oneOf(['slide', 'crossfade']),
   wrap: PropTypes.bool,
 }

package/src/components/form/CFormControlWrapper.tsx

@@ -12,6 +12,12 @@ export interface CFormControlWrapperProps extends CFormControlValidationProps {
    * @ignore
    */
   children?: ReactNode
+  /**
+   * A string of all className you want applied to the floating label wrapper.
+   *
+   * @since 4.5.0
+   */
+  floatingClassName?: string
   /**
    * Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.
    *
@@ -42,6 +48,7 @@ export const CFormControlWrapper: FC<CFormControlWrapperProps> = ({
   feedback,
   feedbackInvalid,
   feedbackValid,
+  floatingClassName,
   floatingLabel,
   id,
   invalid,
@@ -51,9 +58,20 @@ export const CFormControlWrapper: FC<CFormControlWrapperProps> = ({
   valid,
 }) => {
   return floatingLabel ? (
-    <CFormFloating>
+    <CFormFloating className={floatingClassName}>
       {children}
       <CFormLabel htmlFor={id}>{label || floatingLabel}</CFormLabel>
+      {text && <CFormText id={describedby}>{text}</CFormText>}
+      <CFormControlValidation
+        describedby={describedby}
+        feedback={feedback}
+        feedbackInvalid={feedbackInvalid}
+        feedbackValid={feedbackValid}
+        floatingLabel={floatingLabel}
+        invalid={invalid}
+        tooltipFeedback={tooltipFeedback}
+        valid={valid}
+      />
     </CFormFloating>
   ) : (
     <>
@@ -76,6 +94,7 @@ export const CFormControlWrapper: FC<CFormControlWrapperProps> = ({
 
 CFormControlWrapper.propTypes = {
   children: PropTypes.node,
+  floatingClassName: PropTypes.string,
   floatingLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
   label: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
   text: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),

package/src/components/form/CFormInput.tsx

@@ -58,6 +58,7 @@ export const CFormInput = forwardRef<HTMLInputElement, CFormInputProps>(
       feedback,
       feedbackInvalid,
       feedbackValid,
+      floatingClassName,
       floatingLabel,
       id,
       invalid,
@@ -101,6 +102,7 @@ export const CFormInput = forwardRef<HTMLInputElement, CFormInputProps>(
         feedback={feedback}
         feedbackInvalid={feedbackInvalid}
         feedbackValid={feedbackValid}
+        floatingClassName={floatingClassName}
         floatingLabel={floatingLabel}
         id={id}
         invalid={invalid}

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/CFormSelect.tsx

@@ -52,6 +52,7 @@ export const CFormSelect = forwardRef<HTMLSelectElement, CFormSelectProps>(
       feedback,
       feedbackInvalid,
       feedbackValid,
+      floatingClassName,
       floatingLabel,
       htmlSize,
       id,
@@ -81,6 +82,7 @@ export const CFormSelect = forwardRef<HTMLSelectElement, CFormSelectProps>(
         feedback={feedback}
         feedbackInvalid={feedbackInvalid}
         feedbackValid={feedbackValid}
+        floatingClassName={floatingClassName}
         floatingLabel={floatingLabel}
         id={id}
         invalid={invalid}

package/src/components/form/CFormTextarea.tsx

@@ -44,6 +44,7 @@ export const CFormTextarea = forwardRef<HTMLTextAreaElement, CFormTextareaProps>
       feedback,
       feedbackInvalid,
       feedbackValid,
+      floatingClassName,
       floatingLabel,
       id,
       invalid,
@@ -70,6 +71,7 @@ export const CFormTextarea = forwardRef<HTMLTextAreaElement, CFormTextareaProps>
         feedback={feedback}
         feedbackInvalid={feedbackInvalid}
         feedbackValid={feedbackValid}
+        floatingClassName={floatingClassName}
         floatingLabel={floatingLabel}
         id={id}
         invalid={invalid}

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

@@ -108,6 +108,7 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
       transition = true,
       unmountOnClose = true,
       visible,
+      ...rest
     },
     ref,
   ) => {
@@ -233,7 +234,9 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
               scrollable={scrollable}
               size={size}
             >
-              <CModalContent ref={modalContentRef}>{children}</CModalContent>
+              <CModalContent {...rest} ref={modalContentRef}>
+                {children}
+              </CModalContent>
             </CModalDialog>
           </div>
         </CModalContext.Provider>

package/src/components/sidebar/CSidebar.tsx

@@ -3,6 +3,7 @@ import { createPortal } from 'react-dom'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { isVisible } from '../../utils'
 import { useForkedRef } from '../../utils/hooks'
 import { CBackdrop } from '../backdrop/CBackdrop'
 
@@ -52,16 +53,6 @@ export interface CSidebarProps extends HTMLAttributes<HTMLDivElement> {
 const isOnMobile = (element: HTMLDivElement) =>
   Boolean(getComputedStyle(element).getPropertyValue('--cui-is-mobile'))
 
-const isVisible = (element: HTMLDivElement) => {
-  const rect = element.getBoundingClientRect()
-  return (
-    rect.top >= 0 &&
-    rect.left >= 0 &&
-    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
-    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
-  )
-}
-
 export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
   (
     {

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/utils/index.ts

@@ -0,0 +1,3 @@
+import isVisible from './isVisible'
+
+export { isVisible }

package/src/utils/isVisible.ts

@@ -0,0 +1,11 @@
+const isVisible = (element: HTMLElement) => {
+  const rect = element.getBoundingClientRect()
+  return (
+    rect.top >= 0 &&
+    rect.left >= 0 &&
+    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+  )
+}
+
+export default isVisible