@rescui/dropdown 0.13.2 → 0.13.3-floating-ui-migration-19bb1e9d6.6.sha-19bb1e9d6

package/lib/auto-update.d.ts

@@ -0,0 +1,7 @@
+/**
+ * `autoUpdate()` that applies a new trigger width in the next animation frame.
+ * The new width resizes the dropdown content, which `useScrollableContainer` observes.
+ * If it happens in the same ResizeObserver loop as the trigger resize, the browser can't
+ * deliver that notification and reports "ResizeObserver loop completed with undelivered notifications".
+ */
+export declare function autoUpdateDropdown(reference: Element, floating: HTMLElement, update: () => void): () => void;

package/lib/auto-update.js

@@ -0,0 +1,50 @@
+import { autoUpdate } from '@floating-ui/react-dom';
+
+/**
+ * `autoUpdate()` that applies a new trigger width in the next animation frame.
+ * The new width resizes the dropdown content, which `useScrollableContainer` observes.
+ * If it happens in the same ResizeObserver loop as the trigger resize, the browser can't
+ * deliver that notification and reports "ResizeObserver loop completed with undelivered notifications".
+ */
+function autoUpdateDropdown(reference, floating, update) {
+  const cleanupAutoUpdate = autoUpdate(reference, floating, update, {
+    elementResize: false
+  });
+  let referenceWidth = reference.getBoundingClientRect().width;
+  let updateFrame = -1;
+  let reobserveFrame = -1;
+  const resizeObserver = new ResizeObserver(entries => {
+    if (entries.some(_ref => {
+      let {
+        target
+      } = _ref;
+      return target === reference;
+    })) {
+      // Like `autoUpdate()`, stop observing the dropdown until the next frame:
+      // the new position can change its size within the same loop
+      resizeObserver.unobserve(floating);
+      cancelAnimationFrame(reobserveFrame);
+      reobserveFrame = requestAnimationFrame(() => {
+        resizeObserver.observe(floating);
+      });
+    }
+    const previousWidth = referenceWidth;
+    referenceWidth = reference.getBoundingClientRect().width;
+    if (referenceWidth !== previousWidth) {
+      cancelAnimationFrame(updateFrame);
+      updateFrame = requestAnimationFrame(update);
+    } else {
+      update();
+    }
+  });
+  resizeObserver.observe(reference);
+  resizeObserver.observe(floating);
+  return () => {
+    cleanupAutoUpdate();
+    resizeObserver.disconnect();
+    cancelAnimationFrame(updateFrame);
+    cancelAnimationFrame(reobserveFrame);
+  };
+}
+
+export { autoUpdateDropdown };

package/lib/custom-middleware.d.ts

@@ -0,0 +1,23 @@
+import type { Middleware, Placement } from '@floating-ui/react-dom';
+import { Property } from 'csstype';
+export type DropdownMaxWidth = 'trigger' | Property.MaxWidth;
+export type DropdownMinWidth = 'trigger' | Property.MinWidth;
+type AutoPlacement = 'auto' | 'auto-start' | 'auto-end';
+export type DropdownPlacement = Placement | AutoPlacement;
+export declare const isAutoPlacement: (placement: DropdownPlacement) => placement is AutoPlacement;
+/**
+ * Candidates for `autoPlacement()`, in the order Popper.js used to try them when
+ * several placements have the same space: `auto-start` and `auto-end` both try
+ * all aligned placements, `-start` first.
+ */
+export declare const AUTO_PLACEMENTS: Record<AutoPlacement, Placement[]>;
+export declare const sameWidth: ({ maxWidth, minWidth }: {
+    maxWidth?: DropdownMaxWidth;
+    minWidth?: DropdownMinWidth;
+}) => Middleware;
+export declare const applyMaxSize: ({ leastMaxHeight, maxHeight, flip }: {
+    leastMaxHeight?: number;
+    maxHeight?: number;
+    flip: boolean;
+}) => Middleware;
+export {};

package/lib/custom-middleware.js

