npm - @semcore/dropdown-menu - Versions diffs - 2.3.11 → 3.0.1 - Mend

@semcore/dropdown-menu 2.3.11 → 3.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/CHANGELOG.md +20 -0
package/lib/cjs/DropdownMenu.js +24 -63
package/lib/cjs/DropdownMenu.js.map +1 -1
package/lib/cjs/index.d.ts +0 -11
package/lib/cjs/style/dropdown-menu.shadow.css +9 -19
package/lib/es6/DropdownMenu.js +23 -61
package/lib/es6/DropdownMenu.js.map +1 -1
package/lib/es6/index.d.ts +0 -11
package/lib/es6/style/dropdown-menu.shadow.css +9 -19
package/lib/types/index.d.ts +0 -11
package/package.json +3 -3
package/src/DropdownMenu.jsx +2 -38
package/src/index.d.ts +0 -11
package/src/style/dropdown-menu.shadow.css +9 -19

package/CHANGELOG.md CHANGED Viewed

@@ -2,6 +2,26 @@
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
+## [3.0.1] - 2022-05-19
+### Changed
+- Version patch update due to children dependencies update (`@semcore/utils` [3.32.0 ~> 3.32.1], `@semcore/dropdown` [3.0.0 ~> 3.0.1], `@semcore/flex-box` [4.5.1 ~> 4.5.3]).
+## [3.0.0] - 2022-05-17
+### BREAK
+- Updated styles according to the library redesign policy.
+- Removed deprecated props `onSelect, optionCount, triggerType`.
+- Removed value "xl" for "size".
+## [2.3.12] - 2022-04-25
+### Changed
+- Version patch update due to children dependencies update (`@semcore/scroll-area` [3.7.0 ~> 3.7.1]).
 ## [2.3.11] - 2022-04-21
 ### Changed

package/lib/cjs/DropdownMenu.js CHANGED Viewed

@@ -11,10 +11,10 @@ exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -41,11 +41,8 @@ var _flexBox = require("@semcore/flex-box");
 var _scrollArea = _interopRequireDefault(require("@semcore/scroll-area"));
