@payloadcms/ui 3.24.0-canary.d22403c → 3.24.0

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
       })]
     });
   }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Modal","useModal","getTranslation","useRouter","React","useCallback","useEffect","useState","toast","useForm","useConfig","useDocumentInfo","useEditDepth","useRouteTransition","useTranslation","requests","formatAdminURL","Button","drawerZBase","PopupList","Translation","baseClass","DeleteDocument","props","id","buttonId","collectionSlug","onDelete","redirectAfterDelete","singularLabel","title","titleFromProps","config","routes","admin","adminRoute","api","serverURL","getEntityConfig","collectionConfig","setModified","deleting","setDeleting","closeModal","toggleModal","router","i18n","t","editDepth","startRouteTransition","titleToRender","modalSlug","addDefaultError","error","handleDelete","delete","headers","language","then","res","json","status","success","label","message","push","path","errors","forEach","e","_jsxs","Fragment","_jsx","onClick","className","slug","style","zIndex","elements","1","children","i18nKey","variables","buttonStyle","undefined","size","type"],"sources":["../../../src/elements/DeleteDocument/index.tsx"],"sourcesContent":["'use client'\nimport type { SanitizedCollectionConfig } from 'payload'\n\nimport { Modal, useModal } from '@faceless-ui/modal'\nimport { getTranslation } from '@payloadcms/translations'\nimport { useRouter } from 'next/navigation.js'\nimport React, { useCallback, useEffect, useState } 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 { useEditDepth } from '../../providers/EditDepth/index.js'\nimport { useRouteTransition } from '../../providers/RouteTransition/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { requests } from '../../utilities/api.js'\nimport { formatAdminURL } from '../../utilities/formatAdminURL.js'\nimport { Button } from '../Button/index.js'\nimport { drawerZBase } from '../Drawer/index.js'\nimport { PopupList } from '../Popup/index.js'\nimport { Translation } from '../Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'delete-document'\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 [deleting, setDeleting] = useState(false)\n  const { closeModal, toggleModal } = useModal()\n  const router = useRouter()\n  const { i18n, t } = useTranslation()\n  const { title } = useDocumentInfo()\n  const editDepth = useEditDepth()\n  const { startRouteTransition } = useRouteTransition()\n\n  const titleToRender = titleFromProps || title || id\n\n  const modalSlug = `delete-${id}`\n\n  const addDefaultError = useCallback(() => {\n    setDeleting(false)\n    toast.error(t('error:deletingTitle', { title }))\n  }, [t, title])\n\n  useEffect(() => {\n    return () => {\n      closeModal(modalSlug)\n    }\n  }, [closeModal, modalSlug])\n\n  const handleDelete = useCallback(async () => {\n    setDeleting(true)\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              setDeleting(false)\n              toggleModal(modalSlug)\n\n              toast.success(\n                t('general:titleDeleted', { label: getTranslation(singularLabel, i18n), 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              toggleModal(modalSlug)\n\n              return\n            }\n\n            toggleModal(modalSlug)\n\n            if (json.errors) {\n              json.errors.forEach((error) => toast.error(error.message))\n            } else {\n              addDefaultError()\n            }\n            return false\n          } catch (e) {\n            return addDefaultError()\n          }\n        })\n    } catch (e) {\n      addDefaultError()\n    }\n  }, [\n    setModified,\n    serverURL,\n    api,\n    collectionSlug,\n    id,\n    toggleModal,\n    modalSlug,\n    t,\n    singularLabel,\n    i18n,\n    title,\n    router,\n    adminRoute,\n    addDefaultError,\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            setDeleting(false)\n            toggleModal(modalSlug)\n          }}\n        >\n          {t('general:delete')}\n        </PopupList.Button>\n        <Modal\n          className={baseClass}\n          slug={modalSlug}\n          style={{\n            zIndex: drawerZBase + editDepth,\n          }}\n        >\n          <div className={`${baseClass}__wrapper`}>\n            <div className={`${baseClass}__content`}>\n              <h1>{t('general:confirmDeletion')}</h1>\n              <p>\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: titleToRender,\n                  }}\n                />\n              </p>\n            </div>\n            <div className={`${baseClass}__controls`}>\n              <Button\n                buttonStyle=\"secondary\"\n                id=\"confirm-cancel\"\n                onClick={deleting ? undefined : () => toggleModal(modalSlug)}\n                size=\"large\"\n                type=\"button\"\n              >\n                {t('general:cancel')}\n              </Button>\n              <Button\n                id=\"confirm-delete\"\n                onClick={() => {\n                  if (!deleting) {\n                    void handleDelete()\n                  }\n                }}\n                size=\"large\"\n              >\n                {deleting ? t('general:deleting') : t('general:confirm')}\n              </Button>\n            </div>\n          </div>\n        </Modal>\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","React","useCallback","toast","useForm","useConfig","useDocumentInfo","useRouteTransition","useTranslation","requests","formatAdminURL","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","titleToRender","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 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 { formatAdminURL } from '../../utilities/formatAdminURL.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 titleToRender = titleFromProps || title || id\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: titleToRender,\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/DeleteDocument/index.scss

@@ -11,34 +11,5 @@
     &__toggle {
       @extend %btn-reset;
     }
-
-    &__wrapper {
-      z-index: 1;
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      gap: base(0.8);
-      padding: base(2);
-      max-width: base(36);
-    }
-
-    &__content {
-      display: flex;
-      flex-direction: column;
-      gap: base(0.4);
-
-      > * {
-        margin: 0;
-      }
-    }
-
-    &__controls {
-      display: flex;
-      gap: base(0.4);
-
-      .btn {
-        margin: 0;
-      }
-    }
   }
 }

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,MAAM,SAAS,CAAA;AAMrD,OAAO,KAAgC,MAAM,OAAO,CAAA;AAYpD,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,CA8JtC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/DeleteMany/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAMrD,OAAO,KAAsB,MAAM,OAAO,CAAA;AAY1C,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,CAsItC,CAAA"}