@payloadcms/ui 4.0.0-internal.a0ef1b8 → 4.0.0-internal.bc5cf8c

package/dist/elements/TimezonePicker/index.css

@@ -6,6 +6,12 @@
     align-items: center;
     position: relative;
 
+    --field-min-height: var(--text-body-medium-line-height);
+
+    .shimmer-effect {
+      max-width: calc(2 * var(--spacer-4));
+    }
+
     .timezone-picker__label {
       color: var(--color-text-secondary);
       flex-shrink: 0;
@@ -25,30 +31,6 @@
       display: inline-flex;
       position: static;
 
-      .rs__menu {
-        overflow: hidden;
-        border-radius: var(--radius-large);
-        background: var(--popup-bg-dark, var(--color-bg-menu));
-        color: var(--popup-item-color-dark, var(--color-text-ontooltip));
-        padding: var(--spacer-2);
-        min-width: 280px;
-        max-height: 280px;
-      }
-
-      .rs__menu-list {
-        max-height: calc(var(--spacer-6) * 5);
-        overflow-y: auto;
-      }
-
-      .rs__option {
-        padding: var(--spacer-1) var(--spacer-2);
-        border-radius: var(--button-radius);
-        cursor: pointer;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
       .rs__option--is-focused,
       .rs__option--is-selected {
         /* Colors handled by inline styles via react-select styles prop */
@@ -163,4 +145,56 @@
       }
     }
   }
+
+  .timezone-picker__menu {
+    border-radius: var(--radius-large);
+    background: var(--color-bg-menu);
+    color: var(--color-text);
+    padding-top: var(--spacer-2);
+    min-width: 280px;
+
+    .rs__option {
+      padding: var(--spacer-1) var(--spacer-2);
+      border-radius: var(--button-radius);
+      cursor: pointer;
+    }
+
+    .timezone-picker__option-check {
+      opacity: 0;
+      flex-shrink: 0;
+    }
+
+    .timezone-picker__option-label {
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .rs__option--is-focused {
+      background-color: var(--popup-item-bg-hover, var(--color-bg-selected-strong));
+      color: var(--popup-item-color-hover, var(--color-text-onselected-strong));
+    }
+
+    .rs__option--is-selected {
+      background-color: transparent;
+      color: var(--popup-item-color-selected, var(--popup-item-color, var(--color-text)));
+
+      .timezone-picker__option-check {
+        opacity: 1;
+      }
+    }
+
+    .rs__option--is-selected.rs__option--is-focused {
+      background-color: var(--popup-item-bg-hover, var(--color-bg-selected-strong));
+      color: var(--popup-item-color-hover, var(--color-text-onselected-strong));
+    }
+  }
+
+  .timezone-picker__menu-list {
+    max-height: calc(var(--spacer-6) * 5);
+    padding-inline: var(--spacer-2);
+    padding-bottom: var(--spacer-2);
+  }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/TimezonePicker/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAOvC,OAAO,aAAa,CAAA;AAqDpB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAsE1C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/TimezonePicker/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAa9B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAQvC,OAAO,aAAa,CAAA;AAgEpB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAuE1C,CAAA"}

package/dist/elements/TimezonePicker/index.js

@@ -2,6 +2,8 @@
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
+import { components as rsComponents } from 'react-select';
+import { CheckIcon } from '../../icons/Check/index.js';
 import { ChevronIcon } from '../../icons/Chevron/index.js';
 import { CircledXIcon } from '../../icons/CircledX/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
@@ -55,6 +57,21 @@ const SmallClearIndicator = props => {
     })
   });
 };