-var _logger = _interopRequireDefault(require("@semcore/utils/lib/logger"));
-var _excluded = ["Children", "optionCount", "triggerType", "onSelect"],
-    _excluded2 = ["className"],
-    _excluded3 = ["className"];
+var _excluded = ["className"],
+    _excluded2 = ["className"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -64,24 +61,23 @@ var style = (
 /*__reshadow_css_start__*/
 _core.sstyled.insert(
 /*__inner_css_start__*/
-".___SDropdownMenuList_1sdvk_gg_{max-height:240px;margin:4px 0;padding:0;position:relative;min-height:26px;min-width:32px}.___SDropdownMenuItem_1sdvk_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_1sdvk_gg_:hover{background-color:rgba(0,0,0,.1)}.___SDropdownMenuItem_1sdvk_gg_:focus{outline:none}.___SDropdownMenuItem_1sdvk_gg_.__highlighted_1sdvk_gg_{z-index:1;box-shadow:0 0 0 3px rgba(43, 148, 225, 0.3) inset}.___SDropdownMenuItem_1sdvk_gg_.__selected_1sdvk_gg_{background-color:rgba(43,148,225,.2)}.___SDropdownMenuItem_1sdvk_gg_.__selected_1sdvk_gg_:hover{background-color:rgba(43,148,225,.2)}.___SDropdownMenuItem_1sdvk_gg_.__disabled_1sdvk_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SDropdownMenuItem_1sdvk_gg_._size_xl_1sdvk_gg_{font-size:16px;line-height:1.5;padding:8px 12px;min-height:42px}.___SDropdownMenuItem_1sdvk_gg_._size_l_1sdvk_gg_{font-size:14px;line-height:1.42;padding:6px 8px;min-height:32px}.___SDropdownMenuItem_1sdvk_gg_._size_m_1sdvk_gg_{font-size:12px;line-height:1.5;padding:4px 8px;min-height:26px}.___SDropdownMenuItem_1sdvk_gg_.__notInteractive_1sdvk_gg_{cursor:default}.___SDropdownMenuItem_1sdvk_gg_.__notInteractive_1sdvk_gg_:hover{background:none}.___SDropdownMenuItem_1sdvk_gg_._variant_hint_1sdvk_gg_{color:#757575;cursor:default}.___SDropdownMenuItem_1sdvk_gg_._variant_hint_1sdvk_gg_:hover{background:none}.___SDropdownMenuItem_1sdvk_gg_._variant_title_1sdvk_gg_{font-weight:700;cursor:default}.___SDropdownMenuItem_1sdvk_gg_._variant_title_1sdvk_gg_:hover{background:none}.___SDropdownMenuItemAddon_1sdvk_gg_{display:inline-flex;margin-left:8px;margin-right:8px}.___SDropdownMenuItemAddon_1sdvk_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_1sdvk_gg_:last-child{margin-right:0}.___SPopper_1sdvk_gg_:focus{box-shadow:0 0 0 3px rgba(43, 148, 225, 0.3)}"
+".___SDropdownMenuList_wus9c_gg_{max-height:240px;margin:4px 0;padding:0;position:relative;min-height:26px;min-width:32px}.___SDropdownMenuItem_wus9c_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_wus9c_gg_:hover{background-color:#f4f5f9}.___SDropdownMenuItem_wus9c_gg_:focus{outline:none}.___SDropdownMenuItem_wus9c_gg_.__highlighted_wus9c_gg_{z-index:1;box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2) inset}.___SDropdownMenuItem_wus9c_gg_.__selected_wus9c_gg_{background-color:rgba(196,229,254,.7)}.___SDropdownMenuItem_wus9c_gg_.__selected_wus9c_gg_:hover{background-color:#c4e5fe}.___SDropdownMenuItem_wus9c_gg_.__disabled_wus9c_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SDropdownMenuItem_wus9c_gg_._size_l_wus9c_gg_{font-size:16px;line-height:1.5;padding:8px 12px;min-height:40px}.___SDropdownMenuItem_wus9c_gg_._size_m_wus9c_gg_{font-size:14px;line-height:1.42;padding:6px 8px;min-height:32px}.___SDropdownMenuItem_wus9c_gg_.__notInteractive_wus9c_gg_{cursor:default}.___SDropdownMenuItem_wus9c_gg_.__notInteractive_wus9c_gg_:hover{background:none}.___SDropdownMenuItem_wus9c_gg_._variant_hint_wus9c_gg_{color:#6c6e79;cursor:default}.___SDropdownMenuItem_wus9c_gg_._variant_hint_wus9c_gg_:hover{background:none}.___SDropdownMenuItem_wus9c_gg_._variant_title_wus9c_gg_{font-weight:700;cursor:default}.___SDropdownMenuItem_wus9c_gg_._variant_title_wus9c_gg_:hover{background:none}.___SDropdownMenuItemAddon_wus9c_gg_{display:inline-flex;margin-left:8px;margin-right:8px}.___SDropdownMenuItemAddon_wus9c_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_wus9c_gg_:last-child{margin-right:0}.___SPopper_wus9c_gg_:focus{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}"
 /*__inner_css_end__*/
-, "19x58cq_gg_")
+, "1c6qqff_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SDropdownMenuList": "___SDropdownMenuList_1sdvk_gg_",
-  "__SDropdownMenuItem": "___SDropdownMenuItem_1sdvk_gg_",
-  "_highlighted": "__highlighted_1sdvk_gg_",
-  "_selected": "__selected_1sdvk_gg_",
-  "_disabled": "__disabled_1sdvk_gg_",
-  "_size_xl": "_size_xl_1sdvk_gg_",
-  "_size_l": "_size_l_1sdvk_gg_",
-  "_size_m": "_size_m_1sdvk_gg_",
-  "_notInteractive": "__notInteractive_1sdvk_gg_",
-  "_variant_hint": "_variant_hint_1sdvk_gg_",
-  "_variant_title": "_variant_title_1sdvk_gg_",
-  "__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_1sdvk_gg_",
-  "__SPopper": "___SPopper_1sdvk_gg_"
+  "__SDropdownMenuList": "___SDropdownMenuList_wus9c_gg_",
+  "__SDropdownMenuItem": "___SDropdownMenuItem_wus9c_gg_",
+  "_highlighted": "__highlighted_wus9c_gg_",
+  "_selected": "__selected_wus9c_gg_",
+  "_disabled": "__disabled_wus9c_gg_",
+  "_size_l": "_size_l_wus9c_gg_",
+  "_size_m": "_size_m_wus9c_gg_",
+  "_notInteractive": "__notInteractive_wus9c_gg_",
+  "_variant_hint": "_variant_hint_wus9c_gg_",
+  "_variant_title": "_variant_title_wus9c_gg_",
+  "__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_wus9c_gg_",
+  "__SPopper": "___SPopper_wus9c_gg_"
 });
 var KEYS = ['ArrowDown', 'ArrowUp', 'Enter', ' '];
 var INTERACTION_TAGS = ['INPUT', 'TEXTAREA'];
@@ -129,20 +125,6 @@ var DropdownMenuRoot = /*#__PURE__*/function (_Component) {
           break;
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "bindHandlerFallbackSelect", function (props, index) {
-      return function () {
-        var _this$asProps = _this.asProps,
-            onSelect = _this$asProps.onSelect,
-            multiselect = _this$asProps.multiselect;
-        var result = onSelect(_objectSpread({
-          index: index
-        }, props));
-        if (!multiselect && result !== false) {
-          _this.handlers.visible(false);
-        }
-      };
-    });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "scrollToNode", function (node) {
       _this._highlightedItem = node;
@@ -195,17 +177,12 @@ var DropdownMenuRoot = /*#__PURE__*/function (_Component) {
   }, {
     key: "getItemProps",
     value: function getItemProps(props, index) {
-      var _this$asProps2 = this.asProps,
-          size = _this$asProps2.size,
-          highlightedIndex = _this$asProps2.highlightedIndex,
-          onSelect = _this$asProps2.onSelect;
+      var _this$asProps = this.asProps,
+          size = _this$asProps.size,
+          highlightedIndex = _this$asProps.highlightedIndex;
       var highlighted = index === highlightedIndex;
       var extraProps = {};
-      if (onSelect !== undefined) {
-        extraProps.onClick = this.bindHandlerFallbackSelect(props, index);
-      }
       this._items.push(props);
       if (highlighted) {
@@ -280,25 +257,9 @@ var DropdownMenuRoot = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _ref = this.asProps;
-      var _this$asProps3 = this.asProps,
-          Children = _this$asProps3.Children,
-          optionCount = _this$asProps3.optionCount,
-          triggerType = _this$asProps3.triggerType,
-          onSelect = _this$asProps3.onSelect,
-          other = (0, _objectWithoutProperties2["default"])(_this$asProps3, _excluded);
+      var Children = this.asProps.Children;
       var props = {};
       this._items = [];
-      _logger["default"].warn(onSelect !== undefined, "Property 'onSelect' is deprecated, subscribe to the 'onClick' of the needed 'Item'", other['data-ui-name'] || DropdownMenu.displayName);
-      _logger["default"].warn(optionCount !== undefined, "The 'optionCount' property is deprecated and is now automatically determined from the number of Item", other['data-ui-name'] || DropdownMenu.displayName);
-      _logger["default"].warn(triggerType !== undefined, "The 'triggerType' property is deprecated, use 'interaction=\"focus\"'", other['data-ui-name'] || DropdownMenu.displayName);
-      if (triggerType === 'input') {
-        props.interaction = 'focus';
-      }
       return /*#__PURE__*/_react["default"].createElement(_dropdown["default"], (0, _core.assignProps)(_objectSpread({}, props), _ref), /*#__PURE__*/_react["default"].createElement(Children, null));
     }
   }]);
