@atlaskit/react-select 2.3.0 → 2.4.0

package/dist/es2019/components/menu.js

@@ -1,237 +1,17 @@
 /* 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({
-  maxHeight: preferredMaxHeight,
-  menuEl,
-  minHeight,
-  placement: preferredPlacement,
-  shouldScroll,
-  isFixedPosition,
-  controlHeight
-}) {
-  const scrollParent = getScrollParent(menuEl);
-  const 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
-  const {
-    height: scrollHeight,
-    top: scrollParentTop
-  } = scrollParent.getBoundingClientRect();
-  const {
-    bottom: menuBottom,
-    height: menuHeight,
-    top: menuTop
-  } = menuEl.getBoundingClientRect();
-  const {
-    top: containerTop
-  } = menuEl.offsetParent.getBoundingClientRect();
-  const viewHeight = isFixedPosition ? window.innerHeight : normalizedHeight(scrollParent);
-  const scrollTop = getScrollTop(scrollParent);
-  // use menuTop - scrollParentTop for the actual top space of menu in the scroll container
-  const menuTopFromParent = fg('design-system-select-fix-placement') ? menuTop - scrollParentTop : menuTop;
-  const marginBottom = parseInt(getComputedStyle(menuEl).marginBottom, 10);
-  const marginTop = parseInt(getComputedStyle(menuEl).marginTop, 10);
-  const viewSpaceAbove = containerTop - marginTop;
-  const viewSpaceBelow = viewHeight - menuTopFromParent;
-  const scrollSpaceAbove = viewSpaceAbove + scrollTop;
-  const scrollSpaceBelow = scrollHeight - scrollTop - menuTopFromParent;
-  const scrollDown = menuBottom - viewHeight + scrollTop + marginBottom;
-  const scrollUp = scrollTop + menuTop - marginTop;
-  const 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.
-        const 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
-        let constrainedHeight = preferredMaxHeight;
-        const 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) {
-        let constrainedHeight = 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) {
-          constrainedHeight = isFixedPosition ? viewSpaceAbove - marginTop : scrollSpaceAbove - marginTop;
-        }
-        if (shouldScroll) {
-          animatedScrollTo(scrollParent, scrollUp, scrollDuration);
-        }
-        return {
-          placement: 'top',
-          maxHeight: constrainedHeight
-        };
-      }
-
-      // 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 "${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
 // ------------------------------
 
-const coercePlacement = p => p === 'auto' ? 'bottom' : p;
 export const menuCSS = props => fg('compiled-react-select') ? compiledMenuCSS() : emotionMenuCSS(props);
-const PortalPlacementContext = /*#__PURE__*/createContext(null);
 
 // NOTE: internal only
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
-export const MenuPlacer = props => {
-  const {
-    children,
-    minMenuHeight,
-    maxMenuHeight,
-    menuPlacement,
-    menuPosition,
-    menuShouldScrollIntoView
-  } = props;
-  const {
-    setPortalPlacement
-  } = useContext(PortalPlacementContext) || {};
-  const ref = useRef(null);
-  const [maxHeight, setMaxHeight] = useState(maxMenuHeight);
-  const [placement, setPlacement] = useState(null);
-  // The minimum height of the control
-  const controlHeight = 38;
-  useLayoutEffect(() => {
-    const menuEl = ref.current;
-    if (!menuEl) {
-      return;
-    }
-
-    // DO NOT scroll if position is fixed
-    const isFixedPosition = menuPosition === 'fixed';
-    const shouldScroll = menuShouldScrollIntoView && !isFixedPosition;
-    const state = getMenuPlacement({
-      maxHeight: maxMenuHeight,
-      menuEl,
-      minHeight: minMenuHeight,
-      placement: menuPlacement,
-      shouldScroll,
-      isFixedPosition,
-      controlHeight
-    });
-    setMaxHeight(state.maxHeight);
-    setPlacement(state.placement);
-    setPortalPlacement === null || setPortalPlacement === void 0 ? void 0 : setPortalPlacement(state.placement);
-  }, [maxMenuHeight, menuPlacement, menuPosition, menuShouldScrollIntoView, minMenuHeight, setPortalPlacement, controlHeight]);
-  return children({
-    ref,
-    placerProps: {
-      ...props,
-      placement: placement || coercePlacement(menuPlacement),
-      maxHeight
-    }
-  });
-};
+export const MenuPlacer = props => fg('compiled-react-select') ? /*#__PURE__*/React.createElement(CompiledMenuPlacer, props) : /*#__PURE__*/React.createElement(EmotionMenuPlacer, props);
 const Menu = props => fg('compiled-react-select') ? /*#__PURE__*/React.createElement(Compiled, props) : /*#__PURE__*/React.createElement(Emotion, props);
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/es2019/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/es2019/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';
+const styles = css({
+  position: 'fixed',
+  insetBlockEnd: 0,
+  insetBlockStart: 0,
+  insetInlineEnd: 0,
+  insetInlineStart: 0
+});
+const blurSelectInput = event => {
+  const element = event.target;
+  return element.ownerDocument.activeElement && element.ownerDocument.activeElement.blur();
+};
+export default function ScrollManager({
+  children,
+  lockEnabled,
+  captureEnabled = true,
+  onBottomArrive,
+  onBottomLeave,
+  onTopArrive,
+  onTopLeave
+}) {
+  const setScrollCaptureTarget = useScrollCapture({
+    isEnabled: captureEnabled,
+    onBottomArrive,
+    onBottomLeave,
+    onTopArrive,
+    onTopLeave
+  });
+  const setScrollLockTarget = useScrollLock({
+    isEnabled: lockEnabled
+  });
+  const 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/es2019/emotion/components/internal/use-scroll-capture.js

@@ -0,0 +1,128 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { supportsPassiveEvents } from '../../../utils';
+const cancelScroll = event => {
+  if (event.cancelable) {
+    event.preventDefault();
+  }
+  event.stopPropagation();
+};
+// TODO: Fill in the hook {description}.
+/**
+ * {description}.
+ */
+export default function useScrollCapture({
+  isEnabled,
+  onBottomArrive,
+  onBottomLeave,
+  onTopArrive,
+  onTopLeave
+}) {
+  const isBottom = useRef(false);
+  const isTop = useRef(false);
+  const touchStart = useRef(0);
+  const scrollTarget = useRef(null);
+  const handleEventDelta = useCallback((event, delta) => {
+    if (scrollTarget.current === null) {
+      return;
+    }
+    const {
+      scrollTop,
+      scrollHeight,
+      clientHeight
+    } = scrollTarget.current;
+    const target = scrollTarget.current;
+    const isDeltaPositive = delta > 0;
+    const availableScroll = scrollHeight - clientHeight - scrollTop;
+    let 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]);
+  const onWheel = useCallback(event => {
+    handleEventDelta(event, event.deltaY);
+  }, [handleEventDelta]);
+  const onTouchStart = useCallback(event => {
+    // set touch start so we can calculate touchmove delta
+    touchStart.current = event.changedTouches[0].clientY;
+  }, []);
+  const onTouchMove = useCallback(event => {
+    const deltaY = touchStart.current - event.changedTouches[0].clientY;
+    handleEventDelta(event, deltaY);
+  }, [handleEventDelta]);
+  const startListening = useCallback(el => {
+    // bail early if no element is available to attach to
+    if (!el) {
+      return;
+    }
+    const 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]);
+  const stopListening = useCallback(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(() => {
+    if (!isEnabled) {
+      return;
+    }
+    const element = scrollTarget.current;
+    startListening(element);
+    return () => {
+      stopListening(element);
+    };
+  }, [isEnabled, startListening, stopListening]);
+  return element => {
+    scrollTarget.current = element;
+  };
+}

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

@@ -0,0 +1,143 @@
+import { useCallback, useEffect, useRef } from 'react';
+const STYLE_KEYS = ['boxSizing', 'height', 'overflow', 'paddingRight', 'position'];
+const 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() {
+  const top = this.scrollTop;
+  const totalScroll = this.scrollHeight;
+  const 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;
+}
+const canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
+let activeScrollLocks = 0;
+const listenerOptions = {
+  capture: false,
+  passive: false
+};
+
+// TODO: Fill in the hook {description}.
+/**
+ * {description}.
+ */
+export default function useScrollLock({
+  isEnabled,
+  accountForScrollbars = true
+}) {
+  const originalStyles = useRef({});
+  const scrollTarget = useRef(null);
+  const addScrollLock = useCallback(touchScrollTarget => {
+    if (!canUseDOM) {
+      return;
+    }
+    const target = document.body;
+    const targetStyle = target && target.style;
+    if (accountForScrollbars) {
+      // store any styles already applied to the body
+      STYLE_KEYS.forEach(key => {
+        const 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) {
+      const currentPadding = parseInt(originalStyles.current.paddingRight, 10) || 0;
+      const clientWidth = document.body ? document.body.clientWidth : 0;
+      const adjustedPadding = window.innerWidth - clientWidth + currentPadding || 0;
+      Object.keys(LOCK_STYLES).forEach(key => {
+        const val = LOCK_STYLES[key];
+        if (targetStyle) {
+          targetStyle[key] = val;
+        }
+      });
+      if (targetStyle) {
+        targetStyle.paddingRight = `${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]);
+  const removeScrollLock = useCallback(touchScrollTarget => {
+    if (!canUseDOM) {
+      return;
+    }
+    const target = document.body;
+    const 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(key => {
+        const 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(() => {
+    if (!isEnabled) {
+      return;
+    }
+    const element = scrollTarget.current;
+    addScrollLock(element);
+    return () => {
+      removeScrollLock(element);
+    };
+  }, [isEnabled, addScrollLock, removeScrollLock]);
+  return element => {
+    scrollTarget.current = element;
+  };
+}