@rescui/menu 0.13.8-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.14 → 0.14.0

package/lib/types.d.ts

@@ -0,0 +1,87 @@
+import React from 'react';
+import type { JSX } from 'react';
+import type { Theme } from '@rescui/ui-contexts';
+export type MenuItemSize = 's' | 'm' | 'l';
+export type MenuItemIconPlacement = 'left' | 'right';
+export type MenuItemMode = 'clear' | 'classic' | 'rock';
+export type MenuContextValue = {
+    iconPlacement?: MenuItemIconPlacement;
+    disabled?: boolean;
+    size?: MenuItemSize;
+    mode?: MenuItemMode;
+    theme?: Theme;
+    itemTag?: React.ElementType;
+    wrapWithLi: boolean;
+    registerItem?: ((ref: HTMLElement) => void) | null;
+    unregisterItem?: ((ref: HTMLElement) => void) | null;
+    currentActiveItemEl?: HTMLElement | null;
+    keyboardNavigationEnabled?: boolean;
+    onItemFocus?: ((ref: HTMLElement) => void) | null;
+    onItemKeyDown?: ((e: React.KeyboardEvent<HTMLElement>, ref?: HTMLElement) => void) | null;
+    onItemMouseEnter?: ((ref: HTMLElement) => void) | null;
+    resizeIcons?: boolean;
+};
+type MenuSpecificProps = {
+    /**
+     * Icon placement relative to the menu item text
+     * @default left
+     */
+    iconPlacement?: MenuItemIconPlacement;
+    /**
+     * @default false
+     * @rawDefaultValue
+     */
+    disabled?: boolean;
+    /**
+     * @default m
+     */
+    size?: MenuItemSize;
+    /**
+     * @default classic
+     */
+    mode?: MenuItemMode;
+    theme?: Theme;
+    tag?: React.ElementType;
+    itemTag?: React.ElementType;
+    /**
+     * Enable icons resizing in tandem with menu size
+     * @default false
+     * @rawDefaultValue
+     */
+    resizeIcons?: boolean;
+    children?: React.ReactNode;
+    enableKeyboardNavigation?: boolean;
+    activateFirstItem?: boolean;
+    wrapItemsWithLi?: boolean;
+};
+export type MenuProps = MenuSpecificProps & Omit<React.HTMLAttributes<HTMLElement>, keyof MenuSpecificProps>;
+type MenuItemSpecificProps = {
+    className?: string;
+    tag?: React.ElementType;
+    icon?: JSX.Element;
+    size?: MenuItemSize;
+    mode?: MenuItemMode;
+    theme?: Theme;
+    disabled?: boolean;
+    selected?: boolean;
+    iconPlacement?: MenuItemIconPlacement;
+    children?: React.ReactNode;
+    key?: string;
+    'data-test'?: string;
+    /**
+     * Set the icon to be displayed when hovering over the menu item.
+     */
+    hoverIcon?: JSX.Element;
+};
+export type MenuItemProps = MenuItemSpecificProps & Omit<React.AllHTMLAttributes<Element>, keyof MenuItemSpecificProps>;
+export interface DividerProps extends React.HTMLAttributes<HTMLHRElement> {
+    theme?: Theme;
+    className?: string;
+}
+export interface GroupHeaderProps {
+    theme?: Theme;
+    size?: MenuItemSize;
+    text?: React.ReactNode;
+    className?: string;
+}
+export {};

package/llm/components/menu.md

@@ -8,6 +8,8 @@ A menu is a group of elements consisting of actions and links, represented by co
 
 ### Features showcase
 
+Do not combine `iconPlacement="right"` with `selected` prop.
+
 #### Example
 
 ```tsx
@@ -88,6 +90,75 @@ import {
 </Menu>;
 ```
 
