@coreui/react 4.4.1 → 4.5.1

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.1",
+  "version": "4.5.1",
   "description": "UI Components Library for React.js",
   "keywords": [
     "react",
@@ -36,7 +36,7 @@
   },
   "devDependencies": {
     "@popperjs/core": "^2.11.5",
-    "@rollup/plugin-commonjs": "^23.0.4",
+    "@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",
@@ -50,7 +50,7 @@
     "react-dom": "^18.2.0",
     "react-popper": "^2.2.5",
     "react-transition-group": "^4.4.5",
-    "rollup": "^3.7.2",
+    "rollup": "^3.7.5",
     "tslib": "^2.4.1",
     "typescript": "^4.9.4"
   },

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/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/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/popover/CPopover.tsx

@@ -1,17 +1,17 @@
-import React, { FC, ReactNode, useRef, useState } from 'react'
+import React, { FC, HTMLAttributes, ReactNode, useRef, useEffect, useState } from 'react'
 import { createPortal } from 'react-dom'
-
-import classNames from 'classnames'
 import PropTypes from 'prop-types'
+import classNames from 'classnames'
 import { usePopper } from 'react-popper'
 import { Transition } from 'react-transition-group'
 
 import { Triggers, triggerPropType } from '../Types'
-import { useEffect } from 'react'
 
-export interface CPopoverProps {
-  // TODO: find solution to not use any
-  children: any
+export interface CPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string
   /**
    * Content node for your component.
    */
@@ -50,6 +50,7 @@ export interface CPopoverProps {
 
 export const CPopover: FC<CPopoverProps> = ({
   children,
+  className,
   content,
   offset = [0, 8],
   onHide,
@@ -95,7 +96,7 @@ export const CPopover: FC<CPopoverProps> = ({
 
   return (
     <>
-      {React.cloneElement(children, {
+      {React.cloneElement(children as React.ReactElement<any>, {
         ref: setReferenceElement,
         ...((trigger === 'click' || trigger.includes('click')) && {
           onClick: () => setVisible(!_visible),
@@ -131,6 +132,7 @@ export const CPopover: FC<CPopoverProps> = ({
                     `popover bs-popover-${
                       placement === 'left' ? 'start' : placement === 'right' ? 'end' : placement
                     }`,
+                    className,
                     transitionClass,
                   )}
                   ref={setPopperElement}
@@ -153,7 +155,8 @@ export const CPopover: FC<CPopoverProps> = ({
 }
 
 CPopover.propTypes = {
-  children: PropTypes.any,
+  children: PropTypes.node,
+  className: PropTypes.string,
   content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   offset: PropTypes.any, // TODO: find good proptype
   onHide: PropTypes.func,

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/tooltip/CTooltip.tsx

@@ -1,6 +1,5 @@
-import React, { FC, ReactNode, useRef, useState } from 'react'
+import React, { FC, HTMLAttributes, ReactNode, useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
-
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
 import { usePopper } from 'react-popper'
@@ -8,9 +7,11 @@ import { Transition } from 'react-transition-group'
 
 import { Triggers, triggerPropType } from '../Types'
 
-export interface CTooltipProps {
-  // TODO: find solution to not use any
-  children: any
+export interface CTooltipProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string
   /**
    * Content node for your component.
    */
@@ -45,6 +46,7 @@ export interface CTooltipProps {
 
 export const CTooltip: FC<CTooltipProps> = ({
   children,
+  className,
   content,
   offset = [0, 0],
   onHide,
@@ -73,6 +75,10 @@ export const CTooltip: FC<CTooltipProps> = ({
     placement: placement,
   })
 
+  useEffect(() => {
+    setVisible(visible)
+  }, [visible])
+
   const getTransitionClass = (state: string) => {
     return state === 'entering'
       ? 'fade'
@@ -85,7 +91,7 @@ export const CTooltip: FC<CTooltipProps> = ({
 
   return (
     <>
-      {React.cloneElement(children, {
+      {React.cloneElement(children as React.ReactElement<any>, {
         ref: setReferenceElement,
         ...((trigger === 'click' || trigger.includes('click')) && {
           onClick: () => setVisible(!_visible),
@@ -121,6 +127,7 @@ export const CTooltip: FC<CTooltipProps> = ({
                     `tooltip bs-tooltip-${
                       placement === 'left' ? 'start' : placement === 'right' ? 'end' : placement
                     }`,
+                    className,
                     transitionClass,
                   )}
                   ref={setPopperElement}
@@ -142,7 +149,7 @@ export const CTooltip: FC<CTooltipProps> = ({
 }
 
 CTooltip.propTypes = {
-  children: PropTypes.any,
+  children: PropTypes.node,
   content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   offset: PropTypes.any, // TODO: find good proptype
   onHide: PropTypes.func,

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