@atlaskit/react-select 2.3.0 → 2.4.0

package/dist/esm/components/menu.js

@@ -1,243 +1,21 @@
 import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /* eslint-disable @repo/internal/react/no-unsafe-spread-props */
-import React, { createContext, useContext, useRef, useState } from 'react';
-import useLayoutEffect from 'use-isomorphic-layout-effect';
+import React from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
-import Compiled, { LoadingMessage as CompiledLoadingMessage, menuCSS as compiledMenuCSS, MenuList as CompiledMenuList, menuListCSS as compiledMenuListCSS, MenuPortal as CompiledMenuPortal, menuPortalCSS as compiledMenuPortalCSS, NoOptionsMessage as CompiledNoOptionsMessage } from '../compiled/components/menu';
-import Emotion, { LoadingMessage as EmotionLoadingMessage, menuCSS as emotionMenuCSS, MenuList as EmotionMenuList, menuListCSS as emotionMenuListCSS, MenuPortal as EmotionMenuPortal, menuPortalCSS as emotionMenuPortalCSS, NoOptionsMessage as EmotionNoOptionsMessage } from '../emotion/components/menu';
-import { animatedScrollTo, getScrollParent, getScrollTop, normalizedHeight, scrollTo } from '../utils';
-
-// ==============================
-// Menu
-// ==============================
-
-// Get Menu Placement
-// ------------------------------
-
-function getMenuPlacement(_ref) {
-  var preferredMaxHeight = _ref.maxHeight,
-    menuEl = _ref.menuEl,
-    minHeight = _ref.minHeight,
-    preferredPlacement = _ref.placement,
-    shouldScroll = _ref.shouldScroll,
-    isFixedPosition = _ref.isFixedPosition,
-    controlHeight = _ref.controlHeight;
-  var scrollParent = getScrollParent(menuEl);
-  var defaultState = {
-    placement: 'bottom',
-    maxHeight: preferredMaxHeight
-  };
-
-  // something went wrong, return default state
-  if (!menuEl || !menuEl.offsetParent) {
-    return defaultState;
-  }
-
-  // we can't trust `scrollParent.scrollHeight` --> it may increase when
-  // the menu is rendered
-  var _scrollParent$getBoun = scrollParent.getBoundingClientRect(),
-    scrollHeight = _scrollParent$getBoun.height,
-    scrollParentTop = _scrollParent$getBoun.top;
-  var _menuEl$getBoundingCl = menuEl.getBoundingClientRect(),
-    menuBottom = _menuEl$getBoundingCl.bottom,
-    menuHeight = _menuEl$getBoundingCl.height,
-    menuTop = _menuEl$getBoundingCl.top;
-  var _menuEl$offsetParent$ = menuEl.offsetParent.getBoundingClientRect(),
-    containerTop = _menuEl$offsetParent$.top;
-  var viewHeight = isFixedPosition ? window.innerHeight : normalizedHeight(scrollParent);
-  var scrollTop = getScrollTop(scrollParent);
-  // use menuTop - scrollParentTop for the actual top space of menu in the scroll container
-  var menuTopFromParent = fg('design-system-select-fix-placement') ? menuTop - scrollParentTop : menuTop;
-  var marginBottom = parseInt(getComputedStyle(menuEl).marginBottom, 10);
-  var marginTop = parseInt(getComputedStyle(menuEl).marginTop, 10);
-  var viewSpaceAbove = containerTop - marginTop;
-  var viewSpaceBelow = viewHeight - menuTopFromParent;
-  var scrollSpaceAbove = viewSpaceAbove + scrollTop;
-  var scrollSpaceBelow = scrollHeight - scrollTop - menuTopFromParent;
-  var scrollDown = menuBottom - viewHeight + scrollTop + marginBottom;
-  var scrollUp = scrollTop + menuTop - marginTop;
-  var scrollDuration = 160;
-  switch (preferredPlacement) {
-    case 'auto':
-    case 'bottom':
-      // 1: the menu will fit, do nothing
-      if (viewSpaceBelow >= menuHeight) {
-        return {
-          placement: 'bottom',
-          maxHeight: preferredMaxHeight
-        };
-      }
-
-      // 2: the menu will fit, if scrolled
-      if (scrollSpaceBelow >= menuHeight && !isFixedPosition) {
-        if (shouldScroll) {
-          animatedScrollTo(scrollParent, scrollDown, scrollDuration);
-        }
-        return {
-          placement: 'bottom',
-          maxHeight: preferredMaxHeight
-        };
-      }
-
-      // 3: the menu will fit, if constrained
-      if (!isFixedPosition && scrollSpaceBelow >= minHeight || isFixedPosition && viewSpaceBelow >= minHeight) {
-        if (shouldScroll) {
-          animatedScrollTo(scrollParent, scrollDown, scrollDuration);
-        }
-
-        // we want to provide as much of the menu as possible to the user,
-        // so give them whatever is available below rather than the minHeight.
-        var constrainedHeight = isFixedPosition ? viewSpaceBelow - marginBottom : scrollSpaceBelow - marginBottom;
-        return {
-          placement: 'bottom',
-          maxHeight: constrainedHeight
-        };
-      }
-
-      // 4. Forked beviour when there isn't enough space below
-
-      // AUTO: flip the menu, render above
-      if (preferredPlacement === 'auto' || isFixedPosition) {
-        // may need to be constrained after flipping
-        var _constrainedHeight = preferredMaxHeight;
-        var spaceAbove = isFixedPosition ? viewSpaceAbove : scrollSpaceAbove;
-        if (spaceAbove >= minHeight) {
-          _constrainedHeight = Math.min(spaceAbove - marginBottom - controlHeight, preferredMaxHeight);
-        }
-        return {
-          placement: 'top',
-          maxHeight: _constrainedHeight
-        };
-      }
-
-      // BOTTOM: allow browser to increase scrollable area and immediately set scroll
-      if (preferredPlacement === 'bottom') {
-        if (shouldScroll) {
-          scrollTo(scrollParent, scrollDown);
-        }
-        return {
-          placement: 'bottom',
-          maxHeight: preferredMaxHeight
-        };
-      }
-      break;
-    case 'top':
-      // 1: the menu will fit, do nothing
-      if (viewSpaceAbove >= menuHeight) {
-        return {
-          placement: 'top',
-          maxHeight: preferredMaxHeight
-        };
-      }
-
-      // 2: the menu will fit, if scrolled
-      if (scrollSpaceAbove >= menuHeight && !isFixedPosition) {
-        if (shouldScroll) {
-          animatedScrollTo(scrollParent, scrollUp, scrollDuration);
-        }
-        return {
-          placement: 'top',
-          maxHeight: preferredMaxHeight
-        };
-      }
-
-      // 3: the menu will fit, if constrained
-      if (!isFixedPosition && scrollSpaceAbove >= minHeight || isFixedPosition && viewSpaceAbove >= minHeight) {
-        var _constrainedHeight2 = preferredMaxHeight;
-
-        // we want to provide as much of the menu as possible to the user,
-        // so give them whatever is available below rather than the minHeight.
-        if (!isFixedPosition && scrollSpaceAbove >= minHeight || isFixedPosition && viewSpaceAbove >= minHeight) {
-          _constrainedHeight2 = isFixedPosition ? viewSpaceAbove - marginTop : scrollSpaceAbove - marginTop;
-        }
-        if (shouldScroll) {
-          animatedScrollTo(scrollParent, scrollUp, scrollDuration);
-        }
-        return {
-          placement: 'top',
-          maxHeight: _constrainedHeight2
-        };
-      }
-
-      // 4. not enough space, the browser WILL NOT increase scrollable area when
-      // absolutely positioned element rendered above the viewport (only below).
-      // Flip the menu, render below
-      return {
-        placement: 'bottom',
-        maxHeight: preferredMaxHeight
-      };
-    default:
-      throw new Error("Invalid placement provided \"".concat(preferredPlacement, "\"."));
-  }
-  return defaultState;
-}
+import Compiled, { LoadingMessage as CompiledLoadingMessage, menuCSS as compiledMenuCSS, MenuList as CompiledMenuList, menuListCSS as compiledMenuListCSS, MenuPlacer as CompiledMenuPlacer, MenuPortal as CompiledMenuPortal, menuPortalCSS as compiledMenuPortalCSS, NoOptionsMessage as CompiledNoOptionsMessage } from '../compiled/components/menu';
+import Emotion, { LoadingMessage as EmotionLoadingMessage, menuCSS as emotionMenuCSS, MenuList as EmotionMenuList, menuListCSS as emotionMenuListCSS, MenuPlacer as EmotionMenuPlacer, MenuPortal as EmotionMenuPortal, menuPortalCSS as emotionMenuPortalCSS, NoOptionsMessage as EmotionNoOptionsMessage } from '../emotion/components/menu';
 
 // Menu Component
 // ------------------------------
 
