Test
@@ -16,6 +17,7 @@ exports[`loads and displays CAccordionButton component 1`] = `
Test
diff --git a/src/components/accordion/__tests__/__snapshots__/CAccordionHeader.spec.tsx.snap b/packages/coreui-react/src/components/accordion/__tests__/__snapshots__/CAccordionHeader.spec.tsx.snap
similarity index 92%
rename from src/components/accordion/__tests__/__snapshots__/CAccordionHeader.spec.tsx.snap
rename to packages/coreui-react/src/components/accordion/__tests__/__snapshots__/CAccordionHeader.spec.tsx.snap
index b3384593..dfea0a55 100644
--- a/src/components/accordion/__tests__/__snapshots__/CAccordionHeader.spec.tsx.snap
+++ b/packages/coreui-react/src/components/accordion/__tests__/__snapshots__/CAccordionHeader.spec.tsx.snap
@@ -8,6 +8,7 @@ exports[`CAccordionHeader customize 1`] = `
Test
@@ -23,6 +24,7 @@ exports[`loads and displays CAccordionHeader component 1`] = `
Test
diff --git a/src/components/accordion/__tests__/__snapshots__/CAccordionItem.spec.tsx.snap b/packages/coreui-react/src/components/accordion/__tests__/__snapshots__/CAccordionItem.spec.tsx.snap
similarity index 100%
rename from src/components/accordion/__tests__/__snapshots__/CAccordionItem.spec.tsx.snap
rename to packages/coreui-react/src/components/accordion/__tests__/__snapshots__/CAccordionItem.spec.tsx.snap
diff --git a/packages/coreui-react/src/components/accordion/index.ts b/packages/coreui-react/src/components/accordion/index.ts
new file mode 100644
index 00000000..e1cc95ee
--- /dev/null
+++ b/packages/coreui-react/src/components/accordion/index.ts
@@ -0,0 +1,7 @@
+import { CAccordion } from './CAccordion'
+import { CAccordionBody } from './CAccordionBody'
+import { CAccordionButton } from './CAccordionButton'
+import { CAccordionHeader } from './CAccordionHeader'
+import { CAccordionItem } from './CAccordionItem'
+
+export { CAccordion, CAccordionBody, CAccordionButton, CAccordionHeader, CAccordionItem }
diff --git a/src/components/alert/CAlert.tsx b/packages/coreui-react/src/components/alert/CAlert.tsx
similarity index 60%
rename from src/components/alert/CAlert.tsx
rename to packages/coreui-react/src/components/alert/CAlert.tsx
index 92e98b50..3efdb78f 100644
--- a/src/components/alert/CAlert.tsx
+++ b/packages/coreui-react/src/components/alert/CAlert.tsx
@@ -1,11 +1,14 @@
-import React, { forwardRef, HTMLAttributes, useEffect, useState } from 'react'
+import React, { forwardRef, HTMLAttributes, useEffect, useState, useRef } from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
import { Transition } from 'react-transition-group'
-import { Colors, colorPropType } from '../Types'
import { CCloseButton } from '../close-button/CCloseButton'
+import { useForkedRef } from '../../hooks'
+import { colorPropType } from '../../props'
+import type { Colors } from '../../types'
+
export interface CAlertProps extends HTMLAttributes
{
/**
* A string of all className you want applied to the component.
@@ -49,42 +52,42 @@ export const CAlert = forwardRef(
},
ref,
) => {
+ const alertRef = useRef(null)
+ const forkedRef = useForkedRef(ref, alertRef)
const [_visible, setVisible] = useState(visible)
useEffect(() => {
setVisible(visible)
}, [visible])
- const _className = classNames(
- 'alert',
- variant === 'solid' ? `bg-${color} text-white` : `alert-${color}`,
- {
- 'alert-dismissible fade': dismissible,
- // show: _visible,
- },
- className,
- )
-
- const getTransitionClass = (state: string) => {
- return state === 'entered' && 'show'
- }
-
return (
-
- {(state) => {
- const transitionClass = getTransitionClass(state)
- return (
-
- {children}
- {dismissible && setVisible(false)} />}
-
- )
- }}
+
+ {(state) => (
+
+ {children}
+ {dismissible && setVisible(false)} />}
+
+ )}
)
},
diff --git a/src/components/alert/CAlertHeading.tsx b/packages/coreui-react/src/components/alert/CAlertHeading.tsx
similarity index 87%
rename from src/components/alert/CAlertHeading.tsx
rename to packages/coreui-react/src/components/alert/CAlertHeading.tsx
index 69c0b762..f63556d8 100644
--- a/src/components/alert/CAlertHeading.tsx
+++ b/packages/coreui-react/src/components/alert/CAlertHeading.tsx
@@ -15,10 +15,8 @@ export interface CAlertHeadingProps extends HTMLAttributes {
export const CAlertHeading = forwardRef(
({ children, className, component: Component = 'h4', ...rest }, ref) => {
- const _className = classNames('alert-heading', className)
-
return (
-
+
{children}
)
diff --git a/src/components/alert/CAlertLink.tsx b/packages/coreui-react/src/components/alert/CAlertLink.tsx
similarity index 85%
rename from src/components/alert/CAlertLink.tsx
rename to packages/coreui-react/src/components/alert/CAlertLink.tsx
index 0dd0e228..dacfa081 100644
--- a/src/components/alert/CAlertLink.tsx
+++ b/packages/coreui-react/src/components/alert/CAlertLink.tsx
@@ -13,10 +13,8 @@ export interface CAlertLinkProps extends AnchorHTMLAttributes
export const CAlertLink = forwardRef(
({ children, className, ...rest }, ref) => {
- const _className = classNames('alert-link', className)
-
return (
-
+
{children}
)
diff --git a/src/components/alert/__tests__/CAlert.spec.tsx b/packages/coreui-react/src/components/alert/__tests__/CAlert.spec.tsx
similarity index 100%
rename from src/components/alert/__tests__/CAlert.spec.tsx
rename to packages/coreui-react/src/components/alert/__tests__/CAlert.spec.tsx
diff --git a/src/components/alert/__tests__/CAlertHeading.spec.tsx b/packages/coreui-react/src/components/alert/__tests__/CAlertHeading.spec.tsx
similarity index 100%
rename from src/components/alert/__tests__/CAlertHeading.spec.tsx
rename to packages/coreui-react/src/components/alert/__tests__/CAlertHeading.spec.tsx
diff --git a/src/components/alert/__tests__/CAlertLink.spec.tsx b/packages/coreui-react/src/components/alert/__tests__/CAlertLink.spec.tsx
similarity index 100%
rename from src/components/alert/__tests__/CAlertLink.spec.tsx
rename to packages/coreui-react/src/components/alert/__tests__/CAlertLink.spec.tsx
diff --git a/src/components/alert/__tests__/__snapshots__/CAlert.spec.tsx.snap b/packages/coreui-react/src/components/alert/__tests__/__snapshots__/CAlert.spec.tsx.snap
similarity index 92%
rename from src/components/alert/__tests__/__snapshots__/CAlert.spec.tsx.snap
rename to packages/coreui-react/src/components/alert/__tests__/__snapshots__/CAlert.spec.tsx.snap
index 08b9b2cf..56496343 100644
--- a/src/components/alert/__tests__/__snapshots__/CAlert.spec.tsx.snap
+++ b/packages/coreui-react/src/components/alert/__tests__/__snapshots__/CAlert.spec.tsx.snap
@@ -3,13 +3,14 @@
exports[`CAlert customize 1`] = `
diff --git a/src/components/alert/__tests__/__snapshots__/CAlertHeading.spec.tsx.snap b/packages/coreui-react/src/components/alert/__tests__/__snapshots__/CAlertHeading.spec.tsx.snap
similarity index 100%
rename from src/components/alert/__tests__/__snapshots__/CAlertHeading.spec.tsx.snap
rename to packages/coreui-react/src/components/alert/__tests__/__snapshots__/CAlertHeading.spec.tsx.snap
diff --git a/src/components/alert/__tests__/__snapshots__/CAlertLink.spec.tsx.snap b/packages/coreui-react/src/components/alert/__tests__/__snapshots__/CAlertLink.spec.tsx.snap
similarity index 100%
rename from src/components/alert/__tests__/__snapshots__/CAlertLink.spec.tsx.snap
rename to packages/coreui-react/src/components/alert/__tests__/__snapshots__/CAlertLink.spec.tsx.snap
diff --git a/packages/coreui-react/src/components/alert/index.ts b/packages/coreui-react/src/components/alert/index.ts
new file mode 100644
index 00000000..7e182023
--- /dev/null
+++ b/packages/coreui-react/src/components/alert/index.ts
@@ -0,0 +1,5 @@
+import { CAlert } from './CAlert'
+import { CAlertHeading } from './CAlertHeading'
+import { CAlertLink } from './CAlertLink'
+
+export { CAlert, CAlertHeading, CAlertLink }
diff --git a/src/components/avatar/CAvatar.tsx b/packages/coreui-react/src/components/avatar/CAvatar.tsx
similarity index 83%
rename from src/components/avatar/CAvatar.tsx
rename to packages/coreui-react/src/components/avatar/CAvatar.tsx
index 86a914b4..6e259bbf 100644
--- a/src/components/avatar/CAvatar.tsx
+++ b/packages/coreui-react/src/components/avatar/CAvatar.tsx
@@ -2,14 +2,8 @@ import React, { forwardRef, HTMLAttributes } from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
-import {
- Colors,
- Shapes,
- TextColors,
- colorPropType,
- shapePropType,
- textColorsPropType,
-} from '../Types'
+import { colorPropType, shapePropType, textColorsPropType } from '../../props'
+import type { Colors, Shapes, TextColors } from '../../types'
export interface CAvatarProps extends HTMLAttributes {
/**
@@ -52,20 +46,23 @@ export interface CAvatarProps extends HTMLAttributes {
export const CAvatar = forwardRef(
({ children, className, color, shape, size, src, status, textColor, ...rest }, ref) => {
- const _className = classNames(
- 'avatar',
- {
- [`bg-${color}`]: color,
- [`avatar-${size}`]: size,
- [`text-${textColor}`]: textColor,
- },
- shape,
- className,
- )
const statusClassName = status && classNames('avatar-status', `bg-${status}`)
return (
-
+
{src ?
: children}
{status &&
}
diff --git a/src/components/avatar/__tests__/CAvatar.spec.tsx b/packages/coreui-react/src/components/avatar/__tests__/CAvatar.spec.tsx
similarity index 100%
rename from src/components/avatar/__tests__/CAvatar.spec.tsx
rename to packages/coreui-react/src/components/avatar/__tests__/CAvatar.spec.tsx
diff --git a/src/components/avatar/__tests__/__snapshots__/CAvatar.spec.tsx.snap b/packages/coreui-react/src/components/avatar/__tests__/__snapshots__/CAvatar.spec.tsx.snap
similarity index 100%
rename from src/components/avatar/__tests__/__snapshots__/CAvatar.spec.tsx.snap
rename to packages/coreui-react/src/components/avatar/__tests__/__snapshots__/CAvatar.spec.tsx.snap
diff --git a/packages/coreui-react/src/components/avatar/index.ts b/packages/coreui-react/src/components/avatar/index.ts
new file mode 100644
index 00000000..87a58f4b
--- /dev/null
+++ b/packages/coreui-react/src/components/avatar/index.ts
@@ -0,0 +1,3 @@
+import { CAvatar } from './CAvatar'
+
+export { CAvatar }
diff --git a/src/components/backdrop/CBackdrop.tsx b/packages/coreui-react/src/components/backdrop/CBackdrop.tsx
similarity index 56%
rename from src/components/backdrop/CBackdrop.tsx
rename to packages/coreui-react/src/components/backdrop/CBackdrop.tsx
index 605ed845..42060744 100644
--- a/src/components/backdrop/CBackdrop.tsx
+++ b/packages/coreui-react/src/components/backdrop/CBackdrop.tsx
@@ -1,7 +1,9 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
-import { Transition } from 'react-transition-group'
+import React, { forwardRef, HTMLAttributes, useRef } from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
+import { Transition } from 'react-transition-group'
+
+import { useForkedRef } from '../../hooks'
export interface CBackdropProps extends HTMLAttributes
{
/**
@@ -16,18 +18,20 @@ export interface CBackdropProps extends HTMLAttributes {
export const CBackdrop = forwardRef(
({ className = 'modal-backdrop', visible, ...rest }, ref) => {
- const _className = classNames(className, 'fade')
-
- const getTransitionClass = (state: string) => {
- return state === 'entered' && 'show'
- }
+ const backdropRef = useRef(null)
+ const forkedRef = useForkedRef(ref, backdropRef)
return (
-
- {(state) => {
- const transitionClass = getTransitionClass(state)
- return
- }}
+
+ {(state) => (
+
+ )}
)
},
diff --git a/src/components/backdrop/__tests__/CBackdrop.spec.tsx b/packages/coreui-react/src/components/backdrop/__tests__/CBackdrop.spec.tsx
similarity index 100%
rename from src/components/backdrop/__tests__/CBackdrop.spec.tsx
rename to packages/coreui-react/src/components/backdrop/__tests__/CBackdrop.spec.tsx
diff --git a/src/components/backdrop/__tests__/__snapshots__/CBackdrop.spec.tsx.snap b/packages/coreui-react/src/components/backdrop/__tests__/__snapshots__/CBackdrop.spec.tsx.snap
similarity index 100%
rename from src/components/backdrop/__tests__/__snapshots__/CBackdrop.spec.tsx.snap
rename to packages/coreui-react/src/components/backdrop/__tests__/__snapshots__/CBackdrop.spec.tsx.snap
diff --git a/packages/coreui-react/src/components/backdrop/index.ts b/packages/coreui-react/src/components/backdrop/index.ts
new file mode 100644
index 00000000..7bca8a8a
--- /dev/null
+++ b/packages/coreui-react/src/components/backdrop/index.ts
@@ -0,0 +1,3 @@
+import { CBackdrop } from './CBackdrop'
+
+export { CBackdrop }
diff --git a/src/components/badge/CBadge.tsx b/packages/coreui-react/src/components/badge/CBadge.tsx
similarity index 75%
rename from src/components/badge/CBadge.tsx
rename to packages/coreui-react/src/components/badge/CBadge.tsx
index 239b1a54..9cfd4db7 100644
--- a/src/components/badge/CBadge.tsx
+++ b/packages/coreui-react/src/components/badge/CBadge.tsx
@@ -2,14 +2,8 @@ import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
-import {
- Colors,
- Shapes,
- TextColors,
- colorPropType,
- shapePropType,
- textColorsPropType,
-} from '../Types'
+import { colorPropType, shapePropType, textColorsPropType } from '../../props'
+import type { Colors, Shapes, TextColors } from '../../types'
export interface CBadgeProps extends HTMLAttributes {
/**
@@ -62,24 +56,26 @@ export const CBadge = forwardRef(
},
ref,
) => {
- const _className = classNames(
- 'badge',
- {
- [`bg-${color}`]: color,
- 'position-absolute translate-middle': position,
- 'top-0': position?.includes('top'),
- 'top-100': position?.includes('bottom'),
- 'start-100': position?.includes('end'),
- 'start-0': position?.includes('start'),
- [`badge-${size}`]: size,
- [`text-${textColor}`]: textColor,
- },
- shape,
- className,
- )
-
return (
-
+
{children}
)
diff --git a/src/components/badge/__tests__/CBadge.spec.tsx b/packages/coreui-react/src/components/badge/__tests__/CBadge.spec.tsx
similarity index 100%
rename from src/components/badge/__tests__/CBadge.spec.tsx
rename to packages/coreui-react/src/components/badge/__tests__/CBadge.spec.tsx
diff --git a/src/components/badge/__tests__/__snapshots__/CBadge.spec.tsx.snap b/packages/coreui-react/src/components/badge/__tests__/__snapshots__/CBadge.spec.tsx.snap
similarity index 100%
rename from src/components/badge/__tests__/__snapshots__/CBadge.spec.tsx.snap
rename to packages/coreui-react/src/components/badge/__tests__/__snapshots__/CBadge.spec.tsx.snap
diff --git a/packages/coreui-react/src/components/badge/index.ts b/packages/coreui-react/src/components/badge/index.ts
new file mode 100644
index 00000000..689638b2
--- /dev/null
+++ b/packages/coreui-react/src/components/badge/index.ts
@@ -0,0 +1,3 @@
+import { CBadge } from './CBadge'
+
+export { CBadge }
diff --git a/src/components/breadcrumb/CBreadcrumb.tsx b/packages/coreui-react/src/components/breadcrumb/CBreadcrumb.tsx
similarity index 85%
rename from src/components/breadcrumb/CBreadcrumb.tsx
rename to packages/coreui-react/src/components/breadcrumb/CBreadcrumb.tsx
index b2113440..4802828c 100644
--- a/src/components/breadcrumb/CBreadcrumb.tsx
+++ b/packages/coreui-react/src/components/breadcrumb/CBreadcrumb.tsx
@@ -11,10 +11,9 @@ export interface CBreadcrumbProps extends HTMLAttributes {
export const CBreadcrumb = forwardRef(
({ children, className, ...rest }, ref) => {
- const _className = classNames('breadcrumb', className)
return (
-
+
{children}
diff --git a/src/components/breadcrumb/CBreadcrumbItem.tsx b/packages/coreui-react/src/components/breadcrumb/CBreadcrumbItem.tsx
similarity index 79%
rename from src/components/breadcrumb/CBreadcrumbItem.tsx
rename to packages/coreui-react/src/components/breadcrumb/CBreadcrumbItem.tsx
index a67a8bf9..153ca479 100644
--- a/src/components/breadcrumb/CBreadcrumbItem.tsx
+++ b/packages/coreui-react/src/components/breadcrumb/CBreadcrumbItem.tsx
@@ -21,15 +21,19 @@ export interface CBreadcrumbItemProps extends HTMLAttributes {
export const CBreadcrumbItem = forwardRef(
({ children, active, className, href, ...rest }, ref) => {
- const _className = classNames(
- 'breadcrumb-item',
- {
- active: active,
- },
- className,
- )
return (
-
+
{href ? {children} : children}
)
diff --git a/src/components/breadcrumb/__tests__/CBreadcrumb.spec.tsx b/packages/coreui-react/src/components/breadcrumb/__tests__/CBreadcrumb.spec.tsx
similarity index 100%
rename from src/components/breadcrumb/__tests__/CBreadcrumb.spec.tsx
rename to packages/coreui-react/src/components/breadcrumb/__tests__/CBreadcrumb.spec.tsx
diff --git a/src/components/breadcrumb/__tests__/CBreadcrumbItem.spec.tsx b/packages/coreui-react/src/components/breadcrumb/__tests__/CBreadcrumbItem.spec.tsx
similarity index 100%
rename from src/components/breadcrumb/__tests__/CBreadcrumbItem.spec.tsx
rename to packages/coreui-react/src/components/breadcrumb/__tests__/CBreadcrumbItem.spec.tsx
diff --git a/src/components/breadcrumb/__tests__/__snapshots__/CBreadcrumb.spec.tsx.snap b/packages/coreui-react/src/components/breadcrumb/__tests__/__snapshots__/CBreadcrumb.spec.tsx.snap
similarity index 100%
rename from src/components/breadcrumb/__tests__/__snapshots__/CBreadcrumb.spec.tsx.snap
rename to packages/coreui-react/src/components/breadcrumb/__tests__/__snapshots__/CBreadcrumb.spec.tsx.snap
diff --git a/src/components/breadcrumb/__tests__/__snapshots__/CBreadcrumbItem.spec.tsx.snap b/packages/coreui-react/src/components/breadcrumb/__tests__/__snapshots__/CBreadcrumbItem.spec.tsx.snap
similarity index 100%
rename from src/components/breadcrumb/__tests__/__snapshots__/CBreadcrumbItem.spec.tsx.snap
rename to packages/coreui-react/src/components/breadcrumb/__tests__/__snapshots__/CBreadcrumbItem.spec.tsx.snap
diff --git a/packages/coreui-react/src/components/breadcrumb/index.ts b/packages/coreui-react/src/components/breadcrumb/index.ts
new file mode 100644
index 00000000..d402a910
--- /dev/null
+++ b/packages/coreui-react/src/components/breadcrumb/index.ts
@@ -0,0 +1,4 @@
+import { CBreadcrumb } from './CBreadcrumb'
+import { CBreadcrumbItem } from './CBreadcrumbItem'
+
+export { CBreadcrumb, CBreadcrumbItem }
diff --git a/src/components/button-group/CButtonGroup.tsx b/packages/coreui-react/src/components/button-group/CButtonGroup.tsx
similarity index 81%
rename from src/components/button-group/CButtonGroup.tsx
rename to packages/coreui-react/src/components/button-group/CButtonGroup.tsx
index 4bbc71a1..108dcbcd 100644
--- a/src/components/button-group/CButtonGroup.tsx
+++ b/packages/coreui-react/src/components/button-group/CButtonGroup.tsx
@@ -19,14 +19,16 @@ export interface CButtonGroupProps extends HTMLAttributes {
export const CButtonGroup = forwardRef(
({ children, className, size, vertical, ...rest }, ref) => {
- const _className = classNames(
- vertical ? 'btn-group-vertical' : 'btn-group',
- { [`btn-group-${size}`]: size },
- className,
- )
-
return (
-
+
{children}
)
diff --git a/src/components/button-group/CButtonToolbar.tsx b/packages/coreui-react/src/components/button-group/CButtonToolbar.tsx
similarity index 84%
rename from src/components/button-group/CButtonToolbar.tsx
rename to packages/coreui-react/src/components/button-group/CButtonToolbar.tsx
index 74b5de55..fe670b85 100644
--- a/src/components/button-group/CButtonToolbar.tsx
+++ b/packages/coreui-react/src/components/button-group/CButtonToolbar.tsx
@@ -11,10 +11,8 @@ export interface CButtonToolbarProps extends HTMLAttributes
{
export const CButtonToolbar = forwardRef(
({ children, className, ...rest }, ref) => {
- const _className = classNames('btn-toolbar', className)
-
return (
-
+
{children}
)
diff --git a/src/components/button-group/__tests__/CButtonGroup.spec.tsx b/packages/coreui-react/src/components/button-group/__tests__/CButtonGroup.spec.tsx
similarity index 100%
rename from src/components/button-group/__tests__/CButtonGroup.spec.tsx
rename to packages/coreui-react/src/components/button-group/__tests__/CButtonGroup.spec.tsx
diff --git a/src/components/button-group/__tests__/CButtonToolbar.spec.tsx b/packages/coreui-react/src/components/button-group/__tests__/CButtonToolbar.spec.tsx
similarity index 100%
rename from src/components/button-group/__tests__/CButtonToolbar.spec.tsx
rename to packages/coreui-react/src/components/button-group/__tests__/CButtonToolbar.spec.tsx
diff --git a/src/components/button-group/__tests__/__snapshots__/CButtonGroup.spec.tsx.snap b/packages/coreui-react/src/components/button-group/__tests__/__snapshots__/CButtonGroup.spec.tsx.snap
similarity index 100%
rename from src/components/button-group/__tests__/__snapshots__/CButtonGroup.spec.tsx.snap
rename to packages/coreui-react/src/components/button-group/__tests__/__snapshots__/CButtonGroup.spec.tsx.snap
diff --git a/src/components/button-group/__tests__/__snapshots__/CButtonToolbar.spec.tsx.snap b/packages/coreui-react/src/components/button-group/__tests__/__snapshots__/CButtonToolbar.spec.tsx.snap
similarity index 100%
rename from src/components/button-group/__tests__/__snapshots__/CButtonToolbar.spec.tsx.snap
rename to packages/coreui-react/src/components/button-group/__tests__/__snapshots__/CButtonToolbar.spec.tsx.snap
diff --git a/packages/coreui-react/src/components/button-group/index.ts b/packages/coreui-react/src/components/button-group/index.ts
new file mode 100644
index 00000000..2168c935
--- /dev/null
+++ b/packages/coreui-react/src/components/button-group/index.ts
@@ -0,0 +1,4 @@
+import { CButtonToolbar } from './CButtonToolbar'
+import { CButtonGroup } from './CButtonGroup'
+
+export { CButtonToolbar, CButtonGroup }
diff --git a/src/components/button/CButton.tsx b/packages/coreui-react/src/components/button/CButton.tsx
similarity index 84%
rename from src/components/button/CButton.tsx
rename to packages/coreui-react/src/components/button/CButton.tsx
index 91ffce22..c0c86b31 100644
--- a/src/components/button/CButton.tsx
+++ b/packages/coreui-react/src/components/button/CButton.tsx
@@ -1,11 +1,13 @@
-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
{
+import { colorPropType } from '../../props'
+import type { Colors, Shapes } from '../../types'
+
+export interface CButtonProps extends Omit {
/**
* Toggle the active state for the component.
*/
@@ -72,19 +74,17 @@ export const CButton = forwardRef {
- const _className = classNames(
- 'btn',
- variant ? `btn-${variant}-${color}` : `btn-${color}`,
- { [`btn-${size}`]: size },
- shape,
- className,
- )
-
return (
diff --git a/src/components/button/__tests__/CButton.spec.tsx b/packages/coreui-react/src/components/button/__tests__/CButton.spec.tsx
similarity index 100%
rename from src/components/button/__tests__/CButton.spec.tsx
rename to packages/coreui-react/src/components/button/__tests__/CButton.spec.tsx
diff --git a/src/components/button/__tests__/CButtonClose.spec.tsx b/packages/coreui-react/src/components/button/__tests__/CButtonClose.spec.tsx
similarity index 100%
rename from src/components/button/__tests__/CButtonClose.spec.tsx
rename to packages/coreui-react/src/components/button/__tests__/CButtonClose.spec.tsx
diff --git a/src/components/button/__tests__/__snapshots__/CButton.spec.tsx.snap b/packages/coreui-react/src/components/button/__tests__/__snapshots__/CButton.spec.tsx.snap
similarity index 100%
rename from src/components/button/__tests__/__snapshots__/CButton.spec.tsx.snap
rename to packages/coreui-react/src/components/button/__tests__/__snapshots__/CButton.spec.tsx.snap
diff --git a/src/components/button/__tests__/__snapshots__/CButtonClose.spec.tsx.snap b/packages/coreui-react/src/components/button/__tests__/__snapshots__/CButtonClose.spec.tsx.snap
similarity index 91%
rename from src/components/button/__tests__/__snapshots__/CButtonClose.spec.tsx.snap
rename to packages/coreui-react/src/components/button/__tests__/__snapshots__/CButtonClose.spec.tsx.snap
index 2dfc1981..092b4a2d 100644
--- a/src/components/button/__tests__/__snapshots__/CButtonClose.spec.tsx.snap
+++ b/packages/coreui-react/src/components/button/__tests__/__snapshots__/CButtonClose.spec.tsx.snap
@@ -6,6 +6,7 @@ exports[`CCloseButton customize 1`] = `
aria-label="Close"
class="btn btn-close btn-close-white bazinga"
disabled=""
+ type="button"
>
Test
@@ -17,6 +18,7 @@ exports[`loads and displays CCloseButton component 1`] = `
Test
diff --git a/packages/coreui-react/src/components/button/index.ts b/packages/coreui-react/src/components/button/index.ts
new file mode 100644
index 00000000..ad90d817
--- /dev/null
+++ b/packages/coreui-react/src/components/button/index.ts
@@ -0,0 +1,3 @@
+import { CButton } from './CButton'
+
+export { CButton }
diff --git a/src/components/callout/CCallout.tsx b/packages/coreui-react/src/components/callout/CCallout.tsx
similarity index 74%
rename from src/components/callout/CCallout.tsx
rename to packages/coreui-react/src/components/callout/CCallout.tsx
index af730d79..d0f65224 100644
--- a/src/components/callout/CCallout.tsx
+++ b/packages/coreui-react/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 {
/**
@@ -19,16 +20,18 @@ export interface CCalloutProps extends HTMLAttributes {
export const CCallout = forwardRef(
({ children, className, color, ...rest }, ref) => {
- const _className = classNames(
- 'callout',
- {
- [`callout-${color}`]: color,
- },
- className,
- )
-
return (
-
+
{children}
)
diff --git a/src/components/callout/__tests__/CCallout.spec.tsx b/packages/coreui-react/src/components/callout/__tests__/CCallout.spec.tsx
similarity index 100%
rename from src/components/callout/__tests__/CCallout.spec.tsx
rename to packages/coreui-react/src/components/callout/__tests__/CCallout.spec.tsx
diff --git a/src/components/callout/__tests__/__snapshots__/CCallout.spec.tsx.snap b/packages/coreui-react/src/components/callout/__tests__/__snapshots__/CCallout.spec.tsx.snap
similarity index 100%
rename from src/components/callout/__tests__/__snapshots__/CCallout.spec.tsx.snap
rename to packages/coreui-react/src/components/callout/__tests__/__snapshots__/CCallout.spec.tsx.snap
diff --git a/packages/coreui-react/src/components/callout/index.ts b/packages/coreui-react/src/components/callout/index.ts
new file mode 100644
index 00000000..ebf0d06e
--- /dev/null
+++ b/packages/coreui-react/src/components/callout/index.ts
@@ -0,0 +1,3 @@
+import { CCallout } from './CCallout'
+
+export { CCallout }
diff --git a/src/components/card/CCard.tsx b/packages/coreui-react/src/components/card/CCard.tsx
similarity index 79%
rename from src/components/card/CCard.tsx
rename to packages/coreui-react/src/components/card/CCard.tsx
index 88160a96..5607dd7c 100644
--- a/src/components/card/CCard.tsx
+++ b/packages/coreui-react/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, colorPropType } from '../Types'
+import { colorPropType } from '../../props'
+import type { Colors } from '../../types'
export interface CCardProps extends HTMLAttributes
{
/**
@@ -25,17 +26,19 @@ export interface CCardProps extends HTMLAttributes {
export const CCard = forwardRef(
({ children, className, color, textColor, ...rest }, ref) => {
- const _className = classNames(
- 'card',
- {
- [`bg-${color}`]: color,
- [`text-${textColor}`]: textColor,
- },
- className,
- )
-
return (
-
+
{children}
)
diff --git a/src/components/card/CCardBody.tsx b/packages/coreui-react/src/components/card/CCardBody.tsx
similarity index 84%
rename from src/components/card/CCardBody.tsx
rename to packages/coreui-react/src/components/card/CCardBody.tsx
index 97b9c993..f977e837 100644
--- a/src/components/card/CCardBody.tsx
+++ b/packages/coreui-react/src/components/card/CCardBody.tsx
@@ -11,10 +11,8 @@ export interface CCardBodyProps extends HTMLAttributes
{
export const CCardBody = forwardRef(
({ children, className, ...rest }, ref) => {
- const _className = classNames('card-body', className)
-
return (
-
+
{children}
)
diff --git a/src/components/card/CCardFooter.tsx b/packages/coreui-react/src/components/card/CCardFooter.tsx
similarity index 84%
rename from src/components/card/CCardFooter.tsx
rename to packages/coreui-react/src/components/card/CCardFooter.tsx
index 379f5c48..054f2851 100644
--- a/src/components/card/CCardFooter.tsx
+++ b/packages/coreui-react/src/components/card/CCardFooter.tsx
@@ -11,10 +11,8 @@ export interface CCardFooterProps extends HTMLAttributes
{
export const CCardFooter = forwardRef(
({ children, className, ...rest }, ref) => {
- const _className = classNames('card-footer', className)
-
return (
-
+
{children}
)
diff --git a/src/components/card/CCardGroup.tsx b/packages/coreui-react/src/components/card/CCardGroup.tsx
similarity index 84%
rename from src/components/card/CCardGroup.tsx
rename to packages/coreui-react/src/components/card/CCardGroup.tsx
index d63b21b0..042e6ade 100644
--- a/src/components/card/CCardGroup.tsx
+++ b/packages/coreui-react/src/components/card/CCardGroup.tsx
@@ -11,10 +11,8 @@ export interface CCardGroupProps extends HTMLAttributes
{
export const CCardGroup = forwardRef(
({ children, className, ...rest }, ref) => {
- const _className = classNames('card-group', className)
-
return (
-
+
{children}
)
diff --git a/src/components/card/CCardHeader.tsx b/packages/coreui-react/src/components/card/CCardHeader.tsx
similarity index 87%
rename from src/components/card/CCardHeader.tsx
rename to packages/coreui-react/src/components/card/CCardHeader.tsx
index ffc875ac..216a2934 100644
--- a/src/components/card/CCardHeader.tsx
+++ b/packages/coreui-react/src/components/card/CCardHeader.tsx
@@ -15,10 +15,8 @@ export interface CCardHeaderProps extends HTMLAttributes
{
export const CCardHeader = forwardRef(
({ children, component: Component = 'div', className, ...rest }, ref) => {
- const _className = classNames('card-header', className)
-
return (
-
+
{children}
)
diff --git a/src/components/card/CCardImage.tsx b/packages/coreui-react/src/components/card/CCardImage.tsx
similarity index 75%
rename from src/components/card/CCardImage.tsx
rename to packages/coreui-react/src/components/card/CCardImage.tsx
index a96a7061..085d7e21 100644
--- a/src/components/card/CCardImage.tsx
+++ b/packages/coreui-react/src/components/card/CCardImage.tsx
@@ -1,9 +1,9 @@
-import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
+import React, { ElementType, forwardRef, ImgHTMLAttributes } from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
export interface CCardImageProps
- extends HTMLAttributes {
+ extends ImgHTMLAttributes {
/**
* A string of all className you want applied to the base component.
*/
@@ -22,10 +22,12 @@ export const CCardImage = forwardRef<
HTMLImageElement | HTMLOrSVGElement | HTMLOrSVGImageElement,
CCardImageProps
>(({ children, className, component: Component = 'img', orientation, ...rest }, ref) => {
- const _className = classNames(orientation ? `card-img-${orientation}` : 'card-img', className)
-
return (
-
+
{children}
)
diff --git a/src/components/card/CCardImageOverlay.tsx b/packages/coreui-react/src/components/card/CCardImageOverlay.tsx
similarity index 84%
rename from src/components/card/CCardImageOverlay.tsx
rename to packages/coreui-react/src/components/card/CCardImageOverlay.tsx
index aa591888..7f8ba71a 100644
--- a/src/components/card/CCardImageOverlay.tsx
+++ b/packages/coreui-react/src/components/card/CCardImageOverlay.tsx
@@ -11,10 +11,8 @@ export interface CCardImageOverlayProps extends HTMLAttributes {
export const CCardImageOverlay = forwardRef(
({ children, className, ...rest }, ref) => {
- const _className = classNames('card-img-overlay', className)
-
return (
-
+
{children}
)
diff --git a/src/components/card/CCardLink.tsx b/packages/coreui-react/src/components/card/CCardLink.tsx
similarity index 86%
rename from src/components/card/CCardLink.tsx
rename to packages/coreui-react/src/components/card/CCardLink.tsx
index 001da0f0..9bf10db0 100644
--- a/src/components/card/CCardLink.tsx
+++ b/packages/coreui-react/src/components/card/CCardLink.tsx
@@ -17,10 +17,8 @@ export interface CCardLinkProps extends AnchorHTMLAttributes
export const CCardLink = forwardRef(
({ children, className, ...rest }, ref) => {
- const _className = classNames('card-link', className)
-
return (
-
+
{children}
)
diff --git a/src/components/card/CCardSubtitle.tsx b/packages/coreui-react/src/components/card/CCardSubtitle.tsx
similarity index 87%
rename from src/components/card/CCardSubtitle.tsx
rename to packages/coreui-react/src/components/card/CCardSubtitle.tsx
index 7f77c36b..b0ac9553 100644
--- a/src/components/card/CCardSubtitle.tsx
+++ b/packages/coreui-react/src/components/card/CCardSubtitle.tsx
@@ -14,10 +14,8 @@ export interface CCardSubtitleProps extends HTMLAttributes {
}
export const CCardSubtitle = forwardRef(
({ children, component: Component = 'h6', className, ...rest }, ref) => {
- const _className = classNames('card-subtitle', className)
-
return (
-
+
{children}
)
diff --git a/src/components/card/CCardText.tsx b/packages/coreui-react/src/components/card/CCardText.tsx
similarity index 87%
rename from src/components/card/CCardText.tsx
rename to packages/coreui-react/src/components/card/CCardText.tsx
index dee8f9f9..96dad0fa 100644
--- a/src/components/card/CCardText.tsx
+++ b/packages/coreui-react/src/components/card/CCardText.tsx
@@ -15,10 +15,8 @@ export interface CCardTextProps extends HTMLAttributes {
export const CCardText = forwardRef(
({ children, component: Component = 'p', className, ...rest }, ref) => {
- const _className = classNames('card-text', className)
-
return (
-
+
{children}
)
diff --git a/src/components/card/CCardTitle.tsx b/packages/coreui-react/src/components/card/CCardTitle.tsx
similarity index 87%
rename from src/components/card/CCardTitle.tsx
rename to packages/coreui-react/src/components/card/CCardTitle.tsx
index ec2c2f3a..97e9547d 100644
--- a/src/components/card/CCardTitle.tsx
+++ b/packages/coreui-react/src/components/card/CCardTitle.tsx
@@ -15,10 +15,8 @@ export interface CCardTitleProps extends HTMLAttributes {
export const CCardTitle = forwardRef(
({ children, component: Component = 'h5', className, ...rest }, ref) => {
- const _className = classNames('card-title', className)
-
return (
-
+
{children}
)
diff --git a/src/components/card/__tests__/CCard.spec.tsx b/packages/coreui-react/src/components/card/__tests__/CCard.spec.tsx
similarity index 100%
rename from src/components/card/__tests__/CCard.spec.tsx
rename to packages/coreui-react/src/components/card/__tests__/CCard.spec.tsx
diff --git a/src/components/card/__tests__/CCardBody.spec.tsx b/packages/coreui-react/src/components/card/__tests__/CCardBody.spec.tsx
similarity index 100%
rename from src/components/card/__tests__/CCardBody.spec.tsx
rename to packages/coreui-react/src/components/card/__tests__/CCardBody.spec.tsx
diff --git a/src/components/card/__tests__/CCardFooter.spec.tsx b/packages/coreui-react/src/components/card/__tests__/CCardFooter.spec.tsx
similarity index 100%
rename from src/components/card/__tests__/CCardFooter.spec.tsx
rename to packages/coreui-react/src/components/card/__tests__/CCardFooter.spec.tsx
diff --git a/src/components/card/__tests__/CCardGroup.spec.tsx b/packages/coreui-react/src/components/card/__tests__/CCardGroup.spec.tsx
similarity index 100%
rename from src/components/card/__tests__/CCardGroup.spec.tsx
rename to packages/coreui-react/src/components/card/__tests__/CCardGroup.spec.tsx
diff --git a/src/components/card/__tests__/CCardHeader.spec.tsx b/packages/coreui-react/src/components/card/__tests__/CCardHeader.spec.tsx
similarity index 100%
rename from src/components/card/__tests__/CCardHeader.spec.tsx
rename to packages/coreui-react/src/components/card/__tests__/CCardHeader.spec.tsx
diff --git a/src/components/card/__tests__/CCardImage.spec.tsx b/packages/coreui-react/src/components/card/__tests__/CCardImage.spec.tsx
similarity index 100%
rename from src/components/card/__tests__/CCardImage.spec.tsx
rename to packages/coreui-react/src/components/card/__tests__/CCardImage.spec.tsx
diff --git a/src/components/card/__tests__/CCardImageOverlay.spec.tsx b/packages/coreui-react/src/components/card/__tests__/CCardImageOverlay.spec.tsx
similarity index 100%
rename from src/components/card/__tests__/CCardImageOverlay.spec.tsx
rename to packages/coreui-react/src/components/card/__tests__/CCardImageOverlay.spec.tsx
diff --git a/src/components/card/__tests__/CCardLink.spec.tsx b/packages/coreui-react/src/components/card/__tests__/CCardLink.spec.tsx
similarity index 100%
rename from src/components/card/__tests__/CCardLink.spec.tsx
rename to packages/coreui-react/src/components/card/__tests__/CCardLink.spec.tsx
diff --git a/src/components/card/__tests__/CCardSubtitle.spec.tsx b/packages/coreui-react/src/components/card/__tests__/CCardSubtitle.spec.tsx
similarity index 100%
rename from src/components/card/__tests__/CCardSubtitle.spec.tsx
rename to packages/coreui-react/src/components/card/__tests__/CCardSubtitle.spec.tsx
diff --git a/src/components/card/__tests__/CCardText.spec.tsx b/packages/coreui-react/src/components/card/__tests__/CCardText.spec.tsx
similarity index 100%
rename from src/components/card/__tests__/CCardText.spec.tsx
rename to packages/coreui-react/src/components/card/__tests__/CCardText.spec.tsx
diff --git a/src/components/card/__tests__/CCardTitle.spec.tsx b/packages/coreui-react/src/components/card/__tests__/CCardTitle.spec.tsx
similarity index 100%
rename from src/components/card/__tests__/CCardTitle.spec.tsx
rename to packages/coreui-react/src/components/card/__tests__/CCardTitle.spec.tsx
diff --git a/src/components/card/__tests__/__snapshots__/CCard.spec.tsx.snap b/packages/coreui-react/src/components/card/__tests__/__snapshots__/CCard.spec.tsx.snap
similarity index 100%
rename from src/components/card/__tests__/__snapshots__/CCard.spec.tsx.snap
rename to packages/coreui-react/src/components/card/__tests__/__snapshots__/CCard.spec.tsx.snap
diff --git a/src/components/card/__tests__/__snapshots__/CCardBody.spec.tsx.snap b/packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardBody.spec.tsx.snap
similarity index 100%
rename from src/components/card/__tests__/__snapshots__/CCardBody.spec.tsx.snap
rename to packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardBody.spec.tsx.snap
diff --git a/src/components/card/__tests__/__snapshots__/CCardFooter.spec.tsx.snap b/packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardFooter.spec.tsx.snap
similarity index 100%
rename from src/components/card/__tests__/__snapshots__/CCardFooter.spec.tsx.snap
rename to packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardFooter.spec.tsx.snap
diff --git a/src/components/card/__tests__/__snapshots__/CCardGroup.spec.tsx.snap b/packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardGroup.spec.tsx.snap
similarity index 100%
rename from src/components/card/__tests__/__snapshots__/CCardGroup.spec.tsx.snap
rename to packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardGroup.spec.tsx.snap
diff --git a/src/components/card/__tests__/__snapshots__/CCardHeader.spec.tsx.snap b/packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardHeader.spec.tsx.snap
similarity index 100%
rename from src/components/card/__tests__/__snapshots__/CCardHeader.spec.tsx.snap
rename to packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardHeader.spec.tsx.snap
diff --git a/src/components/card/__tests__/__snapshots__/CCardImage.spec.tsx.snap b/packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardImage.spec.tsx.snap
similarity index 100%
rename from src/components/card/__tests__/__snapshots__/CCardImage.spec.tsx.snap
rename to packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardImage.spec.tsx.snap
diff --git a/src/components/card/__tests__/__snapshots__/CCardImageOverlay.spec.tsx.snap b/packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardImageOverlay.spec.tsx.snap
similarity index 100%
rename from src/components/card/__tests__/__snapshots__/CCardImageOverlay.spec.tsx.snap
rename to packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardImageOverlay.spec.tsx.snap
diff --git a/src/components/card/__tests__/__snapshots__/CCardLink.spec.tsx.snap b/packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardLink.spec.tsx.snap
similarity index 100%
rename from src/components/card/__tests__/__snapshots__/CCardLink.spec.tsx.snap
rename to packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardLink.spec.tsx.snap
diff --git a/src/components/card/__tests__/__snapshots__/CCardSubtitle.spec.tsx.snap b/packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardSubtitle.spec.tsx.snap
similarity index 100%
rename from src/components/card/__tests__/__snapshots__/CCardSubtitle.spec.tsx.snap
rename to packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardSubtitle.spec.tsx.snap
diff --git a/src/components/card/__tests__/__snapshots__/CCardText.spec.tsx.snap b/packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardText.spec.tsx.snap
similarity index 100%
rename from src/components/card/__tests__/__snapshots__/CCardText.spec.tsx.snap
rename to packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardText.spec.tsx.snap
diff --git a/src/components/card/__tests__/__snapshots__/CCardTitle.spec.tsx.snap b/packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardTitle.spec.tsx.snap
similarity index 100%
rename from src/components/card/__tests__/__snapshots__/CCardTitle.spec.tsx.snap
rename to packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardTitle.spec.tsx.snap
diff --git a/packages/coreui-react/src/components/card/index.ts b/packages/coreui-react/src/components/card/index.ts
new file mode 100644
index 00000000..21c35dd8
--- /dev/null
+++ b/packages/coreui-react/src/components/card/index.ts
@@ -0,0 +1,25 @@
+import { CCard } from './CCard'
+import { CCardBody } from './CCardBody'
+import { CCardFooter } from './CCardFooter'
+import { CCardGroup } from './CCardGroup'
+import { CCardHeader } from './CCardHeader'
+import { CCardImage } from './CCardImage'
+import { CCardImageOverlay } from './CCardImageOverlay'
+import { CCardLink } from './CCardLink'
+import { CCardSubtitle } from './CCardSubtitle'
+import { CCardText } from './CCardText'
+import { CCardTitle } from './CCardTitle'
+
+export {
+ CCard,
+ CCardBody,
+ CCardFooter,
+ CCardGroup,
+ CCardHeader,
+ CCardImage,
+ CCardImageOverlay,
+ CCardLink,
+ CCardSubtitle,
+ CCardText,
+ CCardTitle,
+}
diff --git a/src/components/carousel/CCarousel.tsx b/packages/coreui-react/src/components/carousel/CCarousel.tsx
similarity index 82%
rename from src/components/carousel/CCarousel.tsx
rename to packages/coreui-react/src/components/carousel/CCarousel.tsx
index 0791f052..01d47de9 100644
--- a/src/components/carousel/CCarousel.tsx
+++ b/packages/coreui-react/src/components/carousel/CCarousel.tsx
@@ -3,6 +3,7 @@ import React, {
createContext,
forwardRef,
HTMLAttributes,
+ TouchEvent,
useState,
useEffect,
useRef,
@@ -10,17 +11,8 @@ import React, {
import PropTypes from 'prop-types'
import classNames from 'classnames'
-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)
- )
-}
+import { isInViewport } from '../../utils'
+import { useForkedRef } from '../../hooks'
export interface CCarouselProps extends HTMLAttributes {
/**
@@ -59,6 +51,12 @@ export interface CCarouselProps extends HTMLAttributes {
* 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(
onSlid,
onSlide,
pause = 'hover',
+ touch = true,
transition,
wrap = true,
...rest
@@ -108,6 +107,7 @@ export const CCarousel = forwardRef(
const [customInterval, setCustomInterval] = useState()
const [direction, setDirection] = useState('next')
const [itemsNumber, setItemsNumber] = useState(0)
+ const [touchPosition, setTouchPosition] = useState(null)
const [visible, setVisible] = useState()
useEffect(() => {
@@ -132,13 +132,6 @@ export const CCarousel = forwardRef(
}
})
- const _className = classNames(
- 'carousel slide',
- transition === 'crossfade' && 'carousel-fade',
- dark && 'carousel-dark',
- className,
- )
-
const cycle = () => {
_pause()
if (!wrap && active === itemsNumber - 1) {
@@ -157,7 +150,7 @@ export const CCarousel = forwardRef(
const nextItemWhenVisible = () => {
// Don't call next when the page isn't visible
// or the carousel or its parent isn't visible
- if (!document.hidden && carouselRef.current && isVisible(carouselRef.current)) {
+ if (!document.hidden && carouselRef.current && isInViewport(carouselRef.current)) {
if (animating) {
return
}
@@ -195,18 +188,52 @@ export const CCarousel = forwardRef(
}
const handleScroll = () => {
- if (!document.hidden && carouselRef.current && isVisible(carouselRef.current)) {
+ if (!document.hidden && carouselRef.current && isInViewport(carouselRef.current)) {
setVisible(true)
} else {
setVisible(false)
}
}
+ 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 (
@@ -235,7 +262,7 @@ export const CCarousel = forwardRef
(
{Children.map(children, (child, index) => {
if (React.isValidElement(child)) {
- return React.cloneElement(child, {
+ return React.cloneElement(child as React.ReactElement
, {
active: active === index ? true : false,
direction: direction,
key: index,
@@ -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,
}
diff --git a/src/components/carousel/CCarouselCaption.tsx b/packages/coreui-react/src/components/carousel/CCarouselCaption.tsx
similarity index 81%
rename from src/components/carousel/CCarouselCaption.tsx
rename to packages/coreui-react/src/components/carousel/CCarouselCaption.tsx
index feb47df4..6e1cd5d1 100644
--- a/src/components/carousel/CCarouselCaption.tsx
+++ b/packages/coreui-react/src/components/carousel/CCarouselCaption.tsx
@@ -11,9 +11,7 @@ export interface CCarouselCaptionProps extends HTMLAttributes {
export const CCarouselCaption = forwardRef(
({ className, ...rest }, ref) => {
- const _className = classNames('carousel-caption', className)
-
- return
+ return
},
)
diff --git a/src/components/carousel/CCarouselItem.tsx b/packages/coreui-react/src/components/carousel/CCarouselItem.tsx
similarity index 92%
rename from src/components/carousel/CCarouselItem.tsx
rename to packages/coreui-react/src/components/carousel/CCarouselItem.tsx
index f2348c09..3b8744cc 100644
--- a/src/components/carousel/CCarouselItem.tsx
+++ b/packages/coreui-react/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 {
/**
@@ -94,16 +94,18 @@ export const CCarouselItem = forwardRef(
}
})
- const _className = classNames(
- 'carousel-item',
- activeClassName,
- directionClassName,
- orderClassName,
- className,
- )
-
return (
-
+
{children}
)
diff --git a/src/components/carousel/__tests__/CCarousel.spec.tsx b/packages/coreui-react/src/components/carousel/__tests__/CCarousel.spec.tsx
similarity index 100%
rename from src/components/carousel/__tests__/CCarousel.spec.tsx
rename to packages/coreui-react/src/components/carousel/__tests__/CCarousel.spec.tsx
diff --git a/src/components/carousel/__tests__/__snapshots__/CCarousel.spec.tsx.snap b/packages/coreui-react/src/components/carousel/__tests__/__snapshots__/CCarousel.spec.tsx.snap
similarity index 100%
rename from src/components/carousel/__tests__/__snapshots__/CCarousel.spec.tsx.snap
rename to packages/coreui-react/src/components/carousel/__tests__/__snapshots__/CCarousel.spec.tsx.snap
diff --git a/packages/coreui-react/src/components/carousel/index.ts b/packages/coreui-react/src/components/carousel/index.ts
new file mode 100644
index 00000000..7a5e23f5
--- /dev/null
+++ b/packages/coreui-react/src/components/carousel/index.ts
@@ -0,0 +1,5 @@
+import { CCarousel } from './CCarousel'
+import { CCarouselCaption } from './CCarouselCaption'
+import { CCarouselItem } from './CCarouselItem'
+
+export { CCarousel, CCarouselCaption, CCarouselItem }
diff --git a/src/components/close-button/CCloseButton.tsx b/packages/coreui-react/src/components/close-button/CCloseButton.tsx
similarity index 70%
rename from src/components/close-button/CCloseButton.tsx
rename to packages/coreui-react/src/components/close-button/CCloseButton.tsx
index 8f5676e7..f23ef40c 100644
--- a/src/components/close-button/CCloseButton.tsx
+++ b/packages/coreui-react/src/components/close-button/CCloseButton.tsx
@@ -19,17 +19,23 @@ export interface CCloseButtonProps extends HTMLAttributes
{
export const CCloseButton = forwardRef(
({ className, disabled, white, ...rest }, ref) => {
- const _className = classNames(
- 'btn',
- 'btn-close',
- {
- 'btn-close-white': white,
- },
- disabled,
- className,
- )
return (
- {
/**
* A string of all className you want applied to the base component.
*/
className?: string
+ /**
+ * Set horizontal collapsing to transition the width instead of height.
+ */
+ horizontal?: boolean
/**
* Callback fired when the component requests to be hidden.
*/
@@ -25,48 +29,60 @@ export interface CCollapseProps extends HTMLAttributes {
}
export const CCollapse = forwardRef(
- ({ children, className, onHide, onShow, visible, ...rest }, ref) => {
- const [height, setHeight] = useState()
+ ({ children, className, horizontal, onHide, onShow, visible, ...rest }, ref) => {
const collapseRef = useRef(null)
const forkedRef = useForkedRef(ref, collapseRef)
- const getTransitionClass = (state: string) => {
- return state === 'entering'
- ? 'collapsing'
- : state === 'entered'
- ? 'collapse show'
- : state === 'exiting'
- ? 'collapsing'
- : 'collapse'
- }
+ const [height, setHeight] = useState()
+ const [width, setWidth] = useState()
const onEntering = () => {
onShow && onShow()
+
+ if (horizontal) {
+ collapseRef.current && setWidth(collapseRef.current.scrollWidth)
+ return
+ }
collapseRef.current && setHeight(collapseRef.current.scrollHeight)
}
const onEntered = () => {
+ if (horizontal) {
+ setWidth(0)
+ return
+ }
setHeight(0)
}
const onExit = () => {
+ if (horizontal) {
+ collapseRef.current && setWidth(collapseRef.current.scrollWidth)
+ return
+ }
collapseRef.current && setHeight(collapseRef.current.scrollHeight)
}
const onExiting = () => {
onHide && onHide()
+ if (horizontal) {
+ setWidth(0)
+ return
+ }
setHeight(0)
}
const onExited = () => {
+ if (horizontal) {
+ setWidth(0)
+ return
+ }
setHeight(0)
}
- const _className = classNames(className)
-
return (
(
timeout={350}
>
{(state) => {
- const transitionClass = getTransitionClass(state)
const currentHeight = height === 0 ? null : { height }
+ const currentWidth = width === 0 ? null : { width }
return (
@@ -96,6 +117,7 @@ export const CCollapse = forwardRef
(
CCollapse.propTypes = {
children: PropTypes.node,
className: PropTypes.string,
+ horizontal: PropTypes.bool,
onHide: PropTypes.func,
onShow: PropTypes.func,
visible: PropTypes.bool,
diff --git a/src/components/collapse/__tests__/CCollapse.spec.tsx b/packages/coreui-react/src/components/collapse/__tests__/CCollapse.spec.tsx
similarity index 94%
rename from src/components/collapse/__tests__/CCollapse.spec.tsx
rename to packages/coreui-react/src/components/collapse/__tests__/CCollapse.spec.tsx
index 26bd1286..67ec861f 100644
--- a/src/components/collapse/__tests__/CCollapse.spec.tsx
+++ b/packages/coreui-react/src/components/collapse/__tests__/CCollapse.spec.tsx
@@ -15,7 +15,6 @@ test('CCollapse customize', async () => {
})
test('CCollapse use case test', async () => {
- jest.useFakeTimers()
const { rerender } = render(Test )
expect(screen.getByText('Test')).toHaveClass('collapse')
expect(screen.getByText('Test')).not.toHaveClass('show')
@@ -24,7 +23,7 @@ test('CCollapse use case test', async () => {
expect(screen.getByText('Test')).not.toHaveClass('collapse')
expect(screen.getByText('Test')).not.toHaveClass('show')
expect(screen.getByText('Test')).toHaveClass('collapsing')
- jest.runAllTimers()
+ await new Promise((r) => setTimeout(r, 1000))
expect(screen.getByText('Test')).toHaveClass('collapse')
expect(screen.getByText('Test')).toHaveClass('show')
expect(screen.getByText('Test')).not.toHaveClass('collapsing')
@@ -32,7 +31,7 @@ test('CCollapse use case test', async () => {
expect(screen.getByText('Test')).not.toHaveClass('collapse')
expect(screen.getByText('Test')).not.toHaveClass('show')
expect(screen.getByText('Test')).toHaveClass('collapsing')
- jest.runAllTimers()
+ await new Promise((r) => setTimeout(r, 1000))
expect(screen.getByText('Test')).toHaveClass('collapse')
expect(screen.getByText('Test')).not.toHaveClass('show')
expect(screen.getByText('Test')).not.toHaveClass('collapsing')
diff --git a/src/components/collapse/__tests__/__snapshots__/CCollapse.spec.tsx.snap b/packages/coreui-react/src/components/collapse/__tests__/__snapshots__/CCollapse.spec.tsx.snap
similarity index 100%
rename from src/components/collapse/__tests__/__snapshots__/CCollapse.spec.tsx.snap
rename to packages/coreui-react/src/components/collapse/__tests__/__snapshots__/CCollapse.spec.tsx.snap
diff --git a/packages/coreui-react/src/components/collapse/index.ts b/packages/coreui-react/src/components/collapse/index.ts
new file mode 100644
index 00000000..f277ff21
--- /dev/null
+++ b/packages/coreui-react/src/components/collapse/index.ts
@@ -0,0 +1,3 @@
+import { CCollapse } from './CCollapse'
+
+export { CCollapse }
diff --git a/packages/coreui-react/src/components/conditional-portal/CConditionalPortal.tsx b/packages/coreui-react/src/components/conditional-portal/CConditionalPortal.tsx
new file mode 100644
index 00000000..bbbe00cd
--- /dev/null
+++ b/packages/coreui-react/src/components/conditional-portal/CConditionalPortal.tsx
@@ -0,0 +1,54 @@
+import React, { FC, ReactNode, useEffect, useState } from 'react'
+import { createPortal } from 'react-dom'
+import PropTypes from 'prop-types'
+
+const getContainer = (container?: Element | (() => Element | null) | null) => {
+ if (container) {
+ return typeof container === 'function' ? container() : container
+ }
+
+ return document.body
+}
+
+export interface CConditionalPortalProps {
+ /**
+ * @ignore
+ */
+ children: ReactNode
+ /**
+ * An HTML element or function that returns a single element, with `document.body` as the default.
+ *
+ * @since v4.11.0
+ */
+ container?: Element | (() => Element | null) | null
+ /**
+ * Render some children into a different part of the DOM
+ */
+ portal: boolean | any
+}
+
+export const CConditionalPortal: FC = ({
+ children,
+ container,
+ portal,
+}) => {
+ const [_container, setContainer] = useState>(null)
+
+ useEffect(() => {
+ portal && setContainer(getContainer(container) || document.body)
+ }, [container, portal])
+
+ return typeof window !== 'undefined' && portal && _container ? (
+ createPortal(children, _container)
+ ) : (
+ <>{children}
+ )
+}
+
+CConditionalPortal.propTypes = {
+ children: PropTypes.node,
+ container: PropTypes.any, // HTMLElement
+ portal: PropTypes.bool,
+}
+
+CConditionalPortal.displayName = 'CConditionalPortal'
diff --git a/packages/coreui-react/src/components/conditional-portal/index.ts b/packages/coreui-react/src/components/conditional-portal/index.ts
new file mode 100644
index 00000000..ab6cc3bc
--- /dev/null
+++ b/packages/coreui-react/src/components/conditional-portal/index.ts
@@ -0,0 +1,3 @@
+import { CConditionalPortal } from './CConditionalPortal'
+
+export { CConditionalPortal }
diff --git a/packages/coreui-react/src/components/dropdown/CDropdown.tsx b/packages/coreui-react/src/components/dropdown/CDropdown.tsx
new file mode 100644
index 00000000..bc7ab4e3
--- /dev/null
+++ b/packages/coreui-react/src/components/dropdown/CDropdown.tsx
@@ -0,0 +1,320 @@
+import React, {
+ createContext,
+ ElementType,
+ forwardRef,
+ HTMLAttributes,
+ RefObject,
+ useEffect,
+ useRef,
+ useState,
+} from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { useForkedRef, usePopper } from '../../hooks'
+import { placementPropType } from '../../props'
+import type { Placements } from '../../types'
+import { isRTL } from '../../utils'
+
+export type Directions = 'start' | 'end'
+
+export type Breakpoints =
+ | { xs: Directions }
+ | { sm: Directions }
+ | { md: Directions }
+ | { lg: Directions }
+ | { xl: Directions }
+ | { xxl: Directions }
+
+export type Alignments = Directions | Breakpoints
+
+export interface CDropdownProps extends HTMLAttributes {
+ /**
+ * Set aligment of dropdown menu.
+ *
+ * @type 'start' | 'end' | { xs: 'start' | 'end' } | { sm: 'start' | 'end' } | { md: 'start' | 'end' } | { lg: 'start' | 'end' } | { xl: 'start' | 'end'} | { xxl: 'start' | 'end'}
+ */
+ alignment?: Alignments
+ /**
+ * Configure the auto close behavior of the dropdown:
+ * - `true` - the dropdown will be closed by clicking outside or inside the dropdown menu.
+ * - `false` - the dropdown will be closed by clicking the toggle button and manually calling hide or toggle method. (Also will not be closed by pressing esc key)
+ * - `'inside'` - the dropdown will be closed (only) by clicking inside the dropdown menu.
+ * - `'outside'` - the dropdown will be closed (only) by clicking outside the dropdown menu.
+ */
+ autoClose?: 'inside' | 'outside' | boolean
+ /**
+ * A string of all className you want applied to the base component.
+ */
+ className?: string
+ /**
+ * Component used for the root node. Either a string to use a HTML element or a component.
+ */
+ component?: string | ElementType
+ /**
+ * Appends the react dropdown menu to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
+ *
+ * @since v4.11.0
+ */
+ container?: Element | (() => Element | null) | null
+ /**
+ * Sets a darker color scheme to match a dark navbar.
+ */
+ dark?: boolean
+ /**
+ * Sets a specified direction and location of the dropdown menu.
+ */
+ direction?: 'center' | 'dropup' | 'dropup-center' | 'dropend' | 'dropstart'
+ /**
+ * Offset of the dropdown menu relative to its target.
+ */
+ offset?: [number, number]
+ /**
+ * Callback fired when the component requests to be hidden.
+ *
+ * @since 4.9.0
+ */
+ onHide?: () => void
+ /**
+ * Callback fired when the component requests to be shown.
+ */
+ onShow?: () => void
+ /**
+ * Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.
+ *
+ * @type 'auto' | 'top-end' | 'top' | 'top-start' | 'bottom-end' | 'bottom' | 'bottom-start' | 'right-start' | 'right' | 'right-end' | 'left-start' | 'left' | 'left-end'
+ */
+ placement?: Placements
+ /**
+ * If you want to disable dynamic positioning set this property to `true`.
+ */
+ popper?: boolean
+ /**
+ * Generates dropdown menu using createPortal.
+ *
+ * @since 4.8.0
+ */
+ portal?: boolean
+ /**
+ * Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item.
+ */
+ variant?: 'btn-group' | 'dropdown' | 'input-group' | 'nav-item'
+ /**
+ * Toggle the visibility of dropdown menu component.
+ */
+ visible?: boolean
+}
+
+interface ContextProps extends CDropdownProps {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ dropdownToggleRef: RefObject
+ dropdownMenuRef: RefObject
+ setVisible: React.Dispatch>
+ portal: boolean
+}
+
+const getPlacement = (
+ placement: Placements,
+ direction: CDropdownProps['direction'],
+ alignment: CDropdownProps['alignment'],
+ isRTL: boolean,
+): Placements => {
+ let _placement = placement
+
+ if (direction === 'dropup') {
+ _placement = isRTL ? 'top-end' : 'top-start'
+ }
+
+ if (direction === 'dropup-center') {
+ _placement = 'top'
+ }
+
+ if (direction === 'dropend') {
+ _placement = isRTL ? 'left-start' : 'right-start'
+ }
+
+ if (direction === 'dropstart') {
+ _placement = isRTL ? 'right-start' : 'left-start'
+ }
+
+ if (alignment === 'end') {
+ _placement = isRTL ? 'bottom-start' : 'bottom-end'
+ }
+
+ return _placement
+}
+
+export const CDropdownContext = createContext({} as ContextProps)
+
+export const CDropdown = forwardRef(
+ (
+ {
+ children,
+ alignment,
+ autoClose = true,
+ className,
+ container,
+ dark,
+ direction,
+ offset = [0, 2],
+ onHide,
+ onShow,
+ placement = 'bottom-start',
+ popper = true,
+ portal = false,
+ variant = 'btn-group',
+ component = 'div',
+ visible = false,
+ ...rest
+ },
+ ref,
+ ) => {
+ const dropdownRef = useRef(null)
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const dropdownToggleRef = useRef(null)
+ const dropdownMenuRef = useRef(null)
+ const forkedRef = useForkedRef(ref, dropdownRef)
+ const [_visible, setVisible] = useState(visible)
+ const { initPopper, destroyPopper } = usePopper()
+
+ const Component = variant === 'nav-item' ? 'li' : component
+
+ // Disable popper if responsive aligment is set.
+ if (typeof alignment === 'object') {
+ popper = false
+ }
+
+ const contextValues = {
+ alignment,
+ container,
+ dark,
+ dropdownToggleRef,
+ dropdownMenuRef,
+ popper,
+ portal,
+ variant,
+ visible: _visible,
+ setVisible,
+ }
+
+ const popperConfig = {
+ modifiers: [
+ {
+ name: 'offset',
+ options: {
+ offset: offset,
+ },
+ },
+ ],
+ placement: getPlacement(placement, direction, alignment, isRTL(dropdownMenuRef.current)),
+ }
+
+ useEffect(() => {
+ setVisible(visible)
+ }, [visible])
+
+ useEffect(() => {
+ if (_visible && dropdownToggleRef.current && dropdownMenuRef.current) {
+ popper && initPopper(dropdownToggleRef.current, dropdownMenuRef.current, popperConfig)
+ window.addEventListener('mouseup', handleMouseUp)
+ window.addEventListener('keyup', handleKeyup)
+ onShow && onShow()
+ }
+
+ return () => {
+ popper && destroyPopper()
+ window.removeEventListener('mouseup', handleMouseUp)
+ window.removeEventListener('keyup', handleKeyup)
+ onHide && onHide()
+ }
+ }, [_visible])
+
+ const handleKeyup = (event: KeyboardEvent) => {
+ if (autoClose === false) {
+ return
+ }
+
+ if (event.key === 'Escape') {
+ setVisible(false)
+ }
+ }
+
+ const handleMouseUp = (event: Event) => {
+ if (!dropdownToggleRef.current || !dropdownMenuRef.current) {
+ return
+ }
+
+ if (dropdownToggleRef.current.contains(event.target as HTMLElement)) {
+ return
+ }
+
+ if (
+ autoClose === true ||
+ (autoClose === 'inside' && dropdownMenuRef.current.contains(event.target as HTMLElement)) ||
+ (autoClose === 'outside' && !dropdownMenuRef.current.contains(event.target as HTMLElement))
+ ) {
+ setTimeout(() => setVisible(false), 1)
+ return
+ }
+ }
+
+ return (
+
+ {variant === 'input-group' ? (
+ <>{children}
+ ) : (
+
+ {children}
+
+ )}
+
+ )
+ },
+)
+
+const alignmentDirection = PropTypes.oneOf(['start', 'end'])
+
+CDropdown.propTypes = {
+ alignment: PropTypes.oneOfType([
+ alignmentDirection,
+ PropTypes.shape({ xs: alignmentDirection.isRequired }),
+ PropTypes.shape({ sm: alignmentDirection.isRequired }),
+ PropTypes.shape({ md: alignmentDirection.isRequired }),
+ PropTypes.shape({ lg: alignmentDirection.isRequired }),
+ PropTypes.shape({ xl: alignmentDirection.isRequired }),
+ PropTypes.shape({ xxl: alignmentDirection.isRequired }),
+ ]),
+ autoClose: PropTypes.oneOfType([
+ PropTypes.bool,
+ PropTypes.oneOf<'inside' | 'outside'>(['inside', 'outside']),
+ ]),
+ children: PropTypes.node,
+ className: PropTypes.string,
+ component: PropTypes.elementType,
+ dark: PropTypes.bool,
+ direction: PropTypes.oneOf(['center', 'dropup', 'dropup-center', 'dropend', 'dropstart']),
+ offset: PropTypes.any, // TODO: find good proptype
+ onHide: PropTypes.func,
+ onShow: PropTypes.func,
+ placement: placementPropType,
+ popper: PropTypes.bool,
+ portal: PropTypes.bool,
+ variant: PropTypes.oneOf(['btn-group', 'dropdown', 'input-group', 'nav-item']),
+ visible: PropTypes.bool,
+}
+
+CDropdown.displayName = 'CDropdown'
diff --git a/src/components/dropdown/CDropdownDivider.tsx b/packages/coreui-react/src/components/dropdown/CDropdownDivider.tsx
similarity index 81%
rename from src/components/dropdown/CDropdownDivider.tsx
rename to packages/coreui-react/src/components/dropdown/CDropdownDivider.tsx
index 589ee6e0..c9fa58de 100644
--- a/src/components/dropdown/CDropdownDivider.tsx
+++ b/packages/coreui-react/src/components/dropdown/CDropdownDivider.tsx
@@ -11,9 +11,7 @@ export interface CDropdownDividerProps extends HTMLAttributes {
export const CDropdownDivider = forwardRef(
({ className, ...rest }, ref) => {
- const _className = classNames('dropdown-divider', className)
-
- return
export const CDropdownHeader = forwardRef(
({ children, className, component: Component = 'h6', ...rest }, ref) => {
- const _className = classNames('dropdown-header', className)
-
return (
-
+
{children}
)
diff --git a/src/components/dropdown/CDropdownItem.tsx b/packages/coreui-react/src/components/dropdown/CDropdownItem.tsx
similarity index 78%
rename from src/components/dropdown/CDropdownItem.tsx
rename to packages/coreui-react/src/components/dropdown/CDropdownItem.tsx
index 41177a26..b2a27697 100644
--- a/src/components/dropdown/CDropdownItem.tsx
+++ b/packages/coreui-react/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 {
/**
@@ -18,10 +17,13 @@ export interface CDropdownItemProps extends CLinkProps {
export const CDropdownItem = forwardRef(
({ children, className, component = 'a', ...rest }, ref) => {
- const _className = classNames('dropdown-item', className)
-
return (
-
+
{children}
)
diff --git a/src/components/dropdown/CDropdownItemPlain.tsx b/packages/coreui-react/src/components/dropdown/CDropdownItemPlain.tsx
similarity index 87%
rename from src/components/dropdown/CDropdownItemPlain.tsx
rename to packages/coreui-react/src/components/dropdown/CDropdownItemPlain.tsx
index 564a7a96..53fdcd97 100644
--- a/src/components/dropdown/CDropdownItemPlain.tsx
+++ b/packages/coreui-react/src/components/dropdown/CDropdownItemPlain.tsx
@@ -15,10 +15,8 @@ export interface CDropdownItemPlainProps extends HTMLAttributes
export const CDropdownItemPlain = forwardRef(
({ children, className, component: Component = 'span', ...rest }, ref) => {
- const _className = classNames('dropdown-item-text', className)
-
return (
-
+
{children}
)
diff --git a/packages/coreui-react/src/components/dropdown/CDropdownMenu.tsx b/packages/coreui-react/src/components/dropdown/CDropdownMenu.tsx
new file mode 100644
index 00000000..efb2dbcd
--- /dev/null
+++ b/packages/coreui-react/src/components/dropdown/CDropdownMenu.tsx
@@ -0,0 +1,81 @@
+import React, { ElementType, forwardRef, HTMLAttributes, useContext } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { Alignments, CDropdownContext } from './CDropdown'
+import { CConditionalPortal } from '../conditional-portal'
+
+import { useForkedRef } from '../../hooks'
+
+export interface CDropdownMenuProps extends HTMLAttributes {
+ /**
+ * A string of all className you want applied to the base component.
+ */
+ className?: string
+ /**
+ * Component used for the root node. Either a string to use a HTML element or a component.
+ */
+ component?: string | ElementType
+}
+
+const alignmentClassNames = (alignment: Alignments) => {
+ const classNames: string[] = []
+ if (typeof alignment === 'object') {
+ Object.keys(alignment).map((key) => {
+ classNames.push(`dropdown-menu${key === 'xs' ? '' : `-${key}`}-${alignment[key]}`)
+ })
+ }
+
+ if (typeof alignment === 'string') {
+ classNames.push(`dropdown-menu-${alignment}`)
+ }
+
+ return classNames
+}
+
+export const CDropdownMenu = forwardRef(
+ ({ children, className, component: Component = 'ul', ...rest }, ref) => {
+ const { alignment, container, dark, dropdownMenuRef, popper, portal, visible } =
+ useContext(CDropdownContext)
+
+ const forkedRef = useForkedRef(ref, dropdownMenuRef)
+
+ return (
+
+
+ {Component === 'ul'
+ ? React.Children.map(children, (child, index) => {
+ if (React.isValidElement(child)) {
+ return {React.cloneElement(child)}
+ }
+ return
+ })
+ : children}
+
+
+ )
+ },
+)
+
+CDropdownMenu.propTypes = {
+ children: PropTypes.node,
+ className: PropTypes.string,
+ component: PropTypes.elementType,
+}
+
+CDropdownMenu.displayName = 'CDropdownMenu'
diff --git a/src/components/dropdown/CDropdownToggle.tsx b/packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx
similarity index 63%
rename from src/components/dropdown/CDropdownToggle.tsx
rename to packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx
index 0c364626..5aa3a3b1 100644
--- a/src/components/dropdown/CDropdownToggle.tsx
+++ b/packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx
@@ -1,18 +1,23 @@
import React, { FC, useContext } from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
-import { Reference } from 'react-popper'
-
-import { Triggers, triggerPropType } from '../Types'
import { CButton, CButtonProps } from '../button/CButton'
+
import { CDropdownContext } from './CDropdown'
+import { triggerPropType } from '../../props'
+import type { Triggers } from '../../types'
+
export interface CDropdownToggleProps extends Omit {
/**
* Enables pseudo element caret on toggler.
*/
caret?: boolean
+ /**
+ * Create a custom toggler which accepts any content.
+ */
+ custom?: boolean
/**
* Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of `.dropdown-toggle-split` className for proper spacing around the dropdown caret.
*/
@@ -28,20 +33,13 @@ export interface CDropdownToggleProps extends Omit {
export const CDropdownToggle: FC = ({
children,
caret = true,
+ custom,
className,
split,
trigger = 'click',
...rest
}) => {
- const { popper, variant, visible, setVisible } = useContext(CDropdownContext)
- const _className = classNames(
- {
- 'dropdown-toggle': caret,
- 'dropdown-toggle-split': split,
- 'nav-link': variant === 'nav-item',
- },
- className,
- )
+ const { dropdownToggleRef, variant, visible, setVisible } = useContext(CDropdownContext)
const triggers = {
...((trigger === 'click' || trigger.includes('click')) && {
@@ -57,33 +55,56 @@ export const CDropdownToggle: FC = ({
}
const togglerProps = {
- className: _className,
+ className: classNames(
+ {
+ 'dropdown-toggle': caret,
+ 'dropdown-toggle-split': split,
+ 'nav-link': variant === 'nav-item',
+ },
+ className,
+ ),
'aria-expanded': visible,
- ...triggers,
+ ...(!rest.disabled && { ...triggers }),
}
// We use any because Toggler can be `a` as well as `button`.
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- const Toggler = (ref?: React.Ref) => {
- return variant === 'nav-item' ? (
-
- {children}
-
- ) : (
-
+ const Toggler = () => {
+ if (custom && React.isValidElement(children)) {
+ return (
+ <>
+ {React.cloneElement(children as React.ReactElement, {
+ 'aria-expanded': visible,
+ ...(!rest.disabled && { ...triggers }),
+ ref: dropdownToggleRef,
+ })}
+
+ )
+ }
+
+ if (variant === 'nav-item') {
+ return (
+
+ {children}
+
+ )
+ }
+
+ return (
+
{children}
{split && Toggle Dropdown }
)
}
- return popper ? {({ ref }) => Toggler(ref)} : Toggler()
+ return
Test
@@ -71,10 +70,9 @@ test('CDropdown click', async () => {
}
jest.runAllTimers()
expect(screen.getByText('Test').closest('div')).toHaveClass('show')
- fireEvent.click(document) //click outside
+ fireEvent.mouseUp(document.body) //click outside
+ await new Promise((r) => setTimeout(r, 1000))
expect(screen.getByText('Test').closest('div')).not.toHaveClass('show')
- jest.runAllTimers()
- jest.useRealTimers()
})
test('CDropdown example', async () => {
diff --git a/src/components/dropdown/__tests__/CDropdownDivider.spec.tsx b/packages/coreui-react/src/components/dropdown/__tests__/CDropdownDivider.spec.tsx
similarity index 100%
rename from src/components/dropdown/__tests__/CDropdownDivider.spec.tsx
rename to packages/coreui-react/src/components/dropdown/__tests__/CDropdownDivider.spec.tsx
diff --git a/src/components/dropdown/__tests__/CDropdownHeader.spec.tsx b/packages/coreui-react/src/components/dropdown/__tests__/CDropdownHeader.spec.tsx
similarity index 100%
rename from src/components/dropdown/__tests__/CDropdownHeader.spec.tsx
rename to packages/coreui-react/src/components/dropdown/__tests__/CDropdownHeader.spec.tsx
diff --git a/src/components/dropdown/__tests__/CDropdownItem.spec.tsx b/packages/coreui-react/src/components/dropdown/__tests__/CDropdownItem.spec.tsx
similarity index 100%
rename from src/components/dropdown/__tests__/CDropdownItem.spec.tsx
rename to packages/coreui-react/src/components/dropdown/__tests__/CDropdownItem.spec.tsx
diff --git a/src/components/dropdown/__tests__/CDropdownItemPlain.spec.tsx b/packages/coreui-react/src/components/dropdown/__tests__/CDropdownItemPlain.spec.tsx
similarity index 100%
rename from src/components/dropdown/__tests__/CDropdownItemPlain.spec.tsx
rename to packages/coreui-react/src/components/dropdown/__tests__/CDropdownItemPlain.spec.tsx
diff --git a/src/components/dropdown/__tests__/CDropdownMenu.spec.tsx b/packages/coreui-react/src/components/dropdown/__tests__/CDropdownMenu.spec.tsx
similarity index 100%
rename from src/components/dropdown/__tests__/CDropdownMenu.spec.tsx
rename to packages/coreui-react/src/components/dropdown/__tests__/CDropdownMenu.spec.tsx
diff --git a/src/components/dropdown/__tests__/CDropdownToggle.spec.tsx b/packages/coreui-react/src/components/dropdown/__tests__/CDropdownToggle.spec.tsx
similarity index 100%
rename from src/components/dropdown/__tests__/CDropdownToggle.spec.tsx
rename to packages/coreui-react/src/components/dropdown/__tests__/CDropdownToggle.spec.tsx
diff --git a/src/components/dropdown/__tests__/__snapshots__/CDropdown.spec.tsx.snap b/packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdown.spec.tsx.snap
similarity index 95%
rename from src/components/dropdown/__tests__/__snapshots__/CDropdown.spec.tsx.snap
rename to packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdown.spec.tsx.snap
index 067715d1..90a0e643 100644
--- a/src/components/dropdown/__tests__/__snapshots__/CDropdown.spec.tsx.snap
+++ b/packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdown.spec.tsx.snap
@@ -3,7 +3,7 @@
exports[`CDropdown customize 1`] = `
Test
diff --git a/src/components/dropdown/__tests__/__snapshots__/CDropdownDivider.spec.tsx.snap b/packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdownDivider.spec.tsx.snap
similarity index 100%
rename from src/components/dropdown/__tests__/__snapshots__/CDropdownDivider.spec.tsx.snap
rename to packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdownDivider.spec.tsx.snap
diff --git a/src/components/dropdown/__tests__/__snapshots__/CDropdownHeader.spec.tsx.snap b/packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdownHeader.spec.tsx.snap
similarity index 100%
rename from src/components/dropdown/__tests__/__snapshots__/CDropdownHeader.spec.tsx.snap
rename to packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdownHeader.spec.tsx.snap
diff --git a/src/components/dropdown/__tests__/__snapshots__/CDropdownItem.spec.tsx.snap b/packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdownItem.spec.tsx.snap
similarity index 100%
rename from src/components/dropdown/__tests__/__snapshots__/CDropdownItem.spec.tsx.snap
rename to packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdownItem.spec.tsx.snap
diff --git a/src/components/dropdown/__tests__/__snapshots__/CDropdownItemPlain.spec.tsx.snap b/packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdownItemPlain.spec.tsx.snap
similarity index 100%
rename from src/components/dropdown/__tests__/__snapshots__/CDropdownItemPlain.spec.tsx.snap
rename to packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdownItemPlain.spec.tsx.snap
diff --git a/src/components/dropdown/__tests__/__snapshots__/CDropdownMenu.spec.tsx.snap b/packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdownMenu.spec.tsx.snap
similarity index 89%
rename from src/components/dropdown/__tests__/__snapshots__/CDropdownMenu.spec.tsx.snap
rename to packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdownMenu.spec.tsx.snap
index 70d92ace..6dfa1cd7 100644
--- a/src/components/dropdown/__tests__/__snapshots__/CDropdownMenu.spec.tsx.snap
+++ b/packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdownMenu.spec.tsx.snap
@@ -9,7 +9,6 @@ exports[`CDropdownMenu customize 1`] = `
aria-hidden="false"
class="dropdown-menu show bazinga"
role="menu"
- style="position: absolute; left: 0px; top: 0px;"
>
Test
diff --git a/src/components/dropdown/__tests__/__snapshots__/CDropdownToggle.spec.tsx.snap b/packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdownToggle.spec.tsx.snap
similarity index 100%
rename from src/components/dropdown/__tests__/__snapshots__/CDropdownToggle.spec.tsx.snap
rename to packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdownToggle.spec.tsx.snap
diff --git a/packages/coreui-react/src/components/dropdown/index.ts b/packages/coreui-react/src/components/dropdown/index.ts
new file mode 100644
index 00000000..0ffdaf0c
--- /dev/null
+++ b/packages/coreui-react/src/components/dropdown/index.ts
@@ -0,0 +1,17 @@
+import { CDropdown } from './CDropdown'
+import { CDropdownDivider } from './CDropdownDivider'
+import { CDropdownHeader } from './CDropdownHeader'
+import { CDropdownItem } from './CDropdownItem'
+import { CDropdownItemPlain } from './CDropdownItemPlain'
+import { CDropdownMenu } from './CDropdownMenu'
+import { CDropdownToggle } from './CDropdownToggle'
+
+export {
+ CDropdown,
+ CDropdownDivider,
+ CDropdownHeader,
+ CDropdownItem,
+ CDropdownItemPlain,
+ CDropdownMenu,
+ CDropdownToggle,
+}
diff --git a/src/components/footer/CFooter.tsx b/packages/coreui-react/src/components/footer/CFooter.tsx
similarity index 83%
rename from src/components/footer/CFooter.tsx
rename to packages/coreui-react/src/components/footer/CFooter.tsx
index c5b006a2..5a73788f 100644
--- a/src/components/footer/CFooter.tsx
+++ b/packages/coreui-react/src/components/footer/CFooter.tsx
@@ -15,10 +15,12 @@ export interface CFooterProps extends HTMLAttributes {
export const CFooter = forwardRef(
({ children, className, position, ...rest }, ref) => {
- const _className = classNames('footer', { [`footer-${position}`]: position }, className)
-
return (
-
+
{children}
)
diff --git a/src/components/footer/__tests__/CFooter.spec.tsx b/packages/coreui-react/src/components/footer/__tests__/CFooter.spec.tsx
similarity index 100%
rename from src/components/footer/__tests__/CFooter.spec.tsx
rename to packages/coreui-react/src/components/footer/__tests__/CFooter.spec.tsx
diff --git a/src/components/footer/__tests__/__snapshots__/CFooter.spec.tsx.snap b/packages/coreui-react/src/components/footer/__tests__/__snapshots__/CFooter.spec.tsx.snap
similarity index 100%
rename from src/components/footer/__tests__/__snapshots__/CFooter.spec.tsx.snap
rename to packages/coreui-react/src/components/footer/__tests__/__snapshots__/CFooter.spec.tsx.snap
diff --git a/packages/coreui-react/src/components/footer/index.ts b/packages/coreui-react/src/components/footer/index.ts
new file mode 100644
index 00000000..4913ac71
--- /dev/null
+++ b/packages/coreui-react/src/components/footer/index.ts
@@ -0,0 +1,3 @@
+import { CFooter } from './CFooter'
+
+export { CFooter }
diff --git a/src/components/form/CForm.tsx b/packages/coreui-react/src/components/form/CForm.tsx
similarity index 69%
rename from src/components/form/CForm.tsx
rename to packages/coreui-react/src/components/form/CForm.tsx
index 4cb13d63..5bcd7dac 100644
--- a/src/components/form/CForm.tsx
+++ b/packages/coreui-react/src/components/form/CForm.tsx
@@ -1,8 +1,8 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
+import React, { forwardRef, FormHTMLAttributes } from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
-export interface CFormProps extends HTMLAttributes
{
+export interface CFormProps extends FormHTMLAttributes {
/**
* A string of all className you want applied to the component.
*/
@@ -15,9 +15,12 @@ export interface CFormProps extends HTMLAttributes {
export const CForm = forwardRef(
({ children, className, validated, ...rest }, ref) => {
- const _className = classNames({ 'was-validated': validated }, className)
return (
-
)
diff --git a/packages/coreui-react/src/components/form/CFormCheck.tsx b/packages/coreui-react/src/components/form/CFormCheck.tsx
new file mode 100644
index 00000000..7f770d4f
--- /dev/null
+++ b/packages/coreui-react/src/components/form/CFormCheck.tsx
@@ -0,0 +1,227 @@
+import React, { forwardRef, InputHTMLAttributes, ReactNode, useEffect, useRef } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+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.
+ *
+ * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
+ */
+ color?: Colors
+ /**
+ * Select the shape of the component.
+ *
+ * @type 'rounded' | 'rounded-top' | 'rounded-end' | 'rounded-bottom' | 'rounded-start' | 'rounded-circle' | 'rounded-pill' | 'rounded-0' | 'rounded-1' | 'rounded-2' | 'rounded-3' | string
+ */
+ shape?: Shapes
+ /**
+ * Size the component small or large.
+ */
+ size?: 'sm' | 'lg'
+ /**
+ * Set the button variant to an outlined button or a ghost button.
+ */
+ variant?: 'outline' | 'ghost'
+}
+
+export interface CFormCheckProps
+ extends CFormControlValidationProps,
+ InputHTMLAttributes {
+ /**
+ * Create button-like checkboxes and radio buttons.
+ */
+ button?: ButtonObject
+ /**
+ * A string of all className you want applied to the component.
+ */
+ className?: string
+ /**
+ * Sets hit area to the full area of the component.
+ */
+ hitArea?: 'full'
+ /**
+ * The id global attribute defines an identifier (ID) that must be unique in the whole document.
+ */
+ id?: string
+ /**
+ * Input Checkbox indeterminate Property.
+ */
+ indeterminate?: boolean
+ /**
+ * Group checkboxes or radios on the same horizontal row.
+ */
+ inline?: boolean
+ /**
+ * Set component validation state to invalid.
+ */
+ invalid?: boolean
+ /**
+ * The element represents a caption for a component.
+ */
+ label?: string | ReactNode
+ /**
+ * Put checkboxes or radios on the opposite side.
+ *
+ * @sinve 4.7.0
+ */
+ reverse?: boolean
+ /**
+ * Specifies the type of component.
+ */
+ type?: 'checkbox' | 'radio'
+ /**
+ * Set component validation state to valid.
+ */
+ valid?: boolean
+}
+
+export const CFormCheck = forwardRef(
+ (
+ {
+ className,
+ button,
+ feedback,
+ feedbackInvalid,
+ feedbackValid,
+ floatingLabel,
+ tooltipFeedback,
+ hitArea,
+ id,
+ indeterminate,
+ inline,
+ invalid,
+ label,
+ reverse,
+ type = 'checkbox',
+ valid,
+ ...rest
+ },
+ ref,
+ ) => {
+ const inputRef = useRef(null)
+ const forkedRef = useForkedRef(ref, inputRef)
+
+ useEffect(() => {
+ if (inputRef.current && indeterminate) {
+ inputRef.current.indeterminate = indeterminate
+ }
+ }, [indeterminate, inputRef.current])
+
+ const FormControl = () => (
+
+ {label}
+
+ )
+
+ const FormCheck = () => {
+ if (button) {
+ return (
+ <>
+
+ {label}
+
+
+
+ )
+ }
+
+ return = ({
+ describedby,
+ feedback,
+ feedbackInvalid,
+ feedbackValid,
+ invalid,
+ tooltipFeedback,
+ valid,
+}) => {
+ return (
+ <>
+ {feedback && (valid || invalid) && (
+
+ {feedback}
+
+ )}
+ {feedbackInvalid && (
+
+ {feedbackInvalid}
+
+ )}
+ {feedbackValid && (
+
+ {feedbackValid}
+
+ )}
+
+ )
+}
+
+CFormControlValidation.propTypes = {
+ describedby: PropTypes.string,
+ feedback: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+ feedbackValid: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+ feedbackInvalid: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+ invalid: PropTypes.bool,
+ tooltipFeedback: PropTypes.bool,
+ valid: PropTypes.bool,
+}
+
+CFormControlValidation.displayName = 'CFormControlValidation'
diff --git a/packages/coreui-react/src/components/form/CFormControlWrapper.tsx b/packages/coreui-react/src/components/form/CFormControlWrapper.tsx
new file mode 100644
index 00000000..01b32351
--- /dev/null
+++ b/packages/coreui-react/src/components/form/CFormControlWrapper.tsx
@@ -0,0 +1,97 @@
+import React, { FC, ReactNode } from 'react'
+import PropTypes from 'prop-types'
+
+import { CFormControlValidation, CFormControlValidationProps } from './CFormControlValidation'
+import { CFormFloating } from './CFormFloating'
+import { CFormLabel } from './CFormLabel'
+import { CFormText } from './CFormText'
+
+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`.
+ *
+ * @since 4.2.0
+ */
+ floatingLabel?: ReactNode | string
+ /**
+ * @ignore
+ */
+ id?: string
+ /**
+ * Add a caption for a component.
+ *
+ * @since 4.2.0
+ */
+ label?: ReactNode | string
+ /**
+ * Add helper text to the component.
+ *
+ * @since 4.2.0
+ */
+ text?: ReactNode | string
+}
+
+export const CFormControlWrapper: FC = ({
+ children,
+ describedby,
+ feedback,
+ feedbackInvalid,
+ feedbackValid,
+ floatingClassName,
+ floatingLabel,
+ id,
+ invalid,
+ label,
+ text,
+ tooltipFeedback,
+ valid,
+}) => {
+ const FormControlValidation = () => (
+
+ {children}
+ {label || floatingLabel}
+ {text && {text} }
+
+ ) : (
+ <>
+ {label && {label} }
+ {children}
+ {text && {text} }
+ {
- const _className = classNames(
- {
- [`invalid-${tooltip ? 'tooltip' : 'feedback'}`]: invalid,
- [`valid-${tooltip ? 'tooltip' : 'feedback'}`]: valid,
- },
- className,
- )
return (
-
+
{children}
)
diff --git a/src/components/form/CFormFloating.tsx b/packages/coreui-react/src/components/form/CFormFloating.tsx
similarity index 84%
rename from src/components/form/CFormFloating.tsx
rename to packages/coreui-react/src/components/form/CFormFloating.tsx
index dbb98242..5d2ec950 100644
--- a/src/components/form/CFormFloating.tsx
+++ b/packages/coreui-react/src/components/form/CFormFloating.tsx
@@ -11,9 +11,8 @@ export interface CFormFloatingProps extends HTMLAttributes {
export const CFormFloating = forwardRef(
({ children, className, ...rest }, ref) => {
- const _className = classNames('form-floating', className)
return (
-
+
{children}
)
diff --git a/packages/coreui-react/src/components/form/CFormInput.tsx b/packages/coreui-react/src/components/form/CFormInput.tsx
new file mode 100644
index 00000000..82bdc27e
--- /dev/null
+++ b/packages/coreui-react/src/components/form/CFormInput.tsx
@@ -0,0 +1,141 @@
+import React, {
+ ChangeEventHandler,
+ forwardRef,
+ InputHTMLAttributes,
+ useEffect,
+ useState,
+} from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { CFormControlWrapper, CFormControlWrapperProps } from './CFormControlWrapper'
+
+export interface CFormInputProps
+ extends CFormControlWrapperProps,
+ Omit
, 'size'> {
+ /**
+ * A string of all className you want applied to the component.
+ */
+ className?: string
+ /**
+ * Delay onChange event while typing. If set to true onChange event will be delayed 500ms, you can also provide the number of milliseconds you want to delay the onChange event.
+ */
+ delay?: boolean | number
+ /**
+ * Toggle the disabled state for the component.
+ */
+ disabled?: boolean
+ /**
+ * Method called immediately after the `value` prop changes.
+ */
+ onChange?: ChangeEventHandler
+ /**
+ * Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`.
+ */
+ plainText?: boolean
+ /**
+ * Toggle the readonly state for the component.
+ */
+ readOnly?: boolean
+ /**
+ * Size the component small or large.
+ */
+ size?: 'sm' | 'lg'
+ /**
+ * Specifies the type of component.
+ */
+ type?: 'color' | 'file' | 'text' | string
+ /**
+ * The `value` attribute of component.
+ *
+ * @controllable onChange
+ * */
+ value?: string | string[] | number
+}
+
+export const CFormInput = forwardRef(
+ (
+ {
+ children,
+ className,
+ delay = false,
+ feedback,
+ feedbackInvalid,
+ feedbackValid,
+ floatingClassName,
+ floatingLabel,
+ id,
+ invalid,
+ label,
+ onChange,
+ plainText,
+ size,
+ text,
+ tooltipFeedback,
+ type = 'text',
+ valid,
+ ...rest
+ },
+ ref,
+ ) => {
+ const [value, setValue] = useState>()
+
+ useEffect(() => {
+ const timeOutId = setTimeout(
+ () => value && onChange && onChange(value),
+ typeof delay === 'number' ? delay : 500,
+ )
+
+ return () => clearTimeout(timeOutId)
+ }, [value])
+
+ return (
+
+
+ )
+ },
+)
+
+CFormInput.propTypes = {
+ className: PropTypes.string,
+ id: PropTypes.string,
+ delay: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
+ plainText: PropTypes.bool,
+ size: PropTypes.oneOf(['sm', 'lg']),
+ type: PropTypes.oneOfType([PropTypes.oneOf(['color', 'file', 'text']), PropTypes.string]),
+ ...CFormControlWrapper.propTypes,
+}
+
+CFormInput.displayName = 'CFormInput'
diff --git a/src/components/form/CFormLabel.tsx b/packages/coreui-react/src/components/form/CFormLabel.tsx
similarity index 70%
rename from src/components/form/CFormLabel.tsx
rename to packages/coreui-react/src/components/form/CFormLabel.tsx
index c456c323..5e8e06f0 100644
--- a/src/components/form/CFormLabel.tsx
+++ b/packages/coreui-react/src/components/form/CFormLabel.tsx
@@ -1,8 +1,8 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
+import React, { forwardRef, LabelHTMLAttributes } from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
-export interface CFormLabelProps extends HTMLAttributes {
+export interface CFormLabelProps extends LabelHTMLAttributes {
/**
* A string of all className you want applied to the component.
*/
@@ -15,9 +15,8 @@ export interface CFormLabelProps extends HTMLAttributes {
export const CFormLabel = forwardRef(
({ children, className, customClassName, ...rest }, ref) => {
- const _className = customClassName ? customClassName : classNames('form-label', className)
return (
- 
+
+### Gold Sponsors
+
+Support this project by [becoming a Gold Sponsor](https://opencollective.com/coreui/contribute/gold-sponsor-40960/). A big company logo will be added here with a link to your website.
+
+
+
+### Silver Sponsors
+
+Support this project by [becoming a Silver Sponsor](https://opencollective.com/coreui/contribute/silver-sponsor-40967/). A medium company logo will be added here with a link to your website.
+
+
+
+### Backers
+
+Thanks to all the backers and sponsors! Support this project by [becoming a backer](https://opencollective.com/coreui/contribute/backer-40965/).
+
+
+
+
+
## Copyright and license
-Copyright 2021 creativeLabs Łukasz Holeczek. Code released under the [MIT License](https://github.com/coreui/coreui-react/blob/v4-dev/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/).
+Copyright 2023 creativeLabs Łukasz Holeczek. Code released under the [MIT License](https://github.com/coreui/coreui-react/blob/main/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/).
\ No newline at end of file
diff --git a/build/.eslintrc.json b/build/.eslintrc.json
deleted file mode 100644
index 40605483..00000000
--- a/build/.eslintrc.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
- "env": {
- "browser": false,
- "node": true
- },
- "parserOptions": {
- "sourceType": "script"
- },
- "extends": "../.eslintrc.js",
- "rules": {
- "no-console": "off",
- "strict": "error"
- }
-}
\ No newline at end of file
diff --git a/build/api.js b/build/api.js
deleted file mode 100644
index 178140f5..00000000
--- a/build/api.js
+++ /dev/null
@@ -1,93 +0,0 @@
-#!/usr/bin/env node
-/* eslint-disable @typescript-eslint/no-var-requires */
-'use strict'
-
-const docgen = require('react-docgen-typescript')
-const fs = require('fs').promises
-const path = require('path')
-const globby = require('globby')
-const pkg = require('../package.json')
-
-const GLOB = ['src/components/**/*.tsx']
-const GLOBBY_OPTIONS = {
- cwd: path.join(__dirname, '..'),
- gitignore: true,
- ignore: ['**/__tests__/**'],
-}
-const EXCLUDED_FILES = []
-
-const options = {
- savePropValueAsString: true,
-}
-
-async function createMdx(file, filename, name, props) {
- if (typeof props === 'undefined') return
-
- let content = `
-\`\`\`jsx
-import { ${name} } from '@coreui/react'
-// or
-import ${name} from '@coreui/react/${file.replace('.tsx', '')}'
-\`\`\`\n
-`
-
- content += `| Property | Description | Type | Default |\n`
- content += `| --- | --- | --- | --- |\n`
-
- for (const [key, value] of Object.entries(props).sort()) {
- if (
- value.parent.fileName !== 'react/node_modules/@types/react/index.d.ts' &&
- !value['description'].includes('@ignore')
- ) {
- const name = value.name || ''
- const description =
- value.description.replaceAll('\n', '