@semcore/dropdown-menu 4.39.1 → 4.40.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,682 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports["default"] = void 0;
9
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
- var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
11
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
12
- var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
13
- var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
14
- var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
15
- var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
16
- var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
17
- var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
18
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
19
- var _index = require("@semcore/utils/lib/core/index");
20
- var _core = _interopRequireWildcard(require("@semcore/core"));
21
- var _react = _interopRequireDefault(require("react"));
22
- var _classnames = _interopRequireDefault(require("classnames"));
23
- var _dropdown = _interopRequireDefault(require("@semcore/dropdown"));
24
- var _flexBox = require("@semcore/flex-box");
25
- var _scrollArea = _interopRequireWildcard(require("@semcore/scroll-area"));
26
- var _uniqueID = _interopRequireDefault(require("@semcore/utils/lib/uniqueID"));
27
- var _i18nEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/i18nEnhance"));
28
- 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
- var _setFocus = require("@semcore/utils/lib/focus-lock/setFocus");
32
- var _isFocusInside = require("@semcore/utils/lib/focus-lock/isFocusInside");
33
- var _getFocusableIn = require("@semcore/utils/lib/focus-lock/getFocusableIn");
34
- var _keyboardFocusEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/keyboardFocusEnhance"));
35
- var _excluded = ["className"];
36
- /*__reshadow-styles__:"./style/dropdown-menu-old.shadow.css"*/
37
- var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".___SDropdownMenuItem_l0ig1_gg_,.___SDropdownMenuList_l0ig1_gg_{position:relative;color:var(--intergalactic-text-primary, #191b23)}.___SDropdownMenuList_l0ig1_gg_{max-height:240px;padding:var(--intergalactic-spacing-1x, 4px)0;min-height:26px;min-width:32px;box-sizing:content-box;z-index:0}.___SDropdownMenuList_l0ig1_gg_ .___SShadowHorizontal_l0ig1_gg_:after,.___SDropdownMenuList_l0ig1_gg_ .___SShadowHorizontal_l0ig1_gg_:before{width:16px;height:100%;border-radius:var(--intergalactic-control-rounded, 6px)}.___SDropdownMenuList_l0ig1_gg_ .___SShadowHorizontal_l0ig1_gg_._position_median_l0ig1_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_l0ig1_gg_ .___SShadowHorizontal_l0ig1_gg_._position_median_l0ig1_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_l0ig1_gg_ .___SShadowHorizontal_l0ig1_gg_._position_start_l0ig1_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_l0ig1_gg_ .___SShadowHorizontal_l0ig1_gg_._position_end_l0ig1_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_l0ig1_gg_ .___SShadowVertical_l0ig1_gg_:after,.___SDropdownMenuList_l0ig1_gg_ .___SShadowVertical_l0ig1_gg_:before{width:100%;height:16px;border-radius:var(--intergalactic-control-rounded, 6px)}.___SDropdownMenuList_l0ig1_gg_ .___SShadowVertical_l0ig1_gg_._position_median_l0ig1_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_l0ig1_gg_ .___SShadowVertical_l0ig1_gg_._position_median_l0ig1_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_l0ig1_gg_ .___SShadowVertical_l0ig1_gg_._position_start_l0ig1_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_l0ig1_gg_ .___SShadowVertical_l0ig1_gg_._position_end_l0ig1_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 )}.___SDropdownMenuItem_l0ig1_gg_{display:flex;align-items:center;-webkit-text-decoration:none;text-decoration:none;box-sizing:border-box;cursor:pointer;width:100%;text-align:left;line-height:normal}@media (hover:hover){.___SDropdownMenuItem_l0ig1_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-hover, #f4f5f9)}}.___SDropdownMenuItem_l0ig1_gg_:focus{outline:0}.___SDropdownMenuItem_l0ig1_gg_.__selected_l0ig1_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){.___SDropdownMenuItem_l0ig1_gg_.__selected_l0ig1_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-selected-hover, #c4e5fe)}}.___SDropdownMenuItem_l0ig1_gg_.__highlighted_l0ig1_gg_:not(:focus-within){z-index:1;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5)) inset}.___SDropdownMenuItem_l0ig1_gg_.__disabled_l0ig1_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SDropdownMenuItem_l0ig1_gg_._size_l_l0ig1_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}.___SDropdownMenuItem_l0ig1_gg_._size_m_l0ig1_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}.___SDropdownMenuItem_l0ig1_gg_.__notInteractive_l0ig1_gg_{cursor:default}@media (hover:hover){.___SDropdownMenuItem_l0ig1_gg_.__notInteractive_l0ig1_gg_:hover{background:0 0}}.___SDropdownMenuItem_l0ig1_gg_._variant_hint_l0ig1_gg_{color:var(--intergalactic-text-secondary, #6c6e79);cursor:default}@media (hover:hover){.___SDropdownMenuItem_l0ig1_gg_._variant_hint_l0ig1_gg_:hover{background:0 0}}.___SDropdownMenuItem_l0ig1_gg_._variant_title_l0ig1_gg_{font-weight:var(--intergalactic-bold, 700);cursor:default}@media (hover:hover){.___SDropdownMenuItem_l0ig1_gg_._variant_title_l0ig1_gg_:hover{background:0 0}}.___SDropdownMenuItem_l0ig1_gg_.__visible_l0ig1_gg_{background-color:var(--intergalactic-dropdown-menu-item-hover, #f4f5f9)}.___SDropdownMenuItem_l0ig1_gg_.__nesting-trigger_l0ig1_gg_{justify-content:space-between}.___SDropdownMenuItemAddon_l0ig1_gg_{display:inline-flex;margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SDropdownMenuItemAddon_l0ig1_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_l0ig1_gg_:last-child{margin-right:0}.___SDropdownMenuNesting_l0ig1_gg_,.___SDropdownMenuNesting_l0ig1_gg_._size_l_l0ig1_gg_,.___SDropdownMenuNesting_l0ig1_gg_._size_m_l0ig1_gg_{padding:0}.___SDropdownMenuNesting_l0ig1_gg_.__highlighted_l0ig1_gg_{z-index:1;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5)) inset}.___SDropdownNestingItem_l0ig1_gg_._size_l_l0ig1_gg_,.___SDropdownNestingItem_l0ig1_gg_._size_m_l0ig1_gg_{padding-right:0}.___SDropdownNestingItem_l0ig1_gg_ .___SDropdownMenuItem_l0ig1_gg_{width:auto;padding-top:0;padding-bottom:0;padding-left:0;min-height:auto}" /*__inner_css_end__*/, "l0ig1_gg_") /*__reshadow_css_end__*/, {
38
- "__SDropdownMenuItem": "___SDropdownMenuItem_l0ig1_gg_",
39
- "_highlighted": "__highlighted_l0ig1_gg_",
40
- "_disabled": "__disabled_l0ig1_gg_",
41
- "_size_l": "_size_l_l0ig1_gg_",
42
- "_size_m": "_size_m_l0ig1_gg_",
43
- "_visible": "__visible_l0ig1_gg_",
44
- "_nesting-trigger": "__nesting-trigger_l0ig1_gg_",
45
- "__SDropdownMenuNesting": "___SDropdownMenuNesting_l0ig1_gg_",
46
- "__SDropdownNestingItem": "___SDropdownNestingItem_l0ig1_gg_",
47
- "__SDropdownMenuList": "___SDropdownMenuList_l0ig1_gg_",
48
- "__SShadowHorizontal": "___SShadowHorizontal_l0ig1_gg_",
49
- "_position_median": "_position_median_l0ig1_gg_",
50
- "_position_start": "_position_start_l0ig1_gg_",
51
- "_position_end": "_position_end_l0ig1_gg_",
52
- "__SShadowVertical": "___SShadowVertical_l0ig1_gg_",
53
- "_selected": "__selected_l0ig1_gg_",
54
- "_notInteractive": "__notInteractive_l0ig1_gg_",
55
- "_variant_hint": "_variant_hint_l0ig1_gg_",
56
- "_variant_title": "_variant_title_l0ig1_gg_",
57
- "__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_l0ig1_gg_"
58
- });
59
- var ListBoxContextProvider = function ListBoxContextProvider(_ref18) {
60
- var children = _ref18.children;
61
- return /*#__PURE__*/_react["default"].createElement(_scrollArea.hideScrollBarsFromScreenReadersContext.Provider, {
62
- value: true
63
- }, children);
64
- };
65
- var DropdownMenuRoot = /*#__PURE__*/function (_Component) {
66
- (0, _inherits2["default"])(DropdownMenuRoot, _Component);
67
- var _super = (0, _createSuper2["default"])(DropdownMenuRoot);
68
- function DropdownMenuRoot() {
69
- var _this;
70
- (0, _classCallCheck2["default"])(this, DropdownMenuRoot);
71
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
72
- args[_key] = arguments[_key];
73
- }
74
- _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
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "popperRef", /*#__PURE__*/_react["default"].createRef());
80
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "triggerRef", /*#__PURE__*/_react["default"].createRef());
81
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "itemProps", []);
82
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "itemRefs", []);
83
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "highlightedItemRef", /*#__PURE__*/_react["default"].createRef());
84
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "ignoreTriggerKeyboardFocusUntil", 0);
85
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "prevHighlightedIndex", null);
86
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "focusTrigger", function () {
87
- var trigger = _this.triggerRef.current;
88
- if (!trigger) return;
89
- if ((0, _isFocusInside.isFocusInside)(trigger)) return;
90
- (0, _setFocus.setFocus)(trigger);
91
- });
92
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "bindHandlerKeyDown", function (place) {
93
- return function (e) {
94
- var amount = e.shiftKey ? 5 : 1;
95
- var targetTagName = e.target.tagName;
96
- var _this$asProps = _this.asProps,
97
- visible = _this$asProps.visible,
98
- highlightedIndex = _this$asProps.highlightedIndex,
99
- placement = _this$asProps.placement;
100
- if (e.key === ' ' && ['INPUT', 'TEXTAREA'].includes(targetTagName)) return;
101
- if (e.key === 'Enter' && targetTagName === 'TEXTAREA') return;
102
- if (place === 'popper' && (e.key === ' ' || e.key === 'Enter') && (targetTagName === 'BUTTON' || targetTagName === 'A')) return;
103
- if (visible && e.key === 'Tab') {
104
- var item = highlightedIndex !== null && _this.itemRefs[highlightedIndex];
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;
113
- }
114
- if (e.key === 'Escape' && _this.state.focusLockItemIndex !== null) {
115
- _this.setState({
116
- focusLockItemIndex: null
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();
123
- _this.handlers.visible(true);
124
- }
125
- if (['ArrowLeft', 'ArrowRight'].includes(e.key) && !verticalPlacement) {
126
- var show = e.key === 'ArrowRight' && placement.startsWith('right') || e.key === 'ArrowLeft' && placement.startsWith('left');
127
- var hide = e.key === 'ArrowLeft' && placement.startsWith('right') || e.key === 'ArrowRight' && placement.startsWith('left');
128
- var visibleChanged = visible && hide || !visible && show;
129
- if (show) {
130
- _this.handlers.visible(true);
131
- } else if (hide) {
132
- _this.handlers.visible(false);
133
- }
134
- if (visibleChanged) {
135
- e.preventDefault();
136
- e.stopPropagation();
137
- return;
138
- }
139
- }
140
- if (e.key.startsWith('Arrow') && !_this.state.keyboardFocused) {
141
- _this.setState({
142
- keyboardFocused: true
143
- });
144
- }
145
- if (['ArrowLeft', 'ArrowRight'].includes(e.key)) {
146
- var _item = highlightedIndex !== null && _this.itemRefs[highlightedIndex];
147
- var focusable = (0, _getFocusableIn.getFocusableIn)(_item);
148
- if (focusable.length > 0 && _item) {
149
- var focusedIndex = focusable.indexOf(document.activeElement);
150
- if (e.key === 'ArrowRight') {
151
- if (focusedIndex === -1) {
152
- _this.setState({
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
- });
167
- }
168
- var prevFocused = focusable[focusedIndex - 1];
169
- if (prevFocused) {
170
- e.preventDefault();
171
- e.stopPropagation();
172
- prevFocused.focus();
173
- }
174
- }
175
- }
176
- }
177
- switch (e.key) {
178
- case 'ArrowDown':
179
- {
180
- if (visible) {
181
- _this.moveHighlightedIndex(amount, e);
182
- if ((0, _isFocusInside.isFocusInside)(_this.popperRef.current)) {
183
- _this.focusTrigger();
184
- }
185
- e.preventDefault();
186
- e.stopPropagation();
187
- }
188
- break;
189
- }
190
- case 'ArrowUp':
191
- {
192
- if (visible) {
193
- _this.moveHighlightedIndex(-amount, e);
194
- if ((0, _isFocusInside.isFocusInside)(_this.popperRef.current)) {
195
- _this.focusTrigger();
196
- }
197
- e.preventDefault();
198
- e.stopPropagation();
199
- }
200
- break;
201
- }
202
- case ' ':
203
- case 'Enter':
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);
211
- e.preventDefault();
212
- }
213
- }
214
- break;
215
- }
216
- };
217
- });
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
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "scrollToNode", function (node) {
283
- if (node) {
284
- _this.highlightedItemRef.current = node;
285
- }
286
- setTimeout(function () {
287
- if (node !== null && node !== void 0 && node.scrollIntoView) {
288
- if (_this.asProps.highlightedIndex !== _this.prevHighlightedIndex) {
289
- _this.prevHighlightedIndex = _this.asProps.highlightedIndex;
290
- node.scrollIntoView({
291
- block: 'nearest',
292
- inline: 'nearest'
293
- });
294
- }
295
- }
296
- }, 0);
297
- });
298
- return _this;
299
- }
300
- (0, _createClass2["default"])(DropdownMenuRoot, [{
301
- key: "uncontrolledProps",
302
- value: function uncontrolledProps() {
303
- return {
304
- highlightedIndex: null,
305
- visible: null
306
- };
307
- }
308
- }, {
309
- key: "getTriggerProps",
310
- value: function getTriggerProps() {
311
- var _this$asProps3 = this.asProps,
312
- size = _this$asProps3.size,
313
- uid = _this$asProps3.uid,
314
- disablePortal = _this$asProps3.disablePortal,
315
- visible = _this$asProps3.visible,
316
- getI18nText = _this$asProps3.getI18nText,
317
- highlightedIndex = _this$asProps3.highlightedIndex;
318
- return {
319
- size: size,
320
- id: "igc-".concat(uid, "-trigger"),
321
- 'aria-controls': "igc-".concat(uid, "-popper"),
322
- focusHint: visible && !disablePortal ? getI18nText('triggerHint') : undefined,
323
- 'aria-expanded': visible ? 'true' : 'false',
324
- 'aria-activedescendant': visible && highlightedIndex !== null ? "igc-".concat(uid, "-option-").concat(highlightedIndex) : undefined,
325
- onKeyDown: this.bindHandlerKeyDown('trigger'),
326
- ref: this.triggerRef,
327
- onKeyboardFocus: this.handleTriggerKeyboardFocus,
328
- onKeyboardFocusedStateChange: this.handleTriggerKeyboardFocusedStateChange
329
- };
330
- }
331
- }, {
332
- key: "getListProps",
333
- value: function getListProps() {
334
- var _this$asProps4 = this.asProps,
335
- size = _this$asProps4.size,
336
- uid = _this$asProps4.uid;
337
- return {
338
- size: size,
339
- uid: uid,
340
- index: this.asProps.highlightedIndex
341
- };
342
- }
343
- }, {
344
- key: "getPopperProps",
345
- value: function getPopperProps() {
346
- var _this$asProps5 = this.asProps,
347
- uid = _this$asProps5.uid,
348
- disablePortal = _this$asProps5.disablePortal,
349
- ignorePortalsStacking = _this$asProps5.ignorePortalsStacking,
350
- interaction = _this$asProps5.interaction,
351
- highlightedIndex = _this$asProps5.highlightedIndex;
352
- return {
353
- ref: this.popperRef,
354
- tabIndex: 0,
355
- onKeyDown: this.bindHandlerKeyDown('popper'),
356
- id: "igc-".concat(uid, "-popper"),
357
- disablePortal: disablePortal,
358
- ignorePortalsStacking: ignorePortalsStacking,
359
- focusMaster: interaction === 'click',
360
- hideFocus: highlightedIndex !== null,
361
- 'use:role': null,
362
- 'use:autoFocus': false
363
- };
364
- }
365
- }, {
366
- key: "getItemProps",
367
- value: function getItemProps(props, index) {
368
- var _this2 = this;
369
- var _this$asProps6 = this.asProps,
370
- size = _this$asProps6.size,
371
- highlightedIndex = _this$asProps6.highlightedIndex,
372
- uid = _this$asProps6.uid;
373
- var highlighted = index === highlightedIndex;
374
- var ref = function ref(node) {
375
- _this2.itemRefs[index] = node;
376
- };
377
- this.itemProps[index] = props;
378
- if (highlighted) {
379
- ref = function ref(node) {
380
- _this2.itemRefs[index] = node;
381
- _this2.scrollToNode(node);
382
- };
383
- }
384
- return {
385
- id: "igc-".concat(uid, "-option-").concat(index),
386
- size: size,
387
- highlighted: highlighted,
388
- focusLock: this.state.focusLockItemIndex === index,
389
- triggerRef: this.triggerRef,
390
- ref: ref,
391
- index: index,
392
- handleFocusOut: this.handleItemFocusOut,
393
- triggerKeyboardFocused: this.state.keyboardFocused
394
- };
395
- }
396
- }, {
397
- key: "getItemHintProps",
398
- value: function getItemHintProps() {
399
- var size = this.asProps.size;
400
- return {
401
- size: size
402
- };
403
- }
404
- }, {
405
- key: "getItemTitleProps",
406
- value: function getItemTitleProps() {
407
- var size = this.asProps.size;
408
- return {
409
- size: size
410
- };
411
- }
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
- }, {
446
- key: "componentDidUpdate",
447
- value: function componentDidUpdate(prevProps) {
448
- var _this3 = this;
449
- var visibilityChanged = this.asProps.visible !== prevProps.visible;
450
- if (visibilityChanged && prevProps.visible !== undefined) {
451
- if (!this.asProps.visible) {
452
- this.handlers.highlightedIndex(null);
453
- this.highlightedItemRef.current = null;
454
- this.ignoreTriggerKeyboardFocusUntil = Date.now() + 100;
455
- if (document.activeElement === document.body || (0, _isFocusInside.isFocusInside)(this.popperRef.current)) {
456
- (0, _setFocus.setFocus)(this.triggerRef.current);
457
- }
458
- }
459
- }
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
- }
477
- }, {
478
- key: "render",
479
- value: function render() {
480
- var _ref = this.asProps;
481
- var Children = this.asProps.Children;
482
- this.itemProps = [];
483
- return /*#__PURE__*/_react["default"].createElement(_dropdown["default"], (0, _core.assignProps)({}, _ref), /*#__PURE__*/_react["default"].createElement(Children, null));
484
- }
485
- }]);
486
- return DropdownMenuRoot;
487
- }(_core.Component);
488
- (0, _defineProperty2["default"])(DropdownMenuRoot, "displayName", 'DropdownMenu');
489
- (0, _defineProperty2["default"])(DropdownMenuRoot, "style", style);
490
- (0, _defineProperty2["default"])(DropdownMenuRoot, "enhance", [(0, _uniqueID["default"])(), (0, _i18nEnhance["default"])(_intergalacticDynamicLocales.localizedMessages)]);
491
- (0, _defineProperty2["default"])(DropdownMenuRoot, "defaultProps", {
492
- size: 'm',
493
- defaultVisible: false,
494
- defaultHighlightedIndex: null,
495
- i18n: _intergalacticDynamicLocales.localizedMessages,
496
- locale: 'en',
497
- interaction: 'click'
498
- });
499
- function List(props) {
500
- var _ref2 = arguments[0],
501
- _ref11;
502
- var SDropdownMenuList = _scrollArea["default"];
503
- var uid = props.uid;
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"),
508
- "shadow": true
509
- }, _ref2)))));
510
- }
511
- function Menu(props) {
512
- var _ref3 = arguments[0];
513
- var visible = props.visible,
514
- disablePortal = props.disablePortal,
515
- ignorePortalsStacking = props.ignorePortalsStacking,
516
- disableEnforceFocus = props.disableEnforceFocus,
517
- interaction = props.interaction,
518
- autoFocus = props.autoFocus,
519
- animationsDisabled = props.animationsDisabled;
520
- var popperProps = {
521
- visible: visible,
522
- disablePortal: disablePortal,
523
- ignorePortalsStacking: ignorePortalsStacking,
524
- disableEnforceFocus: disableEnforceFocus,
525
- interaction: interaction,
526
- autoFocus: autoFocus,
527
- animationsDisabled: animationsDisabled
528
- };
529
- return /*#__PURE__*/_react["default"].createElement(ListBoxContextProvider, null, /*#__PURE__*/_react["default"].createElement(DropdownMenu.Popper, popperProps, /*#__PURE__*/_react["default"].createElement(DropdownMenu.List, (0, _core.assignProps)({}, _ref3))));
530
- }
531
- function Item(_ref19) {
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) {
555
- var _ref5 = arguments[0],
556
- _ref13;
557
- var styles = _ref20.styles,
558
- disabled = _ref20.disabled;
559
- var SDropdownMenuNesting = DropdownMenu.Item;
560
- var contextValue = _react["default"].useMemo(function () {
561
- return {
562
- disabled: disabled
563
- };
564
- }, [disabled]);
565
- return /*#__PURE__*/_react["default"].createElement(NestingContext.Provider, {
566
- value: contextValue
567
- }, (_ref13 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SDropdownMenuNesting, _ref13.cn("SDropdownMenuNesting", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
568
- "aria-haspopup": 'true'
569
- }, _ref5))))));
570
- }
571
- function NestingTrigger(props) {
572
- var _ref6 = arguments[0],
573
- _ref14;
574
- var styles = props.styles,
575
- visible = props.visible,
576
- onNestedVisibleChange = props.onNestedVisibleChange;
577
- var SDropdownMenuItem = _flexBox.Flex;
578
- var nestingContext = _react["default"].useContext(NestingContext);
579
- var disabled = props.disabled || (nestingContext === null || nestingContext === void 0 ? void 0 : nestingContext.disabled);
580
- var lastUserInteractionRef = _react["default"].useRef(undefined);
581
- _react["default"].useEffect(function () {
582
- onNestedVisibleChange(lastUserInteractionRef.current);
583
- }, [visible]);
584
- var handleMouseEvent = _react["default"].useCallback(function () {
585
- lastUserInteractionRef.current = 'mouse';
586
- }, []);
587
- var handleKeyboardEvent = _react["default"].useCallback(function () {
588
- lastUserInteractionRef.current = 'keyboard';
589
- }, []);
590
- _react["default"].useEffect(function () {
591
- document.addEventListener('mouseover', handleMouseEvent, {
592
- capture: true
593
- });
594
- document.addEventListener('keydown', handleKeyboardEvent, {
595
- capture: true
596
- });
597
- return function () {
598
- document.removeEventListener('mouseover', handleMouseEvent, {
599
- capture: true
600
- });
601
- document.removeEventListener('keydown', handleKeyboardEvent, {
602
- capture: true
603
- });
604
- };
605
- }, []);
606
- return /*#__PURE__*/_react["default"].createElement(NestingContext.Provider, {
607
- value: null
608
- }, (_ref14 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SDropdownMenuItem, _ref14.cn("SDropdownMenuItem", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
609
- "nesting-trigger": true,
610
- "use:tabIndex": !disabled ? 0 : undefined
611
- }, _ref6))))));
612
- }
613
- function NestingItem(props) {
614
- var _ref7 = arguments[0],
615
- _ref15;
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))));
621
- }
622
- function Addon(props) {
623
- var _useBox = (0, _flexBox.useBox)(props, props.forwardRef),
624
- _useBox2 = (0, _slicedToArray2["default"])(_useBox, 2),
625
- SDropdownMenuItemAddon = _useBox2[0],
626
- _useBox2$ = _useBox2[1],
627
- className = _useBox2$.className,
628
- other = (0, _objectWithoutProperties2["default"])(_useBox2$, _excluded);
629
- var styles = (0, _core.sstyled)(props.styles);
630
- return /*#__PURE__*/_react["default"].createElement(SDropdownMenuItemAddon, (0, _extends2["default"])({
631
- className: (0, _classnames["default"])(styles.cn('SDropdownMenuItemAddon', props).className, className) || undefined
632
- }, other));
633
- }
634
- function Hint(props) {
635
- var _ref8 = arguments[0],
636
- _ref16;
637
- var SDropdownMenuItem = _flexBox.Flex;
638
- return _ref16 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SDropdownMenuItem, _ref16.cn("SDropdownMenuItem", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
639
- "variant": 'hint'
640
- }, _ref8))));
641
- }
642
- function Title(props) {
643
- var _ref9 = arguments[0],
644
- _ref17;
645
- var SDropdownMenuItem = _flexBox.Flex;
646
- return _ref17 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SDropdownMenuItem, _ref17.cn("SDropdownMenuItem", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
647
- "variant": 'title'
648
- }, _ref9))));
649
- }
650
- function Trigger(_ref21) {
651
- var _ref10 = arguments[0];
652
- var keyboardFocused = _ref21.keyboardFocused,
653
- onKeyboardFocusedStateChange = _ref21.onKeyboardFocusedStateChange;
654
- _react["default"].useEffect(function () {
655
- onKeyboardFocusedStateChange(keyboardFocused);
656
- }, [keyboardFocused, onKeyboardFocusedStateChange]);
657
- return /*#__PURE__*/_react["default"].createElement(_dropdown["default"].Trigger, (0, _core.assignProps)({
658
- "aria-haspopup": 'true'
659
- }, _ref10));
660
- }
661
- Trigger.enhance = [(0, _keyboardFocusEnhance["default"])(false)];
662
- var DropdownMenu = (0, _core["default"])(DropdownMenuRoot, {
663
- Trigger: Trigger,
664
- Popper: _dropdown["default"].Popper,
665
- List: List,
666
- Menu: Menu,
667
- Item: [Item, {
668
- Addon: Addon
669
- }],
670
- Nesting: [Nesting, {
671
- Trigger: NestingTrigger,
672
- Addon: Addon,
673
- Item: NestingItem
674
- }],
675
- ItemTitle: Title,
676
- ItemHint: Hint
677
- }, {
678
- parent: [_dropdown["default"]]
679
- });
680
- var _default = DropdownMenu;
681
- exports["default"] = _default;
682
- //# sourceMappingURL=DropdownMenuOld.js.map