@payloadcms/ui 3.0.0-canary.cee5702 → 3.0.0-canary.cf66341

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ListHeader/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAIrB,KAAK,KAAK,GAAG;IACX,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,EAAE,MAAM,CAAA;CAChB,CAAA;AACD,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,KAAK,qBAOjE"}

package/dist/elements/ListHeader/index.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import './index.scss';
+const baseClass = 'list-header';
+export function ListHeader({
+  children,
+  className,
+  heading
+}) {
+  return /*#__PURE__*/_jsxs("header", {
+    className: [baseClass, className].filter(Boolean).join(' '),
+    children: [/*#__PURE__*/_jsx("h1", {
+      children: heading
+    }), children]
+  });
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","baseClass","ListHeader","children","className","heading","_jsxs","filter","Boolean","join","_jsx"],"sources":["../../../src/elements/ListHeader/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'list-header'\n\ntype Props = {\n  children?: React.ReactNode\n  className?: string\n  heading: string\n}\nexport function ListHeader({ children, className, heading }: Props) {\n  return (\n    <header className={[baseClass, className].filter(Boolean).join(' ')}>\n      <h1>{heading}</h1>\n      {children}\n    </header>\n  )\n}\n"],"mappings":";AAAA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAOlB,OAAO,SAASC,WAAW;EAAEC,QAAQ;EAAEC,SAAS;EAAEC;AAAO,CAAS;EAChE,oBACEC,KAAA,CAAC;IAAOF,SAAA,EAAW,CAACH,SAAA,EAAWG,SAAA,CAAU,CAACG,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;4BAC7DC,IAAA,CAAC;gBAAIL;QACJF,QAAA;;AAGP","ignoreList":[]}

package/dist/elements/ListHeader/index.scss

@@ -0,0 +1,10 @@
+.list-header {
+  display: flex;
+  align-items: flex-end;
+  flex-wrap: wrap;
+  gap: calc(var(--base) * 0.8);
+
+  h1 {
+    margin: 0;
+  }
+}

package/dist/elements/ListSelection/index.js

@@ -1,45 +1,64 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { Fragment } from 'react';
 import { SelectAllStatus, useSelection } from '../../providers/Selection/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
+import './index.scss';
 const baseClass = 'list-selection';
-export const ListSelection = ({ label })=>{
-    const { count, selectAll, toggleAll, totalDocs } = useSelection();
-    const { t } = useTranslation();
-    if (count === 0) {
-        return null;
-    }
-    return /*#__PURE__*/ _jsxs("div", {
-        className: baseClass,
-        children: [
-            /*#__PURE__*/ _jsx("span", {
-                children: t('general:selectedCount', {
-                    count,
-                    label
-                })
-            }),
-            selectAll !== SelectAllStatus.AllAvailable && /*#__PURE__*/ _jsxs(Fragment, {
-                children: [
-                    ' ',
-                    "—",
-                    /*#__PURE__*/ _jsx("button", {
-                        "aria-label": t('general:selectAll', {
-                            count,
-                            label
-                        }),
-                        className: `${baseClass}__button`,
-                        onClick: ()=>toggleAll(true),
-                        type: "button",
-                        children: t('general:selectAll', {
-                            count: totalDocs,
-                            label
-                        })
-                    })
-                ]
-            })
-        ]
+export const ListSelection = t0 => {
+  const $ = _c(7);
+  const {
+    label
+  } = t0;
+  const {
+    count,
+    selectAll,
+    toggleAll,
+    totalDocs
+  } = useSelection();
+  const {
+    t
+  } = useTranslation();
+  if (count === 0) {
+    return null;
+  }
+  let t1;
+  if ($[0] !== count || $[1] !== label || $[2] !== t || $[3] !== selectAll || $[4] !== toggleAll || $[5] !== totalDocs) {
+    t1 = _jsxs("div", {
+      className: baseClass,
+      children: [_jsx("span", {
+        children: t("general:selectedCount", {
+          count,
+          label
+        })
+      }), selectAll !== SelectAllStatus.AllAvailable && _jsxs(Fragment, {
+        children: [" ", "\u2014", _jsx("button", {
+          "aria-label": t("general:selectAll", {
+            count,
+            label
+          }),
+          className: `${baseClass}__button`,
+          onClick: () => toggleAll(true),
+          type: "button",
+          children: t("general:selectAll", {
+            count: totalDocs,
+            label
+          })
+        })]
+      })]
     });
+    $[0] = count;
+    $[1] = label;
+    $[2] = t;
+    $[3] = selectAll;
+    $[4] = toggleAll;
+    $[5] = totalDocs;
+    $[6] = t1;
+  } else {
+    t1 = $[6];
+  }
+  return t1;
 };
-
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/ListSelection/index.tsx"],"sourcesContent":["'use client'\nimport React, { Fragment } from 'react'\n\nimport { SelectAllStatus, useSelection } from '../../providers/Selection/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'list-selection'\n\nexport type ListSelectionProps = {\n  label: string\n}\n\nexport const ListSelection: React.FC<ListSelectionProps> = ({ label }) => {\n  const { count, selectAll, toggleAll, totalDocs } = useSelection()\n  const { t } = useTranslation()\n\n  if (count === 0) {\n    return null\n  }\n\n  return (\n    <div className={baseClass}>\n      <span>{t('general:selectedCount', { count, label })}</span>\n      {selectAll !== SelectAllStatus.AllAvailable && (\n        <Fragment>\n          {' '}\n          &mdash;\n          <button\n            aria-label={t('general:selectAll', { count, label })}\n            className={`${baseClass}__button`}\n            onClick={() => toggleAll(true)}\n            type=\"button\"\n          >\n            {t('general:selectAll', { count: totalDocs, label })}\n          </button>\n        </Fragment>\n      )}\n    </div>\n  )\n}\n"],"names":["React","Fragment","SelectAllStatus","useSelection","useTranslation","baseClass","ListSelection","label","count","selectAll","toggleAll","totalDocs","t","div","className","span","AllAvailable","button","aria-label","onClick","type"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,OAAOA,SAASC,QAAQ,QAAQ,QAAO;AAEvC,SAASC,eAAe,EAAEC,YAAY,QAAQ,qCAAoC;AAClF,SAASC,cAAc,QAAQ,uCAAsC;AAGrE,MAAMC,YAAY;AAMlB,OAAO,MAAMC,gBAA8C,CAAC,EAAEC,KAAK,EAAE;IACnE,MAAM,EAAEC,KAAK,EAAEC,SAAS,EAAEC,SAAS,EAAEC,SAAS,EAAE,GAAGR;IACnD,MAAM,EAAES,CAAC,EAAE,GAAGR;IAEd,IAAII,UAAU,GAAG;QACf,OAAO;IACT;IAEA,qBACE,MAACK;QAAIC,WAAWT;;0BACd,KAACU;0BAAMH,EAAE,yBAAyB;oBAAEJ;oBAAOD;gBAAM;;YAChDE,cAAcP,gBAAgBc,YAAY,kBACzC,MAACf;;oBACE;oBAAI;kCAEL,KAACgB;wBACCC,cAAYN,EAAE,qBAAqB;4BAAEJ;4BAAOD;wBAAM;wBAClDO,WAAW,CAAC,EAAET,UAAU,QAAQ,CAAC;wBACjCc,SAAS,IAAMT,UAAU;wBACzBU,MAAK;kCAEJR,EAAE,qBAAqB;4BAAEJ,OAAOG;4BAAWJ;wBAAM;;;;;;AAM9D,EAAC"}
+{"version":3,"file":"index.js","names":["c","_c","React","Fragment","SelectAllStatus","useSelection","useTranslation","baseClass","ListSelection","t0","$","label","count","selectAll","toggleAll","totalDocs","t","t1","_jsxs","className","children","_jsx","AllAvailable","onClick","type"],"sources":["../../../src/elements/ListSelection/index.tsx"],"sourcesContent":["'use client'\nimport React, { Fragment } from 'react'\n\nimport { SelectAllStatus, useSelection } from '../../providers/Selection/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'list-selection'\n\nexport type ListSelectionProps = {\n  label: string\n}\n\nexport const ListSelection: React.FC<ListSelectionProps> = ({ label }) => {\n  const { count, selectAll, toggleAll, totalDocs } = useSelection()\n  const { t } = useTranslation()\n\n  if (count === 0) {\n    return null\n  }\n\n  return (\n    <div className={baseClass}>\n      <span>{t('general:selectedCount', { count, label })}</span>\n      {selectAll !== SelectAllStatus.AllAvailable && (\n        <Fragment>\n          {' '}\n          &mdash;\n          <button\n            aria-label={t('general:selectAll', { count, label })}\n            className={`${baseClass}__button`}\n            onClick={() => toggleAll(true)}\n            type=\"button\"\n          >\n            {t('general:selectAll', { count: totalDocs, label })}\n          </button>\n        </Fragment>\n      )}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,IAASC,QAAQ,QAAQ;AAEhC,SAASC,eAAe,EAAEC,YAAY,QAAQ;AAC9C,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAMlB,OAAO,MAAMC,aAAA,GAA8CC,EAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EAAC;IAAAU;EAAA,IAAAF,EAAS;EACnE;IAAAG,KAAA;IAAAC,SAAA;IAAAC,SAAA;IAAAC;EAAA,IAAmDV,YAAA;EACnD;IAAAW;EAAA,IAAcV,cAAA;EAAA,IAEVM,KAAA,MAAU;IAAA;EAAA;EAAA,IAAAK,EAAA;EAAA,IAAAP,CAAA,QAAAE,KAAA,IAAAF,CAAA,QAAAC,KAAA,IAAAD,CAAA,QAAAM,CAAA,IAAAN,CAAA,QAAAG,SAAA,IAAAH,CAAA,QAAAI,SAAA,IAAAJ,CAAA,QAAAK,SAAA;IAKZE,EAAA,GAAAC,KAAA,CAAC;MAAAC,SAAA,EAAAZ,SAAA;MAAAa,QAAA,GACCC,IAAA,CAAC;QAAAD,QAAA,EAAMJ,CAAA,CAAE;UAAAJ,KAAA;UAAAD;QAAA,CAAwC;MAAA,C,GAChDE,SAAA,KAAAT,eAAA,CAAAkB,YAA0C,IACzCJ,KAAA,CAAAf,QAAA;QAAAiB,QAAA,GACG,KAAI,UAELC,IAAA,CAAC;UAAA,cACaL,CAAA,CAAE;YAAAJ,KAAA;YAAAD;UAAA,CAAoC;UAAAQ,SAAA,EACvC,GAAAZ,SAAA,UAAsB;UAAAgB,OAAA,EAAAA,CAAA,KAClBT,SAAA,KAAU;UAAAU,IAAA,EACpB;UAAAJ,QAAA,EAEJJ,CAAA,CAAE;YAAAJ,KAAA,EAA8BG,SAAA;YAAAJ;UAAA,CAAiB;QAAA,C;;;;;;;;;;;;;SAZ1DM,E;CAkBJ","ignoreList":[]}

package/dist/elements/Loading/index.js

@@ -1,89 +1,167 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
 import React from 'react';
 import { useLoadingOverlay } from '../../elements/LoadingOverlay/index.js';
 import { useFormProcessing } from '../../forms/Form/context.js';
 import { useTranslation } from '../../providers/Translation/index.js';
+import './index.scss';
 const baseClass = 'loading-overlay';
-export const LoadingOverlay = ({ animationDuration, loadingText, overlayType, show = true })=>{
-    const { t } = useTranslation();
-    return /*#__PURE__*/ _jsxs("div", {
-        className: [
-            baseClass,
-            show ? `${baseClass}--entering` : `${baseClass}--exiting`,
-            overlayType ? `${baseClass}--${overlayType}` : ''
-        ].filter(Boolean).join(' '),
-        style: {
-            animationDuration: animationDuration || '500ms'
-        },
-        children: [
-            /*#__PURE__*/ _jsxs("div", {
-                className: `${baseClass}__bars`,
-                children: [
-                    /*#__PURE__*/ _jsx("div", {
-                        className: `${baseClass}__bar`
-                    }),
-                    /*#__PURE__*/ _jsx("div", {
-                        className: `${baseClass}__bar`
-                    }),
-                    /*#__PURE__*/ _jsx("div", {
-                        className: `${baseClass}__bar`
-                    }),
-                    /*#__PURE__*/ _jsx("div", {
-                        className: `${baseClass}__bar`
-                    }),
-                    /*#__PURE__*/ _jsx("div", {
-                        className: `${baseClass}__bar`
-                    })
-                ]
-            }),
-            /*#__PURE__*/ _jsx("span", {
-                className: `${baseClass}__text`,
-                children: loadingText || t('general:loading')
-            })
-        ]
+export const LoadingOverlay = t0 => {
+  const $ = _c(11);
+  const {
+    animationDuration,
+    loadingText,
+    overlayType,
+    show: t1
+  } = t0;
+  const show = t1 === undefined ? true : t1;
+  const {
+    t
+  } = useTranslation();
+  const t2 = show ? `${baseClass}--entering` : `${baseClass}--exiting`;
+  const t3 = overlayType ? `${baseClass}--${overlayType}` : "";
+  let t4;
+  if ($[0] !== t2 || $[1] !== t3) {
+    t4 = [baseClass, t2, t3].filter(Boolean);
+    $[0] = t2;
+    $[1] = t3;
+    $[2] = t4;
+  } else {
+    t4 = $[2];
+  }
+  const t5 = t4.join(" ");
+  const t6 = animationDuration || "500ms";
+  let t7;
+  if ($[3] !== t6 || $[4] !== loadingText || $[5] !== t || $[6] !== t5) {
+    let t8;
+    if ($[8] !== loadingText || $[9] !== t) {
+      t8 = loadingText || t("general:loading");
+      $[8] = loadingText;
+      $[9] = t;
+      $[10] = t8;
+    } else {
+      t8 = $[10];
+    }
+    t7 = _jsxs("div", {
+      className: t5,
+      style: {
+        animationDuration: t6
+      },
+      children: [_jsxs("div", {
+        className: `${baseClass}__bars`,
+        children: [_jsx("div", {
+          className: `${baseClass}__bar`
+        }), _jsx("div", {
+          className: `${baseClass}__bar`
+        }), _jsx("div", {
+          className: `${baseClass}__bar`
+        }), _jsx("div", {
+          className: `${baseClass}__bar`
+        }), _jsx("div", {
+          className: `${baseClass}__bar`
+        })]
+      }), _jsx("span", {
+        className: `${baseClass}__text`,
+        children: t8
+      })]
     });
+    $[3] = t6;
+    $[4] = loadingText;
+    $[5] = t;
+    $[6] = t5;
+    $[7] = t7;
+  } else {
+    t7 = $[7];
+  }
+  return t7;
 };
-export const LoadingOverlayToggle = ({ name: key, type = 'fullscreen', loadingText, show })=>{
-    const { toggleLoadingOverlay } = useLoadingOverlay();
-    React.useEffect(()=>{
+export const LoadingOverlayToggle = t0 => {
+  const $ = _c(7);
+  const {
+    name: key,
+    type: t1,
+    loadingText,
+    show
+  } = t0;
+  const type = t1 === undefined ? "fullscreen" : t1;
+  const {
+    toggleLoadingOverlay
+  } = useLoadingOverlay();
+  let t2;
+  let t3;
+  if ($[0] !== toggleLoadingOverlay || $[1] !== type || $[2] !== show || $[3] !== key || $[4] !== loadingText) {
+    t2 = () => {
+      toggleLoadingOverlay({
+        type,
+        isLoading: show,
+        key,
+        loadingText: loadingText || undefined
+      });
+      return () => {
         toggleLoadingOverlay({
-            type,
-            isLoading: show,
-            key,
-            loadingText: loadingText || undefined
+          type,
+          isLoading: false,
+          key
         });
-        return ()=>{
-            toggleLoadingOverlay({
-                type,
-                isLoading: false,
-                key
-            });
-        };
-    }, [
-        show,
-        toggleLoadingOverlay,
-        key,
-        type,
-        loadingText
-    ]);
-    return null;
-};
-export const FormLoadingOverlayToggle = ({ name, type = 'fullscreen', action, formIsLoading = false, loadingSuffix })=>{
-    const isProcessing = useFormProcessing();
-    const { i18n, t } = useTranslation();
-    const labels = {
-        create: t('general:creating'),
-        loading: t('general:loading'),
-        update: t('general:updating')
+      };
     };
-    return /*#__PURE__*/ _jsx(LoadingOverlayToggle, {
-        loadingText: `${labels[action]} ${loadingSuffix ? getTranslation(loadingSuffix, i18n) : ''}`.trim(),
-        name: name,
-        show: formIsLoading || isProcessing,
-        type: type
+    t3 = [show, toggleLoadingOverlay, key, type, loadingText];
+    $[0] = toggleLoadingOverlay;
+    $[1] = type;
+    $[2] = show;
+    $[3] = key;
+    $[4] = loadingText;
+    $[5] = t2;
+    $[6] = t3;
+  } else {
+    t2 = $[5];
+    t3 = $[6];
+  }
+  React.useEffect(t2, t3);
+  return null;
+};
+export const FormLoadingOverlayToggle = t0 => {
+  const $ = _c(6);
+  const {
+    name,
+    type: t1,
+    action,
+    formIsLoading: t2,
+    loadingSuffix
+  } = t0;
+  const type = t1 === undefined ? "fullscreen" : t1;
+  const formIsLoading = t2 === undefined ? false : t2;
+  const isProcessing = useFormProcessing();
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  const labels = {
+    create: t("general:creating"),
+    loading: t("general:loading"),
+    update: t("general:updating")
+  };
+  const t3 = `${labels[action]} ${loadingSuffix ? getTranslation(loadingSuffix, i18n) : ""}`;
+  let t4;
+  if ($[0] !== t3 || $[1] !== formIsLoading || $[2] !== isProcessing || $[3] !== name || $[4] !== type) {
+    t4 = _jsx(LoadingOverlayToggle, {
+      loadingText: t3.trim(),
+      name,
+      show: formIsLoading || isProcessing,
+      type
     });
+    $[0] = t3;
+    $[1] = formIsLoading;
+    $[2] = isProcessing;
+    $[3] = name;
+    $[4] = type;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  return t4;
 };
-
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Loading/index.tsx"],"sourcesContent":["'use client'\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport type { LoadingOverlayTypes } from '../../elements/LoadingOverlay/types.js'\n\nimport { useLoadingOverlay } from '../../elements/LoadingOverlay/index.js'\nimport { useFormProcessing } from '../../forms/Form/context.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'loading-overlay'\n\ntype LoadingOverlayProps = {\n  animationDuration?: string\n  loadingText?: string\n  overlayType?: string\n  show?: boolean\n}\n\nexport const LoadingOverlay: React.FC<LoadingOverlayProps> = ({\n  animationDuration,\n  loadingText,\n  overlayType,\n  show = true,\n}) => {\n  const { t } = useTranslation()\n\n  return (\n    <div\n      className={[\n        baseClass,\n        show ? `${baseClass}--entering` : `${baseClass}--exiting`,\n        overlayType ? `${baseClass}--${overlayType}` : '',\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={{\n        animationDuration: animationDuration || '500ms',\n      }}\n    >\n      <div className={`${baseClass}__bars`}>\n        <div className={`${baseClass}__bar`} />\n        <div className={`${baseClass}__bar`} />\n        <div className={`${baseClass}__bar`} />\n        <div className={`${baseClass}__bar`} />\n        <div className={`${baseClass}__bar`} />\n      </div>\n\n      <span className={`${baseClass}__text`}>{loadingText || t('general:loading')}</span>\n    </div>\n  )\n}\n\nexport type UseLoadingOverlayToggleProps = {\n  loadingText?: string\n  name: string\n  show: boolean\n  type?: LoadingOverlayTypes\n}\nexport const LoadingOverlayToggle: React.FC<UseLoadingOverlayToggleProps> = ({\n  name: key,\n  type = 'fullscreen',\n  loadingText,\n  show,\n}) => {\n  const { toggleLoadingOverlay } = useLoadingOverlay()\n\n  React.useEffect(() => {\n    toggleLoadingOverlay({\n      type,\n      isLoading: show,\n      key,\n      loadingText: loadingText || undefined,\n    })\n\n    return () => {\n      toggleLoadingOverlay({\n        type,\n        isLoading: false,\n        key,\n      })\n    }\n  }, [show, toggleLoadingOverlay, key, type, loadingText])\n\n  return null\n}\n\nexport type FormLoadingOverlayToggleProps = {\n  action: 'create' | 'loading' | 'update'\n  formIsLoading?: boolean\n  loadingSuffix?: string\n  name: string\n  type?: LoadingOverlayTypes\n}\n\nexport const FormLoadingOverlayToggle: React.FC<FormLoadingOverlayToggleProps> = ({\n  name,\n  type = 'fullscreen',\n  action,\n  formIsLoading = false,\n  loadingSuffix,\n}) => {\n  const isProcessing = useFormProcessing()\n  const { i18n, t } = useTranslation()\n\n  const labels = {\n    create: t('general:creating'),\n    loading: t('general:loading'),\n    update: t('general:updating'),\n  }\n\n  return (\n    <LoadingOverlayToggle\n      loadingText={`${labels[action]} ${\n        loadingSuffix ? getTranslation(loadingSuffix, i18n) : ''\n      }`.trim()}\n      name={name}\n      show={formIsLoading || isProcessing}\n      type={type}\n    />\n  )\n}\n"],"names":["getTranslation","React","useLoadingOverlay","useFormProcessing","useTranslation","baseClass","LoadingOverlay","animationDuration","loadingText","overlayType","show","t","div","className","filter","Boolean","join","style","span","LoadingOverlayToggle","name","key","type","toggleLoadingOverlay","useEffect","isLoading","undefined","FormLoadingOverlayToggle","action","formIsLoading","loadingSuffix","isProcessing","i18n","labels","create","loading","update","trim"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,OAAOC,WAAW,QAAO;AAIzB,SAASC,iBAAiB,QAAQ,yCAAwC;AAC1E,SAASC,iBAAiB,QAAQ,8BAA6B;AAC/D,SAASC,cAAc,QAAQ,uCAAsC;AAGrE,MAAMC,YAAY;AASlB,OAAO,MAAMC,iBAAgD,CAAC,EAC5DC,iBAAiB,EACjBC,WAAW,EACXC,WAAW,EACXC,OAAO,IAAI,EACZ;IACC,MAAM,EAAEC,CAAC,EAAE,GAAGP;IAEd,qBACE,MAACQ;QACCC,WAAW;YACTR;YACAK,OAAO,CAAC,EAAEL,UAAU,UAAU,CAAC,GAAG,CAAC,EAAEA,UAAU,SAAS,CAAC;YACzDI,cAAc,CAAC,EAAEJ,UAAU,EAAE,EAAEI,YAAY,CAAC,GAAG;SAChD,CACEK,MAAM,CAACC,SACPC,IAAI,CAAC;QACRC,OAAO;YACLV,mBAAmBA,qBAAqB;QAC1C;;0BAEA,MAACK;gBAAIC,WAAW,CAAC,EAAER,UAAU,MAAM,CAAC;;kCAClC,KAACO;wBAAIC,WAAW,CAAC,EAAER,UAAU,KAAK,CAAC;;kCACnC,KAACO;wBAAIC,WAAW,CAAC,EAAER,UAAU,KAAK,CAAC;;kCACnC,KAACO;wBAAIC,WAAW,CAAC,EAAER,UAAU,KAAK,CAAC;;kCACnC,KAACO;wBAAIC,WAAW,CAAC,EAAER,UAAU,KAAK,CAAC;;kCACnC,KAACO;wBAAIC,WAAW,CAAC,EAAER,UAAU,KAAK,CAAC;;;;0BAGrC,KAACa;gBAAKL,WAAW,CAAC,EAAER,UAAU,MAAM,CAAC;0BAAGG,eAAeG,EAAE;;;;AAG/D,EAAC;AAQD,OAAO,MAAMQ,uBAA+D,CAAC,EAC3EC,MAAMC,GAAG,EACTC,OAAO,YAAY,EACnBd,WAAW,EACXE,IAAI,EACL;IACC,MAAM,EAAEa,oBAAoB,EAAE,GAAGrB;IAEjCD,MAAMuB,SAAS,CAAC;QACdD,qBAAqB;YACnBD;YACAG,WAAWf;YACXW;YACAb,aAAaA,eAAekB;QAC9B;QAEA,OAAO;YACLH,qBAAqB;gBACnBD;gBACAG,WAAW;gBACXJ;YACF;QACF;IACF,GAAG;QAACX;QAAMa;QAAsBF;QAAKC;QAAMd;KAAY;IAEvD,OAAO;AACT,EAAC;AAUD,OAAO,MAAMmB,2BAAoE,CAAC,EAChFP,IAAI,EACJE,OAAO,YAAY,EACnBM,MAAM,EACNC,gBAAgB,KAAK,EACrBC,aAAa,EACd;IACC,MAAMC,eAAe5B;IACrB,MAAM,EAAE6B,IAAI,EAAErB,CAAC,EAAE,GAAGP;IAEpB,MAAM6B,SAAS;QACbC,QAAQvB,EAAE;QACVwB,SAASxB,EAAE;QACXyB,QAAQzB,EAAE;IACZ;IAEA,qBACE,KAACQ;QACCX,aAAa,CAAC,EAAEyB,MAAM,CAACL,OAAO,CAAC,CAAC,EAC9BE,gBAAgB9B,eAAe8B,eAAeE,QAAQ,GACvD,CAAC,CAACK,IAAI;QACPjB,MAAMA;QACNV,MAAMmB,iBAAiBE;QACvBT,MAAMA;;AAGZ,EAAC"}
+{"version":3,"file":"index.js","names":["c","_c","getTranslation","React","useLoadingOverlay","useFormProcessing","useTranslation","baseClass","LoadingOverlay","t0","$","animationDuration","loadingText","overlayType","show","t1","undefined","t","t2","t3","t4","filter","Boolean","t5","join","t6","t7","t8","_jsxs","className","style","children","_jsx","LoadingOverlayToggle","name","key","type","toggleLoadingOverlay","isLoading","useEffect","FormLoadingOverlayToggle","action","formIsLoading","loadingSuffix","isProcessing","i18n","labels","create","loading","update","trim"],"sources":["../../../src/elements/Loading/index.tsx"],"sourcesContent":["'use client'\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport type { LoadingOverlayTypes } from '../../elements/LoadingOverlay/types.js'\n\nimport { useLoadingOverlay } from '../../elements/LoadingOverlay/index.js'\nimport { useFormProcessing } from '../../forms/Form/context.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'loading-overlay'\n\ntype LoadingOverlayProps = {\n  animationDuration?: string\n  loadingText?: string\n  overlayType?: string\n  show?: boolean\n}\n\nexport const LoadingOverlay: React.FC<LoadingOverlayProps> = ({\n  animationDuration,\n  loadingText,\n  overlayType,\n  show = true,\n}) => {\n  const { t } = useTranslation()\n\n  return (\n    <div\n      className={[\n        baseClass,\n        show ? `${baseClass}--entering` : `${baseClass}--exiting`,\n        overlayType ? `${baseClass}--${overlayType}` : '',\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={{\n        animationDuration: animationDuration || '500ms',\n      }}\n    >\n      <div className={`${baseClass}__bars`}>\n        <div className={`${baseClass}__bar`} />\n        <div className={`${baseClass}__bar`} />\n        <div className={`${baseClass}__bar`} />\n        <div className={`${baseClass}__bar`} />\n        <div className={`${baseClass}__bar`} />\n      </div>\n\n      <span className={`${baseClass}__text`}>{loadingText || t('general:loading')}</span>\n    </div>\n  )\n}\n\nexport type UseLoadingOverlayToggleProps = {\n  loadingText?: string\n  name: string\n  show: boolean\n  type?: LoadingOverlayTypes\n}\nexport const LoadingOverlayToggle: React.FC<UseLoadingOverlayToggleProps> = ({\n  name: key,\n  type = 'fullscreen',\n  loadingText,\n  show,\n}) => {\n  const { toggleLoadingOverlay } = useLoadingOverlay()\n\n  React.useEffect(() => {\n    toggleLoadingOverlay({\n      type,\n      isLoading: show,\n      key,\n      loadingText: loadingText || undefined,\n    })\n\n    return () => {\n      toggleLoadingOverlay({\n        type,\n        isLoading: false,\n        key,\n      })\n    }\n  }, [show, toggleLoadingOverlay, key, type, loadingText])\n\n  return null\n}\n\nexport type FormLoadingOverlayToggleProps = {\n  action: 'create' | 'loading' | 'update'\n  formIsLoading?: boolean\n  loadingSuffix?: string\n  name: string\n  type?: LoadingOverlayTypes\n}\n\nexport const FormLoadingOverlayToggle: React.FC<FormLoadingOverlayToggleProps> = ({\n  name,\n  type = 'fullscreen',\n  action,\n  formIsLoading = false,\n  loadingSuffix,\n}) => {\n  const isProcessing = useFormProcessing()\n  const { i18n, t } = useTranslation()\n\n  const labels = {\n    create: t('general:creating'),\n    loading: t('general:loading'),\n    update: t('general:updating'),\n  }\n\n  return (\n    <LoadingOverlayToggle\n      loadingText={`${labels[action]} ${\n        loadingSuffix ? getTranslation(loadingSuffix, i18n) : ''\n      }`.trim()}\n      name={name}\n      show={formIsLoading || isProcessing}\n      type={type}\n    />\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,SAASC,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAIlB,SAASC,iBAAiB,QAAQ;AAClC,SAASC,iBAAiB,QAAQ;AAClC,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,MAAMC,SAAA,GAAY;AASlB,OAAO,MAAMC,cAAA,GAAgDC,EAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EAAC;IAAAU,iBAAA;IAAAC,WAAA;IAAAC,WAAA;IAAAC,IAAA,EAAAC;EAAA,IAAAN,EAK7D;EADC,MAAAK,IAAA,GAAAC,EAAW,KAAAC,SAAA,UAAXD,EAAW;EAEX;IAAAE;EAAA,IAAcX,cAAA;EAMR,MAAAY,EAAA,GAAAJ,IAAA,GAAO,GAAAP,SAAA,YAAwB,GAAG,GAAAA,SAAA,WAAuB;EACzD,MAAAY,EAAA,GAAAN,WAAA,GAAc,GAAAN,SAAA,KAAiBM,WAAA,EAAa,GAAG;EAAA,IAAAO,EAAA;EAAA,IAAAV,CAAA,QAAAQ,EAAA,IAAAR,CAAA,QAAAS,EAAA;IAHtCC,EAAA,IAAAb,SAAA,EAETW,EAAyD,EACzDC,EAA+C,EAAAE,MAAA,CAAAC,OAEvC;IAAAZ,CAAA,MAAAQ,EAAA;IAAAR,CAAA,MAAAS,EAAA;IAAAT,CAAA,MAAAU,EAAA;EAAA;IAAAA,EAAA,GAAAV,CAAA;EAAA;EALC,MAAAa,EAAA,GAAAH,EAKD,CAAAI,IAAA,CACF;EAEa,MAAAC,EAAA,GAAAd,iBAAA,IAAqB;EAAA,IAAAe,EAAA;EAAA,IAAAhB,CAAA,QAAAe,EAAA,IAAAf,CAAA,QAAAE,WAAA,IAAAF,CAAA,QAAAO,CAAA,IAAAP,CAAA,QAAAa,EAAA;IAAA,IAAAI,EAAA;IAAA,IAAAjB,CAAA,QAAAE,WAAA,IAAAF,CAAA,QAAAO,CAAA;MAWFU,EAAA,GAAAf,WAAA,IAAeK,CAAA,CAAE;MAAAP,CAAA,MAAAE,WAAA;MAAAF,CAAA,MAAAO,CAAA;MAAAP,CAAA,OAAAiB,EAAA;IAAA;MAAAA,EAAA,GAAAjB,CAAA;IAAA;IApB3DgB,EAAA,GAAAE,KAAA,CAAC;MAAAC,SAAA,EACYN,EAMH;MAAAO,KAAA;QAAAnB,iBAAA,EAEac;MAAqB;MAAAM,QAAA,GAG1CH,KAAA,CAAC;QAAAC,SAAA,EAAe,GAAAtB,SAAA,QAAoB;QAAAwB,QAAA,GAClCC,IAAA,CAAC;UAAAH,SAAA,EAAe,GAAAtB,SAAA;QAAmB,C,GACnCyB,IAAA,CAAC;UAAAH,SAAA,EAAe,GAAAtB,SAAA;QAAmB,C,GACnCyB,IAAA,CAAC;UAAAH,SAAA,EAAe,GAAAtB,SAAA;QAAmB,C,GACnCyB,IAAA,CAAC;UAAAH,SAAA,EAAe,GAAAtB,SAAA;QAAmB,C,GACnCyB,IAAA,CAAC;UAAAH,SAAA,EAAe,GAAAtB,SAAA;QAAmB,C;UAGrCyB,IAAA,CAAC;QAAAH,SAAA,EAAgB,GAAAtB,SAAA,QAAoB;QAAAwB,QAAA,EAAGJ;MAAiB,C;;;;;;;;;;SApB3DD,E;CAuBJ;AAQA,OAAO,MAAMO,oBAAA,GAA+DxB,EAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EAAC;IAAAiC,IAAA,EAAAC,GAAA;IAAAC,IAAA,EAAArB,EAAA;IAAAH,WAAA;IAAAE;EAAA,IAAAL,EAK5E;EAHC,MAAA2B,IAAA,GAAArB,EAAmB,KAAAC,SAAA,GAAZ,YAAY,GAAnBD,EAAmB;EAInB;IAAAsB;EAAA,IAAiCjC,iBAAA;EAAA,IAAAc,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAT,CAAA,QAAA2B,oBAAA,IAAA3B,CAAA,QAAA0B,IAAA,IAAA1B,CAAA,QAAAI,IAAA,IAAAJ,CAAA,QAAAyB,GAAA,IAAAzB,CAAA,QAAAE,WAAA;IAEjBM,EAAA,GAAAA,CAAA;MACdmB,oBAAA;QAAAD,IAAA;QAAAE,SAAA,EAEaxB,IAAA;QAAAqB,GAAA;QAAAvB,WAAA,EAEEA,WAAA,IAAAI;MAAe,CAC9B;MAAA;QAGEqB,oBAAA;UAAAD,IAAA;UAAAE,SAAA;UAAAH;QAAA,CAIA;MAAA;IAAA;IAEDhB,EAAA,IAACL,IAAA,EAAMuB,oBAAA,EAAsBF,GAAA,EAAKC,IAAA,EAAMxB,WAAA;IAAYF,CAAA,MAAA2B,oBAAA;IAAA3B,CAAA,MAAA0B,IAAA;IAAA1B,CAAA,MAAAI,IAAA;IAAAJ,CAAA,MAAAyB,GAAA;IAAAzB,CAAA,MAAAE,WAAA;IAAAF,CAAA,MAAAQ,EAAA;IAAAR,CAAA,MAAAS,EAAA;EAAA;IAAAD,EAAA,GAAAR,CAAA;IAAAS,EAAA,GAAAT,CAAA;EAAA;EAfvDP,KAAA,CAAAoC,SAAA,CAAgBrB,EAehB,EAAGC,EAAoD;EAAA;AAAA,CAGzD;AAUA,OAAO,MAAMqB,wBAAA,GAAoE/B,EAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EAAC;IAAAiC,IAAA;IAAAE,IAAA,EAAArB,EAAA;IAAA0B,MAAA;IAAAC,aAAA,EAAAxB,EAAA;IAAAyB;EAAA,IAAAlC,EAMjF;EAJC,MAAA2B,IAAA,GAAArB,EAAmB,KAAAC,SAAA,GAAZ,YAAY,GAAnBD,EAAmB;EAEnB,MAAA2B,aAAA,GAAAxB,EAAqB,KAAAF,SAAA,WAArBE,EAAqB;EAGrB,MAAA0B,YAAA,GAAqBvC,iBAAA;EACrB;IAAAwC,IAAA;IAAA5B;EAAA,IAAoBX,cAAA;EAEpB,MAAAwC,MAAA;IAAAC,MAAA,EACU9B,CAAA,CAAE;IAAA+B,OAAA,EACD/B,CAAA,CAAE;IAAAgC,MAAA,EACHhC,CAAA,CAAE;EAAA;EAKK,MAAAE,EAAA,MAAG2B,MAAM,CAACL,MAAA,KACrBE,aAAA,GAAgBzC,cAAA,CAAeyC,aAAA,EAAeE,IAAA,IAAQ,IACtD;EAAA,IAAAzB,EAAA;EAAA,IAAAV,CAAA,QAAAS,EAAA,IAAAT,CAAA,QAAAgC,aAAA,IAAAhC,CAAA,QAAAkC,YAAA,IAAAlC,CAAA,QAAAwB,IAAA,IAAAxB,CAAA,QAAA0B,IAAA;IAHJhB,EAAA,GAAAY,IAAA,CAAAC,oBAAA;MAAArB,WAAA,EACeO,EAEX,CAAA+B,IAAA,CAAK;MAAAhB,IAAA;MAAApB,IAAA,EAED4B,aAAA,IAAiBE,YAAA;MAAAR;IAAA,C;;;;;;;;;;SALzBhB,E;CASJ","ignoreList":[]}

package/dist/elements/LoadingOverlay/index.js

@@ -1,4 +1,6 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { createContext } from 'react';
 import { LoadingOverlay } from '../../elements/Loading/index.js';
@@ -6,67 +8,126 @@ import { useDelayedRender } from '../../hooks/useDelayedRender.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { defaultLoadingOverlayState, reducer } from './reducer.js';
 const animatedDuration = 250;
-const Context = /*#__PURE__*/ createContext({
-    isOnScreen: false,
-    toggleLoadingOverlay: undefined
+const Context = /*#__PURE__*/createContext({
+  isOnScreen: false,
+  toggleLoadingOverlay: undefined
 });
-export const LoadingOverlayProvider = ({ children })=>{
-    const { t } = useTranslation();
-    const fallbackText = t('general:loading');
-    const [overlays, dispatchOverlay] = React.useReducer(reducer, defaultLoadingOverlayState);
-    const { isMounted, isUnmounting, triggerDelayedRender } = useDelayedRender({
-        delayBeforeShow: 1000,
-        inTimeout: animatedDuration,
-        minShowTime: 500,
-        outTimeout: animatedDuration,
-        show: overlays.isLoading
-    });
-    const toggleLoadingOverlay = React.useCallback(({ type, isLoading, key, loadingText = fallbackText })=>{
-        if (isLoading) {
-            triggerDelayedRender();
-            dispatchOverlay({
-                type: 'add',
-                payload: {
-                    type,
-                    key,
-                    loadingText
-                }
-            });
-        } else {
-            dispatchOverlay({
-                type: 'remove',
-                payload: {
-                    type,
-                    key
-                }
-            });
-        }
-    }, [
-        triggerDelayedRender,
-        fallbackText
-    ]);
-    return /*#__PURE__*/ _jsxs(Context.Provider, {
-        value: {
-            isOnScreen: isMounted,
-            toggleLoadingOverlay
-        },
-        children: [
-            isMounted && /*#__PURE__*/ _jsx(LoadingOverlay, {
-                animationDuration: `${animatedDuration}ms`,
-                loadingText: overlays.loadingText || fallbackText,
-                overlayType: overlays.overlayType,
-                show: !isUnmounting
-            }),
-            children
-        ]
+export const LoadingOverlayProvider = t0 => {
+  const $ = _c(19);
+  const {
+    children
+  } = t0;
+  const {
+    t
+  } = useTranslation();
+  let t1;
+  if ($[0] !== t) {
+    t1 = t("general:loading");
+    $[0] = t;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const fallbackText = t1;
+  const [overlays, dispatchOverlay] = React.useReducer(reducer, defaultLoadingOverlayState);
+  let t2;
+  if ($[2] !== overlays.isLoading) {
+    t2 = {
+      delayBeforeShow: 1000,
+      inTimeout: animatedDuration,
+      minShowTime: 500,
+      outTimeout: animatedDuration,
+      show: overlays.isLoading
+    };
+    $[2] = overlays.isLoading;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const {
+    isMounted,
+    isUnmounting,
+    triggerDelayedRender
+  } = useDelayedRender(t2);
+  let t3;
+  if ($[4] !== fallbackText || $[5] !== triggerDelayedRender) {
+    t3 = t4 => {
+      const {
+        type,
+        isLoading,
+        key,
+        loadingText: t5
+      } = t4;
+      const loadingText = t5 === undefined ? fallbackText : t5;
+      if (isLoading) {
+        triggerDelayedRender();
+        dispatchOverlay({
+          type: "add",
+          payload: {
+            type,
+            key,
+            loadingText
+          }
+        });
+      } else {
+        dispatchOverlay({
+          type: "remove",
+          payload: {
+            type,
+            key
+          }
+        });
+      }
+    };
+    $[4] = fallbackText;
+    $[5] = triggerDelayedRender;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  const toggleLoadingOverlay = t3;
+  let t4;
+  if ($[7] !== isMounted || $[8] !== toggleLoadingOverlay || $[9] !== overlays || $[10] !== fallbackText || $[11] !== isUnmounting || $[12] !== children) {
+    let t5;
+    if ($[14] !== isMounted || $[15] !== overlays || $[16] !== fallbackText || $[17] !== isUnmounting) {
+      t5 = isMounted && _jsx(LoadingOverlay, {
+        animationDuration: `${animatedDuration}ms`,
+        loadingText: overlays.loadingText || fallbackText,
+        overlayType: overlays.overlayType,
+        show: !isUnmounting
+      });
+      $[14] = isMounted;
+      $[15] = overlays;
+      $[16] = fallbackText;
+      $[17] = isUnmounting;
+      $[18] = t5;
+    } else {
+      t5 = $[18];
+    }
+    t4 = _jsxs(Context.Provider, {
+      value: {
+        isOnScreen: isMounted,
+        toggleLoadingOverlay
+      },
+      children: [t5, children]
     });
+    $[7] = isMounted;
+    $[8] = toggleLoadingOverlay;
+    $[9] = overlays;
+    $[10] = fallbackText;
+    $[11] = isUnmounting;
+    $[12] = children;
+    $[13] = t4;
+  } else {
+    t4 = $[13];
+  }
+  return t4;
 };
-export const useLoadingOverlay = ()=>{
-    const contextHook = React.useContext(Context);
-    if (contextHook === undefined) {
-        throw new Error('useLoadingOverlay must be used within a LoadingOverlayProvider');
-    }
-    return contextHook;
+export const useLoadingOverlay = () => {
+  const contextHook = React.useContext(Context);
+  if (contextHook === undefined) {
+    throw new Error("useLoadingOverlay must be used within a LoadingOverlayProvider");
+  }
+  return contextHook;
 };
-
 //# sourceMappingURL=index.js.map