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

package/dist/elements/TableSection/index.css

@@ -15,11 +15,10 @@
   .table-section__heading {
     margin: 0;
     flex-grow: 1;
-    font-family: var(--text-body-large-strong-font-family);
-    font-size: var(--text-body-large-strong-font-size);
-    font-weight: var(--text-body-large-strong-font-weight);
-    line-height: var(--text-body-large-strong-line-height);
-    letter-spacing: var(--text-body-large-strong-letter-spacing);
+    font-size: var(--text-body-large-bold-font-size);
+    font-weight: var(--text-body-large-bold-font-weight);
+    line-height: var(--text-body-large-bold-line-height);
+    letter-spacing: var(--text-body-large-bold-letter-spacing);
   }
 
   .table-section__header .list-selection__actions button {
@@ -43,6 +42,7 @@
     display: block;
   }
 
+  /* 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) {
     .table-section__header {
       padding: 0 calc(var(--spacer-3) - var(--spacer-2));

package/dist/elements/Tabs/index.css

@@ -9,6 +9,7 @@
 
   .tabs__tabs {
     display: inline-flex;
+    gap: var(--spacer-3);
     min-width: 100%;
     vertical-align: bottom;
     position: relative;
@@ -24,14 +25,13 @@
     align-items: center;
     justify-content: center;
     gap: var(--spacer-1);
-    padding: var(--spacer-1) var(--spacer-2);
+    padding: var(--spacer-1) 0;
     margin: 0;
     margin-bottom: var(--spacer-2);
     cursor: pointer;
     position: relative;
     white-space: nowrap;
     flex-shrink: 0;
-    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);
@@ -42,8 +42,8 @@
   .tabs__tab-button:after {
     content: '';
     position: absolute;
-    left: var(--spacer-2);
-    right: var(--spacer-2);
+    left: 0;
+    right: 0;
     bottom: calc(-1 * var(--spacer-2) - 1px);
     height: 3px;
     background: var(--color-icon-brand);
@@ -66,7 +66,7 @@
   }
 
   .tabs__tab-button--active {
-    font-weight: var(--text-body-medium-strong-font-weight);
+    font-weight: var(--text-body-medium-bold-font-weight);
     color: var(--color-text);
   }
 
@@ -92,6 +92,7 @@
     background: var(--field-color-border-error);
   }
 
+  /* 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) {
     .tabs__tab-button {
       padding-bottom: var(--spacer-2);

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

@@ -3,7 +3,9 @@ import './index.css';
 export type TabsTab<TValue extends string = string> = {
     disabled?: boolean;
     hidden?: boolean;
+    id?: string;
     label: React.ReactNode;
+    panelID?: string;
     value: TValue;
 };
 export type TabsProps<TValue extends string = string> = {
@@ -25,8 +27,10 @@ export declare const TabButton: React.FC<{
     disabled?: boolean;
     hasError?: boolean;
     hidden?: boolean;
+    id?: string;
     isActive?: boolean;
     modifierClassName?: string;
     onClick: () => void;
+    panelID?: string;
 }>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Tabs/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,OAAO,CAAC,MAAM,SAAS,MAAM,GAAG,MAAM,IAAI;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,SAAS,CAAC,MAAM,SAAS,MAAM,GAAG,MAAM,IAAI;IACtD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC,EAAE,CAAA;IACvB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,eAAO,MAAM,IAAI,GAAI,MAAM,SAAS,MAAM,GAAG,MAAM,yCAKhD,SAAS,CAAC,MAAM,CAAC,sBAgBnB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,CAaA,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,CAiCA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Tabs/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,OAAO,CAAC,MAAM,SAAS,MAAM,GAAG,MAAM,IAAI;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,SAAS,CAAC,MAAM,SAAS,MAAM,GAAG,MAAM,IAAI;IACtD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC,EAAE,CAAA;IACvB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,eAAO,MAAM,IAAI,GAAI,MAAM,SAAS,MAAM,GAAG,MAAM,yCAKhD,SAAS,CAAC,MAAM,CAAC,sBAkBnB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,CA6CA,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAyCA,CAAA"}

package/dist/elements/Tabs/index.js

@@ -15,8 +15,10 @@ export const Tabs = ({
     children: tabs.map(tab => /*#__PURE__*/_jsx(TabButton, {
       disabled: tab.disabled,
       hidden: tab.hidden,
+      id: tab.id,
       isActive: tab.value === value,
       onClick: () => onChange(tab.value),
+      panelID: tab.panelID,
       children: tab.label
     }, tab.value))
   });
