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