@payloadcms/ui 4.0.0-internal.5f0cd13 → 4.0.0-internal.63f8536

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","ChevronIcon","baseClass","DropdownIndicator","props","innerProps","ref","restInnerProps","_jsx","className","onKeyDown","e","key","type","size"],"sources":["../../../../src/elements/ReactSelect/DropdownIndicator/index.tsx"],"sourcesContent":["'use client'\nimport type { DropdownIndicatorProps } from 'react-select'\n\nimport React, { type JSX } from 'react'\n\nimport type { Option as OptionType } from '../types.js'\n\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport './index.css'\n\nconst baseClass = 'dropdown-indicator'\nexport const DropdownIndicator: React.FC<\n  {\n    innerProps: JSX.IntrinsicElements['button']\n  } & DropdownIndicatorProps<OptionType, true>\n> = (props) => {\n  const {\n    innerProps: { ref, ...restInnerProps },\n  } = props\n\n  return (\n    <button\n      className={baseClass}\n      ref={ref}\n      {...restInnerProps}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter') {\n          e.key = ' '\n        }\n      }}\n      type=\"button\"\n    >\n      <ChevronIcon className={`${baseClass}__icon`} size={16} />\n    </button>\n  )\n}\n"],"mappings":"AAAA;;;AAGA,OAAOA,KAAA,MAAyB;AAIhC,SAASC,WAAW,QAAQ;AAC5B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAClB,OAAO,MAAMC,iBAAA,GAIRC,KAAA;EACH,MAAM;IACJC,UAAA,EAAY;MAAEC,GAAG;MAAE,GAAGC;IAAA;EAAgB,CACvC,GAAGH,KAAA;EAEJ,oBACEI,IAAA,CAAC;IACCC,SAAA,EAAWP,SAAA;IACXI,GAAA,EAAKA,GAAA;IACJ,GAAGC,cAAc;IAClBG,SAAA,EAAYC,CAAA;MACV,IAAIA,CAAA,CAAEC,GAAG,KAAK,SAAS;QACrBD,CAAA,CAAEC,GAAG,GAAG;MACV;IACF;IACAC,IAAA,EAAK;cAEL,aAAAL,IAAA,CAACP,WAAA;MAAYQ,SAAA,EAAW,GAAGP,SAAA,QAAiB;MAAEY,IAAA,EAAM;;;AAG1D","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","ChevronIcon","useTranslation","baseClass","DropdownIndicator","props","innerProps","t0","ref","restInnerProps","t","_jsx","className","onKeyDown","_temp","type","children","size","e","key"],"sources":["../../../../src/elements/ReactSelect/DropdownIndicator/index.tsx"],"sourcesContent":["'use client'\nimport type { DropdownIndicatorProps } from 'react-select'\n\nimport React, { type JSX } from 'react'\n\nimport type { Option as OptionType } from '../types.js'\n\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport './index.css'\n\nconst baseClass = 'dropdown-indicator'\nexport const DropdownIndicator: React.FC<\n  {\n    innerProps: JSX.IntrinsicElements['button']\n  } & DropdownIndicatorProps<OptionType, true>\n> = (props) => {\n  const {\n    innerProps: { ref, ...restInnerProps },\n  } = props\n\n  const { t } = useTranslation()\n\n  return (\n    <button\n      aria-label={t('general:open')}\n      className={baseClass}\n      ref={ref}\n      {...restInnerProps}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter') {\n          e.key = ' '\n        }\n      }}\n      type=\"button\"\n    >\n      <ChevronIcon className={`${baseClass}__icon`} size={16} />\n    </button>\n  )\n}\n"],"mappings":"AAAA;;;AAGA,OAAOA,KAAA,MAAyB;AAIhC,SAASC,WAAW,QAAQ;AAC5B,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAClB,OAAO,MAAMC,iBAAA,GAITC,KAAA;EACF;IAAAC,UAAA,EAAAC;EAAA,IAEIF,KAAA;EADU;IAAAG,GAAA;IAAA,GAAAC;EAAA,IAAAF,EAA0B;EAGxC;IAAAG;EAAA,IAAcR,cAAA;EAAA,OAGZS,IAAA,CAAC;IAAA,cACaD,CAAA,CAAE;IAAAE,SAAA,EAAAT,SAAA;IAAAK,GAAA;IAAA,GAGVC,cAAc;IAAAI,SAAA,EAAAC,KAAA;IAAAC,IAAA,EAMb;IAAAC,QAAA,EAELL,IAAA,CAAAV,WAAA;MAAAW,SAAA,EAAwB,GAAAT,SAAA,QAAoB;MAAAc,IAAA;IAAA,C;;CAGlD;AAvBI,SAAAH,MAAAI,CAAA;EAAA,IAcQA,CAAA,CAAAC,GAAA,KAAU;IACZD,CAAA,CAAAC,GAAA,GAAQ;EAAA;AAAA","ignoreList":[]}

package/dist/elements/ReactSelect/MultiValue/index.css

@@ -4,7 +4,7 @@
       display: flex;
       padding: 0;
       border: var(--stroke-width-small) solid var(--color-border);
-      border-radius: 0.1875rem;
+      border-radius: var(--radius-chip);
       background: var(--color-bg);
       height: 1.25rem;
       margin: 0;

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