+const TimezoneOption = props => {
+  const {
+    children
+  } = props;
+  return /*#__PURE__*/_jsxs(rsComponents.Option, {
+    ...props,
+    children: [/*#__PURE__*/_jsx(CheckIcon, {
+      className: "timezone-picker__option-check",
+      size: 16
+    }), /*#__PURE__*/_jsx("span", {
+      className: "timezone-picker__option-label",
+      children: children
+    })]
+  });
+};
 export const TimezonePicker = props => {
   const {
     id,
@@ -85,9 +102,17 @@ export const TimezonePicker = props => {
       })]
     }), /*#__PURE__*/_jsx(ReactSelect, {
       className: "timezone-picker",
+      classNames: {
+        menu: () => 'timezone-picker__menu',
+        menuList: () => 'timezone-picker__menu-list'
+      },
       components: {
         ClearIndicator: SmallClearIndicator,
-        DropdownIndicator: SmallDropdownIndicator
+        DropdownIndicator: SmallDropdownIndicator,
+        Option: TimezoneOption
+      },
+      customProps: {
+        menuPortalTheme: 'dark'
       },
       disabled: readOnly,
       inputId: id,
@@ -105,10 +130,12 @@ export const TimezonePicker = props => {
           ...base,
           flexWrap: 'nowrap'
         }),
-        option: (base_0, state) => ({
+        option: base_0 => ({
           ...base_0,
-          backgroundColor: state.isSelected ? 'var(--popup-item-bg-selected-dark, var(--color-bg-selected))' : state.isFocused ? 'var(--popup-item-bg-hover-dark, var(--color-bg-selected-strong))' : 'transparent',
-          color: state.isFocused || state.isSelected ? 'var(--popup-item-color-hover-dark, var(--color-text-onselected-strong))' : 'var(--popup-item-color-dark, var(--color-text-ontooltip))'
+          alignItems: 'center',
+          display: 'flex',
+          gap: 'var(--spacer-1)',
+          minWidth: 0
         })
       },
       value: selectedTimezone

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useMemo","ChevronIcon","CircledXIcon","useTranslation","ReactSelect","formatOptions","SmallDropdownIndicator","props","innerProps","ref","restInnerProps","_jsx","className","onKeyDown","e","key","type","size","SmallClearIndicator","clearValue","stopPropagation","role","tabIndex","TimezonePicker","id","onChange","onChangeFromProps","options","optionsFromProps","readOnly","readOnlyFromProps","required","selectedTimezone","selectedTimezoneFromProps","t","find","value","Boolean","length","_jsxs","components","ClearIndicator","DropdownIndicator","disabled","inputId","isClearable","isCreatable","val","placeholder","styles","control","base","flexWrap","option","state","backgroundColor","isSelected","isFocused","color"],"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 { ClearIndicatorProps, DropdownIndicatorProps, StylesConfig } from 'react-select'\n\nimport { useMemo } from 'react'\n\nimport type { Option as OptionType } from '../ReactSelect/types.js'\nimport type { Props } from './types.js'\n\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  } = props\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\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        components={{\n          ClearIndicator: SmallClearIndicator,\n          DropdownIndicator: SmallDropdownIndicator,\n        }}\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          {\n            control: (base) => ({\n              ...base,\n              flexWrap: 'nowrap',\n            }),\n            option: (base, state) => ({\n              ...base,\n              backgroundColor: state.isSelected\n                ? 'var(--popup-item-bg-selected-dark, var(--color-bg-selected))'\n                : state.isFocused\n                  ? 'var(--popup-item-bg-hover-dark, var(--color-bg-selected-strong))'\n                  : 'transparent',\n              color:\n                state.isFocused || state.isSelected\n                  ? 'var(--popup-item-color-hover-dark, var(--color-text-onselected-strong))'\n                  : 'var(--popup-item-color-dark, var(--color-text-ontooltip))',\n            }),\n          } as StylesConfig<OptionType>\n        }\n        value={selectedTimezone}\n      />\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["useMemo","components","rsComponents","CheckIcon","ChevronIcon","CircledXIcon","useTranslation","ReactSelect","formatOptions","SmallDropdownIndicator","props","innerProps","ref","restInnerProps","_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  } = props\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          {\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          } as StylesConfig<OptionType>\n        }\n        value={selectedTimezone}\n      />\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AAYA,SAASA,OAAO,QAAQ;AACxB,SAASC,UAAA,IAAcC,YAAY,QAAQ;AAK3C,SAASC,SAAS,QAAQ;AAC1B,SAASC,WAAW,QAAQ;AAC5B,SAASC,YAAY,QAAQ;AAC7B,SAASC,cAAc,QAAQ;AAC/B,SAASC,WAAW,QAAQ;AAC5B,SAASC,aAAa,QAAQ;AAC9B,OAAO;AAEP,MAAMC,sBAAA,GAIDC,KAAA;EACH,MAAM;IACJC,UAAA,EAAY;MAAEC,GAAG;MAAE,GAAGC;IAAA;EAAgB,CACvC,GAAGH,KAAA;EAEJ,oBACEI,IAAA,CAAC;IACCC,SAAA,EAAU;IACVH,GAAA,EAAKA,GAAA;IACJ,GAAGC,cAAc;IAClBG,SAAA,EAAYC,CAAA;MACV,IAAIA,CAAA,CAAEC,GAAG,KAAK,SAAS;QACrBD,CAAA,CAAEC,GAAG,GAAG;MACV;IACF;IACAC,IAAA,EAAK;cAEL,aAAAL,IAAA,CAACV,WAAA;MAAYgB,IAAA,EAAM;;;AAGzB;AAEA,MAAMC,mBAAA,GAAwEX,KAAA;EAC5E,MAAM;IACJY,UAAU;IACVX,UAAA,EAAY;MAAEC,GAAG;MAAE,GAAGC;IAAA;EAAgB,CACvC,GAAGH,KAAA;EAEJ,oBACEI,IAAA,CAAC;IACCC,SAAA,EAAU;IACVH,GAAA,EAAK,OAAOA,GAAA,KAAQ,WAAW,OAAOA,GAAA;IACrC,GAAGC,cAAc;IAClBG,SAAA,EAAYC,CAAA;MACV,IAAIA,CAAA,CAAEC,GAAG,KAAK,SAAS;QACrBI,UAAA;QACAL,CAAA,CAAEM,eAAe;MACnB;IACF;IACAC,IAAA,EAAK;IACLC,QAAA,EAAU;cAEV,aAAAX,IAAA,CAACT,YAAA;MAAae,IAAA,EAAM;;;AAG1B;AAEA,MAAMM,cAAA,GAA4DhB,KAAA;EAChE,MAAM;IAAEiB;EAAQ,CAAE,GAAGjB,KAAA;EAErB,oBACEkB,KAAA,CAAC1B,YAAA,CAAa2B,MAAM;IAAE,GAAGnB,KAAK;4BAC5BI,IAAA,CAACX,SAAA;MAAUY,SAAA,EAAU;MAAgCK,IAAA,EAAM;qBAC3DN,IAAA,CAAC;MAAKC,SAAA,EAAU;gBAAiCY;;;AAGvD;AAEA,OAAO,MAAMG,cAAA,GAAmCpB,KAAA;EAC9C,MAAM;IACJqB,EAAE;IACFC,QAAA,EAAUC,iBAAiB;IAC3BC,OAAA,EAASC,gBAAgB;IACzBC,QAAA,EAAUC,iBAAiB;IAC3BC,QAAQ;IACRC,gBAAA,EAAkBC;EAAyB,CAC5C,GAAG9B,KAAA;EAEJ,MAAM;IAAE+B;EAAC,CAAE,GAAGnC,cAAA;EAEd,MAAM4B,OAAA,GAAU1B,aAAA,CAAc2B,gBAAA;EAE9B,MAAMI,gBAAA,GAAmBvC,OAAA,CAAQ;IAC/B,OAAOkC,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,oBACEjB,KAAA,CAAC;IAAIb,SAAA,EAAU;4BACba,KAAA,CAAC;MAAKb,SAAA,EAAU;iBACb0B,CAAA,CAAE,qBACFH,QAAA,iBAAYxB,IAAA,CAAC;QAAKC,SAAA,EAAU;kBAA4B;;qBAE3DD,IAAA,CAACP,WAAA;MACCQ,SAAA,EAAU;MACV+B,UAAA,EAAY;QACVC,IAAA,EAAMA,CAAA,KAAM;QACZC,QAAA,EAAUA,CAAA,KAAM;MAClB;MACA/C,UAAA,EAAY;QACVgD,cAAA,EAAgB5B,mBAAA;QAChB6B,iBAAA,EAAmBzC,sBAAA;QACnBoB,MAAA,EAAQH;MACV;MACAyB,WAAA,EAAa;QAAEC,eAAA,EAAiB;MAAO;MACvCC,QAAA,EAAUjB,QAAA;MACVkB,OAAA,EAASvB,EAAA;MACTwB,WAAA,EAAa,CAACjB,QAAA;MACdkB,WAAA,EAAa;MACbxB,QAAA,EAAWyB,GAAA;QACT,IAAIxB,iBAAA,EAAmB;UACrBA,iBAAA,CAAkBwB,GAAA,EAAKd,KAAA,IAAS;QAClC;MACF;MACAT,OAAA,EAASA,OAAA;MACTwB,WAAA,EAAajB,CAAA,CAAE;MACfkB,MAAA,EACE;QACEC,OAAA,EAAUC,IAAA,KAAU;UAClB,GAAGA,IAAI;UACPC,QAAA,EAAU;QACZ;QACAC,MAAA,EAASF,MAAA,KAAU;UACjB,GAAGA,MAAI;UACPG,UAAA,EAAY;UACZC,OAAA,EAAS;UACTC,GAAA,EAAK;UACLC,QAAA,EAAU;QACZ;MACF;MAEFxB,KAAA,EAAOJ;;;AAIf","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

@@ -5,12 +5,15 @@
     --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(--color-bg-tooltip);
     position: absolute;
     z-index: 3;
     left: 50%;
+    max-width: var(--tooltip-max-width);
     padding: var(--spacer-1);
     color: var(--color-text-ontooltip);
     font-family: var(--text-body-medium-font-family);
@@ -48,6 +51,11 @@
     }
   }
 
