@rescui/dropdown 0.3.4 → 0.3.6

package/lib/dropdown.d.ts

@@ -13,10 +13,18 @@ export interface DropdownProps {
     maxHeight?: number;
     /** Least possible maxHeight value, even if there is less space let on the screen. It's not the same thing as minHeight because actual height still depends on dropdown content which can be smaller. Eg. leastMaxHeight equals to item height at DropdownMenu */
     leastMaxHeight?: number;
-    /** type DropdownMaxWidth = 'trigger' | MaxWidthProperty<string | number>; `trigger` is a special value that substitutes with trigger's width calculated on every dropdown position update */
-    maxWidth?: DropdownMaxWidth;
-    /** type DropdownMinWidth = 'trigger' | MaxWidthProperty<string | number>; `trigger` is a special value that substitutes with trigger's width calculated on every dropdown position update */
+    /**
+     * See [MDN spec](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width).
+     * `trigger` is a special value that substitutes with trigger's width calculated on every dropdown position update
+     * @type 'trigger' | MinWidthProperty<string | number>;
+     * */
     minWidth?: DropdownMinWidth;
+    /**
+     * See [MDN spec](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width).
+     * `trigger` is a special value that substitutes with trigger's width calculated on every dropdown position update
+     * @type 'trigger' | MaxWidthProperty<string | number>;
+     * */
+    maxWidth?: DropdownMaxWidth;
     className?: string;
     mode?: 'classic' | 'rock';
     placement?: Placement;

package/lib/dropdown.js

@@ -37,6 +37,7 @@ import { useLayeringContext, useTheme, LayeringProvider, ThemeProvider, getInver
 import FocusLock from 'react-focus-lock';
 import ReactDOM from 'react-dom';
 import { useDropdownState, DROPDOWN_STATES } from './use-dropdown-state.js';
+import { useScrollableContainer } from './use-scrollable-container.js';
 import styles from './index.p.module.css.js';
 import { applyMaxSize, sameWidthModifier } from './custom-modifiers.js'; // fix popper-js for IE11
 
@@ -179,6 +180,10 @@ var DropdownRender = function DropdownRender(_ref5, externalRef) {
       triggerRef = _useState4[0],
       setTriggerRef = _useState4[1];
 
+  var _useScrollableContain = useScrollableContainer(),
+      setContentEl = _useScrollableContain.setContentEl,
+      scrollableStyles = _useScrollableContain.scrollableStyles;
+
   useOnOutsideClick({
     isEnabled: isOpen,
     onOutsideClick: onRequestClose,
@@ -242,6 +247,7 @@ var DropdownRender = function DropdownRender(_ref5, externalRef) {
   }, attributes.popper), /*#__PURE__*/React.createElement(LayeringProvider, {
     baseLayer: 'dropdown'
   }, /*#__PURE__*/React.createElement("div", {
+    style: scrollableStyles,
     className: cn(styles.contentWrapper, wrapperShouldBeHidden && styles.wrapperHidden),
     onTransitionEnd: handleAnimationEnd,
     onAnimationEnd: handleAnimationEnd,
@@ -249,6 +255,7 @@ var DropdownRender = function DropdownRender(_ref5, externalRef) {
   }, /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: mode === 'rock' ? getInverseTheme(theme) : theme
   }, /*#__PURE__*/React.createElement(FocusLock, {
+    ref: setContentEl,
     disabled: dropdownState !== DROPDOWN_STATES.OPEN || disableFocusLock,
     returnFocus: {
       preventScroll: true

package/lib/index.css

@@ -1,4 +1,4 @@
-@-webkit-keyframes _fadeInTopToBottom_1ityawb_1{
+@-webkit-keyframes _fadeInTopToBottom_1dq7rl_1{
   0%{
     opacity:0;
     -webkit-transform:translateY(-10px);
@@ -10,7 +10,7 @@
             transform:none;
   }
 }
-@keyframes _fadeInTopToBottom_1ityawb_1{
+@keyframes _fadeInTopToBottom_1dq7rl_1{
   0%{
     opacity:0;
     -webkit-transform:translateY(-10px);
@@ -22,7 +22,7 @@
             transform:none;
   }
 }
-@-webkit-keyframes _fadeInBottomToTop_1ityawb_1{
+@-webkit-keyframes _fadeInBottomToTop_1dq7rl_1{
   0%{
     opacity:0;
     -webkit-transform:translateY(10px);
@@ -34,7 +34,7 @@
             transform:none;
   }
 }
-@keyframes _fadeInBottomToTop_1ityawb_1{
+@keyframes _fadeInBottomToTop_1dq7rl_1{
   0%{
     opacity:0;
     -webkit-transform:translateY(10px);
@@ -46,7 +46,7 @@
             transform:none;
   }
 }
-@-webkit-keyframes _fadeInLeftToRight_1ityawb_1{
+@-webkit-keyframes _fadeInLeftToRight_1dq7rl_1{
   0%{
     opacity:0;
     -webkit-transform:translateX(-10px);
@@ -58,7 +58,7 @@
             transform:none;
   }
 }
-@keyframes _fadeInLeftToRight_1ityawb_1{
+@keyframes _fadeInLeftToRight_1dq7rl_1{
   0%{
     opacity:0;
     -webkit-transform:translateX(-10px);
@@ -70,7 +70,7 @@
             transform:none;
   }
 }
-@-webkit-keyframes _fadeInRightToLeft_1ityawb_1{
+@-webkit-keyframes _fadeInRightToLeft_1dq7rl_1{
   0%{
     opacity:0;
     -webkit-transform:translateX(10px);
@@ -82,7 +82,7 @@
             transform:none;
   }
 }
-@keyframes _fadeInRightToLeft_1ityawb_1{
+@keyframes _fadeInRightToLeft_1dq7rl_1{
   0%{
     opacity:0;
     -webkit-transform:translateX(10px);
@@ -94,7 +94,7 @@
             transform:none;
   }
 }
-._dropdown_1ityawb_50{
+._dropdown_1dq7rl_50{
   display:-webkit-box;
   display:-ms-flexbox;
   display:flex;
@@ -103,10 +103,10 @@
       -ms-flex-direction:column;
           flex-direction:column;
 }
-._triggerWrapper_1ityawb_55{
+._triggerWrapper_1dq7rl_55{
   display:inline-block;
 }
-._contentWrapper_1ityawb_59{
+._contentWrapper_1dq7rl_59{
   display:block;
   -webkit-box-sizing:border-box;
           box-sizing:border-box;
@@ -119,58 +119,58 @@
   transition:opacity linear 200ms, transform linear 200ms;
   transition:opacity linear 200ms, transform linear 200ms, -webkit-transform linear 200ms;
 }
-[data-popper-placement^="top" ] ._contentWrapper_1ityawb_59{
-  -webkit-animation:_fadeInBottomToTop_1ityawb_1 ease 200ms;
-          animation:_fadeInBottomToTop_1ityawb_1 ease 200ms;
+[data-popper-placement^="top" ] ._contentWrapper_1dq7rl_59{
+  -webkit-animation:_fadeInBottomToTop_1dq7rl_1 ease 200ms;
+          animation:_fadeInBottomToTop_1dq7rl_1 ease 200ms;
 }
-[data-popper-placement^="bottom" ] ._contentWrapper_1ityawb_59{
-  -webkit-animation:_fadeInTopToBottom_1ityawb_1 ease 200ms;
-          animation:_fadeInTopToBottom_1ityawb_1 ease 200ms;
+[data-popper-placement^="bottom" ] ._contentWrapper_1dq7rl_59{
+  -webkit-animation:_fadeInTopToBottom_1dq7rl_1 ease 200ms;
+          animation:_fadeInTopToBottom_1dq7rl_1 ease 200ms;
 }
-[data-popper-placement^="right"] ._contentWrapper_1ityawb_59{
-  -webkit-animation:_fadeInLeftToRight_1ityawb_1 ease 200ms;
-          animation:_fadeInLeftToRight_1ityawb_1 ease 200ms;
+[data-popper-placement^="right"] ._contentWrapper_1dq7rl_59{
+  -webkit-animation:_fadeInLeftToRight_1dq7rl_1 ease 200ms;
+          animation:_fadeInLeftToRight_1dq7rl_1 ease 200ms;
 }
-[data-popper-placement^="left"] ._contentWrapper_1ityawb_59{
-  -webkit-animation:_fadeInRightToLeft_1ityawb_1 ease 200ms;
-          animation:_fadeInRightToLeft_1ityawb_1 ease 200ms;
+[data-popper-placement^="left"] ._contentWrapper_1dq7rl_59{
+  -webkit-animation:_fadeInRightToLeft_1dq7rl_1 ease 200ms;
+          animation:_fadeInRightToLeft_1dq7rl_1 ease 200ms;
 }
-._wrapperHidden_1ityawb_85{
+._wrapperHidden_1dq7rl_85{
   opacity:0;
 }
-[data-popper-placement^="top" ] ._wrapperHidden_1ityawb_85{
+[data-popper-placement^="top" ] ._wrapperHidden_1dq7rl_85{
   -webkit-transform:translateY(10px);
           transform:translateY(10px);
 }
-[data-popper-placement^="bottom" ] ._wrapperHidden_1ityawb_85{
+[data-popper-placement^="bottom" ] ._wrapperHidden_1dq7rl_85{
   -webkit-transform:translateY(-10px);
           transform:translateY(-10px);
 }
-[data-popper-placement^="right"] ._wrapperHidden_1ityawb_85{
+[data-popper-placement^="right"] ._wrapperHidden_1dq7rl_85{
   -webkit-transform:translateX(-10px);
           transform:translateX(-10px);
 }
-[data-popper-placement^="left"] ._wrapperHidden_1ityawb_85{
+[data-popper-placement^="left"] ._wrapperHidden_1dq7rl_85{
   -webkit-transform:translateX(10px);
           transform:translateX(10px);
 }
-._themeLight_1ityawb_105 ._contentWrapper_1ityawb_59{
+._themeLight_1dq7rl_105 ._contentWrapper_1dq7rl_59{
   background-color:#FFFFFF;
   -webkit-box-shadow:0 0 0 1px #D1D1D2;
           box-shadow:0 0 0 1px #D1D1D2;
 }
-._themeLight_1ityawb_105._modeRock_1ityawb_110 ._contentWrapper_1ityawb_59{
+._themeLight_1dq7rl_105._modeRock_1dq7rl_110 ._contentWrapper_1dq7rl_59{
   background-color:#19191C;
 }
-._themeDark_1ityawb_114 ._contentWrapper_1ityawb_59{
+._themeDark_1dq7rl_114 ._contentWrapper_1dq7rl_59{
   background-color:#303033;
   -webkit-box-shadow:0 0 0 1px #757577;
           box-shadow:0 0 0 1px #757577;
 }
-._themeDark_1ityawb_114._modeRock_1ityawb_110 ._contentWrapper_1ityawb_59{
+._themeDark_1dq7rl_114._modeRock_1dq7rl_110 ._contentWrapper_1dq7rl_59{
   background-color:#FFFFFF;
 }
-._modeRock_1ityawb_110{
+._modeRock_1dq7rl_110{
   --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);
@@ -183,7 +183,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_1ityawb_110 > *{
+._modeRock_1dq7rl_110 > *{
   --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.p.module.css.js

@@ -1,14 +1,14 @@
 var styles = {
-  "dropdown": "_dropdown_1ityawb_50",
-  "triggerWrapper": "_triggerWrapper_1ityawb_55",
-  "contentWrapper": "_contentWrapper_1ityawb_59",
-  "fadeInBottomToTop": "_fadeInBottomToTop_1ityawb_1",
-  "fadeInTopToBottom": "_fadeInTopToBottom_1ityawb_1",
-  "fadeInLeftToRight": "_fadeInLeftToRight_1ityawb_1",
-  "fadeInRightToLeft": "_fadeInRightToLeft_1ityawb_1",
-  "wrapperHidden": "_wrapperHidden_1ityawb_85",
-  "themeLight": "_themeLight_1ityawb_105",
-  "modeRock": "_modeRock_1ityawb_110",
-  "themeDark": "_themeDark_1ityawb_114"
+  "dropdown": "_dropdown_1dq7rl_50",
+  "triggerWrapper": "_triggerWrapper_1dq7rl_55",
+  "contentWrapper": "_contentWrapper_1dq7rl_59",
+  "fadeInBottomToTop": "_fadeInBottomToTop_1dq7rl_1",
+  "fadeInTopToBottom": "_fadeInTopToBottom_1dq7rl_1",
+  "fadeInLeftToRight": "_fadeInLeftToRight_1dq7rl_1",
+  "fadeInRightToLeft": "_fadeInRightToLeft_1dq7rl_1",
+  "wrapperHidden": "_wrapperHidden_1dq7rl_85",
+  "themeLight": "_themeLight_1dq7rl_105",
+  "modeRock": "_modeRock_1dq7rl_110",
+  "themeDark": "_themeDark_1dq7rl_114"
 };
 export { styles as default };

package/lib/use-scrollable-container.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { Property } from 'csstype';
+/**
+ * Hack for firefox and old safari.
+ * Set "overflowY: scroll" for scrollable container when there is something to scroll.
+ * Fixes situation when scrollbar takes space from the content which causes unexpected wrapping.
+ * @see https://bugzilla.mozilla.org/show_bug.cgi?id=764076
+ */
+export declare const useScrollableContainer: () => {
+    setContentEl: import("react").Dispatch<import("react").SetStateAction<HTMLElement>>;
+    scrollableStyles: {
+        overflowY: Property.OverflowY;
+    };
+};

package/lib/use-scrollable-container.js

@@ -0,0 +1,57 @@
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import { useState, useEffect } from 'react';
+
+function isOverflown(element) {
+  return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
+}
+/**
+ * Hack for firefox and old safari.
+ * Set "overflowY: scroll" for scrollable container when there is something to scroll.
+ * Fixes situation when scrollbar takes space from the content which causes unexpected wrapping.
+ * @see https://bugzilla.mozilla.org/show_bug.cgi?id=764076
+ */
+
+
+var useScrollableContainer = function useScrollableContainer() {
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      contentEl = _useState2[0],
+      setContentEl = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isScrollable = _useState4[0],
+      setIsScrollable = _useState4[1];
+
+  useEffect(function () {
+    if (contentEl && typeof ResizeObserver !== 'undefined') {
+      var containerEl = contentEl.parentElement;
+      var resizeObserver = new ResizeObserver(function (entries) {
+        // @see https://stackoverflow.com/a/58701523
+        window.requestAnimationFrame(function () {
+          if (!Array.isArray(entries) || !entries.length) {
+            return;
+          }
+
+          setIsScrollable(isOverflown(containerEl));
+        });
+      });
+      resizeObserver.observe(contentEl);
+      return function () {
+        resizeObserver.disconnect();
+      };
+    } // eslint-disable-next-line @typescript-eslint/no-empty-function
+
+
+    return function () {};
+  }, [contentEl]);
+  var scrollableStyles = {
+    overflowY: isScrollable ? 'scroll' : 'auto'
+  };
+  return {
+    setContentEl: setContentEl,
+    scrollableStyles: scrollableStyles
+  };
+};
+
+export { useScrollableContainer };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/dropdown",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -29,13 +29,13 @@
     "react-dom": ">=16.8.0 <18"
   },
   "devDependencies": {
-    "@rescui/colors": "^0.1.3",
+    "@rescui/colors": "^0.1.4",
     "@rescui/scripts": "^0.1.7",
-    "@rescui/typography": "^0.8.0",
-    "@rescui/visual-regression": "^0.0.2"
+    "@rescui/typography": "^0.8.1",
+    "@rescui/visual-regression": "^0.0.3"
   },
   "scripts": {
     "build": "rescui-scripts build"
   },
-  "gitHead": "8d0a38b912d49bd0eaa81ee1e9b3d68ae1614152"
+  "gitHead": "aa6b3b338448baec01555e65c3f6499d37d66307"
 }