@rescui/dropdown-menu 0.11.17 → 0.11.19-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.10

package/README.md

@@ -1,4 +1,4 @@
-# Dropdown Menu
+# DropdownMenu
 
 ## LLM
 

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,18 +33,18 @@ const DropdownMenu = _ref => {
     className,
     ...restProps
   } = _ref;
-  const menuWrapperRef = useRef(null);
+  const [menuWrapperEl, setMenuWrapperEl] = useState(null);
   const [height, setHeight] = useState(0);
   let itemHeightFromCss = 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;
   }
 
@@ -69,7 +69,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_8gpi6g_8",
-  "sizeM": "_sizeM_8gpi6g_11",
-  "sizeL": "_sizeL_8gpi6g_14",
-  "dropdownMenu": "_dropdownMenu_8gpi6g_18",
-  "menu": "_menu_8gpi6g_23"
+  "sizeS": "_sizeS_1t494nu_8",
+  "sizeM": "_sizeM_1t494nu_11",
+  "sizeL": "_sizeL_1t494nu_14",
+  "dropdownMenu": "_dropdownMenu_1t494nu_18",
+  "menu": "_menu_1t494nu_23"
 };
 export { styles as default };

package/lib/index.css

@@ -1,29 +1,29 @@
-._sizeS_8gpi6g_8{
+._sizeS_1t494nu_8{
   --_rs-dropdown-menu-min-width:316px;
   --_rs-dropdown-menu-max-width:389px;
 }
-._sizeS_8gpi6g_8 [data-rs-internal='dropdown-menu__menu-wrapper']{
+._sizeS_1t494nu_8 [data-rs-internal='dropdown-menu__menu-wrapper']{
     --_rs-dropdown-menu-item-height:32px;
   }
-._sizeM_8gpi6g_11{
+._sizeM_1t494nu_11{
   --_rs-dropdown-menu-min-width:316px;
   --_rs-dropdown-menu-max-width:494px;
 }
-._sizeM_8gpi6g_11 [data-rs-internal='dropdown-menu__menu-wrapper']{
+._sizeM_1t494nu_11 [data-rs-internal='dropdown-menu__menu-wrapper']{
     --_rs-dropdown-menu-item-height:40px;
   }
-._sizeL_8gpi6g_14{
+._sizeL_1t494nu_14{
   --_rs-dropdown-menu-min-width:316px;
   --_rs-dropdown-menu-max-width:494px;
 }
-._sizeL_8gpi6g_14 [data-rs-internal='dropdown-menu__menu-wrapper']{
+._sizeL_1t494nu_14 [data-rs-internal='dropdown-menu__menu-wrapper']{
     --_rs-dropdown-menu-item-height:52px;
   }
-._dropdownMenu_8gpi6g_18{
+._dropdownMenu_1t494nu_18{
   min-width:var(--_rs-dropdown-menu-min-width);
   max-width:var(--_rs-dropdown-menu-max-width);
 }
-._menu_8gpi6g_23{
+._menu_1t494nu_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

@@ -295,24 +295,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>
@@ -327,33 +327,18 @@ 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.17",
+  "version": "0.11.19-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.10+dbbefd7b8",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -17,27 +17,27 @@
   },
   "dependencies": {
     "@babel/runtime-corejs3": "^7.26.0",
-    "@rescui/dropdown": "^0.10.3",
-    "@rescui/menu": "^0.13.7",
-    "@rescui/use-resize-observer": "^0.3.2",
+    "@rescui/dropdown": "0.11.1-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.10+dbbefd7b8",
+    "@rescui/menu": "0.13.8-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.14+dbbefd7b8",
+    "@rescui/use-resize-observer": "0.3.4-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.10+dbbefd7b8",
     "classnames": "^2.2.6"
   },
   "peerDependencies": {
     "@rescui/ui-contexts": "^0.6.0",
     "prop-types": "^15",
-    "react": ">=16.8.0 <20"
+    "react": ">=17.0.0 <20"
   },
   "devDependencies": {
-    "@rescui/colors": "^0.3.2",
-    "@rescui/icons": "^1.8.2",
-    "@rescui/scripts": "^0.5.2",
-    "@rescui/typography": "^0.27.2",
-    "@rescui/visual-regression": "^0.1.4"
+    "@rescui/colors": "0.3.3-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.14+dbbefd7b8",
+    "@rescui/icons": "1.8.3-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.14+dbbefd7b8",
+    "@rescui/scripts": "0.5.2",
+    "@rescui/typography": "0.27.3-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.14+dbbefd7b8",
+    "@rescui/visual-regression": "0.1.4"
   },
   "scripts": {
     "build": "rescui-scripts build && yarn run build-pcss-api",
     "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
   },
   "nx": {},
-  "gitHead": "d60e4f3491c7cdb9ef684d08940869914492a61b"
+  "gitHead": "dbbefd7b8e24da18262edf3baffa35039ae01af3"
 }