@payloadcms/ui 3.0.0-beta.43 → 3.0.0-beta.45

package/dist/providers/ToastContainer/icons/Warning.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const Warning: React.FC;
+//# sourceMappingURL=Warning.d.ts.map

package/dist/providers/ToastContainer/icons/Warning.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Warning.d.ts","sourceRoot":"","sources":["../../../../src/providers/ToastContainer/icons/Warning.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAe3B,CAAA"}

package/dist/providers/ToastContainer/icons/Warning.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+export const Warning = ()=>{
+    return /*#__PURE__*/ _jsxs("svg", {
+        fill: "none",
+        height: "26",
+        viewBox: "0 0 26 26",
+        width: "26",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [
+            /*#__PURE__*/ _jsx("path", {
+                d: "M13 21C17.4183 21 21 17.4183 21 13C21 8.58172 17.4183 5 13 5C8.58172 5 5 8.58172 5 13C5 17.4183 8.58172 21 13 21Z",
+                fill: "#E4E694"
+            }),
+            /*#__PURE__*/ _jsx("path", {
+                d: "M13 10V13.2M13 16.4H13.008",
+                stroke: "black",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=Warning.js.map

package/dist/providers/ToastContainer/icons/Warning.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/providers/ToastContainer/icons/Warning.tsx"],"sourcesContent":["import React from 'react'\n\nexport const Warning: React.FC = () => {\n  return (\n    <svg fill=\"none\" height=\"26\" viewBox=\"0 0 26 26\" width=\"26\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M13 21C17.4183 21 21 17.4183 21 13C21 8.58172 17.4183 5 13 5C8.58172 5 5 8.58172 5 13C5 17.4183 8.58172 21 13 21Z\"\n        fill=\"#E4E694\"\n      />\n      <path\n        d=\"M13 10V13.2M13 16.4H13.008\"\n        stroke=\"black\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  )\n}\n"],"names":["React","Warning","svg","fill","height","viewBox","width","xmlns","path","d","stroke","strokeLinecap","strokeLinejoin"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,OAAOA,WAAW,QAAO;AAEzB,OAAO,MAAMC,UAAoB;IAC/B,qBACE,MAACC;QAAIC,MAAK;QAAOC,QAAO;QAAKC,SAAQ;QAAYC,OAAM;QAAKC,OAAM;;0BAChE,KAACC;gBACCC,GAAE;gBACFN,MAAK;;0BAEP,KAACK;gBACCC,GAAE;gBACFC,QAAO;gBACPC,eAAc;gBACdC,gBAAe;;;;AAIvB,EAAC"}

package/dist/providers/ToastContainer/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const ToastContainer: React.FC;
+//# sourceMappingURL=index.d.ts.map

package/dist/providers/ToastContainer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/providers/ToastContainer/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EA8BlC,CAAA"}

package/dist/providers/ToastContainer/index.js

@@ -0,0 +1,39 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { Toaster } from 'sonner';
+import { Error } from './icons/Error.js';
+import { Info } from './icons/Info.js';
+import { Success } from './icons/Success.js';
+import { Warning } from './icons/Warning.js';
+export const ToastContainer = ()=>{
+    return /*#__PURE__*/ _jsx(Toaster, {
+        className: "payload-toast-container",
+        closeButton: true,
+        // @ts-expect-error
+        dir: "undefined",
+        icons: {
+            error: /*#__PURE__*/ _jsx(Error, {}),
+            info: /*#__PURE__*/ _jsx(Info, {}),
+            success: /*#__PURE__*/ _jsx(Success, {}),
+            warning: /*#__PURE__*/ _jsx(Warning, {})
+        },
+        offset: "36px",
+        toastOptions: {
+            classNames: {
+                closeButton: 'payload-toast-close-button',
+                content: 'toast-content',
+                error: 'toast-error',
+                icon: 'toast-icon',
+                info: 'toast-info',
+                success: 'toast-success',
+                toast: 'payload-toast-item',
+                warning: 'toast-warning'
+            },
+            unstyled: true
+        },
+        visibleToasts: 5
+    });
+};
+
+//# sourceMappingURL=index.js.map

package/dist/providers/ToastContainer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/providers/ToastContainer/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\nimport { Toaster } from 'sonner'\n\nimport { Error } from './icons/Error.js'\nimport { Info } from './icons/Info.js'\nimport { Success } from './icons/Success.js'\nimport { Warning } from './icons/Warning.js'\n\nexport const ToastContainer: React.FC = () => {\n  return (\n    <Toaster\n      className=\"payload-toast-container\"\n      closeButton\n      // @ts-expect-error\n      dir=\"undefined\"\n      icons={{\n        error: <Error />,\n        info: <Info />,\n        success: <Success />,\n        warning: <Warning />,\n      }}\n      offset=\"36px\"\n      toastOptions={{\n        classNames: {\n          closeButton: 'payload-toast-close-button',\n          content: 'toast-content',\n          error: 'toast-error',\n          icon: 'toast-icon',\n          info: 'toast-info',\n          success: 'toast-success',\n          toast: 'payload-toast-item',\n          warning: 'toast-warning',\n        },\n        unstyled: true,\n      }}\n      visibleToasts={5}\n    />\n  )\n}\n"],"names":["React","Toaster","Error","Info","Success","Warning","ToastContainer","className","closeButton","dir","icons","error","info","success","warning","offset","toastOptions","classNames","content","icon","toast","unstyled","visibleToasts"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,OAAOA,WAAW,QAAO;AACzB,SAASC,OAAO,QAAQ,SAAQ;AAEhC,SAASC,KAAK,QAAQ,mBAAkB;AACxC,SAASC,IAAI,QAAQ,kBAAiB;AACtC,SAASC,OAAO,QAAQ,qBAAoB;AAC5C,SAASC,OAAO,QAAQ,qBAAoB;AAE5C,OAAO,MAAMC,iBAA2B;IACtC,qBACE,KAACL;QACCM,WAAU;QACVC,WAAW;QACX,mBAAmB;QACnBC,KAAI;QACJC,OAAO;YACLC,qBAAO,KAACT;YACRU,oBAAM,KAACT;YACPU,uBAAS,KAACT;YACVU,uBAAS,KAACT;QACZ;QACAU,QAAO;QACPC,cAAc;YACZC,YAAY;gBACVT,aAAa;gBACbU,SAAS;gBACTP,OAAO;gBACPQ,MAAM;gBACNP,MAAM;gBACNC,SAAS;gBACTO,OAAO;gBACPN,SAAS;YACX;YACAO,UAAU;QACZ;QACAC,eAAe;;AAGrB,EAAC"}

package/dist/scss/app.scss

@@ -1,5 +1,5 @@
 @import 'styles';
-@import './toastify.scss';
+@import './toasts.scss';
 @import './colors.scss';
 
 :root {

package/dist/scss/toasts.scss

@@ -0,0 +1,111 @@
+.payload-toast-container {
+  .payload-toast-close-button {
+    left: unset;
+    right: 0.5rem;
+    top: 1.55rem;
+    color: var(--theme-elevation-400);
+    background: unset;
+    border: none;
+    display: flex;
+    width: 1.25rem;
+    height: 1.25rem;
+    justify-content: center;
+    align-items: center;
+
+    &:hover {
+      background: none;
+    }
+
+    svg {
+      width: 2rem;
+      height: 2rem;
+    }
+
+    [dir='RTL'] & {
+      right: unset;
+      left: 0.5rem;
+    }
+  }
+
+  .payload-toast-item {
+    padding: 1rem 2.5rem 1rem 1rem;
+    color: var(--theme-text);
+    font-style: normal;
+    font-weight: 600;
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    width: 100%;
+    border-radius: 0.15rem;
+    border: 1px solid var(--theme-border-color);
+    background: var(--theme-input-bg);
+    box-shadow:
+      0px 10px 4px -8px rgba(0, 2, 4, 0.02),
+      0px 2px 3px 0px rgba(0, 2, 4, 0.05);
+
+    .toast-content {
+      transition: opacity 100ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    }
+
+    &[data-front='false'] {
+      .toast-content {
+        opacity: 0;
+      }
+    }
+
+    &[data-expanded='true'] {
+      .toast-content {
+        opacity: 1;
+      }
+    }
+
+    .toast-icon {
+      svg {
+        width: 2.4rem;
+        height: 2.4rem;
+      }
+    }
+
+    &.toast-warning {
+      border-color: var(--theme-warning-200);
+      background-color: var(--theme-warning-100);
+    }
+
+    &.toast-error {
+      border-color: var(--theme-error-300);
+      background-color: var(--theme-error-150);
+    }
+
+    &.toast-success {
+      border-color: var(--theme-success-200);
+      background-color: var(--theme-success-100);
+    }
+
+    &.toast-info {
+      border-color: var(--theme-elevation-250);
+      background-color: var(--theme-elevation-100);
+    }
+
+    [data-theme='light'] & {
+      &.toast-warning {
+        border-color: var(--theme-warning-550);
+        background-color: var(--theme-warning-100);
+      }
+
+      &.toast-error {
+        border-color: var(--theme-error-200);
+        background-color: var(--theme-error-50);
+      }
+
+      &.toast-success {
+        border-color: var(--theme-success-550);
+        background-color: var(--theme-success-50);
+      }
+
+      &.toast-info {
+        border-color: var(--theme-border-color);
+        background-color: var(--theme-elevation-50);
+      }
+    }
+  }
+}

package/dist/utilities/reduceFieldsToValuesWithValidation.d.ts

@@ -0,0 +1,15 @@
+import type { Data, FormState } from 'payload/types';
+type ReturnType = {
+    data: Data;
+    valid: boolean;
+};
+/**
+ * Reduce flattened form fields (Fields) to just map to the respective values instead of the full FormField object
+ *
+ * @param unflatten This also unflattens the data if `unflatten` is true. The unflattened data should match the original data structure
+ * @param ignoreDisableFormData - if true, will include fields that have `disableFormData` set to true, for example, blocks or arrays fields.
+ *
+ */
+export declare const reduceFieldsToValuesWithValidation: (fields: FormState, unflatten?: boolean, ignoreDisableFormData?: boolean) => ReturnType;
+export {};
+//# sourceMappingURL=reduceFieldsToValuesWithValidation.d.ts.map

package/dist/utilities/reduceFieldsToValuesWithValidation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reduceFieldsToValuesWithValidation.d.ts","sourceRoot":"","sources":["../../src/utilities/reduceFieldsToValuesWithValidation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAKpD,KAAK,UAAU,GAAG;IAChB,IAAI,EAAE,IAAI,CAAA;IACV,KAAK,EAAE,OAAO,CAAA;CACf,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,kCAAkC,WACrC,SAAS,cACL,OAAO,0BACK,OAAO,KAC9B,UAoBF,CAAA"}

package/dist/utilities/reduceFieldsToValuesWithValidation.js

@@ -0,0 +1,29 @@
+import flatleyImport from 'flatley';
+const { unflatten: flatleyUnflatten } = flatleyImport;
+/**
+ * Reduce flattened form fields (Fields) to just map to the respective values instead of the full FormField object
+ *
+ * @param unflatten This also unflattens the data if `unflatten` is true. The unflattened data should match the original data structure
+ * @param ignoreDisableFormData - if true, will include fields that have `disableFormData` set to true, for example, blocks or arrays fields.
+ *
+ */ export const reduceFieldsToValuesWithValidation = (fields, unflatten, ignoreDisableFormData)=>{
+    const state = {
+        data: {},
+        valid: true
+    };
+    if (!fields) return state;
+    Object.keys(fields).forEach((key)=>{
+        if (ignoreDisableFormData === true || !fields[key]?.disableFormData) {
+            state.data[key] = fields[key]?.value;
+            if (!fields[key].valid) state.valid = false;
+        }
+    });
+    if (unflatten) {
+        state.data = flatleyUnflatten(state.data, {
+            safe: true
+        });
+    }
+    return state;
+};
+
+//# sourceMappingURL=reduceFieldsToValuesWithValidation.js.map

package/dist/utilities/reduceFieldsToValuesWithValidation.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utilities/reduceFieldsToValuesWithValidation.ts"],"sourcesContent":["import type { Data, FormState } from 'payload/types'\n\nimport flatleyImport from 'flatley'\nconst { unflatten: flatleyUnflatten } = flatleyImport\n\ntype ReturnType = {\n  data: Data\n  valid: boolean\n}\n\n/**\n * Reduce flattened form fields (Fields) to just map to the respective values instead of the full FormField object\n *\n * @param unflatten This also unflattens the data if `unflatten` is true. The unflattened data should match the original data structure\n * @param ignoreDisableFormData - if true, will include fields that have `disableFormData` set to true, for example, blocks or arrays fields.\n *\n */\nexport const reduceFieldsToValuesWithValidation = (\n  fields: FormState,\n  unflatten?: boolean,\n  ignoreDisableFormData?: boolean,\n): ReturnType => {\n  const state: ReturnType = {\n    data: {},\n    valid: true,\n  }\n\n  if (!fields) return state\n\n  Object.keys(fields).forEach((key) => {\n    if (ignoreDisableFormData === true || !fields[key]?.disableFormData) {\n      state.data[key] = fields[key]?.value\n      if (!fields[key].valid) state.valid = false\n    }\n  })\n\n  if (unflatten) {\n    state.data = flatleyUnflatten(state.data, { safe: true })\n  }\n\n  return state\n}\n"],"names":["flatleyImport","unflatten","flatleyUnflatten","reduceFieldsToValuesWithValidation","fields","ignoreDisableFormData","state","data","valid","Object","keys","forEach","key","disableFormData","value","safe"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAEA,OAAOA,mBAAmB,UAAS;AACnC,MAAM,EAAEC,WAAWC,gBAAgB,EAAE,GAAGF;AAOxC;;;;;;CAMC,GACD,OAAO,MAAMG,qCAAqC,CAChDC,QACAH,WACAI;IAEA,MAAMC,QAAoB;QACxBC,MAAM,CAAC;QACPC,OAAO;IACT;IAEA,IAAI,CAACJ,QAAQ,OAAOE;IAEpBG,OAAOC,IAAI,CAACN,QAAQO,OAAO,CAAC,CAACC;QAC3B,IAAIP,0BAA0B,QAAQ,CAACD,MAAM,CAACQ,IAAI,EAAEC,iBAAiB;YACnEP,MAAMC,IAAI,CAACK,IAAI,GAAGR,MAAM,CAACQ,IAAI,EAAEE;YAC/B,IAAI,CAACV,MAAM,CAACQ,IAAI,CAACJ,KAAK,EAAEF,MAAME,KAAK,GAAG;QACxC;IACF;IAEA,IAAIP,WAAW;QACbK,MAAMC,IAAI,GAAGL,iBAAiBI,MAAMC,IAAI,EAAE;YAAEQ,MAAM;QAAK;IACzD;IAEA,OAAOT;AACT,EAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payloadcms/ui",
-  "version": "3.0.0-beta.43",
+  "version": "3.0.0-beta.45",
   "homepage": "https://payloadcms.com",
   "repository": {
     "type": "git",
@@ -94,9 +94,9 @@
   "dependencies": {
     "@dnd-kit/core": "6.0.8",
     "@dnd-kit/sortable": "7.0.2",
-    "@faceless-ui/modal": "2.1.0-rc.0",
-    "@faceless-ui/scroll-info": "1.4.0-rc.0",
-    "@faceless-ui/window-info": "2.2.0-rc.0",
+    "@faceless-ui/modal": "3.0.0-beta.0",
+    "@faceless-ui/scroll-info": "2.0.0-beta.0",
+    "@faceless-ui/window-info": "3.0.0-beta.0",
     "@monaco-editor/react": "4.5.1",
     "body-scroll-lock": "4.0.0-beta.0",
     "bson-objectid": "2.0.4",
@@ -110,11 +110,11 @@
     "react-datepicker": "6.9.0",
     "react-image-crop": "10.1.8",
     "react-select": "5.8.0",
-    "react-toastify": "10.0.5",
     "scheduler": "0.25.0-rc-f994737d14-20240522",
+    "sonner": "^1.5.0",
     "use-context-selector": "2.0.0",
     "uuid": "^9.0.1",
-    "@payloadcms/translations": "3.0.0-beta.43"
+    "@payloadcms/translations": "3.0.0-beta.45"
   },
   "devDependencies": {
     "@babel/cli": "^7.24.5",
@@ -141,14 +141,14 @@
     "terser-webpack-plugin": "^5.3.10",
     "webpack": "^5.78.0",
     "webpack-cli": "^5.1.4",
-    "payload": "3.0.0-beta.43",
-    "@payloadcms/eslint-config": "1.1.1"
+    "@payloadcms/eslint-config": "1.1.1",
+    "payload": "3.0.0-beta.45"
   },
   "peerDependencies": {
     "next": "^15.0.0-rc.0",
     "react": "^19.0.0 || ^19.0.0-rc-f994737d14-20240522",
     "react-dom": "^19.0.0 || ^19.0.0-rc-f994737d14-20240522",
-    "payload": "3.0.0-beta.43"
+    "payload": "3.0.0-beta.45"
   },
   "engines": {
     "node": "^18.20.2 || >=20.9.0"