@rescui/dropdown-menu 0.11.14 → 0.11.15-RUI-293-Update-menu-component-7a032357e.20

package/README.md

@@ -1,3 +1,5 @@
-# Dropdown Menu
+# DropdownMenu
 
-* [Usage examples](./docs/demo.md)
+## LLM
+
+To get the docs for the LLM, check out [this index](./llm/index.md).

package/lib/dropdown-menu.d.ts

@@ -1,40 +1,41 @@
-import React from 'react';
-import { DropdownProps } from '@rescui/dropdown';
-import { MenuItemIconPlacement } from '@rescui/menu';
-declare type DropdownMenuSize = 's' | 'm' | 'l';
-export interface DropdownMenuProps extends Omit<DropdownProps, 'maxWidth' | 'minWidth' | 'maxHeight' | 'leastMaxHeight' | 'className'> {
-    /**
-     * Maximum number of visible items in the dropdown list.
-     * For large lists, n + 0.5 items will be visible at a time.
-     * If the maximum number of items in a list is exactly n + 1, all
-     * items will be shown still (to avoid creating a scroll for half an item only).
-     */
-    maxVisibleItems?: number;
-    iconPlacement?: MenuItemIconPlacement;
-    itemTag?: React.ElementType;
-    tag?: React.ElementType;
-    size?: DropdownMenuSize;
-    wrapItemsWithLi?: boolean;
-    activateFirstItemOnOpen?: boolean;
-    /**
-     * See [MDN spec](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width).
-     * `trigger` is a special value that substitutes with trigger's width calculated on every dropdown position update
-     * @type 'trigger' | MinWidthProperty<string | number>;
-     * @default 316px
-     * */
-    minWidth?: DropdownProps['minWidth'];
-    /**
-     * See [MDN spec](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width).
-     * `trigger` is a special value that substitutes with trigger's width calculated on every dropdown position update
-     * @type 'trigger' | MaxWidthProperty<string | number>;
-     * @default "389px"(s); "494px"(m,l)
-     * */
-    maxWidth?: DropdownProps['maxWidth'];
-    /**
-     * Automatically resize icons according to the size of the menu item.
-     * */
-    resizeIcons?: boolean;
-    className?: string;
-}
-export declare const DropdownMenu: React.FC<DropdownMenuProps>;
-export default DropdownMenu;
+import React from 'react';
+import { DropdownProps } from '@rescui/dropdown';
+import { MenuItemIconPlacement } from '@rescui/menu';
+type DropdownMenuSize = 's' | 'm' | 'l';
+export interface DropdownMenuProps extends Omit<DropdownProps, 'maxWidth' | 'minWidth' | 'maxHeight' | 'leastMaxHeight' | 'className'> {
+    /**
+     * Maximum number of visible items in the dropdown list.
+     * For large lists, n + 0.5 items will be visible at a time.
+     * If the maximum number of items in a list is exactly n + 1, all
+     * items will be shown still (to avoid creating a scroll for half an item only).
+     */
+    maxVisibleItems?: number;
+    iconPlacement?: MenuItemIconPlacement;
+    itemTag?: React.ElementType;
+    tag?: React.ElementType;
+    size?: DropdownMenuSize;
+    wrapItemsWithLi?: boolean;
+    activateFirstItemOnOpen?: boolean;
+    /**
+     * See [MDN spec](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width).
+     * `trigger` is a special value that substitutes with trigger's width calculated on every dropdown position update
+     * @type 'trigger' | MinWidthProperty<string | number>;
+     * @default 316px
+     * */
+    minWidth?: DropdownProps['minWidth'];
+    /**
+     * See [MDN spec](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width).
+     * `trigger` is a special value that substitutes with trigger's width calculated on every dropdown position update
+     * @type 'trigger' | MaxWidthProperty<string | number>;
+     * @default "389px"(s); "494px"(m,l)
+     * @rawDefaultValue
+     * */
+    maxWidth?: DropdownProps['maxWidth'];
+    /**
+     * Automatically resize icons according to the size of the menu item.
+     * */
+    resizeIcons?: boolean;
+    className?: string;
+}
+export declare const DropdownMenu: React.FC<DropdownMenuProps>;
+export default DropdownMenu;

package/lib/dropdown-menu.js

