@payloadcms/ui 4.0.0-beta.5 → 4.0.0-beta.6

package/dist/elements/SortColumn/index.css

@@ -42,6 +42,7 @@
 
   .sort-column__button {
     margin: 0;
+    padding: 0;
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -50,22 +51,65 @@
     cursor: pointer;
     border-radius: var(--button-radius);
     color: var(--color-icon-tertiary);
+    position: relative;
+    isolation: isolate;
+    flex-shrink: 0;
+    width: var(--spacer-4);
+    height: var(--spacer-4);
+
+    /* Expand targets outward so the arrows retain their spacing without overlapping targets. */
+    &:first-child {
+      margin-inline-start: calc(var(--spacer-2) * -1);
+      justify-content: flex-end;
+
+      &::before {
+        inset-inline-start: auto;
+      }
+    }
+
+    &:last-child {
+      margin-inline-end: calc(var(--spacer-2) * -1);
+      justify-content: flex-start;
+
+      &::before {
+        inset-inline-end: auto;
+      }
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset-block: 0;
+      inset-inline: 0;
+      margin: auto;
+      width: var(--spacer-3);
+      height: var(--spacer-3);
+      border-radius: inherit;
+      z-index: -1;
+    }
 
     &.sort-column--active {
       color: var(--color-icon);
-      background: var(--color-bg-secondary);
+      &::before {
+        background: var(--color-bg-secondary);
+      }
     }
 
     &:hover {
       color: var(--color-icon);
-      background: var(--color-bg-secondary);
+      &::before {
+        background: var(--color-bg-secondary);
+      }
     }
 
     &:focus-visible {
-      outline: var(--stroke-width-small) solid var(--accessibility-focus-color);
-      outline-offset: var(--accessibility-outline-offset);
-      border-radius: var(--button-radius);
+      outline: none;
       color: var(--color-icon);
+
+      &::before {
+        outline: var(--stroke-width-small) solid var(--accessibility-focus-color);
+        outline-offset: var(--accessibility-outline-offset);
+      }
     }
   }
 

package/dist/elements/SortRow/index.css

@@ -14,9 +14,7 @@
         color: var(--color-icon);
       }
 
-      &:focus-visible {
-        outline: var(--accessibility-outline);
-        outline-offset: var(--accessibility-outline-offset);
+      .cell-_dragHandle > :focus-visible & {
         color: var(--color-icon);
       }
     }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/SortRow/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,OAAO,yBASnB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/SortRow/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,OAAO,yBAWnB,CAAA"}

package/dist/elements/SortRow/index.js

