@rescui/dropdown-menu 0.11.15-RUI-293-Update-menu-component-7a032357e.20 → 0.11.15-RUI-293-Update-menu-component-hover-icon-d8a5b0551.33

package/lib/dropdown-menu.js

@@ -1,5 +1,5 @@
 "use client";
-import React, { useRef, useState } from 'react';
+import React, { useState } from 'react';
 import { useThemeWithUndefined } from '@rescui/ui-contexts';
 import { Dropdown } from '@rescui/dropdown';
 import { Menu } from '@rescui/menu';
@@ -33,19 +33,19 @@ const DropdownMenu = _ref => {
     className,
     ...restProps
   } = _ref;
-  const menuWrapperRef = useRef(null);
+  const [menuWrapperEl, setMenuWrapperEl] = useState(null);
   const [height, setHeight] = useState(0);
   let itemHeightFromCss = null;
   let contrastPrimaryFromCss = null;
 
-  if (menuWrapperRef.current) {
+  if (menuWrapperEl) {
     // In theory this part of the code might cause issues with SSR.
-    // But in this specific context, because of checking ref "menuWrapperRef",
+    // But in this specific context, because of checking state ref "menuWrapperEl",
     // we are sure that the value will still be "null" on the first render.
     // Therefore, the first render on the client will be the same as on the server.
     // Also, there will be no layout shifts on the following renders because
     // it's a dropdown-content and in most cases it opens only on-demand
-    const menuWrapperStyles = getComputedStyle(menuWrapperRef.current);
+    const menuWrapperStyles = getComputedStyle(menuWrapperEl);
     itemHeightFromCss = parseInt(menuWrapperStyles.getPropertyValue('--_rs-dropdown-menu-item-height'), 10) || null;
     contrastPrimaryFromCss = parseInt(menuWrapperStyles.getPropertyValue('--rs-dropdown-menu-contrast-primary'), 10) || null;
   }
@@ -71,7 +71,8 @@ const DropdownMenu = _ref => {
     maxHeight: maxHeight,
     className: cn(SIZE_TO_CLASS[size], styles.dropdownMenu, className)
   }, /*#__PURE__*/React.createElement(MenuWrapper, {
-    ref: menuWrapperRef,
+    el: menuWrapperEl,
+    setEl: setMenuWrapperEl,
     onHeightUpdate: setHeight
   }, /*#__PURE__*/React.createElement(Menu, {
     size: size,

package/lib/dropdown-menu.p.module.css.js

@@ -1,8 +1,8 @@
 var styles = {
-  "sizeS": "_sizeS_sr3m6n_8",
-  "sizeM": "_sizeM_sr3m6n_11",
-  "sizeL": "_sizeL_sr3m6n_14",
-  "dropdownMenu": "_dropdownMenu_sr3m6n_18",
-  "menu": "_menu_sr3m6n_23"
+  "sizeS": "_sizeS_1e1gnep_8",
+  "sizeM": "_sizeM_1e1gnep_11",
+  "sizeL": "_sizeL_1e1gnep_14",
+  "dropdownMenu": "_dropdownMenu_1e1gnep_18",
+  "menu": "_menu_1e1gnep_23"
 };
 export { styles as default };

package/lib/index.css

@@ -1,29 +1,29 @@
-._sizeS_sr3m6n_8{
+._sizeS_1e1gnep_8{
   --_rs-dropdown-menu-min-width:316px;
   --_rs-dropdown-menu-max-width:389px;
 }
-._sizeS_sr3m6n_8 [data-rs-internal='dropdown-menu__menu-wrapper']{
+._sizeS_1e1gnep_8 [data-rs-internal='dropdown-menu__menu-wrapper']{
     --_rs-dropdown-menu-item-height:32px;
   }
-._sizeM_sr3m6n_11{
+._sizeM_1e1gnep_11{
   --_rs-dropdown-menu-min-width:316px;
   --_rs-dropdown-menu-max-width:494px;
 }
-._sizeM_sr3m6n_11 [data-rs-internal='dropdown-menu__menu-wrapper']{
+._sizeM_1e1gnep_11 [data-rs-internal='dropdown-menu__menu-wrapper']{
     --_rs-dropdown-menu-item-height:40px;
   }
-._sizeL_sr3m6n_14{
+._sizeL_1e1gnep_14{
   --_rs-dropdown-menu-min-width:316px;
   --_rs-dropdown-menu-max-width:494px;
 }
-._sizeL_sr3m6n_14 [data-rs-internal='dropdown-menu__menu-wrapper']{
+._sizeL_1e1gnep_14 [data-rs-internal='dropdown-menu__menu-wrapper']{
     --_rs-dropdown-menu-item-height:52px;
   }
-._dropdownMenu_sr3m6n_18{
+._dropdownMenu_1e1gnep_18{
   min-width:var(--_rs-dropdown-menu-min-width);
   max-width:var(--_rs-dropdown-menu-max-width);
 }
-._menu_sr3m6n_23{
+._menu_1e1gnep_23{
   margin:0;
   padding:0;
 

package/lib/menu-wrapper.d.ts

@@ -2,5 +2,10 @@ import React from 'react';
 export type MenuWrapperProps = {
     children?: React.ReactNode;
     onHeightUpdate?: (newHeight: number) => void;
+    el: HTMLDivElement | null;
+    setEl: (el: HTMLDivElement | null) => void;
+};
+export declare const MenuWrapper: {
+    ({ children, onHeightUpdate, setEl, el }: MenuWrapperProps): React.JSX.Element;
+    displayName: string;
 };
-export declare const MenuWrapper: React.ForwardRefExoticComponent<MenuWrapperProps & React.RefAttributes<HTMLDivElement>>;

package/lib/menu-wrapper.js

@@ -1,15 +1,19 @@
 import React from 'react';
 import { useResizeObserver } from '@rescui/use-resize-observer';
-const MenuWrapper = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+
+const MenuWrapper = _ref => {
   let {
     children,
-    onHeightUpdate
+    onHeightUpdate,
+    setEl,
+    el
   } = _ref;
-  useResizeObserver(ref, entry => onHeightUpdate(entry.target.offsetHeight));
+  useResizeObserver(el, entry => onHeightUpdate(entry.target.offsetHeight));
   return /*#__PURE__*/React.createElement("div", {
-    ref: ref,
+    ref: setEl,
     "data-rs-internal": 'dropdown-menu__menu-wrapper'
   }, children);
-});
+};
+
 MenuWrapper.displayName = 'MenuWrapper';
 export { MenuWrapper };

package/llm/components/dropdown-menu.md

@@ -6,6 +6,8 @@ DropdownMenu is a special type of Dropdown component with predefined dimensions
 
 ### Features showcase
 
+Do not combine `iconPlacement="right"` with `selected` prop.
+
 #### Basic example
 
 ```tsx
@@ -284,6 +286,50 @@ const Demo = () => {
 render(<Demo />);
 ```
 
+#### With hover icon
+
+```tsx
+import { useState } from 'react';
+import { DropdownMenu, MenuItem } from '@rescui/dropdown-menu';
+import { Button } from '@rescui/button';
+import {
+  LeftOutlineIcon,
+  DownloadOutlineIcon,
+  CloseOutlineIcon
+} from '@rescui/icons';
+
+const Demo = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggleIsOpen = () => setIsOpen(s => !s);
+
+  return (
+    <DropdownMenu
+      isOpen={isOpen}
+      onRequestClose={() => setIsOpen(false)}
+      trigger={<Button onClick={toggleIsOpen}>With hover icons</Button>}
+      size="l"
+    >
+      <MenuItem hoverIcon={<DownloadOutlineIcon />}>Some text 1</MenuItem>
+      <MenuItem hoverIcon={<CloseOutlineIcon />} selected>
+        Some text 2
+      </MenuItem>
+      <MenuItem hoverIcon={<DownloadOutlineIcon />}>Some text 3</MenuItem>
+      <MenuItem
+        icon={<LeftOutlineIcon />}
+        iconPlacement="right"
+        hoverIcon={<CloseOutlineIcon />}
+      >
+        Some text 4
+      </MenuItem>
+      <MenuItem hoverIcon={<DownloadOutlineIcon />}>Some text 5</MenuItem>
+    </DropdownMenu>
+  );
+};
+
+render(<Demo />);
+```
+
 #### Contrast primary color
 
 If your primary color background requires dark text color, use `--rs-dropdown-menu-contrast-primary` CSS variable.
@@ -352,24 +398,24 @@ render(<Demo />);
 
 ##### Demo
 
-Instead of separate classes, it may be a single class with `@media` queries inside:
+Use the controls to see the effect at different viewport widths.
 
 ```tsx
 import { useState } from 'react';
 import { DropdownMenu, MenuItem } from '@rescui/dropdown-menu';
 import { Button } from '@rescui/button';
 
-const MyDropdownMenu = ({ className }) => {
+const MyDropdownMenu = () => {
   const [isOpen, setIsOpen] = useState(false);
 
   const toggleIsOpen = () => setIsOpen(s => !s);
   return (
-    <div style={{ padding: 12, backgroundColor: 'var(--rs-color-black-t5)' }}>
+    <div style={{ height: 350 }}>
       <DropdownMenu
         isOpen={isOpen}
         onRequestClose={() => setIsOpen(false)}
         trigger={<Button onClick={toggleIsOpen}>Open Menu</Button>}
-        className={className}
+        className="my-dropdown-menu"
       >
         <MenuItem>Some text 1</MenuItem>
         <MenuItem>Some text 2</MenuItem>
@@ -384,34 +430,19 @@ const MyDropdownMenu = ({ className }) => {
   );
 };
 
-render(
-  <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
-    <div>
-      <p>Default:</p>
-      <MyDropdownMenu />
-    </div>
-    <div>
-      <p>Var1:</p>
-      <MyDropdownMenu className={`my-dropdown-menu-var-1`} />
-    </div>
-    <div>
-      <p>Var1 & Var2 combined:</p>
-      <MyDropdownMenu
-        className={`my-dropdown-menu-var-1 my-dropdown-menu-var-2`}
-      />
-    </div>
-  </div>
-);
+render(<MyDropdownMenu />);
 ```
 
 ```postcss
 @import '@rescui/dropdown-menu/lib/public-api.p.css';
 
-.my-dropdown-menu-var-1 {
-  @mixin rs-dropdown-menu-size-l;
-}
-.my-dropdown-menu-var-2 {
-  @mixin rs-dropdown-menu-size-s;
+.my-dropdown-menu {
+  @media (max-width: 640px) {
+    @mixin rs-dropdown-menu-size-l;
+  }
+  @media (max-width: 500px) {
+    @mixin rs-dropdown-menu-size-s;
+  }
 }
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/dropdown-menu",
-  "version": "0.11.15-RUI-293-Update-menu-component-7a032357e.20+7a032357e",
+  "version": "0.11.15-RUI-293-Update-menu-component-hover-icon-d8a5b0551.33+d8a5b0551",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -17,9 +17,9 @@
   },
   "dependencies": {
     "@babel/runtime-corejs3": "^7.26.0",
-    "@rescui/dropdown": "0.10.1-RUI-293-Update-menu-component-7a032357e.20+7a032357e",
-    "@rescui/menu": "0.13.6-RUI-293-Update-menu-component-7a032357e.20+7a032357e",
-    "@rescui/use-resize-observer": "0.3.1-RUI-293-Update-menu-component-7a032357e.167+7a032357e",
+    "@rescui/dropdown": "0.10.1-RUI-293-Update-menu-component-hover-icon-d8a5b0551.33+d8a5b0551",
+    "@rescui/menu": "0.13.6-RUI-293-Update-menu-component-hover-icon-d8a5b0551.33+d8a5b0551",
+    "@rescui/use-resize-observer": "0.3.1-RUI-293-Update-menu-component-hover-icon-d8a5b0551.180+d8a5b0551",
     "classnames": "^2.2.6"
   },
   "peerDependencies": {
@@ -28,10 +28,10 @@
     "react": ">=16.8.0 <20"
   },
   "devDependencies": {
-    "@rescui/colors": "0.3.1-RUI-293-Update-menu-component-7a032357e.55+7a032357e",
-    "@rescui/icons": "1.7.7-RUI-293-Update-menu-component-7a032357e.20+7a032357e",
+    "@rescui/colors": "0.3.1-RUI-293-Update-menu-component-hover-icon-d8a5b0551.68+d8a5b0551",
+    "@rescui/icons": "1.7.7-RUI-293-Update-menu-component-hover-icon-d8a5b0551.33+d8a5b0551",
     "@rescui/scripts": "0.5.2",
-    "@rescui/typography": "0.27.1-RUI-293-Update-menu-component-7a032357e.20+7a032357e",
+    "@rescui/typography": "0.27.1-RUI-293-Update-menu-component-hover-icon-d8a5b0551.33+d8a5b0551",
     "@rescui/visual-regression": "0.1.4"
   },
   "scripts": {
@@ -39,5 +39,5 @@
     "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
   },
   "nx": {},
-  "gitHead": "7a032357e8f31abbf69e18aa6b7ef2d75e40f42e"
+  "gitHead": "d8a5b055167d8b1ea55c32621655b8e0acc98a1a"
 }