@@ -335,7 +296,7 @@ function Item(props) {
       SDropdownMenuItem = _useFlex2[0],
       _useFlex2$ = _useFlex2[1],
       className = _useFlex2$.className,
-      other = (0, _objectWithoutProperties2["default"])(_useFlex2$, _excluded2);
+      other = (0, _objectWithoutProperties2["default"])(_useFlex2$, _excluded);
   var styles = (0, _core.sstyled)(props.styles);
   return /*#__PURE__*/_react["default"].createElement(SDropdownMenuItem, (0, _extends2["default"])({
@@ -353,7 +314,7 @@ function Addon(props) {
       SDropdownMenuItemAddon = _useBox2[0],
       _useBox2$ = _useBox2[1],
       className = _useBox2$.className,
-      other = (0, _objectWithoutProperties2["default"])(_useBox2$, _excluded3);
+      other = (0, _objectWithoutProperties2["default"])(_useBox2$, _excluded2);
   var styles = (0, _core.sstyled)(props.styles);
   return /*#__PURE__*/_react["default"].createElement(SDropdownMenuItemAddon, (0, _extends2["default"])({

package/lib/cjs/DropdownMenu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/DropdownMenu.jsx"],"names":["KEYS","INTERACTION_TAGS","DropdownMenuRoot","e","amount","shiftKey","key","includes","target","tagName","preventDefault","handlers","visible","moveHighlightedIndex","_highlightedItem","click","props","index","asProps","onSelect","multiselect","result","node","scrollIntoView","highlightedIndex","prevHighlightedIndex","block","inline","size","onKeyDown","handlerKeyDown","tabIndex","highlighted","extraProps","undefined","onClick","bindHandlerFallbackSelect","_items","push","ref","scrollToNode","itemsLastIndex","length","selectedIndex","findIndex","item","selected","newIndex","disabled","Children","optionCount","triggerType","other","logger","warn","DropdownMenu","displayName","interaction","Dropdown","Component","style","defaultVisible","defaultHighlightedIndex","List","SDropdownMenuList","Box","styles","ScrollAreaComponent","Menu","Item","forwardRef","SDropdownMenuItem","className","cn","Addon","SDropdownMenuItemAddon","Hint","Flex","Title","Trigger","Popper","ItemTitle","ItemHint","parent"],"mappings":"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","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 logger from '@semcore/utils/lib/logger';\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 bindHandlerFallbackSelect = (props, index) => () => {\n const { onSelect, multiselect } = this.asProps;\n const result = onSelect({\n index,\n ...props,\n });\n\n if (!multiselect && result !== false) {\n this.handlers.visible(false);\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, onSelect } = this.asProps;\n const highlighted = index === highlightedIndex;\n const extraProps = {};\n\n if (onSelect !== undefined) {\n extraProps.onClick = this.bindHandlerFallbackSelect(props, index);\n }\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, optionCount, triggerType, onSelect, ...other } = this.asProps;\n const props = {};\n\n this._items = [];\n\n logger.warn(\n onSelect !== undefined,\n \"Property 'onSelect' is deprecated, subscribe to the 'onClick' of the needed 'Item'\",\n other['data-ui-name'] \|\| DropdownMenu.displayName,\n );\n logger.warn(\n optionCount !== undefined,\n \"The 'optionCount' property is deprecated and is now automatically determined from the number of Item\",\n other['data-ui-name'] \|\| DropdownMenu.displayName,\n );\n logger.warn(\n triggerType !== undefined,\n \"The 'triggerType' property is deprecated, use 'interaction=\\\"focus\\\"'\",\n other['data-ui-name'] \|\| DropdownMenu.displayName,\n );\n if (triggerType === 'input') {\n props.interaction = 'focus';\n }\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"],"file":"DropdownMenu.js"}
1	+ {"version":3,"sources":["../../src/DropdownMenu.jsx"],"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","styles","ScrollAreaComponent","Menu","DropdownMenu","Item","forwardRef","SDropdownMenuItem","className","other","cn","undefined","Addon","SDropdownMenuItemAddon","Hint","Flex","Title","Trigger","Popper","ItemTitle","ItemHint","parent"],"mappings":"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","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"],"file":"DropdownMenu.js"}

package/lib/cjs/index.d.ts CHANGED Viewed

@@ -24,17 +24,6 @@ export interface IDropdownMenuProps extends IDropdownProps {
    * highlightedIndex -  Index of the selected item
    */
   onHighlightedIndexChange?: (highlightedIndex: number) => void;
-  /** @deprecated v2.0.0 */
-  optionCount?: number;
-  /** Trigger type selection
-   * @deprecated v2.0.0 */
-  triggerType?: 'button' | 'input';
-  /** Handler in option selection
-   * @deprecated v2.0.0 */
-  onSelect?: (item: any) => void;
-  /** Multiple choice of options
-   * @deprecated v2.0.0 {@link ISelectProps.multiselect} */
-  multiselect?: boolean;
 }
 export interface IDropdownMenuListProps extends IBoxProps, IScrollAreaProps {

package/lib/cjs/style/dropdown-menu.shadow.css CHANGED Viewed

@@ -21,7 +21,7 @@ SDropdownMenuItem {
   line-height: normal;
   &:hover {
-    background-color: color-mod(black a(10%));
+    background-color: var(--gray-50);
   }
   &:focus {
@@ -31,14 +31,14 @@ SDropdownMenuItem {
 SDropdownMenuItem[highlighted] {
   z-index: 1;
-  box-shadow: var(--keyborad-focus) inset;
+  box-shadow: var(--keyboard-focus) inset;
 }
 SDropdownMenuItem[selected] {
-  background-color: color-mod(var(--light-blue) a(20%));
+  background-color: color-mod(var(--blue-100) a(70%));
   &:hover {
-    background-color: color-mod(var(--light-blue) a(20%));
+    background-color: var(--blue-100);
   }
 }
@@ -48,30 +48,20 @@ SDropdownMenuItem[disabled] {
   pointer-events: none;
 }
-SDropdownMenuItem[size='xl'] {
+SDropdownMenuItem[size='l'] {
   font-size: var(--fs-300);
   line-height: var(--lh-300);
   padding: 8px 12px;
-  min-height: 42px;
+  min-height: 40px;
 }
-SDropdownMenuItem[size='l'] {
+SDropdownMenuItem[size='m'] {
   font-size: var(--fs-200);
   line-height: var(--lh-200);
   padding: 6px 8px;
   min-height: 32px;
 }
-SDropdownMenuItem[size='m'] {
-  font-size: var(--fs-100);
-  line-height: var(--lh-100);
-  padding: 4px 8px;
-  min-height: 26px;
-}
 SDropdownMenuItem[notInteractive] {
   cursor: default;
@@ -81,7 +71,7 @@ SDropdownMenuItem[notInteractive] {
 }
 SDropdownMenuItem[variant='hint'] {
-  color: var(--gray60);
+  color: var(--gray-500);
   cursor: default;
   &:hover {
@@ -114,6 +104,6 @@ SDropdownMenuItemAddon {
 SPopper {
   &:focus {
-    box-shadow: var(--keyborad-focus);
+    box-shadow: var(--keyboard-focus);
   }
 }

package/lib/es6/DropdownMenu.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
@@ -14,9 +14,8 @@ import { assignProps as _assignProps4 } from "@semcore/core";
 import { assignProps as _assignProps3 } from "@semcore/core";
 import { assignProps as _assignProps2 } from "@semcore/core";
 import { assignProps as _assignProps } from "@semcore/core";
-var _excluded = ["Children", "optionCount", "triggerType", "onSelect"],
-    _excluded2 = ["className"],
-    _excluded3 = ["className"];
+var _excluded = ["className"],
+    _excluded2 = ["className"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -32,31 +31,29 @@ import createComponent, { Component, sstyled, Root } from '@semcore/core';
 import Dropdown from '@semcore/dropdown';
 import { Box, Flex, useBox, useFlex } from '@semcore/flex-box';
 import ScrollAreaComponent from '@semcore/scroll-area';
-import logger from '@semcore/utils/lib/logger';
 /*__reshadow-styles__:"./style/dropdown-menu.shadow.css"*/
 var style = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-".___SDropdownMenuList_1sdvk_gg_{max-height:240px;margin:4px 0;padding:0;position:relative;min-height:26px;min-width:32px}.___SDropdownMenuItem_1sdvk_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_1sdvk_gg_:hover{background-color:rgba(0,0,0,.1)}.___SDropdownMenuItem_1sdvk_gg_:focus{outline:none}.___SDropdownMenuItem_1sdvk_gg_.__highlighted_1sdvk_gg_{z-index:1;box-shadow:0 0 0 3px rgba(43, 148, 225, 0.3) inset}.___SDropdownMenuItem_1sdvk_gg_.__selected_1sdvk_gg_{background-color:rgba(43,148,225,.2)}.___SDropdownMenuItem_1sdvk_gg_.__selected_1sdvk_gg_:hover{background-color:rgba(43,148,225,.2)}.___SDropdownMenuItem_1sdvk_gg_.__disabled_1sdvk_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SDropdownMenuItem_1sdvk_gg_._size_xl_1sdvk_gg_{font-size:16px;line-height:1.5;padding:8px 12px;min-height:42px}.___SDropdownMenuItem_1sdvk_gg_._size_l_1sdvk_gg_{font-size:14px;line-height:1.42;padding:6px 8px;min-height:32px}.___SDropdownMenuItem_1sdvk_gg_._size_m_1sdvk_gg_{font-size:12px;line-height:1.5;padding:4px 8px;min-height:26px}.___SDropdownMenuItem_1sdvk_gg_.__notInteractive_1sdvk_gg_{cursor:default}.___SDropdownMenuItem_1sdvk_gg_.__notInteractive_1sdvk_gg_:hover{background:none}.___SDropdownMenuItem_1sdvk_gg_._variant_hint_1sdvk_gg_{color:#757575;cursor:default}.___SDropdownMenuItem_1sdvk_gg_._variant_hint_1sdvk_gg_:hover{background:none}.___SDropdownMenuItem_1sdvk_gg_._variant_title_1sdvk_gg_{font-weight:700;cursor:default}.___SDropdownMenuItem_1sdvk_gg_._variant_title_1sdvk_gg_:hover{background:none}.___SDropdownMenuItemAddon_1sdvk_gg_{display:inline-flex;margin-left:8px;margin-right:8px}.___SDropdownMenuItemAddon_1sdvk_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_1sdvk_gg_:last-child{margin-right:0}.___SPopper_1sdvk_gg_:focus{box-shadow:0 0 0 3px rgba(43, 148, 225, 0.3)}"
+".___SDropdownMenuList_wus9c_gg_{max-height:240px;margin:4px 0;padding:0;position:relative;min-height:26px;min-width:32px}.___SDropdownMenuItem_wus9c_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_wus9c_gg_:hover{background-color:#f4f5f9}.___SDropdownMenuItem_wus9c_gg_:focus{outline:none}.___SDropdownMenuItem_wus9c_gg_.__highlighted_wus9c_gg_{z-index:1;box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2) inset}.___SDropdownMenuItem_wus9c_gg_.__selected_wus9c_gg_{background-color:rgba(196,229,254,.7)}.___SDropdownMenuItem_wus9c_gg_.__selected_wus9c_gg_:hover{background-color:#c4e5fe}.___SDropdownMenuItem_wus9c_gg_.__disabled_wus9c_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SDropdownMenuItem_wus9c_gg_._size_l_wus9c_gg_{font-size:16px;line-height:1.5;padding:8px 12px;min-height:40px}.___SDropdownMenuItem_wus9c_gg_._size_m_wus9c_gg_{font-size:14px;line-height:1.42;padding:6px 8px;min-height:32px}.___SDropdownMenuItem_wus9c_gg_.__notInteractive_wus9c_gg_{cursor:default}.___SDropdownMenuItem_wus9c_gg_.__notInteractive_wus9c_gg_:hover{background:none}.___SDropdownMenuItem_wus9c_gg_._variant_hint_wus9c_gg_{color:#6c6e79;cursor:default}.___SDropdownMenuItem_wus9c_gg_._variant_hint_wus9c_gg_:hover{background:none}.___SDropdownMenuItem_wus9c_gg_._variant_title_wus9c_gg_{font-weight:700;cursor:default}.___SDropdownMenuItem_wus9c_gg_._variant_title_wus9c_gg_:hover{background:none}.___SDropdownMenuItemAddon_wus9c_gg_{display:inline-flex;margin-left:8px;margin-right:8px}.___SDropdownMenuItemAddon_wus9c_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_wus9c_gg_:last-child{margin-right:0}.___SPopper_wus9c_gg_:focus{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}"
 /*__inner_css_end__*/
-, "19x58cq_gg_")
+, "1c6qqff_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SDropdownMenuList": "___SDropdownMenuList_1sdvk_gg_",
-  "__SDropdownMenuItem": "___SDropdownMenuItem_1sdvk_gg_",
-  "_highlighted": "__highlighted_1sdvk_gg_",
-  "_selected": "__selected_1sdvk_gg_",
-  "_disabled": "__disabled_1sdvk_gg_",
-  "_size_xl": "_size_xl_1sdvk_gg_",
-  "_size_l": "_size_l_1sdvk_gg_",
-  "_size_m": "_size_m_1sdvk_gg_",
-  "_notInteractive": "__notInteractive_1sdvk_gg_",
-  "_variant_hint": "_variant_hint_1sdvk_gg_",
-  "_variant_title": "_variant_title_1sdvk_gg_",
-  "__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_1sdvk_gg_",
-  "__SPopper": "___SPopper_1sdvk_gg_"
+  "__SDropdownMenuList": "___SDropdownMenuList_wus9c_gg_",
+  "__SDropdownMenuItem": "___SDropdownMenuItem_wus9c_gg_",
+  "_highlighted": "__highlighted_wus9c_gg_",
+  "_selected": "__selected_wus9c_gg_",
+  "_disabled": "__disabled_wus9c_gg_",
+  "_size_l": "_size_l_wus9c_gg_",
+  "_size_m": "_size_m_wus9c_gg_",
+  "_notInteractive": "__notInteractive_wus9c_gg_",
+  "_variant_hint": "_variant_hint_wus9c_gg_",
+  "_variant_title": "_variant_title_wus9c_gg_",
+  "__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_wus9c_gg_",
+  "__SPopper": "___SPopper_wus9c_gg_"
 });
 var KEYS = ['ArrowDown', 'ArrowUp', 'Enter', ' '];
 var INTERACTION_TAGS = ['INPUT', 'TEXTAREA'];
@@ -109,21 +106,6 @@ var DropdownMenuRoot = /*#__PURE__*/function (_Component) {
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "bindHandlerFallbackSelect", function (props, index) {
-      return function () {
-        var _this$asProps = _this.asProps,
-            onSelect = _this$asProps.onSelect,
-            multiselect = _this$asProps.multiselect;
-        var result = onSelect(_objectSpread({
-          index: index
-        }, props));
-        if (!multiselect && result !== false) {
-          _this.handlers.visible(false);
-        }
-      };
-    });
     _defineProperty(_assertThisInitialized(_this), "scrollToNode", function (node) {
       _this._highlightedItem = node;
@@ -177,17 +159,12 @@ var DropdownMenuRoot = /*#__PURE__*/function (_Component) {
   }, {
     key: "getItemProps",
     value: function getItemProps(props, index) {
-      var _this$asProps2 = this.asProps,
-          size = _this$asProps2.size,
-          highlightedIndex = _this$asProps2.highlightedIndex,
-          onSelect = _this$asProps2.onSelect;
+      var _this$asProps = this.asProps,
+          size = _this$asProps.size,
+          highlightedIndex = _this$asProps.highlightedIndex;
       var highlighted = index === highlightedIndex;
       var extraProps = {};
-      if (onSelect !== undefined) {
-        extraProps.onClick = this.bindHandlerFallbackSelect(props, index);
-      }
       this._items.push(props);
       if (highlighted) {
@@ -262,24 +239,9 @@ var DropdownMenuRoot = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _ref = this.asProps;
-      var _this$asProps3 = this.asProps,
-          Children = _this$asProps3.Children,
-          optionCount = _this$asProps3.optionCount,
-          triggerType = _this$asProps3.triggerType,
-          onSelect = _this$asProps3.onSelect,
-          other = _objectWithoutProperties(_this$asProps3, _excluded);
+      var Children = this.asProps.Children;
       var props = {};
       this._items = [];
-      logger.warn(onSelect !== undefined, "Property 'onSelect' is deprecated, subscribe to the 'onClick' of the needed 'Item'", other['data-ui-name'] || DropdownMenu.displayName);
-      logger.warn(optionCount !== undefined, "The 'optionCount' property is deprecated and is now automatically determined from the number of Item", other['data-ui-name'] || DropdownMenu.displayName);
-      logger.warn(triggerType !== undefined, "The 'triggerType' property is deprecated, use 'interaction=\"focus\"'", other['data-ui-name'] || DropdownMenu.displayName);
-      if (triggerType === 'input') {
-        props.interaction = 'focus';
-      }
       return /*#__PURE__*/React.createElement(Dropdown, _assignProps(_objectSpread({}, props), _ref), /*#__PURE__*/React.createElement(Children, null));
     }
   }]);
@@ -319,7 +281,7 @@ function Item(props) {
       SDropdownMenuItem = _useFlex2[0],
       _useFlex2$ = _useFlex2[1],
       className = _useFlex2$.className,
-      other = _objectWithoutProperties(_useFlex2$, _excluded2);
+      other = _objectWithoutProperties(_useFlex2$, _excluded);
   var styles = sstyled(props.styles);
   return /*#__PURE__*/React.createElement(SDropdownMenuItem, _extends({
@@ -337,7 +299,7 @@ function Addon(props) {
       SDropdownMenuItemAddon = _useBox2[0],
       _useBox2$ = _useBox2[1],
       className = _useBox2$.className,
-      other = _objectWithoutProperties(_useBox2$, _excluded3);
+      other = _objectWithoutProperties(_useBox2$, _excluded2);
   var styles = sstyled(props.styles);
   return /*#__PURE__*/React.createElement(SDropdownMenuItemAddon, _extends({

package/lib/es6/DropdownMenu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/DropdownMenu.jsx"],"names":["React","cn","createComponent","Component","sstyled","Root","Dropdown","Box","Flex","useBox","useFlex","ScrollAreaComponent","logger","KEYS","INTERACTION_TAGS","DropdownMenuRoot","e","amount","shiftKey","key","includes","target","tagName","preventDefault","handlers","visible","moveHighlightedIndex","_highlightedItem","click","props","index","asProps","onSelect","multiselect","result","node","scrollIntoView","highlightedIndex","prevHighlightedIndex","block","inline","size","onKeyDown","handlerKeyDown","tabIndex","highlighted","extraProps","undefined","onClick","bindHandlerFallbackSelect","_items","push","ref","scrollToNode","itemsLastIndex","length","selectedIndex","findIndex","item","selected","newIndex","disabled","Children","optionCount","triggerType","other","warn","DropdownMenu","displayName","interaction","style","defaultVisible","defaultHighlightedIndex","List","SDropdownMenuList","styles","Menu","Item","forwardRef","SDropdownMenuItem","className","Addon","SDropdownMenuItemAddon","Hint","Title","Trigger","Popper","ItemTitle","ItemHint","parent"],"mappings":"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","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 logger from '@semcore/utils/lib/logger';\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 bindHandlerFallbackSelect = (props, index) => () => {\n const { onSelect, multiselect } = this.asProps;\n const result = onSelect({\n index,\n ...props,\n });\n\n if (!multiselect && result !== false) {\n this.handlers.visible(false);\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, onSelect } = this.asProps;\n const highlighted = index === highlightedIndex;\n const extraProps = {};\n\n if (onSelect !== undefined) {\n extraProps.onClick = this.bindHandlerFallbackSelect(props, index);\n }\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, optionCount, triggerType, onSelect, ...other } = this.asProps;\n const props = {};\n\n this._items = [];\n\n logger.warn(\n onSelect !== undefined,\n \"Property 'onSelect' is deprecated, subscribe to the 'onClick' of the needed 'Item'\",\n other['data-ui-name'] \|\| DropdownMenu.displayName,\n );\n logger.warn(\n optionCount !== undefined,\n \"The 'optionCount' property is deprecated and is now automatically determined from the number of Item\",\n other['data-ui-name'] \|\| DropdownMenu.displayName,\n );\n logger.warn(\n triggerType !== undefined,\n \"The 'triggerType' property is deprecated, use 'interaction=\\\"focus\\\"'\",\n other['data-ui-name'] \|\| DropdownMenu.displayName,\n );\n if (triggerType === 'input') {\n props.interaction = 'focus';\n }\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"],"file":"DropdownMenu.js"}
1	+ {"version":3,"sources":["../../src/DropdownMenu.jsx"],"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"],"mappings":"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","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"],"file":"DropdownMenu.js"}

package/lib/es6/index.d.ts CHANGED Viewed

@@ -24,17 +24,6 @@ export interface IDropdownMenuProps extends IDropdownProps {
    * highlightedIndex -  Index of the selected item
    */
   onHighlightedIndexChange?: (highlightedIndex: number) => void;
-  /** @deprecated v2.0.0 */
-  optionCount?: number;
-  /** Trigger type selection
-   * @deprecated v2.0.0 */
-  triggerType?: 'button' | 'input';
-  /** Handler in option selection
-   * @deprecated v2.0.0 */
-  onSelect?: (item: any) => void;
-  /** Multiple choice of options
-   * @deprecated v2.0.0 {@link ISelectProps.multiselect} */
-  multiselect?: boolean;
 }
 export interface IDropdownMenuListProps extends IBoxProps, IScrollAreaProps {

package/lib/es6/style/dropdown-menu.shadow.css CHANGED Viewed

@@ -21,7 +21,7 @@ SDropdownMenuItem {
   line-height: normal;
   &:hover {
-    background-color: color-mod(black a(10%));
+    background-color: var(--gray-50);
   }
   &:focus {
@@ -31,14 +31,14 @@ SDropdownMenuItem {
 SDropdownMenuItem[highlighted] {
   z-index: 1;
-  box-shadow: var(--keyborad-focus) inset;
+  box-shadow: var(--keyboard-focus) inset;
 }
 SDropdownMenuItem[selected] {
-  background-color: color-mod(var(--light-blue) a(20%));
+  background-color: color-mod(var(--blue-100) a(70%));
   &:hover {
-    background-color: color-mod(var(--light-blue) a(20%));
+    background-color: var(--blue-100);
   }
 }
@@ -48,30 +48,20 @@ SDropdownMenuItem[disabled] {
   pointer-events: none;
 }
-SDropdownMenuItem[size='xl'] {
+SDropdownMenuItem[size='l'] {
   font-size: var(--fs-300);
   line-height: var(--lh-300);
   padding: 8px 12px;
-  min-height: 42px;
+  min-height: 40px;
 }
-SDropdownMenuItem[size='l'] {
+SDropdownMenuItem[size='m'] {
   font-size: var(--fs-200);
   line-height: var(--lh-200);
   padding: 6px 8px;
   min-height: 32px;
 }
-SDropdownMenuItem[size='m'] {
-  font-size: var(--fs-100);
-  line-height: var(--lh-100);
-  padding: 4px 8px;
-  min-height: 26px;
-}
 SDropdownMenuItem[notInteractive] {
   cursor: default;
@@ -81,7 +71,7 @@ SDropdownMenuItem[notInteractive] {
 }
 SDropdownMenuItem[variant='hint'] {
-  color: var(--gray60);
+  color: var(--gray-500);
   cursor: default;
   &:hover {
@@ -114,6 +104,6 @@ SDropdownMenuItemAddon {
 SPopper {
   &:focus {
-    box-shadow: var(--keyborad-focus);
+    box-shadow: var(--keyboard-focus);
   }
 }

package/lib/types/index.d.ts CHANGED Viewed

@@ -24,17 +24,6 @@ export interface IDropdownMenuProps extends IDropdownProps {
    * highlightedIndex -  Index of the selected item
    */
   onHighlightedIndexChange?: (highlightedIndex: number) => void;
-  /** @deprecated v2.0.0 */
-  optionCount?: number;
-  /** Trigger type selection
-   * @deprecated v2.0.0 */
-  triggerType?: 'button' | 'input';
-  /** Handler in option selection
-   * @deprecated v2.0.0 */
-  onSelect?: (item: any) => void;
-  /** Multiple choice of options
-   * @deprecated v2.0.0 {@link ISelectProps.multiselect} */
-  multiselect?: boolean;
 }
 export interface IDropdownMenuListProps extends IBoxProps, IScrollAreaProps {

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/dropdown-menu",
   "description": "SEMRush DropdownMenu Component",
-  "version": "2.3.11",
+  "version": "3.0.1",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -14,9 +14,9 @@
   },
   "dependencies": {
     "@semcore/utils": "^3.15",
-    "@semcore/dropdown": "^2",
+    "@semcore/dropdown": "^3",
     "@semcore/flex-box": "^4",
-    "@semcore/scroll-area": "^3",
+    "@semcore/scroll-area": "^4.0.0",
     "classnames": "2.2.6"
   },
   "peerDependencies": {

package/src/DropdownMenu.jsx CHANGED Viewed

@@ -4,7 +4,6 @@ import createComponent, { Component, sstyled, Root } from '@semcore/core';
 import Dropdown from '@semcore/dropdown';
 import { Box, Flex, useBox, useFlex } from '@semcore/flex-box';
 import ScrollAreaComponent from '@semcore/scroll-area';
-import logger from '@semcore/utils/lib/logger';
 import style from './style/dropdown-menu.shadow.css';
@@ -58,18 +57,6 @@ class DropdownMenuRoot extends Component {
     }
   };
-  bindHandlerFallbackSelect = (props, index) => () => {
-    const { onSelect, multiselect } = this.asProps;
-    const result = onSelect({
-      index,
-      ...props,
-    });
-    if (!multiselect && result !== false) {
-      this.handlers.visible(false);
-    }
-  };
   getTriggerProps() {
     const { size } = this.asProps;
     return {
@@ -93,14 +80,10 @@ class DropdownMenuRoot extends Component {
   }
   getItemProps(props, index) {
-    const { size, highlightedIndex, onSelect } = this.asProps;
+    const { size, highlightedIndex } = this.asProps;
     const highlighted = index === highlightedIndex;
     const extraProps = {};
-    if (onSelect !== undefined) {
-      extraProps.onClick = this.bindHandlerFallbackSelect(props, index);
-    }
     this._items.push(props);
     if (highlighted) {
       extraProps.ref = this.scrollToNode;
@@ -178,30 +161,11 @@ class DropdownMenuRoot extends Component {
   }
   render() {
-    const { Children, optionCount, triggerType, onSelect, ...other } = this.asProps;
+    const { Children } = this.asProps;
     const props = {};
     this._items = [];
-    logger.warn(
-      onSelect !== undefined,
-      "Property 'onSelect' is deprecated, subscribe to the 'onClick' of the needed 'Item'",
-      other['data-ui-name'] || DropdownMenu.displayName,
-    );
-    logger.warn(
-      optionCount !== undefined,
-      "The 'optionCount' property is deprecated and is now automatically determined from the number of Item",
-      other['data-ui-name'] || DropdownMenu.displayName,
-    );
-    logger.warn(
-      triggerType !== undefined,
-      "The 'triggerType' property is deprecated, use 'interaction=\"focus\"'",
-      other['data-ui-name'] || DropdownMenu.displayName,
-    );
-    if (triggerType === 'input') {
-      props.interaction = 'focus';
-    }
     return (
       <Root render={Dropdown} {...props}>
         <Children />

package/src/index.d.ts CHANGED Viewed

@@ -24,17 +24,6 @@ export interface IDropdownMenuProps extends IDropdownProps {
    * highlightedIndex -  Index of the selected item
    */
   onHighlightedIndexChange?: (highlightedIndex: number) => void;
-  /** @deprecated v2.0.0 */
-  optionCount?: number;
-  /** Trigger type selection
-   * @deprecated v2.0.0 */
-  triggerType?: 'button' | 'input';
-  /** Handler in option selection
-   * @deprecated v2.0.0 */
-  onSelect?: (item: any) => void;
-  /** Multiple choice of options
-   * @deprecated v2.0.0 {@link ISelectProps.multiselect} */
-  multiselect?: boolean;
 }
 export interface IDropdownMenuListProps extends IBoxProps, IScrollAreaProps {

package/src/style/dropdown-menu.shadow.css CHANGED Viewed

@@ -21,7 +21,7 @@ SDropdownMenuItem {
   line-height: normal;
   &:hover {
-    background-color: color-mod(black a(10%));
+    background-color: var(--gray-50);
   }
   &:focus {
@@ -31,14 +31,14 @@ SDropdownMenuItem {
 SDropdownMenuItem[highlighted] {
   z-index: 1;
-  box-shadow: var(--keyborad-focus) inset;
+  box-shadow: var(--keyboard-focus) inset;
 }
 SDropdownMenuItem[selected] {
-  background-color: color-mod(var(--light-blue) a(20%));
+  background-color: color-mod(var(--blue-100) a(70%));
   &:hover {
-    background-color: color-mod(var(--light-blue) a(20%));
+    background-color: var(--blue-100);
   }
 }
@@ -48,30 +48,20 @@ SDropdownMenuItem[disabled] {
   pointer-events: none;
 }
-SDropdownMenuItem[size='xl'] {
+SDropdownMenuItem[size='l'] {
   font-size: var(--fs-300);
   line-height: var(--lh-300);
   padding: 8px 12px;
-  min-height: 42px;
+  min-height: 40px;
 }
-SDropdownMenuItem[size='l'] {
+SDropdownMenuItem[size='m'] {
   font-size: var(--fs-200);
   line-height: var(--lh-200);
   padding: 6px 8px;
   min-height: 32px;
 }
-SDropdownMenuItem[size='m'] {
-  font-size: var(--fs-100);
-  line-height: var(--lh-100);
-  padding: 4px 8px;
-  min-height: 26px;
-}
 SDropdownMenuItem[notInteractive] {
   cursor: default;
@@ -81,7 +71,7 @@ SDropdownMenuItem[notInteractive] {
 }
 SDropdownMenuItem[variant='hint'] {
-  color: var(--gray60);
+  color: var(--gray-500);
   cursor: default;
   &:hover {
@@ -114,6 +104,6 @@ SDropdownMenuItemAddon {
 SPopper {
   &:focus {
-    box-shadow: var(--keyborad-focus);
+    box-shadow: var(--keyboard-focus);
   }
 }