carbon-react 110.10.1 → 110.10.3
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/esm/components/popover-container/popover-container.component.d.ts +4 -2
- package/esm/components/popover-container/popover-container.component.js +9 -4
- package/esm/components/tabs/tabs.d.ts +1 -1
- package/lib/components/popover-container/popover-container.component.d.ts +4 -2
- package/lib/components/popover-container/popover-container.component.js +10 -5
- package/lib/components/tabs/tabs.d.ts +1 -1
- package/package.json +1 -1
|
@@ -3,7 +3,7 @@ import { PaddingProps } from "styled-system";
|
|
|
3
3
|
export interface RenderOpenProps {
|
|
4
4
|
tabIndex: number;
|
|
5
5
|
isOpen?: boolean;
|
|
6
|
-
"data-element"
|
|
6
|
+
"data-element"?: string;
|
|
7
7
|
onClick: (ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement>) => void;
|
|
8
8
|
ref: React.RefObject<HTMLButtonElement>;
|
|
9
9
|
"aria-label"?: string;
|
|
@@ -11,13 +11,15 @@ export interface RenderOpenProps {
|
|
|
11
11
|
"aria-expanded": boolean;
|
|
12
12
|
"aria-haspopup": "dialog";
|
|
13
13
|
}
|
|
14
|
+
export declare const renderOpen: ({ tabIndex, onClick, "data-element": dataElement, ref, "aria-label": ariaLabel, id, "aria-expanded": ariaExpanded, "aria-haspopup": ariaHasPopup, }: RenderOpenProps) => JSX.Element;
|
|
14
15
|
export interface RenderCloseProps {
|
|
15
|
-
"data-element"
|
|
16
|
+
"data-element"?: string;
|
|
16
17
|
tabIndex: number;
|
|
17
18
|
onClick: (ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement>) => void;
|
|
18
19
|
ref: React.RefObject<HTMLButtonElement>;
|
|
19
20
|
"aria-label": string;
|
|
20
21
|
}
|
|
22
|
+
export declare const renderClose: ({ "data-element": dataElement, tabIndex, onClick, ref, "aria-label": ariaLabel, }: RenderCloseProps) => JSX.Element;
|
|
21
23
|
export interface PopoverContainerProps extends PaddingProps {
|
|
22
24
|
/** A function that will render the open component
|
|
23
25
|
*
|
|
@@ -36,12 +36,13 @@ renderOpen.propTypes = {
|
|
|
36
36
|
"aria-expanded": PropTypes.bool.isRequired,
|
|
37
37
|
"aria-haspopup": PropTypes.oneOf(["dialog"]).isRequired,
|
|
38
38
|
"aria-label": PropTypes.string,
|
|
39
|
-
"data-element": PropTypes.string
|
|
39
|
+
"data-element": PropTypes.string,
|
|
40
40
|
"id": PropTypes.string,
|
|
41
41
|
"isOpen": PropTypes.bool,
|
|
42
42
|
"onClick": PropTypes.func.isRequired,
|
|
43
43
|
"tabIndex": PropTypes.number.isRequired
|
|
44
44
|
};
|
|
45
|
+
export { renderOpen };
|
|
45
46
|
|
|
46
47
|
const renderClose = ({
|
|
47
48
|
"data-element": dataElement,
|
|
@@ -61,10 +62,11 @@ const renderClose = ({
|
|
|
61
62
|
|
|
62
63
|
renderClose.propTypes = {
|
|
63
64
|
"aria-label": PropTypes.string.isRequired,
|
|
64
|
-
"data-element": PropTypes.string
|
|
65
|
+
"data-element": PropTypes.string,
|
|
65
66
|
"onClick": PropTypes.func.isRequired,
|
|
66
67
|
"tabIndex": PropTypes.number.isRequired
|
|
67
68
|
};
|
|
69
|
+
export { renderClose };
|
|
68
70
|
|
|
69
71
|
const offset = ({
|
|
70
72
|
reference
|
|
@@ -99,6 +101,7 @@ const PopoverContainer = ({
|
|
|
99
101
|
const [isOpenInternal, setIsOpenInternal] = useState(false);
|
|
100
102
|
const closeButtonRef = useRef(null);
|
|
101
103
|
const openButtonRef = useRef(null);
|
|
104
|
+
const popoverReference = useRef(null);
|
|
102
105
|
const guid = useRef(createGuid());
|
|
103
106
|
const popoverContentNodeRef = useRef(null);
|
|
104
107
|
const popoverContainerId = title ? `PopoverContainer_${guid.current}` : undefined;
|
|
@@ -153,7 +156,9 @@ const PopoverContainer = ({
|
|
|
153
156
|
return /*#__PURE__*/React.createElement(PopoverContainerWrapperStyle, {
|
|
154
157
|
"data-component": "popover-container",
|
|
155
158
|
onMouseDown: handleClick
|
|
156
|
-
},
|
|
159
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
160
|
+
ref: popoverReference
|
|
161
|
+
}, renderOpenComponent(renderOpenComponentProps)), /*#__PURE__*/React.createElement(Transition, {
|
|
157
162
|
in: isOpen,
|
|
158
163
|
timeout: {
|
|
159
164
|
exit: 300
|
|
@@ -163,7 +168,7 @@ const PopoverContainer = ({
|
|
|
163
168
|
unmountOnExit: true,
|
|
164
169
|
nodeRef: popoverContentNodeRef
|
|
165
170
|
}, state => isOpen && /*#__PURE__*/React.createElement(Popover, _extends({
|
|
166
|
-
reference:
|
|
171
|
+
reference: popoverReference,
|
|
167
172
|
placement: position === "right" ? "bottom-start" : "bottom-end"
|
|
168
173
|
}, shouldCoverButton && {
|
|
169
174
|
modifiers: popperModifiers
|
|
@@ -3,7 +3,7 @@ import { PaddingProps } from "styled-system";
|
|
|
3
3
|
export interface RenderOpenProps {
|
|
4
4
|
tabIndex: number;
|
|
5
5
|
isOpen?: boolean;
|
|
6
|
-
"data-element"
|
|
6
|
+
"data-element"?: string;
|
|
7
7
|
onClick: (ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement>) => void;
|
|
8
8
|
ref: React.RefObject<HTMLButtonElement>;
|
|
9
9
|
"aria-label"?: string;
|
|
@@ -11,13 +11,15 @@ export interface RenderOpenProps {
|
|
|
11
11
|
"aria-expanded": boolean;
|
|
12
12
|
"aria-haspopup": "dialog";
|
|
13
13
|
}
|
|
14
|
+
export declare const renderOpen: ({ tabIndex, onClick, "data-element": dataElement, ref, "aria-label": ariaLabel, id, "aria-expanded": ariaExpanded, "aria-haspopup": ariaHasPopup, }: RenderOpenProps) => JSX.Element;
|
|
14
15
|
export interface RenderCloseProps {
|
|
15
|
-
"data-element"
|
|
16
|
+
"data-element"?: string;
|
|
16
17
|
tabIndex: number;
|
|
17
18
|
onClick: (ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement>) => void;
|
|
18
19
|
ref: React.RefObject<HTMLButtonElement>;
|
|
19
20
|
"aria-label": string;
|
|
20
21
|
}
|
|
22
|
+
export declare const renderClose: ({ "data-element": dataElement, tabIndex, onClick, ref, "aria-label": ariaLabel, }: RenderCloseProps) => JSX.Element;
|
|
21
23
|
export interface PopoverContainerProps extends PaddingProps {
|
|
22
24
|
/** A function that will render the open component
|
|
23
25
|
*
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.default = exports.PopoverContainer = void 0;
|
|
6
|
+
exports.default = exports.PopoverContainer = exports.renderClose = exports.renderOpen = void 0;
|
|
7
7
|
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
9
|
|
|
@@ -53,11 +53,12 @@ const renderOpen = ({
|
|
|
53
53
|
type: "settings"
|
|
54
54
|
}));
|
|
55
55
|
|
|
56
|
+
exports.renderOpen = renderOpen;
|
|
56
57
|
renderOpen.propTypes = {
|
|
57
58
|
"aria-expanded": _propTypes.default.bool.isRequired,
|
|
58
59
|
"aria-haspopup": _propTypes.default.oneOf(["dialog"]).isRequired,
|
|
59
60
|
"aria-label": _propTypes.default.string,
|
|
60
|
-
"data-element": _propTypes.default.string
|
|
61
|
+
"data-element": _propTypes.default.string,
|
|
61
62
|
"id": _propTypes.default.string,
|
|
62
63
|
"isOpen": _propTypes.default.bool,
|
|
63
64
|
"onClick": _propTypes.default.func.isRequired,
|
|
@@ -80,9 +81,10 @@ const renderClose = ({
|
|
|
80
81
|
type: "close"
|
|
81
82
|
}));
|
|
82
83
|
|
|
84
|
+
exports.renderClose = renderClose;
|
|
83
85
|
renderClose.propTypes = {
|
|
84
86
|
"aria-label": _propTypes.default.string.isRequired,
|
|
85
|
-
"data-element": _propTypes.default.string
|
|
87
|
+
"data-element": _propTypes.default.string,
|
|
86
88
|
"onClick": _propTypes.default.func.isRequired,
|
|
87
89
|
"tabIndex": _propTypes.default.number.isRequired
|
|
88
90
|
};
|
|
@@ -120,6 +122,7 @@ const PopoverContainer = ({
|
|
|
120
122
|
const [isOpenInternal, setIsOpenInternal] = (0, _react.useState)(false);
|
|
121
123
|
const closeButtonRef = (0, _react.useRef)(null);
|
|
122
124
|
const openButtonRef = (0, _react.useRef)(null);
|
|
125
|
+
const popoverReference = (0, _react.useRef)(null);
|
|
123
126
|
const guid = (0, _react.useRef)((0, _guid.default)());
|
|
124
127
|
const popoverContentNodeRef = (0, _react.useRef)(null);
|
|
125
128
|
const popoverContainerId = title ? `PopoverContainer_${guid.current}` : undefined;
|
|
@@ -174,7 +177,9 @@ const PopoverContainer = ({
|
|
|
174
177
|
return /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerWrapperStyle, {
|
|
175
178
|
"data-component": "popover-container",
|
|
176
179
|
onMouseDown: handleClick
|
|
177
|
-
},
|
|
180
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
181
|
+
ref: popoverReference
|
|
182
|
+
}, renderOpenComponent(renderOpenComponentProps)), /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, {
|
|
178
183
|
in: isOpen,
|
|
179
184
|
timeout: {
|
|
180
185
|
exit: 300
|
|
@@ -184,7 +189,7 @@ const PopoverContainer = ({
|
|
|
184
189
|
unmountOnExit: true,
|
|
185
190
|
nodeRef: popoverContentNodeRef
|
|
186
191
|
}, state => isOpen && /*#__PURE__*/_react.default.createElement(_popover.default, _extends({
|
|
187
|
-
reference:
|
|
192
|
+
reference: popoverReference,
|
|
188
193
|
placement: position === "right" ? "bottom-start" : "bottom-end"
|
|
189
194
|
}, shouldCoverButton && {
|
|
190
195
|
modifiers: popperModifiers
|