Merge branch 'v4-dev' into v4

build/api.js

@@ -20,10 +20,18 @@ const options = {
   savePropValueAsString: true,
 }
 
-async function createMdx(filename, name, props) {
+async function createMdx(file, filename, name, props) {
   if (typeof props === 'undefined') return
 
-  let content = `| Property | Description | Type | Default |\n`
+  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()) {
@@ -34,13 +42,22 @@ async function createMdx(filename, name, props) {
       const name = value.name || ''
       const description =
         value.description.replaceAll('\n', '<br/>').replaceAll(' [docs]', '') || '-'
-      const type =
-        value.type ? value.type.name.includes('ReactElement')
+      const type = value.type
+        ? value.type.name.includes('ReactElement')
           ? 'ReactElement'
-          : value.type.name : ''
-      const defaultValue = value.defaultValue ? value.defaultValue.value : '-'
+          : value.type.name
+        : ''
+      const defaultValue = value.defaultValue
+        ? value.defaultValue.value.replace('undefined', '-')
+        : '-'
+      const types = []
+      type.split(' | ').map((element) => {
+        types.push(`\`${element.replace(/"/g, "'")}\``)
+      })
 
-      content += `| **${name}** | ${description} | \`${type}\` | ${defaultValue} |\n`
+      // content += `| **${name}** | ${description} | \`${type
+      //   .replace(/"/g, "'")\` | ${defaultValue} |\n`
+      content += `| **${name}** | ${description} | ${types.join(' \\| ')} | ${defaultValue} |\n`
       console.log(`${filename} - ${key}`)
     }
   }
@@ -63,7 +80,7 @@ async function main() {
         const props = docgen.parse(file, options)
         if (props && typeof props[0] !== 'undefined') {
           const filename = path.basename(file, '.tsx')
-          createMdx(filename, props[0].displayName, props[0].props)
+          createMdx(file, filename, props[0].displayName, props[0].props)
         }
       }),
     )

docs/4.0/api/CAccordion.api.mdx

@@ -1,6 +1,13 @@
+
+```jsx
+import { CAccordion } from '@coreui/react'
+// or
+import CAccordion from '@coreui/react/src/components/accordion/CAccordion'
+```
+
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
-| **activeItemKey** | The active item key. | `string | number` | undefined |
+| **activeItemKey** | The active item key. | `string` \| `number` | - |
 | **alwaysOpen** | Make accordion items stay open when another item is opened | `boolean` | false |
 | **className** | A string of all className you want applied to the base component. | `string` | - |
 | **flush** | Removes the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container. | `boolean` | - |

docs/4.0/api/CAccordionBody.api.mdx

@@ -1,3 +1,10 @@
+
+```jsx
+import { CAccordionBody } from '@coreui/react'
+// or
+import CAccordionBody from '@coreui/react/src/components/accordion/CAccordionBody'
+```
+
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | **className** | A string of all className you want applied to the base component. | `string` | - |

docs/4.0/api/CAccordionButton.api.mdx

@@ -1,3 +1,10 @@
+
+```jsx
+import { CAccordionButton } from '@coreui/react'
+// or
+import CAccordionButton from '@coreui/react/src/components/accordion/CAccordionButton'
+```
+
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | **className** | A string of all className you want applied to the base component. | `string` | - |

docs/4.0/api/CAccordionCollapse.api.mdx

@@ -1,4 +1,13 @@
+
+```jsx
+import { CAccordionCollapse } from '@coreui/react'
+// or
+import CAccordionCollapse from '@coreui/react/src/components/accordion/CAccordionCollapse'
+```
+
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | **className** | A string of all className you want applied to the base component. | `string` | - |
+| **onHide** | Callback fired when the component requests to be hidden. | `() => void` | - |
+| **onShow** | Callback fired when the component requests to be shown. | `() => void` | - |
 | **visible** | Toggle the visibility of component. | `boolean` | - |

docs/4.0/api/CAccordionHeader.api.mdx

@@ -1,3 +1,10 @@
+
+```jsx
+import { CAccordionHeader } from '@coreui/react'
+// or
+import CAccordionHeader from '@coreui/react/src/components/accordion/CAccordionHeader'
+```
+
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | **className** | A string of all className you want applied to the base component. | `string` | - |

