@coreui/react-pro 4.8.0 → 4.9.0-next.1

package/src/{utils/calendar.ts → components/calendar/utils.ts}

@@ -4,7 +4,7 @@ export const convertToLocalDate = (d: Date, locale: string, options = {}) =>
 export const convertToLocalTime = (d: Date, locale: string, options = {}) =>
   d.toLocaleTimeString(locale, options)
 
-export const createGroupsInArray = (arr: any[], numberOfGroups: number) => {
+export const createGroupsInArray = <T>(arr: T[], numberOfGroups: number): T[][] => {
   const perGroup = Math.ceil(arr.length / numberOfGroups)
   return new Array(numberOfGroups)
     .fill('')
@@ -15,52 +15,6 @@ export const getCurrentYear = () => new Date().getFullYear()
 
 export const getCurrentMonth = () => new Date().getMonth()
 
-export const getLocalDateFromString = (string: string, locale: string, time?: boolean) => {
-  const date = new Date(2013, 11, 31, 17, 19, 22)
-  let regex = time ? date.toLocaleString(locale) : date.toLocaleDateString(locale)
-  regex = regex
-    .replace('2013', '(?<year>[0-9]{2,4})')
-    .replace('12', '(?<month>[0-9]{1,2})')
-    .replace('31', '(?<day>[0-9]{1,2})')
-
-  if (time) {
-    regex = regex
-      .replace('5', '(?<hour>[0-9]{1,2})')
-      .replace('17', '(?<hour>[0-9]{1,2})')
-      .replace('19', '(?<minute>[0-9]{1,2})')
-      .replace('22', '(?<second>[0-9]{1,2})')
-      .replace('PM', '(?<ampm>[A-Z]{2})')
-  }
-
-  const rgx = RegExp(`${regex}`)
-  const partials = string.match(rgx)
-
-  if (partials === null) return
-
-  const newDate =
-    partials.groups &&
-    (time
-      ? new Date(
-          Number(partials.groups['year']),
-          Number(partials.groups['month']) - 1,
-          Number(partials.groups['day']),
-          partials.groups['ampm']
-            ? partials.groups['ampm'] === 'PM'
-              ? Number(partials.groups['hour']) + 12
-              : Number(partials.groups['hour'])
-            : Number(partials.groups['hour']),
-          Number(partials.groups['minute']),
-          Number(partials.groups['second']),
-        )
-      : new Date(
-          Number(partials.groups['year']),
-          Number(partials.groups['month']) - 1,
-          Number(partials.groups['day']),
-        ))
-
-  return newDate
-}
-
 export const getMonthName = (month: number, locale: string) => {
   const d = new Date()
   d.setDate(1)

package/src/components/callout/CCallout.tsx

@@ -2,7 +2,8 @@ import React, { forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { Colors, colorPropType } from '../Types'
+import { colorPropType } from '../../props'
+import type { Colors } from '../../types'
 
 export interface CCalloutProps extends HTMLAttributes<HTMLDivElement> {
   /**

package/src/components/card/CCard.tsx

@@ -2,7 +2,8 @@ import React, { forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { Colors, Gradients, colorPropType, gradientsPropType } from '../Types'
+import { colorPropType, gradientsPropType } from '../../props'
+import type { Colors, Gradients } from '../../types'
 
 export interface CCardProps extends HTMLAttributes<HTMLDivElement> {
   /**

package/src/components/carousel/CCarousel.tsx

@@ -12,7 +12,7 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
 import { isInViewport } from '../../utils'
-import { useForkedRef } from '../../utils/hooks'
+import { useForkedRef } from '../../hooks'
 
 export interface CCarouselProps extends HTMLAttributes<HTMLDivElement> {
   /**

package/src/components/carousel/CCarouselItem.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef, HTMLAttributes, useContext, useEffect, useState, use
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { useForkedRef } from '../../utils/hooks'
+import { useForkedRef } from '../../hooks'
 import { CCarouselContext } from './CCarousel'
 export interface CCarouselItemProps extends HTMLAttributes<HTMLDivElement> {
   /**

package/src/components/collapse/CCollapse.tsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { CSSTransition } from 'react-transition-group'
 
-import { useForkedRef } from '../../utils/hooks'
+import { useForkedRef } from '../../hooks'
 
 export interface CCollapseProps extends HTMLAttributes<HTMLDivElement> {
   /**

package/src/components/date-picker/CDatePicker.tsx

@@ -23,7 +23,7 @@ export interface CDatePickerProps
    * The id global attribute defines an identifier (ID) that must be unique in the whole document.
    *
    * The name attribute for the input element is generated based on the `id` property:
-   * - {id}-date
+   * - \{id\}-date
    */
   id?: string
   /**

package/src/components/date-range-picker/CDateRangePicker.tsx

@@ -12,9 +12,9 @@ import { CFormControlWrapper, CFormControlWrapperProps } from '../form/CFormCont
 import { CPicker, CPickerProps } from '../picker/CPicker'
 import { CTimePicker } from '../time-picker/CTimePicker'
 
-import { getLocalDateFromString } from '../../utils/calendar'
+import { getLocalDateFromString } from './utils'
 
-import { Colors } from '../Types'
+import { Colors } from '../../types'
 export interface CDateRangePickerProps
   extends Omit<CFormControlWrapperProps, 'floatingLabel'>,
     Omit<CPickerProps, 'autoClose' | 'component' | 'dark' | 'placeholder' | 'variant'>,
@@ -46,8 +46,8 @@ export interface CDateRangePickerProps
    * The id global attribute defines an identifier (ID) that must be unique in the whole document.
    *
    * The name attributes for input elements are generated based on the `id` property:
-   * - {id}-start-date
-   * - {id}-end-date
+   * - \{id\}-start-date
+   * - \{id\}-end-date
    */
   id?: string
   /**

package/src/components/date-range-picker/utils.ts

@@ -0,0 +1,49 @@
+export const getLocalDateFromString = (string: string, locale: string, time?: boolean) => {
+  if (!isNaN(Date.parse(string))) {
+    return new Date(Date.parse(string))
+  }
+
+  const date = new Date(2013, 11, 31, 17, 19, 22)
+  let regex = time ? date.toLocaleString(locale) : date.toLocaleDateString(locale)
+  regex = regex
+    .replace('2013', '(?<year>[0-9]{2,4})')
+    .replace('12', '(?<month>[0-9]{1,2})')
+    .replace('31', '(?<day>[0-9]{1,2})')
+
+  if (time) {
+    regex = regex
+      .replace('5', '(?<hour>[0-9]{1,2})')
+      .replace('17', '(?<hour>[0-9]{1,2})')
+      .replace('19', '(?<minute>[0-9]{1,2})')
+      .replace('22', '(?<second>[0-9]{1,2})')
+      .replace('PM', '(?<ampm>[A-Z]{2})')
+  }
+
+  const rgx = RegExp(`${regex}`)
+  const partials = string.match(rgx)
+
+  if (partials === null) return
+
+  const newDate =
+    partials.groups &&
+    (time
+      ? new Date(
+          Number(partials.groups['year']),
+          Number(partials.groups['month']) - 1,
+          Number(partials.groups['day']),
+          partials.groups['ampm']
+            ? partials.groups['ampm'] === 'PM'
+              ? Number(partials.groups['hour']) + 12
+              : Number(partials.groups['hour'])
+            : Number(partials.groups['hour']),
+          Number(partials.groups['minute']),
+          Number(partials.groups['second']),
+        )
+      : new Date(
+          Number(partials.groups['year']),
+          Number(partials.groups['month']) - 1,
+          Number(partials.groups['day']),
+        ))
+
+  return newDate
+}

package/src/components/dropdown/CDropdown.tsx

@@ -12,8 +12,9 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Manager } from 'react-popper'
 
-import { Placements, placementPropType } from '../Types'
-import { useForkedRef } from '../../utils/hooks'
+import { useForkedRef } from '../../hooks'
+import { placementPropType } from '../../props'
+import type { Placements } from '../../types'
 
 export type Directions = 'start' | 'end'
 

package/src/components/dropdown/CDropdownItem.tsx

@@ -2,8 +2,7 @@ import React, { ElementType, forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { CLinkProps } from '../link/CLink'
-import { CLink } from '../link/CLink'
+import { CLink, CLinkProps } from '../link/CLink'
 
 export interface CDropdownItemProps extends CLinkProps {
   /**

package/src/components/dropdown/CDropdownMenu.tsx

@@ -3,9 +3,10 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Popper, PopperChildrenProps } from 'react-popper'
 
-import { Placements } from '../Types'
 import { Alignments, CDropdownContext } from './CDropdown'
 
+import type { Placements } from '../../types'
+
 export interface CDropdownMenuProps
   extends HTMLAttributes<HTMLDivElement | HTMLUListElement>,
     Omit<

package/src/components/dropdown/CDropdownToggle.tsx

@@ -3,13 +3,14 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Reference } from 'react-popper'
 
-import { useForkedRef } from '../../utils/hooks'
-
-import { Triggers, triggerPropType } from '../Types'
-
 import { CButton, CButtonProps } from '../button/CButton'
+
 import { CDropdownContext } from './CDropdown'
 
+import { useForkedRef } from '../../hooks'
+import { triggerPropType } from '../../props'
+import type { Triggers } from '../../types'
+
 export interface CDropdownToggleProps extends Omit<CButtonProps, 'type'> {
   /**
    * Enables pseudo element caret on toggler.

package/src/components/element-cover/CElementCover.tsx

@@ -9,7 +9,7 @@ import React, {
 } from 'react'
 import classNames from 'classnames'
 
-import { useForkedRef } from '../../utils/hooks'
+import { useForkedRef } from '../../hooks'
 import { CSpinner } from '../spinner/CSpinner'
 
 interface CElementCoverProps extends HTMLAttributes<HTMLDivElement> {
@@ -21,14 +21,10 @@ interface CElementCoverProps extends HTMLAttributes<HTMLDivElement> {
    * Array of custom boundaries. Use to create custom cover area (instead of parent element area). Area is defined by four sides: 'top', 'bottom', 'right', 'left'. If side is not defined by any custom boundary it is equal to parent element boundary. Each custom boundary is object with keys:
    * - sides (array) - select boundaries of element to define boundaries. Sides names: 'top', 'bottom', 'right', 'left'.
    * - query (string) - query used to get element which define boundaries. Search will be done only inside parent element, by parent.querySelector(query) function.
-   *
-   * @type {sides: string[], query: string}[]
    */
-  boundaries?: { sides: string[]; query: string }[] // TODO: check if this is correct, TJ
+  boundaries?: { sides: string[]; query: string }[]
   /**
    * Opacity of the cover.
-   *
-   * @type number
    */
   opacity?: number
 }
@@ -36,17 +32,18 @@ export const CElementCover = forwardRef<HTMLDivElement, CElementCoverProps>(
   ({ children, className, boundaries, opacity = 0.4, ...rest }, ref) => {
     const elementCoverRef = useRef<HTMLDivElement>(null)
     const forkedRef = useForkedRef(ref, elementCoverRef)
-
     const [customBoundaries, setCustomBoundaries] = useState({})
 
     const getCustomBoundaries = () => {
       if (!elementCoverRef || !elementCoverRef.current || !boundaries) {
         return {}
       }
+
       const parent = elementCoverRef.current.parentElement
       if (!parent) {
         return {}
       }
+
       const parentCoords = parent.getBoundingClientRect()
       const customBoundaries = {}
       boundaries.forEach(({ sides, query }) => {
@@ -54,6 +51,7 @@ export const CElementCover = forwardRef<HTMLDivElement, CElementCoverProps>(
         if (!element || !sides) {
           return
         }
+
         const coords = element.getBoundingClientRect()
         sides.forEach((side) => {
           const sideMargin = Math.abs(coords[side] - parentCoords[side])
@@ -67,8 +65,6 @@ export const CElementCover = forwardRef<HTMLDivElement, CElementCoverProps>(
       setCustomBoundaries(getCustomBoundaries())
     }, [JSON.stringify(getCustomBoundaries())])
 
-    //render
-
     const classes = classNames(className)
 
     const containerCoords = {
@@ -82,23 +78,21 @@ export const CElementCover = forwardRef<HTMLDivElement, CElementCoverProps>(
     const coverStyles: CSSProperties = {
       ...containerCoords,
       position: 'absolute',
-      backgroundColor: `rgb(255,255,255,${opacity})`,
+      backgroundColor: `rgba(255,255,255,${opacity})`,
     }
 
     return (
       <div className={classes} style={coverStyles} {...rest} ref={forkedRef}>
-        {children || (
-          <div
-            style={{
-              position: 'absolute',
-              top: '50%',
-              left: '50%',
-              transform: 'translateX(-50%) translateY(-50%)',
-            }}
-          >
-            <CSpinner variant="grow" color="primary" />
-          </div>
-        )}
+        <div
+          style={{
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: 'translateX(-50%) translateY(-50%)',
+          }}
+        >
+          {children || <CSpinner variant="grow" color="primary" />}
+        </div>
       </div>
     )
   },

package/src/components/element-cover/index.ts

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

package/src/components/form/CFormCheck.tsx

@@ -2,12 +2,12 @@ import React, { forwardRef, InputHTMLAttributes, ReactNode, useEffect, useRef }
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { useForkedRef } from '../../utils/hooks'
-import { Colors, Shapes } from '../Types'
-
 import { CFormControlValidation, CFormControlValidationProps } from './CFormControlValidation'
 import { CFormLabel } from './CFormLabel'
 
+import { useForkedRef } from '../../hooks'
+import type { Colors, Shapes } from '../../types'
+
 export type ButtonObject = {
   /**
    * Sets the color context of the component to one of CoreUI’s themed colors.

package/src/components/form/CFormControlValidation.tsx

@@ -1,5 +1,4 @@
 import React, { FC, ReactNode } from 'react'
-
 import PropTypes from 'prop-types'
 
 import { CFormFeedback } from './CFormFeedback'

package/src/components/form/CFormControlWrapper.tsx

@@ -1,5 +1,4 @@
 import React, { FC, ReactNode } from 'react'
-
 import PropTypes from 'prop-types'
 
 import { CFormControlValidation, CFormControlValidationProps } from './CFormControlValidation'

package/src/components/form/CFormInput.tsx

@@ -1,10 +1,14 @@
-import React, { ChangeEventHandler, forwardRef, InputHTMLAttributes, useState } from 'react'
-
-import classNames from 'classnames'
+import React, {
+  ChangeEventHandler,
+  forwardRef,
+  InputHTMLAttributes,
+  useEffect,
+  useState,
+} from 'react'
 import PropTypes from 'prop-types'
+import classNames from 'classnames'
 
 import { CFormControlWrapper, CFormControlWrapperProps } from './CFormControlWrapper'
-import { useEffect } from 'react'
 
 export interface CFormInputProps
   extends CFormControlWrapperProps,

package/src/components/form/CFormRange.tsx

@@ -1,7 +1,6 @@
 import React, { ChangeEventHandler, forwardRef, InputHTMLAttributes, ReactNode } from 'react'
-
-import classNames from 'classnames'
 import PropTypes from 'prop-types'
+import classNames from 'classnames'
 
 import { CFormLabel } from './CFormLabel'
 export interface CFormRangeProps extends InputHTMLAttributes<HTMLInputElement> {

package/src/components/form/CFormSelect.tsx

@@ -1,7 +1,6 @@
 import React, { ChangeEventHandler, forwardRef, InputHTMLAttributes } from 'react'
-
-import classNames from 'classnames'
 import PropTypes from 'prop-types'
+import classNames from 'classnames'
 
 import { CFormControlWrapper, CFormControlWrapperProps } from './CFormControlWrapper'
 

package/src/components/form/CFormTextarea.tsx

@@ -1,7 +1,6 @@
 import React, { ChangeEventHandler, forwardRef, TextareaHTMLAttributes } from 'react'
-
-import classNames from 'classnames'
 import PropTypes from 'prop-types'
+import classNames from 'classnames'
 
 import { CFormControlWrapper, CFormControlWrapperProps } from './CFormControlWrapper'
 

package/src/components/index.ts

@@ -14,6 +14,7 @@ export * from './collapse'
 export * from './date-picker'
 export * from './date-range-picker'
 export * from './dropdown'
+export * from './element-cover'
 export * from './footer'
 export * from './form'
 export * from './grid'

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

@@ -1,12 +1,14 @@
-import React, { ElementType, HTMLAttributes, forwardRef } from 'react'
+import React, { ElementType, AnchorHTMLAttributes, forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { Colors, colorPropType } from '../Types'
 import { CLink } from '../link/CLink'
 
+import { colorPropType } from '../../props'
+import type { Colors } from '../../types'
+
 export interface CListGroupItemProps
-  extends HTMLAttributes<HTMLLIElement | HTMLAnchorElement | HTMLButtonElement | HTMLLinkElement> {
+  extends AnchorHTMLAttributes<HTMLLIElement | HTMLAnchorElement | HTMLButtonElement> {
   /**
    * Toggle the active state for the component.
    */
@@ -29,13 +31,12 @@ export interface CListGroupItemProps
    * Component used for the root node. Either a string to use a HTML element or a component.
    */
   component?: string | ElementType
-  href?: string
 }
 
 export const CListGroupItem = forwardRef<
-  HTMLLIElement | HTMLAnchorElement | HTMLButtonElement | HTMLLinkElement,
+  HTMLLIElement | HTMLAnchorElement | HTMLButtonElement,
   CListGroupItemProps
->(({ children, active, className, disabled, href, color, component = 'li', ...rest }, ref) => {
+>(({ children, active, className, disabled, color, component = 'li', ...rest }, ref) => {
   const _className = classNames(
     'list-group-item',
     {
@@ -52,9 +53,8 @@ export const CListGroupItem = forwardRef<
   rest = {
     ...((component === 'a' || component === 'button') && {
       active,
-      component,
       disabled,
-      href: href,
+      component,
       ref: ref,
     }),
     ...(active && { 'aria-current': true }),

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

@@ -2,9 +2,11 @@ import React, { ElementType, AnchorHTMLAttributes, forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { Colors, colorPropType } from '../Types'
 import { CLink } from '../link/CLink'
 
+import { colorPropType } from '../../props'
+import type { Colors } from '../../types'
+
 export interface CListGroupItemProps
   extends AnchorHTMLAttributes<HTMLLIElement | HTMLAnchorElement | HTMLButtonElement> {
   /**

package/src/components/modal/CModal.tsx

@@ -13,12 +13,12 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Transition } from 'react-transition-group'
 
-import { useForkedRef } from '../../utils/hooks'
-
 import { CBackdrop } from '../backdrop/CBackdrop'
 import { CModalContent } from './CModalContent'
 import { CModalDialog } from './CModalDialog'
 
+import { useForkedRef } from '../../hooks'
+
 export interface CModalProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * Align the modal in the center or top of the screen.

package/src/components/modal/CModalHeader.tsx

@@ -1,9 +1,10 @@
 import React, { forwardRef, HTMLAttributes, useContext } from 'react'
 import PropTypes from 'prop-types'
-import { CModalContext } from './CModal'
-import { CCloseButton } from '../close-button/CCloseButton'
 import classNames from 'classnames'
 
+import { CCloseButton } from '../close-button/CCloseButton'
+import { CModalContext } from './CModal'
+
 export interface CModalHeaderProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * A string of all className you want applied to the base component.