@rescui/dropdown 0.11.1 → 0.11.2

package/lib/dropdown.js

@@ -1,5 +1,5 @@
 "use client";
-import React, { useState, useRef, useEffect, useImperativeHandle, useContext, useCallback } from 'react';
+import React, { useState, useRef, useMemo, useImperativeHandle, useContext, useCallback, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 import { usePopper } from 'react-popper';
@@ -74,7 +74,7 @@ function useOnOutsideClick(_ref3) {
     }
 
     onOutsideClick();
-  }, [onOutsideClick, ...ignoreElements]); // eslint-disable-next-line consistent-return
+  }, [onOutsideClick, ignoreElements]); // eslint-disable-next-line consistent-return
 
   useEffect(() => {
     if (isEnabled && ignoreElementRefsExists && ownerDocument) {
@@ -143,26 +143,21 @@ const DropdownRender = (_ref5, externalRef) => {
     disableFlip = false
   } = _ref5;
   const [popperRef, setPopperRef] = useState(null);
-  const [triggerRef, setTriggerRef] = useState(null);
+  const [triggerRef, setTriggerRef] = useState(undefined);
   const {
     setContentEl,
     scrollableStyles
   } = useScrollableContainer();
-  const scrollableRef = useRef(null); // We set isOpen this way to avoid hydration issue due to
-  // the Portal to document.body which does not exist on the server.
-  // So even if isOpen prop is used, the tooltip will not render on the server, and
-  // it's the same on the first client render, so there is no hydration issue.
+  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 [isFirstRender, setIsFirstRender] = useState(true);
-  useEffect(() => {
-    setIsFirstRender(false);
-  }, []);
-  const isOpen = isFirstRender && !renderInTrigger ? false : isOpenFromProps;
+  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: [popperRef, triggerRef],
+    ignoreElements: outsideClickIgnoreElements,
     ownerDocument
   });
   useKeyPress({
@@ -177,12 +172,11 @@ const DropdownRender = (_ref5, externalRef) => {
     onKeyPress: onRequestClose,
     ownerDocument
   });
-  const [handleAnimationEnd, dropdownState] = useDropdownState(isOpen, cancelCloseAnimation);
   const {
     styles: popperStyles,
     attributes,
     update
-  } = usePopper(triggerRef, popperRef, getPopperOptions({
+  } = usePopper(triggerRef ?? null, popperRef, getPopperOptions({
     placement,
     maxHeight,
     leastMaxHeight,
@@ -190,11 +184,17 @@ const DropdownRender = (_ref5, externalRef) => {
     maxWidth,
     disableFlip
   }));
+  const resolvedPlacement = attributes.popper?.['data-popper-placement'] ?? null;
+  const dropdownState = useDropdownState({
+    isOpen,
+    cancelCloseAnimation,
+    contentRef: scrollableRef,
+    popperElement: popperRef,
+    resolvedPlacement
+  });
   useImperativeHandle(externalRef, () => ({
     scheduleUpdate: () => {
-      if (update) {
-        update();
-      }
+      update?.();
     }
   }));
   const {
@@ -208,7 +208,8 @@ const DropdownRender = (_ref5, externalRef) => {
     ref: setTriggerRef
   }, trigger);
   const dropdownShouldBeRendered = dropdownState !== DROPDOWN_STATES.CLOSE;
-  const wrapperShouldBeHidden = dropdownState === DROPDOWN_STATES.CLOSING;
+  const wrapperIsInitial = dropdownState === DROPDOWN_STATES.OPENING_PREPARE;
+  const wrapperShouldBeHidden = wrapperIsInitial || dropdownState === DROPDOWN_STATES.CLOSING;
   let primaryColors = {};
   let themeFromCss = 'light';
 
@@ -230,19 +231,7 @@ const DropdownRender = (_ref5, externalRef) => {
     noProvider
   } = useContext(ThemeContext);
   const theme = themeFromProps || (noProvider ? themeFromCss : themeFromContext);
-  const childrenTheme = mode === 'rock' ? getInverseTheme(theme) : theme; // immediately fire handleAnimationEnd event on visibility change in case transition is disabled
-  // it may happen if the user hard-disabled all transitions in his browser
-
-  useEffect(() => {
-    if (dropdownShouldBeRendered && scrollableRef.current) {
-      const ownerWindow = scrollableRef.current.ownerDocument.defaultView;
-      const isTransitionDisabled = ownerWindow?.getComputedStyle(scrollableRef.current).transitionDuration === '0s';
-
-      if (isTransitionDisabled) {
-        handleAnimationEnd();
-      }
-    }
-  }, [handleAnimationEnd, dropdownShouldBeRendered]);
+  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", {
@@ -261,9 +250,7 @@ const DropdownRender = (_ref5, externalRef) => {
   }, /*#__PURE__*/React.createElement("div", {
     ref: scrollableRef,
     style: scrollableStyles,
-    className: cn(styles.contentWrapper, wrapperShouldBeHidden && styles.wrapperHidden),
-    onTransitionEnd: handleAnimationEnd,
-    onAnimationEnd: handleAnimationEnd,
+    className: cn(styles.contentWrapper, wrapperIsInitial && styles.wrapperInitial, wrapperShouldBeHidden && styles.wrapperHidden),
     "data-test": "dropdown-content"
   }, /*#__PURE__*/React.createElement(ThemeProvider, {
     ignoreThemeValueForCSSApi: noProvider,

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

@@ -1,15 +1,12 @@
 var styles = {
-  "themeLight": "_themeLight_1il2d95_59",
-  "themeDark": "_themeDark_1il2d95_62",
-  "dropdown": "_dropdown_1il2d95_66",
-  "triggerWrapper": "_triggerWrapper_1il2d95_73",
-  "contentWrapper": "_contentWrapper_1il2d95_77",
-  "fadeInBottomToTop": "_fadeInBottomToTop_1il2d95_1",
-  "fadeInTopToBottom": "_fadeInTopToBottom_1il2d95_1",
-  "fadeInLeftToRight": "_fadeInLeftToRight_1il2d95_1",
-  "fadeInRightToLeft": "_fadeInRightToLeft_1il2d95_1",
-  "wrapperHidden": "_wrapperHidden_1il2d95_110",
-  "modeClassic": "_modeClassic_1il2d95_130",
-  "modeRock": "_modeRock_1il2d95_134"
+  "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"
 };
 export { styles as default };

package/lib/index.css

@@ -1,58 +1,15 @@
-@keyframes _fadeInTopToBottom_1il2d95_1{
-  0%{
-    opacity:0;
-
-    transform:translateY(-10px);
-  }
-  100%{
-    opacity:1;
-
-    transform:none;
-  }
-}
-@keyframes _fadeInBottomToTop_1il2d95_1{
-  0%{
-    opacity:0;
-
-    transform:translateY(10px);
-  }
-  100%{
-    opacity:1;
-
-    transform:none;
-  }
+@property --_rs-theme-dark-coefficient{
+  syntax:'<number>';
+  inherits:true;
+  initial-value:0;
 }
-@keyframes _fadeInLeftToRight_1il2d95_1{
-  0%{
-    opacity:0;
-
-    transform:translateX(-10px);
-  }
-  100%{
-    opacity:1;
-
-    transform:none;
-  }
-}
-@keyframes _fadeInRightToLeft_1il2d95_1{
-  0%{
-    opacity:0;
-
-    transform:translateX(10px);
-  }
-  100%{
-    opacity:1;
-
-    transform:none;
-  }
-}
-._themeLight_1il2d95_59{
+._themeLight_3wijjk_7{
   --rs-theme-dark:0;
 }
-._themeDark_1il2d95_62{
+._themeDark_3wijjk_10{
   --rs-theme-dark:1;
 }
-._dropdown_1il2d95_66{
+._dropdown_3wijjk_14{
   --_rs-theme-dark:var(
     --_rs-internal-force-theme-dark-consult-rescui-before-using,
     var(--rs-theme-dark, 0)
@@ -62,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_1il2d95_66{
+._dropdown_3wijjk_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)));
@@ -71,7 +28,7 @@
 }
   }
 @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
-._dropdown_1il2d95_66{
+._dropdown_3wijjk_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));
@@ -79,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_1il2d95_66 {
+._dropdown_3wijjk_14 {
   display:flex;
   flex-direction:column;
 }
-._triggerWrapper_1il2d95_73{
+._triggerWrapper_3wijjk_21{
   display:inline-block;
 }
-._contentWrapper_1il2d95_77{
+._contentWrapper_3wijjk_25{
   position:relative;
 
   display:block;
@@ -98,42 +55,36 @@
   background-clip:padding-box;
   box-shadow:0 0 0 1px rgb(calc(209 - var(--_rs-theme-dark-coefficient, 0)*138), calc(209 - var(--_rs-theme-dark-coefficient, 0)*138), calc(210 - var(--_rs-theme-dark-coefficient, 0)*137));
 
-  transition:opacity var(--rs-transition-function, linear) 200ms, transform var(--rs-transition-function, linear) 200ms;
-}
-[data-popper-placement^='top'] ._contentWrapper_1il2d95_77{
-  animation:_fadeInBottomToTop_1il2d95_1 var(--rs-transition-function, ease) 200ms;
-}
-[data-popper-placement^='bottom'] ._contentWrapper_1il2d95_77{
-  animation:_fadeInTopToBottom_1il2d95_1 var(--rs-transition-function, ease) 200ms;
+  transition:opacity var(--rs-transition-function, ease) 200ms, transform var(--rs-transition-function, ease) 200ms;
 }
-[data-popper-placement^='right'] ._contentWrapper_1il2d95_77{
-  animation:_fadeInLeftToRight_1il2d95_1 var(--rs-transition-function, ease) 200ms;
+._wrapperInitial_3wijjk_41{
+  transition:none;
 }
-[data-popper-placement^='left'] ._contentWrapper_1il2d95_77{
-  animation:_fadeInRightToLeft_1il2d95_1 var(--rs-transition-function, ease) 200ms;
-}
-._wrapperHidden_1il2d95_110{
+._wrapperHidden_3wijjk_45{
   opacity:0;
 }
-[data-popper-placement^='top'] ._wrapperHidden_1il2d95_110{
+[data-popper-placement^='top'] ._wrapperHidden_3wijjk_45{
   transform:translateY(10px);
 }
-[data-popper-placement^='bottom'] ._wrapperHidden_1il2d95_110{
+[data-popper-placement^='bottom'] ._wrapperHidden_3wijjk_45{
   transform:translateY(-10px);
 }
-[data-popper-placement^='right'] ._wrapperHidden_1il2d95_110{
+[data-popper-placement^='right'] ._wrapperHidden_3wijjk_45{
   transform:translateX(-10px);
 }
-[data-popper-placement^='left'] ._wrapperHidden_1il2d95_110{
+[data-popper-placement^='left'] ._wrapperHidden_3wijjk_45{
   transform:translateX(10px);
 }
-._modeClassic_1il2d95_130 ._contentWrapper_1il2d95_77{
+._modeClassic_3wijjk_65 ._contentWrapper_3wijjk_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_1il2d95_134 ._contentWrapper_1il2d95_77{
+._modeRock_3wijjk_69 ._contentWrapper_3wijjk_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));
 }
-._modeRock_1il2d95_134{
+._modeClassic_3wijjk_65._themeDark_3wijjk_10 ._contentWrapper_3wijjk_25, ._modeRock_3wijjk_69._themeLight_3wijjk_7 ._contentWrapper_3wijjk_25{
+    color-scheme:dark;
+  }
+._modeRock_3wijjk_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
@@ -162,7 +113,7 @@
     --rs-color-primary-t-fog-dark-theme
   );
 }
-._modeRock_1il2d95_134 > *{
+._modeRock_3wijjk_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.d.ts

@@ -1,7 +1,17 @@
+import type { RefObject } from 'react';
 export declare enum DROPDOWN_STATES {
+    OPENING_PREPARE = "OPENING_PREPARE",
     OPENING = "OPENING",
     OPEN = "OPEN",
     CLOSING = "CLOSING",
     CLOSE = "CLOSE"
 }
-export declare function useDropdownState(isOpen: boolean, cancelCloseAnimation?: boolean): [() => void, DROPDOWN_STATES];
+type UseDropdownStateOptions = {
+    isOpen: boolean;
+    cancelCloseAnimation?: boolean;
+    contentRef: RefObject<HTMLDivElement | null>;
+    popperElement: HTMLElement | null;
+    resolvedPlacement: string | null;
+};
+export declare function useDropdownState({ isOpen, cancelCloseAnimation, contentRef, popperElement, resolvedPlacement }: UseDropdownStateOptions): DROPDOWN_STATES;
+export {};

package/lib/use-dropdown-state.js

@@ -1,36 +1,133 @@
 "use client";
-import { useState, useRef, useCallback } from 'react';
+import { useState, useCallback, useEffect, useLayoutEffect } from 'react';
+const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
+const DROPDOWN_TRANSITION_PROPERTIES = ['opacity', 'transform'];
+
+const getDropdownTransition = (element, property) => element.getAnimations().find(animation => animation.transitionProperty === property);
+
 var DROPDOWN_STATES;
 
 (function (DROPDOWN_STATES) {
+  DROPDOWN_STATES["OPENING_PREPARE"] = "OPENING_PREPARE";
   DROPDOWN_STATES["OPENING"] = "OPENING";
   DROPDOWN_STATES["OPEN"] = "OPEN";
   DROPDOWN_STATES["CLOSING"] = "CLOSING";
   DROPDOWN_STATES["CLOSE"] = "CLOSE";
 })(DROPDOWN_STATES || (DROPDOWN_STATES = {}));
 
-function useDropdownState(isOpen, cancelCloseAnimation) {
-  const [, setDummyState] = useState(false);
-  const stateRef = useRef(DROPDOWN_STATES.CLOSE);
-  const onAnimationEnd = useCallback(() => {
-    if ((stateRef.current === DROPDOWN_STATES.CLOSING || stateRef.current === DROPDOWN_STATES.OPENING) && !isOpen) {
-      stateRef.current = DROPDOWN_STATES.CLOSE; //force rerender
+function useDropdownState(_ref) {
+  let {
+    isOpen,
+    cancelCloseAnimation,
+    contentRef,
+    popperElement,
+    resolvedPlacement
+  } = _ref;
+  const [dropdownState, setDropdownState] = useState(isOpen ? DROPDOWN_STATES.OPENING_PREPARE : DROPDOWN_STATES.CLOSE);
+  const completeTransition = useCallback(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;
+    });
+  }, []);
+  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;
+    }
 
-      setDummyState(s => !s);
-    } else if (stateRef.current === DROPDOWN_STATES.OPENING && isOpen) {
-      stateRef.current = DROPDOWN_STATES.OPEN; //force rerender
+    const contentElement = contentRef.current;
 
-      setDummyState(s => !s);
+    if (!contentElement) {
+      return undefined;
     }
-  }, [isOpen]);
 
-  if (isOpen && stateRef.current !== DROPDOWN_STATES.OPEN) {
-    stateRef.current = DROPDOWN_STATES.OPENING;
-  } else if (stateRef.current === DROPDOWN_STATES.OPEN && !isOpen) {
-    stateRef.current = cancelCloseAnimation ? DROPDOWN_STATES.CLOSE : DROPDOWN_STATES.CLOSING;
+    let isCurrentPhase = true;
+
+    const completeCurrentPhase = () => {
+      if (isCurrentPhase) {
+        completeTransition(dropdownState);
+      }
+    };
+
+    const waitForCurrentTransition = (property, previousTransition) => {
+      if (!isCurrentPhase) {
+        return Promise.resolve();
+      }
+
+      const transition = getDropdownTransition(contentElement, property);
+
+      if (!transition || transition === previousTransition) {
+        return Promise.resolve();
+      }
+
+      return transition.finished.then(() => {
+        if (!isCurrentPhase) {
+          return Promise.resolve();
+        }
+
+        const replacementTransition = getDropdownTransition(contentElement, property);
+
+        if (replacementTransition && replacementTransition !== transition) {
+          return waitForCurrentTransition(property, transition);
+        }
+
+        return Promise.resolve();
+      }, () => waitForCurrentTransition(property, transition));
+    };
+
+    Promise.all(DROPDOWN_TRANSITION_PROPERTIES.map(property => waitForCurrentTransition(property))).then(completeCurrentPhase);
+    return () => {
+      isCurrentPhase = false;
+    };
+  }, [completeTransition, contentRef, dropdownState, popperElement, resolvedPlacement]); // React retries this component before rendering its children when the phase changes.
+
+  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);
   }
 
-  return [onAnimationEnd, stateRef.current];
+  return dropdownState;
 }
 
 export { DROPDOWN_STATES, useDropdownState };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/dropdown",
-  "version": "0.11.1",
+  "version": "0.11.2",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -18,7 +18,7 @@
   "dependencies": {
     "@babel/runtime-corejs3": "^7.26.0",
     "@popperjs/core": "^2.11.8",
-    "@rescui/use-resize-observer": "^0.3.3",
+    "@rescui/use-resize-observer": "^0.3.4",
     "classnames": "^2.2.6",
     "popper-max-size-modifier": "^0.2.0",
     "react-focus-lock": "^2.8.1",
@@ -31,15 +31,15 @@
     "react-dom": ">=16.8.0 <20"
   },
   "devDependencies": {
-    "@rescui/colors": "^0.3.2",
-    "@rescui/icons": "^1.8.3",
+    "@rescui/colors": "^0.3.3",
+    "@rescui/icons": "^1.8.4",
     "@rescui/scripts": "^0.5.2",
-    "@rescui/typography": "^0.27.3",
+    "@rescui/typography": "^0.27.4",
     "@rescui/visual-regression": "^0.1.4"
   },
   "scripts": {
     "build": "rescui-scripts build"
   },
   "nx": {},
-  "gitHead": "7614b4519a4716fbf1151d94c97fda48eab60800"
+  "gitHead": "3711cbfc0c797014395421b008aa5331d6d47c6e"
 }