+#### With hover icon
+
+You can use `hoverIcon` prop to set the icon for the hovered items.
+
+```tsx
+import { Menu, MenuItem } from '@rescui/menu';
+import {
+  DownloadOutlineIcon,
+  CloseOutlineIcon,
+  LeftOutlineIcon
+} from '@rescui/icons';
+
+<Menu size="s" resizeIcons style={{ maxWidth: 200 }}>
+  <MenuItem hoverIcon={<DownloadOutlineIcon />}>Cart</MenuItem>
+  <MenuItem hoverIcon={<CloseOutlineIcon />} selected>
+    Bug
+  </MenuItem>
+  <MenuItem hoverIcon={<DownloadOutlineIcon />}>Person</MenuItem>
+  <MenuItem
+    icon={<LeftOutlineIcon />}
+    iconPlacement="right"
+    hoverIcon={<CloseOutlineIcon />}
+  >
+    Team
+  </MenuItem>
+  <MenuItem hoverIcon={<DownloadOutlineIcon />}>Success</MenuItem>
+</Menu>;
+```
+
+#### Contrast primary color
+
+If your primary color background requires dark text color, use `--rs-menu-contrast-primary` CSS variable.
+
+```tsx
+import { Menu, MenuItem } from '@rescui/menu';
+
+const Demo = () => {
+  return (
+    <div className="light-green-primary">
+      <Menu className="menu-with-contrast-primary" style={{ maxWidth: 200 }}>
+        <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>
+      </Menu>
+    </div>
+  );
+};
+
+render(<Demo />);
+```
+
+```postcss
+.menu-with-contrast-primary {
+  --rs-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
 
 #### `Menu` mixins
@@ -100,8 +171,6 @@ import {
 | `rs-menu-mode-classic` | prop: `mode`<br><br>value: `"classic"` |
 | `rs-menu-mode-rock` | prop: `mode`<br><br>value: `"rock"` |
 | `rs-menu-mode-clear` | prop: `mode`<br><br>value: `"clear"` |
-| `rs-menu-icon-placement-left` | prop: `iconPlacement`<br><br>value: `"left"` |
-| `rs-menu-icon-placement-right` | prop: `iconPlacement`<br><br>value: `"right"` |
 
 ##### Demo
 
@@ -156,7 +225,6 @@ render(<MyMenu />);
   @media (max-width: 640px) {
     @mixin rs-menu-size-s;
     @mixin rs-menu-mode-classic;
-    @mixin rs-menu-icon-placement-right;
 
     .icon {
       @mixin rs-icon-size-s;
@@ -165,7 +233,6 @@ render(<MyMenu />);
   @media (max-width: 500px) {
     @mixin rs-menu-size-m;
     @mixin rs-menu-mode-clear;
-    @mixin rs-menu-icon-placement-left;
 
     .icon {
       @mixin rs-icon-size-m;
@@ -174,6 +241,14 @@ render(<MyMenu />);
 }
 ```
 
+#### `Menu` CSS Vars
+
+| Variable | Syntax | Description |
+| --- | --- | --- |
+| `--rs-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/menu/#contrast-primary-color) for contrast primary.
+
 #### `MenuItem` mixins
 
 | Mixin name | Details |
@@ -184,8 +259,6 @@ render(<MyMenu />);
 | `rs-menu-item-mode-classic` | prop: `mode`<br><br>value: `"classic"` |
 | `rs-menu-item-mode-rock` | prop: `mode`<br><br>value: `"rock"` |
 | `rs-menu-item-mode-clear` | prop: `mode`<br><br>value: `"clear"` |
-| `rs-menu-item-icon-placement-left` | prop: `iconPlacement`<br><br>value: `"right"` |
-| `rs-menu-item-icon-placement-right` | prop: `iconPlacement`<br><br>value: `"left"` |
 
 ##### Demo
 
@@ -218,7 +291,6 @@ render(<MyMenuItem />);
   @media (max-width: 640px) {
     @mixin rs-menu-item-size-s;
     @mixin rs-menu-item-mode-classic;
-    @mixin rs-menu-item-icon-placement-right;
 
     .icon {
       @mixin rs-icon-size-s;
@@ -227,7 +299,6 @@ render(<MyMenuItem />);
   @media (max-width: 500px) {
     @mixin rs-menu-item-size-m;
     @mixin rs-menu-item-mode-clear;
-    @mixin rs-menu-item-icon-placement-left;
 
     .icon {
       @mixin rs-icon-size-m;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/menu",
-  "version": "0.13.8-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.14+dbbefd7b8",
+  "version": "0.14.0",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -23,14 +23,14 @@
   "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/postcss-preset-library": "0.2.2",
-    "@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/postcss-preset-library": "^0.2.2",
+    "@rescui/scripts": "^0.5.2",
+    "@rescui/typography": "^0.27.3",
+    "@rescui/visual-regression": "^0.1.4",
     "postcss": "^8.3.0"
   },
   "scripts": {
@@ -38,5 +38,5 @@
     "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
   },
   "nx": {},
-  "gitHead": "dbbefd7b8e24da18262edf3baffa35039ae01af3"
+  "gitHead": "7614b4519a4716fbf1151d94c97fda48eab60800"
 }