@coreui/react 4.4.1 → 4.5.0

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.0",
   "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/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/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