@payloadcms/ui 4.0.0-internal.cd69eef → 4.0.0-internal.ce66a41

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/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;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"}
+{"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;AAqEpB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAuE1C,CAAA"}

package/dist/elements/TimezonePicker/index.js

@@ -15,8 +15,12 @@ const SmallDropdownIndicator = props => {
     innerProps: {
       ref,
       ...restInnerProps
-    }
+    },
+    isDisabled
   } = props;
+  if (isDisabled) {
+    return null;
+  }
   return /*#__PURE__*/_jsx("button", {
     className: "timezone-picker__dropdown-indicator",
     ref: ref,

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

@@ -1 +1 @@
-{"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":"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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","isDisabled","_jsx","className","onKeyDown","e","key","type","size","SmallClearIndicator","clearValue","stopPropagation","role","tabIndex","TimezoneOption","children","_jsxs","Option","TimezonePicker","id","onChange","onChangeFromProps","options","optionsFromProps","readOnly","readOnlyFromProps","required","selectedTimezone","selectedTimezoneFromProps","t","find","value","Boolean","length","classNames","menu","menuList","ClearIndicator","DropdownIndicator","customProps","menuPortalTheme","disabled","inputId","isClearable","isCreatable","val","placeholder","styles","control","base","flexWrap","option","alignItems","display","gap","minWidth"],"sources":["../../../src/elements/TimezonePicker/index.tsx"],"sourcesContent":["'use client'\n\nimport type { OptionObject } from 'payload'\nimport type React from 'react'\nimport type { JSX } from 'react'\nimport type {\n  ClearIndicatorProps,\n  DropdownIndicatorProps,\n  OptionProps,\n  StylesConfig,\n} from 'react-select'\n\nimport { useMemo } from 'react'\nimport { components as rsComponents } from 'react-select'\n\nimport type { Option as OptionType } from '../ReactSelect/types.js'\nimport type { Props } from './types.js'\n\nimport { CheckIcon } from '../../icons/Check/index.js'\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { CircledXIcon } from '../../icons/CircledX/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { ReactSelect } from '../ReactSelect/index.js'\nimport { formatOptions } from '../WhereBuilder/Condition/Select/formatOptions.js'\nimport './index.css'\n\nconst SmallDropdownIndicator: React.FC<\n  {\n    innerProps: JSX.IntrinsicElements['button']\n  } & DropdownIndicatorProps<OptionType, true>\n> = (props) => {\n  const {\n    innerProps: { ref, ...restInnerProps },\n    isDisabled,\n  } = props\n\n  if (isDisabled) {\n    return null\n  }\n\n  return (\n    <button\n      className=\"timezone-picker__dropdown-indicator\"\n      ref={ref}\n      {...restInnerProps}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter') {\n          e.key = ' '\n        }\n      }}\n      type=\"button\"\n    >\n      <ChevronIcon size={16} />\n    </button>\n  )\n}\n\nconst SmallClearIndicator: React.FC<ClearIndicatorProps<OptionType, true>> = (props) => {\n  const {\n    clearValue,\n    innerProps: { ref, ...restInnerProps },\n  } = props\n\n  return (\n    <div\n      className=\"timezone-picker__clear-indicator\"\n      ref={typeof ref === 'string' ? null : ref}\n      {...restInnerProps}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter') {\n          clearValue()\n          e.stopPropagation()\n        }\n      }}\n      role=\"button\"\n      tabIndex={0}\n    >\n      <CircledXIcon size={24} />\n    </div>\n  )\n}\n\nconst TimezoneOption: React.FC<OptionProps<OptionType, false>> = (props) => {\n  const { children } = props\n\n  return (\n    <rsComponents.Option {...props}>\n      <CheckIcon className=\"timezone-picker__option-check\" size={16} />\n      <span className=\"timezone-picker__option-label\">{children}</span>\n    </rsComponents.Option>\n  )\n}\n\nexport const TimezonePicker: React.FC<Props> = (props) => {\n  const {\n    id,\n    onChange: onChangeFromProps,\n    options: optionsFromProps,\n    readOnly: readOnlyFromProps,\n    required,\n    selectedTimezone: selectedTimezoneFromProps,\n  } = props\n\n  const { t } = useTranslation()\n\n  const options = formatOptions(optionsFromProps)\n\n  const selectedTimezone = useMemo(() => {\n    return options.find((t) => {\n      const value = typeof t === 'string' ? t : t.value\n      return value === selectedTimezoneFromProps\n    })\n  }, [options, selectedTimezoneFromProps])\n\n  const readOnly = Boolean(readOnlyFromProps) || options.length === 1\n\n  return (\n    <div className=\"timezone-picker-wrapper\">\n      <span className=\"timezone-picker__label\">\n        {t('general:timezone')}\n        {required && <span className=\"timezone-picker__required\">*</span>}\n      </span>\n      <ReactSelect\n        className=\"timezone-picker\"\n        classNames={{\n          menu: () => 'timezone-picker__menu',\n          menuList: () => 'timezone-picker__menu-list',\n        }}\n        components={{\n          ClearIndicator: SmallClearIndicator,\n          DropdownIndicator: SmallDropdownIndicator,\n          Option: TimezoneOption,\n        }}\n        customProps={{ menuPortalTheme: 'dark' }}\n        disabled={readOnly}\n        inputId={id}\n        isClearable={!required}\n        isCreatable={false}\n        onChange={(val: OptionObject) => {\n          if (onChangeFromProps) {\n            onChangeFromProps(val?.value || '')\n          }\n        }}\n        options={options}\n        placeholder={t('general:none')}\n        styles={\n          {\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":"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","ignoreList":[]}

package/dist/elements/Tooltip/index.css

@@ -4,19 +4,22 @@
     --caret-height: 7px;
     --caret-offset: 4px;
     --caret-border-color: var(--color-border);
-    --tooltip-x: -50%;
     --tooltip-caret-x: 0px;
+    --tooltip-caret-y: 0px;
     --tooltip-max-width: none;
 
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: var(--z-portal-element);
+    pointer-events: none;
+
     opacity: 0;
     background-color: var(--color-bg-tooltip);
-    position: absolute;
-    z-index: 3;
-    left: 50%;
     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);
@@ -26,6 +29,11 @@
     box-shadow: var(--elevation-300-tooltip);
     visibility: hidden;
 
+    &[data-wrap] {
+      white-space: normal;
+      overflow-wrap: break-word;
+    }
+
     &.field-error {
       background-color: var(--color-bg-danger);
       color: var(--color-text-ondanger);
@@ -46,16 +54,12 @@
       width: 100%;
     }
 
+    /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
     @media (max-width: 768px) {
       display: none;
     }
   }
 
