@semcore/dropdown-menu 16.1.11 → 16.1.12-prerelease.0

package/lib/esm/DropdownMenu.mjs

@@ -1,5 +1,4 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
@@ -17,42 +16,40 @@ import { setFocus } from "@semcore/core/lib/utils/focus-lock/setFocus";
 import { forkRef } from "@semcore/core/lib/utils/ref";
 import { useUID } from "@semcore/core/lib/utils/uniqueID";
 import Dropdown, { enhance, selectedIndexContext, AbstractDropdown } from "@semcore/dropdown";
-import { useBox, Flex } from "@semcore/flex-box";
+import { Box, Flex } from "@semcore/flex-box";
 import ScrollAreaComponent, { hideScrollBarsFromScreenReadersContext } from "@semcore/scroll-area";
 import { Text } from "@semcore/typography";
-import cn from "classnames";
 import React from "react";
 import { localizedMessages } from "./translations/__intergalactic-dynamic-locales.mjs";
-var _excluded = ["className"];
 /*!__reshadow-styles__:"./style/dropdown-menu.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SDropdownMenuList_662us_gg_{max-height:240px;padding:var(--intergalactic-spacing-1x, 4px)0;position:relative;min-height:26px;min-width:32px;box-sizing:content-box;z-index:0;color:var(--intergalactic-text-primary, #191b23)}.___SDropdownMenuList_662us_gg_ .___SBar_662us_gg_{z-index:3}.___SDropdownMenuList_662us_gg_ .___SShadowHorizontal_662us_gg_:after,.___SDropdownMenuList_662us_gg_ .___SShadowHorizontal_662us_gg_:before,.___SDropdownMenuList_662us_gg_ .___SShadowVertical_662us_gg_:after,.___SDropdownMenuList_662us_gg_ .___SShadowVertical_662us_gg_:before{border-radius:var(--intergalactic-control-rounded, 6px)}.___SDropdownMenuItemContainer_662us_gg_ .___SItemContent_662us_gg_:focus-visible{outline:0}.___SDropdownMenuItemContainer_662us_gg_.__nesting-trigger_662us_gg_{justify-content:space-between}.___SDropdownMenuItemAddon_662us_gg_,.___SItemContentText_662us_gg_{display:inline-flex;margin-left:var(--intergalactic-spacing-1x, 4px);margin-right:var(--intergalactic-spacing-1x, 4px)}.___SDropdownMenuItemAddon_662us_gg_:first-child,.___SItemContentText_662us_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_662us_gg_:last-child,.___SItemContentText_662us_gg_:last-child{margin-right:0}.___SDropdownMenuNesting_662us_gg_,.___SDropdownMenuNesting_662us_gg_._size_l_662us_gg_,.___SDropdownMenuNesting_662us_gg_._size_m_662us_gg_{padding:0}.___SDropdownMenuNesting_662us_gg_.__highlighted_662us_gg_{z-index:1;outline-color:var(--intergalactic-keyboard-focus-outline, #008ff8);outline-style:solid;outline-width:2px;outline-offset:-2px;transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms);transition-timing-function:ease-in-out;transition-property:outline-color,outline-width,outline-offset}.___SDropdownNestingItem_662us_gg_._size_l_662us_gg_,.___SDropdownNestingItem_662us_gg_._size_m_662us_gg_{padding-right:0}.___SDropdownNestingItem_662us_gg_ .___SDropdownMenuItemContainer_662us_gg_{width:auto;padding-top:0;padding-bottom:0;padding-left:0;min-height:auto}.___SItemHint_662us_gg_{color:var(--intergalactic-text-secondary, #6c6e79)}",
+    ".___SDropdownMenuList_1opgv_gg_{max-height:240px;padding:var(--intergalactic-spacing-1x, 4px)0;position:relative;min-height:26px;min-width:32px;box-sizing:content-box;z-index:0;color:var(--intergalactic-text-primary, #191b23)}.___SDropdownMenuList_1opgv_gg_ .___SBar_1opgv_gg_{z-index:3}.___SDropdownMenuList_1opgv_gg_ .___SShadowHorizontal_1opgv_gg_:after,.___SDropdownMenuList_1opgv_gg_ .___SShadowHorizontal_1opgv_gg_:before,.___SDropdownMenuList_1opgv_gg_ .___SShadowVertical_1opgv_gg_:after,.___SDropdownMenuList_1opgv_gg_ .___SShadowVertical_1opgv_gg_:before{border-radius:var(--intergalactic-control-rounded, 6px)}.___SDropdownMenuItemContainer_1opgv_gg_ .___SItemContent_1opgv_gg_:focus-visible{outline:0}.___SDropdownMenuItemContainer_1opgv_gg_.__nesting-trigger_1opgv_gg_{justify-content:space-between}.___SDropdownMenuItemAddon_1opgv_gg_,.___SItemContentText_1opgv_gg_{display:inline-flex;margin-left:var(--intergalactic-spacing-1x, 4px);margin-right:var(--intergalactic-spacing-1x, 4px)}.___SDropdownMenuItemAddon_1opgv_gg_:first-child,.___SItemContentText_1opgv_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_1opgv_gg_:last-child,.___SItemContentText_1opgv_gg_:last-child{margin-right:0}.___SDropdownMenuNesting_1opgv_gg_,.___SDropdownMenuNesting_1opgv_gg_._size_l_1opgv_gg_,.___SDropdownMenuNesting_1opgv_gg_._size_m_1opgv_gg_{padding:0}.___SDropdownMenuNesting_1opgv_gg_.__highlighted_1opgv_gg_{z-index:1;outline-color:var(--intergalactic-keyboard-focus-outline, #008ff8);outline-style:solid;outline-width:2px;outline-offset:-2px;transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms);transition-timing-function:ease-in-out;transition-property:outline-color,outline-width,outline-offset}.___SDropdownNestingItem_1opgv_gg_._size_l_1opgv_gg_,.___SDropdownNestingItem_1opgv_gg_._size_m_1opgv_gg_{padding-right:0}.___SDropdownNestingItem_1opgv_gg_ .___SDropdownMenuItemContainer_1opgv_gg_{width:auto;padding-top:0;padding-bottom:0;padding-left:0;min-height:auto}.___SItemHint_1opgv_gg_{color:var(--intergalactic-text-secondary, #6c6e79)}",
     /*__inner_css_end__*/