@@ -0,0 +1,151 @@
+import { detectOverflow } from '@floating-ui/react-dom';
+
+const isAutoPlacement = placement => placement.startsWith('auto');
+const ALIGNED_PLACEMENTS = ['top-start', 'top-end', 'bottom-start', 'bottom-end', 'right-start', 'right-end', 'left-start', 'left-end'];
+/**
+ * Candidates for `autoPlacement()`, in the order Popper.js used to try them when
+ * several placements have the same space: `auto-start` and `auto-end` both try
+ * all aligned placements, `-start` first.
+ */
+const AUTO_PLACEMENTS = {
+  auto: ['top', 'bottom', 'right', 'left'],
+  'auto-start': ALIGNED_PLACEMENTS,
+  'auto-end': ALIGNED_PLACEMENTS
+};
+const OPPOSITE_SIDES = {
+  top: 'bottom',
+  bottom: 'top'
+};
+function getMaxWidth(dropdownMaxWidth, referenceWidth) {
+  if (dropdownMaxWidth === 'trigger') {
+    return `${referenceWidth}px`;
+  } else if (typeof dropdownMaxWidth === 'number') {
+    return `${dropdownMaxWidth}px`;
+  } else if (dropdownMaxWidth) {
+    return dropdownMaxWidth;
+  }
+  return ''; //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 ''; //rely on CSS by default
+}
+const sameWidth = _ref => {
+  let {
+    maxWidth,
+    minWidth
+  } = _ref;
+  return {
+    name: 'sameWidth',
+    options: {
+      maxWidth,
+      minWidth
+    },
+    async fn(_ref2) {
+      let {
+        elements,
+        platform,
+        rects
+      } = _ref2;
+      // Apply the widths right away, so the next middleware get the final size of the dropdown
+      elements.floating.style.minWidth = getMinWidth(minWidth, rects.reference.width);
+      elements.floating.style.maxWidth = getMaxWidth(maxWidth, rects.reference.width);
+      const {
+        width
+      } = await platform.getDimensions(elements.floating);
+      return width === rects.floating.width ? {} : {
+        reset: {
+          rects: true
+        }
+      };
+    }
+  };
+};
+const applyMaxSize = _ref3 => {
+  let {
+    leastMaxHeight = 0,
+    maxHeight = Infinity,
+    flip
+  } = _ref3;
+  return {
+    name: 'applyMaxSize',
+    options: {
+      leastMaxHeight,
+      maxHeight,
+      flip
+    },
+    async fn(state) {
+      const {
+        placement,
+        initialPlacement,
+        rects,
+        middlewareData,
+        elements,
+        platform
+      } = state;
+      const data = middlewareData.applyMaxSize ?? {};
+      const measuredHeight = data.measuredHeight ?? rects.floating.height;
+      const [side, alignment] = placement.split('-');
+      const overflow = await detectOverflow(state);
+      const heightLeft = rects.floating.height - overflow[side === 'top' ? 'top' : 'bottom'];
+      if (flip && !data.flipped && placement === initialPlacement && OPPOSITE_SIDES[side] && heightLeft < leastMaxHeight && measuredHeight >= leastMaxHeight) {
+        // Even `leastMaxHeight` doesn't fit: check if it fits on the opposite side
+        return {
+          data: {
+            measuredHeight,
+            flipped: true
+          },
+          reset: {
+            placement: [OPPOSITE_SIDES[side], alignment].filter(Boolean).join('-'),
+            rects: {
+              ...rects,
+              floating: {
+                ...rects.floating,
+                height: leastMaxHeight
+              }
+            }
+          }
+        };
+      }
+      let resultMaxHeight;
+      if (maxHeight > heightLeft && heightLeft > leastMaxHeight) {
+        resultMaxHeight = heightLeft;
+      } else if (heightLeft < leastMaxHeight) {
+        resultMaxHeight = leastMaxHeight;
+      } else {
+        resultMaxHeight = maxHeight;
+      }
+      const resultData = {
+        measuredHeight,
+        maxHeight: resultMaxHeight === Infinity ? undefined : resultMaxHeight
+      };
+      // Apply the limit right away and position the dropdown by its final size, it matters for the top placements.
+      // Borders, paddings and min-height make the dropdown taller than its max-height.
+      elements.floating.style.maxHeight = typeof resultData.maxHeight === 'number' ? `${resultData.maxHeight}px` : resultData.maxHeight ?? '';
+      const {
+        width,
+        height
+      } = await platform.getDimensions(elements.floating);
+      if (width !== rects.floating.width || height !== rects.floating.height) {
+        return {
+          data: resultData,
+          reset: {
+            rects: true
+          }
+        };
+      }
+      return {
+        data: resultData
+      };
+    }
+  };
+};
+
+export { AUTO_PLACEMENTS, applyMaxSize, isAutoPlacement, sameWidth };

