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

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,50 @@
 @layer payload-default {
   .tooltip {
-    --caret-size: 0.375rem;
+    --caret-width: 15px;
+    --caret-height: 7px;
+    --caret-offset: 4px;
+    --caret-border-color: var(--color-border);
+    --tooltip-caret-x: 0px;
+    --tooltip-caret-y: 0px;
+    --tooltip-max-width: none;
+
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: var(--z-portal-element);
+    pointer-events: none;
 
     opacity: 0;
-    background-color: var(--bg-inverse-default);
-    position: absolute;
-    z-index: 3;
-    left: 50%;
+    background-color: var(--color-bg-tooltip);
+    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;
+    &[data-wrap] {
+      white-space: normal;
+      overflow-wrap: break-word;
     }
 
     &.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,48 +59,85 @@
     }
   }
 
+  .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;
-    transition: opacity 0.2s ease-in-out;
     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);
+    .tooltip__caret {
+      --color-border: var(--ramp-grey-700);
+      top: calc(100% - 0.5px);
+    }
 
-    &::after {
-      bottom: 1px;
-      border-top: var(--caret-size) solid var(--bg-inverse-default);
+    &.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);
+    .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 {
+    .tooltip__caret {
+      top: calc(50% + 0.5px);
+      left: calc(100% - 0.5px);
+      transform: translateY(calc(1 * var(--caret-width) / 2 + var(--tooltip-caret-y)))
+        rotate(-90deg);
+      transform-origin: top left;
+    }
+  }
 
-    &::after {
-      bottom: calc(100% + var(--caret-size) - 1px);
-      border-bottom: var(--caret-size) solid var(--bg-inverse-default);
+  .tooltip--position-right {
+    .tooltip__caret {
+      top: calc(50% + 0.5px);
+      left: unset;
+      right: calc(100% - 0.5px);
+      transform: translateY(calc(1 * var(--caret-width) / 2 + var(--tooltip-caret-y))) rotate(90deg);
+      transform-origin: top right;
     }
   }
 }

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

@@ -1,17 +1,25 @@
 import React from 'react';
 import './index.css';
+type Side = 'bottom' | 'left' | 'right' | 'top';
 export type Props = {
     alignCaret?: 'center' | 'left' | 'right';
-    boundingRef?: React.RefObject<HTMLElement | null>;
     children: React.ReactNode;
     className?: string;
     delay?: number;
-    position?: 'bottom' | 'top';
+    /**
+     * Applied to the portaled tooltip element, so it can be located independent of its
+     * position in the DOM (e.g. by tests).
+     */
+    id?: string;
+    position?: Side;
     show?: boolean;
     /**
-     * If the tooltip position should not change depending on if the toolbar is outside the boundingRef. @default false
+     * Disables adaptive placement: the tooltip always renders on `position` (or its
+     * default) instead of flipping to whichever side has room. It does not affect
+     * portaling - every tooltip is portaled to `document.body` regardless. @default false
      */
     staticPositioning?: boolean;
 };
 export declare const Tooltip: React.FC<Props>;
+export {};
 //# sourceMappingURL=index.d.ts.map

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":"AAEA,OAAO,KAAoE,MAAM,OAAO,CAAA;AAGxF,OAAO,aAAa,CAAA;AAOpB,KAAK,IAAI,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,CAAA;AAE/C,MAAM,MAAM,KAAK,GAAG;IAClB,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,CAAC,EAAE,IAAI,CAAA;IACf,IAAI,CAAC,EAAE,OAAO,CAAA;IACd;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;CAC5B,CAAA;AAwCD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAyOnC,CAAA"}

package/dist/elements/Tooltip/index.js

@@ -1,13 +1,67 @@
 '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 { useIntersect } from '../../hooks/useIntersect.js';
