diff --git a/README.md b/README.md index 26d6b460..f50b90dc 100644 --- a/README.md +++ b/README.md @@ -46,7 +46,7 @@ Several quick start options are available: -- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.3.0.zip) +- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.4.0.zip) - Clone the repo: `git clone https://github.com/coreui/coreui-react.git` - Install with [npm](https://www.npmjs.com/): `npm install @coreui/react` - Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/react` diff --git a/lerna.json b/lerna.json index 8e4098d4..a5830df9 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,6 @@ { "npmClient": "yarn", "packages": ["packages/*"], - "version": "5.3.0", + "version": "5.4.0", "$schema": "node_modules/lerna/schemas/lerna-schema.json" } diff --git a/package.json b/package.json index c5b7df9c..e9ecc32b 100644 --- a/package.json +++ b/package.json @@ -22,15 +22,15 @@ "test:update": "npm-run-all charts:test:update icons:test:update lib:test:update" }, "devDependencies": { - "@typescript-eslint/eslint-plugin": "^7.15.0", - "@typescript-eslint/parser": "^7.15.0", + "@typescript-eslint/eslint-plugin": "^8.6.0", + "@typescript-eslint/parser": "^8.6.0", "eslint": "8.57.0", "eslint-config-prettier": "^9.1.0", "eslint-plugin-prettier": "^5.2.1", - "eslint-plugin-react": "^7.35.0", + "eslint-plugin-react": "^7.36.1", "eslint-plugin-react-hooks": "^4.6.2", "eslint-plugin-unicorn": "^55.0.0", - "lerna": "^8.1.7", + "lerna": "^8.1.8", "npm-run-all": "^4.1.5", "prettier": "^3.3.3" }, diff --git a/packages/coreui-react/README.md b/packages/coreui-react/README.md index 95934c20..3817c711 100644 --- a/packages/coreui-react/README.md +++ b/packages/coreui-react/README.md @@ -46,7 +46,7 @@ Several quick start options are available: -- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.3.0.zip) +- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.4.0.zip) - Clone the repo: `git clone https://github.com/coreui/coreui-react.git` - Install with [npm](https://www.npmjs.com/): `npm install @coreui/react` - Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/react` diff --git a/packages/coreui-react/package.json b/packages/coreui-react/package.json index 9a9accca..ac389697 100644 --- a/packages/coreui-react/package.json +++ b/packages/coreui-react/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/react", - "version": "5.3.0", + "version": "5.4.0", "description": "UI Components Library for React.js", "keywords": [ "react", @@ -41,7 +41,7 @@ "test:update": "jest --coverage --updateSnapshot" }, "dependencies": { - "@coreui/coreui": "^5.1.0", + "@coreui/coreui": "^5.1.2", "@popperjs/core": "^2.11.8", "prop-types": "^15.8.1" }, @@ -49,12 +49,12 @@ "@rollup/plugin-commonjs": "^26.0.1", "@rollup/plugin-node-resolve": "^15.2.3", "@rollup/plugin-typescript": "^11.1.6", - "@testing-library/jest-dom": "^6.4.8", - "@testing-library/react": "^16.0.0", - "@types/jest": "^29.5.12", - "@types/react": "18.3.3", + "@testing-library/jest-dom": "^6.5.0", + "@testing-library/react": "^16.0.1", + "@types/jest": "^29.5.13", + "@types/react": "18.3.8", "@types/react-dom": "^18.3.0", - "@types/react-transition-group": "^4.4.10", + "@types/react-transition-group": "^4.4.11", "classnames": "^2.5.1", "cross-env": "^7.0.3", "jest": "^29.7.0", @@ -62,10 +62,10 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-transition-group": "^4.4.5", - "rollup": "^4.19.2", - "ts-jest": "^29.2.4", - "tslib": "^2.6.3", - "typescript": "^5.5.4" + "rollup": "^4.22.4", + "ts-jest": "^29.2.5", + "tslib": "^2.7.0", + "typescript": "^5.6.2" }, "peerDependencies": { "react": ">=17", 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/form/CFormSelect.tsx b/packages/coreui-react/src/components/form/CFormSelect.tsx index af0b2d72..42527495 100644 --- a/packages/coreui-react/src/components/form/CFormSelect.tsx +++ b/packages/coreui-react/src/components/form/CFormSelect.tsx @@ -7,6 +7,7 @@ import { CFormControlWrapper, CFormControlWrapperProps } from './CFormControlWra type Option = { disabled?: boolean label?: string + selected?: boolean value?: string } 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` | - | diff --git a/packages/docs/package.json b/packages/docs/package.json index a0e3a101..31890153 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/react-docs", - "version": "5.3.0", + "version": "5.4.0", "private": true, "description": "", "homepage": "https://coreui.io/react/", @@ -25,7 +25,7 @@ }, "dependencies": { "@coreui/chartjs": "^4.0.0", - "@coreui/coreui": "^5.1.0", + "@coreui/coreui": "^5.1.2", "@coreui/icons": "^3.0.1", "@coreui/icons-react": "^2.3.0", "@coreui/react-chartjs": "^3.0.0", @@ -39,7 +39,7 @@ "gatsby-plugin-image": "^3.13.1", "gatsby-plugin-manifest": "^5.13.1", "gatsby-plugin-mdx": "^5.13.1", - "gatsby-plugin-offline": "^6.13.2", + "gatsby-plugin-offline": "^6.13.3", "gatsby-plugin-react-helmet": "^6.13.1", "gatsby-plugin-sass": "^6.13.1", "gatsby-plugin-sharp": "^5.13.1", @@ -49,7 +49,7 @@ "gatsby-source-filesystem": "^5.13.1", "gatsby-transformer-sharp": "^5.13.1", "globby": "^14.0.2", - "prism-react-renderer": "^2.3.1", + "prism-react-renderer": "^2.4.0", "prismjs": "^1.29.0", "prop-types": "^15.8.1", "react": "^18.3.1", @@ -58,7 +58,7 @@ "react-helmet": "^6.1.0", "react-imask": "^7.6.1", "rimraf": "^6.0.1", - "sass": "^1.77.8" + "sass": "^1.79.3" }, "devDependencies": { "npm-run-all": "^4.1.5"