package/lib/dropdown.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
 import type { ReactNode, JSX } 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 type DropdownTrigger = ((props: ReferenceChildrenProps) => JSX.Element) | JSX.Element;
+import { DropdownMaxWidth, DropdownMinWidth, DropdownPlacement } from './custom-middleware';
+interface DropdownTriggerProps {
+    ref: React.Ref<any>;
+}
+export type DropdownTrigger = ((props: DropdownTriggerProps) => JSX.Element) | JSX.Element;
 export interface DropdownProps {
     trigger: DropdownTrigger;
     isOpen: boolean;
@@ -27,7 +28,7 @@ export interface DropdownProps {
     maxWidth?: DropdownMaxWidth;
     className?: string;
     mode?: 'classic' | 'rock';
-    placement?: Placement;
+    placement?: DropdownPlacement;
     /** @ignore */
     cancelCloseAnimation?: boolean;
     children?: ReactNode;

package/lib/dropdown.js

@@ -3,18 +3,18 @@ import { c } from 'react-compiler-runtime';
 import React, { useState, useRef, useImperativeHandle, useContext, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
-import { usePopper } from 'react-popper';
-import maxSizeModifier from 'popper-max-size-modifier';
+import { useFloating, offset, autoPlacement, flip, shift, limitShift } from '@floating-ui/react-dom';
 import { useLayeringContext, ThemeContext, getInverseTheme, LayeringProvider, ThemeProvider } from '@rescui/ui-contexts';
 import FocusLock from 'react-focus-lock';
 import ReactDOM from 'react-dom';
+import { autoUpdateDropdown } from './auto-update.js';
 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 { isAutoPlacement, sameWidth, AUTO_PLACEMENTS, applyMaxSize } from './custom-middleware.js';
 import { useExtractCssValues } from './use-extract-css-values.js';
 
-function getPopperOptions(_ref) {
+function getMiddleware(_ref) {
   let {
     placement,
     maxHeight,
@@ -23,34 +23,21 @@ function getPopperOptions(_ref) {
     minWidth,
     disableFlip = false
   } = _ref;
-  return {
-    placement,
-    modifiers: [{
-      name: 'hide',
-      enabled: false
-    }, {
-      name: 'flip',
-      enabled: !disableFlip
-    }, {
-      name: 'offset',
-      enabled: true,
-      options: {
-        offset: [0, 8]
-      }
-    }, maxSizeModifier, {
-      ...applyMaxSize,
-      options: {
-        maxHeight,
-        leastMaxHeight
-      }
-    }, {
-      ...sameWidthModifier,
-      options: {
-        maxWidth,
-        minWidth
-      }
-    }]
-  };
+  const isAuto = isAutoPlacement(placement);
+  return [sameWidth({
+    maxWidth,
+    minWidth
+  }), offset(8), isAuto ? autoPlacement({
+    allowedPlacements: AUTO_PLACEMENTS[placement]
+  }) : !disableFlip && flip({
+    fallbackStrategy: 'initialPlacement'
+  }), shift({
+    limiter: limitShift()
+  }), applyMaxSize({
+    maxHeight,
+    leastMaxHeight,
+    flip: !isAuto && !disableFlip
+  })];
 }
 const Portal = _ref2 => {
   let {
@@ -172,7 +159,7 @@ const MODE_STYLES = {
   rock: styles.modeRock
 };
 const DropdownRender = (t0, externalRef) => {
-  const $ = c(60);
+  const $ = c(70);
   const {
     children,
     trigger,
@@ -274,8 +261,21 @@ const DropdownRender = (t0, externalRef) => {
   }
   useKeyPress(t16);
   let t17;
-  if ($[16] !== disableFlip || $[17] !== leastMaxHeight || $[18] !== maxHeight || $[19] !== maxWidth || $[20] !== minWidth || $[21] !== placement) {
-    t17 = getPopperOptions({
+  if ($[16] !== popperRef || $[17] !== triggerRef) {
+    t17 = {
+      reference: triggerRef,
+      floating: popperRef
+    };
+    $[16] = popperRef;
+    $[17] = triggerRef;
+    $[18] = t17;
+  } else {
+    t17 = $[18];
+  }
+  const t18 = isAutoPlacement(placement) ? undefined : placement;
+  let t19;
+  if ($[19] !== disableFlip || $[20] !== leastMaxHeight || $[21] !== maxHeight || $[22] !== maxWidth || $[23] !== minWidth || $[24] !== placement) {
+    t19 = getMiddleware({
       placement,
       maxHeight,
       leastMaxHeight,
@@ -283,71 +283,94 @@ const DropdownRender = (t0, externalRef) => {
       maxWidth,
       disableFlip
     });
-    $[16] = disableFlip;
-    $[17] = leastMaxHeight;
-    $[18] = maxHeight;
-    $[19] = maxWidth;
-    $[20] = minWidth;
-    $[21] = placement;
-    $[22] = t17;
+    $[19] = disableFlip;
+    $[20] = leastMaxHeight;
+    $[21] = maxHeight;
+    $[22] = maxWidth;
+    $[23] = minWidth;
+    $[24] = placement;
+    $[25] = t19;
   } else {
-    t17 = $[22];
+    t19 = $[25];
+  }
+  const t20 = popperRef !== null;
+  let t21;
+  if ($[26] !== t17 || $[27] !== t18 || $[28] !== t19 || $[29] !== t20) {
+    t21 = {
+      elements: t17,
+      placement: t18,
+      middleware: t19,
+      whileElementsMounted: autoUpdateDropdown,
+      open: t20
+    };
+    $[26] = t17;
+    $[27] = t18;
+    $[28] = t19;
+    $[29] = t20;
+    $[30] = t21;
+  } else {
+    t21 = $[30];
   }
   const {
-    styles: popperStyles,
-    attributes,
+    floatingStyles,
+    middlewareData,
+    placement: floatingPlacement,
+    isPositioned,
     update
-  } = usePopper(triggerRef ?? null, popperRef, t17);
-  const resolvedPlacement = attributes.popper?.["data-popper-placement"] ?? null;
-  let t18;
-  if ($[23] !== cancelCloseAnimation || $[24] !== isOpen || $[25] !== popperRef || $[26] !== resolvedPlacement) {
-    t18 = {
+  } = useFloating(t21);
+  const resolvedPlacement = isPositioned ? floatingPlacement : null;
+  let t22;
+  if ($[31] !== cancelCloseAnimation || $[32] !== isOpen || $[33] !== popperRef || $[34] !== resolvedPlacement) {
+    t22 = {
       isOpen,
       cancelCloseAnimation,
       contentRef: scrollableRef,
       popperElement: popperRef,
       resolvedPlacement
     };
-    $[23] = cancelCloseAnimation;
-    $[24] = isOpen;
-    $[25] = popperRef;
-    $[26] = resolvedPlacement;
-    $[27] = t18;
+    $[31] = cancelCloseAnimation;
+    $[32] = isOpen;
+    $[33] = popperRef;
+    $[34] = resolvedPlacement;
+    $[35] = t22;
   } else {
-    t18 = $[27];
+    t22 = $[35];
   }
-  const dropdownState = useDropdownState(t18);
-  let t19;
-  if ($[28] !== update) {
-    t19 = () => ({
+  const dropdownState = useDropdownState(t22);
+  let t23;
+  if ($[36] !== popperRef || $[37] !== update) {
+    t23 = () => ({
       scheduleUpdate: () => {
-        update?.();
+        if (popperRef) {
+          update();
+        }
       }
     });
-    $[28] = update;
-    $[29] = t19;
+    $[36] = popperRef;
+    $[37] = update;
+    $[38] = t23;
   } else {
-    t19 = $[29];
+    t23 = $[38];
   }
-  useImperativeHandle(externalRef, t19);
+  useImperativeHandle(externalRef, t23);
   const {
     dropdownZIndex
   } = useLayeringContext();
-  let t20;
-  if ($[30] !== trigger) {
-    t20 = typeof trigger === "function" ? trigger({
+  let t24;
+  if ($[39] !== trigger) {
+    t24 = typeof trigger === "function" ? trigger({
       ref: setTriggerRef
     }) : /*#__PURE__*/React.createElement("span", {
       "data-test": "dropdown-trigger",
       className: styles.triggerWrapper,
       ref: setTriggerRef
     }, trigger);
-    $[30] = trigger;
-    $[31] = t20;
+    $[39] = trigger;
+    $[40] = t24;
   } else {
-    t20 = $[31];
+    t24 = $[40];
   }
-  const triggerRenderer = t20;
+  const triggerRenderer = t24;
   const dropdownShouldBeRendered = dropdownState !== DROPDOWN_STATES.CLOSE;
   const wrapperIsInitial = dropdownState === DROPDOWN_STATES.OPENING_PREPARE;
   const wrapperShouldBeHidden = wrapperIsInitial || dropdownState === DROPDOWN_STATES.CLOSING;
@@ -360,31 +383,32 @@ const DropdownRender = (t0, externalRef) => {
     noProvider
   } = useContext(ThemeContext);
   const theme = themeFromProps || (noProvider ? themeFromCss : themeFromContext);
-  let t21;
-  if ($[32] !== mode || $[33] !== theme) {
-    t21 = mode === "rock" ? getInverseTheme(theme) : theme;
-    $[32] = mode;
-    $[33] = theme;
-    $[34] = t21;
+  let t25;
+  if ($[41] !== mode || $[42] !== theme) {
+    t25 = mode === "rock" ? getInverseTheme(theme) : theme;
+    $[41] = mode;
+    $[42] = theme;
+    $[43] = t25;
   } else {
-    t21 = $[34];
+    t25 = $[43];
   }
-  const childrenTheme = t21;
-  let t22;
-  if ($[35] !== attributes.popper || $[36] !== children || $[37] !== childrenTheme || $[38] !== className || $[39] !== disableFocusLock || $[40] !== dropdownShouldBeRendered || $[41] !== dropdownState || $[42] !== dropdownZIndex || $[43] !== maxHeight || $[44] !== mode || $[45] !== noProvider || $[46] !== ownerDocument?.body || $[47] !== popperStyles || $[48] !== primaryColors || $[49] !== renderInTrigger || $[50] !== scrollableStyles || $[51] !== setContentEl || $[52] !== theme || $[53] !== triggerRef || $[54] !== wrapperIsInitial || $[55] !== wrapperShouldBeHidden) {
-    t22 = dropdownShouldBeRendered && /*#__PURE__*/React.createElement(Portal, {
+  const childrenTheme = t25;
+  let t26;
+  if ($[44] !== children || $[45] !== childrenTheme || $[46] !== className || $[47] !== disableFocusLock || $[48] !== dropdownShouldBeRendered || $[49] !== dropdownState || $[50] !== dropdownZIndex || $[51] !== floatingStyles || $[52] !== maxHeight || $[53] !== middlewareData || $[54] !== mode || $[55] !== noProvider || $[56] !== ownerDocument?.body || $[57] !== primaryColors || $[58] !== renderInTrigger || $[59] !== resolvedPlacement || $[60] !== scrollableStyles || $[61] !== setContentEl || $[62] !== theme || $[63] !== triggerRef || $[64] !== wrapperIsInitial || $[65] !== wrapperShouldBeHidden) {
+    t26 = dropdownShouldBeRendered && /*#__PURE__*/React.createElement(Portal, {
       target: renderInTrigger ? triggerRef : ownerDocument?.body
-    }, /*#__PURE__*/React.createElement("div", Object.assign({
+    }, /*#__PURE__*/React.createElement("div", {
       ref: setPopperRef,
       style: {
-        maxHeight,
-        ...popperStyles.popper,
+        maxHeight: middlewareData.applyMaxSize?.maxHeight ?? maxHeight,
+        ...floatingStyles,
         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",
+      "data-popper-placement": resolvedPlacement ?? undefined
+    }, /*#__PURE__*/React.createElement(LayeringProvider, {
       baseLayer: "dropdown"
     }, /*#__PURE__*/React.createElement("div", {
       ref: scrollableRef,
@@ -405,41 +429,42 @@ const DropdownRender = (t0, externalRef) => {
         preventScroll: true
       }
     }, children))))));
-    $[35] = attributes.popper;
-    $[36] = children;
-    $[37] = childrenTheme;
-    $[38] = className;
-    $[39] = disableFocusLock;
-    $[40] = dropdownShouldBeRendered;
-    $[41] = dropdownState;
-    $[42] = dropdownZIndex;
-    $[43] = maxHeight;
-    $[44] = mode;
-    $[45] = noProvider;
-    $[46] = ownerDocument?.body;
-    $[47] = popperStyles;
-    $[48] = primaryColors;
-    $[49] = renderInTrigger;
-    $[50] = scrollableStyles;
-    $[51] = setContentEl;
-    $[52] = theme;
-    $[53] = triggerRef;
-    $[54] = wrapperIsInitial;
-    $[55] = wrapperShouldBeHidden;
-    $[56] = t22;
+    $[44] = children;
+    $[45] = childrenTheme;
+    $[46] = className;
+    $[47] = disableFocusLock;
+    $[48] = dropdownShouldBeRendered;
+    $[49] = dropdownState;
+    $[50] = dropdownZIndex;
+    $[51] = floatingStyles;
+    $[52] = maxHeight;
+    $[53] = middlewareData;
+    $[54] = mode;
+    $[55] = noProvider;
+    $[56] = ownerDocument?.body;
+    $[57] = primaryColors;
+    $[58] = renderInTrigger;
+    $[59] = resolvedPlacement;
+    $[60] = scrollableStyles;
+    $[61] = setContentEl;
+    $[62] = theme;
+    $[63] = triggerRef;
+    $[64] = wrapperIsInitial;
+    $[65] = wrapperShouldBeHidden;
+    $[66] = t26;
   } else {
-    t22 = $[56];
+    t26 = $[66];
   }
-  let t23;
-  if ($[57] !== t22 || $[58] !== triggerRenderer) {
-    t23 = /*#__PURE__*/React.createElement(React.Fragment, null, triggerRenderer, t22);
-    $[57] = t22;
-    $[58] = triggerRenderer;
-    $[59] = t23;
+  let t27;
+  if ($[67] !== t26 || $[68] !== triggerRenderer) {
+    t27 = /*#__PURE__*/React.createElement(React.Fragment, null, triggerRenderer, t26);
+    $[67] = t26;
+    $[68] = triggerRenderer;
+    $[69] = t27;
   } else {
-    t23 = $[59];
+    t27 = $[69];
   }
-  return t23;
+  return t27;
 };
 /* eslint-enable react/prop-types */
 const Dropdown = /*#__PURE__*/React.forwardRef(DropdownRender);

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

@@ -1,3 +1,3 @@
-var styles = {"themeLight":"_themeLight_1hz0kyq_7","themeDark":"_themeDark_1hz0kyq_10","dropdown":"_dropdown_1hz0kyq_14","triggerWrapper":"_triggerWrapper_1hz0kyq_21","contentWrapper":"_contentWrapper_1hz0kyq_25","wrapperInitial":"_wrapperInitial_1hz0kyq_41","wrapperHidden":"_wrapperHidden_1hz0kyq_45","modeClassic":"_modeClassic_1hz0kyq_65","modeRock":"_modeRock_1hz0kyq_69"};
+var styles = {"themeLight":"_themeLight_1tv08om_7","themeDark":"_themeDark_1tv08om_10","dropdown":"_dropdown_1tv08om_14","triggerWrapper":"_triggerWrapper_1tv08om_21","contentWrapper":"_contentWrapper_1tv08om_25","wrapperInitial":"_wrapperInitial_1tv08om_41","wrapperHidden":"_wrapperHidden_1tv08om_45","modeClassic":"_modeClassic_1tv08om_65","modeRock":"_modeRock_1tv08om_69"};
 
 export { styles as default };

package/lib/index.css

@@ -4,14 +4,14 @@
   initial-value:0;
 }
 
-._themeLight_1hz0kyq_7{
+._themeLight_1tv08om_7{
   --rs-theme-dark:0;
 }
-._themeDark_1hz0kyq_10{
+._themeDark_1tv08om_10{
   --rs-theme-dark:1;
 }
 
-._dropdown_1hz0kyq_14{
+._dropdown_1tv08om_14{
   --_rs-theme-dark:var(
     --_rs-internal-force-theme-dark-consult-rescui-before-using,
     var(--rs-theme-dark, 0)
@@ -23,7 +23,7 @@
 
 @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
 
-._dropdown_1hz0kyq_14{
+._dropdown_1tv08om_14{
     --_rs-color-primary:color-mix(in srgb, var(--rs-color-primary-light-theme, #6B57FF) calc(100% * var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, #8473FF) calc(100% * var(--_rs-theme-dark-coefficient, 0)));
     --_rs-color-primary-dim:color-mix(in srgb, var(--rs-color-primary-dim-light-theme, #8979ff) calc(100% * var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(100% * var(--_rs-theme-dark-coefficient, 0)));
     --_rs-color-primary-fog:color-mix(in srgb, var(--rs-color-primary-fog-light-theme, #e1ddff) calc(100% * var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, #2e2b49) calc(100% * var(--_rs-theme-dark-coefficient, 0)));
@@ -34,7 +34,7 @@
 
 @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
 
-._dropdown_1hz0kyq_14{
+._dropdown_1tv08om_14{
     --_rs-color-primary:rgb(calc(107 * var(--_rs-theme-light-coefficient, 1) + 132 * var(--_rs-theme-dark-coefficient, 0)), calc(87 * var(--_rs-theme-light-coefficient, 1) + 115 * var(--_rs-theme-dark-coefficient, 0)), 255);
     --_rs-color-primary-dim:rgb(calc(137 * var(--_rs-theme-light-coefficient, 1) + 111 * var(--_rs-theme-dark-coefficient, 0)), calc(121 * var(--_rs-theme-light-coefficient, 1) + 97 * var(--_rs-theme-dark-coefficient, 0)), calc(255 * var(--_rs-theme-light-coefficient, 1) + 210 * var(--_rs-theme-dark-coefficient, 0)));
     --_rs-color-primary-fog:rgb(calc(225 * var(--_rs-theme-light-coefficient, 1) + 46 * var(--_rs-theme-dark-coefficient, 0)), calc(221 * var(--_rs-theme-light-coefficient, 1) + 43 * var(--_rs-theme-dark-coefficient, 0)), calc(255 * var(--_rs-theme-light-coefficient, 1) + 73 * var(--_rs-theme-dark-coefficient, 0)));
@@ -43,16 +43,16 @@
 }
   }
 
-._dropdown_1hz0kyq_14 {
+._dropdown_1tv08om_14 {
   display:flex;
   flex-direction:column;
 }
 
-._triggerWrapper_1hz0kyq_21{
+._triggerWrapper_1tv08om_21{
   display:inline-block;
 }
 
-._contentWrapper_1hz0kyq_25{
+._contentWrapper_1tv08om_25{
   position:relative;
 
   display:block;
@@ -67,42 +67,42 @@
   transition:opacity var(--rs-transition-function, ease) 200ms, transform var(--rs-transition-function, ease) 200ms;
 }
 
-._wrapperInitial_1hz0kyq_41{
+._wrapperInitial_1tv08om_41{
   transition:none;
 }
 
-._wrapperHidden_1hz0kyq_45{
+._wrapperHidden_1tv08om_45{
   opacity:0;
 }
 
-[data-popper-placement^='top'] ._wrapperHidden_1hz0kyq_45{
+[data-popper-placement^='top'] ._wrapperHidden_1tv08om_45{
   transform:translateY(10px);
 }
 
-[data-popper-placement^='bottom'] ._wrapperHidden_1hz0kyq_45{
+[data-popper-placement^='bottom'] ._wrapperHidden_1tv08om_45{
   transform:translateY(-10px);
 }
 
-[data-popper-placement^='right'] ._wrapperHidden_1hz0kyq_45{
+[data-popper-placement^='right'] ._wrapperHidden_1tv08om_45{
   transform:translateX(-10px);
 }
 
-[data-popper-placement^='left'] ._wrapperHidden_1hz0kyq_45{
+[data-popper-placement^='left'] ._wrapperHidden_1tv08om_45{
   transform:translateX(10px);
 }
 
-._modeClassic_1hz0kyq_65 ._contentWrapper_1hz0kyq_25{
+._modeClassic_1tv08om_65 ._contentWrapper_1tv08om_25{
   background-color:rgb(calc(255 - 230 * var(--_rs-theme-dark-coefficient, 0)), calc(255 - 230 * var(--_rs-theme-dark-coefficient, 0)), calc(255 - 227 * var(--_rs-theme-dark-coefficient, 0)));
 }
 
-._modeRock_1hz0kyq_69 ._contentWrapper_1hz0kyq_25{
+._modeRock_1tv08om_69 ._contentWrapper_1tv08om_25{
   background-color:rgb(calc(25 + 230 * var(--_rs-theme-dark-coefficient, 0)), calc(25 + 230 * var(--_rs-theme-dark-coefficient, 0)), calc(28 + 227 * var(--_rs-theme-dark-coefficient, 0)));
 }
 
-._modeClassic_1hz0kyq_65._themeDark_1hz0kyq_10 ._contentWrapper_1hz0kyq_25, ._modeRock_1hz0kyq_69._themeLight_1hz0kyq_7 ._contentWrapper_1hz0kyq_25{
+._modeClassic_1tv08om_65._themeDark_1tv08om_10 ._contentWrapper_1tv08om_25, ._modeRock_1tv08om_69._themeLight_1tv08om_7 ._contentWrapper_1tv08om_25{
     color-scheme:dark;
   }
-._modeRock_1hz0kyq_69{
+._modeRock_1tv08om_69{
   --rs-parent-color-primary-light-theme:var(--rs-color-primary-light-theme);
   --rs-parent-color-primary-dim-light-theme:var(
     --rs-color-primary-dim-light-theme
@@ -132,7 +132,7 @@
   );
 }
 
-._modeRock_1hz0kyq_69 > *{
+._modeRock_1tv08om_69 > *{
   --rs-color-primary-dark-theme:var(--rs-parent-color-primary-light-theme);
   --rs-color-primary-dim-dark-theme:var(
     --rs-parent-color-primary-dim-light-theme

package/llm/components/dropdown.md

@@ -8,7 +8,7 @@ Dropdown components allow you to display content in an overlay beneath a trigger
 
 #### Fixed width example
 
-```tsx
+```jsx
 import { useState } from 'react';
 import { Dropdown } from '@rescui/dropdown';
 import { Button } from '@rescui/button';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/dropdown",
-  "version": "0.13.2",
+  "version": "0.13.3-floating-ui-migration-19bb1e9d6.6.sha-19bb1e9d6",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -16,30 +16,28 @@
     "access": "public"
   },
   "dependencies": {
-    "@popperjs/core": "^2.11.8",
-    "@rescui/use-resize-observer": "^0.5.0",
+    "@floating-ui/react-dom": "^2.1.9",
+    "@rescui/use-resize-observer": "0.5.1-floating-ui-migration-19bb1e9d6.19.sha-19bb1e9d6",
     "classnames": "^2.2.6",
-    "popper-max-size-modifier": "^0.2.0",
     "react-compiler-runtime": "^1.0.0",
-    "react-focus-lock": "^2.8.1",
-    "react-popper": "^2.2.5"
+    "react-focus-lock": "^2.8.1"
   },
   "peerDependencies": {
-    "@rescui/ui-contexts": "^0.7.0",
+    "@rescui/ui-contexts": "^0.7.0 || ^0.8.0",
     "prop-types": "^15",
     "react": ">=17.0.0 <20",
     "react-dom": ">=17.0.0 <20"
   },
   "devDependencies": {
-    "@rescui/colors": "^0.3.6",
-    "@rescui/icons": "^1.11.2",
-    "@rescui/scripts": "^0.6.0",
-    "@rescui/typography": "^0.30.1",
-    "@rescui/visual-regression": "^0.1.5"
+    "@rescui/colors": "0.3.7-floating-ui-migration-19bb1e9d6.6.sha-19bb1e9d6",
+    "@rescui/icons": "1.11.3-floating-ui-migration-19bb1e9d6.6.sha-19bb1e9d6",
+    "@rescui/scripts": "0.6.0",
+    "@rescui/typography": "0.30.2-floating-ui-migration-19bb1e9d6.6.sha-19bb1e9d6",
+    "@rescui/visual-regression": "0.1.5"
   },
   "scripts": {
     "build": "rescui-scripts build"
   },
   "nx": {},
-  "gitHead": "428fe8428862945a1199cf875bbe180ccbb71df3"
+  "gitHead": "19bb1e9d6209ed46222713346d964bc6af332c37"
 }

package/lib/custom-modifiers.d.ts

@@ -1,12 +0,0 @@
-import type { Modifier } from 'react-popper';
-import { Property } from 'csstype';
-export type DropdownMaxWidth = 'trigger' | Property.MaxWidth;
-export 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,91 +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 };