@@ -0,0 +1,5 @@
+export declare const getCaptureMenuScroll: ({ captureMenuScroll, menuPortalTarget: _menuPortalTarget, }: {
+    captureMenuScroll?: boolean;
+    menuPortalTarget?: HTMLElement | null;
+}) => boolean;
+//# sourceMappingURL=getCaptureMenuScroll.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"getCaptureMenuScroll.d.ts","sourceRoot":"","sources":["../../../src/elements/ReactSelect/getCaptureMenuScroll.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,oBAAoB,GAAI,6DAGlC;IACD,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,gBAAgB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;CACtC,KAAG,OAMH,CAAA"}

package/dist/elements/ReactSelect/getCaptureMenuScroll.js

@@ -0,0 +1,10 @@
+export const getCaptureMenuScroll = ({
+  captureMenuScroll,
+  menuPortalTarget: _menuPortalTarget
+}) => {
+  if (typeof captureMenuScroll === 'boolean') {
+    return captureMenuScroll;
+  }
+  return true;
+};
+//# sourceMappingURL=getCaptureMenuScroll.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"getCaptureMenuScroll.js","names":["getCaptureMenuScroll","captureMenuScroll","menuPortalTarget","_menuPortalTarget"],"sources":["../../../src/elements/ReactSelect/getCaptureMenuScroll.ts"],"sourcesContent":["export const getCaptureMenuScroll = ({\n  captureMenuScroll,\n  menuPortalTarget: _menuPortalTarget,\n}: {\n  captureMenuScroll?: boolean\n  menuPortalTarget?: HTMLElement | null\n}): boolean => {\n  if (typeof captureMenuScroll === 'boolean') {\n    return captureMenuScroll\n  }\n\n  return true\n}\n"],"mappings":"AAAA,OAAO,MAAMA,oBAAA,GAAuBA,CAAC;EACnCC,iBAAiB;EACjBC,gBAAA,EAAkBC;AAAiB,CAIpC;EACC,IAAI,OAAOF,iBAAA,KAAsB,WAAW;IAC1C,OAAOA,iBAAA;EACT;EAEA,OAAO;AACT","ignoreList":[]}

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

@@ -0,0 +1,6 @@
+import type { GroupBase, StylesConfig } from 'react-select';
+import type { Option } from './types.js';
+type MenuListStyles = NonNullable<StylesConfig<Option, boolean, GroupBase<Option>>['menuList']>;
+export declare const getMenuListStyles: (externalStyles?: StylesConfig<Option, boolean, GroupBase<Option>>) => MenuListStyles;
+export {};
+//# sourceMappingURL=getMenuListStyles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"getMenuListStyles.d.ts","sourceRoot":"","sources":["../../../src/elements/ReactSelect/getMenuListStyles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAsB,SAAS,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AAE/E,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAExC,KAAK,cAAc,GAAG,WAAW,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;AAE/F,eAAO,MAAM,iBAAiB,GAC5B,iBAAiB,YAAY,CAAC,MAAM,EAAE,OAAO,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC,KAChE,cAQF,CAAA"}

package/dist/elements/ReactSelect/getMenuListStyles.js

@@ -0,0 +1,7 @@
+export const getMenuListStyles = externalStyles => {
+  return (rsStyles, state) => ({
+    ...rsStyles,
+    ...externalStyles?.menuList?.(rsStyles, state)
+  });
+};
+//# sourceMappingURL=getMenuListStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"getMenuListStyles.js","names":["getMenuListStyles","externalStyles","rsStyles","state","menuList"],"sources":["../../../src/elements/ReactSelect/getMenuListStyles.ts"],"sourcesContent":["import type { CSSObjectWithLabel, GroupBase, StylesConfig } from 'react-select'\n\nimport type { Option } from './types.js'\n\ntype MenuListStyles = NonNullable<StylesConfig<Option, boolean, GroupBase<Option>>['menuList']>\n\nexport const getMenuListStyles = (\n  externalStyles?: StylesConfig<Option, boolean, GroupBase<Option>>,\n): MenuListStyles => {\n  return (\n    rsStyles: CSSObjectWithLabel,\n    state: Parameters<NonNullable<StylesConfig<Option>['menuList']>>[1],\n  ) => ({\n    ...rsStyles,\n    ...externalStyles?.menuList?.(rsStyles, state),\n  })\n}\n"],"mappings":"AAMA,OAAO,MAAMA,iBAAA,GACXC,cAAA;EAEA,OAAO,CACLC,QAAA,EACAC,KAAA,MACI;IACJ,GAAGD,QAAQ;IACX,GAAGD,cAAA,EAAgBG,QAAA,GAAWF,QAAA,EAAUC,KAAA;EAC1C;AACF","ignoreList":[]}

package/dist/elements/ReactSelect/index.css

@@ -7,7 +7,7 @@
     .rs__control {
       position: relative;
       width: 100%;
-      min-height: var(--field-min-height);
+      min-height: var(--field-min-height-large);
       background: var(--field-color-bg);
       border: var(--stroke-width-small) solid var(--field-color-border);
       border-radius: var(--field-border-radius);
@@ -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;
@@ -61,7 +57,7 @@
       position: absolute;
       right: var(--spacer-1);
       top: -1px; /* Adjust for border */
-      min-height: var(--field-min-height);
+      min-height: var(--field-min-height-large);
       display: flex;
     }
 
@@ -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-large)"
     });
   }
   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 => {