-var coercePlacement = function coercePlacement(p) {
-  return p === 'auto' ? 'bottom' : p;
-};
 export var menuCSS = function menuCSS(props) {
   return fg('compiled-react-select') ? compiledMenuCSS() : emotionMenuCSS(props);
 };
-var PortalPlacementContext = /*#__PURE__*/createContext(null);
 
 // NOTE: internal only
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export var MenuPlacer = function MenuPlacer(props) {
-  var children = props.children,
-    minMenuHeight = props.minMenuHeight,
-    maxMenuHeight = props.maxMenuHeight,
-    menuPlacement = props.menuPlacement,
-    menuPosition = props.menuPosition,
-    menuShouldScrollIntoView = props.menuShouldScrollIntoView;
-  var _ref2 = useContext(PortalPlacementContext) || {},
-    setPortalPlacement = _ref2.setPortalPlacement;
-  var ref = useRef(null);
-  var _useState = useState(maxMenuHeight),
-    _useState2 = _slicedToArray(_useState, 2),
-    maxHeight = _useState2[0],
-    setMaxHeight = _useState2[1];
-  var _useState3 = useState(null),
-    _useState4 = _slicedToArray(_useState3, 2),
-    placement = _useState4[0],
-    setPlacement = _useState4[1];
-  // The minimum height of the control
-  var controlHeight = 38;
-  useLayoutEffect(function () {
-    var menuEl = ref.current;
-    if (!menuEl) {
-      return;
-    }
-
-    // DO NOT scroll if position is fixed
-    var isFixedPosition = menuPosition === 'fixed';
-    var shouldScroll = menuShouldScrollIntoView && !isFixedPosition;
-    var state = getMenuPlacement({
-      maxHeight: maxMenuHeight,
-      menuEl: menuEl,
-      minHeight: minMenuHeight,
-      placement: menuPlacement,
-      shouldScroll: shouldScroll,
-      isFixedPosition: isFixedPosition,
-      controlHeight: controlHeight
-    });
-    setMaxHeight(state.maxHeight);
-    setPlacement(state.placement);
-    setPortalPlacement === null || setPortalPlacement === void 0 || setPortalPlacement(state.placement);
-  }, [maxMenuHeight, menuPlacement, menuPosition, menuShouldScrollIntoView, minMenuHeight, setPortalPlacement, controlHeight]);
-  return children({
-    ref: ref,
-    placerProps: _objectSpread(_objectSpread({}, props), {}, {
-      placement: placement || coercePlacement(menuPlacement),
-      maxHeight: maxHeight
-    })
-  });
+  return fg('compiled-react-select') ? /*#__PURE__*/React.createElement(CompiledMenuPlacer, props) : /*#__PURE__*/React.createElement(EmotionMenuPlacer, props);
 };
 var Menu = function Menu(props) {
   return fg('compiled-react-select') ? /*#__PURE__*/React.createElement(Compiled, props) : /*#__PURE__*/React.createElement(Emotion, props);
@@ -263,8 +41,8 @@ export var MenuList = function MenuList(props) {
 // Menu Notices
 // ==============================
 
-var noticeCSS = function noticeCSS(_ref3) {
-  _objectDestructuringEmpty(_ref3);
+var noticeCSS = function noticeCSS(_ref) {
+  _objectDestructuringEmpty(_ref);
   return {
     textAlign: 'center',
     padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-150, 12px)")

package/dist/esm/emotion/components/internal/index.js

@@ -0,0 +1,4 @@
+export { default as A11yText } from './a11y-text';
+export { default as DummyInput } from './dummy-input';
+export { default as ScrollManager } from './scroll-manager';
+export { default as RequiredInput } from './required-input';

package/dist/esm/emotion/components/internal/scroll-manager.js

@@ -0,0 +1,51 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { Fragment } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+import { css, jsx } from '@emotion/react';
+import useScrollCapture from './use-scroll-capture';
+import useScrollLock from './use-scroll-lock';
+var styles = css({
+  position: 'fixed',
+  insetBlockEnd: 0,
+  insetBlockStart: 0,
+  insetInlineEnd: 0,
+  insetInlineStart: 0
+});
+var blurSelectInput = function blurSelectInput(event) {
+  var element = event.target;
+  return element.ownerDocument.activeElement && element.ownerDocument.activeElement.blur();
+};
+export default function ScrollManager(_ref) {
+  var children = _ref.children,
+    lockEnabled = _ref.lockEnabled,
+    _ref$captureEnabled = _ref.captureEnabled,
+    captureEnabled = _ref$captureEnabled === void 0 ? true : _ref$captureEnabled,
+    onBottomArrive = _ref.onBottomArrive,
+    onBottomLeave = _ref.onBottomLeave,
+    onTopArrive = _ref.onTopArrive,
+    onTopLeave = _ref.onTopLeave;
+  var setScrollCaptureTarget = useScrollCapture({
+    isEnabled: captureEnabled,
+    onBottomArrive: onBottomArrive,
+    onBottomLeave: onBottomLeave,
+    onTopArrive: onTopArrive,
+    onTopLeave: onTopLeave
+  });
+  var setScrollLockTarget = useScrollLock({
+    isEnabled: lockEnabled
+  });
+  var targetRef = function targetRef(element) {
+    setScrollCaptureTarget(element);
+    setScrollLockTarget(element);
+  };
+  return jsx(Fragment, null, lockEnabled &&
+  // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+  jsx("div", {
+    onClick: blurSelectInput,
+    css: styles
+  }), children(targetRef));
+}

package/dist/esm/emotion/components/internal/use-scroll-capture.js

@@ -0,0 +1,126 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { supportsPassiveEvents } from '../../../utils';
+var cancelScroll = function cancelScroll(event) {
+  if (event.cancelable) {
+    event.preventDefault();
+  }
+  event.stopPropagation();
+};
+// TODO: Fill in the hook {description}.
+/**
+ * {description}.
+ */
+export default function useScrollCapture(_ref) {
+  var isEnabled = _ref.isEnabled,
+    onBottomArrive = _ref.onBottomArrive,
+    onBottomLeave = _ref.onBottomLeave,
+    onTopArrive = _ref.onTopArrive,
+    onTopLeave = _ref.onTopLeave;
+  var isBottom = useRef(false);
+  var isTop = useRef(false);
+  var touchStart = useRef(0);
+  var scrollTarget = useRef(null);
+  var handleEventDelta = useCallback(function (event, delta) {
+    if (scrollTarget.current === null) {
+      return;
+    }
+    var _scrollTarget$current = scrollTarget.current,
+      scrollTop = _scrollTarget$current.scrollTop,
+      scrollHeight = _scrollTarget$current.scrollHeight,
+      clientHeight = _scrollTarget$current.clientHeight;
+    var target = scrollTarget.current;
+    var isDeltaPositive = delta > 0;
+    var availableScroll = scrollHeight - clientHeight - scrollTop;
+    var shouldCancelScroll = false;
+
+    // reset bottom/top flags
+    if (availableScroll > delta && isBottom.current) {
+      if (onBottomLeave) {
+        onBottomLeave(event);
+      }
+      isBottom.current = false;
+    }
+    if (isDeltaPositive && isTop.current) {
+      if (onTopLeave) {
+        onTopLeave(event);
+      }
+      isTop.current = false;
+    }
+
+    // bottom limit
+    if (isDeltaPositive && delta > availableScroll) {
+      if (onBottomArrive && !isBottom.current) {
+        onBottomArrive(event);
+      }
+      target.scrollTop = scrollHeight;
+      shouldCancelScroll = true;
+      isBottom.current = true;
+
+      // top limit
+    } else if (!isDeltaPositive && -delta > scrollTop) {
+      if (onTopArrive && !isTop.current) {
+        onTopArrive(event);
+      }
+      target.scrollTop = 0;
+      shouldCancelScroll = true;
+      isTop.current = true;
+    }
+
+    // cancel scroll
+    if (shouldCancelScroll) {
+      cancelScroll(event);
+    }
+  }, [onBottomArrive, onBottomLeave, onTopArrive, onTopLeave]);
+  var onWheel = useCallback(function (event) {
+    handleEventDelta(event, event.deltaY);
+  }, [handleEventDelta]);
+  var onTouchStart = useCallback(function (event) {
+    // set touch start so we can calculate touchmove delta
+    touchStart.current = event.changedTouches[0].clientY;
+  }, []);
+  var onTouchMove = useCallback(function (event) {
+    var deltaY = touchStart.current - event.changedTouches[0].clientY;
+    handleEventDelta(event, deltaY);
+  }, [handleEventDelta]);
+  var startListening = useCallback(function (el) {
+    // bail early if no element is available to attach to
+    if (!el) {
+      return;
+    }
+    var notPassive = supportsPassiveEvents ? {
+      passive: false
+    } : false;
+    // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+    el.addEventListener('wheel', onWheel, notPassive);
+    // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+    el.addEventListener('touchstart', onTouchStart, notPassive);
+    // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+    el.addEventListener('touchmove', onTouchMove, notPassive);
+  }, [onTouchMove, onTouchStart, onWheel]);
+  var stopListening = useCallback(function (el) {
+    // bail early if no element is available to detach from
+    if (!el) {
+      return;
+    }
+
+    // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+    el.removeEventListener('wheel', onWheel, false);
+    // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+    el.removeEventListener('touchstart', onTouchStart, false);
+    // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+    el.removeEventListener('touchmove', onTouchMove, false);
+  }, [onTouchMove, onTouchStart, onWheel]);
+  useEffect(function () {
+    if (!isEnabled) {
+      return;
+    }
+    var element = scrollTarget.current;
+    startListening(element);
+    return function () {
+      stopListening(element);
+    };
+  }, [isEnabled, startListening, stopListening]);
+  return function (element) {
+    scrollTarget.current = element;
+  };
+}

package/dist/esm/emotion/components/internal/use-scroll-lock.js

@@ -0,0 +1,143 @@
+import { useCallback, useEffect, useRef } from 'react';
+var STYLE_KEYS = ['boxSizing', 'height', 'overflow', 'paddingRight', 'position'];
+var LOCK_STYLES = {
+  boxSizing: 'border-box',
+  // account for possible declaration `width: 100%;` on body
+  overflow: 'hidden',
+  position: 'relative',
+  height: '100%'
+};
+function preventTouchMove(e) {
+  e.preventDefault();
+}
+function allowTouchMove(e) {
+  e.stopPropagation();
+}
+function preventInertiaScroll() {
+  var top = this.scrollTop;
+  var totalScroll = this.scrollHeight;
+  var currentScroll = top + this.offsetHeight;
+  if (top === 0) {
+    this.scrollTop = 1;
+  } else if (currentScroll === totalScroll) {
+    this.scrollTop = top - 1;
+  }
+}
+
+// `ontouchstart` check works on most browsers
+// `maxTouchPoints` works on IE10/11 and Surface
+function isTouchDevice() {
+  // eslint-disable-next-line compat/compat
+  return 'ontouchstart' in window || navigator.maxTouchPoints;
+}
+var canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
+var activeScrollLocks = 0;
+var listenerOptions = {
+  capture: false,
+  passive: false
+};
+
+// TODO: Fill in the hook {description}.
+/**
+ * {description}.
+ */
+export default function useScrollLock(_ref) {
+  var isEnabled = _ref.isEnabled,
+    _ref$accountForScroll = _ref.accountForScrollbars,
+    accountForScrollbars = _ref$accountForScroll === void 0 ? true : _ref$accountForScroll;
+  var originalStyles = useRef({});
+  var scrollTarget = useRef(null);
+  var addScrollLock = useCallback(function (touchScrollTarget) {
+    if (!canUseDOM) {
+      return;
+    }
+    var target = document.body;
+    var targetStyle = target && target.style;
+    if (accountForScrollbars) {
+      // store any styles already applied to the body
+      STYLE_KEYS.forEach(function (key) {
+        var val = targetStyle && targetStyle[key];
+        originalStyles.current[key] = val;
+      });
+    }
+
+    // apply the lock styles and padding if this is the first scroll lock
+    if (accountForScrollbars && activeScrollLocks < 1) {
+      var currentPadding = parseInt(originalStyles.current.paddingRight, 10) || 0;
+      var clientWidth = document.body ? document.body.clientWidth : 0;
+      var adjustedPadding = window.innerWidth - clientWidth + currentPadding || 0;
+      Object.keys(LOCK_STYLES).forEach(function (key) {
+        var val = LOCK_STYLES[key];
+        if (targetStyle) {
+          targetStyle[key] = val;
+        }
+      });
+      if (targetStyle) {
+        targetStyle.paddingRight = "".concat(adjustedPadding, "px");
+      }
+    }
+
+    // account for touch devices
+    if (target && isTouchDevice()) {
+      // Mobile Safari ignores { overflow: hidden } declaration on the body.
+      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+      target.addEventListener('touchmove', preventTouchMove, listenerOptions);
+
+      // Allow scroll on provided target
+      if (touchScrollTarget) {
+        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+        touchScrollTarget.addEventListener('touchstart', preventInertiaScroll, listenerOptions);
+        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+        touchScrollTarget.addEventListener('touchmove', allowTouchMove, listenerOptions);
+      }
+    }
+
+    // increment active scroll locks
+    activeScrollLocks += 1;
+  }, [accountForScrollbars]);
+  var removeScrollLock = useCallback(function (touchScrollTarget) {
+    if (!canUseDOM) {
+      return;
+    }
+    var target = document.body;
+    var targetStyle = target && target.style;
+
+    // safely decrement active scroll locks
+    activeScrollLocks = Math.max(activeScrollLocks - 1, 0);
+
+    // reapply original body styles, if any
+    if (accountForScrollbars && activeScrollLocks < 1) {
+      STYLE_KEYS.forEach(function (key) {
+        var val = originalStyles.current[key];
+        if (targetStyle) {
+          targetStyle[key] = val;
+        }
+      });
+    }
+
+    // remove touch listeners
+    if (target && isTouchDevice()) {
+      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+      target.removeEventListener('touchmove', preventTouchMove, listenerOptions);
+      if (touchScrollTarget) {
+        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+        touchScrollTarget.removeEventListener('touchstart', preventInertiaScroll, listenerOptions);
+        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+        touchScrollTarget.removeEventListener('touchmove', allowTouchMove, listenerOptions);
+      }
+    }
+  }, [accountForScrollbars]);
+  useEffect(function () {
+    if (!isEnabled) {
+      return;
+    }
+    var element = scrollTarget.current;
+    addScrollLock(element);
+    return function () {
+      removeScrollLock(element);
+    };
+  }, [isEnabled, addScrollLock, removeScrollLock]);
+  return function (element) {
+    scrollTarget.current = element;
+  };
+}

package/dist/types/components/menu.d.ts

@@ -50,7 +50,7 @@ interface MenuPlacerProps<Option, IsMulti extends boolean, Group extends GroupBa
     children: (childrenProps: ChildrenProps) => ReactElement;
 }
 export declare const menuCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: MenuProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
-export declare const MenuPlacer: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: MenuPlacerProps<Option, IsMulti, Group>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const MenuPlacer: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: MenuPlacerProps<Option, IsMulti, Group>) => React.JSX.Element;
 declare const Menu: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: MenuProps<Option, IsMulti, Group>) => React.JSX.Element;
 export default Menu;
 export interface MenuListProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends CommonPropsAndClassName<Option, IsMulti, Group> {

package/dist/types/emotion/components/internal/index.d.ts

@@ -0,0 +1,4 @@
+export { default as A11yText } from './a11y-text';
+export { default as DummyInput } from './dummy-input';
+export { default as ScrollManager } from './scroll-manager';
+export { default as RequiredInput } from './required-input';

package/dist/types/emotion/components/internal/scroll-manager.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ReactElement, type RefCallback } from 'react';
+import { jsx } from '@emotion/react';
+interface ScrollManagerProps {
+    readonly children: (ref: RefCallback<HTMLElement>) => ReactElement;
+    readonly lockEnabled: boolean;
+    readonly captureEnabled: boolean;
+    readonly onBottomArrive?: (event: WheelEvent | TouchEvent) => void;
+    readonly onBottomLeave?: (event: WheelEvent | TouchEvent) => void;
+    readonly onTopArrive?: (event: WheelEvent | TouchEvent) => void;
+    readonly onTopLeave?: (event: WheelEvent | TouchEvent) => void;
+}
+export default function ScrollManager({ children, lockEnabled, captureEnabled, onBottomArrive, onBottomLeave, onTopArrive, onTopLeave, }: ScrollManagerProps): jsx.JSX.Element;
+export {};

