@payloadcms/ui 3.24.0-canary.f229d8d → 3.24.0

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","Fragment","isValidElement","ChevronIcon","EditIcon","LinkIcon","PlusIcon","SwapIcon","XIcon","Link","Popup","Tooltip","icons","chevron","edit","link","plus","swap","x","baseClass","ButtonContents","children","icon","showTooltip","tooltip","BuiltInIcon","_jsxs","_jsx","className","show","Button","props","id","type","ariaLabel","buttonStyle","disabled","el","enableSubMenu","iconPosition","iconStyle","newTab","onClick","onMouseDown","ref","round","size","SubMenuPopupContent","to","url","setShowTooltip","useState","classes","filter","Boolean","join","handleClick","event","preventDefault","styleClasses","buttonProps","undefined","onPointerEnter","onPointerLeave","rel","target","buttonElement","prefetch","href","Tag","button","buttonSize","horizontalAlign","noBackground","render","close","verticalAlign"],"sources":["../../../src/elements/Button/index.tsx"],"sourcesContent":["'use client'\nimport React, { Fragment, isValidElement } from 'react'\n\nimport type { Props } from './types.js'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { EditIcon } from '../../icons/Edit/index.js'\nimport { LinkIcon } from '../../icons/Link/index.js'\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { SwapIcon } from '../../icons/Swap/index.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { Link } from '../Link/index.js'\nimport { Popup } from '../Popup/index.js'\nimport { Tooltip } from '../Tooltip/index.js'\nimport './index.scss'\n\nconst icons = {\n  chevron: ChevronIcon,\n  edit: EditIcon,\n  link: LinkIcon,\n  plus: PlusIcon,\n  swap: SwapIcon,\n  x: XIcon,\n}\n\nconst baseClass = 'btn'\n\nexport const ButtonContents = ({ children, icon, showTooltip, tooltip }) => {\n  const BuiltInIcon = icons[icon]\n\n  return (\n    <Fragment>\n      {tooltip && (\n        <Tooltip className={`${baseClass}__tooltip`} show={showTooltip}>\n          {tooltip}\n        </Tooltip>\n      )}\n      <span className={`${baseClass}__content`}>\n        {children && <span className={`${baseClass}__label`}>{children}</span>}\n        {icon && (\n          <span className={`${baseClass}__icon`}>\n            {isValidElement(icon) && icon}\n            {BuiltInIcon && <BuiltInIcon />}\n          </span>\n        )}\n      </span>\n    </Fragment>\n  )\n}\n\nexport const Button: React.FC<Props> = (props) => {\n  const {\n    id,\n    type = 'button',\n    'aria-label': ariaLabel,\n    buttonStyle = 'primary',\n    children,\n    className,\n    disabled,\n    el = 'button',\n    enableSubMenu,\n    icon,\n    iconPosition = 'right',\n    iconStyle = 'without-border',\n    newTab,\n    onClick,\n    onMouseDown,\n    ref,\n    round,\n    size = 'medium',\n    SubMenuPopupContent,\n    to,\n    tooltip,\n    url,\n  } = props\n\n  const [showTooltip, setShowTooltip] = React.useState(false)\n\n  const classes = [\n    baseClass,\n    className && className,\n    icon && `${baseClass}--icon`,\n    iconStyle && `${baseClass}--icon-style-${iconStyle}`,\n    icon && !children && `${baseClass}--icon-only`,\n    size && `${baseClass}--size-${size}`,\n    icon && iconPosition && `${baseClass}--icon-position-${iconPosition}`,\n    tooltip && `${baseClass}--has-tooltip`,\n    !SubMenuPopupContent && `${baseClass}--withoutPopup`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  function handleClick(event) {\n    setShowTooltip(false)\n    if (type !== 'submit' && onClick) {\n      event.preventDefault()\n    }\n    if (onClick) {\n      onClick(event)\n    }\n  }\n\n  const styleClasses = [\n    buttonStyle && `${baseClass}--style-${buttonStyle}`,\n    disabled && `${baseClass}--disabled`,\n    round && `${baseClass}--round`,\n    SubMenuPopupContent ? `${baseClass}--withPopup` : `${baseClass}--withoutPopup`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  const buttonProps = {\n    id,\n    type,\n    'aria-disabled': disabled,\n    'aria-label': ariaLabel,\n    className: !SubMenuPopupContent ? [classes, styleClasses].join(' ') : classes,\n    disabled,\n    onClick: !disabled ? handleClick : undefined,\n    onMouseDown: !disabled ? onMouseDown : undefined,\n    onPointerEnter: tooltip ? () => setShowTooltip(true) : undefined,\n    onPointerLeave: tooltip ? () => setShowTooltip(false) : undefined,\n    rel: newTab ? 'noopener noreferrer' : undefined,\n    target: newTab ? '_blank' : undefined,\n  }\n\n  let buttonElement\n  let prefetch\n\n  switch (el) {\n    case 'anchor':\n      buttonElement = (\n        <a\n          {...buttonProps}\n          href={!disabled ? url : undefined}\n          ref={ref as React.RefObject<HTMLAnchorElement>}\n        >\n          <ButtonContents icon={icon} showTooltip={showTooltip} tooltip={tooltip}>\n            {children}\n          </ButtonContents>\n        </a>\n      )\n      break\n\n    case 'link':\n      if (disabled) {\n        buttonElement = (\n          <div {...buttonProps}>\n            <ButtonContents icon={icon} showTooltip={showTooltip} tooltip={tooltip}>\n              {children}\n            </ButtonContents>\n          </div>\n        )\n      }\n\n      buttonElement = (\n        <Link {...buttonProps} href={to || url} prefetch={prefetch}>\n          <ButtonContents icon={icon} showTooltip={showTooltip} tooltip={tooltip}>\n            {children}\n          </ButtonContents>\n        </Link>\n      )\n\n      break\n\n    default:\n      const Tag = el // eslint-disable-line no-case-declarations\n\n      buttonElement = (\n        <Tag ref={ref} type=\"submit\" {...buttonProps}>\n          <ButtonContents icon={icon} showTooltip={showTooltip} tooltip={tooltip}>\n            {children}\n          </ButtonContents>\n        </Tag>\n      )\n      break\n  }\n  if (SubMenuPopupContent) {\n    return (\n      <div className={styleClasses}>\n        {buttonElement}\n        <Popup\n          button={<ChevronIcon />}\n          buttonSize={size}\n          className={disabled && !enableSubMenu ? `${baseClass}--popup-disabled` : ''}\n          disabled={disabled && !enableSubMenu}\n          horizontalAlign=\"right\"\n          noBackground\n          render={({ close }) => SubMenuPopupContent({ close: () => close() })}\n          size=\"large\"\n          verticalAlign=\"bottom\"\n        />\n      </div>\n    )\n  }\n\n  return buttonElement\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","Fragment","isValidElement","ChevronIcon","EditIcon","LinkIcon","PlusIcon","SwapIcon","XIcon","Link","Popup","Tooltip","icons","chevron","edit","link","plus","swap","x","baseClass","ButtonContents","children","icon","showTooltip","tooltip","BuiltInIcon","_jsxs","_jsx","className","show","Button","props","id","type","ariaLabel","buttonStyle","disabled","el","enableSubMenu","iconPosition","iconStyle","newTab","onClick","onMouseDown","ref","round","size","SubMenuPopupContent","to","url","setShowTooltip","useState","classes","filter","Boolean","join","handleClick","event","preventDefault","styleClasses","buttonProps","undefined","onPointerEnter","onPointerLeave","rel","target","buttonElement","prefetch","href","Tag","button","buttonSize","horizontalAlign","noBackground","render","close","verticalAlign"],"sources":["../../../src/elements/Button/index.tsx"],"sourcesContent":["'use client'\nimport React, { Fragment, isValidElement } from 'react'\n\nimport type { Props } from './types.js'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { EditIcon } from '../../icons/Edit/index.js'\nimport { LinkIcon } from '../../icons/Link/index.js'\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { SwapIcon } from '../../icons/Swap/index.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { Link } from '../Link/index.js'\nimport { Popup } from '../Popup/index.js'\nimport { Tooltip } from '../Tooltip/index.js'\nimport './index.scss'\n\nconst icons = {\n  chevron: ChevronIcon,\n  edit: EditIcon,\n  link: LinkIcon,\n  plus: PlusIcon,\n  swap: SwapIcon,\n  x: XIcon,\n}\n\nconst baseClass = 'btn'\n\nexport const ButtonContents = ({ children, icon, showTooltip, tooltip }) => {\n  const BuiltInIcon = icons[icon]\n\n  return (\n    <Fragment>\n      {tooltip && (\n        <Tooltip className={`${baseClass}__tooltip`} show={showTooltip}>\n          {tooltip}\n        </Tooltip>\n      )}\n      <span className={`${baseClass}__content`}>\n        {children && <span className={`${baseClass}__label`}>{children}</span>}\n        {icon && (\n          <span className={`${baseClass}__icon`}>\n            {isValidElement(icon) && icon}\n            {BuiltInIcon && <BuiltInIcon />}\n          </span>\n        )}\n      </span>\n    </Fragment>\n  )\n}\n\nexport const Button: React.FC<Props> = (props) => {\n  const {\n    id,\n    type = 'button',\n    'aria-label': ariaLabel,\n    buttonStyle = 'primary',\n    children,\n    className,\n    disabled,\n    el = 'button',\n    enableSubMenu,\n    icon,\n    iconPosition = 'right',\n    iconStyle = 'without-border',\n    newTab,\n    onClick,\n    onMouseDown,\n    ref,\n    round,\n    size = 'medium',\n    SubMenuPopupContent,\n    to,\n    tooltip,\n    url,\n  } = props\n\n  const [showTooltip, setShowTooltip] = React.useState(false)\n\n  const classes = [\n    baseClass,\n    className && className,\n    icon && `${baseClass}--icon`,\n    iconStyle && `${baseClass}--icon-style-${iconStyle}`,\n    icon && !children && `${baseClass}--icon-only`,\n    size && `${baseClass}--size-${size}`,\n    icon && iconPosition && `${baseClass}--icon-position-${iconPosition}`,\n    tooltip && `${baseClass}--has-tooltip`,\n    !SubMenuPopupContent && `${baseClass}--withoutPopup`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  function handleClick(event) {\n    setShowTooltip(false)\n    if (type !== 'submit' && onClick) {\n      event.preventDefault()\n    }\n    if (onClick) {\n      onClick(event)\n    }\n  }\n\n  const styleClasses = [\n    buttonStyle && `${baseClass}--style-${buttonStyle}`,\n    disabled && `${baseClass}--disabled`,\n    round && `${baseClass}--round`,\n    SubMenuPopupContent ? `${baseClass}--withPopup` : `${baseClass}--withoutPopup`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  const buttonProps = {\n    id,\n    type,\n    'aria-disabled': disabled,\n    'aria-label': ariaLabel,\n    className: !SubMenuPopupContent ? [classes, styleClasses].join(' ') : classes,\n    disabled,\n    onClick: !disabled ? handleClick : undefined,\n    onMouseDown: !disabled ? onMouseDown : undefined,\n    onPointerEnter: tooltip ? () => setShowTooltip(true) : undefined,\n    onPointerLeave: tooltip ? () => setShowTooltip(false) : undefined,\n    rel: newTab ? 'noopener noreferrer' : undefined,\n    target: newTab ? '_blank' : undefined,\n  }\n\n  let buttonElement\n  let prefetch\n\n  switch (el) {\n    case 'anchor':\n      buttonElement = (\n        <a\n          {...buttonProps}\n          href={!disabled ? url : undefined}\n          ref={ref as React.RefObject<HTMLAnchorElement>}\n        >\n          <ButtonContents icon={icon} showTooltip={showTooltip} tooltip={tooltip}>\n            {children}\n          </ButtonContents>\n        </a>\n      )\n      break\n\n    case 'link':\n      if (disabled) {\n        buttonElement = (\n          <div {...buttonProps}>\n            <ButtonContents icon={icon} showTooltip={showTooltip} tooltip={tooltip}>\n              {children}\n            </ButtonContents>\n          </div>\n        )\n      }\n\n      buttonElement = (\n        <Link {...buttonProps} href={to || url} prefetch={prefetch}>\n          <ButtonContents icon={icon} showTooltip={showTooltip} tooltip={tooltip}>\n            {children}\n          </ButtonContents>\n        </Link>\n      )\n\n      break\n\n    default:\n      const Tag = el // eslint-disable-line no-case-declarations\n\n      buttonElement = (\n        <Tag ref={ref} type=\"submit\" {...buttonProps}>\n          <ButtonContents icon={icon} showTooltip={showTooltip} tooltip={tooltip}>\n            {children}\n          </ButtonContents>\n        </Tag>\n      )\n      break\n  }\n  if (SubMenuPopupContent) {\n    return (\n      <div className={styleClasses}>\n        {buttonElement}\n        <Popup\n          button={<ChevronIcon />}\n          buttonSize={size}\n          className={disabled && !enableSubMenu ? `${baseClass}--popup-disabled` : ''}\n          disabled={disabled && !enableSubMenu}\n          horizontalAlign=\"right\"\n          id={`${id}-popup`}\n          noBackground\n          render={({ close }) => SubMenuPopupContent({ close: () => close() })}\n          size=\"large\"\n          verticalAlign=\"bottom\"\n        />\n      </div>\n    )\n  }\n\n  return buttonElement\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Button/index.scss

@@ -68,11 +68,20 @@
       background-color: var(--bg-color);
       box-shadow: var(--box-shadow);
       border-radius: $style-radius-m;
-      border-left: 1px solid var(--theme-bg);
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
       align-items: center;
 
+      html:not([dir='RTL']) & {
+        border-left: 1px solid var(--theme-bg);
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+
+      html[dir='RTL'] & {
+        border-right: 1px solid var(--theme-bg);
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+
       &:hover,
       &:focus-visible,
       &:focus,
@@ -236,8 +245,15 @@
     }
 
     &--withPopup .btn {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
+      html:not([dir='RTL']) & {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+
+      html[dir='RTL'] & {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
     }
 
     &--style-icon-label,

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import './index.scss';
+export type OnCancel = () => void;
+export type ConfirmationModalProps = {
+    body: React.ReactNode;
+    cancelLabel?: string;
+    className?: string;
+    confirmingLabel?: string;
+    confirmLabel?: string;
+    heading: React.ReactNode;
+    modalSlug: string;
+    onCancel?: OnCancel;
+    onConfirm: () => Promise<void> | void;
+};
+export declare function ConfirmationModal(props: ConfirmationModalProps): React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ConfirmationModal/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAM1C,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAA;AAEjC,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,SAAS,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;CACtC,CAAA;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,qBA4E9D"}

package/dist/elements/ConfirmationModal/index.js

@@ -0,0 +1,158 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Modal, useModal } from '@faceless-ui/modal';
+import React, { useCallback } from 'react';
+import { useEditDepth } from '../../providers/EditDepth/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import { Button } from '../Button/index.js';
+import { drawerZBase } from '../Drawer/index.js';
+import './index.scss';
+const baseClass = 'confirmation-modal';
+export function ConfirmationModal(props) {
+  const $ = _c(33);
+  const {
+    body,
+    cancelLabel,
+    className,
+    confirmingLabel,
+    confirmLabel,
+    heading,
+    modalSlug,
+    onCancel: onCancelFromProps,
+    onConfirm: onConfirmFromProps
+  } = props;
+  const editDepth = useEditDepth();
+  const [confirming, setConfirming] = React.useState(false);
+  const {
+    closeModal
+  } = useModal();
+  const {
+    t
+  } = useTranslation();
+  let t0;
+  if ($[0] !== closeModal || $[1] !== confirming || $[2] !== modalSlug || $[3] !== onConfirmFromProps) {
+    t0 = async () => {
+      if (!confirming) {
+        setConfirming(true);
+        if (typeof onConfirmFromProps === "function") {
+          await onConfirmFromProps();
+        }
+        setConfirming(false);
+        closeModal(modalSlug);
+      }
+    };
+    $[0] = closeModal;
+    $[1] = confirming;
+    $[2] = modalSlug;
+    $[3] = onConfirmFromProps;
+    $[4] = t0;
+  } else {
+    t0 = $[4];
+  }
+  const onConfirm = t0;
+  let t1;
+  if ($[5] !== closeModal || $[6] !== confirming || $[7] !== modalSlug || $[8] !== onCancelFromProps) {
+    t1 = () => {
+      if (!confirming) {
+        closeModal(modalSlug);
+        if (typeof onCancelFromProps === "function") {
+          onCancelFromProps();
+        }
+      }
+    };
+    $[5] = closeModal;
+    $[6] = confirming;
+    $[7] = modalSlug;
+    $[8] = onCancelFromProps;
+    $[9] = t1;
+  } else {
+    t1 = $[9];
+  }
+  const onCancel = t1;
+  let t2;
+  if ($[10] !== className) {
+    t2 = [baseClass, className].filter(Boolean);
+    $[10] = className;
+    $[11] = t2;
+  } else {
+    t2 = $[11];
+  }
+  const t3 = t2.join(" ");
+  const t4 = drawerZBase + editDepth;
+  let t5;
+  if ($[12] !== body || $[13] !== cancelLabel || $[14] !== confirmLabel || $[15] !== confirming || $[16] !== confirmingLabel || $[17] !== heading || $[18] !== modalSlug || $[19] !== onCancel || $[20] !== onConfirm || $[21] !== t || $[22] !== t3 || $[23] !== t4) {
+    let t6;
+    if ($[25] !== cancelLabel || $[26] !== t) {
+      t6 = cancelLabel || t("general:cancel");
+      $[25] = cancelLabel;
+      $[26] = t;
+      $[27] = t6;
+    } else {
+      t6 = $[27];
+    }
+    let t7;
+    if ($[28] !== confirmLabel || $[29] !== confirming || $[30] !== confirmingLabel || $[31] !== t) {
+      t7 = confirming ? confirmingLabel || `${t("general:loading")}...` : confirmLabel || t("general:confirm");
+      $[28] = confirmLabel;
+      $[29] = confirming;
+      $[30] = confirmingLabel;
+      $[31] = t;
+      $[32] = t7;
+    } else {
+      t7 = $[32];
+    }
+    t5 = _jsx(Modal, {
+      className: t3,
+      slug: modalSlug,
+      style: {
+        zIndex: t4
+      },
+      children: _jsxs("div", {
+        className: `${baseClass}__wrapper`,
+        children: [_jsxs("div", {
+          className: `${baseClass}__content`,
+          children: [_jsx("h1", {
+            children: heading
+          }), _jsx("p", {
+            children: body
+          })]
+        }), _jsxs("div", {
+          className: `${baseClass}__controls`,
+          children: [_jsx(Button, {
+            buttonStyle: "secondary",
+            disabled: confirming,
+            id: "confirm-cancel",
+            onClick: onCancel,
+            size: "large",
+            type: "button",
+            children: t6
+          }), _jsx(Button, {
+            id: "confirm-action",
+            onClick: onConfirm,
+            size: "large",
+            children: t7
+          })]
+        })]
+      })
+    });
+    $[12] = body;
+    $[13] = cancelLabel;
+    $[14] = confirmLabel;
+    $[15] = confirming;
+    $[16] = confirmingLabel;
+    $[17] = heading;
+    $[18] = modalSlug;
+    $[19] = onCancel;
+    $[20] = onConfirm;
+    $[21] = t;
+    $[22] = t3;
+    $[23] = t4;
+    $[24] = t5;
+  } else {
+    t5 = $[24];
+  }
+  return t5;
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","Modal","useModal","React","useCallback","useEditDepth","useTranslation","Button","drawerZBase","baseClass","ConfirmationModal","props","$","body","cancelLabel","className","confirmingLabel","confirmLabel","heading","modalSlug","onCancel","onCancelFromProps","onConfirm","onConfirmFromProps","editDepth","confirming","setConfirming","useState","closeModal","t","t0","t1","t2","filter","Boolean","t3","join","t4","t5","t6","t7","_jsx","slug","style","zIndex","children","_jsxs","buttonStyle","disabled","id","onClick","size","type"],"sources":["../../../src/elements/ConfirmationModal/index.tsx"],"sourcesContent":["'use client'\nimport { Modal, useModal } from '@faceless-ui/modal'\nimport React, { useCallback } from 'react'\n\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { drawerZBase } from '../Drawer/index.js'\nimport './index.scss'\n\nconst baseClass = 'confirmation-modal'\n\nexport type OnCancel = () => void\n\nexport type ConfirmationModalProps = {\n  body: React.ReactNode\n  cancelLabel?: string\n  className?: string\n  confirmingLabel?: string\n  confirmLabel?: string\n  heading: React.ReactNode\n  modalSlug: string\n  onCancel?: OnCancel\n  onConfirm: () => Promise<void> | void\n}\n\nexport function ConfirmationModal(props: ConfirmationModalProps) {\n  const {\n    body,\n    cancelLabel,\n    className,\n    confirmingLabel,\n    confirmLabel,\n    heading,\n    modalSlug,\n    onCancel: onCancelFromProps,\n    onConfirm: onConfirmFromProps,\n  } = props\n\n  const editDepth = useEditDepth()\n\n  const [confirming, setConfirming] = React.useState(false)\n\n  const { closeModal } = useModal()\n  const { t } = useTranslation()\n\n  const onConfirm = useCallback(async () => {\n    if (!confirming) {\n      setConfirming(true)\n\n      if (typeof onConfirmFromProps === 'function') {\n        await onConfirmFromProps()\n      }\n\n      setConfirming(false)\n      closeModal(modalSlug)\n    }\n  }, [confirming, onConfirmFromProps, closeModal, modalSlug])\n\n  const onCancel = useCallback(() => {\n    if (!confirming) {\n      closeModal(modalSlug)\n\n      if (typeof onCancelFromProps === 'function') {\n        onCancelFromProps()\n      }\n    }\n  }, [confirming, onCancelFromProps, closeModal, modalSlug])\n\n  return (\n    <Modal\n      className={[baseClass, className].filter(Boolean).join(' ')}\n      slug={modalSlug}\n      style={{\n        zIndex: drawerZBase + editDepth,\n      }}\n    >\n      <div className={`${baseClass}__wrapper`}>\n        <div className={`${baseClass}__content`}>\n          <h1>{heading}</h1>\n          <p>{body}</p>\n        </div>\n        <div className={`${baseClass}__controls`}>\n          <Button\n            buttonStyle=\"secondary\"\n            disabled={confirming}\n            id=\"confirm-cancel\"\n            onClick={onCancel}\n            size=\"large\"\n            type=\"button\"\n          >\n            {cancelLabel || t('general:cancel')}\n          </Button>\n          <Button id=\"confirm-action\" onClick={onConfirm} size=\"large\">\n            {confirming\n              ? confirmingLabel || `${t('general:loading')}...`\n              : confirmLabel || t('general:confirm')}\n          </Button>\n        </div>\n      </div>\n    </Modal>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/{GenerateConfirmation → ConfirmationModal}/index.scss

@@ -1,7 +1,7 @@
 @import '../../scss/styles.scss';
 
 @layer payload-default {
-  .generate-confirmation {
+  .confirmation-modal {
     @include blur-bg;
     display: flex;
     align-items: center;

package/dist/elements/DatePicker/DatePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/elements/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAKvC,OAAO,gBAAgB,CAAA;AACvB,OAAO,cAAc,CAAA;AAKrB,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAuH/B,CAAA;AAGD,eAAe,UAAU,CAAA"}
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/elements/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAKvC,OAAO,gBAAgB,CAAA;AACvB,OAAO,cAAc,CAAA;AAKrB,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAwH/B,CAAA;AAGD,eAAe,UAAU,CAAA"}

package/dist/elements/DatePicker/DatePicker.js

@@ -15,6 +15,7 @@ const baseClass = 'date-time-picker';
 const DatePicker = props => {
   const $ = _c(11);
   const {
+    id,
     displayFormat: customDisplayFormat,
     maxDate,
     maxTime,
@@ -143,6 +144,7 @@ const DatePicker = props => {
   React.useEffect(t8, t9);
   return _jsxs("div", {
     className: classes,
+    id,
     children: [_jsxs("div", {
       className: `${baseClass}__icon-wrap`,
       children: [dateTimePickerProps.selected && _jsx("button", {

package/dist/elements/DatePicker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","names":["c","_c","React","ReactDatePickerDefaultImport","registerLocale","setDefaultLocale","ReactDatePicker","default","CalendarIcon","XIcon","useTranslation","getFormattedLocale","baseClass","DatePicker","props","$","displayFormat","customDisplayFormat","maxDate","maxTime","minDate","minTime","monthsToShow","t0","onChange","onChangeFromProps","overrides","pickerAppearance","t1","placeholder","placeholderText","readOnly","timeFormat","t2","timeIntervals","t3","value","undefined","i18n","dateFormat","t4","incomingDate","newDate","Date","includes","tzOffset","getTimezoneOffset","setHours","t5","dateTimePickerProps","customInputRef","disabled","monthsShown","Math","min","popperPlacement","selected","showMonthYearPicker","showPopperArrow","showTimeSelect","t6","t7","filter","Boolean","classes","join","t8","t9","dateFNS","language","datepickerLocale","t10","console","warn","useEffect","_jsxs","className","children","_jsx","onClick","type","dropdownMode","showMonthDropdown","showYearDropdown"],"sources":["../../../src/elements/DatePicker/DatePicker.tsx"],"sourcesContent":["'use client'\nimport type { DatePickerProps } from 'react-datepicker'\n\nimport React from 'react'\nimport ReactDatePickerDefaultImport, { registerLocale, setDefaultLocale } from 'react-datepicker'\nconst ReactDatePicker = (ReactDatePickerDefaultImport.default ||\n  ReactDatePickerDefaultImport) as unknown as typeof ReactDatePickerDefaultImport.default\n\nimport type { Props } from './types.js'\n\nimport { CalendarIcon } from '../../icons/Calendar/index.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './library.scss'\nimport './index.scss'\nimport { getFormattedLocale } from './getFormattedLocale.js'\n\nconst baseClass = 'date-time-picker'\n\nconst DatePicker: React.FC<Props> = (props) => {\n  const {\n    displayFormat: customDisplayFormat,\n    maxDate,\n    maxTime,\n    minDate,\n    minTime,\n    monthsToShow = 1,\n    onChange: onChangeFromProps,\n    overrides,\n    pickerAppearance = 'default',\n    placeholder: placeholderText,\n    readOnly,\n    timeFormat = 'h:mm aa',\n    timeIntervals = 30,\n    value,\n  } = props\n\n  // Use the user's AdminUI language preference for the locale\n  const { i18n } = useTranslation()\n\n  let dateFormat = customDisplayFormat\n\n  if (!customDisplayFormat) {\n    // when no displayFormat is provided, determine format based on the picker appearance\n    if (pickerAppearance === 'default') {\n      dateFormat = 'MM/dd/yyyy'\n    } else if (pickerAppearance === 'dayAndTime') {\n      dateFormat = 'MMM d, yyy h:mm a'\n    } else if (pickerAppearance === 'timeOnly') {\n      dateFormat = 'h:mm a'\n    } else if (pickerAppearance === 'dayOnly') {\n      dateFormat = 'MMM dd'\n    } else if (pickerAppearance === 'monthOnly') {\n      dateFormat = 'MMMM'\n    }\n  }\n\n  const onChange: Extract<\n    DatePickerProps,\n    { selectsMultiple?: never; selectsRange?: never }\n  >['onChange'] = (incomingDate) => {\n    const newDate = incomingDate\n    if (newDate instanceof Date && ['dayOnly', 'default', 'monthOnly'].includes(pickerAppearance)) {\n      const tzOffset = incomingDate.getTimezoneOffset() / 60\n      newDate.setHours(12 - tzOffset, 0)\n    }\n    if (typeof onChangeFromProps === 'function') {\n      onChangeFromProps(newDate)\n    }\n  }\n\n  const dateTimePickerProps: Extract<\n    DatePickerProps,\n    { selectsMultiple?: never; selectsRange?: never }\n  > = {\n    customInputRef: 'ref',\n    dateFormat,\n    disabled: readOnly,\n    maxDate,\n    maxTime,\n    minDate,\n    minTime,\n    monthsShown: Math.min(2, monthsToShow),\n    onChange,\n    placeholderText,\n    popperPlacement: 'bottom-start',\n    selected: value && new Date(value),\n    showMonthYearPicker: pickerAppearance === 'monthOnly',\n    showPopperArrow: false,\n    showTimeSelect: pickerAppearance === 'dayAndTime' || pickerAppearance === 'timeOnly',\n    timeFormat,\n    timeIntervals,\n    ...(overrides as Extract<\n      DatePickerProps,\n      { selectsMultiple?: never; selectsRange?: never } // to satisfy TypeScript. Overrides can enable selectsMultiple or selectsRange but then it's up to the user to ensure they pass in the correct onChange\n    >),\n  }\n\n  const classes = [baseClass, `${baseClass}__appearance--${pickerAppearance}`]\n    .filter(Boolean)\n    .join(' ')\n\n  React.useEffect(() => {\n    if (i18n.dateFNS) {\n      try {\n        const datepickerLocale = getFormattedLocale(i18n.language)\n        registerLocale(datepickerLocale, i18n.dateFNS)\n        setDefaultLocale(datepickerLocale)\n      } catch (e) {\n        console.warn(`Could not find DatePicker locale for ${i18n.language}`)\n      }\n    }\n  }, [i18n.language, i18n.dateFNS])\n\n  return (\n    <div className={classes}>\n      <div className={`${baseClass}__icon-wrap`}>\n        {dateTimePickerProps.selected && (\n          <button\n            className={`${baseClass}__clear-button`}\n            onClick={() => onChange(null)}\n            type=\"button\"\n          >\n            <XIcon />\n          </button>\n        )}\n        <CalendarIcon />\n      </div>\n      <div className={`${baseClass}__input-wrapper`}>\n        <ReactDatePicker\n          {...dateTimePickerProps}\n          dropdownMode=\"select\"\n          showMonthDropdown\n          showYearDropdown\n        />\n      </div>\n    </div>\n  )\n}\n\n// eslint-disable-next-line no-restricted-exports\nexport default DatePicker\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"DatePicker.js","names":["c","_c","React","ReactDatePickerDefaultImport","registerLocale","setDefaultLocale","ReactDatePicker","default","CalendarIcon","XIcon","useTranslation","getFormattedLocale","baseClass","DatePicker","props","$","id","displayFormat","customDisplayFormat","maxDate","maxTime","minDate","minTime","monthsToShow","t0","onChange","onChangeFromProps","overrides","pickerAppearance","t1","placeholder","placeholderText","readOnly","timeFormat","t2","timeIntervals","t3","value","undefined","i18n","dateFormat","t4","incomingDate","newDate","Date","includes","tzOffset","getTimezoneOffset","setHours","t5","dateTimePickerProps","customInputRef","disabled","monthsShown","Math","min","popperPlacement","selected","showMonthYearPicker","showPopperArrow","showTimeSelect","t6","t7","filter","Boolean","classes","join","t8","t9","dateFNS","language","datepickerLocale","t10","console","warn","useEffect","_jsxs","className","children","_jsx","onClick","type","dropdownMode","showMonthDropdown","showYearDropdown"],"sources":["../../../src/elements/DatePicker/DatePicker.tsx"],"sourcesContent":["'use client'\nimport type { DatePickerProps } from 'react-datepicker'\n\nimport React from 'react'\nimport ReactDatePickerDefaultImport, { registerLocale, setDefaultLocale } from 'react-datepicker'\nconst ReactDatePicker = (ReactDatePickerDefaultImport.default ||\n  ReactDatePickerDefaultImport) as unknown as typeof ReactDatePickerDefaultImport.default\n\nimport type { Props } from './types.js'\n\nimport { CalendarIcon } from '../../icons/Calendar/index.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './library.scss'\nimport './index.scss'\nimport { getFormattedLocale } from './getFormattedLocale.js'\n\nconst baseClass = 'date-time-picker'\n\nconst DatePicker: React.FC<Props> = (props) => {\n  const {\n    id,\n    displayFormat: customDisplayFormat,\n    maxDate,\n    maxTime,\n    minDate,\n    minTime,\n    monthsToShow = 1,\n    onChange: onChangeFromProps,\n    overrides,\n    pickerAppearance = 'default',\n    placeholder: placeholderText,\n    readOnly,\n    timeFormat = 'h:mm aa',\n    timeIntervals = 30,\n    value,\n  } = props\n\n  // Use the user's AdminUI language preference for the locale\n  const { i18n } = useTranslation()\n\n  let dateFormat = customDisplayFormat\n\n  if (!customDisplayFormat) {\n    // when no displayFormat is provided, determine format based on the picker appearance\n    if (pickerAppearance === 'default') {\n      dateFormat = 'MM/dd/yyyy'\n    } else if (pickerAppearance === 'dayAndTime') {\n      dateFormat = 'MMM d, yyy h:mm a'\n    } else if (pickerAppearance === 'timeOnly') {\n      dateFormat = 'h:mm a'\n    } else if (pickerAppearance === 'dayOnly') {\n      dateFormat = 'MMM dd'\n    } else if (pickerAppearance === 'monthOnly') {\n      dateFormat = 'MMMM'\n    }\n  }\n\n  const onChange: Extract<\n    DatePickerProps,\n    { selectsMultiple?: never; selectsRange?: never }\n  >['onChange'] = (incomingDate) => {\n    const newDate = incomingDate\n    if (newDate instanceof Date && ['dayOnly', 'default', 'monthOnly'].includes(pickerAppearance)) {\n      const tzOffset = incomingDate.getTimezoneOffset() / 60\n      newDate.setHours(12 - tzOffset, 0)\n    }\n    if (typeof onChangeFromProps === 'function') {\n      onChangeFromProps(newDate)\n    }\n  }\n\n  const dateTimePickerProps: Extract<\n    DatePickerProps,\n    { selectsMultiple?: never; selectsRange?: never }\n  > = {\n    customInputRef: 'ref',\n    dateFormat,\n    disabled: readOnly,\n    maxDate,\n    maxTime,\n    minDate,\n    minTime,\n    monthsShown: Math.min(2, monthsToShow),\n    onChange,\n    placeholderText,\n    popperPlacement: 'bottom-start',\n    selected: value && new Date(value),\n    showMonthYearPicker: pickerAppearance === 'monthOnly',\n    showPopperArrow: false,\n    showTimeSelect: pickerAppearance === 'dayAndTime' || pickerAppearance === 'timeOnly',\n    timeFormat,\n    timeIntervals,\n    ...(overrides as Extract<\n      DatePickerProps,\n      { selectsMultiple?: never; selectsRange?: never } // to satisfy TypeScript. Overrides can enable selectsMultiple or selectsRange but then it's up to the user to ensure they pass in the correct onChange\n    >),\n  }\n\n  const classes = [baseClass, `${baseClass}__appearance--${pickerAppearance}`]\n    .filter(Boolean)\n    .join(' ')\n\n  React.useEffect(() => {\n    if (i18n.dateFNS) {\n      try {\n        const datepickerLocale = getFormattedLocale(i18n.language)\n        registerLocale(datepickerLocale, i18n.dateFNS)\n        setDefaultLocale(datepickerLocale)\n      } catch (e) {\n        console.warn(`Could not find DatePicker locale for ${i18n.language}`)\n      }\n    }\n  }, [i18n.language, i18n.dateFNS])\n\n  return (\n    <div className={classes} id={id}>\n      <div className={`${baseClass}__icon-wrap`}>\n        {dateTimePickerProps.selected && (\n          <button\n            className={`${baseClass}__clear-button`}\n            onClick={() => onChange(null)}\n            type=\"button\"\n          >\n            <XIcon />\n          </button>\n        )}\n        <CalendarIcon />\n      </div>\n      <div className={`${baseClass}__input-wrapper`}>\n        <ReactDatePicker\n          {...dateTimePickerProps}\n          dropdownMode=\"select\"\n          showMonthDropdown\n          showYearDropdown\n        />\n      </div>\n    </div>\n  )\n}\n\n// eslint-disable-next-line no-restricted-exports\nexport default DatePicker\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,5 +1,6 @@
 import type { DayPickerProps, SharedProps, TimePickerProps } from 'payload';
 export type Props = {
+    id?: string;
     onChange?: (val: Date) => void;
     placeholder?: string;
     readOnly?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/DatePicker/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAE3E,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,KAAK,IAAI,CAAA;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;CACtB,GAAG,cAAc,GAChB,WAAW,GACX,eAAe,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/DatePicker/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAE3E,MAAM,MAAM,KAAK,GAAG;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,KAAK,IAAI,CAAA;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;CACtB,GAAG,cAAc,GAChB,WAAW,GACX,eAAe,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../src/elements/DatePicker/types.ts"],"sourcesContent":["import type { DayPickerProps, SharedProps, TimePickerProps } from 'payload'\n\nexport type Props = {\n  onChange?: (val: Date) => void\n  placeholder?: string\n  readOnly?: boolean\n  value?: Date | string\n} & DayPickerProps &\n  SharedProps &\n  TimePickerProps\n"],"mappings":"AAEA","ignoreList":[]}
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/elements/DatePicker/types.ts"],"sourcesContent":["import type { DayPickerProps, SharedProps, TimePickerProps } from 'payload'\n\nexport type Props = {\n  id?: string\n  onChange?: (val: Date) => void\n  placeholder?: string\n  readOnly?: boolean\n  value?: Date | string\n} & DayPickerProps &\n  SharedProps &\n  TimePickerProps\n"],"mappings":"AAEA","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/DeleteDocument/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAKxD,OAAO,KAA2C,MAAM,OAAO,CAAA;AAG/D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,+BAA+B,CAAA;AAc9E,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;IAC1B,QAAQ,CAAC,cAAc,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAA;IAC1D,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,QAAQ,CAAC,EAAE,yBAAyB,CAAC,UAAU,CAAC,CAAA;IACzD,QAAQ,CAAC,mBAAmB,CAAC,EAAE,OAAO,CAAA;IACtC,QAAQ,CAAC,aAAa,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAC,UAAU,CAAC,CAAA;IACvE,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,UAAU,EAAE,yBAAyB,CAAC,OAAO,CAAC,CAAC,YAAY,CAAC,CAAA;CACtE,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA+L1C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/DeleteDocument/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAKxD,OAAO,KAAsB,MAAM,OAAO,CAAA;AAG1C,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,+BAA+B,CAAA;AAY9E,OAAO,cAAc,CAAA;AAErB,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;IAC1B,QAAQ,CAAC,cAAc,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAA;IAC1D,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,QAAQ,CAAC,EAAE,yBAAyB,CAAC,UAAU,CAAC,CAAA;IACzD,QAAQ,CAAC,mBAAmB,CAAC,EAAE,OAAO,CAAA;IACtC,QAAQ,CAAC,aAAa,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAC,UAAU,CAAC,CAAA;IACvE,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,UAAU,EAAE,yBAAyB,CAAC,OAAO,CAAC,CAAC,YAAY,CAAC,CAAA;CACtE,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAiJ1C,CAAA"}

package/dist/elements/DeleteDocument/index.js

@@ -1,25 +1,22 @@
 'use client';
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Modal, useModal } from '@faceless-ui/modal';
+import { useModal } from '@faceless-ui/modal';
 import { getTranslation } from '@payloadcms/translations';
 import { useRouter } from 'next/navigation.js';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback } from 'react';
 import { toast } from 'sonner';
 import { useForm } from '../../forms/Form/context.js';
 import { useConfig } from '../../providers/Config/index.js';
 import { useDocumentInfo } from '../../providers/DocumentInfo/index.js';
-import { useEditDepth } from '../../providers/EditDepth/index.js';
 import { useRouteTransition } from '../../providers/RouteTransition/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { requests } from '../../utilities/api.js';
 import { formatAdminURL } from '../../utilities/formatAdminURL.js';
-import { Button } from '../Button/index.js';
-import { drawerZBase } from '../Drawer/index.js';
+import { ConfirmationModal } from '../ConfirmationModal/index.js';
 import { PopupList } from '../Popup/index.js';
 import { Translation } from '../Translation/index.js';
 import './index.scss';
-const baseClass = 'delete-document';
 export const DeleteDocument = props => {
   const {
     id,
@@ -46,11 +43,6 @@ export const DeleteDocument = props => {
   const {
     setModified
   } = useForm();
-  const [deleting, setDeleting] = useState(false);
-  const {
-    closeModal,
-    toggleModal
-  } = useModal();
   const router = useRouter();
   const {
     i18n,
@@ -59,25 +51,20 @@ export const DeleteDocument = props => {
   const {
     title
   } = useDocumentInfo();
-  const editDepth = useEditDepth();
   const {
     startRouteTransition
   } = useRouteTransition();
+  const {
+    openModal
+  } = useModal();
   const titleToRender = titleFromProps || title || id;
   const modalSlug = `delete-${id}`;
   const addDefaultError = useCallback(() => {
-    setDeleting(false);
     toast.error(t('error:deletingTitle', {
       title
     }));
   }, [t, title]);
-  useEffect(() => {
-    return () => {
-      closeModal(modalSlug);
-    };
-  }, [closeModal, modalSlug]);
   const handleDelete = useCallback(async () => {
-    setDeleting(true);
     setModified(false);
     try {
       await requests.delete(`${serverURL}${api}/${collectionSlug}/${id}`, {
@@ -89,8 +76,6 @@ export const DeleteDocument = props => {
         try {
           const json = await res.json();
           if (res.status < 400) {
-            setDeleting(false);
-            toggleModal(modalSlug);
             toast.success(t('general:titleDeleted', {
               label: getTranslation(singularLabel, i18n),
               title
@@ -107,83 +92,50 @@ export const DeleteDocument = props => {
                 collectionConfig
               });
             }
-            toggleModal(modalSlug);
             return;
           }
-          toggleModal(modalSlug);
           if (json.errors) {
             json.errors.forEach(error => toast.error(error.message));
           } else {
             addDefaultError();
           }
           return false;
-        } catch (e_0) {
+        } catch (_err_0) {
           return addDefaultError();
         }
       });
-    } catch (e) {
-      addDefaultError();
+    } catch (_err) {
+      return addDefaultError();
     }
-  }, [setModified, serverURL, api, collectionSlug, id, toggleModal, modalSlug, t, singularLabel, i18n, title, router, adminRoute, addDefaultError, redirectAfterDelete, onDelete, collectionConfig, startRouteTransition]);
+  }, [setModified, serverURL, api, collectionSlug, id, t, singularLabel, addDefaultError, i18n, title, router, adminRoute, redirectAfterDelete, onDelete, collectionConfig, startRouteTransition]);
   if (id) {
     return /*#__PURE__*/_jsxs(React.Fragment, {
       children: [/*#__PURE__*/_jsx(PopupList.Button, {
         id: buttonId,
         onClick: () => {
-          setDeleting(false);
-          toggleModal(modalSlug);
+          openModal(modalSlug);
         },
         children: t('general:delete')
-      }), /*#__PURE__*/_jsx(Modal, {
-        className: baseClass,
-        slug: modalSlug,
-        style: {
-          zIndex: drawerZBase + editDepth
-        },
-        children: /*#__PURE__*/_jsxs("div", {
-          className: `${baseClass}__wrapper`,
-          children: [/*#__PURE__*/_jsxs("div", {
-            className: `${baseClass}__content`,
-            children: [/*#__PURE__*/_jsx("h1", {
-              children: t('general:confirmDeletion')
-            }), /*#__PURE__*/_jsx("p", {
-              children: /*#__PURE__*/_jsx(Translation, {
-                elements: {
-                  '1': ({
-                    children
-                  }) => /*#__PURE__*/_jsx("strong", {
-                    children: children
-                  })
-                },
-                i18nKey: "general:aboutToDelete",
-                t: t,
-                variables: {
-                  label: getTranslation(singularLabel, i18n),
-                  title: titleToRender
-                }
-              })
-            })]
-          }), /*#__PURE__*/_jsxs("div", {
-            className: `${baseClass}__controls`,
-            children: [/*#__PURE__*/_jsx(Button, {
-              buttonStyle: "secondary",
-              id: "confirm-cancel",
-              onClick: deleting ? undefined : () => toggleModal(modalSlug),
-              size: "large",
-              type: "button",
-              children: t('general:cancel')
-            }), /*#__PURE__*/_jsx(Button, {
-              id: "confirm-delete",
-              onClick: () => {
-                if (!deleting) {
-                  void handleDelete();
-                }
-              },
-              size: "large",
-              children: deleting ? t('general:deleting') : t('general:confirm')
-            })]
-          })]
-        })
+      }), /*#__PURE__*/_jsx(ConfirmationModal, {
+        body: /*#__PURE__*/_jsx(Translation, {
+          elements: {
+            '1': ({
+              children
+            }) => /*#__PURE__*/_jsx("strong", {
+              children: children
+            })
+          },
+          i18nKey: "general:aboutToDelete",
+          t: t,
+          variables: {
+            label: getTranslation(singularLabel, i18n),
+            title: titleToRender
+          }
+        }),
+        confirmingLabel: t('general:deleting'),
+        heading: t('general:confirmDeletion'),
+        modalSlug: modalSlug,
+        onConfirm: handleDelete
       })]
     });
   }