@coreui/react 4.10.0 → 4.10.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 (11) hide show
  1. package/README.md +1 -1
  2. package/dist/components/popover/CPopover.d.ts +2 -2
  3. package/dist/components/tooltip/CTooltip copy.d.ts +60 -0
  4. package/dist/components/tooltip/CTooltip.d.ts +2 -2
  5. package/dist/index.es.js +15 -9
  6. package/dist/index.es.js.map +1 -1
  7. package/dist/index.js +15 -9
  8. package/dist/index.js.map +1 -1
  9. package/package.json +1 -1
  10. package/src/components/popover/CPopover.tsx +126 -117
  11. package/src/components/tooltip/CTooltip.tsx +131 -114
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coreui/react",
3
- "version": "4.10.0",
3
+ "version": "4.10.1",
4
4
  "description": "UI Components Library for React.js",
5
5
  "keywords": [
6
6
  "react",
package/src/components/popover/CPopover.tsx CHANGED
@@ -1,10 +1,10 @@
1
- import React, { FC, HTMLAttributes, ReactNode, useRef, useEffect, useState } from 'react'
1
+ import React, { forwardRef, HTMLAttributes, ReactNode, useRef, useEffect, useState } from 'react'
2
2
  import { createPortal } from 'react-dom'
3
3
  import classNames from 'classnames'
4
4
  import PropTypes from 'prop-types'
5
5
  import { Transition } from 'react-transition-group'
6
6
 
7
- import { usePopper } from '../../hooks'
7
+ import { useForkedRef, usePopper } from '../../hooks'
8
8
  import { fallbackPlacementsPropType, triggerPropType } from '../../props'
9
9
  import type { Placements, Triggers } from '../../types'
10
10
  import { getRTLPlacement, getTransitionDurationFromElement } from '../../utils'
@@ -68,132 +68,141 @@ export interface CPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'tit
68
68
  visible?: boolean
69
69
  }
70
70
 
