@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/menu.js

@@ -1,65 +1,404 @@
 "use client";
-import React from 'react';
+import _extends from '@babel/runtime-corejs3/helpers/esm/extends';
+import { c } from 'react-compiler-runtime';
+import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 import { MenuProvider } from './parts/menu-context.js';
 import styles from './menu.p.module.css.js';
 import { useMenuKeyboardNavigation } from './parts/use-menu-keyboard-navigation.js';
 
-const Menu = _ref => {
-  let {
-    tag = 'ul',
-    itemTag,
-    iconPlacement,
-    disabled,
-    size = 'm',
-    mode,
-    disableCursor = false,
-    theme,
-    enableKeyboardNavigation = false,
-    activateFirstItem = false,
-    className,
-    wrapItemsWithLi,
-    returnFocusOnUnmount = false,
-    resizeIcons = false,
-    ...restProps
-  } = _ref;
-  const Tag = tag;
+const MenuListbox = t0 => {
+  const $ = c(52);
+  let Tag;
+  let activateFirstItem;
+  let className;
+  let disabled;
+  let iconPlacement;
+  let itemTag;
+  let mode;
+  let onKeyDown;
+  let onMouseLeave;
+  let props;
+  let resizeIcons;
+  let role;
+  let size;
+  let tabIndex;
+  let theme;
+  let wrapItemsWithLi;
+
+  if ($[0] !== t0) {
+    ({
+      activateFirstItem,
+      tag: Tag,
+      itemTag,
+      iconPlacement,
+      disabled,
+      size,
+      mode,
+      theme,
+      className,
+      wrapItemsWithLi,
+      resizeIcons,
+      role,
+      onKeyDown,
+      onMouseLeave,
+      tabIndex,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = Tag;
+    $[2] = activateFirstItem;
+    $[3] = className;
+    $[4] = disabled;
+    $[5] = iconPlacement;
+    $[6] = itemTag;
+    $[7] = mode;
+    $[8] = onKeyDown;
+    $[9] = onMouseLeave;
+    $[10] = props;
+    $[11] = resizeIcons;
+    $[12] = role;
+    $[13] = size;
+    $[14] = tabIndex;
+    $[15] = theme;
+    $[16] = wrapItemsWithLi;
+  } else {
+    Tag = $[1];
+    activateFirstItem = $[2];
+    className = $[3];
+    disabled = $[4];
+    iconPlacement = $[5];
+    itemTag = $[6];
+    mode = $[7];
+    onKeyDown = $[8];
+    onMouseLeave = $[9];
+    props = $[10];
+    resizeIcons = $[11];
+    role = $[12];
+    size = $[13];
+    tabIndex = $[14];
+    theme = $[15];
+    wrapItemsWithLi = $[16];
+  }
+
+  const menuRef = useRef(null);
+  let t1;
+
+  if ($[17] !== activateFirstItem) {
+    t1 = {
+      activateFirstItem
+    };
+    $[17] = activateFirstItem;
+    $[18] = t1;
+  } else {
+    t1 = $[18];
+  }
+
   const {
-    activeItemRef,
+    currentActiveItemEl,
+    setCurrentActiveItemEl,
     registerItem,
     unregisterItem,
-    isKeyboardNavigating
-  } = useMenuKeyboardNavigation({
-    enableKeyboardNavigation,
-    activateFirstItem,
-    returnFocusOnUnmount
-  });
-  return /*#__PURE__*/React.createElement(MenuProvider, {
-    itemTag: itemTag,
-    iconPlacement: iconPlacement,
-    disabled: disabled,
-    size: size,
-    disableCursor: disableCursor || isKeyboardNavigating,
-    mode: mode,
-    theme: theme,
-    registerItem: registerItem,
-    unregisterItem: unregisterItem,
-    activeItemRef: activeItemRef.current,
-    isKeyboardNavigating: isKeyboardNavigating,
-    wrapWithLi: wrapItemsWithLi ?? tag === 'ul',
-    resizeIcons: resizeIcons
-  }, /*#__PURE__*/React.createElement(Tag, {
-    className: cn(!enableKeyboardNavigation && styles.keyboardNavigationDisabled, className),
-    ...restProps
-  }));
+    handleItemFocus,
+    handleItemKeyDown,
+    handleItemMouseEnter
+  } = useMenuKeyboardNavigation(t1);
+  let t2;
+
+  if ($[19] !== currentActiveItemEl || $[20] !== handleItemKeyDown || $[21] !== onKeyDown) {
+    t2 = e => {
+      onKeyDown?.(e);
+
+      if (e.defaultPrevented || e.target !== e.currentTarget) {
+        return;
+      }
+
+      handleItemKeyDown(e, currentActiveItemEl ?? undefined);
+    };
+
+    $[19] = currentActiveItemEl;
+    $[20] = handleItemKeyDown;
+    $[21] = onKeyDown;
+    $[22] = t2;
+  } else {
+    t2 = $[22];
+  }
+
+  const handleMenuKeyDown = t2;
+  let t3;
+
+  if ($[23] !== onMouseLeave || $[24] !== setCurrentActiveItemEl) {
+    t3 = e_0 => {
+      onMouseLeave?.(e_0);
+
+      if (e_0.defaultPrevented) {
+        return;
+      }
+
+      setCurrentActiveItemEl(null);
+      menuRef.current?.focus({
+        preventScroll: true
+      });
+    };
+
+    $[23] = onMouseLeave;
+    $[24] = setCurrentActiveItemEl;
+    $[25] = t3;
+  } else {
+    t3 = $[25];
+  }
+
+  const handleMenuMouseLeave = t3;
+  const t4 = wrapItemsWithLi ?? Tag === "ul";
+  let t5;
+
+  if ($[26] !== className) {
+    t5 = cn(styles.keyboardNavigationEnabled, styles.menu, className);
+    $[26] = className;
+    $[27] = t5;
+  } else {
+    t5 = $[27];
+  }
+
+  const t6 = role ?? "listbox";
+  const t7 = currentActiveItemEl ? -1 : tabIndex ?? 0;
+  let t8;
+
+  if ($[28] !== Tag || $[29] !== handleMenuKeyDown || $[30] !== handleMenuMouseLeave || $[31] !== props || $[32] !== t5 || $[33] !== t6 || $[34] !== t7) {
+    t8 = /*#__PURE__*/React.createElement(Tag, _extends({}, props, {
+      className: t5,
+      onKeyDown: handleMenuKeyDown,
+      onMouseLeave: handleMenuMouseLeave,
+      role: t6,
+      tabIndex: t7,
+      ref: menuRef
+    }));
+    $[28] = Tag;
+    $[29] = handleMenuKeyDown;
+    $[30] = handleMenuMouseLeave;
+    $[31] = props;
+    $[32] = t5;
+    $[33] = t6;
+    $[34] = t7;
+    $[35] = t8;
+  } else {
+    t8 = $[35];
+  }
+
+  let t9;
+
+  if ($[36] !== currentActiveItemEl || $[37] !== disabled || $[38] !== handleItemFocus || $[39] !== handleItemKeyDown || $[40] !== handleItemMouseEnter || $[41] !== iconPlacement || $[42] !== itemTag || $[43] !== mode || $[44] !== registerItem || $[45] !== resizeIcons || $[46] !== size || $[47] !== t4 || $[48] !== t8 || $[49] !== theme || $[50] !== unregisterItem) {
+    t9 = /*#__PURE__*/React.createElement(MenuProvider, {
+      itemTag: itemTag,
+      iconPlacement: iconPlacement,
+      disabled: disabled,
+      size: size,
+      mode: mode,
+      theme: theme,
+      wrapWithLi: t4,
+      resizeIcons: resizeIcons,
+      keyboardNavigationEnabled: true,
+      currentActiveItemEl: currentActiveItemEl,
+      registerItem: registerItem,
+      unregisterItem: unregisterItem,
+      onItemFocus: handleItemFocus,
+      onItemKeyDown: handleItemKeyDown,
+      onItemMouseEnter: handleItemMouseEnter
+    }, t8);
+    $[36] = currentActiveItemEl;
+    $[37] = disabled;
+    $[38] = handleItemFocus;
+    $[39] = handleItemKeyDown;
+    $[40] = handleItemMouseEnter;
+    $[41] = iconPlacement;
+    $[42] = itemTag;
+    $[43] = mode;
+    $[44] = registerItem;
+    $[45] = resizeIcons;
+    $[46] = size;
+    $[47] = t4;
+    $[48] = t8;
+    $[49] = theme;
+    $[50] = unregisterItem;
+    $[51] = t9;
+  } else {
+    t9 = $[51];
+  }
+
+  return t9;
+};
+
+const MenuRegular = t0 => {
+  const $ = c(28);
+  let Tag;
+  let className;
+  let disabled;
+  let iconPlacement;
+  let itemTag;
+  let mode;
+  let props;
+  let resizeIcons;
+  let size;
+  let theme;
+  let wrapItemsWithLi;
+
+  if ($[0] !== t0) {
+    ({
+      tag: Tag,
+      itemTag,
+      iconPlacement,
+      disabled,
+      size,
+      mode,
+      theme,
+      className,
+      wrapItemsWithLi,
+      resizeIcons,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = Tag;
+    $[2] = className;
+    $[3] = disabled;
+    $[4] = iconPlacement;
+    $[5] = itemTag;
+    $[6] = mode;
+    $[7] = props;
+    $[8] = resizeIcons;
+    $[9] = size;
+    $[10] = theme;
+    $[11] = wrapItemsWithLi;
+  } else {
+    Tag = $[1];
+    className = $[2];
+    disabled = $[3];
+    iconPlacement = $[4];
+    itemTag = $[5];
+    mode = $[6];
+    props = $[7];
+    resizeIcons = $[8];
+    size = $[9];
+    theme = $[10];
+    wrapItemsWithLi = $[11];
+  }
+
+  const t1 = wrapItemsWithLi ?? Tag === "ul";
+  let t2;
+
+  if ($[12] !== className) {
+    t2 = cn(styles.keyboardNavigationDisabled, styles.menu, className);
+    $[12] = className;
+    $[13] = t2;
+  } else {
+    t2 = $[13];
+  }
+
+  let t3;
+
+  if ($[14] !== Tag || $[15] !== props || $[16] !== t2) {
+    t3 = /*#__PURE__*/React.createElement(Tag, _extends({
+      className: t2
+    }, props));
+    $[14] = Tag;
+    $[15] = props;
+    $[16] = t2;
+    $[17] = t3;
+  } else {
+    t3 = $[17];
+  }
+
+  let t4;
+
+  if ($[18] !== disabled || $[19] !== iconPlacement || $[20] !== itemTag || $[21] !== mode || $[22] !== resizeIcons || $[23] !== size || $[24] !== t1 || $[25] !== t3 || $[26] !== theme) {
+    t4 = /*#__PURE__*/React.createElement(MenuProvider, {
+      itemTag: itemTag,
+      iconPlacement: iconPlacement,
+      disabled: disabled,
+      size: size,
+      mode: mode,
+      theme: theme,
+      wrapWithLi: t1,
+      resizeIcons: resizeIcons,
+      keyboardNavigationEnabled: false,
+      currentActiveItemEl: null,
+      registerItem: null,
+      unregisterItem: null,
+      onItemFocus: null,
+      onItemKeyDown: null,
+      onItemMouseEnter: null
+    }, t3);
+    $[18] = disabled;
+    $[19] = iconPlacement;
+    $[20] = itemTag;
+    $[21] = mode;
+    $[22] = resizeIcons;
+    $[23] = size;
+    $[24] = t1;
+    $[25] = t3;
+    $[26] = theme;
+    $[27] = t4;
+  } else {
+    t4 = $[27];
+  }
+
+  return t4;
+};
+
+const Menu = t0 => {
+  const $ = c(10);
+  let props;
+  let t1;
+  let t2;
+  let t3;
+
+  if ($[0] !== t0) {
+    ({
+      enableKeyboardNavigation: t1,
+      activateFirstItem: t2,
+      tag: t3,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = props;
+    $[2] = t1;
+    $[3] = t2;
+    $[4] = t3;
+  } else {
+    props = $[1];
+    t1 = $[2];
+    t2 = $[3];
+    t3 = $[4];
+  }
+
+  const enableKeyboardNavigation = t1 === undefined ? false : t1;
+  const activateFirstItem = t2 === undefined ? false : t2;
+  const tag = t3 === undefined ? "ul" : t3;
+  let t4;
+
+  if ($[5] !== activateFirstItem || $[6] !== enableKeyboardNavigation || $[7] !== props || $[8] !== tag) {
+    t4 = enableKeyboardNavigation ? /*#__PURE__*/React.createElement(MenuListbox, _extends({
+      activateFirstItem: activateFirstItem,
+      tag: tag
+    }, props)) : /*#__PURE__*/React.createElement(MenuRegular, _extends({
+      tag: tag
+    }, props));
+    $[5] = activateFirstItem;
+    $[6] = enableKeyboardNavigation;
+    $[7] = props;
+    $[8] = tag;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+
+  return t4;
 };
 
 Menu.propTypes = {
   size: PropTypes.oneOf(['l', 'm', 's']),
   mode: PropTypes.oneOf(['clear', 'classic', 'rock']),
   theme: PropTypes.oneOf(['light', 'dark']),
-  disableCursor: PropTypes.bool,
   disabled: PropTypes.bool,
   resizeIcons: PropTypes.bool,
   iconPlacement: PropTypes.oneOf(['left', 'right']),

package/lib/menu.p.module.css.js

@@ -1,30 +1,37 @@
 var styles = {
-  "themeLight": "_themeLight_1be69r7_8",
-  "themeDark": "_themeDark_1be69r7_11",
-  "sizeS": "_sizeS_1be69r7_15",
-  "sizeM": "_sizeM_1be69r7_18",
-  "sizeL": "_sizeL_1be69r7_21",
-  "modeClassic": "_modeClassic_1be69r7_25",
-  "modeRock": "_modeRock_1be69r7_28",
-  "modeClear": "_modeClear_1be69r7_31",
-  "iconPlacementLeft": "_iconPlacementLeft_1be69r7_35",
-  "iconPlacementRight": "_iconPlacementRight_1be69r7_39",
-  "wrapper": "_wrapper_1be69r7_43",
-  "menuItem": "_menuItem_1be69r7_50",
-  "keyboardNavigationDisabled": "_keyboardNavigationDisabled_1be69r7_85",
-  "selected": "_selected_1be69r7_99",
-  "highlighted": "_highlighted_1be69r7_106",
-  "disableCursor": "_disableCursor_1be69r7_107",
-  "disabled": "_disabled_1be69r7_120",
-  "content": "_content_1be69r7_131",
-  "icon": "_icon_1be69r7_35",
-  "resizedIcon": "_resizedIcon_1be69r7_141",
-  "divider": "_divider_1be69r7_149",
-  "groupHeaderThemeLight": "_groupHeaderThemeLight_1be69r7_163",
-  "groupHeaderThemeDark": "_groupHeaderThemeDark_1be69r7_166",
-  "groupHeaderSizeL": "_groupHeaderSizeL_1be69r7_170",
-  "groupHeaderSizeM": "_groupHeaderSizeM_1be69r7_173",
-  "groupHeaderSizeS": "_groupHeaderSizeS_1be69r7_176",
-  "groupHeader": "_groupHeader_1be69r7_163"
+  "themeLight": "_themeLight_wrwry9_8",
+  "themeDark": "_themeDark_wrwry9_11",
+  "menu": "_menu_wrwry9_15",
+  "sizeS": "_sizeS_wrwry9_21",
+  "sizeM": "_sizeM_wrwry9_24",
+  "sizeL": "_sizeL_wrwry9_27",
+  "modeClassic": "_modeClassic_wrwry9_31",
+  "modeRock": "_modeRock_wrwry9_34",
+  "modeClear": "_modeClear_wrwry9_37",
+  "iconPlacementLeft": "_iconPlacementLeft_wrwry9_41",
+  "iconPlacementRight": "_iconPlacementRight_wrwry9_45",
+  "wrapper": "_wrapper_wrwry9_49",
+  "hoverIcon": "_hoverIcon_wrwry9_53",
+  "hoverIconNoReserve": "_hoverIconNoReserve_wrwry9_56",
+  "menuItem": "_menuItem_wrwry9_61",
+  "keyboardNavigationDisabled": "_keyboardNavigationDisabled_wrwry9_98",
+  "selected": "_selected_wrwry9_112",
+  "keyboardNavigationEnabled": "_keyboardNavigationEnabled_wrwry9_119",
+  "hideCustomIconOnHover": "_hideCustomIconOnHover_wrwry9_130",
+  "customIcon": "_customIcon_wrwry9_132",
+  "hideSelectedIconOnHover": "_hideSelectedIconOnHover_wrwry9_137",
+  "selectedIcon": "_selectedIcon_wrwry9_139",
+  "disabled": "_disabled_wrwry9_144",
+  "contentWrapper": "_contentWrapper_wrwry9_151",
+  "content": "_content_wrwry9_151",
+  "icon": "_icon_wrwry9_41",
+  "resizedIcon": "_resizedIcon_wrwry9_169",
+  "divider": "_divider_wrwry9_177",
+  "groupHeaderThemeLight": "_groupHeaderThemeLight_wrwry9_191",
+  "groupHeaderThemeDark": "_groupHeaderThemeDark_wrwry9_194",
+  "groupHeaderSizeL": "_groupHeaderSizeL_wrwry9_198",
+  "groupHeaderSizeM": "_groupHeaderSizeM_wrwry9_201",
+  "groupHeaderSizeS": "_groupHeaderSizeS_wrwry9_204",
+  "groupHeader": "_groupHeader_wrwry9_191"
 };
 export { styles as default };

package/lib/parts/divider.d.ts

@@ -1,10 +1,7 @@
-import React, { HTMLAttributes } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { Theme } from '@rescui/ui-contexts';
-export interface DividerProps extends HTMLAttributes<HTMLHRElement> {
-    theme?: Theme;
-    className?: string;
-}
+import type { DividerProps } from '../types';
+export type { DividerProps } from '../types';
 declare const Divider: {
     ({ className, theme, ...restProps }: DividerProps): React.JSX.Element;
     propTypes: {

package/lib/parts/divider.js

@@ -1,4 +1,6 @@
 "use client";
+import _extends from '@babel/runtime-corejs3/helpers/esm/extends';
+import { c } from 'react-compiler-runtime';
 import React from 'react';
 import cn from 'classnames';
 import PropTypes from 'prop-types';
@@ -10,18 +12,59 @@ const THEME_CLASS = {
   dark: styles.themeDark
 };
 
-const Divider = _ref => {
-  let {
-    className,
-    theme,
-    ...restProps
-  } = _ref;
+const Divider = t0 => {
+  const $ = c(11);
+  let className;
+  let restProps;
+  let theme;
+
+  if ($[0] !== t0) {
+    ({
+      className,
+      theme,
+      ...restProps
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = restProps;
+    $[3] = theme;
+  } else {
+    className = $[1];
+    restProps = $[2];
+    theme = $[3];
+  }
+
   const menuContext = useMenuContext();
   const actualTheme = useThemeWithUndefined(menuContext.theme ?? theme);
-  return /*#__PURE__*/React.createElement("hr", {
-    className: cn(styles.divider, THEME_CLASS[actualTheme], className),
-    ...restProps
-  });
+  const t1 = THEME_CLASS[actualTheme];
+  let t2;
+
+  if ($[4] !== className || $[5] !== t1) {
+    t2 = cn(styles.divider, t1, className);
+    $[4] = className;
+    $[5] = t1;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+
+  const t3 = menuContext.keyboardNavigationEnabled ? "presentation" : undefined;
+  let t4;
+
+  if ($[7] !== restProps || $[8] !== t2 || $[9] !== t3) {
+    t4 = /*#__PURE__*/React.createElement("hr", _extends({
+      className: t2,
+      role: t3
+    }, restProps));
+    $[7] = restProps;
+    $[8] = t2;
+    $[9] = t3;
+    $[10] = t4;
+  } else {
+    t4 = $[10];
+  }
+
+  return t4;
 };
 
 Divider.propTypes = {

package/lib/parts/group-header.d.ts

@@ -1,13 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Theme } from '@rescui/ui-contexts';
-import { MenuItemSize } from './menu-context';
-export interface GroupHeaderProps {
-    theme?: Theme;
-    size?: MenuItemSize;
-    text?: React.ReactNode;
-    className?: string;
-}
+import type { GroupHeaderProps } from '../types';
+export type { GroupHeaderProps } from '../types';
 declare function GroupHeader({ className, text, size: propsSize, theme: propsTheme }: GroupHeaderProps): React.JSX.Element;
 declare namespace GroupHeader {
     var propTypes: {

package/lib/parts/group-header.js

@@ -1,4 +1,5 @@
 "use client";
+import { c } from 'react-compiler-runtime';
 import React from 'react';
 import cn from 'classnames';
 import PropTypes from 'prop-types';
@@ -15,20 +16,52 @@ const THEME_CLASS = {
   dark: styles.groupHeaderThemeDark
 };
 
-function GroupHeader(_ref) {
-  let {
-    className = null,
+function GroupHeader(t0) {
+  const $ = c(9);
+  const {
+    className: t1,
     text,
-    size: propsSize = 'm',
+    size: t2,
     theme: propsTheme
-  } = _ref;
+  } = t0;
+  const className = t1 === undefined ? null : t1;
+  const propsSize = t2 === undefined ? "m" : t2;
   const menuContext = useMenuContext();
-  const Tag = menuContext.wrapWithLi ? 'li' : 'span';
+  const Tag = menuContext.wrapWithLi ? "li" : "span";
   const actualTheme = useThemeWithUndefined(menuContext.theme ?? propsTheme);
-  return /*#__PURE__*/React.createElement(Tag, {
-    className: cn(styles.groupHeader, SIZE_CLASS[menuContext.size ?? propsSize], THEME_CLASS[actualTheme], className),
-    "data-rs-internal": 'menu__group-header'
-  }, text);
+  const t3 = SIZE_CLASS[menuContext.size ?? propsSize];
+  const t4 = THEME_CLASS[actualTheme];
+  let t5;
+
+  if ($[0] !== className || $[1] !== t3 || $[2] !== t4) {
+    t5 = cn(styles.groupHeader, t3, t4, className);
+    $[0] = className;
+    $[1] = t3;
+    $[2] = t4;
+    $[3] = t5;
+  } else {
+    t5 = $[3];
+  }
+
+  const t6 = menuContext.keyboardNavigationEnabled ? "presentation" : undefined;
+  let t7;
+
+  if ($[4] !== Tag || $[5] !== t5 || $[6] !== t6 || $[7] !== text) {
+    t7 = /*#__PURE__*/React.createElement(Tag, {
+      className: t5,
+      "data-rs-internal": "menu__group-header",
+      role: t6
+    }, text);
+    $[4] = Tag;
+    $[5] = t5;
+    $[6] = t6;
+    $[7] = text;
+    $[8] = t7;
+  } else {
+    t7 = $[8];
+  }
+
+  return t7;
 }
 
 GroupHeader.propTypes = {