diff --git a/README.md b/README.md index 4b1884c3..26d6b460 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.2.0.zip) +- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.3.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 f19238c5..8e4098d4 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,6 @@ { "npmClient": "yarn", "packages": ["packages/*"], - "version": "5.2.0", + "version": "5.3.0", "$schema": "node_modules/lerna/schemas/lerna-schema.json" } diff --git a/package.json b/package.json index 2b78740b..c5b7df9c 100644 --- a/package.json +++ b/package.json @@ -26,13 +26,13 @@ "@typescript-eslint/parser": "^7.15.0", "eslint": "8.57.0", "eslint-config-prettier": "^9.1.0", - "eslint-plugin-prettier": "^5.1.3", - "eslint-plugin-react": "^7.34.3", + "eslint-plugin-prettier": "^5.2.1", + "eslint-plugin-react": "^7.35.0", "eslint-plugin-react-hooks": "^4.6.2", - "eslint-plugin-unicorn": "^54.0.0", - "lerna": "^8.1.6", + "eslint-plugin-unicorn": "^55.0.0", + "lerna": "^8.1.7", "npm-run-all": "^4.1.5", - "prettier": "^3.3.2" + "prettier": "^3.3.3" }, "overrides": { "gatsby-remark-external-links": { diff --git a/packages/coreui-react/README.md b/packages/coreui-react/README.md index 60d8b83c..95934c20 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.2.0.zip) +- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.3.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 74f11789..9a9accca 100644 --- a/packages/coreui-react/package.json +++ b/packages/coreui-react/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/react", - "version": "5.2.0", + "version": "5.3.0", "description": "UI Components Library for React.js", "keywords": [ "react", @@ -49,7 +49,7 @@ "@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.6", + "@testing-library/jest-dom": "^6.4.8", "@testing-library/react": "^16.0.0", "@types/jest": "^29.5.12", "@types/react": "18.3.3", @@ -62,10 +62,10 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-transition-group": "^4.4.5", - "rollup": "^4.18.0", - "ts-jest": "^29.1.5", + "rollup": "^4.19.2", + "ts-jest": "^29.2.4", "tslib": "^2.6.3", - "typescript": "^5.5.3" + "typescript": "^5.5.4" }, "peerDependencies": { "react": ">=17", diff --git a/packages/coreui-react/src/components/conditional-portal/CConditionalPortal.tsx b/packages/coreui-react/src/components/conditional-portal/CConditionalPortal.tsx index c1106bdc..ca9bea8c 100644 --- a/packages/coreui-react/src/components/conditional-portal/CConditionalPortal.tsx +++ b/packages/coreui-react/src/components/conditional-portal/CConditionalPortal.tsx @@ -2,7 +2,9 @@ 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) => { +const getContainer = ( + container?: DocumentFragment | Element | (() => DocumentFragment | Element | null) | null, +) => { if (container) { return typeof container === 'function' ? container() : container } @@ -18,13 +20,13 @@ export interface CConditionalPortalProps { /** * An HTML element or function that returns a single element, with `document.body` as the default. * - * @since v4.11.0 + * @since 4.11.0 */ - container?: Element | (() => Element | null) | null + container?: DocumentFragment | Element | (() => DocumentFragment | Element | null) | null /** * Render some children into a different part of the DOM */ - portal: boolean | any + portal: boolean } export const CConditionalPortal: FC = ({ @@ -48,7 +50,7 @@ export const CConditionalPortal: FC = ({ CConditionalPortal.propTypes = { children: PropTypes.node, container: PropTypes.any, // HTMLElement - portal: PropTypes.bool, + portal: PropTypes.bool.isRequired, } CConditionalPortal.displayName = 'CConditionalPortal' diff --git a/packages/coreui-react/src/components/dropdown/CDropdown.tsx b/packages/coreui-react/src/components/dropdown/CDropdown.tsx index 65101efc..076c1812 100644 --- a/packages/coreui-react/src/components/dropdown/CDropdown.tsx +++ b/packages/coreui-react/src/components/dropdown/CDropdown.tsx @@ -46,9 +46,9 @@ export interface CDropdownProps extends HTMLAttributes Element | null) | null + container?: DocumentFragment | Element | (() => DocumentFragment | Element | null) | null /** * Sets a darker color scheme to match a dark navbar. */ diff --git a/packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx b/packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx index 68c1cdef..3d7ce44c 100644 --- a/packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx +++ b/packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx @@ -21,7 +21,7 @@ export interface CDropdownToggleProps extends Omit { /** * If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button. * - * @since v5.0.0 + * @since 5.0.0 */ navLink?: boolean /** diff --git a/packages/coreui-react/src/components/modal/CModal.tsx b/packages/coreui-react/src/components/modal/CModal.tsx index 053e8162..e02c3425 100644 --- a/packages/coreui-react/src/components/modal/CModal.tsx +++ b/packages/coreui-react/src/components/modal/CModal.tsx @@ -31,6 +31,12 @@ export interface CModalProps extends HTMLAttributes { * A string of all className you want applied to the base component. */ className?: string + /** + * Appends the react modal to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`. + * + * @since 5.3.0 + */ + container?: DocumentFragment | Element | (() => DocumentFragment | Element | null) | null /** * @ignore */ @@ -38,7 +44,7 @@ export interface CModalProps extends HTMLAttributes { /** * Puts the focus on the modal when shown. * - * @since v4.10.0 + * @since 4.10.0 */ focus?: boolean /** @@ -101,6 +107,7 @@ export const CModal = forwardRef( alignment, backdrop = true, className, + container, duration = 150, focus = true, fullscreen, @@ -223,7 +230,7 @@ export const CModal = forwardRef( timeout={transition ? duration : 0} > {(state) => ( - +
( )} {backdrop && ( - + )} @@ -273,6 +280,7 @@ CModal.propTypes = { backdrop: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf<'static'>(['static'])]), children: PropTypes.node, className: PropTypes.string, + container: PropTypes.any, // HTMLElement duration: PropTypes.number, focus: PropTypes.bool, fullscreen: PropTypes.oneOfType([ diff --git a/packages/coreui-react/src/components/popover/CPopover.tsx b/packages/coreui-react/src/components/popover/CPopover.tsx index 24a41c20..1ed3393d 100644 --- a/packages/coreui-react/src/components/popover/CPopover.tsx +++ b/packages/coreui-react/src/components/popover/CPopover.tsx @@ -22,9 +22,9 @@ export interface CPopoverProps extends Omit, 'tit /** * Appends the react popover 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 + * @since 4.11.0 */ - container?: Element | (() => Element | null) | null + container?: DocumentFragment | Element | (() => DocumentFragment | Element | null) | null /** * Content node for your component. */ diff --git a/packages/coreui-react/src/components/tooltip/CTooltip.tsx b/packages/coreui-react/src/components/tooltip/CTooltip.tsx index 56158a3f..b971674f 100644 --- a/packages/coreui-react/src/components/tooltip/CTooltip.tsx +++ b/packages/coreui-react/src/components/tooltip/CTooltip.tsx @@ -22,9 +22,9 @@ export interface CTooltipProps extends Omit, 'con /** * Appends the react tooltip 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 + * @since 4.11.0 */ - container?: Element | (() => Element | null) | null + container?: DocumentFragment | Element | (() => DocumentFragment | Element | null) | null /** * Content node for your component. */ diff --git a/packages/docs/build/api.js b/packages/docs/build/api.mjs similarity index 83% rename from packages/docs/build/api.js rename to packages/docs/build/api.mjs index 084599da..7d92602e 100644 --- a/packages/docs/build/api.js +++ b/packages/docs/build/api.mjs @@ -2,10 +2,13 @@ 'use strict' -const fs = require('node:fs').promises -const path = require('node:path') -const globby = require('globby') -const docgen = require('react-docgen-typescript') +import { globby } from 'globby' +import { writeFile } from 'node:fs/promises' +import path from 'node:path' +import { fileURLToPath } from 'node:url' +import { parse } from 'react-docgen-typescript' + +const __dirname = path.dirname(fileURLToPath(import.meta.url)) const GLOB = [ '**/src/**/*.tsx', @@ -79,9 +82,9 @@ async function createMdx(file, filename, name, props) { const deprecated = value.tags.deprecated ? ` **_Deprecated ${value.tags.deprecated}+_**` : '' const description = value.description || '-' const type = value.type - ? (value.type.name.includes('ReactElement') + ? value.type.name.includes('ReactElement') ? 'ReactElement' - : value.type.name) + : value.type.name : '' const defaultValue = value.defaultValue ? value.defaultValue.value.replace('undefined', '-') @@ -97,13 +100,11 @@ async function createMdx(file, filename, name, props) { index++ } - await fs - .writeFile(`content/api/${filename}.api.mdx`, content, { - encoding: 'utf8', - }) - .then(() => { - console.log(`File created: ${filename}.api.mdx`) - }) + await writeFile(`content/api/${filename}.api.mdx`, content, { + encoding: 'utf8', + }).then(() => { + console.log(`File created: ${filename}.api.mdx`) + }) } async function main() { @@ -113,7 +114,8 @@ async function main() { await Promise.all( files.map((file) => { console.log(file) - const props = docgen.parse(file, options) + // const props = docgen.parse(file, options) + const props = parse(file, options) if (props && typeof props[0] !== 'undefined') { const filename = path.basename(file, '.tsx') createMdx(file, filename, props[0].displayName, props[0].props) diff --git a/packages/docs/content/api/CAccordionCollapse.api.mdx b/packages/docs/content/api/CAccordionCollapse.api.mdx deleted file mode 100644 index 55fdfd01..00000000 --- a/packages/docs/content/api/CAccordionCollapse.api.mdx +++ /dev/null @@ -1,13 +0,0 @@ - -```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` | - | diff --git a/packages/docs/content/api/CConditionalPortal.api.mdx b/packages/docs/content/api/CConditionalPortal.api.mdx index 4a269bf2..9a90013e 100644 --- a/packages/docs/content/api/CConditionalPortal.api.mdx +++ b/packages/docs/content/api/CConditionalPortal.api.mdx @@ -7,5 +7,5 @@ import CConditionalPortal from '@coreui/react/src/components/conditional-portal/ | Property | Description | Type | Default | | --- | --- | --- | --- | -| **container** **_v4.11.0+_** | An HTML element or function that returns a single element, with `document.body` as the default. | `Element` \| `(() => Element)` | - | -| **portal** | Render some children into a different part of the DOM | `any` | - | +| **container** **_4.11.0+_** | An HTML element or function that returns a single element, with `document.body` as the default. | `DocumentFragment` \| `Element` \| `(() => DocumentFragment` \| `Element)` | - | +| **portal** | Render some children into a different part of the DOM | `boolean` | - | diff --git a/packages/docs/content/api/CDropdown.api.mdx b/packages/docs/content/api/CDropdown.api.mdx index f9c7bd9b..80106e4d 100644 --- a/packages/docs/content/api/CDropdown.api.mdx +++ b/packages/docs/content/api/CDropdown.api.mdx @@ -11,7 +11,7 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown' | **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'div')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | div | | **autoClose** | 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. | `boolean` \| `'inside'` \| `'outside'` | true | | **className** | A string of all className you want applied to the base component. | `string` | - | -| **container** **_v4.11.0+_** | 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`. | `Element` \| `(() => Element)` | - | +| **container** **_4.11.0+_** | 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`. | `Element` \| `DocumentFragment` \| `(() => Element` \| `DocumentFragment)` | - | | **dark** | Sets a darker color scheme to match a dark navbar. | `boolean` | - | | **direction** | Sets a specified direction and location of the dropdown menu. | `'center'` \| `'dropup'` \| `'dropup-center'` \| `'dropend'` \| `'dropstart'` | - | | **offset** | Offset of the dropdown menu relative to its target. | `[number, number]` | [0, 2] | diff --git a/packages/docs/content/api/CDropdownToggle.api.mdx b/packages/docs/content/api/CDropdownToggle.api.mdx index cdc7d534..7a4ecef2 100644 --- a/packages/docs/content/api/CDropdownToggle.api.mdx +++ b/packages/docs/content/api/CDropdownToggle.api.mdx @@ -15,7 +15,7 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg | **custom** | Create a custom toggler which accepts any content. | `boolean` | - | | **disabled** | Toggle the disabled state for the component. | `boolean` | - | | **href** | The href attribute specifies the URL of the page the link goes to. | `string` | - | -| **navLink** **_v5.0.0+_** | If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button. | `boolean` | true | +| **navLink** **_5.0.0+_** | If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button. | `boolean` | true | | **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'` | - | diff --git a/packages/docs/content/api/CModal.api.mdx b/packages/docs/content/api/CModal.api.mdx index 635c688e..1f5a391a 100644 --- a/packages/docs/content/api/CModal.api.mdx +++ b/packages/docs/content/api/CModal.api.mdx @@ -10,7 +10,8 @@ import CModal from '@coreui/react/src/components/modal/CModal' | **alignment** | Align the modal in the center or top of the screen. | `'top'` \| `'center'` | - | | **backdrop** | Apply a backdrop on body while modal is open. | `boolean` \| `'static'` | true | | **className** | A string of all className you want applied to the base component. | `string` | - | -| **focus** **_v4.10.0+_** | Puts the focus on the modal when shown. | `boolean` | true | +| **container** **_5.3.0+_** | Appends the react modal to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`. | `Element` \| `DocumentFragment` \| `(() => Element` \| `DocumentFragment)` | - | +| **focus** **_4.10.0+_** | Puts the focus on the modal when shown. | `boolean` | true | | **fullscreen** | Set modal to covers the entire user viewport. | `boolean` \| `'sm'` \| `'md'` \| `'lg'` \| `'xl'` \| `'xxl'` | - | | **keyboard** | Closes the modal when escape key is pressed. | `boolean` | true | | **onClose** | Callback fired when the component requests to be closed. | `() => void` | - | diff --git a/packages/docs/content/api/CPopover.api.mdx b/packages/docs/content/api/CPopover.api.mdx index 40ad6fb7..c850d297 100644 --- a/packages/docs/content/api/CPopover.api.mdx +++ b/packages/docs/content/api/CPopover.api.mdx @@ -9,7 +9,7 @@ import CPopover from '@coreui/react/src/components/popover/CPopover' | --- | --- | --- | --- | | **animation** **_4.9.0+_** | Apply a CSS fade transition to the popover. | `boolean` | true | | **className** | A string of all className you want applied to the component. | `string` | - | -| **container** **_v4.11.0+_** | Appends the react popover to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`. | `Element` \| `(() => Element)` | - | +| **container** **_4.11.0+_** | Appends the react popover to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`. | `Element` \| `DocumentFragment` \| `(() => Element` \| `DocumentFragment)` | - | | **content** | Content node for your component. | `ReactNode` | - | | **delay** **_4.9.0+_** | The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`. | `number` \| `{ show: number; hide: number; }` | 0 | | **fallbackPlacements** **_4.9.0+_** | Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference. | `Placements` \| `Placements[]` | ['top', 'right', 'bottom', 'left'] | diff --git a/packages/docs/content/api/CTabsContext.api.mdx b/packages/docs/content/api/CTabsContext.api.mdx deleted file mode 100644 index fc799c7c..00000000 --- a/packages/docs/content/api/CTabsContext.api.mdx +++ /dev/null @@ -1,10 +0,0 @@ - -```jsx -import { CTabsContext } from '@coreui/react' -// or -import CTabsContext from '@coreui/react/src/components/tabs/CTabsContext' -``` - -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **activeItemKey** | The active item key. | `string` \| `number` | - | diff --git a/packages/docs/content/api/CTooltip.api.mdx b/packages/docs/content/api/CTooltip.api.mdx index 047a8ff8..37d86e6c 100644 --- a/packages/docs/content/api/CTooltip.api.mdx +++ b/packages/docs/content/api/CTooltip.api.mdx @@ -9,7 +9,7 @@ import CTooltip from '@coreui/react/src/components/tooltip/CTooltip' | --- | --- | --- | --- | | **animation** **_4.9.0+_** | Apply a CSS fade transition to the tooltip. | `boolean` | true | | **className** | A string of all className you want applied to the component. | `string` | - | -| **container** **_v4.11.0+_** | Appends the react tooltip to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`. | `Element` \| `(() => Element)` | - | +| **container** **_4.11.0+_** | Appends the react tooltip to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`. | `Element` \| `DocumentFragment` \| `(() => Element` \| `DocumentFragment)` | - | | **content** | Content node for your component. | `ReactNode` | - | | **delay** **_4.9.0+_** | The delay for displaying and hiding the tooltip (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`. | `number` \| `{ show: number; hide: number; }` | 0 | | **fallbackPlacements** **_4.9.0+_** | Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference. | `Placements` \| `Placements[]` | ['top', 'right', 'bottom', 'left'] | diff --git a/packages/docs/package.json b/packages/docs/package.json index 2846bbab..a0e3a101 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/react-docs", - "version": "5.2.0", + "version": "5.3.0", "private": true, "description": "", "homepage": "https://coreui.io/react/", @@ -14,7 +14,7 @@ "license": "MIT", "author": "The CoreUI Team (https://github.com/orgs/coreui/people)", "scripts": { - "api": "rimraf \"content/api/*\" & node build/api.js", + "api": "rimraf \"content/api/*\" & node build/api.mjs", "build": "gatsby build", "develop": "gatsby develop", "dist": "run-s api build", @@ -30,11 +30,11 @@ "@coreui/icons-react": "^2.3.0", "@coreui/react-chartjs": "^3.0.0", "@coreui/utils": "^2.0.2", - "@docsearch/css": "^3.6.0", + "@docsearch/css": "^3.6.1", "@mdx-js/mdx": "^3.0.1", "@mdx-js/react": "^3.0.1", "@types/react-helmet": "^6.1.11", - "gatsby": "^5.13.6", + "gatsby": "^5.13.7", "gatsby-plugin-google-tagmanager": "^5.13.1", "gatsby-plugin-image": "^3.13.1", "gatsby-plugin-manifest": "^5.13.1", @@ -48,8 +48,7 @@ "gatsby-remark-external-links": "^0.0.4", "gatsby-source-filesystem": "^5.13.1", "gatsby-transformer-sharp": "^5.13.1", - "glob": "^7.2.3", - "globby": "^11.1.0", + "globby": "^14.0.2", "prism-react-renderer": "^2.3.1", "prismjs": "^1.29.0", "prop-types": "^15.8.1", @@ -58,8 +57,8 @@ "react-dom": "^18.3.1", "react-helmet": "^6.1.0", "react-imask": "^7.6.1", - "rimraf": "^5.0.8", - "sass": "^1.77.6" + "rimraf": "^6.0.1", + "sass": "^1.77.8" }, "devDependencies": { "npm-run-all": "^4.1.5"