@semcore/dropdown-menu 4.35.5 → 4.38.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 +20 -0
- package/lib/cjs/DropdownMenu.js +449 -413
- package/lib/cjs/DropdownMenu.js.map +1 -1
- package/lib/cjs/DropdownMenuOld.js +682 -0
- package/lib/cjs/DropdownMenuOld.js.map +1 -0
- package/lib/cjs/index.d.js.map +1 -1
- package/lib/cjs/index.js +7 -0
- package/lib/cjs/index.js.map +1 -1
- package/lib/cjs/style/dropdown-menu-old.shadow.css +224 -0
- package/lib/cjs/style/dropdown-menu.shadow.css +24 -14
- package/lib/es6/DropdownMenu.js +453 -414
- package/lib/es6/DropdownMenu.js.map +1 -1
- package/lib/es6/DropdownMenuOld.js +683 -0
- package/lib/es6/DropdownMenuOld.js.map +1 -0
- package/lib/es6/index.d.js.map +1 -1
- package/lib/es6/index.js +1 -0
- package/lib/es6/index.js.map +1 -1
- package/lib/es6/style/dropdown-menu-old.shadow.css +224 -0
- package/lib/es6/style/dropdown-menu.shadow.css +24 -14
- package/lib/types/index.d.ts +43 -1
- package/package.json +7 -6
package/lib/es6/DropdownMenu.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
1
2
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
3
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
4
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
@@ -9,6 +10,9 @@ import _inherits from "@babel/runtime/helpers/inherits";
|
|
|
9
10
|
import _createSuper from "@babel/runtime/helpers/createSuper";
|
|
10
11
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
11
12
|
import { sstyled as _sstyled } from "@semcore/utils/lib/core/index";
|
|
13
|
+
import { assignProps as _assignProps13 } from "@semcore/core";
|
|
14
|
+
import { assignProps as _assignProps12 } from "@semcore/core";
|
|
15
|
+
import { assignProps as _assignProps11 } from "@semcore/core";
|
|
12
16
|
import { assignProps as _assignProps10 } from "@semcore/core";
|
|
13
17
|
import { assignProps as _assignProps9 } from "@semcore/core";
|
|
14
18
|
import { assignProps as _assignProps8 } from "@semcore/core";
|
|
@@ -24,46 +28,53 @@ import React from 'react';
|
|
|
24
28
|
import cn from 'classnames';
|
|
25
29
|
import createComponent, { Component, sstyled, Root } from '@semcore/core';
|
|
26
30
|
import Dropdown from '@semcore/dropdown';
|
|
27
|
-
import { Flex, useBox } from '@semcore/flex-box';
|
|
31
|
+
import { Flex, useBox, Box } from '@semcore/flex-box';
|
|
28
32
|
import ScrollAreaComponent, { hideScrollBarsFromScreenReadersContext } from '@semcore/scroll-area';
|
|
29
|
-
import uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';
|
|
33
|
+
import uniqueIDEnhancement, { useUID } from '@semcore/utils/lib/uniqueID';
|
|
30
34
|
import i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';
|
|
31
35
|
import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
|
|
32
|
-
import { useFocusLock } from '@semcore/utils/lib/use/useFocusLock';
|
|
33
|
-
import { hasParent } from '@semcore/utils/lib/hasParent';
|
|
34
36
|
/*__reshadow-styles__:"./style/dropdown-menu.shadow.css"*/
|
|
35
|
-
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".
|
|
36
|
-
"
|
|
37
|
-
"_highlighted": "
|
|
38
|
-
"_disabled": "
|
|
39
|
-
"_size_l": "
|
|
40
|
-
"_size_m": "
|
|
41
|
-
"_visible": "
|
|
42
|
-
"_nesting-trigger": "__nesting-
|
|
43
|
-
"__SDropdownMenuNesting": "
|
|
44
|
-
"__SDropdownNestingItem": "
|
|
45
|
-
"
|
|
46
|
-
"
|
|
47
|
-
"
|
|
48
|
-
"
|
|
49
|
-
"
|
|
50
|
-
"
|
|
51
|
-
"
|
|
52
|
-
"
|
|
53
|
-
"
|
|
54
|
-
"
|
|
55
|
-
"
|
|
37
|
+
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SDropdownMenuList_zxmau_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_zxmau_gg_ .___SShadowHorizontal_zxmau_gg_:after,.___SDropdownMenuList_zxmau_gg_ .___SShadowHorizontal_zxmau_gg_:before{width:16px;height:100%;border-radius:var(--intergalactic-control-rounded, 6px)}.___SDropdownMenuList_zxmau_gg_ .___SShadowHorizontal_zxmau_gg_._position_median_zxmau_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_zxmau_gg_ .___SShadowHorizontal_zxmau_gg_._position_median_zxmau_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_zxmau_gg_ .___SShadowHorizontal_zxmau_gg_._position_start_zxmau_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_zxmau_gg_ .___SShadowHorizontal_zxmau_gg_._position_end_zxmau_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_zxmau_gg_ .___SShadowVertical_zxmau_gg_:after,.___SDropdownMenuList_zxmau_gg_ .___SShadowVertical_zxmau_gg_:before{width:100%;height:16px;border-radius:var(--intergalactic-control-rounded, 6px)}.___SDropdownMenuList_zxmau_gg_ .___SShadowVertical_zxmau_gg_._position_median_zxmau_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_zxmau_gg_ .___SShadowVertical_zxmau_gg_._position_median_zxmau_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_zxmau_gg_ .___SShadowVertical_zxmau_gg_._position_start_zxmau_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_zxmau_gg_ .___SShadowVertical_zxmau_gg_._position_end_zxmau_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_zxmau_gg_{position:relative;-webkit-text-decoration:none;text-decoration:none;box-sizing:border-box;cursor:pointer;width:100%;text-align:left;line-height:normal;color:var(--intergalactic-text-primary, #191b23)}@media (hover:hover){.___SDropdownMenuItemContainer_zxmau_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-hover, #f4f5f9)}}.___SDropdownMenuItemContainer_zxmau_gg_:focus{outline:0}.___SDropdownMenuItemContainer_zxmau_gg_.__selected_zxmau_gg_{background-color:var(--intergalactic-dropdown-menu-item-selected, rgba(196, 229, 254, 0.7));box-shadow:2px 0 0 0 var(--intergalactic-control-primary-info, #008ff8) inset}@media (hover:hover){.___SDropdownMenuItemContainer_zxmau_gg_.__selected_zxmau_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-selected-hover, #c4e5fe)}}.___SDropdownMenuItemContainer_zxmau_gg_.__highlighted_zxmau_gg_{z-index:1;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5)) inset}.___SDropdownMenuItemContainer_zxmau_gg_.__disabled_zxmau_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SDropdownMenuItemContainer_zxmau_gg_._size_l_zxmau_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%);padding:var(--intergalactic-spacing-2x, 8px) var(--intergalactic-spacing-3x, 12px);min-height:40px}.___SDropdownMenuItemContainer_zxmau_gg_._size_m_zxmau_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);padding:calc(var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px)) var(--intergalactic-spacing-2x, 8px);min-height:32px}.___SDropdownMenuItemContainer_zxmau_gg_.__notInteractive_zxmau_gg_{cursor:default}@media (hover:hover){.___SDropdownMenuItemContainer_zxmau_gg_.__notInteractive_zxmau_gg_:hover{background:0 0}}.___SDropdownMenuItemContainer_zxmau_gg_._variant_hint_zxmau_gg_{color:var(--intergalactic-text-secondary, #6c6e79);cursor:default}@media (hover:hover){.___SDropdownMenuItemContainer_zxmau_gg_._variant_hint_zxmau_gg_:hover{background:0 0}}.___SDropdownMenuItemContainer_zxmau_gg_._variant_title_zxmau_gg_{font-weight:var(--intergalactic-bold, 700);cursor:default}@media (hover:hover){.___SDropdownMenuItemContainer_zxmau_gg_._variant_title_zxmau_gg_:hover{background:0 0}}.___SDropdownMenuItemContainer_zxmau_gg_.__visible_zxmau_gg_{background-color:var(--intergalactic-dropdown-menu-item-hover, #f4f5f9)}.___SDropdownMenuItemContainer_zxmau_gg_.__nesting-trigger_zxmau_gg_{justify-content:space-between}.___SDropdownMenuItemAddon_zxmau_gg_{display:inline-flex;margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SDropdownMenuItemAddon_zxmau_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_zxmau_gg_:last-child{margin-right:0}.___SDropdownMenuNesting_zxmau_gg_,.___SDropdownMenuNesting_zxmau_gg_._size_l_zxmau_gg_,.___SDropdownMenuNesting_zxmau_gg_._size_m_zxmau_gg_{padding:0}.___SDropdownMenuNesting_zxmau_gg_.__highlighted_zxmau_gg_{z-index:1;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5)) inset}.___SDropdownNestingItem_zxmau_gg_._size_l_zxmau_gg_,.___SDropdownNestingItem_zxmau_gg_._size_m_zxmau_gg_{padding-right:0}.___SDropdownNestingItem_zxmau_gg_ .___SDropdownMenuItemContainer_zxmau_gg_{width:auto;padding-top:0;padding-bottom:0;padding-left:0;min-height:auto}.___SGroupTitle_zxmau_gg_{font-weight:var(--intergalactic-bold, 700)}.___SGroupHint_zxmau_gg_,.___SItemHint_zxmau_gg_{color:var(--intergalactic-text-secondary, #6c6e79)}.___SItemContent_zxmau_gg_:focus{outline:0}" /*__inner_css_end__*/, "zxmau_gg_") /*__reshadow_css_end__*/, {
|
|
38
|
+
"__SDropdownMenuItemContainer": "___SDropdownMenuItemContainer_zxmau_gg_",
|
|
39
|
+
"_highlighted": "__highlighted_zxmau_gg_",
|
|
40
|
+
"_disabled": "__disabled_zxmau_gg_",
|
|
41
|
+
"_size_l": "_size_l_zxmau_gg_",
|
|
42
|
+
"_size_m": "_size_m_zxmau_gg_",
|
|
43
|
+
"_visible": "__visible_zxmau_gg_",
|
|
44
|
+
"_nesting-trigger": "__nesting-trigger_zxmau_gg_",
|
|
45
|
+
"__SDropdownMenuNesting": "___SDropdownMenuNesting_zxmau_gg_",
|
|
46
|
+
"__SDropdownNestingItem": "___SDropdownNestingItem_zxmau_gg_",
|
|
47
|
+
"__SGroupTitle": "___SGroupTitle_zxmau_gg_",
|
|
48
|
+
"__SGroupHint": "___SGroupHint_zxmau_gg_",
|
|
49
|
+
"__SItemHint": "___SItemHint_zxmau_gg_",
|
|
50
|
+
"__SItemContent": "___SItemContent_zxmau_gg_",
|
|
51
|
+
"__SDropdownMenuList": "___SDropdownMenuList_zxmau_gg_",
|
|
52
|
+
"__SShadowHorizontal": "___SShadowHorizontal_zxmau_gg_",
|
|
53
|
+
"_position_median": "_position_median_zxmau_gg_",
|
|
54
|
+
"_position_start": "_position_start_zxmau_gg_",
|
|
55
|
+
"_position_end": "_position_end_zxmau_gg_",
|
|
56
|
+
"__SShadowVertical": "___SShadowVertical_zxmau_gg_",
|
|
57
|
+
"_selected": "__selected_zxmau_gg_",
|
|
58
|
+
"_notInteractive": "__notInteractive_zxmau_gg_",
|
|
59
|
+
"_variant_hint": "_variant_hint_zxmau_gg_",
|
|
60
|
+
"_variant_title": "_variant_title_zxmau_gg_",
|
|
61
|
+
"__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_zxmau_gg_"
|
|
56
62
|
});
|
|
57
63
|
import { setFocus } from '@semcore/utils/lib/focus-lock/setFocus';
|
|
58
64
|
import { isFocusInside } from '@semcore/utils/lib/focus-lock/isFocusInside';
|
|
59
|
-
import {
|
|
60
|
-
import
|
|
61
|
-
|
|
62
|
-
|
|
65
|
+
import { useFocusSource } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
66
|
+
import { isAdvanceMode } from '@semcore/utils/lib/findComponent';
|
|
67
|
+
import ButtonComponent from '@semcore/button';
|
|
68
|
+
import { forkRef } from '@semcore/utils/lib/ref';
|
|
69
|
+
import focusSourceEnhance from '@semcore/utils/lib/enhances/focusSourceEnhance';
|
|
70
|
+
var ListBoxContextProvider = function ListBoxContextProvider(_ref22) {
|
|
71
|
+
var children = _ref22.children;
|
|
63
72
|
return /*#__PURE__*/React.createElement(hideScrollBarsFromScreenReadersContext.Provider, {
|
|
64
73
|
value: true
|
|
65
74
|
}, children);
|
|
66
75
|
};
|
|
76
|
+
var selectedIndexContext = /*#__PURE__*/React.createContext(0);
|
|
77
|
+
var menuItemContext = /*#__PURE__*/React.createContext({});
|
|
67
78
|
var DropdownMenuRoot = /*#__PURE__*/function (_Component) {
|
|
68
79
|
_inherits(DropdownMenuRoot, _Component);
|
|
69
80
|
var _super = _createSuper(DropdownMenuRoot);
|
|
@@ -74,22 +85,20 @@ var DropdownMenuRoot = /*#__PURE__*/function (_Component) {
|
|
|
74
85
|
args[_key] = arguments[_key];
|
|
75
86
|
}
|
|
76
87
|
_this = _super.call.apply(_super, [this].concat(args));
|
|
77
|
-
_defineProperty(_assertThisInitialized(_this), "state", {
|
|
78
|
-
focusLockItemIndex: null,
|
|
79
|
-
keyboardFocused: false
|
|
80
|
-
});
|
|
81
88
|
_defineProperty(_assertThisInitialized(_this), "popperRef", /*#__PURE__*/React.createRef());
|
|
82
89
|
_defineProperty(_assertThisInitialized(_this), "triggerRef", /*#__PURE__*/React.createRef());
|
|
90
|
+
_defineProperty(_assertThisInitialized(_this), "menuRef", /*#__PURE__*/React.createRef());
|
|
83
91
|
_defineProperty(_assertThisInitialized(_this), "itemProps", []);
|
|
84
92
|
_defineProperty(_assertThisInitialized(_this), "itemRefs", []);
|
|
85
93
|
_defineProperty(_assertThisInitialized(_this), "highlightedItemRef", /*#__PURE__*/React.createRef());
|
|
86
|
-
_defineProperty(_assertThisInitialized(_this), "ignoreTriggerKeyboardFocusUntil", 0);
|
|
87
94
|
_defineProperty(_assertThisInitialized(_this), "prevHighlightedIndex", null);
|
|
88
|
-
_defineProperty(_assertThisInitialized(_this), "
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
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);
|
|
93
102
|
});
|
|
94
103
|
_defineProperty(_assertThisInitialized(_this), "bindHandlerKeyDown", function (place) {
|
|
95
104
|
return function (e) {
|
|
@@ -98,189 +107,100 @@ var DropdownMenuRoot = /*#__PURE__*/function (_Component) {
|
|
|
98
107
|
var _this$asProps = _this.asProps,
|
|
99
108
|
visible = _this$asProps.visible,
|
|
100
109
|
highlightedIndex = _this$asProps.highlightedIndex,
|
|
101
|
-
placement = _this$asProps.placement
|
|
110
|
+
placement = _this$asProps.placement,
|
|
111
|
+
inlineActions = _this$asProps.inlineActions;
|
|
102
112
|
if (e.key === ' ' && ['INPUT', 'TEXTAREA'].includes(targetTagName)) return;
|
|
103
113
|
if (e.key === 'Enter' && targetTagName === 'TEXTAREA') return;
|
|
104
114
|
if (place === 'popper' && (e.key === ' ' || e.key === 'Enter') && (targetTagName === 'BUTTON' || targetTagName === 'A')) return;
|
|
105
|
-
if (
|
|
106
|
-
|
|
107
|
-
if (item && getFocusableIn(item).length !== 0) {
|
|
108
|
-
_this.setState({
|
|
109
|
-
focusLockItemIndex: highlightedIndex
|
|
110
|
-
});
|
|
111
|
-
} else {
|
|
112
|
-
_this.handlers.highlightedIndex(null);
|
|
113
|
-
}
|
|
114
|
-
return;
|
|
115
|
+
if (place === 'trigger' && ['ArrowDown', 'ArrowUp', 'Enter', ' '].includes(e.key) && e.target.getAttribute('role') !== 'menuitem') {
|
|
116
|
+
_this.handleClickTrigger(e);
|
|
115
117
|
}
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
return false;
|
|
121
|
-
}
|
|
122
|
-
var verticalPlacement = !placement || placement.startsWith('top') || placement.startsWith('bottom');
|
|
123
|
-
if (['ArrowDown', 'ArrowUp'].includes(e.key) && verticalPlacement) {
|
|
124
|
-
e.preventDefault();
|
|
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) {
|
|
125
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;
|
|
126
131
|
}
|
|
127
|
-
if (
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
var visibleChanged = visible && hide || !visible && show;
|
|
131
|
-
if (show) {
|
|
132
|
-
_this.handlers.visible(true);
|
|
133
|
-
} else if (hide) {
|
|
132
|
+
if (place === 'list' && visible && hide && isMenuItem) {
|
|
133
|
+
if (!inlineActions || inlineActions && (e.key === 'Escape' || _this.asProps.highlightedIndex === 0)) {
|
|
134
|
+
var _this$triggerRef$curr;
|
|
134
135
|
_this.handlers.visible(false);
|
|
135
|
-
|
|
136
|
-
if (visibleChanged) {
|
|
136
|
+
(_this$triggerRef$curr = _this.triggerRef.current) === null || _this$triggerRef$curr === void 0 ? void 0 : _this$triggerRef$curr.focus();
|
|
137
137
|
e.preventDefault();
|
|
138
138
|
e.stopPropagation();
|
|
139
139
|
return;
|
|
140
140
|
}
|
|
141
141
|
}
|
|
142
|
-
if (
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
focusLockItemIndex: highlightedIndex
|
|
156
|
-
});
|
|
157
|
-
}
|
|
158
|
-
var nextFocused = focusable[focusedIndex + 1];
|
|
159
|
-
if (nextFocused) {
|
|
160
|
-
e.preventDefault();
|
|
161
|
-
e.stopPropagation();
|
|
162
|
-
nextFocused.focus();
|
|
163
|
-
}
|
|
164
|
-
} else if (e.key === 'ArrowLeft') {
|
|
165
|
-
if (focusedIndex === 0) {
|
|
166
|
-
_this.setState({
|
|
167
|
-
focusLockItemIndex: null
|
|
168
|
-
});
|
|
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;
|
|
169
155
|
}
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
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;
|
|
175
167
|
}
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
_this.focusTrigger();
|
|
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();
|
|
186
177
|
}
|
|
187
|
-
|
|
188
|
-
e.stopPropagation();
|
|
178
|
+
break;
|
|
189
179
|
}
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
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();
|
|
198
189
|
}
|
|
199
|
-
|
|
200
|
-
e.stopPropagation();
|
|
190
|
+
break;
|
|
201
191
|
}
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
if (_this.highlightedItemRef.current && highlightedIndex !== null) {
|
|
207
|
-
e.stopPropagation();
|
|
208
|
-
e.preventDefault();
|
|
209
|
-
_this.highlightedItemRef.current.click();
|
|
210
|
-
} else {
|
|
211
|
-
if (place === 'trigger') {
|
|
212
|
-
_this.handlers.visible(false);
|
|
192
|
+
case ' ':
|
|
193
|
+
case 'Enter':
|
|
194
|
+
if (_this.highlightedItemRef.current && highlightedIndex !== null) {
|
|
195
|
+
e.stopPropagation();
|
|
213
196
|
e.preventDefault();
|
|
197
|
+
_this.highlightedItemRef.current.click();
|
|
214
198
|
}
|
|
215
|
-
|
|
216
|
-
|
|
199
|
+
break;
|
|
200
|
+
}
|
|
217
201
|
}
|
|
218
202
|
};
|
|
219
203
|
});
|
|
220
|
-
_defineProperty(_assertThisInitialized(_this), "handleTriggerKeyboardFocus", function () {
|
|
221
|
-
if (_this.ignoreTriggerKeyboardFocusUntil > Date.now()) return false;
|
|
222
|
-
});
|
|
223
|
-
_defineProperty(_assertThisInitialized(_this), "handleTriggerKeyboardFocusedStateChange", function (keyboardFocused) {
|
|
224
|
-
_this.setState({
|
|
225
|
-
keyboardFocused: keyboardFocused
|
|
226
|
-
});
|
|
227
|
-
});
|
|
228
|
-
_defineProperty(_assertThisInitialized(_this), "handleItemFocusOut", function (event) {
|
|
229
|
-
if (event.relatedTarget === _this.popperRef.current) return;
|
|
230
|
-
var focused = event.relatedTarget;
|
|
231
|
-
if (hasParent(focused, _this.popperRef.current)) {
|
|
232
|
-
_this.handlers.highlightedIndex(null);
|
|
233
|
-
_this.setState({
|
|
234
|
-
focusLockItemIndex: null
|
|
235
|
-
});
|
|
236
|
-
focused.focus();
|
|
237
|
-
}
|
|
238
|
-
});
|
|
239
|
-
_defineProperty(_assertThisInitialized(_this), "handleNestingClick", function (event) {
|
|
240
|
-
var _focusable$;
|
|
241
|
-
var itemIndex = _this.itemRefs.indexOf(event.currentTarget);
|
|
242
|
-
if (itemIndex === -1) return;
|
|
243
|
-
var focusable = getFocusableIn(event.currentTarget);
|
|
244
|
-
(_focusable$ = focusable[0]) === null || _focusable$ === void 0 ? void 0 : _focusable$.focus();
|
|
245
|
-
if (focusable[0] && _this.state.focusLockItemIndex === null) {
|
|
246
|
-
_this.setState({
|
|
247
|
-
focusLockItemIndex: null
|
|
248
|
-
});
|
|
249
|
-
event.preventDefault();
|
|
250
|
-
event.stopPropagation();
|
|
251
|
-
}
|
|
252
|
-
});
|
|
253
|
-
_defineProperty(_assertThisInitialized(_this), "handleNestingKeyDown", function (event) {
|
|
254
|
-
if (event.key === ' ') {
|
|
255
|
-
_this.handleNestingClick(event);
|
|
256
|
-
}
|
|
257
|
-
});
|
|
258
|
-
_defineProperty(_assertThisInitialized(_this), "getNestingProps", function () {
|
|
259
|
-
var size = _this.asProps.size;
|
|
260
|
-
return {
|
|
261
|
-
size: size,
|
|
262
|
-
onClick: _this.handleNestingClick,
|
|
263
|
-
onKeyDown: _this.handleNestingKeyDown
|
|
264
|
-
};
|
|
265
|
-
});
|
|
266
|
-
_defineProperty(_assertThisInitialized(_this), "handleNestedVisibleChange", function (lastUserInteraction) {
|
|
267
|
-
if (_this.asProps.visible && _this.asProps.highlightedIndex === null && lastUserInteraction === 'keyboard') {
|
|
268
|
-
_this.handlers.highlightedIndex(0);
|
|
269
|
-
}
|
|
270
|
-
});
|
|
271
|
-
_defineProperty(_assertThisInitialized(_this), "getNestingTriggerProps", function () {
|
|
272
|
-
var _this$asProps2 = _this.asProps,
|
|
273
|
-
size = _this$asProps2.size,
|
|
274
|
-
visible = _this$asProps2.visible;
|
|
275
|
-
return {
|
|
276
|
-
size: size,
|
|
277
|
-
visible: visible,
|
|
278
|
-
onNestedVisibleChange: _this.handleNestedVisibleChange
|
|
279
|
-
};
|
|
280
|
-
});
|
|
281
|
-
_defineProperty(_assertThisInitialized(_this), "getNestingItemProps", function () {
|
|
282
|
-
return _this.getNestingTriggerProps();
|
|
283
|
-
});
|
|
284
204
|
_defineProperty(_assertThisInitialized(_this), "scrollToNode", function (node) {
|
|
285
205
|
if (node) {
|
|
286
206
|
_this.highlightedItemRef.current = node;
|
|
@@ -297,64 +217,107 @@ var DropdownMenuRoot = /*#__PURE__*/function (_Component) {
|
|
|
297
217
|
}
|
|
298
218
|
}, 0);
|
|
299
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
|
+
});
|
|
300
251
|
return _this;
|
|
301
252
|
}
|
|
302
253
|
_createClass(DropdownMenuRoot, [{
|
|
303
254
|
key: "uncontrolledProps",
|
|
304
255
|
value: function uncontrolledProps() {
|
|
256
|
+
var _this2 = this;
|
|
305
257
|
return {
|
|
306
|
-
|
|
258
|
+
selectedIndex: null,
|
|
259
|
+
highlightedIndex: [null, function (index) {
|
|
260
|
+
_this2.handlers.selectedIndex(index);
|
|
261
|
+
}],
|
|
307
262
|
visible: null
|
|
308
263
|
};
|
|
309
264
|
}
|
|
310
265
|
}, {
|
|
311
266
|
key: "getTriggerProps",
|
|
312
267
|
value: function getTriggerProps() {
|
|
313
|
-
var _this$
|
|
314
|
-
size = _this$
|
|
315
|
-
uid = _this$
|
|
316
|
-
disablePortal = _this$
|
|
317
|
-
visible = _this$
|
|
318
|
-
getI18nText = _this$
|
|
319
|
-
highlightedIndex = _this$asProps3.highlightedIndex;
|
|
268
|
+
var _this$asProps2 = this.asProps,
|
|
269
|
+
size = _this$asProps2.size,
|
|
270
|
+
uid = _this$asProps2.uid,
|
|
271
|
+
disablePortal = _this$asProps2.disablePortal,
|
|
272
|
+
visible = _this$asProps2.visible,
|
|
273
|
+
getI18nText = _this$asProps2.getI18nText;
|
|
320
274
|
return {
|
|
321
275
|
size: size,
|
|
322
276
|
id: "igc-".concat(uid, "-trigger"),
|
|
323
|
-
'aria-controls': "igc-".concat(uid, "-
|
|
277
|
+
'aria-controls': visible ? "igc-".concat(uid, "-list") : undefined,
|
|
324
278
|
focusHint: visible && !disablePortal ? getI18nText('triggerHint') : undefined,
|
|
325
279
|
'aria-expanded': visible ? 'true' : 'false',
|
|
326
|
-
'aria-activedescendant': visible && highlightedIndex !== null ? "igc-".concat(uid, "-option-").concat(highlightedIndex) : undefined,
|
|
327
280
|
onKeyDown: this.bindHandlerKeyDown('trigger'),
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
onKeyboardFocusedStateChange: this.handleTriggerKeyboardFocusedStateChange
|
|
281
|
+
onClick: this.handleClickTrigger,
|
|
282
|
+
ref: this.triggerRef
|
|
331
283
|
};
|
|
332
284
|
}
|
|
333
285
|
}, {
|
|
334
286
|
key: "getListProps",
|
|
335
287
|
value: function getListProps() {
|
|
336
|
-
var _this$
|
|
337
|
-
|
|
338
|
-
|
|
288
|
+
var _this$triggerRef$curr2;
|
|
289
|
+
var _this$asProps3 = this.asProps,
|
|
290
|
+
size = _this$asProps3.size,
|
|
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;
|
|
339
293
|
return {
|
|
340
294
|
size: size,
|
|
341
|
-
|
|
342
|
-
|
|
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
|
|
343
302
|
};
|
|
344
303
|
}
|
|
304
|
+
}, {
|
|
305
|
+
key: "getActionsProps",
|
|
306
|
+
value: function getActionsProps() {
|
|
307
|
+
return this.getListProps();
|
|
308
|
+
}
|
|
345
309
|
}, {
|
|
346
310
|
key: "getPopperProps",
|
|
347
311
|
value: function getPopperProps() {
|
|
348
|
-
var _this$
|
|
349
|
-
uid = _this$
|
|
350
|
-
disablePortal = _this$
|
|
351
|
-
ignorePortalsStacking = _this$
|
|
352
|
-
interaction = _this$
|
|
353
|
-
highlightedIndex = _this$
|
|
312
|
+
var _this$asProps4 = this.asProps,
|
|
313
|
+
uid = _this$asProps4.uid,
|
|
314
|
+
disablePortal = _this$asProps4.disablePortal,
|
|
315
|
+
ignorePortalsStacking = _this$asProps4.ignorePortalsStacking,
|
|
316
|
+
interaction = _this$asProps4.interaction,
|
|
317
|
+
highlightedIndex = _this$asProps4.highlightedIndex;
|
|
354
318
|
return {
|
|
355
319
|
ref: this.popperRef,
|
|
356
|
-
tabIndex:
|
|
357
|
-
onKeyDown: this.bindHandlerKeyDown('popper'),
|
|
320
|
+
tabIndex: -1,
|
|
358
321
|
id: "igc-".concat(uid, "-popper"),
|
|
359
322
|
disablePortal: disablePortal,
|
|
360
323
|
ignorePortalsStacking: ignorePortalsStacking,
|
|
@@ -364,36 +327,46 @@ var DropdownMenuRoot = /*#__PURE__*/function (_Component) {
|
|
|
364
327
|
'use:autoFocus': false
|
|
365
328
|
};
|
|
366
329
|
}
|
|
330
|
+
}, {
|
|
331
|
+
key: "getGroupProps",
|
|
332
|
+
value: function getGroupProps() {
|
|
333
|
+
var size = this.asProps.size;
|
|
334
|
+
return {
|
|
335
|
+
size: size
|
|
336
|
+
};
|
|
337
|
+
}
|
|
367
338
|
}, {
|
|
368
339
|
key: "getItemProps",
|
|
369
340
|
value: function getItemProps(props, index) {
|
|
370
|
-
var
|
|
371
|
-
var _this$
|
|
372
|
-
size = _this$
|
|
373
|
-
|
|
374
|
-
uid = _this$asProps6.uid;
|
|
375
|
-
var highlighted = index === highlightedIndex;
|
|
341
|
+
var _this3 = this;
|
|
342
|
+
var _this$asProps5 = this.asProps,
|
|
343
|
+
size = _this$asProps5.size,
|
|
344
|
+
uid = _this$asProps5.uid;
|
|
376
345
|
var ref = function ref(node) {
|
|
377
|
-
|
|
346
|
+
if ((node === null || node === void 0 ? void 0 : node.getAttribute('role')) === 'menuitem') {
|
|
347
|
+
_this3.itemRefs[index] = node;
|
|
348
|
+
}
|
|
349
|
+
if (node === document.activeElement) {
|
|
350
|
+
_this3.scrollToNode(node);
|
|
351
|
+
}
|
|
378
352
|
};
|
|
379
353
|
this.itemProps[index] = props;
|
|
380
|
-
|
|
381
|
-
ref = function ref(node) {
|
|
382
|
-
_this2.itemRefs[index] = node;
|
|
383
|
-
_this2.scrollToNode(node);
|
|
384
|
-
};
|
|
385
|
-
}
|
|
386
|
-
return {
|
|
354
|
+
var itemProps = {
|
|
387
355
|
id: "igc-".concat(uid, "-option-").concat(index),
|
|
388
356
|
size: size,
|
|
389
|
-
highlighted: highlighted,
|
|
390
|
-
focusLock: this.state.focusLockItemIndex === index,
|
|
391
|
-
triggerRef: this.triggerRef,
|
|
392
357
|
ref: ref,
|
|
393
358
|
index: index,
|
|
394
|
-
|
|
395
|
-
|
|
359
|
+
onMouseEnter: function onMouseEnter() {
|
|
360
|
+
return _this3.handlers.selectedIndex(index);
|
|
361
|
+
}
|
|
396
362
|
};
|
|
363
|
+
if (props.tag === ButtonComponent) {
|
|
364
|
+
var _props$use, _props$theme, _props$size;
|
|
365
|
+
itemProps.use = (_props$use = props.use) !== null && _props$use !== void 0 ? _props$use : 'tertiary';
|
|
366
|
+
itemProps.theme = (_props$theme = props.theme) !== null && _props$theme !== void 0 ? _props$theme : 'muted';
|
|
367
|
+
itemProps.size = (_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : 's';
|
|
368
|
+
}
|
|
369
|
+
return itemProps;
|
|
397
370
|
}
|
|
398
371
|
}, {
|
|
399
372
|
key: "getItemHintProps",
|
|
@@ -411,107 +384,79 @@ var DropdownMenuRoot = /*#__PURE__*/function (_Component) {
|
|
|
411
384
|
size: size
|
|
412
385
|
};
|
|
413
386
|
}
|
|
414
|
-
}, {
|
|
415
|
-
key: "moveHighlightedIndex",
|
|
416
|
-
value: function moveHighlightedIndex(amount, e) {
|
|
417
|
-
var _this$itemProps$newIn;
|
|
418
|
-
var highlightedIndex = this.asProps.highlightedIndex;
|
|
419
|
-
var itemsLastIndex = this.itemProps.length - 1;
|
|
420
|
-
var selectedIndex = this.itemProps.findIndex(function (item) {
|
|
421
|
-
return item.selected;
|
|
422
|
-
});
|
|
423
|
-
if (itemsLastIndex < 0) return;
|
|
424
|
-
if (highlightedIndex == null) {
|
|
425
|
-
if (selectedIndex !== -1) {
|
|
426
|
-
highlightedIndex = selectedIndex;
|
|
427
|
-
} else if (this.highlightedItemRef.current) {
|
|
428
|
-
highlightedIndex = this.prevHighlightedIndex;
|
|
429
|
-
} else {
|
|
430
|
-
highlightedIndex = amount < 0 ? 0 : itemsLastIndex;
|
|
431
|
-
}
|
|
432
|
-
}
|
|
433
|
-
var newIndex = highlightedIndex + amount;
|
|
434
|
-
if (newIndex < 0) {
|
|
435
|
-
newIndex = amount + itemsLastIndex + 1;
|
|
436
|
-
} else if (newIndex > itemsLastIndex) {
|
|
437
|
-
newIndex = newIndex - itemsLastIndex - 1;
|
|
438
|
-
}
|
|
439
|
-
if ((_this$itemProps$newIn = this.itemProps[newIndex]) !== null && _this$itemProps$newIn !== void 0 && _this$itemProps$newIn.disabled) {
|
|
440
|
-
this.moveHighlightedIndex(amount < 0 ? amount - 1 : amount + 1, e);
|
|
441
|
-
} else if (!this.itemProps[newIndex]) {
|
|
442
|
-
this.handlers.highlightedIndex(0, e);
|
|
443
|
-
} else {
|
|
444
|
-
this.handlers.highlightedIndex(newIndex, e);
|
|
445
|
-
}
|
|
446
|
-
}
|
|
447
387
|
}, {
|
|
448
388
|
key: "componentDidUpdate",
|
|
449
389
|
value: function componentDidUpdate(prevProps) {
|
|
450
|
-
var _this3 = this;
|
|
451
390
|
var visibilityChanged = this.asProps.visible !== prevProps.visible;
|
|
452
391
|
if (visibilityChanged && prevProps.visible !== undefined) {
|
|
453
392
|
if (!this.asProps.visible) {
|
|
454
393
|
this.handlers.highlightedIndex(null);
|
|
455
394
|
this.highlightedItemRef.current = null;
|
|
456
|
-
|
|
457
|
-
if (document.activeElement === document.body || isFocusInside(this.popperRef.current)) {
|
|
395
|
+
if ((document.activeElement === document.body || isFocusInside(this.popperRef.current)) && this.asProps.focusSourceRef.current === 'keyboard') {
|
|
458
396
|
setFocus(this.triggerRef.current);
|
|
459
397
|
}
|
|
460
398
|
}
|
|
461
399
|
}
|
|
462
|
-
if (visibilityChanged && this.asProps.visible) {
|
|
463
|
-
setTimeout(function () {
|
|
464
|
-
var selectedItemIndex = _this3.itemProps.findIndex(function (item) {
|
|
465
|
-
return item.selected;
|
|
466
|
-
});
|
|
467
|
-
if (selectedItemIndex === -1 || _this3.asProps.highlightedIndex !== null) return;
|
|
468
|
-
_this3.handlers.highlightedIndex(selectedItemIndex);
|
|
469
|
-
}, 0);
|
|
470
|
-
}
|
|
471
|
-
if ((this.state.focusLockItemIndex !== this.asProps.highlightedIndex || !this.asProps.visible) && this.state.focusLockItemIndex !== null) {
|
|
472
|
-
setTimeout(function () {
|
|
473
|
-
_this3.setState({
|
|
474
|
-
focusLockItemIndex: null
|
|
475
|
-
});
|
|
476
|
-
}, 0);
|
|
477
|
-
}
|
|
478
400
|
}
|
|
479
401
|
}, {
|
|
480
402
|
key: "render",
|
|
481
403
|
value: function render() {
|
|
482
404
|
var _ref = this.asProps;
|
|
483
|
-
var
|
|
405
|
+
var _this$asProps6 = this.asProps,
|
|
406
|
+
Children = _this$asProps6.Children,
|
|
407
|
+
selectedIndex = _this$asProps6.selectedIndex,
|
|
408
|
+
interaction = _this$asProps6.interaction,
|
|
409
|
+
timeout = _this$asProps6.timeout;
|
|
484
410
|
this.itemProps = [];
|
|
485
|
-
return /*#__PURE__*/React.createElement(
|
|
411
|
+
return /*#__PURE__*/React.createElement(selectedIndexContext.Provider, {
|
|
412
|
+
value: selectedIndex
|
|
413
|
+
}, /*#__PURE__*/React.createElement(Dropdown, _assignProps({
|
|
414
|
+
"timeout": timeout || (interaction === 'hover' ? [0, 100] : undefined)
|
|
415
|
+
}, _ref), /*#__PURE__*/React.createElement(Children, null)));
|
|
486
416
|
}
|
|
487
417
|
}]);
|
|
488
418
|
return DropdownMenuRoot;
|
|
489
419
|
}(Component);
|
|
490
420
|
_defineProperty(DropdownMenuRoot, "displayName", 'DropdownMenu');
|
|
491
421
|
_defineProperty(DropdownMenuRoot, "style", style);
|
|
492
|
-
_defineProperty(DropdownMenuRoot, "enhance", [uniqueIDEnhancement(), i18nEnhance(localizedMessages)]);
|
|
422
|
+
_defineProperty(DropdownMenuRoot, "enhance", [uniqueIDEnhancement(), i18nEnhance(localizedMessages), focusSourceEnhance()]);
|
|
493
423
|
_defineProperty(DropdownMenuRoot, "defaultProps", {
|
|
494
424
|
size: 'm',
|
|
495
425
|
defaultVisible: false,
|
|
496
|
-
defaultHighlightedIndex:
|
|
426
|
+
defaultHighlightedIndex: 0,
|
|
427
|
+
defaultSelectedIndex: 0,
|
|
497
428
|
i18n: localizedMessages,
|
|
498
429
|
locale: 'en',
|
|
499
|
-
interaction: 'click'
|
|
430
|
+
interaction: 'click',
|
|
431
|
+
inlineActions: false,
|
|
432
|
+
placement: 'bottom-start',
|
|
433
|
+
timeout: 0
|
|
500
434
|
});
|
|
501
|
-
function List(
|
|
435
|
+
function List(_ref23) {
|
|
502
436
|
var _ref2 = arguments[0],
|
|
503
|
-
|
|
437
|
+
_ref14;
|
|
438
|
+
var styles = _ref23.styles,
|
|
439
|
+
Children = _ref23.Children;
|
|
504
440
|
var SDropdownMenuList = ScrollAreaComponent;
|
|
505
|
-
|
|
506
|
-
return _ref11 = sstyled(props.styles), /*#__PURE__*/React.createElement(ListBoxContextProvider, _ref11.cn("ListBoxContextProvider", {}), /*#__PURE__*/React.createElement(SDropdownMenuList, _ref11.cn("SDropdownMenuList", _objectSpread({}, _assignProps2({
|
|
507
|
-
"tabIndex": null,
|
|
508
|
-
"role": 'menu',
|
|
509
|
-
"aria-labelledby": "igc-".concat(uid, "-trigger"),
|
|
441
|
+
return _ref14 = sstyled(styles), /*#__PURE__*/React.createElement(ListBoxContextProvider, _ref14.cn("ListBoxContextProvider", {}), /*#__PURE__*/React.createElement(SDropdownMenuList, _ref14.cn("SDropdownMenuList", _objectSpread({}, _assignProps2({
|
|
510
442
|
"shadow": true
|
|
511
|
-
}, _ref2)))
|
|
443
|
+
}, _ref2))), /*#__PURE__*/React.createElement(ScrollAreaComponent.Container, {
|
|
444
|
+
tabIndex: undefined
|
|
445
|
+
}, /*#__PURE__*/React.createElement(Children, _ref14.cn("Children", {}))), /*#__PURE__*/React.createElement(ScrollAreaComponent.Bar, {
|
|
446
|
+
orientation: "horizontal"
|
|
447
|
+
}), /*#__PURE__*/React.createElement(ScrollAreaComponent.Bar, {
|
|
448
|
+
orientation: "vertical"
|
|
449
|
+
})));
|
|
450
|
+
}
|
|
451
|
+
function Actions(_ref24) {
|
|
452
|
+
var _ref3 = arguments[0],
|
|
453
|
+
_ref15;
|
|
454
|
+
var styles = _ref24.styles;
|
|
455
|
+
var SDropdownMenuActions = Flex;
|
|
456
|
+
return _ref15 = sstyled(styles), /*#__PURE__*/React.createElement(SDropdownMenuActions, _ref15.cn("SDropdownMenuActions", _objectSpread({}, _assignProps3({}, _ref3))));
|
|
512
457
|
}
|
|
513
458
|
function Menu(props) {
|
|
514
|
-
var
|
|
459
|
+
var _ref4 = arguments[0];
|
|
515
460
|
var visible = props.visible,
|
|
516
461
|
disablePortal = props.disablePortal,
|
|
517
462
|
ignorePortalsStacking = props.ignorePortalsStacking,
|
|
@@ -528,98 +473,78 @@ function Menu(props) {
|
|
|
528
473
|
autoFocus: autoFocus,
|
|
529
474
|
animationsDisabled: animationsDisabled
|
|
530
475
|
};
|
|
531
|
-
return /*#__PURE__*/React.createElement(ListBoxContextProvider, null, /*#__PURE__*/React.createElement(DropdownMenu.Popper, popperProps, /*#__PURE__*/React.createElement(DropdownMenu.List,
|
|
476
|
+
return /*#__PURE__*/React.createElement(ListBoxContextProvider, null, /*#__PURE__*/React.createElement(DropdownMenu.Popper, popperProps, /*#__PURE__*/React.createElement(DropdownMenu.List, _assignProps4({}, _ref4))));
|
|
532
477
|
}
|
|
533
|
-
function Item(
|
|
534
|
-
var _ref4 = arguments[0],
|
|
535
|
-
_ref12;
|
|
536
|
-
var styles = _ref19.styles,
|
|
537
|
-
label = _ref19.label,
|
|
538
|
-
triggerRef = _ref19.triggerRef,
|
|
539
|
-
focusLock = _ref19.focusLock,
|
|
540
|
-
disabled = _ref19.disabled,
|
|
541
|
-
highlighted = _ref19.highlighted,
|
|
542
|
-
handleFocusOut = _ref19.handleFocusOut,
|
|
543
|
-
triggerKeyboardFocused = _ref19.triggerKeyboardFocused;
|
|
544
|
-
var SDropdownMenuItem = Flex;
|
|
545
|
-
var ref = React.useRef();
|
|
546
|
-
useFocusLock(ref, false, triggerRef, !focusLock || disabled, true, handleFocusOut);
|
|
547
|
-
return _ref12 = sstyled(styles), /*#__PURE__*/React.createElement(SDropdownMenuItem, _ref12.cn("SDropdownMenuItem", _objectSpread({}, _assignProps4({
|
|
548
|
-
"ref": ref,
|
|
549
|
-
"role": 'menuitem',
|
|
550
|
-
"tabIndex": -1,
|
|
551
|
-
"id": label,
|
|
552
|
-
"use:highlighted": !disabled && highlighted && triggerKeyboardFocused
|
|
553
|
-
}, _ref4))));
|
|
554
|
-
}
|
|
555
|
-
var NestingContext = /*#__PURE__*/React.createContext(null);
|
|
556
|
-
function Nesting(_ref20) {
|
|
478
|
+
function Item(_ref25) {
|
|
557
479
|
var _ref5 = arguments[0],
|
|
558
|
-
|
|
559
|
-
var
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
var
|
|
575
|
-
|
|
576
|
-
var
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
}
|
|
586
|
-
|
|
587
|
-
lastUserInteractionRef.current = 'mouse';
|
|
588
|
-
}, []);
|
|
589
|
-
var handleKeyboardEvent = React.useCallback(function () {
|
|
590
|
-
lastUserInteractionRef.current = 'keyboard';
|
|
591
|
-
}, []);
|
|
480
|
+
_ref16;
|
|
481
|
+
var id = _ref25.id,
|
|
482
|
+
styles = _ref25.styles,
|
|
483
|
+
disabled = _ref25.disabled,
|
|
484
|
+
Children = _ref25.Children,
|
|
485
|
+
forwardRef = _ref25.forwardRef;
|
|
486
|
+
var SDropdownMenuItemContainer = Box;
|
|
487
|
+
var itemRef = React.useRef();
|
|
488
|
+
var _React$useState = React.useState(false),
|
|
489
|
+
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
490
|
+
highlighted = _React$useState2[0],
|
|
491
|
+
setHighlighted = _React$useState2[1];
|
|
492
|
+
var menuItemContextValue = {
|
|
493
|
+
contentId: id,
|
|
494
|
+
ref: forkRef(forwardRef, itemRef)
|
|
495
|
+
};
|
|
496
|
+
var ariaDescribes = [];
|
|
497
|
+
var hasSubMenu = isAdvanceMode(Children, [DropdownMenu.displayName], true);
|
|
498
|
+
var hasHint = isAdvanceMode(Children, [DropdownMenu.Item.Hint.displayName], true);
|
|
499
|
+
var advancedMode = isAdvanceMode(Children, [DropdownMenu.Item.Content.displayName], true) || hasSubMenu || hasHint;
|
|
500
|
+
if (hasHint) {
|
|
501
|
+
var hintId = "igc-".concat(useUID(), "-option-hint");
|
|
502
|
+
menuItemContextValue.hintId = hintId;
|
|
503
|
+
ariaDescribes.push(hintId);
|
|
504
|
+
}
|
|
505
|
+
if (hasSubMenu) {
|
|
506
|
+
menuItemContextValue.hasSubMenu = true;
|
|
507
|
+
}
|
|
508
|
+
menuItemContextValue.ariaDescribes = ariaDescribes;
|
|
592
509
|
React.useEffect(function () {
|
|
593
|
-
|
|
510
|
+
var onFocus = function onFocus(e) {
|
|
511
|
+
if (e.target === itemRef.current) {
|
|
512
|
+
setHighlighted(true);
|
|
513
|
+
if (hasSubMenu) {
|
|
514
|
+
e.stopPropagation();
|
|
515
|
+
}
|
|
516
|
+
}
|
|
517
|
+
};
|
|
518
|
+
var onBlur = function onBlur(e) {
|
|
519
|
+
if (e.target === itemRef.current) {
|
|
520
|
+
setHighlighted(false);
|
|
521
|
+
}
|
|
522
|
+
};
|
|
523
|
+
document.addEventListener('focus', onFocus, {
|
|
594
524
|
capture: true
|
|
595
525
|
});
|
|
596
|
-
document.addEventListener('
|
|
526
|
+
document.addEventListener('blur', onBlur, {
|
|
597
527
|
capture: true
|
|
598
528
|
});
|
|
599
529
|
return function () {
|
|
600
|
-
document.removeEventListener('
|
|
530
|
+
document.removeEventListener('focus', onFocus, {
|
|
601
531
|
capture: true
|
|
602
532
|
});
|
|
603
|
-
document.removeEventListener('
|
|
533
|
+
document.removeEventListener('blur', onBlur, {
|
|
604
534
|
capture: true
|
|
605
535
|
});
|
|
606
536
|
};
|
|
607
|
-
}, []);
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
"
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
var styles = props.styles;
|
|
619
|
-
var SDropdownNestingItem = NestingTrigger;
|
|
620
|
-
return _ref15 = sstyled(styles), /*#__PURE__*/React.createElement(SDropdownNestingItem, _ref15.cn("SDropdownNestingItem", _objectSpread({}, _assignProps7({
|
|
621
|
-
"use:tabIndex": -1
|
|
622
|
-
}, _ref7))));
|
|
537
|
+
}, [itemRef.current]);
|
|
538
|
+
var focusSourceRef = useFocusSource();
|
|
539
|
+
return _ref16 = sstyled(styles), /*#__PURE__*/React.createElement(menuItemContext.Provider, {
|
|
540
|
+
value: menuItemContextValue
|
|
541
|
+
}, /*#__PURE__*/React.createElement(SDropdownMenuItemContainer, _ref16.cn("SDropdownMenuItemContainer", _objectSpread({}, _assignProps5({
|
|
542
|
+
"ref": advancedMode ? undefined : menuItemContextValue.ref,
|
|
543
|
+
"use:highlighted": !disabled && highlighted && focusSourceRef.current === 'keyboard',
|
|
544
|
+
"role": advancedMode ? undefined : 'menuitem',
|
|
545
|
+
"use:id": advancedMode ? undefined : id,
|
|
546
|
+
"tabIndex": advancedMode ? undefined : -1
|
|
547
|
+
}, _ref5))), /*#__PURE__*/React.createElement(Children, _ref16.cn("Children", {}))));
|
|
623
548
|
}
|
|
624
549
|
function Addon(props) {
|
|
625
550
|
var _useBox = useBox(props, props.forwardRef),
|
|
@@ -633,51 +558,165 @@ function Addon(props) {
|
|
|
633
558
|
className: cn(styles.cn('SDropdownMenuItemAddon', props).className, className) || undefined
|
|
634
559
|
}, other));
|
|
635
560
|
}
|
|
636
|
-
function
|
|
561
|
+
function Trigger() {
|
|
562
|
+
var _ref6 = arguments[0];
|
|
563
|
+
return /*#__PURE__*/React.createElement(Dropdown.Trigger, _assignProps6({
|
|
564
|
+
"aria-haspopup": 'true'
|
|
565
|
+
}, _ref6));
|
|
566
|
+
}
|
|
567
|
+
function Group(_ref26) {
|
|
568
|
+
var _ref7 = arguments[0],
|
|
569
|
+
_ref17;
|
|
570
|
+
var styles = _ref26.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) {
|
|
637
601
|
var _ref8 = arguments[0],
|
|
638
|
-
|
|
639
|
-
var
|
|
640
|
-
|
|
641
|
-
|
|
602
|
+
_ref18;
|
|
603
|
+
var styles = _ref27.styles;
|
|
604
|
+
var SItemContent = Flex;
|
|
605
|
+
var ref = React.useRef();
|
|
606
|
+
var menuItemCtxValue = React.useContext(menuItemContext);
|
|
607
|
+
var subMenu = undefined;
|
|
608
|
+
if (menuItemCtxValue.hasSubMenu) {
|
|
609
|
+
subMenu = 'true';
|
|
610
|
+
}
|
|
611
|
+
var _React$useState3 = React.useState(new Set(menuItemCtxValue.ariaDescribes)),
|
|
612
|
+
_React$useState4 = _slicedToArray(_React$useState3, 2),
|
|
613
|
+
describedby = _React$useState4[0],
|
|
614
|
+
setDescribedby = _React$useState4[1];
|
|
615
|
+
React.useEffect(function () {
|
|
616
|
+
var element = ref.current;
|
|
617
|
+
var parent = element === null || element === void 0 ? void 0 : element.parentElement;
|
|
618
|
+
if (parent.getAttribute('aria-haspopup') === 'true' && parent.getAttribute('aria-describedby')) {
|
|
619
|
+
setDescribedby(function (prev) {
|
|
620
|
+
prev.add(parent.getAttribute('aria-describedby'));
|
|
621
|
+
return new Set(prev);
|
|
622
|
+
});
|
|
623
|
+
}
|
|
624
|
+
}, [menuItemCtxValue.ariaDescribes]);
|
|
625
|
+
return _ref18 = sstyled(styles), /*#__PURE__*/React.createElement(SItemContent, _ref18.cn("SItemContent", _objectSpread({}, _assignProps8({
|
|
626
|
+
"role": 'menuitem',
|
|
627
|
+
"id": menuItemCtxValue.contentId,
|
|
628
|
+
"tabIndex": -1,
|
|
629
|
+
"ref": forkRef(menuItemCtxValue.ref, ref),
|
|
630
|
+
"use:aria-describedby": _toConsumableArray(describedby).join(' '),
|
|
631
|
+
"aria-haspopup": menuItemCtxValue.hasSubMenu ? 'true' : undefined,
|
|
632
|
+
"aria-expanded": subMenu,
|
|
633
|
+
"alignItems": menuItemCtxValue.hasSubMenu ? 'center' : undefined,
|
|
634
|
+
"justifyContent": menuItemCtxValue.hasSubMenu ? 'space-between' : undefined
|
|
642
635
|
}, _ref8))));
|
|
643
636
|
}
|
|
644
|
-
function
|
|
637
|
+
function ItemHint(_ref28) {
|
|
645
638
|
var _ref9 = arguments[0],
|
|
646
|
-
|
|
647
|
-
var
|
|
648
|
-
|
|
649
|
-
|
|
639
|
+
_ref19;
|
|
640
|
+
var styles = _ref28.styles;
|
|
641
|
+
var SItemHint = Flex;
|
|
642
|
+
var _React$useContext = React.useContext(menuItemContext),
|
|
643
|
+
hintId = _React$useContext.hintId;
|
|
644
|
+
return _ref19 = sstyled(styles), /*#__PURE__*/React.createElement(SItemHint, _ref19.cn("SItemHint", _objectSpread({}, _assignProps9({
|
|
645
|
+
"id": hintId,
|
|
646
|
+
"aria-hidden": 'true'
|
|
650
647
|
}, _ref9))));
|
|
651
648
|
}
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
649
|
+
|
|
650
|
+
/**
|
|
651
|
+
* @deprecated Use Item hint
|
|
652
|
+
*/
|
|
653
|
+
function Hint(props) {
|
|
654
|
+
var _ref10 = arguments[0],
|
|
655
|
+
_ref20;
|
|
656
|
+
var SDropdownMenuItemContainer = Flex;
|
|
657
|
+
return _ref20 = sstyled(props.styles), /*#__PURE__*/React.createElement(SDropdownMenuItemContainer, _ref20.cn("SDropdownMenuItemContainer", _objectSpread({}, _assignProps10({
|
|
658
|
+
"variant": 'hint'
|
|
659
|
+
}, _ref10))));
|
|
660
|
+
}
|
|
661
|
+
/**
|
|
662
|
+
* @deprecated Use Group with title prop
|
|
663
|
+
*/
|
|
664
|
+
function Title(props) {
|
|
665
|
+
var _ref11 = arguments[0],
|
|
666
|
+
_ref21;
|
|
667
|
+
var SDropdownMenuItemContainer = Flex;
|
|
668
|
+
return _ref21 = sstyled(props.styles), /*#__PURE__*/React.createElement(SDropdownMenuItemContainer, _ref21.cn("SDropdownMenuItemContainer", _objectSpread({}, _assignProps11({
|
|
669
|
+
"variant": 'title'
|
|
670
|
+
}, _ref11))));
|
|
671
|
+
}
|
|
672
|
+
|
|
673
|
+
/**
|
|
674
|
+
* @deprecated
|
|
675
|
+
*/
|
|
676
|
+
function Nesting(_ref29) {
|
|
677
|
+
var _ref12 = arguments[0];
|
|
678
|
+
var forwardRef = _ref29.forwardRef;
|
|
679
|
+
return /*#__PURE__*/React.createElement(DropdownMenu.Item, _assignProps12({
|
|
680
|
+
"ref": forwardRef
|
|
681
|
+
}, _ref12));
|
|
682
|
+
}
|
|
683
|
+
|
|
684
|
+
/**
|
|
685
|
+
* @deprecated
|
|
686
|
+
*/
|
|
687
|
+
function NestingTrigger(_ref30) {
|
|
688
|
+
var _ref13 = arguments[0];
|
|
689
|
+
var forwardRef = _ref30.forwardRef;
|
|
690
|
+
return /*#__PURE__*/React.createElement(DropdownMenu.Item.Content, _assignProps13({
|
|
691
|
+
"tag": DropdownMenu.Trigger,
|
|
692
|
+
"ref": forwardRef,
|
|
693
|
+
"use:role": 'menuitem'
|
|
694
|
+
}, _ref13));
|
|
662
695
|
}
|
|
663
|
-
Trigger.enhance = [keyboardFocusEnhance(false)];
|
|
664
696
|
var DropdownMenu = createComponent(DropdownMenuRoot, {
|
|
665
697
|
Trigger: Trigger,
|
|
666
698
|
Popper: Dropdown.Popper,
|
|
667
699
|
List: List,
|
|
700
|
+
Actions: Actions,
|
|
668
701
|
Menu: Menu,
|
|
669
702
|
Item: [Item, {
|
|
670
|
-
Addon: Addon
|
|
703
|
+
Addon: Addon,
|
|
704
|
+
Content: ItemContent,
|
|
705
|
+
Hint: ItemHint
|
|
671
706
|
}],
|
|
707
|
+
/**
|
|
708
|
+
* @deprecated. Use just Item. See examples on
|
|
709
|
+
*/
|
|
672
710
|
Nesting: [Nesting, {
|
|
673
711
|
Trigger: NestingTrigger,
|
|
674
|
-
Addon: Addon
|
|
675
|
-
Item: NestingItem
|
|
712
|
+
Addon: Addon
|
|
676
713
|
}],
|
|
677
714
|
ItemTitle: Title,
|
|
678
|
-
ItemHint: Hint
|
|
715
|
+
ItemHint: Hint,
|
|
716
|
+
Group: Group
|
|
679
717
|
}, {
|
|
680
718
|
parent: [Dropdown]
|
|
681
719
|
});
|
|
720
|
+
DropdownMenu.selectedIndexContext = selectedIndexContext;
|
|
682
721
|
export default DropdownMenu;
|
|
683
722
|
//# sourceMappingURL=DropdownMenu.js.map
|