@payloadcms/ui 4.0.0-internal.b8e7c89 → 4.0.0-internal.bf4bcce

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/ReactSelect/DropdownIndicator/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAA;AAE1D,OAAO,KAAK,EAAE,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAA;AAEvC,OAAO,KAAK,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,aAAa,CAAA;AAIvD,OAAO,aAAa,CAAA;AAGpB,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CACtC;IACE,UAAU,EAAE,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAA;CAC5C,GAAG,sBAAsB,CAAC,UAAU,EAAE,IAAI,CAAC,CAwB7C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/ReactSelect/DropdownIndicator/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAA;AAE1D,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,aAAa,CAAA;AAGvD,OAAO,aAAa,CAAA;AAGpB,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAAC,UAAU,EAAE,IAAI,CAAC,CAkBhF,CAAA"}

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

@@ -3,36 +3,31 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { ChevronIcon } from '../../../icons/Chevron/index.js';
-import { useTranslation } from '../../../providers/Translation/index.js';
 import './index.css';
 const baseClass = 'dropdown-indicator';
 export const DropdownIndicator = props => {
   const {
-    innerProps: t0
+    innerProps: {
+      onMouseDown,
+      onTouchEnd,
+      onTouchStart,
+      ref
+    },
+    selectProps: {
+      isDisabled
+    }
   } = props;
-  const {
-    ref,
-    ...restInnerProps
-  } = t0;
-  const {
-    t
-  } = useTranslation();
-  return _jsx("button", {
-    "aria-label": t("general:open"),
+  return /*#__PURE__*/_jsx("div", {
+    "aria-hidden": "true",
     className: baseClass,
-    ref,
-    ...restInnerProps,
-    onKeyDown: _temp,
-    type: "button",
-    children: _jsx(ChevronIcon, {
+    onMouseDown: isDisabled ? undefined : onMouseDown,
+    onTouchEnd: isDisabled ? undefined : onTouchEnd,
+    onTouchStart: isDisabled ? undefined : onTouchStart,
+    ref: ref,
+    children: /*#__PURE__*/_jsx(ChevronIcon, {
       className: `${baseClass}__icon`,
       size: 16
     })
   });
 };
-function _temp(e) {
-  if (e.key === "Enter") {
-    e.key = " ";
-  }
-}
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","ChevronIcon","useTranslation","baseClass","DropdownIndicator","props","innerProps","t0","ref","restInnerProps","t","_jsx","className","onKeyDown","_temp","type","children","size","e","key"],"sources":["../../../../src/elements/ReactSelect/DropdownIndicator/index.tsx"],"sourcesContent":["'use client'\nimport type { DropdownIndicatorProps } from 'react-select'\n\nimport React, { type JSX } from 'react'\n\nimport type { Option as OptionType } from '../types.js'\n\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport './index.css'\n\nconst baseClass = 'dropdown-indicator'\nexport const DropdownIndicator: React.FC<\n  {\n    innerProps: JSX.IntrinsicElements['button']\n  } & DropdownIndicatorProps<OptionType, true>\n> = (props) => {\n  const {\n    innerProps: { ref, ...restInnerProps },\n  } = props\n\n  const { t } = useTranslation()\n\n  return (\n    <button\n      aria-label={t('general:open')}\n      className={baseClass}\n      ref={ref}\n      {...restInnerProps}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter') {\n          e.key = ' '\n        }\n      }}\n      type=\"button\"\n    >\n      <ChevronIcon className={`${baseClass}__icon`} size={16} />\n    </button>\n  )\n}\n"],"mappings":"AAAA;;;AAGA,OAAOA,KAAA,MAAyB;AAIhC,SAASC,WAAW,QAAQ;AAC5B,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAClB,OAAO,MAAMC,iBAAA,GAITC,KAAA;EACF;IAAAC,UAAA,EAAAC;EAAA,IAEIF,KAAA;EADU;IAAAG,GAAA;IAAA,GAAAC;EAAA,IAAAF,EAA0B;EAGxC;IAAAG;EAAA,IAAcR,cAAA;EAAA,OAGZS,IAAA,CAAC;IAAA,cACaD,CAAA,CAAE;IAAAE,SAAA,EAAAT,SAAA;IAAAK,GAAA;IAAA,GAGVC,cAAc;IAAAI,SAAA,EAAAC,KAAA;IAAAC,IAAA,EAMb;IAAAC,QAAA,EAELL,IAAA,CAAAV,WAAA;MAAAW,SAAA,EAAwB,GAAAT,SAAA,QAAoB;MAAAc,IAAA;IAAA,C;;CAGlD;AAvBI,SAAAH,MAAAI,CAAA;EAAA,IAcQA,CAAA,CAAAC,GAAA,KAAU;IACZD,CAAA,CAAAC,GAAA,GAAQ;EAAA;AAAA","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","ChevronIcon","baseClass","DropdownIndicator","props","innerProps","onMouseDown","onTouchEnd","onTouchStart","ref","selectProps","isDisabled","_jsx","className","undefined","size"],"sources":["../../../../src/elements/ReactSelect/DropdownIndicator/index.tsx"],"sourcesContent":["'use client'\nimport type { DropdownIndicatorProps } from 'react-select'\n\nimport React from 'react'\n\nimport type { Option as OptionType } from '../types.js'\n\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport './index.css'\n\nconst baseClass = 'dropdown-indicator'\nexport const DropdownIndicator: React.FC<DropdownIndicatorProps<OptionType, true>> = (props) => {\n  const {\n    innerProps: { onMouseDown, onTouchEnd, onTouchStart, ref },\n    selectProps: { isDisabled },\n  } = props\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={baseClass}\n      onMouseDown={isDisabled ? undefined : onMouseDown}\n      onTouchEnd={isDisabled ? undefined : onTouchEnd}\n      onTouchStart={isDisabled ? undefined : onTouchStart}\n      ref={ref}\n    >\n      <ChevronIcon className={`${baseClass}__icon`} size={16} />\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AAGA,OAAOA,KAAA,MAAW;AAIlB,SAASC,WAAW,QAAQ;AAC5B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAClB,OAAO,MAAMC,iBAAA,GAAyEC,KAAA;EACpF,MAAM;IACJC,UAAA,EAAY;MAAEC,WAAW;MAAEC,UAAU;MAAEC,YAAY;MAAEC;IAAG,CAAE;IAC1DC,WAAA,EAAa;MAAEC;IAAU;EAAE,CAC5B,GAAGP,KAAA;EAEJ,oBACEQ,IAAA,CAAC;IACC,eAAY;IACZC,SAAA,EAAWX,SAAA;IACXI,WAAA,EAAaK,UAAA,GAAaG,SAAA,GAAYR,WAAA;IACtCC,UAAA,EAAYI,UAAA,GAAaG,SAAA,GAAYP,UAAA;IACrCC,YAAA,EAAcG,UAAA,GAAaG,SAAA,GAAYN,YAAA;IACvCC,GAAA,EAAKA,GAAA;cAEL,aAAAG,IAAA,CAACX,WAAA;MAAYY,SAAA,EAAW,GAAGX,SAAA,QAAiB;MAAEa,IAAA,EAAM;;;AAG1D","ignoreList":[]}

package/dist/elements/ReactSelect/MultiValue/context.d.ts

@@ -0,0 +1,6 @@
+import type { ButtonHTMLAttributes, RefCallback } from 'react';
+export type MultiValueDragActivator = {
+    ref?: RefCallback<HTMLElement>;
+} & ButtonHTMLAttributes<HTMLButtonElement>;
+export declare const MultiValueDragActivatorContext: import("react").Context<MultiValueDragActivator>;
+//# sourceMappingURL=context.d.ts.map

package/dist/elements/ReactSelect/MultiValue/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/elements/ReactSelect/MultiValue/context.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAI9D,MAAM,MAAM,uBAAuB,GAAG;IACpC,GAAG,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAA;CAC/B,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAA;AAE3C,eAAO,MAAM,8BAA8B,kDAE1C,CAAA"}

package/dist/elements/ReactSelect/MultiValue/context.js

@@ -0,0 +1,5 @@
+'use client';
+
+import { createContext } from 'react';
+export const MultiValueDragActivatorContext = createContext(undefined);
+//# sourceMappingURL=context.js.map

package/dist/elements/ReactSelect/MultiValue/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":["createContext","MultiValueDragActivatorContext","undefined"],"sources":["../../../../src/elements/ReactSelect/MultiValue/context.ts"],"sourcesContent":["'use client'\nimport type { ButtonHTMLAttributes, RefCallback } from 'react'\n\nimport { createContext } from 'react'\n\nexport type MultiValueDragActivator = {\n  ref?: RefCallback<HTMLElement>\n} & ButtonHTMLAttributes<HTMLButtonElement>\n\nexport const MultiValueDragActivatorContext = createContext<MultiValueDragActivator | undefined>(\n  undefined,\n)\n"],"mappings":"AAAA;;AAGA,SAASA,aAAa,QAAQ;AAM9B,OAAO,MAAMC,8BAAA,GAAiCD,aAAA,CAC5CE,SAAA","ignoreList":[]}

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

@@ -20,4 +20,9 @@
   .multi-value--is-dragging {
     z-index: 2;
   }
+
+  .multi-value.rs__multi-value:has(.multi-value-label__drag-button:focus-visible) {
+    outline: var(--accessibility-outline);
+    outline-offset: calc(var(--stroke-width-small) * -1);
+  }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/ReactSelect/MultiValue/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAEnD,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAGzC,OAAO,aAAa,CAAA;AAIpB,wBAAgB,6BAA6B,CAAC,UAAU,KAAA,EAAE,aAAa,KAAA,OAEtE;AACD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAAC,MAAM,CAAC,CAgExD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/ReactSelect/MultiValue/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAA0B,eAAe,EAAE,MAAM,cAAc,CAAA;AAE3E,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAOzC,OAAO,aAAa,CAAA;AAwBpB,wBAAgB,6BAA6B,CAAC,UAAU,KAAA,EAAE,aAAa,KAAA,OAEtE;AACD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAAC,MAAM,CAAC,CA0ExD,CAAA"}

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

@@ -4,17 +4,39 @@ import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { components as SelectComponents } from 'react-select';
+import { useTranslation } from '../../../providers/Translation/index.js';
 import { useDraggableSortable } from '../../DraggableSortable/useDraggableSortable/index.js';
+import { getOptionAccessibleName } from '../Option/index.js';
+import { MultiValueDragActivatorContext } from './context.js';
 import './index.css';
 const baseClass = 'multi-value';
+const SortableMultiValueContainer = ({
+  children,
+  innerProps
+}) => {
+  const {
+    dragActivator,
+    nodeRef,
+    ...containerProps
+  } = innerProps;
+  return /*#__PURE__*/_jsx(MultiValueDragActivatorContext, {
+    value: dragActivator,
+    children: /*#__PURE__*/_jsx("div", {
+      ...containerProps,
+      ref: nodeRef,
+      children: children
+    })
+  });
+};
 export function generateMultiValueDraggableID(optionData, valueFunction) {
   return typeof valueFunction === 'function' ? valueFunction(optionData) : optionData?.value;
 }
 export const MultiValue = props => {
-  const $ = _c(24);
+  const $ = _c(32);
   const {
     className,
     data,
+    index,
     innerProps,
     isDisabled,
     selectProps: t0
@@ -70,9 +92,13 @@ export const MultiValue = props => {
     attributes,
     isDragging,
     listeners,
+    setActivatorNodeRef,
     setNodeRef,
     transform
   } = useDraggableSortable(t6);
+  const {
+    t
+  } = useTranslation();
   const t7 = !isDisabled && isSortable && "draggable";
   const t8 = isDragging && `${baseClass}--is-dragging`;
   let t9;
@@ -87,49 +113,77 @@ export const MultiValue = props => {
   }
   const classes = t9.join(" ");
   let t10;
-  if ($[14] !== attributes || $[15] !== classes || $[16] !== disableMouseDown || $[17] !== innerProps || $[18] !== isSortable || $[19] !== listeners || $[20] !== props || $[21] !== setNodeRef || $[22] !== transform) {
+  if ($[14] !== attributes || $[15] !== classes || $[16] !== data || $[17] !== disableMouseDown || $[18] !== id || $[19] !== index || $[20] !== innerProps || $[21] !== isDisabled || $[22] !== isSortable || $[23] !== listeners || $[24] !== props || $[25] !== setActivatorNodeRef || $[26] !== setNodeRef || $[27] !== t || $[28] !== transform) {
     const {
       onMouseDown: listenersMouseDown,
       ...restListeners
     } = listeners || {};
-    t10 = _jsx(React.Fragment, {
-      children: _jsx(SelectComponents.MultiValue, {
-        ...props,
-        className: classes,
-        innerProps: {
-          ...(isSortable ? {
-            ...attributes,
-            ...restListeners
-          } : {}),
-          ...innerProps,
-          onMouseDown: e => {
-            if (isSortable && listenersMouseDown) {
-              listenersMouseDown(e);
-            }
-            if (!disableMouseDown) {
-              e.stopPropagation();
-            }
-          },
-          ref: setNodeRef,
-          style: isSortable ? {
-            transform,
-            ...attributes?.style
-          } : {}
+    const {
+      style: sortableStyle,
+      ...sortableAttributes
+    } = attributes;
+    const optionName = getOptionAccessibleName(data, props.children, String(id)) || String(id);
+    const valueCount = Array.isArray(props.selectProps.value) ? props.selectProps.value.length : 1;
+    const dragActivator = isSortable && !isDisabled ? {
+      ...sortableAttributes,
+      ...restListeners,
+      "aria-label": `${t("general:dragToReorder")} ${optionName}, ${index + 1} of ${valueCount}`,
+      onMouseDown: event => {
+        listenersMouseDown?.(event);
+        event.stopPropagation();
+      },
+      ref: setActivatorNodeRef
+    } : undefined;
+    let t11;
+    if ($[30] !== disableMouseDown) {
+      t11 = event_0 => {
+        if (!disableMouseDown) {
+          event_0.stopPropagation();
         }
-      })
+      };
+      $[30] = disableMouseDown;
+      $[31] = t11;
+    } else {
+      t11 = $[31];
+    }
+    const sortableInnerProps = {
+      ...innerProps,
+      dragActivator,
+      nodeRef: setNodeRef,
+      onMouseDown: t11,
+      style: {
+        ...innerProps?.style,
+        ...sortableStyle,
+        transform
+      }
+    };
+    t10 = _jsx(SelectComponents.MultiValue, {
+      ...props,
+      className: classes,
+      components: {
+        ...props.components,
+        Container: SortableMultiValueContainer
+      },
+      innerProps: sortableInnerProps
     });
     $[14] = attributes;
     $[15] = classes;
-    $[16] = disableMouseDown;
-    $[17] = innerProps;
-    $[18] = isSortable;
-    $[19] = listeners;
-    $[20] = props;
-    $[21] = setNodeRef;
-    $[22] = transform;
-    $[23] = t10;
+    $[16] = data;
+    $[17] = disableMouseDown;
+    $[18] = id;
+    $[19] = index;
+    $[20] = innerProps;
+    $[21] = isDisabled;
+    $[22] = isSortable;
+    $[23] = listeners;
+    $[24] = props;
+    $[25] = setActivatorNodeRef;
+    $[26] = setNodeRef;
+    $[27] = t;
+    $[28] = transform;
+    $[29] = t10;
   } else {
-    t10 = $[23];
+    t10 = $[29];
   }
   return t10;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","components","SelectComponents","useDraggableSortable","baseClass","generateMultiValueDraggableID","optionData","valueFunction","value","MultiValue","props","$","className","data","innerProps","isDisabled","selectProps","t0","t1","undefined","customProps","t2","getOptionValue","isSortable","t3","disableMouseDown","t4","id","t5","t6","disabled","attributes","isDragging","listeners","setNodeRef","transform","t7","t8","t9","filter","Boolean","classes","join","t10","onMouseDown","listenersMouseDown","restListeners","_jsx","Fragment","children","e","stopPropagation","ref","style"],"sources":["../../../../src/elements/ReactSelect/MultiValue/index.tsx"],"sourcesContent":["'use client'\nimport type { MultiValueProps } from 'react-select'\n\nimport React from 'react'\nimport { components as SelectComponents } from 'react-select'\n\nimport type { Option } from '../types.js'\n\nimport { useDraggableSortable } from '../../DraggableSortable/useDraggableSortable/index.js'\nimport './index.css'\n\nconst baseClass = 'multi-value'\n\nexport function generateMultiValueDraggableID(optionData, valueFunction) {\n  return typeof valueFunction === 'function' ? valueFunction(optionData) : optionData?.value\n}\nexport const MultiValue: React.FC<MultiValueProps<Option>> = (props) => {\n  const {\n    className,\n    data,\n    innerProps,\n    isDisabled,\n    // @ts-expect-error // TODO Fix this - moduleResolution 16 breaks our declare module\n    selectProps: { customProps: { disableMouseDown } = {}, getOptionValue, isSortable } = {},\n  } = props\n\n  const id = generateMultiValueDraggableID(data, getOptionValue)\n\n  const { attributes, isDragging, listeners, setNodeRef, transform } = useDraggableSortable({\n    id,\n    disabled: !isSortable,\n  })\n\n  const classes = [\n    baseClass,\n    className,\n    !isDisabled && isSortable && 'draggable',\n    isDragging && `${baseClass}--is-dragging`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  // Extract onMouseDown from listeners to preserve the MouseSensor handler\n  const { onMouseDown: listenersMouseDown, ...restListeners } = listeners || {}\n\n  return (\n    <React.Fragment>\n      <SelectComponents.MultiValue\n        {...props}\n        className={classes}\n        innerProps={{\n          ...(isSortable\n            ? {\n                ...attributes,\n                ...restListeners,\n              }\n            : {}),\n          ...innerProps,\n          onMouseDown: (e) => {\n            // Call the MouseSensor's handler first to enable mouse dragging\n            if (isSortable && listenersMouseDown) {\n              listenersMouseDown(e)\n            }\n\n            if (!disableMouseDown) {\n              // we need to prevent the dropdown from opening when clicking on the drag handle, but not when a modal is open (i.e. the 'Relationship' field component)\n              e.stopPropagation()\n            }\n          },\n          ref: setNodeRef,\n          style: isSortable\n            ? {\n                transform,\n                ...attributes?.style,\n              }\n            : {},\n        }}\n      />\n    </React.Fragment>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","components","SelectComponents","useTranslation","useDraggableSortable","getOptionAccessibleName","MultiValueDragActivatorContext","baseClass","SortableMultiValueContainer","children","innerProps","dragActivator","nodeRef","containerProps","_jsx","value","ref","generateMultiValueDraggableID","optionData","valueFunction","MultiValue","props","$","className","data","index","isDisabled","selectProps","t0","t1","undefined","customProps","t2","getOptionValue","isSortable","t3","disableMouseDown","t4","id","t5","t6","disabled","attributes","isDragging","listeners","setActivatorNodeRef","setNodeRef","transform","t","t7","t8","t9","filter","Boolean","classes","join","t10","onMouseDown","listenersMouseDown","restListeners","style","sortableStyle","sortableAttributes","optionName","String","valueCount","Array","isArray","length","event","stopPropagation","t11","event_0","sortableInnerProps","Container"],"sources":["../../../../src/elements/ReactSelect/MultiValue/index.tsx"],"sourcesContent":["'use client'\nimport type { HTMLAttributes, RefCallback } from 'react'\nimport type { MultiValueGenericProps, MultiValueProps } from 'react-select'\n\nimport React from 'react'\nimport { components as SelectComponents } from 'react-select'\n\nimport type { Option } from '../types.js'\nimport type { MultiValueDragActivator } from './context.js'\n\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { useDraggableSortable } from '../../DraggableSortable/useDraggableSortable/index.js'\nimport { getOptionAccessibleName } from '../Option/index.js'\nimport { MultiValueDragActivatorContext } from './context.js'\nimport './index.css'\n\nconst baseClass = 'multi-value'\n\ntype SortableContainerInnerProps = {\n  dragActivator?: MultiValueDragActivator\n  nodeRef?: RefCallback<HTMLElement>\n} & HTMLAttributes<HTMLDivElement>\n\nconst SortableMultiValueContainer: React.FC<MultiValueGenericProps<Option>> = ({\n  children,\n  innerProps,\n}) => {\n  const { dragActivator, nodeRef, ...containerProps } = innerProps as SortableContainerInnerProps\n\n  return (\n    <MultiValueDragActivatorContext value={dragActivator}>\n      <div {...containerProps} ref={nodeRef}>\n        {children}\n      </div>\n    </MultiValueDragActivatorContext>\n  )\n}\n\nexport function generateMultiValueDraggableID(optionData, valueFunction) {\n  return typeof valueFunction === 'function' ? valueFunction(optionData) : optionData?.value\n}\nexport const MultiValue: React.FC<MultiValueProps<Option>> = (props) => {\n  const {\n    className,\n    data,\n    index,\n    innerProps,\n    isDisabled,\n    // @ts-expect-error // TODO Fix this - moduleResolution 16 breaks our declare module\n    selectProps: { customProps: { disableMouseDown } = {}, getOptionValue, isSortable } = {},\n  } = props\n\n  const id = generateMultiValueDraggableID(data, getOptionValue)\n\n  const { attributes, isDragging, listeners, setActivatorNodeRef, setNodeRef, transform } =\n    useDraggableSortable({\n      id,\n      disabled: !isSortable,\n    })\n  const { t } = useTranslation()\n\n  const classes = [\n    baseClass,\n    className,\n    !isDisabled && isSortable && 'draggable',\n    isDragging && `${baseClass}--is-dragging`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  const { onMouseDown: listenersMouseDown, ...restListeners } = listeners || {}\n  const { style: sortableStyle, ...sortableAttributes } = attributes\n  const optionName = getOptionAccessibleName(data, props.children, String(id)) || String(id)\n  const valueCount = Array.isArray(props.selectProps.value) ? props.selectProps.value.length : 1\n\n  const dragActivator: MultiValueDragActivator | undefined =\n    isSortable && !isDisabled\n      ? {\n          ...sortableAttributes,\n          ...restListeners,\n          'aria-label': `${t('general:dragToReorder')} ${optionName}, ${index + 1} of ${valueCount}`,\n          onMouseDown: (event) => {\n            listenersMouseDown?.(event)\n            event.stopPropagation()\n          },\n          ref: setActivatorNodeRef,\n        }\n      : undefined\n  const sortableInnerProps: SortableContainerInnerProps = {\n    ...innerProps,\n    dragActivator,\n    nodeRef: setNodeRef,\n    onMouseDown: (event) => {\n      if (!disableMouseDown) {\n        event.stopPropagation()\n      }\n    },\n    style: {\n      ...innerProps?.style,\n      ...sortableStyle,\n      transform,\n    },\n  }\n\n  return (\n    <SelectComponents.MultiValue\n      {...props}\n      className={classes}\n      components={{\n        ...props.components,\n        Container: SortableMultiValueContainer,\n      }}\n      innerProps={sortableInnerProps as MultiValueProps<Option>['innerProps']}\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,12 +1,16 @@
 @layer payload-default {
   .multi-value-label {
-    font-family: var(--text-body-medium-font-family);
+    align-self: center;
     font-size: var(--text-body-medium-font-size);
     font-weight: var(--text-body-medium-font-weight);
     line-height: var(--text-body-medium-line-height);
     display: flex;
     align-items: center;
+    height: var(--spacer-4);
+    margin-block: calc(var(--stroke-width-medium) * -1);
     max-width: 9.375rem;
+    min-width: 0;
+    overflow: hidden;
     color: currentColor;
     padding-left: var(--spacer-1-5);
   }
@@ -16,9 +20,44 @@
   }
 
   .multi-value-label__text {
-    text-overflow: ellipsis;
+    align-items: center;
+    display: flex;
+    max-width: 100%;
+    min-width: 0;
     overflow: hidden;
+    text-overflow: ellipsis;
     white-space: nowrap;
+
+    & > span {
+      max-width: 100%;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  .multi-value-label__drag-button {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    color: inherit;
+    cursor: grab;
+    display: flex;
+    font: inherit;
+    height: var(--spacer-4);
+    max-width: 100%;
+    min-width: var(--spacer-4);
+    padding: 0;
+    text-align: start;
+
+    &:active {
+      cursor: grabbing;
+    }
+
+    &:focus-visible {
+      outline: none;
+    }
   }
 
   .multi-value-label__text--editable {

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

@@ -1,6 +1,10 @@
-import type { MultiValueProps } from 'react-select';
+import type { MultiValueGenericProps, MultiValueProps } from 'react-select';
 import React from 'react';
 import type { Option } from '../types.js';
 import './index.css';
+export declare const getMultiValueLabelID: ({ data, selectProps, }: {
+    data: Option;
+    selectProps: MultiValueGenericProps<Option>['selectProps'];
+}) => string;
 export declare const MultiValueLabel: React.FC<MultiValueProps<Option>>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/ReactSelect/MultiValueLabel/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAGnD,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAGzC,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAAC,MAAM,CAAC,CA2B7D,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/ReactSelect/MultiValueLabel/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,sBAAsB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAG3E,OAAO,KAAc,MAAM,OAAO,CAAA;AAGlC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAKzC,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,oBAAoB,2BAG9B;IACD,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,EAAE,sBAAsB,CAAC,MAAM,CAAC,CAAC,aAAa,CAAC,CAAA;CAC3D,WAIA,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAAC,MAAM,CAAC,CA6D7D,CAAA"}

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

@@ -3,11 +3,20 @@
 import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
-import React from 'react';
+import React, { use } from 'react';
 import { components as SelectComponents } from 'react-select';
 import { useTranslation } from '../../../providers/Translation/index.js';
+import { MultiValueDragActivatorContext } from '../MultiValue/context.js';
+import { generateMultiValueDraggableID } from '../MultiValue/index.js';
 import './index.css';
 const baseClass = 'multi-value-label';
+export const getMultiValueLabelID = ({
+  data,
+  selectProps
+}) => {
+  const optionID = generateMultiValueDraggableID(data, selectProps.getOptionValue);
+  return `${String(selectProps.instanceId)}-multi-value-${encodeURIComponent(String(optionID))}-label`;
+};
 export const MultiValueLabel = props => {
   const $ = _c(2);
   const {
@@ -28,6 +37,21 @@ export const MultiValueLabel = props => {
   const className = `${baseClass}__text`;
   const labelText = data.label ? getTranslation(data.label, i18n) : "";
   const titleText = typeof labelText === "string" ? labelText : "";
+  const labelID = getMultiValueLabelID({
+    data,
+    selectProps: props.selectProps
+  });
+  const dragActivator = use(MultiValueDragActivatorContext);
+  const {
+    onKeyDown: dragActivatorOnKeyDown,
+    ref: dragActivatorRef,
+    ...dragActivatorProps
+  } = dragActivator || {};
+  const editableInnerProps = editableProps && editableProps(data, className, props.selectProps) || {};
+  const {
+    onKeyDown: editableOnKeyDown,
+    ...restEditableInnerProps
+  } = editableInnerProps;
   const t2 = isDisabled ? `${baseClass}--disabled` : "";
   let t3;
   if ($[0] !== t2) {
@@ -40,12 +64,33 @@ export const MultiValueLabel = props => {
   return _jsx("div", {
     className: t3.join(" "),
     title: titleText,
-    children: _jsx(SelectComponents.MultiValueLabel, {
+    children: dragActivator && !editableProps ? _jsx("button", {
+      ...dragActivatorProps,
+      className: `${baseClass}__drag-button`,
+      onKeyDown: dragActivatorOnKeyDown,
+      ref: dragActivatorRef,
+      type: "button",
+      children: _jsx("span", {
+        className,
+        id: labelID,
+        children: props.children
+      })
+    }) : _jsx(SelectComponents.MultiValueLabel, {
       ...props,
       innerProps: {
+        id: labelID,
         className,
-        ...(editableProps && editableProps(data, className, props.selectProps) || {}),
-        ...(draggableProps || {})
+        ...restEditableInnerProps,
+        ...(draggableProps || {}),
+        ...(dragActivatorProps || {}),
+        onKeyDown: event => {
+          if (event.currentTarget.isContentEditable) {
+            editableOnKeyDown?.(event);
+          } else {
+            dragActivatorOnKeyDown?.(event);
+          }
+        },
+        ref: dragActivatorRef
       }
     })
   });

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","getTranslation","React","components","SelectComponents","useTranslation","baseClass","MultiValueLabel","props","$","data","selectProps","t0","customProps","t1","isDisabled","undefined","draggableProps","editableProps","i18n","className","labelText","label","titleText","t2","t3","filter","Boolean","_jsx","join","title","children","innerProps"],"sources":["../../../../src/elements/ReactSelect/MultiValueLabel/index.tsx"],"sourcesContent":["'use client'\nimport type { OptionLabel } from 'payload'\nimport type { MultiValueProps } 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 = 'multi-value-label'\n\nexport const MultiValueLabel: React.FC<MultiValueProps<Option>> = (props) => {\n  const {\n    data,\n    // @ts-expect-error-next-line// TODO Fix this - moduleResolution 16 breaks our declare module\n    selectProps: { customProps: { draggableProps, editableProps } = {}, isDisabled } = {},\n  } = props\n  const { i18n } = useTranslation()\n\n  const className = `${baseClass}__text`\n  const labelText = data.label ? getTranslation(data.label as OptionLabel, i18n) : ''\n  const titleText = typeof labelText === 'string' ? labelText : ''\n\n  return (\n    <div\n      className={[baseClass, isDisabled ? `${baseClass}--disabled` : ''].filter(Boolean).join(' ')}\n      title={titleText}\n    >\n      <SelectComponents.MultiValueLabel\n        {...props}\n        innerProps={{\n          className,\n          ...((editableProps && editableProps(data, className, props.selectProps)) || {}),\n          ...(draggableProps || {}),\n        }}\n      />\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAIA,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,eAAA,GAAqDC,KAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EAChE;IAAAU,IAAA;IAAAC,WAAA,EAAAC;EAAA,IAIIJ,KAAA;EADW;IAAAK,WAAA,EAAAC,EAAA;IAAAC;EAAA,IAAAH,EAAwE,KAAAI,SAAA,QAAxEJ,EAAwE;EAAzD;IAAAK,cAAA;IAAAC;EAAA,IAAAJ,EAAsC,KAAAE,SAAA,QAAtCF,EAAsC;EAEpE;IAAAK;EAAA,IAAiBd,cAAA;EAEjB,MAAAe,SAAA,GAAkB,GAAAd,SAAA,QAAoB;EACtC,MAAAe,SAAA,GAAkBX,IAAA,CAAAY,KAAA,GAAarB,cAAA,CAAeS,IAAA,CAAAY,KAAA,EAA2BH,IAAA,IAAQ;EACjF,MAAAI,SAAA,GAAkB,OAAOF,SAAA,KAAc,WAAWA,SAAA,GAAY;EAInC,MAAAG,EAAA,GAAAT,UAAA,GAAa,GAAAT,SAAA,YAAwB,GAAG;EAAA,IAAAmB,EAAA;EAAA,IAAAhB,CAAA,QAAAe,EAAA;IAApDC,EAAA,IAAAnB,SAAA,EAAYkB,EAAwC,EAAAE,MAAA,CAAAC,OAAW;IAAAlB,CAAA,MAAAe,EAAA;IAAAf,CAAA,MAAAgB,EAAA;EAAA;IAAAA,EAAA,GAAAhB,CAAA;EAAA;EAAA,OAD5EmB,IAAA,CAAC;IAAAR,SAAA,EACYK,EAA+D,CAAAI,IAAA,CAAc;IAAAC,KAAA,EACjFP,SAAA;IAAAQ,QAAA,EAEPH,IAAA,CAAAxB,gBAAA,CAAAG,eAAA;MAAA,GACMC,KAAK;MAAAwB,UAAA;QAAAZ,SAAA;QAAA,IAGHF,aAAC,IAAiBA,aAAA,CAAcR,IAAA,EAAMU,SAAA,EAAWZ,KAAA,CAAAG,WAAiB,OAAQ;QAAA,IAC1EM,cAAA,MAAoB;MAAA;IAAA,C;;CAKlC","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","getTranslation","React","use","components","SelectComponents","useTranslation","MultiValueDragActivatorContext","generateMultiValueDraggableID","baseClass","getMultiValueLabelID","data","selectProps","optionID","getOptionValue","String","instanceId","encodeURIComponent","MultiValueLabel","props","$","t0","customProps","t1","isDisabled","undefined","draggableProps","editableProps","i18n","className","labelText","label","titleText","labelID","dragActivator","onKeyDown","dragActivatorOnKeyDown","ref","dragActivatorRef","dragActivatorProps","editableInnerProps","editableOnKeyDown","restEditableInnerProps","t2","t3","filter","Boolean","_jsx","join","title","children","type","id","innerProps","event","currentTarget","isContentEditable"],"sources":["../../../../src/elements/ReactSelect/MultiValueLabel/index.tsx"],"sourcesContent":["'use client'\nimport type { OptionLabel } from 'payload'\nimport type { MultiValueGenericProps, MultiValueProps } from 'react-select'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { use } 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 { MultiValueDragActivatorContext } from '../MultiValue/context.js'\nimport { generateMultiValueDraggableID } from '../MultiValue/index.js'\nimport './index.css'\n\nconst baseClass = 'multi-value-label'\n\nexport const getMultiValueLabelID = ({\n  data,\n  selectProps,\n}: {\n  data: Option\n  selectProps: MultiValueGenericProps<Option>['selectProps']\n}) => {\n  const optionID = generateMultiValueDraggableID(data, selectProps.getOptionValue)\n\n  return `${String(selectProps.instanceId)}-multi-value-${encodeURIComponent(String(optionID))}-label`\n}\n\nexport const MultiValueLabel: React.FC<MultiValueProps<Option>> = (props) => {\n  const {\n    data,\n    // @ts-expect-error-next-line// TODO Fix this - moduleResolution 16 breaks our declare module\n    selectProps: { customProps: { draggableProps, editableProps } = {}, isDisabled } = {},\n  } = props\n  const { i18n } = useTranslation()\n\n  const className = `${baseClass}__text`\n  const labelText = data.label ? getTranslation(data.label as OptionLabel, i18n) : ''\n  const titleText = typeof labelText === 'string' ? labelText : ''\n  const labelID = getMultiValueLabelID({ data, selectProps: props.selectProps })\n  const dragActivator = use(MultiValueDragActivatorContext)\n  const {\n    onKeyDown: dragActivatorOnKeyDown,\n    ref: dragActivatorRef,\n    ...dragActivatorProps\n  } = dragActivator || {}\n  const editableInnerProps =\n    (editableProps && editableProps(data, className, props.selectProps)) || {}\n  const { onKeyDown: editableOnKeyDown, ...restEditableInnerProps } = editableInnerProps\n\n  return (\n    <div\n      className={[baseClass, isDisabled ? `${baseClass}--disabled` : ''].filter(Boolean).join(' ')}\n      title={titleText}\n    >\n      {dragActivator && !editableProps ? (\n        <button\n          {...dragActivatorProps}\n          className={`${baseClass}__drag-button`}\n          onKeyDown={dragActivatorOnKeyDown}\n          ref={dragActivatorRef}\n          type=\"button\"\n        >\n          <span className={className} id={labelID}>\n            {props.children}\n          </span>\n        </button>\n      ) : (\n        <SelectComponents.MultiValueLabel\n          {...props}\n          innerProps={{\n            id: labelID,\n            className,\n            ...restEditableInnerProps,\n            ...(draggableProps || {}),\n            ...(dragActivatorProps || {}),\n            onKeyDown: (event) => {\n              if (event.currentTarget.isContentEditable) {\n                editableOnKeyDown?.(event)\n              } else {\n                dragActivatorOnKeyDown?.(event)\n              }\n            },\n            ref: dragActivatorRef,\n          }}\n        />\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,25 +1,51 @@
 @layer payload-default {
   .multi-value-remove {
+    align-self: center;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
+    height: var(--spacer-4);
+    margin-block: calc(var(--stroke-width-medium) * -1);
+    min-width: var(--spacer-4);
     position: relative;
     background-color: transparent;
-    border: var(--stroke-width-small) solid transparent;
+    border: 0;
     border-radius: var(--radius-small);
     padding: 0;
     color: var(--color-icon-secondary);
 
+    &::before {
+      border: var(--stroke-width-small) solid transparent;
+      border-radius: var(--radius-small);
+      box-sizing: border-box;
+      content: '';
+      height: var(--spacer-4);
+      left: 50%;
+      position: absolute;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      width: var(--spacer-4);
+    }
+
+    &__icon {
+      display: block;
+      position: relative;
+    }
+
     &:hover {
-      color: var(--color-text);
-      background: var(--color-bg-hover);
+      .multi-value-remove__icon {
+        opacity: 0.5;
+      }
     }
 
     &:focus-visible {
       outline: none;
-      border: var(--accessibility-outline);
+
+      &::before {
+        border: var(--accessibility-outline);
+      }
     }
   }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/ReactSelect/MultiValueRemove/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAA;AAEzD,OAAO,KAAK,EAAE,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAA;AAEvC,OAAO,KAAK,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,aAAa,CAAA;AAKvD,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CACrC;IACE,UAAU,EAAE,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAA;CAC5C,GAAG,qBAAqB,CAAC,UAAU,CAAC,CAuCtC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/ReactSelect/MultiValueRemove/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAA;AAEzD,OAAO,KAAK,EAAE,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAA;AAEvC,OAAO,KAAK,EAAqB,MAAM,IAAI,UAAU,EAAE,MAAM,aAAa,CAAA;AAM1E,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CACrC;IACE,UAAU,EAAE,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAA;CAC5C,GAAG,qBAAqB,CAAC,UAAU,CAAC,CAiDtC,CAAA"}