@rescui/dropdown-menu 0.11.16 → 0.11.17

package/README.md

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

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_8gpi6g_8",
+  "sizeM": "_sizeM_8gpi6g_11",
+  "sizeL": "_sizeL_8gpi6g_14",
+  "dropdownMenu": "_dropdownMenu_8gpi6g_18",
+  "menu": "_menu_8gpi6g_23"
 };
 export { styles as default };

package/lib/index.css

@@ -1,29 +1,29 @@
-._sizeS_xmd2pz_8{
+._sizeS_8gpi6g_8{
   --_rs-dropdown-menu-min-width:316px;
   --_rs-dropdown-menu-max-width:389px;
 }
-._sizeS_xmd2pz_8 [data-rs-internal='dropdown-menu__menu-wrapper']{
+._sizeS_8gpi6g_8 [data-rs-internal='dropdown-menu__menu-wrapper']{
     --_rs-dropdown-menu-item-height:32px;
   }
-._sizeM_xmd2pz_11{
+._sizeM_8gpi6g_11{
   --_rs-dropdown-menu-min-width:316px;
   --_rs-dropdown-menu-max-width:494px;
 }
-._sizeM_xmd2pz_11 [data-rs-internal='dropdown-menu__menu-wrapper']{
+._sizeM_8gpi6g_11 [data-rs-internal='dropdown-menu__menu-wrapper']{
     --_rs-dropdown-menu-item-height:40px;
   }
-._sizeL_xmd2pz_14{
+._sizeL_8gpi6g_14{
   --_rs-dropdown-menu-min-width:316px;
   --_rs-dropdown-menu-max-width:494px;
 }
-._sizeL_xmd2pz_14 [data-rs-internal='dropdown-menu__menu-wrapper']{
+._sizeL_8gpi6g_14 [data-rs-internal='dropdown-menu__menu-wrapper']{
     --_rs-dropdown-menu-item-height:52px;
   }
-._dropdownMenu_xmd2pz_18{
+._dropdownMenu_8gpi6g_18{
   min-width:var(--_rs-dropdown-menu-min-width);
   max-width:var(--_rs-dropdown-menu-max-width);
 }
-._menu_xmd2pz_23{
+._menu_8gpi6g_23{
   margin:0;
   padding:0;
 

package/llm/components/dropdown-menu.md

@@ -0,0 +1,359 @@
+# 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
+
+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;
+}
+```

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.17",
   "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.10.3",
+    "@rescui/menu": "^0.13.7",
+    "@rescui/use-resize-observer": "^0.3.2",
     "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": "d60e4f3491c7cdb9ef684d08940869914492a61b"
 }