@rescui/dropdown-menu 0.12.1 → 0.13.0

package/lib/dropdown-menu.js

@@ -1,4 +1,6 @@
 "use client";
+import _extends from '@babel/runtime-corejs3/helpers/esm/extends';
+import { c } from 'react-compiler-runtime';
 import React, { useState } from 'react';
 import { useThemeWithUndefined } from '@rescui/ui-contexts';
 import { Dropdown } from '@rescui/dropdown';
@@ -6,6 +8,7 @@ import { Menu } from '@rescui/menu';
 import cn from 'classnames';
 import { MenuWrapper } from './menu-wrapper.js';
 import styles from './dropdown-menu.p.module.css.js';
+import { useExtractCssValues } from './use-extract-css-values.js';
 const ITEM_HEIGHT_BY_SIZE = {
   s: 32,
   m: 40,
@@ -17,80 +20,195 @@ const SIZE_TO_CLASS = {
   l: styles.sizeL
 };
 
-const DropdownMenu = _ref => {
-  let {
-    maxVisibleItems = 5,
-    size = 'm',
-    children,
-    iconPlacement,
-    itemTag,
-    tag,
-    theme: themeFromProps,
-    mode = 'classic',
-    activateFirstItemOnOpen = false,
-    resizeIcons = true,
-    wrapItemsWithLi,
-    className,
-    ...restProps
-  } = _ref;
+const DropdownMenu = t0 => {
+  const $ = c(43);
+  let children;
+  let className;
+  let iconPlacement;
+  let itemTag;
+  let restProps;
+  let t1;
+  let t2;
+  let t3;
+  let t4;
+  let t5;
+  let tag;
+  let themeFromProps;
+  let wrapItemsWithLi;
+
+  if ($[0] !== t0) {
+    ({
+      maxVisibleItems: t1,
+      size: t2,
+      children,
+      iconPlacement,
+      itemTag,
+      tag,
+      theme: themeFromProps,
+      mode: t3,
+      activateFirstItemOnOpen: t4,
+      resizeIcons: t5,
+      wrapItemsWithLi,
+      className,
+      ...restProps
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = iconPlacement;
+    $[4] = itemTag;
+    $[5] = restProps;
+    $[6] = t1;
+    $[7] = t2;
+    $[8] = t3;
+    $[9] = t4;
+    $[10] = t5;
+    $[11] = tag;
+    $[12] = themeFromProps;
+    $[13] = wrapItemsWithLi;
+  } else {
+    children = $[1];
+    className = $[2];
+    iconPlacement = $[3];
+    itemTag = $[4];
+    restProps = $[5];
+    t1 = $[6];
+    t2 = $[7];
+    t3 = $[8];
+    t4 = $[9];
+    t5 = $[10];
+    tag = $[11];
+    themeFromProps = $[12];
+    wrapItemsWithLi = $[13];
+  }
+
+  const maxVisibleItems = t1 === undefined ? 5 : t1;
+  const size = t2 === undefined ? "m" : t2;
+  const mode = t3 === undefined ? "classic" : t3;
+  const activateFirstItemOnOpen = t4 === undefined ? false : t4;
+  const resizeIcons = t5 === undefined ? true : t5;
   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.
-    // But in this specific context, because of checking state ref "menuWrapperEl",
-    // we are sure that the value will still be "null" on the first render.
-    // Therefore, the first render on the client will be the same as on the server.
-    // Also, there will be no layout shifts on the following renders because
-    // 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 {
+    itemHeightFromCss,
+    contrastPrimaryFromCss
+  } = useExtractCssValues(menuWrapperEl);
+  const itemHeight = itemHeightFromCss || ITEM_HEIGHT_BY_SIZE[size];
+  const isMoreThanPlusOne = height > (Math.ceil(maxVisibleItems) + 1.1) * itemHeight;
+  const maxHeight = (Math.ceil(maxVisibleItems) + (isMoreThanPlusOne ? 0.5 : 1.5)) * itemHeight;
+  let cleanedRestProps;
+
+  if ($[14] !== restProps) {
+    const {
+      maxHeight: cleanMaxHeight,
+      leastMaxHeight,
+      ...t6
+    } = restProps;
+    cleanedRestProps = t6;
+    $[14] = restProps;
+    $[15] = cleanedRestProps;
+  } else {
+    cleanedRestProps = $[15];
   }
 
-  const itemHeight = itemHeightFromCss || ITEM_HEIGHT_BY_SIZE[size]; // a little buffer of 10% here
+  const theme = useThemeWithUndefined(themeFromProps);
+  const t6 = SIZE_TO_CLASS[size];
+  let t7;
 
-  const isMoreThanPlusOne = height > (Math.ceil(maxVisibleItems) + 1.1) * itemHeight; // half of item added to show that there is more items even if scroll bar hidden
-  // in case there are only 1 more item than maxVisibleItems, show it without truncating
+  if ($[16] !== className || $[17] !== t6) {
+    t7 = cn(t6, styles.dropdownMenu, className);
+    $[16] = className;
+    $[17] = t6;
+    $[18] = t7;
+  } else {
+    t7 = $[18];
+  }
 
-  const maxHeight = (Math.ceil(maxVisibleItems) + (isMoreThanPlusOne ? 0.5 : 1.5)) * itemHeight;
-  const {
-    maxHeight: cleanMaxHeight,
-    leastMaxHeight,
-    ...cleanedRestProps
-  } = restProps; // cast to make runtime omit
+  const t8 = mode === "rock" ? "rock" : "classic";
+  let t9;
 
-  const theme = useThemeWithUndefined(themeFromProps);
-  return /*#__PURE__*/React.createElement(Dropdown, { ...cleanedRestProps,
-    closeOnTab: true,
-    mode: mode,
-    theme: theme,
-    leastMaxHeight: itemHeight,
-    maxHeight: maxHeight,
-    className: cn(SIZE_TO_CLASS[size], styles.dropdownMenu, className)
-  }, /*#__PURE__*/React.createElement(MenuWrapper, {
-    el: menuWrapperEl,
-    setEl: setMenuWrapperEl,
-    onHeightUpdate: setHeight
-  }, /*#__PURE__*/React.createElement(Menu, {
-    size: size,
-    iconPlacement: iconPlacement,
-    itemTag: itemTag,
-    tag: tag,
-    mode: mode === 'rock' ? 'rock' : 'classic',
-    "data-test": "dropdown-menu",
-    "data-rs-internal": 'dropdown-menu__menu',
-    className: styles.menu,
-    style: {
-      '--rs-menu-contrast-primary': contrastPrimaryFromCss
-    },
-    enableKeyboardNavigation: true,
-    activateFirstItem: activateFirstItemOnOpen,
-    wrapItemsWithLi: wrapItemsWithLi,
-    resizeIcons: resizeIcons
-  }, children)));
+  if ($[19] !== contrastPrimaryFromCss) {
+    t9 = {
+      "--rs-menu-contrast-primary": contrastPrimaryFromCss
+    };
+    $[19] = contrastPrimaryFromCss;
+    $[20] = t9;
+  } else {
+    t9 = $[20];
+  }
+
+  let t10;
+
+  if ($[21] !== activateFirstItemOnOpen || $[22] !== children || $[23] !== iconPlacement || $[24] !== itemTag || $[25] !== resizeIcons || $[26] !== size || $[27] !== t8 || $[28] !== t9 || $[29] !== tag || $[30] !== wrapItemsWithLi) {
+    t10 = /*#__PURE__*/React.createElement(Menu, {
+      size: size,
+      iconPlacement: iconPlacement,
+      itemTag: itemTag,
+      tag: tag,
+      mode: t8,
+      "data-test": "dropdown-menu",
+      "data-rs-internal": "dropdown-menu__menu",
+      className: styles.menu,
+      style: t9,
+      enableKeyboardNavigation: true,
+      activateFirstItem: activateFirstItemOnOpen,
+      wrapItemsWithLi: wrapItemsWithLi,
+      resizeIcons: resizeIcons
+    }, children);
+    $[21] = activateFirstItemOnOpen;
+    $[22] = children;
+    $[23] = iconPlacement;
+    $[24] = itemTag;
+    $[25] = resizeIcons;
+    $[26] = size;
+    $[27] = t8;
+    $[28] = t9;
+    $[29] = tag;
+    $[30] = wrapItemsWithLi;
+    $[31] = t10;
+  } else {
+    t10 = $[31];
+  }
+
+  let t11;
+
+  if ($[32] !== menuWrapperEl || $[33] !== t10) {
+    t11 = /*#__PURE__*/React.createElement(MenuWrapper, {
+      el: menuWrapperEl,
+      setEl: setMenuWrapperEl,
+      onHeightUpdate: setHeight
+    }, t10);
+    $[32] = menuWrapperEl;
+    $[33] = t10;
+    $[34] = t11;
+  } else {
+    t11 = $[34];
+  }
+
+  let t12;
+
+  if ($[35] !== cleanedRestProps || $[36] !== itemHeight || $[37] !== maxHeight || $[38] !== mode || $[39] !== t11 || $[40] !== t7 || $[41] !== theme) {
+    t12 = /*#__PURE__*/React.createElement(Dropdown, _extends({}, cleanedRestProps, {
+      closeOnTab: true,
+      mode: mode,
+      theme: theme,
+      leastMaxHeight: itemHeight,
+      maxHeight: maxHeight,
+      className: t7
+    }), t11);
+    $[35] = cleanedRestProps;
+    $[36] = itemHeight;
+    $[37] = maxHeight;
+    $[38] = mode;
+    $[39] = t11;
+    $[40] = t7;
+    $[41] = theme;
+    $[42] = t12;
+  } else {
+    t12 = $[42];
+  }
+
+  return t12;
 };
 
 export { DropdownMenu, DropdownMenu as default };

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

@@ -1,8 +1,8 @@
 var styles = {
-  "sizeS": "_sizeS_17ghxyl_8",
-  "sizeM": "_sizeM_17ghxyl_11",
-  "sizeL": "_sizeL_17ghxyl_14",
-  "dropdownMenu": "_dropdownMenu_17ghxyl_18",
-  "menu": "_menu_17ghxyl_23"
+  "sizeS": "_sizeS_n0urep_8",
+  "sizeM": "_sizeM_n0urep_11",
+  "sizeL": "_sizeL_n0urep_14",
+  "dropdownMenu": "_dropdownMenu_n0urep_18",
+  "menu": "_menu_n0urep_23"
 };
 export { styles as default };

package/lib/index.css

@@ -1,29 +1,29 @@
-._sizeS_17ghxyl_8{
+._sizeS_n0urep_8{
   --_rs-dropdown-menu-min-width:316px;
   --_rs-dropdown-menu-max-width:389px;
 }
-._sizeS_17ghxyl_8 [data-rs-internal='dropdown-menu__menu-wrapper']{
+._sizeS_n0urep_8 [data-rs-internal='dropdown-menu__menu-wrapper']{
     --_rs-dropdown-menu-item-height:32px;
   }
-._sizeM_17ghxyl_11{
+._sizeM_n0urep_11{
   --_rs-dropdown-menu-min-width:316px;
   --_rs-dropdown-menu-max-width:494px;
 }
-._sizeM_17ghxyl_11 [data-rs-internal='dropdown-menu__menu-wrapper']{
+._sizeM_n0urep_11 [data-rs-internal='dropdown-menu__menu-wrapper']{
     --_rs-dropdown-menu-item-height:40px;
   }
-._sizeL_17ghxyl_14{
+._sizeL_n0urep_14{
   --_rs-dropdown-menu-min-width:316px;
   --_rs-dropdown-menu-max-width:494px;
 }
-._sizeL_17ghxyl_14 [data-rs-internal='dropdown-menu__menu-wrapper']{
+._sizeL_n0urep_14 [data-rs-internal='dropdown-menu__menu-wrapper']{
     --_rs-dropdown-menu-item-height:52px;
   }
-._dropdownMenu_17ghxyl_18{
+._dropdownMenu_n0urep_18{
   min-width:var(--_rs-dropdown-menu-min-width);
   max-width:var(--_rs-dropdown-menu-max-width);
 }
-._menu_17ghxyl_23{
+._menu_n0urep_23{
   margin:0;
   padding:0;
 

package/lib/menu-wrapper.js

@@ -1,18 +1,42 @@
+import { c } from 'react-compiler-runtime';
 import React from 'react';
 import { useResizeObserver } from '@rescui/use-resize-observer';
 
-const MenuWrapper = _ref => {
-  let {
+const MenuWrapper = t0 => {
+  const $ = c(5);
+  const {
     children,
     onHeightUpdate,
     setEl,
     el
-  } = _ref;
-  useResizeObserver(el, entry => onHeightUpdate(entry.target.offsetHeight));
-  return /*#__PURE__*/React.createElement("div", {
-    ref: setEl,
-    "data-rs-internal": 'dropdown-menu__menu-wrapper'
-  }, children);
+  } = t0;
+  let t1;
+
+  if ($[0] !== onHeightUpdate) {
+    t1 = entry => onHeightUpdate(entry.target.offsetHeight);
+
+    $[0] = onHeightUpdate;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+
+  useResizeObserver(el, t1);
+  let t2;
+
+  if ($[2] !== children || $[3] !== setEl) {
+    t2 = /*#__PURE__*/React.createElement("div", {
+      ref: setEl,
+      "data-rs-internal": "dropdown-menu__menu-wrapper"
+    }, children);
+    $[2] = children;
+    $[3] = setEl;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+
+  return t2;
 };
 
 MenuWrapper.displayName = 'MenuWrapper';

package/lib/use-extract-css-values.d.ts

@@ -0,0 +1,6 @@
+type CssValues = {
+    itemHeightFromCss: number | null;
+    contrastPrimaryFromCss: number | null;
+};
+export declare const useExtractCssValues: (menuWrapperEl: HTMLDivElement | null) => CssValues;
+export {};

package/lib/use-extract-css-values.js

@@ -0,0 +1,51 @@
+import { c } from 'react-compiler-runtime';
+import { useState, useEffect, useLayoutEffect } from 'react';
+const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
+
+const useExtractCssValues = menuWrapperEl => {
+  const $ = c(4);
+  let t0;
+
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = {
+      itemHeightFromCss: null,
+      contrastPrimaryFromCss: null
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+
+  const [cssValues, setCssValues] = useState(t0);
+  let t1;
+  let t2;
+
+  if ($[1] !== menuWrapperEl) {
+    t1 = () => {
+      const menuWrapperStyles = menuWrapperEl?.ownerDocument?.defaultView?.getComputedStyle(menuWrapperEl);
+
+      if (!menuWrapperStyles) {
+        return;
+      }
+
+      const nextCssValues = {
+        itemHeightFromCss: parseInt(menuWrapperStyles.getPropertyValue("--_rs-dropdown-menu-item-height"), 10) || null,
+        contrastPrimaryFromCss: parseInt(menuWrapperStyles.getPropertyValue("--rs-dropdown-menu-contrast-primary"), 10) || null
+      };
+      setCssValues(previousCssValues => previousCssValues.itemHeightFromCss === nextCssValues.itemHeightFromCss && previousCssValues.contrastPrimaryFromCss === nextCssValues.contrastPrimaryFromCss ? previousCssValues : nextCssValues);
+    };
+
+    t2 = [menuWrapperEl];
+    $[1] = menuWrapperEl;
+    $[2] = t1;
+    $[3] = t2;
+  } else {
+    t1 = $[2];
+    t2 = $[3];
+  }
+
+  useIsomorphicLayoutEffect(t1, t2);
+  return cssValues;
+};
+
+export { useExtractCssValues };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/dropdown-menu",
-  "version": "0.12.1",
+  "version": "0.13.0",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -17,21 +17,22 @@
   },
   "dependencies": {
     "@babel/runtime-corejs3": "^7.26.0",
-    "@rescui/dropdown": "^0.11.2",
-    "@rescui/menu": "^0.14.1",
-    "@rescui/use-resize-observer": "^0.3.4",
-    "classnames": "^2.2.6"
+    "@rescui/dropdown": "^0.12.0",
+    "@rescui/menu": "^0.15.0",
+    "@rescui/use-resize-observer": "^0.4.0",
+    "classnames": "^2.2.6",
+    "react-compiler-runtime": "^1.0.0"
   },
   "peerDependencies": {
     "@rescui/ui-contexts": "^0.6.0",
     "prop-types": "^15",
-    "react": ">=16.8.0 <20"
+    "react": ">=17.0.0 <20"
   },
   "devDependencies": {
-    "@rescui/colors": "^0.3.3",
-    "@rescui/icons": "^1.8.4",
-    "@rescui/scripts": "^0.5.2",
-    "@rescui/typography": "^0.27.4",
+    "@rescui/colors": "^0.3.4",
+    "@rescui/icons": "^1.9.0",
+    "@rescui/scripts": "^0.5.3",
+    "@rescui/typography": "^0.28.0",
     "@rescui/visual-regression": "^0.1.4"
   },
   "scripts": {
@@ -39,5 +40,5 @@
     "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
   },
   "nx": {},
-  "gitHead": "3711cbfc0c797014395421b008aa5331d6d47c6e"
+  "gitHead": "8ffbbe20b8bcbb9ea15204113ab603675d4c03cd"
 }