-  .tooltip--wrap {
-    white-space: normal;
-    overflow-wrap: break-word;
-  }
-
   .tooltip__caret {
     position: absolute;
     pointer-events: none;
@@ -76,7 +80,6 @@
   .tooltip--show {
     visibility: visible;
     opacity: 1;
-    transition: opacity 0.2s ease-in-out;
     cursor: default;
   }
 
@@ -94,15 +97,9 @@
   }
 
   .tooltip--position-top {
-    top: 0;
-    transform: translate3d(
-      var(--tooltip-x),
-      calc(-100% - var(--caret-height) - var(--caret-offset) + 1px),
-      0
-    );
-
     .tooltip__caret {
       --color-border: var(--ramp-grey-700);
+      /* stylelint-disable-next-line plugin/no-subpixel-values -- TODO: pre-existing; revisit this sub-pixel value */
       top: calc(100% - 0.5px);
     }
 
@@ -112,14 +109,8 @@
   }
 
   .tooltip--position-bottom {
-    top: 100%;
-    transform: translate3d(
-      var(--tooltip-x),
-      calc(var(--caret-height) + var(--caret-offset) - 1px),
-      0
-    );
-
     .tooltip__caret {
+      /* stylelint-disable-next-line plugin/no-subpixel-values -- TODO: pre-existing; revisit this sub-pixel value */
       bottom: calc(100% - 0.5px);
       transform: rotate(180deg);
     }
@@ -134,28 +125,25 @@
   }
 
   .tooltip--position-left {
-    top: 50%;
-    left: 0;
-    transform: translate3d(calc(-100% - var(--caret-height) - var(--caret-offset)), -50%, 0);
-
     .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)) rotate(-90deg);
+      transform: translateY(calc(1 * var(--caret-width) / 2 + var(--tooltip-caret-y)))
+        rotate(-90deg);
       transform-origin: top left;
     }
   }
 
   .tooltip--position-right {
-    top: 50%;
-    left: 100%;
-    transform: translate3d(calc(var(--caret-height) + var(--caret-offset)), -50%, 0);
-
     .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)) rotate(90deg);
+      transform: translateY(calc(1 * var(--caret-width) / 2 + var(--tooltip-caret-y))) rotate(90deg);
       transform-origin: top right;
     }
   }

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

@@ -1,17 +1,25 @@
 import React from 'react';
 import './index.css';
+type Side = 'bottom' | 'left' | 'right' | 'top';
 export type Props = {
     alignCaret?: 'center' | 'left' | 'right';
-    boundingRef?: React.RefObject<HTMLElement | null>;
+    'aria-hidden'?: boolean;
     children: React.ReactNode;
     className?: string;
     delay?: number;
-    position?: 'bottom' | 'left' | 'right' | 'top';
+    id?: string;
+    portal?: boolean;
+    position?: Side;
+    role?: 'alert' | 'tooltip';
     show?: boolean;
     /**
-     * If the tooltip position should not change depending on if the toolbar is outside the boundingRef. @default false
+     * Disables adaptive placement: the tooltip always renders on `position` (or its
+     * default) instead of flipping to whichever side has room. It does not affect
+     * the `portal` setting. @default false
      */
     staticPositioning?: boolean;
+    tabIndex?: number;
 };
 export declare const Tooltip: React.FC<Props>;
+export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Tooltip/index.tsx"],"names":[],"mappings":"AACA,OAAO,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"}
+{"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,CAoPnC,CAAA"}