@payloadcms/ui 4.0.0-internal.1f9ae9a → 4.0.0-internal.2fddfc0

package/dist/elements/ReactSelect/index.css

@@ -44,10 +44,6 @@
       color: var(--color-text-tertiary);
     }
 
-    .rs__menu-notice {
-      padding: 0.625rem 0.75rem;
-    }
-
     .rs__indicator {
       padding: 0 0.25rem;
       cursor: pointer;
@@ -72,54 +68,6 @@
       padding: 0;
     }
 
-    .rs__menu {
-      z-index: 4;
-      border-radius: var(--radius-medium);
-      box-shadow: var(--elevation-400-menu-panel);
-      background: var(--color-bg);
-      overflow: hidden;
-    }
-
-    .rs__menu--placement-bottom {
-      margin-top: var(--spacer-1);
-    }
-
-    .rs__menu--placement-top {
-      margin-bottom: var(--spacer-1);
-    }
-
-    .rs__menu-list {
-      max-height: calc(var(--spacer-6) * 5);
-      overflow-y: auto;
-    }
-
-    .rs__group-heading {
-      color: var(--color-text-tertiary);
-      padding: var(--spacer-2-5) var(--spacer-3) var(--spacer-1);
-      font-family: var(--text-body-medium-font-family);
-      font-size: var(--text-body-medium-font-size);
-      font-weight: var(--text-body-medium-font-weight);
-      line-height: var(--text-body-medium-line-height);
-    }
-
-    .rs__option {
-      font-family: var(--text-body-medium-font-family);
-      font-size: var(--text-body-medium-font-size);
-      font-weight: var(--text-body-medium-font-weight);
-      line-height: var(--text-body-medium-line-height);
-      padding-inline: var(--spacer-3) var(--spacer-1);
-      padding-block: var(--spacer-2);
-      color: var(--color-text);
-    }
-
-    .rs__option--is-focused {
-      background-color: var(--color-bg-secondary);
-    }
-
-    .rs__option--is-selected {
-      background-color: var(--color-bg-selected);
-    }
-
     &.rs--is-disabled .rs__control {
       background: var(--field-color-bg-disabled);
       border-color: var(--field-color-border-disabled);
@@ -133,6 +81,58 @@
     }
   }
 
