diff --git a/packages/coreui-react/src/components/breadcrumb/CBreadcrumbItem.tsx b/packages/coreui-react/src/components/breadcrumb/CBreadcrumbItem.tsx index 153ca479..fab4ec69 100644 --- a/packages/coreui-react/src/components/breadcrumb/CBreadcrumbItem.tsx +++ b/packages/coreui-react/src/components/breadcrumb/CBreadcrumbItem.tsx @@ -1,14 +1,22 @@ -import React, { forwardRef, HTMLAttributes } from 'react' +import React, { ElementType, forwardRef, HTMLAttributes } from 'react' import PropTypes from 'prop-types' import classNames from 'classnames' import { CLink } from '../link/CLink' +import { PolymorphicRefForwardingComponent } from '../../helpers' + export interface CBreadcrumbItemProps extends HTMLAttributes { /** * Toggle the active state for the component. */ active?: boolean + /** + * Component used for the root node. Either a string to use a HTML element or a component. + * + * @since 5.4.0 + */ + as?: ElementType /** * A string of all className you want applied to the base component. */ @@ -19,26 +27,33 @@ export interface CBreadcrumbItemProps extends HTMLAttributes { href?: string } -export const CBreadcrumbItem = forwardRef( - ({ children, active, className, href, ...rest }, ref) => { - return ( -
  • - {href ? {children} : children} -
  • - ) - }, -) +export const CBreadcrumbItem: PolymorphicRefForwardingComponent<'li', CBreadcrumbItemProps> = + forwardRef( + ({ children, active, as, className, href, ...rest }, ref) => { + return ( +
  • + {href ? ( + + {children} + + ) : ( + children + )} +
  • + ) + }, + ) CBreadcrumbItem.propTypes = { active: PropTypes.bool, diff --git a/packages/coreui-react/src/components/grid/CRow.tsx b/packages/coreui-react/src/components/grid/CRow.tsx index 14800d5e..05a54711 100644 --- a/packages/coreui-react/src/components/grid/CRow.tsx +++ b/packages/coreui-react/src/components/grid/CRow.tsx @@ -91,7 +91,7 @@ export const CRow = forwardRef( }) return ( -
    +
    {children}
    ) diff --git a/packages/coreui-react/src/components/tabs/CTab.tsx b/packages/coreui-react/src/components/tabs/CTab.tsx index 63a8dbbe..88e892d7 100644 --- a/packages/coreui-react/src/components/tabs/CTab.tsx +++ b/packages/coreui-react/src/components/tabs/CTab.tsx @@ -9,6 +9,10 @@ export interface CTabProps extends HTMLAttributes { * A string of all className you want applied to the base component. */ className?: string + /** + * Toggle the disabled state for the component. + */ + disabled?: boolean /** * Item key. */ @@ -50,6 +54,7 @@ export const CTab = forwardRef( CTab.propTypes = { children: PropTypes.node, className: PropTypes.string, + disabled: PropTypes.bool, itemKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, } diff --git a/packages/coreui-react/src/components/toast/CToast.tsx b/packages/coreui-react/src/components/toast/CToast.tsx index 449daaea..acc405b3 100644 --- a/packages/coreui-react/src/components/toast/CToast.tsx +++ b/packages/coreui-react/src/components/toast/CToast.tsx @@ -44,7 +44,7 @@ export interface CToastProps extends Omit, 'title /** * @ignore */ - key?: number + innerKey?: number | string /** * Callback fired when the component requests to be closed. */ @@ -76,7 +76,7 @@ export const CToast = forwardRef( color, delay = 5000, index, - key, + innerKey, visible = false, onClose, onShow, @@ -143,7 +143,7 @@ export const CToast = forwardRef( onMouseEnter={() => clearTimeout(timeout.current)} onMouseLeave={() => _autohide()} {...rest} - key={key} + key={innerKey} ref={forkedRef} > {children} @@ -163,7 +163,10 @@ CToast.propTypes = { color: colorPropType, delay: PropTypes.number, index: PropTypes.number, - key: PropTypes.number, + innerKey: PropTypes.oneOfType([ + PropTypes.number, + PropTypes.string + ]), onClose: PropTypes.func, onShow: PropTypes.func, visible: PropTypes.bool, diff --git a/packages/coreui-react/src/components/toast/CToaster.tsx b/packages/coreui-react/src/components/toast/CToaster.tsx index e7d41e76..7ad9b823 100644 --- a/packages/coreui-react/src/components/toast/CToaster.tsx +++ b/packages/coreui-react/src/components/toast/CToaster.tsx @@ -45,7 +45,7 @@ export const CToaster = forwardRef( ...state, React.cloneElement(push, { index: index.current, - key: index.current, + innerKey: index.current, onClose: (index: number) => setToasts((state) => state.filter((i) => i.props.index !== index)), }), diff --git a/packages/docs/content/api/CBreadcrumbItem.api.mdx b/packages/docs/content/api/CBreadcrumbItem.api.mdx index 431f6fb3..e3b91512 100644 --- a/packages/docs/content/api/CBreadcrumbItem.api.mdx +++ b/packages/docs/content/api/CBreadcrumbItem.api.mdx @@ -8,5 +8,6 @@ import CBreadcrumbItem from '@coreui/react/src/components/breadcrumb/CBreadcrumb | Property | Description | Type | Default | | --- | --- | --- | --- | | **active** | Toggle the active state for the component. | `boolean` | - | +| **as** **_5.4.0+_** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'li')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | | **className** | A string of all className you want applied to the base component. | `string` | - | | **href** | The `href` attribute for the inner `` component. | `string` | - | diff --git a/packages/docs/content/api/CTab.api.mdx b/packages/docs/content/api/CTab.api.mdx index f0ba1fe6..9a9835e5 100644 --- a/packages/docs/content/api/CTab.api.mdx +++ b/packages/docs/content/api/CTab.api.mdx @@ -8,4 +8,5 @@ import CTab from '@coreui/react/src/components/tabs/CTab' | Property | Description | Type | Default | | --- | --- | --- | --- | | **className** | A string of all className you want applied to the base component. | `string` | - | +| **disabled** | Toggle the disabled state for the component. | `boolean` | - | | **itemKey** | Item key. | `string` \| `number` | - |