docs/4.0/api/CAccordionItem.api.mdx

@@ -1,4 +1,11 @@
+
+```jsx
+import { CAccordionItem } from '@coreui/react'
+// or
+import CAccordionItem from '@coreui/react/src/components/accordion/CAccordionItem'
+```
+
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | **className** | A string of all className you want applied to the base component. | `string` | - |
-| **itemKey** | Item key. | `string | number` | - |
+| **itemKey** | Item key. | `string` \| `number` | - |

docs/4.0/api/CAlert.api.mdx

@@ -1,9 +1,15 @@
+
+```jsx
+import { CAlert } from '@coreui/react'
+// or
+import CAlert from '@coreui/react/src/components/alert/CAlert'
+```
+
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | **className** | A string of all className you want applied to the component. | `string` | - |
-| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `{'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string }` | primary |
+| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | primary |
 | **dismissible** | Optionally add a close button to alert and allow it to self dismiss. | `boolean` | - |
-| **onDismiss** | Method called before the dissmiss animation has started. | `() => void` | - |
-| **onDismissed** | Method called after the dissmiss animation has completed and the component is removed from the dom. | `() => void` | - |
+| **onClose** | Callback fired when the component requests to be closed. | `() => void` | - |
 | **variant** | Set the alert variant to a solid. | `string` | - |
 | **visible** | Toggle the visibility of component. | `boolean` | true |

docs/4.0/api/CAlertHeading.api.mdx

