@coreui/react 4.5.0 → 4.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/README.md +1 -1
  2. package/dist/components/popover/CPopover.d.ts +6 -3
  3. package/dist/components/tooltip/CTooltip.d.ts +6 -3
  4. package/dist/index.es.js +10 -6
  5. package/dist/index.es.js.map +1 -1
  6. package/dist/index.js +10 -6
  7. package/dist/index.js.map +1 -1
  8. package/package.json +1 -1
  9. package/src/components/popover/CPopover.tsx +12 -9
  10. package/src/components/tooltip/CTooltip.tsx +14 -7
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coreui/react",
3
- "version": "4.5.0",
3
+ "version": "4.5.1",
4
4
  "description": "UI Components Library for React.js",
5
5
  "keywords": [
6
6
  "react",
package/src/components/popover/CPopover.tsx CHANGED
@@ -1,17 +1,17 @@
1
- import React, { FC, ReactNode, useRef, useState } from 'react'
1
+ import React, { FC, HTMLAttributes, ReactNode, useRef, useEffect, useState } from 'react'
2
2
  import { createPortal } from 'react-dom'
3
-
4
- import classNames from 'classnames'
5
3
  import PropTypes from 'prop-types'
4
+ import classNames from 'classnames'
6
5
  import { usePopper } from 'react-popper'
7
6
  import { Transition } from 'react-transition-group'
8
7
 
9
8
  import { Triggers, triggerPropType } from '../Types'
10
- import { useEffect } from 'react'
11
9
 
12
- export interface CPopoverProps {
13
- // TODO: find solution to not use any
14
- children: any
10
+ export interface CPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
11
+ /**
12
+ * A string of all className you want applied to the component.
13
+ */
14
+ className?: string
15
15
  /**
16
16
  * Content node for your component.
17
17
  */
@@ -50,6 +50,7 @@ export interface CPopoverProps {
50
50
 
51
51
  export const CPopover: FC<CPopoverProps> = ({
52
52
  children,
53
+ className,
53
54
  content,
54
55
  offset = [0, 8],
55
56
  onHide,
@@ -95,7 +96,7 @@ export const CPopover: FC<CPopoverProps> = ({
95
96
 
96
97
  return (
97
98
  <>
98
- {React.cloneElement(children, {
99
+ {React.cloneElement(children as React.ReactElement<any>, {
99
100
  ref: setReferenceElement,
100
101
  ...((trigger === 'click' || trigger.includes('click')) && {
101
102
  onClick: () => setVisible(!_visible),
@@ -131,6 +132,7 @@ export const CPopover: FC<CPopoverProps> = ({
131
132
  `popover bs-popover-${
132
133
  placement === 'left' ? 'start' : placement === 'right' ? 'end' : placement
133
134
  }`,
135
+ className,
134
136
  transitionClass,
135
137
  )}
136
138
  ref={setPopperElement}
@@ -153,7 +155,8 @@ export const CPopover: FC<CPopoverProps> = ({
153
155
  }
154
156
 
155
157
  CPopover.propTypes = {
156
- children: PropTypes.any,
158
+ children: PropTypes.node,
159
+ className: PropTypes.string,
157
160
  content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
158
161
  offset: PropTypes.any, // TODO: find good proptype
159
162
  onHide: PropTypes.func,
package/src/components/tooltip/CTooltip.tsx CHANGED
@@ -1,6 +1,5 @@
1
- import React, { FC, ReactNode, useRef, useState } from 'react'
1
+ import React, { FC, HTMLAttributes, ReactNode, useEffect, useRef, useState } from 'react'
2
2
  import { createPortal } from 'react-dom'
3
-
4
3
  import classNames from 'classnames'
5
4
  import PropTypes from 'prop-types'
6
5
  import { usePopper } from 'react-popper'
@@ -8,9 +7,11 @@ import { Transition } from 'react-transition-group'
8
7
 
9
8
  import { Triggers, triggerPropType } from '../Types'
10
9
 
11
- export interface CTooltipProps {
12
- // TODO: find solution to not use any
13
- children: any
10
+ export interface CTooltipProps extends HTMLAttributes<HTMLDivElement> {
11
+ /**
12
+ * A string of all className you want applied to the component.
13
+ */
14
+ className?: string
14
15
  /**
15
16
  * Content node for your component.
16
17
  */
@@ -45,6 +46,7 @@ export interface CTooltipProps {
45
46
 
46
47
  export const CTooltip: FC<CTooltipProps> = ({
47
48
  children,
49
+ className,
48
50
  content,
49
51
  offset = [0, 0],
50
52
  onHide,
@@ -73,6 +75,10 @@ export const CTooltip: FC<CTooltipProps> = ({
73
75
  placement: placement,
74
76
  })
75
77
 
78
+ useEffect(() => {
79
+ setVisible(visible)
80
+ }, [visible])
81
+
76
82
  const getTransitionClass = (state: string) => {
77
83
  return state === 'entering'
78
84
  ? 'fade'
@@ -85,7 +91,7 @@ export const CTooltip: FC<CTooltipProps> = ({
85
91
 
86
92
  return (
87
93
  <>
88
- {React.cloneElement(children, {
94
+ {React.cloneElement(children as React.ReactElement<any>, {
89
95
  ref: setReferenceElement,
90
96
  ...((trigger === 'click' || trigger.includes('click')) && {
91
97
  onClick: () => setVisible(!_visible),
@@ -121,6 +127,7 @@ export const CTooltip: FC<CTooltipProps> = ({
121
127
  `tooltip bs-tooltip-${
122
128
  placement === 'left' ? 'start' : placement === 'right' ? 'end' : placement
123
129
  }`,
130
+ className,
124
131
  transitionClass,
125
132
  )}
126
133
  ref={setPopperElement}
@@ -142,7 +149,7 @@ export const CTooltip: FC<CTooltipProps> = ({
142
149
  }
143
150
 
144
151
  CTooltip.propTypes = {
145
- children: PropTypes.any,
152
+ children: PropTypes.node,
146
153
  content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
147
154
  offset: PropTypes.any, // TODO: find good proptype
148
155
  onHide: PropTypes.func,