+  /* Menu rules are top-level so they apply when the menu is portaled to document.body */
+  .rs__menu-notice {
+    padding: 0.625rem 0.75rem;
+  }
+
+  .rs__menu {
+    z-index: 4;
+    border-radius: var(--radius-medium);
+    box-shadow: var(--elevation-400-menu-panel);
+    background: var(--color-bg);
+    /* overflow: clip; */
+  }
+
+  .rs__menu--placement-bottom {
+    margin-top: var(--spacer-1);
+  }
+
+  .rs__menu--placement-top {
+    margin-bottom: var(--spacer-1);
+  }
+
+  .rs__menu-list {
+    overflow-y: auto;
+  }
+
+  .rs__group-heading {
+    color: var(--color-text-tertiary);
+    padding: var(--spacer-2-5) var(--spacer-3) var(--spacer-1);
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+  }
+
+  .rs__option {
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+    padding-inline: var(--spacer-3) var(--spacer-1);
+    padding-block: var(--spacer-2);
+    color: var(--color-text);
+  }
+
+  .rs__option--is-focused {
+    background-color: var(--color-bg-secondary);
+  }
+
+  .rs__option--is-selected {
+    background-color: var(--color-bg-selected);
+  }
+
   .react-select--error {
     div.rs__control {
       border: var(--stroke-width-small) solid var(--field-color-border-error);

package/dist/elements/ReactSelect/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ReactSelect/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA2B,MAAM,OAAO,CAAA;AAI/C,OAAO,KAAK,EAAU,uBAAuB,EAAE,MAAM,YAAY,CAAA;AACjE,YAAY,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAcxC,OAAO,aAAa,CAAA;AAoOpB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAQzD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ReactSelect/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAQN,MAAM,OAAO,CAAA;AAId,OAAO,KAAK,EAAU,uBAAuB,EAAE,MAAM,YAAY,CAAA;AACjE,YAAY,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAkBxC,OAAO,aAAa,CAAA;AA4VpB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAQzD,CAAA"}

package/dist/elements/ReactSelect/index.js

@@ -1,17 +1,22 @@
 'use client';
 
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { arrayMove } from '@dnd-kit/sortable';
 import { getTranslation } from '@payloadcms/translations';
-import React, { useEffect, useId } from 'react';
-import Select from 'react-select';
+import React, { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import Select, { components as rsComponents } from 'react-select';
 import CreatableSelect from 'react-select/creatable';
+import { useDebouncedEffect } from '../../hooks/useDebouncedEffect.js';
+import { useTheme } from '../../providers/Theme/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { DraggableSortable } from '../DraggableSortable/index.js';
 import { ShimmerEffect } from '../ShimmerEffect/index.js';
 import { ClearIndicator } from './ClearIndicator/index.js';
 import { Control } from './Control/index.js';
 import { DropdownIndicator } from './DropdownIndicator/index.js';
+import { getCaptureMenuScroll } from './getCaptureMenuScroll.js';
+import { getMenuListStyles } from './getMenuListStyles.js';
 import { Input } from './Input/index.js';
 import { generateMultiValueDraggableID, MultiValue } from './MultiValue/index.js';
 import { MultiValueLabel } from './MultiValueLabel/index.js';
@@ -19,26 +24,54 @@ import { MultiValueRemove } from './MultiValueRemove/index.js';
 import { SingleValue } from './SingleValue/index.js';
 import { ValueContainer } from './ValueContainer/index.js';
 import './index.css';
-const createOption = label => ({
-  label,
-  value: label
-});
+// Propagates the nearest scoped theme (via ThemeProvider) into the portal div,
+// falling back to the global theme. Ensures dropdown menus portaled to
+// document.body inherit the correct theme (e.g. dark Popup).
+function ThemedMenuPortal(props) {
+  const $ = _c(3);
+  const {
+    theme
+  } = useTheme();
+  const menuPortalTheme = props.selectProps?.customProps?.menuPortalTheme;
+  const t0 = menuPortalTheme ?? theme;
+  let t1;
+  if ($[0] !== props || $[1] !== t0) {
+    t1 = _jsx(rsComponents.MenuPortal, {
+      ...props,
+      innerProps: {
+        "data-theme": t0
+      }
+    });
+    $[0] = props;
+    $[1] = t0;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+const DEFAULT_MAX_MENU_HEIGHT = 300;
+const MIN_USABLE_MENU_HEIGHT = 140;
+const MENU_VIEWPORT_GAP = 16 // space between the control and the edge of the window
+;
 const SelectAdapter = props => {
   const {
     i18n,
     t
   } = useTranslation();
-  const [inputValue, setInputValue] = React.useState('') // for creatable select
+  const [inputValue, setInputValue] = useState('') // for creatable select
 ;
   const uuid = useId();
-  const [hasMounted, setHasMounted] = React.useState(false);
-  useEffect(() => {
-    setHasMounted(true);
-  }, []);
+  const [hasMounted, setHasMounted] = useState(false);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [maxMenuHeight, setMaxMenuHeight] = useState(DEFAULT_MAX_MENU_HEIGHT);
+  const [menuPlacement, setMenuPlacement] = useState('auto');
+  const containerRef = useRef(null);
   const {
+    captureMenuScroll: captureMenuScrollProp,
     className,
+    classNames: externalClassNames,
     components,
-    customProps,
     disabled = false,
     filterOption = undefined,
     getOptionValue,
@@ -46,6 +79,8 @@ const SelectAdapter = props => {
     isCreatable,
     isLoading,
     isSearchable = true,
+    menuPortalTarget: menuPortalTargetProp,
+    menuPosition: menuPositionProp,
     noOptionsMessage = () => t('general:noOptions'),
     numberOnly = false,
     onChange,
@@ -57,74 +92,162 @@ const SelectAdapter = props => {
     styles: externalStyles,
     value
   } = props;
-  const loadingMessage = () => t('general:loading') + '...';
-  const classes = [className, 'react-select', showError && 'react-select--error'].filter(Boolean).join(' ');
-  const styles = {
-    // Remove the default react-select z-index from the menu so that our custom
-    // z-index in the "payload-default" css layer can take effect, in such a way
-    // that end users can easily override it as with other styles.
-    menu: (rsStyles, state) => ({
-      ...rsStyles,
-      zIndex: undefined,
-      ...externalStyles?.menu?.(rsStyles, state)
-    }),
-    // Remove the default react-select min-height so our CSS can control it
-    control: (rsStyles_0, state_0) => ({
-      ...rsStyles_0,
-      minHeight: undefined,
-      ...externalStyles?.control?.(rsStyles_0, state_0)
-    }),
-    // Allow external option styles to override emotion defaults
-    option: (rsStyles_1, state_1) => ({
-      ...rsStyles_1,
-      ...externalStyles?.option?.(rsStyles_1, state_1)
-    })
+  const menuPortalTarget = menuPortalTargetProp === undefined ? typeof document !== 'undefined' ? document.body : null : menuPortalTargetProp;
+  const menuPosition = menuPositionProp ?? (menuPortalTarget ? 'fixed' : undefined);
+  const captureMenuScroll = getCaptureMenuScroll({
+    captureMenuScroll: captureMenuScrollProp,
+    menuPortalTarget
+  });
+  const updateMenuViewportSettings = useCallback(() => {
+    if (!isMenuOpen || typeof window === 'undefined') {
+      return;
+    }
+    const controlEl = containerRef.current?.querySelector('.rs__control');
+    if (!controlEl) {
+      return;
+    }
+    const controlRect = controlEl.getBoundingClientRect();
+    const availableBelow = Math.max(window.innerHeight - controlRect.bottom - MENU_VIEWPORT_GAP, 0);
+    const availableAbove = Math.max(controlRect.top - MENU_VIEWPORT_GAP, 0);
+    const shouldOpenTop = availableBelow < MIN_USABLE_MENU_HEIGHT && availableAbove > availableBelow;
+    const availableHeight = shouldOpenTop ? availableAbove : availableBelow;
+    setMenuPlacement(shouldOpenTop ? 'top' : 'bottom');
+    setMaxMenuHeight(Math.max(Math.min(Math.floor(availableHeight), DEFAULT_MAX_MENU_HEIGHT), 1));
+  }, [isMenuOpen]);
+  useEffect(() => {
+    setHasMounted(true);
+  }, []);
+  useLayoutEffect(() => {
+    if (!isMenuOpen) {
+      setMenuPlacement('auto');
+      setMaxMenuHeight(DEFAULT_MAX_MENU_HEIGHT);
+      return;
+    }
+    updateMenuViewportSettings();
+    window.addEventListener('resize', updateMenuViewportSettings);
+    window.addEventListener('scroll', updateMenuViewportSettings, true);
+    return () => {
+      window.removeEventListener('resize', updateMenuViewportSettings);
+      window.removeEventListener('scroll', updateMenuViewportSettings, true);
+    };
+  }, [isMenuOpen, updateMenuViewportSettings]);
+  // Debounce the loading state so that fast option fetches (e.g. relationship
+  // fields that resolve almost instantly) don't cause the clear indicator to
+  // flash to react-select's loading indicator and back. The loading indicator
+  // only appears once a load takes longer than the threshold below.
+  const [isLoadingDebounced, setIsLoadingDebounced] = useState(false);
+  useDebouncedEffect(() => {
+    setIsLoadingDebounced(isLoading);
+  }, [isLoading], 250);
+  const handleMenuOpen = () => {
+    setIsMenuOpen(true);
+    requestAnimationFrame(updateMenuViewportSettings);
+    onMenuOpen?.();
+  };
+  const handleMenuClose = () => {
+    setIsMenuOpen(false);
+    onMenuClose?.();
+  };
+  const menuClassName = useCallback(state => {
+    const placement = state.placement ? `rs__menu--placement-${state.placement}` : '';
+    const external = externalClassNames?.menu?.(state) ?? '';
+    return [placement, external].filter(Boolean).join(' ');
+  }, [externalClassNames]);
+  const selectClassNames = useMemo(() => ({
+    ...externalClassNames,
+    menu: menuClassName,
+    menuList: state_0 => {
+      const external_0 = externalClassNames?.menuList?.(state_0) ?? '';
+      return ['scrollbar-thin', external_0].filter(Boolean).join(' ');
+    }
+  }), [externalClassNames, menuClassName]);
+  const selectComponents = useMemo(() => ({
+    ClearIndicator,
+    Control,
+    DropdownIndicator,
+    Input,
+    MenuPortal: ThemedMenuPortal,
+    MultiValue,
+    MultiValueLabel,
+    MultiValueRemove,
+    SingleValue,
+    ValueContainer,
+    ...components
+  }), [components]);
+  const sharedSelectProps = {
+    captureMenuScroll,
+    className: [className, 'react-select', showError && 'react-select--error'].filter(Boolean).join(' '),
+    classNamePrefix: 'rs',
+    classNames: selectClassNames,
+    components: selectComponents,
+    filterOption,
+    instanceId: uuid,
+    isClearable,
+    isDisabled: disabled,
+    isLoading: isLoadingDebounced,
+    isSearchable,
+    loadingMessage: () => t('general:loading') + '...',
+    maxMenuHeight,
+    menuPlacement,
+    menuPortalTarget,
+    menuPosition,
+    menuShouldBlockScroll: false,
+    noOptionsMessage,
+    onChange,
+    onMenuClose: handleMenuClose,
+    onMenuOpen: handleMenuOpen,
+    options,
+    placeholder: getTranslation(placeholder, i18n),
+    styles: {
+      // Remove the default react-select z-index from the menu so that our custom
+      // z-index in the "payload-default" css layer can take effect, in such a way
+      // that end users can easily override it as with other styles.
+      menu: (rsStyles, state_1) => ({
+        ...rsStyles,
+        zIndex: undefined,
+        ...externalStyles?.menu?.(rsStyles, state_1)
+      }),
+      // When portaling to document.body, the portal container needs an explicit
+      // z-index so the menu appears above drawers and dialogs. unstyled={true}
+      // strips react-select's default zIndex:9999 from the portal container.
+      ...(menuPortalTarget && {
+        menuPortal: (rsStyles_0, state_2) => ({
+          ...rsStyles_0,
+          zIndex: 9999,
+          ...externalStyles?.menuPortal?.(rsStyles_0, state_2)
+        })
+      }),
+      // Remove the default react-select min-height so our CSS can control it
+      control: (rsStyles_1, state_3) => ({
+        ...rsStyles_1,
+        minHeight: undefined,
+        ...externalStyles?.control?.(rsStyles_1, state_3)
+      }),
+      // Allow external option styles to override emotion defaults
+      option: (rsStyles_2, state_4) => ({
+        ...rsStyles_2,
+        ...externalStyles?.option?.(rsStyles_2, state_4)
+      }),
+      // Keep react-select's computed maxHeight so the menu can fit available
+      // viewport space near screen edges (instead of using a fixed class value).
+      menuList: getMenuListStyles(externalStyles)
+    },
+    unstyled: true
   };
   if (!hasMounted) {
     return /*#__PURE__*/_jsx(ShimmerEffect, {
-      height: "calc(var(--base) * 2 + 2px)"
+      height: "var(--field-min-height)"
     });
   }
   if (!isCreatable) {
-    return /*#__PURE__*/_jsx(Select, {
-      captureMenuScroll: true,
-      customProps: customProps,
-      isLoading: isLoading,
-      ...props,
-      className: classes,
-      classNamePrefix: "rs",
-      classNames: {
-        menu: state_2 => state_2.placement ? `rs__menu--placement-${state_2.placement}` : ''
-      },
-      components: {
-        ClearIndicator,
-        Control,
-        DropdownIndicator,
-        Input,
-        MultiValue,
-        MultiValueLabel,
-        MultiValueRemove,
-        SingleValue,
-        ValueContainer,
-        ...components
-      },
-      filterOption: filterOption,
-      getOptionValue: getOptionValue,
-      instanceId: uuid,
-      isClearable: isClearable,
-      isDisabled: disabled,
-      isSearchable: isSearchable,
-      loadingMessage: loadingMessage,
-      menuPlacement: "auto",
-      noOptionsMessage: noOptionsMessage,
-      onChange: onChange,
-      onMenuClose: onMenuClose,
-      onMenuOpen: onMenuOpen,
-      options: options,
-      placeholder: getTranslation(placeholder, i18n),
-      styles: styles,
-      unstyled: true,
-      value: value
+    return /*#__PURE__*/_jsx("div", {
+      ref: containerRef,
+      children: /*#__PURE__*/_jsx(Select, {
+        ...props,
+        ...sharedSelectProps,
+        getOptionValue: getOptionValue,
+        value: value
+      })
     });
   }
   const handleKeyDown = event => {
@@ -149,7 +272,10 @@ const SelectAdapter = props => {
     switch (event.key) {
       case 'Enter':
       case 'Tab':
-        onChange([...value, createOption(inputValue)]);
+        onChange([...value, {
+          label: inputValue,
+          value: inputValue
+        }]);
         setInputValue('');
         event.preventDefault();
         break;
@@ -157,46 +283,16 @@ const SelectAdapter = props => {
         break;
     }
   };
-  return /*#__PURE__*/_jsx(CreatableSelect, {
-    captureMenuScroll: true,
-    isLoading: isLoading,
-    ...props,
-    className: classes,
-    classNamePrefix: "rs",
-    classNames: {
-      menu: state_3 => state_3.placement ? `rs__menu--placement-${state_3.placement}` : ''
-    },
-    components: {
-      ClearIndicator,
-      Control,
-      DropdownIndicator,
-      Input,
-      MultiValue,
-      MultiValueLabel,
-      MultiValueRemove,
-      SingleValue,
-      ValueContainer,
-      ...components
-    },
-    filterOption: filterOption,
-    inputValue: inputValue,
-    instanceId: uuid,
-    isClearable: isClearable,
-    isDisabled: disabled,
-    isSearchable: isSearchable,
-    loadingMessage: loadingMessage,
-    menuPlacement: "auto",
-    noOptionsMessage: noOptionsMessage,
-    onChange: onChange,
-    onInputChange: newValue => setInputValue(newValue),
-    onKeyDown: handleKeyDown,
-    onMenuClose: onMenuClose,
-    onMenuOpen: onMenuOpen,
-    options: options,
-    placeholder: getTranslation(placeholder, i18n),
-    styles: styles,
-    unstyled: true,
-    value: value
+  return /*#__PURE__*/_jsx("div", {
+    ref: containerRef,
+    children: /*#__PURE__*/_jsx(CreatableSelect, {
+      ...props,
+      ...sharedSelectProps,
+      inputValue: inputValue,
+      onInputChange: newValue => setInputValue(newValue),
+      onKeyDown: handleKeyDown,
+      value: value
+    })
   });
 };
 const SortableSelect = props => {

package/dist/elements/ReactSelect/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["arrayMove","getTranslation","React","useEffect","useId","Select","CreatableSelect","useTranslation","DraggableSortable","ShimmerEffect","ClearIndicator","Control","DropdownIndicator","Input","generateMultiValueDraggableID","MultiValue","MultiValueLabel","MultiValueRemove","SingleValue","ValueContainer","createOption","label","value","SelectAdapter","props","i18n","t","inputValue","setInputValue","useState","uuid","hasMounted","setHasMounted","className","components","customProps","disabled","filterOption","undefined","getOptionValue","isClearable","isCreatable","isLoading","isSearchable","noOptionsMessage","numberOnly","onChange","onMenuClose","onMenuOpen","options","placeholder","showError","styles","externalStyles","loadingMessage","classes","filter","Boolean","join","menu","rsStyles","state","zIndex","control","minHeight","option","_jsx","height","captureMenuScroll","classNamePrefix","classNames","placement","instanceId","isDisabled","menuPlacement","unstyled","handleKeyDown","event","acceptableKeys","isNumber","test","key","isActionKey","includes","preventDefault","trim","nativeEvent","isComposing","onInputChange","newValue","onKeyDown","SortableSelect","draggableIDs","Array","isArray","map","optionValue","ids","onDragEnd","moveFromIndex","moveToIndex","sorted","ReactSelect","isMulti","isSortable"],"sources":["../../../src/elements/ReactSelect/index.tsx"],"sourcesContent":["'use client'\nimport type { KeyboardEventHandler } from 'react'\n\nimport { arrayMove } from '@dnd-kit/sortable'\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { useEffect, useId } from 'react'\nimport Select, { type StylesConfig } from 'react-select'\nimport CreatableSelect from 'react-select/creatable'\n\nimport type { Option, ReactSelectAdapterProps } from './types.js'\nexport type { Option } from './types.js'\n\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { DraggableSortable } from '../DraggableSortable/index.js'\nimport { ShimmerEffect } from '../ShimmerEffect/index.js'\nimport { ClearIndicator } from './ClearIndicator/index.js'\nimport { Control } from './Control/index.js'\nimport { DropdownIndicator } from './DropdownIndicator/index.js'\nimport { Input } from './Input/index.js'\nimport { generateMultiValueDraggableID, MultiValue } from './MultiValue/index.js'\nimport { MultiValueLabel } from './MultiValueLabel/index.js'\nimport { MultiValueRemove } from './MultiValueRemove/index.js'\nimport { SingleValue } from './SingleValue/index.js'\nimport { ValueContainer } from './ValueContainer/index.js'\nimport './index.css'\n\nconst createOption = (label: string) => ({\n  label,\n  value: label,\n})\n\nconst SelectAdapter: React.FC<ReactSelectAdapterProps> = (props) => {\n  const { i18n, t } = useTranslation()\n  const [inputValue, setInputValue] = React.useState('') // for creatable select\n  const uuid = useId()\n  const [hasMounted, setHasMounted] = React.useState(false)\n\n  useEffect(() => {\n    setHasMounted(true)\n  }, [])\n\n  const {\n    className,\n    components,\n    customProps,\n    disabled = false,\n    filterOption = undefined,\n    getOptionValue,\n    isClearable = true,\n    isCreatable,\n    isLoading,\n    isSearchable = true,\n    noOptionsMessage = () => t('general:noOptions'),\n    numberOnly = false,\n    onChange,\n    onMenuClose,\n    onMenuOpen,\n    options,\n    placeholder = t('general:selectValue'),\n    showError,\n    styles: externalStyles,\n    value,\n  } = props\n\n  const loadingMessage = () => t('general:loading') + '...'\n\n  const classes = [className, 'react-select', showError && 'react-select--error']\n    .filter(Boolean)\n    .join(' ')\n\n  const styles: StylesConfig<Option> = {\n    // Remove the default react-select z-index from the menu so that our custom\n    // z-index in the \"payload-default\" css layer can take effect, in such a way\n    // that end users can easily override it as with other styles.\n    menu: (rsStyles, state) => ({\n      ...rsStyles,\n      zIndex: undefined,\n      ...externalStyles?.menu?.(rsStyles, state),\n    }),\n    // Remove the default react-select min-height so our CSS can control it\n    control: (rsStyles, state) => ({\n      ...rsStyles,\n      minHeight: undefined,\n      ...externalStyles?.control?.(rsStyles, state),\n    }),\n    // Allow external option styles to override emotion defaults\n    option: (rsStyles, state) => ({\n      ...rsStyles,\n      ...externalStyles?.option?.(rsStyles, state),\n    }),\n  }\n\n  if (!hasMounted) {\n    return <ShimmerEffect height=\"calc(var(--base) * 2 + 2px)\" />\n  }\n\n  if (!isCreatable) {\n    return (\n      <Select\n        captureMenuScroll\n        customProps={customProps}\n        isLoading={isLoading}\n        {...props}\n        className={classes}\n        classNamePrefix=\"rs\"\n        classNames={{\n          menu: (state) => (state.placement ? `rs__menu--placement-${state.placement}` : ''),\n        }}\n        components={{\n          ClearIndicator,\n          Control,\n          DropdownIndicator,\n          Input,\n          MultiValue,\n          MultiValueLabel,\n          MultiValueRemove,\n          SingleValue,\n          ValueContainer,\n          ...components,\n        }}\n        filterOption={filterOption}\n        getOptionValue={getOptionValue}\n        instanceId={uuid}\n        isClearable={isClearable}\n        isDisabled={disabled}\n        isSearchable={isSearchable}\n        loadingMessage={loadingMessage}\n        menuPlacement=\"auto\"\n        noOptionsMessage={noOptionsMessage}\n        onChange={onChange}\n        onMenuClose={onMenuClose}\n        onMenuOpen={onMenuOpen}\n        options={options}\n        placeholder={getTranslation(placeholder, i18n)}\n        styles={styles}\n        unstyled={true}\n        value={value}\n      />\n    )\n  }\n  const handleKeyDown: KeyboardEventHandler = (event) => {\n    if (numberOnly === true) {\n      const acceptableKeys = [\n        'Tab',\n        'Escape',\n        'Backspace',\n        'Enter',\n        'ArrowRight',\n        'ArrowLeft',\n        'ArrowUp',\n        'ArrowDown',\n      ]\n      const isNumber = !/\\D/.test(event.key)\n      const isActionKey = acceptableKeys.includes(event.key)\n      if (!isNumber && !isActionKey) {\n        event.preventDefault()\n        return\n      }\n    }\n    if (!value || !inputValue || inputValue.trim() === '') {\n      return\n    }\n    if (filterOption && !filterOption(null, inputValue)) {\n      return\n    }\n    if (event.nativeEvent.isComposing) {\n      return\n    }\n    switch (event.key) {\n      case 'Enter':\n      case 'Tab':\n        onChange([...(value as Option[]), createOption(inputValue)])\n        setInputValue('')\n        event.preventDefault()\n        break\n      default:\n        break\n    }\n  }\n\n  return (\n    <CreatableSelect\n      captureMenuScroll\n      isLoading={isLoading}\n      {...props}\n      className={classes}\n      classNamePrefix=\"rs\"\n      classNames={{\n        menu: (state) => (state.placement ? `rs__menu--placement-${state.placement}` : ''),\n      }}\n      components={{\n        ClearIndicator,\n        Control,\n        DropdownIndicator,\n        Input,\n        MultiValue,\n        MultiValueLabel,\n        MultiValueRemove,\n        SingleValue,\n        ValueContainer,\n        ...components,\n      }}\n      filterOption={filterOption}\n      inputValue={inputValue}\n      instanceId={uuid}\n      isClearable={isClearable}\n      isDisabled={disabled}\n      isSearchable={isSearchable}\n      loadingMessage={loadingMessage}\n      menuPlacement=\"auto\"\n      noOptionsMessage={noOptionsMessage}\n      onChange={onChange}\n      onInputChange={(newValue) => setInputValue(newValue)}\n      onKeyDown={handleKeyDown}\n      onMenuClose={onMenuClose}\n      onMenuOpen={onMenuOpen}\n      options={options}\n      placeholder={getTranslation(placeholder, i18n)}\n      styles={styles}\n      unstyled={true}\n      value={value}\n    />\n  )\n}\n\nconst SortableSelect: React.FC<ReactSelectAdapterProps> = (props) => {\n  const { getOptionValue, onChange, value } = props\n\n  let draggableIDs: string[] = []\n  if (value) {\n    draggableIDs = (Array.isArray(value) ? value : [value]).map((optionValue) => {\n      return generateMultiValueDraggableID(optionValue, getOptionValue)\n    })\n  }\n\n  return (\n    <DraggableSortable\n      className=\"react-select-container\"\n      ids={draggableIDs}\n      onDragEnd={({ moveFromIndex, moveToIndex }) => {\n        let sorted = value\n        if (value && Array.isArray(value)) {\n          sorted = arrayMove(value, moveFromIndex, moveToIndex)\n        }\n        onChange(sorted)\n      }}\n    >\n      <SelectAdapter {...props} />\n    </DraggableSortable>\n  )\n}\n\nexport const ReactSelect: React.FC<ReactSelectAdapterProps> = (props) => {\n  const { isMulti, isSortable } = props\n\n  if (isMulti && isSortable) {\n    return <SortableSelect {...props} />\n  }\n\n  return <SelectAdapter {...props} />\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","arrayMove","getTranslation","React","useCallback","useEffect","useId","useLayoutEffect","useMemo","useRef","useState","Select","components","rsComponents","CreatableSelect","useDebouncedEffect","useTheme","useTranslation","DraggableSortable","ShimmerEffect","ClearIndicator","Control","DropdownIndicator","getCaptureMenuScroll","getMenuListStyles","Input","generateMultiValueDraggableID","MultiValue","MultiValueLabel","MultiValueRemove","SingleValue","ValueContainer","ThemedMenuPortal","props","$","theme","menuPortalTheme","selectProps","customProps","t0","t1","_jsx","MenuPortal","innerProps","DEFAULT_MAX_MENU_HEIGHT","MIN_USABLE_MENU_HEIGHT","MENU_VIEWPORT_GAP","SelectAdapter","i18n","t","inputValue","setInputValue","uuid","hasMounted","setHasMounted","isMenuOpen","setIsMenuOpen","maxMenuHeight","setMaxMenuHeight","menuPlacement","setMenuPlacement","containerRef","captureMenuScroll","captureMenuScrollProp","className","classNames","externalClassNames","disabled","filterOption","undefined","getOptionValue","isClearable","isCreatable","isLoading","isSearchable","menuPortalTarget","menuPortalTargetProp","menuPosition","menuPositionProp","noOptionsMessage","numberOnly","onChange","onMenuClose","onMenuOpen","options","placeholder","showError","styles","externalStyles","value","document","body","updateMenuViewportSettings","window","controlEl","current","querySelector","controlRect","getBoundingClientRect","availableBelow","Math","max","innerHeight","bottom","availableAbove","top","shouldOpenTop","availableHeight","min","floor","addEventListener","removeEventListener","isLoadingDebounced","setIsLoadingDebounced","handleMenuOpen","requestAnimationFrame","handleMenuClose","menuClassName","state","placement","external","menu","filter","Boolean","join","selectClassNames","menuList","selectComponents","sharedSelectProps","classNamePrefix","instanceId","isDisabled","loadingMessage","menuShouldBlockScroll","rsStyles","zIndex","menuPortal","control","minHeight","option","unstyled","height","ref","handleKeyDown","event","acceptableKeys","isNumber","test","key","isActionKey","includes","preventDefault","trim","nativeEvent","isComposing","label","onInputChange","newValue","onKeyDown","SortableSelect","draggableIDs","Array","isArray","map","optionValue","ids","onDragEnd","moveFromIndex","moveToIndex","sorted","ReactSelect","isMulti","isSortable"],"sources":["../../../src/elements/ReactSelect/index.tsx"],"sourcesContent":["'use client'\nimport type { JSX, KeyboardEventHandler } from 'react'\nimport type { GroupBase, MenuListProps, MenuProps, StylesConfig } from 'react-select'\n\nimport { arrayMove } from '@dnd-kit/sortable'\nimport { getTranslation } from '@payloadcms/translations'\nimport React, {\n  useCallback,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport Select, { components as rsComponents } from 'react-select'\nimport CreatableSelect from 'react-select/creatable'\n\nimport type { Option, ReactSelectAdapterProps } from './types.js'\nexport type { Option } from './types.js'\n\nimport { useDebouncedEffect } from '../../hooks/useDebouncedEffect.js'\nimport { useTheme } from '../../providers/Theme/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { DraggableSortable } from '../DraggableSortable/index.js'\nimport { ShimmerEffect } from '../ShimmerEffect/index.js'\nimport { ClearIndicator } from './ClearIndicator/index.js'\nimport { Control } from './Control/index.js'\nimport { DropdownIndicator } from './DropdownIndicator/index.js'\nimport { getCaptureMenuScroll } from './getCaptureMenuScroll.js'\nimport { getMenuListStyles } from './getMenuListStyles.js'\nimport { Input } from './Input/index.js'\nimport { generateMultiValueDraggableID, MultiValue } from './MultiValue/index.js'\nimport { MultiValueLabel } from './MultiValueLabel/index.js'\nimport { MultiValueRemove } from './MultiValueRemove/index.js'\nimport { SingleValue } from './SingleValue/index.js'\nimport { ValueContainer } from './ValueContainer/index.js'\nimport './index.css'\n\n// Propagates the nearest scoped theme (via ThemeProvider) into the portal div,\n// falling back to the global theme. Ensures dropdown menus portaled to\n// document.body inherit the correct theme (e.g. dark Popup).\nfunction ThemedMenuPortal<Opt, IsMulti extends boolean, Group extends GroupBase<Opt>>(\n  props: React.ComponentProps<typeof rsComponents.MenuPortal<Opt, IsMulti, Group>>,\n) {\n  const { theme } = useTheme()\n  const menuPortalTheme = (props.selectProps as any)?.customProps?.menuPortalTheme\n  return (\n    <rsComponents.MenuPortal\n      {...props}\n      innerProps={{ 'data-theme': menuPortalTheme ?? theme } as JSX.IntrinsicElements['div']}\n    />\n  )\n}\n\nconst DEFAULT_MAX_MENU_HEIGHT = 300\nconst MIN_USABLE_MENU_HEIGHT = 140\nconst MENU_VIEWPORT_GAP = 16 // space between the control and the edge of the window\n\nconst SelectAdapter: React.FC<ReactSelectAdapterProps> = (props) => {\n  const { i18n, t } = useTranslation()\n  const [inputValue, setInputValue] = useState('') // for creatable select\n  const uuid = useId()\n  const [hasMounted, setHasMounted] = useState(false)\n  const [isMenuOpen, setIsMenuOpen] = useState(false)\n  const [maxMenuHeight, setMaxMenuHeight] = useState(DEFAULT_MAX_MENU_HEIGHT)\n  const [menuPlacement, setMenuPlacement] = useState<'auto' | 'bottom' | 'top'>('auto')\n  const containerRef = useRef<HTMLDivElement>(null)\n\n  const {\n    captureMenuScroll: captureMenuScrollProp,\n    className,\n    classNames: externalClassNames,\n    components,\n    disabled = false,\n    filterOption = undefined,\n    getOptionValue,\n    isClearable = true,\n    isCreatable,\n    isLoading,\n    isSearchable = true,\n    menuPortalTarget: menuPortalTargetProp,\n    menuPosition: menuPositionProp,\n    noOptionsMessage = () => t('general:noOptions'),\n    numberOnly = false,\n    onChange,\n    onMenuClose,\n    onMenuOpen,\n    options,\n    placeholder = t('general:selectValue'),\n    showError,\n    styles: externalStyles,\n    value,\n  } = props\n\n  const menuPortalTarget =\n    menuPortalTargetProp === undefined\n      ? typeof document !== 'undefined'\n        ? document.body\n        : null\n      : menuPortalTargetProp\n\n  const menuPosition = menuPositionProp ?? (menuPortalTarget ? 'fixed' : undefined)\n  const captureMenuScroll = getCaptureMenuScroll({\n    captureMenuScroll: captureMenuScrollProp,\n    menuPortalTarget,\n  })\n\n  const updateMenuViewportSettings = useCallback(() => {\n    if (!isMenuOpen || typeof window === 'undefined') {\n      return\n    }\n\n    const controlEl = containerRef.current?.querySelector('.rs__control')\n\n    if (!controlEl) {\n      return\n    }\n\n    const controlRect = controlEl.getBoundingClientRect()\n    const availableBelow = Math.max(window.innerHeight - controlRect.bottom - MENU_VIEWPORT_GAP, 0)\n    const availableAbove = Math.max(controlRect.top - MENU_VIEWPORT_GAP, 0)\n    const shouldOpenTop = availableBelow < MIN_USABLE_MENU_HEIGHT && availableAbove > availableBelow\n    const availableHeight = shouldOpenTop ? availableAbove : availableBelow\n\n    setMenuPlacement(shouldOpenTop ? 'top' : 'bottom')\n    setMaxMenuHeight(Math.max(Math.min(Math.floor(availableHeight), DEFAULT_MAX_MENU_HEIGHT), 1))\n  }, [isMenuOpen])\n\n  useEffect(() => {\n    setHasMounted(true)\n  }, [])\n\n  useLayoutEffect(() => {\n    if (!isMenuOpen) {\n      setMenuPlacement('auto')\n      setMaxMenuHeight(DEFAULT_MAX_MENU_HEIGHT)\n      return\n    }\n\n    updateMenuViewportSettings()\n\n    window.addEventListener('resize', updateMenuViewportSettings)\n    window.addEventListener('scroll', updateMenuViewportSettings, true)\n\n    return () => {\n      window.removeEventListener('resize', updateMenuViewportSettings)\n      window.removeEventListener('scroll', updateMenuViewportSettings, true)\n    }\n  }, [isMenuOpen, updateMenuViewportSettings])\n\n  // Debounce the loading state so that fast option fetches (e.g. relationship\n  // fields that resolve almost instantly) don't cause the clear indicator to\n  // flash to react-select's loading indicator and back. The loading indicator\n  // only appears once a load takes longer than the threshold below.\n  const [isLoadingDebounced, setIsLoadingDebounced] = useState(false)\n\n  useDebouncedEffect(\n    () => {\n      setIsLoadingDebounced(isLoading)\n    },\n    [isLoading],\n    250,\n  )\n\n  const handleMenuOpen = () => {\n    setIsMenuOpen(true)\n    requestAnimationFrame(updateMenuViewportSettings)\n    onMenuOpen?.()\n  }\n\n  const handleMenuClose = () => {\n    setIsMenuOpen(false)\n    onMenuClose?.()\n  }\n\n  const menuClassName = useCallback(\n    (state: MenuProps<Option, boolean, GroupBase<Option>>) => {\n      const placement = state.placement ? `rs__menu--placement-${state.placement}` : ''\n      const external = externalClassNames?.menu?.(state) ?? ''\n      return [placement, external].filter(Boolean).join(' ')\n    },\n    [externalClassNames],\n  )\n\n  const selectClassNames = useMemo(\n    () => ({\n      ...externalClassNames,\n      menu: menuClassName,\n      menuList: (state: MenuListProps<Option, boolean, GroupBase<Option>>) => {\n        const external = externalClassNames?.menuList?.(state) ?? ''\n        return ['scrollbar-thin', external].filter(Boolean).join(' ')\n      },\n    }),\n    [externalClassNames, menuClassName],\n  )\n\n  const selectComponents = useMemo(\n    () => ({\n      ClearIndicator,\n      Control,\n      DropdownIndicator,\n      Input,\n      MenuPortal: ThemedMenuPortal,\n      MultiValue,\n      MultiValueLabel,\n      MultiValueRemove,\n      SingleValue,\n      ValueContainer,\n      ...components,\n    }),\n    [components],\n  )\n\n  const sharedSelectProps = {\n    captureMenuScroll,\n    className: [className, 'react-select', showError && 'react-select--error']\n      .filter(Boolean)\n      .join(' '),\n    classNamePrefix: 'rs',\n    classNames: selectClassNames,\n    components: selectComponents,\n    filterOption,\n    instanceId: uuid,\n    isClearable,\n    isDisabled: disabled,\n    isLoading: isLoadingDebounced,\n    isSearchable,\n    loadingMessage: () => t('general:loading') + '...',\n    maxMenuHeight,\n    menuPlacement,\n    menuPortalTarget,\n    menuPosition,\n    menuShouldBlockScroll: false,\n    noOptionsMessage,\n    onChange,\n    onMenuClose: handleMenuClose,\n    onMenuOpen: handleMenuOpen,\n    options,\n    placeholder: getTranslation(placeholder, i18n),\n    styles: {\n      // Remove the default react-select z-index from the menu so that our custom\n      // z-index in the \"payload-default\" css layer can take effect, in such a way\n      // that end users can easily override it as with other styles.\n      menu: (rsStyles, state) => ({\n        ...rsStyles,\n        zIndex: undefined,\n        ...externalStyles?.menu?.(rsStyles, state),\n      }),\n      // When portaling to document.body, the portal container needs an explicit\n      // z-index so the menu appears above drawers and dialogs. unstyled={true}\n      // strips react-select's default zIndex:9999 from the portal container.\n      ...(menuPortalTarget && {\n        menuPortal: (rsStyles, state) => ({\n          ...rsStyles,\n          zIndex: 9999,\n          ...externalStyles?.menuPortal?.(rsStyles, state),\n        }),\n      }),\n      // Remove the default react-select min-height so our CSS can control it\n      control: (rsStyles, state) => ({\n        ...rsStyles,\n        minHeight: undefined,\n        ...externalStyles?.control?.(rsStyles, state),\n      }),\n      // Allow external option styles to override emotion defaults\n      option: (rsStyles, state) => ({\n        ...rsStyles,\n        ...externalStyles?.option?.(rsStyles, state),\n      }),\n      // Keep react-select's computed maxHeight so the menu can fit available\n      // viewport space near screen edges (instead of using a fixed class value).\n      menuList: getMenuListStyles(externalStyles),\n    },\n    unstyled: true,\n  }\n\n  if (!hasMounted) {\n    return <ShimmerEffect height=\"var(--field-min-height)\" />\n  }\n\n  if (!isCreatable) {\n    return (\n      <div ref={containerRef}>\n        <Select<Option, boolean, GroupBase<Option>>\n          {...props}\n          {...sharedSelectProps}\n          getOptionValue={getOptionValue}\n          value={value}\n        />\n      </div>\n    )\n  }\n\n  const handleKeyDown: KeyboardEventHandler = (event) => {\n    if (numberOnly === true) {\n      const acceptableKeys = [\n        'Tab',\n        'Escape',\n        'Backspace',\n        'Enter',\n        'ArrowRight',\n        'ArrowLeft',\n        'ArrowUp',\n        'ArrowDown',\n      ]\n      const isNumber = !/\\D/.test(event.key)\n      const isActionKey = acceptableKeys.includes(event.key)\n      if (!isNumber && !isActionKey) {\n        event.preventDefault()\n        return\n      }\n    }\n\n    if (!value || !inputValue || inputValue.trim() === '') {\n      return\n    }\n\n    if (filterOption && !filterOption(null, inputValue)) {\n      return\n    }\n\n    if (event.nativeEvent.isComposing) {\n      return\n    }\n\n    switch (event.key) {\n      case 'Enter':\n      case 'Tab':\n        onChange([\n          ...(value as Option[]),\n          {\n            label: inputValue,\n            value: inputValue,\n          },\n        ])\n        setInputValue('')\n        event.preventDefault()\n        break\n      default:\n        break\n    }\n  }\n\n  return (\n    <div ref={containerRef}>\n      <CreatableSelect<Option, boolean, GroupBase<Option>>\n        {...props}\n        {...sharedSelectProps}\n        inputValue={inputValue}\n        onInputChange={(newValue) => setInputValue(newValue)}\n        onKeyDown={handleKeyDown}\n        value={value}\n      />\n    </div>\n  )\n}\n\nconst SortableSelect: React.FC<ReactSelectAdapterProps> = (props) => {\n  const { getOptionValue, onChange, value } = props\n\n  let draggableIDs: string[] = []\n  if (value) {\n    draggableIDs = (Array.isArray(value) ? value : [value]).map((optionValue) => {\n      return generateMultiValueDraggableID(optionValue, getOptionValue)\n    })\n  }\n\n  return (\n    <DraggableSortable\n      className=\"react-select-container\"\n      ids={draggableIDs}\n      onDragEnd={({ moveFromIndex, moveToIndex }) => {\n        let sorted = value\n        if (value && Array.isArray(value)) {\n          sorted = arrayMove(value, moveFromIndex, moveToIndex)\n        }\n        onChange(sorted)\n      }}\n    >\n      <SelectAdapter {...props} />\n    </DraggableSortable>\n  )\n}\n\nexport const ReactSelect: React.FC<ReactSelectAdapterProps> = (props) => {\n  const { isMulti, isSortable } = props\n\n  if (isMulti && isSortable) {\n    return <SortableSelect {...props} />\n  }\n\n  return <SelectAdapter {...props} />\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/ReactSelect/types.d.ts

@@ -1,5 +1,5 @@
 import type { LabelFunction } from 'payload';
-import type { CommonProps, GroupBase, Props as ReactSelectStateManagerProps, StylesConfig } from 'react-select';
+import type { ClassNamesConfig, CommonProps, GroupBase, Props as ReactSelectStateManagerProps, StylesConfig } from 'react-select';
 import type { DocumentDrawerProps } from '../DocumentDrawer/types.js';
 type CustomSelectProps = {
     disableKeyDown?: boolean;
@@ -10,6 +10,8 @@ type CustomSelectProps = {
         label: string;
         value: string;
     }>, className: string, selectProps: ReactSelectStateManagerProps) => any;
+    /** Force the portaled menu to render with a specific theme, independent of the control's ambient theme. */
+    menuPortalTheme?: 'dark' | 'light';
     onDelete?: DocumentDrawerProps['onDelete'];
     onDocumentOpen?: (args: {
         collectionSlug: string;
@@ -43,7 +45,9 @@ export type OptionGroup = {
 export type ReactSelectAdapterProps = {
     backspaceRemovesValue?: boolean;
     blurInputOnSelect?: boolean;
+    captureMenuScroll?: boolean;
     className?: string;
+    classNames?: ClassNamesConfig<Option, boolean, GroupBase<Option>>;
     components?: {
         [key: string]: React.FC<any>;
     };
@@ -68,6 +72,8 @@ export type ReactSelectAdapterProps = {
     isSearchable?: boolean;
     isSortable?: boolean;
     menuIsOpen?: boolean;
+    menuPortalTarget?: HTMLElement | null;
+    menuPosition?: 'absolute' | 'fixed';
     noOptionsMessage?: (obj: {
         inputValue: string;
     }) => string;