+import { autoUpdate, computePosition, flip, hide, offset, shift, size } from '@floating-ui/dom';
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import './index.css';
+const EDGE_GUTTER = 4;
+const TOP_BOTTOM_OFFSET = 10;
+const LEFT_RIGHT_OFFSET = 11;
+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;
+};
+const isTriggerHidden = element => {
+  if (typeof element.checkVisibility === 'function') {
+    return !element.checkVisibility();
+  }
+  // Fallback for browsers without `checkVisibility`: an element collapsed by a
+  // `display: none` ancestor has no client rects.
+  return element.getClientRects().length === 0;
+};
+const toPlacement = (side, alignCaret) => {
+  if (side === 'left' || side === 'right' || alignCaret === 'center') {
+    return side;
+  }
+  return `${side}-${alignCaret === 'left' ? 'start' : 'end'}`;
+};
 export const Tooltip = props => {
   const {
+    id,
     alignCaret = 'center',
-    boundingRef,
     children,
     className,
     delay = 500,
@@ -15,14 +69,16 @@ export const Tooltip = props => {
     show: showFromProps = true,
     staticPositioning = false
   } = props;
-  const [show, setShow] = React.useState(showFromProps);
-  const [position, setPosition] = React.useState('top');
-  const getTitleAttribute = content => typeof content === 'string' ? content : '';
-  const [ref, intersectionEntry] = useIntersect({
-    root: boundingRef?.current || null,
-    rootMargin: '-145px 0px 0px 100px',
-    threshold: 0
-  }, staticPositioning);
+  const generatedID = React.useId();
+  const tooltipID = id || generatedID;
+  const [show, setShow] = useState(showFromProps);
+  const [isMounted, setIsMounted] = useState(false);
+  const [placement, setPlacement] = useState(positionFromProps || 'top');
+  // A hidden marker rendered where the tooltip used to live in the DOM, so its
+  // parent element can be used as the floating-ui reference for the portaled tooltip.
+  const triggerMarkerRef = useRef(null);
+  const floatingRef = useRef(null);
+  const updateTokenRef = useRef(0);
   useEffect(() => {
     let timerID;
     // do not use the delay on transition-out
@@ -39,33 +95,145 @@ export const Tooltip = props => {
       }
     };
   }, [showFromProps, delay]);
+  // Keep the tooltip mounted for the duration of its fade-out transition so the
+  // portal doesn't disappear abruptly when `show` flips back to false.
+  useEffect(() => {
+    if (show) {
+      setIsMounted(true);
+      return;
+    }
+    // Matches the `.tooltip--show` opacity transition duration.
+    const timeoutID = setTimeout(() => setIsMounted(false), 200);
+    return () => {
+      clearTimeout(timeoutID);
+    };
+  }, [show]);
+  const updatePosition = useCallback(async () => {
+    const trigger = triggerMarkerRef.current?.parentElement;
+    const floatingElement = floatingRef.current;
+    if (!trigger || !floatingElement) {
+      return;
+    }
+    const token = ++updateTokenRef.current;
+    const boundary = 'clippingAncestors';
+    const canFlip = !staticPositioning && !positionFromProps;
+    const {
+      middlewareData,
+      placement: resolvedPlacement,
+      x,
+      y
+    } = await computePosition(trigger, floatingElement, {
+      middleware: [offset(({
+        placement: currentPlacement
+      }) => currentPlacement.startsWith('left') || currentPlacement.startsWith('right') ? LEFT_RIGHT_OFFSET : TOP_BOTTOM_OFFSET), ...(canFlip ? [flip({
+        boundary,
+        padding: EDGE_GUTTER
+      })] : []), ...(staticPositioning ? [] : [shift({
+        boundary,
+        padding: EDGE_GUTTER
+      }), size({
+        apply({
+          availableWidth,
+          elements
+        }) {
+          const shouldWrap = elements.floating.scrollWidth > availableWidth;
+          elements.floating.toggleAttribute('data-wrap', shouldWrap);
+          elements.floating.style.setProperty('--tooltip-max-width', shouldWrap ? `${Math.floor(availableWidth)}px` : '');
+        },
+        boundary,
+        padding: EDGE_GUTTER
+      })]), hide({
+        boundary: 'clippingAncestors'
+      })],
+      placement: toPlacement(positionFromProps || 'top', alignCaret),
+      strategy: 'fixed'
+    });
+    // A newer call already applied a fresher position - discard this stale result.
+    if (token !== updateTokenRef.current) {
+      return;
+    }
+    const hidden = isTriggerHidden(trigger) || Boolean(middlewareData.hide?.referenceHidden);
+    Object.assign(floatingElement.style, {
+      left: `${x}px`,
+      top: `${y}px`,
+      visibility: hidden ? 'hidden' : ''
+    });
+    const resolvedSide = resolvedPlacement.split('-')[0];
+    const isHorizontalSide = resolvedSide === 'left' || resolvedSide === 'right';
+    const shiftX = !isHorizontalSide && alignCaret === 'center' ? middlewareData.shift?.x || 0 : 0;
+    const shiftY = isHorizontalSide ? middlewareData.shift?.y || 0 : 0;
+    floatingElement.style.setProperty('--tooltip-caret-x', shiftX ? `${-shiftX}px` : '0px');
+    floatingElement.style.setProperty('--tooltip-caret-y', shiftY ? `${-shiftY}px` : '0px');
+    setPlacement(resolvedSide);
+  }, [alignCaret, positionFromProps, staticPositioning]);
+  const setFloatingElement = useCallback(element => {
+    floatingRef.current = element;
+    void updatePosition();
+  }, [updatePosition]);
+  // While mounted, let floating-ui keep the portaled tooltip aligned to its trigger
+  // as the page scrolls, the trigger resizes or moves, or a hidden ancestor becomes
+  // visible again - instead of manually re-measuring on window scroll/resize alone.
+  useLayoutEffect(() => {
+    const trigger_0 = triggerMarkerRef.current?.parentElement;
+    const floatingElement_0 = floatingRef.current;
+    if (!isMounted || !trigger_0 || !floatingElement_0) {
+      return;
+    }
+    const cleanupAutoUpdate = autoUpdate(trigger_0, floatingElement_0, updatePosition, {
+      elementResize: 'ResizeObserver' in window
+    });
+    // autoUpdate's own layout-shift tracking gives up once the trigger's rect
+    // collapses to zero (e.g. behind a `display: none` ancestor), so it can't
+    // tell when the trigger becomes visible again. Watch for that separately.
+    const visibilityObserver = typeof IntersectionObserver === 'function' ? new IntersectionObserver(() => void updatePosition(), {
+      threshold: 0
+    }) : null;
+    visibilityObserver?.observe(trigger_0);
+    const visualViewport = window.visualViewport;
+    visualViewport?.addEventListener('resize', updatePosition);
+    visualViewport?.addEventListener('scroll', updatePosition);
+    return () => {
+      cleanupAutoUpdate();
+      visibilityObserver?.disconnect();
+      visualViewport?.removeEventListener('resize', updatePosition);
+      visualViewport?.removeEventListener('scroll', updatePosition);
+    };
+  }, [isMounted, updatePosition]);
   useEffect(() => {
-    if (staticPositioning) {
+    const trigger_1 = triggerMarkerRef.current?.parentElement;
+    if (!show || !trigger_1) {
       return;
     }
-    setPosition(intersectionEntry?.isIntersecting ? 'top' : 'bottom');
-  }, [intersectionEntry, staticPositioning]);
-  // 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.
+    const describedByIDs = trigger_1.getAttribute('aria-describedby')?.split(' ') || [];
+    if (!describedByIDs.includes(tooltipID)) {
+      trigger_1.setAttribute('aria-describedby', [...describedByIDs, tooltipID].join(' '));
+    }
+    return () => {
+      const remainingIDs = (trigger_1.getAttribute('aria-describedby')?.split(' ') || []).filter(describedByID => describedByID !== tooltipID);
+      if (remainingIDs.length) {
+        trigger_1.setAttribute('aria-describedby', remainingIDs.join(' '));
+      } else {
+        trigger_1.removeAttribute('aria-describedby');
+      }
+    };
+  }, [show, tooltipID]);
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [!staticPositioning && /*#__PURE__*/_jsx("aside", {
+    children: [/*#__PURE__*/_jsx("span", {
       "aria-hidden": "true",
-      className: ['tooltip', className, `tooltip--caret-${alignCaret}`, 'tooltip--position-top'].filter(Boolean).join(' '),
-      ref: ref,
+      ref: triggerMarkerRef,
       style: {
-        opacity: '0'
-      },
-      children: /*#__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", {
+        display: 'none'
+      }
+    }), isMounted && /*#__PURE__*/createPortal(/*#__PURE__*/_jsxs("aside", {
+      className: ['tooltip', className, show && 'tooltip--show', `tooltip--caret-${alignCaret}`, `tooltip--position-${placement}`].filter(Boolean).join(' '),
+      id: tooltipID,
+      ref: setFloatingElement,
+      role: "tooltip",
+      children: [/*#__PURE__*/_jsx(TooltipCaret, {}), /*#__PURE__*/_jsx("div", {
         className: "tooltip-content",
         children: children
-      })
-    })]
+      })]
+    }), document.body)]
   });
 };
 //# sourceMappingURL=index.js.map

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","autoUpdate","computePosition","flip","hide","offset","shift","size","React","useCallback","useEffect","useLayoutEffect","useRef","useState","createPortal","EDGE_GUTTER","TOP_BOTTOM_OFFSET","LEFT_RIGHT_OFFSET","TooltipCaret","$","clipId","useId","t0","_jsxs","className","height","viewBox","width","children","_jsx","id","x","y","clipPath","d","isTriggerHidden","element","checkVisibility","getClientRects","length","toPlacement","side","alignCaret","Tooltip","props","delay","position","positionFromProps","show","showFromProps","staticPositioning","generatedID","tooltipID","setShow","isMounted","setIsMounted","placement","setPlacement","triggerMarkerRef","floatingRef","updateTokenRef","timerID","setTimeout","clearTimeout","timeoutID","updatePosition","trigger","current","parentElement","floatingElement","token","boundary","canFlip","middlewareData","resolvedPlacement","middleware","currentPlacement","startsWith","padding","apply","availableWidth","elements","shouldWrap","floating","scrollWidth","toggleAttribute","style","setProperty","Math","floor","strategy","hidden","Boolean","referenceHidden","Object","assign","left","top","visibility","resolvedSide","split","isHorizontalSide","shiftX","shiftY","setFloatingElement","cleanupAutoUpdate","elementResize","window","visibilityObserver","IntersectionObserver","threshold","observe","visualViewport","addEventListener","disconnect","removeEventListener","describedByIDs","getAttribute","includes","setAttribute","join","remainingIDs","filter","describedByID","removeAttribute","Fragment","ref","display","role","document","body"],"sources":["../../../src/elements/Tooltip/index.tsx"],"sourcesContent":["'use client'\nimport { autoUpdate, computePosition, flip, hide, offset, shift, size } from '@floating-ui/dom'\nimport React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\n\nimport './index.css'\n\nconst EDGE_GUTTER = 4\n\nconst TOP_BOTTOM_OFFSET = 10\nconst LEFT_RIGHT_OFFSET = 11\n\ntype Side = 'bottom' | 'left' | 'right' | 'top'\n\nexport type Props = {\n  alignCaret?: 'center' | 'left' | 'right'\n  children: React.ReactNode\n  className?: string\n  delay?: number\n  /**\n   * Applied to the portaled tooltip element, so it can be located independent of its\n   * position in the DOM (e.g. by tests).\n   */\n  id?: string\n  position?: Side\n  show?: boolean\n  /**\n   * Disables adaptive placement: the tooltip always renders on `position` (or its\n   * default) instead of flipping to whichever side has room. It does not affect\n   * portaling - every tooltip is portaled to `document.body` regardless. @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\nconst isTriggerHidden = (element: Element): boolean => {\n  if (typeof element.checkVisibility === 'function') {\n    return !element.checkVisibility()\n  }\n\n  // Fallback for browsers without `checkVisibility`: an element collapsed by a\n  // `display: none` ancestor has no client rects.\n  return element.getClientRects().length === 0\n}\n\nconst toPlacement = (side: Side, alignCaret: 'center' | 'left' | 'right') => {\n  if (side === 'left' || side === 'right' || alignCaret === 'center') {\n    return side\n  }\n\n  return `${side}-${alignCaret === 'left' ? 'start' : 'end'}` as const\n}\n\nexport const Tooltip: React.FC<Props> = (props) => {\n  const {\n    id,\n    alignCaret = 'center',\n    children,\n    className,\n    delay = 500,\n    position: positionFromProps,\n    show: showFromProps = true,\n    staticPositioning = false,\n  } = props\n\n  const generatedID = React.useId()\n  const tooltipID = id || generatedID\n\n  const [show, setShow] = useState(showFromProps)\n  const [isMounted, setIsMounted] = useState(false)\n  const [placement, setPlacement] = useState<Side>(positionFromProps || 'top')\n\n  // A hidden marker rendered where the tooltip used to live in the DOM, so its\n  // parent element can be used as the floating-ui reference for the portaled tooltip.\n  const triggerMarkerRef = useRef<HTMLSpanElement>(null)\n  const floatingRef = useRef<HTMLDivElement | null>(null)\n\n  const updateTokenRef = useRef(0)\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  // Keep the tooltip mounted for the duration of its fade-out transition so the\n  // portal doesn't disappear abruptly when `show` flips back to false.\n  useEffect(() => {\n    if (show) {\n      setIsMounted(true)\n      return\n    }\n\n    // Matches the `.tooltip--show` opacity transition duration.\n    const timeoutID = setTimeout(() => setIsMounted(false), 200)\n\n    return () => {\n      clearTimeout(timeoutID)\n    }\n  }, [show])\n\n  const updatePosition = useCallback(async () => {\n    const trigger = triggerMarkerRef.current?.parentElement\n    const floatingElement = floatingRef.current\n\n    if (!trigger || !floatingElement) {\n      return\n    }\n\n    const token = ++updateTokenRef.current\n    const boundary = 'clippingAncestors'\n    const canFlip = !staticPositioning && !positionFromProps\n\n    const {\n      middlewareData,\n      placement: resolvedPlacement,\n      x,\n      y,\n    } = await computePosition(trigger, floatingElement, {\n      middleware: [\n        offset(({ placement: currentPlacement }) =>\n          currentPlacement.startsWith('left') || currentPlacement.startsWith('right')\n            ? LEFT_RIGHT_OFFSET\n            : TOP_BOTTOM_OFFSET,\n        ),\n        ...(canFlip ? [flip({ boundary, padding: EDGE_GUTTER })] : []),\n        ...(staticPositioning\n          ? []\n          : [\n              shift({ boundary, padding: EDGE_GUTTER }),\n              size({\n                apply({ availableWidth, elements }) {\n                  const shouldWrap = elements.floating.scrollWidth > availableWidth\n\n                  elements.floating.toggleAttribute('data-wrap', shouldWrap)\n                  elements.floating.style.setProperty(\n                    '--tooltip-max-width',\n                    shouldWrap ? `${Math.floor(availableWidth)}px` : '',\n                  )\n                },\n                boundary,\n                padding: EDGE_GUTTER,\n              }),\n            ]),\n        hide({ boundary: 'clippingAncestors' }),\n      ],\n      placement: toPlacement(positionFromProps || 'top', alignCaret),\n      strategy: 'fixed',\n    })\n\n    // A newer call already applied a fresher position - discard this stale result.\n    if (token !== updateTokenRef.current) {\n      return\n    }\n\n    const hidden = isTriggerHidden(trigger) || Boolean(middlewareData.hide?.referenceHidden)\n\n    Object.assign(floatingElement.style, {\n      left: `${x}px`,\n      top: `${y}px`,\n      visibility: hidden ? 'hidden' : '',\n    })\n\n    const resolvedSide = resolvedPlacement.split('-')[0] as Side\n    const isHorizontalSide = resolvedSide === 'left' || resolvedSide === 'right'\n\n    const shiftX = !isHorizontalSide && alignCaret === 'center' ? middlewareData.shift?.x || 0 : 0\n    const shiftY = isHorizontalSide ? middlewareData.shift?.y || 0 : 0\n\n    floatingElement.style.setProperty('--tooltip-caret-x', shiftX ? `${-shiftX}px` : '0px')\n    floatingElement.style.setProperty('--tooltip-caret-y', shiftY ? `${-shiftY}px` : '0px')\n\n    setPlacement(resolvedSide)\n  }, [alignCaret, positionFromProps, staticPositioning])\n\n  const setFloatingElement = useCallback(\n    (element: HTMLDivElement | null) => {\n      floatingRef.current = element\n      void updatePosition()\n    },\n    [updatePosition],\n  )\n\n  // While mounted, let floating-ui keep the portaled tooltip aligned to its trigger\n  // as the page scrolls, the trigger resizes or moves, or a hidden ancestor becomes\n  // visible again - instead of manually re-measuring on window scroll/resize alone.\n  useLayoutEffect(() => {\n    const trigger = triggerMarkerRef.current?.parentElement\n    const floatingElement = floatingRef.current\n\n    if (!isMounted || !trigger || !floatingElement) {\n      return\n    }\n\n    const cleanupAutoUpdate = autoUpdate(trigger, floatingElement, updatePosition, {\n      elementResize: 'ResizeObserver' in window,\n    })\n\n    // autoUpdate's own layout-shift tracking gives up once the trigger's rect\n    // collapses to zero (e.g. behind a `display: none` ancestor), so it can't\n    // tell when the trigger becomes visible again. Watch for that separately.\n    const visibilityObserver =\n      typeof IntersectionObserver === 'function'\n        ? new IntersectionObserver(() => void updatePosition(), { threshold: 0 })\n        : null\n\n    visibilityObserver?.observe(trigger)\n\n    const visualViewport = window.visualViewport\n\n    visualViewport?.addEventListener('resize', updatePosition)\n    visualViewport?.addEventListener('scroll', updatePosition)\n\n    return () => {\n      cleanupAutoUpdate()\n      visibilityObserver?.disconnect()\n      visualViewport?.removeEventListener('resize', updatePosition)\n      visualViewport?.removeEventListener('scroll', updatePosition)\n    }\n  }, [isMounted, updatePosition])\n\n  useEffect(() => {\n    const trigger = triggerMarkerRef.current?.parentElement\n\n    if (!show || !trigger) {\n      return\n    }\n\n    const describedByIDs = trigger.getAttribute('aria-describedby')?.split(' ') || []\n\n    if (!describedByIDs.includes(tooltipID)) {\n      trigger.setAttribute('aria-describedby', [...describedByIDs, tooltipID].join(' '))\n    }\n\n    return () => {\n      const remainingIDs = (trigger.getAttribute('aria-describedby')?.split(' ') || []).filter(\n        (describedByID) => describedByID !== tooltipID,\n      )\n\n      if (remainingIDs.length) {\n        trigger.setAttribute('aria-describedby', remainingIDs.join(' '))\n      } else {\n        trigger.removeAttribute('aria-describedby')\n      }\n    }\n  }, [show, tooltipID])\n\n  return (\n    <React.Fragment>\n      <span aria-hidden=\"true\" ref={triggerMarkerRef} style={{ display: 'none' }} />\n      {isMounted &&\n        createPortal(\n          <aside\n            className={[\n              'tooltip',\n              className,\n              show && 'tooltip--show',\n              `tooltip--caret-${alignCaret}`,\n              `tooltip--position-${placement}`,\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            id={tooltipID}\n            ref={setFloatingElement}\n            role=\"tooltip\"\n          >\n            <TooltipCaret />\n            <div className=\"tooltip-content\">{children}</div>\n          </aside>,\n          document.body,\n        )}\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