@rescui/dropdown-menu 0.11.16 → 0.11.18

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.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_xmd2pz_8",
-  "sizeM": "_sizeM_xmd2pz_11",
-  "sizeL": "_sizeL_xmd2pz_14",
-  "dropdownMenu": "_dropdownMenu_xmd2pz_18",
-  "menu": "_menu_xmd2pz_23"
+  "sizeS": "_sizeS_1iizzly_8",
+  "sizeM": "_sizeM_1iizzly_11",
+  "sizeL": "_sizeL_1iizzly_14",
+  "dropdownMenu": "_dropdownMenu_1iizzly_18",
+  "menu": "_menu_1iizzly_23"
 };
 export { styles as default };

package/lib/index.css

@@ -1,29 +1,29 @@
-._sizeS_xmd2pz_8{
+._sizeS_1iizzly_8{
   --_rs-dropdown-menu-min-width:316px;
   --_rs-dropdown-menu-max-width:389px;
 }
-._sizeS_xmd2pz_8 [data-rs-internal='dropdown-menu__menu-wrapper']{
+._sizeS_1iizzly_8 [data-rs-internal='dropdown-menu__menu-wrapper']{
     --_rs-dropdown-menu-item-height:32px;
   }
-._sizeM_xmd2pz_11{
+._sizeM_1iizzly_11{
   --_rs-dropdown-menu-min-width:316px;
   --_rs-dropdown-menu-max-width:494px;
 }
-._sizeM_xmd2pz_11 [data-rs-internal='dropdown-menu__menu-wrapper']{
+._sizeM_1iizzly_11 [data-rs-internal='dropdown-menu__menu-wrapper']{
     --_rs-dropdown-menu-item-height:40px;
   }
-._sizeL_xmd2pz_14{
+._sizeL_1iizzly_14{
   --_rs-dropdown-menu-min-width:316px;
   --_rs-dropdown-menu-max-width:494px;
 }
-._sizeL_xmd2pz_14 [data-rs-internal='dropdown-menu__menu-wrapper']{
+._sizeL_1iizzly_14 [data-rs-internal='dropdown-menu__menu-wrapper']{
     --_rs-dropdown-menu-item-height:52px;
   }
-._dropdownMenu_xmd2pz_18{
+._dropdownMenu_1iizzly_18{
   min-width:var(--_rs-dropdown-menu-min-width);
   max-width:var(--_rs-dropdown-menu-max-width);
 }
-._menu_xmd2pz_23{
+._menu_1iizzly_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

@@ -0,0 +1,344 @@
+# 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
+  });
+  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 glow effect and selected support
+
+```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, selected, ...restProps }) => {
+  const ref = useGlowHover({
+    lightSizeEnterAnimationTime: 0,
+    lightSizeLeaveAnimationTime: 0,
+    preset: 'bright-pink',
+    disabled: selected,
+    enableBurst: true
+  });
+  return <MenuItem {...restProps} selected={selected} 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 selected>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 `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 />);
+```
+
+## 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
+
+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 = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggleIsOpen = () => setIsOpen(s => !s);
+  return (
+    <div style={{ height: 350 }}>
+      <DropdownMenu
+        isOpen={isOpen}
+        onRequestClose={() => setIsOpen(false)}
+        trigger={<Button onClick={toggleIsOpen}>Open Menu</Button>}
+        className="my-dropdown-menu"
+      >
+        <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(<MyDropdownMenu />);
+```
+
+```postcss
+@import '@rescui/dropdown-menu/lib/public-api.p.css';
+
+.my-dropdown-menu {
+  @media (max-width: 640px) {
+    @mixin rs-dropdown-menu-size-l;
+  }
+  @media (max-width: 500px) {
+    @mixin rs-dropdown-menu-size-s;
+  }
+}
+```

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.16",
+  "version": "0.11.18",
   "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.2",
-    "@rescui/menu": "^0.13.6",
-    "@rescui/use-resize-observer": "^0.3.1",
+    "@rescui/dropdown": "^0.11.0",
+    "@rescui/menu": "^0.13.7",
+    "@rescui/use-resize-observer": "^0.3.3",
     "classnames": "^2.2.6"
   },
   "peerDependencies": {
@@ -27,10 +28,10 @@
     "react": ">=16.8.0 <20"
   },
   "devDependencies": {
-    "@rescui/colors": "^0.3.1",
-    "@rescui/icons": "^1.8.1",
+    "@rescui/colors": "^0.3.2",
+    "@rescui/icons": "^1.8.2",
     "@rescui/scripts": "^0.5.2",
-    "@rescui/typography": "^0.27.1",
+    "@rescui/typography": "^0.27.2",
     "@rescui/visual-regression": "^0.1.4"
   },
   "scripts": {
@@ -38,5 +39,5 @@
     "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
   },
   "nx": {},
-  "gitHead": "a04f6790abce8e72834eedce3512ee83513c5e78"
+  "gitHead": "7aade8fced69c4a1ac61078a1daf2c1cd4f5a1c9"
 }