@coreui/react-pro 5.27.1 → 5.28.0
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.
- package/dist/cjs/components/picker/CPicker.js +6 -4
- package/dist/cjs/components/picker/CPicker.js.map +1 -1
- package/dist/cjs/src/components/picker/CPicker.d.ts +14 -2
- package/dist/esm/components/picker/CPicker.js +6 -4
- package/dist/esm/components/picker/CPicker.js.map +1 -1
- package/dist/esm/src/components/picker/CPicker.d.ts +14 -2
- package/package.json +1 -1
- package/src/components/picker/CPicker.tsx +27 -6
|
@@ -17,6 +17,8 @@ const CPicker = React.forwardRef(({ children, className, container = 'dropdown',
|
|
|
17
17
|
const togglerRef = React.useRef(null);
|
|
18
18
|
const { initPopper, destroyPopper } = usePopper.usePopper();
|
|
19
19
|
const [_visible, setVisible] = React.useState(visible);
|
|
20
|
+
const portalContainer = typeof container === 'string' ? undefined : container;
|
|
21
|
+
const _portal = portal || Boolean(portalContainer);
|
|
20
22
|
const popperConfig = {
|
|
21
23
|
placement: (isRTL.default(pickerRef.current) ? 'bottom-end' : 'bottom-start'),
|
|
22
24
|
modifiers: [
|
|
@@ -72,7 +74,7 @@ const CPicker = React.forwardRef(({ children, className, container = 'dropdown',
|
|
|
72
74
|
return (React.createElement("div", { className: index.default('picker', className), ref: pickerForkedRef }, children));
|
|
73
75
|
}
|
|
74
76
|
default: {
|
|
75
|
-
return (React.createElement(CFocusTrap.CFocusTrap, Object.assign({ active: _visible }, (
|
|
77
|
+
return (React.createElement(CFocusTrap.CFocusTrap, Object.assign({ active: _visible }, (_portal && { additionalContainer: dropdownRef })),
|
|
76
78
|
React.createElement("div", { className: index.default(className, {
|
|
77
79
|
show: _visible,
|
|
78
80
|
}), onClick: () => !disabled && setVisible(true), ref: pickerForkedRef },
|
|
@@ -81,9 +83,9 @@ const CPicker = React.forwardRef(({ children, className, container = 'dropdown',
|
|
|
81
83
|
React.cloneElement(toggler, {
|
|
82
84
|
ref: togglerRef,
|
|
83
85
|
}),
|
|
84
|
-
React.createElement(CConditionalPortal.CConditionalPortal, {
|
|
86
|
+
React.createElement(CConditionalPortal.CConditionalPortal, { container: portalContainer, portal: _portal },
|
|
85
87
|
React.createElement("div", { className: index.default(dropdownClassNames, {
|
|
86
|
-
show:
|
|
88
|
+
show: _portal && _visible,
|
|
87
89
|
}), ref: dropdownRef },
|
|
88
90
|
children,
|
|
89
91
|
footer && footerContent)))));
|
|
@@ -94,7 +96,7 @@ CPicker.displayName = 'CPicker';
|
|
|
94
96
|
CPicker.propTypes = {
|
|
95
97
|
children: PropTypes.node,
|
|
96
98
|
className: PropTypes.string,
|
|
97
|
-
container: PropTypes.
|
|
99
|
+
container: PropTypes.any, // 'dropdown' | 'inline' | HTMLElement
|
|
98
100
|
disabled: PropTypes.bool,
|
|
99
101
|
dropdownClassNames: PropTypes.string,
|
|
100
102
|
footer: PropTypes.bool,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CPicker.js","sources":["../../../../../src/components/picker/CPicker.tsx"],"sourcesContent":[null],"names":["forwardRef","useRef","useForkedRef","usePopper","useState","isRTL","useEffect","classNames","CFocusTrap","CConditionalPortal"],"mappings":";;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"CPicker.js","sources":["../../../../../src/components/picker/CPicker.tsx"],"sourcesContent":[null],"names":["forwardRef","useRef","useForkedRef","usePopper","useState","isRTL","useEffect","classNames","CFocusTrap","CConditionalPortal"],"mappings":"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"}
|
|
@@ -1,9 +1,21 @@
|
|
|
1
1
|
import React, { HTMLAttributes, ReactNode } from 'react';
|
|
2
2
|
export interface CPickerProps extends HTMLAttributes<HTMLDivElement> {
|
|
3
3
|
/**
|
|
4
|
-
* Set container type for the component.
|
|
4
|
+
* Set container type for the component, or the element the dropdown is rendered into.
|
|
5
|
+
*
|
|
6
|
+
* - `'dropdown'` - the component is rendered as a dropdown (default),
|
|
7
|
+
* - `'inline'` - the component is rendered inline, without a dropdown,
|
|
8
|
+
* - an HTML element, or a function that returns a single element - the dropdown is
|
|
9
|
+
* rendered inside that element instead of `document.body`. Implies `portal`.
|
|
10
|
+
* **[Added in v5.28.0]**
|
|
11
|
+
*
|
|
12
|
+
* @example
|
|
13
|
+
* // Render the dropdown inside a custom container
|
|
14
|
+
* const myContainer = document.getElementById('my-container')
|
|
15
|
+
*
|
|
16
|
+
* <CDatePicker container={myContainer} />
|
|
5
17
|
*/
|
|
6
|
-
container?: 'dropdown' | 'inline';
|
|
18
|
+
container?: 'dropdown' | 'inline' | DocumentFragment | Element | (() => DocumentFragment | Element | null) | null;
|
|
7
19
|
/**
|
|
8
20
|
* Toggle the disabled state for the component.
|
|
9
21
|
*/
|
|
@@ -15,6 +15,8 @@ const CPicker = forwardRef(({ children, className, container = 'dropdown', disab
|
|
|
15
15
|
const togglerRef = useRef(null);
|
|
16
16
|
const { initPopper, destroyPopper } = usePopper();
|
|
17
17
|
const [_visible, setVisible] = useState(visible);
|
|
18
|
+
const portalContainer = typeof container === 'string' ? undefined : container;
|
|
19
|
+
const _portal = portal || Boolean(portalContainer);
|
|
18
20
|
const popperConfig = {
|
|
19
21
|
placement: (isRTL(pickerRef.current) ? 'bottom-end' : 'bottom-start'),
|
|
20
22
|
modifiers: [
|
|
@@ -70,7 +72,7 @@ const CPicker = forwardRef(({ children, className, container = 'dropdown', disab
|
|
|
70
72
|
return (React.createElement("div", { className: classNames('picker', className), ref: pickerForkedRef }, children));
|
|
71
73
|
}
|
|
72
74
|
default: {
|
|
73
|
-
return (React.createElement(CFocusTrap, Object.assign({ active: _visible }, (
|
|
75
|
+
return (React.createElement(CFocusTrap, Object.assign({ active: _visible }, (_portal && { additionalContainer: dropdownRef })),
|
|
74
76
|
React.createElement("div", { className: classNames(className, {
|
|
75
77
|
show: _visible,
|
|
76
78
|
}), onClick: () => !disabled && setVisible(true), ref: pickerForkedRef },
|
|
@@ -79,9 +81,9 @@ const CPicker = forwardRef(({ children, className, container = 'dropdown', disab
|
|
|
79
81
|
React.cloneElement(toggler, {
|
|
80
82
|
ref: togglerRef,
|
|
81
83
|
}),
|
|
82
|
-
React.createElement(CConditionalPortal, {
|
|
84
|
+
React.createElement(CConditionalPortal, { container: portalContainer, portal: _portal },
|
|
83
85
|
React.createElement("div", { className: classNames(dropdownClassNames, {
|
|
84
|
-
show:
|
|
86
|
+
show: _portal && _visible,
|
|
85
87
|
}), ref: dropdownRef },
|
|
86
88
|
children,
|
|
87
89
|
footer && footerContent)))));
|
|
@@ -92,7 +94,7 @@ CPicker.displayName = 'CPicker';
|
|
|
92
94
|
CPicker.propTypes = {
|
|
93
95
|
children: PropTypes.node,
|
|
94
96
|
className: PropTypes.string,
|
|
95
|
-
container: PropTypes.
|
|
97
|
+
container: PropTypes.any, // 'dropdown' | 'inline' | HTMLElement
|
|
96
98
|
disabled: PropTypes.bool,
|
|
97
99
|
dropdownClassNames: PropTypes.string,
|
|
98
100
|
footer: PropTypes.bool,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CPicker.js","sources":["../../../../../src/components/picker/CPicker.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"CPicker.js","sources":["../../../../../src/components/picker/CPicker.tsx"],"sourcesContent":[null],"names":[],"mappings":"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"}
|
|
@@ -1,9 +1,21 @@
|
|
|
1
1
|
import React, { HTMLAttributes, ReactNode } from 'react';
|
|
2
2
|
export interface CPickerProps extends HTMLAttributes<HTMLDivElement> {
|
|
3
3
|
/**
|
|
4
|
-
* Set container type for the component.
|
|
4
|
+
* Set container type for the component, or the element the dropdown is rendered into.
|
|
5
|
+
*
|
|
6
|
+
* - `'dropdown'` - the component is rendered as a dropdown (default),
|
|
7
|
+
* - `'inline'` - the component is rendered inline, without a dropdown,
|
|
8
|
+
* - an HTML element, or a function that returns a single element - the dropdown is
|
|
9
|
+
* rendered inside that element instead of `document.body`. Implies `portal`.
|
|
10
|
+
* **[Added in v5.28.0]**
|
|
11
|
+
*
|
|
12
|
+
* @example
|
|
13
|
+
* // Render the dropdown inside a custom container
|
|
14
|
+
* const myContainer = document.getElementById('my-container')
|
|
15
|
+
*
|
|
16
|
+
* <CDatePicker container={myContainer} />
|
|
5
17
|
*/
|
|
6
|
-
container?: 'dropdown' | 'inline';
|
|
18
|
+
container?: 'dropdown' | 'inline' | DocumentFragment | Element | (() => DocumentFragment | Element | null) | null;
|
|
7
19
|
/**
|
|
8
20
|
* Toggle the disabled state for the component.
|
|
9
21
|
*/
|
package/package.json
CHANGED
|
@@ -12,9 +12,27 @@ import { isRTL } from '../../utils'
|
|
|
12
12
|
|
|
13
13
|
export interface CPickerProps extends HTMLAttributes<HTMLDivElement> {
|
|
14
14
|
/**
|
|
15
|
-
* Set container type for the component.
|
|
15
|
+
* Set container type for the component, or the element the dropdown is rendered into.
|
|
16
|
+
*
|
|
17
|
+
* - `'dropdown'` - the component is rendered as a dropdown (default),
|
|
18
|
+
* - `'inline'` - the component is rendered inline, without a dropdown,
|
|
19
|
+
* - an HTML element, or a function that returns a single element - the dropdown is
|
|
20
|
+
* rendered inside that element instead of `document.body`. Implies `portal`.
|
|
21
|
+
* **[Added in v5.28.0]**
|
|
22
|
+
*
|
|
23
|
+
* @example
|
|
24
|
+
* // Render the dropdown inside a custom container
|
|
25
|
+
* const myContainer = document.getElementById('my-container')
|
|
26
|
+
*
|
|
27
|
+
* <CDatePicker container={myContainer} />
|
|
16
28
|
*/
|
|
17
|
-
container?:
|
|
29
|
+
container?:
|
|
30
|
+
| 'dropdown'
|
|
31
|
+
| 'inline'
|
|
32
|
+
| DocumentFragment
|
|
33
|
+
| Element
|
|
34
|
+
| (() => DocumentFragment | Element | null)
|
|
35
|
+
| null
|
|
18
36
|
/**
|
|
19
37
|
* Toggle the disabled state for the component.
|
|
20
38
|
*/
|
|
@@ -82,6 +100,9 @@ export const CPicker = forwardRef<HTMLDivElement | HTMLLIElement, CPickerProps>(
|
|
|
82
100
|
|
|
83
101
|
const [_visible, setVisible] = useState(visible)
|
|
84
102
|
|
|
103
|
+
const portalContainer = typeof container === 'string' ? undefined : container
|
|
104
|
+
const _portal = portal || Boolean(portalContainer)
|
|
105
|
+
|
|
85
106
|
const popperConfig = {
|
|
86
107
|
placement: (isRTL(pickerRef.current) ? 'bottom-end' : 'bottom-start') as Placement,
|
|
87
108
|
modifiers: [
|
|
@@ -154,7 +175,7 @@ export const CPicker = forwardRef<HTMLDivElement | HTMLLIElement, CPickerProps>(
|
|
|
154
175
|
}
|
|
155
176
|
default: {
|
|
156
177
|
return (
|
|
157
|
-
<CFocusTrap active={_visible} {...(
|
|
178
|
+
<CFocusTrap active={_visible} {...(_portal && { additionalContainer: dropdownRef })}>
|
|
158
179
|
<div
|
|
159
180
|
className={classNames(className, {
|
|
160
181
|
show: _visible,
|
|
@@ -167,10 +188,10 @@ export const CPicker = forwardRef<HTMLDivElement | HTMLLIElement, CPickerProps>(
|
|
|
167
188
|
React.cloneElement(toggler as React.ReactElement<Record<string, unknown>>, {
|
|
168
189
|
ref: togglerRef,
|
|
169
190
|
})}
|
|
170
|
-
<CConditionalPortal portal={
|
|
191
|
+
<CConditionalPortal container={portalContainer} portal={_portal}>
|
|
171
192
|
<div
|
|
172
193
|
className={classNames(dropdownClassNames, {
|
|
173
|
-
show:
|
|
194
|
+
show: _portal && _visible,
|
|
174
195
|
})}
|
|
175
196
|
ref={dropdownRef}
|
|
176
197
|
>
|
|
@@ -191,7 +212,7 @@ CPicker.displayName = 'CPicker'
|
|
|
191
212
|
CPicker.propTypes = {
|
|
192
213
|
children: PropTypes.node,
|
|
193
214
|
className: PropTypes.string,
|
|
194
|
-
container: PropTypes.
|
|
215
|
+
container: PropTypes.any, // 'dropdown' | 'inline' | HTMLElement
|
|
195
216
|
disabled: PropTypes.bool,
|
|
196
217
|
dropdownClassNames: PropTypes.string,
|
|
197
218
|
footer: PropTypes.bool,
|