@rescui/dropdown 0.8.3 → 0.8.4-RUI-262-Migrate-to-GH-Actions-Release-dummy-8695a904.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/dropdown",
-  "version": "0.8.3",
+  "version": "0.8.4-RUI-262-Migrate-to-GH-Actions-Release-dummy-8695a904.3+8695a904",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -29,15 +29,15 @@
     "react-dom": ">=16.8.0 <20"
   },
   "devDependencies": {
-    "@rescui/colors": "^0.2.10",
-    "@rescui/icons": "^1.6.0",
-    "@rescui/scripts": "^0.5.1",
-    "@rescui/typography": "^0.24.0",
-    "@rescui/visual-regression": "^0.1.2"
+    "@rescui/colors": "0.2.11-RUI-262-Migrate-to-GH-Actions-Release-dummy-8695a904.19+8695a904",
+    "@rescui/icons": "1.6.1-RUI-262-Migrate-to-GH-Actions-Release-dummy-8695a904.3+8695a904",
+    "@rescui/scripts": "0.5.1",
+    "@rescui/typography": "0.24.1-RUI-262-Migrate-to-GH-Actions-Release-dummy-8695a904.19+8695a904",
+    "@rescui/visual-regression": "0.1.2"
   },
   "scripts": {
     "build": "rescui-scripts build"
   },
   "nx": {},
-  "gitHead": "54f2d2d607806ac5698ae6e63575559f13422edc"
+  "gitHead": "8695a9042a55369f8df8f03ffd61c988cd3d3df4"
 }

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 };

package/lib/custom-modifiers.d.ts

@@ -1,12 +0,0 @@
-import type { Modifier } from 'react-popper';
-import { Property } from 'csstype';
-export declare type DropdownMaxWidth = 'trigger' | Property.MaxWidth;
-export declare type DropdownMinWidth = 'trigger' | Property.MinWidth;
-export declare const sameWidthModifier: Modifier<'sameWidth', {
-    maxWidth: DropdownMaxWidth;
-    minWidth: DropdownMinWidth;
-}>;
-export declare const applyMaxSize: Modifier<'applyMaxSize', {
-    leastMaxHeight: number;
-    maxHeight: number;
-}>;

package/lib/custom-modifiers.js