+  .tooltip--wrap {
+    white-space: normal;
+    overflow-wrap: break-word;
+  }
+
   .tooltip__caret {
     position: absolute;
     pointer-events: none;
@@ -87,7 +95,11 @@
 
   .tooltip--position-top {
     top: 0;
-    transform: translate3d(var(--tooltip-x), calc(-100% - var(--caret-height) - var(--caret-offset) + 1px), 0);
+    transform: translate3d(
+      var(--tooltip-x),
+      calc(-100% - var(--caret-height) - var(--caret-offset) + 1px),
+      0
+    );
 
     .tooltip__caret {
       --color-border: var(--ramp-grey-700);
@@ -95,13 +107,17 @@
     }
 
     &.tooltip--caret-center .tooltip__caret {
-      transform: translateX(-50%);
+      transform: translateX(calc(-50% + var(--tooltip-caret-x)));
     }
   }
 
   .tooltip--position-bottom {
     top: 100%;
-    transform: translate3d(-50%, calc(var(--caret-height) + var(--caret-offset) - 1px), 0);
+    transform: translate3d(
+      var(--tooltip-x),
+      calc(var(--caret-height) + var(--caret-offset) - 1px),
+      0
+    );
 
     .tooltip__caret {
       bottom: calc(100% - 0.5px);
@@ -109,7 +125,7 @@
     }
 
     &.tooltip--caret-center .tooltip__caret {
-      transform: translateX(-50%) rotate(180deg);
+      transform: translateX(calc(-50% + var(--tooltip-caret-x))) rotate(180deg);
     }
 
     &.tooltip--caret-right .tooltip__caret {

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,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,CAkFnC,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

@@ -2,9 +2,24 @@
 
 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();
@@ -53,7 +68,9 @@ export const Tooltip = props => {
   } = props;
   const [show, setShow] = React.useState(showFromProps);
   const [position, setPosition] = React.useState('top');
-  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
@@ -80,6 +97,48 @@ 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__*/_jsxs("aside", {
@@ -94,7 +153,16 @@ export const Tooltip = props => {
         children: children
       })]
     }), /*#__PURE__*/_jsxs("aside", {
-      className: ['tooltip', className, show && 'tooltip--show', `tooltip--caret-${alignCaret}`, `tooltip--position-${positionFromProps || position}`].filter(Boolean).join(' '),
+      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":["c","_c","React","useEffect","useIntersect","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","useState","setPosition","ref","intersectionEntry","root","current","rootMargin","threshold","timerID","setTimeout","clearTimeout","isIntersecting","Fragment","filter","Boolean","join","style","opacity"],"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' | '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\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          <TooltipCaret />\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      >\n        <TooltipCaret />\n        <div className=\"tooltip-content\">{children}</div>\n      </aside>\n    </React.Fragment>\n  )\n}\n"],"mappings":"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","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/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;