@rescui/dropdown 0.9.6 → 0.9.7

package/lib/dropdown.js

@@ -1,5 +1,5 @@
 "use client";
-import React, { useState, useEffect, useImperativeHandle, useContext, useCallback } from 'react';
+import React, { useState, useRef, useEffect, useImperativeHandle, useContext, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 import { usePopper } from 'react-popper';
@@ -143,7 +143,8 @@ const DropdownRender = (_ref5, externalRef) => {
   const {
     setContentEl,
     scrollableStyles
-  } = useScrollableContainer(); // We set isOpen this way to avoid hydration issue due to
+  } = 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.
@@ -217,7 +218,18 @@ const DropdownRender = (_ref5, externalRef) => {
     noProvider
   } = useContext(ThemeContext);
   const theme = themeFromProps || (noProvider ? themeFromCss : themeFromContext);
-  const childrenTheme = mode === 'rock' ? getInverseTheme(theme) : theme;
+  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 isTransitionDisabled = window.getComputedStyle(scrollableRef.current).transitionDuration === '0s';
+
+      if (isTransitionDisabled) {
+        handleAnimationEnd();
+      }
+    }
+  }, [handleAnimationEnd, dropdownShouldBeRendered]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, triggerRenderer, dropdownShouldBeRendered && /*#__PURE__*/React.createElement(Portal, {
     target: renderInTrigger ? triggerRef : undefined
   }, /*#__PURE__*/React.createElement("div", {
@@ -234,6 +246,7 @@ const DropdownRender = (_ref5, externalRef) => {
   }, /*#__PURE__*/React.createElement(LayeringProvider, {
     baseLayer: 'dropdown'
   }, /*#__PURE__*/React.createElement("div", {
+    ref: scrollableRef,
     style: scrollableStyles,
     className: cn(styles.contentWrapper, wrapperShouldBeHidden && styles.wrapperHidden),
     onTransitionEnd: handleAnimationEnd,

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

@@ -1,15 +1,15 @@
 var styles = {
-  "themeLight": "_themeLight_19cuoka_60",
-  "themeDark": "_themeDark_19cuoka_63",
-  "dropdown": "_dropdown_19cuoka_67",
-  "triggerWrapper": "_triggerWrapper_19cuoka_74",
-  "contentWrapper": "_contentWrapper_19cuoka_78",
-  "fadeInBottomToTop": "_fadeInBottomToTop_19cuoka_1",
-  "fadeInTopToBottom": "_fadeInTopToBottom_19cuoka_1",
-  "fadeInLeftToRight": "_fadeInLeftToRight_19cuoka_1",
-  "fadeInRightToLeft": "_fadeInRightToLeft_19cuoka_1",
-  "wrapperHidden": "_wrapperHidden_19cuoka_109",
-  "modeClassic": "_modeClassic_19cuoka_129",
-  "modeRock": "_modeRock_19cuoka_133"
+  "themeLight": "_themeLight_12nx94k_60",
+  "themeDark": "_themeDark_12nx94k_63",
+  "dropdown": "_dropdown_12nx94k_67",
+  "triggerWrapper": "_triggerWrapper_12nx94k_74",
+  "contentWrapper": "_contentWrapper_12nx94k_78",
+  "fadeInBottomToTop": "_fadeInBottomToTop_12nx94k_1",
+  "fadeInTopToBottom": "_fadeInTopToBottom_12nx94k_1",
+  "fadeInLeftToRight": "_fadeInLeftToRight_12nx94k_1",
+  "fadeInRightToLeft": "_fadeInRightToLeft_12nx94k_1",
+  "wrapperHidden": "_wrapperHidden_12nx94k_109",
+  "modeClassic": "_modeClassic_12nx94k_129",
+  "modeRock": "_modeRock_12nx94k_133"
 };
 export { styles as default };

package/lib/index.css

@@ -1,4 +1,4 @@
-@keyframes _fadeInTopToBottom_19cuoka_1{
+@keyframes _fadeInTopToBottom_12nx94k_1{
   0%{
     opacity:0;
 
@@ -10,7 +10,7 @@
     transform:none;
   }
 }
-@keyframes _fadeInBottomToTop_19cuoka_1{
+@keyframes _fadeInBottomToTop_12nx94k_1{
   0%{
     opacity:0;
 
@@ -22,7 +22,7 @@
     transform:none;
   }
 }
-@keyframes _fadeInLeftToRight_19cuoka_1{
+@keyframes _fadeInLeftToRight_12nx94k_1{
   0%{
     opacity:0;
 
@@ -34,7 +34,7 @@
     transform:none;
   }
 }
-@keyframes _fadeInRightToLeft_19cuoka_1{
+@keyframes _fadeInRightToLeft_12nx94k_1{
   0%{
     opacity:0;
 
@@ -46,13 +46,13 @@
     transform:none;
   }
 }
-._themeLight_19cuoka_60{
+._themeLight_12nx94k_60{
   --rs-theme-dark:0;
 }
-._themeDark_19cuoka_63{
+._themeDark_12nx94k_63{
   --rs-theme-dark:1;
 }
-._dropdown_19cuoka_67{
+._dropdown_12nx94k_67{
   --_rs-theme-dark:var(
     --_rs-internal-force-theme-dark-consult-rescui-before-using,
     var(--rs-theme-dark, 0)
@@ -62,7 +62,7 @@
   --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
 }
 @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
-._dropdown_19cuoka_67{
+._dropdown_12nx94k_67{
     --_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 +71,7 @@
 }
   }
 @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
-._dropdown_19cuoka_67{
+._dropdown_12nx94k_67{
     --_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 +79,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_19cuoka_67 {
+._dropdown_12nx94k_67 {
   display:flex;
   flex-direction:column;
 }
-._triggerWrapper_19cuoka_74{
+._triggerWrapper_12nx94k_74{
   display:inline-block;
 }
-._contentWrapper_19cuoka_78{
+._contentWrapper_12nx94k_78{
   position:relative;
 
   display:block;
@@ -100,40 +100,40 @@
 
   transition:opacity linear 200ms, transform linear 200ms;
 }
-[data-popper-placement^="top" ] ._contentWrapper_19cuoka_78{
-  animation:_fadeInBottomToTop_19cuoka_1 ease 200ms;
+[data-popper-placement^="top" ] ._contentWrapper_12nx94k_78{
+  animation:_fadeInBottomToTop_12nx94k_1 ease 200ms;
 }
-[data-popper-placement^="bottom" ] ._contentWrapper_19cuoka_78{
-  animation:_fadeInTopToBottom_19cuoka_1 ease 200ms;
+[data-popper-placement^="bottom" ] ._contentWrapper_12nx94k_78{
+  animation:_fadeInTopToBottom_12nx94k_1 ease 200ms;
 }
-[data-popper-placement^="right"] ._contentWrapper_19cuoka_78{
-  animation:_fadeInLeftToRight_19cuoka_1 ease 200ms;
+[data-popper-placement^="right"] ._contentWrapper_12nx94k_78{
+  animation:_fadeInLeftToRight_12nx94k_1 ease 200ms;
 }
-[data-popper-placement^="left"] ._contentWrapper_19cuoka_78{
-  animation:_fadeInRightToLeft_19cuoka_1 ease 200ms;
+[data-popper-placement^="left"] ._contentWrapper_12nx94k_78{
+  animation:_fadeInRightToLeft_12nx94k_1 ease 200ms;
 }
-._wrapperHidden_19cuoka_109{
+._wrapperHidden_12nx94k_109{
   opacity:0;
 }
-[data-popper-placement^="top" ] ._wrapperHidden_19cuoka_109{
+[data-popper-placement^="top" ] ._wrapperHidden_12nx94k_109{
   transform:translateY(10px);
 }
-[data-popper-placement^="bottom" ] ._wrapperHidden_19cuoka_109{
+[data-popper-placement^="bottom" ] ._wrapperHidden_12nx94k_109{
   transform:translateY(-10px);
 }
-[data-popper-placement^="right"] ._wrapperHidden_19cuoka_109{
+[data-popper-placement^="right"] ._wrapperHidden_12nx94k_109{
   transform:translateX(-10px);
 }
-[data-popper-placement^="left"] ._wrapperHidden_19cuoka_109{
+[data-popper-placement^="left"] ._wrapperHidden_12nx94k_109{
   transform:translateX(10px);
 }
-._modeClassic_19cuoka_129 ._contentWrapper_19cuoka_78{
+._modeClassic_12nx94k_129 ._contentWrapper_12nx94k_78{
   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_19cuoka_133 ._contentWrapper_19cuoka_78{
+._modeRock_12nx94k_133 ._contentWrapper_12nx94k_78{
   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_19cuoka_133{
+._modeRock_12nx94k_133{
   --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);
   --rs-parent-color-primary-fog-light-theme:var(--rs-color-primary-fog-light-theme);
@@ -146,7 +146,7 @@
   --rs-parent-color-primary-t-dim-dark-theme:var(--rs-color-primary-t-dim-dark-theme);
   --rs-parent-color-primary-t-fog-dark-theme:var(--rs-color-primary-t-fog-dark-theme);
 }
-._modeRock_19cuoka_133 > *{
+._modeRock_12nx94k_133 > *{
   --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);
   --rs-color-primary-fog-dark-theme:var(--rs-parent-color-primary-fog-light-theme);

package/lib/index.d.ts

@@ -5,4 +5,4 @@
 declare const DefaultDropdown: import("react").ForwardRefExoticComponent<import("./dropdown").DropdownProps & import("react").RefAttributes<import("./dropdown").DropdownImperativeHandle>>;
 export default DefaultDropdown;
 export { Dropdown } from './dropdown';
-export type { DropdownProps } from './dropdown';
+export type { DropdownProps, DropdownImperativeHandle } from './dropdown';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/dropdown",
-  "version": "0.9.6",
+  "version": "0.9.7",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -39,5 +39,5 @@
     "build": "rescui-scripts build"
   },
   "nx": {},
-  "gitHead": "faa7a838502974c16bdf773ab001002d1b8dcca8"
+  "gitHead": "fcf55336342c842c02c07a178e9bacb9a033ef83"
 }