@@ -1,101 +0,0 @@
-function getMaxWidth(dropdownMaxWidth, referenceWidth) {
-  if (dropdownMaxWidth === 'trigger') {
-    return `${referenceWidth}px`;
-  } else if (typeof dropdownMaxWidth === 'number') {
-    return `${dropdownMaxWidth}px`;
-  } else if (dropdownMaxWidth) {
-    return dropdownMaxWidth;
-  }
-
-  return undefined; //rely on CSS by default
-}
-
-function getMinWidth(dropdownMinWidth, referenceWidth) {
-  if (dropdownMinWidth === 'trigger') {
-    return `${referenceWidth}px`;
-  }
-
-  if (typeof dropdownMinWidth === 'number') {
-    return `${dropdownMinWidth}px`;
-  } else if (dropdownMinWidth) {
-    return dropdownMinWidth;
-  }
-
-  return undefined; //rely on CSS by default
-}
-
-const sameWidthModifier = {
-  name: 'sameWidth',
-  enabled: true,
-  phase: 'beforeWrite',
-  requires: ['computeStyles'],
-  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: _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;
-  }
-};
-const applyMaxSize = {
-  name: 'applyMaxSize',
-  enabled: true,
-  phase: 'beforeWrite',
-  requires: ['maxSize'],
-
-  // eslint-disable-next-line complexity
-  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 = `${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
-        state.rects.popper.height = heightLeft;
-        state.reset = true;
-      }
-    } else if (heightLeft < leastMaxHeight) {
-      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
-        state.rects.popper.height = leastMaxHeight;
-        state.reset = true;
-      }
-    } else {
-      resultHeightString = `${maxHeight}px`;
-    }
-
-    state.styles.popper.maxHeight = resultHeightString;
-  }
-
-};
-export { applyMaxSize, sameWidthModifier };

package/lib/dropdown.d.ts

@@ -1,43 +0,0 @@
-import React, { ReactNode } from 'react';
-import type { ReferenceChildrenProps } from 'react-popper';
-import { Theme } from '@rescui/ui-contexts';
-import type { Placement } from '@popperjs/core';
-import { DropdownMaxWidth, DropdownMinWidth } from './custom-modifiers';
-export declare type DropdownTrigger = ((props: ReferenceChildrenProps) => JSX.Element) | JSX.Element;
-export interface DropdownProps {
-    trigger: DropdownTrigger;
-    isOpen: boolean;
-    onRequestClose?: () => void;
-    theme?: Theme;
-    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;
-    /**
-     * 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;
-    /** @ignore */
-    cancelCloseAnimation?: boolean;
-    children?: ReactNode;
-    closeOnEsc?: boolean;
-    closeOnTab?: boolean;
-    disableFocusLock?: boolean;
-    /** Render dropdown inside trigger function or wrapper. May be useful when the trigger placed in the fixed layout. */
-    renderInTrigger?: boolean;
-}
-export interface DropdownImperativeHandle {
-    scheduleUpdate: () => void;
-}
-export declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<DropdownImperativeHandle>>;
-export default Dropdown;

package/lib/dropdown.js

@@ -1,273 +0,0 @@
-"use client";
-import React, { useState, useEffect, useImperativeHandle, useContext, useCallback } from 'react';
-import PropTypes from 'prop-types';
-import cn from 'classnames';
-import { usePopper } from 'react-popper';
-import maxSizeModifier from 'popper-max-size-modifier';
-import { useLayeringContext, ThemeContext, getInverseTheme, LayeringProvider, ThemeProvider } from '@rescui/ui-contexts';
-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 './dropdown.p.module.css.js';
-import { applyMaxSize, sameWidthModifier } from './custom-modifiers.js';
-import { extractThemeFromCss, extractPrimaryColors } from './css-vars-utils.js';
-
-function getPopperOptions(_ref) {
-  let {
-    placement,
-    maxHeight,
-    leastMaxHeight,
-    maxWidth,
-    minWidth
-  } = _ref;
-  return {
-    placement,
-    modifiers: [{
-      name: 'hide',
-      enabled: false
-    }, {
-      name: 'flip',
-      enabled: true
-    }, {
-      name: 'offset',
-      enabled: true,
-      options: {
-        offset: [0, 8]
-      }
-    }, maxSizeModifier, { ...applyMaxSize,
-      options: {
-        maxHeight,
-        leastMaxHeight
-      }
-    }, { ...sameWidthModifier,
-      options: {
-        maxWidth,
-        minWidth
-      }
-    }]
-  };
-}
-
-const Portal = _ref2 => {
-  let {
-    children,
-    target = typeof window !== 'undefined' ? document.body : undefined
-  } = _ref2;
-  return target ? /*#__PURE__*/ReactDOM.createPortal(children, target) : null;
-};
-
-function useOnOutsideClick(_ref3) {
-  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;
-      }
-    }
-
-    onOutsideClick();
-  }, [onOutsideClick, ...ignoreElements]); // eslint-disable-next-line consistent-return
-
-  useEffect(() => {
-    if (isEnabled && ignoreElementRefsExists) {
-      document.addEventListener('click', handleDocumentClick, true);
-      return () => document.removeEventListener('click', handleDocumentClick, true);
-    }
-  }, [handleDocumentClick, isEnabled, ignoreElementRefsExists]);
-}
-
-function useKeyPress(_ref4) {
-  let {
-    key,
-    onKeyPress,
-    isEnabled
-  } = _ref4;
-  useEffect(() => {
-    if (!isEnabled) {
-      return;
-    }
-
-    const keyDownHandler = e => {
-      if (e.key === key) {
-        e.preventDefault();
-        onKeyPress();
-      }
-    };
-
-    document.addEventListener('keydown', keyDownHandler, true); // eslint-disable-next-line consistent-return
-
-    return () => {
-      document.removeEventListener('keydown', keyDownHandler, true);
-    };
-  }, [key, onKeyPress, isEnabled]);
-}
-
-const THEME_STYLES = {
-  light: styles.themeLight,
-  dark: styles.themeDark
-};
-const MODE_STYLES = {
-  classic: styles.modeClassic,
-  rock: styles.modeRock
-};
-
-const DropdownRender = (_ref5, externalRef) => {
-  let {
-    children,
-    trigger,
-    theme: themeFromProps,
-    isOpen: isOpenFromProps = 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(); // 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 [isFirstRender, setIsFirstRender] = useState(true);
-  useEffect(() => {
-    setIsFirstRender(false);
-  }, []);
-  const isOpen = isFirstRender && !renderInTrigger ? false : isOpenFromProps;
-  useOnOutsideClick({
-    isEnabled: isOpen,
-    onOutsideClick: onRequestClose,
-    ignoreElements: [popperRef, triggerRef]
-  });
-  useKeyPress({
-    key: 'Escape',
-    isEnabled: isOpen && closeOnEsc,
-    onKeyPress: onRequestClose
-  });
-  useKeyPress({
-    key: 'Tab',
-    isEnabled: isOpen && closeOnTab,
-    onKeyPress: onRequestClose
-  });
-  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();
-      }
-    }
-  }));
-  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);
-  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.
-    const triggerStyles = getComputedStyle(triggerRef);
-    themeFromCss = extractThemeFromCss(triggerStyles);
-    primaryColors = extractPrimaryColors(triggerStyles);
-  }
-
-  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", {
-    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", {
-    style: scrollableStyles,
-    className: cn(styles.contentWrapper, wrapperShouldBeHidden && styles.wrapperHidden),
-    onTransitionEnd: handleAnimationEnd,
-    onAnimationEnd: handleAnimationEnd,
-    "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.OPEN || disableFocusLock,
-    returnFocus: {
-      preventScroll: true
-    },
-    focusOptions: {
-      preventScroll: true
-    }
-  }, children)))))));
-};
-/* eslint-enable react/prop-types */
-
-
-const Dropdown = /*#__PURE__*/React.forwardRef(DropdownRender);
-Dropdown.propTypes = {
-  trigger: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired,
-  isOpen: PropTypes.bool.isRequired,
-  onRequestClose: PropTypes.func,
-  theme: PropTypes.oneOf(['light', 'dark']),
-  mode: PropTypes.oneOf(['classic', 'rock']),
-  placement: PropTypes.oneOf(['auto-start', 'auto', 'auto-end', 'top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-end', 'bottom', 'bottom-start', 'left-end', 'left', 'left-start']),
-  minWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  maxWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  maxHeight: PropTypes.number,
-  leastMaxHeight: PropTypes.number
-};
-export { Dropdown, Dropdown as default };

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

@@ -1,15 +0,0 @@
-var styles = {
-  "themeLight": "_themeLight_1eyuq1h_60",
-  "themeDark": "_themeDark_1eyuq1h_63",
-  "dropdown": "_dropdown_1eyuq1h_67",
-  "triggerWrapper": "_triggerWrapper_1eyuq1h_74",
-  "contentWrapper": "_contentWrapper_1eyuq1h_78",
-  "fadeInBottomToTop": "_fadeInBottomToTop_1eyuq1h_1",
-  "fadeInTopToBottom": "_fadeInTopToBottom_1eyuq1h_1",
-  "fadeInLeftToRight": "_fadeInLeftToRight_1eyuq1h_1",
-  "fadeInRightToLeft": "_fadeInRightToLeft_1eyuq1h_1",
-  "wrapperHidden": "_wrapperHidden_1eyuq1h_109",
-  "modeClassic": "_modeClassic_1eyuq1h_129",
-  "modeRock": "_modeRock_1eyuq1h_133"
-};
-export { styles as default };

package/lib/index.css

@@ -1,161 +0,0 @@
-@keyframes _fadeInTopToBottom_1eyuq1h_1{
-  0%{
-    opacity:0;
-
-    transform:translateY(-10px);
-  }
-  100%{
-    opacity:1;
-
-    transform:none;
-  }
-}
-@keyframes _fadeInBottomToTop_1eyuq1h_1{
-  0%{
-    opacity:0;
-
-    transform:translateY(10px);
-  }
-  100%{
-    opacity:1;
-
-    transform:none;
-  }
-}
-@keyframes _fadeInLeftToRight_1eyuq1h_1{
-  0%{
-    opacity:0;
-
-    transform:translateX(-10px);
-  }
-  100%{
-    opacity:1;
-
-    transform:none;
-  }
-}
-@keyframes _fadeInRightToLeft_1eyuq1h_1{
-  0%{
-    opacity:0;
-
-    transform:translateX(10px);
-  }
-  100%{
-    opacity:1;
-
-    transform:none;
-  }
-}
-._themeLight_1eyuq1h_60{
-  --rs-theme-dark:0;
-}
-._themeDark_1eyuq1h_63{
-  --rs-theme-dark:1;
-}
-._dropdown_1eyuq1h_67{
-  --_rs-theme-dark:var(
-    --_rs-internal-force-theme-dark-consult-rescui-before-using,
-    var(--rs-theme-dark, 0)
-  );
-  --_rs-theme-flip:var(--rs-theme-flip, 0);
-  --_rs-theme-dark-coefficient:calc(var(--_rs-theme-dark)*(1 - var(--_rs-theme-flip)) + var(--_rs-theme-flip)*(1 - var(--_rs-theme-dark)));
-  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
-}
-@supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
-._dropdown_1eyuq1h_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)));
-      --_rs-color-primary-t-dim:color-mix(in srgb, var(--rs-color-primary-t-dim-light-theme, rgba(107, 87, 255, 0.8)) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-t-dim-dark-theme, rgba(132, 115, 255,0.8)) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
-      --_rs-color-primary-t-fog:color-mix(in srgb, var(--rs-color-primary-t-fog-light-theme, rgba(107, 87, 255,0.2)) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-t-fog-dark-theme, rgba(132, 115, 255,0.3)) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
-}
-  }
-@supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
-._dropdown_1eyuq1h_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));
-    --_rs-color-primary-t-dim: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, 0.8);
-    --_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_1eyuq1h_67 {
-  display:flex;
-  flex-direction:column;
-}
-._triggerWrapper_1eyuq1h_74{
-  display:inline-block;
-}
-._contentWrapper_1eyuq1h_78{
-  position:relative;
-
-  display:block;
-  overflow-y:auto;
-
-  box-sizing:border-box;
-  margin:1px;
-
-  background-clip:padding-box;
-  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;
-}
-[data-popper-placement^="top" ] ._contentWrapper_1eyuq1h_78{
-  animation:_fadeInBottomToTop_1eyuq1h_1 ease 200ms;
-}
-[data-popper-placement^="bottom" ] ._contentWrapper_1eyuq1h_78{
-  animation:_fadeInTopToBottom_1eyuq1h_1 ease 200ms;
-}
-[data-popper-placement^="right"] ._contentWrapper_1eyuq1h_78{
-  animation:_fadeInLeftToRight_1eyuq1h_1 ease 200ms;
-}
-[data-popper-placement^="left"] ._contentWrapper_1eyuq1h_78{
-  animation:_fadeInRightToLeft_1eyuq1h_1 ease 200ms;
-}
-._wrapperHidden_1eyuq1h_109{
-  opacity:0;
-}
-[data-popper-placement^="top" ] ._wrapperHidden_1eyuq1h_109{
-  transform:translateY(10px);
-}
-[data-popper-placement^="bottom" ] ._wrapperHidden_1eyuq1h_109{
-  transform:translateY(-10px);
-}
-[data-popper-placement^="right"] ._wrapperHidden_1eyuq1h_109{
-  transform:translateX(-10px);
-}
-[data-popper-placement^="left"] ._wrapperHidden_1eyuq1h_109{
-  transform:translateX(10px);
-}
-._modeClassic_1eyuq1h_129 ._contentWrapper_1eyuq1h_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_1eyuq1h_133 ._contentWrapper_1eyuq1h_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_1eyuq1h_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);
-  --rs-parent-color-primary-t-dim-light-theme:var(--rs-color-primary-t-dim-light-theme);
-  --rs-parent-color-primary-t-fog-light-theme:var(--rs-color-primary-t-fog-light-theme);
-
-  --rs-parent-color-primary-dark-theme:var(--rs-color-primary-dark-theme);
-  --rs-parent-color-primary-dim-dark-theme:var(--rs-color-primary-dim-dark-theme);
-  --rs-parent-color-primary-fog-dark-theme:var(--rs-color-primary-fog-dark-theme);
-  --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_1eyuq1h_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);
-  --rs-color-primary-t-dim-dark-theme:var(--rs-parent-color-primary-t-dim-light-theme);
-  --rs-color-primary-t-fog-dark-theme:var(--rs-parent-color-primary-t-fog-light-theme);
-
-  --rs-color-primary-light-theme:var(--rs-parent-color-primary-dark-theme);
-  --rs-color-primary-dim-light-theme:var(--rs-parent-color-primary-dim-dark-theme);
-  --rs-color-primary-fog-light-theme:var(--rs-parent-color-primary-fog-dark-theme);
-  --rs-color-primary-t-dim-light-theme:var(--rs-parent-color-primary-t-dim-dark-theme);
-  --rs-color-primary-t-fog-light-theme:var(--rs-parent-color-primary-t-fog-dark-theme);
-}

package/lib/index.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-/**
- * @deprecated use named import instead
- */
-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';

package/lib/index.js

@@ -1,9 +0,0 @@
-import './index.css';
-import { Dropdown } from './dropdown.js';
-export { Dropdown } from './dropdown.js';
-/**
- * @deprecated use named import instead
- */
-
-const DefaultDropdown = Dropdown;
-export { DefaultDropdown as default };

package/lib/use-dropdown-state.d.ts

@@ -1,7 +0,0 @@
-export declare enum DROPDOWN_STATES {
-    OPENING = "OPENING",
-    OPEN = "OPEN",
-    CLOSING = "CLOSING",
-    CLOSE = "CLOSE"
-}
-export declare function useDropdownState(isOpen: boolean, cancelCloseAnimation?: boolean): [() => void, DROPDOWN_STATES];

package/lib/use-dropdown-state.js

@@ -1,36 +0,0 @@
-"use client";
-import { useState, useRef, useCallback } from 'react';
-var DROPDOWN_STATES;
-
-(function (DROPDOWN_STATES) {
-  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
-
-      setDummyState(s => !s);
-    } else if (stateRef.current === DROPDOWN_STATES.OPENING && isOpen) {
-      stateRef.current = DROPDOWN_STATES.OPEN; //force rerender
-
-      setDummyState(s => !s);
-    }
-  }, [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;
-  }
-
-  return [onAnimationEnd, stateRef.current];
-}
-
-export { DROPDOWN_STATES, useDropdownState };

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

@@ -1,14 +0,0 @@
-/// <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

@@ -1,49 +0,0 @@
-"use client";
-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
- */
-
-
-const useScrollableContainer = () => {
-  const [contentEl, setContentEl] = useState(null);
-  const [isScrollable, setIsScrollable] = useState(false);
-  useEffect(() => {
-    if (contentEl && typeof ResizeObserver !== 'undefined') {
-      const containerEl = contentEl.parentElement;
-      const resizeObserver = new ResizeObserver(entries => {
-        // @see https://stackoverflow.com/a/58701523
-        window.requestAnimationFrame(() => {
-          if (!Array.isArray(entries) || !entries.length) {
-            return;
-          }
-
-          setIsScrollable(isOverflown(containerEl));
-        });
-      });
-      resizeObserver.observe(contentEl);
-      return () => {
-        resizeObserver.disconnect();
-      };
-    } // eslint-disable-next-line @typescript-eslint/no-empty-function
-
-
-    return () => {};
-  }, [contentEl]);
-  const scrollableStyles = {
-    overflowY: isScrollable ? 'scroll' : 'auto'
-  };
-  return {
-    setContentEl,
-    scrollableStyles
-  };
-};
-
-export { useScrollableContainer };