@@ -1,32 +1,38 @@
 'use client';
 
 import { c as _c } from "react/compiler-runtime";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { AlignJustifiedIcon } from '../../icons/AlignJustified/index.js';
 import { useListQuery } from '../../providers/ListQuery/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
 import './index.css';
 const baseClass = 'sort-row';
 export const SortRow = () => {
-  const $ = _c(2);
+  const $ = _c(3);
   const {
     orderableFieldName,
     query
   } = useListQuery();
+  const {
+    t
+  } = useTranslation();
   const isActive = query.sort === orderableFieldName || query.sort === `-${orderableFieldName}`;
   const t0 = `${baseClass} ${isActive ? "active" : ""}`;
   let t1;
-  if ($[0] !== t0) {
-    t1 = _jsx("div", {
+  if ($[0] !== t || $[1] !== t0) {
+    t1 = _jsxs("div", {
       className: t0,
-      role: "button",
-      tabIndex: 0,
-      children: _jsx(AlignJustifiedIcon, {})
+      children: [_jsx("span", {
+        className: "sr-only",
+        children: t("general:dragToMove")
+      }), _jsx(AlignJustifiedIcon, {})]
     });
-    $[0] = t0;
-    $[1] = t1;
+    $[0] = t;
+    $[1] = t0;
+    $[2] = t1;
   } else {
-    t1 = $[1];
+    t1 = $[2];
   }
   return t1;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","AlignJustifiedIcon","useListQuery","baseClass","SortRow","$","orderableFieldName","query","isActive","sort","t0","t1","_jsx","className","role","tabIndex","children"],"sources":["../../../src/elements/SortRow/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport { AlignJustifiedIcon } from '../../icons/AlignJustified/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport './index.css'\n\nconst baseClass = 'sort-row'\n\nexport const SortRow = () => {\n  const { orderableFieldName, query } = useListQuery()\n  const isActive = query.sort === orderableFieldName || query.sort === `-${orderableFieldName}`\n\n  return (\n    <div className={`${baseClass} ${isActive ? 'active' : ''}`} role=\"button\" tabIndex={0}>\n      <AlignJustifiedIcon />\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAEA,OAAOC,KAAA,MAAW;AAElB,SAASC,kBAAkB,QAAQ;AACnC,SAASC,YAAY,QAAQ;AAC7B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,OAAA,GAAUA,CAAA;EAAA,MAAAC,CAAA,GAAAN,EAAA;EACrB;IAAAO,kBAAA;IAAAC;EAAA,IAAsCL,YAAA;EACtC,MAAAM,QAAA,GAAiBD,KAAA,CAAAE,IAAU,KAAKH,kBAA6D,IAAvCC,KAAA,CAAAE,IAAU,KAAK,IAAIH,kBAAA,EAAoB;EAG3E,MAAAI,EAAA,MAAGP,SAAA,IAAaK,QAAA,WAAsB,GAAtB,EAAsB,EAAI;EAAA,IAAAG,EAAA;EAAA,IAAAN,CAAA,QAAAK,EAAA;IAA1DC,EAAA,GAAAC,IAAA,CAAC;MAAAC,SAAA,EAAeH,EAA0C;MAAAI,IAAA,EAAO;MAAAC,QAAA,EAAmB;MAAAC,QAAA,EAClFJ,IAAA,CAACX,kBAAA;;;;;;;SADHU,E;CAIJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","AlignJustifiedIcon","useListQuery","useTranslation","baseClass","SortRow","$","orderableFieldName","query","t","isActive","sort","t0","t1","_jsxs","className","children","_jsx"],"sources":["../../../src/elements/SortRow/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport { AlignJustifiedIcon } from '../../icons/AlignJustified/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.css'\n\nconst baseClass = 'sort-row'\n\nexport const SortRow = () => {\n  const { orderableFieldName, query } = useListQuery()\n  const { t } = useTranslation()\n  const isActive = query.sort === orderableFieldName || query.sort === `-${orderableFieldName}`\n\n  return (\n    <div className={`${baseClass} ${isActive ? 'active' : ''}`}>\n      <span className=\"sr-only\">{t('general:dragToMove')}</span>\n      <AlignJustifiedIcon />\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAEA,OAAOC,KAAA,MAAW;AAElB,SAASC,kBAAkB,QAAQ;AACnC,SAASC,YAAY,QAAQ;AAC7B,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,OAAA,GAAUA,CAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EACrB;IAAAQ,kBAAA;IAAAC;EAAA,IAAsCN,YAAA;EACtC;IAAAO;EAAA,IAAcN,cAAA;EACd,MAAAO,QAAA,GAAiBF,KAAA,CAAAG,IAAU,KAAKJ,kBAA6D,IAAvCC,KAAA,CAAAG,IAAU,KAAK,IAAIJ,kBAAA,EAAoB;EAG3E,MAAAK,EAAA,MAAGR,SAAA,IAAaM,QAAA,WAAsB,GAAtB,EAAsB,EAAI;EAAA,IAAAG,EAAA;EAAA,IAAAP,CAAA,QAAAG,CAAA,IAAAH,CAAA,QAAAM,EAAA;IAA1DC,EAAA,GAAAC,KAAA,CAAC;MAAAC,SAAA,EAAeH,EAA0C;MAAAI,QAAA,E,CACxDC,IAAA,CAAC;QAAAF,SAAA,EAAe;QAAAC,QAAA,EAAWP,CAAA,CAAE;UAC7BQ,IAAA,CAAChB,kBAAA;;;;;;;;SAFHY,E;CAKJ","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/StepNav/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAgD,MAAM,OAAO,CAAA;AAEpE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAM7C,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAC1D,OAAO,aAAa,CAAA;AAEpB,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAM5C,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC;IACtB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAC5B,CAkMA,CAAA;AAED,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,UAAU,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/StepNav/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAgD,MAAM,OAAO,CAAA;AAEpE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAM7C,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAC1D,OAAO,aAAa,CAAA;AAEpB,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAM5C,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC;IACtB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAC5B,CAmMA,CAAA;AAED,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,UAAU,EAAE,CAAA"}

package/dist/elements/StepNav/index.js

@@ -82,6 +82,7 @@ const StepNav = ({
     isLast
   }) => {
     const StepLabel = getTranslation(item.label, i18n);
+    const title = typeof StepLabel === 'string' ? StepLabel : undefined;
     const isCurrent = item.isCurrent ?? isLast;
     const itemClassName = [`${baseClass}__item`, isLast ? `${baseClass}__last` : undefined, isFirst ? `${baseClass}__first` : undefined].filter(Boolean).join(' ');
     if (item.url) {
@@ -90,7 +91,8 @@ const StepNav = ({
         className: itemClassName,
         el: "link",
         extraButtonProps: {
-          'aria-current': isCurrent ? 'page' : false
+          'aria-current': isCurrent ? 'page' : false,
+          title
         },
         url: item.url,
         children: StepLabel
@@ -99,6 +101,7 @@ const StepNav = ({
     return /*#__PURE__*/_jsx("span", {
       "aria-current": isCurrent ? 'page' : undefined,
       className: itemClassName,
+      title: title,
       children: StepLabel
     });
   };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["getTranslation","React","Fragment","useEffect","useRef","useState","useConfig","useTranslation","Button","Popup","PopupList","StepNavProvider","useStepNav","SetStepNav","baseClass","minItemsToCollapse","StepNav","className","i18n","stepNav","config","routes","admin","t","navRef","measurerRef","isCollapsed","setIsCollapsed","firstItem","hasDashboardDropdown","url","label","isValidElement","stepNavItems","canCollapse","length","nav","current","measurer","container","parentElement","measure","available","clientWidth","needed","getBoundingClientRect","width","observer","ResizeObserver","observe","isEffectActive","document","fonts","ready","then","disconnect","renderItem","item","isFirst","isLast","StepLabel","isCurrent","itemClassName","undefined","filter","Boolean","join","_jsx","buttonStyle","el","extraButtonProps","separator","shouldCollapse","collapsedItems","slice","lastItem","_jsxs","ref","button","buttonAriaLabel","buttonClassName","buttonType","horizontalAlign","noBackground","popupType","render","close","ButtonGroup","map","i","ariaCurrent","href","onClick","size","verticalAlign","inert"],"sources":["../../../src/elements/StepNav/index.tsx"],"sourcesContent":["'use client'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { Fragment, useEffect, useRef, useState } from 'react'\n\nimport type { StepNavItem } from './types.js'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { Popup, PopupList } from '../Popup/index.js'\nimport { StepNavProvider, useStepNav } from './context.js'\nimport './index.css'\n\nexport { SetStepNav } from './SetStepNav.js'\n\nconst baseClass = 'step-nav'\n\nconst minItemsToCollapse = 4\n\nconst StepNav: React.FC<{\n  readonly className?: string\n}> = ({ className }) => {\n  const { i18n } = useTranslation()\n\n  const { stepNav } = useStepNav()\n\n  const {\n    config: {\n      routes: { admin },\n    },\n  } = useConfig()\n\n  const { t } = useTranslation()\n\n  const navRef = useRef<HTMLElement>(null)\n  const measurerRef = useRef<HTMLDivElement>(null)\n  const [isCollapsed, setIsCollapsed] = useState(false)\n\n  // Check if first item is a dashboard dropdown (React element with no URL)\n  // In that case, it replaces the home element entirely\n  const firstItem = stepNav[0]\n  const hasDashboardDropdown =\n    firstItem &&\n    !firstItem.url &&\n    typeof firstItem.label !== 'string' &&\n    React.isValidElement(firstItem.label)\n\n  const stepNavItems = hasDashboardDropdown\n    ? stepNav\n    : [\n        {\n          label: t('general:dashboard'),\n          url: admin,\n        },\n        ...stepNav,\n      ]\n\n  const canCollapse = !hasDashboardDropdown && stepNavItems.length >= minItemsToCollapse\n\n  // Collapse only when the expanded breadcrumbs (measured via the hidden\n  // measurer) can't fit the available width.\n  useEffect(() => {\n    if (!canCollapse) {\n      setIsCollapsed(false)\n      return\n    }\n\n    const nav = navRef.current\n    const measurer = measurerRef.current\n    const container = nav?.parentElement\n\n    if (!nav || !measurer || !container) {\n      return\n    }\n\n    const measure = () => {\n      const available = container.clientWidth\n      const needed = measurer.getBoundingClientRect().width\n      setIsCollapsed(needed - available > 1)\n    }\n\n    measure()\n\n    const observer = new ResizeObserver(measure)\n    observer.observe(container)\n\n    // A web font finishing loading can change the measured width without the\n    // container resizing, so the ResizeObserver alone won't catch it.\n    let isEffectActive = true\n    void document.fonts?.ready.then(() => {\n      if (isEffectActive) {\n        measure()\n      }\n    })\n\n    return () => {\n      isEffectActive = false\n      observer.disconnect()\n    }\n  }, [canCollapse, stepNav, i18n, admin, t])\n\n  const renderItem = (\n    item: StepNavItem,\n    { isFirst, isLast }: { isFirst: boolean; isLast: boolean },\n  ) => {\n    const StepLabel = getTranslation(item.label, i18n)\n    const isCurrent = item.isCurrent ?? isLast\n    const itemClassName = [\n      `${baseClass}__item`,\n      isLast ? `${baseClass}__last` : undefined,\n      isFirst ? `${baseClass}__first` : undefined,\n    ]\n      .filter(Boolean)\n      .join(' ')\n\n    if (item.url) {\n      return (\n        <Button\n          buttonStyle=\"ghost\"\n          className={itemClassName}\n          el=\"link\"\n          extraButtonProps={{ 'aria-current': isCurrent ? 'page' : false }}\n          url={item.url}\n        >\n          {StepLabel}\n        </Button>\n      )\n    }\n\n    return (\n      <span aria-current={isCurrent ? 'page' : undefined} className={itemClassName}>\n        {StepLabel}\n      </span>\n    )\n  }\n\n  const separator = <span className={`${baseClass}__separator`}>/</span>\n\n  const shouldCollapse = canCollapse && isCollapsed\n  const collapsedItems = shouldCollapse ? stepNavItems.slice(1, -1) : []\n  const lastItem = stepNavItems[stepNavItems.length - 1]\n\n  return (\n    <Fragment>\n      <nav\n        aria-label={t('general:breadcrumb')}\n        className={[baseClass, className].filter(Boolean).join(' ')}\n        ref={navRef}\n      >\n        {shouldCollapse ? (\n          <Fragment>\n            {renderItem(stepNavItems[0], { isFirst: true, isLast: false })}\n            {separator}\n            <Popup\n              button=\"…\"\n              buttonAriaLabel={t('general:moreOptions')}\n              buttonClassName={`${baseClass}__collapsed-toggle`}\n              buttonType=\"custom\"\n              className={`${baseClass}__collapsed`}\n              horizontalAlign=\"left\"\n              noBackground\n              popupType=\"menu\"\n              render={({ close }) => (\n                <PopupList.ButtonGroup className={`${baseClass}__collapsed-list`}>\n                  {collapsedItems.map((item, i) => (\n                    <PopupList.Button\n                      ariaCurrent={item.isCurrent ? 'page' : false}\n                      href={item.url}\n                      key={i}\n                      onClick={close}\n                    >\n                      {getTranslation(item.label, i18n)}\n                    </PopupList.Button>\n                  ))}\n                </PopupList.ButtonGroup>\n              )}\n              size=\"fit-content\"\n              verticalAlign=\"bottom\"\n            />\n            {separator}\n            {renderItem(lastItem, { isFirst: false, isLast: true })}\n          </Fragment>\n        ) : (\n          stepNavItems.map((item, i) => {\n            const isLast = stepNavItems.length === i + 1\n            const isFirst = i === 0\n\n            return (\n              <Fragment key={i}>\n                {renderItem(item, { isFirst, isLast })}\n                {!isLast && separator}\n              </Fragment>\n            )\n          })\n        )}\n      </nav>\n      {canCollapse ? (\n        <span aria-hidden=\"true\" className={`${baseClass}__measurer-clip`} inert>\n          <div className={`${baseClass}__measurer`} ref={measurerRef}>\n            {stepNavItems.map((item, i) => {\n              const isLast = stepNavItems.length === i + 1\n              const isFirst = i === 0\n\n              return (\n                <Fragment key={i}>\n                  {renderItem(item, { isFirst, isLast })}\n                  {!isLast && separator}\n                </Fragment>\n              )\n            })}\n          </div>\n        </span>\n      ) : null}\n    </Fragment>\n  )\n}\n\nexport { StepNav, StepNavItem, StepNavProvider, useStepNav }\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["getTranslation","React","Fragment","useEffect","useRef","useState","useConfig","useTranslation","Button","Popup","PopupList","StepNavProvider","useStepNav","SetStepNav","baseClass","minItemsToCollapse","StepNav","className","i18n","stepNav","config","routes","admin","t","navRef","measurerRef","isCollapsed","setIsCollapsed","firstItem","hasDashboardDropdown","url","label","isValidElement","stepNavItems","canCollapse","length","nav","current","measurer","container","parentElement","measure","available","clientWidth","needed","getBoundingClientRect","width","observer","ResizeObserver","observe","isEffectActive","document","fonts","ready","then","disconnect","renderItem","item","isFirst","isLast","StepLabel","title","undefined","isCurrent","itemClassName","filter","Boolean","join","_jsx","buttonStyle","el","extraButtonProps","separator","shouldCollapse","collapsedItems","slice","lastItem","_jsxs","ref","button","buttonAriaLabel","buttonClassName","buttonType","horizontalAlign","noBackground","popupType","render","close","ButtonGroup","map","i","ariaCurrent","href","onClick","size","verticalAlign","inert"],"sources":["../../../src/elements/StepNav/index.tsx"],"sourcesContent":["'use client'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { Fragment, useEffect, useRef, useState } from 'react'\n\nimport type { StepNavItem } from './types.js'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { Popup, PopupList } from '../Popup/index.js'\nimport { StepNavProvider, useStepNav } from './context.js'\nimport './index.css'\n\nexport { SetStepNav } from './SetStepNav.js'\n\nconst baseClass = 'step-nav'\n\nconst minItemsToCollapse = 4\n\nconst StepNav: React.FC<{\n  readonly className?: string\n}> = ({ className }) => {\n  const { i18n } = useTranslation()\n\n  const { stepNav } = useStepNav()\n\n  const {\n    config: {\n      routes: { admin },\n    },\n  } = useConfig()\n\n  const { t } = useTranslation()\n\n  const navRef = useRef<HTMLElement>(null)\n  const measurerRef = useRef<HTMLDivElement>(null)\n  const [isCollapsed, setIsCollapsed] = useState(false)\n\n  // Check if first item is a dashboard dropdown (React element with no URL)\n  // In that case, it replaces the home element entirely\n  const firstItem = stepNav[0]\n  const hasDashboardDropdown =\n    firstItem &&\n    !firstItem.url &&\n    typeof firstItem.label !== 'string' &&\n    React.isValidElement(firstItem.label)\n\n  const stepNavItems = hasDashboardDropdown\n    ? stepNav\n    : [\n        {\n          label: t('general:dashboard'),\n          url: admin,\n        },\n        ...stepNav,\n      ]\n\n  const canCollapse = !hasDashboardDropdown && stepNavItems.length >= minItemsToCollapse\n\n  // Collapse only when the expanded breadcrumbs (measured via the hidden\n  // measurer) can't fit the available width.\n  useEffect(() => {\n    if (!canCollapse) {\n      setIsCollapsed(false)\n      return\n    }\n\n    const nav = navRef.current\n    const measurer = measurerRef.current\n    const container = nav?.parentElement\n\n    if (!nav || !measurer || !container) {\n      return\n    }\n\n    const measure = () => {\n      const available = container.clientWidth\n      const needed = measurer.getBoundingClientRect().width\n      setIsCollapsed(needed - available > 1)\n    }\n\n    measure()\n\n    const observer = new ResizeObserver(measure)\n    observer.observe(container)\n\n    // A web font finishing loading can change the measured width without the\n    // container resizing, so the ResizeObserver alone won't catch it.\n    let isEffectActive = true\n    void document.fonts?.ready.then(() => {\n      if (isEffectActive) {\n        measure()\n      }\n    })\n\n    return () => {\n      isEffectActive = false\n      observer.disconnect()\n    }\n  }, [canCollapse, stepNav, i18n, admin, t])\n\n  const renderItem = (\n    item: StepNavItem,\n    { isFirst, isLast }: { isFirst: boolean; isLast: boolean },\n  ) => {\n    const StepLabel = getTranslation(item.label, i18n)\n    const title = typeof StepLabel === 'string' ? StepLabel : undefined\n    const isCurrent = item.isCurrent ?? isLast\n    const itemClassName = [\n      `${baseClass}__item`,\n      isLast ? `${baseClass}__last` : undefined,\n      isFirst ? `${baseClass}__first` : undefined,\n    ]\n      .filter(Boolean)\n      .join(' ')\n\n    if (item.url) {\n      return (\n        <Button\n          buttonStyle=\"ghost\"\n          className={itemClassName}\n          el=\"link\"\n          extraButtonProps={{ 'aria-current': isCurrent ? 'page' : false, title }}\n          url={item.url}\n        >\n          {StepLabel}\n        </Button>\n      )\n    }\n\n    return (\n      <span aria-current={isCurrent ? 'page' : undefined} className={itemClassName} title={title}>\n        {StepLabel}\n      </span>\n    )\n  }\n\n  const separator = <span className={`${baseClass}__separator`}>/</span>\n\n  const shouldCollapse = canCollapse && isCollapsed\n  const collapsedItems = shouldCollapse ? stepNavItems.slice(1, -1) : []\n  const lastItem = stepNavItems[stepNavItems.length - 1]\n\n  return (\n    <Fragment>\n      <nav\n        aria-label={t('general:breadcrumb')}\n        className={[baseClass, className].filter(Boolean).join(' ')}\n        ref={navRef}\n      >\n        {shouldCollapse ? (\n          <Fragment>\n            {renderItem(stepNavItems[0], { isFirst: true, isLast: false })}\n            {separator}\n            <Popup\n              button=\"…\"\n              buttonAriaLabel={t('general:moreOptions')}\n              buttonClassName={`${baseClass}__collapsed-toggle`}\n              buttonType=\"custom\"\n              className={`${baseClass}__collapsed`}\n              horizontalAlign=\"left\"\n              noBackground\n              popupType=\"menu\"\n              render={({ close }) => (\n                <PopupList.ButtonGroup className={`${baseClass}__collapsed-list`}>\n                  {collapsedItems.map((item, i) => (\n                    <PopupList.Button\n                      ariaCurrent={item.isCurrent ? 'page' : false}\n                      href={item.url}\n                      key={i}\n                      onClick={close}\n                    >\n                      {getTranslation(item.label, i18n)}\n                    </PopupList.Button>\n                  ))}\n                </PopupList.ButtonGroup>\n              )}\n              size=\"fit-content\"\n              verticalAlign=\"bottom\"\n            />\n            {separator}\n            {renderItem(lastItem, { isFirst: false, isLast: true })}\n          </Fragment>\n        ) : (\n          stepNavItems.map((item, i) => {\n            const isLast = stepNavItems.length === i + 1\n            const isFirst = i === 0\n\n            return (\n              <Fragment key={i}>\n                {renderItem(item, { isFirst, isLast })}\n                {!isLast && separator}\n              </Fragment>\n            )\n          })\n        )}\n      </nav>\n      {canCollapse ? (\n        <span aria-hidden=\"true\" className={`${baseClass}__measurer-clip`} inert>\n          <div className={`${baseClass}__measurer`} ref={measurerRef}>\n            {stepNavItems.map((item, i) => {\n              const isLast = stepNavItems.length === i + 1\n              const isFirst = i === 0\n\n              return (\n                <Fragment key={i}>\n                  {renderItem(item, { isFirst, isLast })}\n                  {!isLast && separator}\n                </Fragment>\n              )\n            })}\n          </div>\n        </span>\n      ) : null}\n    </Fragment>\n  )\n}\n\nexport { StepNav, StepNavItem, StepNavProvider, useStepNav }\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Tabs/index.css

@@ -58,7 +58,7 @@
   }
 
   .tabs__tab-button:focus-visible {
-    outline-offset: -1px;
+    outline-offset: var(--accessibility-outline-inset);
   }
 
   .tabs__tab-button--hidden {

package/dist/elements/TimezonePicker/index.css

@@ -122,7 +122,7 @@
 
         &:focus-visible {
           outline: var(--stroke-width-small) solid var(--accessibility-focus-color);
-          outline-offset: calc(-1 * var(--stroke-width-small));
+          outline-offset: var(--accessibility-outline-inset);
         }
       }
 
@@ -130,15 +130,16 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        padding-inline: calc(-1 * var(--stroke-width-small));
+        padding: 0;
         cursor: pointer;
-        margin-left: calc(var(--spacer-1) / 2);
-        height: var(--spacer-3);
+        margin-inline-start: calc(var(--spacer-1) / 2);
+        min-width: var(--spacer-4);
+        height: var(--spacer-4);
         overflow: visible;
         border-radius: var(--button-radius);
 
         &:focus-visible {
-          outline: var(--stroke-width-small) solid var(--accessibility-focus-color);
+          outline-offset: var(--accessibility-outline-inset);
         }
       }
     }

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;AAqEpB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAqE1C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/TimezonePicker/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAQvC,OAAO,aAAa,CAAA;AA0DpB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAqE1C,CAAA"}

package/dist/elements/TimezonePicker/index.js

@@ -13,54 +13,79 @@ import { formatOptions } from '../WhereBuilder/Condition/Select/formatOptions.js
 import './index.css';
 const SmallDropdownIndicator = props => {
   const {
-    innerProps: {
-      ref,
-      ...restInnerProps
-    },
+    innerProps,
     isDisabled
   } = props;
   if (isDisabled) {
     return null;
   }
-  return /*#__PURE__*/_jsx("button", {
+  return /*#__PURE__*/_jsx("div", {
     className: "timezone-picker__dropdown-indicator",
-    ref: ref,
-    ...restInnerProps,
-    onKeyDown: e => {
-      if (e.key === 'Enter') {
-        e.key = ' ';
-      }
-    },
-    type: "button",
+    ...innerProps,
     children: /*#__PURE__*/_jsx(ChevronIcon, {
       size: 16
     })
   });
 };
 const SmallClearIndicator = props => {
+  const $ = _c(9);
   const {
-    clearValue,
-    innerProps: {
-      ref,
-      ...restInnerProps
-    }
+    clearValue
   } = props;
-  return /*#__PURE__*/_jsx("div", {
-    className: "timezone-picker__clear-indicator",
-    ref: typeof ref === 'string' ? null : ref,
-    ...restInnerProps,
-    onKeyDown: e => {
-      if (e.key === 'Enter') {
-        clearValue();
-        e.stopPropagation();
-      }
-    },
-    role: "button",
-    tabIndex: 0,
-    children: /*#__PURE__*/_jsx(CircledXIcon, {
-      size: 24
-    })
-  });
+  const {
+    t
+  } = useTranslation();
+  let t0;
+  if ($[0] !== t) {
+    t0 = t("general:clear");
+    $[0] = t;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  let t1;
+  if ($[2] !== t) {
+    t1 = t("general:timezone");
+    $[2] = t;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  const t2 = `${t0} ${t1}`;
+  let t3;
+  if ($[4] !== clearValue) {
+    t3 = event => {
+      event.stopPropagation();
+      const input = event.currentTarget.closest(".timezone-picker")?.querySelector("[role=\"combobox\"]");
+      clearValue();
+      input?.focus();
+    };
+    $[4] = clearValue;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  let t4;
+  if ($[6] !== t2 || $[7] !== t3) {
+    t4 = _jsx("button", {
+      "aria-label": t2,
+      className: "timezone-picker__clear-indicator",
+      onClick: t3,
+      onKeyDown: _temp,
+      onMouseDown: _temp2,
+      onTouchEnd: _temp3,
+      type: "button",
+      children: _jsx(CircledXIcon, {
+        size: 24
+      })
+    });
+    $[6] = t2;
+    $[7] = t3;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  return t4;
 };
 const TimezoneOption = props => {
   const {
@@ -137,8 +162,9 @@ export const TimezonePicker = props => {
     }
     t2 = _jsxs("div", {
       className: "timezone-picker-wrapper",
-      children: [_jsxs("span", {
+      children: [_jsxs("label", {
         className: "timezone-picker__label",
+        htmlFor: id,
         children: [t("general:timezone"), required && _jsx("span", {
           className: "timezone-picker__required",
           children: "*"
@@ -146,8 +172,8 @@ export const TimezonePicker = props => {
       }), _jsx(ReactSelect, {
         className: "timezone-picker",
         classNames: {
-          menu: _temp,
-          menuList: _temp2
+          menu: _temp4,
+          menuList: _temp5
         },
         components: {
           ClearIndicator: SmallClearIndicator,
@@ -165,8 +191,8 @@ export const TimezonePicker = props => {
         options,
         placeholder: t("general:none"),
         styles: {
-          control: _temp3,
-          option: _temp4
+          control: _temp6,
+          option: _temp7
         },
         value: selectedTimezone
       })]
@@ -184,19 +210,30 @@ export const TimezonePicker = props => {
   }
   return t2;
 };
-function _temp() {
+function _temp(event_0) {
+  if (event_0.key === " " || event_0.key === "Enter") {
+    event_0.stopPropagation();
+  }
+}
+function _temp2(event_1) {
+  return event_1.stopPropagation();
+}
+function _temp3(event_2) {
+  return event_2.stopPropagation();
+}
+function _temp4() {
   return "timezone-picker__menu";
 }
-function _temp2() {
+function _temp5() {
   return "timezone-picker__menu-list";
 }
-function _temp3(base) {
+function _temp6(base) {
   return {
     ...base,
     flexWrap: "nowrap"
   };
 }
-function _temp4(base_0) {
+function _temp7(base_0) {
   return {
     ...base_0,
     alignItems: "center",

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","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","t0","t1","t2","t_0","value","find","Boolean","length","t3","val","classNames","menu","_temp","menuList","_temp2","ClearIndicator","DropdownIndicator","customProps","menuPortalTheme","disabled","inputId","isClearable","isCreatable","placeholder","styles","control","_temp3","option","_temp4","base","flexWrap","base_0","alignItems","display","gap","minWidth"],"sources":["../../../src/elements/TimezonePicker/index.tsx"],"sourcesContent":["'use client'\n\nimport type { OptionObject } from 'payload'\nimport type React from 'react'\nimport type { JSX } from 'react'\nimport type {\n  ClearIndicatorProps,\n  DropdownIndicatorProps,\n  OptionProps,\n  StylesConfig,\n} from 'react-select'\n\nimport { useMemo } from 'react'\nimport { components as rsComponents } from 'react-select'\n\nimport type { Option as OptionType } from '../ReactSelect/types.js'\nimport type { Props } from './types.js'\n\nimport { CheckIcon } from '../../icons/Check/index.js'\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { CircledXIcon } from '../../icons/CircledX/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { ReactSelect } from '../ReactSelect/index.js'\nimport { formatOptions } from '../WhereBuilder/Condition/Select/formatOptions.js'\nimport './index.css'\n\nconst SmallDropdownIndicator: React.FC<\n  {\n    innerProps: JSX.IntrinsicElements['button']\n  } & DropdownIndicatorProps<OptionType, true>\n> = (props) => {\n  const {\n    innerProps: { ref, ...restInnerProps },\n    isDisabled,\n  } = props\n\n  if (isDisabled) {\n    return null\n  }\n\n  return (\n    <button\n      className=\"timezone-picker__dropdown-indicator\"\n      ref={ref}\n      {...restInnerProps}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter') {\n          e.key = ' '\n        }\n      }}\n      type=\"button\"\n    >\n      <ChevronIcon size={16} />\n    </button>\n  )\n}\n\nconst SmallClearIndicator: React.FC<ClearIndicatorProps<OptionType, true>> = (props) => {\n  const {\n    clearValue,\n    innerProps: { ref, ...restInnerProps },\n  } = props\n\n  return (\n    <div\n      className=\"timezone-picker__clear-indicator\"\n      ref={typeof ref === 'string' ? null : ref}\n      {...restInnerProps}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter') {\n          clearValue()\n          e.stopPropagation()\n        }\n      }}\n      role=\"button\"\n      tabIndex={0}\n    >\n      <CircledXIcon size={24} />\n    </div>\n  )\n}\n\nconst TimezoneOption: React.FC<OptionProps<OptionType, false>> = (props) => {\n  const { children } = props\n\n  return (\n    <rsComponents.Option {...props}>\n      <CheckIcon className=\"timezone-picker__option-check\" size={16} />\n      <span className=\"timezone-picker__option-label\">{children}</span>\n    </rsComponents.Option>\n  )\n}\n\nexport const TimezonePicker: React.FC<Props> = (props) => {\n  const {\n    id,\n    onChange: onChangeFromProps,\n    options: optionsFromProps,\n    readOnly: readOnlyFromProps,\n    required,\n    selectedTimezone: selectedTimezoneFromProps,\n  } = props\n\n  const { t } = useTranslation()\n\n  const options = formatOptions(optionsFromProps)\n\n  const selectedTimezone = useMemo(() => {\n    return options.find((t) => {\n      const value = typeof t === 'string' ? t : t.value\n      return value === selectedTimezoneFromProps\n    })\n  }, [options, selectedTimezoneFromProps])\n\n  const readOnly = Boolean(readOnlyFromProps) || options.length === 1\n\n  return (\n    <div className=\"timezone-picker-wrapper\">\n      <span className=\"timezone-picker__label\">\n        {t('general:timezone')}\n        {required && <span className=\"timezone-picker__required\">*</span>}\n      </span>\n      <ReactSelect\n        className=\"timezone-picker\"\n        classNames={{\n          menu: () => 'timezone-picker__menu',\n          menuList: () => 'timezone-picker__menu-list',\n        }}\n        components={{\n          ClearIndicator: SmallClearIndicator,\n          DropdownIndicator: SmallDropdownIndicator,\n          Option: TimezoneOption,\n        }}\n        customProps={{ menuPortalTheme: 'dark' }}\n        disabled={readOnly}\n        inputId={id}\n        isClearable={!required}\n        isCreatable={false}\n        onChange={(val: OptionObject) => {\n          if (onChangeFromProps) {\n            onChangeFromProps(val?.value || '')\n          }\n        }}\n        options={options}\n        placeholder={t('general:none')}\n        styles={{\n          control: (base) => ({\n            ...base,\n            flexWrap: 'nowrap',\n          }),\n          option: (base) => ({\n            ...base,\n            alignItems: 'center',\n            display: 'flex',\n            gap: 'var(--spacer-1)',\n            minWidth: 0,\n          }),\n        }}\n        value={selectedTimezone}\n      />\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","useMemo","components","rsComponents","CheckIcon","ChevronIcon","CircledXIcon","useTranslation","ReactSelect","formatOptions","SmallDropdownIndicator","props","innerProps","isDisabled","_jsx","className","size","SmallClearIndicator","$","clearValue","t","t0","t1","t2","t3","event","stopPropagation","input","currentTarget","closest","querySelector","focus","t4","onClick","onKeyDown","_temp","onMouseDown","_temp2","onTouchEnd","_temp3","type","children","TimezoneOption","_jsxs","Option","TimezonePicker","id","onChange","onChangeFromProps","options","optionsFromProps","readOnly","readOnlyFromProps","required","selectedTimezone","selectedTimezoneFromProps","t_0","value","find","Boolean","length","val","htmlFor","classNames","menu","_temp4","menuList","_temp5","ClearIndicator","DropdownIndicator","customProps","menuPortalTheme","disabled","inputId","isClearable","isCreatable","placeholder","styles","control","_temp6","option","_temp7","event_0","key","event_1","event_2","base","flexWrap","base_0","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 { ClearIndicatorProps, DropdownIndicatorProps, OptionProps } 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<DropdownIndicatorProps<OptionType, true>> = (props) => {\n  const { innerProps, isDisabled } = props\n\n  if (isDisabled) {\n    return null\n  }\n\n  return (\n    <div className=\"timezone-picker__dropdown-indicator\" {...innerProps}>\n      <ChevronIcon size={16} />\n    </div>\n  )\n}\n\nconst SmallClearIndicator: React.FC<ClearIndicatorProps<OptionType, true>> = (props) => {\n  const { clearValue } = props\n  const { t } = useTranslation()\n\n  return (\n    <button\n      aria-label={`${t('general:clear')} ${t('general:timezone')}`}\n      className=\"timezone-picker__clear-indicator\"\n      onClick={(event) => {\n        event.stopPropagation()\n        const input = event.currentTarget\n          .closest('.timezone-picker')\n          ?.querySelector<HTMLInputElement>('[role=\"combobox\"]')\n\n        clearValue()\n        input?.focus()\n      }}\n      onKeyDown={(event) => {\n        if (event.key === ' ' || event.key === 'Enter') {\n          event.stopPropagation()\n        }\n      }}\n      onMouseDown={(event) => event.stopPropagation()}\n      onTouchEnd={(event) => event.stopPropagation()}\n      type=\"button\"\n    >\n      <CircledXIcon size={24} />\n    </button>\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      <label className=\"timezone-picker__label\" htmlFor={id}>\n        {t('general:timezone')}\n        {required && <span className=\"timezone-picker__required\">*</span>}\n      </label>\n      <ReactSelect\n        className=\"timezone-picker\"\n        classNames={{\n          menu: () => 'timezone-picker__menu',\n          menuList: () => 'timezone-picker__menu-list',\n        }}\n        components={{\n          ClearIndicator: SmallClearIndicator,\n          DropdownIndicator: SmallDropdownIndicator,\n          Option: TimezoneOption,\n        }}\n        customProps={{ menuPortalTheme: 'dark' }}\n        disabled={readOnly}\n        inputId={id}\n        isClearable={!required}\n        isCreatable={false}\n        onChange={(val: OptionObject) => {\n          if (onChangeFromProps) {\n            onChangeFromProps(val?.value || '')\n          }\n        }}\n        options={options}\n        placeholder={t('general:none')}\n        styles={{\n          control: (base) => ({\n            ...base,\n            flexWrap: 'nowrap',\n          }),\n          option: (base) => ({\n            ...base,\n            alignItems: 'center',\n            display: 'flex',\n            gap: 'var(--spacer-1)',\n            minWidth: 0,\n          }),\n        }}\n        value={selectedTimezone}\n      />\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Upload/index.js

@@ -385,6 +385,7 @@ const UploadComponent = props => {
               className: `${baseClass}__orText`,
               children: t('general:or')
             }), /*#__PURE__*/_jsx(Button, {
+              "aria-label": t('upload:pasteURL'),
               buttonStyle: "pill",
               className: `${baseClass}__pasteFromClipboard`,
               icon: "clipboard",
@@ -399,6 +400,7 @@ const UploadComponent = props => {
         })
       }), value && fileSrc && /*#__PURE__*/_jsxs(React.Fragment, {
         children: [/*#__PURE__*/_jsx(Button, {
+          "aria-label": t('general:cancel'),
           buttonStyle: "ghost",
           className: `${baseClass}__remove`,
           icon: "x",