@@ -1,4 +1,11 @@
+
+```jsx
+import { CAlertHeading } from '@coreui/react'
+// or
+import CAlertHeading from '@coreui/react/src/components/alert/CAlertHeading'
+```
+
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | **className** | A string of all className you want applied to the base component. | `string` | - |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | `string | ComponentClass<any, any> | FunctionComponent<any>` | 'h4' |
+| **component** | Component used for the root node. Either a string to use a HTML element or a component. | `string` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` | - |

docs/4.0/api/CAlertLink.api.mdx

@@ -1,3 +1,10 @@
+
+```jsx
+import { CAlertLink } from '@coreui/react'
+// or
+import CAlertLink from '@coreui/react/src/components/alert/CAlertLink'
+```
+
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | **className** | A string of all className you want applied to the base component. | `string` | - |

docs/4.0/api/CAvatar.api.mdx

@@ -1,9 +1,16 @@
+
+```jsx
+import { CAvatar } from '@coreui/react'
+// or
+import CAvatar from '@coreui/react/src/components/avatar/CAvatar'
+```
+
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | **className** | A string of all className you want applied to the component. | `string` | - |
-| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `{'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string}` | - |
-| **shape** | Select the shape of the component. | `{'rounded' | 'rounded-top' | 'rounded-end' | 'rounded-bottom' | 'rounded-start' | 'rounded-circle' | 'rounded-pill' | 'rounded-0' | 'rounded-1' | 'rounded-2' | 'rounded-3' | string}` | - |
+| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - |
+| **shape** | Select the shape of the component. | `'rounded'` \| `'rounded-top'` \| `'rounded-end'` \| `'rounded-bottom'` \| `'rounded-start'` \| `'rounded-circle'` \| `'rounded-pill'` \| `'rounded-0'` \| `'rounded-1'` \| `'rounded-2'` \| `'rounded-3'` \| `string` | - |
 | **size** | Size the component small, large, or extra large. | `string` | - |
 | **src** | The src attribute for the img element. | `string` | - |
-| **status** | Sets the color context of the status indicator to one of CoreUI’s themed colors. | `{'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string}` | - |
-| **textColor** | Sets the text color of the component to one of CoreUI’s themed colors. | `'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | 'white' | 'muted' | string` | - |
+| **status** | Sets the color context of the status indicator to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - |
+| **textColor** | Sets the text color of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `'white'` \| `'muted'` \| `'high-emphasis'` \| `'medium-emphasis'` \| `'disabled'` \| `'high-emphasis-inverse'` \| `'medium-emphasis-inverse'` \| `'disabled-inverse'` \| `string` | - |

docs/4.0/api/CBackdrop.api.mdx

@@ -1,3 +1,10 @@
+
+```jsx
+import { CBackdrop } from '@coreui/react'
+// or
+import CBackdrop from '@coreui/react/src/components/backdrop/CBackdrop'
+```
+
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | **className** | A string of all className you want applied to the base component. | `string` | modal-backdrop |

docs/4.0/api/CBadge.api.mdx

@@ -1,8 +1,16 @@
+
+```jsx
+import { CBadge } from '@coreui/react'
+// or
+import CBadge from '@coreui/react/src/components/badge/CBadge'
+```
+
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | **className** | A string of all className you want applied to the component. | `string` | - |
-| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `{'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string}` | - |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | `string | ComponentClass<any, any> | FunctionComponent<any>` | 'span' |
-| **shape** | Select the shape of the component. | `'rounded' | 'rounded-top' | 'rounded-end' | 'rounded-bottom' | 'rounded-start' | 'rounded-circle' | 'rounded-pill' | 'rounded-0' | 'rounded-1' | 'rounded-2' | 'rounded-3' | string` | - |
+| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - |
+| **component** | Component used for the root node. Either a string to use a HTML element or a component. | `string` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` | - |
+| **position** | Position badge in one of the corners of a link or button. | `'top-start'` \| `'top-end'` \| `'bottom-end'` \| `'bottom-start'` | - |
+| **shape** | Select the shape of the component. | `'rounded'` \| `'rounded-top'` \| `'rounded-end'` \| `'rounded-bottom'` \| `'rounded-start'` \| `'rounded-circle'` \| `'rounded-pill'` \| `'rounded-0'` \| `'rounded-1'` \| `'rounded-2'` \| `'rounded-3'` \| `string` | - |
 | **size** | Size the component small. | `'sm'` | - |
-| **textColor** | Sets the text color of the component to one of CoreUI’s themed colors. | `'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | 'white' | 'muted' | string` | - |
+| **textColor** | Sets the text color of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `'white'` \| `'muted'` \| `'high-emphasis'` \| `'medium-emphasis'` \| `'disabled'` \| `'high-emphasis-inverse'` \| `'medium-emphasis-inverse'` \| `'disabled-inverse'` \| `string` | - |

docs/4.0/api/CBreadcrumb.api.mdx

@@ -1,3 +1,10 @@
+
+```jsx
+import { CBreadcrumb } from '@coreui/react'
+// or
+import CBreadcrumb from '@coreui/react/src/components/breadcrumb/CBreadcrumb'
+```
+
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | **className** | A string of all className you want applied to the component. | `string` | - |

docs/4.0/api/CBreadcrumbItem.api.mdx

@@ -1,3 +1,10 @@
+
+```jsx
+import { CBreadcrumbItem } from '@coreui/react'
+// or
+import CBreadcrumbItem from '@coreui/react/src/components/breadcrumb/CBreadcrumbItem'
+```
+
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | **active** | Toggle the active state for the component. | `boolean` | - |

docs/4.0/api/CButton.api.mdx

@@ -1,13 +1,20 @@
+
+```jsx
+import { CButton } from '@coreui/react'
+// or
+import CButton from '@coreui/react/src/components/button/CButton'
+```
+
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | **active** | Toggle the active state for the component. | `boolean` | - |
 | **className** | A string of all className you want applied to the base component. | `string` | - |
-| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string` | primary |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | `string | ComponentClass<any, any> | FunctionComponent<any>` | button |
+| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | primary |
+| **component** | Component used for the root node. Either a string to use a HTML element or a component. | `string` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` | button |
 | **disabled** | Toggle the disabled state for the component. | `boolean` | - |
 | **href** | The href attribute specifies the URL of the page the link goes to. | `string` | - |
 | **role** | The role attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers. | `string` | - |
-| **shape** | Select the shape of the component. | `'rounded' | 'rounded-top' | 'rounded-end' | 'rounded-bottom' | 'rounded-start' | 'rounded-circle' | 'rounded-pill' | 'rounded-0' | 'rounded-1' | 'rounded-2' | 'rounded-3' | string` | - |
-| **size** | Size the component small or large. | `'sm' | 'lg'` | - |
-| **type** | Specifies the type of button. Always specify the type attribute for the `<button>` element.<br/>Different browsers may use different default types for the `<button>` element. | `'button' | 'submit' | 'reset'` | button |
-| **variant** | Set the button variant to an outlined button or a ghost button. | `"outline" | "ghost"` | - |
+| **shape** | Select the shape of the component. | `'rounded'` \| `'rounded-top'` \| `'rounded-end'` \| `'rounded-bottom'` \| `'rounded-start'` \| `'rounded-circle'` \| `'rounded-pill'` \| `'rounded-0'` \| `'rounded-1'` \| `'rounded-2'` \| `'rounded-3'` \| `string` | - |
+| **size** | Size the component small or large. | `'sm'` \| `'lg'` | - |
+| **type** | Specifies the type of button. Always specify the type attribute for the `<button>` element.<br/>Different browsers may use different default types for the `<button>` element. | `'button'` \| `'submit'` \| `'reset'` | button |
+| **variant** | Set the button variant to an outlined button or a ghost button. | `'outline'` \| `'ghost'` | - |

docs/4.0/api/CButtonGroup.api.mdx

@@ -1,5 +1,12 @@
+
+```jsx
+import { CButtonGroup } from '@coreui/react'
+// or
+import CButtonGroup from '@coreui/react/src/components/button-group/CButtonGroup'
+```
+
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | **className** | A string of all className you want applied to the base component. | `string` | - |
-| **size** | Size the component small or large. | `{'sm' | 'lg'}` | - |
+| **size** | Size the component small or large. | `'sm'` \| `'lg'` | - |
 | **vertical** | Create a set of buttons that appear vertically stacked rather than horizontally. Split button dropdowns are not supported here. | `boolean` | - |

docs/4.0/api/CButtonToolbar.api.mdx

@@ -1,3 +1,10 @@
+
+```jsx
+import { CButtonToolbar } from '@coreui/react'
+// or
+import CButtonToolbar from '@coreui/react/src/components/button-group/CButtonToolbar'
+```
+
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | **className** | A string of all className you want applied to the base component. | `string` | - |

docs/4.0/api/CCallout.api.mdx

@@ -1,4 +1,11 @@
+
+```jsx
+import { CCallout } from '@coreui/react'
+// or
+import CCallout from '@coreui/react/src/components/callout/CCallout'
+```
+
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | **className** | A string of all className you want applied to the base component. | `string` | - |
-| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `{'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string}` | - |
+| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - |

docs/4.0/api/CCard.api.mdx

@@ -1,5 +1,12 @@
+
+```jsx
+import { CCard } from '@coreui/react'
+// or
+import CCard from '@coreui/react/src/components/card/CCard'
+```
+
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | **className** | A string of all className you want applied to the base component. | `string` | - |
-| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string` | - |
-| **textColor** | Sets the text color context of the component to one of CoreUI’s themed colors. | `'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | 'white' | 'muted' | string` | - |
+| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - |
+| **textColor** | Sets the text color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `'white'` \| `'muted'` \| `'high-emphasis'` \| `'medium-emphasis'` \| `'disabled'` \| `'high-emphasis-inverse'` \| `'medium-emphasis-inverse'` \| `'disabled-inverse'` \| `string` | - |

docs/4.0/api/CCardBody.api.mdx

@@ -1,3 +1,10 @@
+
+```jsx
+import { CCardBody } from '@coreui/react'
+// or
+import CCardBody from '@coreui/react/src/components/card/CCardBody'
+```
+
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | **className** | A string of all className you want applied to the base component. | `string` | - |

docs/4.0/api/CCardFooter.api.mdx

@@ -1,3 +1,10 @@
+
+```jsx
+import { CCardFooter } from '@coreui/react'
+// or
+import CCardFooter from '@coreui/react/src/components/card/CCardFooter'
+```
+
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | **className** | A string of all className you want applied to the base component. | `string` | - |

docs/4.0/api/CCardGroup.api.mdx

@@ -1,3 +1,10 @@
+
+```jsx
+import { CCardGroup } from '@coreui/react'
+// or
+import CCardGroup from '@coreui/react/src/components/card/CCardGroup'
+```
+
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | **className** | A string of all className you want applied to the base component. | `string` | - |