package/dist/types/emotion/components/internal/use-scroll-capture.d.ts

@@ -0,0 +1,12 @@
+interface Options {
+    readonly isEnabled: boolean;
+    readonly onBottomArrive?: (event: WheelEvent | TouchEvent) => void;
+    readonly onBottomLeave?: (event: WheelEvent | TouchEvent) => void;
+    readonly onTopArrive?: (event: WheelEvent | TouchEvent) => void;
+    readonly onTopLeave?: (event: WheelEvent | TouchEvent) => void;
+}
+/**
+ * {description}.
+ */
+export default function useScrollCapture({ isEnabled, onBottomArrive, onBottomLeave, onTopArrive, onTopLeave, }: Options): (element: HTMLElement | null) => void;
+export {};

package/dist/types/emotion/components/internal/use-scroll-lock.d.ts

@@ -0,0 +1,9 @@
+interface Options {
+    readonly isEnabled: boolean;
+    readonly accountForScrollbars?: boolean;
+}
+/**
+ * {description}.
+ */
+export default function useScrollLock({ isEnabled, accountForScrollbars }: Options): (element: HTMLElement | null) => void;
+export {};

package/dist/types-ts4.5/components/menu.d.ts

@@ -50,7 +50,7 @@ interface MenuPlacerProps<Option, IsMulti extends boolean, Group extends GroupBa
     children: (childrenProps: ChildrenProps) => ReactElement;
 }
 export declare const menuCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: MenuProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
-export declare const MenuPlacer: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: MenuPlacerProps<Option, IsMulti, Group>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const MenuPlacer: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: MenuPlacerProps<Option, IsMulti, Group>) => React.JSX.Element;
 declare const Menu: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: MenuProps<Option, IsMulti, Group>) => React.JSX.Element;
 export default Menu;
 export interface MenuListProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends CommonPropsAndClassName<Option, IsMulti, Group> {

package/dist/types-ts4.5/emotion/components/internal/index.d.ts

@@ -0,0 +1,4 @@
+export { default as A11yText } from './a11y-text';
+export { default as DummyInput } from './dummy-input';
+export { default as ScrollManager } from './scroll-manager';
+export { default as RequiredInput } from './required-input';