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

package/lib/dropdown-menu.js

@@ -36,6 +36,7 @@ const DropdownMenu = _ref => {
   const [menuWrapperEl, setMenuWrapperEl] = useState(null);
   const [height, setHeight] = useState(0);
   let itemHeightFromCss = null;
+  let contrastPrimaryFromCss = null;
 
   if (menuWrapperEl) {
     // 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(menuWrapperEl);
     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
@@ -81,8 +83,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_1t494nu_8",
-  "sizeM": "_sizeM_1t494nu_11",
-  "sizeL": "_sizeL_1t494nu_14",
-  "dropdownMenu": "_dropdownMenu_1t494nu_18",
-  "menu": "_menu_1t494nu_23"
+  "sizeS": "_sizeS_1yw9uw9_8",
+  "sizeM": "_sizeM_1yw9uw9_11",
+  "sizeL": "_sizeL_1yw9uw9_14",
+  "dropdownMenu": "_dropdownMenu_1yw9uw9_18",
+  "menu": "_menu_1yw9uw9_23"
 };
 export { styles as default };

package/lib/index.css

@@ -1,29 +1,29 @@
-._sizeS_1t494nu_8{
+._sizeS_1yw9uw9_8{
   --_rs-dropdown-menu-min-width:316px;
   --_rs-dropdown-menu-max-width:389px;
 }
-._sizeS_1t494nu_8 [data-rs-internal='dropdown-menu__menu-wrapper']{
+._sizeS_1yw9uw9_8 [data-rs-internal='dropdown-menu__menu-wrapper']{
     --_rs-dropdown-menu-item-height:32px;
   }
-._sizeM_1t494nu_11{
+._sizeM_1yw9uw9_11{
   --_rs-dropdown-menu-min-width:316px;
   --_rs-dropdown-menu-max-width:494px;
 }
-._sizeM_1t494nu_11 [data-rs-internal='dropdown-menu__menu-wrapper']{
+._sizeM_1yw9uw9_11 [data-rs-internal='dropdown-menu__menu-wrapper']{
     --_rs-dropdown-menu-item-height:40px;
   }
-._sizeL_1t494nu_14{
+._sizeL_1yw9uw9_14{
   --_rs-dropdown-menu-min-width:316px;
   --_rs-dropdown-menu-max-width:494px;
 }
-._sizeL_1t494nu_14 [data-rs-internal='dropdown-menu__menu-wrapper']{
+._sizeL_1yw9uw9_14 [data-rs-internal='dropdown-menu__menu-wrapper']{
     --_rs-dropdown-menu-item-height:52px;
   }
-._dropdownMenu_1t494nu_18{
+._dropdownMenu_1yw9uw9_18{
   min-width:var(--_rs-dropdown-menu-min-width);
   max-width:var(--_rs-dropdown-menu-max-width);
 }
-._menu_1t494nu_23{
+._menu_1yw9uw9_23{
   margin:0;
   padding:0;
 

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
@@ -139,7 +141,8 @@ const GlowMenuItem = ({ theme, ...restProps }) => {
     lightSizeEnterAnimationTime: 0,
     lightSizeLeaveAnimationTime: 0,
     preset: 'bright-pink',
-    enableBurst: true
+    enableBurst: true,
+    forceTheme: 'light'
   });
   return <MenuItem {...restProps} ref={ref} />;
 };
@@ -171,45 +174,45 @@ const Demo = () => {
 render(<Demo />);
 ```
 
-#### With glow effect and selected support
+#### With 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 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
-      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>
+      {OPTIONS.map(option => (
+        <MenuItem
+          key={option}
+          selected={selected === option}
+          onClick={() => setSelected(option)}
+        >
+          {option}
+        </MenuItem>
+      ))}
     </DropdownMenu>
   );
 };
@@ -283,6 +286,106 @@ 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.
+
+```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
@@ -342,3 +445,11 @@ render(<MyDropdownMenu />);
   }
 }
 ```
+
+#### `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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/dropdown-menu",
-  "version": "0.11.19-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.10+dbbefd7b8",
+  "version": "0.12.0",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -17,27 +17,27 @@
   },
   "dependencies": {
     "@babel/runtime-corejs3": "^7.26.0",
-    "@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",
+    "@rescui/dropdown": "^0.11.1",
+    "@rescui/menu": "^0.14.0",
+    "@rescui/use-resize-observer": "^0.3.3",
     "classnames": "^2.2.6"
   },
   "peerDependencies": {
     "@rescui/ui-contexts": "^0.6.0",
     "prop-types": "^15",
-    "react": ">=17.0.0 <20"
+    "react": ">=16.8.0 <20"
   },
   "devDependencies": {
-    "@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"
+    "@rescui/colors": "^0.3.2",
+    "@rescui/icons": "^1.8.3",
+    "@rescui/scripts": "^0.5.2",
+    "@rescui/typography": "^0.27.3",
+    "@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": "dbbefd7b8e24da18262edf3baffa35039ae01af3"
+  "gitHead": "7614b4519a4716fbf1151d94c97fda48eab60800"
 }