@semcore/dropdown-menu 16.1.1 → 16.1.2-prerelease.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/README.md +1 -31
- package/lib/cjs/DropdownMenu.js +110 -111
- package/lib/cjs/DropdownMenu.js.map +1 -1
- package/lib/cjs/index.d.js.map +1 -1
- package/lib/cjs/index.js +1 -1
- package/lib/cjs/index.js.map +1 -1
- package/lib/cjs/translations/__intergalactic-dynamic-locales.js +4 -5
- package/lib/cjs/translations/__intergalactic-dynamic-locales.js.map +1 -1
- package/lib/es6/DropdownMenu.js +107 -107
- package/lib/es6/DropdownMenu.js.map +1 -1
- package/lib/es6/index.d.js.map +1 -1
- package/lib/es6/index.js.map +1 -1
- package/lib/es6/translations/__intergalactic-dynamic-locales.js +2 -2
- package/lib/es6/translations/__intergalactic-dynamic-locales.js.map +1 -1
- package/lib/esm/DropdownMenu.mjs +100 -93
- package/lib/esm/translations/__intergalactic-dynamic-locales.mjs +2 -2
- package/lib/types/index.d.ts +9 -7
- package/package.json +5 -5
package/lib/es6/DropdownMenu.js
CHANGED
|
@@ -5,17 +5,17 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
|
5
5
|
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
|
|
6
6
|
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
7
7
|
import _createClass from "@babel/runtime/helpers/createClass";
|
|
8
|
-
import
|
|
9
|
-
import
|
|
8
|
+
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
|
9
|
+
import _isNativeReflectConstruct from "@babel/runtime/helpers/isNativeReflectConstruct";
|
|
10
10
|
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
11
|
+
import _get from "@babel/runtime/helpers/get";
|
|
11
12
|
import _inherits from "@babel/runtime/helpers/inherits";
|
|
12
|
-
import _createSuper from "@babel/runtime/helpers/createSuper";
|
|
13
13
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
14
14
|
import { sstyled as _sstyled } from "@semcore/core";
|
|
15
|
-
import { assignProps as _assignProps13 } from "@semcore/core";
|
|
16
|
-
import { assignProps as _assignProps12 } from "@semcore/core";
|
|
17
15
|
import { assignProps as _assignProps11 } from "@semcore/core";
|
|
18
16
|
import { assignProps as _assignProps10 } from "@semcore/core";
|
|
17
|
+
import { assignProps as _assignProps1 } from "@semcore/core";
|
|
18
|
+
import { assignProps as _assignProps0 } from "@semcore/core";
|
|
19
19
|
import { assignProps as _assignProps9 } from "@semcore/core";
|
|
20
20
|
import { assignProps as _assignProps8 } from "@semcore/core";
|
|
21
21
|
import { assignProps as _assignProps7 } from "@semcore/core";
|
|
@@ -26,67 +26,68 @@ import { assignProps as _assignProps3 } from "@semcore/core";
|
|
|
26
26
|
import { assignProps as _assignProps2 } from "@semcore/core";
|
|
27
27
|
import { assignProps as _assignProps } from "@semcore/core";
|
|
28
28
|
var _excluded = ["className"];
|
|
29
|
-
|
|
30
|
-
|
|
29
|
+
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
|
|
30
|
+
function _superPropGet(t, o, e, r) { var p = _get(_getPrototypeOf(1 & r ? t.prototype : t), o, e); return 2 & r && "function" == typeof p ? function (t) { return p.apply(e, t); } : p; }
|
|
31
|
+
import ButtonComponent from '@semcore/button';
|
|
31
32
|
import { createComponent, sstyled, Root, lastInteraction } from '@semcore/core';
|
|
33
|
+
import { callAllEventHandlers } from '@semcore/core/lib/utils/assignProps';
|
|
34
|
+
import { isAdvanceMode } from '@semcore/core/lib/utils/findComponent';
|
|
35
|
+
import { forkRef } from '@semcore/core/lib/utils/ref';
|
|
36
|
+
import { useUID } from '@semcore/core/lib/utils/uniqueID';
|
|
32
37
|
import Dropdown, { AbstractDropdown, selectedIndexContext, enhance } from '@semcore/dropdown';
|
|
33
38
|
import { Flex, useBox } from '@semcore/flex-box';
|
|
34
39
|
import ScrollAreaComponent, { hideScrollBarsFromScreenReadersContext } from '@semcore/scroll-area';
|
|
35
|
-
import {
|
|
36
|
-
import
|
|
40
|
+
import { Text } from '@semcore/typography';
|
|
41
|
+
import cn from 'classnames';
|
|
42
|
+
import React from 'react';
|
|
37
43
|
/*!__reshadow-styles__:"./style/dropdown-menu.shadow.css"*/
|
|
38
|
-
var style = (
|
|
44
|
+
var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SDropdownMenuList_tcsd2_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_tcsd2_gg_ .___SShadowHorizontal_tcsd2_gg_:after,.___SDropdownMenuList_tcsd2_gg_ .___SShadowHorizontal_tcsd2_gg_:before{width:16px;height:100%;border-radius:var(--intergalactic-control-rounded, 6px)}.___SDropdownMenuList_tcsd2_gg_ .___SShadowHorizontal_tcsd2_gg_._position_median_tcsd2_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_tcsd2_gg_ .___SShadowHorizontal_tcsd2_gg_._position_median_tcsd2_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_tcsd2_gg_ .___SShadowHorizontal_tcsd2_gg_._position_start_tcsd2_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_tcsd2_gg_ .___SShadowHorizontal_tcsd2_gg_._position_end_tcsd2_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_tcsd2_gg_ .___SShadowVertical_tcsd2_gg_:after,.___SDropdownMenuList_tcsd2_gg_ .___SShadowVertical_tcsd2_gg_:before{width:100%;height:16px;border-radius:var(--intergalactic-control-rounded, 6px)}.___SDropdownMenuList_tcsd2_gg_ .___SShadowVertical_tcsd2_gg_._position_median_tcsd2_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_tcsd2_gg_ .___SShadowVertical_tcsd2_gg_._position_median_tcsd2_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_tcsd2_gg_ .___SShadowVertical_tcsd2_gg_._position_start_tcsd2_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_tcsd2_gg_ .___SShadowVertical_tcsd2_gg_._position_end_tcsd2_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_tcsd2_gg_.__nesting-trigger_tcsd2_gg_{justify-content:space-between}.___SDropdownMenuItemAddon_tcsd2_gg_,.___SItemContentText_tcsd2_gg_{display:inline-flex;margin-left:var(--intergalactic-spacing-1x, 4px);margin-right:var(--intergalactic-spacing-1x, 4px)}.___SDropdownMenuItemAddon_tcsd2_gg_:first-child,.___SItemContentText_tcsd2_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_tcsd2_gg_:last-child,.___SItemContentText_tcsd2_gg_:last-child{margin-right:0}.___SDropdownMenuNesting_tcsd2_gg_,.___SDropdownMenuNesting_tcsd2_gg_._size_l_tcsd2_gg_,.___SDropdownMenuNesting_tcsd2_gg_._size_m_tcsd2_gg_{padding:0}.___SDropdownMenuNesting_tcsd2_gg_.__highlighted_tcsd2_gg_{z-index:1;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5)) inset}.___SDropdownNestingItem_tcsd2_gg_._size_l_tcsd2_gg_,.___SDropdownNestingItem_tcsd2_gg_._size_m_tcsd2_gg_{padding-right:0}.___SDropdownNestingItem_tcsd2_gg_ .___SDropdownMenuItemContainer_tcsd2_gg_{width:auto;padding-top:0;padding-bottom:0;padding-left:0;min-height:auto}.___SItemContent_tcsd2_gg_:focus{outline:0}.___SItemHint_tcsd2_gg_{color:var(--intergalactic-text-secondary, #6c6e79)}", /*__inner_css_end__*/"tcsd2_gg_"),
|
|
39
45
|
/*__reshadow_css_end__*/
|
|
40
46
|
{
|
|
41
|
-
"__SDropdownMenuItemContainer": "
|
|
42
|
-
"_nesting-trigger": "__nesting-
|
|
43
|
-
"__SDropdownMenuNesting": "
|
|
44
|
-
"_size_l": "
|
|
45
|
-
"_size_m": "
|
|
46
|
-
"_highlighted": "
|
|
47
|
-
"__SDropdownNestingItem": "
|
|
48
|
-
"__SItemContent": "
|
|
49
|
-
"__SItemHint": "
|
|
50
|
-
"__SDropdownMenuList": "
|
|
51
|
-
"__SShadowHorizontal": "
|
|
52
|
-
"_position_median": "
|
|
53
|
-
"_position_start": "
|
|
54
|
-
"_position_end": "
|
|
55
|
-
"__SShadowVertical": "
|
|
56
|
-
"__SDropdownMenuItemAddon": "
|
|
57
|
-
"__SItemContentText": "
|
|
47
|
+
"__SDropdownMenuItemContainer": "___SDropdownMenuItemContainer_tcsd2_gg_",
|
|
48
|
+
"_nesting-trigger": "__nesting-trigger_tcsd2_gg_",
|
|
49
|
+
"__SDropdownMenuNesting": "___SDropdownMenuNesting_tcsd2_gg_",
|
|
50
|
+
"_size_l": "_size_l_tcsd2_gg_",
|
|
51
|
+
"_size_m": "_size_m_tcsd2_gg_",
|
|
52
|
+
"_highlighted": "__highlighted_tcsd2_gg_",
|
|
53
|
+
"__SDropdownNestingItem": "___SDropdownNestingItem_tcsd2_gg_",
|
|
54
|
+
"__SItemContent": "___SItemContent_tcsd2_gg_",
|
|
55
|
+
"__SItemHint": "___SItemHint_tcsd2_gg_",
|
|
56
|
+
"__SDropdownMenuList": "___SDropdownMenuList_tcsd2_gg_",
|
|
57
|
+
"__SShadowHorizontal": "___SShadowHorizontal_tcsd2_gg_",
|
|
58
|
+
"_position_median": "_position_median_tcsd2_gg_",
|
|
59
|
+
"_position_start": "_position_start_tcsd2_gg_",
|
|
60
|
+
"_position_end": "_position_end_tcsd2_gg_",
|
|
61
|
+
"__SShadowVertical": "___SShadowVertical_tcsd2_gg_",
|
|
62
|
+
"__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_tcsd2_gg_",
|
|
63
|
+
"__SItemContentText": "___SItemContentText_tcsd2_gg_"
|
|
58
64
|
});
|
|
59
|
-
import {
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
import ButtonComponent from '@semcore/button';
|
|
63
|
-
import { Text } from '@semcore/typography';
|
|
64
|
-
var ListBoxContextProvider = function ListBoxContextProvider(_ref22) {
|
|
65
|
-
var children = _ref22.children;
|
|
65
|
+
import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
|
|
66
|
+
var ListBoxContextProvider = function ListBoxContextProvider(_ref20) {
|
|
67
|
+
var children = _ref20.children;
|
|
66
68
|
return /*#__PURE__*/React.createElement(hideScrollBarsFromScreenReadersContext.Provider, {
|
|
67
69
|
value: true
|
|
68
70
|
}, children);
|
|
69
71
|
};
|
|
70
72
|
var menuItemContext = /*#__PURE__*/React.createContext({});
|
|
71
73
|
var DropdownMenuRoot = /*#__PURE__*/function (_AbstractDropdown) {
|
|
72
|
-
_inherits(DropdownMenuRoot, _AbstractDropdown);
|
|
73
|
-
var _super = _createSuper(DropdownMenuRoot);
|
|
74
74
|
function DropdownMenuRoot() {
|
|
75
75
|
var _this;
|
|
76
76
|
_classCallCheck(this, DropdownMenuRoot);
|
|
77
77
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
78
78
|
args[_key] = arguments[_key];
|
|
79
79
|
}
|
|
80
|
-
_this =
|
|
81
|
-
_defineProperty(
|
|
82
|
-
_defineProperty(
|
|
80
|
+
_this = _callSuper(this, DropdownMenuRoot, [].concat(args));
|
|
81
|
+
_defineProperty(_this, "actionsRef", /*#__PURE__*/React.createRef());
|
|
82
|
+
_defineProperty(_this, "role", 'menu');
|
|
83
83
|
return _this;
|
|
84
84
|
}
|
|
85
|
-
|
|
85
|
+
_inherits(DropdownMenuRoot, _AbstractDropdown);
|
|
86
|
+
return _createClass(DropdownMenuRoot, [{
|
|
86
87
|
key: "uncontrolledProps",
|
|
87
88
|
value: function uncontrolledProps() {
|
|
88
89
|
var _this2 = this;
|
|
89
|
-
return _objectSpread(_objectSpread({},
|
|
90
|
+
return _objectSpread(_objectSpread({}, _superPropGet(DropdownMenuRoot, "uncontrolledProps", this, 3)([])), {}, {
|
|
90
91
|
visible: [null, function (visible) {
|
|
91
92
|
if (visible === true) {
|
|
92
93
|
setTimeout(function () {
|
|
@@ -112,9 +113,9 @@ var DropdownMenuRoot = /*#__PURE__*/function (_AbstractDropdown) {
|
|
|
112
113
|
}, {
|
|
113
114
|
key: "itemRef",
|
|
114
115
|
value: function itemRef(props, index, node) {
|
|
115
|
-
|
|
116
|
+
_superPropGet(DropdownMenuRoot, "itemRef", this, 3)([props, index, node]);
|
|
116
117
|
if (node === document.activeElement) {
|
|
117
|
-
|
|
118
|
+
_superPropGet(DropdownMenuRoot, "scrollToNode", this, 3)([node]);
|
|
118
119
|
}
|
|
119
120
|
}
|
|
120
121
|
}, {
|
|
@@ -126,8 +127,8 @@ var DropdownMenuRoot = /*#__PURE__*/function (_AbstractDropdown) {
|
|
|
126
127
|
visible = _this$asProps.visible;
|
|
127
128
|
var hasMenu = isAdvanceMode(Children, [DropdownMenu.Menu.displayName]);
|
|
128
129
|
var ariaControls = hasMenu ? "igc-".concat(uid, "-list") : "igc-".concat(uid, "-popper");
|
|
129
|
-
return _objectSpread(_objectSpread({},
|
|
130
|
-
onKeyDown: callAllEventHandlers(this.handlePreventCommonKeyDown.bind(this), this.handleOpenKeyDown.bind(this), this.handleKeyDownForMenu('trigger')),
|
|
130
|
+
return _objectSpread(_objectSpread({}, _superPropGet(DropdownMenuRoot, "getTriggerProps", this, 3)([])), {}, {
|
|
131
|
+
'onKeyDown': callAllEventHandlers(this.handlePreventCommonKeyDown.bind(this), this.handleOpenKeyDown.bind(this), this.handleKeyDownForMenu('trigger')),
|
|
131
132
|
'aria-controls': visible ? ariaControls : undefined,
|
|
132
133
|
'aria-haspopup': hasMenu ? 'true' : 'dialog'
|
|
133
134
|
});
|
|
@@ -135,14 +136,14 @@ var DropdownMenuRoot = /*#__PURE__*/function (_AbstractDropdown) {
|
|
|
135
136
|
}, {
|
|
136
137
|
key: "getListProps",
|
|
137
138
|
value: function getListProps() {
|
|
138
|
-
return _objectSpread(_objectSpread({},
|
|
139
|
+
return _objectSpread(_objectSpread({}, _superPropGet(DropdownMenuRoot, "getListProps", this, 3)([])), {}, {
|
|
139
140
|
onKeyDown: callAllEventHandlers(this.handlePreventCommonKeyDown.bind(this), this.handleKeyDownForMenu('list'), this.handleArrowKeyDown.bind(this))
|
|
140
141
|
});
|
|
141
142
|
}
|
|
142
143
|
}, {
|
|
143
144
|
key: "getPopperProps",
|
|
144
145
|
value: function getPopperProps() {
|
|
145
|
-
return _objectSpread(_objectSpread({},
|
|
146
|
+
return _objectSpread(_objectSpread({}, _superPropGet(DropdownMenuRoot, "getPopperProps", this, 3)([])), {}, {
|
|
146
147
|
onKeyDown: callAllEventHandlers(this.handlePreventCommonKeyDown.bind(this), this.handlePreventPopperKeyDown.bind(this))
|
|
147
148
|
});
|
|
148
149
|
}
|
|
@@ -164,7 +165,7 @@ var DropdownMenuRoot = /*#__PURE__*/function (_AbstractDropdown) {
|
|
|
164
165
|
visible = _this$asProps2.visible;
|
|
165
166
|
var realIndex = (_props$index = props.index) !== null && _props$index !== void 0 ? _props$index : index;
|
|
166
167
|
var isHighlighted = realIndex === highlightedIndex;
|
|
167
|
-
var itemProps = _objectSpread(_objectSpread({},
|
|
168
|
+
var itemProps = _objectSpread(_objectSpread({}, _superPropGet(DropdownMenuRoot, "getItemProps", this, 3)([props, realIndex])), {}, {
|
|
168
169
|
tabIndex: isHighlighted && visible ? 0 : -1,
|
|
169
170
|
ref: function ref(node) {
|
|
170
171
|
return _this3.itemRef(props, realIndex, node);
|
|
@@ -181,7 +182,7 @@ var DropdownMenuRoot = /*#__PURE__*/function (_AbstractDropdown) {
|
|
|
181
182
|
if (props.selected) {
|
|
182
183
|
itemProps['aria-checked'] = true;
|
|
183
184
|
}
|
|
184
|
-
if (
|
|
185
|
+
if (_superPropGet(DropdownMenuRoot, "childRole", this, 1) === 'menuitemradio') {
|
|
185
186
|
itemProps.onClick = function () {
|
|
186
187
|
_this3.handlers.visible(false);
|
|
187
188
|
};
|
|
@@ -206,14 +207,14 @@ var DropdownMenuRoot = /*#__PURE__*/function (_AbstractDropdown) {
|
|
|
206
207
|
}
|
|
207
208
|
var show = e.key === 'ArrowRight' && (placement === null || placement === void 0 ? void 0 : placement.startsWith('right')) || e.key === 'ArrowLeft' && (placement === null || placement === void 0 ? void 0 : placement.startsWith('left'));
|
|
208
209
|
var hide = e.key === 'ArrowLeft' && (placement === null || placement === void 0 ? void 0 : placement.startsWith('right')) || e.key === 'ArrowRight' && (placement === null || placement === void 0 ? void 0 : placement.startsWith('left')) || e.key === 'Escape';
|
|
209
|
-
var isMenuItem = (_e$target$getAttribut = e.target.getAttribute('role')) === null || _e$target$getAttribut === void 0 ? void 0 : _e$target$getAttribut.startsWith(
|
|
210
|
+
var isMenuItem = (_e$target$getAttribut = e.target.getAttribute('role')) === null || _e$target$getAttribut === void 0 ? void 0 : _e$target$getAttribut.startsWith(_superPropGet(DropdownMenuRoot, "childRole", _this4, 1));
|
|
210
211
|
if (place === 'trigger' && (!visible || inlineActions) && show && isMenuItem) {
|
|
211
212
|
_this4.handlers.visible(true);
|
|
212
213
|
_this4.handlers.highlightedIndex(0);
|
|
213
214
|
setTimeout(function () {
|
|
214
215
|
var _this4$itemRefs$highl;
|
|
215
216
|
var highlightedIndex = _this4.asProps.highlightedIndex;
|
|
216
|
-
(_this4$itemRefs$highl = _this4.itemRefs[highlightedIndex]) === null || _this4$itemRefs$highl === void 0
|
|
217
|
+
(_this4$itemRefs$highl = _this4.itemRefs[highlightedIndex]) === null || _this4$itemRefs$highl === void 0 || _this4$itemRefs$highl.focus();
|
|
217
218
|
}, 0);
|
|
218
219
|
e.preventDefault();
|
|
219
220
|
e.stopPropagation();
|
|
@@ -223,7 +224,7 @@ var DropdownMenuRoot = /*#__PURE__*/function (_AbstractDropdown) {
|
|
|
223
224
|
if (!inlineActions || inlineActions && (e.key === 'Escape' || _this4.asProps.highlightedIndex === 0)) {
|
|
224
225
|
var _this4$triggerRef$cur;
|
|
225
226
|
_this4.handlers.visible(false);
|
|
226
|
-
(_this4$triggerRef$cur = _this4.triggerRef.current) === null || _this4$triggerRef$cur === void 0
|
|
227
|
+
(_this4$triggerRef$cur = _this4.triggerRef.current) === null || _this4$triggerRef$cur === void 0 || _this4$triggerRef$cur.focus();
|
|
227
228
|
e.preventDefault();
|
|
228
229
|
e.stopPropagation();
|
|
229
230
|
return false;
|
|
@@ -257,7 +258,6 @@ var DropdownMenuRoot = /*#__PURE__*/function (_AbstractDropdown) {
|
|
|
257
258
|
}, _ref), /*#__PURE__*/React.createElement(Children, null)));
|
|
258
259
|
}
|
|
259
260
|
}]);
|
|
260
|
-
return DropdownMenuRoot;
|
|
261
261
|
}(AbstractDropdown);
|
|
262
262
|
_defineProperty(DropdownMenuRoot, "displayName", 'DropdownMenu');
|
|
263
263
|
_defineProperty(DropdownMenuRoot, "style", style);
|
|
@@ -278,28 +278,28 @@ _defineProperty(DropdownMenuRoot, "nestedMenuInteraction", {
|
|
|
278
278
|
trigger: [['onClick', 'onMouseEnter'], ['onClick', 'onMouseLeave']],
|
|
279
279
|
popper: [['onMouseEnter'], ['onMouseLeave']]
|
|
280
280
|
});
|
|
281
|
-
function List(
|
|
281
|
+
function List(_ref21) {
|
|
282
282
|
var _ref2 = arguments[0],
|
|
283
|
-
|
|
284
|
-
var styles =
|
|
285
|
-
Children =
|
|
283
|
+
_ref12;
|
|
284
|
+
var styles = _ref21.styles,
|
|
285
|
+
Children = _ref21.Children;
|
|
286
286
|
var SDropdownMenuList = ScrollAreaComponent;
|
|
287
|
-
return
|
|
287
|
+
return _ref12 = sstyled(styles), /*#__PURE__*/React.createElement(ListBoxContextProvider, _ref12.cn("ListBoxContextProvider", {}), /*#__PURE__*/React.createElement(SDropdownMenuList, _ref12.cn("SDropdownMenuList", _objectSpread({}, _assignProps2({
|
|
288
288
|
"shadow": true
|
|
289
289
|
}, _ref2))), /*#__PURE__*/React.createElement(ScrollAreaComponent.Container, {
|
|
290
290
|
tabIndex: undefined
|
|
291
|
-
}, /*#__PURE__*/React.createElement(Children,
|
|
291
|
+
}, /*#__PURE__*/React.createElement(Children, _ref12.cn("Children", {}))), /*#__PURE__*/React.createElement(ScrollAreaComponent.Bar, {
|
|
292
292
|
orientation: "horizontal"
|
|
293
293
|
}), /*#__PURE__*/React.createElement(ScrollAreaComponent.Bar, {
|
|
294
294
|
orientation: "vertical"
|
|
295
295
|
})));
|
|
296
296
|
}
|
|
297
|
-
function Actions(
|
|
297
|
+
function Actions(_ref22) {
|
|
298
298
|
var _ref3 = arguments[0],
|
|
299
|
-
|
|
300
|
-
var styles =
|
|
299
|
+
_ref13;
|
|
300
|
+
var styles = _ref22.styles;
|
|
301
301
|
var SDropdownMenuActions = Flex;
|
|
302
|
-
return
|
|
302
|
+
return _ref13 = sstyled(styles), /*#__PURE__*/React.createElement(SDropdownMenuActions, _ref13.cn("SDropdownMenuActions", _objectSpread({}, _assignProps3({}, _ref3))));
|
|
303
303
|
}
|
|
304
304
|
function Menu(props) {
|
|
305
305
|
var _ref4 = arguments[0];
|
|
@@ -323,18 +323,18 @@ function Menu(props) {
|
|
|
323
323
|
role: null
|
|
324
324
|
}), /*#__PURE__*/React.createElement(DropdownMenu.List, _assignProps4({}, _ref4))));
|
|
325
325
|
}
|
|
326
|
-
function Item(
|
|
326
|
+
function Item(_ref23) {
|
|
327
327
|
var _ref5 = arguments[0],
|
|
328
|
-
|
|
329
|
-
var id =
|
|
330
|
-
styles =
|
|
331
|
-
disabled =
|
|
332
|
-
Children =
|
|
333
|
-
forwardRef =
|
|
334
|
-
role =
|
|
335
|
-
tabIndex =
|
|
336
|
-
actionsRef =
|
|
337
|
-
ariaChecked =
|
|
328
|
+
_ref14;
|
|
329
|
+
var id = _ref23.id,
|
|
330
|
+
styles = _ref23.styles,
|
|
331
|
+
disabled = _ref23.disabled,
|
|
332
|
+
Children = _ref23.Children,
|
|
333
|
+
forwardRef = _ref23.forwardRef,
|
|
334
|
+
role = _ref23.role,
|
|
335
|
+
tabIndex = _ref23.tabIndex,
|
|
336
|
+
actionsRef = _ref23.actionsRef,
|
|
337
|
+
ariaChecked = _ref23['aria-checked'];
|
|
338
338
|
var SDropdownMenuItemContainer = Dropdown.Item;
|
|
339
339
|
var itemRef = React.useRef();
|
|
340
340
|
var _React$useState = React.useState(false),
|
|
@@ -393,16 +393,16 @@ function Item(_ref25) {
|
|
|
393
393
|
});
|
|
394
394
|
};
|
|
395
395
|
}, [itemRef.current]);
|
|
396
|
-
return
|
|
396
|
+
return _ref14 = sstyled(styles), /*#__PURE__*/React.createElement(menuItemContext.Provider, {
|
|
397
397
|
value: menuItemContextValue
|
|
398
|
-
}, /*#__PURE__*/React.createElement(SDropdownMenuItemContainer,
|
|
398
|
+
}, /*#__PURE__*/React.createElement(SDropdownMenuItemContainer, _ref14.cn("SDropdownMenuItemContainer", _objectSpread({}, _assignProps5({
|
|
399
399
|
"ref": advancedMode ? undefined : menuItemContextValue.ref,
|
|
400
400
|
"use:highlighted": !disabled && highlighted && lastInteraction.isKeyboard(),
|
|
401
401
|
"use:role": advancedMode ? undefined : role,
|
|
402
402
|
"use:id": advancedMode ? undefined : id,
|
|
403
403
|
"use:tabIndex": advancedMode ? undefined : tabIndex,
|
|
404
404
|
"use:aria-checked": advancedMode ? undefined : ariaChecked
|
|
405
|
-
}, _ref5))), /*#__PURE__*/React.createElement(Children,
|
|
405
|
+
}, _ref5))), /*#__PURE__*/React.createElement(Children, _ref14.cn("Children", {}))));
|
|
406
406
|
}
|
|
407
407
|
function Addon(props) {
|
|
408
408
|
var _useBox = useBox(props, props.forwardRef),
|
|
@@ -420,10 +420,10 @@ function Trigger() {
|
|
|
420
420
|
var _ref6 = arguments[0];
|
|
421
421
|
return /*#__PURE__*/React.createElement(Dropdown.Trigger, _assignProps6({}, _ref6));
|
|
422
422
|
}
|
|
423
|
-
function ItemContent(
|
|
423
|
+
function ItemContent(_ref24) {
|
|
424
424
|
var _ref7 = arguments[0],
|
|
425
|
-
|
|
426
|
-
var styles =
|
|
425
|
+
_ref15;
|
|
426
|
+
var styles = _ref24.styles;
|
|
427
427
|
var SItemContent = Flex;
|
|
428
428
|
var ref = React.useRef();
|
|
429
429
|
var menuItemCtxValue = React.useContext(menuItemContext);
|
|
@@ -445,7 +445,7 @@ function ItemContent(_ref26) {
|
|
|
445
445
|
});
|
|
446
446
|
}
|
|
447
447
|
}, [menuItemCtxValue.ariaDescribes]);
|
|
448
|
-
return
|
|
448
|
+
return _ref15 = sstyled(styles), /*#__PURE__*/React.createElement(SItemContent, _ref15.cn("SItemContent", _objectSpread({}, _assignProps7({
|
|
449
449
|
"role": menuItemCtxValue.role,
|
|
450
450
|
"id": menuItemCtxValue.contentId,
|
|
451
451
|
"tabIndex": menuItemCtxValue.tabIndex,
|
|
@@ -458,21 +458,21 @@ function ItemContent(_ref26) {
|
|
|
458
458
|
"justifyContent": menuItemCtxValue.hasSubMenu ? 'space-between' : undefined
|
|
459
459
|
}, _ref7))));
|
|
460
460
|
}
|
|
461
|
-
function ItemContentText(
|
|
461
|
+
function ItemContentText(_ref25) {
|
|
462
462
|
var _ref8 = arguments[0],
|
|
463
|
-
|
|
464
|
-
var styles =
|
|
463
|
+
_ref16;
|
|
464
|
+
var styles = _ref25.styles;
|
|
465
465
|
var SItemContentText = Text;
|
|
466
|
-
return
|
|
466
|
+
return _ref16 = sstyled(styles), /*#__PURE__*/React.createElement(SItemContentText, _ref16.cn("SItemContentText", _objectSpread({}, _assignProps8({}, _ref8))));
|
|
467
467
|
}
|
|
468
|
-
function ItemHint(
|
|
468
|
+
function ItemHint(_ref26) {
|
|
469
469
|
var _ref9 = arguments[0],
|
|
470
|
-
|
|
471
|
-
var styles =
|
|
470
|
+
_ref17;
|
|
471
|
+
var styles = _ref26.styles;
|
|
472
472
|
var SItemHint = Flex;
|
|
473
473
|
var _React$useContext = React.useContext(menuItemContext),
|
|
474
474
|
hintId = _React$useContext.hintId;
|
|
475
|
-
return
|
|
475
|
+
return _ref17 = sstyled(styles), /*#__PURE__*/React.createElement(SItemHint, _ref17.cn("SItemHint", _objectSpread({}, _assignProps9({
|
|
476
476
|
"id": hintId,
|
|
477
477
|
"aria-hidden": 'true'
|
|
478
478
|
}, _ref9))));
|
|
@@ -482,47 +482,47 @@ function ItemHint(_ref28) {
|
|
|
482
482
|
* @deprecated Use Item hint
|
|
483
483
|
*/
|
|
484
484
|
function Hint(props) {
|
|
485
|
-
var
|
|
486
|
-
|
|
485
|
+
var _ref0 = arguments[0],
|
|
486
|
+
_ref18;
|
|
487
487
|
var SDropdownMenuItemContainer = Dropdown.Item;
|
|
488
|
-
return
|
|
488
|
+
return _ref18 = sstyled(props.styles), /*#__PURE__*/React.createElement(SDropdownMenuItemContainer, _ref18.cn("SDropdownMenuItemContainer", _objectSpread({}, _assignProps0({
|
|
489
489
|
"variant": 'hint'
|
|
490
|
-
},
|
|
490
|
+
}, _ref0))));
|
|
491
491
|
}
|
|
492
492
|
/**
|
|
493
493
|
* @deprecated Use Group with title prop
|
|
494
494
|
*/
|
|
495
495
|
function Title(props) {
|
|
496
|
-
var
|
|
497
|
-
|
|
496
|
+
var _ref1 = arguments[0],
|
|
497
|
+
_ref19;
|
|
498
498
|
var SDropdownMenuItemContainer = Dropdown.Item;
|
|
499
|
-
return
|
|
499
|
+
return _ref19 = sstyled(props.styles), /*#__PURE__*/React.createElement(SDropdownMenuItemContainer, _ref19.cn("SDropdownMenuItemContainer", _objectSpread({}, _assignProps1({
|
|
500
500
|
"variant": 'title'
|
|
501
|
-
},
|
|
501
|
+
}, _ref1))));
|
|
502
502
|
}
|
|
503
503
|
|
|
504
504
|
/**
|
|
505
505
|
* @deprecated
|
|
506
506
|
*/
|
|
507
|
-
function Nesting(
|
|
508
|
-
var
|
|
509
|
-
var forwardRef =
|
|
510
|
-
return /*#__PURE__*/React.createElement(DropdownMenu.Item,
|
|
507
|
+
function Nesting(_ref27) {
|
|
508
|
+
var _ref10 = arguments[0];
|
|
509
|
+
var forwardRef = _ref27.forwardRef;
|
|
510
|
+
return /*#__PURE__*/React.createElement(DropdownMenu.Item, _assignProps10({
|
|
511
511
|
"ref": forwardRef
|
|
512
|
-
},
|
|
512
|
+
}, _ref10));
|
|
513
513
|
}
|
|
514
514
|
|
|
515
515
|
/**
|
|
516
516
|
* @deprecated
|
|
517
517
|
*/
|
|
518
|
-
function NestingTrigger(
|
|
519
|
-
var
|
|
520
|
-
var forwardRef =
|
|
521
|
-
return /*#__PURE__*/React.createElement(DropdownMenu.Item.Content,
|
|
518
|
+
function NestingTrigger(_ref28) {
|
|
519
|
+
var _ref11 = arguments[0];
|
|
520
|
+
var forwardRef = _ref28.forwardRef;
|
|
521
|
+
return /*#__PURE__*/React.createElement(DropdownMenu.Item.Content, _assignProps11({
|
|
522
522
|
"tag": DropdownMenu.Trigger,
|
|
523
523
|
"ref": forwardRef,
|
|
524
524
|
"use:role": 'menuitem'
|
|
525
|
-
},
|
|
525
|
+
}, _ref11));
|
|
526
526
|
}
|
|
527
527
|
var DropdownMenu = createComponent(DropdownMenuRoot, {
|
|
528
528
|
Trigger: Trigger,
|