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

package/lib/parts/menu-context.d.ts

@@ -1,23 +1,6 @@
 import React, { PropsWithChildren } from 'react';
-import { Theme } from '@rescui/ui-contexts';
-export type MenuItemSize = 's' | 'm' | 'l';
-export type MenuItemIconPlacement = 'left' | 'right';
-export type MenuItemMode = 'clear' | 'classic' | 'rock';
-export interface MenuContextValue {
-    iconPlacement?: MenuItemIconPlacement;
-    disabled?: boolean;
-    disableCursor?: boolean;
-    size?: MenuItemSize;
-    mode?: MenuItemMode;
-    theme?: Theme;
-    itemTag?: React.ElementType;
-    wrapWithLi: boolean;
-    registerItem?: (ref: HTMLElement) => void;
-    unregisterItem?: (ref: HTMLElement) => void;
-    activeItemRef?: HTMLElement;
-    isKeyboardNavigating: boolean;
-    resizeIcons?: boolean;
-}
+import type { MenuContextValue } from '../types';
+export type { MenuContextValue, MenuItemMode, MenuItemIconPlacement, MenuItemSize } from '../types';
 export declare const DEFAULT_MENU_CONTEXT: MenuContextValue;
 export declare const MenuContext: React.Context<MenuContextValue>;
 export declare const useMenuContext: () => MenuContextValue;

package/lib/parts/menu-context.js

@@ -1,46 +1,102 @@
 "use client";
+import { c } from 'react-compiler-runtime';
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 const DEFAULT_MENU_CONTEXT = {
   disabled: false,
-  isKeyboardNavigating: false,
+  keyboardNavigationEnabled: false,
   wrapWithLi: false,
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  registerItem: () => {},
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  unregisterItem: () => {}
+  registerItem: null,
+  unregisterItem: null,
+  currentActiveItemEl: null,
+  onItemFocus: null,
+  onItemKeyDown: null,
+  onItemMouseEnter: null
 };
 const MenuContext = /*#__PURE__*/React.createContext(DEFAULT_MENU_CONTEXT);
 
