@semcore/dropdown-menu 4.39.1 → 4.40.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/CHANGELOG.md +6 -0
- package/lib/cjs/DropdownMenu.js +167 -418
- package/lib/cjs/DropdownMenu.js.map +1 -1
- package/lib/cjs/index.d.js.map +1 -1
- package/lib/cjs/index.js +0 -7
- package/lib/cjs/index.js.map +1 -1
- package/lib/cjs/style/dropdown-menu.shadow.css +3 -91
- package/lib/cjs/translations/en.json +1 -3
- package/lib/es6/DropdownMenu.js +167 -419
- package/lib/es6/DropdownMenu.js.map +1 -1
- package/lib/es6/index.d.js.map +1 -1
- package/lib/es6/index.js +0 -1
- package/lib/es6/index.js.map +1 -1
- package/lib/es6/style/dropdown-menu.shadow.css +3 -91
- package/lib/es6/translations/en.json +1 -3
- package/lib/types/index.d.ts +3 -11
- package/package.json +7 -7
- package/lib/cjs/DropdownMenuOld.js +0 -682
- package/lib/cjs/DropdownMenuOld.js.map +0 -1
- package/lib/cjs/style/dropdown-menu-old.shadow.css +0 -224
- package/lib/es6/DropdownMenuOld.js +0 -683
- package/lib/es6/DropdownMenuOld.js.map +0 -1
- package/lib/es6/style/dropdown-menu-old.shadow.css +0 -224
package/lib/es6/DropdownMenu.js
CHANGED
|
@@ -1,16 +1,17 @@
|
|
|
1
1
|
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
2
|
-
import _extends from "@babel/runtime/helpers/extends";
|
|
3
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
4
3
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
4
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
5
5
|
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
|
|
6
6
|
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
7
7
|
import _createClass from "@babel/runtime/helpers/createClass";
|
|
8
8
|
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
|
|
9
|
+
import _get from "@babel/runtime/helpers/get";
|
|
10
|
+
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
9
11
|
import _inherits from "@babel/runtime/helpers/inherits";
|
|
10
12
|
import _createSuper from "@babel/runtime/helpers/createSuper";
|
|
11
13
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
12
14
|
import { sstyled as _sstyled } from "@semcore/utils/lib/core/index";
|
|
13
|
-
import { assignProps as _assignProps13 } from "@semcore/core";
|
|
14
15
|
import { assignProps as _assignProps12 } from "@semcore/core";
|
|
15
16
|
import { assignProps as _assignProps11 } from "@semcore/core";
|
|
16
17
|
import { assignProps as _assignProps10 } from "@semcore/core";
|
|
@@ -26,57 +27,45 @@ import { assignProps as _assignProps } from "@semcore/core";
|
|
|
26
27
|
var _excluded = ["className"];
|
|
27
28
|
import React from 'react';
|
|
28
29
|
import cn from 'classnames';
|
|
29
|
-
import createComponent, {
|
|
30
|
-
import Dropdown from '@semcore/dropdown';
|
|
30
|
+
import createComponent, { sstyled, Root } from '@semcore/core';
|
|
31
|
+
import Dropdown, { AbstractDropdown, selectedIndexContext, enhance } from '@semcore/dropdown';
|
|
31
32
|
import { Flex, useBox, Box } from '@semcore/flex-box';
|
|
32
33
|
import ScrollAreaComponent, { hideScrollBarsFromScreenReadersContext } from '@semcore/scroll-area';
|
|
33
|
-
import
|
|
34
|
-
import i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';
|
|
34
|
+
import { useUID } from '@semcore/utils/lib/uniqueID';
|
|
35
35
|
import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
|
|
36
36
|
/*__reshadow-styles__:"./style/dropdown-menu.shadow.css"*/
|
|
37
|
-
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".
|
|
38
|
-
"__SDropdownMenuItemContainer": "
|
|
39
|
-
"
|
|
40
|
-
"
|
|
41
|
-
"_size_l": "
|
|
42
|
-
"_size_m": "
|
|
43
|
-
"
|
|
44
|
-
"
|
|
45
|
-
"
|
|
46
|
-
"
|
|
47
|
-
"
|
|
48
|
-
"
|
|
49
|
-
"
|
|
50
|
-
"
|
|
51
|
-
"
|
|
52
|
-
"
|
|
53
|
-
"
|
|
54
|
-
"_position_start": "_position_start_15tyi_gg_",
|
|
55
|
-
"_position_end": "_position_end_15tyi_gg_",
|
|
56
|
-
"__SShadowVertical": "___SShadowVertical_15tyi_gg_",
|
|
57
|
-
"_selected": "__selected_15tyi_gg_",
|
|
58
|
-
"_notInteractive": "__notInteractive_15tyi_gg_",
|
|
59
|
-
"_variant_hint": "_variant_hint_15tyi_gg_",
|
|
60
|
-
"_variant_title": "_variant_title_15tyi_gg_",
|
|
61
|
-
"__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_15tyi_gg_"
|
|
37
|
+
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SDropdownMenuList_14fg8_gg_{max-height:240px;padding:var(--intergalactic-spacing-1x, 4px)0;position:relative;min-height:26px;min-width:32px;box-sizing:content-box;z-index:0;color:var(--intergalactic-text-primary, #191b23)}.___SDropdownMenuList_14fg8_gg_ .___SShadowHorizontal_14fg8_gg_:after,.___SDropdownMenuList_14fg8_gg_ .___SShadowHorizontal_14fg8_gg_:before{width:16px;height:100%;border-radius:var(--intergalactic-control-rounded, 6px)}.___SDropdownMenuList_14fg8_gg_ .___SShadowHorizontal_14fg8_gg_._position_median_14fg8_gg_:before{background:var(--intergalactic-scroll-area-dropdown-menu-left,\n linear-gradient(to right, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)\n )}.___SDropdownMenuList_14fg8_gg_ .___SShadowHorizontal_14fg8_gg_._position_median_14fg8_gg_:after{background:var(--intergalactic-scroll-area-dropdown-menu-right,\n linear-gradient(to left, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)\n )}.___SDropdownMenuList_14fg8_gg_ .___SShadowHorizontal_14fg8_gg_._position_start_14fg8_gg_:before{background:var(--intergalactic-scroll-area-dropdown-menu-left,\n linear-gradient(to right, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)\n )}.___SDropdownMenuList_14fg8_gg_ .___SShadowHorizontal_14fg8_gg_._position_end_14fg8_gg_:after{background:var(--intergalactic-scroll-area-dropdown-menu-right,\n linear-gradient(to left, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)\n )}.___SDropdownMenuList_14fg8_gg_ .___SShadowVertical_14fg8_gg_:after,.___SDropdownMenuList_14fg8_gg_ .___SShadowVertical_14fg8_gg_:before{width:100%;height:16px;border-radius:var(--intergalactic-control-rounded, 6px)}.___SDropdownMenuList_14fg8_gg_ .___SShadowVertical_14fg8_gg_._position_median_14fg8_gg_:before{background:var(--intergalactic-scroll-area-dropdown-menu-top,\n linear-gradient(to bottom, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)\n )}.___SDropdownMenuList_14fg8_gg_ .___SShadowVertical_14fg8_gg_._position_median_14fg8_gg_:after{background:var(--intergalactic-scroll-area-dropdown-menu-bottom,\n linear-gradient(to top, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)\n )}.___SDropdownMenuList_14fg8_gg_ .___SShadowVertical_14fg8_gg_._position_start_14fg8_gg_:before{background:var(--intergalactic-scroll-area-dropdown-menu-top,\n linear-gradient(to bottom, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)\n )}.___SDropdownMenuList_14fg8_gg_ .___SShadowVertical_14fg8_gg_._position_end_14fg8_gg_:after{background:var(--intergalactic-scroll-area-dropdown-menu-bottom,\n linear-gradient(to top, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)\n )}.___SDropdownMenuItemContainer_14fg8_gg_.__nesting-trigger_14fg8_gg_{justify-content:space-between}.___SDropdownMenuItemAddon_14fg8_gg_{display:inline-flex;margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SDropdownMenuItemAddon_14fg8_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_14fg8_gg_:last-child{margin-right:0}.___SDropdownMenuNesting_14fg8_gg_,.___SDropdownMenuNesting_14fg8_gg_._size_l_14fg8_gg_,.___SDropdownMenuNesting_14fg8_gg_._size_m_14fg8_gg_{padding:0}.___SDropdownMenuNesting_14fg8_gg_.__highlighted_14fg8_gg_{z-index:1;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5)) inset}.___SDropdownNestingItem_14fg8_gg_._size_l_14fg8_gg_,.___SDropdownNestingItem_14fg8_gg_._size_m_14fg8_gg_{padding-right:0}.___SDropdownNestingItem_14fg8_gg_ .___SDropdownMenuItemContainer_14fg8_gg_{width:auto;padding-top:0;padding-bottom:0;padding-left:0;min-height:auto}.___SItemContent_14fg8_gg_:focus{outline:0}.___SItemHint_14fg8_gg_{color:var(--intergalactic-text-secondary, #6c6e79)}" /*__inner_css_end__*/, "14fg8_gg_") /*__reshadow_css_end__*/, {
|
|
38
|
+
"__SDropdownMenuItemContainer": "___SDropdownMenuItemContainer_14fg8_gg_",
|
|
39
|
+
"_nesting-trigger": "__nesting-trigger_14fg8_gg_",
|
|
40
|
+
"__SDropdownMenuNesting": "___SDropdownMenuNesting_14fg8_gg_",
|
|
41
|
+
"_size_l": "_size_l_14fg8_gg_",
|
|
42
|
+
"_size_m": "_size_m_14fg8_gg_",
|
|
43
|
+
"_highlighted": "__highlighted_14fg8_gg_",
|
|
44
|
+
"__SDropdownNestingItem": "___SDropdownNestingItem_14fg8_gg_",
|
|
45
|
+
"__SItemContent": "___SItemContent_14fg8_gg_",
|
|
46
|
+
"__SItemHint": "___SItemHint_14fg8_gg_",
|
|
47
|
+
"__SDropdownMenuList": "___SDropdownMenuList_14fg8_gg_",
|
|
48
|
+
"__SShadowHorizontal": "___SShadowHorizontal_14fg8_gg_",
|
|
49
|
+
"_position_median": "_position_median_14fg8_gg_",
|
|
50
|
+
"_position_start": "_position_start_14fg8_gg_",
|
|
51
|
+
"_position_end": "_position_end_14fg8_gg_",
|
|
52
|
+
"__SShadowVertical": "___SShadowVertical_14fg8_gg_",
|
|
53
|
+
"__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_14fg8_gg_"
|
|
62
54
|
});
|
|
63
|
-
import { setFocus } from '@semcore/utils/lib/focus-lock/setFocus';
|
|
64
|
-
import { isFocusInside } from '@semcore/utils/lib/focus-lock/isFocusInside';
|
|
65
55
|
import { useFocusSource } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
66
56
|
import { isAdvanceMode } from '@semcore/utils/lib/findComponent';
|
|
67
|
-
import ButtonComponent from '@semcore/button';
|
|
68
57
|
import { forkRef } from '@semcore/utils/lib/ref';
|
|
69
|
-
import
|
|
70
|
-
|
|
71
|
-
|
|
58
|
+
import { callAllEventHandlers } from '@semcore/utils/lib/assignProps';
|
|
59
|
+
import ButtonComponent from '@semcore/button';
|
|
60
|
+
var ListBoxContextProvider = function ListBoxContextProvider(_ref20) {
|
|
61
|
+
var children = _ref20.children;
|
|
72
62
|
return /*#__PURE__*/React.createElement(hideScrollBarsFromScreenReadersContext.Provider, {
|
|
73
63
|
value: true
|
|
74
64
|
}, children);
|
|
75
65
|
};
|
|
76
|
-
var selectedIndexContext = /*#__PURE__*/React.createContext(0);
|
|
77
66
|
var menuItemContext = /*#__PURE__*/React.createContext({});
|
|
78
|
-
var DropdownMenuRoot = /*#__PURE__*/function (
|
|
79
|
-
_inherits(DropdownMenuRoot,
|
|
67
|
+
var DropdownMenuRoot = /*#__PURE__*/function (_AbstractDropdown) {
|
|
68
|
+
_inherits(DropdownMenuRoot, _AbstractDropdown);
|
|
80
69
|
var _super = _createSuper(DropdownMenuRoot);
|
|
81
70
|
function DropdownMenuRoot() {
|
|
82
71
|
var _this;
|
|
@@ -85,281 +74,65 @@ var DropdownMenuRoot = /*#__PURE__*/function (_Component) {
|
|
|
85
74
|
args[_key] = arguments[_key];
|
|
86
75
|
}
|
|
87
76
|
_this = _super.call.apply(_super, [this].concat(args));
|
|
88
|
-
_defineProperty(_assertThisInitialized(_this), "
|
|
89
|
-
_defineProperty(_assertThisInitialized(_this), "triggerRef", /*#__PURE__*/React.createRef());
|
|
90
|
-
_defineProperty(_assertThisInitialized(_this), "menuRef", /*#__PURE__*/React.createRef());
|
|
91
|
-
_defineProperty(_assertThisInitialized(_this), "itemProps", []);
|
|
92
|
-
_defineProperty(_assertThisInitialized(_this), "itemRefs", []);
|
|
93
|
-
_defineProperty(_assertThisInitialized(_this), "highlightedItemRef", /*#__PURE__*/React.createRef());
|
|
94
|
-
_defineProperty(_assertThisInitialized(_this), "prevHighlightedIndex", null);
|
|
95
|
-
_defineProperty(_assertThisInitialized(_this), "handleClickTrigger", function (e) {
|
|
96
|
-
e.preventDefault();
|
|
97
|
-
_this.handlers.visible(true);
|
|
98
|
-
setTimeout(function () {
|
|
99
|
-
var element = _this.itemRefs[_this.asProps.highlightedIndex];
|
|
100
|
-
element === null || element === void 0 ? void 0 : element.focus();
|
|
101
|
-
}, 0);
|
|
102
|
-
});
|
|
103
|
-
_defineProperty(_assertThisInitialized(_this), "bindHandlerKeyDown", function (place) {
|
|
104
|
-
return function (e) {
|
|
105
|
-
var amount = e.shiftKey ? 5 : 1;
|
|
106
|
-
var targetTagName = e.target.tagName;
|
|
107
|
-
var _this$asProps = _this.asProps,
|
|
108
|
-
visible = _this$asProps.visible,
|
|
109
|
-
highlightedIndex = _this$asProps.highlightedIndex,
|
|
110
|
-
placement = _this$asProps.placement,
|
|
111
|
-
inlineActions = _this$asProps.inlineActions;
|
|
112
|
-
if (e.key === ' ' && ['INPUT', 'TEXTAREA'].includes(targetTagName)) return;
|
|
113
|
-
if (e.key === 'Enter' && targetTagName === 'TEXTAREA') return;
|
|
114
|
-
if (place === 'popper' && (e.key === ' ' || e.key === 'Enter') && (targetTagName === 'BUTTON' || targetTagName === 'A')) return;
|
|
115
|
-
if (place === 'trigger' && ['ArrowDown', 'ArrowUp', 'Enter', ' '].includes(e.key) && e.target.getAttribute('role') !== 'menuitem') {
|
|
116
|
-
_this.handleClickTrigger(e);
|
|
117
|
-
}
|
|
118
|
-
var show = e.key === 'ArrowRight' && placement.startsWith('right') || e.key === 'ArrowLeft' && placement.startsWith('left');
|
|
119
|
-
var hide = e.key === 'ArrowLeft' && placement.startsWith('right') || e.key === 'ArrowRight' && placement.startsWith('left') || e.key === 'Escape';
|
|
120
|
-
var isMenuItem = e.target.getAttribute('role') === 'menuitem';
|
|
121
|
-
if (place === 'trigger' && (!visible || inlineActions) && show && isMenuItem) {
|
|
122
|
-
_this.handlers.visible(true);
|
|
123
|
-
_this.handlers.highlightedIndex(0);
|
|
124
|
-
setTimeout(function () {
|
|
125
|
-
var _this$itemRefs$_this$;
|
|
126
|
-
(_this$itemRefs$_this$ = _this.itemRefs[_this.asProps.highlightedIndex]) === null || _this$itemRefs$_this$ === void 0 ? void 0 : _this$itemRefs$_this$.focus();
|
|
127
|
-
}, 0);
|
|
128
|
-
e.preventDefault();
|
|
129
|
-
e.stopPropagation();
|
|
130
|
-
return;
|
|
131
|
-
}
|
|
132
|
-
if (place === 'list' && visible && hide && isMenuItem) {
|
|
133
|
-
if (!inlineActions || inlineActions && (e.key === 'Escape' || _this.asProps.highlightedIndex === 0)) {
|
|
134
|
-
var _this$triggerRef$curr;
|
|
135
|
-
_this.handlers.visible(false);
|
|
136
|
-
(_this$triggerRef$curr = _this.triggerRef.current) === null || _this$triggerRef$curr === void 0 ? void 0 : _this$triggerRef$curr.focus();
|
|
137
|
-
e.preventDefault();
|
|
138
|
-
e.stopPropagation();
|
|
139
|
-
return;
|
|
140
|
-
}
|
|
141
|
-
}
|
|
142
|
-
if (place === 'list') {
|
|
143
|
-
switch (e.key) {
|
|
144
|
-
case 'ArrowDown':
|
|
145
|
-
{
|
|
146
|
-
if (visible && !inlineActions) {
|
|
147
|
-
var _this$itemRefs$newHig;
|
|
148
|
-
var newHighlightedIndex = _this.getHighlightedIndex(amount);
|
|
149
|
-
(_this$itemRefs$newHig = _this.itemRefs[newHighlightedIndex]) === null || _this$itemRefs$newHig === void 0 ? void 0 : _this$itemRefs$newHig.focus();
|
|
150
|
-
_this.handlers.highlightedIndex(newHighlightedIndex, e);
|
|
151
|
-
e.preventDefault();
|
|
152
|
-
e.stopPropagation();
|
|
153
|
-
}
|
|
154
|
-
break;
|
|
155
|
-
}
|
|
156
|
-
case 'ArrowRight':
|
|
157
|
-
{
|
|
158
|
-
if (visible && inlineActions) {
|
|
159
|
-
var _this$itemRefs$_newHi;
|
|
160
|
-
var _newHighlightedIndex = _this.getHighlightedIndex(amount);
|
|
161
|
-
(_this$itemRefs$_newHi = _this.itemRefs[_newHighlightedIndex]) === null || _this$itemRefs$_newHi === void 0 ? void 0 : _this$itemRefs$_newHi.focus();
|
|
162
|
-
_this.handlers.highlightedIndex(_newHighlightedIndex, e);
|
|
163
|
-
e.preventDefault();
|
|
164
|
-
e.stopPropagation();
|
|
165
|
-
}
|
|
166
|
-
break;
|
|
167
|
-
}
|
|
168
|
-
case 'ArrowUp':
|
|
169
|
-
{
|
|
170
|
-
if (visible && !inlineActions) {
|
|
171
|
-
var _this$itemRefs$_newHi2;
|
|
172
|
-
var _newHighlightedIndex2 = _this.getHighlightedIndex(-amount);
|
|
173
|
-
(_this$itemRefs$_newHi2 = _this.itemRefs[_newHighlightedIndex2]) === null || _this$itemRefs$_newHi2 === void 0 ? void 0 : _this$itemRefs$_newHi2.focus();
|
|
174
|
-
_this.handlers.highlightedIndex(_newHighlightedIndex2, e);
|
|
175
|
-
e.preventDefault();
|
|
176
|
-
e.stopPropagation();
|
|
177
|
-
}
|
|
178
|
-
break;
|
|
179
|
-
}
|
|
180
|
-
case 'ArrowLeft':
|
|
181
|
-
{
|
|
182
|
-
if (visible && inlineActions) {
|
|
183
|
-
var _this$itemRefs$_newHi3;
|
|
184
|
-
var _newHighlightedIndex3 = _this.getHighlightedIndex(-amount);
|
|
185
|
-
(_this$itemRefs$_newHi3 = _this.itemRefs[_newHighlightedIndex3]) === null || _this$itemRefs$_newHi3 === void 0 ? void 0 : _this$itemRefs$_newHi3.focus();
|
|
186
|
-
_this.handlers.highlightedIndex(_newHighlightedIndex3, e);
|
|
187
|
-
e.preventDefault();
|
|
188
|
-
e.stopPropagation();
|
|
189
|
-
}
|
|
190
|
-
break;
|
|
191
|
-
}
|
|
192
|
-
case ' ':
|
|
193
|
-
case 'Enter':
|
|
194
|
-
if (_this.highlightedItemRef.current && highlightedIndex !== null) {
|
|
195
|
-
e.stopPropagation();
|
|
196
|
-
e.preventDefault();
|
|
197
|
-
_this.highlightedItemRef.current.click();
|
|
198
|
-
}
|
|
199
|
-
break;
|
|
200
|
-
}
|
|
201
|
-
}
|
|
202
|
-
};
|
|
203
|
-
});
|
|
204
|
-
_defineProperty(_assertThisInitialized(_this), "scrollToNode", function (node) {
|
|
205
|
-
if (node) {
|
|
206
|
-
_this.highlightedItemRef.current = node;
|
|
207
|
-
}
|
|
208
|
-
setTimeout(function () {
|
|
209
|
-
if (node !== null && node !== void 0 && node.scrollIntoView) {
|
|
210
|
-
if (_this.asProps.highlightedIndex !== _this.prevHighlightedIndex) {
|
|
211
|
-
_this.prevHighlightedIndex = _this.asProps.highlightedIndex;
|
|
212
|
-
node.scrollIntoView({
|
|
213
|
-
block: 'nearest',
|
|
214
|
-
inline: 'nearest'
|
|
215
|
-
});
|
|
216
|
-
}
|
|
217
|
-
}
|
|
218
|
-
}, 0);
|
|
219
|
-
});
|
|
220
|
-
_defineProperty(_assertThisInitialized(_this), "getHighlightedIndex", function (amount) {
|
|
221
|
-
var _this$itemProps$newIn;
|
|
222
|
-
var highlightedIndex = _this.asProps.highlightedIndex;
|
|
223
|
-
var itemsLastIndex = _this.itemProps.length - 1;
|
|
224
|
-
var selectedIndex = _this.itemProps.findIndex(function (item) {
|
|
225
|
-
return item.selected;
|
|
226
|
-
});
|
|
227
|
-
if (itemsLastIndex < 0) return;
|
|
228
|
-
if (highlightedIndex == null) {
|
|
229
|
-
if (selectedIndex !== -1) {
|
|
230
|
-
highlightedIndex = selectedIndex;
|
|
231
|
-
} else if (_this.highlightedItemRef.current) {
|
|
232
|
-
highlightedIndex = _this.prevHighlightedIndex;
|
|
233
|
-
} else {
|
|
234
|
-
highlightedIndex = amount < 0 ? 0 : itemsLastIndex;
|
|
235
|
-
}
|
|
236
|
-
}
|
|
237
|
-
var newIndex = highlightedIndex + amount;
|
|
238
|
-
if (newIndex < 0) {
|
|
239
|
-
newIndex = amount + itemsLastIndex + 1;
|
|
240
|
-
} else if (newIndex > itemsLastIndex) {
|
|
241
|
-
newIndex = newIndex - itemsLastIndex - 1;
|
|
242
|
-
}
|
|
243
|
-
if ((_this$itemProps$newIn = _this.itemProps[newIndex]) !== null && _this$itemProps$newIn !== void 0 && _this$itemProps$newIn.disabled) {
|
|
244
|
-
_this.getHighlightedIndex(amount < 0 ? amount - 1 : amount + 1);
|
|
245
|
-
} else if (!_this.itemProps[newIndex]) {
|
|
246
|
-
return 0;
|
|
247
|
-
} else {
|
|
248
|
-
return newIndex;
|
|
249
|
-
}
|
|
250
|
-
});
|
|
77
|
+
_defineProperty(_assertThisInitialized(_this), "role", 'menu');
|
|
251
78
|
return _this;
|
|
252
79
|
}
|
|
253
80
|
_createClass(DropdownMenuRoot, [{
|
|
254
|
-
key: "
|
|
255
|
-
value: function
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
_this2.handlers.selectedIndex(index);
|
|
261
|
-
}],
|
|
262
|
-
visible: null
|
|
263
|
-
};
|
|
81
|
+
key: "itemRef",
|
|
82
|
+
value: function itemRef(props, index, node) {
|
|
83
|
+
_get(_getPrototypeOf(DropdownMenuRoot.prototype), "itemRef", this).call(this, props, index, node);
|
|
84
|
+
if (node === document.activeElement) {
|
|
85
|
+
_get(_getPrototypeOf(DropdownMenuRoot.prototype), "scrollToNode", this).call(this, node);
|
|
86
|
+
}
|
|
264
87
|
}
|
|
265
88
|
}, {
|
|
266
89
|
key: "getTriggerProps",
|
|
267
90
|
value: function getTriggerProps() {
|
|
268
|
-
var _this$
|
|
269
|
-
|
|
270
|
-
uid = _this$
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
return {
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
'aria-
|
|
278
|
-
|
|
279
|
-
'aria-expanded': visible ? 'true' : 'false',
|
|
280
|
-
onKeyDown: this.bindHandlerKeyDown('trigger'),
|
|
281
|
-
onClick: this.handleClickTrigger,
|
|
282
|
-
ref: this.triggerRef
|
|
283
|
-
};
|
|
91
|
+
var _this$asProps = this.asProps,
|
|
92
|
+
Children = _this$asProps.Children,
|
|
93
|
+
uid = _this$asProps.uid,
|
|
94
|
+
visible = _this$asProps.visible;
|
|
95
|
+
var hasMenu = isAdvanceMode(Children, [DropdownMenu.Menu.displayName]);
|
|
96
|
+
var ariaControls = hasMenu ? "igc-".concat(uid, "-list") : "igc-".concat(uid, "-popper");
|
|
97
|
+
return _objectSpread(_objectSpread({}, _get(_getPrototypeOf(DropdownMenuRoot.prototype), "getTriggerProps", this).call(this)), {}, {
|
|
98
|
+
onKeyDown: callAllEventHandlers(this.handlePreventCommonKeyDown.bind(this), this.handleOpenKeyDown.bind(this), this.handleKeyDownForMenu('trigger')),
|
|
99
|
+
'aria-controls': visible ? ariaControls : undefined,
|
|
100
|
+
'aria-haspopup': hasMenu ? 'true' : 'dialog'
|
|
101
|
+
});
|
|
284
102
|
}
|
|
285
103
|
}, {
|
|
286
104
|
key: "getListProps",
|
|
287
105
|
value: function getListProps() {
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
uid = _this$asProps3.uid;
|
|
292
|
-
var triggerId = (_this$triggerRef$curr2 = this.triggerRef.current) === null || _this$triggerRef$curr2 === void 0 ? void 0 : _this$triggerRef$curr2.id;
|
|
293
|
-
return {
|
|
294
|
-
size: size,
|
|
295
|
-
index: this.asProps.highlightedIndex,
|
|
296
|
-
tabIndex: -1,
|
|
297
|
-
onKeyDown: this.bindHandlerKeyDown('list'),
|
|
298
|
-
ref: this.menuRef,
|
|
299
|
-
id: "igc-".concat(uid, "-list"),
|
|
300
|
-
role: 'menu',
|
|
301
|
-
'aria-labelledby': triggerId
|
|
302
|
-
};
|
|
303
|
-
}
|
|
304
|
-
}, {
|
|
305
|
-
key: "getActionsProps",
|
|
306
|
-
value: function getActionsProps() {
|
|
307
|
-
return this.getListProps();
|
|
106
|
+
return _objectSpread(_objectSpread({}, _get(_getPrototypeOf(DropdownMenuRoot.prototype), "getListProps", this).call(this)), {}, {
|
|
107
|
+
onKeyDown: callAllEventHandlers(this.handlePreventCommonKeyDown.bind(this), this.handleKeyDownForMenu('list'), this.handleArrowKeyDown.bind(this))
|
|
108
|
+
});
|
|
308
109
|
}
|
|
309
110
|
}, {
|
|
310
111
|
key: "getPopperProps",
|
|
311
112
|
value: function getPopperProps() {
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
highlightedIndex = _this$asProps4.highlightedIndex;
|
|
318
|
-
return {
|
|
319
|
-
ref: this.popperRef,
|
|
320
|
-
tabIndex: -1,
|
|
321
|
-
id: "igc-".concat(uid, "-popper"),
|
|
322
|
-
disablePortal: disablePortal,
|
|
323
|
-
ignorePortalsStacking: ignorePortalsStacking,
|
|
324
|
-
focusMaster: interaction === 'click',
|
|
325
|
-
hideFocus: highlightedIndex !== null,
|
|
326
|
-
'use:role': null,
|
|
327
|
-
'use:autoFocus': false
|
|
328
|
-
};
|
|
113
|
+
return _objectSpread(_objectSpread({}, _get(_getPrototypeOf(DropdownMenuRoot.prototype), "getPopperProps", this).call(this)), {}, {
|
|
114
|
+
onKeyDown: callAllEventHandlers(this.handlePreventCommonKeyDown.bind(this), this.handlePreventPopperKeyDown.bind(this)
|
|
115
|
+
// this.handleKeyDownForPopper.bind(this),
|
|
116
|
+
)
|
|
117
|
+
});
|
|
329
118
|
}
|
|
330
119
|
}, {
|
|
331
|
-
key: "
|
|
332
|
-
value: function
|
|
333
|
-
|
|
334
|
-
return {
|
|
335
|
-
size: size
|
|
336
|
-
};
|
|
120
|
+
key: "getActionsProps",
|
|
121
|
+
value: function getActionsProps() {
|
|
122
|
+
return this.getListProps();
|
|
337
123
|
}
|
|
338
124
|
}, {
|
|
339
125
|
key: "getItemProps",
|
|
340
126
|
value: function getItemProps(props, index) {
|
|
341
|
-
var
|
|
342
|
-
var
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
}
|
|
349
|
-
if (node === document.activeElement) {
|
|
350
|
-
_this3.scrollToNode(node);
|
|
351
|
-
}
|
|
352
|
-
};
|
|
353
|
-
this.itemProps[index] = props;
|
|
354
|
-
var itemProps = {
|
|
355
|
-
id: "igc-".concat(uid, "-option-").concat(index),
|
|
356
|
-
size: size,
|
|
357
|
-
ref: ref,
|
|
358
|
-
index: index,
|
|
359
|
-
onMouseEnter: function onMouseEnter() {
|
|
360
|
-
return _this3.handlers.selectedIndex(index);
|
|
127
|
+
var _this2 = this;
|
|
128
|
+
var highlightedIndex = this.asProps.highlightedIndex;
|
|
129
|
+
var isHighlighted = index === highlightedIndex;
|
|
130
|
+
var itemProps = _objectSpread(_objectSpread({}, _get(_getPrototypeOf(DropdownMenuRoot.prototype), "getItemProps", this).call(this, props, index)), {}, {
|
|
131
|
+
tabIndex: isHighlighted ? 0 : -1,
|
|
132
|
+
ref: function ref(node) {
|
|
133
|
+
return _this2.itemRef(props, index, node);
|
|
361
134
|
}
|
|
362
|
-
};
|
|
135
|
+
});
|
|
363
136
|
if (props.tag === ButtonComponent) {
|
|
364
137
|
var _props$use, _props$theme, _props$size;
|
|
365
138
|
itemProps.use = (_props$use = props.use) !== null && _props$use !== void 0 ? _props$use : 'tertiary';
|
|
@@ -369,44 +142,50 @@ var DropdownMenuRoot = /*#__PURE__*/function (_Component) {
|
|
|
369
142
|
return itemProps;
|
|
370
143
|
}
|
|
371
144
|
}, {
|
|
372
|
-
key: "
|
|
373
|
-
value: function
|
|
374
|
-
var
|
|
375
|
-
return {
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
145
|
+
key: "handleKeyDownForMenu",
|
|
146
|
+
value: function handleKeyDownForMenu(place) {
|
|
147
|
+
var _this3 = this;
|
|
148
|
+
return function (e) {
|
|
149
|
+
var _this3$asProps = _this3.asProps,
|
|
150
|
+
visible = _this3$asProps.visible,
|
|
151
|
+
placement = _this3$asProps.placement,
|
|
152
|
+
inlineActions = _this3$asProps.inlineActions;
|
|
153
|
+
var show = e.key === 'ArrowRight' && (placement === null || placement === void 0 ? void 0 : placement.startsWith('right')) || e.key === 'ArrowLeft' && (placement === null || placement === void 0 ? void 0 : placement.startsWith('left'));
|
|
154
|
+
var hide = e.key === 'ArrowLeft' && (placement === null || placement === void 0 ? void 0 : placement.startsWith('right')) || e.key === 'ArrowRight' && (placement === null || placement === void 0 ? void 0 : placement.startsWith('left')) || e.key === 'Escape';
|
|
155
|
+
var isMenuItem = e.target.getAttribute('role') === _get(_getPrototypeOf(DropdownMenuRoot.prototype), "childRole", _this3);
|
|
156
|
+
if (place === 'trigger' && (!visible || inlineActions) && show && isMenuItem) {
|
|
157
|
+
_this3.handlers.visible(true);
|
|
158
|
+
_this3.handlers.highlightedIndex(0);
|
|
159
|
+
setTimeout(function () {
|
|
160
|
+
var _this3$itemRefs$highl;
|
|
161
|
+
var highlightedIndex = _this3.asProps.highlightedIndex;
|
|
162
|
+
(_this3$itemRefs$highl = _this3.itemRefs[highlightedIndex]) === null || _this3$itemRefs$highl === void 0 ? void 0 : _this3$itemRefs$highl.focus();
|
|
163
|
+
}, 0);
|
|
164
|
+
e.preventDefault();
|
|
165
|
+
e.stopPropagation();
|
|
166
|
+
return false;
|
|
167
|
+
}
|
|
168
|
+
if (place === 'list' && visible && hide && isMenuItem) {
|
|
169
|
+
if (!inlineActions || inlineActions && (e.key === 'Escape' || _this3.asProps.highlightedIndex === 0)) {
|
|
170
|
+
var _this3$triggerRef$cur;
|
|
171
|
+
_this3.handlers.visible(false);
|
|
172
|
+
(_this3$triggerRef$cur = _this3.triggerRef.current) === null || _this3$triggerRef$cur === void 0 ? void 0 : _this3$triggerRef$cur.focus();
|
|
173
|
+
e.preventDefault();
|
|
174
|
+
e.stopPropagation();
|
|
175
|
+
return false;
|
|
397
176
|
}
|
|
398
177
|
}
|
|
399
|
-
}
|
|
178
|
+
};
|
|
400
179
|
}
|
|
401
180
|
}, {
|
|
402
181
|
key: "render",
|
|
403
182
|
value: function render() {
|
|
404
183
|
var _ref = this.asProps;
|
|
405
|
-
var _this$
|
|
406
|
-
Children = _this$
|
|
407
|
-
selectedIndex = _this$
|
|
408
|
-
interaction = _this$
|
|
409
|
-
timeout = _this$
|
|
184
|
+
var _this$asProps2 = this.asProps,
|
|
185
|
+
Children = _this$asProps2.Children,
|
|
186
|
+
selectedIndex = _this$asProps2.selectedIndex,
|
|
187
|
+
interaction = _this$asProps2.interaction,
|
|
188
|
+
timeout = _this$asProps2.timeout;
|
|
410
189
|
this.itemProps = [];
|
|
411
190
|
return /*#__PURE__*/React.createElement(selectedIndexContext.Provider, {
|
|
412
191
|
value: selectedIndex
|
|
@@ -416,10 +195,10 @@ var DropdownMenuRoot = /*#__PURE__*/function (_Component) {
|
|
|
416
195
|
}
|
|
417
196
|
}]);
|
|
418
197
|
return DropdownMenuRoot;
|
|
419
|
-
}(
|
|
198
|
+
}(AbstractDropdown);
|
|
420
199
|
_defineProperty(DropdownMenuRoot, "displayName", 'DropdownMenu');
|
|
421
200
|
_defineProperty(DropdownMenuRoot, "style", style);
|
|
422
|
-
_defineProperty(DropdownMenuRoot, "enhance",
|
|
201
|
+
_defineProperty(DropdownMenuRoot, "enhance", Object.values(enhance));
|
|
423
202
|
_defineProperty(DropdownMenuRoot, "defaultProps", {
|
|
424
203
|
size: 'm',
|
|
425
204
|
defaultVisible: false,
|
|
@@ -432,28 +211,28 @@ _defineProperty(DropdownMenuRoot, "defaultProps", {
|
|
|
432
211
|
placement: 'bottom-start',
|
|
433
212
|
timeout: 0
|
|
434
213
|
});
|
|
435
|
-
function List(
|
|
214
|
+
function List(_ref21) {
|
|
436
215
|
var _ref2 = arguments[0],
|
|
437
|
-
|
|
438
|
-
var styles =
|
|
439
|
-
Children =
|
|
216
|
+
_ref13;
|
|
217
|
+
var styles = _ref21.styles,
|
|
218
|
+
Children = _ref21.Children;
|
|
440
219
|
var SDropdownMenuList = ScrollAreaComponent;
|
|
441
|
-
return
|
|
220
|
+
return _ref13 = sstyled(styles), /*#__PURE__*/React.createElement(ListBoxContextProvider, _ref13.cn("ListBoxContextProvider", {}), /*#__PURE__*/React.createElement(SDropdownMenuList, _ref13.cn("SDropdownMenuList", _objectSpread({}, _assignProps2({
|
|
442
221
|
"shadow": true
|
|
443
222
|
}, _ref2))), /*#__PURE__*/React.createElement(ScrollAreaComponent.Container, {
|
|
444
223
|
tabIndex: undefined
|
|
445
|
-
}, /*#__PURE__*/React.createElement(Children,
|
|
224
|
+
}, /*#__PURE__*/React.createElement(Children, _ref13.cn("Children", {}))), /*#__PURE__*/React.createElement(ScrollAreaComponent.Bar, {
|
|
446
225
|
orientation: "horizontal"
|
|
447
226
|
}), /*#__PURE__*/React.createElement(ScrollAreaComponent.Bar, {
|
|
448
227
|
orientation: "vertical"
|
|
449
228
|
})));
|
|
450
229
|
}
|
|
451
|
-
function Actions(
|
|
230
|
+
function Actions(_ref22) {
|
|
452
231
|
var _ref3 = arguments[0],
|
|
453
|
-
|
|
454
|
-
var styles =
|
|
232
|
+
_ref14;
|
|
233
|
+
var styles = _ref22.styles;
|
|
455
234
|
var SDropdownMenuActions = Flex;
|
|
456
|
-
return
|
|
235
|
+
return _ref14 = sstyled(styles), /*#__PURE__*/React.createElement(SDropdownMenuActions, _ref14.cn("SDropdownMenuActions", _objectSpread({}, _assignProps3({}, _ref3))));
|
|
457
236
|
}
|
|
458
237
|
function Menu(props) {
|
|
459
238
|
var _ref4 = arguments[0];
|
|
@@ -473,17 +252,20 @@ function Menu(props) {
|
|
|
473
252
|
autoFocus: autoFocus,
|
|
474
253
|
animationsDisabled: animationsDisabled
|
|
475
254
|
};
|
|
476
|
-
return /*#__PURE__*/React.createElement(ListBoxContextProvider, null, /*#__PURE__*/React.createElement(DropdownMenu.Popper,
|
|
255
|
+
return /*#__PURE__*/React.createElement(ListBoxContextProvider, null, /*#__PURE__*/React.createElement(DropdownMenu.Popper, _extends({}, popperProps, {
|
|
256
|
+
role: null
|
|
257
|
+
}), /*#__PURE__*/React.createElement(DropdownMenu.List, _assignProps4({}, _ref4))));
|
|
477
258
|
}
|
|
478
|
-
function Item(
|
|
259
|
+
function Item(_ref23) {
|
|
479
260
|
var _ref5 = arguments[0],
|
|
480
|
-
|
|
481
|
-
var id =
|
|
482
|
-
styles =
|
|
483
|
-
disabled =
|
|
484
|
-
Children =
|
|
485
|
-
forwardRef =
|
|
486
|
-
|
|
261
|
+
_ref15;
|
|
262
|
+
var id = _ref23.id,
|
|
263
|
+
styles = _ref23.styles,
|
|
264
|
+
disabled = _ref23.disabled,
|
|
265
|
+
Children = _ref23.Children,
|
|
266
|
+
forwardRef = _ref23.forwardRef,
|
|
267
|
+
role = _ref23.role;
|
|
268
|
+
var SDropdownMenuItemContainer = Dropdown.Item;
|
|
487
269
|
var itemRef = React.useRef();
|
|
488
270
|
var _React$useState = React.useState(false),
|
|
489
271
|
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
@@ -491,7 +273,8 @@ function Item(_ref25) {
|
|
|
491
273
|
setHighlighted = _React$useState2[1];
|
|
492
274
|
var menuItemContextValue = {
|
|
493
275
|
contentId: id,
|
|
494
|
-
ref: forkRef(forwardRef, itemRef)
|
|
276
|
+
ref: forkRef(forwardRef, itemRef),
|
|
277
|
+
role: role
|
|
495
278
|
};
|
|
496
279
|
var ariaDescribes = [];
|
|
497
280
|
var hasSubMenu = isAdvanceMode(Children, [DropdownMenu.displayName], true);
|
|
@@ -536,15 +319,15 @@ function Item(_ref25) {
|
|
|
536
319
|
};
|
|
537
320
|
}, [itemRef.current]);
|
|
538
321
|
var focusSourceRef = useFocusSource();
|
|
539
|
-
return
|
|
322
|
+
return _ref15 = sstyled(styles), /*#__PURE__*/React.createElement(menuItemContext.Provider, {
|
|
540
323
|
value: menuItemContextValue
|
|
541
|
-
}, /*#__PURE__*/React.createElement(SDropdownMenuItemContainer,
|
|
324
|
+
}, /*#__PURE__*/React.createElement(SDropdownMenuItemContainer, _ref15.cn("SDropdownMenuItemContainer", _objectSpread({}, _assignProps5({
|
|
542
325
|
"ref": advancedMode ? undefined : menuItemContextValue.ref,
|
|
543
326
|
"use:highlighted": !disabled && highlighted && focusSourceRef.current === 'keyboard',
|
|
544
|
-
"role": advancedMode ? undefined :
|
|
327
|
+
"use:role": advancedMode ? undefined : role,
|
|
545
328
|
"use:id": advancedMode ? undefined : id,
|
|
546
329
|
"tabIndex": advancedMode ? undefined : -1
|
|
547
|
-
}, _ref5))), /*#__PURE__*/React.createElement(Children,
|
|
330
|
+
}, _ref5))), /*#__PURE__*/React.createElement(Children, _ref15.cn("Children", {}))));
|
|
548
331
|
}
|
|
549
332
|
function Addon(props) {
|
|
550
333
|
var _useBox = useBox(props, props.forwardRef),
|
|
@@ -560,47 +343,12 @@ function Addon(props) {
|
|
|
560
343
|
}
|
|
561
344
|
function Trigger() {
|
|
562
345
|
var _ref6 = arguments[0];
|
|
563
|
-
return /*#__PURE__*/React.createElement(Dropdown.Trigger, _assignProps6({
|
|
564
|
-
"aria-haspopup": 'true'
|
|
565
|
-
}, _ref6));
|
|
346
|
+
return /*#__PURE__*/React.createElement(Dropdown.Trigger, _assignProps6({}, _ref6));
|
|
566
347
|
}
|
|
567
|
-
function
|
|
348
|
+
function ItemContent(_ref24) {
|
|
568
349
|
var _ref7 = arguments[0],
|
|
569
|
-
|
|
570
|
-
var styles =
|
|
571
|
-
title = _ref26.title,
|
|
572
|
-
Children = _ref26.Children,
|
|
573
|
-
subTitle = _ref26.subTitle,
|
|
574
|
-
size = _ref26.size;
|
|
575
|
-
var SGroup = Box;
|
|
576
|
-
var SDropdownMenuItemContainer = Box;
|
|
577
|
-
var SGroupTitle = Flex;
|
|
578
|
-
var SGroupHint = Flex;
|
|
579
|
-
var uidTitle = useUID('title_mi_group');
|
|
580
|
-
var uidSubTitle = useUID('sub_title_mi_group');
|
|
581
|
-
var groupAriaProps = {
|
|
582
|
-
'aria-labelledby': uidTitle,
|
|
583
|
-
'aria-describedby': subTitle ? uidSubTitle : undefined
|
|
584
|
-
};
|
|
585
|
-
return _ref17 = sstyled(styles), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SDropdownMenuItemContainer, _ref17.cn("SDropdownMenuItemContainer", {
|
|
586
|
-
"notInteractive": true,
|
|
587
|
-
"aria-hidden": 'true',
|
|
588
|
-
"tabindex": -1,
|
|
589
|
-
"size": size
|
|
590
|
-
}), /*#__PURE__*/React.createElement(SGroupTitle, _ref17.cn("SGroupTitle", {
|
|
591
|
-
"id": uidTitle
|
|
592
|
-
}), title), subTitle && /*#__PURE__*/React.createElement(SGroupHint, _ref17.cn("SGroupHint", {
|
|
593
|
-
"id": uidSubTitle
|
|
594
|
-
}), subTitle)), /*#__PURE__*/React.createElement(SGroup, _ref17.cn("SGroup", _objectSpread({}, _assignProps7(_objectSpread(_objectSpread({
|
|
595
|
-
"role": 'group'
|
|
596
|
-
}, groupAriaProps), {}, {
|
|
597
|
-
"__excludeProps": ['title']
|
|
598
|
-
}), _ref7))), /*#__PURE__*/React.createElement(Children, _ref17.cn("Children", {}))));
|
|
599
|
-
}
|
|
600
|
-
function ItemContent(_ref27) {
|
|
601
|
-
var _ref8 = arguments[0],
|
|
602
|
-
_ref18;
|
|
603
|
-
var styles = _ref27.styles;
|
|
350
|
+
_ref16;
|
|
351
|
+
var styles = _ref24.styles;
|
|
604
352
|
var SItemContent = Flex;
|
|
605
353
|
var ref = React.useRef();
|
|
606
354
|
var menuItemCtxValue = React.useContext(menuItemContext);
|
|
@@ -622,8 +370,8 @@ function ItemContent(_ref27) {
|
|
|
622
370
|
});
|
|
623
371
|
}
|
|
624
372
|
}, [menuItemCtxValue.ariaDescribes]);
|
|
625
|
-
return
|
|
626
|
-
"role":
|
|
373
|
+
return _ref16 = sstyled(styles), /*#__PURE__*/React.createElement(SItemContent, _ref16.cn("SItemContent", _objectSpread({}, _assignProps7({
|
|
374
|
+
"role": menuItemCtxValue.role,
|
|
627
375
|
"id": menuItemCtxValue.contentId,
|
|
628
376
|
"tabIndex": -1,
|
|
629
377
|
"ref": forkRef(menuItemCtxValue.ref, ref),
|
|
@@ -632,66 +380,66 @@ function ItemContent(_ref27) {
|
|
|
632
380
|
"aria-expanded": subMenu,
|
|
633
381
|
"alignItems": menuItemCtxValue.hasSubMenu ? 'center' : undefined,
|
|
634
382
|
"justifyContent": menuItemCtxValue.hasSubMenu ? 'space-between' : undefined
|
|
635
|
-
},
|
|
383
|
+
}, _ref7))));
|
|
636
384
|
}
|
|
637
|
-
function ItemHint(
|
|
638
|
-
var
|
|
639
|
-
|
|
640
|
-
var styles =
|
|
385
|
+
function ItemHint(_ref25) {
|
|
386
|
+
var _ref8 = arguments[0],
|
|
387
|
+
_ref17;
|
|
388
|
+
var styles = _ref25.styles;
|
|
641
389
|
var SItemHint = Flex;
|
|
642
390
|
var _React$useContext = React.useContext(menuItemContext),
|
|
643
391
|
hintId = _React$useContext.hintId;
|
|
644
|
-
return
|
|
392
|
+
return _ref17 = sstyled(styles), /*#__PURE__*/React.createElement(SItemHint, _ref17.cn("SItemHint", _objectSpread({}, _assignProps8({
|
|
645
393
|
"id": hintId,
|
|
646
394
|
"aria-hidden": 'true'
|
|
647
|
-
},
|
|
395
|
+
}, _ref8))));
|
|
648
396
|
}
|
|
649
397
|
|
|
650
398
|
/**
|
|
651
399
|
* @deprecated Use Item hint
|
|
652
400
|
*/
|
|
653
401
|
function Hint(props) {
|
|
654
|
-
var
|
|
655
|
-
|
|
656
|
-
var SDropdownMenuItemContainer =
|
|
657
|
-
return
|
|
402
|
+
var _ref9 = arguments[0],
|
|
403
|
+
_ref18;
|
|
404
|
+
var SDropdownMenuItemContainer = Dropdown.Item;
|
|
405
|
+
return _ref18 = sstyled(props.styles), /*#__PURE__*/React.createElement(SDropdownMenuItemContainer, _ref18.cn("SDropdownMenuItemContainer", _objectSpread({}, _assignProps9({
|
|
658
406
|
"variant": 'hint'
|
|
659
|
-
},
|
|
407
|
+
}, _ref9))));
|
|
660
408
|
}
|
|
661
409
|
/**
|
|
662
410
|
* @deprecated Use Group with title prop
|
|
663
411
|
*/
|
|
664
412
|
function Title(props) {
|
|
665
|
-
var
|
|
666
|
-
|
|
667
|
-
var SDropdownMenuItemContainer =
|
|
668
|
-
return
|
|
413
|
+
var _ref10 = arguments[0],
|
|
414
|
+
_ref19;
|
|
415
|
+
var SDropdownMenuItemContainer = Dropdown.Item;
|
|
416
|
+
return _ref19 = sstyled(props.styles), /*#__PURE__*/React.createElement(SDropdownMenuItemContainer, _ref19.cn("SDropdownMenuItemContainer", _objectSpread({}, _assignProps10({
|
|
669
417
|
"variant": 'title'
|
|
670
|
-
},
|
|
418
|
+
}, _ref10))));
|
|
671
419
|
}
|
|
672
420
|
|
|
673
421
|
/**
|
|
674
422
|
* @deprecated
|
|
675
423
|
*/
|
|
676
|
-
function Nesting(
|
|
677
|
-
var
|
|
678
|
-
var forwardRef =
|
|
679
|
-
return /*#__PURE__*/React.createElement(DropdownMenu.Item,
|
|
424
|
+
function Nesting(_ref26) {
|
|
425
|
+
var _ref11 = arguments[0];
|
|
426
|
+
var forwardRef = _ref26.forwardRef;
|
|
427
|
+
return /*#__PURE__*/React.createElement(DropdownMenu.Item, _assignProps11({
|
|
680
428
|
"ref": forwardRef
|
|
681
|
-
},
|
|
429
|
+
}, _ref11));
|
|
682
430
|
}
|
|
683
431
|
|
|
684
432
|
/**
|
|
685
433
|
* @deprecated
|
|
686
434
|
*/
|
|
687
|
-
function NestingTrigger(
|
|
688
|
-
var
|
|
689
|
-
var forwardRef =
|
|
690
|
-
return /*#__PURE__*/React.createElement(DropdownMenu.Item.Content,
|
|
435
|
+
function NestingTrigger(_ref27) {
|
|
436
|
+
var _ref12 = arguments[0];
|
|
437
|
+
var forwardRef = _ref27.forwardRef;
|
|
438
|
+
return /*#__PURE__*/React.createElement(DropdownMenu.Item.Content, _assignProps12({
|
|
691
439
|
"tag": DropdownMenu.Trigger,
|
|
692
440
|
"ref": forwardRef,
|
|
693
441
|
"use:role": 'menuitem'
|
|
694
|
-
},
|
|
442
|
+
}, _ref12));
|
|
695
443
|
}
|
|
696
444
|
var DropdownMenu = createComponent(DropdownMenuRoot, {
|
|
697
445
|
Trigger: Trigger,
|
|
@@ -713,7 +461,7 @@ var DropdownMenu = createComponent(DropdownMenuRoot, {
|
|
|
713
461
|
}],
|
|
714
462
|
ItemTitle: Title,
|
|
715
463
|
ItemHint: Hint,
|
|
716
|
-
Group: Group
|
|
464
|
+
Group: Dropdown.Group
|
|
717
465
|
}, {
|
|
718
466
|
parent: [Dropdown]
|
|
719
467
|
});
|