@@ -36,6 +36,7 @@ const DropdownMenu = _ref => {
   const menuWrapperRef = useRef(null);
   const [height, setHeight] = useState(0);
   let itemHeightFromCss = null;
+  let contrastPrimaryFromCss = null;
 
   if (menuWrapperRef.current) {
     // In theory this part of the code might cause issues with SSR.
@@ -46,6 +47,7 @@ const DropdownMenu = _ref => {
     // it's a dropdown-content and in most cases it opens only on-demand
     const menuWrapperStyles = getComputedStyle(menuWrapperRef.current);
     itemHeightFromCss = parseInt(menuWrapperStyles.getPropertyValue('--_rs-dropdown-menu-item-height'), 10) || null;
+    contrastPrimaryFromCss = parseInt(menuWrapperStyles.getPropertyValue('--rs-dropdown-menu-contrast-primary'), 10) || null;
   }
 
   const itemHeight = itemHeightFromCss || ITEM_HEIGHT_BY_SIZE[size]; // a little buffer of 10% here
@@ -80,8 +82,10 @@ const DropdownMenu = _ref => {
     "data-test": "dropdown-menu",
     "data-rs-internal": 'dropdown-menu__menu',
     className: styles.menu,
+    style: {
+      '--rs-menu-contrast-primary': contrastPrimaryFromCss
+    },
     enableKeyboardNavigation: true,
-    returnFocusOnUnmount: true,
     activateFirstItem: activateFirstItemOnOpen,
     wrapItemsWithLi: wrapItemsWithLi,
     resizeIcons: resizeIcons

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

@@ -1,8 +1,8 @@
 var styles = {
-  "sizeS": "_sizeS_y0xdvz_8",
-  "sizeM": "_sizeM_y0xdvz_11",
-  "sizeL": "_sizeL_y0xdvz_14",
-  "dropdownMenu": "_dropdownMenu_y0xdvz_18",
-  "menu": "_menu_y0xdvz_23"
+  "sizeS": "_sizeS_sr3m6n_8",
+  "sizeM": "_sizeM_sr3m6n_11",
+  "sizeL": "_sizeL_sr3m6n_14",
+  "dropdownMenu": "_dropdownMenu_sr3m6n_18",
+  "menu": "_menu_sr3m6n_23"
 };
 export { styles as default };

package/lib/index.css

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

package/lib/index.d.ts

@@ -1,3 +1,3 @@
-export { default as DropdownMenu } from './dropdown-menu';
-export type { DropdownMenuProps } from './dropdown-menu';
-export { MenuItem } from '@rescui/menu';
+export { default as DropdownMenu } from './dropdown-menu';
+export type { DropdownMenuProps } from './dropdown-menu';
+export { MenuItem } from '@rescui/menu';

package/lib/menu-wrapper.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
-export declare type MenuWrapperProps = {
-    children?: React.ReactNode;
-    onHeightUpdate?: (newHeight: number) => void;
-};
-export declare const MenuWrapper: React.ForwardRefExoticComponent<MenuWrapperProps & React.RefAttributes<HTMLDivElement>>;
+import React from 'react';
+export type MenuWrapperProps = {
+    children?: React.ReactNode;
+    onHeightUpdate?: (newHeight: number) => void;
+};
+export declare const MenuWrapper: React.ForwardRefExoticComponent<MenuWrapperProps & React.RefAttributes<HTMLDivElement>>;

package/llm/components/dropdown-menu.md

@@ -0,0 +1,424 @@
+# DropdownMenu
+
+DropdownMenu is a special type of Dropdown component with predefined dimensions for correctly displaying overflowing menus. Compared to the standard Dropdown option, it also offers keyboard navigation and a simpler API for making menus.
+
+## Usage
+
+### Features showcase
+
+#### Basic example
+
+```tsx
+import { useState } from 'react';
+import { DropdownMenu, MenuItem } from '@rescui/dropdown-menu';
+import { Button } from '@rescui/button';
+
+const Demo = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggleIsOpen = () => setIsOpen(s => !s);
+
+  return (
+    <DropdownMenu
+      isOpen={isOpen}
+      onRequestClose={() => setIsOpen(false)}
+      trigger={<Button onClick={toggleIsOpen}>Open Menu</Button>}
+    >
+      <MenuItem>Some text 1</MenuItem>
+      <MenuItem>Some text 2</MenuItem>
+      <MenuItem>Some text 3</MenuItem>
+      <MenuItem>Some text 4</MenuItem>
+      <MenuItem>Some text 5</MenuItem>
+      <MenuItem>Some text 6</MenuItem>
+      <MenuItem>Some text 7</MenuItem>
+      <MenuItem>Some text 8</MenuItem>
+    </DropdownMenu>
+  );
+};
+
+render(<Demo />);
+```
+
+#### Links, buttons, divider
+
+```tsx
+import { useState } from 'react';
+import { DropdownMenu, MenuItem } from '@rescui/dropdown-menu';
+import { Divider } from '@rescui/menu';
+import { Button } from '@rescui/button';
+import { ArrowTopRightOutlineIcon } 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}>Open Menu</Button>}
+    >
+      <MenuItem href="#somewhere1">Some link 1</MenuItem>
+      <MenuItem href="#somewhere2">Some link 2</MenuItem>
+      <MenuItem onClick={() => alert(3)}>Some button 3</MenuItem>
+      <MenuItem href="#somewhere4" onClick={() => alert(4)}>
+        Some link 4
+      </MenuItem>
+      <Divider />
+      <MenuItem
+        href="#somewhere5"
+        icon={<ArrowTopRightOutlineIcon />}
+        iconPlacement="right"
+      >
+        External link 5
+      </MenuItem>
+      <MenuItem onClick={() => alert(6)}>Some button 6</MenuItem>
+    </DropdownMenu>
+  );
+};
+
+render(<Demo />);
+```
+
+#### Select first item on open by keyboard
+
+```tsx
+import { useState } from 'react';
+import { DropdownMenu, MenuItem } from '@rescui/dropdown-menu';
+import { Button } from '@rescui/button';
+
+const Demo = () => {
+  const [isOpenBy, setIsOpenBy] = useState(null);
+
+  const handleClick = () => setIsOpenBy(s => !s && 'mouse');
+
+  const handleKeyDown = e => {
+    if (e.code === 'ArrowDown' || e.code === 'Enter' || e.code === 'Space') {
+      e.preventDefault();
+      setIsOpenBy('keyboard');
+    }
+  };
+
+  return (
+    <DropdownMenu
+      isOpen={Boolean(isOpenBy)}
+      onRequestClose={() => setIsOpenBy(null)}
+      activateFirstItemOnOpen={isOpenBy === 'keyboard'}
+      trigger={
+        <Button onClick={handleClick} onKeyDown={handleKeyDown}>
+          Open Menu
+        </Button>
+      }
+    >
+      <MenuItem>Some text 1</MenuItem>
+      <MenuItem>Some text 2</MenuItem>
+      <MenuItem>Some text 3</MenuItem>
+      <MenuItem>Some text 4</MenuItem>
+      <MenuItem>Some text 5</MenuItem>
+      <MenuItem>Some text 6</MenuItem>
+      <MenuItem>Some text 7</MenuItem>
+      <MenuItem>Some text 8</MenuItem>
+    </DropdownMenu>
+  );
+};
+
+render(<Demo />);
+```
+
+#### Rock with glow effect
+
+```tsx
+import { useState } from 'react';
+import { DropdownMenu, MenuItem } from '@rescui/dropdown-menu';
+import { Button } from '@rescui/button';
+import { useGlowHover } from '@rescui/use-glow-hover';
+
+const GlowMenuItem = ({ theme, ...restProps }) => {
+  const ref = useGlowHover({
+    lightSizeEnterAnimationTime: 0,
+    lightSizeLeaveAnimationTime: 0,
+    preset: 'bright-pink',
+    enableBurst: true,
+    forceTheme: 'light'
+  });
+  return <MenuItem {...restProps} ref={ref} />;
+};
+
+const Demo = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggleIsOpen = () => setIsOpen(s => !s);
+
+  return (
+    <DropdownMenu
+      mode="rock"
+      isOpen={isOpen}
+      onRequestClose={() => setIsOpen(false)}
+      trigger={<Button onClick={toggleIsOpen}>Open Menu</Button>}
+    >
+      <GlowMenuItem>Some text 1</GlowMenuItem>
+      <GlowMenuItem>Some text 2</GlowMenuItem>
+      <GlowMenuItem>Some text 3</GlowMenuItem>
+      <GlowMenuItem>Some text 4</GlowMenuItem>
+      <GlowMenuItem>Some text 5</GlowMenuItem>
+      <GlowMenuItem>Some text 6</GlowMenuItem>
+      <GlowMenuItem>Some text 7</GlowMenuItem>
+      <GlowMenuItem>Some text 8</GlowMenuItem>
+    </DropdownMenu>
+  );
+};
+
+render(<Demo />);
+```
+
+#### With selected support
+
+```tsx
+import { useState } from 'react';
+import { DropdownMenu, MenuItem } from '@rescui/dropdown-menu';
+import { Button } from '@rescui/button';
+
+const OPTIONS = [
+  'Some text 1',
+  'Some text 2',
+  'Some text 3',
+  'Some text 4',
+  'Some text 5',
+  'Some text 6',
+  'Some text 7',
+  'Some text 8'
+];
+
+const Demo = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [selected, setSelected] = useState(OPTIONS[2]);
+
+  const toggleIsOpen = () => setIsOpen(s => !s);
+
+  return (
+    <DropdownMenu
+      isOpen={isOpen}
+      onRequestClose={() => setIsOpen(false)}
+      trigger={<Button onClick={toggleIsOpen}>Open Menu</Button>}
+    >
+      {OPTIONS.map(option => (
+        <MenuItem
+          key={option}
+          selected={selected === option}
+          onClick={() => setSelected(option)}
+        >
+          {option}
+        </MenuItem>
+      ))}
+    </DropdownMenu>
+  );
+};
+
+render(<Demo />);
+```
+
+#### With `minWidth`
+
+```tsx
+import { useState } from 'react';
+import { DropdownMenu, MenuItem } from '@rescui/dropdown-menu';
+import { Button } from '@rescui/button';
+
+const Demo = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggleIsOpen = () => setIsOpen(s => !s);
+
+  return (
+    <DropdownMenu
+      isOpen={isOpen}
+      onRequestClose={() => setIsOpen(false)}
+      trigger={<Button onClick={toggleIsOpen}>Open Menu</Button>}
+      minWidth="trigger"
+    >
+      <MenuItem>Some text 1</MenuItem>
+      <MenuItem>Some text 2</MenuItem>
+      <MenuItem>Some text 3</MenuItem>
+      <MenuItem>Some text 4</MenuItem>
+      <MenuItem>Some text 5</MenuItem>
+      <MenuItem>Some text 6</MenuItem>
+      <MenuItem>Some text 7</MenuItem>
+      <MenuItem>Some text 8</MenuItem>
+    </DropdownMenu>
+  );
+};
+
+render(<Demo />);
+```
+
+#### With icons
+
+```tsx
+import { useState } from 'react';
+import { DropdownMenu, MenuItem } from '@rescui/dropdown-menu';
+import { Button } from '@rescui/button';
+import { PrintOutlineIcon } 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}>Open Menu</Button>}
+      size="l"
+    >
+      <MenuItem icon={<PrintOutlineIcon />}>Some text 1</MenuItem>
+      <MenuItem icon={<PrintOutlineIcon />}>Some text 2</MenuItem>
+      <MenuItem icon={<PrintOutlineIcon />}>Some text 3</MenuItem>
+      <MenuItem icon={<PrintOutlineIcon />}>Some text 4</MenuItem>
+      <MenuItem icon={<PrintOutlineIcon />}>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.
+
+```tsx
+import { useState } from 'react';
+import { DropdownMenu, MenuItem } from '@rescui/dropdown-menu';
+import { Button } from '@rescui/button';
+
+const Demo = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggleIsOpen = () => setIsOpen(s => !s);
+
+  return (
+    <div className="light-green-primary">
+      <DropdownMenu
+        isOpen={isOpen}
+        onRequestClose={() => setIsOpen(false)}
+        trigger={
+          <Button onClick={toggleIsOpen} mode="rock">
+            Open Menu
+          </Button>
+        }
+        size="l"
+        className="dropdown-menu-with-contrast-primary"
+      >
+        <MenuItem>Some text 1</MenuItem>
+        <MenuItem>Some text 2</MenuItem>
+        <MenuItem>Some text 3</MenuItem>
+        <MenuItem>Some text 4</MenuItem>
+        <MenuItem>Some text 5</MenuItem>
+      </DropdownMenu>
+    </div>
+  );
+};
+
+render(<Demo />);
+```
+
+```postcss
+.dropdown-menu-with-contrast-primary {
+  --rs-dropdown-menu-contrast-primary: 1;
+}
+
+.light-green-primary {
+  --rs-color-primary-light-theme: rgb(71, 224, 84);
+  --rs-color-primary-t-dim-light-theme: rgba(71, 224, 84, 0.8);
+  --rs-color-primary-t-fog-light-theme: rgba(71, 224, 84, 0.2);
+
+  --rs-color-primary-dark-theme: rgb(71, 224, 84);
+  --rs-color-primary-t-dim-dark-theme: rgba(71, 224, 84, 0.8);
+  --rs-color-primary-t-fog-dark-theme: rgba(71, 224, 84, 0.2);
+}
+```
+
+## CSS Mixins API
+
+#### `DropdownMenu` mixins
+
+| Mixin name | Details |
+| --- | --- |
+| `rs-dropdown-menu-size-s` | prop: `size`<br><br>value: `"s"` |
+| `rs-dropdown-menu-size-m` | prop: `size`<br><br>value: `"m"` |
+| `rs-dropdown-menu-size-l` | prop: `size`<br><br>value: `"l"` |
+
+##### Demo
+
+Instead of separate classes, it may be a single class with `@media` queries inside:
+
+```tsx
+import { useState } from 'react';
+import { DropdownMenu, MenuItem } from '@rescui/dropdown-menu';
+import { Button } from '@rescui/button';
+
+const MyDropdownMenu = ({ className }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggleIsOpen = () => setIsOpen(s => !s);
+  return (
+    <div style={{ padding: 12, backgroundColor: 'var(--rs-color-black-t5)' }}>
+      <DropdownMenu
+        isOpen={isOpen}
+        onRequestClose={() => setIsOpen(false)}
+        trigger={<Button onClick={toggleIsOpen}>Open Menu</Button>}
+        className={className}
+      >
+        <MenuItem>Some text 1</MenuItem>
+        <MenuItem>Some text 2</MenuItem>
+        <MenuItem>Some text 3</MenuItem>
+        <MenuItem>Some text 4</MenuItem>
+        <MenuItem>Some text 5</MenuItem>
+        <MenuItem>Some text 6</MenuItem>
+        <MenuItem>Some text 7</MenuItem>
+        <MenuItem>Some text 8</MenuItem>
+      </DropdownMenu>
+    </div>
+  );
+};
+
+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>
+);
+```
+
+```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;
+}
+```
+
+#### `Menu` CSS Vars
+
+| Variable | Syntax | Description |
+| --- | --- | --- |
+| `--rs-dropdown-menu-contrast-primary` | `0 \| 1` | The flag whenever the current primary is contrast enough and highlighted text color should be inverted |
+
+Check out [this example](/components/dropdown-menu/#contrast-primary-color) for contrast primary.

package/llm/index.md

@@ -0,0 +1,2 @@
+- Components and Hooks
+  - [DropdownMenu](./components/dropdown-menu.md)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/dropdown-menu",
-  "version": "0.11.14",
+  "version": "0.11.15-RUI-293-Update-menu-component-7a032357e.20+7a032357e",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -9,6 +9,7 @@
   "src:main": "src/index.ts",
   "files": [
     "lib",
+    "llm",
     "LICENSE.txt"
   ],
   "publishConfig": {
@@ -16,9 +17,9 @@
   },
   "dependencies": {
     "@babel/runtime-corejs3": "^7.26.0",
-    "@rescui/dropdown": "^0.10.0",
-    "@rescui/menu": "^0.13.5",
-    "@rescui/use-resize-observer": "^0.3.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",
     "classnames": "^2.2.6"
   },
   "peerDependencies": {
@@ -27,16 +28,16 @@
     "react": ">=16.8.0 <20"
   },
   "devDependencies": {
-    "@rescui/colors": "^0.3.0",
-    "@rescui/icons": "^1.7.6",
-    "@rescui/scripts": "^0.5.1",
-    "@rescui/typography": "^0.27.0",
-    "@rescui/visual-regression": "^0.1.4"
+    "@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/scripts": "0.5.2",
+    "@rescui/typography": "0.27.1-RUI-293-Update-menu-component-7a032357e.20+7a032357e",
+    "@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": "e9aedd97a4cc372540ec8d75dda4f122baacca10"
+  "gitHead": "7a032357e8f31abbf69e18aa6b7ef2d75e40f42e"
 }