README.md

@@ -46,7 +46,7 @@
 
 Several quick start options are available:
 
-- [Download the latest release](https://github.com/coreui/coreui-react/archive/v4.9.0-beta.2.zip)
+- [Download the latest release](https://github.com/coreui/coreui-react/archive/v4.9.0-rc.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`

lerna.json

@@ -1,6 +1,6 @@
 {
   "npmClient": "yarn",
   "packages": ["packages/*"],
-  "version": "4.9.0-beta.2",
+  "version": "4.9.0-rc.0",
   "$schema": "node_modules/lerna/schemas/lerna-schema.json"
 }

package.json

@@ -33,5 +33,13 @@
     "lerna": "^7.1.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.8.8"
+  },
+  "overrides": {
+    "gatsby-remark-external-links": {
+      "unist-util-find": "1.0.2"
+    }
+  },
+  "resolutions": {
+    "**/gatsby-remark-external-links/unist-util-find": "1.0.2"
   }
 }

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/v4.9.0-beta.2.zip)
+- [Download the latest release](https://github.com/coreui/coreui-react/archive/v4.9.0-rc.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`

packages/coreui-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react",
-  "version": "4.9.0-beta.2",
+  "version": "4.9.0-rc.0",
   "description": "UI Components Library for React.js",
   "keywords": [
     "react",
@@ -60,7 +60,7 @@
     "typescript": "^4.9.5"
   },
   "peerDependencies": {
-    "@coreui/coreui": "4.3.0-beta.0",
+    "@coreui/coreui": "4.2.6",
     "react": ">=17",
     "react-dom": ">=17"
   }

packages/coreui-react/src/components/dropdown/CDropdown.tsx

@@ -66,7 +66,7 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
   /**
    * Callback fired when the component requests to be hidden.
    *
-   * @since 4.9.0-beta.2
+   * @since 4.9.0-rc.0
    */
   onHide?: () => void
   /**

packages/coreui-react/src/components/popover/CPopover.tsx

@@ -13,7 +13,7 @@ export interface CPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'tit
   /**
    * Apply a CSS fade transition to the popover.
    *
-   * @since 4.9.0-beta.2
+   * @since 4.9.0-rc.0
    */
   animation?: boolean
   /**
@@ -31,13 +31,13 @@ export interface CPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'tit
   /**
    * 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 }`.
    *
-   * @since 4.9.0-beta.2
+   * @since 4.9.0-rc.0
    */
   delay?: number | { show: number; hide: number }
   /**
    * Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.
    *
-   * @since 4.9.0-beta.2
+   * @since 4.9.0-rc.0
    */
   fallbackPlacements?: Placements | Placements[]
   /**

packages/coreui-react/src/components/tooltip/CTooltip.tsx

@@ -13,7 +13,7 @@ export interface CTooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'con
   /**
    * Apply a CSS fade transition to the tooltip.
    *
-   * @since 4.9.0-beta.2
+   * @since 4.9.0-rc.0
    */
   animation?: boolean
   /**
@@ -27,13 +27,13 @@ export interface CTooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'con
   /**
    * 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 }`.
    *
-   * @since 4.9.0-beta.2
+   * @since 4.9.0-rc.0
    */
   delay?: number | { show: number; hide: number }
   /**
    * Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.
    *
-   * @since 4.9.0-beta.2
+   * @since 4.9.0-rc.0
    */
   fallbackPlacements?: Placements | Placements[]
   /**

packages/coreui-react/src/hooks/index.ts

@@ -1,5 +1,4 @@
-import { useColorModes } from './useColorModes'
 import { useForkedRef } from './useForkedRef'
 import { usePopper } from './usePopper'
 
-export { useColorModes, useForkedRef, usePopper }
+export { useForkedRef, usePopper }

packages/docs/content/api/CDropdown.api.mdx

@@ -13,7 +13,8 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown'
 | **component** | Component used for the root node. Either a string to use a HTML element or a component. | `string` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` | div |
 | **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'` | - |
-| **onHide** | Callback fired when the component requests to be hidden. | `() => void` | - |
+| **offset** | Offset of the dropdown menu relative to its target. | `[number, number]` | [0, 2] |
+| **onHide** **_4.9.0-rc.0+_** | Callback fired when the component requests to be hidden. | `() => void` | - |
 | **onShow** | Callback fired when the component requests to be shown. | `() => void` | - |
 | **placement** | 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. | `'auto'` \| `'top-end'` \| `'top'` \| `'top-start'` \| `'bottom-end'` \| `'bottom'` \| `'bottom-start'` \| `'right-start'` \| `'right'` \| `'right-end'` \| `'left-start'` \| `'left'` \| `'left-end'` | bottom-start |
 | **popper** | If you want to disable dynamic positioning set this property to `true`. | `boolean` | true |

packages/docs/content/api/CPopover.api.mdx

@@ -7,12 +7,15 @@ import CPopover from '@coreui/react/src/components/popover/CPopover'
 
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
+| **animation** **_4.9.0-rc.0+_** | Apply a CSS fade transition to the popover. | `boolean` | true |
 | **className** | A string of all className you want applied to the component. | `string` | - |
 | **content** | Content node for your component. | `ReactNode` | - |
+| **delay** **_4.9.0-rc.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-rc.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'] |
 | **offset** | Offset of the popover relative to its target. | `[number, number]` | [0, 8] |
 | **onHide** | Callback fired when the component requests to be hidden. | `() => void` | - |
 | **onShow** | Callback fired when the component requests to be shown. | `() => void` | - |
-| **placement** | 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. | `'auto'` \| `'top'` \| `'right'` \| `'bottom'` \| `'left'` | top |
+| **placement** | 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. | `'auto'` \| `'top'` \| `'bottom'` \| `'right'` \| `'left'` | top |
 | **title** | Title node for your component. | `ReactNode` | - |
 | **trigger** | Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them. | `'hover'` \| `'focus'` \| `'click'` | click |
 | **visible** | Toggle the visibility of popover component. | `boolean` | - |

packages/docs/content/api/CProgress.api.mdx

@@ -11,7 +11,8 @@ import CProgress from '@coreui/react/src/components/progress/CProgress'
 | **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` | - |
 | **height** | Sets the height of the component. If you set that value the inner `<CProgressBar>` will automatically resize accordingly. | `number` | - |
+| **progressBarClassName** **_4.9.0+_** | A string of all className you want applied to the `<CProgressBar/>` component. | `string` | - |
 | **thin** | Makes progress bar thinner. | `boolean` | - |
-| **value** | The percent to progress the ProgressBar (out of 100). | `number` | 0 |
+| **value** | The percent to progress the ProgressBar (out of 100). | `number` | - |
 | **variant** | Set the progress bar variant to optional striped. | `'striped'` | - |
 | **white** | Change the default color to white. | `boolean` | - |

packages/docs/content/api/CProgressStacked.api.mdx

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

packages/docs/content/api/CTooltip.api.mdx

@@ -7,11 +7,14 @@ import CTooltip from '@coreui/react/src/components/tooltip/CTooltip'
 
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
+| **animation** **_4.9.0-rc.0+_** | Apply a CSS fade transition to the tooltip. | `boolean` | true |
 | **className** | A string of all className you want applied to the component. | `string` | - |
 | **content** | Content node for your component. | `ReactNode` | - |
-| **offset** | Offset of the popover relative to its target. | `[number, number]` | [0, 0] |
+| **delay** **_4.9.0-rc.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-rc.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'] |
+| **offset** | Offset of the tooltip relative to its target. | `[number, number]` | [0, 6] |
 | **onHide** | Callback fired when the component requests to be hidden. | `() => void` | - |
 | **onShow** | Callback fired when the component requests to be shown. | `() => void` | - |
-| **placement** | 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. | `'auto'` \| `'top'` \| `'right'` \| `'bottom'` \| `'left'` | top |
-| **trigger** | Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them. | `'hover'` \| `'focus'` \| `'click'` | hover |
-| **visible** | Toggle the visibility of popover component. | `boolean` | - |
+| **placement** | 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. | `'auto'` \| `'top'` \| `'bottom'` \| `'right'` \| `'left'` | top |
+| **trigger** | Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them. | `'hover'` \| `'focus'` \| `'click'` | ['hover', 'focus'] |
+| **visible** | Toggle the visibility of tooltip component. | `boolean` | - |

packages/docs/content/components/button-group.mdx

@@ -49,7 +49,7 @@ These classes can also be added to groups of links, as an alternative to the `<C
 <CButtonGroup>
   <CButton href="#" color="primary" active>Active link</CButton>
   <CButton href="#" color="primary">Link</CButton>
-  <CButton href="#" color="primary"> Link</CButton>
+  <CButton href="#" color="primary">yarLink</CButton>
 </CButtonGroup>
 ```
 

packages/docs/content/components/chart.mdx

@@ -44,24 +44,8 @@ A line chart is a way of plotting data points on a line. Often, it is used to sh
 [Line Chart properties](https://www.chartjs.org/docs/latest/charts/line.html#dataset-properties)
 
 export const LineChartExample = () => {
-  const chartRef = useRef()
-
-  useEffect(() => {
-    document.documentElement.addEventListener('ColorSchemeChange', () => {
-      if (chartRef.current) {
-        chartRef.current.options.plugins.legend.labels.color = getStyle('--cui-body-color')
-        chartRef.current.options.scales.x.grid.color = getStyle('--cui-border-color-translucent')
-        chartRef.current.options.scales.x.ticks.color = getStyle('--cui-body-color')
-        chartRef.current.options.scales.y.grid.color = getStyle('--cui-border-color-translucent')
-        chartRef.current.options.scales.y.ticks.color = getStyle('--cui-body-color')
-        chartRef.current.update()
-      }
-    })
-  }, [chartRef])
-
   return (
     <CChart
-      ref={chartRef}
       type="line" 
       data={{
         labels: ["January", "February", "March", "April", "May", "June", "July"],
@@ -179,24 +163,8 @@ export const LineChartExample = () => {
 A bar chart provides a way of showing data values represented as vertical bars. It is sometimes used to show trend data, and the comparison of multiple data sets side by side. [Bar Chart properties](https://www.chartjs.org/docs/latest/charts/bar.html#dataset-properties)
 
 export const BarChartExample = () => {
-  const chartRef = useRef()
-
-  useEffect(() => {
-    document.documentElement.addEventListener('ColorSchemeChange', () => {
-      if (chartRef.current) {
-        chartRef.current.options.plugins.legend.labels.color = getStyle('--cui-body-color')
-        chartRef.current.options.scales.x.grid.color = getStyle('--cui-border-color-translucent')
-        chartRef.current.options.scales.x.ticks.color = getStyle('--cui-body-color')
-        chartRef.current.options.scales.y.grid.color = getStyle('--cui-border-color-translucent')
-        chartRef.current.options.scales.y.ticks.color = getStyle('--cui-body-color')
-        chartRef.current.update()
-      }
-    })
-  }, [chartRef])
-
   return (
     <CChart
-      ref={chartRef}
       type="bar"
       data={{
         labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
@@ -293,22 +261,8 @@ export const BarChartExample = () => {
 A radar chart is a way of showing multiple data points and the variation between them. They are often useful for comparing the points of two or more different data sets. [Radar Chart properties](https://www.chartjs.org/docs/latest/charts/radar.html#dataset-properties)
 
 export const RadarChartExample = () => {
-  const chartRef = useRef()
-
-  useEffect(() => {
-    document.documentElement.addEventListener('ColorSchemeChange', () => {
-      if (chartRef.current) {
-        chartRef.current.options.plugins.legend.labels.color = getStyle('--cui-body-color')
-        chartRef.current.options.scales.r.grid.color = getStyle('--cui-border-color-translucent')
-        chartRef.current.options.scales.r.ticks.color = getStyle('--cui-body-color')
-        chartRef.current.update()
-      }
-    })
-  }, [chartRef])
-
   return (
     <CChart
-      ref={chartRef}
       type="radar"
       data={{
         labels: [
@@ -433,20 +387,8 @@ export const RadarChartExample = () => {
 Pie and doughnut charts are probably the most commonly used charts. They are divided into segments, the arc of each segment shows the proportional value of each piece of data. [Doughnut and Pie Charts properties](https://www.chartjs.org/docs/latest/charts/doughnut.html#dataset-properties)
 
 export const DoughnutAndPieExample = () => {
-  const chartRef = useRef()
-
-  useEffect(() => {
-    document.documentElement.addEventListener('ColorSchemeChange', () => {
-      if (chartRef.current) {
-        chartRef.current.options.plugins.legend.labels.color = getStyle('--cui-body-color')
-        chartRef.current.update()
-      }
-    })
-  }, [chartRef])
-
   return (
     <CChart
-      ref={chartRef}
       type="doughnut"
       data={{
         labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
@@ -503,21 +445,8 @@ export const DoughnutAndPieExample = () => {
 Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value. [Polar Area Chart properties](https://www.chartjs.org/docs/latest/charts/polar.html#dataset-properties)
 
 export const PolarAreaExample = () => {
-  const chartRef = useRef()
-
-  useEffect(() => {
-    document.documentElement.addEventListener('ColorSchemeChange', () => {
-      if (chartRef.current) {
-        chartRef.current.options.plugins.legend.labels.color = getStyle('--cui-body-color')
-        chartRef.current.options.scales.r.grid.color = getStyle('--cui-border-color-translucent')
-        chartRef.current.update()
-      }
-    })
-  }, [chartRef])
-
   return (
     <CChart
-      ref={chartRef}
       type="polarArea"
       data={{
         labels: ['Red', 'Green', 'Yellow', 'Grey', 'Blue'],
@@ -588,24 +517,8 @@ export const PolarAreaExample = () => {
 A bubble chart is used to display three dimensions of data at the same time. The location of the bubble is determined by the first two dimensions and the corresponding horizontal and vertical axes. The third dimension is represented by the size of the individual bubbles. [Bubble Chart properties](https://www.chartjs.org/docs/latest/charts/bubble.html#dataset-properties)
 
 export const BubbleChartExample = () => {
-  const chartRef = useRef()
-
-  useEffect(() => {
-    document.documentElement.addEventListener('ColorSchemeChange', () => {
-      if (chartRef.current) {
-        chartRef.current.options.plugins.legend.labels.color = getStyle('--cui-body-color')
-        chartRef.current.options.scales.x.grid.color = getStyle('--cui-border-color-translucent')
-        chartRef.current.options.scales.x.ticks.color = getStyle('--cui-body-color')
-        chartRef.current.options.scales.y.grid.color = getStyle('--cui-border-color-translucent')
-        chartRef.current.options.scales.y.ticks.color = getStyle('--cui-body-color')
-        chartRef.current.update()
-      }
-    })
-  }, [chartRef])
-
   return (
     <CChart
-      ref={chartRef}
       type="bubble"
       data={{
         datasets: [{
@@ -710,24 +623,8 @@ export const BubbleChartExample = () => {
 A bubble chart is used to display three dimensions of data at the same time. The location of the bubble is determined by the first two dimensions and the corresponding horizontal and vertical axes. The third dimension is represented by the size of the individual bubbles. [Scatter Chart properties](https://www.chartjs.org/docs/latest/charts/scatter.html#dataset-properties)
 
 export const ScatterChartExample = () => {
-  const chartRef = useRef()
-
-  useEffect(() => {
-    document.documentElement.addEventListener('ColorSchemeChange', () => {
-      if (chartRef.current) {
-        chartRef.current.options.plugins.legend.labels.color = getStyle('--cui-body-color')
-        chartRef.current.options.scales.x.grid.color = getStyle('--cui-border-color-translucent')
-        chartRef.current.options.scales.x.ticks.color = getStyle('--cui-body-color')
-        chartRef.current.options.scales.y.grid.color = getStyle('--cui-border-color-translucent')
-        chartRef.current.options.scales.y.ticks.color = getStyle('--cui-body-color')
-        chartRef.current.update()
-      }
-    })
-  }, [chartRef])
-
   return (
     <CChart
-      ref={chartRef}
       type="scatter"
       data={{
         datasets: [{