@semcore/dropdown-menu 16.1.1 → 16.1.2-prerelease.1
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 +7 -0
- package/README.md +1 -31
- package/lib/cjs/DropdownMenu.js +111 -112
- 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 +108 -108
- 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 +101 -94
- package/lib/esm/translations/__intergalactic-dynamic-locales.mjs +2 -2
- package/lib/types/index.d.ts +9 -7
- package/package.json +13 -13
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [16.1.2] - 2025-06-12
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Deprecated `highlighted` property for `DropdownMenu.Item`.
|
|
10
|
+
- Supported changing handlers in `Popper` with interaction `focus`.
|
|
11
|
+
|
|
5
12
|
## [16.1.1] - 2025-05-30
|
|
6
13
|
|
|
7
14
|
### Changed
|
package/README.md
CHANGED
|
@@ -13,40 +13,10 @@
|
|
|
13
13
|
## Install
|
|
14
14
|
|
|
15
15
|
```sh
|
|
16
|
-
npm install
|
|
16
|
+
npm install @semcore/dropdown-menu
|
|
17
17
|
```
|
|
18
18
|
|
|
19
|
-
## Usage
|
|
20
19
|
|
|
21
|
-
```jsx
|
|
22
|
-
import DropdownMenu from 'intergalactic/dropdown-menu';
|
|
23
|
-
```
|
|
24
|
-
|
|
25
|
-
<details>
|
|
26
|
-
<summary>Alternative installation and use</summary>
|
|
27
|
-
|
|
28
|
-
**We do not recommend this usage path due to possible dependency and update issues.**
|
|
29
|
-
|
|
30
|
-
### Install
|
|
31
|
-
|
|
32
|
-
You can only install one package from the design system
|
|
33
|
-
|
|
34
|
-
```sh
|
|
35
|
-
npm install @semcore/dropdown-menu @semcore/core
|
|
36
|
-
```
|
|
37
|
-
|
|
38
|
-
`@semcore/core` - _is the basic package by which we create our components, and it contains all of the common logic
|
|
39
|
-
of the components that is discussed below. There should only be one version of the package in the project._
|
|
40
|
-
|
|
41
|
-
### Usage
|
|
42
|
-
|
|
43
|
-
You can use the package the same way but without `/ui/` in the import path.
|
|
44
|
-
|
|
45
|
-
```jsx
|
|
46
|
-
import DropdownMenu from '@semcore/dropdown-menu';
|
|
47
|
-
```
|
|
48
|
-
|
|
49
|
-
</details>
|
|
50
20
|
|
|
51
21
|
## 👤 Author
|
|
52
22
|
|
package/lib/cjs/DropdownMenu.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
|
|
4
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
@@ -13,74 +13,75 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
|
|
|
13
13
|
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
14
14
|
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
15
15
|
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
16
|
-
var
|
|
17
|
-
var
|
|
16
|
+
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
|
|
17
|
+
var _isNativeReflectConstruct2 = _interopRequireDefault(require("@babel/runtime/helpers/isNativeReflectConstruct"));
|
|
18
18
|
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
|
19
|
+
var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
|
|
19
20
|
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
20
|
-
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
|
|
21
21
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
22
22
|
var _core = require("@semcore/core");
|
|
23
|
-
var
|
|
24
|
-
var
|
|
23
|
+
var _button = _interopRequireDefault(require("@semcore/button"));
|
|
24
|
+
var _assignProps12 = require("@semcore/core/lib/utils/assignProps");
|
|
25
|
+
var _findComponent = require("@semcore/core/lib/utils/findComponent");
|
|
26
|
+
var _ref29 = require("@semcore/core/lib/utils/ref");
|
|
27
|
+
var _uniqueID = require("@semcore/core/lib/utils/uniqueID");
|
|
25
28
|
var _dropdown = _interopRequireWildcard(require("@semcore/dropdown"));
|
|
26
29
|
var _flexBox = require("@semcore/flex-box");
|
|
27
30
|
var _scrollArea = _interopRequireWildcard(require("@semcore/scroll-area"));
|
|
28
|
-
var _uniqueID = require("@semcore/core/lib/utils/uniqueID");
|
|
29
|
-
var _intergalacticDynamicLocales = require("./translations/__intergalactic-dynamic-locales");
|
|
30
|
-
var _findComponent = require("@semcore/core/lib/utils/findComponent");
|
|
31
|
-
var _ref31 = require("@semcore/core/lib/utils/ref");
|
|
32
|
-
var _assignProps14 = require("@semcore/core/lib/utils/assignProps");
|
|
33
|
-
var _button = _interopRequireDefault(require("@semcore/button"));
|
|
34
31
|
var _typography = require("@semcore/typography");
|
|
32
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
33
|
+
var _react = _interopRequireDefault(require("react"));
|
|
34
|
+
var _intergalacticDynamicLocales = require("./translations/__intergalactic-dynamic-locales");
|
|
35
35
|
var _excluded = ["className"];
|
|
36
|
+
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, (0, _isNativeReflectConstruct2["default"])() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
|
|
37
|
+
function _superPropGet(t, o, e, r) { var p = (0, _get2["default"])((0, _getPrototypeOf2["default"])(1 & r ? t.prototype : t), o, e); return 2 & r && "function" == typeof p ? function (t) { return p.apply(e, t); } : p; }
|
|
36
38
|
/*!__reshadow-styles__:"./style/dropdown-menu.shadow.css"*/
|
|
37
|
-
var style = (
|
|
39
|
+
var style = (/*__reshadow_css_start__*/_core.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_"),
|
|
38
40
|
/*__reshadow_css_end__*/
|
|
39
41
|
{
|
|
40
|
-
"__SDropdownMenuItemContainer": "
|
|
41
|
-
"_nesting-trigger": "__nesting-
|
|
42
|
-
"__SDropdownMenuNesting": "
|
|
43
|
-
"_size_l": "
|
|
44
|
-
"_size_m": "
|
|
45
|
-
"_highlighted": "
|
|
46
|
-
"__SDropdownNestingItem": "
|
|
47
|
-
"__SItemContent": "
|
|
48
|
-
"__SItemHint": "
|
|
49
|
-
"__SDropdownMenuList": "
|
|
50
|
-
"__SShadowHorizontal": "
|
|
51
|
-
"_position_median": "
|
|
52
|
-
"_position_start": "
|
|
53
|
-
"_position_end": "
|
|
54
|
-
"__SShadowVertical": "
|
|
55
|
-
"__SDropdownMenuItemAddon": "
|
|
56
|
-
"__SItemContentText": "
|
|
42
|
+
"__SDropdownMenuItemContainer": "___SDropdownMenuItemContainer_tcsd2_gg_",
|
|
43
|
+
"_nesting-trigger": "__nesting-trigger_tcsd2_gg_",
|
|
44
|
+
"__SDropdownMenuNesting": "___SDropdownMenuNesting_tcsd2_gg_",
|
|
45
|
+
"_size_l": "_size_l_tcsd2_gg_",
|
|
46
|
+
"_size_m": "_size_m_tcsd2_gg_",
|
|
47
|
+
"_highlighted": "__highlighted_tcsd2_gg_",
|
|
48
|
+
"__SDropdownNestingItem": "___SDropdownNestingItem_tcsd2_gg_",
|
|
49
|
+
"__SItemContent": "___SItemContent_tcsd2_gg_",
|
|
50
|
+
"__SItemHint": "___SItemHint_tcsd2_gg_",
|
|
51
|
+
"__SDropdownMenuList": "___SDropdownMenuList_tcsd2_gg_",
|
|
52
|
+
"__SShadowHorizontal": "___SShadowHorizontal_tcsd2_gg_",
|
|
53
|
+
"_position_median": "_position_median_tcsd2_gg_",
|
|
54
|
+
"_position_start": "_position_start_tcsd2_gg_",
|
|
55
|
+
"_position_end": "_position_end_tcsd2_gg_",
|
|
56
|
+
"__SShadowVertical": "___SShadowVertical_tcsd2_gg_",
|
|
57
|
+
"__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_tcsd2_gg_",
|
|
58
|
+
"__SItemContentText": "___SItemContentText_tcsd2_gg_"
|
|
57
59
|
});
|
|
58
|
-
var ListBoxContextProvider = function ListBoxContextProvider(
|
|
59
|
-
var children =
|
|
60
|
+
var ListBoxContextProvider = function ListBoxContextProvider(_ref20) {
|
|
61
|
+
var children = _ref20.children;
|
|
60
62
|
return /*#__PURE__*/_react["default"].createElement(_scrollArea.hideScrollBarsFromScreenReadersContext.Provider, {
|
|
61
63
|
value: true
|
|
62
64
|
}, children);
|
|
63
65
|
};
|
|
64
66
|
var menuItemContext = /*#__PURE__*/_react["default"].createContext({});
|
|
65
67
|
var DropdownMenuRoot = /*#__PURE__*/function (_AbstractDropdown) {
|
|
66
|
-
(0, _inherits2["default"])(DropdownMenuRoot, _AbstractDropdown);
|
|
67
|
-
var _super = (0, _createSuper2["default"])(DropdownMenuRoot);
|
|
68
68
|
function DropdownMenuRoot() {
|
|
69
69
|
var _this;
|
|
70
70
|
(0, _classCallCheck2["default"])(this, DropdownMenuRoot);
|
|
71
71
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
72
72
|
args[_key] = arguments[_key];
|
|
73
73
|
}
|
|
74
|
-
_this =
|
|
75
|
-
(0, _defineProperty2["default"])(
|
|
76
|
-
(0, _defineProperty2["default"])(
|
|
74
|
+
_this = _callSuper(this, DropdownMenuRoot, [].concat(args));
|
|
75
|
+
(0, _defineProperty2["default"])(_this, "actionsRef", /*#__PURE__*/_react["default"].createRef());
|
|
76
|
+
(0, _defineProperty2["default"])(_this, "role", 'menu');
|
|
77
77
|
return _this;
|
|
78
78
|
}
|
|
79
|
-
(0,
|
|
79
|
+
(0, _inherits2["default"])(DropdownMenuRoot, _AbstractDropdown);
|
|
80
|
+
return (0, _createClass2["default"])(DropdownMenuRoot, [{
|
|
80
81
|
key: "uncontrolledProps",
|
|
81
82
|
value: function uncontrolledProps() {
|
|
82
83
|
var _this2 = this;
|
|
83
|
-
return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, (
|
|
84
|
+
return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, _superPropGet(DropdownMenuRoot, "uncontrolledProps", this, 3)([])), {}, {
|
|
84
85
|
visible: [null, function (visible) {
|
|
85
86
|
if (visible === true) {
|
|
86
87
|
setTimeout(function () {
|
|
@@ -106,9 +107,9 @@ var DropdownMenuRoot = /*#__PURE__*/function (_AbstractDropdown) {
|
|
|
106
107
|
}, {
|
|
107
108
|
key: "itemRef",
|
|
108
109
|
value: function itemRef(props, index, node) {
|
|
109
|
-
(
|
|
110
|
+
_superPropGet(DropdownMenuRoot, "itemRef", this, 3)([props, index, node]);
|
|
110
111
|
if (node === document.activeElement) {
|
|
111
|
-
(
|
|
112
|
+
_superPropGet(DropdownMenuRoot, "scrollToNode", this, 3)([node]);
|
|
112
113
|
}
|
|
113
114
|
}
|
|
114
115
|
}, {
|
|
@@ -120,8 +121,8 @@ var DropdownMenuRoot = /*#__PURE__*/function (_AbstractDropdown) {
|
|
|
120
121
|
visible = _this$asProps.visible;
|
|
121
122
|
var hasMenu = (0, _findComponent.isAdvanceMode)(Children, [DropdownMenu.Menu.displayName]);
|
|
122
123
|
var ariaControls = hasMenu ? "igc-".concat(uid, "-list") : "igc-".concat(uid, "-popper");
|
|
123
|
-
return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, (
|
|
124
|
-
onKeyDown: (0,
|
|
124
|
+
return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, _superPropGet(DropdownMenuRoot, "getTriggerProps", this, 3)([])), {}, {
|
|
125
|
+
'onKeyDown': (0, _assignProps12.callAllEventHandlers)(this.handlePreventCommonKeyDown.bind(this), this.handleOpenKeyDown.bind(this), this.handleKeyDownForMenu('trigger')),
|
|
125
126
|
'aria-controls': visible ? ariaControls : undefined,
|
|
126
127
|
'aria-haspopup': hasMenu ? 'true' : 'dialog'
|
|
127
128
|
});
|
|
@@ -129,15 +130,15 @@ var DropdownMenuRoot = /*#__PURE__*/function (_AbstractDropdown) {
|
|
|
129
130
|
}, {
|
|
130
131
|
key: "getListProps",
|
|
131
132
|
value: function getListProps() {
|
|
132
|
-
return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, (
|
|
133
|
-
onKeyDown: (0,
|
|
133
|
+
return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, _superPropGet(DropdownMenuRoot, "getListProps", this, 3)([])), {}, {
|
|
134
|
+
onKeyDown: (0, _assignProps12.callAllEventHandlers)(this.handlePreventCommonKeyDown.bind(this), this.handleKeyDownForMenu('list'), this.handleArrowKeyDown.bind(this))
|
|
134
135
|
});
|
|
135
136
|
}
|
|
136
137
|
}, {
|
|
137
138
|
key: "getPopperProps",
|
|
138
139
|
value: function getPopperProps() {
|
|
139
|
-
return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, (
|
|
140
|
-
onKeyDown: (0,
|
|
140
|
+
return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, _superPropGet(DropdownMenuRoot, "getPopperProps", this, 3)([])), {}, {
|
|
141
|
+
onKeyDown: (0, _assignProps12.callAllEventHandlers)(this.handlePreventCommonKeyDown.bind(this), this.handlePreventPopperKeyDown.bind(this))
|
|
141
142
|
});
|
|
142
143
|
}
|
|
143
144
|
}, {
|
|
@@ -145,7 +146,7 @@ var DropdownMenuRoot = /*#__PURE__*/function (_AbstractDropdown) {
|
|
|
145
146
|
value: function getActionsProps() {
|
|
146
147
|
return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, this.getListProps()), {}, {
|
|
147
148
|
ref: this.actionsRef,
|
|
148
|
-
onKeyDown: (0,
|
|
149
|
+
onKeyDown: (0, _assignProps12.callAllEventHandlers)(this.handlePreventTabOnActions.bind(this), this.handlePreventCommonKeyDown.bind(this), this.handleKeyDownForMenu('list'), this.handleArrowKeyDown.bind(this))
|
|
149
150
|
});
|
|
150
151
|
}
|
|
151
152
|
}, {
|
|
@@ -158,7 +159,7 @@ var DropdownMenuRoot = /*#__PURE__*/function (_AbstractDropdown) {
|
|
|
158
159
|
visible = _this$asProps2.visible;
|
|
159
160
|
var realIndex = (_props$index = props.index) !== null && _props$index !== void 0 ? _props$index : index;
|
|
160
161
|
var isHighlighted = realIndex === highlightedIndex;
|
|
161
|
-
var itemProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, (
|
|
162
|
+
var itemProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, _superPropGet(DropdownMenuRoot, "getItemProps", this, 3)([props, realIndex])), {}, {
|
|
162
163
|
tabIndex: isHighlighted && visible ? 0 : -1,
|
|
163
164
|
ref: function ref(node) {
|
|
164
165
|
return _this3.itemRef(props, realIndex, node);
|
|
@@ -175,7 +176,7 @@ var DropdownMenuRoot = /*#__PURE__*/function (_AbstractDropdown) {
|
|
|
175
176
|
if (props.selected) {
|
|
176
177
|
itemProps['aria-checked'] = true;
|
|
177
178
|
}
|
|
178
|
-
if ((
|
|
179
|
+
if (_superPropGet(DropdownMenuRoot, "childRole", this, 1) === 'menuitemradio') {
|
|
179
180
|
itemProps.onClick = function () {
|
|
180
181
|
_this3.handlers.visible(false);
|
|
181
182
|
};
|
|
@@ -198,16 +199,16 @@ var DropdownMenuRoot = /*#__PURE__*/function (_AbstractDropdown) {
|
|
|
198
199
|
e.stopPropagation();
|
|
199
200
|
return false;
|
|
200
201
|
}
|
|
201
|
-
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'));
|
|
202
|
+
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')) || (e.key === 'Enter' || e.key === ' ') && !inlineActions;
|
|
202
203
|
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';
|
|
203
|
-
var isMenuItem = (_e$target$getAttribut = e.target.getAttribute('role')) === null || _e$target$getAttribut === void 0 ? void 0 : _e$target$getAttribut.startsWith((
|
|
204
|
+
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));
|
|
204
205
|
if (place === 'trigger' && (!visible || inlineActions) && show && isMenuItem) {
|
|
205
206
|
_this4.handlers.visible(true);
|
|
206
207
|
_this4.handlers.highlightedIndex(0);
|
|
207
208
|
setTimeout(function () {
|
|
208
209
|
var _this4$itemRefs$highl;
|
|
209
210
|
var highlightedIndex = _this4.asProps.highlightedIndex;
|
|
210
|
-
(_this4$itemRefs$highl = _this4.itemRefs[highlightedIndex]) === null || _this4$itemRefs$highl === void 0
|
|
211
|
+
(_this4$itemRefs$highl = _this4.itemRefs[highlightedIndex]) === null || _this4$itemRefs$highl === void 0 || _this4$itemRefs$highl.focus();
|
|
211
212
|
}, 0);
|
|
212
213
|
e.preventDefault();
|
|
213
214
|
e.stopPropagation();
|
|
@@ -217,7 +218,7 @@ var DropdownMenuRoot = /*#__PURE__*/function (_AbstractDropdown) {
|
|
|
217
218
|
if (!inlineActions || inlineActions && (e.key === 'Escape' || _this4.asProps.highlightedIndex === 0)) {
|
|
218
219
|
var _this4$triggerRef$cur;
|
|
219
220
|
_this4.handlers.visible(false);
|
|
220
|
-
(_this4$triggerRef$cur = _this4.triggerRef.current) === null || _this4$triggerRef$cur === void 0
|
|
221
|
+
(_this4$triggerRef$cur = _this4.triggerRef.current) === null || _this4$triggerRef$cur === void 0 || _this4$triggerRef$cur.focus();
|
|
221
222
|
e.preventDefault();
|
|
222
223
|
e.stopPropagation();
|
|
223
224
|
return false;
|
|
@@ -251,7 +252,6 @@ var DropdownMenuRoot = /*#__PURE__*/function (_AbstractDropdown) {
|
|
|
251
252
|
}, _ref), /*#__PURE__*/_react["default"].createElement(Children, null)));
|
|
252
253
|
}
|
|
253
254
|
}]);
|
|
254
|
-
return DropdownMenuRoot;
|
|
255
255
|
}(_dropdown.AbstractDropdown);
|
|
256
256
|
(0, _defineProperty2["default"])(DropdownMenuRoot, "displayName", 'DropdownMenu');
|
|
257
257
|
(0, _defineProperty2["default"])(DropdownMenuRoot, "style", style);
|
|
@@ -272,28 +272,28 @@ var DropdownMenuRoot = /*#__PURE__*/function (_AbstractDropdown) {
|
|
|
272
272
|
trigger: [['onClick', 'onMouseEnter'], ['onClick', 'onMouseLeave']],
|
|
273
273
|
popper: [['onMouseEnter'], ['onMouseLeave']]
|
|
274
274
|
});
|
|
275
|
-
function List(
|
|
275
|
+
function List(_ref21) {
|
|
276
276
|
var _ref2 = arguments[0],
|
|
277
|
-
|
|
278
|
-
var styles =
|
|
279
|
-
Children =
|
|
277
|
+
_ref12;
|
|
278
|
+
var styles = _ref21.styles,
|
|
279
|
+
Children = _ref21.Children;
|
|
280
280
|
var SDropdownMenuList = _scrollArea["default"];
|
|
281
|
-
return
|
|
281
|
+
return _ref12 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(ListBoxContextProvider, _ref12.cn("ListBoxContextProvider", {}), /*#__PURE__*/_react["default"].createElement(SDropdownMenuList, _ref12.cn("SDropdownMenuList", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
|
|
282
282
|
"shadow": true
|
|
283
283
|
}, _ref2))), /*#__PURE__*/_react["default"].createElement(_scrollArea["default"].Container, {
|
|
284
284
|
tabIndex: undefined
|
|
285
|
-
}, /*#__PURE__*/_react["default"].createElement(Children,
|
|
285
|
+
}, /*#__PURE__*/_react["default"].createElement(Children, _ref12.cn("Children", {}))), /*#__PURE__*/_react["default"].createElement(_scrollArea["default"].Bar, {
|
|
286
286
|
orientation: "horizontal"
|
|
287
287
|
}), /*#__PURE__*/_react["default"].createElement(_scrollArea["default"].Bar, {
|
|
288
288
|
orientation: "vertical"
|
|
289
289
|
})));
|
|
290
290
|
}
|
|
291
|
-
function Actions(
|
|
291
|
+
function Actions(_ref22) {
|
|
292
292
|
var _ref3 = arguments[0],
|
|
293
|
-
|
|
294
|
-
var styles =
|
|
293
|
+
_ref13;
|
|
294
|
+
var styles = _ref22.styles;
|
|
295
295
|
var SDropdownMenuActions = _flexBox.Flex;
|
|
296
|
-
return
|
|
296
|
+
return _ref13 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SDropdownMenuActions, _ref13.cn("SDropdownMenuActions", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({}, _ref3))));
|
|
297
297
|
}
|
|
298
298
|
function Menu(props) {
|
|
299
299
|
var _ref4 = arguments[0];
|
|
@@ -317,18 +317,18 @@ function Menu(props) {
|
|
|
317
317
|
role: null
|
|
318
318
|
}), /*#__PURE__*/_react["default"].createElement(DropdownMenu.List, (0, _core.assignProps)({}, _ref4))));
|
|
319
319
|
}
|
|
320
|
-
function Item(
|
|
320
|
+
function Item(_ref23) {
|
|
321
321
|
var _ref5 = arguments[0],
|
|
322
|
-
|
|
323
|
-
var id =
|
|
324
|
-
styles =
|
|
325
|
-
disabled =
|
|
326
|
-
Children =
|
|
327
|
-
forwardRef =
|
|
328
|
-
role =
|
|
329
|
-
tabIndex =
|
|
330
|
-
actionsRef =
|
|
331
|
-
ariaChecked =
|
|
322
|
+
_ref14;
|
|
323
|
+
var id = _ref23.id,
|
|
324
|
+
styles = _ref23.styles,
|
|
325
|
+
disabled = _ref23.disabled,
|
|
326
|
+
Children = _ref23.Children,
|
|
327
|
+
forwardRef = _ref23.forwardRef,
|
|
328
|
+
role = _ref23.role,
|
|
329
|
+
tabIndex = _ref23.tabIndex,
|
|
330
|
+
actionsRef = _ref23.actionsRef,
|
|
331
|
+
ariaChecked = _ref23['aria-checked'];
|
|
332
332
|
var SDropdownMenuItemContainer = _dropdown["default"].Item;
|
|
333
333
|
var itemRef = _react["default"].useRef();
|
|
334
334
|
var _React$useState = _react["default"].useState(false),
|
|
@@ -337,7 +337,7 @@ function Item(_ref25) {
|
|
|
337
337
|
setHighlighted = _React$useState2[1];
|
|
338
338
|
var menuItemContextValue = {
|
|
339
339
|
contentId: id,
|
|
340
|
-
ref: (0,
|
|
340
|
+
ref: (0, _ref29.forkRef)(forwardRef, itemRef),
|
|
341
341
|
role: role,
|
|
342
342
|
tabIndex: tabIndex,
|
|
343
343
|
ariaChecked: ariaChecked
|
|
@@ -387,16 +387,16 @@ function Item(_ref25) {
|
|
|
387
387
|
});
|
|
388
388
|
};
|
|
389
389
|
}, [itemRef.current]);
|
|
390
|
-
return
|
|
390
|
+
return _ref14 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(menuItemContext.Provider, {
|
|
391
391
|
value: menuItemContextValue
|
|
392
|
-
}, /*#__PURE__*/_react["default"].createElement(SDropdownMenuItemContainer,
|
|
392
|
+
}, /*#__PURE__*/_react["default"].createElement(SDropdownMenuItemContainer, _ref14.cn("SDropdownMenuItemContainer", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
|
|
393
393
|
"ref": advancedMode ? undefined : menuItemContextValue.ref,
|
|
394
394
|
"use:highlighted": !disabled && highlighted && _core.lastInteraction.isKeyboard(),
|
|
395
395
|
"use:role": advancedMode ? undefined : role,
|
|
396
396
|
"use:id": advancedMode ? undefined : id,
|
|
397
397
|
"use:tabIndex": advancedMode ? undefined : tabIndex,
|
|
398
398
|
"use:aria-checked": advancedMode ? undefined : ariaChecked
|
|
399
|
-
}, _ref5))), /*#__PURE__*/_react["default"].createElement(Children,
|
|
399
|
+
}, _ref5))), /*#__PURE__*/_react["default"].createElement(Children, _ref14.cn("Children", {}))));
|
|
400
400
|
}
|
|
401
401
|
function Addon(props) {
|
|
402
402
|
var _useBox = (0, _flexBox.useBox)(props, props.forwardRef),
|
|
@@ -414,10 +414,10 @@ function Trigger() {
|
|
|
414
414
|
var _ref6 = arguments[0];
|
|
415
415
|
return /*#__PURE__*/_react["default"].createElement(_dropdown["default"].Trigger, (0, _core.assignProps)({}, _ref6));
|
|
416
416
|
}
|
|
417
|
-
function ItemContent(
|
|
417
|
+
function ItemContent(_ref24) {
|
|
418
418
|
var _ref7 = arguments[0],
|
|
419
|
-
|
|
420
|
-
var styles =
|
|
419
|
+
_ref15;
|
|
420
|
+
var styles = _ref24.styles;
|
|
421
421
|
var SItemContent = _flexBox.Flex;
|
|
422
422
|
var ref = _react["default"].useRef();
|
|
423
423
|
var menuItemCtxValue = _react["default"].useContext(menuItemContext);
|
|
@@ -439,11 +439,11 @@ function ItemContent(_ref26) {
|
|
|
439
439
|
});
|
|
440
440
|
}
|
|
441
441
|
}, [menuItemCtxValue.ariaDescribes]);
|
|
442
|
-
return
|
|
442
|
+
return _ref15 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SItemContent, _ref15.cn("SItemContent", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
|
|
443
443
|
"role": menuItemCtxValue.role,
|
|
444
444
|
"id": menuItemCtxValue.contentId,
|
|
445
445
|
"tabIndex": menuItemCtxValue.tabIndex,
|
|
446
|
-
"ref": (0,
|
|
446
|
+
"ref": (0, _ref29.forkRef)(menuItemCtxValue.ref, ref),
|
|
447
447
|
"use:aria-describedby": (0, _toConsumableArray2["default"])(describedby).join(' '),
|
|
448
448
|
"aria-haspopup": menuItemCtxValue.hasSubMenu ? 'true' : undefined,
|
|
449
449
|
"aria-expanded": subMenu,
|
|
@@ -452,21 +452,21 @@ function ItemContent(_ref26) {
|
|
|
452
452
|
"justifyContent": menuItemCtxValue.hasSubMenu ? 'space-between' : undefined
|
|
453
453
|
}, _ref7))));
|
|
454
454
|
}
|
|
455
|
-
function ItemContentText(
|
|
455
|
+
function ItemContentText(_ref25) {
|
|
456
456
|
var _ref8 = arguments[0],
|
|
457
|
-
|
|
458
|
-
var styles =
|
|
457
|
+
_ref16;
|
|
458
|
+
var styles = _ref25.styles;
|
|
459
459
|
var SItemContentText = _typography.Text;
|
|
460
|
-
return
|
|
460
|
+
return _ref16 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SItemContentText, _ref16.cn("SItemContentText", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({}, _ref8))));
|
|
461
461
|
}
|
|
462
|
-
function ItemHint(
|
|
462
|
+
function ItemHint(_ref26) {
|
|
463
463
|
var _ref9 = arguments[0],
|
|
464
|
-
|
|
465
|
-
var styles =
|
|
464
|
+
_ref17;
|
|
465
|
+
var styles = _ref26.styles;
|
|
466
466
|
var SItemHint = _flexBox.Flex;
|
|
467
467
|
var _React$useContext = _react["default"].useContext(menuItemContext),
|
|
468
468
|
hintId = _React$useContext.hintId;
|
|
469
|
-
return
|
|
469
|
+
return _ref17 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SItemHint, _ref17.cn("SItemHint", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
|
|
470
470
|
"id": hintId,
|
|
471
471
|
"aria-hidden": 'true'
|
|
472
472
|
}, _ref9))));
|
|
@@ -476,47 +476,47 @@ function ItemHint(_ref28) {
|
|
|
476
476
|
* @deprecated Use Item hint
|
|
477
477
|
*/
|
|
478
478
|
function Hint(props) {
|
|
479
|
-
var
|
|
480
|
-
|
|
479
|
+
var _ref0 = arguments[0],
|
|
480
|
+
_ref18;
|
|
481
481
|
var SDropdownMenuItemContainer = _dropdown["default"].Item;
|
|
482
|
-
return
|
|
482
|
+
return _ref18 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SDropdownMenuItemContainer, _ref18.cn("SDropdownMenuItemContainer", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
|
|
483
483
|
"variant": 'hint'
|
|
484
|
-
},
|
|
484
|
+
}, _ref0))));
|
|
485
485
|
}
|
|
486
486
|
/**
|
|
487
487
|
* @deprecated Use Group with title prop
|
|
488
488
|
*/
|
|
489
489
|
function Title(props) {
|
|
490
|
-
var
|
|
491
|
-
|
|
490
|
+
var _ref1 = arguments[0],
|
|
491
|
+
_ref19;
|
|
492
492
|
var SDropdownMenuItemContainer = _dropdown["default"].Item;
|
|
493
|
-
return
|
|
493
|
+
return _ref19 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SDropdownMenuItemContainer, _ref19.cn("SDropdownMenuItemContainer", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
|
|
494
494
|
"variant": 'title'
|
|
495
|
-
},
|
|
495
|
+
}, _ref1))));
|
|
496
496
|
}
|
|
497
497
|
|
|
498
498
|
/**
|
|
499
499
|
* @deprecated
|
|
500
500
|
*/
|
|
501
|
-
function Nesting(
|
|
502
|
-
var
|
|
503
|
-
var forwardRef =
|
|
501
|
+
function Nesting(_ref27) {
|
|
502
|
+
var _ref10 = arguments[0];
|
|
503
|
+
var forwardRef = _ref27.forwardRef;
|
|
504
504
|
return /*#__PURE__*/_react["default"].createElement(DropdownMenu.Item, (0, _core.assignProps)({
|
|
505
505
|
"ref": forwardRef
|
|
506
|
-
},
|
|
506
|
+
}, _ref10));
|
|
507
507
|
}
|
|
508
508
|
|
|
509
509
|
/**
|
|
510
510
|
* @deprecated
|
|
511
511
|
*/
|
|
512
|
-
function NestingTrigger(
|
|
513
|
-
var
|
|
514
|
-
var forwardRef =
|
|
512
|
+
function NestingTrigger(_ref28) {
|
|
513
|
+
var _ref11 = arguments[0];
|
|
514
|
+
var forwardRef = _ref28.forwardRef;
|
|
515
515
|
return /*#__PURE__*/_react["default"].createElement(DropdownMenu.Item.Content, (0, _core.assignProps)({
|
|
516
516
|
"tag": DropdownMenu.Trigger,
|
|
517
517
|
"ref": forwardRef,
|
|
518
518
|
"use:role": 'menuitem'
|
|
519
|
-
},
|
|
519
|
+
}, _ref11));
|
|
520
520
|
}
|
|
521
521
|
var DropdownMenu = (0, _core.createComponent)(DropdownMenuRoot, {
|
|
522
522
|
Trigger: Trigger,
|
|
@@ -544,6 +544,5 @@ var DropdownMenu = (0, _core.createComponent)(DropdownMenuRoot, {
|
|
|
544
544
|
parent: [_dropdown["default"]]
|
|
545
545
|
});
|
|
546
546
|
DropdownMenu.selectedIndexContext = _dropdown.selectedIndexContext;
|
|
547
|
-
var _default = DropdownMenu;
|
|
548
|
-
exports["default"] = _default;
|
|
547
|
+
var _default = exports["default"] = DropdownMenu;
|
|
549
548
|
//# sourceMappingURL=DropdownMenu.js.map
|