carbon-addons-iot-react 2.148.0-next.2 → 2.148.0-next.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/CHANGELOG.md +16 -0
- package/css/carbon-addons-iot-react.css +158 -4
- package/css/carbon-addons-iot-react.css.map +1 -1
- package/es/components/MenuButton/MenuButton.js +110 -8
- package/es/components/MenuButton/SingleMenuButton.js +54 -4
- package/es/components/MenuButton/SplitMenuButton.js +54 -4
- package/es/components/MenuButton/utils.js +80 -23
- package/lib/components/MenuButton/MenuButton.js +109 -7
- package/lib/components/MenuButton/SingleMenuButton.js +54 -4
- package/lib/components/MenuButton/SplitMenuButton.js +54 -4
- package/lib/components/MenuButton/utils.js +80 -22
- package/lib/css/carbon-addons-iot-react.css +158 -4
- package/lib/css/carbon-addons-iot-react.css.map +1 -1
- package/lib/scss/components/Button/_button.scss +6 -1
- package/lib/scss/components/MenuButton/_menu-button-shadow-blocker.scss +192 -0
- package/lib/scss/components/MenuButton/_menu-button.scss +25 -4
- package/package.json +2 -2
- package/scss/components/Button/_button.scss +6 -1
- package/scss/components/MenuButton/_menu-button-shadow-blocker.scss +192 -0
- package/scss/components/MenuButton/_menu-button.scss +25 -4
- package/umd/carbon-addons-iot-react.js +999 -749
|
@@ -5,6 +5,13 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
|
5
5
|
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
|
|
6
6
|
require('core-js/modules/es.array.map.js');
|
|
7
7
|
require('core-js/modules/es.object.assign.js');
|
|
8
|
+
require('core-js/modules/es.array.concat.js');
|
|
9
|
+
require('core-js/modules/es.object.keys.js');
|
|
10
|
+
require('core-js/modules/es.symbol.js');
|
|
11
|
+
require('core-js/modules/es.array.filter.js');
|
|
12
|
+
require('core-js/modules/es.object.get-own-property-descriptor.js');
|
|
13
|
+
require('core-js/modules/web.dom-collections.for-each.js');
|
|
14
|
+
require('core-js/modules/es.object.get-own-property-descriptors.js');
|
|
8
15
|
var React = require('react');
|
|
9
16
|
var PropTypes = require('prop-types');
|
|
10
17
|
var carbonComponentsReact = require('carbon-components-react');
|
|
@@ -26,7 +33,11 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
|
26
33
|
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
|
|
27
34
|
var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
|
|
28
35
|
|
|
36
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
|
37
|
+
|
|
38
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
29
39
|
var iotPrefix = Settings.settings.iotPrefix;
|
|
40
|
+
var GHOST = 'ghost';
|
|
30
41
|
var propTypes = {
|
|
31
42
|
// eslint-disable-next-line react/require-default-props
|
|
32
43
|
testID: deprecate(PropTypes__default['default'].string, "The 'testID' prop has been deprecated. Please use 'testId' instead."),
|
|
@@ -78,7 +89,17 @@ var propTypes = {
|
|
|
78
89
|
|
|
79
90
|
return undefined;
|
|
80
91
|
},
|
|
81
|
-
children: PropTypes__default['default'].oneOfType([PropTypes__default['default'].arrayOf(PropTypes__default['default'].node), PropTypes__default['default'].node]).isRequired
|
|
92
|
+
children: PropTypes__default['default'].oneOfType([PropTypes__default['default'].arrayOf(PropTypes__default['default'].node), PropTypes__default['default'].node]).isRequired,
|
|
93
|
+
|
|
94
|
+
/**
|
|
95
|
+
* The size of the button and the dropdown items
|
|
96
|
+
*/
|
|
97
|
+
size: PropTypes__default['default'].oneOf(['sm', 'md', 'default']),
|
|
98
|
+
|
|
99
|
+
/**
|
|
100
|
+
* The kind of button.
|
|
101
|
+
*/
|
|
102
|
+
kind: PropTypes__default['default'].oneOf(['primary', 'secondary', 'tertiary', 'ghost'])
|
|
82
103
|
};
|
|
83
104
|
var defaultProps = {
|
|
84
105
|
testId: 'menu-button',
|
|
@@ -87,10 +108,14 @@ var defaultProps = {
|
|
|
87
108
|
openIconDescription: 'open menu button',
|
|
88
109
|
closeIconDescription: 'close menu button',
|
|
89
110
|
renderOpenIcon: iconsReact.ChevronDown16,
|
|
90
|
-
renderCloseIcon: iconsReact.ChevronUp16
|
|
111
|
+
renderCloseIcon: iconsReact.ChevronUp16,
|
|
112
|
+
size: 'default',
|
|
113
|
+
kind: 'primary'
|
|
91
114
|
};
|
|
92
115
|
|
|
93
116
|
var MenuButton = function MenuButton(_ref) {
|
|
117
|
+
var _shadowBlockerButtonC, _classnames;
|
|
118
|
+
|
|
94
119
|
var testID = _ref.testID,
|
|
95
120
|
testId = _ref.testId,
|
|
96
121
|
onPrimaryActionClick = _ref.onPrimaryActionClick,
|
|
@@ -99,7 +124,9 @@ var MenuButton = function MenuButton(_ref) {
|
|
|
99
124
|
closeIconDescription = _ref.closeIconDescription,
|
|
100
125
|
renderOpenIcon = _ref.renderOpenIcon,
|
|
101
126
|
renderCloseIcon = _ref.renderCloseIcon,
|
|
102
|
-
children = _ref.children
|
|
127
|
+
children = _ref.children,
|
|
128
|
+
buttonSize = _ref.size,
|
|
129
|
+
kind = _ref.kind;
|
|
103
130
|
|
|
104
131
|
var _useState = React.useState(false),
|
|
105
132
|
_useState2 = _slicedToArray__default['default'](_useState, 2),
|
|
@@ -114,6 +141,11 @@ var MenuButton = function MenuButton(_ref) {
|
|
|
114
141
|
position = _useState4[0],
|
|
115
142
|
setPosition = _useState4[1];
|
|
116
143
|
|
|
144
|
+
var _useState5 = React.useState({}),
|
|
145
|
+
_useState6 = _slicedToArray__default['default'](_useState5, 2),
|
|
146
|
+
shadowBlockerConf = _useState6[0],
|
|
147
|
+
setShadowBlockerConf = _useState6[1];
|
|
148
|
+
|
|
117
149
|
var buttonRef = React.useRef(null);
|
|
118
150
|
var langDir = useLangDirection.useLangDirection();
|
|
119
151
|
var handleResize = React.useCallback(function () {
|
|
@@ -132,9 +164,10 @@ var MenuButton = function MenuButton(_ref) {
|
|
|
132
164
|
x: x,
|
|
133
165
|
y: y
|
|
134
166
|
});
|
|
167
|
+
setShadowBlockerConf(utils.getShadowBlockerConfig(buttonRef));
|
|
135
168
|
} // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
136
169
|
|
|
137
|
-
}, [label, langDir, onPrimaryActionClick, isMenuOpen]);
|
|
170
|
+
}, [label, langDir, onPrimaryActionClick, isMenuOpen, buttonSize]);
|
|
138
171
|
/**
|
|
139
172
|
* This is a hacky work-around, because the current Menu (7.42.1) won't allow us
|
|
140
173
|
* to set classNames or a target for where the menu should be placed via the portal
|
|
@@ -207,11 +240,31 @@ var MenuButton = function MenuButton(_ref) {
|
|
|
207
240
|
}));
|
|
208
241
|
});
|
|
209
242
|
}, [children, handleChildClick]);
|
|
243
|
+
var menuSize = buttonSize === 'default' ? 'lg' : buttonSize;
|
|
244
|
+
var buttonKind = !label ? GHOST : kind;
|
|
245
|
+
/**
|
|
246
|
+
* This shadow-blocker is needed to remove the menu shadow covering the button.
|
|
247
|
+
* We can't use a pure CSS solution (like ::after) for this since the shadow-blocker styling
|
|
248
|
+
* needs to get the position and dimensions of the menu and it is not possible to
|
|
249
|
+
* pass that info as css attributes (vars) to the menu since the component internally use
|
|
250
|
+
* the style attribute to set the x & y attributes.
|
|
251
|
+
*/
|
|
252
|
+
|
|
253
|
+
var menuHeight = shadowBlockerConf.menuHeight,
|
|
254
|
+
flippedX = shadowBlockerConf.flippedX,
|
|
255
|
+
flippedY = shadowBlockerConf.flippedY,
|
|
256
|
+
opensHorizontally = shadowBlockerConf.opensHorizontally;
|
|
257
|
+
var shadowBlockerButtonClasses = (_shadowBlockerButtonC = {}, _defineProperty__default['default'](_shadowBlockerButtonC, "".concat(iotPrefix, "--menu-button--flip-y"), flippedY), _defineProperty__default['default'](_shadowBlockerButtonC, "".concat(iotPrefix, "--menu-button--flip-x"), flippedX), _defineProperty__default['default'](_shadowBlockerButtonC, "".concat(iotPrefix, "--menu-button--opens-horizontally"), opensHorizontally), _shadowBlockerButtonC);
|
|
258
|
+
var showShadowBlocker = buttonKind === GHOST && isMenuOpen && !label;
|
|
259
|
+
var shadowBlocker = showShadowBlocker ? /*#__PURE__*/React__default['default'].createElement("div", {
|
|
260
|
+
style: _defineProperty__default['default']({}, "--menu-height", "".concat(menuHeight, "px")),
|
|
261
|
+
className: classnames__default['default']((_classnames = {}, _defineProperty__default['default'](_classnames, "".concat(iotPrefix, "--menu__shadow-blocker--flip-y"), flippedY), _defineProperty__default['default'](_classnames, "".concat(iotPrefix, "--menu__shadow-blocker--flip-x"), flippedX), _defineProperty__default['default'](_classnames, "".concat(iotPrefix, "--menu__shadow-blocker--opens-horizontally"), opensHorizontally), _classnames), "".concat(iotPrefix, "--menu__shadow-blocker"), "".concat(iotPrefix, "--menu__shadow-blocker--").concat(menuSize))
|
|
262
|
+
}) : null;
|
|
210
263
|
var ButtonComponent = typeof onPrimaryActionClick === 'function' && label ? SplitMenuButton.SplitMenuButton : SingleMenuButton.SingleMenuButton;
|
|
211
264
|
return /*#__PURE__*/React__default['default'].createElement("div", {
|
|
212
265
|
// TODO: remove deprecated 'testID' in v3.
|
|
213
266
|
"data-testid": "".concat(testID || testId, "-wrapper"),
|
|
214
|
-
className: classnames__default['default']("".concat(iotPrefix, "--menu-button"), _defineProperty__default['default']({}, "".concat(iotPrefix, "--menu-button--open"), isMenuOpen))
|
|
267
|
+
className: classnames__default['default']("".concat(iotPrefix, "--menu-button"), _objectSpread(_defineProperty__default['default']({}, "".concat(iotPrefix, "--menu-button--open"), isMenuOpen), shadowBlockerButtonClasses))
|
|
215
268
|
}, /*#__PURE__*/React__default['default'].createElement(ButtonComponent, {
|
|
216
269
|
ref: buttonRef,
|
|
217
270
|
onPrimaryActionClick: handlePrimaryClick,
|
|
@@ -220,10 +273,14 @@ var MenuButton = function MenuButton(_ref) {
|
|
|
220
273
|
renderIcon: isMenuOpen ? renderCloseIcon : renderOpenIcon,
|
|
221
274
|
label: label // TODO: remove deprecated 'testID' in v3.
|
|
222
275
|
,
|
|
223
|
-
testId: testID || testId
|
|
276
|
+
testId: testID || testId,
|
|
277
|
+
size: buttonSize,
|
|
278
|
+
kind: buttonKind
|
|
224
279
|
}), /*#__PURE__*/React__default['default'].createElement(carbonComponentsReact.unstable_Menu, _extends__default['default']({
|
|
280
|
+
className: classnames__default['default'](_defineProperty__default['default']({}, "".concat(iotPrefix, "--menu-button--icon-only"), buttonKind === GHOST), "".concat(iotPrefix, "--menu-button__menu")),
|
|
281
|
+
size: menuSize,
|
|
225
282
|
open: isMenuOpen
|
|
226
|
-
}, position), contextMenuItems));
|
|
283
|
+
}, position), contextMenuItems, shadowBlocker));
|
|
227
284
|
};
|
|
228
285
|
|
|
229
286
|
MenuButton.propTypes = propTypes;
|
|
@@ -322,6 +379,51 @@ MenuButton.__docgenInfo = {
|
|
|
322
379
|
"required": false,
|
|
323
380
|
"description": "Optional prop to change the closed state icon on the button\nCan be a React component class"
|
|
324
381
|
},
|
|
382
|
+
"size": {
|
|
383
|
+
"defaultValue": {
|
|
384
|
+
"value": "'default'",
|
|
385
|
+
"computed": false
|
|
386
|
+
},
|
|
387
|
+
"type": {
|
|
388
|
+
"name": "enum",
|
|
389
|
+
"value": [{
|
|
390
|
+
"value": "'sm'",
|
|
391
|
+
"computed": false
|
|
392
|
+
}, {
|
|
393
|
+
"value": "'md'",
|
|
394
|
+
"computed": false
|
|
395
|
+
}, {
|
|
396
|
+
"value": "'default'",
|
|
397
|
+
"computed": false
|
|
398
|
+
}]
|
|
399
|
+
},
|
|
400
|
+
"required": false,
|
|
401
|
+
"description": "The size of the button and the dropdown items"
|
|
402
|
+
},
|
|
403
|
+
"kind": {
|
|
404
|
+
"defaultValue": {
|
|
405
|
+
"value": "'primary'",
|
|
406
|
+
"computed": false
|
|
407
|
+
},
|
|
408
|
+
"type": {
|
|
409
|
+
"name": "enum",
|
|
410
|
+
"value": [{
|
|
411
|
+
"value": "'primary'",
|
|
412
|
+
"computed": false
|
|
413
|
+
}, {
|
|
414
|
+
"value": "'secondary'",
|
|
415
|
+
"computed": false
|
|
416
|
+
}, {
|
|
417
|
+
"value": "'tertiary'",
|
|
418
|
+
"computed": false
|
|
419
|
+
}, {
|
|
420
|
+
"value": "'ghost'",
|
|
421
|
+
"computed": false
|
|
422
|
+
}]
|
|
423
|
+
},
|
|
424
|
+
"required": false,
|
|
425
|
+
"description": "The kind of button."
|
|
426
|
+
},
|
|
325
427
|
"testID": {
|
|
326
428
|
"type": {
|
|
327
429
|
"name": "custom",
|
|
@@ -36,7 +36,17 @@ var propTypes = {
|
|
|
36
36
|
* be read by screen readers
|
|
37
37
|
*/
|
|
38
38
|
iconDescription: PropTypes__default['default'].string.isRequired,
|
|
39
|
-
testId: PropTypes__default['default'].string.isRequired
|
|
39
|
+
testId: PropTypes__default['default'].string.isRequired,
|
|
40
|
+
|
|
41
|
+
/**
|
|
42
|
+
* The size of the button and the dropdown items
|
|
43
|
+
*/
|
|
44
|
+
size: PropTypes__default['default'].oneOf(['sm', 'md', 'default']).isRequired,
|
|
45
|
+
|
|
46
|
+
/**
|
|
47
|
+
* The kind of button to render
|
|
48
|
+
*/
|
|
49
|
+
kind: PropTypes__default['default'].oneOf(['primary', 'secondary', 'tertiary', 'ghost']).isRequired
|
|
40
50
|
};
|
|
41
51
|
var defaultProps = {
|
|
42
52
|
label: '',
|
|
@@ -49,7 +59,9 @@ var SingleMenuButton = /*#__PURE__*/React__default['default'].forwardRef(functio
|
|
|
49
59
|
label = _ref.label,
|
|
50
60
|
iconDescription = _ref.iconDescription,
|
|
51
61
|
renderIcon = _ref.renderIcon,
|
|
52
|
-
testId = _ref.testId
|
|
62
|
+
testId = _ref.testId,
|
|
63
|
+
size = _ref.size,
|
|
64
|
+
kind = _ref.kind;
|
|
53
65
|
return /*#__PURE__*/React__default['default'].createElement(Button, {
|
|
54
66
|
ref: ref,
|
|
55
67
|
className: "".concat(iotPrefix, "--menu-button__trigger"),
|
|
@@ -57,8 +69,9 @@ var SingleMenuButton = /*#__PURE__*/React__default['default'].forwardRef(functio
|
|
|
57
69
|
iconDescription: iconDescription,
|
|
58
70
|
renderIcon: renderIcon,
|
|
59
71
|
hasIconOnly: !label,
|
|
60
|
-
kind:
|
|
61
|
-
testId: label ? "".concat(testId, "-single") : "".concat(testId, "-icon")
|
|
72
|
+
kind: kind,
|
|
73
|
+
testId: label ? "".concat(testId, "-single") : "".concat(testId, "-icon"),
|
|
74
|
+
size: size
|
|
62
75
|
}, label);
|
|
63
76
|
});
|
|
64
77
|
SingleMenuButton.propTypes = propTypes;
|
|
@@ -125,6 +138,43 @@ SingleMenuButton.__docgenInfo = {
|
|
|
125
138
|
},
|
|
126
139
|
"required": true,
|
|
127
140
|
"description": ""
|
|
141
|
+
},
|
|
142
|
+
"size": {
|
|
143
|
+
"type": {
|
|
144
|
+
"name": "enum",
|
|
145
|
+
"value": [{
|
|
146
|
+
"value": "'sm'",
|
|
147
|
+
"computed": false
|
|
148
|
+
}, {
|
|
149
|
+
"value": "'md'",
|
|
150
|
+
"computed": false
|
|
151
|
+
}, {
|
|
152
|
+
"value": "'default'",
|
|
153
|
+
"computed": false
|
|
154
|
+
}]
|
|
155
|
+
},
|
|
156
|
+
"required": true,
|
|
157
|
+
"description": "The size of the button and the dropdown items"
|
|
158
|
+
},
|
|
159
|
+
"kind": {
|
|
160
|
+
"type": {
|
|
161
|
+
"name": "enum",
|
|
162
|
+
"value": [{
|
|
163
|
+
"value": "'primary'",
|
|
164
|
+
"computed": false
|
|
165
|
+
}, {
|
|
166
|
+
"value": "'secondary'",
|
|
167
|
+
"computed": false
|
|
168
|
+
}, {
|
|
169
|
+
"value": "'tertiary'",
|
|
170
|
+
"computed": false
|
|
171
|
+
}, {
|
|
172
|
+
"value": "'ghost'",
|
|
173
|
+
"computed": false
|
|
174
|
+
}]
|
|
175
|
+
},
|
|
176
|
+
"required": true,
|
|
177
|
+
"description": "The kind of button to render"
|
|
128
178
|
}
|
|
129
179
|
}
|
|
130
180
|
};
|
|
@@ -44,7 +44,17 @@ var propTypes = {
|
|
|
44
44
|
* If specifying the `renderIcon` prop, provide a description for that icon that can
|
|
45
45
|
* be read by screen readers
|
|
46
46
|
*/
|
|
47
|
-
iconDescription: PropTypes__default['default'].string.isRequired
|
|
47
|
+
iconDescription: PropTypes__default['default'].string.isRequired,
|
|
48
|
+
|
|
49
|
+
/**
|
|
50
|
+
* The size of the button and the dropdown items
|
|
51
|
+
*/
|
|
52
|
+
size: PropTypes__default['default'].oneOf(['sm', 'md', 'default']).isRequired,
|
|
53
|
+
|
|
54
|
+
/**
|
|
55
|
+
* The kind of button to render
|
|
56
|
+
*/
|
|
57
|
+
kind: PropTypes__default['default'].oneOf(['primary', 'secondary', 'tertiary']).isRequired
|
|
48
58
|
};
|
|
49
59
|
var SplitMenuButton = /*#__PURE__*/React__default['default'].forwardRef(function (_ref, ref) {
|
|
50
60
|
var label = _ref.label,
|
|
@@ -52,11 +62,15 @@ var SplitMenuButton = /*#__PURE__*/React__default['default'].forwardRef(function
|
|
|
52
62
|
renderIcon = _ref.renderIcon,
|
|
53
63
|
onPrimaryActionClick = _ref.onPrimaryActionClick,
|
|
54
64
|
onSecondaryActionClick = _ref.onSecondaryActionClick,
|
|
55
|
-
|
|
65
|
+
size = _ref.size,
|
|
66
|
+
testId = _ref.testId,
|
|
67
|
+
kind = _ref.kind;
|
|
56
68
|
return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(Button, {
|
|
57
69
|
className: classnames__default['default']("".concat(iotPrefix, "--menu-button__primary")),
|
|
58
70
|
onClick: onPrimaryActionClick,
|
|
59
|
-
testId: "".concat(testId, "-primary")
|
|
71
|
+
testId: "".concat(testId, "-primary"),
|
|
72
|
+
size: size,
|
|
73
|
+
kind: kind
|
|
60
74
|
}, label), /*#__PURE__*/React__default['default'].createElement(Button, {
|
|
61
75
|
ref: ref,
|
|
62
76
|
className: classnames__default['default']("".concat(iotPrefix, "--menu-button__secondary"), "".concat(iotPrefix, "--menu-button__trigger")),
|
|
@@ -64,7 +78,9 @@ var SplitMenuButton = /*#__PURE__*/React__default['default'].forwardRef(function
|
|
|
64
78
|
iconDescription: iconDescription,
|
|
65
79
|
renderIcon: renderIcon,
|
|
66
80
|
onClick: onSecondaryActionClick,
|
|
67
|
-
testId: "".concat(testId, "-secondary")
|
|
81
|
+
testId: "".concat(testId, "-secondary"),
|
|
82
|
+
size: size,
|
|
83
|
+
kind: kind
|
|
68
84
|
}));
|
|
69
85
|
});
|
|
70
86
|
SplitMenuButton.propTypes = propTypes;
|
|
@@ -118,6 +134,40 @@ SplitMenuButton.__docgenInfo = {
|
|
|
118
134
|
},
|
|
119
135
|
"required": true,
|
|
120
136
|
"description": "If specifying the `renderIcon` prop, provide a description for that icon that can\nbe read by screen readers"
|
|
137
|
+
},
|
|
138
|
+
"size": {
|
|
139
|
+
"type": {
|
|
140
|
+
"name": "enum",
|
|
141
|
+
"value": [{
|
|
142
|
+
"value": "'sm'",
|
|
143
|
+
"computed": false
|
|
144
|
+
}, {
|
|
145
|
+
"value": "'md'",
|
|
146
|
+
"computed": false
|
|
147
|
+
}, {
|
|
148
|
+
"value": "'default'",
|
|
149
|
+
"computed": false
|
|
150
|
+
}]
|
|
151
|
+
},
|
|
152
|
+
"required": true,
|
|
153
|
+
"description": "The size of the button and the dropdown items"
|
|
154
|
+
},
|
|
155
|
+
"kind": {
|
|
156
|
+
"type": {
|
|
157
|
+
"name": "enum",
|
|
158
|
+
"value": [{
|
|
159
|
+
"value": "'primary'",
|
|
160
|
+
"computed": false
|
|
161
|
+
}, {
|
|
162
|
+
"value": "'secondary'",
|
|
163
|
+
"computed": false
|
|
164
|
+
}, {
|
|
165
|
+
"value": "'tertiary'",
|
|
166
|
+
"computed": false
|
|
167
|
+
}]
|
|
168
|
+
},
|
|
169
|
+
"required": true,
|
|
170
|
+
"description": "The kind of button to render"
|
|
121
171
|
}
|
|
122
172
|
}
|
|
123
173
|
};
|
|
@@ -5,24 +5,88 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
require('core-js/modules/es.array.concat.js');
|
|
6
6
|
require('core-js/modules/es.array.join.js');
|
|
7
7
|
require('core-js/modules/es.array.filter.js');
|
|
8
|
+
require('core-js/modules/es.array.includes.js');
|
|
9
|
+
require('core-js/modules/es.string.includes.js');
|
|
8
10
|
var Settings = require('../../constants/Settings.js');
|
|
9
11
|
|
|
10
12
|
var prefix = Settings.settings.prefix;
|
|
11
|
-
var getMenuPosition = function getMenuPosition(_ref) {
|
|
12
|
-
var _buttonRef$current, _buttonRef$current$pr, _buttonRef$current$ne, _buttonRef$current2, _menuRect$height, _menuRect$width;
|
|
13
13
|
|
|
14
|
+
var getBoundingClientRects = function getBoundingClientRects(buttonRef, isSplitButton) {
|
|
15
|
+
var _buttonRef$current, _buttonRef$current$pr, _buttonRef$current$ne, _buttonRef$current2;
|
|
16
|
+
|
|
17
|
+
var buttonRect = buttonRef.current.getBoundingClientRect();
|
|
18
|
+
var primaryButtonRect = isSplitButton ? buttonRef === null || buttonRef === void 0 ? void 0 : (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : (_buttonRef$current$pr = _buttonRef$current.previousSibling) === null || _buttonRef$current$pr === void 0 ? void 0 : _buttonRef$current$pr.getBoundingClientRect() : null; // Once the menuButton can accept a target for the react portal, we can
|
|
19
|
+
// use this method again once the menu is placed within the same div as the
|
|
20
|
+
// button.
|
|
21
|
+
// const menuRect = buttonRef.current.nextSibling?.getBoundingClientRect();
|
|
22
|
+
|
|
23
|
+
var node = (_buttonRef$current$ne = (_buttonRef$current2 = buttonRef.current) === null || _buttonRef$current2 === void 0 ? void 0 : _buttonRef$current2.nextSibling) !== null && _buttonRef$current$ne !== void 0 ? _buttonRef$current$ne : document.querySelector(".".concat(prefix, "--menu.").concat(prefix, "--menu--open.").concat(prefix, "--menu--root"));
|
|
24
|
+
var menuRect = node === null || node === void 0 ? void 0 : node.getBoundingClientRect();
|
|
25
|
+
return {
|
|
26
|
+
buttonRect: buttonRect,
|
|
27
|
+
primaryButtonRect: primaryButtonRect,
|
|
28
|
+
menuRect: menuRect
|
|
29
|
+
};
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
var getMenuDimensions = function getMenuDimensions(menuRect) {
|
|
33
|
+
var _menuRect$height, _menuRect$width;
|
|
34
|
+
|
|
35
|
+
return {
|
|
36
|
+
menuHeight: (_menuRect$height = menuRect === null || menuRect === void 0 ? void 0 : menuRect.height) !== null && _menuRect$height !== void 0 ? _menuRect$height : 0,
|
|
37
|
+
menuWidth: (_menuRect$width = menuRect === null || menuRect === void 0 ? void 0 : menuRect.width) !== null && _menuRect$width !== void 0 ? _menuRect$width : 0
|
|
38
|
+
};
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
var getOverflow = function getOverflow(menuRect, buttonRect) {
|
|
42
|
+
var windowWidth = window.innerWidth || document.documentElement.clientWidth;
|
|
43
|
+
var windowHeight = window.innerHeight || document.documentElement.clientHeight;
|
|
44
|
+
|
|
45
|
+
var _getMenuDimensions = getMenuDimensions(menuRect),
|
|
46
|
+
menuHeight = _getMenuDimensions.menuHeight,
|
|
47
|
+
menuWidth = _getMenuDimensions.menuWidth;
|
|
48
|
+
|
|
49
|
+
var offTop = buttonRect.top - menuHeight < 0;
|
|
50
|
+
var offLeft = buttonRect.left - menuWidth < 0;
|
|
51
|
+
var offRight = buttonRect.right + menuWidth > windowWidth;
|
|
52
|
+
var offBottom = buttonRect.bottom + menuHeight > windowHeight;
|
|
53
|
+
var T = offTop ? 'top' : '';
|
|
54
|
+
var R = offRight ? 'right' : '';
|
|
55
|
+
var B = offBottom ? 'bottom' : '';
|
|
56
|
+
var L = offLeft ? 'left' : '';
|
|
57
|
+
return [T, R, B, L].filter(Boolean).join('-');
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
var getShadowBlockerConfig = function getShadowBlockerConfig(buttonRef) {
|
|
61
|
+
var _getBoundingClientRec = getBoundingClientRects(buttonRef),
|
|
62
|
+
buttonRect = _getBoundingClientRec.buttonRect,
|
|
63
|
+
menuRect = _getBoundingClientRec.menuRect;
|
|
64
|
+
|
|
65
|
+
var _getMenuDimensions2 = getMenuDimensions(menuRect),
|
|
66
|
+
menuHeight = _getMenuDimensions2.menuHeight;
|
|
67
|
+
|
|
68
|
+
var overflow = getOverflow(menuRect, buttonRect);
|
|
69
|
+
var flippedX = (overflow === null || overflow === void 0 ? void 0 : overflow.includes('bottom')) && !(overflow !== null && overflow !== void 0 && overflow.includes('top'));
|
|
70
|
+
var flippedY = overflow === null || overflow === void 0 ? void 0 : overflow.includes('right');
|
|
71
|
+
var opensHorizontally = (overflow === null || overflow === void 0 ? void 0 : overflow.includes('top')) && (overflow === null || overflow === void 0 ? void 0 : overflow.includes('bottom'));
|
|
72
|
+
return {
|
|
73
|
+
menuHeight: menuHeight,
|
|
74
|
+
flippedX: flippedX,
|
|
75
|
+
flippedY: flippedY,
|
|
76
|
+
opensHorizontally: opensHorizontally
|
|
77
|
+
};
|
|
78
|
+
};
|
|
79
|
+
var getMenuPosition = function getMenuPosition(_ref) {
|
|
14
80
|
var label = _ref.label,
|
|
15
81
|
buttonRef = _ref.buttonRef,
|
|
16
82
|
onPrimaryActionClick = _ref.onPrimaryActionClick,
|
|
17
83
|
langDir = _ref.langDir;
|
|
18
84
|
var isSplitButton = label && typeof onPrimaryActionClick === 'function';
|
|
19
|
-
|
|
20
|
-
var
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
// button.
|
|
25
|
-
// const menuRect = buttonRef.current.nextSibling?.getBoundingClientRect();
|
|
85
|
+
|
|
86
|
+
var _getBoundingClientRec2 = getBoundingClientRects(buttonRef, isSplitButton),
|
|
87
|
+
buttonRect = _getBoundingClientRec2.buttonRect,
|
|
88
|
+
primaryButtonRect = _getBoundingClientRec2.primaryButtonRect,
|
|
89
|
+
menuRect = _getBoundingClientRec2.menuRect;
|
|
26
90
|
|
|
27
91
|
var isRtl = langDir === 'rtl';
|
|
28
92
|
var buttonX = buttonRect.x,
|
|
@@ -40,19 +104,12 @@ var getMenuPosition = function getMenuPosition(_ref) {
|
|
|
40
104
|
var scrollXOffset = hasScrollY ? 15 : 0;
|
|
41
105
|
var y = buttonY + buttonHeight;
|
|
42
106
|
var x = isSplitButton ? buttonX + primaryButtonWidth : buttonX;
|
|
43
|
-
|
|
44
|
-
var
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
var
|
|
49
|
-
var offRight = buttonRect.right + menuWidth > windowWidth;
|
|
50
|
-
var offBottom = buttonRect.bottom + menuHeight > windowHeight;
|
|
51
|
-
var T = offTop ? 'top' : '';
|
|
52
|
-
var R = offRight ? 'right' : '';
|
|
53
|
-
var B = offBottom ? 'bottom' : '';
|
|
54
|
-
var L = offLeft ? 'left' : '';
|
|
55
|
-
var overflow = [T, R, B, L].filter(Boolean).join('-');
|
|
107
|
+
|
|
108
|
+
var _getMenuDimensions3 = getMenuDimensions(menuRect),
|
|
109
|
+
menuHeight = _getMenuDimensions3.menuHeight,
|
|
110
|
+
menuWidth = _getMenuDimensions3.menuWidth;
|
|
111
|
+
|
|
112
|
+
var overflow = getOverflow(menuRect, buttonRect);
|
|
56
113
|
/* istanbul ignore else */
|
|
57
114
|
|
|
58
115
|
if (menuRect) {
|
|
@@ -117,3 +174,4 @@ var getMenuPosition = function getMenuPosition(_ref) {
|
|
|
117
174
|
};
|
|
118
175
|
|
|
119
176
|
exports.getMenuPosition = getMenuPosition;
|
|
177
|
+
exports.getShadowBlockerConfig = getShadowBlockerConfig;
|