@rescui/dropdown 0.11.2 → 0.12.0

package/lib/dropdown.js

@@ -1,5 +1,7 @@
 "use client";
-import React, { useState, useRef, useMemo, useImperativeHandle, useContext, useCallback, useEffect } from 'react';
+import _extends from '@babel/runtime-corejs3/helpers/esm/extends';
+import { c } from 'react-compiler-runtime';
+import React, { useState, useRef, useImperativeHandle, useContext, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 import { usePopper } from 'react-popper';
@@ -11,7 +13,7 @@ import { useDropdownState, DROPDOWN_STATES } from './use-dropdown-state.js';
 import { useScrollableContainer } from './use-scrollable-container.js';
 import styles from './dropdown.p.module.css.js';
 import { applyMaxSize, sameWidthModifier } from './custom-modifiers.js';
-import { extractThemeFromCss, extractPrimaryColors } from './css-vars-utils.js';
+import { useExtractCssValues } from './use-extract-css-values.js';
 
 function getPopperOptions(_ref) {
   let {
@@ -58,57 +60,126 @@ const Portal = _ref2 => {
   return target ? /*#__PURE__*/ReactDOM.createPortal(children, target) : null;
 };
 
-function useOnOutsideClick(_ref3) {
-  let {
+function useOnOutsideClick(t0) {
+  const $ = c(13);
+  const {
     onOutsideClick,
     isEnabled,
-    ignoreElements = [],
+    ignoreElements: t1,
     ownerDocument
-  } = _ref3;
-  const ignoreElementRefsExists = ignoreElements.length > 0 && ignoreElements.every(Boolean);
-  const handleDocumentClick = useCallback(e => {
-    for (const element of ignoreElements) {
-      if (!element || e.target === element || element.contains(e.target)) {
-        return;
+  } = t0;
+  let t2;
+
+  if ($[0] !== t1) {
+    t2 = t1 === undefined ? [] : t1;
+    $[0] = t1;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+
+  const ignoreElements = t2;
+  let t3;
+
+  if ($[2] !== ignoreElements) {
+    t3 = ignoreElements.length > 0 && ignoreElements.every(Boolean);
+    $[2] = ignoreElements;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+
+  const ignoreElementRefsExists = t3;
+  let t4;
+
+  if ($[4] !== ignoreElements || $[5] !== onOutsideClick) {
+    t4 = e => {
+      for (const element of ignoreElements) {
+        if (!element || e.target === element || element.contains(e.target)) {
+          return;
+        }
+      }
+
+      onOutsideClick();
+    };
+
+    $[4] = ignoreElements;
+    $[5] = onOutsideClick;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+
+  const handleDocumentClick = t4;
+  let t5;
+  let t6;
+
+  if ($[7] !== handleDocumentClick || $[8] !== ignoreElementRefsExists || $[9] !== isEnabled || $[10] !== ownerDocument) {
+    t5 = () => {
+      if (isEnabled && ignoreElementRefsExists && ownerDocument) {
+        ownerDocument.addEventListener("click", handleDocumentClick, true);
+        return () => ownerDocument.removeEventListener("click", handleDocumentClick, true);
       }
-    }
+    };
 
-    onOutsideClick();
-  }, [onOutsideClick, ignoreElements]); // eslint-disable-next-line consistent-return
+    t6 = [handleDocumentClick, ignoreElementRefsExists, isEnabled, ownerDocument];
+    $[7] = handleDocumentClick;
+    $[8] = ignoreElementRefsExists;
+    $[9] = isEnabled;
+    $[10] = ownerDocument;
+    $[11] = t5;
+    $[12] = t6;
+  } else {
+    t5 = $[11];
+    t6 = $[12];
+  }
 
-  useEffect(() => {
-    if (isEnabled && ignoreElementRefsExists && ownerDocument) {
-      ownerDocument.addEventListener('click', handleDocumentClick, true);
-      return () => ownerDocument.removeEventListener('click', handleDocumentClick, true);
-    }
-  }, [handleDocumentClick, ignoreElementRefsExists, isEnabled, ownerDocument]);
+  useEffect(t5, t6);
 }
 
-function useKeyPress(_ref4) {
-  let {
+function useKeyPress(t0) {
+  const $ = c(6);
+  const {
     key,
     onKeyPress,
     isEnabled,
     ownerDocument
-  } = _ref4;
-  useEffect(() => {
-    if (!isEnabled || !ownerDocument) {
-      return;
-    }
-
-    const keyDownHandler = e => {
-      if (e.key === key) {
-        e.preventDefault();
-        onKeyPress();
+  } = t0;
+  let t1;
+  let t2;
+
+  if ($[0] !== isEnabled || $[1] !== key || $[2] !== onKeyPress || $[3] !== ownerDocument) {
+    t1 = () => {
+      if (!isEnabled || !ownerDocument) {
+        return;
       }
-    };
 
-    ownerDocument.addEventListener('keydown', keyDownHandler, true); // eslint-disable-next-line consistent-return
+      const keyDownHandler = e => {
+        if (e.key === key) {
+          e.preventDefault();
+          onKeyPress();
+        }
+      };
 
-    return () => {
-      ownerDocument.removeEventListener('keydown', keyDownHandler, true);
+      ownerDocument.addEventListener("keydown", keyDownHandler, true);
+      return () => {
+        ownerDocument.removeEventListener("keydown", keyDownHandler, true);
+      };
     };
-  }, [isEnabled, key, onKeyPress, ownerDocument]);
+
+    t2 = [isEnabled, key, onKeyPress, ownerDocument];
+    $[0] = isEnabled;
+    $[1] = key;
+    $[2] = onKeyPress;
+    $[3] = ownerDocument;
+    $[4] = t1;
+    $[5] = t2;
+  } else {
+    t1 = $[4];
+    t2 = $[5];
+  }
+
+  useEffect(t1, t2);
 }
 
 const THEME_STYLES = {
@@ -120,152 +191,298 @@ const MODE_STYLES = {
   rock: styles.modeRock
 };
 
-const DropdownRender = (_ref5, externalRef) => {
-  let {
+const DropdownRender = (t0, externalRef) => {
+  const $ = c(60);
+  const {
     children,
     trigger,
     theme: themeFromProps,
-    isOpen: isOpenFromProps = false,
-    placement = 'bottom-start',
-    mode = 'classic',
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    onRequestClose = () => {},
+    isOpen: t1,
+    placement: t2,
+    mode: t3,
+    onRequestClose: t4,
     minWidth,
     maxWidth,
     maxHeight,
     leastMaxHeight,
-    cancelCloseAnimation = false,
+    cancelCloseAnimation: t5,
     className,
-    closeOnEsc = true,
-    closeOnTab = false,
-    disableFocusLock = false,
-    renderInTrigger = false,
-    disableFlip = false
-  } = _ref5;
+    closeOnEsc: t6,
+    closeOnTab: t7,
+    disableFocusLock: t8,
+    renderInTrigger: t9,
+    disableFlip: t10
+  } = t0;
+  const isOpenFromProps = t1 === undefined ? false : t1;
+  const placement = t2 === undefined ? "bottom-start" : t2;
+  const mode = t3 === undefined ? "classic" : t3;
+  const onRequestClose = t4 === undefined ? _temp : t4;
+  const cancelCloseAnimation = t5 === undefined ? false : t5;
+  const closeOnEsc = t6 === undefined ? true : t6;
+  const closeOnTab = t7 === undefined ? false : t7;
+  const disableFocusLock = t8 === undefined ? false : t8;
+  const renderInTrigger = t9 === undefined ? false : t9;
+  const disableFlip = t10 === undefined ? false : t10;
   const [popperRef, setPopperRef] = useState(null);
   const [triggerRef, setTriggerRef] = useState(undefined);
   const {
     setContentEl,
     scrollableStyles
   } = useScrollableContainer();
-  const scrollableRef = useRef(null); // An undefined ref means that React has not committed the trigger yet. It keeps
-  // the server and first client render equal without an extra hydration state.
-
-  const isOpen = typeof triggerRef !== 'undefined' || renderInTrigger ? isOpenFromProps : false;
+  const scrollableRef = useRef(null);
+  const isOpen = typeof triggerRef !== "undefined" || renderInTrigger ? isOpenFromProps : false;
   const ownerDocument = triggerRef?.ownerDocument;
-  const outsideClickIgnoreElements = useMemo(() => [popperRef, triggerRef], [popperRef, triggerRef]);
-  useOnOutsideClick({
-    isEnabled: isOpen,
-    onOutsideClick: onRequestClose,
-    ignoreElements: outsideClickIgnoreElements,
-    ownerDocument
-  });
-  useKeyPress({
-    key: 'Escape',
-    isEnabled: isOpen && closeOnEsc,
-    onKeyPress: onRequestClose,
-    ownerDocument
-  });
-  useKeyPress({
-    key: 'Tab',
-    isEnabled: isOpen && closeOnTab,
-    onKeyPress: onRequestClose,
-    ownerDocument
-  });
+  let t11;
+
+  if ($[0] !== popperRef || $[1] !== triggerRef) {
+    t11 = [popperRef, triggerRef];
+    $[0] = popperRef;
+    $[1] = triggerRef;
+    $[2] = t11;
+  } else {
+    t11 = $[2];
+  }
+
+  const outsideClickIgnoreElements = t11;
+  let t12;
+
+  if ($[3] !== isOpen || $[4] !== onRequestClose || $[5] !== outsideClickIgnoreElements || $[6] !== ownerDocument) {
+    t12 = {
+      isEnabled: isOpen,
+      onOutsideClick: onRequestClose,
+      ignoreElements: outsideClickIgnoreElements,
+      ownerDocument
+    };
+    $[3] = isOpen;
+    $[4] = onRequestClose;
+    $[5] = outsideClickIgnoreElements;
+    $[6] = ownerDocument;
+    $[7] = t12;
+  } else {
+    t12 = $[7];
+  }
+
+  useOnOutsideClick(t12);
+  const t13 = isOpen && closeOnEsc;
+  let t14;
+
+  if ($[8] !== onRequestClose || $[9] !== ownerDocument || $[10] !== t13) {
+    t14 = {
+      key: "Escape",
+      isEnabled: t13,
+      onKeyPress: onRequestClose,
+      ownerDocument
+    };
+    $[8] = onRequestClose;
+    $[9] = ownerDocument;
+    $[10] = t13;
+    $[11] = t14;
+  } else {
+    t14 = $[11];
+  }
+
+  useKeyPress(t14);
+  const t15 = isOpen && closeOnTab;
+  let t16;
+
+  if ($[12] !== onRequestClose || $[13] !== ownerDocument || $[14] !== t15) {
+    t16 = {
+      key: "Tab",
+      isEnabled: t15,
+      onKeyPress: onRequestClose,
+      ownerDocument
+    };
+    $[12] = onRequestClose;
+    $[13] = ownerDocument;
+    $[14] = t15;
+    $[15] = t16;
+  } else {
+    t16 = $[15];
+  }
+
+  useKeyPress(t16);
+  let t17;
+
+  if ($[16] !== disableFlip || $[17] !== leastMaxHeight || $[18] !== maxHeight || $[19] !== maxWidth || $[20] !== minWidth || $[21] !== placement) {
+    t17 = getPopperOptions({
+      placement,
+      maxHeight,
+      leastMaxHeight,
+      minWidth,
+      maxWidth,
+      disableFlip
+    });
+    $[16] = disableFlip;
+    $[17] = leastMaxHeight;
+    $[18] = maxHeight;
+    $[19] = maxWidth;
+    $[20] = minWidth;
+    $[21] = placement;
+    $[22] = t17;
+  } else {
+    t17 = $[22];
+  }
+
   const {
     styles: popperStyles,
     attributes,
     update
-  } = usePopper(triggerRef ?? null, popperRef, getPopperOptions({
-    placement,
-    maxHeight,
-    leastMaxHeight,
-    minWidth,
-    maxWidth,
-    disableFlip
-  }));
-  const resolvedPlacement = attributes.popper?.['data-popper-placement'] ?? null;
-  const dropdownState = useDropdownState({
-    isOpen,
-    cancelCloseAnimation,
-    contentRef: scrollableRef,
-    popperElement: popperRef,
-    resolvedPlacement
-  });
-  useImperativeHandle(externalRef, () => ({
-    scheduleUpdate: () => {
-      update?.();
-    }
-  }));
+  } = usePopper(triggerRef ?? null, popperRef, t17);
+  const resolvedPlacement = attributes.popper?.["data-popper-placement"] ?? null;
+  let t18;
+
+  if ($[23] !== cancelCloseAnimation || $[24] !== isOpen || $[25] !== popperRef || $[26] !== resolvedPlacement) {
+    t18 = {
+      isOpen,
+      cancelCloseAnimation,
+      contentRef: scrollableRef,
+      popperElement: popperRef,
+      resolvedPlacement
+    };
+    $[23] = cancelCloseAnimation;
+    $[24] = isOpen;
+    $[25] = popperRef;
+    $[26] = resolvedPlacement;
+    $[27] = t18;
+  } else {
+    t18 = $[27];
+  }
+
+  const dropdownState = useDropdownState(t18);
+  let t19;
+
+  if ($[28] !== update) {
+    t19 = () => ({
+      scheduleUpdate: () => {
+        update?.();
+      }
+    });
+
+    $[28] = update;
+    $[29] = t19;
+  } else {
+    t19 = $[29];
+  }
+
+  useImperativeHandle(externalRef, t19);
   const {
     dropdownZIndex
   } = useLayeringContext();
-  const triggerRenderer = typeof trigger === 'function' ? trigger({
-    ref: setTriggerRef
-  }) : /*#__PURE__*/React.createElement("span", {
-    "data-test": "dropdown-trigger",
-    className: styles.triggerWrapper,
-    ref: setTriggerRef
-  }, trigger);
+  let t20;
+
+  if ($[30] !== trigger) {
+    t20 = typeof trigger === "function" ? trigger({
+      ref: setTriggerRef
+    }) : /*#__PURE__*/React.createElement("span", {
+      "data-test": "dropdown-trigger",
+      className: styles.triggerWrapper,
+      ref: setTriggerRef
+    }, trigger);
+    $[30] = trigger;
+    $[31] = t20;
+  } else {
+    t20 = $[31];
+  }
+
+  const triggerRenderer = t20;
   const dropdownShouldBeRendered = dropdownState !== DROPDOWN_STATES.CLOSE;
   const wrapperIsInitial = dropdownState === DROPDOWN_STATES.OPENING_PREPARE;
   const wrapperShouldBeHidden = wrapperIsInitial || dropdownState === DROPDOWN_STATES.CLOSING;
-  let primaryColors = {};
-  let themeFromCss = 'light';
-
-  if (triggerRef && dropdownShouldBeRendered) {
-    // In theory this part of the code might cause issues with SSR.
-    // But in this specific context, because of the nature of the state-ref "triggerRef",
-    // we are sure that the dropdown wouldn't be rendered on the first client render.
-    // Therefore, the first render on the client will be the same as on the server.
-    const triggerStyles = ownerDocument?.defaultView?.getComputedStyle(triggerRef);
-
-    if (triggerStyles) {
-      themeFromCss = extractThemeFromCss(triggerStyles);
-      primaryColors = extractPrimaryColors(triggerStyles);
-    }
-  }
-
+  const {
+    primaryColors,
+    themeFromCss
+  } = useExtractCssValues(triggerRef, dropdownShouldBeRendered, ownerDocument?.defaultView);
   const {
     theme: themeFromContext,
     noProvider
   } = useContext(ThemeContext);
   const theme = themeFromProps || (noProvider ? themeFromCss : themeFromContext);
-  const childrenTheme = mode === 'rock' ? getInverseTheme(theme) : theme;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, triggerRenderer, dropdownShouldBeRendered && /*#__PURE__*/React.createElement(Portal, {
-    target: renderInTrigger ? triggerRef : ownerDocument?.body
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: setPopperRef,
-    style: {
-      maxHeight,
-      ...popperStyles.popper,
-      zIndex: dropdownZIndex,
-      ...primaryColors
-    },
-    className: cn(styles.dropdown, className, MODE_STYLES[mode], THEME_STYLES[theme]),
-    "data-test": "dropdown",
-    ...attributes.popper
-  }, /*#__PURE__*/React.createElement(LayeringProvider, {
-    baseLayer: 'dropdown'
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: scrollableRef,
-    style: scrollableStyles,
-    className: cn(styles.contentWrapper, wrapperIsInitial && styles.wrapperInitial, wrapperShouldBeHidden && styles.wrapperHidden),
-    "data-test": "dropdown-content"
-  }, /*#__PURE__*/React.createElement(ThemeProvider, {
-    ignoreThemeValueForCSSApi: noProvider,
-    theme: childrenTheme
-  }, /*#__PURE__*/React.createElement(FocusLock, {
-    className: THEME_STYLES[childrenTheme],
-    ref: setContentEl,
-    disabled: dropdownState === DROPDOWN_STATES.CLOSING || disableFocusLock,
-    returnFocus: {
-      preventScroll: true
-    },
-    focusOptions: {
-      preventScroll: true
-    }
-  }, children)))))));
+  let t21;
+
+  if ($[32] !== mode || $[33] !== theme) {
+    t21 = mode === "rock" ? getInverseTheme(theme) : theme;
+    $[32] = mode;
+    $[33] = theme;
+    $[34] = t21;
+  } else {
+    t21 = $[34];
+  }
+
+  const childrenTheme = t21;
+  let t22;
+
+  if ($[35] !== attributes.popper || $[36] !== children || $[37] !== childrenTheme || $[38] !== className || $[39] !== disableFocusLock || $[40] !== dropdownShouldBeRendered || $[41] !== dropdownState || $[42] !== dropdownZIndex || $[43] !== maxHeight || $[44] !== mode || $[45] !== noProvider || $[46] !== ownerDocument?.body || $[47] !== popperStyles || $[48] !== primaryColors || $[49] !== renderInTrigger || $[50] !== scrollableStyles || $[51] !== setContentEl || $[52] !== theme || $[53] !== triggerRef || $[54] !== wrapperIsInitial || $[55] !== wrapperShouldBeHidden) {
+    t22 = dropdownShouldBeRendered && /*#__PURE__*/React.createElement(Portal, {
+      target: renderInTrigger ? triggerRef : ownerDocument?.body
+    }, /*#__PURE__*/React.createElement("div", _extends({
+      ref: setPopperRef,
+      style: {
+        maxHeight,
+        ...popperStyles.popper,
+        zIndex: dropdownZIndex,
+        ...primaryColors
+      },
+      className: cn(styles.dropdown, className, MODE_STYLES[mode], THEME_STYLES[theme]),
+      "data-test": "dropdown"
+    }, attributes.popper), /*#__PURE__*/React.createElement(LayeringProvider, {
+      baseLayer: "dropdown"
+    }, /*#__PURE__*/React.createElement("div", {
+      ref: scrollableRef,
+      style: scrollableStyles,
+      className: cn(styles.contentWrapper, wrapperIsInitial && styles.wrapperInitial, wrapperShouldBeHidden && styles.wrapperHidden),
+      "data-test": "dropdown-content"
+    }, /*#__PURE__*/React.createElement(ThemeProvider, {
+      ignoreThemeValueForCSSApi: noProvider,
+      theme: childrenTheme
+    }, /*#__PURE__*/React.createElement(FocusLock, {
+      className: THEME_STYLES[childrenTheme],
+      ref: setContentEl,
+      disabled: dropdownState === DROPDOWN_STATES.CLOSING || disableFocusLock,
+      returnFocus: {
+        preventScroll: true
+      },
+      focusOptions: {
+        preventScroll: true
+      }
+    }, children))))));
+    $[35] = attributes.popper;
+    $[36] = children;
+    $[37] = childrenTheme;
+    $[38] = className;
+    $[39] = disableFocusLock;
+    $[40] = dropdownShouldBeRendered;
+    $[41] = dropdownState;
+    $[42] = dropdownZIndex;
+    $[43] = maxHeight;
+    $[44] = mode;
+    $[45] = noProvider;
+    $[46] = ownerDocument?.body;
+    $[47] = popperStyles;
+    $[48] = primaryColors;
+    $[49] = renderInTrigger;
+    $[50] = scrollableStyles;
+    $[51] = setContentEl;
+    $[52] = theme;
+    $[53] = triggerRef;
+    $[54] = wrapperIsInitial;
+    $[55] = wrapperShouldBeHidden;
+    $[56] = t22;
+  } else {
+    t22 = $[56];
+  }
+
+  let t23;
+
+  if ($[57] !== t22 || $[58] !== triggerRenderer) {
+    t23 = /*#__PURE__*/React.createElement(React.Fragment, null, triggerRenderer, t22);
+    $[57] = t22;
+    $[58] = triggerRenderer;
+    $[59] = t23;
+  } else {
+    t23 = $[59];
+  }
+
+  return t23;
 };
 /* eslint-enable react/prop-types */
 
@@ -285,4 +502,7 @@ Dropdown.propTypes = {
   renderInTrigger: PropTypes.bool,
   disableFlip: PropTypes.bool
 };
+
+function _temp() {}
+
 export { Dropdown, Dropdown as default };

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

@@ -1,12 +1,12 @@
 var styles = {
-  "themeLight": "_themeLight_3wijjk_7",
-  "themeDark": "_themeDark_3wijjk_10",
-  "dropdown": "_dropdown_3wijjk_14",
-  "triggerWrapper": "_triggerWrapper_3wijjk_21",
-  "contentWrapper": "_contentWrapper_3wijjk_25",
-  "wrapperInitial": "_wrapperInitial_3wijjk_41",
-  "wrapperHidden": "_wrapperHidden_3wijjk_45",
-  "modeClassic": "_modeClassic_3wijjk_65",
-  "modeRock": "_modeRock_3wijjk_69"
+  "themeLight": "_themeLight_4nj7mk_7",
+  "themeDark": "_themeDark_4nj7mk_10",
+  "dropdown": "_dropdown_4nj7mk_14",
+  "triggerWrapper": "_triggerWrapper_4nj7mk_21",
+  "contentWrapper": "_contentWrapper_4nj7mk_25",
+  "wrapperInitial": "_wrapperInitial_4nj7mk_41",
+  "wrapperHidden": "_wrapperHidden_4nj7mk_45",
+  "modeClassic": "_modeClassic_4nj7mk_65",
+  "modeRock": "_modeRock_4nj7mk_69"
 };
 export { styles as default };

package/lib/index.css

@@ -3,13 +3,13 @@
   inherits:true;
   initial-value:0;
 }
-._themeLight_3wijjk_7{
+._themeLight_4nj7mk_7{
   --rs-theme-dark:0;
 }
-._themeDark_3wijjk_10{
+._themeDark_4nj7mk_10{
   --rs-theme-dark:1;
 }
-._dropdown_3wijjk_14{
+._dropdown_4nj7mk_14{
   --_rs-theme-dark:var(
     --_rs-internal-force-theme-dark-consult-rescui-before-using,
     var(--rs-theme-dark, 0)
@@ -19,7 +19,7 @@
   --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
 }
 @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
-._dropdown_3wijjk_14{
+._dropdown_4nj7mk_14{
     --_rs-color-primary:color-mix(in srgb, var(--rs-color-primary-light-theme, #6B57FF) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, #8473FF) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
     --_rs-color-primary-dim:color-mix(in srgb, var(--rs-color-primary-dim-light-theme, #8979ff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
     --_rs-color-primary-fog:color-mix(in srgb, var(--rs-color-primary-fog-light-theme, #e1ddff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, #2e2b49) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
@@ -28,7 +28,7 @@
 }
   }
 @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
-._dropdown_3wijjk_14{
+._dropdown_4nj7mk_14{
     --_rs-color-primary:rgb(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255);
     --_rs-color-primary-dim:rgb(calc(var(--_rs-theme-light-coefficient, 1)*137 + var(--_rs-theme-dark-coefficient, 0)*111), calc(var(--_rs-theme-light-coefficient, 1)*121 + var(--_rs-theme-dark-coefficient, 0)*97), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*210));
     --_rs-color-primary-fog:rgb(calc(var(--_rs-theme-light-coefficient, 1)*225 + var(--_rs-theme-dark-coefficient, 0)*46), calc(var(--_rs-theme-light-coefficient, 1)*221 + var(--_rs-theme-dark-coefficient, 0)*43), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*73));
@@ -36,14 +36,14 @@
     --_rs-color-primary-t-fog:rgba(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255, calc(var(--_rs-theme-light-coefficient, 1)*0.2 + var(--_rs-theme-dark-coefficient, 0)*0.3));
 }
   }
-._dropdown_3wijjk_14 {
+._dropdown_4nj7mk_14 {
   display:flex;
   flex-direction:column;
 }
-._triggerWrapper_3wijjk_21{
+._triggerWrapper_4nj7mk_21{
   display:inline-block;
 }
-._contentWrapper_3wijjk_25{
+._contentWrapper_4nj7mk_25{
   position:relative;
 
   display:block;
@@ -57,34 +57,34 @@
 
   transition:opacity var(--rs-transition-function, ease) 200ms, transform var(--rs-transition-function, ease) 200ms;
 }
-._wrapperInitial_3wijjk_41{
+._wrapperInitial_4nj7mk_41{
   transition:none;
 }
-._wrapperHidden_3wijjk_45{
+._wrapperHidden_4nj7mk_45{
   opacity:0;
 }
-[data-popper-placement^='top'] ._wrapperHidden_3wijjk_45{
+[data-popper-placement^='top'] ._wrapperHidden_4nj7mk_45{
   transform:translateY(10px);
 }
-[data-popper-placement^='bottom'] ._wrapperHidden_3wijjk_45{
+[data-popper-placement^='bottom'] ._wrapperHidden_4nj7mk_45{
   transform:translateY(-10px);
 }
-[data-popper-placement^='right'] ._wrapperHidden_3wijjk_45{
+[data-popper-placement^='right'] ._wrapperHidden_4nj7mk_45{
   transform:translateX(-10px);
 }
-[data-popper-placement^='left'] ._wrapperHidden_3wijjk_45{
+[data-popper-placement^='left'] ._wrapperHidden_4nj7mk_45{
   transform:translateX(10px);
 }
-._modeClassic_3wijjk_65 ._contentWrapper_3wijjk_25{
+._modeClassic_4nj7mk_65 ._contentWrapper_4nj7mk_25{
   background-color:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227));
 }
-._modeRock_3wijjk_69 ._contentWrapper_3wijjk_25{
+._modeRock_4nj7mk_69 ._contentWrapper_4nj7mk_25{
   background-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
 }
-._modeClassic_3wijjk_65._themeDark_3wijjk_10 ._contentWrapper_3wijjk_25, ._modeRock_3wijjk_69._themeLight_3wijjk_7 ._contentWrapper_3wijjk_25{
+._modeClassic_4nj7mk_65._themeDark_4nj7mk_10 ._contentWrapper_4nj7mk_25, ._modeRock_4nj7mk_69._themeLight_4nj7mk_7 ._contentWrapper_4nj7mk_25{
     color-scheme:dark;
   }
-._modeRock_3wijjk_69{
+._modeRock_4nj7mk_69{
   --rs-parent-color-primary-light-theme:var(--rs-color-primary-light-theme);
   --rs-parent-color-primary-dim-light-theme:var(
     --rs-color-primary-dim-light-theme
@@ -113,7 +113,7 @@
     --rs-color-primary-t-fog-dark-theme
   );
 }
-._modeRock_3wijjk_69 > *{
+._modeRock_4nj7mk_69 > *{
   --rs-color-primary-dark-theme:var(--rs-parent-color-primary-light-theme);
   --rs-color-primary-dim-dark-theme:var(
     --rs-parent-color-primary-dim-light-theme

package/lib/use-dropdown-state.js

@@ -1,5 +1,6 @@
 "use client";
-import { useState, useCallback, useEffect, useLayoutEffect } from 'react';
+import { c } from 'react-compiler-runtime';
+import { useState, useEffect, useLayoutEffect } from 'react';
 const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
 const DROPDOWN_TRANSITION_PROPERTIES = ['opacity', 'transform'];
 
@@ -15,119 +16,181 @@ var DROPDOWN_STATES;
   DROPDOWN_STATES["CLOSE"] = "CLOSE";
 })(DROPDOWN_STATES || (DROPDOWN_STATES = {}));
 
-function useDropdownState(_ref) {
-  let {
+function useDropdownState(t0) {
+  const $ = c(16);
+  const {
     isOpen,
     cancelCloseAnimation,
     contentRef,
     popperElement,
     resolvedPlacement
-  } = _ref;
+  } = t0;
   const [dropdownState, setDropdownState] = useState(isOpen ? DROPDOWN_STATES.OPENING_PREPARE : DROPDOWN_STATES.CLOSE);
-  const completeTransition = useCallback(expectedState => {
-    setDropdownState(state => {
-      if (state !== expectedState) {
+  let t1;
+
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = expectedState => {
+      setDropdownState(state => {
+        if (state !== expectedState) {
+          return state;
+        }
+
+        if (expectedState === DROPDOWN_STATES.CLOSING) {
+          return DROPDOWN_STATES.CLOSE;
+        }
+
+        if (expectedState === DROPDOWN_STATES.OPENING) {
+          return DROPDOWN_STATES.OPEN;
+        }
+
         return state;
-      }
+      });
+    };
 
-      if (expectedState === DROPDOWN_STATES.CLOSING) {
-        return DROPDOWN_STATES.CLOSE;
-      }
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
 
-      if (expectedState === DROPDOWN_STATES.OPENING) {
-        return DROPDOWN_STATES.OPEN;
-      }
+  const completeTransition = t1;
+  let t2;
 
-      return state;
-    });
-  }, []);
-  const completeOpeningPreparation = useCallback(() => {
-    setDropdownState(state => state === DROPDOWN_STATES.OPENING_PREPARE ? DROPDOWN_STATES.OPENING : state);
-  }, []);
-  useIsomorphicLayoutEffect(() => {
-    const contentElement = contentRef.current;
-
-    if (dropdownState !== DROPDOWN_STATES.OPENING_PREPARE || !popperElement || !contentElement || !resolvedPlacement) {
-      return;
-    } // Register the initial opacity/transform with the resolved placement before
-    // removing the initial class and starting the opening transition.
-
-
-    contentElement.getBoundingClientRect();
-    completeOpeningPreparation();
-  }, [completeOpeningPreparation, contentRef, dropdownState, popperElement, resolvedPlacement]); // Track the transitions that currently belong to the OPENING/CLOSING phase:
-  // - normally, wait for both opacity and transform before completing the phase;
-  // - a style/placement change can cancel or replace a transition without
-  //   changing the phase; follow the latest one, including a replacement that
-  //   appears just after the previous transition finishes;
-  // - if OPENING changes to CLOSING (or vice versa), cleanup invalidates these
-  //   waiters and the next phase installs its own, so a stale transition cannot
-  //   complete it;
-  // - if no transitions are created (for example, their duration is 0s),
-  //   complete the phase immediately.
-
-  useIsomorphicLayoutEffect(() => {
-    if (dropdownState !== DROPDOWN_STATES.OPENING && dropdownState !== DROPDOWN_STATES.CLOSING) {
-      return undefined;
-    }
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = () => {
+      setDropdownState(_temp);
+    };
 
-    const contentElement = contentRef.current;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
 
-    if (!contentElement) {
-      return undefined;
-    }
+  const completeOpeningPreparation = t2;
+  let t3;
+  let t4;
 
-    let isCurrentPhase = true;
+  if ($[2] !== contentRef || $[3] !== dropdownState || $[4] !== popperElement || $[5] !== resolvedPlacement) {
+    t3 = () => {
+      const contentElement = contentRef.current;
 
-    const completeCurrentPhase = () => {
-      if (isCurrentPhase) {
-        completeTransition(dropdownState);
+      if (dropdownState !== DROPDOWN_STATES.OPENING_PREPARE || !popperElement || !contentElement || !resolvedPlacement) {
+        return;
       }
+
+      contentElement.getBoundingClientRect();
+      completeOpeningPreparation();
     };
 
-    const waitForCurrentTransition = (property, previousTransition) => {
-      if (!isCurrentPhase) {
-        return Promise.resolve();
+    t4 = [completeOpeningPreparation, contentRef, dropdownState, popperElement, resolvedPlacement];
+    $[2] = contentRef;
+    $[3] = dropdownState;
+    $[4] = popperElement;
+    $[5] = resolvedPlacement;
+    $[6] = t3;
+    $[7] = t4;
+  } else {
+    t3 = $[6];
+    t4 = $[7];
+  }
+
+  useIsomorphicLayoutEffect(t3, t4);
+  let t5;
+
+  if ($[8] !== contentRef || $[9] !== dropdownState) {
+    t5 = () => {
+      if (dropdownState !== DROPDOWN_STATES.OPENING && dropdownState !== DROPDOWN_STATES.CLOSING) {
+        return;
       }
 
-      const transition = getDropdownTransition(contentElement, property);
+      const contentElement_0 = contentRef.current;
 
-      if (!transition || transition === previousTransition) {
-        return Promise.resolve();
+      if (!contentElement_0) {
+        return;
       }
 
-      return transition.finished.then(() => {
+      let isCurrentPhase = true;
+
+      const completeCurrentPhase = () => {
+        if (isCurrentPhase) {
+          completeTransition(dropdownState);
+        }
+      };
+
+      const waitForCurrentTransition = (property, previousTransition) => {
         if (!isCurrentPhase) {
           return Promise.resolve();
         }
 
-        const replacementTransition = getDropdownTransition(contentElement, property);
+        const transition = getDropdownTransition(contentElement_0, property);
 
-        if (replacementTransition && replacementTransition !== transition) {
-          return waitForCurrentTransition(property, transition);
+        if (!transition || transition === previousTransition) {
+          return Promise.resolve();
         }
 
-        return Promise.resolve();
-      }, () => waitForCurrentTransition(property, transition));
-    };
+        return transition.finished.then(() => {
+          if (!isCurrentPhase) {
+            return Promise.resolve();
+          }
 
-    Promise.all(DROPDOWN_TRANSITION_PROPERTIES.map(property => waitForCurrentTransition(property))).then(completeCurrentPhase);
-    return () => {
-      isCurrentPhase = false;
+          const replacementTransition = getDropdownTransition(contentElement_0, property);
+
+          if (replacementTransition && replacementTransition !== transition) {
+            return waitForCurrentTransition(property, transition);
+          }
+
+          return Promise.resolve();
+        }, () => waitForCurrentTransition(property, transition));
+      };
+
+      Promise.all(DROPDOWN_TRANSITION_PROPERTIES.map(property_0 => waitForCurrentTransition(property_0))).then(completeCurrentPhase);
+      return () => {
+        isCurrentPhase = false;
+      };
     };
-  }, [completeTransition, contentRef, dropdownState, popperElement, resolvedPlacement]); // React retries this component before rendering its children when the phase changes.
+
+    $[8] = contentRef;
+    $[9] = dropdownState;
+    $[10] = t5;
+  } else {
+    t5 = $[10];
+  }
+
+  let t6;
+
+  if ($[11] !== contentRef || $[12] !== dropdownState || $[13] !== popperElement || $[14] !== resolvedPlacement) {
+    t6 = [completeTransition, contentRef, dropdownState, popperElement, resolvedPlacement];
+    $[11] = contentRef;
+    $[12] = dropdownState;
+    $[13] = popperElement;
+    $[14] = resolvedPlacement;
+    $[15] = t6;
+  } else {
+    t6 = $[15];
+  }
+
+  useIsomorphicLayoutEffect(t5, t6);
 
   if (isOpen && dropdownState === DROPDOWN_STATES.CLOSE) {
     setDropdownState(DROPDOWN_STATES.OPENING_PREPARE);
-  } else if (isOpen && dropdownState === DROPDOWN_STATES.CLOSING) {
-    setDropdownState(DROPDOWN_STATES.OPENING);
-  } else if (!isOpen && dropdownState === DROPDOWN_STATES.OPENING_PREPARE) {
-    setDropdownState(DROPDOWN_STATES.CLOSE);
-  } else if (!isOpen && (dropdownState === DROPDOWN_STATES.OPEN || dropdownState === DROPDOWN_STATES.OPENING)) {
-    setDropdownState(cancelCloseAnimation ? DROPDOWN_STATES.CLOSE : DROPDOWN_STATES.CLOSING);
+  } else {
+    if (isOpen && dropdownState === DROPDOWN_STATES.CLOSING) {
+      setDropdownState(DROPDOWN_STATES.OPENING);
+    } else {
+      if (!isOpen && dropdownState === DROPDOWN_STATES.OPENING_PREPARE) {
+        setDropdownState(DROPDOWN_STATES.CLOSE);
+      } else {
+        if (!isOpen && (dropdownState === DROPDOWN_STATES.OPEN || dropdownState === DROPDOWN_STATES.OPENING)) {
+          setDropdownState(cancelCloseAnimation ? DROPDOWN_STATES.CLOSE : DROPDOWN_STATES.CLOSING);
+        }
+      }
+    }
   }
 
   return dropdownState;
 }
 
+function _temp(state_0) {
+  return state_0 === DROPDOWN_STATES.OPENING_PREPARE ? DROPDOWN_STATES.OPENING : state_0;
+}
+
 export { DROPDOWN_STATES, useDropdownState };

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

@@ -0,0 +1,5 @@
+import type { Theme } from '@rescui/ui-contexts';
+export declare const useExtractCssValues: (triggerRef: Element | null | undefined, shouldBeRendered: boolean, defaultView: Window | undefined) => {
+    primaryColors: Record<string, string>;
+    themeFromCss: Theme;
+};

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

@@ -0,0 +1,78 @@
+import { c } from 'react-compiler-runtime';
+import { useState, useEffect, useLayoutEffect } from 'react';
+const PRIMARY_COLORS = ['--rs-color-primary-light-theme', '--rs-color-primary-dim-light-theme', '--rs-color-primary-fog-light-theme', '--rs-color-primary-t-dim-light-theme', '--rs-color-primary-t-fog-light-theme', '--rs-color-primary-dark-theme', '--rs-color-primary-dim-dark-theme', '--rs-color-primary-fog-dark-theme', '--rs-color-primary-t-dim-dark-theme', '--rs-color-primary-t-fog-dark-theme'];
+
+const extractPrimaryColors = styles => {
+  const colors = {};
+  PRIMARY_COLORS.forEach(varName => {
+    colors[varName] = styles.getPropertyValue(varName) || 'initial';
+  });
+  return colors;
+};
+/** Check out `@rescui/colors/src/public-api.p.css` file */
+
+
+const extractThemeFromCss = styles => {
+  const themeDark = parseInt(styles.getPropertyValue('--rs-theme-dark'), 10) || 0;
+  const themeFlip = parseInt(styles.getPropertyValue('--rs-theme-flip'), 10) || 0;
+  const themeDarkCoefficient = themeDark * (1 - themeFlip) + themeFlip * (1 - themeDark);
+  return themeDarkCoefficient === 1 ? 'dark' : 'light';
+};
+
+const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
+
+const useExtractCssValues = (triggerRef, shouldBeRendered, defaultView) => {
+  const $ = c(6);
+  let t0;
+
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = {
+      primaryColors: {},
+      themeFromCss: "light"
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+
+  const [cssValues, setCssValues] = useState(t0);
+  let t1;
+  let t2;
+
+  if ($[1] !== defaultView || $[2] !== shouldBeRendered || $[3] !== triggerRef) {
+    t1 = () => {
+      if (triggerRef && shouldBeRendered) {
+        const triggerStyles = defaultView?.getComputedStyle(triggerRef);
+
+        if (triggerStyles) {
+          const newCssValues = {
+            primaryColors: extractPrimaryColors(triggerStyles),
+            themeFromCss: extractThemeFromCss(triggerStyles)
+          };
+          setCssValues(oldValues => {
+            if (JSON.stringify(oldValues) !== JSON.stringify(newCssValues)) {
+              return newCssValues;
+            }
+
+            return oldValues;
+          });
+        }
+      }
+    };
+
+    t2 = [triggerRef, shouldBeRendered, defaultView];
+    $[1] = defaultView;
+    $[2] = shouldBeRendered;
+    $[3] = triggerRef;
+    $[4] = t1;
+    $[5] = t2;
+  } else {
+    t1 = $[4];
+    t2 = $[5];
+  }
+
+  useIsomorphicLayoutEffect(t1, t2);
+  return cssValues;
+};
+
+export { useExtractCssValues };

package/lib/use-scrollable-container.js

@@ -1,4 +1,5 @@
 "use client";
+import { c } from 'react-compiler-runtime';
 import { useState } from 'react';
 import { useResizeObserver } from '@rescui/use-resize-observer';
 
@@ -14,22 +15,44 @@ function isOverflown(element) {
 
 
 const useScrollableContainer = () => {
+  const $ = c(3);
   const [contentEl, setContentEl] = useState(null);
   const [isScrollable, setIsScrollable] = useState(false);
-  useResizeObserver(contentEl, () => {
-    const containerEl = contentEl.parentElement;
-
-    if (containerEl) {
-      setIsScrollable(isOverflown(containerEl));
-    }
-  });
-  const scrollableStyles = {
-    overflowY: isScrollable ? 'scroll' : 'auto'
-  };
-  return {
-    setContentEl,
-    scrollableStyles
-  };
+  let t0;
+
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = entry => {
+      const containerEl = entry.target.parentElement;
+
+      if (containerEl) {
+        setIsScrollable(isOverflown(containerEl));
+      }
+    };
+
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+
+  useResizeObserver(contentEl, t0);
+  const t1 = isScrollable ? "scroll" : "auto";
+  let t2;
+
+  if ($[1] !== t1) {
+    const scrollableStyles = {
+      overflowY: t1
+    };
+    t2 = {
+      setContentEl,
+      scrollableStyles
+    };
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+
+  return t2;
 };
 
 export { useScrollableContainer };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/dropdown",
-  "version": "0.11.2",
+  "version": "0.12.0",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -18,28 +18,29 @@
   "dependencies": {
     "@babel/runtime-corejs3": "^7.26.0",
     "@popperjs/core": "^2.11.8",
-    "@rescui/use-resize-observer": "^0.3.4",
+    "@rescui/use-resize-observer": "^0.4.0",
     "classnames": "^2.2.6",
     "popper-max-size-modifier": "^0.2.0",
+    "react-compiler-runtime": "^1.0.0",
     "react-focus-lock": "^2.8.1",
     "react-popper": "^2.2.5"
   },
   "peerDependencies": {
     "@rescui/ui-contexts": "^0.6.0",
     "prop-types": "^15",
-    "react": ">=16.8.0 <20",
-    "react-dom": ">=16.8.0 <20"
+    "react": ">=17.0.0 <20",
+    "react-dom": ">=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": {
     "build": "rescui-scripts build"
   },
   "nx": {},
-  "gitHead": "3711cbfc0c797014395421b008aa5331d6d47c6e"
+  "gitHead": "8ffbbe20b8bcbb9ea15204113ab603675d4c03cd"
 }

package/lib/css-vars-utils.d.ts

@@ -1,3 +0,0 @@
-export declare const extractPrimaryColors: (styles: CSSStyleDeclaration) => Record<string, string>;
-/** Check out `@rescui/colors/src/public-api.p.css` file */
-export declare const extractThemeFromCss: (styles: CSSStyleDeclaration) => "dark" | "light";

package/lib/css-vars-utils.js

@@ -1,20 +0,0 @@
-const PRIMARY_COLORS = ['--rs-color-primary-light-theme', '--rs-color-primary-dim-light-theme', '--rs-color-primary-fog-light-theme', '--rs-color-primary-t-dim-light-theme', '--rs-color-primary-t-fog-light-theme', '--rs-color-primary-dark-theme', '--rs-color-primary-dim-dark-theme', '--rs-color-primary-fog-dark-theme', '--rs-color-primary-t-dim-dark-theme', '--rs-color-primary-t-fog-dark-theme'];
-
-const extractPrimaryColors = styles => {
-  const colors = {};
-  PRIMARY_COLORS.forEach(varName => {
-    colors[varName] = styles.getPropertyValue(varName) || 'initial';
-  });
-  return colors;
-};
-/** Check out `@rescui/colors/src/public-api.p.css` file */
-
-
-const extractThemeFromCss = styles => {
-  const themeDark = parseInt(styles.getPropertyValue('--rs-theme-dark'), 10) || 0;
-  const themeFlip = parseInt(styles.getPropertyValue('--rs-theme-flip'), 10) || 0;
-  const themeDarkCoefficient = themeDark * (1 - themeFlip) + themeFlip * (1 - themeDark);
-  return themeDarkCoefficient === 1 ? 'dark' : 'light';
-};
-
-export { extractPrimaryColors, extractThemeFromCss };