@payloadcms/ui 4.0.0-internal.e16cf59 → 4.0.0-internal.e55ccef

package/dist/elements/Toasts/fieldErrors.js.map

@@ -1 +1 @@
-{"version":3,"file":"fieldErrors.js","names":["c","_c","React","groupSimilarErrors","items","result","item","parts","split","inserted","i","length","startsWith","splice","push","createErrorsFromMessage","message","colonIndex","indexOf","intro","slice","errorsString","undefined","errors","map","error","replaceAll","trim","FieldErrorsToast","t0","$","errorMessage","t1","t2","useState","t3","_jsxs","children","Array","isArray","_jsx","_temp","index"],"sources":["../../../src/elements/Toasts/fieldErrors.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nfunction groupSimilarErrors(items: string[]): string[] {\n  const result: string[] = []\n\n  for (const item of items) {\n    if (item) {\n      const parts = item.split(' → ')\n      let inserted = false\n\n      // Find a place where a similar path exists\n      for (let i = 0; i < result.length; i++) {\n        if (result[i].startsWith(parts[0])) {\n          result.splice(i + 1, 0, item)\n          inserted = true\n          break\n        }\n      }\n\n      // If no similar path was found, add to the end\n      if (!inserted) {\n        result.push(item)\n      }\n    }\n  }\n\n  return result\n}\n\nexport function createErrorsFromMessage(message: string): {\n  errors?: string[]\n  message: string\n} {\n  const colonIndex = message.indexOf(':')\n  const intro = colonIndex >= 0 ? message.slice(0, colonIndex) : message\n  const errorsString = colonIndex >= 0 ? message.slice(colonIndex + 1) : undefined\n\n  if (!errorsString) {\n    return {\n      message: intro,\n    }\n  }\n\n  const errors = errorsString.split(',').map((error) => error.replaceAll(' > ', ' → ').trim())\n\n  if (errors.length === 1) {\n    return {\n      errors,\n      message: `${intro}: `,\n    }\n  }\n\n  return {\n    errors: groupSimilarErrors(errors),\n    message: `${intro} (${errors.length}):`,\n  }\n}\n\nexport function FieldErrorsToast({ errorMessage }) {\n  const [{ errors, message }] = React.useState(() => createErrorsFromMessage(errorMessage))\n\n  return (\n    <div>\n      {message}\n      {Array.isArray(errors) && errors.length > 0 ? (\n        errors.length === 1 ? (\n          <span data-testid=\"field-error\">{errors[0]}</span>\n        ) : (\n          <ul data-testid=\"field-errors\">\n            {errors.map((error, index) => {\n              return <li key={index}>{error}</li>\n            })}\n          </ul>\n        )\n      ) : null}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"fieldErrors.js","names":["c","_c","React","WarningIcon","groupSimilarErrors","items","result","item","parts","split","inserted","i","length","startsWith","splice","push","createErrorsFromMessage","message","colonIndex","indexOf","intro","slice","errorsString","undefined","errors","map","error","replaceAll","trim","FieldErrorsToast","t0","$","errorMessage","t1","t2","useState","t3","_jsxs","_Fragment","children","_jsx","className","size","Array","isArray","_temp","index"],"sources":["../../../src/elements/Toasts/fieldErrors.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport { WarningIcon } from '../../icons/Warning/index.js'\nimport './index.css'\n\nfunction groupSimilarErrors(items: string[]): string[] {\n  const result: string[] = []\n\n  for (const item of items) {\n    if (item) {\n      const parts = item.split(' → ')\n      let inserted = false\n\n      // Find a place where a similar path exists\n      for (let i = 0; i < result.length; i++) {\n        if (result[i].startsWith(parts[0])) {\n          result.splice(i + 1, 0, item)\n          inserted = true\n          break\n        }\n      }\n\n      // If no similar path was found, add to the end\n      if (!inserted) {\n        result.push(item)\n      }\n    }\n  }\n\n  return result\n}\n\nexport function createErrorsFromMessage(message: string): {\n  errors?: string[]\n  message: string\n} {\n  const colonIndex = message.indexOf(':')\n  const intro = colonIndex >= 0 ? message.slice(0, colonIndex) : message\n  const errorsString = colonIndex >= 0 ? message.slice(colonIndex + 1) : undefined\n\n  if (!errorsString) {\n    return {\n      message: intro,\n    }\n  }\n\n  const errors = errorsString.split(',').map((error) => error.replaceAll(' > ', ' → ').trim())\n\n  if (errors.length === 1) {\n    return {\n      errors,\n      message: `${intro}: `,\n    }\n  }\n\n  return {\n    errors: groupSimilarErrors(errors),\n    message: `${intro} (${errors.length}):`,\n  }\n}\n\nexport function FieldErrorsToast({ errorMessage }) {\n  const [{ errors, message }] = React.useState(() => createErrorsFromMessage(errorMessage))\n\n  return (\n    <>\n      <div className=\"toast-icon\">\n        <WarningIcon size={24} />\n      </div>\n      <div className=\"toast-content\" data-testid=\"field-errors-toast\">\n        <div className=\"toast-title\">\n          {message}\n          {Array.isArray(errors) && errors.length > 0 ? (\n            errors.length === 1 ? (\n              <span className=\"field-error\" data-testid=\"field-error\">\n                {errors[0]}\n              </span>\n            ) : (\n              <ul className=\"field-errors\" data-testid=\"field-errors\">\n                {errors.map((error, index) => {\n                  return <li key={index}>{error}</li>\n                })}\n              </ul>\n            )\n          ) : null}\n        </div>\n      </div>\n    </>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Toasts/index.css

@@ -0,0 +1,5 @@
+@layer payload-default {
+  .field-errors {
+    list-style: circle;
+  }
+}

package/dist/elements/Tooltip/index.css

@@ -1,49 +1,42 @@
 @layer payload-default {
   .tooltip {
-    --caret-size: 0.375rem;
+    --caret-width: 15px;
+    --caret-height: 7px;
+    --caret-offset: 4px;
+    --caret-border-color: var(--color-border);
+    --tooltip-x: -50%;
+    --tooltip-caret-x: 0px;
+    --tooltip-max-width: none;
 
     opacity: 0;
-    background-color: var(--bg-inverse-default);
+    background-color: var(--color-bg-tooltip);
     position: absolute;
     z-index: 3;
     left: 50%;
+    max-width: var(--tooltip-max-width);
     padding: var(--spacer-1);
-    color: var(--text-inverse-oninverse);
+    color: var(--color-text-ontooltip);
     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);
     letter-spacing: var(--text-letter-spacing);
     white-space: nowrap;
-    max-width: 11.25rem;
     border-radius: var(--radius-medium);
-    box-shadow:
-      0 0 0.5px rgba(0, 0, 0, 0.15),
-      0 5px 12px rgba(0, 0, 0, 0.13),
-      0 1px 3px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--elevation-300-tooltip);
     visibility: hidden;
 
-    &::after {
-      content: ' ';
-      display: block;
-      position: absolute;
-      transform: translate3d(-50%, 100%, 0);
-      width: 0;
-      height: 0;
-      border-left: var(--caret-size) solid transparent;
-      border-right: var(--caret-size) solid transparent;
-    }
-
     &.field-error {
-      background-color: var(--bg-danger-default);
-      color: var(--text-danger-ondanger);
+      background-color: var(--color-bg-danger);
+      color: var(--color-text-ondanger);
 
-      &.tooltip--position-top::after {
-        border-top-color: var(--bg-danger-default);
+      .tooltip__caret-fill {
+        fill: var(--color-bg-danger);
+        stroke: var(--color-bg-danger);
       }
 
-      &.tooltip--position-bottom::after {
-        border-bottom-color: var(--bg-danger-default);
+      .tooltip__caret-stroke {
+        stroke: var(--color-bg-danger);
       }
     }
 
@@ -58,6 +51,28 @@
     }
   }
 
+  .tooltip--wrap {
+    white-space: normal;
+    overflow-wrap: break-word;
+  }
+
+  .tooltip__caret {
+    position: absolute;
+    pointer-events: none;
+    filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.15));
+  }
+
+  .tooltip__caret-fill {
+    fill: var(--color-bg-tooltip);
+    stroke: var(--color-bg-tooltip);
+  }
+
+  .tooltip__caret-stroke {
+    fill: none;
+    stroke: var(--color-border);
+    stroke-width: 1.5px;
+  }
+
   .tooltip--show {
     visibility: visible;
     opacity: 1;
@@ -65,41 +80,83 @@
     cursor: default;
   }
 
-  .tooltip--caret-center {
-    &::after {
-      left: 50%;
-    }
+  .tooltip--caret-center .tooltip__caret {
+    left: 50%;
+    transform: translateX(-50%);
   }
 
-  .tooltip--caret-left {
-    &::after {
-      left: var(--spacer-3);
-    }
+  .tooltip--caret-left .tooltip__caret {
+    left: var(--spacer-2);
   }
 
-  .tooltip--caret-right {
-    &::after {
-      right: 0;
-    }
+  .tooltip--caret-right .tooltip__caret {
+    right: var(--spacer-2);
   }
 
   .tooltip--position-top {
-    top: calc(var(--spacer-4) * -1);
-    transform: translate3d(-50%, calc(var(--caret-size) * -1), 0);
+    top: 0;
+    transform: translate3d(
+      var(--tooltip-x),
+      calc(-100% - var(--caret-height) - var(--caret-offset) + 1px),
+      0
+    );
 
-    &::after {
-      bottom: 1px;
-      border-top: var(--caret-size) solid var(--bg-inverse-default);
+    .tooltip__caret {
+      --color-border: var(--ramp-grey-700);
+      top: calc(100% - 0.5px);
+    }
+
+    &.tooltip--caret-center .tooltip__caret {
+      transform: translateX(calc(-50% + var(--tooltip-caret-x)));
     }
   }
 
   .tooltip--position-bottom {
-    bottom: calc(var(--spacer-4) * -1);
-    transform: translate3d(-50%, var(--caret-size), 0);
+    top: 100%;
+    transform: translate3d(
+      var(--tooltip-x),
+      calc(var(--caret-height) + var(--caret-offset) - 1px),
+      0
+    );
+
+    .tooltip__caret {
+      bottom: calc(100% - 0.5px);
+      transform: rotate(180deg);
+    }
+
+    &.tooltip--caret-center .tooltip__caret {
+      transform: translateX(calc(-50% + var(--tooltip-caret-x))) rotate(180deg);
+    }
+
+    &.tooltip--caret-right .tooltip__caret {
+      transform: rotate(180deg);
+    }
+  }
+
+  .tooltip--position-left {
+    top: 50%;
+    left: 0;
+    transform: translate3d(calc(-100% - var(--caret-height) - var(--caret-offset)), -50%, 0);
+
+    .tooltip__caret {
+      top: calc(50% + 0.5px);
+      left: calc(100% - 0.5px);
+      transform: translateY(calc(1 * var(--caret-width) / 2)) rotate(-90deg);
+      transform-origin: top left;
+    }
+  }
+
+  .tooltip--position-right {
+    top: 50%;
+    left: 100%;
+    transform: translate3d(calc(var(--caret-height) + var(--caret-offset)), -50%, 0);
 
-    &::after {
-      bottom: calc(100% + var(--caret-size) - 1px);
-      border-bottom: var(--caret-size) solid var(--bg-inverse-default);
+    .tooltip__caret {
+      top: calc(50% + 0.5px);
+      left: unset;
+      right: calc(100% - 0.5px);
+      transform: translateY(calc(1 * var(--caret-width) / 2)) rotate(90deg);
+      transform-origin: top right;
     }
   }
 }

package/dist/elements/Tooltip/index.d.ts

@@ -6,7 +6,7 @@ export type Props = {
     children: React.ReactNode;
     className?: string;
     delay?: number;
-    position?: 'bottom' | 'top';
+    position?: 'bottom' | 'left' | 'right' | 'top';
     show?: boolean;
     /**
      * If the tooltip position should not change depending on if the toolbar is outside the boundingRef. @default false

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Tooltip/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoB,MAAM,OAAO,CAAA;AAGxC,OAAO,aAAa,CAAA;AAEpB,MAAM,MAAM,KAAK,GAAG;IAClB,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IACxC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IACjD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;CAC5B,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAmFnC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Tooltip/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4D,MAAM,OAAO,CAAA;AAGhF,OAAO,aAAa,CAAA;AAwBpB,MAAM,MAAM,KAAK,GAAG;IAClB,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IACxC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IACjD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,CAAA;IAC9C,IAAI,CAAC,EAAE,OAAO,CAAA;IACd;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;CAC5B,CAAA;AAsBD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAsJnC,CAAA"}

package/dist/elements/Tooltip/index.js

@@ -1,9 +1,60 @@
 'use client';
 
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect } from 'react';
+import React, { useCallback, useEffect, useLayoutEffect, useState } from 'react';
 import { useIntersect } from '../../hooks/useIntersect.js';
 import './index.css';
+// Breathing room (px) between a shifted tooltip and its clipping edge. Maps to `--spacer-1`.
+const EDGE_GUTTER = 4;
+const getClipBoundary = el => {
+  let current = el?.parentElement || null;
+  while (current) {
+    const {
+      overflowX
+    } = window.getComputedStyle(current);
+    if (overflowX === 'auto' || overflowX === 'clip' || overflowX === 'hidden' || overflowX === 'scroll') {
+      return current.getBoundingClientRect();
+    }
+    current = current.parentElement;
+  }
+  return null;
+};
+const TooltipCaret = () => {
+  const $ = _c(2);
+  const clipId = React.useId();
+  let t0;
+  if ($[0] !== clipId) {
+    t0 = _jsxs("svg", {
+      "aria-hidden": "true",
+      className: "tooltip__caret",
+      height: "14",
+      viewBox: "0 0 14 14",
+      width: "15",
+      children: [_jsx("clipPath", {
+        id: clipId,
+        children: _jsx("rect", {
+          height: "14",
+          width: "15",
+          x: "-0.5",
+          y: "0.5"
+        })
+      }), _jsx("path", {
+        className: "tooltip__caret-stroke",
+        clipPath: `url(#${clipId})`,
+        d: "M0,0 H14 L7.875,6.125 Q7,7 6.125,6.125 Z"
+      }), _jsx("path", {
+        className: "tooltip__caret-fill",
+        d: "M0,0 H14 L7.875,6.125 Q7,7 6.125,6.125 Z"
+      })]
+    });
+    $[0] = clipId;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+};
 export const Tooltip = props => {
   const {
     alignCaret = 'center',
@@ -17,8 +68,9 @@ export const Tooltip = props => {
   } = props;
   const [show, setShow] = React.useState(showFromProps);
   const [position, setPosition] = React.useState('top');
-  const getTitleAttribute = content => typeof content === 'string' ? content : '';
-  const [ref, intersectionEntry] = useIntersect({
+  const [shiftX, setShiftX] = useState(0);
+  const [maxWidth, setMaxWidth] = useState(null);
+  const [ref, intersectionEntry, node] = useIntersect({
     root: boundingRef?.current || null,
     rootMargin: '-145px 0px 0px 100px',
     threshold: 0
@@ -45,26 +97,76 @@ export const Tooltip = props => {
     }
     setPosition(intersectionEntry?.isIntersecting ? 'top' : 'bottom');
   }, [intersectionEntry, staticPositioning]);
+  // Keep a horizontally-centered tooltip (top/bottom) inside its boundary by
+  // shifting it inward by exactly the amount it would overflow. The hidden
+  // measuring aside (`node`) provides the natural, unshifted geometry.
+  const computeShift = useCallback(() => {
+    const usesHorizontalCenter = (positionFromProps || position) === 'top' || (positionFromProps || position) === 'bottom';
+    if (staticPositioning || !node || !usesHorizontalCenter) {
+      setShiftX(0);
+      setMaxWidth(null);
+      return;
+    }
+    const rect = node.getBoundingClientRect();
+    const boundary = boundingRef?.current?.getBoundingClientRect() ?? getClipBoundary(node) ?? undefined;
+    const leftEdge = (boundary?.left ?? 0) + EDGE_GUTTER;
+    const rightEdge = (boundary?.right ?? window.innerWidth) - EDGE_GUTTER;
+    const available = rightEdge - leftEdge;
+    // When the tooltip can't fit even at full boundary width, cap it so it wraps.
+    const nextMaxWidth = rect.width > available ? available : null;
+    setMaxWidth(nextMaxWidth);
+    // Compute the shift against the clamped box, kept centered on the anchor.
+    const center = rect.left + rect.width / 2;
+    const effectiveWidth = nextMaxWidth ?? rect.width;
+    const effectiveLeft = center - effectiveWidth / 2;
+    const effectiveRight = center + effectiveWidth / 2;
+    let shift = 0;
+    if (effectiveRight > rightEdge) {
+      shift = rightEdge - effectiveRight;
+    }
+    if (effectiveLeft + shift < leftEdge) {
+      shift = leftEdge - effectiveLeft;
+    }
+    setShiftX(shift);
+  }, [boundingRef, node, position, positionFromProps, staticPositioning]);
+  useLayoutEffect(() => {
+    if (!show) {
+      return;
+    }
+    computeShift();
+    window.addEventListener('resize', computeShift);
+    return () => {
+      window.removeEventListener('resize', computeShift);
+    };
+  }, [show, computeShift]);
   // The first aside is always on top. The purpose of that is that it can reliably be used for the interaction observer (as it's not moving around), to calculate the position of the actual tooltip.
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [!staticPositioning && /*#__PURE__*/_jsx("aside", {
+    children: [!staticPositioning && /*#__PURE__*/_jsxs("aside", {
       "aria-hidden": "true",
       className: ['tooltip', className, `tooltip--caret-${alignCaret}`, 'tooltip--position-top'].filter(Boolean).join(' '),
       ref: ref,
       style: {
         opacity: '0'
       },
-      children: /*#__PURE__*/_jsx("div", {
+      children: [/*#__PURE__*/_jsx(TooltipCaret, {}), /*#__PURE__*/_jsx("div", {
         className: "tooltip-content",
         children: children
-      })
-    }), /*#__PURE__*/_jsx("aside", {
-      className: ['tooltip', className, show && 'tooltip--show', `tooltip--caret-${alignCaret}`, `tooltip--position-${positionFromProps || position}`].filter(Boolean).join(' '),
-      title: getTitleAttribute(children),
-      children: /*#__PURE__*/_jsx("div", {
+      })]
+    }), /*#__PURE__*/_jsxs("aside", {
+      className: ['tooltip', className, show && 'tooltip--show', maxWidth && 'tooltip--wrap', `tooltip--caret-${alignCaret}`, `tooltip--position-${positionFromProps || position}`].filter(Boolean).join(' '),
+      style: {
+        ...(maxWidth ? {
+          '--tooltip-max-width': `${maxWidth}px`
+        } : {}),
+        ...(shiftX ? {
+          '--tooltip-caret-x': `${-shiftX}px`,
+          '--tooltip-x': `calc(-50% + ${shiftX}px)`
+        } : {})
+      },
+      children: [/*#__PURE__*/_jsx(TooltipCaret, {}), /*#__PURE__*/_jsx("div", {
         className: "tooltip-content",
         children: children
-      })
+      })]
     })]
   });
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useEffect","useIntersect","Tooltip","props","alignCaret","boundingRef","children","className","delay","position","positionFromProps","show","showFromProps","staticPositioning","setShow","useState","setPosition","getTitleAttribute","content","ref","intersectionEntry","root","current","rootMargin","threshold","timerID","setTimeout","clearTimeout","isIntersecting","_jsxs","Fragment","_jsx","filter","Boolean","join","style","opacity","title"],"sources":["../../../src/elements/Tooltip/index.tsx"],"sourcesContent":["'use client'\nimport React, { useEffect } from 'react'\n\nimport { useIntersect } from '../../hooks/useIntersect.js'\nimport './index.css'\n\nexport type Props = {\n  alignCaret?: 'center' | 'left' | 'right'\n  boundingRef?: React.RefObject<HTMLElement | null>\n  children: React.ReactNode\n  className?: string\n  delay?: number\n  position?: 'bottom' | 'top'\n  show?: boolean\n  /**\n   * If the tooltip position should not change depending on if the toolbar is outside the boundingRef. @default false\n   */\n  staticPositioning?: boolean\n}\n\nexport const Tooltip: React.FC<Props> = (props) => {\n  const {\n    alignCaret = 'center',\n    boundingRef,\n    children,\n    className,\n    delay = 500,\n    position: positionFromProps,\n    show: showFromProps = true,\n    staticPositioning = false,\n  } = props\n\n  const [show, setShow] = React.useState(showFromProps)\n  const [position, setPosition] = React.useState<'bottom' | 'top'>('top')\n\n  const getTitleAttribute = (content) => (typeof content === 'string' ? content : '')\n\n  const [ref, intersectionEntry] = useIntersect(\n    {\n      root: boundingRef?.current || null,\n      rootMargin: '-145px 0px 0px 100px',\n      threshold: 0,\n    },\n    staticPositioning,\n  )\n\n  useEffect(() => {\n    let timerID: NodeJS.Timeout\n\n    // do not use the delay on transition-out\n    if (delay && showFromProps) {\n      timerID = setTimeout(() => {\n        setShow(showFromProps)\n      }, delay)\n    } else {\n      setShow(showFromProps)\n    }\n\n    return () => {\n      if (timerID) {\n        clearTimeout(timerID)\n      }\n    }\n  }, [showFromProps, delay])\n\n  useEffect(() => {\n    if (staticPositioning) {\n      return\n    }\n    setPosition(intersectionEntry?.isIntersecting ? 'top' : 'bottom')\n  }, [intersectionEntry, staticPositioning])\n\n  // The first aside is always on top. The purpose of that is that it can reliably be used for the interaction observer (as it's not moving around), to calculate the position of the actual tooltip.\n  return (\n    <React.Fragment>\n      {!staticPositioning && (\n        <aside\n          aria-hidden=\"true\"\n          className={['tooltip', className, `tooltip--caret-${alignCaret}`, 'tooltip--position-top']\n            .filter(Boolean)\n            .join(' ')}\n          ref={ref}\n          style={{ opacity: '0' }}\n        >\n          <div className=\"tooltip-content\">{children}</div>\n        </aside>\n      )}\n      <aside\n        className={[\n          'tooltip',\n          className,\n          show && 'tooltip--show',\n          `tooltip--caret-${alignCaret}`,\n          `tooltip--position-${positionFromProps || position}`,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        title={getTitleAttribute(children)}\n      >\n        <div className=\"tooltip-content\">{children}</div>\n      </aside>\n    </React.Fragment>\n  )\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,IAASC,SAAS,QAAQ;AAEjC,SAASC,YAAY,QAAQ;AAC7B,OAAO;AAgBP,OAAO,MAAMC,OAAA,GAA4BC,KAAA;EACvC,MAAM;IACJC,UAAA,GAAa,QAAQ;IACrBC,WAAW;IACXC,QAAQ;IACRC,SAAS;IACTC,KAAA,GAAQ,GAAG;IACXC,QAAA,EAAUC,iBAAiB;IAC3BC,IAAA,EAAMC,aAAA,GAAgB,IAAI;IAC1BC,iBAAA,GAAoB;EAAK,CAC1B,GAAGV,KAAA;EAEJ,MAAM,CAACQ,IAAA,EAAMG,OAAA,CAAQ,GAAGf,KAAA,CAAMgB,QAAQ,CAACH,aAAA;EACvC,MAAM,CAACH,QAAA,EAAUO,WAAA,CAAY,GAAGjB,KAAA,CAAMgB,QAAQ,CAAmB;EAEjE,MAAME,iBAAA,GAAqBC,OAAA,IAAa,OAAOA,OAAA,KAAY,WAAWA,OAAA,GAAU;EAEhF,MAAM,CAACC,GAAA,EAAKC,iBAAA,CAAkB,GAAGnB,YAAA,CAC/B;IACEoB,IAAA,EAAMhB,WAAA,EAAaiB,OAAA,IAAW;IAC9BC,UAAA,EAAY;IACZC,SAAA,EAAW;EACb,GACAX,iBAAA;EAGFb,SAAA,CAAU;IACR,IAAIyB,OAAA;IAEJ;IACA,IAAIjB,KAAA,IAASI,aAAA,EAAe;MAC1Ba,OAAA,GAAUC,UAAA,CAAW;QACnBZ,OAAA,CAAQF,aAAA;MACV,GAAGJ,KAAA;IACL,OAAO;MACLM,OAAA,CAAQF,aAAA;IACV;IAEA,OAAO;MACL,IAAIa,OAAA,EAAS;QACXE,YAAA,CAAaF,OAAA;MACf;IACF;EACF,GAAG,CAACb,aAAA,EAAeJ,KAAA,CAAM;EAEzBR,SAAA,CAAU;IACR,IAAIa,iBAAA,EAAmB;MACrB;IACF;IACAG,WAAA,CAAYI,iBAAA,EAAmBQ,cAAA,GAAiB,QAAQ;EAC1D,GAAG,CAACR,iBAAA,EAAmBP,iBAAA,CAAkB;EAEzC;EACA,oBACEgB,KAAA,CAAC9B,KAAA,CAAM+B,QAAQ;eACZ,CAACjB,iBAAA,iBACAkB,IAAA,CAAC;MACC,eAAY;MACZxB,SAAA,EAAW,CAAC,WAAWA,SAAA,EAAW,kBAAkBH,UAAA,EAAY,EAAE,wBAAwB,CACvF4B,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;MACRf,GAAA,EAAKA,GAAA;MACLgB,KAAA,EAAO;QAAEC,OAAA,EAAS;MAAI;gBAEtB,aAAAL,IAAA,CAAC;QAAIxB,SAAA,EAAU;kBAAmBD;;qBAGtCyB,IAAA,CAAC;MACCxB,SAAA,EAAW,CACT,WACAA,SAAA,EACAI,IAAA,IAAQ,iBACR,kBAAkBP,UAAA,EAAY,EAC9B,qBAAqBM,iBAAA,IAAqBD,QAAA,EAAU,CACrD,CACEuB,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;MACRG,KAAA,EAAOpB,iBAAA,CAAkBX,QAAA;gBAEzB,aAAAyB,IAAA,CAAC;QAAIxB,SAAA,EAAU;kBAAmBD;;;;AAI1C","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useCallback","useEffect","useLayoutEffect","useState","useIntersect","EDGE_GUTTER","getClipBoundary","el","current","parentElement","overflowX","window","getComputedStyle","getBoundingClientRect","TooltipCaret","$","clipId","useId","t0","_jsxs","className","height","viewBox","width","children","_jsx","id","x","y","clipPath","d","Tooltip","props","alignCaret","boundingRef","delay","position","positionFromProps","show","showFromProps","staticPositioning","setShow","setPosition","shiftX","setShiftX","maxWidth","setMaxWidth","ref","intersectionEntry","node","root","rootMargin","threshold","timerID","setTimeout","clearTimeout","isIntersecting","computeShift","usesHorizontalCenter","rect","boundary","undefined","leftEdge","left","rightEdge","right","innerWidth","available","nextMaxWidth","center","effectiveWidth","effectiveLeft","effectiveRight","shift","addEventListener","removeEventListener","Fragment","filter","Boolean","join","style","opacity"],"sources":["../../../src/elements/Tooltip/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback, useEffect, useLayoutEffect, useState } from 'react'\n\nimport { useIntersect } from '../../hooks/useIntersect.js'\nimport './index.css'\n\n// Breathing room (px) between a shifted tooltip and its clipping edge. Maps to `--spacer-1`.\nconst EDGE_GUTTER = 4\n\nconst getClipBoundary = (el: HTMLElement | null): DOMRect | null => {\n  let current = el?.parentElement || null\n\n  while (current) {\n    const { overflowX } = window.getComputedStyle(current)\n    if (\n      overflowX === 'auto' ||\n      overflowX === 'clip' ||\n      overflowX === 'hidden' ||\n      overflowX === 'scroll'\n    ) {\n      return current.getBoundingClientRect()\n    }\n    current = current.parentElement\n  }\n\n  return null\n}\n\nexport type Props = {\n  alignCaret?: 'center' | 'left' | 'right'\n  boundingRef?: React.RefObject<HTMLElement | null>\n  children: React.ReactNode\n  className?: string\n  delay?: number\n  position?: 'bottom' | 'left' | 'right' | 'top'\n  show?: boolean\n  /**\n   * If the tooltip position should not change depending on if the toolbar is outside the boundingRef. @default false\n   */\n  staticPositioning?: boolean\n}\n\nconst TooltipCaret: React.FC = () => {\n  const clipId = React.useId()\n\n  return (\n    <svg aria-hidden=\"true\" className=\"tooltip__caret\" height=\"14\" viewBox=\"0 0 14 14\" width=\"15\">\n      <clipPath id={clipId}>\n        <rect height=\"14\" width=\"15\" x=\"-0.5\" y=\"0.5\" />\n      </clipPath>\n      {/* Border stroke - clipped to hide top edge */}\n      <path\n        className=\"tooltip__caret-stroke\"\n        clipPath={`url(#${clipId})`}\n        d=\"M0,0 H14 L7.875,6.125 Q7,7 6.125,6.125 Z\"\n      />\n      {/* Fill path */}\n      <path className=\"tooltip__caret-fill\" d=\"M0,0 H14 L7.875,6.125 Q7,7 6.125,6.125 Z\" />\n    </svg>\n  )\n}\n\nexport const Tooltip: React.FC<Props> = (props) => {\n  const {\n    alignCaret = 'center',\n    boundingRef,\n    children,\n    className,\n    delay = 500,\n    position: positionFromProps,\n    show: showFromProps = true,\n    staticPositioning = false,\n  } = props\n\n  const [show, setShow] = React.useState(showFromProps)\n  const [position, setPosition] = React.useState<'bottom' | 'left' | 'right' | 'top'>('top')\n  const [shiftX, setShiftX] = useState(0)\n  const [maxWidth, setMaxWidth] = useState<null | number>(null)\n\n  const [ref, intersectionEntry, node] = useIntersect(\n    {\n      root: boundingRef?.current || null,\n      rootMargin: '-145px 0px 0px 100px',\n      threshold: 0,\n    },\n    staticPositioning,\n  )\n\n  useEffect(() => {\n    let timerID: NodeJS.Timeout\n\n    // do not use the delay on transition-out\n    if (delay && showFromProps) {\n      timerID = setTimeout(() => {\n        setShow(showFromProps)\n      }, delay)\n    } else {\n      setShow(showFromProps)\n    }\n\n    return () => {\n      if (timerID) {\n        clearTimeout(timerID)\n      }\n    }\n  }, [showFromProps, delay])\n\n  useEffect(() => {\n    if (staticPositioning) {\n      return\n    }\n    setPosition(intersectionEntry?.isIntersecting ? 'top' : 'bottom')\n  }, [intersectionEntry, staticPositioning])\n\n  // Keep a horizontally-centered tooltip (top/bottom) inside its boundary by\n  // shifting it inward by exactly the amount it would overflow. The hidden\n  // measuring aside (`node`) provides the natural, unshifted geometry.\n  const computeShift = useCallback(() => {\n    const usesHorizontalCenter =\n      (positionFromProps || position) === 'top' || (positionFromProps || position) === 'bottom'\n\n    if (staticPositioning || !node || !usesHorizontalCenter) {\n      setShiftX(0)\n      setMaxWidth(null)\n      return\n    }\n\n    const rect = node.getBoundingClientRect()\n    const boundary =\n      boundingRef?.current?.getBoundingClientRect() ?? getClipBoundary(node) ?? undefined\n    const leftEdge = (boundary?.left ?? 0) + EDGE_GUTTER\n    const rightEdge = (boundary?.right ?? window.innerWidth) - EDGE_GUTTER\n    const available = rightEdge - leftEdge\n\n    // When the tooltip can't fit even at full boundary width, cap it so it wraps.\n    const nextMaxWidth = rect.width > available ? available : null\n    setMaxWidth(nextMaxWidth)\n\n    // Compute the shift against the clamped box, kept centered on the anchor.\n    const center = rect.left + rect.width / 2\n    const effectiveWidth = nextMaxWidth ?? rect.width\n    const effectiveLeft = center - effectiveWidth / 2\n    const effectiveRight = center + effectiveWidth / 2\n\n    let shift = 0\n    if (effectiveRight > rightEdge) {\n      shift = rightEdge - effectiveRight\n    }\n    if (effectiveLeft + shift < leftEdge) {\n      shift = leftEdge - effectiveLeft\n    }\n\n    setShiftX(shift)\n  }, [boundingRef, node, position, positionFromProps, staticPositioning])\n\n  useLayoutEffect(() => {\n    if (!show) {\n      return\n    }\n\n    computeShift()\n    window.addEventListener('resize', computeShift)\n\n    return () => {\n      window.removeEventListener('resize', computeShift)\n    }\n  }, [show, computeShift])\n\n  // The first aside is always on top. The purpose of that is that it can reliably be used for the interaction observer (as it's not moving around), to calculate the position of the actual tooltip.\n  return (\n    <React.Fragment>\n      {!staticPositioning && (\n        <aside\n          aria-hidden=\"true\"\n          className={['tooltip', className, `tooltip--caret-${alignCaret}`, 'tooltip--position-top']\n            .filter(Boolean)\n            .join(' ')}\n          ref={ref}\n          style={{ opacity: '0' }}\n        >\n          <TooltipCaret />\n          <div className=\"tooltip-content\">{children}</div>\n        </aside>\n      )}\n      <aside\n        className={[\n          'tooltip',\n          className,\n          show && 'tooltip--show',\n          maxWidth && 'tooltip--wrap',\n          `tooltip--caret-${alignCaret}`,\n          `tooltip--position-${positionFromProps || position}`,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        style={\n          {\n            ...(maxWidth ? { '--tooltip-max-width': `${maxWidth}px` } : {}),\n            ...(shiftX\n              ? {\n                  '--tooltip-caret-x': `${-shiftX}px`,\n                  '--tooltip-x': `calc(-50% + ${shiftX}px)`,\n                }\n              : {}),\n          } as React.CSSProperties\n        }\n      >\n        <TooltipCaret />\n        <div className=\"tooltip-content\">{children}</div>\n      </aside>\n    </React.Fragment>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/TrashBanner/index.css

@@ -0,0 +1,5 @@
+@layer payload-default {
+  .trash-banner {
+    margin-bottom: var(--spacer-3);
+  }
+}

package/dist/elements/TrashBanner/index.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import './index.scss';
+import './index.css';
 export declare const TrashBanner: React.FC;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/TrashBanner/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAiB/B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/TrashBanner/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAe/B,CAAA"}

package/dist/elements/TrashBanner/index.js

@@ -1,13 +1,14 @@
 'use client';
 
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
 import React from 'react';
 import { TrashIcon } from '../../icons/Trash/index.js';
 import { useConfig } from '../../providers/Config/index.js';
 import { useDocumentInfo } from '../../providers/DocumentInfo/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
-import './index.scss';
+import { Banner } from '../Banner/index.js';
+import './index.css';
 const baseClass = 'trash-banner';
 export const TrashBanner = () => {
   const {
@@ -25,13 +26,13 @@ export const TrashBanner = () => {
   const {
     i18n
   } = useTranslation();
-  return _jsxs("div", {
+  return _jsx(Banner, {
     className: baseClass,
-    children: [_jsx(TrashIcon, {}), _jsx("p", {
-      children: i18n.t("general:documentIsTrashed", {
-        label: `${getTranslation(labels?.singular, i18n)}`
-      })
-    })]
+    icon: _jsx(TrashIcon, {}),
+    type: "warning",
+    children: i18n.t("general:documentIsTrashed", {
+      label: `${getTranslation(labels?.singular, i18n)}`
+    })
   });
 };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["getTranslation","React","TrashIcon","useConfig","useDocumentInfo","useTranslation","baseClass","TrashBanner","getEntityConfig","collectionSlug","collectionConfig","labels","i18n","_jsxs","className","children","_jsx","t","label","singular"],"sources":["../../../src/elements/TrashBanner/index.tsx"],"sourcesContent":["'use client'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport { TrashIcon } from '../../icons/Trash/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'trash-banner'\n\nexport const TrashBanner: React.FC = () => {\n  const { getEntityConfig } = useConfig()\n  const { collectionSlug } = useDocumentInfo()\n  const collectionConfig = getEntityConfig({ collectionSlug })\n\n  const { labels } = collectionConfig\n  const { i18n } = useTranslation()\n  return (\n    <div className={baseClass}>\n      <TrashIcon />\n      <p>\n        {i18n.t('general:documentIsTrashed', {\n          label: `${getTranslation(labels?.singular, i18n)}`,\n        })}\n      </p>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AAEA,SAASA,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAElB,SAASC,SAAS,QAAQ;AAC1B,SAASC,SAAS,QAAQ;AAC1B,SAASC,eAAe,QAAQ;AAChC,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,WAAA,GAAwBA,CAAA;EACnC;IAAAC;EAAA,IAA4BL,SAAA;EAC5B;IAAAM;EAAA,IAA2BL,eAAA;EAC3B,MAAAM,gBAAA,GAAyBF,eAAA;IAAAC;EAAA,CAAiC;EAE1D;IAAAE;EAAA,IAAmBD,gBAAA;EACnB;IAAAE;EAAA,IAAiBP,cAAA;EAAA,OAEfQ,KAAA,CAAC;IAAAC,SAAA,EAAAR,SAAA;IAAAS,QAAA,GACCC,IAAA,CAAAd,SAAA,IAAC,GACDc,IAAA,CAAC;MAAAD,QAAA,EACEH,IAAA,CAAAK,CAAA,CAAO;QAAAC,KAAA,EACC,GAAGlB,cAAA,CAAeW,MAAA,EAAAQ,QAAA,EAAkBP,IAAA;MAAO,CACpD;IAAA,C;;CAIR","ignoreList":[]}
+{"version":3,"file":"index.js","names":["getTranslation","React","TrashIcon","useConfig","useDocumentInfo","useTranslation","Banner","baseClass","TrashBanner","getEntityConfig","collectionSlug","collectionConfig","labels","i18n","_jsx","className","icon","type","children","t","label","singular"],"sources":["../../../src/elements/TrashBanner/index.tsx"],"sourcesContent":["'use client'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport { TrashIcon } from '../../icons/Trash/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Banner } from '../Banner/index.js'\nimport './index.css'\n\nconst baseClass = 'trash-banner'\n\nexport const TrashBanner: React.FC = () => {\n  const { getEntityConfig } = useConfig()\n  const { collectionSlug } = useDocumentInfo()\n  const collectionConfig = getEntityConfig({ collectionSlug })\n\n  const { labels } = collectionConfig\n  const { i18n } = useTranslation()\n\n  return (\n    <Banner className={baseClass} icon={<TrashIcon />} type=\"warning\">\n      {i18n.t('general:documentIsTrashed', {\n        label: `${getTranslation(labels?.singular, i18n)}`,\n      })}\n    </Banner>\n  )\n}\n"],"mappings":"AAAA;;;AAEA,SAASA,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAElB,SAASC,SAAS,QAAQ;AAC1B,SAASC,SAAS,QAAQ;AAC1B,SAASC,eAAe,QAAQ;AAChC,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,WAAA,GAAwBA,CAAA;EACnC;IAAAC;EAAA,IAA4BN,SAAA;EAC5B;IAAAO;EAAA,IAA2BN,eAAA;EAC3B,MAAAO,gBAAA,GAAyBF,eAAA;IAAAC;EAAA,CAAiC;EAE1D;IAAAE;EAAA,IAAmBD,gBAAA;EACnB;IAAAE;EAAA,IAAiBR,cAAA;EAAA,OAGfS,IAAA,CAAAR,MAAA;IAAAS,SAAA,EAAAR,SAAA;IAAAS,IAAA,EAAoCF,IAAA,CAAAZ,SAAA,IAAC;IAAAe,IAAA,EAAmB;IAAAC,QAAA,EACrDL,IAAA,CAAAM,CAAA,CAAO;MAAAC,KAAA,EACC,GAAGpB,cAAA,CAAeY,MAAA,EAAAS,QAAA,EAAkBR,IAAA;IAAO,CACpD;EAAA,C;CAGN","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/UnpublishButton/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAA;AAMzD,OAAO,KAA2C,MAAM,OAAO,CAAA;AAY/D,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EAAE,SAAS,GACjB,GAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,0BAA+B,qBAuMtD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/UnpublishButton/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAA;AAMzD,OAAO,KAAgC,MAAM,OAAO,CAAA;AAWpD,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EAAE,SAAS,GACjB,GAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,0BAA+B,qBA8LtD"}

package/dist/elements/UnpublishButton/index.js

@@ -3,9 +3,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useModal } from '@faceless-ui/modal';
 import { getTranslation } from '@payloadcms/translations';
-import { formatAdminURL } from 'payload/shared';
+import { formatAdminURL, hasLocalizeStatusEnabled } from 'payload/shared';
 import * as qs from 'qs-esm';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { toast } from 'sonner';
 import { useForm } from '../../forms/Form/context.js';
 import { useConfig } from '../../providers/Config/index.js';
@@ -13,7 +13,6 @@ import { useDocumentInfo } from '../../providers/DocumentInfo/index.js';
 import { useLocale } from '../../providers/Locale/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { requests } from '../../utilities/api.js';
-import { traverseForLocalizedFields } from '../../utilities/traverseForLocalizedFields.js';
 import { ConfirmationModal } from '../ConfirmationModal/index.js';
 import { PopupList } from '../Popup/index.js';
 export function UnpublishButton({
@@ -47,7 +46,6 @@ export function UnpublishButton({
     label: localeLabel
   } = useLocale();
   const [unpublishAll, setUnpublishAll] = useState(false);
-  const [hasLocalizedFields, setHasLocalizedFields] = useState(false);
   const unPublishModalSlug = `confirm-un-publish-${id}`;
   const {
     routes: {
@@ -142,23 +140,17 @@ export function UnpublishButton({
       toast.error(t('error:unPublishingDocument'));
     });
   }, [dataFromProps, resetForm, collectionSlug, globalSlug, serverURL, api, localeCode, id, i18n.language, incrementVersionCount, setHasPublishedDoc, setMostRecentVersionIsAutosaved, setUnpublishedVersionCount, t]);
-  useEffect(() => {
-    const hasLocalizedField = traverseForLocalizedFields(entityConfig?.fields);
-    setHasLocalizedFields(hasLocalizedField);
-  }, [entityConfig?.fields]);
   const drafts = entityConfig?.versions?.drafts;
   const hasDraftsEnabled = typeof drafts === 'object' && drafts !== null;
   const canUnpublish = React.useMemo(() => {
     return hasDraftsEnabled && hasPublishPermission && hasPublishedDoc && !isTrashed;
   }, [hasPublishPermission, hasPublishedDoc, isTrashed, hasDraftsEnabled]);
   const canUnpublishCurrentLocale = React.useMemo(() => {
-    if (!canUnpublish || !hasLocalizedFields) {
+    if (!canUnpublish) {
       return false;
     }
-    const isLocalizeStatusEnabled = drafts && drafts.localizeStatus === true;
-    const isExperimentalEnabled = config.experimental?.localizeStatus === true;
-    return isLocalizeStatusEnabled && isExperimentalEnabled;
-  }, [canUnpublish, hasLocalizedFields, drafts, config.experimental?.localizeStatus]);
+    return Boolean(entityConfig && hasLocalizeStatusEnabled(entityConfig));
+  }, [canUnpublish, entityConfig]);
   const label = getTranslation(localeLabel, i18n);
   if (!canUnpublish) {
     return null;