-    "662us_gg_"
+    "1opgv_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SDropdownMenuItemContainer": "___SDropdownMenuItemContainer_662us_gg_",
-    "_nesting-trigger": "__nesting-trigger_662us_gg_",
-    "__SDropdownMenuNesting": "___SDropdownMenuNesting_662us_gg_",
-    "_size_l": "_size_l_662us_gg_",
-    "_size_m": "_size_m_662us_gg_",
-    "_highlighted": "__highlighted_662us_gg_",
-    "__SDropdownNestingItem": "___SDropdownNestingItem_662us_gg_",
-    "__SItemHint": "___SItemHint_662us_gg_",
-    "__SDropdownMenuList": "___SDropdownMenuList_662us_gg_",
-    "__SBar": "___SBar_662us_gg_",
-    "__SShadowHorizontal": "___SShadowHorizontal_662us_gg_",
-    "__SShadowVertical": "___SShadowVertical_662us_gg_",
-    "__SItemContent": "___SItemContent_662us_gg_",
-    "__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_662us_gg_",
-    "__SItemContentText": "___SItemContentText_662us_gg_"
+    "__SDropdownMenuItemContainer": "___SDropdownMenuItemContainer_1opgv_gg_",
+    "_nesting-trigger": "__nesting-trigger_1opgv_gg_",
+    "__SDropdownMenuNesting": "___SDropdownMenuNesting_1opgv_gg_",
+    "_size_l": "_size_l_1opgv_gg_",
+    "_size_m": "_size_m_1opgv_gg_",
+    "_highlighted": "__highlighted_1opgv_gg_",
+    "__SDropdownNestingItem": "___SDropdownNestingItem_1opgv_gg_",
+    "__SItemHint": "___SItemHint_1opgv_gg_",
+    "__SDropdownMenuList": "___SDropdownMenuList_1opgv_gg_",
+    "__SBar": "___SBar_1opgv_gg_",
+    "__SShadowHorizontal": "___SShadowHorizontal_1opgv_gg_",
+    "__SShadowVertical": "___SShadowVertical_1opgv_gg_",
+    "__SItemContent": "___SItemContent_1opgv_gg_",
+    "__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_1opgv_gg_",
+    "__SItemContentText": "___SItemContentText_1opgv_gg_"
   })
 );
