@payloadcms/ui 3.39.0-canary.7 → 3.39.0-internal.1c212c9

package/dist/elements/Button/index.scss

@@ -13,12 +13,11 @@
   }
 
   .btn {
-    --btn-font-weight: normal;
     * {
       pointer-events: none;
     }
 
-    // button aesthetic styles
+    // colors
     &--style-primary {
       --color: var(--theme-elevation-0);
       --bg-color: var(--theme-elevation-800);
@@ -52,7 +51,7 @@
     &--style-pill {
       --bg-color: var(--theme-elevation-150);
       --color: var(--theme-elevation-800);
-      --hover-color: var(--theme-elevation-800);
+      --hover-color: var(--color);
       --hover-bg: var(--theme-elevation-100);
 
       &.btn--disabled {
@@ -61,60 +60,6 @@
         --hover-color: var(--color);
       }
     }
-
-    // colors and padding are mixed on this class
-    &--style-icon-label,
-    &--style-icon-label.btn--icon-position-left,
-    &--style-icon-label.btn--icon-position-right {
-      padding: 0;
-      font-weight: 600;
-      --color: var(--theme-text);
-      --bg-color: transparent;
-      --hover-color: var(--theme-elevation-600);
-
-      &.btn--disabled {
-        --color: var(--theme-elevation-200);
-        --hover-color: var(--color);
-      }
-
-      .btn__content {
-        --btn-icon-content-gap: calc(var(--base) * 0.4);
-      }
-    }
-
-    &--style-subtle {
-      --color: var(--theme-text);
-      --bg-color: var(--theme-elevation-100);
-      --hover-bg: var(--theme-elevation-150);
-      --box-shadow: inset 0 0 0 1px var(--theme-elevation-200);
-      --hover-box-shadow: inset 0 0 0 1px var(--theme-elevation-250);
-
-      &.btn--disabled {
-        --color: var(--theme-elevation-450);
-        --hover-box-shadow: var(--box-shadow);
-        --hover-bg: var(--bg-color);
-        --hover-color: var(--color);
-      }
-    }
-
-    &--style-tab {
-      --bg-color: transparent;
-      --hover-bg: var(--theme-elevation-50);
-      --color: var(--theme-text);
-      --btn-font-weight: 500;
-
-      &.btn--disabled {
-        --btn-font-weight: 600;
-        --hover-box-shadow: var(--box-shadow);
-        --bg-color: var(--theme-elevation-100);
-        --hover-bg: var(--bg-color);
-        --hover-color: var(--color);
-      }
-    }
-  }
-
-  .popup--active .btn {
-    background-color: var(--hover-bg);
   }
 
   .btn--withPopup {
@@ -166,48 +111,26 @@
   }
 
   .btn {
-    --btn-padding-block-start: 0;
-    --btn-padding-inline-end: 0;
-    --btn-padding-block-end: 0;
-    --btn-padding-inline-start: 0;
-
-    --btn-icon-size: calc(var(--base) * 1.2);
-    --btn-icon-border-color: currentColor;
-    --btn-icon-padding: 0px; // This will be needed when we make icons go edge to edge instead of having built in padding in the svg code
-    --btn-icon-content-gap: calc(var(--base) * 0.4);
-    --margin-block: base(1.2);
-    --btn-line-height: calc(var(--base) * 1.2);
-
-    border-radius: var(--style-radius-s);
+    border-radius: $style-radius-s;
     font-size: var(--base-body-size);
-    font-family: var(--font-body);
-    font-weight: var(--btn-font-weight, normal);
-    margin-block: var(--margin-block);
-    line-height: var(--btn-line-height);
+    margin-block: base(1.2);
+    line-height: base(1.2);
     border: 0;
     cursor: pointer;
+    font-weight: normal;
     text-decoration: none;
     transition-property: border, color, box-shadow, background;
     transition-duration: 100ms;
     transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
-    padding: var(--btn-padding-block-start) var(--btn-padding-inline-end)
-      var(--btn-padding-block-end) var(--btn-padding-inline-start);
+
     color: var(--color, inherit);
     background-color: var(--bg-color, transparent);
     box-shadow: var(--box-shadow, none);
 
     .icon {
+      @include color-svg(var(--color, currentColor));
       width: 100%;
       height: 100%;
-
-      .stroke {
-        stroke: var(--color, currentColor);
-        fill: none;
-      }
-
-      .fill {
-        fill: var(--color, currentColor);
-      }
     }
 
     &__content {
@@ -217,14 +140,14 @@
     }
 
     &__icon {
-      width: var(--btn-icon-size);
-      height: var(--btn-icon-size);
+      width: base(1.2);
+      height: base(1.2);
       display: flex;
       align-items: center;
       justify-content: center;
-      border: 1px solid var(--btn-icon-border-color);
+      border: 1px solid;
       border-radius: 100%;
-      padding: var(--btn-icon-padding);
+      padding: base(0.1);
       color: inherit;
 
       .icon {
@@ -245,86 +168,79 @@
       position: relative;
     }
 
-    &--icon {
-      .btn__content {
-        gap: var(--btn-icon-content-gap);
+    &--icon-style-without-border {
+      .btn__icon {
+        border: none;
       }
     }
 
-    &--icon-style-without-border,
     &--icon-style-none {
-      --btn-icon-border-color: transparent;
-    }
-
-    &--icon-position-left {
-      .btn__content {
-        flex-direction: row-reverse;
+      .btn__icon {
+        border: none;
       }
     }
 
     &--size-small {
-      --btn-icon-size: calc(var(--base) * 0.9);
-      // --btn-icon-padding: 0px; // This will be needed when we make icons go edge to edge instead of having built in padding in the svg code
-      --btn-icon-content-gap: calc(var(--base) * 0.2);
-      --btn-padding-block-start: 0;
-      --btn-padding-inline-end: calc(var(--base) * 0.4);
-      --btn-padding-inline-start: calc(var(--base) * 0.4);
-      --btn-padding-block-end: 0;
+      padding: 0 base(0.4);
 
       &.btn--icon-position-left {
-        --btn-padding-inline-start: calc(var(--base) * 0.3);
-      }
+        padding-inline-start: base(0.1);
+        padding-inline-end: base(0.4);
 
-      &.btn--icon-position-right {
-        --btn-padding-inline-end: calc(var(--base) * 0.3);
+        .btn__content {
+          flex-direction: row-reverse;
+        }
       }
 
-      &.btn--icon-style-with-border {
-        // --btn-icon-padding: 0px; // This will be needed when we make icons go edge to edge instead of having built in padding in the svg code
+      &.btn--icon-position-right {
+        padding-inline-start: base(0.4);
+        padding-inline-end: base(0.1);
       }
     }
 
     &--size-medium {
-      // --btn-icon-padding: 0px;
-      --btn-icon-size: calc(var(--base) * 1.2);
-      --btn-icon-content-gap: calc(var(--base) * 0.2);
-      --btn-padding-block-start: calc(var(--base) * 0.2);
-      --btn-padding-inline-end: calc(var(--base) * 0.6);
-      --btn-padding-block-end: calc(var(--base) * 0.2);
-      --btn-padding-inline-start: calc(var(--base) * 0.6);
+      padding: base(0.2) base(0.6);
 
       &.btn--icon-position-left {
-        --btn-padding-inline-start: calc(var(--base) * 0.4);
+        padding-inline-start: base(0.4);
+        padding-inline-end: base(0.6);
+
+        .btn__content {
+          gap: base(0.2);
+          flex-direction: row-reverse;
+        }
       }
 
       &.btn--icon-position-right {
-        --btn-padding-inline-end: calc(var(--base) * 0.4);
-      }
+        padding-inline-start: base(0.6);
+        padding-inline-end: base(0.4);
 
-      &.btn--icon-style-with-border {
-        // --btn-icon-padding: 0px; // This will be needed when we make icons go edge to edge instead of having built in padding in the svg code
+        .btn__content {
+          gap: base(0.2);
+        }
       }
     }
 
     &--size-large {
-      // --btn-icon-padding: 0px;
-      --btn-icon-size: calc(var(--base) * 1.2);
-      --btn-icon-content-gap: calc(var(--base) * 0.4);
-      --btn-padding-block-start: calc(var(--base) * 0.4);
-      --btn-padding-inline-end: calc(var(--base) * 0.8);
-      --btn-padding-inline-start: calc(var(--base) * 0.8);
-      --btn-padding-block-end: calc(var(--base) * 0.4);
+      padding: base(0.4) base(0.8);
 
       &.btn--icon-position-left {
-        --btn-padding-inline-start: calc(var(--base) * 0.6);
+        padding-inline-start: base(0.6);
+        padding-inline-end: base(0.8);
+
+        .btn__content {
+          gap: base(0.4);
+          flex-direction: row-reverse;
+        }
       }
 
       &.btn--icon-position-right {
-        --btn-padding-inline-end: calc(var(--base) * 0.6);
-      }
+        padding-inline-start: base(0.8);
+        padding-inline-end: base(0.6);
 
-      &.btn--icon-style-with-border {
-        // --btn-icon-padding: 0px; // This will be needed when we make icons go edge to edge instead of having built in padding in the svg code
+        .btn__content {
+          gap: base(0.4);
+        }
       }
     }
 
@@ -340,21 +256,44 @@
       }
     }
 
-    &:focus-visible {
-      outline: var(--accessibility-outline);
-      outline-offset: var(--accessibility-outline-offset);
-    }
+    &--style-icon-label,
+    &--style-icon-label.btn--icon-position-left,
+    &--style-icon-label.btn--icon-position-right {
+      padding: 0;
+      font-weight: 600;
 
-    &.btn--disabled {
-      cursor: not-allowed;
+      .btn__content {
+        gap: base(0.4);
+      }
     }
 
     &--style-none {
       padding: 0;
     }
 
-    &--no-margin {
-      --margin-block: 0;
+    &:focus:not(:focus-visible) {
+      .btn__icon {
+        @include color-svg(var(--theme-elevation-800));
+        background: var(--theme-elevation-150);
+      }
+
+      outline: none;
+    }
+
+    &:active {
+      .btn__icon {
+        @include color-svg(var(--theme-elevation-0));
+        background: var(--theme-elevation-700);
+      }
+    }
+
+    &:focus-visible {
+      outline: var(--accessibility-outline);
+      outline-offset: var(--accessibility-outline-offset);
+    }
+
+    &.btn--disabled {
+      cursor: not-allowed;
     }
   }
 }

package/dist/elements/Button/types.d.ts

@@ -7,7 +7,7 @@ type secondaryAction = {
 export type Props = {
     'aria-label'?: string;
     buttonId?: string;
-    buttonStyle?: 'error' | 'icon-label' | 'none' | 'pill' | 'primary' | 'secondary' | 'subtle' | 'tab' | 'transparent';
+    buttonStyle?: 'error' | 'icon-label' | 'none' | 'pill' | 'primary' | 'secondary' | 'transparent';
     children?: React.ReactNode;
     className?: string;
     disabled?: boolean;
@@ -26,7 +26,6 @@ export type Props = {
      * Components now import their own `Link` directly from `next/link`.
      */
     Link?: React.ElementType;
-    margin?: boolean;
     newTab?: boolean;
     onClick?: (event: MouseEvent) => void;
     onMouseDown?: (event: MouseEvent) => void;

package/dist/elements/Button/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/Button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;CACrC,CAAA;AAED,MAAM,MAAM,KAAK,GAAG;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EACR,OAAO,GACP,YAAY,GACZ,MAAM,GACN,MAAM,GACN,SAAS,GACT,WAAW,GACX,QAAQ,GACR,KAAK,GACL,aAAa,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,EAAE,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,WAAW,CAAA;IACpC;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,IAAI,CAAC,EAAE,CAAC,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,GAAG,CAAC,GAAG,KAAK,CAAC,SAAS,CAAA;IAC5D,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC/B,SAAS,CAAC,EAAE,MAAM,GAAG,aAAa,GAAG,gBAAgB,CAAA;IACrD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;;;OAIG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;IACxB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IACrC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IACzC;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,iBAAiB,GAAG,IAAI,CAAC,CAAA;IACnE,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,gBAAgB,CAAC,EAAE,eAAe,GAAG,eAAe,EAAE,CAAA;IACtD,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnC,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAA;IACvE,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/Button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;CACrC,CAAA;AAED,MAAM,MAAM,KAAK,GAAG;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EAAE,OAAO,GAAG,YAAY,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,WAAW,GAAG,aAAa,CAAA;IAChG,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,EAAE,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,WAAW,CAAA;IACpC;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,IAAI,CAAC,EAAE,CAAC,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,GAAG,CAAC,GAAG,KAAK,CAAC,SAAS,CAAA;IAC5D,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC/B,SAAS,CAAC,EAAE,MAAM,GAAG,aAAa,GAAG,gBAAgB,CAAA;IACrD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;;;OAIG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;IACxB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IACrC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IACzC;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,iBAAiB,GAAG,IAAI,CAAC,CAAA;IACnE,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,gBAAgB,CAAC,EAAE,eAAe,GAAG,eAAe,EAAE,CAAA;IACtD,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnC,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAA;IACvE,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,CAAA"}

package/dist/elements/Button/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../src/elements/Button/types.ts"],"sourcesContent":["import type { ElementType, MouseEvent } from 'react'\nimport type React from 'react'\n\ntype secondaryAction = {\n  label: string\n  onClick: (event: MouseEvent) => void\n}\n\nexport type Props = {\n  'aria-label'?: string\n  buttonId?: string\n  buttonStyle?:\n    | 'error'\n    | 'icon-label'\n    | 'none'\n    | 'pill'\n    | 'primary'\n    | 'secondary'\n    | 'subtle'\n    | 'tab'\n    | 'transparent'\n  children?: React.ReactNode\n  className?: string\n  disabled?: boolean\n  el?: 'anchor' | 'link' | ElementType\n  /**\n   * Setting to `true` will allow the submenu to be opened when the button is disabled\n   */\n  enableSubMenu?: boolean\n  icon?: ['chevron' | 'edit' | 'plus' | 'x'] | React.ReactNode\n  iconPosition?: 'left' | 'right'\n  iconStyle?: 'none' | 'with-border' | 'without-border'\n  id?: string\n  /**\n   * @deprecated\n   * This prop is deprecated and will be removed in the next major version.\n   * Components now import their own `Link` directly from `next/link`.\n   */\n  Link?: React.ElementType\n  margin?: boolean\n  newTab?: boolean\n  onClick?: (event: MouseEvent) => void\n  onMouseDown?: (event: MouseEvent) => void\n  /**\n   * Enables form submission via an onClick handler. This is only needed if\n   * type=\"submit\" does not trigger form submission, e.g. if the button DOM\n   * element is not a direct child of the form element.\n   *\n   * @default false\n   */\n  programmaticSubmit?: boolean\n  ref?: React.RefObject<HTMLAnchorElement | HTMLButtonElement | null>\n  round?: boolean\n  secondaryActions?: secondaryAction | secondaryAction[]\n  size?: 'large' | 'medium' | 'small'\n  SubMenuPopupContent?: (props: { close: () => void }) => React.ReactNode\n  to?: string\n  tooltip?: string\n  type?: 'button' | 'submit'\n  url?: string\n}\n"],"mappings":"AAQA","ignoreList":[]}
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/elements/Button/types.ts"],"sourcesContent":["import type { ElementType, MouseEvent } from 'react'\nimport type React from 'react'\n\ntype secondaryAction = {\n  label: string\n  onClick: (event: MouseEvent) => void\n}\n\nexport type Props = {\n  'aria-label'?: string\n  buttonId?: string\n  buttonStyle?: 'error' | 'icon-label' | 'none' | 'pill' | 'primary' | 'secondary' | 'transparent'\n  children?: React.ReactNode\n  className?: string\n  disabled?: boolean\n  el?: 'anchor' | 'link' | ElementType\n  /**\n   * Setting to `true` will allow the submenu to be opened when the button is disabled\n   */\n  enableSubMenu?: boolean\n  icon?: ['chevron' | 'edit' | 'plus' | 'x'] | React.ReactNode\n  iconPosition?: 'left' | 'right'\n  iconStyle?: 'none' | 'with-border' | 'without-border'\n  id?: string\n  /**\n   * @deprecated\n   * This prop is deprecated and will be removed in the next major version.\n   * Components now import their own `Link` directly from `next/link`.\n   */\n  Link?: React.ElementType\n  newTab?: boolean\n  onClick?: (event: MouseEvent) => void\n  onMouseDown?: (event: MouseEvent) => void\n  /**\n   * Enables form submission via an onClick handler. This is only needed if\n   * type=\"submit\" does not trigger form submission, e.g. if the button DOM\n   * element is not a direct child of the form element.\n   *\n   * @default false\n   */\n  programmaticSubmit?: boolean\n  ref?: React.RefObject<HTMLAnchorElement | HTMLButtonElement | null>\n  round?: boolean\n  secondaryActions?: secondaryAction | secondaryAction[]\n  size?: 'large' | 'medium' | 'small'\n  SubMenuPopupContent?: (props: { close: () => void }) => React.ReactNode\n  to?: string\n  tooltip?: string\n  type?: 'button' | 'submit'\n  url?: string\n}\n"],"mappings":"AAQA","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ColumnSelector/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAe,MAAM,SAAS,CAAA;AAGrE,OAAO,KAAyB,MAAM,OAAO,CAAA;AAS7C,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,cAAc,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAA;CAC3D,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAgE1C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ColumnSelector/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAGxD,OAAO,KAAyB,MAAM,OAAO,CAAA;AAS7C,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,cAAc,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAA;CAC3D,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAyD1C,CAAA"}

package/dist/elements/ColumnSelector/index.js

@@ -44,7 +44,6 @@ export const ColumnSelector = ({
         active,
         field
       } = col_1;
-      const label = 'labelWithPrefix' in field && field.labelWithPrefix !== undefined ? field.labelWithPrefix : 'label' in field && field.label !== undefined ? field.label : 'name' in field && field.name !== undefined ? field.name : undefined;
       return /*#__PURE__*/_jsx(Pill, {
         alignIcon: "left",
         "aria-checked": active,
@@ -56,10 +55,10 @@ export const ColumnSelector = ({
           void toggleColumn(accessor);
         },
         children: col_1.CustomLabel ?? /*#__PURE__*/_jsx(FieldLabel, {
-          label: label,
+          label: field && 'label' in field && field.label,
           unstyled: true
         })
-      }, `${collectionSlug}-${accessor}-${i}${editDepth ? `-${editDepth}-` : ''}${uuid}`);
+      }, `${collectionSlug}-${field && 'name' in field ? field?.name : i}${editDepth ? `-${editDepth}-` : ''}${uuid}`);
     })
   });
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["fieldIsHiddenOrDisabled","fieldIsID","React","useId","useMemo","FieldLabel","PlusIcon","XIcon","useEditDepth","useTableColumns","DraggableSortable","Pill","baseClass","ColumnSelector","collectionSlug","columns","moveColumn","toggleColumn","uuid","editDepth","filteredColumns","filter","col","field","admin","disableListColumn","_jsx","className","ids","map","accessor","onDragEnd","moveFromIndex","moveToIndex","fromIndex","toIndex","i","active","label","labelWithPrefix","undefined","name","alignIcon","Boolean","join","draggable","icon","id","onClick","CustomLabel","unstyled"],"sources":["../../../src/elements/ColumnSelector/index.tsx"],"sourcesContent":["'use client'\nimport type { SanitizedCollectionConfig, StaticLabel } from 'payload'\n\nimport { fieldIsHiddenOrDisabled, fieldIsID } from 'payload/shared'\nimport React, { useId, useMemo } from 'react'\n\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\nimport { useTableColumns } from '../../providers/TableColumns/index.js'\nimport { DraggableSortable } from '../DraggableSortable/index.js'\nimport { Pill } from '../Pill/index.js'\nimport './index.scss'\n\nconst baseClass = 'column-selector'\n\nexport type Props = {\n  readonly collectionSlug: SanitizedCollectionConfig['slug']\n}\n\nexport const ColumnSelector: React.FC<Props> = ({ collectionSlug }) => {\n  const { columns, moveColumn, toggleColumn } = useTableColumns()\n\n  const uuid = useId()\n  const editDepth = useEditDepth()\n\n  const filteredColumns = useMemo(\n    () =>\n      columns.filter(\n        (col) =>\n          !(fieldIsHiddenOrDisabled(col.field) && !fieldIsID(col.field)) &&\n          !col?.field?.admin?.disableListColumn,\n      ),\n    [columns],\n  )\n\n  if (!columns) {\n    return null\n  }\n\n  return (\n    <DraggableSortable\n      className={baseClass}\n      ids={filteredColumns.map((col) => col?.accessor)}\n      onDragEnd={({ moveFromIndex, moveToIndex }) => {\n        void moveColumn({\n          fromIndex: moveFromIndex,\n          toIndex: moveToIndex,\n        })\n      }}\n    >\n      {filteredColumns.map((col, i) => {\n        const { accessor, active, field } = col\n\n        const label =\n          'labelWithPrefix' in field && field.labelWithPrefix !== undefined\n            ? field.labelWithPrefix\n            : 'label' in field && field.label !== undefined\n              ? field.label\n              : 'name' in field && field.name !== undefined\n                ? field.name\n                : undefined\n\n        return (\n          <Pill\n            alignIcon=\"left\"\n            aria-checked={active}\n            className={[`${baseClass}__column`, active && `${baseClass}__column--active`]\n              .filter(Boolean)\n              .join(' ')}\n            draggable\n            icon={active ? <XIcon /> : <PlusIcon />}\n            id={accessor}\n            key={`${collectionSlug}-${accessor}-${i}${editDepth ? `-${editDepth}-` : ''}${uuid}`}\n            onClick={() => {\n              void toggleColumn(accessor)\n            }}\n          >\n            {col.CustomLabel ?? <FieldLabel label={label as StaticLabel} unstyled />}\n          </Pill>\n        )\n      })}\n    </DraggableSortable>\n  )\n}\n"],"mappings":"AAAA;;;AAGA,SAASA,uBAAuB,EAAEC,SAAS,QAAQ;AACnD,OAAOC,KAAA,IAASC,KAAK,EAAEC,OAAO,QAAQ;AAEtC,SAASC,UAAU,QAAQ;AAC3B,SAASC,QAAQ,QAAQ;AACzB,SAASC,KAAK,QAAQ;AACtB,SAASC,YAAY,QAAQ;AAC7B,SAASC,eAAe,QAAQ;AAChC,SAASC,iBAAiB,QAAQ;AAClC,SAASC,IAAI,QAAQ;AACrB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAMlB,OAAO,MAAMC,cAAA,GAAkCA,CAAC;EAAEC;AAAc,CAAE;EAChE,MAAM;IAAEC,OAAO;IAAEC,UAAU;IAAEC;EAAY,CAAE,GAAGR,eAAA;EAE9C,MAAMS,IAAA,GAAOf,KAAA;EACb,MAAMgB,SAAA,GAAYX,YAAA;EAElB,MAAMY,eAAA,GAAkBhB,OAAA,CACtB,MACEW,OAAA,CAAQM,MAAM,CACXC,GAAA,IACC,EAAEtB,uBAAA,CAAwBsB,GAAA,CAAIC,KAAK,KAAK,CAACtB,SAAA,CAAUqB,GAAA,CAAIC,KAAK,MAC5D,CAACD,GAAA,EAAKC,KAAA,EAAOC,KAAA,EAAOC,iBAAA,GAE1B,CAACV,OAAA,CAAQ;EAGX,IAAI,CAACA,OAAA,EAAS;IACZ,OAAO;EACT;EAEA,oBACEW,IAAA,CAAChB,iBAAA;IACCiB,SAAA,EAAWf,SAAA;IACXgB,GAAA,EAAKR,eAAA,CAAgBS,GAAG,CAAEP,KAAA,IAAQA,KAAA,EAAKQ,QAAA;IACvCC,SAAA,EAAWA,CAAC;MAAEC,aAAa;MAAEC;IAAW,CAAE;MACxC,KAAKjB,UAAA,CAAW;QACdkB,SAAA,EAAWF,aAAA;QACXG,OAAA,EAASF;MACX;IACF;cAECb,eAAA,CAAgBS,GAAG,CAAC,CAACP,KAAA,EAAKc,CAAA;MACzB,MAAM;QAAEN,QAAQ;QAAEO,MAAM;QAAEd;MAAK,CAAE,GAAGD,KAAA;MAEpC,MAAMgB,KAAA,GACJ,qBAAqBf,KAAA,IAASA,KAAA,CAAMgB,eAAe,KAAKC,SAAA,GACpDjB,KAAA,CAAMgB,eAAe,GACrB,WAAWhB,KAAA,IAASA,KAAA,CAAMe,KAAK,KAAKE,SAAA,GAClCjB,KAAA,CAAMe,KAAK,GACX,UAAUf,KAAA,IAASA,KAAA,CAAMkB,IAAI,KAAKD,SAAA,GAChCjB,KAAA,CAAMkB,IAAI,GACVD,SAAA;MAEV,oBACEd,IAAA,CAACf,IAAA;QACC+B,SAAA,EAAU;QACV,gBAAcL,MAAA;QACdV,SAAA,EAAW,CAAC,GAAGf,SAAA,UAAmB,EAAEyB,MAAA,IAAU,GAAGzB,SAAA,kBAA2B,CAAC,CAC1ES,MAAM,CAACsB,OAAA,EACPC,IAAI,CAAC;QACRC,SAAS;QACTC,IAAA,EAAMT,MAAA,gBAASX,IAAA,CAACnB,KAAA,qBAAWmB,IAAA,CAACpB,QAAA;QAC5ByC,EAAA,EAAIjB,QAAA;QAEJkB,OAAA,EAASA,CAAA;UACP,KAAK/B,YAAA,CAAaa,QAAA;QACpB;kBAECR,KAAA,CAAI2B,WAAW,iBAAIvB,IAAA,CAACrB,UAAA;UAAWiC,KAAA,EAAOA,KAAA;UAAsBY,QAAQ;;SALhE,GAAGpC,cAAA,IAAkBgB,QAAA,IAAYM,CAAA,GAAIjB,SAAA,GAAY,IAAIA,SAAA,GAAY,GAAG,KAAKD,IAAA,EAAM;IAQ1F;;AAGN","ignoreList":[]}
+{"version":3,"file":"index.js","names":["fieldIsHiddenOrDisabled","fieldIsID","React","useId","useMemo","FieldLabel","PlusIcon","XIcon","useEditDepth","useTableColumns","DraggableSortable","Pill","baseClass","ColumnSelector","collectionSlug","columns","moveColumn","toggleColumn","uuid","editDepth","filteredColumns","filter","col","field","admin","disableListColumn","_jsx","className","ids","map","accessor","onDragEnd","moveFromIndex","moveToIndex","fromIndex","toIndex","i","active","alignIcon","Boolean","join","draggable","icon","id","onClick","CustomLabel","label","unstyled","name"],"sources":["../../../src/elements/ColumnSelector/index.tsx"],"sourcesContent":["'use client'\nimport type { SanitizedCollectionConfig } from 'payload'\n\nimport { fieldIsHiddenOrDisabled, fieldIsID } from 'payload/shared'\nimport React, { useId, useMemo } from 'react'\n\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\nimport { useTableColumns } from '../../providers/TableColumns/index.js'\nimport { DraggableSortable } from '../DraggableSortable/index.js'\nimport { Pill } from '../Pill/index.js'\nimport './index.scss'\n\nconst baseClass = 'column-selector'\n\nexport type Props = {\n  readonly collectionSlug: SanitizedCollectionConfig['slug']\n}\n\nexport const ColumnSelector: React.FC<Props> = ({ collectionSlug }) => {\n  const { columns, moveColumn, toggleColumn } = useTableColumns()\n\n  const uuid = useId()\n  const editDepth = useEditDepth()\n\n  const filteredColumns = useMemo(\n    () =>\n      columns.filter(\n        (col) =>\n          !(fieldIsHiddenOrDisabled(col.field) && !fieldIsID(col.field)) &&\n          !col?.field?.admin?.disableListColumn,\n      ),\n    [columns],\n  )\n\n  if (!columns) {\n    return null\n  }\n\n  return (\n    <DraggableSortable\n      className={baseClass}\n      ids={filteredColumns.map((col) => col?.accessor)}\n      onDragEnd={({ moveFromIndex, moveToIndex }) => {\n        void moveColumn({\n          fromIndex: moveFromIndex,\n          toIndex: moveToIndex,\n        })\n      }}\n    >\n      {filteredColumns.map((col, i) => {\n        const { accessor, active, field } = col\n\n        return (\n          <Pill\n            alignIcon=\"left\"\n            aria-checked={active}\n            className={[`${baseClass}__column`, active && `${baseClass}__column--active`]\n              .filter(Boolean)\n              .join(' ')}\n            draggable\n            icon={active ? <XIcon /> : <PlusIcon />}\n            id={accessor}\n            key={`${collectionSlug}-${field && 'name' in field ? field?.name : i}${editDepth ? `-${editDepth}-` : ''}${uuid}`}\n            onClick={() => {\n              void toggleColumn(accessor)\n            }}\n          >\n            {col.CustomLabel ?? (\n              <FieldLabel label={field && 'label' in field && field.label} unstyled />\n            )}\n          </Pill>\n        )\n      })}\n    </DraggableSortable>\n  )\n}\n"],"mappings":"AAAA;;;AAGA,SAASA,uBAAuB,EAAEC,SAAS,QAAQ;AACnD,OAAOC,KAAA,IAASC,KAAK,EAAEC,OAAO,QAAQ;AAEtC,SAASC,UAAU,QAAQ;AAC3B,SAASC,QAAQ,QAAQ;AACzB,SAASC,KAAK,QAAQ;AACtB,SAASC,YAAY,QAAQ;AAC7B,SAASC,eAAe,QAAQ;AAChC,SAASC,iBAAiB,QAAQ;AAClC,SAASC,IAAI,QAAQ;AACrB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAMlB,OAAO,MAAMC,cAAA,GAAkCA,CAAC;EAAEC;AAAc,CAAE;EAChE,MAAM;IAAEC,OAAO;IAAEC,UAAU;IAAEC;EAAY,CAAE,GAAGR,eAAA;EAE9C,MAAMS,IAAA,GAAOf,KAAA;EACb,MAAMgB,SAAA,GAAYX,YAAA;EAElB,MAAMY,eAAA,GAAkBhB,OAAA,CACtB,MACEW,OAAA,CAAQM,MAAM,CACXC,GAAA,IACC,EAAEtB,uBAAA,CAAwBsB,GAAA,CAAIC,KAAK,KAAK,CAACtB,SAAA,CAAUqB,GAAA,CAAIC,KAAK,MAC5D,CAACD,GAAA,EAAKC,KAAA,EAAOC,KAAA,EAAOC,iBAAA,GAE1B,CAACV,OAAA,CAAQ;EAGX,IAAI,CAACA,OAAA,EAAS;IACZ,OAAO;EACT;EAEA,oBACEW,IAAA,CAAChB,iBAAA;IACCiB,SAAA,EAAWf,SAAA;IACXgB,GAAA,EAAKR,eAAA,CAAgBS,GAAG,CAAEP,KAAA,IAAQA,KAAA,EAAKQ,QAAA;IACvCC,SAAA,EAAWA,CAAC;MAAEC,aAAa;MAAEC;IAAW,CAAE;MACxC,KAAKjB,UAAA,CAAW;QACdkB,SAAA,EAAWF,aAAA;QACXG,OAAA,EAASF;MACX;IACF;cAECb,eAAA,CAAgBS,GAAG,CAAC,CAACP,KAAA,EAAKc,CAAA;MACzB,MAAM;QAAEN,QAAQ;QAAEO,MAAM;QAAEd;MAAK,CAAE,GAAGD,KAAA;MAEpC,oBACEI,IAAA,CAACf,IAAA;QACC2B,SAAA,EAAU;QACV,gBAAcD,MAAA;QACdV,SAAA,EAAW,CAAC,GAAGf,SAAA,UAAmB,EAAEyB,MAAA,IAAU,GAAGzB,SAAA,kBAA2B,CAAC,CAC1ES,MAAM,CAACkB,OAAA,EACPC,IAAI,CAAC;QACRC,SAAS;QACTC,IAAA,EAAML,MAAA,gBAASX,IAAA,CAACnB,KAAA,qBAAWmB,IAAA,CAACpB,QAAA;QAC5BqC,EAAA,EAAIb,QAAA;QAEJc,OAAA,EAASA,CAAA;UACP,KAAK3B,YAAA,CAAaa,QAAA;QACpB;kBAECR,KAAA,CAAIuB,WAAW,iBACdnB,IAAA,CAACrB,UAAA;UAAWyC,KAAA,EAAOvB,KAAA,IAAS,WAAWA,KAAA,IAASA,KAAA,CAAMuB,KAAK;UAAEC,QAAQ;;SANlE,GAAGjC,cAAA,IAAkBS,KAAA,IAAS,UAAUA,KAAA,GAAQA,KAAA,EAAOyB,IAAA,GAAOZ,CAAA,GAAIjB,SAAA,GAAY,IAAIA,SAAA,GAAY,GAAG,KAAKD,IAAA,EAAM;IAUvH;;AAGN","ignoreList":[]}

package/dist/elements/DeleteDocument/index.js

@@ -9,7 +9,7 @@ import React, { useCallback } from 'react';
 import { toast } from 'sonner';
 import { useForm } from '../../forms/Form/context.js';
 import { useConfig } from '../../providers/Config/index.js';
-import { useDocumentTitle } from '../../providers/DocumentTitle/index.js';
+import { useDocumentInfo } from '../../providers/DocumentInfo/index.js';
 import { useRouteTransition } from '../../providers/RouteTransition/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { requests } from '../../utilities/api.js';
@@ -50,7 +50,7 @@ export const DeleteDocument = props => {
   } = useTranslation();
   const {
     title
-  } = useDocumentTitle();
+  } = useDocumentInfo();
   const {
     startRouteTransition
   } = useRouteTransition();

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useModal","getTranslation","useRouter","formatAdminURL","React","useCallback","toast","useForm","useConfig","useDocumentTitle","useRouteTransition","useTranslation","requests","ConfirmationModal","PopupList","Translation","DeleteDocument","props","id","buttonId","collectionSlug","onDelete","redirectAfterDelete","singularLabel","title","titleFromProps","config","routes","admin","adminRoute","api","serverURL","getEntityConfig","collectionConfig","setModified","router","i18n","t","startRouteTransition","openModal","modalSlug","addDefaultError","error","handleDelete","delete","headers","language","then","res","json","status","success","label","message","push","path","errors","forEach","_err","_jsxs","Fragment","_jsx","Button","onClick","body","elements","1","children","i18nKey","variables","confirmingLabel","heading","onConfirm"],"sources":["../../../src/elements/DeleteDocument/index.tsx"],"sourcesContent":["'use client'\nimport type { SanitizedCollectionConfig } from 'payload'\n\nimport { useModal } from '@faceless-ui/modal'\nimport { getTranslation } from '@payloadcms/translations'\nimport { useRouter } from 'next/navigation.js'\nimport { formatAdminURL } from 'payload/shared'\nimport React, { useCallback } from 'react'\nimport { toast } from 'sonner'\n\nimport type { DocumentDrawerContextType } from '../DocumentDrawer/Provider.js'\n\nimport { useForm } from '../../forms/Form/context.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentTitle } from '../../providers/DocumentTitle/index.js'\nimport { useRouteTransition } from '../../providers/RouteTransition/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { requests } from '../../utilities/api.js'\nimport { ConfirmationModal } from '../ConfirmationModal/index.js'\nimport { PopupList } from '../Popup/index.js'\nimport { Translation } from '../Translation/index.js'\nimport './index.scss'\n\nexport type Props = {\n  readonly buttonId?: string\n  readonly collectionSlug: SanitizedCollectionConfig['slug']\n  readonly id?: string\n  readonly onDelete?: DocumentDrawerContextType['onDelete']\n  readonly redirectAfterDelete?: boolean\n  readonly singularLabel: SanitizedCollectionConfig['labels']['singular']\n  readonly title?: string\n  readonly useAsTitle: SanitizedCollectionConfig['admin']['useAsTitle']\n}\n\nexport const DeleteDocument: React.FC<Props> = (props) => {\n  const {\n    id,\n    buttonId,\n    collectionSlug,\n    onDelete,\n    redirectAfterDelete = true,\n    singularLabel,\n    title: titleFromProps,\n  } = props\n\n  const {\n    config: {\n      routes: { admin: adminRoute, api },\n      serverURL,\n    },\n    getEntityConfig,\n  } = useConfig()\n\n  const collectionConfig = getEntityConfig({ collectionSlug })\n\n  const { setModified } = useForm()\n  const router = useRouter()\n  const { i18n, t } = useTranslation()\n  const { title } = useDocumentTitle()\n  const { startRouteTransition } = useRouteTransition()\n  const { openModal } = useModal()\n\n  const modalSlug = `delete-${id}`\n\n  const addDefaultError = useCallback(() => {\n    toast.error(t('error:deletingTitle', { title }))\n  }, [t, title])\n\n  const handleDelete = useCallback(async () => {\n    setModified(false)\n\n    try {\n      await requests\n        .delete(`${serverURL}${api}/${collectionSlug}/${id}`, {\n          headers: {\n            'Accept-Language': i18n.language,\n            'Content-Type': 'application/json',\n          },\n        })\n        .then(async (res) => {\n          try {\n            const json = await res.json()\n\n            if (res.status < 400) {\n              toast.success(\n                t('general:titleDeleted', {\n                  label: getTranslation(singularLabel, i18n),\n                  title,\n                }) || json.message,\n              )\n\n              if (redirectAfterDelete) {\n                return startRouteTransition(() =>\n                  router.push(\n                    formatAdminURL({\n                      adminRoute,\n                      path: `/collections/${collectionSlug}`,\n                    }),\n                  ),\n                )\n              }\n\n              if (typeof onDelete === 'function') {\n                await onDelete({ id, collectionConfig })\n              }\n\n              return\n            }\n\n            if (json.errors) {\n              json.errors.forEach((error) => toast.error(error.message))\n            } else {\n              addDefaultError()\n            }\n\n            return false\n          } catch (_err) {\n            return addDefaultError()\n          }\n        })\n    } catch (_err) {\n      return addDefaultError()\n    }\n  }, [\n    setModified,\n    serverURL,\n    api,\n    collectionSlug,\n    id,\n    t,\n    singularLabel,\n    addDefaultError,\n    i18n,\n    title,\n    router,\n    adminRoute,\n    redirectAfterDelete,\n    onDelete,\n    collectionConfig,\n    startRouteTransition,\n  ])\n\n  if (id) {\n    return (\n      <React.Fragment>\n        <PopupList.Button\n          id={buttonId}\n          onClick={() => {\n            openModal(modalSlug)\n          }}\n        >\n          {t('general:delete')}\n        </PopupList.Button>\n        <ConfirmationModal\n          body={\n            <Translation\n              elements={{\n                '1': ({ children }) => <strong>{children}</strong>,\n              }}\n              i18nKey=\"general:aboutToDelete\"\n              t={t}\n              variables={{\n                label: getTranslation(singularLabel, i18n),\n                title: titleFromProps || title || id,\n              }}\n            />\n          }\n          confirmingLabel={t('general:deleting')}\n          heading={t('general:confirmDeletion')}\n          modalSlug={modalSlug}\n          onConfirm={handleDelete}\n        />\n      </React.Fragment>\n    )\n  }\n\n  return null\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["useModal","getTranslation","useRouter","formatAdminURL","React","useCallback","toast","useForm","useConfig","useDocumentInfo","useRouteTransition","useTranslation","requests","ConfirmationModal","PopupList","Translation","DeleteDocument","props","id","buttonId","collectionSlug","onDelete","redirectAfterDelete","singularLabel","title","titleFromProps","config","routes","admin","adminRoute","api","serverURL","getEntityConfig","collectionConfig","setModified","router","i18n","t","startRouteTransition","openModal","modalSlug","addDefaultError","error","handleDelete","delete","headers","language","then","res","json","status","success","label","message","push","path","errors","forEach","_err","_jsxs","Fragment","_jsx","Button","onClick","body","elements","1","children","i18nKey","variables","confirmingLabel","heading","onConfirm"],"sources":["../../../src/elements/DeleteDocument/index.tsx"],"sourcesContent":["'use client'\nimport type { SanitizedCollectionConfig } from 'payload'\n\nimport { useModal } from '@faceless-ui/modal'\nimport { getTranslation } from '@payloadcms/translations'\nimport { useRouter } from 'next/navigation.js'\nimport { formatAdminURL } from 'payload/shared'\nimport React, { useCallback } from 'react'\nimport { toast } from 'sonner'\n\nimport type { DocumentDrawerContextType } from '../DocumentDrawer/Provider.js'\n\nimport { useForm } from '../../forms/Form/context.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useRouteTransition } from '../../providers/RouteTransition/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { requests } from '../../utilities/api.js'\nimport { ConfirmationModal } from '../ConfirmationModal/index.js'\nimport { PopupList } from '../Popup/index.js'\nimport { Translation } from '../Translation/index.js'\nimport './index.scss'\n\nexport type Props = {\n  readonly buttonId?: string\n  readonly collectionSlug: SanitizedCollectionConfig['slug']\n  readonly id?: string\n  readonly onDelete?: DocumentDrawerContextType['onDelete']\n  readonly redirectAfterDelete?: boolean\n  readonly singularLabel: SanitizedCollectionConfig['labels']['singular']\n  readonly title?: string\n  readonly useAsTitle: SanitizedCollectionConfig['admin']['useAsTitle']\n}\n\nexport const DeleteDocument: React.FC<Props> = (props) => {\n  const {\n    id,\n    buttonId,\n    collectionSlug,\n    onDelete,\n    redirectAfterDelete = true,\n    singularLabel,\n    title: titleFromProps,\n  } = props\n\n  const {\n    config: {\n      routes: { admin: adminRoute, api },\n      serverURL,\n    },\n    getEntityConfig,\n  } = useConfig()\n\n  const collectionConfig = getEntityConfig({ collectionSlug })\n\n  const { setModified } = useForm()\n  const router = useRouter()\n  const { i18n, t } = useTranslation()\n  const { title } = useDocumentInfo()\n  const { startRouteTransition } = useRouteTransition()\n  const { openModal } = useModal()\n\n  const modalSlug = `delete-${id}`\n\n  const addDefaultError = useCallback(() => {\n    toast.error(t('error:deletingTitle', { title }))\n  }, [t, title])\n\n  const handleDelete = useCallback(async () => {\n    setModified(false)\n\n    try {\n      await requests\n        .delete(`${serverURL}${api}/${collectionSlug}/${id}`, {\n          headers: {\n            'Accept-Language': i18n.language,\n            'Content-Type': 'application/json',\n          },\n        })\n        .then(async (res) => {\n          try {\n            const json = await res.json()\n\n            if (res.status < 400) {\n              toast.success(\n                t('general:titleDeleted', {\n                  label: getTranslation(singularLabel, i18n),\n                  title,\n                }) || json.message,\n              )\n\n              if (redirectAfterDelete) {\n                return startRouteTransition(() =>\n                  router.push(\n                    formatAdminURL({\n                      adminRoute,\n                      path: `/collections/${collectionSlug}`,\n                    }),\n                  ),\n                )\n              }\n\n              if (typeof onDelete === 'function') {\n                await onDelete({ id, collectionConfig })\n              }\n\n              return\n            }\n\n            if (json.errors) {\n              json.errors.forEach((error) => toast.error(error.message))\n            } else {\n              addDefaultError()\n            }\n\n            return false\n          } catch (_err) {\n            return addDefaultError()\n          }\n        })\n    } catch (_err) {\n      return addDefaultError()\n    }\n  }, [\n    setModified,\n    serverURL,\n    api,\n    collectionSlug,\n    id,\n    t,\n    singularLabel,\n    addDefaultError,\n    i18n,\n    title,\n    router,\n    adminRoute,\n    redirectAfterDelete,\n    onDelete,\n    collectionConfig,\n    startRouteTransition,\n  ])\n\n  if (id) {\n    return (\n      <React.Fragment>\n        <PopupList.Button\n          id={buttonId}\n          onClick={() => {\n            openModal(modalSlug)\n          }}\n        >\n          {t('general:delete')}\n        </PopupList.Button>\n        <ConfirmationModal\n          body={\n            <Translation\n              elements={{\n                '1': ({ children }) => <strong>{children}</strong>,\n              }}\n              i18nKey=\"general:aboutToDelete\"\n              t={t}\n              variables={{\n                label: getTranslation(singularLabel, i18n),\n                title: titleFromProps || title || id,\n              }}\n            />\n          }\n          confirmingLabel={t('general:deleting')}\n          heading={t('general:confirmDeletion')}\n          modalSlug={modalSlug}\n          onConfirm={handleDelete}\n        />\n      </React.Fragment>\n    )\n  }\n\n  return null\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,57 +1,9 @@
-import type { ClientCollectionConfig, Where } from 'payload';
+import type { ClientCollectionConfig } from 'payload';
 import React from 'react';
+import './index.scss';
 export type Props = {
     collection: ClientCollectionConfig;
     title?: string;
 };
 export declare const DeleteMany: React.FC<Props>;
-type AfterDeleteResult = {
-    [relationTo: string]: {
-        deletedCount: number;
-        errors: unknown[];
-        ids: (number | string)[];
-        totalCount: number;
-    };
-};
-type DeleteMany_v4Props = {
-    /**
-     * A callback function to be called after the delete request is completed.
-     */
-    afterDelete?: (result: AfterDeleteResult) => void;
-    /**
-     * Optionally pass a search string to filter the documents to be deleted.
-     *
-     * This is intentionally passed as a prop so modals could pass in their own
-     * search string that may not be stored in the URL.
-     */
-    search?: string;
-    /**
-     * An object containing the relationTo as the key and an object with the following properties:
-     * - all: boolean
-     * - totalCount: number
-     * - ids: (string | number)[]
-     */
-    selections: {
-        [relationTo: string]: {
-            all?: boolean;
-            ids?: (number | string)[];
-            totalCount?: number;
-        };
-    };
-    /**
-     * Optionally pass a where clause to filter the documents to be deleted.
-     * This will be ignored if multiple relations are selected.
-     *
-     * This is intentionally passed as a prop so modals could pass in their own
-     * where clause that may not be stored in the URL.
-     */
-    where?: Where;
-};
-/**
- * Handles polymorphic document delete operations.
- *
- * If you are deleting monomorphic documents, shape your `selections` to match the polymorphic structure.
- */
-export declare function DeleteMany_v4({ afterDelete, search, selections, where }: DeleteMany_v4Props): React.JSX.Element;
-export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/DeleteMany/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAO5D,OAAO,KAAK,MAAM,OAAO,CAAA;AAgBzB,MAAM,MAAM,KAAK,GAAG;IAClB,UAAU,EAAE,sBAAsB,CAAA;IAClC,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAiDtC,CAAA;AAED,KAAK,iBAAiB,GAAG;IACvB,CAAC,UAAU,EAAE,MAAM,GAAG;QACpB,YAAY,EAAE,MAAM,CAAA;QACpB,MAAM,EAAE,OAAO,EAAE,CAAA;QACjB,GAAG,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAA;QACxB,UAAU,EAAE,MAAM,CAAA;KACnB,CAAA;CACF,CAAA;AACD,KAAK,kBAAkB,GAAG;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAA;IACjD;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;;;;OAKG;IACH,UAAU,EAAE;QACV,CAAC,UAAU,EAAE,MAAM,GAAG;YACpB,GAAG,CAAC,EAAE,OAAO,CAAA;YACb,GAAG,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAA;YACzB,UAAU,CAAC,EAAE,MAAM,CAAA;SACpB,CAAA;KACF,CAAA;IACD;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,KAAK,CAAA;CACd,CAAA;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAAE,WAAW,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,EAAE,kBAAkB,qBAsK3F"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/DeleteMany/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAOrD,OAAO,KAAsB,MAAM,OAAO,CAAA;AAU1C,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,KAAK,GAAG;IAClB,UAAU,EAAE,sBAAsB,CAAA;IAClC,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAuItC,CAAA"}