@payloadcms/ui 4.0.0-internal.d28e9fb → 4.0.0-internal.d3909a9

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useMemo","FieldLabel","useTranslation","ReactSelect","formatOptions","TimezonePicker","props","id","onChange","onChangeFromProps","options","optionsFromProps","readOnly","readOnlyFromProps","required","selectedTimezone","selectedTimezoneFromProps","t","find","value","Boolean","length","_jsxs","className","_jsx","htmlFor","label","unstyled","disabled","inputId","isClearable","isCreatable","val"],"sources":["../../../src/elements/TimezonePicker/index.tsx"],"sourcesContent":["'use client'\n\nimport type { OptionObject } from 'payload'\nimport type React from 'react'\n\nimport { useMemo } from 'react'\n\nimport type { Props } from './types.js'\n\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport './index.scss'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { ReactSelect } from '../ReactSelect/index.js'\nimport { formatOptions } from '../WhereBuilder/Condition/Select/formatOptions.js'\n\nexport const TimezonePicker: React.FC<Props> = (props) => {\n  const {\n    id,\n    onChange: onChangeFromProps,\n    options: optionsFromProps,\n    readOnly: readOnlyFromProps,\n    required,\n    selectedTimezone: selectedTimezoneFromProps,\n  } = props\n\n  const { t } = useTranslation()\n\n  const options = formatOptions(optionsFromProps)\n\n  const selectedTimezone = useMemo(() => {\n    return options.find((t) => {\n      const value = typeof t === 'string' ? t : t.value\n      return value === selectedTimezoneFromProps\n    })\n  }, [options, selectedTimezoneFromProps])\n\n  const readOnly = Boolean(readOnlyFromProps) || options.length === 1\n\n  return (\n    <div className=\"timezone-picker-wrapper\">\n      <FieldLabel\n        htmlFor={id}\n        label={`${t('general:timezone')} ${required ? '*' : ''}`}\n        required={required}\n        unstyled\n      />\n      <ReactSelect\n        className=\"timezone-picker\"\n        disabled={readOnly}\n        inputId={id}\n        isClearable={!required}\n        isCreatable={false}\n        onChange={(val: OptionObject) => {\n          if (onChangeFromProps) {\n            onChangeFromProps(val?.value || '')\n          }\n        }}\n        options={options}\n        value={selectedTimezone}\n      />\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AAKA,SAASA,OAAO,QAAQ;AAIxB,SAASC,UAAU,QAAQ;AAC3B,OAAO;AACP,SAASC,cAAc,QAAQ;AAC/B,SAASC,WAAW,QAAQ;AAC5B,SAASC,aAAa,QAAQ;AAE9B,OAAO,MAAMC,cAAA,GAAmCC,KAAA;EAC9C,MAAM;IACJC,EAAE;IACFC,QAAA,EAAUC,iBAAiB;IAC3BC,OAAA,EAASC,gBAAgB;IACzBC,QAAA,EAAUC,iBAAiB;IAC3BC,QAAQ;IACRC,gBAAA,EAAkBC;EAAyB,CAC5C,GAAGV,KAAA;EAEJ,MAAM;IAAEW;EAAC,CAAE,GAAGf,cAAA;EAEd,MAAMQ,OAAA,GAAUN,aAAA,CAAcO,gBAAA;EAE9B,MAAMI,gBAAA,GAAmBf,OAAA,CAAQ;IAC/B,OAAOU,OAAA,CAAQQ,IAAI,CAAED,GAAA;MACnB,MAAME,KAAA,GAAQ,OAAOF,GAAA,KAAM,WAAWA,GAAA,GAAIA,GAAA,CAAEE,KAAK;MACjD,OAAOA,KAAA,KAAUH,yBAAA;IACnB;EACF,GAAG,CAACN,OAAA,EAASM,yBAAA,CAA0B;EAEvC,MAAMJ,QAAA,GAAWQ,OAAA,CAAQP,iBAAA,KAAsBH,OAAA,CAAQW,MAAM,KAAK;EAElE,oBACEC,KAAA,CAAC;IAAIC,SAAA,EAAU;4BACbC,IAAA,CAACvB,UAAA;MACCwB,OAAA,EAASlB,EAAA;MACTmB,KAAA,EAAO,GAAGT,CAAA,CAAE,uBAAuBH,QAAA,GAAW,MAAM,IAAI;MACxDA,QAAA,EAAUA,QAAA;MACVa,QAAQ;qBAEVH,IAAA,CAACrB,WAAA;MACCoB,SAAA,EAAU;MACVK,QAAA,EAAUhB,QAAA;MACViB,OAAA,EAAStB,EAAA;MACTuB,WAAA,EAAa,CAAChB,QAAA;MACdiB,WAAA,EAAa;MACbvB,QAAA,EAAWwB,GAAA;QACT,IAAIvB,iBAAA,EAAmB;UACrBA,iBAAA,CAAkBuB,GAAA,EAAKb,KAAA,IAAS;QAClC;MACF;MACAT,OAAA,EAASA,OAAA;MACTS,KAAA,EAAOJ;;;AAIf","ignoreList":[]}
+{"version":3,"file":"index.js","names":["useMemo","components","rsComponents","CheckIcon","ChevronIcon","CircledXIcon","useTranslation","ReactSelect","formatOptions","SmallDropdownIndicator","props","innerProps","ref","restInnerProps","isDisabled","_jsx","className","onKeyDown","e","key","type","size","SmallClearIndicator","clearValue","stopPropagation","role","tabIndex","TimezoneOption","children","_jsxs","Option","TimezonePicker","id","onChange","onChangeFromProps","options","optionsFromProps","readOnly","readOnlyFromProps","required","selectedTimezone","selectedTimezoneFromProps","t","find","value","Boolean","length","classNames","menu","menuList","ClearIndicator","DropdownIndicator","customProps","menuPortalTheme","disabled","inputId","isClearable","isCreatable","val","placeholder","styles","control","base","flexWrap","option","alignItems","display","gap","minWidth"],"sources":["../../../src/elements/TimezonePicker/index.tsx"],"sourcesContent":["'use client'\n\nimport type { OptionObject } from 'payload'\nimport type React from 'react'\nimport type { JSX } from 'react'\nimport type {\n  ClearIndicatorProps,\n  DropdownIndicatorProps,\n  OptionProps,\n  StylesConfig,\n} from 'react-select'\n\nimport { useMemo } from 'react'\nimport { components as rsComponents } from 'react-select'\n\nimport type { Option as OptionType } from '../ReactSelect/types.js'\nimport type { Props } from './types.js'\n\nimport { CheckIcon } from '../../icons/Check/index.js'\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { CircledXIcon } from '../../icons/CircledX/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { ReactSelect } from '../ReactSelect/index.js'\nimport { formatOptions } from '../WhereBuilder/Condition/Select/formatOptions.js'\nimport './index.css'\n\nconst SmallDropdownIndicator: React.FC<\n  {\n    innerProps: JSX.IntrinsicElements['button']\n  } & DropdownIndicatorProps<OptionType, true>\n> = (props) => {\n  const {\n    innerProps: { ref, ...restInnerProps },\n    isDisabled,\n  } = props\n\n  if (isDisabled) {\n    return null\n  }\n\n  return (\n    <button\n      className=\"timezone-picker__dropdown-indicator\"\n      ref={ref}\n      {...restInnerProps}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter') {\n          e.key = ' '\n        }\n      }}\n      type=\"button\"\n    >\n      <ChevronIcon size={16} />\n    </button>\n  )\n}\n\nconst SmallClearIndicator: React.FC<ClearIndicatorProps<OptionType, true>> = (props) => {\n  const {\n    clearValue,\n    innerProps: { ref, ...restInnerProps },\n  } = props\n\n  return (\n    <div\n      className=\"timezone-picker__clear-indicator\"\n      ref={typeof ref === 'string' ? null : ref}\n      {...restInnerProps}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter') {\n          clearValue()\n          e.stopPropagation()\n        }\n      }}\n      role=\"button\"\n      tabIndex={0}\n    >\n      <CircledXIcon size={24} />\n    </div>\n  )\n}\n\nconst TimezoneOption: React.FC<OptionProps<OptionType, false>> = (props) => {\n  const { children } = props\n\n  return (\n    <rsComponents.Option {...props}>\n      <CheckIcon className=\"timezone-picker__option-check\" size={16} />\n      <span className=\"timezone-picker__option-label\">{children}</span>\n    </rsComponents.Option>\n  )\n}\n\nexport const TimezonePicker: React.FC<Props> = (props) => {\n  const {\n    id,\n    onChange: onChangeFromProps,\n    options: optionsFromProps,\n    readOnly: readOnlyFromProps,\n    required,\n    selectedTimezone: selectedTimezoneFromProps,\n  } = props\n\n  const { t } = useTranslation()\n\n  const options = formatOptions(optionsFromProps)\n\n  const selectedTimezone = useMemo(() => {\n    return options.find((t) => {\n      const value = typeof t === 'string' ? t : t.value\n      return value === selectedTimezoneFromProps\n    })\n  }, [options, selectedTimezoneFromProps])\n\n  const readOnly = Boolean(readOnlyFromProps) || options.length === 1\n\n  return (\n    <div className=\"timezone-picker-wrapper\">\n      <span className=\"timezone-picker__label\">\n        {t('general:timezone')}\n        {required && <span className=\"timezone-picker__required\">*</span>}\n      </span>\n      <ReactSelect\n        className=\"timezone-picker\"\n        classNames={{\n          menu: () => 'timezone-picker__menu',\n          menuList: () => 'timezone-picker__menu-list',\n        }}\n        components={{\n          ClearIndicator: SmallClearIndicator,\n          DropdownIndicator: SmallDropdownIndicator,\n          Option: TimezoneOption,\n        }}\n        customProps={{ menuPortalTheme: 'dark' }}\n        disabled={readOnly}\n        inputId={id}\n        isClearable={!required}\n        isCreatable={false}\n        onChange={(val: OptionObject) => {\n          if (onChangeFromProps) {\n            onChangeFromProps(val?.value || '')\n          }\n        }}\n        options={options}\n        placeholder={t('general:none')}\n        styles={{\n          control: (base) => ({\n            ...base,\n            flexWrap: 'nowrap',\n          }),\n          option: (base) => ({\n            ...base,\n            alignItems: 'center',\n            display: 'flex',\n            gap: 'var(--spacer-1)',\n            minWidth: 0,\n          }),\n        }}\n        value={selectedTimezone}\n      />\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Toasts/fieldErrors.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import './index.css';
 export declare function createErrorsFromMessage(message: string): {
     errors?: string[];
     message: string;

package/dist/elements/Toasts/fieldErrors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fieldErrors.d.ts","sourceRoot":"","sources":["../../../src/elements/Toasts/fieldErrors.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AA6BzB,wBAAgB,uBAAuB,CAAC,OAAO,EAAE,MAAM,GAAG;IACxD,MAAM,CAAC,EAAE,MAAM,EAAE,CAAA;IACjB,OAAO,EAAE,MAAM,CAAA;CAChB,CAwBA;AAED,wBAAgB,gBAAgB,CAAC,EAAE,YAAY,EAAE;;CAAA,qBAmBhD"}
+{"version":3,"file":"fieldErrors.d.ts","sourceRoot":"","sources":["../../../src/elements/Toasts/fieldErrors.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,aAAa,CAAA;AA6BpB,wBAAgB,uBAAuB,CAAC,OAAO,EAAE,MAAM,GAAG;IACxD,MAAM,CAAC,EAAE,MAAM,EAAE,CAAA;IACjB,OAAO,EAAE,MAAM,CAAA;CAChB,CAwBA;AAED,wBAAgB,gBAAgB,CAAC,EAAE,YAAY,EAAE;;CAAA,qBA4BhD"}

package/dist/elements/Toasts/fieldErrors.js

@@ -1,8 +1,10 @@
 'use client';
 
 import { c as _c } from "react/compiler-runtime";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from 'react';
+import { WarningIcon } from '../../icons/Warning/index.js';
+import './index.css';
 function groupSimilarErrors(items) {
   const result = [];
   for (const item of items) {
@@ -66,14 +68,28 @@ export function FieldErrorsToast(t0) {
   } = t2;
   let t3;
   if ($[2] !== errors || $[3] !== message) {
-    t3 = _jsxs("div", {
-      children: [message, Array.isArray(errors) && errors.length > 0 ? errors.length === 1 ? _jsx("span", {
-        "data-testid": "field-error",
-        children: errors[0]
-      }) : _jsx("ul", {
-        "data-testid": "field-errors",
-        children: errors.map(_temp)
-      }) : null]
+    t3 = _jsxs(_Fragment, {
+      children: [_jsx("div", {
+        className: "toast-icon",
+        children: _jsx(WarningIcon, {
+          size: 24
+        })
+      }), _jsx("div", {
+        className: "toast-content",
+        "data-testid": "field-errors-toast",
+        children: _jsxs("div", {
+          className: "toast-title",
+          children: [message, Array.isArray(errors) && errors.length > 0 ? errors.length === 1 ? _jsx("span", {
+            className: "field-error",
+            "data-testid": "field-error",
+            children: errors[0]
+          }) : _jsx("ul", {
+            className: "field-errors",
+            "data-testid": "field-errors",
+            children: errors.map(_temp)
+          }) : null]
+        })
+      })]
     });
     $[2] = errors;
     $[3] = message;

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%;
-    padding: var(--spacer-1);
-    color: var(--text-inverse-oninverse);
-    font-family: var(--text-body-medium-font-family);
+    background-color: var(--color-bg-tooltip);
+    max-width: var(--tooltip-max-width);
+    padding-block: var(--spacer-1);
+    padding-inline: var(--spacer-2);
+    color: var(--color-text-ontooltip);
     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);
       }
     }
 
@@ -53,53 +54,97 @@
       width: 100%;
     }
 
+    /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
     @media (max-width: 768px) {
       display: none;
     }
   }
 
+  .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);
+      /* stylelint-disable-next-line plugin/no-subpixel-values -- TODO: pre-existing; revisit this sub-pixel value */
+      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 {
+      /* stylelint-disable-next-line plugin/no-subpixel-values -- TODO: pre-existing; revisit this sub-pixel value */
+      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 {
+      /* stylelint-disable-next-line plugin/no-subpixel-values -- TODO: pre-existing; revisit this sub-pixel value */
+      top: calc(50% + 0.5px);
+      /* stylelint-disable-next-line plugin/no-subpixel-values -- TODO: pre-existing; revisit this sub-pixel value */
+      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 {
+      /* stylelint-disable-next-line plugin/no-subpixel-values -- TODO: pre-existing; revisit this sub-pixel value */
+      top: calc(50% + 0.5px);
+      left: unset;
+      /* stylelint-disable-next-line plugin/no-subpixel-values -- TODO: pre-existing; revisit this sub-pixel value */
+      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>;
+    'aria-hidden'?: boolean;
     children: React.ReactNode;
     className?: string;
     delay?: number;
-    position?: 'bottom' | 'top';
+    id?: string;
+    portal?: boolean;
+    position?: Side;
+    role?: 'alert' | 'tooltip';
     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
+     * the `portal` setting. @default false
      */
     staticPositioning?: boolean;
+    tabIndex?: number;
 };
 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,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,CAAC,EAAE,IAAI,CAAA;IACf,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAuCD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAsPnC,CAAA"}

package/dist/elements/Tooltip/index.js

@@ -1,28 +1,88 @@
 '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,
+    'aria-hidden': ariaHidden,
     children,
     className,
     delay = 500,
+    portal = true,
     position: positionFromProps,
+    role = 'tooltip',
     show: showFromProps = true,
-    staticPositioning = false
+    staticPositioning = false,
+    tabIndex
   } = 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 +99,149 @@ 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);
+    floatingElement.style.setProperty('--tooltip-x', `${x}px`);
+    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 (ariaHidden || role !== 'tooltip' || !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');
+      }
+    };
+  }, [ariaHidden, role, show, tooltipID]);
+  const content = isMounted ? /*#__PURE__*/_jsxs("aside", {
+    "aria-hidden": ariaHidden,
+    className: ['tooltip', className, show && 'tooltip--show', `tooltip--caret-${alignCaret}`, `tooltip--position-${placement}`].filter(Boolean).join(' '),
+    id: tooltipID,
+    ref: setFloatingElement,
+    role: role,
+    tabIndex: tabIndex,
+    children: [/*#__PURE__*/_jsx(TooltipCaret, {}), /*#__PURE__*/_jsx("div", {
+      className: "tooltip-content",
+      children: children
+    })]
+  }) : null;
   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", {
-        className: "tooltip-content",
-        children: children
-      })
-    })]
+        display: 'none'
+      }
+    }), portal && content ? /*#__PURE__*/createPortal(content, triggerMarkerRef.current?.closest('dialog, [role="dialog"]') ?? document.body) : content]
   });
 };
 //# sourceMappingURL=index.js.map