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