71
- export const CPopover: FC<CPopoverProps> = ({
72
- children,
73
- animation = true,
74
- className,
75
- content,
76
- delay = 0,
77
- fallbackPlacements = ['top', 'right', 'bottom', 'left'],
78
- offset = [0, 8],
79
- onHide,
80
- onShow,
81
- placement = 'top',
82
- title,
83
- trigger = 'click',
84
- visible,
85
- ...rest
86
- }) => {
87
- const popoverRef = useRef(null)
88
- const togglerRef = useRef(null)
89
- const { initPopper, destroyPopper } = usePopper()
90
- const [_visible, setVisible] = useState(visible)
71
+ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
72
+ (
73
+ {
74
+ children,
75
+ animation = true,
76
+ className,
77
+ content,
78
+ delay = 0,
79
+ fallbackPlacements = ['top', 'right', 'bottom', 'left'],
80
+ offset = [0, 8],
81
+ onHide,
82
+ onShow,
83
+ placement = 'top',
84
+ title,
85
+ trigger = 'click',
86
+ visible,
87
+ ...rest
88
+ },
89
+ ref,
90
+ ) => {
91
+ const popoverRef = useRef(null)
92
+ const togglerRef = useRef(null)
93
+ const forkedRef = useForkedRef(ref, popoverRef)
91
94
 
92
- const _delay = typeof delay === 'number' ? { show: delay, hide: delay } : delay
95
+ const { initPopper, destroyPopper } = usePopper()
96
+ const [_visible, setVisible] = useState(visible)
93
97
 
94
- const popperConfig = {
95
- modifiers: [
96
- {
97
- name: 'arrow',
98
- options: {
99
- element: '.popover-arrow',
98
+ const _delay = typeof delay === 'number' ? { show: delay, hide: delay } : delay
99
+
100
+ const popperConfig = {
101
+ modifiers: [
102
+ {
103
+ name: 'arrow',
104
+ options: {
105
+ element: '.popover-arrow',
106
+ },
100
107
  },
101
- },
102
- {
103
- name: 'flip',
104
- options: {
105
- fallbackPlacements: fallbackPlacements,
108
+ {
109
+ name: 'flip',
110
+ options: {
111
+ fallbackPlacements: fallbackPlacements,
112
+ },
106
113
  },
107
- },
108
- {
109
- name: 'offset',
110
- options: {
111
- offset: offset,
114
+ {
115
+ name: 'offset',
116
+ options: {
117
+ offset: offset,
118
+ },
112
119
  },
113
- },
114
- ],
115
- placement: getRTLPlacement(placement, togglerRef.current),
116
- }
120
+ ],
121
+ placement: getRTLPlacement(placement, togglerRef.current),
122
+ }
117
123
 
118
- useEffect(() => {
119
- setVisible(visible)
120
- }, [visible])
124
+ useEffect(() => {
125
+ setVisible(visible)
126
+ }, [visible])
121
127
 
122
- useEffect(() => {
123
- if (_visible && togglerRef.current && popoverRef.current) {
124
- initPopper(togglerRef.current, popoverRef.current, popperConfig)
125
- }
128
+ useEffect(() => {
129
+ if (_visible && togglerRef.current && popoverRef.current) {
130
+ initPopper(togglerRef.current, popoverRef.current, popperConfig)
131
+ }
126
132
 
127
- return () => {
128
- destroyPopper()
129
- }
130
- }, [_visible])
133
+ return () => {
134
+ destroyPopper()
135
+ }
136
+ }, [_visible])
131
137
 
132
- const toggleVisible = (visible: boolean) => {
133
- if (visible) {
134
- setTimeout(() => setVisible(true), _delay.show)
135
- return
136
- }
138
+ const toggleVisible = (visible: boolean) => {
139
+ if (visible) {
140
+ setTimeout(() => setVisible(true), _delay.show)
141
+ return
142
+ }
137
143
 
138
- setTimeout(() => setVisible(false), _delay.hide)
139
- }
144
+ setTimeout(() => setVisible(false), _delay.hide)
145
+ }
140
146
 
141
- return (
142
- <>
143
- {React.cloneElement(children as React.ReactElement<any>, {
144
- ref: togglerRef,
145
- ...((trigger === 'click' || trigger.includes('click')) && {
146
- onClick: () => toggleVisible(!_visible),
147
- }),
148
- ...((trigger === 'focus' || trigger.includes('focus')) && {
149
- onFocus: () => toggleVisible(true),
150
- onBlur: () => toggleVisible(false),
151
- }),
152
- ...((trigger === 'hover' || trigger.includes('hover')) && {
153
- onMouseEnter: () => toggleVisible(true),
154
- onMouseLeave: () => toggleVisible(false),
155
- }),
156
- })}
157
- {typeof window !== 'undefined' &&
158
- createPortal(
159
- <Transition
160
- in={_visible}
161
- mountOnEnter
162
- nodeRef={popoverRef}
163
- onEnter={onShow}
164
- onExit={onHide}
165
- timeout={{
166
- enter: 0,
167
- exit: popoverRef.current ? getTransitionDurationFromElement(popoverRef.current) + 50 : 200,
168
- }}
169
- unmountOnExit
170
- >
171
- {(state) => (
172
- <div
173
- className={classNames(
174
- 'popover',
175
- 'bs-popover-auto',
176
- {
177
- fade: animation,
178
- show: state === 'entered',
179
- },
180
- className,
181
- )}
182
- ref={popoverRef}
183
- role="tooltip"
184
- {...rest}
185
- >
186
- <div className="popover-arrow"></div>
187
- <div className="popover-header">{title}</div>
188
- <div className="popover-body">{content}</div>
189
- </div>
190
- )}
191
- </Transition>,
192
- document.body,
193
- )}
194
- </>
195
- )
196
- }
147
+ return (
148
+ <>
149
+ {React.cloneElement(children as React.ReactElement<any>, {
150
+ ref: togglerRef,
151
+ ...((trigger === 'click' || trigger.includes('click')) && {
152
+ onClick: () => toggleVisible(!_visible),
153
+ }),
154
+ ...((trigger === 'focus' || trigger.includes('focus')) && {
155
+ onFocus: () => toggleVisible(true),
156
+ onBlur: () => toggleVisible(false),
157
+ }),
158
+ ...((trigger === 'hover' || trigger.includes('hover')) && {
159
+ onMouseEnter: () => toggleVisible(true),
160
+ onMouseLeave: () => toggleVisible(false),
161
+ }),
162
+ })}
163
+ {typeof window !== 'undefined' &&
164
+ createPortal(
165
+ <Transition
166
+ in={_visible}
167
+ mountOnEnter
168
+ nodeRef={popoverRef}
169
+ onEnter={onShow}
170
+ onExit={onHide}
171
+ timeout={{
172
+ enter: 0,
173
+ exit: popoverRef.current
174
+ ? getTransitionDurationFromElement(popoverRef.current) + 50
175
+ : 200,
176
+ }}
177
+ unmountOnExit
178
+ >
179
+ {(state) => (
180
+ <div
181
+ className={classNames(
182
+ 'popover',
183
+ 'bs-popover-auto',
184
+ {
185
+ fade: animation,
186
+ show: state === 'entered',
187
+ },
188
+ className,
189
+ )}
190
+ ref={forkedRef}
191
+ role="tooltip"
192
+ {...rest}
193
+ >
194
+ <div className="popover-arrow"></div>
195
+ <div className="popover-header">{title}</div>
196
+ <div className="popover-body">{content}</div>
197
+ </div>
198
+ )}
199
+ </Transition>,
200
+ document.body,
201
+ )}
202
+ </>
203
+ )
204
+ },
205
+ )
197
206
 
198
207
  CPopover.propTypes = {
199
208
  animation: PropTypes.bool,
package/src/components/tooltip/CTooltip.tsx CHANGED
@@ -1,10 +1,17 @@
1
- import React, { FC, HTMLAttributes, ReactNode, useRef, useEffect, useState } from 'react'
1
+ import React, {
2
+ forwardRef,
3
+ HTMLAttributes,
4
+ ReactNode,
5
+ useRef,
6
+ useEffect,
7
+ useState,
8
+ } from 'react'
2
9
  import { createPortal } from 'react-dom'
3
10
  import classNames from 'classnames'
4
11
  import PropTypes from 'prop-types'
5
12
  import { Transition } from 'react-transition-group'
6
13
 
7
- import { usePopper } from '../../hooks'
14
+ import { useForkedRef, usePopper } from '../../hooks'
8
15
  import { fallbackPlacementsPropType, triggerPropType } from '../../props'
9
16
  import type { Placements, Triggers } from '../../types'
10
17
  import { getRTLPlacement, getTransitionDurationFromElement } from '../../utils'
@@ -64,129 +71,139 @@ export interface CTooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'con
64
71
  visible?: boolean
65
72
  }
66
73
 
67
- export const CTooltip: FC<CTooltipProps> = ({
68
- children,
69
- animation = true,
70
- className,
71
- content,
72
- delay = 0,
73
- fallbackPlacements = ['top', 'right', 'bottom', 'left'],
74
- offset = [0, 6],
75
- onHide,
76
- onShow,
77
- placement = 'top',
78
- trigger = ['hover', 'focus'],
79
- visible,
80
- ...rest
81
- }) => {
82
- const tooltipRef = useRef(null)
83
- const togglerRef = useRef(null)
84
- const { initPopper, destroyPopper } = usePopper()
85
- const [_visible, setVisible] = useState(visible)
74
+ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
75
+ (
76
+ {
77
+ children,
78
+ animation = true,
79
+ className,
80
+ content,
81
+ delay = 0,
82
+ fallbackPlacements = ['top', 'right', 'bottom', 'left'],
83
+ offset = [0, 6],
84
+ onHide,
85
+ onShow,
86
+ placement = 'top',
87
+ trigger = ['hover', 'focus'],
88
+ visible,
89
+ ...rest
90
+ },
91
+ ref,
92
+ ) => {
93
+ const tooltipRef = useRef(null)
94
+ const togglerRef = useRef(null)
95
+ const forkedRef = useForkedRef(ref, tooltipRef)
86
96
 
87
- const _delay = typeof delay === 'number' ? { show: delay, hide: delay } : delay
97
+ const { initPopper, destroyPopper } = usePopper()
98
+ const [_visible, setVisible] = useState(visible)
88
99
 
89
- const popperConfig = {
90
- modifiers: [
91
- {
92
- name: 'arrow',
93
- options: {
94
- element: '.tooltip-arrow',
100
+ const _delay = typeof delay === 'number' ? { show: delay, hide: delay } : delay
101
+
102
+ const popperConfig = {
103
+ modifiers: [
104
+ {
105
+ name: 'arrow',
106
+ options: {
107
+ element: '.tooltip-arrow',
108
+ },
95
109
  },
96
- },
97
- {
98
- name: 'flip',
99
- options: {
100
- fallbackPlacements: fallbackPlacements,
110
+ {
111
+ name: 'flip',
112
+ options: {
113
+ fallbackPlacements: fallbackPlacements,
114
+ },
101
115
  },
102
- },
103
- {
104
- name: 'offset',
105
- options: {
106
- offset: offset,
116
+ {
117
+ name: 'offset',
118
+ options: {
119
+ offset: offset,
120
+ },
107
121
  },
108
- },
109
- ],
110
- placement: getRTLPlacement(placement, togglerRef.current),
111
- }
122
+ ],
123
+ placement: getRTLPlacement(placement, togglerRef.current),
124
+ }
112
125
 
113
- useEffect(() => {
114
- setVisible(visible)
115
- }, [visible])
126
+ useEffect(() => {
127
+ setVisible(visible)
128
+ }, [visible])
116
129
 
117
- useEffect(() => {
118
- if (_visible && togglerRef.current && tooltipRef.current) {
119
- initPopper(togglerRef.current, tooltipRef.current, popperConfig)
120
- }
130
+ useEffect(() => {
131
+ if (_visible && togglerRef.current && tooltipRef.current) {
132
+ initPopper(togglerRef.current, tooltipRef.current, popperConfig)
133
+ }
121
134
 
122
- return () => {
123
- destroyPopper()
124
- }
125
- }, [_visible])
135
+ return () => {
136
+ destroyPopper()
137
+ }
138
+ }, [_visible])
126
139
 
127
- const toggleVisible = (visible: boolean) => {
128
- if (visible) {
129
- setTimeout(() => setVisible(true), _delay.show)
130
- return
131
- }
140
+ const toggleVisible = (visible: boolean) => {
141
+ if (visible) {
142
+ setTimeout(() => setVisible(true), _delay.show)
143
+ return
144
+ }
132
145
 
133
- setTimeout(() => setVisible(false), _delay.hide)
134
- }
146
+ setTimeout(() => setVisible(false), _delay.hide)
147
+ }
135
148
 
136
- return (
137
- <>
138
- {React.cloneElement(children as React.ReactElement<any>, {
139
- ref: togglerRef,
140
- ...((trigger === 'click' || trigger.includes('click')) && {
141
- onClick: () => toggleVisible(!_visible),
142
- }),
143
- ...((trigger === 'focus' || trigger.includes('focus')) && {
144
- onFocus: () => toggleVisible(true),
145
- onBlur: () => toggleVisible(false),
146
- }),
147
- ...((trigger === 'hover' || trigger.includes('hover')) && {
148
- onMouseEnter: () => toggleVisible(true),
149
- onMouseLeave: () => toggleVisible(false),
150
- }),
151
- })}
152
- {typeof window !== 'undefined' &&
153
- createPortal(
154
- <Transition
155
- in={_visible}
156
- mountOnEnter
157
- onEnter={onShow}
158
- onExit={onHide}
159
- timeout={{
160
- enter: 0,
161
- exit: tooltipRef.current ? getTransitionDurationFromElement(tooltipRef.current) + 50 : 200,
162
- }}
163
- unmountOnExit
164
- >
165
- {(state) => (
166
- <div
167
- className={classNames(
168
- 'tooltip',
169
- 'bs-tooltip-auto',
170
- {
171
- fade: animation,
172
- show: state === 'entered',
173
- },
174
- className,
175
- )}
176
- ref={tooltipRef}
177
- role="tooltip"
178
- {...rest}
179
- >
180
- <div className="tooltip-arrow"></div>
181
- <div className="tooltip-inner">{content}</div>
182
- </div>
183
- )}
184
- </Transition>,
185
- document.body,
186
- )}
187
- </>
188
- )
189
- }
149
+ return (
150
+ <>
151
+ {React.cloneElement(children as React.ReactElement<any>, {
152
+ ref: togglerRef,
153
+ ...((trigger === 'click' || trigger.includes('click')) && {
154
+ onClick: () => toggleVisible(!_visible),
155
+ }),
156
+ ...((trigger === 'focus' || trigger.includes('focus')) && {
157
+ onFocus: () => toggleVisible(true),
158
+ onBlur: () => toggleVisible(false),
159
+ }),
160
+ ...((trigger === 'hover' || trigger.includes('hover')) && {
161
+ onMouseEnter: () => toggleVisible(true),
162
+ onMouseLeave: () => toggleVisible(false),
163
+ }),
164
+ })}
165
+ {typeof window !== 'undefined' &&
166
+ createPortal(
167
+ <Transition
168
+ in={_visible}
169
+ mountOnEnter
170
+ nodeRef={tooltipRef}
171
+ onEnter={onShow}
172
+ onExit={onHide}
173
+ timeout={{
174
+ enter: 0,
175
+ exit: tooltipRef.current
176
+ ? getTransitionDurationFromElement(tooltipRef.current) + 50
177
+ : 200,
178
+ }}
179
+ unmountOnExit
180
+ >
181
+ {(state) => (
182
+ <div
183
+ className={classNames(
184
+ 'tooltip',
185
+ 'bs-tooltip-auto',
186
+ {
187
+ fade: animation,
188
+ show: state === 'entered',
189
+ },
190
+ className,
191
+ )}
192
+ ref={forkedRef}
193
+ role="tooltip"
194
+ {...rest}
195
+ >
196
+ <div className="tooltip-arrow"></div>
197
+ <div className="tooltip-inner">{content}</div>
198
+ </div>
199
+ )}
200
+ </Transition>,
201
+ document.body,
202
+ )}
203
+ </>
204
+ )
205
+ },
206
+ )
190
207
 
191
208
  CTooltip.propTypes = {
192
209
  animation: PropTypes.bool,