@rescui/dropdown 0.7.11 → 0.7.13-RUI-226-Update-card-cn-6e43cc89.60

package/lib/css-vars-utils.js

@@ -1,9 +1,8 @@
-import "core-js/modules/es.object.to-string.js";
-var 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 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'];
 
-var extractPrimaryColors = function extractPrimaryColors(styles) {
-  var colors = {};
-  PRIMARY_COLORS.forEach(function (varName) {
+const extractPrimaryColors = styles => {
+  const colors = {};
+  PRIMARY_COLORS.forEach(varName => {
     colors[varName] = styles.getPropertyValue(varName) || 'initial';
   });
   return colors;
@@ -11,10 +10,10 @@ var extractPrimaryColors = function extractPrimaryColors(styles) {
 /** Check out `@rescui/colors/src/public-api.p.css` file */
 
 
-var extractThemeFromCss = function extractThemeFromCss(styles) {
-  var themeDark = parseInt(styles.getPropertyValue('--rs-theme-dark'), 10) || 0;
-  var themeFlip = parseInt(styles.getPropertyValue('--rs-theme-flip'), 10) || 0;
-  var themeDarkCoefficient = themeDark * (1 - themeFlip) + themeFlip * (1 - themeDark);
+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';
 };
 

package/lib/custom-modifiers.js

@@ -1,8 +1,8 @@
 function getMaxWidth(dropdownMaxWidth, referenceWidth) {
   if (dropdownMaxWidth === 'trigger') {
-    return "".concat(referenceWidth, "px");
+    return `${referenceWidth}px`;
   } else if (typeof dropdownMaxWidth === 'number') {
-    return "".concat(dropdownMaxWidth, "px");
+    return `${dropdownMaxWidth}px`;
   } else if (dropdownMaxWidth) {
     return dropdownMaxWidth;
   }
@@ -12,11 +12,11 @@ function getMaxWidth(dropdownMaxWidth, referenceWidth) {
 
 function getMinWidth(dropdownMinWidth, referenceWidth) {
   if (dropdownMinWidth === 'trigger') {
-    return "".concat(referenceWidth, "px");
+    return `${referenceWidth}px`;
   }
 
   if (typeof dropdownMinWidth === 'number') {
-    return "".concat(dropdownMinWidth, "px");
+    return `${dropdownMinWidth}px`;
   } else if (dropdownMinWidth) {
     return dropdownMinWidth;
   }
@@ -24,50 +24,58 @@ function getMinWidth(dropdownMinWidth, referenceWidth) {
   return undefined; //rely on CSS by default
 }
 
-var sameWidthModifier = {
+const sameWidthModifier = {
   name: 'sameWidth',
   enabled: true,
   phase: 'beforeWrite',
   requires: ['computeStyles'],
-  fn: function fn(_ref) {
-    var state = _ref.state,
-        _ref$options = _ref.options;
-    _ref$options = _ref$options === void 0 ? {} : _ref$options;
-    var maxWidth = _ref$options.maxWidth,
-        minWidth = _ref$options.minWidth;
+  fn: _ref => {
+    let {
+      state,
+      options: {
+        maxWidth,
+        minWidth
+      } = {}
+    } = _ref;
     state.styles.popper.minWidth = getMinWidth(minWidth, state.rects.reference.width);
     state.styles.popper.maxWidth = getMaxWidth(maxWidth, state.rects.reference.width);
   },
-  effect: function effect(_ref2) {
-    var state = _ref2.state,
-        _ref2$options = _ref2.options;
-    _ref2$options = _ref2$options === void 0 ? {} : _ref2$options;
-    var maxWidth = _ref2$options.maxWidth,
-        minWidth = _ref2$options.minWidth;
+  effect: _ref2 => {
+    let {
+      state,
+      options: {
+        maxWidth,
+        minWidth
+      } = {}
+    } = _ref2;
     state.elements.popper.style.minWidth = getMinWidth(minWidth, state.elements.reference.offsetWidth);
     state.elements.popper.style.maxWidth = getMaxWidth(maxWidth, state.elements.reference.offsetWidth);
     return undefined;
   }
 };
-var applyMaxSize = {
+const applyMaxSize = {
   name: 'applyMaxSize',
   enabled: true,
   phase: 'beforeWrite',
   requires: ['maxSize'],
+
   // eslint-disable-next-line complexity
-  fn: function fn(_ref3) {
-    var state = _ref3.state,
-        _ref3$options = _ref3.options,
-        _ref3$options$leastMa = _ref3$options.leastMaxHeight,
-        leastMaxHeight = _ref3$options$leastMa === void 0 ? 0 : _ref3$options$leastMa,
-        _ref3$options$maxHeig = _ref3$options.maxHeight,
-        maxHeight = _ref3$options$maxHeig === void 0 ? Infinity : _ref3$options$maxHeig;
-    var height = state.modifiersData.maxSize.height;
-    var heightLeft = height;
-    var resultHeightString;
+  fn(_ref3) {
+    let {
+      state,
+      options: {
+        leastMaxHeight = 0,
+        maxHeight = Infinity
+      }
+    } = _ref3;
+    const {
+      height
+    } = state.modifiersData.maxSize;
+    const heightLeft = height;
+    let resultHeightString;
 
     if (maxHeight > heightLeft && heightLeft > leastMaxHeight) {
-      resultHeightString = "".concat(heightLeft, "px");
+      resultHeightString = `${heightLeft}px`;
 
       if (state.styles.popper.maxHeight !== resultHeightString && state.rects.popper.height >= heightLeft) {
         // change popper height for detectOverflow util to force flip modifier to find better placement
@@ -75,7 +83,7 @@ var applyMaxSize = {
         state.reset = true;
       }
     } else if (heightLeft < leastMaxHeight) {
-      resultHeightString = "".concat(leastMaxHeight, "px");
+      resultHeightString = `${leastMaxHeight}px`;
 
       if (state.styles.popper.maxHeight !== resultHeightString && state.rects.popper.height >= leastMaxHeight) {
         // change popper height for detectOverflow util to force flip modifier to find better placement
@@ -83,10 +91,11 @@ var applyMaxSize = {
         state.reset = true;
       }
     } else {
-      resultHeightString = "".concat(maxHeight, "px");
+      resultHeightString = `${maxHeight}px`;
     }
 
     state.styles.popper.maxHeight = resultHeightString;
   }
+
 };
 export { applyMaxSize, sameWidthModifier };

package/lib/dropdown.js

@@ -1,32 +1,3 @@
-import "core-js/modules/web.dom-collections.for-each.js";
-import "core-js/modules/es.function.name.js";
-import "core-js/modules/es.regexp.exec.js";
-import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
-import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
-import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
-import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
-import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
-import _Symbol from "@babel/runtime-corejs3/core-js-stable/symbol";
-import _getIteratorMethod from "@babel/runtime-corejs3/core-js/get-iterator-method";
-import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-import _toConsumableArray from "@babel/runtime-corejs3/helpers/esm/toConsumableArray";
-import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-
-function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof _Symbol !== "undefined" && _getIteratorMethod(o) || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
-
-function _unsupportedIterableToArray(o, minLen) { var _context2; if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = _sliceInstanceProperty(_context2 = Object.prototype.toString.call(o)).call(_context2, 8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return _Array$from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-import "core-js/modules/es.object.to-string.js";
-
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import React, { useState, useImperativeHandle, useContext, useCallback, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
@@ -42,13 +13,15 @@ import { applyMaxSize, sameWidthModifier } from './custom-modifiers.js';
 import { extractThemeFromCss, extractPrimaryColors } from './css-vars-utils.js';
 
 function getPopperOptions(_ref) {
-  var placement = _ref.placement,
-      maxHeight = _ref.maxHeight,
-      leastMaxHeight = _ref.leastMaxHeight,
-      maxWidth = _ref.maxWidth,
-      minWidth = _ref.minWidth;
+  let {
+    placement,
+    maxHeight,
+    leastMaxHeight,
+    maxWidth,
+    minWidth
+  } = _ref;
   return {
-    placement: placement,
+    placement,
     modifiers: [{
       name: 'hide',
       enabled: false
@@ -61,76 +34,65 @@ function getPopperOptions(_ref) {
       options: {
         offset: [0, 8]
       }
-    }, maxSizeModifier, _objectSpread(_objectSpread({}, applyMaxSize), {}, {
+    }, maxSizeModifier, { ...applyMaxSize,
       options: {
-        maxHeight: maxHeight,
-        leastMaxHeight: leastMaxHeight
+        maxHeight,
+        leastMaxHeight
       }
-    }), _objectSpread(_objectSpread({}, sameWidthModifier), {}, {
+    }, { ...sameWidthModifier,
       options: {
-        maxWidth: maxWidth,
-        minWidth: minWidth
+        maxWidth,
+        minWidth
       }
-    })]
+    }]
   };
 }
 
-var Portal = function Portal(_ref2) {
-  var children = _ref2.children,
-      _ref2$target = _ref2.target,
-      target = _ref2$target === void 0 ? document.body : _ref2$target;
+const Portal = _ref2 => {
+  let {
+    children,
+    target = document.body
+  } = _ref2;
   return /*#__PURE__*/ReactDOM.createPortal(children, target);
 };
 
 function useOnOutsideClick(_ref3) {
-  var _context;
-
-  var onOutsideClick = _ref3.onOutsideClick,
-      isEnabled = _ref3.isEnabled,
-      _ref3$ignoreElements = _ref3.ignoreElements,
-      ignoreElements = _ref3$ignoreElements === void 0 ? [] : _ref3$ignoreElements;
-  var ignoreElementRefsExists = ignoreElements.length > 0 && ignoreElements.every(Boolean);
-  var handleDocumentClick = useCallback(function (e) {
-    var _iterator = _createForOfIteratorHelper(ignoreElements),
-        _step;
-
-    try {
-      for (_iterator.s(); !(_step = _iterator.n()).done;) {
-        var element = _step.value;
-
-        if (!element || e.target === element || element.contains(e.target)) {
-          return;
-        }
+  let {
+    onOutsideClick,
+    isEnabled,
+    ignoreElements = []
+  } = _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;
       }
-    } catch (err) {
-      _iterator.e(err);
-    } finally {
-      _iterator.f();
     }
 
     onOutsideClick();
-  }, _concatInstanceProperty(_context = [onOutsideClick]).call(_context, _toConsumableArray(ignoreElements))); // eslint-disable-next-line consistent-return
+  }, [onOutsideClick, ...ignoreElements]); // eslint-disable-next-line consistent-return
 
-  useEffect(function () {
+  useEffect(() => {
     if (isEnabled && ignoreElementRefsExists) {
       document.addEventListener('click', handleDocumentClick, true);
-      return function () {
-        return document.removeEventListener('click', handleDocumentClick, true);
-      };
+      return () => document.removeEventListener('click', handleDocumentClick, true);
     }
   }, [handleDocumentClick, isEnabled, ignoreElementRefsExists]);
 }
 
 function useKeyPress(_ref4) {
-  var key = _ref4.key,
-      onKeyPress = _ref4.onKeyPress,
-      isEnabled = _ref4.isEnabled;
-  useEffect(function () {
+  let {
+    key,
+    onKeyPress,
+    isEnabled
+  } = _ref4;
+  useEffect(() => {
     if (!isEnabled) {
       return;
     }
 
-    var keyDownHandler = function keyDownHandler(e) {
+    const keyDownHandler = e => {
       if (e.key === key) {
         e.preventDefault();
         onKeyPress();
@@ -139,63 +101,48 @@ function useKeyPress(_ref4) {
 
     document.addEventListener('keydown', keyDownHandler, true); // eslint-disable-next-line consistent-return
 
-    return function () {
+    return () => {
       document.removeEventListener('keydown', keyDownHandler, true);
     };
   }, [key, onKeyPress, isEnabled]);
 }
 
-var THEME_STYLES = {
+const THEME_STYLES = {
   light: styles.themeLight,
   dark: styles.themeDark
 };
-var MODE_STYLES = {
+const MODE_STYLES = {
   classic: styles.modeClassic,
   rock: styles.modeRock
 };
 
-var DropdownRender = function DropdownRender(_ref5, externalRef) {
-  var children = _ref5.children,
-      trigger = _ref5.trigger,
-      themeFromProps = _ref5.theme,
-      _ref5$isOpen = _ref5.isOpen,
-      isOpen = _ref5$isOpen === void 0 ? false : _ref5$isOpen,
-      _ref5$placement = _ref5.placement,
-      placement = _ref5$placement === void 0 ? 'bottom-start' : _ref5$placement,
-      _ref5$mode = _ref5.mode,
-      mode = _ref5$mode === void 0 ? 'classic' : _ref5$mode,
-      _ref5$onRequestClose = _ref5.onRequestClose,
-      onRequestClose = _ref5$onRequestClose === void 0 ? function () {} : _ref5$onRequestClose,
-      minWidth = _ref5.minWidth,
-      maxWidth = _ref5.maxWidth,
-      maxHeight = _ref5.maxHeight,
-      leastMaxHeight = _ref5.leastMaxHeight,
-      _ref5$cancelCloseAnim = _ref5.cancelCloseAnimation,
-      cancelCloseAnimation = _ref5$cancelCloseAnim === void 0 ? false : _ref5$cancelCloseAnim,
-      className = _ref5.className,
-      _ref5$closeOnEsc = _ref5.closeOnEsc,
-      closeOnEsc = _ref5$closeOnEsc === void 0 ? true : _ref5$closeOnEsc,
-      _ref5$closeOnTab = _ref5.closeOnTab,
-      closeOnTab = _ref5$closeOnTab === void 0 ? false : _ref5$closeOnTab,
-      _ref5$disableFocusLoc = _ref5.disableFocusLock,
-      disableFocusLock = _ref5$disableFocusLoc === void 0 ? false : _ref5$disableFocusLoc,
-      _ref5$renderInTrigger = _ref5.renderInTrigger,
-      renderInTrigger = _ref5$renderInTrigger === void 0 ? false : _ref5$renderInTrigger;
-
-  var _useState = useState(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      popperRef = _useState2[0],
-      setPopperRef = _useState2[1];
-
-  var _useState3 = useState(null),
-      _useState4 = _slicedToArray(_useState3, 2),
-      triggerRef = _useState4[0],
-      setTriggerRef = _useState4[1];
-
-  var _useScrollableContain = useScrollableContainer(),
-      setContentEl = _useScrollableContain.setContentEl,
-      scrollableStyles = _useScrollableContain.scrollableStyles;
-
+const DropdownRender = (_ref5, externalRef) => {
+  let {
+    children,
+    trigger,
+    theme: themeFromProps,
+    isOpen = false,
+    placement = 'bottom-start',
+    mode = 'classic',
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onRequestClose = () => {},
+    minWidth,
+    maxWidth,
+    maxHeight,
+    leastMaxHeight,
+    cancelCloseAnimation = false,
+    className,
+    closeOnEsc = true,
+    closeOnTab = false,
+    disableFocusLock = false,
+    renderInTrigger = false
+  } = _ref5;
+  const [popperRef, setPopperRef] = useState(null);
+  const [triggerRef, setTriggerRef] = useState(null);
+  const {
+    setContentEl,
+    scrollableStyles
+  } = useScrollableContainer();
   useOnOutsideClick({
     isEnabled: isOpen,
     onOutsideClick: onRequestClose,
@@ -211,76 +158,70 @@ var DropdownRender = function DropdownRender(_ref5, externalRef) {
     isEnabled: isOpen && closeOnTab,
     onKeyPress: onRequestClose
   });
-
-  var _useDropdownState = useDropdownState(isOpen, cancelCloseAnimation),
-      _useDropdownState2 = _slicedToArray(_useDropdownState, 2),
-      handleAnimationEnd = _useDropdownState2[0],
-      dropdownState = _useDropdownState2[1];
-
-  var _usePopper = usePopper(triggerRef, popperRef, getPopperOptions({
-    placement: placement,
-    maxHeight: maxHeight,
-    leastMaxHeight: leastMaxHeight,
-    minWidth: minWidth,
-    maxWidth: maxWidth
-  })),
-      popperStyles = _usePopper.styles,
-      attributes = _usePopper.attributes,
-      update = _usePopper.update;
-
-  useImperativeHandle(externalRef, function () {
-    return {
-      scheduleUpdate: function scheduleUpdate() {
-        if (update) {
-          update();
-        }
+  const [handleAnimationEnd, dropdownState] = useDropdownState(isOpen, cancelCloseAnimation);
+  const {
+    styles: popperStyles,
+    attributes,
+    update
+  } = usePopper(triggerRef, popperRef, getPopperOptions({
+    placement,
+    maxHeight,
+    leastMaxHeight,
+    minWidth,
+    maxWidth
+  }));
+  useImperativeHandle(externalRef, () => ({
+    scheduleUpdate: () => {
+      if (update) {
+        update();
       }
-    };
-  });
-
-  var _useLayeringContext = useLayeringContext(),
-      dropdownZIndex = _useLayeringContext.dropdownZIndex;
-
-  var triggerRenderer = typeof trigger === 'function' ? trigger({
+    }
+  }));
+  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);
-  var dropdownShouldBeRendered = dropdownState !== DROPDOWN_STATES.CLOSE;
-  var wrapperShouldBeHidden = dropdownState === DROPDOWN_STATES.CLOSING;
-  var primaryColors = {};
-  var themeFromCss = 'light';
+  const dropdownShouldBeRendered = dropdownState !== DROPDOWN_STATES.CLOSE;
+  const wrapperShouldBeHidden = 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.
-    var triggerStyles = getComputedStyle(triggerRef);
+    const triggerStyles = getComputedStyle(triggerRef);
     themeFromCss = extractThemeFromCss(triggerStyles);
     primaryColors = extractPrimaryColors(triggerStyles);
   }
 
-  var _useContext = useContext(ThemeContext),
-      themeFromContext = _useContext.theme,
-      noProvider = _useContext.noProvider;
-
-  var theme = themeFromProps || (noProvider ? themeFromCss : themeFromContext);
-  var childrenTheme = mode === 'rock' ? getInverseTheme(theme) : theme;
+  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 : undefined
-  }, /*#__PURE__*/React.createElement("div", _objectSpread({
+  }, /*#__PURE__*/React.createElement("div", {
     ref: setPopperRef,
-    style: _objectSpread(_objectSpread({
-      maxHeight: maxHeight
-    }, popperStyles.popper), {}, {
-      zIndex: dropdownZIndex
-    }, primaryColors),
+    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, {
+    "data-test": "dropdown",
+    ...attributes.popper
+  }, /*#__PURE__*/React.createElement(LayeringProvider, {
     baseLayer: 'dropdown'
   }, /*#__PURE__*/React.createElement("div", {
     style: scrollableStyles,
@@ -306,7 +247,7 @@ var DropdownRender = function DropdownRender(_ref5, externalRef) {
 /* eslint-enable react/prop-types */
 
 
-var Dropdown = /*#__PURE__*/React.forwardRef(DropdownRender);
+const Dropdown = /*#__PURE__*/React.forwardRef(DropdownRender);
 Dropdown.propTypes = {
   trigger: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired,
   isOpen: PropTypes.bool.isRequired,

package/lib/index.css

@@ -1,138 +1,58 @@
-@-webkit-keyframes _fadeInTopToBottom_1ezf27x_1{
+@keyframes _fadeInTopToBottom_1vwuw64_1{
   0%{
     opacity:0;
 
-    -webkit-transform:translateY(-10px);
-
-            transform:translateY(-10px);
-  }
-  100%{
-    opacity:1;
-
-    -webkit-transform:none;
-
-            transform:none;
-  }
-}
-@keyframes _fadeInTopToBottom_1ezf27x_1{
-  0%{
-    opacity:0;
-
-    -webkit-transform:translateY(-10px);
-
-            transform:translateY(-10px);
-  }
-  100%{
-    opacity:1;
-
-    -webkit-transform:none;
-
-            transform:none;
-  }
-}
-@-webkit-keyframes _fadeInBottomToTop_1ezf27x_1{
-  0%{
-    opacity:0;
-
-    -webkit-transform:translateY(10px);
-
-            transform:translateY(10px);
-  }
-  100%{
-    opacity:1;
-
-    -webkit-transform:none;
-
-            transform:none;
-  }
-}
-@keyframes _fadeInBottomToTop_1ezf27x_1{
-  0%{
-    opacity:0;
-
-    -webkit-transform:translateY(10px);
-
-            transform:translateY(10px);
-  }
-  100%{
-    opacity:1;
-
-    -webkit-transform:none;
-
-            transform:none;
-  }
-}
-@-webkit-keyframes _fadeInLeftToRight_1ezf27x_1{
-  0%{
-    opacity:0;
-
-    -webkit-transform:translateX(-10px);
-
-            transform:translateX(-10px);
+    transform:translateY(-10px);
   }
   100%{
     opacity:1;
 
-    -webkit-transform:none;
-
-            transform:none;
+    transform:none;
   }
 }
-@keyframes _fadeInLeftToRight_1ezf27x_1{
+@keyframes _fadeInBottomToTop_1vwuw64_1{
   0%{
     opacity:0;
 
-    -webkit-transform:translateX(-10px);
-
-            transform:translateX(-10px);
+    transform:translateY(10px);
   }
   100%{
     opacity:1;
 
-    -webkit-transform:none;
-
-            transform:none;
+    transform:none;
   }
 }
-@-webkit-keyframes _fadeInRightToLeft_1ezf27x_1{
+@keyframes _fadeInLeftToRight_1vwuw64_1{
   0%{
     opacity:0;
 
-    -webkit-transform:translateX(10px);
-
-            transform:translateX(10px);
+    transform:translateX(-10px);
   }
   100%{
     opacity:1;
 
-    -webkit-transform:none;
-
-            transform:none;
+    transform:none;
   }
 }
-@keyframes _fadeInRightToLeft_1ezf27x_1{
+@keyframes _fadeInRightToLeft_1vwuw64_1{
   0%{
     opacity:0;
 
-    -webkit-transform:translateX(10px);
-
-            transform:translateX(10px);
+    transform:translateX(10px);
   }
   100%{
     opacity:1;
 
-    -webkit-transform:none;
-
-            transform:none;
+    transform:none;
   }
 }
-._themeLight_1ezf27x_60{
+._themeLight_1vwuw64_60{
   --rs-theme-dark:0;
 }
-._themeDark_1ezf27x_63{
+._themeDark_1vwuw64_63{
   --rs-theme-dark:1;
 }
-._dropdown_1ezf27x_67{
+._dropdown_1vwuw64_67{
   --_rs-theme-dark:var(
     --_rs-internal-force-theme-dark-consult-rescui-before-using,
     var(--rs-theme-dark, 0)
@@ -142,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_1ezf27x_67{
+._dropdown_1vwuw64_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)));
@@ -151,7 +71,7 @@
 }
   }
 @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
-._dropdown_1ezf27x_67{
+._dropdown_1vwuw64_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));
@@ -159,83 +79,61 @@
     --_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_1ezf27x_67 {
-  display:-webkit-box;
-  display:-ms-flexbox;
+._dropdown_1vwuw64_67 {
   display:flex;
-  -webkit-box-orient:vertical;
-  -webkit-box-direction:normal;
-      -ms-flex-direction:column;
-          flex-direction:column;
+  flex-direction:column;
 }
-._triggerWrapper_1ezf27x_74{
+._triggerWrapper_1vwuw64_74{
   display:inline-block;
 }
-._contentWrapper_1ezf27x_78{
+._contentWrapper_1vwuw64_78{
   position:relative;
 
   display:block;
   overflow-y:auto;
 
-  -webkit-box-sizing:border-box;
-
-          box-sizing:border-box;
+  box-sizing:border-box;
   margin:1px;
 
   background-clip:padding-box;
-  -webkit-box-shadow:0 0 0 1px rgb(calc(209 - var(--_rs-theme-dark-coefficient, 0)*92), calc(209 - var(--_rs-theme-dark-coefficient, 0)*92), calc(210 - var(--_rs-theme-dark-coefficient, 0)*91));
-          box-shadow:0 0 0 1px rgb(calc(209 - var(--_rs-theme-dark-coefficient, 0)*92), calc(209 - var(--_rs-theme-dark-coefficient, 0)*92), calc(210 - var(--_rs-theme-dark-coefficient, 0)*91));
-
-  -webkit-transition:opacity linear 200ms, -webkit-transform linear 200ms;
-
-  transition:opacity linear 200ms, -webkit-transform linear 200ms;
+  box-shadow:0 0 0 1px rgb(calc(209 - var(--_rs-theme-dark-coefficient, 0)*92), calc(209 - var(--_rs-theme-dark-coefficient, 0)*92), calc(210 - var(--_rs-theme-dark-coefficient, 0)*91));
 
   transition:opacity linear 200ms, transform linear 200ms;
-
-  transition:opacity linear 200ms, transform linear 200ms, -webkit-transform linear 200ms;
 }
-[data-popper-placement^="top" ] ._contentWrapper_1ezf27x_78{
-  -webkit-animation:_fadeInBottomToTop_1ezf27x_1 ease 200ms;
-          animation:_fadeInBottomToTop_1ezf27x_1 ease 200ms;
+[data-popper-placement^="top" ] ._contentWrapper_1vwuw64_78{
+  animation:_fadeInBottomToTop_1vwuw64_1 ease 200ms;
 }
-[data-popper-placement^="bottom" ] ._contentWrapper_1ezf27x_78{
-  -webkit-animation:_fadeInTopToBottom_1ezf27x_1 ease 200ms;
-          animation:_fadeInTopToBottom_1ezf27x_1 ease 200ms;
+[data-popper-placement^="bottom" ] ._contentWrapper_1vwuw64_78{
+  animation:_fadeInTopToBottom_1vwuw64_1 ease 200ms;
 }
-[data-popper-placement^="right"] ._contentWrapper_1ezf27x_78{
-  -webkit-animation:_fadeInLeftToRight_1ezf27x_1 ease 200ms;
-          animation:_fadeInLeftToRight_1ezf27x_1 ease 200ms;
+[data-popper-placement^="right"] ._contentWrapper_1vwuw64_78{
+  animation:_fadeInLeftToRight_1vwuw64_1 ease 200ms;
 }
-[data-popper-placement^="left"] ._contentWrapper_1ezf27x_78{
-  -webkit-animation:_fadeInRightToLeft_1ezf27x_1 ease 200ms;
-          animation:_fadeInRightToLeft_1ezf27x_1 ease 200ms;
+[data-popper-placement^="left"] ._contentWrapper_1vwuw64_78{
+  animation:_fadeInRightToLeft_1vwuw64_1 ease 200ms;
 }
-._wrapperHidden_1ezf27x_109{
+._wrapperHidden_1vwuw64_109{
   opacity:0;
 }
-[data-popper-placement^="top" ] ._wrapperHidden_1ezf27x_109{
-  -webkit-transform:translateY(10px);
-          transform:translateY(10px);
+[data-popper-placement^="top" ] ._wrapperHidden_1vwuw64_109{
+  transform:translateY(10px);
 }
-[data-popper-placement^="bottom" ] ._wrapperHidden_1ezf27x_109{
-  -webkit-transform:translateY(-10px);
-          transform:translateY(-10px);
+[data-popper-placement^="bottom" ] ._wrapperHidden_1vwuw64_109{
+  transform:translateY(-10px);
 }
-[data-popper-placement^="right"] ._wrapperHidden_1ezf27x_109{
-  -webkit-transform:translateX(-10px);
-          transform:translateX(-10px);
+[data-popper-placement^="right"] ._wrapperHidden_1vwuw64_109{
+  transform:translateX(-10px);
 }
-[data-popper-placement^="left"] ._wrapperHidden_1ezf27x_109{
-  -webkit-transform:translateX(10px);
-          transform:translateX(10px);
+[data-popper-placement^="left"] ._wrapperHidden_1vwuw64_109{
+  transform:translateX(10px);
 }
-._modeClassic_1ezf27x_129 ._contentWrapper_1ezf27x_78{
+._modeClassic_1vwuw64_129 ._contentWrapper_1vwuw64_78{
   background-color:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*207), calc(255 - var(--_rs-theme-dark-coefficient, 0)*207), calc(255 - var(--_rs-theme-dark-coefficient, 0)*204));
 }
-._modeRock_1ezf27x_133 ._contentWrapper_1ezf27x_78{
+._modeRock_1vwuw64_133 ._contentWrapper_1vwuw64_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_1ezf27x_133{
+._modeRock_1vwuw64_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);
@@ -248,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_1ezf27x_133 > *{
+._modeRock_1vwuw64_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.js

@@ -5,5 +5,5 @@ export { Dropdown } from './dropdown.js';
  * @deprecated use named import instead
  */
 
-var DefaultDropdown = Dropdown;
+const DefaultDropdown = Dropdown;
 export { DefaultDropdown as default };

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

@@ -1,15 +1,15 @@
 var styles = {
-  "themeLight": "_themeLight_1ezf27x_60",
-  "themeDark": "_themeDark_1ezf27x_63",
-  "dropdown": "_dropdown_1ezf27x_67",
-  "triggerWrapper": "_triggerWrapper_1ezf27x_74",
-  "contentWrapper": "_contentWrapper_1ezf27x_78",
-  "fadeInBottomToTop": "_fadeInBottomToTop_1ezf27x_1",
-  "fadeInTopToBottom": "_fadeInTopToBottom_1ezf27x_1",
-  "fadeInLeftToRight": "_fadeInLeftToRight_1ezf27x_1",
-  "fadeInRightToLeft": "_fadeInRightToLeft_1ezf27x_1",
-  "wrapperHidden": "_wrapperHidden_1ezf27x_109",
-  "modeClassic": "_modeClassic_1ezf27x_129",
-  "modeRock": "_modeRock_1ezf27x_133"
+  "themeLight": "_themeLight_1vwuw64_60",
+  "themeDark": "_themeDark_1vwuw64_63",
+  "dropdown": "_dropdown_1vwuw64_67",
+  "triggerWrapper": "_triggerWrapper_1vwuw64_74",
+  "contentWrapper": "_contentWrapper_1vwuw64_78",
+  "fadeInBottomToTop": "_fadeInBottomToTop_1vwuw64_1",
+  "fadeInTopToBottom": "_fadeInTopToBottom_1vwuw64_1",
+  "fadeInLeftToRight": "_fadeInLeftToRight_1vwuw64_1",
+  "fadeInRightToLeft": "_fadeInRightToLeft_1vwuw64_1",
+  "wrapperHidden": "_wrapperHidden_1vwuw64_109",
+  "modeClassic": "_modeClassic_1vwuw64_129",
+  "modeRock": "_modeRock_1vwuw64_133"
 };
 export { styles as default };

package/lib/use-dropdown-state.js

@@ -1,4 +1,3 @@
-import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import { useState, useRef, useCallback } from 'react';
 var DROPDOWN_STATES;
 
@@ -10,24 +9,17 @@ var DROPDOWN_STATES;
 })(DROPDOWN_STATES || (DROPDOWN_STATES = {}));
 
 function useDropdownState(isOpen, cancelCloseAnimation) {
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      setDummyState = _useState2[1];
-
-  var stateRef = useRef(DROPDOWN_STATES.CLOSE);
-  var onAnimationEnd = useCallback(function () {
+  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
 
-      setDummyState(function (s) {
-        return !s;
-      });
+      setDummyState(s => !s);
     } else if (stateRef.current === DROPDOWN_STATES.OPENING && isOpen) {
       stateRef.current = DROPDOWN_STATES.OPEN; //force rerender
 
-      setDummyState(function (s) {
-        return !s;
-      });
+      setDummyState(s => !s);
     }
   }, [isOpen]);
 

package/lib/use-scrollable-container.js

@@ -1,4 +1,3 @@
-import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import { useState, useEffect } from 'react';
 
 function isOverflown(element) {
@@ -12,23 +11,15 @@ function isOverflown(element) {
  */
 
 
-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 () {
+const useScrollableContainer = () => {
+  const [contentEl, setContentEl] = useState(null);
+  const [isScrollable, setIsScrollable] = useState(false);
+  useEffect(() => {
     if (contentEl && typeof ResizeObserver !== 'undefined') {
-      var containerEl = contentEl.parentElement;
-      var resizeObserver = new ResizeObserver(function (entries) {
+      const containerEl = contentEl.parentElement;
+      const resizeObserver = new ResizeObserver(entries => {
         // @see https://stackoverflow.com/a/58701523
-        window.requestAnimationFrame(function () {
+        window.requestAnimationFrame(() => {
           if (!Array.isArray(entries) || !entries.length) {
             return;
           }
@@ -37,20 +28,20 @@ var useScrollableContainer = function useScrollableContainer() {
         });
       });
       resizeObserver.observe(contentEl);
-      return function () {
+      return () => {
         resizeObserver.disconnect();
       };
     } // eslint-disable-next-line @typescript-eslint/no-empty-function
 
 
-    return function () {};
+    return () => {};
   }, [contentEl]);
-  var scrollableStyles = {
+  const scrollableStyles = {
     overflowY: isScrollable ? 'scroll' : 'auto'
   };
   return {
-    setContentEl: setContentEl,
-    scrollableStyles: scrollableStyles
+    setContentEl,
+    scrollableStyles
   };
 };
 

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@rescui/dropdown",
-  "version": "0.7.11",
+  "version": "0.7.13-RUI-226-Update-card-cn-6e43cc89.60+6e43cc89",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
   "main": "lib/index.js",
+  "module": "lib/index.js",
   "src:main": "src/index.ts",
   "files": [
     "lib",
@@ -14,10 +15,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@babel/runtime-corejs3": "^7.11.0",
+    "@babel/runtime-corejs3": "^7.26.0",
     "@popperjs/core": "^2.9.2",
     "classnames": "^2.2.6",
-    "core-js": "^3.9.1",
     "popper-max-size-modifier": "^0.2.0",
     "react-focus-lock": "^2.8.1",
     "react-popper": "^2.2.5"
@@ -29,15 +29,15 @@
     "react-dom": ">=16.8.0 <19"
   },
   "devDependencies": {
-    "@rescui/colors": "^0.2.5",
-    "@rescui/icons": "^0.16.11",
-    "@rescui/scripts": "^0.3.4",
-    "@rescui/typography": "^0.19.0",
-    "@rescui/visual-regression": "^0.1.2"
+    "@rescui/colors": "0.2.7-RUI-226-Update-card-cn-6e43cc89.60+6e43cc89",
+    "@rescui/icons": "0.16.13-RUI-226-Update-card-cn-6e43cc89.60+6e43cc89",
+    "@rescui/scripts": "0.4.0",
+    "@rescui/typography": "0.19.2-RUI-226-Update-card-cn-6e43cc89.60+6e43cc89",
+    "@rescui/visual-regression": "0.1.2"
   },
   "scripts": {
     "build": "rescui-scripts build"
   },
   "nx": {},
-  "gitHead": "3ef429c66a082b71861a814ba508693c68a94842"
+  "gitHead": "6e43cc893fafb22b990273901bc0a070fb15761f"
 }