@@ -33,13 +35,30 @@ export const TabsList = ({
       className: [`${baseClass}__tabs-wrap`, tabsWrapClassName].filter(Boolean).join(' '),
       children: /*#__PURE__*/_jsx("div", {
         className: [`${baseClass}__tabs`, tabsClassName].filter(Boolean).join(' '),
+        onKeyDown: event => {
+          if (event.altKey || event.ctrlKey || event.metaKey || !['ArrowLeft', 'ArrowRight', 'End', 'Home'].includes(event.key)) {
+            return;
+          }
+          const tabs = Array.from(event.currentTarget.querySelectorAll('[role="tab"]')).filter(tab => !tab.disabled && tab.getClientRects().length > 0);
+          const index = tabs.indexOf(event.target);
+          if (index === -1) {
+            return;
+          }
+          event.preventDefault();
+          const isRTL = getComputedStyle(event.currentTarget).direction === 'rtl';
+          const direction = (event.key === 'ArrowRight' ? 1 : -1) * (isRTL ? -1 : 1);
+          const nextIndex = event.key === 'Home' ? 0 : event.key === 'End' ? tabs.length - 1 : (index + direction + tabs.length) % tabs.length;
+          tabs[nextIndex]?.focus();
+        },
         role: "tablist",
+        tabIndex: -1,
         children: children
       })
     })
   });
 };
 export const TabButton = ({
+  id,
   children,
   className,
   disabled,
@@ -47,14 +66,24 @@ export const TabButton = ({
   hidden,
   isActive,
   modifierClassName,
-  onClick
+  onClick,
+  panelID
 }) => {
   return /*#__PURE__*/_jsx("button", {
+    "aria-controls": panelID,
     "aria-selected": isActive,
     className: [`${baseClass}__tab-button`, className, hasError && `${baseClass}__tab-button--has-error`, hasError && modifierClassName && `${modifierClassName}--has-error`, isActive && `${baseClass}__tab-button--active`, isActive && modifierClassName && `${modifierClassName}--active`, hidden && `${baseClass}__tab-button--hidden`, hidden && modifierClassName && `${modifierClassName}--hidden`].filter(Boolean).join(' '),
     disabled: disabled,
+    id: id,
     onClick: onClick,
+    onFocus: event => {
+      event.currentTarget.scrollIntoView({
+        block: 'nearest',
+        inline: 'nearest'
+      });
+    },
     role: "tab",
+    tabIndex: isActive && !hidden ? 0 : -1,
     type: "button",
     children: children
   });

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","baseClass","Tabs","className","onChange","tabs","value","_jsx","TabsList","map","tab","TabButton","disabled","hidden","isActive","onClick","label","children","tabsClassName","tabsWrapClassName","filter","Boolean","join","role","hasError","modifierClassName","type"],"sources":["../../../src/elements/Tabs/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport './index.css'\n\nconst baseClass = 'tabs'\n\nexport type TabsTab<TValue extends string = string> = {\n  disabled?: boolean\n  hidden?: boolean\n  label: React.ReactNode\n  value: TValue\n}\n\nexport type TabsProps<TValue extends string = string> = {\n  className?: string\n  onChange: (value: TValue) => void\n  tabs: TabsTab<TValue>[]\n  value: TValue\n}\n\nexport const Tabs = <TValue extends string = string>({\n  className,\n  onChange,\n  tabs,\n  value,\n}: TabsProps<TValue>) => {\n  return (\n    <TabsList className={className}>\n      {tabs.map((tab) => (\n        <TabButton\n          disabled={tab.disabled}\n          hidden={tab.hidden}\n          isActive={tab.value === value}\n          key={tab.value}\n          onClick={() => onChange(tab.value)}\n        >\n          {tab.label}\n        </TabButton>\n      ))}\n    </TabsList>\n  )\n}\n\nexport const TabsList: React.FC<{\n  children: React.ReactNode\n  className?: string\n  tabsClassName?: string\n  tabsWrapClassName?: string\n}> = ({ children, className, tabsClassName, tabsWrapClassName }) => {\n  return (\n    <div className={[baseClass, className].filter(Boolean).join(' ')}>\n      <div className={[`${baseClass}__tabs-wrap`, tabsWrapClassName].filter(Boolean).join(' ')}>\n        <div\n          className={[`${baseClass}__tabs`, tabsClassName].filter(Boolean).join(' ')}\n          role=\"tablist\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport const TabButton: React.FC<{\n  children: React.ReactNode\n  className?: string\n  disabled?: boolean\n  hasError?: boolean\n  hidden?: boolean\n  isActive?: boolean\n  modifierClassName?: string\n  onClick: () => void\n}> = ({\n  children,\n  className,\n  disabled,\n  hasError,\n  hidden,\n  isActive,\n  modifierClassName,\n  onClick,\n}) => {\n  return (\n    <button\n      aria-selected={isActive}\n      className={[\n        `${baseClass}__tab-button`,\n        className,\n        hasError && `${baseClass}__tab-button--has-error`,\n        hasError && modifierClassName && `${modifierClassName}--has-error`,\n        isActive && `${baseClass}__tab-button--active`,\n        isActive && modifierClassName && `${modifierClassName}--active`,\n        hidden && `${baseClass}__tab-button--hidden`,\n        hidden && modifierClassName && `${modifierClassName}--hidden`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      disabled={disabled}\n      onClick={onClick}\n      role=\"tab\"\n      type=\"button\"\n    >\n      {children}\n    </button>\n  )\n}\n"],"mappings":"AAAA;;;AAEA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAgBlB,OAAO,MAAMC,IAAA,GAAOA,CAAiC;EACnDC,SAAS;EACTC,QAAQ;EACRC,IAAI;EACJC;AAAK,CACa;EAClB,oBACEC,IAAA,CAACC,QAAA;IAASL,SAAA,EAAWA,SAAA;cAClBE,IAAA,CAAKI,GAAG,CAAEC,GAAA,iBACTH,IAAA,CAACI,SAAA;MACCC,QAAA,EAAUF,GAAA,CAAIE,QAAQ;MACtBC,MAAA,EAAQH,GAAA,CAAIG,MAAM;MAClBC,QAAA,EAAUJ,GAAA,CAAIJ,KAAK,KAAKA,KAAA;MAExBS,OAAA,EAASA,CAAA,KAAMX,QAAA,CAASM,GAAA,CAAIJ,KAAK;gBAEhCI,GAAA,CAAIM;OAHAN,GAAA,CAAIJ,KAAK;;AAQxB;AAEA,OAAO,MAAME,QAAA,GAKRA,CAAC;EAAES,QAAQ;EAAEd,SAAS;EAAEe,aAAa;EAAEC;AAAiB,CAAE;EAC7D,oBACEZ,IAAA,CAAC;IAAIJ,SAAA,EAAW,CAACF,SAAA,EAAWE,SAAA,CAAU,CAACiB,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;cAC1D,aAAAf,IAAA,CAAC;MAAIJ,SAAA,EAAW,CAAC,GAAGF,SAAA,aAAsB,EAAEkB,iBAAA,CAAkB,CAACC,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;gBAClF,aAAAf,IAAA,CAAC;QACCJ,SAAA,EAAW,CAAC,GAAGF,SAAA,QAAiB,EAAEiB,aAAA,CAAc,CAACE,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;QACtEC,IAAA,EAAK;kBAEJN;;;;AAKX;AAEA,OAAO,MAAMN,SAAA,GASRA,CAAC;EACJM,QAAQ;EACRd,SAAS;EACTS,QAAQ;EACRY,QAAQ;EACRX,MAAM;EACNC,QAAQ;EACRW,iBAAiB;EACjBV;AAAO,CACR;EACC,oBACER,IAAA,CAAC;IACC,iBAAeO,QAAA;IACfX,SAAA,EAAW,CACT,GAAGF,SAAA,cAAuB,EAC1BE,SAAA,EACAqB,QAAA,IAAY,GAAGvB,SAAA,yBAAkC,EACjDuB,QAAA,IAAYC,iBAAA,IAAqB,GAAGA,iBAAA,aAA8B,EAClEX,QAAA,IAAY,GAAGb,SAAA,sBAA+B,EAC9Ca,QAAA,IAAYW,iBAAA,IAAqB,GAAGA,iBAAA,UAA2B,EAC/DZ,MAAA,IAAU,GAAGZ,SAAA,sBAA+B,EAC5CY,MAAA,IAAUY,iBAAA,IAAqB,GAAGA,iBAAA,UAA2B,CAC9D,CACEL,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;IACRV,QAAA,EAAUA,QAAA;IACVG,OAAA,EAASA,OAAA;IACTQ,IAAA,EAAK;IACLG,IAAA,EAAK;cAEJT;;AAGP","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","baseClass","Tabs","className","onChange","tabs","value","_jsx","TabsList","map","tab","TabButton","disabled","hidden","id","isActive","onClick","panelID","label","children","tabsClassName","tabsWrapClassName","filter","Boolean","join","onKeyDown","event","altKey","ctrlKey","metaKey","includes","key","Array","from","currentTarget","querySelectorAll","getClientRects","length","index","indexOf","target","preventDefault","isRTL","getComputedStyle","direction","nextIndex","focus","role","tabIndex","hasError","modifierClassName","onFocus","scrollIntoView","block","inline","type"],"sources":["../../../src/elements/Tabs/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport './index.css'\n\nconst baseClass = 'tabs'\n\nexport type TabsTab<TValue extends string = string> = {\n  disabled?: boolean\n  hidden?: boolean\n  id?: string\n  label: React.ReactNode\n  panelID?: string\n  value: TValue\n}\n\nexport type TabsProps<TValue extends string = string> = {\n  className?: string\n  onChange: (value: TValue) => void\n  tabs: TabsTab<TValue>[]\n  value: TValue\n}\n\nexport const Tabs = <TValue extends string = string>({\n  className,\n  onChange,\n  tabs,\n  value,\n}: TabsProps<TValue>) => {\n  return (\n    <TabsList className={className}>\n      {tabs.map((tab) => (\n        <TabButton\n          disabled={tab.disabled}\n          hidden={tab.hidden}\n          id={tab.id}\n          isActive={tab.value === value}\n          key={tab.value}\n          onClick={() => onChange(tab.value)}\n          panelID={tab.panelID}\n        >\n          {tab.label}\n        </TabButton>\n      ))}\n    </TabsList>\n  )\n}\n\nexport const TabsList: React.FC<{\n  children: React.ReactNode\n  className?: string\n  tabsClassName?: string\n  tabsWrapClassName?: string\n}> = ({ children, className, tabsClassName, tabsWrapClassName }) => {\n  return (\n    <div className={[baseClass, className].filter(Boolean).join(' ')}>\n      <div className={[`${baseClass}__tabs-wrap`, tabsWrapClassName].filter(Boolean).join(' ')}>\n        <div\n          className={[`${baseClass}__tabs`, tabsClassName].filter(Boolean).join(' ')}\n          onKeyDown={(event) => {\n            if (\n              event.altKey ||\n              event.ctrlKey ||\n              event.metaKey ||\n              !['ArrowLeft', 'ArrowRight', 'End', 'Home'].includes(event.key)\n            ) {\n              return\n            }\n\n            const tabs = Array.from(\n              event.currentTarget.querySelectorAll<HTMLButtonElement>('[role=\"tab\"]'),\n            ).filter((tab) => !tab.disabled && tab.getClientRects().length > 0)\n            const index = tabs.indexOf(event.target as HTMLButtonElement)\n\n            if (index === -1) {\n              return\n            }\n\n            event.preventDefault()\n            const isRTL = getComputedStyle(event.currentTarget).direction === 'rtl'\n            const direction = (event.key === 'ArrowRight' ? 1 : -1) * (isRTL ? -1 : 1)\n            const nextIndex =\n              event.key === 'Home'\n                ? 0\n                : event.key === 'End'\n                  ? tabs.length - 1\n                  : (index + direction + tabs.length) % tabs.length\n\n            tabs[nextIndex]?.focus()\n          }}\n          role=\"tablist\"\n          tabIndex={-1}\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport const TabButton: React.FC<{\n  children: React.ReactNode\n  className?: string\n  disabled?: boolean\n  hasError?: boolean\n  hidden?: boolean\n  id?: string\n  isActive?: boolean\n  modifierClassName?: string\n  onClick: () => void\n  panelID?: string\n}> = ({\n  id,\n  children,\n  className,\n  disabled,\n  hasError,\n  hidden,\n  isActive,\n  modifierClassName,\n  onClick,\n  panelID,\n}) => {\n  return (\n    <button\n      aria-controls={panelID}\n      aria-selected={isActive}\n      className={[\n        `${baseClass}__tab-button`,\n        className,\n        hasError && `${baseClass}__tab-button--has-error`,\n        hasError && modifierClassName && `${modifierClassName}--has-error`,\n        isActive && `${baseClass}__tab-button--active`,\n        isActive && modifierClassName && `${modifierClassName}--active`,\n        hidden && `${baseClass}__tab-button--hidden`,\n        hidden && modifierClassName && `${modifierClassName}--hidden`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      disabled={disabled}\n      id={id}\n      onClick={onClick}\n      onFocus={(event) => {\n        event.currentTarget.scrollIntoView({ block: 'nearest', inline: 'nearest' })\n      }}\n      role=\"tab\"\n      tabIndex={isActive && !hidden ? 0 : -1}\n      type=\"button\"\n    >\n      {children}\n    </button>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Thumbnail/index.css

@@ -33,6 +33,7 @@
     width: calc(var(--spacer-6) * 2.5);
   }
 
+  /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
   @media (max-width: 1440px) {
     .thumbnail .thumbnail {
       width: calc(var(--spacer-6) * 2.5);

package/dist/elements/ThumbnailCard/index.css

@@ -76,7 +76,6 @@
     white-space: nowrap;
     text-align: left;
     color: var(--color-text);
-    font-family: var(--text-body-medium-font-family);
     font-size: var(--text-body-medium-font-size);
     font-style: normal;
     font-weight: var(--text-body-medium-font-weight);

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ThumbnailCard/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEjE,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,aAAa,CAAA;AAEpB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAA;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,sBAAsB,CAAA;IACnC,GAAG,CAAC,EAAE;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,UAAU,CAAA;IACxC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAID,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAmDtD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ThumbnailCard/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEjE,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,aAAa,CAAA;AAEpB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAA;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,sBAAsB,CAAA;IACnC,GAAG,CAAC,EAAE;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,UAAU,CAAA;IACxC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAID,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAoDtD,CAAA"}

package/dist/elements/ThumbnailCard/index.js

@@ -9,7 +9,7 @@ import { formatDocTitle } from '../../utilities/formatDocTitle/index.js';
 import './index.css';
 const baseClass = 'thumbnail-card';
 export const ThumbnailCard = props => {
-  const $ = _c(15);
+  const $ = _c(16);
   const {
     alignLabel,
     className,
@@ -43,7 +43,7 @@ export const ThumbnailCard = props => {
   }
   const classes = t3.join(" ");
   let t4;
-  if ($[5] !== classes || $[6] !== collection || $[7] !== config || $[8] !== doc || $[9] !== i18n || $[10] !== labelFromProps || $[11] !== onClick || $[12] !== onDoubleClick || $[13] !== thumbnail) {
+  if ($[5] !== classes || $[6] !== collection || $[7] !== config || $[8] !== doc || $[9] !== i18n || $[10] !== isSelected || $[11] !== labelFromProps || $[12] !== onClick || $[13] !== onDoubleClick || $[14] !== thumbnail) {
     let title = labelFromProps;
     if (!title) {
       title = formatDocTitle({
@@ -55,6 +55,7 @@ export const ThumbnailCard = props => {
       });
     }
     t4 = _jsxs("button", {
+      "aria-pressed": typeof isSelected === "boolean" ? isSelected : undefined,
       className: classes,
       onClick,
       onDoubleClick,
@@ -73,13 +74,14 @@ export const ThumbnailCard = props => {
     $[7] = config;
     $[8] = doc;
     $[9] = i18n;
-    $[10] = labelFromProps;
-    $[11] = onClick;
-    $[12] = onDoubleClick;
-    $[13] = thumbnail;
-    $[14] = t4;
+    $[10] = isSelected;
+    $[11] = labelFromProps;
+    $[12] = onClick;
+    $[13] = onDoubleClick;
+    $[14] = thumbnail;
+    $[15] = t4;
   } else {
-    t4 = $[14];
+    t4 = $[15];
   }
   return t4;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useConfig","useTranslation","formatDocTitle","baseClass","ThumbnailCard","props","$","alignLabel","className","collection","doc","isSelected","label","labelFromProps","onClick","onDoubleClick","thumbnail","config","i18n","t0","t1","t2","t3","filter","Boolean","classes","join","t4","title","data","dateFormat","admin","fallback","filename","_jsxs","type","children","_jsx"],"sources":["../../../src/elements/ThumbnailCard/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig, TypeWithID } from 'payload'\n\nimport React from 'react'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { formatDocTitle } from '../../utilities/formatDocTitle/index.js'\nimport './index.css'\n\nexport type ThumbnailCardProps = {\n  alignLabel?: 'center' | 'left'\n  className?: string\n  collection?: ClientCollectionConfig\n  doc?: { filename?: string } & TypeWithID\n  isSelected?: boolean\n  label?: string\n  onClick?: () => void\n  onDoubleClick?: () => void\n  onKeyDown?: () => void\n  thumbnail: React.ReactNode\n}\n\nconst baseClass = 'thumbnail-card'\n\nexport const ThumbnailCard: React.FC<ThumbnailCardProps> = (props) => {\n  const {\n    alignLabel,\n    className,\n    collection,\n    doc,\n    isSelected,\n    label: labelFromProps,\n    onClick,\n    onDoubleClick,\n    thumbnail,\n  } = props\n\n  const { config } = useConfig()\n\n  const { i18n } = useTranslation()\n\n  const classes = [\n    baseClass,\n    className,\n    typeof onClick === 'function' && `${baseClass}--has-on-click`,\n    isSelected && `${baseClass}--selected`,\n    alignLabel && `${baseClass}--align-label-${alignLabel}`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  let title = labelFromProps\n\n  if (!title) {\n    title = formatDocTitle({\n      collectionConfig: collection,\n      data: doc,\n      dateFormat: config.admin.dateFormat,\n      fallback: doc?.filename,\n      i18n,\n    })\n  }\n\n  return (\n    <button\n      className={classes}\n      onClick={onClick}\n      onDoubleClick={onDoubleClick}\n      title={title}\n      type=\"button\"\n    >\n      <div className={`${baseClass}__thumbnail`}>{thumbnail}</div>\n      <div className={`${baseClass}__label`}>{title}</div>\n    </button>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,OAAOC,KAAA,MAAW;AAElB,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAC/B,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAeP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,aAAA,GAA8CC,KAAA;EAAA,MAAAC,CAAA,GAAAR,EAAA;EACzD;IAAAS,UAAA;IAAAC,SAAA;IAAAC,UAAA;IAAAC,GAAA;IAAAC,UAAA;IAAAC,KAAA,EAAAC,cAAA;IAAAC,OAAA;IAAAC,aAAA;IAAAC;EAAA,IAUIX,KAAA;EAEJ;IAAAY;EAAA,IAAmBjB,SAAA;EAEnB;IAAAkB;EAAA,IAAiBjB,cAAA;EAKf,MAAAkB,EAAA,UAAOL,OAAA,KAAY,cAAc,GAAAX,SAAA,gBAA4B;EAC7D,MAAAiB,EAAA,GAAAT,UAAA,IAAc,GAAAR,SAAA,YAAwB;EACtC,MAAAkB,EAAA,GAAAd,UAAA,IAAc,GAAAJ,SAAA,iBAA6BI,UAAA,EAAY;EAAA,IAAAe,EAAA;EAAA,IAAAhB,CAAA,QAAAE,SAAA,IAAAF,CAAA,QAAAa,EAAA,IAAAb,CAAA,QAAAc,EAAA,IAAAd,CAAA,QAAAe,EAAA;IALzCC,EAAA,IAAAnB,SAAA,EAEdK,SAAA,EACAW,EAA6D,EAC7DC,EAAsC,EACtCC,EAAuD,EAAAE,MAAA,CAAAC,OAE/C;IAAAlB,CAAA,MAAAE,SAAA;IAAAF,CAAA,MAAAa,EAAA;IAAAb,CAAA,MAAAc,EAAA;IAAAd,CAAA,MAAAe,EAAA;IAAAf,CAAA,MAAAgB,EAAA;EAAA;IAAAA,EAAA,GAAAhB,CAAA;EAAA;EAPV,MAAAmB,OAAA,GAAgBH,EAON,CAAAI,IAAA,CACF;EAAA,IAAAC,EAAA;EAAA,IAAArB,CAAA,QAAAmB,OAAA,IAAAnB,CAAA,QAAAG,UAAA,IAAAH,CAAA,QAAAW,MAAA,IAAAX,CAAA,QAAAI,GAAA,IAAAJ,CAAA,QAAAY,IAAA,IAAAZ,CAAA,SAAAO,cAAA,IAAAP,CAAA,SAAAQ,OAAA,IAAAR,CAAA,SAAAS,aAAA,IAAAT,CAAA,SAAAU,SAAA;IAER,IAAAY,KAAA,GAAYf,cAAA;IAAA,KAEPe,KAAA;MACHA,KAAA,CAAAA,CAAA,CAAQA;QAAAA,iBAAA,CACYnB,UAAA;QAAAoB,IAAA,EACZnB,GAAA;QAAAoB,UAAA,EACMb,MAAA,CAAAc,KAAA,CAAAD,UAAA;QAAAE,QAAA,EACFtB,GAAA,EAAAuB,QAAA;QAAAf;MAAA,CAEZ;IANA;IAUAS,EAAA,GAAAO,KAAA,CAAC;MAAA1B,SAAA,EACYiB,OAAA;MAAAX,OAAA;MAAAC,aAAA;MAAAa,KAAA;MAAAO,IAAA,EAIN;MAAAC,QAAA,GAELC,IAAA,CAAC;QAAA7B,SAAA,EAAe,GAAAL,SAAA,aAAyB;QAAAiC,QAAA,EAAGpB;MAAA,C,GAC5CqB,IAAA,CAAC;QAAA7B,SAAA,EAAe,GAAAL,SAAA,SAAqB;QAAAiC,QAAA,EAAGR;MAAA,C;;;;;;;;;;;;;;;SAR1CD,E;CAWJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useConfig","useTranslation","formatDocTitle","baseClass","ThumbnailCard","props","$","alignLabel","className","collection","doc","isSelected","label","labelFromProps","onClick","onDoubleClick","thumbnail","config","i18n","t0","t1","t2","t3","filter","Boolean","classes","join","t4","title","data","dateFormat","admin","fallback","filename","_jsxs","undefined","type","children","_jsx"],"sources":["../../../src/elements/ThumbnailCard/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig, TypeWithID } from 'payload'\n\nimport React from 'react'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { formatDocTitle } from '../../utilities/formatDocTitle/index.js'\nimport './index.css'\n\nexport type ThumbnailCardProps = {\n  alignLabel?: 'center' | 'left'\n  className?: string\n  collection?: ClientCollectionConfig\n  doc?: { filename?: string } & TypeWithID\n  isSelected?: boolean\n  label?: string\n  onClick?: () => void\n  onDoubleClick?: () => void\n  onKeyDown?: () => void\n  thumbnail: React.ReactNode\n}\n\nconst baseClass = 'thumbnail-card'\n\nexport const ThumbnailCard: React.FC<ThumbnailCardProps> = (props) => {\n  const {\n    alignLabel,\n    className,\n    collection,\n    doc,\n    isSelected,\n    label: labelFromProps,\n    onClick,\n    onDoubleClick,\n    thumbnail,\n  } = props\n\n  const { config } = useConfig()\n\n  const { i18n } = useTranslation()\n\n  const classes = [\n    baseClass,\n    className,\n    typeof onClick === 'function' && `${baseClass}--has-on-click`,\n    isSelected && `${baseClass}--selected`,\n    alignLabel && `${baseClass}--align-label-${alignLabel}`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  let title = labelFromProps\n\n  if (!title) {\n    title = formatDocTitle({\n      collectionConfig: collection,\n      data: doc,\n      dateFormat: config.admin.dateFormat,\n      fallback: doc?.filename,\n      i18n,\n    })\n  }\n\n  return (\n    <button\n      aria-pressed={typeof isSelected === 'boolean' ? isSelected : undefined}\n      className={classes}\n      onClick={onClick}\n      onDoubleClick={onDoubleClick}\n      title={title}\n      type=\"button\"\n    >\n      <div className={`${baseClass}__thumbnail`}>{thumbnail}</div>\n      <div className={`${baseClass}__label`}>{title}</div>\n    </button>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,OAAOC,KAAA,MAAW;AAElB,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAC/B,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAeP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,aAAA,GAA8CC,KAAA;EAAA,MAAAC,CAAA,GAAAR,EAAA;EACzD;IAAAS,UAAA;IAAAC,SAAA;IAAAC,UAAA;IAAAC,GAAA;IAAAC,UAAA;IAAAC,KAAA,EAAAC,cAAA;IAAAC,OAAA;IAAAC,aAAA;IAAAC;EAAA,IAUIX,KAAA;EAEJ;IAAAY;EAAA,IAAmBjB,SAAA;EAEnB;IAAAkB;EAAA,IAAiBjB,cAAA;EAKf,MAAAkB,EAAA,UAAOL,OAAA,KAAY,cAAc,GAAAX,SAAA,gBAA4B;EAC7D,MAAAiB,EAAA,GAAAT,UAAA,IAAc,GAAAR,SAAA,YAAwB;EACtC,MAAAkB,EAAA,GAAAd,UAAA,IAAc,GAAAJ,SAAA,iBAA6BI,UAAA,EAAY;EAAA,IAAAe,EAAA;EAAA,IAAAhB,CAAA,QAAAE,SAAA,IAAAF,CAAA,QAAAa,EAAA,IAAAb,CAAA,QAAAc,EAAA,IAAAd,CAAA,QAAAe,EAAA;IALzCC,EAAA,IAAAnB,SAAA,EAEdK,SAAA,EACAW,EAA6D,EAC7DC,EAAsC,EACtCC,EAAuD,EAAAE,MAAA,CAAAC,OAE/C;IAAAlB,CAAA,MAAAE,SAAA;IAAAF,CAAA,MAAAa,EAAA;IAAAb,CAAA,MAAAc,EAAA;IAAAd,CAAA,MAAAe,EAAA;IAAAf,CAAA,MAAAgB,EAAA;EAAA;IAAAA,EAAA,GAAAhB,CAAA;EAAA;EAPV,MAAAmB,OAAA,GAAgBH,EAON,CAAAI,IAAA,CACF;EAAA,IAAAC,EAAA;EAAA,IAAArB,CAAA,QAAAmB,OAAA,IAAAnB,CAAA,QAAAG,UAAA,IAAAH,CAAA,QAAAW,MAAA,IAAAX,CAAA,QAAAI,GAAA,IAAAJ,CAAA,QAAAY,IAAA,IAAAZ,CAAA,SAAAK,UAAA,IAAAL,CAAA,SAAAO,cAAA,IAAAP,CAAA,SAAAQ,OAAA,IAAAR,CAAA,SAAAS,aAAA,IAAAT,CAAA,SAAAU,SAAA;IAER,IAAAY,KAAA,GAAYf,cAAA;IAAA,KAEPe,KAAA;MACHA,KAAA,CAAAA,CAAA,CAAQA;QAAAA,iBAAA,CACYnB,UAAA;QAAAoB,IAAA,EACZnB,GAAA;QAAAoB,UAAA,EACMb,MAAA,CAAAc,KAAA,CAAAD,UAAA;QAAAE,QAAA,EACFtB,GAAA,EAAAuB,QAAA;QAAAf;MAAA,CAEZ;IANA;IAUAS,EAAA,GAAAO,KAAA,CAAC;MAAA,gBACe,OAAOvB,UAAA,KAAe,YAAYA,UAAA,GAAAwB,SAAa;MAAA3B,SAAA,EAClDiB,OAAA;MAAAX,OAAA;MAAAC,aAAA;MAAAa,KAAA;MAAAQ,IAAA,EAIN;MAAAC,QAAA,GAELC,IAAA,CAAC;QAAA9B,SAAA,EAAe,GAAAL,SAAA,aAAyB;QAAAkC,QAAA,EAAGrB;MAAA,C,GAC5CsB,IAAA,CAAC;QAAA9B,SAAA,EAAe,GAAAL,SAAA,SAAqB;QAAAkC,QAAA,EAAGT;MAAA,C;;;;;;;;;;;;;;;;SAT1CD,E;CAYJ","ignoreList":[]}

package/dist/elements/TimezonePicker/index.css

@@ -15,7 +15,6 @@
     .timezone-picker__label {
       color: var(--color-text-secondary);
       flex-shrink: 0;
-      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);
@@ -47,6 +46,7 @@
         border: none;
         padding: 0;
         padding-left: var(--spacer-1);
+        /* stylelint-disable-next-line plugin/no-important -- TODO: pre-existing; revisit whether specificity can win instead */
         min-height: auto !important;
         position: relative;
         box-shadow: unset;
@@ -94,7 +94,6 @@
 
       .rs__single-value {
         color: var(--color-text);
-        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);
@@ -105,7 +104,6 @@
 
       .rs__placeholder {
         color: var(--color-text-secondary);
-        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);

package/dist/elements/Tooltip/index.css

@@ -17,9 +17,9 @@
     opacity: 0;
     background-color: var(--color-bg-tooltip);
     max-width: var(--tooltip-max-width);
-    padding: var(--spacer-1);
+    padding-block: var(--spacer-1);
+    padding-inline: var(--spacer-2);
     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);
@@ -54,6 +54,7 @@
       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;
     }
@@ -98,6 +99,7 @@
   .tooltip--position-top {
     .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);
     }
 
@@ -108,6 +110,7 @@
 
   .tooltip--position-bottom {
     .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);
     }
@@ -123,7 +126,9 @@
 
   .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);
@@ -133,8 +138,10 @@
 
   .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

@@ -3,22 +3,22 @@ import './index.css';
 type Side = 'bottom' | 'left' | 'right' | 'top';
 export type Props = {
     alignCaret?: 'center' | 'left' | 'right';
+    'aria-hidden'?: boolean;
     children: React.ReactNode;
     className?: string;
     delay?: number;
-    /**
-     * Applied to the portaled tooltip element, so it can be located independent of its
-     * position in the DOM (e.g. by tests).
-     */
     id?: string;
+    portal?: boolean;
     position?: Side;
+    role?: 'alert' | 'tooltip';
     show?: boolean;
     /**
      * 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
+     * the `portal` setting. @default false
      */
     staticPositioning?: boolean;
+    tabIndex?: number;
 };
 export declare const Tooltip: React.FC<Props>;
 export {};

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":"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"}
+{"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

@@ -62,12 +62,16 @@ export const Tooltip = props => {
   const {
     id,
     alignCaret = 'center',
+    'aria-hidden': ariaHidden,
     children,
     className,
     delay = 500,
+    portal = true,
     position: positionFromProps,
+    role = 'tooltip',
     show: showFromProps = true,
-    staticPositioning = false
+    staticPositioning = false,
+    tabIndex
   } = props;
   const generatedID = React.useId();
   const tooltipID = id || generatedID;
@@ -153,6 +157,7 @@ export const Tooltip = props => {
       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`,
@@ -201,7 +206,7 @@ export const Tooltip = props => {
   }, [isMounted, updatePosition]);
   useEffect(() => {
     const trigger_1 = triggerMarkerRef.current?.parentElement;
-    if (!show || !trigger_1) {
+    if (ariaHidden || role !== 'tooltip' || !show || !trigger_1) {
       return;
     }
     const describedByIDs = trigger_1.getAttribute('aria-describedby')?.split(' ') || [];
@@ -216,7 +221,19 @@ export const Tooltip = props => {
         trigger_1.removeAttribute('aria-describedby');
       }
     };
-  }, [show, tooltipID]);
+  }, [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: [/*#__PURE__*/_jsx("span", {
       "aria-hidden": "true",
@@ -224,16 +241,7 @@ export const Tooltip = props => {
       style: {
         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)]
+    }), portal && content ? /*#__PURE__*/createPortal(content, triggerMarkerRef.current?.closest('dialog, [role="dialog"]') ?? document.body) : content]
   });
 };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"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":[]}
+{"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","ariaHidden","delay","portal","position","positionFromProps","role","show","showFromProps","staticPositioning","tabIndex","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","content","ref","Fragment","display","closest","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  'aria-hidden'?: boolean\n  children: React.ReactNode\n  className?: string\n  delay?: number\n  id?: string\n  portal?: boolean\n  position?: Side\n  role?: 'alert' | 'tooltip'\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   * the `portal` setting. @default false\n   */\n  staticPositioning?: boolean\n  tabIndex?: number\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      <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    'aria-hidden': ariaHidden,\n    children,\n    className,\n    delay = 500,\n    portal = true,\n    position: positionFromProps,\n    role = 'tooltip',\n    show: showFromProps = true,\n    staticPositioning = false,\n    tabIndex,\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    floatingElement.style.setProperty('--tooltip-x', `${x}px`)\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 (ariaHidden || role !== 'tooltip' || !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  }, [ariaHidden, role, show, tooltipID])\n\n  const content = isMounted ? (\n    <aside\n      aria-hidden={ariaHidden}\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={role}\n      tabIndex={tabIndex}\n    >\n      <TooltipCaret />\n      <div className=\"tooltip-content\">{children}</div>\n    </aside>\n  ) : null\n\n  return (\n    <React.Fragment>\n      <span aria-hidden=\"true\" ref={triggerMarkerRef} style={{ display: 'none' }} />\n      {portal && content\n        ? createPortal(\n            content,\n            triggerMarkerRef.current?.closest('dialog, [role=\"dialog\"]') ?? document.body,\n          )\n        : content}\n    </React.Fragment>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Upload/getEditorFileSrc.d.ts

@@ -0,0 +1,11 @@
+export declare const getEditorFileSrc: ({ data, fileSrc, hasSelectedFile, }: {
+    data?: {
+        original?: {
+            url?: string;
+        } | null;
+        url?: string;
+    };
+    fileSrc?: null | string;
+    hasSelectedFile: boolean;
+}) => string;
+//# sourceMappingURL=getEditorFileSrc.d.ts.map

package/dist/elements/Upload/getEditorFileSrc.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getEditorFileSrc.d.ts","sourceRoot":"","sources":["../../../src/elements/Upload/getEditorFileSrc.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,wCAI1B;IACD,IAAI,CAAC,EAAE;QAAE,QAAQ,CAAC,EAAE;YAAE,GAAG,CAAC,EAAE,MAAM,CAAA;SAAE,GAAG,IAAI,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IAC3D,OAAO,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;IACvB,eAAe,EAAE,OAAO,CAAA;CACzB,KAAG,MAA2F,CAAA"}

package/dist/elements/Upload/getEditorFileSrc.js

@@ -0,0 +1,6 @@
+export const getEditorFileSrc = ({
+  data,
+  fileSrc,
+  hasSelectedFile
+}) => hasSelectedFile && fileSrc || data?.original?.url || data?.url || fileSrc || '';
+//# sourceMappingURL=getEditorFileSrc.js.map

package/dist/elements/Upload/getEditorFileSrc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getEditorFileSrc.js","names":["getEditorFileSrc","data","fileSrc","hasSelectedFile","original","url"],"sources":["../../../src/elements/Upload/getEditorFileSrc.ts"],"sourcesContent":["export const getEditorFileSrc = ({\n  data,\n  fileSrc,\n  hasSelectedFile,\n}: {\n  data?: { original?: { url?: string } | null; url?: string }\n  fileSrc?: null | string\n  hasSelectedFile: boolean\n}): string => (hasSelectedFile && fileSrc) || data?.original?.url || data?.url || fileSrc || ''\n"],"mappings":"AAAA,OAAO,MAAMA,gBAAA,GAAmBA,CAAC;EAC/BC,IAAI;EACJC,OAAO;EACPC;AAAe,CAKhB,KAAaA,eAAC,IAAmBD,OAAA,IAAYD,IAAA,EAAMG,QAAA,EAAUC,GAAA,IAAOJ,IAAA,EAAMI,GAAA,IAAOH,OAAA,IAAW","ignoreList":[]}