@payloadcms/ui 4.0.0-internal.4804abd → 4.0.0-internal.4c2ee12

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","XIcon","useTranslation","Tooltip","baseClass","MultiValueRemove","props","$","innerProps","t0","selectProps","t1","className","onClick","onTouchEnd","isDisabled","showTooltip","setShowTooltip","useState","t","t2","t3","t4","filter","Boolean","t5","e","t6","t7","Symbol","for","_jsxs","join","onKeyDown","_temp","onMouseDown","_temp2","onMouseEnter","onMouseLeave","type","children","_jsx","show","size","e_0","key","stopPropagation","e_1"],"sources":["../../../../src/elements/ReactSelect/MultiValueRemove/index.tsx"],"sourcesContent":["'use client'\nimport type { MultiValueRemoveProps } from 'react-select'\n\nimport React, { type JSX } from 'react'\n\nimport type { Option as OptionType } from '../types.js'\n\nimport { XIcon } from '../../../icons/X/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Tooltip } from '../../Tooltip/index.js'\nimport './index.css'\n\nconst baseClass = 'multi-value-remove'\n\nexport const MultiValueRemove: React.FC<\n  {\n    innerProps: JSX.IntrinsicElements['button']\n  } & MultiValueRemoveProps<OptionType>\n> = (props) => {\n  const {\n    innerProps: { className, onClick, onTouchEnd },\n    selectProps: { isDisabled },\n  } = props\n\n  const [showTooltip, setShowTooltip] = React.useState(false)\n  const { t } = useTranslation()\n\n  if (isDisabled) {\n    return null\n  }\n\n  return (\n    <button\n      aria-label={t('general:remove')}\n      className={[baseClass, className].filter(Boolean).join(' ')}\n      onClick={(e) => {\n        setShowTooltip(false)\n        onClick(e)\n      }}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter') {\n          e.stopPropagation()\n        }\n      }}\n      onMouseDown={(e) => e.stopPropagation()}\n      onMouseEnter={() => setShowTooltip(true)}\n      onMouseLeave={() => setShowTooltip(false)}\n      onTouchEnd={onTouchEnd}\n      type=\"button\"\n    >\n      <Tooltip className={`${baseClass}__tooltip`} show={showTooltip}>\n        {t('general:remove')}\n      </Tooltip>\n      <XIcon className={`${baseClass}__icon`} size={16} />\n    </button>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,OAAOC,KAAA,MAAyB;AAIhC,SAASC,KAAK,QAAQ;AACtB,SAASC,cAAc,QAAQ;AAC/B,SAASC,OAAO,QAAQ;AACxB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,gBAAA,GAITC,KAAA;EAAA,MAAAC,CAAA,GAAAR,EAAA;EACF;IAAAS,UAAA,EAAAC,EAAA;IAAAC,WAAA,EAAAC;EAAA,IAGIL,KAAA;EAFU;IAAAM,SAAA;IAAAC,OAAA;IAAAC;EAAA,IAAAL,EAAkC;EACjC;IAAAM;EAAA,IAAAJ,EAAc;EAG7B,OAAAK,WAAA,EAAAC,cAAA,IAAsCjB,KAAA,CAAAkB,QAAA,MAAe;EACrD;IAAAC;EAAA,IAAcjB,cAAA;EAAA,IAEVa,UAAA;IAAA;EAAA;EAAA,IAAAK,EAAA;EAAA,IAAAb,CAAA,QAAAK,SAAA,IAAAL,CAAA,QAAAM,OAAA,IAAAN,CAAA,QAAAO,UAAA,IAAAP,CAAA,QAAAS,WAAA,IAAAT,CAAA,QAAAY,CAAA;IAMY,MAAAE,EAAA,GAAAF,CAAA,CAAE;IAAA,IAAAG,EAAA;IAAA,IAAAf,CAAA,QAAAK,SAAA;MACHU,EAAA,IAAAlB,SAAA,EAAYQ,SAAA,EAAAW,MAAA,CAAAC,OAAkB;MAAAjB,CAAA,MAAAK,SAAA;MAAAL,CAAA,MAAAe,EAAA;IAAA;MAAAA,EAAA,GAAAf,CAAA;IAAA;IAAA,IAAAkB,EAAA;IAAA,IAAAlB,CAAA,QAAAM,OAAA;MAChCY,EAAA,GAAAC,CAAA;QACPT,cAAA,MAAe;QACfJ,OAAA,CAAQa,CAAA;MAAA;MACVnB,CAAA,MAAAM,OAAA;MAAAN,CAAA,MAAAkB,EAAA;IAAA;MAAAA,EAAA,GAAAlB,CAAA;IAAA;IAAA,IAAAoB,EAAA;IAAA,IAAAC,EAAA;IAAA,IAAArB,CAAA,SAAAsB,MAAA,CAAAC,GAAA;MAOcH,EAAA,GAAAA,CAAA,KAAMV,cAAA,KAAe;MACrBW,EAAA,GAAAA,CAAA,KAAMX,cAAA,MAAe;MAAAV,CAAA,OAAAoB,EAAA;MAAApB,CAAA,OAAAqB,EAAA;IAAA;MAAAD,EAAA,GAAApB,CAAA;MAAAqB,EAAA,GAAArB,CAAA;IAAA;IAdrCa,EAAA,GAAAW,KAAA,CAAC;MAAA,cACaV,EAAE;MAAAT,SAAA,EACHU,EAA8B,CAAAU,IAAA,CAAc;MAAAnB,OAAA,EAC9CY,EAGT;MAAAQ,SAAA,EAAAC,KAAA;MAAAC,WAAA,EAAAC,MAAA;MAAAC,YAAA,EAOcV,EAAqB;MAAAW,YAAA,EACrBV,EAAqB;MAAAd,UAAA;MAAAyB,IAAA,EAE9B;MAAAC,QAAA,GAELC,IAAA,CAAAtC,OAAA;QAAAS,SAAA,EAAoB,GAAAR,SAAA,WAAuB;QAAAsC,IAAA,EAAQ1B,WAAA;QAAAwB,QAAA,EAChDrB,CAAA,CAAE;MAAA,C,GAELsB,IAAA,CAAAxC,KAAA;QAAAW,SAAA,EAAkB,GAAAR,SAAA,QAAoB;QAAAuC,IAAA;MAAA,C;;;;;;;;;;;SArBxCvB,E;CAwBJ;AAtCI,SAAAc,MAAAU,GAAA;EAAA,IAsBQlB,GAAA,CAAAmB,GAAA,KAAU;IACZnB,GAAA,CAAAoB,eAAA,CAAiB;EAAA;AAAA;AAvBvB,SAAAV,OAAAW,GAAA;EAAA,OA0BsBrB,GAAA,CAAAoB,eAAA,CAAiB;AAAA","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","XIcon","useTranslation","Tooltip","getMultiValueLabelID","baseClass","MultiValueRemove","props","$","data","innerProps","t0","selectProps","className","onClick","onTouchEnd","showTooltip","setShowTooltip","useState","t","customProps","isDisabled","t1","t2","removeValueLabel","Symbol","for","bb0","label","valueLabelID","removeLabelID","t3","filter","Boolean","t4","e","t5","t6","_jsxs","join","onKeyDown","_temp","onMouseDown","_temp2","onMouseEnter","onMouseLeave","type","children","_jsx","id","show","size","e_0","key","stopPropagation","e_1"],"sources":["../../../../src/elements/ReactSelect/MultiValueRemove/index.tsx"],"sourcesContent":["'use client'\nimport type { MultiValueRemoveProps } from 'react-select'\n\nimport React, { type JSX } from 'react'\n\nimport type { CustomSelectProps, Option as OptionType } from '../types.js'\n\nimport { XIcon } from '../../../icons/X/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Tooltip } from '../../Tooltip/index.js'\nimport { getMultiValueLabelID } from '../MultiValueLabel/index.js'\nimport './index.css'\n\nconst baseClass = 'multi-value-remove'\n\nexport const MultiValueRemove: React.FC<\n  {\n    innerProps: JSX.IntrinsicElements['button']\n  } & MultiValueRemoveProps<OptionType>\n> = (props) => {\n  const {\n    data,\n    innerProps: { 'aria-label': _ariaLabel, className, onClick, onTouchEnd },\n    selectProps,\n  } = props\n\n  const [showTooltip, setShowTooltip] = React.useState(false)\n  const { t } = useTranslation()\n  const { customProps, isDisabled } = selectProps as {\n    customProps?: CustomSelectProps\n  } & typeof selectProps\n  const label = customProps?.removeValueLabel || t('general:remove')\n  const valueLabelID = getMultiValueLabelID({ data, selectProps })\n  const removeLabelID = `${valueLabelID}-remove`\n\n  if (isDisabled) {\n    return null\n  }\n\n  return (\n    <button\n      aria-labelledby={`${removeLabelID} ${valueLabelID}`}\n      className={[baseClass, className].filter(Boolean).join(' ')}\n      onClick={(e) => {\n        setShowTooltip(false)\n        onClick?.(e)\n      }}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter' || e.key === ' ') {\n          e.stopPropagation()\n        }\n      }}\n      onMouseDown={(e) => e.stopPropagation()}\n      onMouseEnter={() => setShowTooltip(true)}\n      onMouseLeave={() => setShowTooltip(false)}\n      onTouchEnd={onTouchEnd}\n      type=\"button\"\n    >\n      <span className=\"sr-only\" id={removeLabelID}>\n        {label}\n      </span>\n      <Tooltip className={`${baseClass}__tooltip`} show={showTooltip}>\n        {t('general:remove')}\n      </Tooltip>\n      <XIcon className={`${baseClass}__icon`} size={16} />\n    </button>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,6 @@
+import type { GroupBase, OptionProps } from 'react-select';
+import React from 'react';
+import type { Option as OptionType } from '../types.js';
+export declare const getOptionAccessibleName: (option: OptionType, renderedLabel?: React.ReactNode, fallbackLabel?: unknown) => string | undefined;
+export declare const Option: React.FC<OptionProps<OptionType, boolean, GroupBase<OptionType>>>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/ReactSelect/Option/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAE1D,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,aAAa,CAAA;AAEvD,eAAO,MAAM,uBAAuB,WAC1B,UAAU,kBACF,KAAK,CAAC,SAAS,kBACf,OAAO,KACtB,MAAM,GAAG,SAgBX,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,UAAU,EAAE,OAAO,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC,CAcpF,CAAA"}

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

@@ -0,0 +1,30 @@
+'use client';
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { components as SelectComponents } from 'react-select';
+export const getOptionAccessibleName = (option, renderedLabel, fallbackLabel) => {
+  if (typeof option.plainTextLabel === 'string' && option.plainTextLabel.trim()) {
+    return option.plainTextLabel;
+  }
+  if (typeof option.label === 'string' && option.label.trim()) {
+    return option.label;
+  }
+  if (typeof renderedLabel === 'string' && renderedLabel.trim()) {
+    return renderedLabel;
+  }
+  return typeof fallbackLabel === 'string' && fallbackLabel !== '[object Object]' ? fallbackLabel : undefined;
+};
+export const Option = props => {
+  const accessibleName = getOptionAccessibleName(props.data, props.children, props.label);
+  return /*#__PURE__*/_jsx(SelectComponents.Option, {
+    ...props,
+    innerProps: {
+      ...props.innerProps,
+      ...(accessibleName ? {
+        'aria-label': accessibleName
+      } : {})
+    }
+  });
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","components","SelectComponents","getOptionAccessibleName","option","renderedLabel","fallbackLabel","plainTextLabel","trim","label","undefined","Option","props","accessibleName","data","children","_jsx","innerProps"],"sources":["../../../../src/elements/ReactSelect/Option/index.tsx"],"sourcesContent":["'use client'\nimport type { GroupBase, OptionProps } from 'react-select'\n\nimport React from 'react'\nimport { components as SelectComponents } from 'react-select'\n\nimport type { Option as OptionType } from '../types.js'\n\nexport const getOptionAccessibleName = (\n  option: OptionType,\n  renderedLabel?: React.ReactNode,\n  fallbackLabel?: unknown,\n): string | undefined => {\n  if (typeof option.plainTextLabel === 'string' && option.plainTextLabel.trim()) {\n    return option.plainTextLabel\n  }\n\n  if (typeof option.label === 'string' && option.label.trim()) {\n    return option.label\n  }\n\n  if (typeof renderedLabel === 'string' && renderedLabel.trim()) {\n    return renderedLabel\n  }\n\n  return typeof fallbackLabel === 'string' && fallbackLabel !== '[object Object]'\n    ? fallbackLabel\n    : undefined\n}\n\nexport const Option: React.FC<OptionProps<OptionType, boolean, GroupBase<OptionType>>> = (\n  props,\n) => {\n  const accessibleName = getOptionAccessibleName(props.data, props.children, props.label)\n\n  return (\n    <SelectComponents.Option\n      {...props}\n      innerProps={{\n        ...props.innerProps,\n        ...(accessibleName ? { 'aria-label': accessibleName } : {}),\n      }}\n    />\n  )\n}\n"],"mappings":"AAAA;;;AAGA,OAAOA,KAAA,MAAW;AAClB,SAASC,UAAA,IAAcC,gBAAgB,QAAQ;AAI/C,OAAO,MAAMC,uBAAA,GAA0BA,CACrCC,MAAA,EACAC,aAAA,EACAC,aAAA;EAEA,IAAI,OAAOF,MAAA,CAAOG,cAAc,KAAK,YAAYH,MAAA,CAAOG,cAAc,CAACC,IAAI,IAAI;IAC7E,OAAOJ,MAAA,CAAOG,cAAc;EAC9B;EAEA,IAAI,OAAOH,MAAA,CAAOK,KAAK,KAAK,YAAYL,MAAA,CAAOK,KAAK,CAACD,IAAI,IAAI;IAC3D,OAAOJ,MAAA,CAAOK,KAAK;EACrB;EAEA,IAAI,OAAOJ,aAAA,KAAkB,YAAYA,aAAA,CAAcG,IAAI,IAAI;IAC7D,OAAOH,aAAA;EACT;EAEA,OAAO,OAAOC,aAAA,KAAkB,YAAYA,aAAA,KAAkB,oBAC1DA,aAAA,GACAI,SAAA;AACN;AAEA,OAAO,MAAMC,MAAA,GACXC,KAAA;EAEA,MAAMC,cAAA,GAAiBV,uBAAA,CAAwBS,KAAA,CAAME,IAAI,EAAEF,KAAA,CAAMG,QAAQ,EAAEH,KAAA,CAAMH,KAAK;EAEtF,oBACEO,IAAA,CAACd,gBAAA,CAAiBS,MAAM;IACrB,GAAGC,KAAK;IACTK,UAAA,EAAY;MACV,GAAGL,KAAA,CAAMK,UAAU;MACnB,IAAIJ,cAAA,GAAiB;QAAE,cAAcA;MAAe,IAAI,CAAC,CAAC;IAC5D;;AAGN","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/ReactSelect/ValueContainer/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAA;AAGvD,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAGzC,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAAC,MAAM,EAAE,GAAG,CAAC,CAoBrE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/ReactSelect/ValueContainer/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAA;AAGvD,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,MAAM,EAA2B,MAAM,aAAa,CAAA;AAGlE,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAAC,MAAM,EAAE,GAAG,CAAC,CA0CrE,CAAA"}

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

@@ -1,5 +1,6 @@
 'use client';
 
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
 import React from 'react';
@@ -8,6 +9,7 @@ import { useTranslation } from '../../../providers/Translation/index.js';
 import './index.css';
 const baseClass = 'value-container';
 export const ValueContainer = props => {
+  const $ = _c(2);
   const {
     selectProps: t0
   } = props;
@@ -18,6 +20,25 @@ export const ValueContainer = props => {
   const {
     i18n
   } = useTranslation();
+  const selectProps = props.selectProps;
+  let t1;
+  if ($[0] !== selectProps) {
+    t1 = child => {
+      if (!React.isValidElement(child) || child.props.role !== "combobox") {
+        return child;
+      }
+      const describedBy = [child.props["aria-describedby"], selectProps["aria-describedby"]].join(" ").split(/\s+/).filter(Boolean);
+      return React.cloneElement(child, {
+        "aria-describedby": [...new Set(describedBy)].join(" ") || undefined,
+        "aria-required": selectProps["aria-required"] ?? child.props["aria-required"]
+      });
+    };
+    $[0] = selectProps;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const children = React.Children.map(props.children, t1);
   let titleText = "";
   if (value && !Array.isArray(value) && typeof value === "object" && "label" in value) {
     const labelText = value.label ? getTranslation(value.label, i18n) : "";
@@ -31,7 +52,8 @@ export const ValueContainer = props => {
       className: `${baseClass}__label`,
       children: customProps?.valueContainerLabel
     }), _jsx(SelectComponents.ValueContainer, {
-      ...props
+      ...props,
+      children
     })]
   });
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["getTranslation","React","components","SelectComponents","useTranslation","baseClass","ValueContainer","props","selectProps","t0","customProps","value","undefined","i18n","titleText","Array","isArray","labelText","label","_jsxs","className","ref","droppableRef","title","children","valueContainerLabel","_jsx"],"sources":["../../../../src/elements/ReactSelect/ValueContainer/index.tsx"],"sourcesContent":["'use client'\nimport type { OptionLabel } from 'payload'\nimport type { ValueContainerProps } from 'react-select'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\nimport { components as SelectComponents } from 'react-select'\n\nimport type { Option } from '../types.js'\n\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport './index.css'\n\nconst baseClass = 'value-container'\n\nexport const ValueContainer: React.FC<ValueContainerProps<Option, any>> = (props) => {\n  // @ts-expect-error-next-line // TODO Fix this - moduleResolution 16 breaks our declare module\n  const { selectProps: { customProps, value } = {} } = props\n  const { i18n } = useTranslation()\n\n  // Get the title for single-value selects\n  let titleText = ''\n  if (value && !Array.isArray(value) && typeof value === 'object' && 'label' in value) {\n    const labelText = value.label ? getTranslation(value.label as OptionLabel, i18n) : ''\n    titleText = typeof labelText === 'string' ? labelText : ''\n  }\n\n  return (\n    <div className={baseClass} ref={customProps?.droppableRef} title={titleText}>\n      {customProps?.valueContainerLabel && (\n        <span className={`${baseClass}__label`}>{customProps?.valueContainerLabel}</span>\n      )}\n      <SelectComponents.ValueContainer {...props} />\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AAIA,SAASA,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAClB,SAASC,UAAA,IAAcC,gBAAgB,QAAQ;AAI/C,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,cAAA,GAA6DC,KAAA;EAExE;IAAAC,WAAA,EAAAC;EAAA,IAAqDF,KAAA;EAAhC;IAAAG,WAAA;IAAAC;EAAA,IAAAF,EAA2B,KAAAG,SAAA,QAA3BH,EAA2B;EAChD;IAAAI;EAAA,IAAiBT,cAAA;EAGjB,IAAAU,SAAA,GAAgB;EAAA,IACZH,KAAA,KAAUI,KAAA,CAAAC,OAAA,CAAcL,KAAA,KAAU,OAAOA,KAAA,KAAU,YAAY,WAAWA,KAAA;IAC5E,MAAAM,SAAA,GAAkBN,KAAA,CAAAO,KAAA,GAAclB,cAAA,CAAeW,KAAA,CAAAO,KAAA,EAA4BL,IAAA,IAAQ;IACnFC,SAAA,CAAAA,CAAA,CAAYA,MAAA,CAAOG,SAAA,KAAc,WAAWA,SAAA,GAAY;EAAxD;EAAA,OAIAE,KAAA,CAAC;IAAAC,SAAA,EAAAf,SAAA;IAAAgB,GAAA,EAA+BX,WAAA,EAAAY,YAAA;IAAAC,KAAA,EAAkCT,SAAA;IAAAU,QAAA,GAC/Dd,WAAA,EAAAe,mBAAA,IACCC,IAAA,CAAC;MAAAN,SAAA,EAAgB,GAAAf,SAAA,SAAqB;MAAAmB,QAAA,EAAGd,WAAA,EAAAe;IAAA,C,GAE3CC,IAAA,CAAAvB,gBAAA,CAAAG,cAAA;MAAA,GAAqCC;IAAK,C;;CAGhD","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","getTranslation","React","components","SelectComponents","useTranslation","baseClass","ValueContainer","props","$","selectProps","t0","customProps","value","undefined","i18n","t1","child","isValidElement","role","describedBy","join","split","filter","Boolean","cloneElement","Set","children","Children","map","titleText","Array","isArray","labelText","label","_jsxs","className","ref","droppableRef","title","valueContainerLabel","_jsx"],"sources":["../../../../src/elements/ReactSelect/ValueContainer/index.tsx"],"sourcesContent":["'use client'\nimport type { OptionLabel } from 'payload'\nimport type { AriaAttributes } from 'react'\nimport type { ValueContainerProps } from 'react-select'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\nimport { components as SelectComponents } from 'react-select'\n\nimport type { Option, ReactSelectAdapterProps } from '../types.js'\n\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport './index.css'\n\nconst baseClass = 'value-container'\n\nexport const ValueContainer: React.FC<ValueContainerProps<Option, any>> = (props) => {\n  // @ts-expect-error-next-line // TODO Fix this - moduleResolution 16 breaks our declare module\n  const { selectProps: { customProps, value } = {} } = props\n  const { i18n } = useTranslation()\n  const selectProps = props.selectProps as Pick<\n    ReactSelectAdapterProps,\n    'aria-describedby' | 'aria-required'\n  >\n\n  const children = React.Children.map(props.children, (child) => {\n    if (\n      !React.isValidElement<{ role?: string } & AriaAttributes>(child) ||\n      child.props.role !== 'combobox'\n    ) {\n      return child\n    }\n\n    const describedBy = [child.props['aria-describedby'], selectProps['aria-describedby']]\n      .join(' ')\n      .split(/\\s+/)\n      .filter(Boolean)\n\n    return React.cloneElement(child, {\n      'aria-describedby': [...new Set(describedBy)].join(' ') || undefined,\n      'aria-required': selectProps['aria-required'] ?? child.props['aria-required'],\n    })\n  })\n\n  let titleText = ''\n  if (value && !Array.isArray(value) && typeof value === 'object' && 'label' in value) {\n    const labelText = value.label ? getTranslation(value.label as OptionLabel, i18n) : ''\n    titleText = typeof labelText === 'string' ? labelText : ''\n  }\n\n  return (\n    <div className={baseClass} ref={customProps?.droppableRef} title={titleText}>\n      {customProps?.valueContainerLabel && (\n        <span className={`${baseClass}__label`}>{customProps?.valueContainerLabel}</span>\n      )}\n      <SelectComponents.ValueContainer {...props}>{children}</SelectComponents.ValueContainer>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAKA,SAASC,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAClB,SAASC,UAAA,IAAcC,gBAAgB,QAAQ;AAI/C,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,cAAA,GAA6DC,KAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EAExE;IAAAU,WAAA,EAAAC;EAAA,IAAqDH,KAAA;EAAhC;IAAAI,WAAA;IAAAC;EAAA,IAAAF,EAA2B,KAAAG,SAAA,QAA3BH,EAA2B;EAChD;IAAAI;EAAA,IAAiBV,cAAA;EACjB,MAAAK,WAAA,GAAoBF,KAAA,CAAAE,WAAA;EAAiB,IAAAM,EAAA;EAAA,IAAAP,CAAA,QAAAC,WAAA;IAKeM,EAAA,GAAAC,KAAA;MAAA,IAEhD,CAACf,KAAA,CAAAgB,cAAA,CAAyDD,KAAA,KAC1DA,KAAA,CAAAT,KAAA,CAAAW,IAAA,KAAqB;QAAA,OAEdF,KAAA;MAAA;MAGT,MAAAG,WAAA,GAAoB,CAACH,KAAA,CAAAT,KAAA,CAAY,qBAAqBE,WAAW,CAAC,qBAAAW,IAAA,CAC1D,KAAAC,KAAA,MACC,EAAAC,MAAA,CAAAC,OACC;MAAA,OAEHtB,KAAA,CAAAuB,YAAA,CAAmBR,KAAA;QAAA,oBACJ,QAAAS,GAAA,CAAYN,WAAA,GAAAA,IAAA,CAAmB,QAAAN,SAAQ;QAAA,iBAC1CJ,WAAW,CAAC,oBAAoBO,KAAA,CAAAT,KAAA,CAAY;MAAgB,CAC/E;IAAA;IACFC,CAAA,MAAAC,WAAA;IAAAD,CAAA,MAAAO,EAAA;EAAA;IAAAA,EAAA,GAAAP,CAAA;EAAA;EAjBA,MAAAkB,QAAA,GAAiBzB,KAAA,CAAA0B,QAAA,CAAAC,GAAA,CAAmBrB,KAAA,CAAAmB,QAAA,EAAgBX,EAiBpD;EAEA,IAAAc,SAAA,GAAgB;EAAA,IACZjB,KAAA,KAAUkB,KAAA,CAAAC,OAAA,CAAcnB,KAAA,KAAU,OAAOA,KAAA,KAAU,YAAY,WAAWA,KAAA;IAC5E,MAAAoB,SAAA,GAAkBpB,KAAA,CAAAqB,KAAA,GAAcjC,cAAA,CAAeY,KAAA,CAAAqB,KAAA,EAA4BnB,IAAA,IAAQ;IACnFe,SAAA,CAAAA,CAAA,CAAYA,MAAA,CAAOG,SAAA,KAAc,WAAWA,SAAA,GAAY;EAAxD;EAAA,OAIAE,KAAA,CAAC;IAAAC,SAAA,EAAA9B,SAAA;IAAA+B,GAAA,EAA+BzB,WAAA,EAAA0B,YAAA;IAAAC,KAAA,EAAkCT,SAAA;IAAAH,QAAA,GAC/Df,WAAA,EAAA4B,mBAAA,IACCC,IAAA,CAAC;MAAAL,SAAA,EAAgB,GAAA9B,SAAA,SAAqB;MAAAqB,QAAA,EAAGf,WAAA,EAAA4B;IAAA,C,GAE3CC,IAAA,CAAArC,gBAAA,CAAAG,cAAA;MAAA,GAAqCC,KAAK;MAAAmB;IAAA,C;;CAGhD","ignoreList":[]}

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

@@ -1 +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"}
+{"version":3,"file":"getCaptureMenuScroll.d.ts","sourceRoot":"","sources":["../../../src/elements/ReactSelect/getCaptureMenuScroll.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,oBAAoB,gEAG9B;IACD,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,gBAAgB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;CACtC,KAAG,OAMH,CAAA"}

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

@@ -1,6 +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 declare const getMenuListStyles: (externalStyles?: StylesConfig<Option, boolean, GroupBase<Option>>, shouldUseFloatingMenuPortal?: boolean) => MenuListStyles;
 export {};
 //# sourceMappingURL=getMenuListStyles.d.ts.map

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

@@ -1 +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"}
+{"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,oBACX,YAAY,CAAC,MAAM,EAAE,OAAO,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC,gCACnC,OAAO,KACpC,cAiBF,CAAA"}

package/dist/elements/ReactSelect/getMenuListStyles.js

@@ -1,7 +1,15 @@
-export const getMenuListStyles = externalStyles => {
-  return (rsStyles, state) => ({
-    ...rsStyles,
-    ...externalStyles?.menuList?.(rsStyles, state)
-  });
+export const getMenuListStyles = (externalStyles, shouldUseFloatingMenuPortal) => {
+  return (rsStyles, state) => {
+    const styles = {
+      ...rsStyles,
+      ...(shouldUseFloatingMenuPortal && {
+        maxHeight: `var(--rs-floating-menu-max-height, ${String(rsStyles.maxHeight)}px)`
+      })
+    };
+    return {
+      ...styles,
+      ...externalStyles?.menuList?.(styles, state)
+    };
+  };
 };
 //# sourceMappingURL=getMenuListStyles.js.map

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

@@ -1 +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":[]}
+{"version":3,"file":"getMenuListStyles.js","names":["getMenuListStyles","externalStyles","shouldUseFloatingMenuPortal","rsStyles","state","styles","maxHeight","String","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  shouldUseFloatingMenuPortal?: boolean,\n): MenuListStyles => {\n  return (\n    rsStyles: CSSObjectWithLabel,\n    state: Parameters<NonNullable<StylesConfig<Option>['menuList']>>[1],\n  ) => {\n    const styles: CSSObjectWithLabel = {\n      ...rsStyles,\n      ...(shouldUseFloatingMenuPortal && {\n        maxHeight: `var(--rs-floating-menu-max-height, ${String(rsStyles.maxHeight)}px)`,\n      }),\n    }\n\n    return {\n      ...styles,\n      ...externalStyles?.menuList?.(styles, state),\n    }\n  }\n}\n"],"mappings":"AAMA,OAAO,MAAMA,iBAAA,GAAoBA,CAC/BC,cAAA,EACAC,2BAAA;EAEA,OAAO,CACLC,QAAA,EACAC,KAAA;IAEA,MAAMC,MAAA,GAA6B;MACjC,GAAGF,QAAQ;MACX,IAAID,2BAAA,IAA+B;QACjCI,SAAA,EAAW,sCAAsCC,MAAA,CAAOJ,QAAA,CAASG,SAAS;MAC5E,CAAC;IACH;IAEA,OAAO;MACL,GAAGD,MAAM;MACT,GAAGJ,cAAA,EAAgBO,QAAA,GAAWH,MAAA,EAAQD,KAAA;IACxC;EACF;AACF","ignoreList":[]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"getMenuStyles.d.ts","sourceRoot":"","sources":["../../../src/elements/ReactSelect/getMenuStyles.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,UAAU,GAAG,WAAW,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAA;AAEvF,KAAK,IAAI,GAAG;IACV,cAAc,CAAC,EAAE,YAAY,CAAC,MAAM,EAAE,OAAO,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC,CAAA;IACjE,2BAA2B,EAAE,OAAO,CAAA;CACrC,CAAA;AAED,eAAO,MAAM,aAAa,qDAGvB,IAAI,KAAG,UAoBT,CAAA"}

package/dist/elements/ReactSelect/getMenuStyles.js

@@ -0,0 +1,21 @@
+export const getMenuStyles = ({
+  externalStyles,
+  shouldUseFloatingMenuPortal
+}) => {
+  return (rsStyles, state) => {
+    const styles = {
+      ...rsStyles,
+      zIndex: undefined,
+      ...(shouldUseFloatingMenuPortal && {
+        bottom: undefined,
+        position: 'static',
+        top: undefined
+      })
+    };
+    return {
+      ...styles,
+      ...externalStyles?.menu?.(styles, state)
+    };
+  };
+};
+//# sourceMappingURL=getMenuStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"getMenuStyles.js","names":["getMenuStyles","externalStyles","shouldUseFloatingMenuPortal","rsStyles","state","styles","zIndex","undefined","bottom","position","top","menu"],"sources":["../../../src/elements/ReactSelect/getMenuStyles.ts"],"sourcesContent":["import type { CSSObjectWithLabel, GroupBase, StylesConfig } from 'react-select'\n\nimport type { Option } from './types.js'\n\ntype MenuStyles = NonNullable<StylesConfig<Option, boolean, GroupBase<Option>>['menu']>\n\ntype Args = {\n  externalStyles?: StylesConfig<Option, boolean, GroupBase<Option>>\n  shouldUseFloatingMenuPortal: boolean\n}\n\nexport const getMenuStyles = ({\n  externalStyles,\n  shouldUseFloatingMenuPortal,\n}: Args): MenuStyles => {\n  return (\n    rsStyles: CSSObjectWithLabel,\n    state: Parameters<NonNullable<StylesConfig<Option>['menu']>>[1],\n  ) => {\n    const styles: CSSObjectWithLabel = {\n      ...rsStyles,\n      zIndex: undefined,\n      ...(shouldUseFloatingMenuPortal && {\n        bottom: undefined,\n        position: 'static',\n        top: undefined,\n      }),\n    }\n\n    return {\n      ...styles,\n      ...externalStyles?.menu?.(styles, state),\n    }\n  }\n}\n"],"mappings":"AAWA,OAAO,MAAMA,aAAA,GAAgBA,CAAC;EAC5BC,cAAc;EACdC;AAA2B,CACtB;EACL,OAAO,CACLC,QAAA,EACAC,KAAA;IAEA,MAAMC,MAAA,GAA6B;MACjC,GAAGF,QAAQ;MACXG,MAAA,EAAQC,SAAA;MACR,IAAIL,2BAAA,IAA+B;QACjCM,MAAA,EAAQD,SAAA;QACRE,QAAA,EAAU;QACVC,GAAA,EAAKH;MACP,CAAC;IACH;IAEA,OAAO;MACL,GAAGF,MAAM;MACT,GAAGJ,cAAA,EAAgBU,IAAA,GAAON,MAAA,EAAQD,KAAA;IACpC;EACF;AACF","ignoreList":[]}

package/dist/elements/ReactSelect/index.css

@@ -12,15 +12,11 @@
       border: var(--stroke-width-small) solid var(--field-color-border);
       border-radius: var(--field-border-radius);
       color: var(--color-text);
-      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);
       -webkit-appearance: none;
       appearance: none;
-      transition-property: box-shadow, background-color;
-      transition-duration: 100ms;
-      transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
       height: auto;
       padding-block: calc(var(--spacer-1) + 1px);
       padding-inline: var(--field-padding-inline) var(--spacer-5);
@@ -91,7 +87,7 @@
     border-radius: var(--radius-medium);
     box-shadow: var(--elevation-400-menu-panel);
     background: var(--color-bg);
-    /* overflow: clip; */
+    overflow: clip;
   }
 
   .rs__menu--placement-bottom {
@@ -102,6 +98,13 @@
     margin-bottom: var(--spacer-1);
   }
 
+  .rs__floating-menu-portal {
+    .rs__menu--placement-bottom,
+    .rs__menu--placement-top {
+      margin-block: 0;
+    }
+  }
+
   .rs__menu-list {
     overflow-y: auto;
   }
@@ -109,14 +112,12 @@
   .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);
@@ -133,6 +134,11 @@
     background-color: var(--color-bg-selected);
   }
 
+  .rs__option--is-disabled {
+    color: var(--color-text-disabled);
+    cursor: not-allowed;
+  }
+
   .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":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ReactSelect/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAA2D,MAAM,OAAO,CAAA;AAI/E,OAAO,KAAK,EAAU,uBAAuB,EAAE,MAAM,YAAY,CAAA;AACjE,YAAY,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAoBxC,OAAO,aAAa,CAAA;AAmRpB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAQzD,CAAA"}

