@semcore/dropdown-menu 3.0.12 → 3.1.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.
Files changed (6) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/lib/cjs/DropdownMenu.js +62 -31
  3. package/lib/cjs/DropdownMenu.js.map +1 -1
  4. package/lib/es6/DropdownMenu.js +63 -31
  5. package/lib/es6/DropdownMenu.js.map +1 -1
  6. package/package.json +4 -2
package/CHANGELOG.md CHANGED
@@ -2,6 +2,12 @@
2
2
 
3
3
  CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
4
4
 
5
+ ## [3.1.0] - 2022-09-07
6
+
7
+ ### Added
8
+
9
+ - Screen readers support.
10
+
5
11
  ## [3.0.12] - 2022-08-30
6
12
 
7
13
  ### Changed
package/lib/cjs/DropdownMenu.js CHANGED
@@ -41,6 +41,8 @@ var _flexBox = require("@semcore/flex-box");
41
41
 
42
42
  var _scrollArea = _interopRequireDefault(require("@semcore/scroll-area"));
43
43
 
44
+ var _uniqueID = _interopRequireDefault(require("@semcore/utils/lib/uniqueID"));
45
+
44
46
  var _excluded = ["className"],
45
47
  _excluded2 = ["className"];
46
48
 
@@ -61,23 +63,23 @@ var style = (
61
63
  /*__reshadow_css_start__*/
62
64
  _core.sstyled.insert(
63
65
  /*__inner_css_start__*/
64
- ".___SDropdownMenuList_t5jr0_gg_{max-height:240px;margin:4px 0;padding:0;position:relative;min-height:26px;min-width:32px}.___SDropdownMenuItem_t5jr0_gg_{display:flex;align-items:center;position:relative;text-decoration:none;box-sizing:border-box;cursor:pointer;width:100%;text-align:left;line-height:normal}.___SDropdownMenuItem_t5jr0_gg_:hover{background-color:#f4f5f9}.___SDropdownMenuItem_t5jr0_gg_:focus{outline:none}.___SDropdownMenuItem_t5jr0_gg_.__highlighted_t5jr0_gg_{z-index:1;box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2) inset}.___SDropdownMenuItem_t5jr0_gg_.__selected_t5jr0_gg_{background-color:rgba(196,229,254,.7)}.___SDropdownMenuItem_t5jr0_gg_.__selected_t5jr0_gg_:hover{background-color:#c4e5fe}.___SDropdownMenuItem_t5jr0_gg_.__disabled_t5jr0_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SDropdownMenuItem_t5jr0_gg_._size_l_t5jr0_gg_{font-size:16px;line-height:1.5;padding:8px 12px;min-height:40px}.___SDropdownMenuItem_t5jr0_gg_._size_m_t5jr0_gg_{font-size:14px;line-height:1.42;padding:6px 8px;min-height:32px}.___SDropdownMenuItem_t5jr0_gg_.__notInteractive_t5jr0_gg_{cursor:default}.___SDropdownMenuItem_t5jr0_gg_.__notInteractive_t5jr0_gg_:hover{background:none}.___SDropdownMenuItem_t5jr0_gg_._variant_hint_t5jr0_gg_{color:#6c6e79;cursor:default}.___SDropdownMenuItem_t5jr0_gg_._variant_hint_t5jr0_gg_:hover{background:none}.___SDropdownMenuItem_t5jr0_gg_._variant_title_t5jr0_gg_{font-weight:700;cursor:default}.___SDropdownMenuItem_t5jr0_gg_._variant_title_t5jr0_gg_:hover{background:none}.___SDropdownMenuItemAddon_t5jr0_gg_{display:inline-flex;margin-left:8px;margin-right:8px}.___SDropdownMenuItemAddon_t5jr0_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_t5jr0_gg_:last-child{margin-right:0}.___SPopper_t5jr0_gg_:focus{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}"
66
+ ".___SDropdownMenuList_1tre5_gg_{max-height:240px;margin:4px 0;padding:0;position:relative;min-height:26px;min-width:32px}.___SDropdownMenuItem_1tre5_gg_{display:flex;align-items:center;position:relative;text-decoration:none;box-sizing:border-box;cursor:pointer;width:100%;text-align:left;line-height:normal}.___SDropdownMenuItem_1tre5_gg_:hover{background-color:#f4f5f9}.___SDropdownMenuItem_1tre5_gg_:focus{outline:none}.___SDropdownMenuItem_1tre5_gg_.__highlighted_1tre5_gg_{z-index:1;box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2) inset}.___SDropdownMenuItem_1tre5_gg_.__selected_1tre5_gg_{background-color:rgba(196,229,254,.7)}.___SDropdownMenuItem_1tre5_gg_.__selected_1tre5_gg_:hover{background-color:#c4e5fe}.___SDropdownMenuItem_1tre5_gg_.__disabled_1tre5_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SDropdownMenuItem_1tre5_gg_._size_l_1tre5_gg_{font-size:16px;line-height:1.5;padding:8px 12px;min-height:40px}.___SDropdownMenuItem_1tre5_gg_._size_m_1tre5_gg_{font-size:14px;line-height:1.42;padding:6px 8px;min-height:32px}.___SDropdownMenuItem_1tre5_gg_.__notInteractive_1tre5_gg_{cursor:default}.___SDropdownMenuItem_1tre5_gg_.__notInteractive_1tre5_gg_:hover{background:none}.___SDropdownMenuItem_1tre5_gg_._variant_hint_1tre5_gg_{color:#6c6e79;cursor:default}.___SDropdownMenuItem_1tre5_gg_._variant_hint_1tre5_gg_:hover{background:none}.___SDropdownMenuItem_1tre5_gg_._variant_title_1tre5_gg_{font-weight:700;cursor:default}.___SDropdownMenuItem_1tre5_gg_._variant_title_1tre5_gg_:hover{background:none}.___SDropdownMenuItemAddon_1tre5_gg_{display:inline-flex;margin-left:8px;margin-right:8px}.___SDropdownMenuItemAddon_1tre5_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_1tre5_gg_:last-child{margin-right:0}.___SPopper_1tre5_gg_:focus{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}"
65
67
  /*__inner_css_end__*/
66
- , "t5jr0_gg_")
68
+ , "1tre5_gg_")
67
69
  /*__reshadow_css_end__*/
68
70
  , {
69
- "__SDropdownMenuList": "___SDropdownMenuList_t5jr0_gg_",
70
- "__SDropdownMenuItem": "___SDropdownMenuItem_t5jr0_gg_",
71
- "_highlighted": "__highlighted_t5jr0_gg_",
72
- "_selected": "__selected_t5jr0_gg_",
73
- "_disabled": "__disabled_t5jr0_gg_",
74
- "_size_l": "_size_l_t5jr0_gg_",
75
- "_size_m": "_size_m_t5jr0_gg_",
76
- "_notInteractive": "__notInteractive_t5jr0_gg_",
77
- "_variant_hint": "_variant_hint_t5jr0_gg_",
78
- "_variant_title": "_variant_title_t5jr0_gg_",
79
- "__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_t5jr0_gg_",
80
- "__SPopper": "___SPopper_t5jr0_gg_"
71
+ "__SDropdownMenuList": "___SDropdownMenuList_1tre5_gg_",
72
+ "__SDropdownMenuItem": "___SDropdownMenuItem_1tre5_gg_",
73
+ "_highlighted": "__highlighted_1tre5_gg_",
74
+ "_selected": "__selected_1tre5_gg_",
75
+ "_disabled": "__disabled_1tre5_gg_",
76
+ "_size_l": "_size_l_1tre5_gg_",
77
+ "_size_m": "_size_m_1tre5_gg_",
78
+ "_notInteractive": "__notInteractive_1tre5_gg_",
79
+ "_variant_hint": "_variant_hint_1tre5_gg_",
80
+ "_variant_title": "_variant_title_1tre5_gg_",
81
+ "__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_1tre5_gg_",
82
+ "__SPopper": "___SPopper_1tre5_gg_"
81
83
  });
82
84
  var KEYS = ['ArrowDown', 'ArrowUp', 'Enter', ' '];
83
85
  var INTERACTION_TAGS = ['INPUT', 'TEXTAREA'];