-const useMenuContext = () => useContext(MenuContext);
-
-const MenuProvider = _ref => {
-  let {
-    children,
-    disabled = DEFAULT_MENU_CONTEXT.disabled,
-    isKeyboardNavigating = DEFAULT_MENU_CONTEXT.isKeyboardNavigating,
-    wrapWithLi = DEFAULT_MENU_CONTEXT.wrapWithLi,
-    registerItem = DEFAULT_MENU_CONTEXT.registerItem,
-    unregisterItem = DEFAULT_MENU_CONTEXT.unregisterItem,
-    ...restProps
-  } = _ref;
-  return /*#__PURE__*/React.createElement(MenuContext.Provider, {
-    value: {
+const useMenuContext = () => {
+  return useContext(MenuContext);
+};
+
+const MenuProvider = t0 => {
+  const $ = c(16);
+  let children;
+  let restProps;
+  let t1;
+  let t2;
+  let t3;
+  let t4;
+
+  if ($[0] !== t0) {
+    ({
+      children,
+      disabled: t1,
+      wrapWithLi: t2,
+      registerItem: t3,
+      unregisterItem: t4,
+      ...restProps
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = restProps;
+    $[3] = t1;
+    $[4] = t2;
+    $[5] = t3;
+    $[6] = t4;
+  } else {
+    children = $[1];
+    restProps = $[2];
+    t1 = $[3];
+    t2 = $[4];
+    t3 = $[5];
+    t4 = $[6];
+  }
+
+  const disabled = t1 === undefined ? DEFAULT_MENU_CONTEXT.disabled : t1;
+  const wrapWithLi = t2 === undefined ? DEFAULT_MENU_CONTEXT.wrapWithLi : t2;
+  const registerItem = t3 === undefined ? DEFAULT_MENU_CONTEXT.registerItem : t3;
+  const unregisterItem = t4 === undefined ? DEFAULT_MENU_CONTEXT.unregisterItem : t4;
+  let t5;
+
+  if ($[7] !== disabled || $[8] !== registerItem || $[9] !== restProps || $[10] !== unregisterItem || $[11] !== wrapWithLi) {
+    t5 = {
       disabled,
-      isKeyboardNavigating,
       wrapWithLi,
       registerItem,
       unregisterItem,
       ...restProps
-    }
-  }, children);
+    };
+    $[7] = disabled;
+    $[8] = registerItem;
+    $[9] = restProps;
+    $[10] = unregisterItem;
+    $[11] = wrapWithLi;
+    $[12] = t5;
+  } else {
+    t5 = $[12];
+  }
+
+  let t6;
+
+  if ($[13] !== children || $[14] !== t5) {
+    t6 = /*#__PURE__*/React.createElement(MenuContext.Provider, {
+      value: t5
+    }, children);
+    $[13] = children;
+    $[14] = t5;
+    $[15] = t6;
+  } else {
+    t6 = $[15];
+  }
+
+  return t6;
 };
 
 MenuProvider.propTypes = {
   size: PropTypes.oneOf(['l', 'm', 's']),
   mode: PropTypes.oneOf(['clear', 'classic', 'rock']),
   theme: PropTypes.oneOf(['light', 'dark']),
-  disableCursor: PropTypes.bool,
   disabled: PropTypes.bool,
   iconPlacement: PropTypes.oneOf(['left', 'right']),
   itemTag: PropTypes.elementType

package/lib/parts/menu-item.d.ts

@@ -1,21 +1,33 @@
 import React from 'react';
-import type { JSX, AllHTMLAttributes, ReactNode } from 'react';
-import { Theme } from '@rescui/ui-contexts';
-import { MenuItemSize, MenuItemMode, MenuItemIconPlacement } from './menu-context';
-export interface MenuItemProps extends Omit<AllHTMLAttributes<Element>, 'size'> {
+import type { JSX } from 'react';
+export type { MenuItemProps } from '../types';
+export declare const MenuItem: React.ForwardRefExoticComponent<{
     className?: string;
     tag?: React.ElementType;
     icon?: JSX.Element;
-    size?: MenuItemSize;
-    mode?: MenuItemMode;
-    theme?: Theme;
+    size?: import("./menu-context").MenuItemSize;
+    mode?: import("./menu-context").MenuItemMode;
+    theme?: import("@rescui/ui-contexts").Theme;
     disabled?: boolean;
-    disableCursor?: boolean;
     selected?: boolean;
-    highlighted?: boolean;
-    iconPlacement?: MenuItemIconPlacement;
-    children?: ReactNode;
+    iconPlacement?: import("./menu-context").MenuItemIconPlacement;
+    children?: React.ReactNode;
     key?: string;
-}
-export declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLElement>>;
+    'data-test'?: string;
+    hoverIcon?: JSX.Element;
+} & Omit<React.AllHTMLAttributes<Element>, keyof {
+    className?: string;
+    tag?: React.ElementType;
+    icon?: JSX.Element;
+    size?: import("./menu-context").MenuItemSize;
+    mode?: import("./menu-context").MenuItemMode;
+    theme?: import("@rescui/ui-contexts").Theme;
+    disabled?: boolean;
+    selected?: boolean;
+    iconPlacement?: import("./menu-context").MenuItemIconPlacement;
+    children?: React.ReactNode;
+    key?: string;
+    'data-test'?: string;
+    hoverIcon?: JSX.Element;
+}> & React.RefAttributes<HTMLElement>>;
 export default MenuItem;

package/lib/parts/menu-item.js

@@ -1,8 +1,11 @@
 "use client";
-import React, { useState, useEffect, cloneElement } from 'react';
+import _extends from '@babel/runtime-corejs3/helpers/esm/extends';
+import { c } from 'react-compiler-runtime';
+import React, { useState, cloneElement, useEffect } from 'react';
 import cn from 'classnames';
 import PropTypes from 'prop-types';
 import { useThemeWithUndefined } from '@rescui/ui-contexts';
+import CheckOutlineIcon from '../_virtual/check-outline.js';
 import styles from '../menu.p.module.css.js';
 import { useMenuContext } from './menu-context.js';
 const ICON_PLACEMENT_STYLES = {
@@ -22,96 +25,374 @@ const SIZE_STYLES = {
 const THEME_STYLES = {
   light: styles.themeLight,
   dark: styles.themeDark
+};
+const HOVER_ICON_WILL_REPLACE_STYLES = {
+  custom: styles.hideCustomIconOnHover,
+  selected: styles.hideSelectedIconOnHover,
+  none: ''
 }; // eslint-disable-next-line complexity
 
-const MenuItemInner = (_ref, ref) => {
-  let {
-    className,
-    tag,
-    children,
-    icon,
-    size = 'm',
-    mode = 'classic',
-    theme,
-    disabled,
-    disableCursor,
-    selected,
-
-    /* @private */
-    highlighted,
-    iconPlacement = 'left',
-    ...restProps
-  } = _ref;
+const MenuItemInner = (t0, ref) => {
+  const $ = c(67);
+  let children;
+  let className;
+  let disabled;
+  let hoverIcon;
+  let icon;
+  let onFocus;
+  let onKeyDown;
+  let onMouseEnter;
+  let restProps;
+  let role;
+  let selected;
+  let t1;
+  let t2;
+  let t3;
+  let tabIndex;
+  let tag;
+  let theme;
+
+  if ($[0] !== t0) {
+    ({
+      className,
+      tag,
+      children,
+      icon,
+      size: t1,
+      mode: t2,
+      theme,
+      disabled,
+      selected,
+      iconPlacement: t3,
+      onFocus,
+      onKeyDown,
+      onMouseEnter,
+      role,
+      tabIndex,
+      hoverIcon,
+      ...restProps
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = disabled;
+    $[4] = hoverIcon;
+    $[5] = icon;
+    $[6] = onFocus;
+    $[7] = onKeyDown;
+    $[8] = onMouseEnter;
+    $[9] = restProps;
+    $[10] = role;
+    $[11] = selected;
+    $[12] = t1;
+    $[13] = t2;
+    $[14] = t3;
+    $[15] = tabIndex;
+    $[16] = tag;
+    $[17] = theme;
+  } else {
+    children = $[1];
+    className = $[2];
+    disabled = $[3];
+    hoverIcon = $[4];
+    icon = $[5];
+    onFocus = $[6];
+    onKeyDown = $[7];
+    onMouseEnter = $[8];
+    restProps = $[9];
+    role = $[10];
+    selected = $[11];
+    t1 = $[12];
+    t2 = $[13];
+    t3 = $[14];
+    tabIndex = $[15];
+    tag = $[16];
+    theme = $[17];
+  }
+
+  const size = t1 === undefined ? "m" : t1;
+  const mode = t2 === undefined ? "classic" : t2;
+  const iconPlacement = t3 === undefined ? "left" : t3;
   const {
     unregisterItem,
     registerItem,
-    activeItemRef,
-    isKeyboardNavigating,
+    currentActiveItemEl,
+    keyboardNavigationEnabled,
+    onItemFocus,
+    onItemKeyDown,
+    onItemMouseEnter,
     wrapWithLi,
     ...menuContext
   } = useMenuContext();
   const actualTheme = useThemeWithUndefined(menuContext.theme ?? theme);
   const [thisRef, setThisRef] = useState(null);
-  useEffect(() => {
-    return () => unregisterItem(thisRef);
-  }, [unregisterItem, thisRef]);
-  let autoTag = 'span';
+  let autoTag = "span";
 
   if (restProps.href) {
-    autoTag = 'a';
-  } else if (restProps.onClick) {
-    autoTag = 'button';
+    autoTag = "a";
+  } else {
+    if (restProps.onClick) {
+      autoTag = "button";
+    }
   }
 
   const Tag = menuContext.itemTag ?? tag ?? autoTag;
-  const actualIconPlacement = menuContext.iconPlacement ?? iconPlacement ?? 'left';
+  const actualIconPlacement = menuContext.iconPlacement ?? iconPlacement ?? "left";
   const actualMode = menuContext.mode ?? mode;
   const actualSize = menuContext.size ?? size;
-  const actualDisableCursor = menuContext.disableCursor ?? disableCursor;
   const resizeIcons = menuContext.resizeIcons ?? false;
-  const iconElement = icon ? /*#__PURE__*/cloneElement(icon, {
-    className: cn(icon.props.className, styles.icon, resizeIcons && styles.resizedIcon),
-    'data-render-all-sizes': true
+  const actualDisabled = menuContext.disabled || disabled;
+  const iconElement = /*#__PURE__*/ /*#__PURE__*/React.isValidElement(icon) ? /*#__PURE__*/cloneElement(icon, {
+    className: cn(icon.props.className, styles.icon, styles.customIcon, resizeIcons && styles.resizedIcon),
+    "data-render-all-sizes": true
   }) : null;
-  const actualHighlighted = highlighted || activeItemRef === thisRef && isKeyboardNavigating;
+  let t4;
+
+  if ($[18] !== hoverIcon) {
+    t4 = /*#__PURE__*/React.isValidElement(hoverIcon);
+    $[18] = hoverIcon;
+    $[19] = t4;
+  } else {
+    t4 = $[19];
+  }
 
-  const handleRef = r => {
-    registerItem(r);
-    setThisRef(r);
+  const hasHoverIcon = t4;
+  const rovingTabIndex = currentActiveItemEl === thisRef ? 0 : -1;
+  let resolvedTabIndex = tabIndex ?? 0;
 
-    if (typeof ref === 'function') {
-      ref(r);
-    } else if (ref != null && typeof ref === 'object') {
-      ref.current = r;
+  if (keyboardNavigationEnabled) {
+    resolvedTabIndex = rovingTabIndex;
+  }
+
+  if (actualDisabled) {
+    resolvedTabIndex = -1;
+  }
+
+  useEffect(() => {
+    if (!thisRef || actualDisabled || !registerItem) {
+      return;
     }
-  };
 
-  const handleKeyDown = e => {
-    if (isKeyboardNavigating && (e.key === ' ' || e.key === 'Enter')) {
-      e.preventDefault();
+    registerItem(thisRef);
+    return () => unregisterItem?.(thisRef);
+  }, [actualDisabled, registerItem, thisRef, unregisterItem]);
+  let t5;
+
+  if ($[20] !== ref) {
+    t5 = r => {
+      if (r) {
+        setThisRef(r);
+      }
+
+      if (typeof ref === "function") {
+        ref(r);
+      } else {
+        if (ref != null && typeof ref === "object") {
+          ref.current = r;
+        }
+      }
+    };
+
+    $[20] = ref;
+    $[21] = t5;
+  } else {
+    t5 = $[21];
+  }
+
+  const handleRef = t5;
+  let t6;
+
+  if ($[22] !== onItemKeyDown || $[23] !== onKeyDown || $[24] !== thisRef) {
+    t6 = e => {
+      onKeyDown?.(e);
+
+      if (e.defaultPrevented || !onItemKeyDown) {
+        return;
+      }
+
+      if (thisRef) {
+        onItemKeyDown(e, thisRef);
+      }
+    };
+
+    $[22] = onItemKeyDown;
+    $[23] = onKeyDown;
+    $[24] = thisRef;
+    $[25] = t6;
+  } else {
+    t6 = $[25];
+  }
+
+  const handleKeyDown = t6;
+  let t7;
+
+  if ($[26] !== onFocus || $[27] !== onItemFocus || $[28] !== thisRef) {
+    t7 = e_0 => {
+      onFocus?.(e_0);
 
-      if (e.target && e.target.click) {
-        e.target.click();
+      if (onItemFocus && thisRef) {
+        onItemFocus(thisRef);
       }
+    };
+
+    $[26] = onFocus;
+    $[27] = onItemFocus;
+    $[28] = thisRef;
+    $[29] = t7;
+  } else {
+    t7 = $[29];
+  }
+
+  const handleFocus = t7;
+  let t8;
+
+  if ($[30] !== onItemMouseEnter || $[31] !== onMouseEnter || $[32] !== thisRef) {
+    t8 = e_1 => {
+      onMouseEnter?.(e_1);
+
+      if (onItemMouseEnter && thisRef) {
+        onItemMouseEnter(thisRef);
+      }
+    };
+
+    $[30] = onItemMouseEnter;
+    $[31] = onMouseEnter;
+    $[32] = thisRef;
+    $[33] = t8;
+  } else {
+    t8 = $[33];
+  }
+
+  const handleMouseEnter = t8;
+  let hoverIconWillReplace = "none";
+
+  if (hasHoverIcon && iconElement && actualIconPlacement === "right") {
+    hoverIconWillReplace = "custom";
+  } else {
+    if (hasHoverIcon && selected) {
+      hoverIconWillReplace = "selected";
     }
-  };
-
-  const Wrapper = wrapWithLi ? 'li' : 'div';
-  return /*#__PURE__*/React.createElement(Wrapper, {
-    className: cn(styles.wrapper, className, ICON_PLACEMENT_STYLES[actualIconPlacement], MODE_STYLES[actualMode], SIZE_STYLES[actualSize], THEME_STYLES[actualTheme]),
-    "data-test": 'menu-item__wrapper',
-    "data-rs-internal": 'menu__menu-item'
-  }, /*#__PURE__*/React.createElement(Tag, {
-    onKeyDown: handleKeyDown,
-    ref: handleRef,
-    className: cn(styles.menuItem, (menuContext.disabled || disabled) && styles.disabled, selected && styles.selected, actualHighlighted && styles.highlighted, actualDisableCursor && styles.disableCursor),
-    "data-test": 'menu-item',
-    "data-rs-internal": 'menu__menu-item__inner',
-    tabIndex: 0,
-    ...restProps
-  }, iconElement, /*#__PURE__*/React.createElement("span", {
-    className: styles.content
-  }, children)));
+  }
+
+  const Wrapper = wrapWithLi ? "li" : "div";
+  const t9 = ICON_PLACEMENT_STYLES[actualIconPlacement];
+  const t10 = MODE_STYLES[actualMode];
+  const t11 = SIZE_STYLES[actualSize];
+  const t12 = THEME_STYLES[actualTheme];
+  let t13;
+
+  if ($[34] !== className || $[35] !== t10 || $[36] !== t11 || $[37] !== t12 || $[38] !== t9) {
+    t13 = cn(styles.wrapper, className, t9, t10, t11, t12);
+    $[34] = className;
+    $[35] = t10;
+    $[36] = t11;
+    $[37] = t12;
+    $[38] = t9;
+    $[39] = t13;
+  } else {
+    t13 = $[39];
+  }
+
+  const t14 = "menu-item__wrapper";
+  const t15 = "menu__menu-item";
+  const t16 = keyboardNavigationEnabled ? "presentation" : undefined;
+  const t17 = cn(styles.menuItem, actualDisabled && styles.disabled, selected && styles.selected, HOVER_ICON_WILL_REPLACE_STYLES[hoverIconWillReplace]);
+  const t18 = restProps["data-test"] ?? "menu-item";
+  const t19 = "menu__menu-item__inner";
+  const t20 = role ?? (keyboardNavigationEnabled ? "option" : undefined);
+  const t21 = keyboardNavigationEnabled && selected !== undefined ? selected : restProps["aria-selected"];
+  const t22 = keyboardNavigationEnabled && actualDisabled ? true : restProps["aria-disabled"];
+  const t23 = styles;
+  let t24;
+
+  if ($[40] !== children) {
+    t24 = /*#__PURE__*/React.createElement("span", {
+      className: styles.content
+    }, children);
+    $[40] = children;
+    $[41] = t24;
+  } else {
+    t24 = $[41];
+  }
+
+  const t25 = selected && /*#__PURE__*/React.createElement(CheckOutlineIcon, {
+    className: cn(styles.icon, styles.selectedIcon, resizeIcons && styles.resizedIcon),
+    "data-test": "menu-item__selected-icon",
+    "data-render-all-sizes": true
+  });
+  const t26 = hasHoverIcon && /*#__PURE__*/React.cloneElement(hoverIcon, {
+    className: cn(hoverIcon.props.className, styles.icon, styles.hoverIcon, resizeIcons && styles.resizedIcon, hoverIconWillReplace !== "none" && styles.hoverIconNoReserve),
+    "data-render-all-sizes": true
+  });
+  let t27;
+
+  if ($[42] !== t23.contentWrapper || $[43] !== t24 || $[44] !== t25 || $[45] !== t26) {
+    t27 = /*#__PURE__*/React.createElement("span", {
+      className: t23.contentWrapper
+    }, t24, t25, t26);
+    $[42] = t23.contentWrapper;
+    $[43] = t24;
+    $[44] = t25;
+    $[45] = t26;
+    $[46] = t27;
+  } else {
+    t27 = $[46];
+  }
+
+  let t28;
+
+  if ($[47] !== Tag || $[48] !== handleFocus || $[49] !== handleKeyDown || $[50] !== handleMouseEnter || $[51] !== handleRef || $[52] !== iconElement || $[53] !== resolvedTabIndex || $[54] !== restProps || $[55] !== t17 || $[56] !== t18 || $[57] !== t20 || $[58] !== t21 || $[59] !== t22 || $[60] !== t27) {
+    t28 = /*#__PURE__*/React.createElement(Tag, _extends({}, restProps, {
+      onFocus: handleFocus,
+      onKeyDown: handleKeyDown,
+      onMouseEnter: handleMouseEnter,
+      ref: handleRef,
+      className: t17,
+      "data-test": t18,
+      "data-rs-internal": t19,
+      role: t20,
+      "aria-selected": t21,
+      "aria-disabled": t22,
+      tabIndex: resolvedTabIndex
+    }), iconElement, t27);
+    $[47] = Tag;
+    $[48] = handleFocus;
+    $[49] = handleKeyDown;
+    $[50] = handleMouseEnter;
+    $[51] = handleRef;
+    $[52] = iconElement;
+    $[53] = resolvedTabIndex;
+    $[54] = restProps;
+    $[55] = t17;
+    $[56] = t18;
+    $[57] = t20;
+    $[58] = t21;
+    $[59] = t22;
+    $[60] = t27;
+    $[61] = t28;
+  } else {
+    t28 = $[61];
+  }
+
+  let t29;
+
+  if ($[62] !== Wrapper || $[63] !== t13 || $[64] !== t16 || $[65] !== t28) {
+    t29 = /*#__PURE__*/React.createElement(Wrapper, {
+      className: t13,
+      "data-test": t14,
+      "data-rs-internal": t15,
+      role: t16
+    }, t28);
+    $[62] = Wrapper;
+    $[63] = t13;
+    $[64] = t16;
+    $[65] = t28;
+    $[66] = t29;
+  } else {
+    t29 = $[66];
+  }
+
+  return t29;
 };
 
 const MenuItem = /*#__PURE__*/React.forwardRef(MenuItemInner);
@@ -119,15 +400,11 @@ MenuItem.propTypes = {
   size: PropTypes.oneOf(['l', 'm', 's']),
   mode: PropTypes.oneOf(['clear', 'classic', 'rock']),
   theme: PropTypes.oneOf(['light', 'dark']),
-  onClick: PropTypes.func,
   disabled: PropTypes.bool,
-  disableCursor: PropTypes.bool,
   selected: PropTypes.bool,
-
-  /** @ignore */
-  highlighted: PropTypes.bool,
   icon: PropTypes.element,
   iconPlacement: PropTypes.oneOf(['left', 'right']),
-  tag: PropTypes.elementType
+  tag: PropTypes.elementType,
+  hoverIcon: PropTypes.element
 };
 export { MenuItem, MenuItem as default };

package/lib/parts/navigation-utils.d.ts

@@ -1,5 +1,5 @@
 export declare function getFirstItem(sortedItems: HTMLElement[]): HTMLElement;
 export declare function getLastItem(sortedItems: HTMLElement[]): HTMLElement;
-export declare function getNextItem(sortedItems: HTMLElement[], activeItem: HTMLElement): HTMLElement;
-export declare function getPrevItem(sortedItems: HTMLElement[], activeItem: HTMLElement): HTMLElement;
+export declare function getNextItem(sortedItems: HTMLElement[], activeItem?: HTMLElement): HTMLElement;
+export declare function getPrevItem(sortedItems: HTMLElement[], activeItem?: HTMLElement): HTMLElement;
 export declare function htmlElementsComparator(a: HTMLElement, b: HTMLElement): 0 | 1 | -1;