package/dist/elements/ReactSelect/index.js

@@ -1,59 +1,31 @@
 '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 { arrayMove, horizontalListSortingStrategy } from '@dnd-kit/sortable';
 import { getTranslation } from '@payloadcms/translations';
-import React, { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import Select, { components as rsComponents } from 'react-select';
+import React, { useCallback, useEffect, useId, useMemo, useState } from 'react';
+import Select 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 { DefaultMenuPortal } from './DefaultMenuPortal.js';
 import { DropdownIndicator } from './DropdownIndicator/index.js';
 import { getCaptureMenuScroll } from './getCaptureMenuScroll.js';
 import { getMenuListStyles } from './getMenuListStyles.js';
+import { getMenuStyles } from './getMenuStyles.js';
 import { Input } from './Input/index.js';
 import { generateMultiValueDraggableID, MultiValue } from './MultiValue/index.js';
 import { MultiValueLabel } from './MultiValueLabel/index.js';
 import { MultiValueRemove } from './MultiValueRemove/index.js';
+import { Option as SelectOption } from './Option/index.js';
 import { SingleValue } from './SingleValue/index.js';
 import { ValueContainer } from './ValueContainer/index.js';
 import './index.css';
-// 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,
@@ -63,10 +35,6 @@ const SelectAdapter = props => {
 ;
   const uuid = useId();
   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,
@@ -94,43 +62,14 @@ const SelectAdapter = props => {
   } = props;
   const menuPortalTarget = menuPortalTargetProp === undefined ? typeof document !== 'undefined' ? document.body : null : menuPortalTargetProp;
   const menuPosition = menuPositionProp ?? (menuPortalTarget ? 'fixed' : undefined);
+  const shouldUseFloatingMenuPortal = Boolean(menuPortalTarget && !components?.MenuPortal);
   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
@@ -139,15 +78,6 @@ const SelectAdapter = props => {
   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) ?? '';
@@ -166,10 +96,11 @@ const SelectAdapter = props => {
     Control,
     DropdownIndicator,
     Input,
-    MenuPortal: ThemedMenuPortal,
+    MenuPortal: DefaultMenuPortal,
     MultiValue,
     MultiValueLabel,
     MultiValueRemove,
+    Option: SelectOption,
     SingleValue,
     ValueContainer,
     ...components
@@ -187,50 +118,46 @@ const SelectAdapter = props => {
     isLoading: isLoadingDebounced,
     isSearchable,
     loadingMessage: () => t('general:loading') + '...',
-    maxMenuHeight,
-    menuPlacement,
+    maxMenuHeight: DEFAULT_MAX_MENU_HEIGHT,
+    menuPlacement: 'auto',
     menuPortalTarget,
     menuPosition,
     menuShouldBlockScroll: false,
     noOptionsMessage,
     onChange,
-    onMenuClose: handleMenuClose,
-    onMenuOpen: handleMenuOpen,
+    onMenuClose,
+    onMenuOpen,
     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)
+      menu: getMenuStyles({
+        externalStyles,
+        shouldUseFloatingMenuPortal
       }),
       // 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)
+        menuPortal: (rsStyles, state_1) => ({
+          ...rsStyles,
+          zIndex: 'var(--z-portal-element)',
+          ...externalStyles?.menuPortal?.(rsStyles, state_1)
         })
       }),
       // Remove the default react-select min-height so our CSS can control it
-      control: (rsStyles_1, state_3) => ({
-        ...rsStyles_1,
+      control: (rsStyles_0, state_2) => ({
+        ...rsStyles_0,
         minHeight: undefined,
-        ...externalStyles?.control?.(rsStyles_1, state_3)
+        ...externalStyles?.control?.(rsStyles_0, state_2)
       }),
       // Allow external option styles to override emotion defaults
-      option: (rsStyles_2, state_4) => ({
-        ...rsStyles_2,
-        ...externalStyles?.option?.(rsStyles_2, state_4)
+      option: (rsStyles_1, state_3) => ({
+        ...rsStyles_1,
+        ...externalStyles?.option?.(rsStyles_1, state_3)
       }),
       // 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)
+      menuList: getMenuListStyles(externalStyles, shouldUseFloatingMenuPortal)
     },
     unstyled: true
   };
@@ -241,7 +168,6 @@ const SelectAdapter = props => {
   }
   if (!isCreatable) {
     return /*#__PURE__*/_jsx("div", {
-      ref: containerRef,
       children: /*#__PURE__*/_jsx(Select, {
         ...props,
         ...sharedSelectProps,
@@ -284,7 +210,6 @@ const SelectAdapter = props => {
     }
   };
   return /*#__PURE__*/_jsx("div", {
-    ref: containerRef,
     children: /*#__PURE__*/_jsx(CreatableSelect, {
       ...props,
       ...sharedSelectProps,
@@ -320,6 +245,7 @@ const SortableSelect = props => {
       }
       onChange(sorted);
     },
+    sortingStrategy: horizontalListSortingStrategy,
     children: /*#__PURE__*/_jsx(SelectAdapter, {
       ...props
     })