@payloadcms/ui 3.0.0-beta.77 → 3.0.0-beta.78

package/dist/elements/AppHeader/index.scss

@@ -57,7 +57,7 @@
     height: 100%;
     flex-grow: 1;
     justify-content: space-between;
-    overflow: hidden;
+    width: 100%;
   }
 
   &__account {
@@ -90,12 +90,14 @@
     align-items: center;
     flex-grow: 1;
     overflow: hidden;
+    width: 100%;
   }
 
   &__step-nav-wrapper {
-    flex: 1;
+    flex-grow: 0;
     overflow: auto;
     display: flex;
+    width: 100%;
 
     &::-webkit-scrollbar {
       display: none;
@@ -156,7 +158,7 @@
   }
 
   @include small-break {
-    &__localizer {
+    &__localizer.localizer {
       right: base(2);
     }
 

package/dist/elements/Card/index.scss

@@ -17,12 +17,12 @@
   gap: base(0.8);
 
   &__title {
-    @extend %h4;
+    @extend %h5;
     letter-spacing: 0;
     font-weight: 600;
-    line-height: base(1.2);
+    line-height: base(0.8);
     width: 100%;
-    margin: 0;
+    margin: base(0.1) 0;
   }
 
   &__actions {

package/dist/elements/Collapsible/index.scss

@@ -17,9 +17,10 @@
     gap: base(0.2);
     border-top-right-radius: $style-radius-m;
     border-top-left-radius: $style-radius-m;
+    width: 100%;
 
     & > * {
-      z-index: 2;
+      z-index: 1;
     }
 
     &:has(.collapsible__drag) {
@@ -87,6 +88,8 @@
     left: 0;
     pointer-events: none;
     width: 100%;
+    overflow: hidden;
+    max-width: 100%;
   }
 
   &__header-wrap--has-drag-handle {

package/dist/elements/DeleteDocument/index.scss

@@ -6,6 +6,7 @@
   align-items: center;
   height: 100%;
   justify-content: center;
+  padding: base(2);
 
   &__template {
     z-index: 1;

package/dist/elements/DeleteMany/index.scss

@@ -6,6 +6,7 @@
   align-items: center;
   height: 100%;
   justify-content: center;
+  padding: base(2);
 
   &__template {
     z-index: 1;

package/dist/elements/DocumentControls/index.scss

@@ -24,7 +24,7 @@
     position: relative;
     width: 100%;
     display: flex;
-    align-items: center;
+    align-items: space-between;
     gap: var(--base);
     padding-bottom: 1px;
     z-index: 4;
@@ -36,6 +36,7 @@
     align-items: center;
     flex-grow: 1;
     overflow: hidden;
+    padding: base(0.8) 0;
   }
 
   &__meta {
@@ -46,6 +47,10 @@
     gap: var(--base);
     margin: 0;
     width: 100%;
+
+    & button {
+      margin: 0;
+    }
   }
 
   &__list-item {
@@ -64,6 +69,7 @@
     white-space: nowrap;
     margin: 0;
     font-weight: 600;
+    line-height: base(1.2);
   }
 
   &__label {
@@ -141,7 +147,7 @@
     // The timestamps and meta can scroll past
     // The same container needs to the sticky, though
     // So we use a static height with a negative top equal to the meta height plus top padding
-    top: calc(var(--base) * -2);
+    top: base(-2.8);
     padding-right: 0;
     padding-left: 0;
 
@@ -154,8 +160,7 @@
     &__content {
       width: 100%;
       overflow: auto;
-      height: calc(var(--base) * 2);
-
+      padding-inline: base(2);
       // this container has a fixed height
       // this means the scrollbar (when present) overlaps the content
       &::-webkit-scrollbar {
@@ -166,14 +171,13 @@
     &__meta {
       width: auto;
       gap: calc(var(--base) / 2);
-      margin-left: var(--gutter-h);
 
       &::after {
         content: '';
         display: block;
-        position: sticky;
+        position: absolute;
         right: 0;
-        width: calc(var(--base) * 2);
+        width: base(0.8);
         height: var(--base);
         background: linear-gradient(to right, transparent, var(--theme-bg));
         flex-shrink: 0;
@@ -183,6 +187,7 @@
     }
 
     &__controls-wrapper {
+      background-color: var(--theme-bg);
       width: 100%;
       transform: translate3d(0, 0, 0);
       padding-right: var(--gutter-h);
@@ -215,4 +220,10 @@
       }
     }
   }
+
+  @include small-break {
+    &__content {
+      padding-inline: base(0.8);
+    }
+  }
 }

package/dist/elements/DuplicateDocument/index.scss

@@ -6,6 +6,7 @@
     display: flex;
     align-items: center;
     height: 100%;
+    padding: base(2);
 
     .btn {
       margin-right: $baseline;

package/dist/elements/EditMany/index.scss

@@ -63,17 +63,11 @@
       height: base(1);
 
       svg {
-        width: base(2.75);
-        height: base(2.75);
+        width: base(2);
+        height: base(2);
         position: relative;
-        [dir='ltr'] & {
-          left: base(-0.825);
-        }
-
-        [dir='rtl'] & {
-          right: base(-0.825);
-        }
-        top: base(-0.825);
+        inset-inline-start: base(-0.5);
+        top: base(-0.5);
 
         .stroke {
           stroke-width: 2px;

package/dist/elements/GenerateConfirmation/index.scss

@@ -6,6 +6,7 @@
   align-items: center;
   justify-content: center;
   height: 100%;
+  padding: base(2);
 
   &__template {
     position: relative;

package/dist/elements/ListControls/index.scss

@@ -48,10 +48,22 @@
     &__wrap {
       flex-wrap: wrap;
       background-color: unset;
+      padding: 0;
+      position: relative;
+    }
+
+    .icon--search {
+      position: absolute;
+      top: base(0.4);
+      inset-inline-start: base(0.4);
+      z-index: 1;
     }
 
     .search-filter {
       width: 100%;
+      input {
+        padding: base(0.4) base(2);
+      }
     }
 
     &__buttons-wrap {
@@ -64,11 +76,8 @@
       }
 
       .pill {
-        padding: base(0.5) base(1);
-
-        svg {
-          margin-left: auto;
-        }
+        padding: base(0.2) base(0.2) base(0.2) base(0.4);
+        justify-content: space-between;
       }
     }
 

package/dist/elements/ListDrawer/index.scss

@@ -65,11 +65,11 @@
     height: base(1);
 
     svg {
-      width: base(2.75);
-      height: base(2.75);
+      width: base(2);
+      height: base(2);
       position: relative;
-      left: base(-0.825);
-      top: base(-0.825);
+      inset-inline-start: base(-0.5);
+      top: base(-0.5);
 
       .stroke {
         stroke-width: 2px;

package/dist/elements/Localizer/LocalizerLabel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Localizer/LocalizerLabel/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAmBA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Localizer/LocalizerLabel/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAiBA,CAAA"}

package/dist/elements/Localizer/LocalizerLabel/index.js

@@ -18,16 +18,17 @@ export const LocalizerLabel = (props)=>{
             className
         ].filter(Boolean).join(' '),
         children: [
-            /*#__PURE__*/ _jsx("div", {
+            /*#__PURE__*/ _jsxs("div", {
                 className: `${baseClass}__label`,
-                children: `${t('general:locale')}:`
+                children: [
+                    `${t('general:locale')}:`,
+                    " "
+                ]
             }),
-            "  ",
             /*#__PURE__*/ _jsx("span", {
                 className: `${baseClass}__current-label`,
                 children: `${getTranslation(locale.label, i18n)}`
             }),
-            " ",
             /*#__PURE__*/ _jsx(ChevronIcon, {
                 className: `${baseClass}__chevron`
             })

package/dist/elements/Localizer/LocalizerLabel/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/Localizer/LocalizerLabel/index.tsx"],"sourcesContent":["'use client'\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport { useLocale } from '../../../providers/Locale/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'localizer-button'\n\nexport const LocalizerLabel: React.FC<{\n  ariaLabel?: string\n  className?: string\n}> = (props) => {\n  const { ariaLabel, className } = props\n  const locale = useLocale()\n  const { i18n, t } = useTranslation()\n\n  return (\n    <div\n      aria-label={ariaLabel || t('general:locale')}\n      className={[baseClass, className].filter(Boolean).join(' ')}\n    >\n      <div className={`${baseClass}__label`}>{`${t('general:locale')}:`}</div>\n      &nbsp;&nbsp;\n      <span className={`${baseClass}__current-label`}>\n        {`${getTranslation(locale.label, i18n)}`}\n      </span>\n      &nbsp;\n      <ChevronIcon className={`${baseClass}__chevron`} />\n    </div>\n  )\n}\n"],"names":["getTranslation","React","ChevronIcon","useLocale","useTranslation","baseClass","LocalizerLabel","props","ariaLabel","className","locale","i18n","t","div","aria-label","filter","Boolean","join","span","label"],"mappings":"AAAA;;AACA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,OAAOC,WAAW,QAAO;AAEzB,SAASC,WAAW,QAAQ,kCAAiC;AAC7D,SAASC,SAAS,QAAQ,qCAAoC;AAC9D,SAASC,cAAc,QAAQ,0CAAyC;AACxE,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,iBAGR,CAACC;IACJ,MAAM,EAAEC,SAAS,EAAEC,SAAS,EAAE,GAAGF;IACjC,MAAMG,SAASP;IACf,MAAM,EAAEQ,IAAI,EAAEC,CAAC,EAAE,GAAGR;IAEpB,qBACE,MAACS;QACCC,cAAYN,aAAaI,EAAE;QAC3BH,WAAW;YAACJ;YAAWI;SAAU,CAACM,MAAM,CAACC,SAASC,IAAI,CAAC;;0BAEvD,KAACJ;gBAAIJ,WAAW,CAAC,EAAEJ,UAAU,OAAO,CAAC;0BAAG,CAAC,EAAEO,EAAE,kBAAkB,CAAC,CAAC;;YAAO;0BAExE,KAACM;gBAAKT,WAAW,CAAC,EAAEJ,UAAU,eAAe,CAAC;0BAC3C,CAAC,EAAEL,eAAeU,OAAOS,KAAK,EAAER,MAAM,CAAC;;YACnC;0BAEP,KAACT;gBAAYO,WAAW,CAAC,EAAEJ,UAAU,SAAS,CAAC;;;;AAGrD,EAAC"}
+{"version":3,"sources":["../../../../src/elements/Localizer/LocalizerLabel/index.tsx"],"sourcesContent":["'use client'\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport { useLocale } from '../../../providers/Locale/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'localizer-button'\n\nexport const LocalizerLabel: React.FC<{\n  ariaLabel?: string\n  className?: string\n}> = (props) => {\n  const { ariaLabel, className } = props\n  const locale = useLocale()\n  const { i18n, t } = useTranslation()\n\n  return (\n    <div\n      aria-label={ariaLabel || t('general:locale')}\n      className={[baseClass, className].filter(Boolean).join(' ')}\n    >\n      <div className={`${baseClass}__label`}>{`${t('general:locale')}:`}&nbsp;</div>\n      <span className={`${baseClass}__current-label`}>\n        {`${getTranslation(locale.label, i18n)}`}\n      </span>\n      <ChevronIcon className={`${baseClass}__chevron`} />\n    </div>\n  )\n}\n"],"names":["getTranslation","React","ChevronIcon","useLocale","useTranslation","baseClass","LocalizerLabel","props","ariaLabel","className","locale","i18n","t","div","aria-label","filter","Boolean","join","span","label"],"mappings":"AAAA;;AACA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,OAAOC,WAAW,QAAO;AAEzB,SAASC,WAAW,QAAQ,kCAAiC;AAC7D,SAASC,SAAS,QAAQ,qCAAoC;AAC9D,SAASC,cAAc,QAAQ,0CAAyC;AACxE,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,iBAGR,CAACC;IACJ,MAAM,EAAEC,SAAS,EAAEC,SAAS,EAAE,GAAGF;IACjC,MAAMG,SAASP;IACf,MAAM,EAAEQ,IAAI,EAAEC,CAAC,EAAE,GAAGR;IAEpB,qBACE,MAACS;QACCC,cAAYN,aAAaI,EAAE;QAC3BH,WAAW;YAACJ;YAAWI;SAAU,CAACM,MAAM,CAACC,SAASC,IAAI,CAAC;;0BAEvD,MAACJ;gBAAIJ,WAAW,CAAC,EAAEJ,UAAU,OAAO,CAAC;;oBAAG,CAAC,EAAEO,EAAE,kBAAkB,CAAC,CAAC;oBAAC;;;0BAClE,KAACM;gBAAKT,WAAW,CAAC,EAAEJ,UAAU,eAAe,CAAC;0BAC3C,CAAC,EAAEL,eAAeU,OAAOS,KAAK,EAAER,MAAM,CAAC;;0BAE1C,KAACT;gBAAYO,WAAW,CAAC,EAAEJ,UAAU,SAAS,CAAC;;;;AAGrD,EAAC"}

package/dist/elements/Localizer/LocalizerLabel/index.scss

@@ -5,12 +5,18 @@
   align-items: center;
   white-space: nowrap;
   display: flex;
+  padding-inline-start: base(0.4);
+  padding-inline-end: base(0.1);
+  gap: 0;
+  background-color: var(--theme-elevation-100);
+  border-radius: var(--style-radius-s);
 
   &__label {
     color: var(--theme-elevation-500);
   }
 
   &__chevron {
+    padding: base(0.1);
     .stroke {
       stroke: currentColor;
     }

package/dist/elements/PublishMany/index.scss

@@ -5,6 +5,7 @@
   display: flex;
   align-items: center;
   height: 100%;
+  padding: base(2);
 
   &__template {
     z-index: 1;

package/dist/elements/Status/index.scss

@@ -23,6 +23,7 @@
     justify-content: center;
     align-items: center;
     height: 100%;
+    padding: base(2);
 
     &__toggle {
       @extend %btn-reset;

package/dist/elements/StayLoggedIn/index.scss

@@ -13,6 +13,7 @@
     display: flex;
     flex-direction: column;
     gap: var(--base);
+    padding: base(2);
   }
 
   &__content {

package/dist/elements/StepNav/index.scss

@@ -75,6 +75,6 @@
   }
 
   @include small-break {
-    gap: calc(var(--base) / 4);
+    gap: base(0.4);
   }
 }

package/dist/elements/Table/DefaultCell/fields/Array/index.js

@@ -6,7 +6,7 @@ import { useTranslation } from '../../../../../providers/Translation/index.js';
 export const ArrayCell = ({ cellData, labels })=>{
     const { i18n } = useTranslation();
     const arrayFields = cellData ?? [];
-    const label = `${arrayFields.length} ${getTranslation(labels?.plural || i18n.t('general:rows'), i18n)}`;
+    const label = arrayFields.length === 1 ? `${arrayFields.length} ${getTranslation(labels?.singular || i18n.t('general:rows'), i18n)}` : `${arrayFields.length} ${getTranslation(labels?.plural || i18n.t('general:rows'), i18n)}`;
     return /*#__PURE__*/ _jsx("span", {
         children: label
     });

package/dist/elements/Table/DefaultCell/fields/Array/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/elements/Table/DefaultCell/fields/Array/index.tsx"],"sourcesContent":["'use client'\nimport type { CellComponentProps, DefaultCellComponentProps } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport { useTranslation } from '../../../../../providers/Translation/index.js'\n\nexport interface ArrayCellProps extends DefaultCellComponentProps<Record<string, unknown>[]> {\n  labels: CellComponentProps['labels']\n}\n\nexport const ArrayCell: React.FC<ArrayCellProps> = ({ cellData, labels }) => {\n  const { i18n } = useTranslation()\n\n  const arrayFields = cellData ?? []\n\n  const label = `${arrayFields.length} ${getTranslation(\n    labels?.plural || i18n.t('general:rows'),\n    i18n,\n  )}`\n\n  return <span>{label}</span>\n}\n"],"names":["getTranslation","React","useTranslation","ArrayCell","cellData","labels","i18n","arrayFields","label","length","plural","t","span"],"mappings":"AAAA;;AAGA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,OAAOC,WAAW,QAAO;AAEzB,SAASC,cAAc,QAAQ,gDAA+C;AAM9E,OAAO,MAAMC,YAAsC,CAAC,EAAEC,QAAQ,EAAEC,MAAM,EAAE;IACtE,MAAM,EAAEC,IAAI,EAAE,GAAGJ;IAEjB,MAAMK,cAAcH,YAAY,EAAE;IAElC,MAAMI,QAAQ,CAAC,EAAED,YAAYE,MAAM,CAAC,CAAC,EAAET,eACrCK,QAAQK,UAAUJ,KAAKK,CAAC,CAAC,iBACzBL,MACA,CAAC;IAEH,qBAAO,KAACM;kBAAMJ;;AAChB,EAAC"}
+{"version":3,"sources":["../../../../../../src/elements/Table/DefaultCell/fields/Array/index.tsx"],"sourcesContent":["'use client'\nimport type { CellComponentProps, DefaultCellComponentProps } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport { useTranslation } from '../../../../../providers/Translation/index.js'\n\nexport interface ArrayCellProps extends DefaultCellComponentProps<Record<string, unknown>[]> {\n  labels: CellComponentProps['labels']\n}\n\nexport const ArrayCell: React.FC<ArrayCellProps> = ({ cellData, labels }) => {\n  const { i18n } = useTranslation()\n\n  const arrayFields = cellData ?? []\n\n  const label =\n    arrayFields.length === 1\n      ? `${arrayFields.length} ${getTranslation(labels?.singular || i18n.t('general:rows'), i18n)}`\n      : `${arrayFields.length} ${getTranslation(labels?.plural || i18n.t('general:rows'), i18n)}`\n\n  return <span>{label}</span>\n}\n"],"names":["getTranslation","React","useTranslation","ArrayCell","cellData","labels","i18n","arrayFields","label","length","singular","t","plural","span"],"mappings":"AAAA;;AAGA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,OAAOC,WAAW,QAAO;AAEzB,SAASC,cAAc,QAAQ,gDAA+C;AAM9E,OAAO,MAAMC,YAAsC,CAAC,EAAEC,QAAQ,EAAEC,MAAM,EAAE;IACtE,MAAM,EAAEC,IAAI,EAAE,GAAGJ;IAEjB,MAAMK,cAAcH,YAAY,EAAE;IAElC,MAAMI,QACJD,YAAYE,MAAM,KAAK,IACnB,CAAC,EAAEF,YAAYE,MAAM,CAAC,CAAC,EAAET,eAAeK,QAAQK,YAAYJ,KAAKK,CAAC,CAAC,iBAAiBL,MAAM,CAAC,GAC3F,CAAC,EAAEC,YAAYE,MAAM,CAAC,CAAC,EAAET,eAAeK,QAAQO,UAAUN,KAAKK,CAAC,CAAC,iBAAiBL,MAAM,CAAC;IAE/F,qBAAO,KAACO;kBAAML;;AAChB,EAAC"}

package/dist/elements/UnpublishMany/index.scss

@@ -5,6 +5,7 @@
   display: flex;
   align-items: center;
   height: 100%;
+  padding: base(2);
 
   &__template {
     z-index: 1;