@payloadcms/ui 4.0.0-internal.183b315 → 4.0.0-internal.293e026

package/dist/elements/Popup/index.js

@@ -1,10 +1,11 @@
 'use client';
 
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export * as PopupList from './PopupButtonList/index.js';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { useEffectEvent } from '../../hooks/useEffectEvent.js';
+import { ThemeProvider } from '../../providers/Theme/index.js';
 import './index.css';
 import { PopupTrigger } from './PopupTrigger/index.js';
 const baseClass = 'popup';
@@ -230,10 +231,19 @@ export const Popup = props => {
   // /////////////////////////////////////
   useEffect(() => {
     if (!active) {
+      const popup_1 = popupRef.current;
+      if (popup_1) {
+        // Clear inline position styles so the CSS `top: -9999px` rule on
+        // `.popup__hidden-content` takes effect. Without this, the inline
+        // styles set during positioning would win over the CSS rule, keeping
+        // portaled children (e.g. a ReactSelect menu) visually on-screen.
+        popup_1.style.top = '';
+        popup_1.style.left = '';
+      }
       return;
     }
-    const popup_1 = popupRef.current;
-    if (!popup_1) {
+    const popup_2 = popupRef.current;
+    if (!popup_2) {
       return;
     }
     // /////////////////////////////////////
@@ -262,7 +272,7 @@ export const Popup = props => {
     if (openedViaKeyboardRef.current) {
       // Use requestAnimationFrame to ensure DOM is ready.
       requestAnimationFrame(() => {
-        const firstFocusable = popup_1.querySelector(TABBABLE_SELECTOR);
+        const firstFocusable = popup_2.querySelector(TABBABLE_SELECTOR);
         firstFocusable?.focus();
       });
     }
@@ -279,7 +289,7 @@ export const Popup = props => {
     });
     document.addEventListener('mousedown', handleClickOutside);
     document.addEventListener('keydown', handleKeyDown);
-    popup_1.addEventListener('click', handleActionableClick);
+    popup_2.addEventListener('click', handleActionableClick);
     return () => {
       cancelAnimationFrame(rafId);
       window.removeEventListener('resize', updatePosition);
@@ -288,7 +298,7 @@ export const Popup = props => {
       });
       document.removeEventListener('mousedown', handleClickOutside);
       document.removeEventListener('keydown', handleKeyDown);
-      popup_1.removeEventListener('click', handleActionableClick);
+      popup_2.removeEventListener('click', handleActionableClick);
     };
   }, [active]);
   useEffect(() => {
@@ -333,11 +343,18 @@ export const Popup = props => {
       "data-popup-id": id || undefined,
       "data-theme": theme === 'auto' ? undefined : theme,
       ref: popupRef,
-      children: [/*#__PURE__*/_jsxs("div", {
+      children: [/*#__PURE__*/_jsx("div", {
         className: `${baseClass}__scroll-container${showScrollbar ? ` ${baseClass}__scroll-container--show-scrollbar` : ''}`,
-        children: [render?.({
-          close: () => setActive(false)
-        }), children]
+        children: theme === 'auto' ? /*#__PURE__*/_jsxs(_Fragment, {
+          children: [render?.({
+            close: () => setActive(false)
+          }), children]
+        }) : /*#__PURE__*/_jsxs(ThemeProvider, {
+          theme: theme,
+          children: [render?.({
+            close: () => setActive(false)
+          }), children]
+        })
       }), caret && /*#__PURE__*/_jsx("div", {
         className: `${baseClass}__caret`
       })]

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["PopupList","React","useCallback","useEffect","useRef","useState","createPortal","useEffectEvent","PopupTrigger","baseClass","TABBABLE_SELECTOR","map","s","join","Popup","props","id","button","buttonClassName","buttonSize","buttonType","caret","children","className","disabled","forceOpen","horizontalAlign","initActive","noBackground","onToggleClose","onToggleOpen","portalClassName","render","renderButton","showOnHover","showScrollbar","size","theme","verticalAlign","popupRef","triggerRef","openedViaKeyboardRef","mounted","setMounted","active","setActiveInternal","isOnTop","setIsOnTop","setActive","isActive","viaKeyboard","current","updatePosition","trigger","popup","triggerRect","getBoundingClientRect","popupRect","offset","top","onTop","bottom","window","scrollY","height","innerHeight","topIfAbove","left","right","width","Math","max","min","innerWidth","triggerCenter","caretLeft","newTop","round","newLeft","scrollX","newCaretLeft","style","getPropertyValue","setProperty","handleClickOutside","e","target","isOutsidePopup","contains","isOutsideTrigger","clickedPopupContent","closest","isInsideChildPopup","handleKeyDown","key","preventDefault","querySelector","focus","focusable","Array","from","querySelectorAll","length","currentIndex","findIndex","el","document","activeElement","goBackward","shiftKey","nextIndex","handleActionableClick","actionable","rafId","requestAnimationFrame","firstFocusable","addEventListener","capture","passive","cancelAnimationFrame","removeEventListener","undefined","Trigger","_jsx","_jsxs","filter","Boolean","ref","onMouseEnter","onMouseLeave","role","tabIndex","close","body"],"sources":["../../../src/elements/Popup/index.tsx"],"sourcesContent":["'use client'\nimport type { CSSProperties } from 'react'\n\nexport * as PopupList from './PopupButtonList/index.js'\n\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\n\nimport { useEffectEvent } from '../../hooks/useEffectEvent.js'\nimport './index.css'\nimport { PopupTrigger } from './PopupTrigger/index.js'\n\nconst baseClass = 'popup'\n\n/**\n * Selector for all elements the browser considers tabbable.\n */\nconst TABBABLE_SELECTOR = [\n  'a[href]',\n  'button:not(:disabled)',\n  'input:not(:disabled):not([type=\"hidden\"])',\n  'select:not(:disabled)',\n  'textarea:not(:disabled)',\n  '[tabindex]',\n  '[contenteditable]:not([contenteditable=\"false\"])',\n  'audio[controls]',\n  'video[controls]',\n  'summary',\n]\n  .map((s) => `${s}:not([tabindex=\"-1\"])`)\n  .join(', ')\n\nexport type PopupProps = {\n  backgroundColor?: CSSProperties['backgroundColor']\n  boundingRef?: React.RefObject<HTMLElement>\n  button?: React.ReactNode\n  /**\n   * The class name to apply to the button that triggers the popup.\n   */\n  buttonClassName?: string\n  buttonSize?: 'large' | 'medium'\n  buttonType?: 'custom' | 'default'\n  caret?: boolean\n  children?: React.ReactNode\n  /**\n   * The class name to apply to the popup container containing the trigger.\n   * This does not wrap the actual popup content, which is rendered in a portal.\n   */\n  className?: string\n  disabled?: boolean\n  /**\n   * Force control the open state of the popup, regardless of the trigger.\n   */\n  forceOpen?: boolean\n  /**\n   * Preferred horizontal alignment of the popup, if there is enough space available.\n   *\n   * @default 'left'\n   */\n  horizontalAlign?: 'center' | 'left' | 'right'\n  id?: string\n  initActive?: boolean\n  noBackground?: boolean\n  onToggleClose?: () => void\n  onToggleOpen?: (active: boolean) => void\n  /**\n   * Class name to apply to the portal container.\n   */\n  portalClassName?: string\n  render?: (args: { close: () => void }) => React.ReactNode\n  /**\n   * Render prop for custom trigger button. Receives onClick/onKeyDown/aria props.\n   * When provided, `button` and `buttonType` are ignored.\n   */\n  renderButton?: (props: {\n    active: boolean\n    'aria-expanded': boolean\n    'aria-haspopup': true\n    onClick: React.MouseEventHandler\n    onKeyDown: React.KeyboardEventHandler\n  }) => React.ReactNode\n  showOnHover?: boolean\n  /**\n   * By default, the scrollbar is hidden. If you want to show it, set this to true.\n   * In both cases, the container is still scrollable.\n   *\n   * @default false\n   */\n  showScrollbar?: boolean\n  size?: 'fit-content' | 'large' | 'medium' | 'small'\n  /**\n   * Theme for the popup content. Defaults to 'dark'.\n   * Set to 'auto' to inherit the current theme.\n   *\n   * @default 'dark'\n   */\n  theme?: 'auto' | 'dark' | 'light'\n  /**\n   * Preferred vertical alignment of the popup (position below or above the trigger),\n   * if there is enough space available.\n   *\n   * If the popup is too close to the edge of the viewport, it will flip to the opposite side\n   * regardless of the preferred vertical alignment.\n   *\n   * @default 'bottom'\n   */\n  verticalAlign?: 'bottom' | 'top'\n}\n\n/**\n * Component that renders a popup, as well as a button that triggers the popup.\n *\n * The popup is rendered in a portal, and is automatically positioned above / below the trigger,\n * depending on the verticalAlign prop and the space available.\n */\nexport const Popup: React.FC<PopupProps> = (props) => {\n  const {\n    id,\n    button,\n    buttonClassName,\n    buttonSize,\n    buttonType = 'default',\n    caret = true,\n    children,\n    className,\n    disabled,\n    forceOpen,\n    horizontalAlign = 'left',\n    initActive = false,\n    noBackground,\n    onToggleClose,\n    onToggleOpen,\n    portalClassName,\n    render,\n    renderButton,\n    showOnHover = false,\n    showScrollbar = false,\n    size = 'medium',\n    theme = 'dark',\n    verticalAlign = 'bottom',\n  } = props\n\n  const popupRef = useRef<HTMLDivElement>(null)\n  const triggerRef = useRef<HTMLDivElement>(null)\n\n  /**\n   * Keeps track of whether the popup was opened via keyboard.\n   * This is used to determine whether to autofocus the first element in the popup.\n   * If the popup was opened via mouse, we do not want to autofocus the first element.\n   */\n  const openedViaKeyboardRef = useRef(false)\n\n  const [mounted, setMounted] = useState(false)\n  const [active, setActiveInternal] = useState(initActive)\n  const [isOnTop, setIsOnTop] = useState(verticalAlign === 'top')\n\n  // Track when component is mounted to avoid SSR/client hydration mismatch\n  useEffect(() => {\n    setMounted(true)\n  }, [])\n\n  const setActive = useCallback(\n    (isActive: boolean, viaKeyboard = false) => {\n      if (isActive) {\n        openedViaKeyboardRef.current = viaKeyboard\n        onToggleOpen?.(true)\n      } else {\n        onToggleClose?.()\n      }\n      setActiveInternal(isActive)\n    },\n    [onToggleClose, onToggleOpen],\n  )\n\n  // /////////////////////////////////////\n  // Position Calculation\n  //\n  // Calculates and applies popup position relative to trigger.\n  // Always checks viewport bounds (for flipping), but only updates\n  // styles if the calculated position differs from current position.\n  // /////////////////////////////////////\n\n  const updatePosition = useEffectEvent(() => {\n    const trigger = triggerRef.current\n    const popup = popupRef.current\n    if (!trigger || !popup) {\n      return\n    }\n\n    const triggerRect = trigger.getBoundingClientRect()\n    const popupRect = popup.getBoundingClientRect()\n\n    // Gap between the popup and the trigger/viewport edges (in pixels)\n    const offset = 10\n\n    // /////////////////////////////////////\n    // Vertical Positioning\n    // Calculates the `top` position in absolute page coordinates.\n    // Uses `verticalAlign` prop as the preferred direction, but flips\n    // to the opposite side if there's not enough viewport space.\n    // /////////////////////////////////////\n\n    let top: number\n    let onTop = verticalAlign === 'top'\n\n    if (verticalAlign === 'bottom') {\n      top = triggerRect.bottom + window.scrollY + offset\n\n      if (triggerRect.bottom + popupRect.height + offset > window.innerHeight) {\n        // Try to flip above — only do so if there's actually enough room\n        const topIfAbove = triggerRect.top + window.scrollY - popupRect.height - offset\n        if (topIfAbove >= window.scrollY) {\n          top = topIfAbove\n          onTop = true\n        }\n        // else: not enough room above either — keep below and let it overflow rather than going off-screen\n      }\n    } else {\n      top = triggerRect.top + window.scrollY - popupRect.height - offset\n\n      if (triggerRect.top - popupRect.height - offset < 0) {\n        top = triggerRect.bottom + window.scrollY + offset\n        onTop = false\n      }\n    }\n\n    setIsOnTop(onTop)\n\n    // /////////////////////////////////////\n    // Horizontal Positioning\n    // Calculates the `left` position based on `horizontalAlign` prop:\n    // - 'left': aligns popup's left edge with trigger's left edge\n    // - 'right': aligns popup's right edge with trigger's right edge\n    // - 'center': centers popup horizontally relative to trigger\n    // Then clamps to keep the popup within viewport bounds.\n    // /////////////////////////////////////\n\n    let left =\n      horizontalAlign === 'right'\n        ? triggerRect.right - popupRect.width\n        : horizontalAlign === 'center'\n          ? triggerRect.left + triggerRect.width / 2 - popupRect.width / 2\n          : triggerRect.left\n\n    left = Math.max(offset, Math.min(left, window.innerWidth - popupRect.width - offset))\n\n    // /////////////////////////////////////\n    // Caret Positioning\n    // Positions the caret arrow to point at the trigger's horizontal center.\n    // Clamps between 12px from edges to prevent caret from overflowing the popup.\n    // /////////////////////////////////////\n\n    const triggerCenter = triggerRect.left + triggerRect.width / 2\n    const caretLeft = Math.max(12, Math.min(triggerCenter - left, popupRect.width - 12))\n\n    // /////////////////////////////////////\n    // Apply Styles (only if changed)\n    // Compares calculated position with current styles to avoid unnecessary\n    // DOM updates during scroll. This prevents visual lag by relying on the absolute\n    // positioning where possible (popup slightly lags behind when scrolling really fast),\n    // while still allowing position changes when needed (e.g., sticky parent, viewport flip).\n    // Values are rounded to match browser's CSS precision and avoid false updates.\n    // /////////////////////////////////////\n\n    const newTop = `${Math.round(top)}px`\n    const newLeft = `${Math.round(left + window.scrollX)}px`\n    const newCaretLeft = `${Math.round(caretLeft)}px`\n\n    if (popup.style.top !== newTop) {\n      popup.style.top = newTop\n    }\n    if (popup.style.left !== newLeft) {\n      popup.style.left = newLeft\n    }\n    if (popup.style.getPropertyValue('--caret-left') !== newCaretLeft) {\n      popup.style.setProperty('--caret-left', newCaretLeft)\n    }\n  })\n\n  // /////////////////////////////////////\n  // Click Outside Handler\n  // Closes popup when clicking outside both the popup and trigger.\n  // Distinguishes between parent and child popups:\n  // - Click in child popup: parent stays open\n  // - Click in parent popup: child closes\n  // /////////////////////////////////////\n\n  const handleClickOutside = useEffectEvent((e: MouseEvent) => {\n    const target = e.target as Node\n    const isOutsidePopup = !popupRef.current?.contains(target)\n    const isOutsideTrigger = !triggerRef.current?.contains(target)\n\n    // Check if click is inside a popup portal\n    const clickedPopupContent = (target as Element).closest?.('.popup__content')\n\n    // If the clicked popup contains this popup's trigger, it's a parent popup\n    // and we should close. If it doesn't contain our trigger, it's a child popup\n    // and we should stay open to avoid closing parent when interacting with child.\n    const isInsideChildPopup =\n      clickedPopupContent && !clickedPopupContent.contains(triggerRef.current)\n\n    if (isOutsidePopup && isOutsideTrigger && !isInsideChildPopup) {\n      setActive(false)\n    }\n  })\n\n  // /////////////////////////////////////\n  // Keyboard Navigation\n  // Handles keyboard interactions when popup is open:\n  // - Escape: closes popup and returns focus to trigger\n  // - Tab/Shift+Tab: cycles through focusable items with wrapping\n  // - ArrowUp/ArrowDown: same as Shift+Tab/Tab for menu-style navigation\n  // Focus is managed manually to support elements the browser might skip.\n  // /////////////////////////////////////\n\n  const handleKeyDown = useEffectEvent((e: KeyboardEvent) => {\n    const popup = popupRef.current\n    if (!popup || !active) {\n      return\n    }\n\n    if (e.key === 'Escape') {\n      e.preventDefault()\n      setActive(false)\n      triggerRef.current?.querySelector<HTMLElement>('button, [tabindex=\"0\"]')?.focus()\n      return\n    }\n\n    if (e.key === 'Tab' || e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n      const focusable = Array.from(popup.querySelectorAll<HTMLElement>(TABBABLE_SELECTOR))\n      if (focusable.length === 0) {\n        return\n      }\n\n      e.preventDefault()\n\n      const currentIndex = focusable.findIndex((el) => el === document.activeElement)\n      const goBackward = e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)\n\n      let nextIndex: number\n      if (currentIndex === -1) {\n        nextIndex = goBackward ? focusable.length - 1 : 0\n      } else if (goBackward) {\n        nextIndex = currentIndex === 0 ? focusable.length - 1 : currentIndex - 1\n      } else {\n        nextIndex = currentIndex === focusable.length - 1 ? 0 : currentIndex + 1\n      }\n\n      focusable[nextIndex].focus()\n    }\n  })\n\n  // /////////////////////////////////////\n  // Click Handler for Actionable Elements\n  // Closes popup when buttons/links inside are clicked (includes Enter/Space activation).\n  // /////////////////////////////////////\n\n  const handleActionableClick = useEffectEvent((e: MouseEvent) => {\n    const target = e.target as HTMLElement\n\n    // Allow opting out with data-popup-prevent-close attribute on element or ancestor\n    if (target.closest('[data-popup-prevent-close]')) {\n      return\n    }\n\n    // Check if the clicked element or any ancestor is an actionable element\n    const actionable = target.closest('button, a[href], [role=\"button\"], [role=\"menuitem\"]')\n    if (actionable && popupRef.current?.contains(actionable)) {\n      setActive(false)\n    }\n  })\n\n  // /////////////////////////////////////\n  // Effect: Setup/Teardown position and focus management\n  // /////////////////////////////////////\n\n  useEffect(() => {\n    if (!active) {\n      return\n    }\n\n    const popup = popupRef.current\n    if (!popup) {\n      return\n    }\n\n    // /////////////////////////////////////\n    // Initial Position\n    // Calculate and apply popup position.\n    // getBoundingClientRect() forces synchronous layout.\n    //\n    // We call updatePosition() twice: once synchronously (so the popup\n    // snaps to roughly the right place immediately rather than flashing\n    // from -9999px) and once in a requestAnimationFrame, which fires\n    // after the browser has finished laying out the newly-visible popup\n    // content. The rAF call is the authoritative one — it catches cases\n    // where the popup height wasn't stable yet during the first call\n    // (e.g. ColumnSelector content rendering after hidden → visible\n    // class switch), which was causing incorrect flip-to-top decisions.\n    // /////////////////////////////////////\n\n    updatePosition()\n    const rafId = requestAnimationFrame(() => {\n      updatePosition()\n    })\n\n    // /////////////////////////////////////\n    // Focus Management\n    // When opened via keyboard, autofocus the first focusable button.\n    // When opened via mouse, skip autofocus to avoid unwanted highlights.\n    // /////////////////////////////////////\n\n    if (openedViaKeyboardRef.current) {\n      // Use requestAnimationFrame to ensure DOM is ready.\n      requestAnimationFrame(() => {\n        const firstFocusable = popup.querySelector<HTMLElement>(TABBABLE_SELECTOR)\n        firstFocusable?.focus()\n      })\n    }\n\n    // /////////////////////////////////////\n    // Event Listeners\n    // - resize/scroll: recalculate position (only applies styles if changed)\n    // - mousedown: detect clicks outside to close\n    // - keydown: handle keyboard navigation\n    // /////////////////////////////////////\n\n    window.addEventListener('resize', updatePosition)\n    window.addEventListener('scroll', updatePosition, { capture: true, passive: true })\n    document.addEventListener('mousedown', handleClickOutside)\n    document.addEventListener('keydown', handleKeyDown)\n    popup.addEventListener('click', handleActionableClick)\n\n    return () => {\n      cancelAnimationFrame(rafId)\n      window.removeEventListener('resize', updatePosition)\n      window.removeEventListener('scroll', updatePosition, { capture: true })\n      document.removeEventListener('mousedown', handleClickOutside)\n      document.removeEventListener('keydown', handleKeyDown)\n      popup.removeEventListener('click', handleActionableClick)\n    }\n  }, [active])\n\n  useEffect(() => {\n    if (forceOpen !== undefined) {\n      setActive(forceOpen)\n    }\n  }, [forceOpen, setActive])\n\n  const Trigger = (\n    <PopupTrigger\n      active={active}\n      button={button}\n      buttonType={buttonType}\n      className={buttonClassName}\n      disabled={disabled}\n      noBackground={noBackground}\n      renderButton={renderButton}\n      setActive={setActive}\n      size={buttonSize}\n    />\n  )\n\n  return (\n    <div className={[baseClass, className].filter(Boolean).join(' ')} id={id}>\n      <div className={`${baseClass}__trigger-wrap`} ref={triggerRef}>\n        {showOnHover ? (\n          <div\n            className={`${baseClass}__on-hover-watch`}\n            onMouseEnter={() => setActive(true)}\n            onMouseLeave={() => setActive(false)}\n            role=\"button\"\n            tabIndex={0}\n          >\n            {Trigger}\n          </div>\n        ) : (\n          Trigger\n        )}\n      </div>\n\n      {mounted\n        ? // We need to make sure the popup is part of the DOM (although invisible), even if it's not active.\n          // This ensures that components within the popup, like modals, do not unmount when the popup closes.\n          // Otherwise, modals opened from the popup will close unexpectedly when clicking within the modal, since\n          // that closes the popup due to the click outside handler.\n          createPortal(\n            <div\n              className={\n                active\n                  ? [\n                      `${baseClass}__content`,\n                      `${baseClass}--size-${size}`,\n                      isOnTop ? `${baseClass}--v-top` : `${baseClass}--v-bottom`,\n                      portalClassName,\n                    ]\n                      .filter(Boolean)\n                      .join(' ')\n                  : // Do not share any class names between active and disabled popups, to make sure\n                    // tests do not accidentally target inactive popups.\n                    `${baseClass}__hidden-content`\n              }\n              data-popup-id={id || undefined}\n              data-theme={theme === 'auto' ? undefined : theme}\n              ref={popupRef}\n            >\n              <div\n                className={`${baseClass}__scroll-container${showScrollbar ? ` ${baseClass}__scroll-container--show-scrollbar` : ''}`}\n              >\n                {render?.({ close: () => setActive(false) })}\n                {children}\n              </div>\n              {caret && <div className={`${baseClass}__caret`} />}\n            </div>,\n            document.body,\n          )\n        : null}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["PopupList","React","useCallback","useEffect","useRef","useState","createPortal","useEffectEvent","ThemeProvider","PopupTrigger","baseClass","TABBABLE_SELECTOR","map","s","join","Popup","props","id","button","buttonClassName","buttonSize","buttonType","caret","children","className","disabled","forceOpen","horizontalAlign","initActive","noBackground","onToggleClose","onToggleOpen","portalClassName","render","renderButton","showOnHover","showScrollbar","size","theme","verticalAlign","popupRef","triggerRef","openedViaKeyboardRef","mounted","setMounted","active","setActiveInternal","isOnTop","setIsOnTop","setActive","isActive","viaKeyboard","current","updatePosition","trigger","popup","triggerRect","getBoundingClientRect","popupRect","offset","top","onTop","bottom","window","scrollY","height","innerHeight","topIfAbove","left","right","width","Math","max","min","innerWidth","triggerCenter","caretLeft","newTop","round","newLeft","scrollX","newCaretLeft","style","getPropertyValue","setProperty","handleClickOutside","e","target","isOutsidePopup","contains","isOutsideTrigger","clickedPopupContent","closest","isInsideChildPopup","handleKeyDown","key","preventDefault","querySelector","focus","focusable","Array","from","querySelectorAll","length","currentIndex","findIndex","el","document","activeElement","goBackward","shiftKey","nextIndex","handleActionableClick","actionable","rafId","requestAnimationFrame","firstFocusable","addEventListener","capture","passive","cancelAnimationFrame","removeEventListener","undefined","Trigger","_jsx","_jsxs","filter","Boolean","ref","onMouseEnter","onMouseLeave","role","tabIndex","_Fragment","close","body"],"sources":["../../../src/elements/Popup/index.tsx"],"sourcesContent":["'use client'\nimport type { CSSProperties } from 'react'\n\nexport * as PopupList from './PopupButtonList/index.js'\n\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\n\nimport { useEffectEvent } from '../../hooks/useEffectEvent.js'\nimport { ThemeProvider } from '../../providers/Theme/index.js'\nimport './index.css'\nimport { PopupTrigger } from './PopupTrigger/index.js'\n\nconst baseClass = 'popup'\n\n/**\n * Selector for all elements the browser considers tabbable.\n */\nconst TABBABLE_SELECTOR = [\n  'a[href]',\n  'button:not(:disabled)',\n  'input:not(:disabled):not([type=\"hidden\"])',\n  'select:not(:disabled)',\n  'textarea:not(:disabled)',\n  '[tabindex]',\n  '[contenteditable]:not([contenteditable=\"false\"])',\n  'audio[controls]',\n  'video[controls]',\n  'summary',\n]\n  .map((s) => `${s}:not([tabindex=\"-1\"])`)\n  .join(', ')\n\nexport type PopupProps = {\n  backgroundColor?: CSSProperties['backgroundColor']\n  boundingRef?: React.RefObject<HTMLElement>\n  button?: React.ReactNode\n  /**\n   * The class name to apply to the button that triggers the popup.\n   */\n  buttonClassName?: string\n  buttonSize?: 'large' | 'medium'\n  buttonType?: 'custom' | 'default'\n  caret?: boolean\n  children?: React.ReactNode\n  /**\n   * The class name to apply to the popup container containing the trigger.\n   * This does not wrap the actual popup content, which is rendered in a portal.\n   */\n  className?: string\n  disabled?: boolean\n  /**\n   * Force control the open state of the popup, regardless of the trigger.\n   */\n  forceOpen?: boolean\n  /**\n   * Preferred horizontal alignment of the popup, if there is enough space available.\n   *\n   * @default 'left'\n   */\n  horizontalAlign?: 'center' | 'left' | 'right'\n  id?: string\n  initActive?: boolean\n  noBackground?: boolean\n  onToggleClose?: () => void\n  onToggleOpen?: (active: boolean) => void\n  /**\n   * Class name to apply to the portal container.\n   */\n  portalClassName?: string\n  render?: (args: { close: () => void }) => React.ReactNode\n  /**\n   * Render prop for custom trigger button. Receives onClick/onKeyDown/aria props.\n   * When provided, `button` and `buttonType` are ignored.\n   */\n  renderButton?: (props: {\n    active: boolean\n    'aria-expanded': boolean\n    'aria-haspopup': true\n    onClick: React.MouseEventHandler\n    onKeyDown: React.KeyboardEventHandler\n  }) => React.ReactNode\n  showOnHover?: boolean\n  /**\n   * By default, the scrollbar is hidden. If you want to show it, set this to true.\n   * In both cases, the container is still scrollable.\n   *\n   * @default false\n   */\n  showScrollbar?: boolean\n  size?: 'fit-content' | 'large' | 'medium' | 'small'\n  /**\n   * Theme for the popup content. Defaults to 'dark'.\n   * Set to 'auto' to inherit the current theme.\n   *\n   * @default 'dark'\n   */\n  theme?: 'auto' | 'dark' | 'light'\n  /**\n   * Preferred vertical alignment of the popup (position below or above the trigger),\n   * if there is enough space available.\n   *\n   * If the popup is too close to the edge of the viewport, it will flip to the opposite side\n   * regardless of the preferred vertical alignment.\n   *\n   * @default 'bottom'\n   */\n  verticalAlign?: 'bottom' | 'top'\n}\n\n/**\n * Component that renders a popup, as well as a button that triggers the popup.\n *\n * The popup is rendered in a portal, and is automatically positioned above / below the trigger,\n * depending on the verticalAlign prop and the space available.\n */\nexport const Popup: React.FC<PopupProps> = (props) => {\n  const {\n    id,\n    button,\n    buttonClassName,\n    buttonSize,\n    buttonType = 'default',\n    caret = true,\n    children,\n    className,\n    disabled,\n    forceOpen,\n    horizontalAlign = 'left',\n    initActive = false,\n    noBackground,\n    onToggleClose,\n    onToggleOpen,\n    portalClassName,\n    render,\n    renderButton,\n    showOnHover = false,\n    showScrollbar = false,\n    size = 'medium',\n    theme = 'dark',\n    verticalAlign = 'bottom',\n  } = props\n\n  const popupRef = useRef<HTMLDivElement>(null)\n  const triggerRef = useRef<HTMLDivElement>(null)\n\n  /**\n   * Keeps track of whether the popup was opened via keyboard.\n   * This is used to determine whether to autofocus the first element in the popup.\n   * If the popup was opened via mouse, we do not want to autofocus the first element.\n   */\n  const openedViaKeyboardRef = useRef(false)\n\n  const [mounted, setMounted] = useState(false)\n  const [active, setActiveInternal] = useState(initActive)\n  const [isOnTop, setIsOnTop] = useState(verticalAlign === 'top')\n\n  // Track when component is mounted to avoid SSR/client hydration mismatch\n  useEffect(() => {\n    setMounted(true)\n  }, [])\n\n  const setActive = useCallback(\n    (isActive: boolean, viaKeyboard = false) => {\n      if (isActive) {\n        openedViaKeyboardRef.current = viaKeyboard\n        onToggleOpen?.(true)\n      } else {\n        onToggleClose?.()\n      }\n      setActiveInternal(isActive)\n    },\n    [onToggleClose, onToggleOpen],\n  )\n\n  // /////////////////////////////////////\n  // Position Calculation\n  //\n  // Calculates and applies popup position relative to trigger.\n  // Always checks viewport bounds (for flipping), but only updates\n  // styles if the calculated position differs from current position.\n  // /////////////////////////////////////\n\n  const updatePosition = useEffectEvent(() => {\n    const trigger = triggerRef.current\n    const popup = popupRef.current\n    if (!trigger || !popup) {\n      return\n    }\n\n    const triggerRect = trigger.getBoundingClientRect()\n    const popupRect = popup.getBoundingClientRect()\n\n    // Gap between the popup and the trigger/viewport edges (in pixels)\n    const offset = 10\n\n    // /////////////////////////////////////\n    // Vertical Positioning\n    // Calculates the `top` position in absolute page coordinates.\n    // Uses `verticalAlign` prop as the preferred direction, but flips\n    // to the opposite side if there's not enough viewport space.\n    // /////////////////////////////////////\n\n    let top: number\n    let onTop = verticalAlign === 'top'\n\n    if (verticalAlign === 'bottom') {\n      top = triggerRect.bottom + window.scrollY + offset\n\n      if (triggerRect.bottom + popupRect.height + offset > window.innerHeight) {\n        // Try to flip above — only do so if there's actually enough room\n        const topIfAbove = triggerRect.top + window.scrollY - popupRect.height - offset\n        if (topIfAbove >= window.scrollY) {\n          top = topIfAbove\n          onTop = true\n        }\n        // else: not enough room above either — keep below and let it overflow rather than going off-screen\n      }\n    } else {\n      top = triggerRect.top + window.scrollY - popupRect.height - offset\n\n      if (triggerRect.top - popupRect.height - offset < 0) {\n        top = triggerRect.bottom + window.scrollY + offset\n        onTop = false\n      }\n    }\n\n    setIsOnTop(onTop)\n\n    // /////////////////////////////////////\n    // Horizontal Positioning\n    // Calculates the `left` position based on `horizontalAlign` prop:\n    // - 'left': aligns popup's left edge with trigger's left edge\n    // - 'right': aligns popup's right edge with trigger's right edge\n    // - 'center': centers popup horizontally relative to trigger\n    // Then clamps to keep the popup within viewport bounds.\n    // /////////////////////////////////////\n\n    let left =\n      horizontalAlign === 'right'\n        ? triggerRect.right - popupRect.width\n        : horizontalAlign === 'center'\n          ? triggerRect.left + triggerRect.width / 2 - popupRect.width / 2\n          : triggerRect.left\n\n    left = Math.max(offset, Math.min(left, window.innerWidth - popupRect.width - offset))\n\n    // /////////////////////////////////////\n    // Caret Positioning\n    // Positions the caret arrow to point at the trigger's horizontal center.\n    // Clamps between 12px from edges to prevent caret from overflowing the popup.\n    // /////////////////////////////////////\n\n    const triggerCenter = triggerRect.left + triggerRect.width / 2\n    const caretLeft = Math.max(12, Math.min(triggerCenter - left, popupRect.width - 12))\n\n    // /////////////////////////////////////\n    // Apply Styles (only if changed)\n    // Compares calculated position with current styles to avoid unnecessary\n    // DOM updates during scroll. This prevents visual lag by relying on the absolute\n    // positioning where possible (popup slightly lags behind when scrolling really fast),\n    // while still allowing position changes when needed (e.g., sticky parent, viewport flip).\n    // Values are rounded to match browser's CSS precision and avoid false updates.\n    // /////////////////////////////////////\n\n    const newTop = `${Math.round(top)}px`\n    const newLeft = `${Math.round(left + window.scrollX)}px`\n    const newCaretLeft = `${Math.round(caretLeft)}px`\n\n    if (popup.style.top !== newTop) {\n      popup.style.top = newTop\n    }\n    if (popup.style.left !== newLeft) {\n      popup.style.left = newLeft\n    }\n    if (popup.style.getPropertyValue('--caret-left') !== newCaretLeft) {\n      popup.style.setProperty('--caret-left', newCaretLeft)\n    }\n  })\n\n  // /////////////////////////////////////\n  // Click Outside Handler\n  // Closes popup when clicking outside both the popup and trigger.\n  // Distinguishes between parent and child popups:\n  // - Click in child popup: parent stays open\n  // - Click in parent popup: child closes\n  // /////////////////////////////////////\n\n  const handleClickOutside = useEffectEvent((e: MouseEvent) => {\n    const target = e.target as Node\n    const isOutsidePopup = !popupRef.current?.contains(target)\n    const isOutsideTrigger = !triggerRef.current?.contains(target)\n\n    // Check if click is inside a popup portal\n    const clickedPopupContent = (target as Element).closest?.('.popup__content')\n\n    // If the clicked popup contains this popup's trigger, it's a parent popup\n    // and we should close. If it doesn't contain our trigger, it's a child popup\n    // and we should stay open to avoid closing parent when interacting with child.\n    const isInsideChildPopup =\n      clickedPopupContent && !clickedPopupContent.contains(triggerRef.current)\n\n    if (isOutsidePopup && isOutsideTrigger && !isInsideChildPopup) {\n      setActive(false)\n    }\n  })\n\n  // /////////////////////////////////////\n  // Keyboard Navigation\n  // Handles keyboard interactions when popup is open:\n  // - Escape: closes popup and returns focus to trigger\n  // - Tab/Shift+Tab: cycles through focusable items with wrapping\n  // - ArrowUp/ArrowDown: same as Shift+Tab/Tab for menu-style navigation\n  // Focus is managed manually to support elements the browser might skip.\n  // /////////////////////////////////////\n\n  const handleKeyDown = useEffectEvent((e: KeyboardEvent) => {\n    const popup = popupRef.current\n    if (!popup || !active) {\n      return\n    }\n\n    if (e.key === 'Escape') {\n      e.preventDefault()\n      setActive(false)\n      triggerRef.current?.querySelector<HTMLElement>('button, [tabindex=\"0\"]')?.focus()\n      return\n    }\n\n    if (e.key === 'Tab' || e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n      const focusable = Array.from(popup.querySelectorAll<HTMLElement>(TABBABLE_SELECTOR))\n      if (focusable.length === 0) {\n        return\n      }\n\n      e.preventDefault()\n\n      const currentIndex = focusable.findIndex((el) => el === document.activeElement)\n      const goBackward = e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)\n\n      let nextIndex: number\n      if (currentIndex === -1) {\n        nextIndex = goBackward ? focusable.length - 1 : 0\n      } else if (goBackward) {\n        nextIndex = currentIndex === 0 ? focusable.length - 1 : currentIndex - 1\n      } else {\n        nextIndex = currentIndex === focusable.length - 1 ? 0 : currentIndex + 1\n      }\n\n      focusable[nextIndex].focus()\n    }\n  })\n\n  // /////////////////////////////////////\n  // Click Handler for Actionable Elements\n  // Closes popup when buttons/links inside are clicked (includes Enter/Space activation).\n  // /////////////////////////////////////\n\n  const handleActionableClick = useEffectEvent((e: MouseEvent) => {\n    const target = e.target as HTMLElement\n\n    // Allow opting out with data-popup-prevent-close attribute on element or ancestor\n    if (target.closest('[data-popup-prevent-close]')) {\n      return\n    }\n\n    // Check if the clicked element or any ancestor is an actionable element\n    const actionable = target.closest('button, a[href], [role=\"button\"], [role=\"menuitem\"]')\n    if (actionable && popupRef.current?.contains(actionable)) {\n      setActive(false)\n    }\n  })\n\n  // /////////////////////////////////////\n  // Effect: Setup/Teardown position and focus management\n  // /////////////////////////////////////\n\n  useEffect(() => {\n    if (!active) {\n      const popup = popupRef.current\n      if (popup) {\n        // Clear inline position styles so the CSS `top: -9999px` rule on\n        // `.popup__hidden-content` takes effect. Without this, the inline\n        // styles set during positioning would win over the CSS rule, keeping\n        // portaled children (e.g. a ReactSelect menu) visually on-screen.\n        popup.style.top = ''\n        popup.style.left = ''\n      }\n      return\n    }\n\n    const popup = popupRef.current\n    if (!popup) {\n      return\n    }\n\n    // /////////////////////////////////////\n    // Initial Position\n    // Calculate and apply popup position.\n    // getBoundingClientRect() forces synchronous layout.\n    //\n    // We call updatePosition() twice: once synchronously (so the popup\n    // snaps to roughly the right place immediately rather than flashing\n    // from -9999px) and once in a requestAnimationFrame, which fires\n    // after the browser has finished laying out the newly-visible popup\n    // content. The rAF call is the authoritative one — it catches cases\n    // where the popup height wasn't stable yet during the first call\n    // (e.g. ColumnSelector content rendering after hidden → visible\n    // class switch), which was causing incorrect flip-to-top decisions.\n    // /////////////////////////////////////\n\n    updatePosition()\n    const rafId = requestAnimationFrame(() => {\n      updatePosition()\n    })\n\n    // /////////////////////////////////////\n    // Focus Management\n    // When opened via keyboard, autofocus the first focusable button.\n    // When opened via mouse, skip autofocus to avoid unwanted highlights.\n    // /////////////////////////////////////\n\n    if (openedViaKeyboardRef.current) {\n      // Use requestAnimationFrame to ensure DOM is ready.\n      requestAnimationFrame(() => {\n        const firstFocusable = popup.querySelector<HTMLElement>(TABBABLE_SELECTOR)\n        firstFocusable?.focus()\n      })\n    }\n\n    // /////////////////////////////////////\n    // Event Listeners\n    // - resize/scroll: recalculate position (only applies styles if changed)\n    // - mousedown: detect clicks outside to close\n    // - keydown: handle keyboard navigation\n    // /////////////////////////////////////\n\n    window.addEventListener('resize', updatePosition)\n    window.addEventListener('scroll', updatePosition, { capture: true, passive: true })\n    document.addEventListener('mousedown', handleClickOutside)\n    document.addEventListener('keydown', handleKeyDown)\n    popup.addEventListener('click', handleActionableClick)\n\n    return () => {\n      cancelAnimationFrame(rafId)\n      window.removeEventListener('resize', updatePosition)\n      window.removeEventListener('scroll', updatePosition, { capture: true })\n      document.removeEventListener('mousedown', handleClickOutside)\n      document.removeEventListener('keydown', handleKeyDown)\n      popup.removeEventListener('click', handleActionableClick)\n    }\n  }, [active])\n\n  useEffect(() => {\n    if (forceOpen !== undefined) {\n      setActive(forceOpen)\n    }\n  }, [forceOpen, setActive])\n\n  const Trigger = (\n    <PopupTrigger\n      active={active}\n      button={button}\n      buttonType={buttonType}\n      className={buttonClassName}\n      disabled={disabled}\n      noBackground={noBackground}\n      renderButton={renderButton}\n      setActive={setActive}\n      size={buttonSize}\n    />\n  )\n\n  return (\n    <div className={[baseClass, className].filter(Boolean).join(' ')} id={id}>\n      <div className={`${baseClass}__trigger-wrap`} ref={triggerRef}>\n        {showOnHover ? (\n          <div\n            className={`${baseClass}__on-hover-watch`}\n            onMouseEnter={() => setActive(true)}\n            onMouseLeave={() => setActive(false)}\n            role=\"button\"\n            tabIndex={0}\n          >\n            {Trigger}\n          </div>\n        ) : (\n          Trigger\n        )}\n      </div>\n\n      {mounted\n        ? // We need to make sure the popup is part of the DOM (although invisible), even if it's not active.\n          // This ensures that components within the popup, like modals, do not unmount when the popup closes.\n          // Otherwise, modals opened from the popup will close unexpectedly when clicking within the modal, since\n          // that closes the popup due to the click outside handler.\n          createPortal(\n            <div\n              className={\n                active\n                  ? [\n                      `${baseClass}__content`,\n                      `${baseClass}--size-${size}`,\n                      isOnTop ? `${baseClass}--v-top` : `${baseClass}--v-bottom`,\n                      portalClassName,\n                    ]\n                      .filter(Boolean)\n                      .join(' ')\n                  : // Do not share any class names between active and disabled popups, to make sure\n                    // tests do not accidentally target inactive popups.\n                    `${baseClass}__hidden-content`\n              }\n              data-popup-id={id || undefined}\n              data-theme={theme === 'auto' ? undefined : theme}\n              ref={popupRef}\n            >\n              <div\n                className={`${baseClass}__scroll-container${showScrollbar ? ` ${baseClass}__scroll-container--show-scrollbar` : ''}`}\n              >\n                {theme === 'auto' ? (\n                  <>\n                    {render?.({ close: () => setActive(false) })}\n                    {children}\n                  </>\n                ) : (\n                  <ThemeProvider theme={theme}>\n                    {render?.({ close: () => setActive(false) })}\n                    {children}\n                  </ThemeProvider>\n                )}\n              </div>\n              {caret && <div className={`${baseClass}__caret`} />}\n            </div>,\n            document.body,\n          )\n        : null}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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,59 @@
     }
   }
 
+  /* 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 {
+    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);
+  }
+
   .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,KAA2B,MAAM,OAAO,CAAA;AAI/C,OAAO,KAAK,EAAU,uBAAuB,EAAE,MAAM,YAAY,CAAA;AACjE,YAAY,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAexC,OAAO,aAAa,CAAA;AA0RpB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAQzD,CAAA"}

package/dist/elements/ReactSelect/index.js

@@ -1,11 +1,13 @@
 '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 Select, { components as rsComponents } from 'react-select';
 import CreatableSelect from 'react-select/creatable';
+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';
@@ -23,6 +25,32 @@ 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 SelectAdapter = props => {
   const {
     i18n,
@@ -37,6 +65,7 @@ const SelectAdapter = props => {
   }, []);
   const {
     className,
+    classNames: externalClassNames,
     components,
     customProps,
     disabled = false,
@@ -46,6 +75,8 @@ const SelectAdapter = props => {
     isCreatable,
     isLoading,
     isSearchable = true,
+    menuPortalTarget: menuPortalTargetProp,
+    menuPosition: menuPositionProp,
     noOptionsMessage = () => t('general:noOptions'),
     numberOnly = false,
     onChange,
@@ -57,6 +88,8 @@ const SelectAdapter = props => {
     styles: externalStyles,
     value
   } = props;
+  const menuPortalTarget = menuPortalTargetProp === undefined ? typeof document !== 'undefined' ? document.body : null : menuPortalTargetProp;
+  const menuPosition = menuPositionProp ?? (menuPortalTarget ? 'fixed' : undefined);
   const loadingMessage = () => t('general:loading') + '...';
   const classes = [className, 'react-select', showError && 'react-select--error'].filter(Boolean).join(' ');
   const styles = {
@@ -68,16 +101,26 @@ const SelectAdapter = props => {
       zIndex: undefined,
       ...externalStyles?.menu?.(rsStyles, state)
     }),
+    // 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_0) => ({
+        ...rsStyles_0,
+        zIndex: 9999,
+        ...externalStyles?.menuPortal?.(rsStyles_0, state_0)
+      })
+    }),
     // Remove the default react-select min-height so our CSS can control it
-    control: (rsStyles_0, state_0) => ({
-      ...rsStyles_0,
+    control: (rsStyles_1, state_1) => ({
+      ...rsStyles_1,
       minHeight: undefined,
-      ...externalStyles?.control?.(rsStyles_0, state_0)
+      ...externalStyles?.control?.(rsStyles_1, state_1)
     }),
     // Allow external option styles to override emotion defaults
-    option: (rsStyles_1, state_1) => ({
-      ...rsStyles_1,
-      ...externalStyles?.option?.(rsStyles_1, state_1)
+    option: (rsStyles_2, state_2) => ({
+      ...rsStyles_2,
+      ...externalStyles?.option?.(rsStyles_2, state_2)
     })
   };
   if (!hasMounted) {
@@ -94,13 +137,19 @@ const SelectAdapter = props => {
       className: classes,
       classNamePrefix: "rs",
       classNames: {
-        menu: state_2 => state_2.placement ? `rs__menu--placement-${state_2.placement}` : ''
+        ...externalClassNames,
+        menu: state_3 => {
+          const placement = state_3.placement ? `rs__menu--placement-${state_3.placement}` : '';
+          const external = externalClassNames?.menu?.(state_3) ?? '';
+          return [placement, external].filter(Boolean).join(' ');
+        }
       },
       components: {
         ClearIndicator,
         Control,
         DropdownIndicator,
         Input,
+        MenuPortal: ThemedMenuPortal,
         MultiValue,
         MultiValueLabel,
         MultiValueRemove,
@@ -116,6 +165,8 @@ const SelectAdapter = props => {
       isSearchable: isSearchable,
       loadingMessage: loadingMessage,
       menuPlacement: "auto",
+      menuPortalTarget: menuPortalTarget,
+      menuPosition: menuPosition,
       noOptionsMessage: noOptionsMessage,
       onChange: onChange,
       onMenuClose: onMenuClose,
@@ -164,13 +215,19 @@ const SelectAdapter = props => {
     className: classes,
     classNamePrefix: "rs",
     classNames: {
-      menu: state_3 => state_3.placement ? `rs__menu--placement-${state_3.placement}` : ''
+      ...externalClassNames,
+      menu: state_4 => {
+        const placement_0 = state_4.placement ? `rs__menu--placement-${state_4.placement}` : '';
+        const external_0 = externalClassNames?.menu?.(state_4) ?? '';
+        return [placement_0, external_0].filter(Boolean).join(' ');
+      }
     },
     components: {
       ClearIndicator,
       Control,
       DropdownIndicator,
       Input,
+      MenuPortal: ThemedMenuPortal,
       MultiValue,
       MultiValueLabel,
       MultiValueRemove,
@@ -186,6 +243,8 @@ const SelectAdapter = props => {
     isSearchable: isSearchable,
     loadingMessage: loadingMessage,
     menuPlacement: "auto",
+    menuPortalTarget: menuPortalTarget,
+    menuPosition: menuPosition,
     noOptionsMessage: noOptionsMessage,
     onChange: onChange,
     onInputChange: newValue => setInputValue(newValue),

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=\"var(--field-min-height)\" />\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","useEffect","useId","Select","components","rsComponents","CreatableSelect","useTheme","useTranslation","DraggableSortable","ShimmerEffect","ClearIndicator","Control","DropdownIndicator","Input","generateMultiValueDraggableID","MultiValue","MultiValueLabel","MultiValueRemove","SingleValue","ValueContainer","createOption","label","value","ThemedMenuPortal","props","$","theme","menuPortalTheme","selectProps","customProps","t0","t1","_jsx","MenuPortal","innerProps","SelectAdapter","i18n","t","inputValue","setInputValue","useState","uuid","hasMounted","setHasMounted","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","document","body","loadingMessage","classes","filter","Boolean","join","menu","rsStyles","state","zIndex","menuPortal","control","minHeight","option","height","captureMenuScroll","classNamePrefix","placement","external","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 { JSX, KeyboardEventHandler } from 'react'\nimport type { GroupBase, MenuProps, StylesConfig } from 'react-select'\n\nimport { arrayMove } from '@dnd-kit/sortable'\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { useEffect, useId } 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 { 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 { 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\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 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    classNames: externalClassNames,\n    components,\n    customProps,\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\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    // 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  }\n\n  if (!hasMounted) {\n    return <ShimmerEffect height=\"var(--field-min-height)\" />\n  }\n\n  if (!isCreatable) {\n    return (\n      <Select<Option, boolean, GroupBase<Option>>\n        captureMenuScroll\n        customProps={customProps}\n        isLoading={isLoading}\n        {...props}\n        className={classes}\n        classNamePrefix=\"rs\"\n        classNames={{\n          ...externalClassNames,\n          menu: (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        }}\n        components={{\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        filterOption={filterOption}\n        getOptionValue={getOptionValue}\n        instanceId={uuid}\n        isClearable={isClearable}\n        isDisabled={disabled}\n        isSearchable={isSearchable}\n        loadingMessage={loadingMessage}\n        menuPlacement=\"auto\"\n        menuPortalTarget={menuPortalTarget}\n        menuPosition={menuPosition}\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<Option, boolean, GroupBase<Option>>\n      captureMenuScroll\n      isLoading={isLoading}\n      {...props}\n      className={classes}\n      classNamePrefix=\"rs\"\n      classNames={{\n        ...externalClassNames,\n        menu: (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      }}\n      components={{\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      filterOption={filterOption}\n      inputValue={inputValue}\n      instanceId={uuid}\n      isClearable={isClearable}\n      isDisabled={disabled}\n      isSearchable={isSearchable}\n      loadingMessage={loadingMessage}\n      menuPlacement=\"auto\"\n      menuPortalTarget={menuPortalTarget}\n      menuPosition={menuPosition}\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":[]}