-var ListBoxContextProvider = function ListBoxContextProvider2(_ref20) {
-  var children = _ref20.children;
+var ListBoxContextProvider = function ListBoxContextProvider2(_ref22) {
+  var children = _ref22.children;
   return /* @__PURE__ */ React.createElement(hideScrollBarsFromScreenReadersContext.Provider, {
     value: true
   }, children);
@@ -250,28 +247,28 @@ _defineProperty(DropdownMenuRoot, "nestedMenuInteraction", {
   trigger: [["onClick", "onMouseEnter"], ["onClick", "onMouseLeave"]],
   popper: [["onMouseEnter"], ["onMouseLeave"]]
 });
-function List(_ref21) {
-  var _ref2 = arguments[0], _ref12;
-  var styles = _ref21.styles, Children = _ref21.Children;
+function List(_ref23) {
+  var _ref2 = arguments[0], _ref13;
+  var styles = _ref23.styles, Children = _ref23.Children;
   var SDropdownMenuList = ScrollAreaComponent;
   var SBar = ScrollAreaComponent.Bar;
-  return _ref12 = sstyled(styles), /* @__PURE__ */ React.createElement(ListBoxContextProvider, _ref12.cn("ListBoxContextProvider", {}), /* @__PURE__ */ React.createElement(SDropdownMenuList, _ref12.cn("SDropdownMenuList", _objectSpread({}, assignProps({
+  return _ref13 = sstyled(styles), /* @__PURE__ */ React.createElement(ListBoxContextProvider, _ref13.cn("ListBoxContextProvider", {}), /* @__PURE__ */ React.createElement(SDropdownMenuList, _ref13.cn("SDropdownMenuList", _objectSpread({}, assignProps({
     "shadow": true,
     "shadowSize": 16,
     "shadowTheme": "light"
   }, _ref2))), /* @__PURE__ */ React.createElement(ScrollAreaComponent.Container, {
     tabIndex: void 0
-  }, /* @__PURE__ */ React.createElement(Children, _ref12.cn("Children", {}))), /* @__PURE__ */ React.createElement(SBar, _ref12.cn("SBar", {
+  }, /* @__PURE__ */ React.createElement(Children, _ref13.cn("Children", {}))), /* @__PURE__ */ React.createElement(SBar, _ref13.cn("SBar", {
     "orientation": "horizontal"
-  })), /* @__PURE__ */ React.createElement(SBar, _ref12.cn("SBar", {
+  })), /* @__PURE__ */ React.createElement(SBar, _ref13.cn("SBar", {
     "orientation": "vertical"
   }))));
 }
-function Actions(_ref22) {
-  var _ref3 = arguments[0], _ref13;
-  var styles = _ref22.styles;
+function Actions(_ref24) {
+  var _ref3 = arguments[0], _ref14;
+  var styles = _ref24.styles;
   var SDropdownMenuActions = Flex;
-  return _ref13 = sstyled(styles), /* @__PURE__ */ React.createElement(SDropdownMenuActions, _ref13.cn("SDropdownMenuActions", _objectSpread({}, assignProps({}, _ref3))));
+  return _ref14 = sstyled(styles), /* @__PURE__ */ React.createElement(SDropdownMenuActions, _ref14.cn("SDropdownMenuActions", _objectSpread({}, assignProps({}, _ref3))));
 }
 function Menu(props) {
   var _ref4 = arguments[0];
@@ -289,9 +286,9 @@ function Menu(props) {
     role: null
   }), /* @__PURE__ */ React.createElement(DropdownMenu.List, assignProps({}, _ref4))));
 }
-function Item(_ref23) {
-  var _ref5 = arguments[0], _ref14;
-  var id = _ref23.id, styles = _ref23.styles, disabled = _ref23.disabled, Children = _ref23.Children, forwardRef = _ref23.forwardRef, role = _ref23.role, tabIndex = _ref23.tabIndex, actionsRef = _ref23.actionsRef, ariaChecked = _ref23["aria-checked"];
+function Item(_ref25) {
+  var _ref5 = arguments[0], _ref15;
+  var id = _ref25.id, styles = _ref25.styles, disabled = _ref25.disabled, Children = _ref25.Children, forwardRef = _ref25.forwardRef, role = _ref25.role, tabIndex = _ref25.tabIndex, actionsRef = _ref25.actionsRef, ariaChecked = _ref25["aria-checked"];
   var SDropdownMenuItemContainer = Dropdown.Item;
   var itemRef = React.useRef();
   var _React$useState = React.useState(false), _React$useState2 = _slicedToArray(_React$useState, 2), highlighted = _React$useState2[0], setHighlighted = _React$useState2[1];
@@ -347,31 +344,29 @@ function Item(_ref23) {
       });
     };
   }, [itemRef.current]);
-  return _ref14 = sstyled(styles), /* @__PURE__ */ React.createElement(menuItemContext.Provider, {
+  return _ref15 = sstyled(styles), /* @__PURE__ */ React.createElement(menuItemContext.Provider, {
     value: menuItemContextValue
-  }, /* @__PURE__ */ React.createElement(SDropdownMenuItemContainer, _ref14.cn("SDropdownMenuItemContainer", _objectSpread({}, assignProps({
+  }, /* @__PURE__ */ React.createElement(SDropdownMenuItemContainer, _ref15.cn("SDropdownMenuItemContainer", _objectSpread({}, assignProps({
     "ref": advancedMode ? void 0 : menuItemContextValue.ref,
     "use:highlighted": !disabled && highlighted && lastInteraction.isKeyboard(),
     "use:role": advancedMode ? void 0 : role,
     "use:id": advancedMode ? void 0 : id,
     "use:tabIndex": advancedMode ? void 0 : tabIndex,
     "use:aria-checked": advancedMode ? void 0 : ariaChecked
-  }, _ref5))), /* @__PURE__ */ React.createElement(Children, _ref14.cn("Children", {}))));
+  }, _ref5))), /* @__PURE__ */ React.createElement(Children, _ref15.cn("Children", {}))));
 }
 function Addon(props) {
-  var _useBox = useBox(props, props.forwardRef), _useBox2 = _slicedToArray(_useBox, 2), SDropdownMenuItemAddon = _useBox2[0], _useBox2$ = _useBox2[1], className = _useBox2$.className, other = _objectWithoutProperties(_useBox2$, _excluded);
-  var styles = sstyled(props.styles);
-  return /* @__PURE__ */ React.createElement(SDropdownMenuItemAddon, _extends({
-    className: cn(styles.cn("SDropdownMenuItemAddon", props).className, className) || void 0
-  }, other));
+  var _ref6 = arguments[0], _ref16;
+  var SDropdownMenuItemAddon = Box;
+  return _ref16 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SDropdownMenuItemAddon, _ref16.cn("SDropdownMenuItemAddon", _objectSpread({}, assignProps({}, _ref6))));
 }
 function Trigger() {
-  var _ref6 = arguments[0];
-  return /* @__PURE__ */ React.createElement(Dropdown.Trigger, assignProps({}, _ref6));
+  var _ref7 = arguments[0];
+  return /* @__PURE__ */ React.createElement(Dropdown.Trigger, assignProps({}, _ref7));
 }
-function ItemContent(_ref24) {
-  var _ref7 = arguments[0], _ref15;
-  var styles = _ref24.styles;
+function ItemContent(_ref26) {
+  var _ref8 = arguments[0], _ref17;
+  var styles = _ref26.styles;
   var SItemContent = Flex;
   var ref = React.useRef();
   var menuItemCtxValue = React.useContext(menuItemContext);
@@ -390,7 +385,7 @@ function ItemContent(_ref24) {
       });
     }
   }, [menuItemCtxValue.ariaDescribes]);
-  return _ref15 = sstyled(styles), /* @__PURE__ */ React.createElement(SItemContent, _ref15.cn("SItemContent", _objectSpread({}, assignProps({
+  return _ref17 = sstyled(styles), /* @__PURE__ */ React.createElement(SItemContent, _ref17.cn("SItemContent", _objectSpread({}, assignProps({
     "role": menuItemCtxValue.role,
     "id": menuItemCtxValue.contentId,
     "tabIndex": menuItemCtxValue.tabIndex,
@@ -401,53 +396,53 @@ function ItemContent(_ref24) {
     "aria-checked": menuItemCtxValue.ariaChecked,
     "alignItems": "center",
     "justifyContent": menuItemCtxValue.hasSubMenu ? "space-between" : void 0
-  }, _ref7))));
+  }, _ref8))));
 }
-function ItemContentText(_ref25) {
-  var _ref8 = arguments[0], _ref16;
-  var styles = _ref25.styles;
+function ItemContentText(_ref27) {
+  var _ref9 = arguments[0], _ref18;
+  var styles = _ref27.styles;
   var SItemContentText = Text;
-  return _ref16 = sstyled(styles), /* @__PURE__ */ React.createElement(SItemContentText, _ref16.cn("SItemContentText", _objectSpread({}, assignProps({}, _ref8))));
+  return _ref18 = sstyled(styles), /* @__PURE__ */ React.createElement(SItemContentText, _ref18.cn("SItemContentText", _objectSpread({}, assignProps({}, _ref9))));
 }
-function ItemHint(_ref26) {
-  var _ref9 = arguments[0], _ref17;
-  var styles = _ref26.styles;
+function ItemHint(_ref28) {
+  var _ref0 = arguments[0], _ref19;
+  var styles = _ref28.styles;
   var SItemHint = Flex;
   var _React$useContext = React.useContext(menuItemContext), hintId = _React$useContext.hintId;
-  return _ref17 = sstyled(styles), /* @__PURE__ */ React.createElement(SItemHint, _ref17.cn("SItemHint", _objectSpread({}, assignProps({
+  return _ref19 = sstyled(styles), /* @__PURE__ */ React.createElement(SItemHint, _ref19.cn("SItemHint", _objectSpread({}, assignProps({
     "id": hintId,
     "aria-hidden": "true"
-  }, _ref9))));
+  }, _ref0))));
 }
 function Hint(props) {
-  var _ref0 = arguments[0], _ref18;
+  var _ref1 = arguments[0], _ref20;
   var SDropdownMenuItemContainer = Dropdown.Item;
-  return _ref18 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SDropdownMenuItemContainer, _ref18.cn("SDropdownMenuItemContainer", _objectSpread({}, assignProps({
+  return _ref20 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SDropdownMenuItemContainer, _ref20.cn("SDropdownMenuItemContainer", _objectSpread({}, assignProps({
     "variant": "hint"
-  }, _ref0))));
+  }, _ref1))));
 }
 function Title(props) {
-  var _ref1 = arguments[0], _ref19;
+  var _ref10 = arguments[0], _ref21;
   var SDropdownMenuItemContainer = Dropdown.Item;
-  return _ref19 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SDropdownMenuItemContainer, _ref19.cn("SDropdownMenuItemContainer", _objectSpread({}, assignProps({
+  return _ref21 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SDropdownMenuItemContainer, _ref21.cn("SDropdownMenuItemContainer", _objectSpread({}, assignProps({
     "variant": "title"
-  }, _ref1))));
+  }, _ref10))));
 }