@@ -152,9 +154,17 @@ var DropdownMenuRoot = /*#__PURE__*/function (_Component) {
152
154
  }, {
153
155
  key: "getTriggerProps",
154
156
  value: function getTriggerProps() {
155
- var size = this.asProps.size;
157
+ var _this$asProps = this.asProps,
158
+ size = _this$asProps.size,
159
+ uid = _this$asProps.uid,
160
+ disablePortal = _this$asProps.disablePortal,
161
+ visible = _this$asProps.visible;
156
162
  return {
157
163
  size: size,
164
+ id: "igc-".concat(uid, "-trigger"),
165
+ 'aria-controls': visible ? "igc-".concat(uid, "-popper") : undefined,
166
+ 'aria-flowto': visible && !disablePortal ? "igc-".concat(uid, "-popper") : undefined,
167
+ 'aria-label': visible && !disablePortal ? "Press Tab to go to popover" : undefined,
158
168
  onKeyDown: this.handlerKeyDown
159
169
  };
160
170
  }
@@ -163,23 +173,29 @@ var DropdownMenuRoot = /*#__PURE__*/function (_Component) {
163
173
  value: function getListProps() {
164
174
  var size = this.asProps.size;
165
175
  return {
166
- size: size
176
+ size: size,
177
+ index: this.asProps.highlightedIndex
167
178
  };
168
179
  }
169
180
  }, {
170
181
  key: "getPopperProps",
171
182
  value: function getPopperProps() {
183
+ var _this$asProps2 = this.asProps,
184
+ uid = _this$asProps2.uid,
185
+ disablePortal = _this$asProps2.disablePortal;
172
186
  return {
173
187
  tabIndex: 0,
174
- onKeyDown: this.handlerKeyDown
188
+ onKeyDown: this.handlerKeyDown,
189
+ id: "igc-".concat(uid, "-popper"),
190
+ 'aria-flowto': !disablePortal ? "igc-".concat(uid, "-trigger") : undefined
175
191
  };
176
192
  }
177
193
  }, {
178
194
  key: "getItemProps",
179
195
  value: function getItemProps(props, index) {
180
- var _this$asProps = this.asProps,
181
- size = _this$asProps.size,
182
- highlightedIndex = _this$asProps.highlightedIndex;
196
+ var _this$asProps3 = this.asProps,
197
+ size = _this$asProps3.size,
198
+ highlightedIndex = _this$asProps3.highlightedIndex;
183
199
  var highlighted = index === highlightedIndex;
184
200
  var extraProps = {};
185
201
 
@@ -268,6 +284,7 @@ var DropdownMenuRoot = /*#__PURE__*/function (_Component) {
268
284
 
269
285
  (0, _defineProperty2["default"])(DropdownMenuRoot, "displayName", 'DropdownMenu');
270
286
  (0, _defineProperty2["default"])(DropdownMenuRoot, "style", style);
287
+ (0, _defineProperty2["default"])(DropdownMenuRoot, "enhance", [(0, _uniqueID["default"])()]);
271
288
  (0, _defineProperty2["default"])(DropdownMenuRoot, "defaultProps", {
272
289
  size: 'm',
273
290
  defaultVisible: false,
@@ -276,12 +293,13 @@ var DropdownMenuRoot = /*#__PURE__*/function (_Component) {
276
293
 
277
294
  function List(props) {
278
295
  var _ref2 = arguments[0],
279
- _ref6;
296
+ _ref7;
280
297
 
281
298
  var SDropdownMenuList = _flexBox.Box;
282
- return _ref6 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SDropdownMenuList, _ref6.cn("SDropdownMenuList", _objectSpread({}, (0, _core.assignProps)({
299
+ return _ref7 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SDropdownMenuList, _ref7.cn("SDropdownMenuList", _objectSpread({}, (0, _core.assignProps)({
283
300
  "tag": _scrollArea["default"],
284
- "role": "menu"
301
+ "role": "menu",
302
+ "aria-activedescendant": props.index
285
303
  }, _ref2))));
286
304
  }
287
305
 
@@ -301,7 +319,8 @@ function Item(props) {
301
319
  var styles = (0, _core.sstyled)(props.styles);
302
320
  return /*#__PURE__*/_react["default"].createElement(SDropdownMenuItem, (0, _extends2["default"])({
303
321
  role: "menuitem",
304
- tabIndex: -1,
322
+ tabIndex: 0,
323
+ id: props.label,
305
324
  className: (0, _classnames["default"])(styles.cn('SDropdownMenuItem', _objectSpread(_objectSpread({}, props), {}, {
306
325
  highlighted: !props.disabled && props.highlighted
307
326
  })).className, className) || undefined
@@ -324,26 +343,38 @@ function Addon(props) {
324
343
 
325
344
  function Hint(props) {
326
345
  var _ref4 = arguments[0],
327
- _ref7;
346
+ _ref8;
328
347
 
329
348
  var SDropdownMenuItem = _flexBox.Flex;
330
- return _ref7 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SDropdownMenuItem, _ref7.cn("SDropdownMenuItem", _objectSpread({}, (0, _core.assignProps)({
331
- "variant": "hint"
349
+ return _ref8 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SDropdownMenuItem, _ref8.cn("SDropdownMenuItem", _objectSpread({}, (0, _core.assignProps)({
350
+ "variant": "hint",
351
+ "role": "menuitem",
352
+ "tabIndex": 0
332
353
  }, _ref4))));
333
354
  }
334
355
 
335
356
  function Title(props) {
336
357
  var _ref5 = arguments[0],
337
- _ref8;
358
+ _ref9;
338
359
 
339
360
  var SDropdownMenuItem = _flexBox.Flex;
340
- return _ref8 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SDropdownMenuItem, _ref8.cn("SDropdownMenuItem", _objectSpread({}, (0, _core.assignProps)({
341
- "variant": "title"
361
+ return _ref9 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SDropdownMenuItem, _ref9.cn("SDropdownMenuItem", _objectSpread({}, (0, _core.assignProps)({
362
+ "variant": "title",
363
+ "role": "menuitem",
364
+ "tabIndex": 0
342
365
  }, _ref5))));
343
366
  }
344
367
 
368
+ function Trigger() {
369
+ var _ref6 = arguments[0];
370
+ return /*#__PURE__*/_react["default"].createElement(_dropdown["default"].Trigger, (0, _core.assignProps)({
371
+ "type": "button",
372
+ "aria-haspopup": "true"
373
+ }, _ref6));
374
+ }
375
+
345
376
  var DropdownMenu = (0, _core["default"])(DropdownMenuRoot, {
346
- Trigger: _dropdown["default"].Trigger,
377
+ Trigger: Trigger,
347
378
  Popper: _dropdown["default"].Popper,
348
379
  List: List,
349
380
  Menu: Menu,
package/lib/cjs/DropdownMenu.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DropdownMenu.js","names":["KEYS","INTERACTION_TAGS","DropdownMenuRoot","e","amount","shiftKey","key","includes","target","tagName","preventDefault","handlers","visible","moveHighlightedIndex","_highlightedItem","click","node","scrollIntoView","asProps","highlightedIndex","prevHighlightedIndex","block","inline","size","onKeyDown","handlerKeyDown","tabIndex","props","index","highlighted","extraProps","_items","push","ref","scrollToNode","itemsLastIndex","length","selectedIndex","findIndex","item","selected","newIndex","disabled","Children","Dropdown","Component","style","defaultVisible","defaultHighlightedIndex","List","SDropdownMenuList","Box","sstyled","styles","ScrollAreaComponent","Menu","DropdownMenu","Item","useFlex","forwardRef","SDropdownMenuItem","className","other","cn","undefined","Addon","useBox","SDropdownMenuItemAddon","Hint","Flex","Title","createComponent","Trigger","Popper","ItemTitle","ItemHint","parent"],"sources":["../../src/DropdownMenu.jsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport Dropdown from '@semcore/dropdown';\nimport { Box, Flex, useBox, useFlex } from '@semcore/flex-box';\nimport ScrollAreaComponent from '@semcore/scroll-area';\n\nimport style from './style/dropdown-menu.shadow.css';\n\nconst KEYS = ['ArrowDown', 'ArrowUp', 'Enter', ' '];\nconst INTERACTION_TAGS = ['INPUT', 'TEXTAREA'];\n\nclass DropdownMenuRoot extends Component {\n static displayName = 'DropdownMenu';\n static style = style;\n\n static defaultProps = {\n size: 'm',\n defaultVisible: false,\n defaultHighlightedIndex: null,\n };\n\n _items = [];\n\n _highlightedItem = null;\n\n prevHighlightedIndex = null;\n\n uncontrolledProps() {\n return {\n highlightedIndex: null,\n visible: null,\n };\n }\n\n handlerKeyDown = (e) => {\n const amount = e.shiftKey ? 5 : 1;\n\n if (e.key === ' ' && INTERACTION_TAGS.includes(e.target.tagName)) return;\n if (!KEYS.includes(e.key)) return;\n\n e.preventDefault();\n\n this.handlers.visible(true);\n\n switch (e.key) {\n case 'ArrowDown':\n this.moveHighlightedIndex(amount, e);\n break;\n case 'ArrowUp':\n this.moveHighlightedIndex(-amount, e);\n break;\n case ' ':\n case 'Enter':\n if (this._highlightedItem) this._highlightedItem.click();\n break;\n }\n };\n\n getTriggerProps() {\n const { size } = this.asProps;\n return {\n size,\n onKeyDown: this.handlerKeyDown,\n };\n }\n\n getListProps() {\n const { size } = this.asProps;\n return {\n size,\n };\n }\n\n getPopperProps() {\n return {\n tabIndex: 0,\n onKeyDown: this.handlerKeyDown,\n };\n }\n\n getItemProps(props, index) {\n const { size, highlightedIndex } = this.asProps;\n const highlighted = index === highlightedIndex;\n const extraProps = {};\n\n this._items.push(props);\n if (highlighted) {\n extraProps.ref = this.scrollToNode;\n }\n\n return {\n size,\n highlighted,\n ...extraProps,\n };\n }\n\n getItemHintProps() {\n const { size } = this.asProps;\n return {\n size,\n };\n }\n\n getItemTitleProps() {\n const { size } = this.asProps;\n return {\n size,\n };\n }\n\n scrollToNode = (node) => {\n this._highlightedItem = node;\n if (node && node.scrollIntoView) {\n if (this.asProps.highlightedIndex !== this.prevHighlightedIndex) {\n this.prevHighlightedIndex = this.asProps.highlightedIndex;\n node.scrollIntoView({\n block: 'nearest',\n inline: 'nearest',\n });\n }\n }\n };\n\n moveHighlightedIndex(amount, e) {\n let { highlightedIndex } = this.asProps;\n const itemsLastIndex = this._items.length - 1;\n const selectedIndex = this._items.findIndex((item) => item.selected);\n\n if (itemsLastIndex < 0) return;\n\n if (highlightedIndex == null) {\n if (selectedIndex !== -1) {\n highlightedIndex = selectedIndex;\n } else {\n highlightedIndex = amount < 0 ? 0 : itemsLastIndex;\n }\n }\n\n let newIndex = highlightedIndex + amount;\n if (newIndex < 0) {\n newIndex = amount + itemsLastIndex + 1;\n } else if (newIndex > itemsLastIndex) {\n newIndex = newIndex - itemsLastIndex - 1;\n }\n\n if (this._items[newIndex] && this._items[newIndex].disabled) {\n this.moveHighlightedIndex(amount < 0 ? amount - 1 : amount + 1, e);\n } else {\n this.handlers.highlightedIndex(newIndex, e);\n }\n }\n\n componentDidUpdate() {\n const { visible } = this.asProps;\n\n if (!visible) {\n this.handlers.highlightedIndex(null);\n }\n }\n\n render() {\n const { Children } = this.asProps;\n const props = {};\n\n this._items = [];\n\n return (\n <Root render={Dropdown} {...props}>\n <Children />\n </Root>\n );\n }\n}\n\nfunction List(props) {\n const SDropdownMenuList = Root;\n return sstyled(props.styles)(\n <SDropdownMenuList render={Box} tag={ScrollAreaComponent} role=\"menu\" />,\n );\n}\n\nfunction Menu() {\n return (\n <DropdownMenu.Popper>\n <Root render={DropdownMenu.List} />\n </DropdownMenu.Popper>\n );\n}\n\nfunction Item(props) {\n const [SDropdownMenuItem, { className, ...other }] = useFlex(props, props.forwardRef);\n const styles = sstyled(props.styles);\n return (\n <SDropdownMenuItem\n role=\"menuitem\"\n tabIndex={-1}\n className={\n cn(\n styles.cn('SDropdownMenuItem', {\n ...props,\n highlighted: !props.disabled && props.highlighted,\n }).className,\n className,\n ) || undefined\n }\n {...other}\n />\n );\n}\n\nfunction Addon(props) {\n const [SDropdownMenuItemAddon, { className, ...other }] = useBox(props, props.forwardRef);\n const styles = sstyled(props.styles);\n return (\n <SDropdownMenuItemAddon\n className={cn(styles.cn('SDropdownMenuItemAddon', props).className, className) || undefined}\n {...other}\n />\n );\n}\n\nfunction Hint(props) {\n const SDropdownMenuItem = Root;\n return sstyled(props.styles)(<SDropdownMenuItem render={Flex} variant=\"hint\" />);\n}\n\nfunction Title(props) {\n const SDropdownMenuItem = Root;\n return sstyled(props.styles)(<SDropdownMenuItem render={Flex} variant=\"title\" />);\n}\n\nconst DropdownMenu = createComponent(\n DropdownMenuRoot,\n {\n Trigger: Dropdown.Trigger,\n Popper: Dropdown.Popper,\n List,\n Menu,\n Item: [Item, { Addon }],\n ItemTitle: Title,\n ItemHint: Hint,\n },\n {\n parent: [Dropdown],\n },\n);\n\nexport default DropdownMenu;\n"],"mappings":"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"}
1
+ {"version":3,"file":"DropdownMenu.js","names":["KEYS","INTERACTION_TAGS","DropdownMenuRoot","e","amount","shiftKey","key","includes","target","tagName","preventDefault","handlers","visible","moveHighlightedIndex","_highlightedItem","click","node","scrollIntoView","asProps","highlightedIndex","prevHighlightedIndex","block","inline","size","uid","disablePortal","id","undefined","onKeyDown","handlerKeyDown","index","tabIndex","props","highlighted","extraProps","_items","push","ref","scrollToNode","itemsLastIndex","length","selectedIndex","findIndex","item","selected","newIndex","disabled","Children","Dropdown","Component","style","uniqueIDEnhancement","defaultVisible","defaultHighlightedIndex","List","SDropdownMenuList","Box","sstyled","styles","ScrollAreaComponent","Menu","DropdownMenu","Item","useFlex","forwardRef","SDropdownMenuItem","className","other","label","cn","Addon","useBox","SDropdownMenuItemAddon","Hint","Flex","Title","Trigger","createComponent","Popper","ItemTitle","ItemHint","parent"],"sources":["../../src/DropdownMenu.jsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport Dropdown from '@semcore/dropdown';\nimport { Box, Flex, useBox, useFlex } from '@semcore/flex-box';\nimport ScrollAreaComponent from '@semcore/scroll-area';\nimport uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';\n\nimport style from './style/dropdown-menu.shadow.css';\n\nconst KEYS = ['ArrowDown', 'ArrowUp', 'Enter', ' '];\nconst INTERACTION_TAGS = ['INPUT', 'TEXTAREA'];\n\nclass DropdownMenuRoot extends Component {\n static displayName = 'DropdownMenu';\n static style = style;\n static enhance = [uniqueIDEnhancement()];\n\n static defaultProps = {\n size: 'm',\n defaultVisible: false,\n defaultHighlightedIndex: null,\n };\n\n _items = [];\n\n _highlightedItem = null;\n\n prevHighlightedIndex = null;\n\n uncontrolledProps() {\n return {\n highlightedIndex: null,\n visible: null,\n };\n }\n\n handlerKeyDown = (e) => {\n const amount = e.shiftKey ? 5 : 1;\n\n if (e.key === ' ' && INTERACTION_TAGS.includes(e.target.tagName)) return;\n if (!KEYS.includes(e.key)) return;\n\n e.preventDefault();\n\n this.handlers.visible(true);\n\n switch (e.key) {\n case 'ArrowDown':\n this.moveHighlightedIndex(amount, e);\n break;\n case 'ArrowUp':\n this.moveHighlightedIndex(-amount, e);\n break;\n case ' ':\n case 'Enter':\n if (this._highlightedItem) this._highlightedItem.click();\n break;\n }\n };\n\n getTriggerProps() {\n const { size, uid, disablePortal, visible } = this.asProps;\n\n return {\n size,\n id: `igc-${uid}-trigger`,\n 'aria-controls': visible ? `igc-${uid}-popper` : undefined,\n 'aria-flowto': visible && !disablePortal ? `igc-${uid}-popper` : undefined,\n 'aria-label': visible && !disablePortal ? `Press Tab to go to popover` : undefined,\n onKeyDown: this.handlerKeyDown,\n };\n }\n\n getListProps() {\n const { size } = this.asProps;\n return {\n size,\n index: this.asProps.highlightedIndex,\n };\n }\n\n getPopperProps() {\n const { uid, disablePortal } = this.asProps;\n\n return {\n tabIndex: 0,\n onKeyDown: this.handlerKeyDown,\n id: `igc-${uid}-popper`,\n 'aria-flowto': !disablePortal ? `igc-${uid}-trigger` : undefined,\n };\n }\n\n getItemProps(props, index) {\n const { size, highlightedIndex } = this.asProps;\n const highlighted = index === highlightedIndex;\n const extraProps = {};\n\n this._items.push(props);\n if (highlighted) {\n extraProps.ref = this.scrollToNode;\n }\n\n return {\n size,\n highlighted,\n ...extraProps,\n };\n }\n\n getItemHintProps() {\n const { size } = this.asProps;\n return {\n size,\n };\n }\n\n getItemTitleProps() {\n const { size } = this.asProps;\n return {\n size,\n };\n }\n\n scrollToNode = (node) => {\n this._highlightedItem = node;\n if (node && node.scrollIntoView) {\n if (this.asProps.highlightedIndex !== this.prevHighlightedIndex) {\n this.prevHighlightedIndex = this.asProps.highlightedIndex;\n node.scrollIntoView({\n block: 'nearest',\n inline: 'nearest',\n });\n }\n }\n };\n\n moveHighlightedIndex(amount, e) {\n let { highlightedIndex } = this.asProps;\n const itemsLastIndex = this._items.length - 1;\n const selectedIndex = this._items.findIndex((item) => item.selected);\n\n if (itemsLastIndex < 0) return;\n\n if (highlightedIndex == null) {\n if (selectedIndex !== -1) {\n highlightedIndex = selectedIndex;\n } else {\n highlightedIndex = amount < 0 ? 0 : itemsLastIndex;\n }\n }\n\n let newIndex = highlightedIndex + amount;\n if (newIndex < 0) {\n newIndex = amount + itemsLastIndex + 1;\n } else if (newIndex > itemsLastIndex) {\n newIndex = newIndex - itemsLastIndex - 1;\n }\n\n if (this._items[newIndex] && this._items[newIndex].disabled) {\n this.moveHighlightedIndex(amount < 0 ? amount - 1 : amount + 1, e);\n } else {\n this.handlers.highlightedIndex(newIndex, e);\n }\n }\n\n componentDidUpdate() {\n const { visible } = this.asProps;\n\n if (!visible) {\n this.handlers.highlightedIndex(null);\n }\n }\n\n render() {\n const { Children } = this.asProps;\n const props = {};\n\n this._items = [];\n\n return (\n <Root render={Dropdown} {...props}>\n <Children />\n </Root>\n );\n }\n}\n\nfunction List(props) {\n const SDropdownMenuList = Root;\n\n return sstyled(props.styles)(\n <SDropdownMenuList\n render={Box}\n tag={ScrollAreaComponent}\n role=\"menu\"\n aria-activedescendant={props.index}\n />,\n );\n}\n\nfunction Menu() {\n return (\n <DropdownMenu.Popper>\n <Root render={DropdownMenu.List} />\n </DropdownMenu.Popper>\n );\n}\n\nfunction Item(props) {\n const [SDropdownMenuItem, { className, ...other }] = useFlex(props, props.forwardRef);\n const styles = sstyled(props.styles);\n return (\n <SDropdownMenuItem\n role=\"menuitem\"\n tabIndex={0}\n id={props.label}\n className={\n cn(\n styles.cn('SDropdownMenuItem', {\n ...props,\n highlighted: !props.disabled && props.highlighted,\n }).className,\n className,\n ) || undefined\n }\n {...other}\n />\n );\n}\n\nfunction Addon(props) {\n const [SDropdownMenuItemAddon, { className, ...other }] = useBox(props, props.forwardRef);\n const styles = sstyled(props.styles);\n return (\n <SDropdownMenuItemAddon\n className={cn(styles.cn('SDropdownMenuItemAddon', props).className, className) || undefined}\n {...other}\n />\n );\n}\n\nfunction Hint(props) {\n const SDropdownMenuItem = Root;\n return sstyled(props.styles)(\n <SDropdownMenuItem render={Flex} variant=\"hint\" role=\"menuitem\" tabIndex={0} />,\n );\n}\n\nfunction Title(props) {\n const SDropdownMenuItem = Root;\n return sstyled(props.styles)(\n <SDropdownMenuItem render={Flex} variant=\"title\" role=\"menuitem\" tabIndex={0} />,\n );\n}\n\nfunction Trigger() {\n return <Root render={Dropdown.Trigger} type=\"button\" aria-haspopup=\"true\" />;\n}\n\nconst DropdownMenu = createComponent(\n DropdownMenuRoot,\n {\n Trigger,\n Popper: Dropdown.Popper,\n List,\n Menu,\n Item: [Item, { Addon }],\n ItemTitle: Title,\n ItemHint: Hint,\n },\n {\n parent: [Dropdown],\n },\n);\n\nexport default DropdownMenu;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA;;AAFA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,IAAMA,IAAI,GAAG,CAAC,WAAD,EAAc,SAAd,EAAyB,OAAzB,EAAkC,GAAlC,CAAb;AACA,IAAMC,gBAAgB,GAAG,CAAC,OAAD,EAAU,UAAV,CAAzB;;IAEMC,gB;;;;;;;;;;;;;;;+FAWK,E;yGAEU,I;6GAEI,I;uGASN,UAACC,CAAD,EAAO;MACtB,IAAMC,MAAM,GAAGD,CAAC,CAACE,QAAF,GAAa,CAAb,GAAiB,CAAhC;MAEA,IAAIF,CAAC,CAACG,GAAF,KAAU,GAAV,IAAiBL,gBAAgB,CAACM,QAAjB,CAA0BJ,CAAC,CAACK,MAAF,CAASC,OAAnC,CAArB,EAAkE;MAClE,IAAI,CAACT,IAAI,CAACO,QAAL,CAAcJ,CAAC,CAACG,GAAhB,CAAL,EAA2B;MAE3BH,CAAC,CAACO,cAAF;;MAEA,MAAKC,QAAL,CAAcC,OAAd,CAAsB,IAAtB;;MAEA,QAAQT,CAAC,CAACG,GAAV;QACE,KAAK,WAAL;UACE,MAAKO,oBAAL,CAA0BT,MAA1B,EAAkCD,CAAlC;;UACA;;QACF,KAAK,SAAL;UACE,MAAKU,oBAAL,CAA0B,CAACT,MAA3B,EAAmCD,CAAnC;;UACA;;QACF,KAAK,GAAL;QACA,KAAK,OAAL;UACE,IAAI,MAAKW,gBAAT,EAA2B,MAAKA,gBAAL,CAAsBC,KAAtB;UAC3B;MAVJ;IAYD,C;qGAiEc,UAACC,IAAD,EAAU;MACvB,MAAKF,gBAAL,GAAwBE,IAAxB;;MACA,IAAIA,IAAI,IAAIA,IAAI,CAACC,cAAjB,EAAiC;QAC/B,IAAI,MAAKC,OAAL,CAAaC,gBAAb,KAAkC,MAAKC,oBAA3C,EAAiE;UAC/D,MAAKA,oBAAL,GAA4B,MAAKF,OAAL,CAAaC,gBAAzC;UACAH,IAAI,CAACC,cAAL,CAAoB;YAClBI,KAAK,EAAE,SADW;YAElBC,MAAM,EAAE;UAFU,CAApB;QAID;MACF;IACF,C;;;;;;WAzGD,6BAAoB;MAClB,OAAO;QACLH,gBAAgB,EAAE,IADb;QAELP,OAAO,EAAE;MAFJ,CAAP;IAID;;;WA0BD,2BAAkB;MAChB,oBAA8C,KAAKM,OAAnD;MAAA,IAAQK,IAAR,iBAAQA,IAAR;MAAA,IAAcC,GAAd,iBAAcA,GAAd;MAAA,IAAmBC,aAAnB,iBAAmBA,aAAnB;MAAA,IAAkCb,OAAlC,iBAAkCA,OAAlC;MAEA,OAAO;QACLW,IAAI,EAAJA,IADK;QAELG,EAAE,gBAASF,GAAT,aAFG;QAGL,iBAAiBZ,OAAO,iBAAUY,GAAV,eAAyBG,SAH5C;QAIL,eAAef,OAAO,IAAI,CAACa,aAAZ,iBAAmCD,GAAnC,eAAkDG,SAJ5D;QAKL,cAAcf,OAAO,IAAI,CAACa,aAAZ,kCAA2DE,SALpE;QAMLC,SAAS,EAAE,KAAKC;MANX,CAAP;IAQD;;;WAED,wBAAe;MACb,IAAQN,IAAR,GAAiB,KAAKL,OAAtB,CAAQK,IAAR;MACA,OAAO;QACLA,IAAI,EAAJA,IADK;QAELO,KAAK,EAAE,KAAKZ,OAAL,CAAaC;MAFf,CAAP;IAID;;;WAED,0BAAiB;MACf,qBAA+B,KAAKD,OAApC;MAAA,IAAQM,GAAR,kBAAQA,GAAR;MAAA,IAAaC,aAAb,kBAAaA,aAAb;MAEA,OAAO;QACLM,QAAQ,EAAE,CADL;QAELH,SAAS,EAAE,KAAKC,cAFX;QAGLH,EAAE,gBAASF,GAAT,YAHG;QAIL,eAAe,CAACC,aAAD,iBAAwBD,GAAxB,gBAAwCG;MAJlD,CAAP;IAMD;;;WAED,sBAAaK,KAAb,EAAoBF,KAApB,EAA2B;MACzB,qBAAmC,KAAKZ,OAAxC;MAAA,IAAQK,IAAR,kBAAQA,IAAR;MAAA,IAAcJ,gBAAd,kBAAcA,gBAAd;MACA,IAAMc,WAAW,GAAGH,KAAK,KAAKX,gBAA9B;MACA,IAAMe,UAAU,GAAG,EAAnB;;MAEA,KAAKC,MAAL,CAAYC,IAAZ,CAAiBJ,KAAjB;;MACA,IAAIC,WAAJ,EAAiB;QACfC,UAAU,CAACG,GAAX,GAAiB,KAAKC,YAAtB;MACD;;MAED;QACEf,IAAI,EAAJA,IADF;QAEEU,WAAW,EAAXA;MAFF,GAGKC,UAHL;IAKD;;;WAED,4BAAmB;MACjB,IAAQX,IAAR,GAAiB,KAAKL,OAAtB,CAAQK,IAAR;MACA,OAAO;QACLA,IAAI,EAAJA;MADK,CAAP;IAGD;;;WAED,6BAAoB;MAClB,IAAQA,IAAR,GAAiB,KAAKL,OAAtB,CAAQK,IAAR;MACA,OAAO;QACLA,IAAI,EAAJA;MADK,CAAP;IAGD;;;WAeD,8BAAqBnB,MAArB,EAA6BD,CAA7B,EAAgC;MAC9B,IAAMgB,gBAAN,GAA2B,KAAKD,OAAhC,CAAMC,gBAAN;MACA,IAAMoB,cAAc,GAAG,KAAKJ,MAAL,CAAYK,MAAZ,GAAqB,CAA5C;;MACA,IAAMC,aAAa,GAAG,KAAKN,MAAL,CAAYO,SAAZ,CAAsB,UAACC,IAAD;QAAA,OAAUA,IAAI,CAACC,QAAf;MAAA,CAAtB,CAAtB;;MAEA,IAAIL,cAAc,GAAG,CAArB,EAAwB;;MAExB,IAAIpB,gBAAgB,IAAI,IAAxB,EAA8B;QAC5B,IAAIsB,aAAa,KAAK,CAAC,CAAvB,EAA0B;UACxBtB,gBAAgB,GAAGsB,aAAnB;QACD,CAFD,MAEO;UACLtB,gBAAgB,GAAGf,MAAM,GAAG,CAAT,GAAa,CAAb,GAAiBmC,cAApC;QACD;MACF;;MAED,IAAIM,QAAQ,GAAG1B,gBAAgB,GAAGf,MAAlC;;MACA,IAAIyC,QAAQ,GAAG,CAAf,EAAkB;QAChBA,QAAQ,GAAGzC,MAAM,GAAGmC,cAAT,GAA0B,CAArC;MACD,CAFD,MAEO,IAAIM,QAAQ,GAAGN,cAAf,EAA+B;QACpCM,QAAQ,GAAGA,QAAQ,GAAGN,cAAX,GAA4B,CAAvC;MACD;;MAED,IAAI,KAAKJ,MAAL,CAAYU,QAAZ,KAAyB,KAAKV,MAAL,CAAYU,QAAZ,EAAsBC,QAAnD,EAA6D;QAC3D,KAAKjC,oBAAL,CAA0BT,MAAM,GAAG,CAAT,GAAaA,MAAM,GAAG,CAAtB,GAA0BA,MAAM,GAAG,CAA7D,EAAgED,CAAhE;MACD,CAFD,MAEO;QACL,KAAKQ,QAAL,CAAcQ,gBAAd,CAA+B0B,QAA/B,EAAyC1C,CAAzC;MACD;IACF;;;WAED,8BAAqB;MACnB,IAAQS,OAAR,GAAoB,KAAKM,OAAzB,CAAQN,OAAR;;MAEA,IAAI,CAACA,OAAL,EAAc;QACZ,KAAKD,QAAL,CAAcQ,gBAAd,CAA+B,IAA/B;MACD;IACF;;;WAED,kBAAS;MAAA;MACP,IAAQ4B,QAAR,GAAqB,KAAK7B,OAA1B,CAAQ6B,QAAR;MACA,IAAMf,KAAK,GAAG,EAAd;MAEA,KAAKG,MAAL,GAAc,EAAd;MAEA,oBACE,gCAAca,oBAAd,2CAA4BhB,KAA5B,uBACE,gCAAC,QAAD,OADF,CADF;IAKD;;;EA5K4BiB,e;;iCAAzB/C,gB,iBACiB,c;iCADjBA,gB,WAEWgD,K;iCAFXhD,gB,aAGa,CAAC,IAAAiD,oBAAA,GAAD,C;iCAHbjD,gB,kBAKkB;EACpBqB,IAAI,EAAE,GADc;EAEpB6B,cAAc,EAAE,KAFI;EAGpBC,uBAAuB,EAAE;AAHL,C;;AA0KxB,SAASC,IAAT,CAActB,KAAd,EAAqB;EAAA;EAAA;;EACnB,IAAMuB,iBAAiB,GAIXC,YAJZ;EAEA,eAAO,IAAAC,aAAA,EAAQzB,KAAK,CAAC0B,MAAd,CAAP,eACE,gCAAC,iBAAD;IAAA,OAEOC,sBAFP;IAAA,QAGO,MAHP;IAAA,yBAIyB3B,KAAK,CAACF;EAJ/B,YADF;AAQD;;AAED,SAAS8B,IAAT,GAAgB;EAAA;EACd,oBACE,gCAAC,YAAD,CAAc,MAAd,qBACE,gCAAcC,YAAY,CAACP,IAA3B,oCADF,CADF;AAKD;;AAED,SAASQ,IAAT,CAAc9B,KAAd,EAAqB;EACnB,eAAqD,IAAA+B,gBAAA,EAAQ/B,KAAR,EAAeA,KAAK,CAACgC,UAArB,CAArD;EAAA;EAAA,IAAOC,iBAAP;EAAA;EAAA,IAA4BC,SAA5B,cAA4BA,SAA5B;EAAA,IAA0CC,KAA1C;;EACA,IAAMT,MAAM,GAAG,IAAAD,aAAA,EAAQzB,KAAK,CAAC0B,MAAd,CAAf;EACA,oBACE,gCAAC,iBAAD;IACE,IAAI,EAAC,UADP;IAEE,QAAQ,EAAE,CAFZ;IAGE,EAAE,EAAE1B,KAAK,CAACoC,KAHZ;IAIE,SAAS,EACP,IAAAC,sBAAA,EACEX,MAAM,CAACW,EAAP,CAAU,mBAAV,kCACKrC,KADL;MAEEC,WAAW,EAAE,CAACD,KAAK,CAACc,QAAP,IAAmBd,KAAK,CAACC;IAFxC,IAGGiC,SAJL,EAKEA,SALF,KAMKvC;EAXT,GAaMwC,KAbN,EADF;AAiBD;;AAED,SAASG,KAAT,CAAetC,KAAf,EAAsB;EACpB,cAA0D,IAAAuC,eAAA,EAAOvC,KAAP,EAAcA,KAAK,CAACgC,UAApB,CAA1D;EAAA;EAAA,IAAOQ,sBAAP;EAAA;EAAA,IAAiCN,SAAjC,aAAiCA,SAAjC;EAAA,IAA+CC,KAA/C;;EACA,IAAMT,MAAM,GAAG,IAAAD,aAAA,EAAQzB,KAAK,CAAC0B,MAAd,CAAf;EACA,oBACE,gCAAC,sBAAD;IACE,SAAS,EAAE,IAAAW,sBAAA,EAAGX,MAAM,CAACW,EAAP,CAAU,wBAAV,EAAoCrC,KAApC,EAA2CkC,SAA9C,EAAyDA,SAAzD,KAAuEvC;EADpF,GAEMwC,KAFN,EADF;AAMD;;AAED,SAASM,IAAT,CAAczC,KAAd,EAAqB;EAAA;EAAA;;EACnB,IAAMiC,iBAAiB,GAEMS,aAF7B;EACA,eAAO,IAAAjB,aAAA,EAAQzB,KAAK,CAAC0B,MAAd,CAAP,eACE,gCAAC,iBAAD;IAAA,WAAyC,MAAzC;IAAA,QAAqD,UAArD;IAAA,YAA0E;EAA1E,YADF;AAGD;;AAED,SAASiB,KAAT,CAAe3C,KAAf,EAAsB;EAAA;EAAA;;EACpB,IAAMiC,iBAAiB,GAEMS,aAF7B;EACA,eAAO,IAAAjB,aAAA,EAAQzB,KAAK,CAAC0B,MAAd,CAAP,eACE,gCAAC,iBAAD;IAAA,WAAyC,OAAzC;IAAA,QAAsD,UAAtD;IAAA,YAA2E;EAA3E,YADF;AAGD;;AAED,SAASkB,OAAT,GAAmB;EAAA;EACjB,oBAAO,gCAAc5B,oBAAA,CAAS4B,OAAvB;IAAA,QAAqC,QAArC;IAAA,iBAA4D;EAA5D,UAAP;AACD;;AAED,IAAMf,YAAY,GAAG,IAAAgB,gBAAA,EACnB3E,gBADmB,EAEnB;EACE0E,OAAO,EAAPA,OADF;EAEEE,MAAM,EAAE9B,oBAAA,CAAS8B,MAFnB;EAGExB,IAAI,EAAJA,IAHF;EAIEM,IAAI,EAAJA,IAJF;EAKEE,IAAI,EAAE,CAACA,IAAD,EAAO;IAAEQ,KAAK,EAALA;EAAF,CAAP,CALR;EAMES,SAAS,EAAEJ,KANb;EAOEK,QAAQ,EAAEP;AAPZ,CAFmB,EAWnB;EACEQ,MAAM,EAAE,CAACjC,oBAAD;AADV,CAXmB,CAArB;eAgBea,Y"}
package/lib/es6/DropdownMenu.js CHANGED
@@ -9,6 +9,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
9
9
  import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
10
10
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
11
11
  import { sstyled as _sstyled } from "@semcore/core";
12
+ import { assignProps as _assignProps6 } from "@semcore/core";
12
13
  import { assignProps as _assignProps5 } from "@semcore/core";
13
14
  import { assignProps as _assignProps4 } from "@semcore/core";
14
15
  import { assignProps as _assignProps3 } from "@semcore/core";
@@ -31,29 +32,30 @@ import createComponent, { Component, sstyled, Root } from '@semcore/core';
31
32
  import Dropdown from '@semcore/dropdown';
32
33
  import { Box, Flex, useBox, useFlex } from '@semcore/flex-box';
33
34
  import ScrollAreaComponent from '@semcore/scroll-area';
35
+ import uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';
34
36
 
35
37
  /*__reshadow-styles__:"./style/dropdown-menu.shadow.css"*/
36
38
  var style = (
37
39
  /*__reshadow_css_start__*/
38
40
  _sstyled.insert(
39
41
  /*__inner_css_start__*/
40
- ".___SDropdownMenuList_t5jr0_gg_{max-height:240px;margin:4px 0;padding:0;position:relative;min-height:26px;min-width:32px}.___SDropdownMenuItem_t5jr0_gg_{display:flex;align-items:center;position:relative;text-decoration:none;box-sizing:border-box;cursor:pointer;width:100%;text-align:left;line-height:normal}.___SDropdownMenuItem_t5jr0_gg_:hover{background-color:#f4f5f9}.___SDropdownMenuItem_t5jr0_gg_:focus{outline:none}.___SDropdownMenuItem_t5jr0_gg_.__highlighted_t5jr0_gg_{z-index:1;box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2) inset}.___SDropdownMenuItem_t5jr0_gg_.__selected_t5jr0_gg_{background-color:rgba(196,229,254,.7)}.___SDropdownMenuItem_t5jr0_gg_.__selected_t5jr0_gg_:hover{background-color:#c4e5fe}.___SDropdownMenuItem_t5jr0_gg_.__disabled_t5jr0_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SDropdownMenuItem_t5jr0_gg_._size_l_t5jr0_gg_{font-size:16px;line-height:1.5;padding:8px 12px;min-height:40px}.___SDropdownMenuItem_t5jr0_gg_._size_m_t5jr0_gg_{font-size:14px;line-height:1.42;padding:6px 8px;min-height:32px}.___SDropdownMenuItem_t5jr0_gg_.__notInteractive_t5jr0_gg_{cursor:default}.___SDropdownMenuItem_t5jr0_gg_.__notInteractive_t5jr0_gg_:hover{background:none}.___SDropdownMenuItem_t5jr0_gg_._variant_hint_t5jr0_gg_{color:#6c6e79;cursor:default}.___SDropdownMenuItem_t5jr0_gg_._variant_hint_t5jr0_gg_:hover{background:none}.___SDropdownMenuItem_t5jr0_gg_._variant_title_t5jr0_gg_{font-weight:700;cursor:default}.___SDropdownMenuItem_t5jr0_gg_._variant_title_t5jr0_gg_:hover{background:none}.___SDropdownMenuItemAddon_t5jr0_gg_{display:inline-flex;margin-left:8px;margin-right:8px}.___SDropdownMenuItemAddon_t5jr0_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_t5jr0_gg_:last-child{margin-right:0}.___SPopper_t5jr0_gg_:focus{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}"
42
+ ".___SDropdownMenuList_1tre5_gg_{max-height:240px;margin:4px 0;padding:0;position:relative;min-height:26px;min-width:32px}.___SDropdownMenuItem_1tre5_gg_{display:flex;align-items:center;position:relative;text-decoration:none;box-sizing:border-box;cursor:pointer;width:100%;text-align:left;line-height:normal}.___SDropdownMenuItem_1tre5_gg_:hover{background-color:#f4f5f9}.___SDropdownMenuItem_1tre5_gg_:focus{outline:none}.___SDropdownMenuItem_1tre5_gg_.__highlighted_1tre5_gg_{z-index:1;box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2) inset}.___SDropdownMenuItem_1tre5_gg_.__selected_1tre5_gg_{background-color:rgba(196,229,254,.7)}.___SDropdownMenuItem_1tre5_gg_.__selected_1tre5_gg_:hover{background-color:#c4e5fe}.___SDropdownMenuItem_1tre5_gg_.__disabled_1tre5_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SDropdownMenuItem_1tre5_gg_._size_l_1tre5_gg_{font-size:16px;line-height:1.5;padding:8px 12px;min-height:40px}.___SDropdownMenuItem_1tre5_gg_._size_m_1tre5_gg_{font-size:14px;line-height:1.42;padding:6px 8px;min-height:32px}.___SDropdownMenuItem_1tre5_gg_.__notInteractive_1tre5_gg_{cursor:default}.___SDropdownMenuItem_1tre5_gg_.__notInteractive_1tre5_gg_:hover{background:none}.___SDropdownMenuItem_1tre5_gg_._variant_hint_1tre5_gg_{color:#6c6e79;cursor:default}.___SDropdownMenuItem_1tre5_gg_._variant_hint_1tre5_gg_:hover{background:none}.___SDropdownMenuItem_1tre5_gg_._variant_title_1tre5_gg_{font-weight:700;cursor:default}.___SDropdownMenuItem_1tre5_gg_._variant_title_1tre5_gg_:hover{background:none}.___SDropdownMenuItemAddon_1tre5_gg_{display:inline-flex;margin-left:8px;margin-right:8px}.___SDropdownMenuItemAddon_1tre5_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_1tre5_gg_:last-child{margin-right:0}.___SPopper_1tre5_gg_:focus{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}"
41
43
  /*__inner_css_end__*/
42
- , "t5jr0_gg_")
44
+ , "1tre5_gg_")
43
45
  /*__reshadow_css_end__*/
44
46
  , {
45
- "__SDropdownMenuList": "___SDropdownMenuList_t5jr0_gg_",
46
- "__SDropdownMenuItem": "___SDropdownMenuItem_t5jr0_gg_",
47
- "_highlighted": "__highlighted_t5jr0_gg_",
48
- "_selected": "__selected_t5jr0_gg_",
49
- "_disabled": "__disabled_t5jr0_gg_",
50
- "_size_l": "_size_l_t5jr0_gg_",
51
- "_size_m": "_size_m_t5jr0_gg_",
52
- "_notInteractive": "__notInteractive_t5jr0_gg_",
53
- "_variant_hint": "_variant_hint_t5jr0_gg_",
54
- "_variant_title": "_variant_title_t5jr0_gg_",
55
- "__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_t5jr0_gg_",
56
- "__SPopper": "___SPopper_t5jr0_gg_"
47
+ "__SDropdownMenuList": "___SDropdownMenuList_1tre5_gg_",
48
+ "__SDropdownMenuItem": "___SDropdownMenuItem_1tre5_gg_",
49
+ "_highlighted": "__highlighted_1tre5_gg_",
50
+ "_selected": "__selected_1tre5_gg_",
51
+ "_disabled": "__disabled_1tre5_gg_",
52
+ "_size_l": "_size_l_1tre5_gg_",
53
+ "_size_m": "_size_m_1tre5_gg_",
54
+ "_notInteractive": "__notInteractive_1tre5_gg_",
55
+ "_variant_hint": "_variant_hint_1tre5_gg_",
56
+ "_variant_title": "_variant_title_1tre5_gg_",
57
+ "__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_1tre5_gg_",
58
+ "__SPopper": "___SPopper_1tre5_gg_"
57
59
  });
58
60
  var KEYS = ['ArrowDown', 'ArrowUp', 'Enter', ' '];
59
61
  var INTERACTION_TAGS = ['INPUT', 'TEXTAREA'];
@@ -134,9 +136,17 @@ var DropdownMenuRoot = /*#__PURE__*/function (_Component) {
134
136
  }, {
135
137
  key: "getTriggerProps",
136
138
  value: function getTriggerProps() {
137
- var size = this.asProps.size;
139
+ var _this$asProps = this.asProps,
140
+ size = _this$asProps.size,
141
+ uid = _this$asProps.uid,
142
+ disablePortal = _this$asProps.disablePortal,
143
+ visible = _this$asProps.visible;
138
144
  return {
139
145
  size: size,
146
+ id: "igc-".concat(uid, "-trigger"),
147
+ 'aria-controls': visible ? "igc-".concat(uid, "-popper") : undefined,
148
+ 'aria-flowto': visible && !disablePortal ? "igc-".concat(uid, "-popper") : undefined,
149
+ 'aria-label': visible && !disablePortal ? "Press Tab to go to popover" : undefined,
140
150
  onKeyDown: this.handlerKeyDown
141
151
  };
142
152
  }
@@ -145,23 +155,29 @@ var DropdownMenuRoot = /*#__PURE__*/function (_Component) {
145
155
  value: function getListProps() {
146
156
  var size = this.asProps.size;
147
157
  return {
148
- size: size
158
+ size: size,
159
+ index: this.asProps.highlightedIndex
149
160
  };
150
161
  }
151
162
  }, {
152
163
  key: "getPopperProps",
153
164
  value: function getPopperProps() {
165
+ var _this$asProps2 = this.asProps,
166
+ uid = _this$asProps2.uid,
167
+ disablePortal = _this$asProps2.disablePortal;
154
168
  return {
155
169
  tabIndex: 0,
156
- onKeyDown: this.handlerKeyDown
170
+ onKeyDown: this.handlerKeyDown,
171
+ id: "igc-".concat(uid, "-popper"),
172
+ 'aria-flowto': !disablePortal ? "igc-".concat(uid, "-trigger") : undefined
157
173
  };
158
174
  }
159
175
  }, {
160
176
  key: "getItemProps",
161
177
  value: function getItemProps(props, index) {
162
- var _this$asProps = this.asProps,
163
- size = _this$asProps.size,
164
- highlightedIndex = _this$asProps.highlightedIndex;
178
+ var _this$asProps3 = this.asProps,
179
+ size = _this$asProps3.size,
180
+ highlightedIndex = _this$asProps3.highlightedIndex;
165
181
  var highlighted = index === highlightedIndex;
166
182
  var extraProps = {};
167
183
 
@@ -253,6 +269,8 @@ _defineProperty(DropdownMenuRoot, "displayName", 'DropdownMenu');
253
269
 
254
270
  _defineProperty(DropdownMenuRoot, "style", style);
255
271
 
272
+ _defineProperty(DropdownMenuRoot, "enhance", [uniqueIDEnhancement()]);
273
+
256
274
  _defineProperty(DropdownMenuRoot, "defaultProps", {
257
275
  size: 'm',
258
276
  defaultVisible: false,
@@ -261,12 +279,13 @@ _defineProperty(DropdownMenuRoot, "defaultProps", {
261
279
 
262
280
  function List(props) {
263
281
  var _ref2 = arguments[0],
264
- _ref6;
282
+ _ref7;
265
283
 
266
284
  var SDropdownMenuList = Box;
267
- return _ref6 = sstyled(props.styles), /*#__PURE__*/React.createElement(SDropdownMenuList, _ref6.cn("SDropdownMenuList", _objectSpread({}, _assignProps2({
285
+ return _ref7 = sstyled(props.styles), /*#__PURE__*/React.createElement(SDropdownMenuList, _ref7.cn("SDropdownMenuList", _objectSpread({}, _assignProps2({
268
286
  "tag": ScrollAreaComponent,
269
- "role": "menu"
287
+ "role": "menu",
288
+ "aria-activedescendant": props.index
270
289
  }, _ref2))));
271
290
  }
272
291
 
@@ -286,7 +305,8 @@ function Item(props) {
286
305
  var styles = sstyled(props.styles);
287
306
  return /*#__PURE__*/React.createElement(SDropdownMenuItem, _extends({
288
307
  role: "menuitem",
289
- tabIndex: -1,
308
+ tabIndex: 0,
309
+ id: props.label,
290
310
  className: cn(styles.cn('SDropdownMenuItem', _objectSpread(_objectSpread({}, props), {}, {
291
311
  highlighted: !props.disabled && props.highlighted
292
312
  })).className, className) || undefined
@@ -309,26 +329,38 @@ function Addon(props) {
309
329
 
310
330
  function Hint(props) {
311
331
  var _ref4 = arguments[0],
312
- _ref7;
332
+ _ref8;
313
333
 
314
334
  var SDropdownMenuItem = Flex;
315
- return _ref7 = sstyled(props.styles), /*#__PURE__*/React.createElement(SDropdownMenuItem, _ref7.cn("SDropdownMenuItem", _objectSpread({}, _assignProps4({
316
- "variant": "hint"
335
+ return _ref8 = sstyled(props.styles), /*#__PURE__*/React.createElement(SDropdownMenuItem, _ref8.cn("SDropdownMenuItem", _objectSpread({}, _assignProps4({
336
+ "variant": "hint",
337
+ "role": "menuitem",
338
+ "tabIndex": 0
317
339
  }, _ref4))));
318
340
  }
319
341
 
320
342
  function Title(props) {
321
343
  var _ref5 = arguments[0],
322
- _ref8;
344
+ _ref9;
323
345
 
324
346
  var SDropdownMenuItem = Flex;
325
- return _ref8 = sstyled(props.styles), /*#__PURE__*/React.createElement(SDropdownMenuItem, _ref8.cn("SDropdownMenuItem", _objectSpread({}, _assignProps5({
326
- "variant": "title"
347
+ return _ref9 = sstyled(props.styles), /*#__PURE__*/React.createElement(SDropdownMenuItem, _ref9.cn("SDropdownMenuItem", _objectSpread({}, _assignProps5({
348
+ "variant": "title",
349
+ "role": "menuitem",
350
+ "tabIndex": 0
327
351
  }, _ref5))));
328
352
  }
329
353
 
354
+ function Trigger() {
355
+ var _ref6 = arguments[0];
356
+ return /*#__PURE__*/React.createElement(Dropdown.Trigger, _assignProps6({
357
+ "type": "button",
358
+ "aria-haspopup": "true"
359
+ }, _ref6));
360
+ }
361
+
330
362
  var DropdownMenu = createComponent(DropdownMenuRoot, {
331
- Trigger: Dropdown.Trigger,
363
+ Trigger: Trigger,
332
364
  Popper: Dropdown.Popper,
333
365
  List: List,
334
366
  Menu: Menu,
package/lib/es6/DropdownMenu.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DropdownMenu.js","names":["React","cn","createComponent","Component","sstyled","Root","Dropdown","Box","Flex","useBox","useFlex","ScrollAreaComponent","KEYS","INTERACTION_TAGS","DropdownMenuRoot","e","amount","shiftKey","key","includes","target","tagName","preventDefault","handlers","visible","moveHighlightedIndex","_highlightedItem","click","node","scrollIntoView","asProps","highlightedIndex","prevHighlightedIndex","block","inline","size","onKeyDown","handlerKeyDown","tabIndex","props","index","highlighted","extraProps","_items","push","ref","scrollToNode","itemsLastIndex","length","selectedIndex","findIndex","item","selected","newIndex","disabled","Children","style","defaultVisible","defaultHighlightedIndex","List","SDropdownMenuList","styles","Menu","DropdownMenu","Item","forwardRef","SDropdownMenuItem","className","other","undefined","Addon","SDropdownMenuItemAddon","Hint","Title","Trigger","Popper","ItemTitle","ItemHint","parent"],"sources":["../../src/DropdownMenu.jsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport Dropdown from '@semcore/dropdown';\nimport { Box, Flex, useBox, useFlex } from '@semcore/flex-box';\nimport ScrollAreaComponent from '@semcore/scroll-area';\n\nimport style from './style/dropdown-menu.shadow.css';\n\nconst KEYS = ['ArrowDown', 'ArrowUp', 'Enter', ' '];\nconst INTERACTION_TAGS = ['INPUT', 'TEXTAREA'];\n\nclass DropdownMenuRoot extends Component {\n static displayName = 'DropdownMenu';\n static style = style;\n\n static defaultProps = {\n size: 'm',\n defaultVisible: false,\n defaultHighlightedIndex: null,\n };\n\n _items = [];\n\n _highlightedItem = null;\n\n prevHighlightedIndex = null;\n\n uncontrolledProps() {\n return {\n highlightedIndex: null,\n visible: null,\n };\n }\n\n handlerKeyDown = (e) => {\n const amount = e.shiftKey ? 5 : 1;\n\n if (e.key === ' ' && INTERACTION_TAGS.includes(e.target.tagName)) return;\n if (!KEYS.includes(e.key)) return;\n\n e.preventDefault();\n\n this.handlers.visible(true);\n\n switch (e.key) {\n case 'ArrowDown':\n this.moveHighlightedIndex(amount, e);\n break;\n case 'ArrowUp':\n this.moveHighlightedIndex(-amount, e);\n break;\n case ' ':\n case 'Enter':\n if (this._highlightedItem) this._highlightedItem.click();\n break;\n }\n };\n\n getTriggerProps() {\n const { size } = this.asProps;\n return {\n size,\n onKeyDown: this.handlerKeyDown,\n };\n }\n\n getListProps() {\n const { size } = this.asProps;\n return {\n size,\n };\n }\n\n getPopperProps() {\n return {\n tabIndex: 0,\n onKeyDown: this.handlerKeyDown,\n };\n }\n\n getItemProps(props, index) {\n const { size, highlightedIndex } = this.asProps;\n const highlighted = index === highlightedIndex;\n const extraProps = {};\n\n this._items.push(props);\n if (highlighted) {\n extraProps.ref = this.scrollToNode;\n }\n\n return {\n size,\n highlighted,\n ...extraProps,\n };\n }\n\n getItemHintProps() {\n const { size } = this.asProps;\n return {\n size,\n };\n }\n\n getItemTitleProps() {\n const { size } = this.asProps;\n return {\n size,\n };\n }\n\n scrollToNode = (node) => {\n this._highlightedItem = node;\n if (node && node.scrollIntoView) {\n if (this.asProps.highlightedIndex !== this.prevHighlightedIndex) {\n this.prevHighlightedIndex = this.asProps.highlightedIndex;\n node.scrollIntoView({\n block: 'nearest',\n inline: 'nearest',\n });\n }\n }\n };\n\n moveHighlightedIndex(amount, e) {\n let { highlightedIndex } = this.asProps;\n const itemsLastIndex = this._items.length - 1;\n const selectedIndex = this._items.findIndex((item) => item.selected);\n\n if (itemsLastIndex < 0) return;\n\n if (highlightedIndex == null) {\n if (selectedIndex !== -1) {\n highlightedIndex = selectedIndex;\n } else {\n highlightedIndex = amount < 0 ? 0 : itemsLastIndex;\n }\n }\n\n let newIndex = highlightedIndex + amount;\n if (newIndex < 0) {\n newIndex = amount + itemsLastIndex + 1;\n } else if (newIndex > itemsLastIndex) {\n newIndex = newIndex - itemsLastIndex - 1;\n }\n\n if (this._items[newIndex] && this._items[newIndex].disabled) {\n this.moveHighlightedIndex(amount < 0 ? amount - 1 : amount + 1, e);\n } else {\n this.handlers.highlightedIndex(newIndex, e);\n }\n }\n\n componentDidUpdate() {\n const { visible } = this.asProps;\n\n if (!visible) {\n this.handlers.highlightedIndex(null);\n }\n }\n\n render() {\n const { Children } = this.asProps;\n const props = {};\n\n this._items = [];\n\n return (\n <Root render={Dropdown} {...props}>\n <Children />\n </Root>\n );\n }\n}\n\nfunction List(props) {\n const SDropdownMenuList = Root;\n return sstyled(props.styles)(\n <SDropdownMenuList render={Box} tag={ScrollAreaComponent} role=\"menu\" />,\n );\n}\n\nfunction Menu() {\n return (\n <DropdownMenu.Popper>\n <Root render={DropdownMenu.List} />\n </DropdownMenu.Popper>\n );\n}\n\nfunction Item(props) {\n const [SDropdownMenuItem, { className, ...other }] = useFlex(props, props.forwardRef);\n const styles = sstyled(props.styles);\n return (\n <SDropdownMenuItem\n role=\"menuitem\"\n tabIndex={-1}\n className={\n cn(\n styles.cn('SDropdownMenuItem', {\n ...props,\n highlighted: !props.disabled && props.highlighted,\n }).className,\n className,\n ) || undefined\n }\n {...other}\n />\n );\n}\n\nfunction Addon(props) {\n const [SDropdownMenuItemAddon, { className, ...other }] = useBox(props, props.forwardRef);\n const styles = sstyled(props.styles);\n return (\n <SDropdownMenuItemAddon\n className={cn(styles.cn('SDropdownMenuItemAddon', props).className, className) || undefined}\n {...other}\n />\n );\n}\n\nfunction Hint(props) {\n const SDropdownMenuItem = Root;\n return sstyled(props.styles)(<SDropdownMenuItem render={Flex} variant=\"hint\" />);\n}\n\nfunction Title(props) {\n const SDropdownMenuItem = Root;\n return sstyled(props.styles)(<SDropdownMenuItem render={Flex} variant=\"title\" />);\n}\n\nconst DropdownMenu = createComponent(\n DropdownMenuRoot,\n {\n Trigger: Dropdown.Trigger,\n Popper: Dropdown.Popper,\n List,\n Menu,\n Item: [Item, { Addon }],\n ItemTitle: Title,\n ItemHint: Hint,\n },\n {\n parent: [Dropdown],\n },\n);\n\nexport default DropdownMenu;\n"],"mappings":"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"}
1
+ {"version":3,"file":"DropdownMenu.js","names":["React","cn","createComponent","Component","sstyled","Root","Dropdown","Box","Flex","useBox","useFlex","ScrollAreaComponent","uniqueIDEnhancement","KEYS","INTERACTION_TAGS","DropdownMenuRoot","e","amount","shiftKey","key","includes","target","tagName","preventDefault","handlers","visible","moveHighlightedIndex","_highlightedItem","click","node","scrollIntoView","asProps","highlightedIndex","prevHighlightedIndex","block","inline","size","uid","disablePortal","id","undefined","onKeyDown","handlerKeyDown","index","tabIndex","props","highlighted","extraProps","_items","push","ref","scrollToNode","itemsLastIndex","length","selectedIndex","findIndex","item","selected","newIndex","disabled","Children","style","defaultVisible","defaultHighlightedIndex","List","SDropdownMenuList","styles","Menu","DropdownMenu","Item","forwardRef","SDropdownMenuItem","className","other","label","Addon","SDropdownMenuItemAddon","Hint","Title","Trigger","Popper","ItemTitle","ItemHint","parent"],"sources":["../../src/DropdownMenu.jsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport Dropdown from '@semcore/dropdown';\nimport { Box, Flex, useBox, useFlex } from '@semcore/flex-box';\nimport ScrollAreaComponent from '@semcore/scroll-area';\nimport uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';\n\nimport style from './style/dropdown-menu.shadow.css';\n\nconst KEYS = ['ArrowDown', 'ArrowUp', 'Enter', ' '];\nconst INTERACTION_TAGS = ['INPUT', 'TEXTAREA'];\n\nclass DropdownMenuRoot extends Component {\n static displayName = 'DropdownMenu';\n static style = style;\n static enhance = [uniqueIDEnhancement()];\n\n static defaultProps = {\n size: 'm',\n defaultVisible: false,\n defaultHighlightedIndex: null,\n };\n\n _items = [];\n\n _highlightedItem = null;\n\n prevHighlightedIndex = null;\n\n uncontrolledProps() {\n return {\n highlightedIndex: null,\n visible: null,\n };\n }\n\n handlerKeyDown = (e) => {\n const amount = e.shiftKey ? 5 : 1;\n\n if (e.key === ' ' && INTERACTION_TAGS.includes(e.target.tagName)) return;\n if (!KEYS.includes(e.key)) return;\n\n e.preventDefault();\n\n this.handlers.visible(true);\n\n switch (e.key) {\n case 'ArrowDown':\n this.moveHighlightedIndex(amount, e);\n break;\n case 'ArrowUp':\n this.moveHighlightedIndex(-amount, e);\n break;\n case ' ':\n case 'Enter':\n if (this._highlightedItem) this._highlightedItem.click();\n break;\n }\n };\n\n getTriggerProps() {\n const { size, uid, disablePortal, visible } = this.asProps;\n\n return {\n size,\n id: `igc-${uid}-trigger`,\n 'aria-controls': visible ? `igc-${uid}-popper` : undefined,\n 'aria-flowto': visible && !disablePortal ? `igc-${uid}-popper` : undefined,\n 'aria-label': visible && !disablePortal ? `Press Tab to go to popover` : undefined,\n onKeyDown: this.handlerKeyDown,\n };\n }\n\n getListProps() {\n const { size } = this.asProps;\n return {\n size,\n index: this.asProps.highlightedIndex,\n };\n }\n\n getPopperProps() {\n const { uid, disablePortal } = this.asProps;\n\n return {\n tabIndex: 0,\n onKeyDown: this.handlerKeyDown,\n id: `igc-${uid}-popper`,\n 'aria-flowto': !disablePortal ? `igc-${uid}-trigger` : undefined,\n };\n }\n\n getItemProps(props, index) {\n const { size, highlightedIndex } = this.asProps;\n const highlighted = index === highlightedIndex;\n const extraProps = {};\n\n this._items.push(props);\n if (highlighted) {\n extraProps.ref = this.scrollToNode;\n }\n\n return {\n size,\n highlighted,\n ...extraProps,\n };\n }\n\n getItemHintProps() {\n const { size } = this.asProps;\n return {\n size,\n };\n }\n\n getItemTitleProps() {\n const { size } = this.asProps;\n return {\n size,\n };\n }\n\n scrollToNode = (node) => {\n this._highlightedItem = node;\n if (node && node.scrollIntoView) {\n if (this.asProps.highlightedIndex !== this.prevHighlightedIndex) {\n this.prevHighlightedIndex = this.asProps.highlightedIndex;\n node.scrollIntoView({\n block: 'nearest',\n inline: 'nearest',\n });\n }\n }\n };\n\n moveHighlightedIndex(amount, e) {\n let { highlightedIndex } = this.asProps;\n const itemsLastIndex = this._items.length - 1;\n const selectedIndex = this._items.findIndex((item) => item.selected);\n\n if (itemsLastIndex < 0) return;\n\n if (highlightedIndex == null) {\n if (selectedIndex !== -1) {\n highlightedIndex = selectedIndex;\n } else {\n highlightedIndex = amount < 0 ? 0 : itemsLastIndex;\n }\n }\n\n let newIndex = highlightedIndex + amount;\n if (newIndex < 0) {\n newIndex = amount + itemsLastIndex + 1;\n } else if (newIndex > itemsLastIndex) {\n newIndex = newIndex - itemsLastIndex - 1;\n }\n\n if (this._items[newIndex] && this._items[newIndex].disabled) {\n this.moveHighlightedIndex(amount < 0 ? amount - 1 : amount + 1, e);\n } else {\n this.handlers.highlightedIndex(newIndex, e);\n }\n }\n\n componentDidUpdate() {\n const { visible } = this.asProps;\n\n if (!visible) {\n this.handlers.highlightedIndex(null);\n }\n }\n\n render() {\n const { Children } = this.asProps;\n const props = {};\n\n this._items = [];\n\n return (\n <Root render={Dropdown} {...props}>\n <Children />\n </Root>\n );\n }\n}\n\nfunction List(props) {\n const SDropdownMenuList = Root;\n\n return sstyled(props.styles)(\n <SDropdownMenuList\n render={Box}\n tag={ScrollAreaComponent}\n role=\"menu\"\n aria-activedescendant={props.index}\n />,\n );\n}\n\nfunction Menu() {\n return (\n <DropdownMenu.Popper>\n <Root render={DropdownMenu.List} />\n </DropdownMenu.Popper>\n );\n}\n\nfunction Item(props) {\n const [SDropdownMenuItem, { className, ...other }] = useFlex(props, props.forwardRef);\n const styles = sstyled(props.styles);\n return (\n <SDropdownMenuItem\n role=\"menuitem\"\n tabIndex={0}\n id={props.label}\n className={\n cn(\n styles.cn('SDropdownMenuItem', {\n ...props,\n highlighted: !props.disabled && props.highlighted,\n }).className,\n className,\n ) || undefined\n }\n {...other}\n />\n );\n}\n\nfunction Addon(props) {\n const [SDropdownMenuItemAddon, { className, ...other }] = useBox(props, props.forwardRef);\n const styles = sstyled(props.styles);\n return (\n <SDropdownMenuItemAddon\n className={cn(styles.cn('SDropdownMenuItemAddon', props).className, className) || undefined}\n {...other}\n />\n );\n}\n\nfunction Hint(props) {\n const SDropdownMenuItem = Root;\n return sstyled(props.styles)(\n <SDropdownMenuItem render={Flex} variant=\"hint\" role=\"menuitem\" tabIndex={0} />,\n );\n}\n\nfunction Title(props) {\n const SDropdownMenuItem = Root;\n return sstyled(props.styles)(\n <SDropdownMenuItem render={Flex} variant=\"title\" role=\"menuitem\" tabIndex={0} />,\n );\n}\n\nfunction Trigger() {\n return <Root render={Dropdown.Trigger} type=\"button\" aria-haspopup=\"true\" />;\n}\n\nconst DropdownMenu = createComponent(\n DropdownMenuRoot,\n {\n Trigger,\n Popper: Dropdown.Popper,\n List,\n Menu,\n Item: [Item, { Addon }],\n ItemTitle: Title,\n ItemHint: Hint,\n },\n {\n parent: [Dropdown],\n },\n);\n\nexport default DropdownMenu;\n"],"mappings":"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"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@semcore/dropdown-menu",
3
3
  "description": "Semrush DropdownMenu Component",
4
- "version": "3.0.12",
4
+ "version": "3.1.0",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/es6/index.js",
7
7
  "typings": "lib/types/index.d.ts",
@@ -13,10 +13,10 @@
13
13
  "test": "jest"
14
14
  },
15
15
  "dependencies": {
16
- "@semcore/utils": "^3.15",
17
16
  "@semcore/dropdown": "^3",
18
17
  "@semcore/flex-box": "^4",
19
18
  "@semcore/scroll-area": "^4.0.0",
19
+ "@semcore/utils": "^3.15",
20
20
  "classnames": "2.2.6"
21
21
  },
22
22
  "peerDependencies": {
@@ -32,6 +32,8 @@
32
32
  "directory": "semcore/dropdown-menu"
33
33
  },
34
34
  "devDependencies": {
35
+ "@guidepup/playwright": "0.6.1",
36
+ "@playwright/test": "1.25.1",
35
37
  "@semcore/jest-preset-ui": "1.0.0"
36
38
  }
37
39
  }