@semcore/dropdown-menu 16.0.0-prerelease.4 → 16.0.0-prerelease.7

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,382 +1,478 @@
1
- import Q from "@babel/runtime/helpers/esm/toConsumableArray";
2
- import X from "@babel/runtime/helpers/esm/objectWithoutProperties";
3
- import N from "@babel/runtime/helpers/esm/slicedToArray";
4
- import W from "@babel/runtime/helpers/esm/extends";
5
- import u from "@babel/runtime/helpers/esm/objectSpread2";
6
- import Y from "@babel/runtime/helpers/esm/classCallCheck";
7
- import Z from "@babel/runtime/helpers/esm/createClass";
8
- import O from "@babel/runtime/helpers/esm/assertThisInitialized";
9
- import x from "@babel/runtime/helpers/esm/get";
10
- import y from "@babel/runtime/helpers/esm/getPrototypeOf";
11
- import ee from "@babel/runtime/helpers/esm/inherits";
12
- import te from "@babel/runtime/helpers/esm/createSuper";
13
- import M from "@babel/runtime/helpers/esm/defineProperty";
14
- import { sstyled as b, createComponent as ne, assignProps as f, lastInteraction as re } from "@semcore/core";
15
- import i from "react";
16
- import oe from "classnames";
17
- import D, { enhance as ie, selectedIndexContext as q, AbstractDropdown as ae } from "@semcore/dropdown";
18
- import { useBox as _e, Flex as z } from "@semcore/flex-box";
19
- import k, { hideScrollBarsFromScreenReadersContext as se } from "@semcore/scroll-area";
20
- import { useUID as ge } from "@semcore/core/lib/utils/uniqueID";
21
- import { localizedMessages as de } from "./translations/__intergalactic-dynamic-locales.mjs";
22
- import { isAdvanceMode as L } from "@semcore/core/lib/utils/findComponent";
23
- import { forkRef as G } from "@semcore/core/lib/utils/ref";
24
- import { callAllEventHandlers as A } from "@semcore/core/lib/utils/assignProps";
25
- import le from "@semcore/button";
26
- import { Text as ue } from "@semcore/typography";
27
- var ce = ["className"], pe = (
1
+ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
2
+ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
3
+ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
4
+ import _extends from "@babel/runtime/helpers/esm/extends";
5
+ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
6
+ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
7
+ import _createClass from "@babel/runtime/helpers/esm/createClass";
8
+ import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
9
+ import _get from "@babel/runtime/helpers/esm/get";
10
+ import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
11
+ import _inherits from "@babel/runtime/helpers/esm/inherits";
12
+ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
13
+ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
14
+ import { sstyled, createComponent, assignProps, lastInteraction } from "@semcore/core";
15
+ import React from "react";
16
+ import cn from "classnames";
17
+ import Dropdown, { enhance, selectedIndexContext, AbstractDropdown } from "@semcore/dropdown";
18
+ import { useBox, Flex } from "@semcore/flex-box";
19
+ import ScrollAreaComponent, { hideScrollBarsFromScreenReadersContext } from "@semcore/scroll-area";
20
+ import { useUID } from "@semcore/core/lib/utils/uniqueID";
21
+ import { localizedMessages } from "./translations/__intergalactic-dynamic-locales.mjs";
22
+ import { isAdvanceMode } from "@semcore/core/lib/utils/findComponent";
23
+ import { forkRef } from "@semcore/core/lib/utils/ref";
24
+ import { callAllEventHandlers } from "@semcore/core/lib/utils/assignProps";
25
+ import ButtonComponent from "@semcore/button";
26
+ import { Text } from "@semcore/typography";
27
+ var _excluded = ["className"];
28
+ var style = (
28
29
  /*__reshadow_css_start__*/
29
- (b.insert(
30
+ (sstyled.insert(
30
31
  /*__inner_css_start__*/
31
- `.___SDropdownMenuList_g9pft_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_g9pft_gg_ .___SShadowHorizontal_g9pft_gg_:after,.___SDropdownMenuList_g9pft_gg_ .___SShadowHorizontal_g9pft_gg_:before{width:16px;height:100%;border-radius:var(--intergalactic-control-rounded, 6px)}.___SDropdownMenuList_g9pft_gg_ .___SShadowHorizontal_g9pft_gg_._position_median_g9pft_gg_:before{background:var(--intergalactic-scroll-area-dropdown-menu-left,
32
- linear-gradient(to right, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)
33
- )}.___SDropdownMenuList_g9pft_gg_ .___SShadowHorizontal_g9pft_gg_._position_median_g9pft_gg_:after{background:var(--intergalactic-scroll-area-dropdown-menu-right,
34
- linear-gradient(to left, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)
35
- )}.___SDropdownMenuList_g9pft_gg_ .___SShadowHorizontal_g9pft_gg_._position_start_g9pft_gg_:before{background:var(--intergalactic-scroll-area-dropdown-menu-left,
36
- linear-gradient(to right, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)
37
- )}.___SDropdownMenuList_g9pft_gg_ .___SShadowHorizontal_g9pft_gg_._position_end_g9pft_gg_:after{background:var(--intergalactic-scroll-area-dropdown-menu-right,
38
- linear-gradient(to left, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)
39
- )}.___SDropdownMenuList_g9pft_gg_ .___SShadowVertical_g9pft_gg_:after,.___SDropdownMenuList_g9pft_gg_ .___SShadowVertical_g9pft_gg_:before{width:100%;height:16px;border-radius:var(--intergalactic-control-rounded, 6px)}.___SDropdownMenuList_g9pft_gg_ .___SShadowVertical_g9pft_gg_._position_median_g9pft_gg_:before{background:var(--intergalactic-scroll-area-dropdown-menu-top,
40
- linear-gradient(to bottom, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)
41
- )}.___SDropdownMenuList_g9pft_gg_ .___SShadowVertical_g9pft_gg_._position_median_g9pft_gg_:after{background:var(--intergalactic-scroll-area-dropdown-menu-bottom,
42
- linear-gradient(to top, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)
43
- )}.___SDropdownMenuList_g9pft_gg_ .___SShadowVertical_g9pft_gg_._position_start_g9pft_gg_:before{background:var(--intergalactic-scroll-area-dropdown-menu-top,
44
- linear-gradient(to bottom, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)
45
- )}.___SDropdownMenuList_g9pft_gg_ .___SShadowVertical_g9pft_gg_._position_end_g9pft_gg_:after{background:var(--intergalactic-scroll-area-dropdown-menu-bottom,
46
- linear-gradient(to top, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)
47
- )}.___SDropdownMenuItemContainer_g9pft_gg_.__nesting-trigger_g9pft_gg_{justify-content:space-between}.___SDropdownMenuItemAddon_g9pft_gg_,.___SItemContentText_g9pft_gg_{display:inline-flex;margin-left:var(--intergalactic-spacing-1x, 4px);margin-right:var(--intergalactic-spacing-1x, 4px)}.___SDropdownMenuItemAddon_g9pft_gg_:first-child,.___SItemContentText_g9pft_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_g9pft_gg_:last-child,.___SItemContentText_g9pft_gg_:last-child{margin-right:0}.___SDropdownMenuNesting_g9pft_gg_,.___SDropdownMenuNesting_g9pft_gg_._size_l_g9pft_gg_,.___SDropdownMenuNesting_g9pft_gg_._size_m_g9pft_gg_{padding:0}.___SDropdownMenuNesting_g9pft_gg_.__highlighted_g9pft_gg_{z-index:1;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5)) inset}.___SDropdownNestingItem_g9pft_gg_._size_l_g9pft_gg_,.___SDropdownNestingItem_g9pft_gg_._size_m_g9pft_gg_{padding-right:0}.___SDropdownNestingItem_g9pft_gg_ .___SDropdownMenuItemContainer_g9pft_gg_{width:auto;padding-top:0;padding-bottom:0;padding-left:0;min-height:auto}.___SItemContent_g9pft_gg_:focus{outline:0}.___SItemHint_g9pft_gg_{color:var(--intergalactic-text-secondary, #6c6e79)}`,
32
+ ".___SDropdownMenuList_g9pft_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_g9pft_gg_ .___SShadowHorizontal_g9pft_gg_:after,.___SDropdownMenuList_g9pft_gg_ .___SShadowHorizontal_g9pft_gg_:before{width:16px;height:100%;border-radius:var(--intergalactic-control-rounded, 6px)}.___SDropdownMenuList_g9pft_gg_ .___SShadowHorizontal_g9pft_gg_._position_median_g9pft_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_g9pft_gg_ .___SShadowHorizontal_g9pft_gg_._position_median_g9pft_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_g9pft_gg_ .___SShadowHorizontal_g9pft_gg_._position_start_g9pft_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_g9pft_gg_ .___SShadowHorizontal_g9pft_gg_._position_end_g9pft_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_g9pft_gg_ .___SShadowVertical_g9pft_gg_:after,.___SDropdownMenuList_g9pft_gg_ .___SShadowVertical_g9pft_gg_:before{width:100%;height:16px;border-radius:var(--intergalactic-control-rounded, 6px)}.___SDropdownMenuList_g9pft_gg_ .___SShadowVertical_g9pft_gg_._position_median_g9pft_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_g9pft_gg_ .___SShadowVertical_g9pft_gg_._position_median_g9pft_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_g9pft_gg_ .___SShadowVertical_g9pft_gg_._position_start_g9pft_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_g9pft_gg_ .___SShadowVertical_g9pft_gg_._position_end_g9pft_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_g9pft_gg_.__nesting-trigger_g9pft_gg_{justify-content:space-between}.___SDropdownMenuItemAddon_g9pft_gg_,.___SItemContentText_g9pft_gg_{display:inline-flex;margin-left:var(--intergalactic-spacing-1x, 4px);margin-right:var(--intergalactic-spacing-1x, 4px)}.___SDropdownMenuItemAddon_g9pft_gg_:first-child,.___SItemContentText_g9pft_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_g9pft_gg_:last-child,.___SItemContentText_g9pft_gg_:last-child{margin-right:0}.___SDropdownMenuNesting_g9pft_gg_,.___SDropdownMenuNesting_g9pft_gg_._size_l_g9pft_gg_,.___SDropdownMenuNesting_g9pft_gg_._size_m_g9pft_gg_{padding:0}.___SDropdownMenuNesting_g9pft_gg_.__highlighted_g9pft_gg_{z-index:1;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5)) inset}.___SDropdownNestingItem_g9pft_gg_._size_l_g9pft_gg_,.___SDropdownNestingItem_g9pft_gg_._size_m_g9pft_gg_{padding-right:0}.___SDropdownNestingItem_g9pft_gg_ .___SDropdownMenuItemContainer_g9pft_gg_{width:auto;padding-top:0;padding-bottom:0;padding-left:0;min-height:auto}.___SItemContent_g9pft_gg_:focus{outline:0}.___SItemHint_g9pft_gg_{color:var(--intergalactic-text-secondary, #6c6e79)}",
48
33
  "g9pft_gg_"
49
34
  ), {
50
- __SDropdownMenuItemContainer: "___SDropdownMenuItemContainer_g9pft_gg_",
35
+ "__SDropdownMenuItemContainer": "___SDropdownMenuItemContainer_g9pft_gg_",
51
36
  "_nesting-trigger": "__nesting-trigger_g9pft_gg_",
52
- __SDropdownMenuNesting: "___SDropdownMenuNesting_g9pft_gg_",
53
- _size_l: "_size_l_g9pft_gg_",
54
- _size_m: "_size_m_g9pft_gg_",
55
- _highlighted: "__highlighted_g9pft_gg_",
56
- __SDropdownNestingItem: "___SDropdownNestingItem_g9pft_gg_",
57
- __SItemContent: "___SItemContent_g9pft_gg_",
58
- __SItemHint: "___SItemHint_g9pft_gg_",
59
- __SDropdownMenuList: "___SDropdownMenuList_g9pft_gg_",
60
- __SShadowHorizontal: "___SShadowHorizontal_g9pft_gg_",
61
- _position_median: "_position_median_g9pft_gg_",
62
- _position_start: "_position_start_g9pft_gg_",
63
- _position_end: "_position_end_g9pft_gg_",
64
- __SShadowVertical: "___SShadowVertical_g9pft_gg_",
65
- __SDropdownMenuItemAddon: "___SDropdownMenuItemAddon_g9pft_gg_",
66
- __SItemContentText: "___SItemContentText_g9pft_gg_"
37
+ "__SDropdownMenuNesting": "___SDropdownMenuNesting_g9pft_gg_",
38
+ "_size_l": "_size_l_g9pft_gg_",
39
+ "_size_m": "_size_m_g9pft_gg_",
40
+ "_highlighted": "__highlighted_g9pft_gg_",
41
+ "__SDropdownNestingItem": "___SDropdownNestingItem_g9pft_gg_",
42
+ "__SItemContent": "___SItemContent_g9pft_gg_",
43
+ "__SItemHint": "___SItemHint_g9pft_gg_",
44
+ "__SDropdownMenuList": "___SDropdownMenuList_g9pft_gg_",
45
+ "__SShadowHorizontal": "___SShadowHorizontal_g9pft_gg_",
46
+ "_position_median": "_position_median_g9pft_gg_",
47
+ "_position_start": "_position_start_g9pft_gg_",
48
+ "_position_end": "_position_end_g9pft_gg_",
49
+ "__SShadowVertical": "___SShadowVertical_g9pft_gg_",
50
+ "__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_g9pft_gg_",
51
+ "__SItemContentText": "___SItemContentText_g9pft_gg_"
67
52
  })
68
- ), U = function(_) {
69
- var t = _.children;
70
- return /* @__PURE__ */ i.createElement(se.Provider, {
71
- value: !0
72
- }, t);
73
- }, H = /* @__PURE__ */ i.createContext({}), P = /* @__PURE__ */ function(r) {
74
- ee(t, r);
75
- var _ = te(t);
76
- function t() {
77
- var a;
78
- Y(this, t);
79
- for (var n = arguments.length, o = new Array(n), e = 0; e < n; e++)
80
- o[e] = arguments[e];
81
- return a = _.call.apply(_, [this].concat(o)), M(O(a), "actionsRef", /* @__PURE__ */ i.createRef()), M(O(a), "role", "menu"), a;
53
+ );
54
+ var ListBoxContextProvider = function ListBoxContextProvider2(_ref22) {
55
+ var children = _ref22.children;
56
+ return /* @__PURE__ */ React.createElement(hideScrollBarsFromScreenReadersContext.Provider, {
57
+ value: true
58
+ }, children);
59
+ };
60
+ var menuItemContext = /* @__PURE__ */ React.createContext({});
61
+ var DropdownMenuRoot = /* @__PURE__ */ function(_AbstractDropdown) {
62
+ _inherits(DropdownMenuRoot2, _AbstractDropdown);
63
+ var _super = _createSuper(DropdownMenuRoot2);
64
+ function DropdownMenuRoot2() {
65
+ var _this;
66
+ _classCallCheck(this, DropdownMenuRoot2);
67
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
68
+ args[_key] = arguments[_key];
69
+ }
70
+ _this = _super.call.apply(_super, [this].concat(args));
71
+ _defineProperty(_assertThisInitialized(_this), "actionsRef", /* @__PURE__ */ React.createRef());
72
+ _defineProperty(_assertThisInitialized(_this), "role", "menu");
73
+ return _this;
82
74
  }
83
- return Z(t, [{
75
+ _createClass(DropdownMenuRoot2, [{
84
76
  key: "uncontrolledProps",
85
- value: function() {
86
- var n = this;
87
- return u(u({}, x(y(t.prototype), "uncontrolledProps", this).call(this)), {}, {
88
- visible: [null, function(o) {
89
- o === !0 && setTimeout(function() {
90
- var e, s, g = (e = n.menuRef.current) === null || e === void 0 ? void 0 : e.querySelectorAll('[role="menuitemcheckbox"], [role="menuitemradio"]'), d = (s = n.menuRef.current) === null || s === void 0 ? void 0 : s.querySelector('[aria-checked="true"]');
91
- if (d && g && n.asProps.itemsCount === void 0) {
92
- n.scrollToNode(d, !0);
93
- for (var p = 0; p < g.length; p++)
94
- if (g[p] === d) {
95
- n.handlers.highlightedIndex(p);
96
- break;
77
+ value: function uncontrolledProps() {
78
+ var _this2 = this;
79
+ return _objectSpread(_objectSpread({}, _get(_getPrototypeOf(DropdownMenuRoot2.prototype), "uncontrolledProps", this).call(this)), {}, {
80
+ visible: [null, function(visible) {
81
+ if (visible === true) {
82
+ setTimeout(function() {
83
+ var _this2$menuRef$curren, _this2$menuRef$curren2;
84
+ var options = (_this2$menuRef$curren = _this2.menuRef.current) === null || _this2$menuRef$curren === void 0 ? void 0 : _this2$menuRef$curren.querySelectorAll('[role="menuitemcheckbox"], [role="menuitemradio"]');
85
+ var selected = (_this2$menuRef$curren2 = _this2.menuRef.current) === null || _this2$menuRef$curren2 === void 0 ? void 0 : _this2$menuRef$curren2.querySelector('[aria-checked="true"]');
86
+ if (selected && options && _this2.asProps.itemsCount === void 0) {
87
+ _this2.scrollToNode(selected, true);
88
+ for (var i = 0; i < options.length; i++) {
89
+ if (options[i] === selected) {
90
+ _this2.handlers.highlightedIndex(i);
91
+ break;
92
+ }
97
93
  }
98
- }
99
- }, 30);
94
+ }
95
+ }, 30);
96
+ }
100
97
  }]
101
98
  });
102
99
  }
103
100
  }, {
104
101
  key: "itemRef",
105
- value: function(n, o, e) {
106
- x(y(t.prototype), "itemRef", this).call(this, n, o, e), e === document.activeElement && x(y(t.prototype), "scrollToNode", this).call(this, e);
102
+ value: function itemRef(props, index, node) {
103
+ _get(_getPrototypeOf(DropdownMenuRoot2.prototype), "itemRef", this).call(this, props, index, node);
104
+ if (node === document.activeElement) {
105
+ _get(_getPrototypeOf(DropdownMenuRoot2.prototype), "scrollToNode", this).call(this, node);
106
+ }
107
107
  }
108
108
  }, {
109
109
  key: "getTriggerProps",
110
- value: function() {
111
- var n = this.asProps, o = n.Children, e = n.uid, s = n.visible, g = L(o, [v.Menu.displayName]), d = g ? "igc-".concat(e, "-list") : "igc-".concat(e, "-popper");
112
- return u(u({}, x(y(t.prototype), "getTriggerProps", this).call(this)), {}, {
113
- onKeyDown: A(this.handlePreventCommonKeyDown.bind(this), this.handleOpenKeyDown.bind(this), this.handleKeyDownForMenu("trigger")),
114
- "aria-controls": s ? d : void 0,
115
- "aria-haspopup": g ? "true" : "dialog"
110
+ value: function getTriggerProps() {
111
+ var _this$asProps = this.asProps, Children = _this$asProps.Children, uid = _this$asProps.uid, visible = _this$asProps.visible;
112
+ var hasMenu = isAdvanceMode(Children, [DropdownMenu.Menu.displayName]);
113
+ var ariaControls = hasMenu ? "igc-".concat(uid, "-list") : "igc-".concat(uid, "-popper");
114
+ return _objectSpread(_objectSpread({}, _get(_getPrototypeOf(DropdownMenuRoot2.prototype), "getTriggerProps", this).call(this)), {}, {
115
+ onKeyDown: callAllEventHandlers(this.handlePreventCommonKeyDown.bind(this), this.handleOpenKeyDown.bind(this), this.handleKeyDownForMenu("trigger")),
116
+ "aria-controls": visible ? ariaControls : void 0,
117
+ "aria-haspopup": hasMenu ? "true" : "dialog"
116
118
  });
117
119
  }
118
120
  }, {
119
121
  key: "getListProps",
120
- value: function() {
121
- return u(u({}, x(y(t.prototype), "getListProps", this).call(this)), {}, {
122
- onKeyDown: A(this.handlePreventCommonKeyDown.bind(this), this.handleKeyDownForMenu("list"), this.handleArrowKeyDown.bind(this))
122
+ value: function getListProps() {
123
+ return _objectSpread(_objectSpread({}, _get(_getPrototypeOf(DropdownMenuRoot2.prototype), "getListProps", this).call(this)), {}, {
124
+ onKeyDown: callAllEventHandlers(this.handlePreventCommonKeyDown.bind(this), this.handleKeyDownForMenu("list"), this.handleArrowKeyDown.bind(this))
123
125
  });
124
126
  }
125
127
  }, {
126
128
  key: "getPopperProps",
127
- value: function() {
128
- return u(u({}, x(y(t.prototype), "getPopperProps", this).call(this)), {}, {
129
- onKeyDown: A(this.handlePreventCommonKeyDown.bind(this), this.handlePreventPopperKeyDown.bind(this))
129
+ value: function getPopperProps() {
130
+ return _objectSpread(_objectSpread({}, _get(_getPrototypeOf(DropdownMenuRoot2.prototype), "getPopperProps", this).call(this)), {}, {
131
+ onKeyDown: callAllEventHandlers(this.handlePreventCommonKeyDown.bind(this), this.handlePreventPopperKeyDown.bind(this))
130
132
  });
131
133
  }
132
134
  }, {
133
135
  key: "getActionsProps",
134
- value: function() {
135
- return u(u({}, this.getListProps()), {}, {
136
+ value: function getActionsProps() {
137
+ return _objectSpread(_objectSpread({}, this.getListProps()), {}, {
136
138
  ref: this.actionsRef,
137
- onKeyDown: A(this.handlePreventTabOnActions.bind(this), this.handlePreventCommonKeyDown.bind(this), this.handleKeyDownForMenu("list"), this.handleArrowKeyDown.bind(this))
139
+ onKeyDown: callAllEventHandlers(this.handlePreventTabOnActions.bind(this), this.handlePreventCommonKeyDown.bind(this), this.handleKeyDownForMenu("list"), this.handleArrowKeyDown.bind(this))
138
140
  });
139
141
  }
140
142
  }, {
141
143
  key: "getItemProps",
142
- value: function(n, o) {
143
- var e, s = this, g = this.asProps, d = g.highlightedIndex, p = g.visible, l = (e = n.index) !== null && e !== void 0 ? e : o, m = l === d, c = u(u({}, x(y(t.prototype), "getItemProps", this).call(this, n, l)), {}, {
144
- tabIndex: m && p ? 0 : -1,
145
- ref: function(I) {
146
- return s.itemRef(n, l, I);
144
+ value: function getItemProps(props, index) {
145
+ var _props$index, _this3 = this;
146
+ var _this$asProps2 = this.asProps, highlightedIndex = _this$asProps2.highlightedIndex, visible = _this$asProps2.visible;
147
+ var realIndex = (_props$index = props.index) !== null && _props$index !== void 0 ? _props$index : index;
148
+ var isHighlighted = realIndex === highlightedIndex;
149
+ var itemProps = _objectSpread(_objectSpread({}, _get(_getPrototypeOf(DropdownMenuRoot2.prototype), "getItemProps", this).call(this, props, realIndex)), {}, {
150
+ tabIndex: isHighlighted && visible ? 0 : -1,
151
+ ref: function ref(node) {
152
+ return _this3.itemRef(props, realIndex, node);
147
153
  },
148
154
  actionsRef: this.actionsRef
149
155
  });
150
- if (n.tag === le) {
151
- var h, w, S;
152
- c.use = (h = n.use) !== null && h !== void 0 ? h : "tertiary", c.theme = (w = n.theme) !== null && w !== void 0 ? w : "muted", c.size = (S = n.size) !== null && S !== void 0 ? S : "s", c.innerOutline = !1;
156
+ if (props.tag === ButtonComponent) {
157
+ var _props$use, _props$theme, _props$size;
158
+ itemProps.use = (_props$use = props.use) !== null && _props$use !== void 0 ? _props$use : "tertiary";
159
+ itemProps.theme = (_props$theme = props.theme) !== null && _props$theme !== void 0 ? _props$theme : "muted";
160
+ itemProps.size = (_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : "s";
161
+ itemProps.innerOutline = false;
153
162
  }
154
- return n.selected && (c["aria-checked"] = !0), x(y(t.prototype), "childRole", this) === "menuitemradio" && (c.onClick = function() {
155
- s.handlers.visible(!1);
156
- }), c;
163
+ if (props.selected) {
164
+ itemProps["aria-checked"] = true;
165
+ }
166
+ if (_get(_getPrototypeOf(DropdownMenuRoot2.prototype), "childRole", this) === "menuitemradio") {
167
+ itemProps.onClick = function() {
168
+ _this3.handlers.visible(false);
169
+ };
170
+ }
171
+ return itemProps;
157
172
  }
158
173
  }, {
159
174
  key: "handleKeyDownForMenu",
160
- value: function(n) {
161
- var o = this;
175
+ value: function handleKeyDownForMenu(place) {
176
+ var _this4 = this;
162
177
  return function(e) {
163
- var s, g, d = o.asProps, p = d.visible, l = d.placement, m = d.inlineActions;
164
- if (n === "list" && !((s = o.menuRef.current) !== null && s !== void 0 && s.contains(e.target)) && !m)
165
- return e.stopPropagation(), !1;
166
- var c = e.key === "ArrowRight" && (l == null ? void 0 : l.startsWith("right")) || e.key === "ArrowLeft" && (l == null ? void 0 : l.startsWith("left")), h = e.key === "ArrowLeft" && (l == null ? void 0 : l.startsWith("right")) || e.key === "ArrowRight" && (l == null ? void 0 : l.startsWith("left")) || e.key === "Escape", w = (g = e.target.getAttribute("role")) === null || g === void 0 ? void 0 : g.startsWith(x(y(t.prototype), "childRole", o));
167
- if (n === "trigger" && (!p || m) && c && w)
168
- return o.handlers.visible(!0), o.handlers.highlightedIndex(0), setTimeout(function() {
169
- var C, I = o.asProps.highlightedIndex;
170
- (C = o.itemRefs[I]) === null || C === void 0 || C.focus();
171
- }, 0), e.preventDefault(), e.stopPropagation(), !1;
172
- if (n === "list" && p && h && w && (!m || m && (e.key === "Escape" || o.asProps.highlightedIndex === 0))) {
173
- var S;
174
- return o.handlers.visible(!1), (S = o.triggerRef.current) === null || S === void 0 || S.focus(), e.preventDefault(), e.stopPropagation(), !1;
178
+ var _this4$menuRef$curren, _e$target$getAttribut;
179
+ var _this4$asProps = _this4.asProps, visible = _this4$asProps.visible, placement = _this4$asProps.placement, inlineActions = _this4$asProps.inlineActions;
180
+ if (place === "list" && !((_this4$menuRef$curren = _this4.menuRef.current) !== null && _this4$menuRef$curren !== void 0 && _this4$menuRef$curren.contains(e.target)) && !inlineActions) {
181
+ e.stopPropagation();
182
+ return false;
183
+ }
184
+ 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"));
185
+ 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";
186
+ var isMenuItem = (_e$target$getAttribut = e.target.getAttribute("role")) === null || _e$target$getAttribut === void 0 ? void 0 : _e$target$getAttribut.startsWith(_get(_getPrototypeOf(DropdownMenuRoot2.prototype), "childRole", _this4));
187
+ if (place === "trigger" && (!visible || inlineActions) && show && isMenuItem) {
188
+ _this4.handlers.visible(true);
189
+ _this4.handlers.highlightedIndex(0);
190
+ setTimeout(function() {
191
+ var _this4$itemRefs$highl;
192
+ var highlightedIndex = _this4.asProps.highlightedIndex;
193
+ (_this4$itemRefs$highl = _this4.itemRefs[highlightedIndex]) === null || _this4$itemRefs$highl === void 0 ? void 0 : _this4$itemRefs$highl.focus();
194
+ }, 0);
195
+ e.preventDefault();
196
+ e.stopPropagation();
197
+ return false;
198
+ }
199
+ if (place === "list" && visible && hide && isMenuItem) {
200
+ if (!inlineActions || inlineActions && (e.key === "Escape" || _this4.asProps.highlightedIndex === 0)) {
201
+ var _this4$triggerRef$cur;
202
+ _this4.handlers.visible(false);
203
+ (_this4$triggerRef$cur = _this4.triggerRef.current) === null || _this4$triggerRef$cur === void 0 ? void 0 : _this4$triggerRef$cur.focus();
204
+ e.preventDefault();
205
+ e.stopPropagation();
206
+ return false;
207
+ }
175
208
  }
176
209
  };
177
210
  }
178
211
  }, {
179
212
  key: "handlePreventTabOnActions",
180
- value: function(n) {
181
- if (n.key === "Tab")
182
- return n.stopPropagation(), n.preventDefault(), !1;
213
+ value: function handlePreventTabOnActions(e) {
214
+ if (e.key === "Tab") {
215
+ e.stopPropagation();
216
+ e.preventDefault();
217
+ return false;
218
+ }
183
219
  }
184
220
  }, {
185
221
  key: "render",
186
- value: function() {
187
- var n = this.asProps, o = this.asProps, e = o.Children, s = o.selectedIndex, g = o.interaction, d = o.timeout;
188
- return this.itemProps = [], /* @__PURE__ */ i.createElement(q.Provider, {
189
- value: s
190
- }, /* @__PURE__ */ i.createElement(D, f({
191
- timeout: d || (g === "hover" ? [0, 100] : void 0)
192
- }, n), /* @__PURE__ */ i.createElement(e, null)));
222
+ value: function render() {
223
+ var _ref = this.asProps;
224
+ var _this$asProps3 = this.asProps, Children = _this$asProps3.Children, selectedIndex = _this$asProps3.selectedIndex, interaction = _this$asProps3.interaction, timeout = _this$asProps3.timeout;
225
+ this.itemProps = [];
226
+ return /* @__PURE__ */ React.createElement(selectedIndexContext.Provider, {
227
+ value: selectedIndex
228
+ }, /* @__PURE__ */ React.createElement(Dropdown, assignProps({
229
+ "timeout": timeout || (interaction === "hover" ? [0, 100] : void 0)
230
+ }, _ref), /* @__PURE__ */ React.createElement(Children, null)));
193
231
  }
194
- }]), t;
195
- }(ae);
196
- M(P, "displayName", "DropdownMenu");
197
- M(P, "style", pe);
198
- M(P, "enhance", Object.values(ie));
199
- M(P, "defaultProps", {
232
+ }]);
233
+ return DropdownMenuRoot2;
234
+ }(AbstractDropdown);
235
+ _defineProperty(DropdownMenuRoot, "displayName", "DropdownMenu");
236
+ _defineProperty(DropdownMenuRoot, "style", style);
237
+ _defineProperty(DropdownMenuRoot, "enhance", Object.values(enhance));
238
+ _defineProperty(DropdownMenuRoot, "defaultProps", {
200
239
  size: "m",
201
- defaultVisible: !1,
240
+ defaultVisible: false,
202
241
  defaultHighlightedIndex: 0,
203
242
  defaultSelectedIndex: 0,
204
- i18n: de,
243
+ i18n: localizedMessages,
205
244
  locale: "en",
206
245
  interaction: "click",
207
- inlineActions: !1,
246
+ inlineActions: false,
208
247
  placement: "bottom-start",
209
248
  timeout: 0
210
249
  });
211
- M(P, "nestedMenuInteraction", {
250
+ _defineProperty(DropdownMenuRoot, "nestedMenuInteraction", {
212
251
  trigger: [["onClick", "onMouseEnter"], ["onClick", "onMouseLeave"]],
213
252
  popper: [["onMouseEnter"], ["onMouseLeave"]]
214
253
  });
215
- function fe(r) {
216
- var _ = arguments[0], t, a = r.styles, n = r.Children, o = k;
217
- return t = b(a), /* @__PURE__ */ i.createElement(U, t.cn("ListBoxContextProvider", {}), /* @__PURE__ */ i.createElement(o, t.cn("SDropdownMenuList", u({}, f({
218
- shadow: !0
219
- }, _))), /* @__PURE__ */ i.createElement(k.Container, {
254
+ function List(_ref23) {
255
+ var _ref2 = arguments[0], _ref14;
256
+ var styles = _ref23.styles, Children = _ref23.Children;
257
+ var SDropdownMenuList = ScrollAreaComponent;
258
+ return _ref14 = sstyled(styles), /* @__PURE__ */ React.createElement(ListBoxContextProvider, _ref14.cn("ListBoxContextProvider", {}), /* @__PURE__ */ React.createElement(SDropdownMenuList, _ref14.cn("SDropdownMenuList", _objectSpread({}, assignProps({
259
+ "shadow": true
260
+ }, _ref2))), /* @__PURE__ */ React.createElement(ScrollAreaComponent.Container, {
220
261
  tabIndex: void 0
221
- }, /* @__PURE__ */ i.createElement(n, t.cn("Children", {}))), /* @__PURE__ */ i.createElement(k.Bar, {
262
+ }, /* @__PURE__ */ React.createElement(Children, _ref14.cn("Children", {}))), /* @__PURE__ */ React.createElement(ScrollAreaComponent.Bar, {
222
263
  orientation: "horizontal"
223
- }), /* @__PURE__ */ i.createElement(k.Bar, {
264
+ }), /* @__PURE__ */ React.createElement(ScrollAreaComponent.Bar, {
224
265
  orientation: "vertical"
225
266
  })));
226
267
  }
227
- function me(r) {
228
- var _ = arguments[0], t, a = r.styles, n = z;
229
- return t = b(a), /* @__PURE__ */ i.createElement(n, t.cn("SDropdownMenuActions", u({}, f({}, _))));
268
+ function Actions(_ref24) {
269
+ var _ref3 = arguments[0], _ref15;
270
+ var styles = _ref24.styles;
271
+ var SDropdownMenuActions = Flex;
272
+ return _ref15 = sstyled(styles), /* @__PURE__ */ React.createElement(SDropdownMenuActions, _ref15.cn("SDropdownMenuActions", _objectSpread({}, assignProps({}, _ref3))));
230
273
  }
231
- function he(r) {
232
- var _ = arguments[0], t = r.visible, a = r.disablePortal, n = r.ignorePortalsStacking, o = r.disableEnforceFocus, e = r.interaction, s = r.autoFocus, g = r.animationsDisabled, d = {
233
- visible: t,
234
- disablePortal: a,
235
- ignorePortalsStacking: n,
236
- disableEnforceFocus: o,
237
- interaction: e,
238
- autoFocus: s,
239
- animationsDisabled: g
274
+ function Menu(props) {
275
+ var _ref4 = arguments[0];
276
+ var visible = props.visible, disablePortal = props.disablePortal, ignorePortalsStacking = props.ignorePortalsStacking, disableEnforceFocus = props.disableEnforceFocus, interaction = props.interaction, autoFocus = props.autoFocus, animationsDisabled = props.animationsDisabled;
277
+ var popperProps = {
278
+ visible,
279
+ disablePortal,
280
+ ignorePortalsStacking,
281
+ disableEnforceFocus,
282
+ interaction,
283
+ autoFocus,
284
+ animationsDisabled
240
285
  };
241
- return /* @__PURE__ */ i.createElement(U, null, /* @__PURE__ */ i.createElement(v.Popper, W({}, d, {
286
+ return /* @__PURE__ */ React.createElement(ListBoxContextProvider, null, /* @__PURE__ */ React.createElement(DropdownMenu.Popper, _extends({}, popperProps, {
242
287
  role: null
243
- }), /* @__PURE__ */ i.createElement(v.List, f({}, _))));
288
+ }), /* @__PURE__ */ React.createElement(DropdownMenu.List, assignProps({}, _ref4))));
244
289
  }
245
- function ve(r) {
246
- var _ = arguments[0], t, a = r.id, n = r.styles, o = r.disabled, e = r.Children, s = r.forwardRef, g = r.role, d = r.tabIndex, p = r.actionsRef, l = r["aria-checked"], m = D.Item, c = i.useRef(), h = i.useState(!1), w = N(h, 2), S = w[0], C = w[1], I = {
247
- contentId: a,
248
- ref: G(s, c),
249
- role: g,
250
- tabIndex: d,
251
- ariaChecked: l
252
- }, K = [], T = L(e, [v.displayName], !0), B = L(e, [v.Item.Hint.displayName], !0), R = L(e, [v.Item.Content.displayName], !0) || T || B;
253
- if (B) {
254
- var F = "igc-".concat(ge(), "-option-hint");
255
- I.hintId = F, K.push(F);
290
+ function Item(_ref25) {
291
+ var _ref5 = arguments[0], _ref16;
292
+ var id = _ref25.id, styles = _ref25.styles, disabled = _ref25.disabled, Children = _ref25.Children, forwardRef = _ref25.forwardRef, role = _ref25.role, tabIndex = _ref25.tabIndex, actionsRef = _ref25.actionsRef, ariaChecked = _ref25["aria-checked"];
293
+ var SDropdownMenuItemContainer = Dropdown.Item;
294
+ var itemRef = React.useRef();
295
+ var _React$useState = React.useState(false), _React$useState2 = _slicedToArray(_React$useState, 2), highlighted = _React$useState2[0], setHighlighted = _React$useState2[1];
296
+ var menuItemContextValue = {
297
+ contentId: id,
298
+ ref: forkRef(forwardRef, itemRef),
299
+ role,
300
+ tabIndex,
301
+ ariaChecked
302
+ };
303
+ var ariaDescribes = [];
304
+ var hasSubMenu = isAdvanceMode(Children, [DropdownMenu.displayName], true);
305
+ var hasHint = isAdvanceMode(Children, [DropdownMenu.Item.Hint.displayName], true);
306
+ var advancedMode = isAdvanceMode(Children, [DropdownMenu.Item.Content.displayName], true) || hasSubMenu || hasHint;
307
+ if (hasHint) {
308
+ var hintId = "igc-".concat(useUID(), "-option-hint");
309
+ menuItemContextValue.hintId = hintId;
310
+ ariaDescribes.push(hintId);
256
311
  }
257
- return T && (I.hasSubMenu = !0), I.ariaDescribes = K, i.useEffect(function() {
258
- var V = function(E) {
259
- E.target === c.current && (C(!0), T && E.stopPropagation());
260
- }, $ = function(E) {
261
- E.target === c.current && (C(!1), p.current && (c.current.tabIndex = -1));
312
+ if (hasSubMenu) {
313
+ menuItemContextValue.hasSubMenu = true;
314
+ }
315
+ menuItemContextValue.ariaDescribes = ariaDescribes;
316
+ React.useEffect(function() {
317
+ var onFocus = function onFocus2(e) {
318
+ if (e.target === itemRef.current) {
319
+ setHighlighted(true);
320
+ if (hasSubMenu) {
321
+ e.stopPropagation();
322
+ }
323
+ }
324
+ };
325
+ var onBlur = function onBlur2(e) {
326
+ if (e.target === itemRef.current) {
327
+ setHighlighted(false);
328
+ if (actionsRef.current) {
329
+ itemRef.current.tabIndex = -1;
330
+ }
331
+ }
262
332
  };
263
- return document.addEventListener("focus", V, {
264
- capture: !0
265
- }), document.addEventListener("blur", $, {
266
- capture: !0
267
- }), function() {
268
- document.removeEventListener("focus", V, {
269
- capture: !0
270
- }), document.removeEventListener("blur", $, {
271
- capture: !0
333
+ document.addEventListener("focus", onFocus, {
334
+ capture: true
335
+ });
336
+ document.addEventListener("blur", onBlur, {
337
+ capture: true
338
+ });
339
+ return function() {
340
+ document.removeEventListener("focus", onFocus, {
341
+ capture: true
342
+ });
343
+ document.removeEventListener("blur", onBlur, {
344
+ capture: true
272
345
  });
273
346
  };
274
- }, [c.current]), t = b(n), /* @__PURE__ */ i.createElement(H.Provider, {
275
- value: I
276
- }, /* @__PURE__ */ i.createElement(m, t.cn("SDropdownMenuItemContainer", u({}, f({
277
- ref: R ? void 0 : I.ref,
278
- "use:highlighted": !o && S && re.isKeyboard(),
279
- "use:role": R ? void 0 : g,
280
- "use:id": R ? void 0 : a,
281
- "use:tabIndex": R ? void 0 : d,
282
- "use:aria-checked": R ? void 0 : l
283
- }, _))), /* @__PURE__ */ i.createElement(e, t.cn("Children", {}))));
347
+ }, [itemRef.current]);
348
+ return _ref16 = sstyled(styles), /* @__PURE__ */ React.createElement(menuItemContext.Provider, {
349
+ value: menuItemContextValue
350
+ }, /* @__PURE__ */ React.createElement(SDropdownMenuItemContainer, _ref16.cn("SDropdownMenuItemContainer", _objectSpread({}, assignProps({
351
+ "ref": advancedMode ? void 0 : menuItemContextValue.ref,
352
+ "use:highlighted": !disabled && highlighted && lastInteraction.isKeyboard(),
353
+ "use:role": advancedMode ? void 0 : role,
354
+ "use:id": advancedMode ? void 0 : id,
355
+ "use:tabIndex": advancedMode ? void 0 : tabIndex,
356
+ "use:aria-checked": advancedMode ? void 0 : ariaChecked
357
+ }, _ref5))), /* @__PURE__ */ React.createElement(Children, _ref16.cn("Children", {}))));
284
358
  }
285
- function j(r) {
286
- var _ = _e(r, r.forwardRef), t = N(_, 2), a = t[0], n = t[1], o = n.className, e = X(n, ce), s = b(r.styles);
287
- return /* @__PURE__ */ i.createElement(a, W({
288
- className: oe(s.cn("SDropdownMenuItemAddon", r).className, o) || void 0
289
- }, e));
359
+ function Addon(props) {
360
+ var _useBox = useBox(props, props.forwardRef), _useBox2 = _slicedToArray(_useBox, 2), SDropdownMenuItemAddon = _useBox2[0], _useBox2$ = _useBox2[1], className = _useBox2$.className, other = _objectWithoutProperties(_useBox2$, _excluded);
361
+ var styles = sstyled(props.styles);
362
+ return /* @__PURE__ */ React.createElement(SDropdownMenuItemAddon, _extends({
363
+ className: cn(styles.cn("SDropdownMenuItemAddon", props).className, className) || void 0
364
+ }, other));
290
365
  }
291
- function be() {
292
- var r = arguments[0];
293
- return /* @__PURE__ */ i.createElement(D.Trigger, f({}, r));
366
+ function Trigger() {
367
+ var _ref6 = arguments[0];
368
+ return /* @__PURE__ */ React.createElement(Dropdown.Trigger, assignProps({}, _ref6));
294
369
  }
295
- function we(r) {
296
- var _ = arguments[0], t, a = r.styles, n = z, o = i.useRef(), e = i.useContext(H), s = void 0;
297
- e.hasSubMenu && (s = "true");
298
- var g = i.useState(new Set(e.ariaDescribes)), d = N(g, 2), p = d[0], l = d[1];
299
- return i.useEffect(function() {
300
- var m = o.current, c = m == null ? void 0 : m.parentElement;
301
- c.getAttribute("aria-haspopup") === "true" && c.getAttribute("aria-describedby") && l(function(h) {
302
- return h.add(c.getAttribute("aria-describedby")), new Set(h);
303
- });
304
- }, [e.ariaDescribes]), t = b(a), /* @__PURE__ */ i.createElement(n, t.cn("SItemContent", u({}, f({
305
- role: e.role,
306
- id: e.contentId,
307
- tabIndex: e.tabIndex,
308
- ref: G(e.ref, o),
309
- "use:aria-describedby": Q(p).join(" "),
310
- "aria-haspopup": e.hasSubMenu ? "true" : void 0,
311
- "aria-expanded": s,
312
- "aria-checked": e.ariaChecked,
313
- alignItems: "center",
314
- justifyContent: e.hasSubMenu ? "space-between" : void 0
315
- }, _))));
370
+ function ItemContent(_ref26) {
371
+ var _ref7 = arguments[0], _ref17;
372
+ var styles = _ref26.styles;
373
+ var SItemContent = Flex;
374
+ var ref = React.useRef();
375
+ var menuItemCtxValue = React.useContext(menuItemContext);
376
+ var subMenu = void 0;
377
+ if (menuItemCtxValue.hasSubMenu) {
378
+ subMenu = "true";
379
+ }
380
+ var _React$useState3 = React.useState(new Set(menuItemCtxValue.ariaDescribes)), _React$useState4 = _slicedToArray(_React$useState3, 2), describedby = _React$useState4[0], setDescribedby = _React$useState4[1];
381
+ React.useEffect(function() {
382
+ var element = ref.current;
383
+ var parent = element === null || element === void 0 ? void 0 : element.parentElement;
384
+ if (parent.getAttribute("aria-haspopup") === "true" && parent.getAttribute("aria-describedby")) {
385
+ setDescribedby(function(prev) {
386
+ prev.add(parent.getAttribute("aria-describedby"));
387
+ return new Set(prev);
388
+ });
389
+ }
390
+ }, [menuItemCtxValue.ariaDescribes]);
391
+ return _ref17 = sstyled(styles), /* @__PURE__ */ React.createElement(SItemContent, _ref17.cn("SItemContent", _objectSpread({}, assignProps({
392
+ "role": menuItemCtxValue.role,
393
+ "id": menuItemCtxValue.contentId,
394
+ "tabIndex": menuItemCtxValue.tabIndex,
395
+ "ref": forkRef(menuItemCtxValue.ref, ref),
396
+ "use:aria-describedby": _toConsumableArray(describedby).join(" "),
397
+ "aria-haspopup": menuItemCtxValue.hasSubMenu ? "true" : void 0,
398
+ "aria-expanded": subMenu,
399
+ "aria-checked": menuItemCtxValue.ariaChecked,
400
+ "alignItems": "center",
401
+ "justifyContent": menuItemCtxValue.hasSubMenu ? "space-between" : void 0
402
+ }, _ref7))));
316
403
  }
317
- function Se(r) {
318
- var _ = arguments[0], t, a = r.styles, n = ue;
319
- return t = b(a), /* @__PURE__ */ i.createElement(n, t.cn("SItemContentText", u({}, f({}, _))));
404
+ function ItemContentText(_ref27) {
405
+ var _ref8 = arguments[0], _ref18;
406
+ var styles = _ref27.styles;
407
+ var SItemContentText = Text;
408
+ return _ref18 = sstyled(styles), /* @__PURE__ */ React.createElement(SItemContentText, _ref18.cn("SItemContentText", _objectSpread({}, assignProps({}, _ref8))));
320
409
  }
321
- function Ie(r) {
322
- var _ = arguments[0], t, a = r.styles, n = z, o = i.useContext(H), e = o.hintId;
323
- return t = b(a), /* @__PURE__ */ i.createElement(n, t.cn("SItemHint", u({}, f({
324
- id: e,
410
+ function ItemHint(_ref28) {
411
+ var _ref9 = arguments[0], _ref19;
412
+ var styles = _ref28.styles;
413
+ var SItemHint = Flex;
414
+ var _React$useContext = React.useContext(menuItemContext), hintId = _React$useContext.hintId;
415
+ return _ref19 = sstyled(styles), /* @__PURE__ */ React.createElement(SItemHint, _ref19.cn("SItemHint", _objectSpread({}, assignProps({
416
+ "id": hintId,
325
417
  "aria-hidden": "true"
326
- }, _))));
418
+ }, _ref9))));
327
419
  }
328
- function xe(r) {
329
- var _ = arguments[0], t, a = D.Item;
330
- return t = b(r.styles), /* @__PURE__ */ i.createElement(a, t.cn("SDropdownMenuItemContainer", u({}, f({
331
- variant: "hint"
332
- }, _))));
420
+ function Hint(props) {
421
+ var _ref10 = arguments[0], _ref20;
422
+ var SDropdownMenuItemContainer = Dropdown.Item;
423
+ return _ref20 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SDropdownMenuItemContainer, _ref20.cn("SDropdownMenuItemContainer", _objectSpread({}, assignProps({
424
+ "variant": "hint"
425
+ }, _ref10))));
333
426
  }
334
- function ye(r) {
335
- var _ = arguments[0], t, a = D.Item;
336
- return t = b(r.styles), /* @__PURE__ */ i.createElement(a, t.cn("SDropdownMenuItemContainer", u({}, f({
337
- variant: "title"
338
- }, _))));
427
+ function Title(props) {
428
+ var _ref11 = arguments[0], _ref21;
429
+ var SDropdownMenuItemContainer = Dropdown.Item;
430
+ return _ref21 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SDropdownMenuItemContainer, _ref21.cn("SDropdownMenuItemContainer", _objectSpread({}, assignProps({
431
+ "variant": "title"
432
+ }, _ref11))));
339
433
  }
340
- function De(r) {
341
- var _ = arguments[0], t = r.forwardRef;
342
- return /* @__PURE__ */ i.createElement(v.Item, f({
343
- ref: t
344
- }, _));
434
+ function Nesting(_ref29) {
435
+ var _ref12 = arguments[0];
436
+ var forwardRef = _ref29.forwardRef;
437
+ return /* @__PURE__ */ React.createElement(DropdownMenu.Item, assignProps({
438
+ "ref": forwardRef
439
+ }, _ref12));
345
440
  }
346
- function Ce(r) {
347
- var _ = arguments[0], t = r.forwardRef;
348
- return /* @__PURE__ */ i.createElement(v.Item.Content, f({
349
- tag: v.Trigger,
350
- ref: t,
441
+ function NestingTrigger(_ref30) {
442
+ var _ref13 = arguments[0];
443
+ var forwardRef = _ref30.forwardRef;
444
+ return /* @__PURE__ */ React.createElement(DropdownMenu.Item.Content, assignProps({
445
+ "tag": DropdownMenu.Trigger,
446
+ "ref": forwardRef,
351
447
  "use:role": "menuitem"
352
- }, _));
448
+ }, _ref13));
353
449
  }
354
- var v = ne(P, {
355
- Trigger: be,
356
- Popper: D.Popper,
357
- List: fe,
358
- Actions: me,
359
- Menu: he,
360
- Item: [ve, {
361
- Addon: j,
362
- Content: we,
363
- Text: Se,
364
- Hint: Ie
450
+ var DropdownMenu = createComponent(DropdownMenuRoot, {
451
+ Trigger,
452
+ Popper: Dropdown.Popper,
453
+ List,
454
+ Actions,
455
+ Menu,
456
+ Item: [Item, {
457
+ Addon,
458
+ Content: ItemContent,
459
+ Text: ItemContentText,
460
+ Hint: ItemHint
365
461
  }],
366
462
  /**
367
463
  * @deprecated. Use just Item. See examples on
368
464
  */
369
- Nesting: [De, {
370
- Trigger: Ce,
371
- Addon: j
465
+ Nesting: [Nesting, {
466
+ Trigger: NestingTrigger,
467
+ Addon
372
468
  }],
373
- ItemTitle: ye,
374
- ItemHint: xe,
375
- Group: D.Group
469
+ ItemTitle: Title,
470
+ ItemHint: Hint,
471
+ Group: Dropdown.Group
376
472
  }, {
377
- parent: [D]
473
+ parent: [Dropdown]
378
474
  });
379
- v.selectedIndexContext = q;
475
+ DropdownMenu.selectedIndexContext = selectedIndexContext;
380
476
  export {
381
- v as default
477
+ DropdownMenu as default
382
478
  };
package/lib/esm/index.mjs CHANGED
@@ -1,4 +1,4 @@
1
- import { default as o } from "./DropdownMenu.mjs";
1
+ import { default as default2 } from "./DropdownMenu.mjs";
2
2
  export {
3
- o as default
3
+ default2 as default
4
4
  };
@@ -1,33 +1,33 @@
1
- import r from "./de.json.mjs";
2
- import o from "./en.json.mjs";
3
- import m from "./es.json.mjs";
4
- import t from "./fr.json.mjs";
5
- import i from "./it.json.mjs";
6
- import p from "./ja.json.mjs";
7
- import f from "./ko.json.mjs";
8
- import e from "./nl.json.mjs";
9
- import s from "./pt.json.mjs";
10
- import a from "./tr.json.mjs";
11
- import l from "./vi.json.mjs";
12
- import v from "./zh.json.mjs";
13
- import d from "./pl.json.mjs";
14
- import n from "./sv.json.mjs";
15
- var B = {
16
- de: r,
17
- en: o,
18
- es: m,
19
- fr: t,
20
- it: i,
21
- ja: p,
22
- ko: f,
23
- nl: e,
24
- pt: s,
25
- tr: a,
26
- vi: l,
27
- zh: v,
28
- pl: d,
29
- sv: n
1
+ import de from "./de.json.mjs";
2
+ import en from "./en.json.mjs";
3
+ import es from "./es.json.mjs";
4
+ import fr from "./fr.json.mjs";
5
+ import it from "./it.json.mjs";
6
+ import ja from "./ja.json.mjs";
7
+ import ko from "./ko.json.mjs";
8
+ import nl from "./nl.json.mjs";
9
+ import pt from "./pt.json.mjs";
10
+ import tr from "./tr.json.mjs";
11
+ import vi from "./vi.json.mjs";
12
+ import zh from "./zh.json.mjs";
13
+ import pl from "./pl.json.mjs";
14
+ import sv from "./sv.json.mjs";
15
+ var localizedMessages = {
16
+ de,
17
+ en,
18
+ es,
19
+ fr,
20
+ it,
21
+ ja,
22
+ ko,
23
+ nl,
24
+ pt,
25
+ tr,
26
+ vi,
27
+ zh,
28
+ pl,
29
+ sv
30
30
  };
31
31
  export {
32
- B as localizedMessages
32
+ localizedMessages
33
33
  };
@@ -1,7 +1,8 @@
1
- const e = "Drücken Sie Tab, um zum Popover zu gehen", t = {
2
- triggerHint: e
1
+ const triggerHint = "Drücken Sie Tab, um zum Popover zu gehen";
2
+ const de = {
3
+ triggerHint
3
4
  };
4
5
  export {
5
- t as default,
6
- e as triggerHint
6
+ de as default,
7
+ triggerHint
7
8
  };
@@ -1,4 +1,4 @@
1
- const e = {};
1
+ const en = {};
2
2
  export {
3
- e as default
3
+ en as default
4
4
  };
@@ -1,7 +1,8 @@
1
- const r = "Presiona Tab para ir a Popover", t = {
2
- triggerHint: r
1
+ const triggerHint = "Presiona Tab para ir a Popover";
2
+ const es = {
3
+ triggerHint
3
4
  };
4
5
  export {
5
- t as default,
6
- r as triggerHint
6
+ es as default,
7
+ triggerHint
7
8
  };
@@ -1,7 +1,8 @@
1
- const r = "Appuyez sur la touche Tab pour accéder au popover", t = {
2
- triggerHint: r
1
+ const triggerHint = "Appuyez sur la touche Tab pour accéder au popover";
2
+ const fr = {
3
+ triggerHint
3
4
  };
4
5
  export {
5
- t as default,
6
- r as triggerHint
6
+ fr as default,
7
+ triggerHint
7
8
  };
@@ -1,7 +1,8 @@
1
- const r = "Premi Tab per andare a Popover", t = {
2
- triggerHint: r
1
+ const triggerHint = "Premi Tab per andare a Popover";
2
+ const it = {
3
+ triggerHint
3
4
  };
4
5
  export {
5
- t as default,
6
- r as triggerHint
6
+ it as default,
7
+ triggerHint
7
8
  };
@@ -1,7 +1,8 @@
1
- const t = "Tabキーを押してポップオーバーに移動", r = {
2
- triggerHint: t
1
+ const triggerHint = "Tabキーを押してポップオーバーに移動";
2
+ const ja = {
3
+ triggerHint
3
4
  };
4
5
  export {
5
- r as default,
6
- t as triggerHint
6
+ ja as default,
7
+ triggerHint
7
8
  };
@@ -1,7 +1,8 @@
1
- const t = "팝업창으로 이동하려면 Tab 키를 누르세요", r = {
2
- triggerHint: t
1
+ const triggerHint = "팝업창으로 이동하려면 Tab 키를 누르세요";
2
+ const ko = {
3
+ triggerHint
3
4
  };
4
5
  export {
5
- r as default,
6
- t as triggerHint
6
+ ko as default,
7
+ triggerHint
7
8
  };
@@ -1,7 +1,8 @@
1
- const t = "Druk op Tab om naar de popover te gaan", r = {
2
- triggerHint: t
1
+ const triggerHint = "Druk op Tab om naar de popover te gaan";
2
+ const nl = {
3
+ triggerHint
3
4
  };
4
5
  export {
5
- r as default,
6
- t as triggerHint
6
+ nl as default,
7
+ triggerHint
7
8
  };
@@ -1,7 +1,8 @@
1
- const t = "Naciśnij Tab, aby przejść do okienka popover", e = {
2
- triggerHint: t
1
+ const triggerHint = "Naciśnij Tab, aby przejść do okienka popover";
2
+ const pl = {
3
+ triggerHint
3
4
  };
4
5
  export {
5
- e as default,
6
- t as triggerHint
6
+ pl as default,
7
+ triggerHint
7
8
  };
@@ -1,7 +1,8 @@
1
- const r = "Pressione Tab para acessar o pop-over", t = {
2
- triggerHint: r
1
+ const triggerHint = "Pressione Tab para acessar o pop-over";
2
+ const pt = {
3
+ triggerHint
3
4
  };
4
5
  export {
5
- t as default,
6
- r as triggerHint
6
+ pt as default,
7
+ triggerHint
7
8
  };
@@ -1,7 +1,8 @@
1
- const t = "Tryck på Tab för att gå till popover", r = {
2
- triggerHint: t
1
+ const triggerHint = "Tryck på Tab för att gå till popover";
2
+ const sv = {
3
+ triggerHint
3
4
  };
4
5
  export {
5
- r as default,
6
- t as triggerHint
6
+ sv as default,
7
+ triggerHint
7
8
  };
@@ -1,7 +1,8 @@
1
- const t = "Popover'a gitmek için Tab tuşuna basın", i = {
2
- triggerHint: t
1
+ const triggerHint = "Popover'a gitmek için Tab tuşuna basın";
2
+ const tr = {
3
+ triggerHint
3
4
  };
4
5
  export {
5
- i as default,
6
- t as triggerHint
6
+ tr as default,
7
+ triggerHint
7
8
  };
@@ -1,7 +1,8 @@
1
- const t = "Nhấn Tab để chuyển đến cửa sổ bật lên", n = {
2
- triggerHint: t
1
+ const triggerHint = "Nhấn Tab để chuyển đến cửa sổ bật lên";
2
+ const vi = {
3
+ triggerHint
3
4
  };
4
5
  export {
5
- n as default,
6
- t as triggerHint
6
+ vi as default,
7
+ triggerHint
7
8
  };
@@ -1,7 +1,8 @@
1
- const t = "按 T​​ab 转到弹出框", r = {
2
- triggerHint: t
1
+ const triggerHint = "按 T​​ab 转到弹出框";
2
+ const zh = {
3
+ triggerHint
3
4
  };
4
5
  export {
5
- r as default,
6
- t as triggerHint
6
+ zh as default,
7
+ triggerHint
7
8
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@semcore/dropdown-menu",
3
3
  "description": "Semrush DropdownMenu Component",
4
- "version": "16.0.0-prerelease.4",
4
+ "version": "16.0.0-prerelease.7",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/es6/index.js",
7
7
  "typings": "lib/types/index.d.ts",
@@ -14,17 +14,17 @@
14
14
  "types": "./lib/types/index.d.ts"
15
15
  },
16
16
  "dependencies": {
17
- "@semcore/button": "16.0.0-prerelease.4",
18
- "@semcore/dropdown": "16.0.0-prerelease.4",
19
- "@semcore/icon": "16.0.0-prerelease.4",
20
- "@semcore/typography": "16.0.0-prerelease.4",
21
- "@semcore/popper": "16.0.0-prerelease.4",
22
- "@semcore/flex-box": "16.0.0-prerelease.4",
23
- "@semcore/scroll-area": "16.0.0-prerelease.4",
17
+ "@semcore/button": "16.0.0-prerelease.7",
18
+ "@semcore/dropdown": "16.0.0-prerelease.7",
19
+ "@semcore/icon": "16.0.0-prerelease.7",
20
+ "@semcore/typography": "16.0.0-prerelease.7",
21
+ "@semcore/popper": "16.0.0-prerelease.7",
22
+ "@semcore/flex-box": "16.0.0-prerelease.7",
23
+ "@semcore/scroll-area": "16.0.0-prerelease.7",
24
24
  "classnames": "2.2.6"
25
25
  },
26
26
  "peerDependencies": {
27
- "@semcore/base-components": "^16.0.0-prerelease.4"
27
+ "@semcore/base-components": "^16.0.0-prerelease.7"
28
28
  },
29
29
  "repository": {
30
30
  "type": "git",
@@ -36,8 +36,8 @@
36
36
  "@types/classnames": "2.2.6",
37
37
  "@semcore/testing-utils": "1.0.0",
38
38
  "@semcore/base-trigger": "4.26.1",
39
- "@semcore/button": "16.0.0-prerelease.4",
40
- "@semcore/icon": "16.0.0-prerelease.4"
39
+ "@semcore/button": "16.0.0-prerelease.7",
40
+ "@semcore/icon": "16.0.0-prerelease.7"
41
41
  },
42
42
  "scripts": {
43
43
  "build": "pnpm semcore-builder --source=js && pnpm vite build"