-function Nesting(_ref27) {
-  var _ref10 = arguments[0];
-  var forwardRef = _ref27.forwardRef;
+function Nesting(_ref29) {
+  var _ref11 = arguments[0];
+  var forwardRef = _ref29.forwardRef;
   return /* @__PURE__ */ React.createElement(DropdownMenu.Item, assignProps({
     "ref": forwardRef
-  }, _ref10));
+  }, _ref11));
 }
-function NestingTrigger(_ref28) {
-  var _ref11 = arguments[0];
-  var forwardRef = _ref28.forwardRef;
+function NestingTrigger(_ref30) {
+  var _ref12 = arguments[0];
+  var forwardRef = _ref30.forwardRef;
   return /* @__PURE__ */ React.createElement(DropdownMenu.Item.Content, assignProps({
     "tag": DropdownMenu.Trigger,
     "ref": forwardRef,
     "use:role": "menuitem"
-  }, _ref11));
+  }, _ref12));
 }
 var DropdownMenu = createComponent(DropdownMenuRoot, {
   Trigger,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/dropdown-menu",
   "description": "Semrush DropdownMenu Component",
-  "version": "16.1.11",
+  "version": "16.1.12-prerelease.0",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -14,17 +14,17 @@
     "types": "./lib/types/index.d.ts"
   },
   "dependencies": {
-    "@semcore/button": "16.0.10",
-    "@semcore/dropdown": "16.1.0",
-    "@semcore/icon": "16.5.1",
-    "@semcore/typography": "16.3.0",
-    "@semcore/popper": "16.0.10",
-    "@semcore/flex-box": "16.0.10",
-    "@semcore/scroll-area": "16.0.10",
+    "@semcore/button": "16.0.11-prerelease.0",
+    "@semcore/dropdown": "16.1.1-prerelease.0",
+    "@semcore/icon": "16.5.2-prerelease.0",
+    "@semcore/typography": "16.3.1-prerelease.0",
+    "@semcore/popper": "16.0.11-prerelease.0",
+    "@semcore/flex-box": "16.0.11-prerelease.0",
+    "@semcore/scroll-area": "16.0.11-prerelease.0",
     "classnames": "2.2.6"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^16.0.0"
+    "@semcore/base-components": "^16.4.1-prerelease.0"
   },
   "repository": {
     "type": "git",
@@ -33,11 +33,11 @@
   },
   "devDependencies": {
     "@types/classnames": "2.2.6",
-    "@semcore/core": "16.5.0",
+    "@semcore/core": "16.5.1-prerelease.0",
+    "@semcore/base-trigger": "16.4.3-prerelease.0",
+    "@semcore/button": "16.0.11-prerelease.0",
     "@semcore/testing-utils": "1.0.0",
-    "@semcore/button": "16.0.10",
-    "@semcore/base-trigger": "16.4.2",
-    "@semcore/icon": "16.5.1"
+    "@semcore/icon": "16.5.2-prerelease.0"
   },
   "scripts": {
     "build": "pnpm semcore-builder --source=js && pnpm vite build"