@payloadcms/ui 3.0.0-canary.fb81f02 → 3.0.0

package/dist/fields/Group/index.scss

@@ -1,144 +1,146 @@
 @import '../../scss/styles.scss';
 
-.group-field {
-  margin-left: calc(var(--gutter-h) * -1);
-  margin-right: calc(var(--gutter-h) * -1);
-  border-bottom: 1px solid var(--theme-elevation-100);
-  border-top: 1px solid var(--theme-elevation-100);
+@layer payload-default {
+  .group-field {
+    margin-left: calc(var(--gutter-h) * -1);
+    margin-right: calc(var(--gutter-h) * -1);
+    border-bottom: 1px solid var(--theme-elevation-100);
+    border-top: 1px solid var(--theme-elevation-100);
 
-  &--top-level {
-    padding: base(2) var(--gutter-h);
+    &--top-level {
+      padding: base(2) var(--gutter-h);
 
-    &:first-child {
-      padding-top: 0;
-      border-top: 0;
+      &:first-child {
+        padding-top: 0;
+        border-top: 0;
+      }
     }
-  }
 
-  &--within-collapsible {
-    margin-left: calc(var(--base) * -1);
-    margin-right: calc(var(--base) * -1);
-    padding: var(--base);
+    &--within-collapsible {
+      margin-left: calc(var(--base) * -1);
+      margin-right: calc(var(--base) * -1);
+      padding: var(--base);
 
-    &:first-child {
-      border-top: 0;
-      padding-top: 0;
-      margin-top: 0;
+      &:first-child {
+        border-top: 0;
+        padding-top: 0;
+        margin-top: 0;
+      }
+
+      &:last-child {
+        padding-bottom: 0;
+        border-bottom: 0;
+      }
     }
 
-    &:last-child {
-      padding-bottom: 0;
+    &--within-group {
+      margin-left: 0;
+      margin-right: 0;
+      padding: 0;
+      border-top: 0;
       border-bottom: 0;
     }
-  }
-
-  &--within-group {
-    margin-left: 0;
-    margin-right: 0;
-    padding: 0;
-    border-top: 0;
-    border-bottom: 0;
-  }
 
-  &--within-row {
-    margin: 0;
-    border-top: 0;
-    border-bottom: 0;
-  }
-
-  &--within-tab:first-child {
-    margin-top: 0;
-    border-top: 0;
-    padding-top: 0;
-  }
+    &--within-row {
+      margin: 0;
+      border-top: 0;
+      border-bottom: 0;
+    }
 
-  &--within-tab:last-child {
-    margin-bottom: 0;
-    border-bottom: 0;
-    padding-bottom: 0;
-  }
+    &--within-tab:first-child {
+      margin-top: 0;
+      border-top: 0;
+      padding-top: 0;
+    }
 
-  &--gutter {
-    border-left: 1px solid var(--theme-elevation-100);
-    padding: 0 0 0 $baseline;
-  }
+    &--within-tab:last-child {
+      margin-bottom: 0;
+      border-bottom: 0;
+      padding-bottom: 0;
+    }
 
-  &__header {
-    margin-bottom: calc(var(--base) / 2);
-    display: flex;
-    align-items: center;
-    gap: base(0.5);
+    &--gutter {
+      border-left: 1px solid var(--theme-elevation-100);
+      padding: 0 0 0 $baseline;
+    }
 
-    > header {
+    &__header {
+      margin-bottom: calc(var(--base) / 2);
       display: flex;
-      flex-direction: column;
-      gap: calc(var(--base) / 4);
+      align-items: center;
+      gap: base(0.5);
+
+      > header {
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--base) / 4);
+      }
     }
-  }
 
-  &__title {
-    margin-bottom: 0;
-  }
+    &__title {
+      margin-bottom: 0;
+    }
 
-  @include small-break {
-    &--top-level {
-      padding: var(--base) var(--gutter-h);
+    @include small-break {
+      &--top-level {
+        padding: var(--base) var(--gutter-h);
 
-      &:first-child {
-        padding-top: 0;
-        border-top: 0;
+        &:first-child {
+          padding-top: 0;
+          border-top: 0;
+        }
       }
-    }
 
-    &__header {
-      margin-bottom: calc(var(--base) / 2);
-    }
+      &__header {
+        margin-bottom: calc(var(--base) / 2);
+      }
 
-    &--within-collapsible {
-      margin-left: calc(var(--gutter-h) * -1);
-      margin-right: calc(var(--gutter-h) * -1);
-    }
+      &--within-collapsible {
+        margin-left: calc(var(--gutter-h) * -1);
+        margin-right: calc(var(--gutter-h) * -1);
+      }
 
-    &--within-group {
-      padding: 0;
-    }
+      &--within-group {
+        padding: 0;
+      }
 
-    &--gutter {
-      padding-left: var(--gutter-h);
+      &--gutter {
+        padding-left: var(--gutter-h);
+      }
     }
   }
-}
 
-.group-field + .group-field {
-  border-top: 0;
-  padding-top: 0;
-}
+  .group-field + .group-field {
+    border-top: 0;
+    padding-top: 0;
+  }
 
-.group-field--within-row + .group-field--within-row {
-  margin-top: 0;
-}
+  .group-field--within-row + .group-field--within-row {
+    margin-top: 0;
+  }
 
-.group-field--within-tab + .group-field--within-row {
-  padding-top: 0;
-}
+  .group-field--within-tab + .group-field--within-row {
+    padding-top: 0;
+  }
 
-html[data-theme='light'] {
-  .group-field {
-    &--has-error {
-      color: var(--theme-error-750);
-      &:after {
-        background: var(--theme-error-500);
+  html[data-theme='light'] {
+    .group-field {
+      &--has-error {
+        color: var(--theme-error-750);
+        &:after {
+          background: var(--theme-error-500);
+        }
       }
     }
   }
-}
 
-html[data-theme='dark'] {
-  .group-field {
-    &--has-error {
-      color: var(--theme-error-500);
-      &:after {
-        background: var(--theme-error-500);
+  html[data-theme='dark'] {
+    .group-field {
+      &--has-error {
+        color: var(--theme-error-500);
+        &:after {
+          background: var(--theme-error-500);
+        }
       }
     }
   }

package/dist/fields/Group/provider.js

@@ -1,13 +1,18 @@
 'use client';
+
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { createContext, useContext } from 'react';
-export const GroupContext = /*#__PURE__*/ createContext(false);
-export const GroupProvider = ({ children, withinGroup = true })=>{
-    return /*#__PURE__*/ _jsx(GroupContext.Provider, {
-        value: withinGroup,
-        children: children
-    });
+export const GroupContext = /*#__PURE__*/createContext(false);
+export const GroupProvider = ({
+  children,
+  withinGroup = true
+}) => {
+  return /*#__PURE__*/_jsx(GroupContext.Provider, {
+    value: withinGroup,
+    children: children
+  });
+};
+export const useGroup = () => {
+  return useContext(GroupContext);
 };
-export const useGroup = ()=>useContext(GroupContext);
-
 //# sourceMappingURL=provider.js.map

package/dist/fields/Group/provider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/fields/Group/provider.tsx"],"sourcesContent":["'use client'\nimport React, { createContext, useContext } from 'react'\n\nexport const GroupContext = createContext(false)\n\nexport const GroupProvider: React.FC<{ children?: React.ReactNode; withinGroup?: boolean }> = ({\n  children,\n  withinGroup = true,\n}) => {\n  return <GroupContext.Provider value={withinGroup}>{children}</GroupContext.Provider>\n}\n\nexport const useGroup = (): boolean => useContext(GroupContext)\n"],"names":["React","createContext","useContext","GroupContext","GroupProvider","children","withinGroup","Provider","value","useGroup"],"mappings":"AAAA;;AACA,OAAOA,SAASC,aAAa,EAAEC,UAAU,QAAQ,QAAO;AAExD,OAAO,MAAMC,6BAAeF,cAAc,OAAM;AAEhD,OAAO,MAAMG,gBAAiF,CAAC,EAC7FC,QAAQ,EACRC,cAAc,IAAI,EACnB;IACC,qBAAO,KAACH,aAAaI,QAAQ;QAACC,OAAOF;kBAAcD;;AACrD,EAAC;AAED,OAAO,MAAMI,WAAW,IAAeP,WAAWC,cAAa"}
+{"version":3,"file":"provider.js","names":["React","createContext","useContext","GroupContext","GroupProvider","children","withinGroup","_jsx","Provider","value","useGroup"],"sources":["../../../src/fields/Group/provider.tsx"],"sourcesContent":["'use client'\nimport React, { createContext, useContext } from 'react'\n\nexport const GroupContext = createContext(false)\n\nexport const GroupProvider: React.FC<{ children?: React.ReactNode; withinGroup?: boolean }> = ({\n  children,\n  withinGroup = true,\n}) => {\n  return <GroupContext.Provider value={withinGroup}>{children}</GroupContext.Provider>\n}\n\nexport const useGroup = (): boolean => useContext(GroupContext)\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,IAASC,aAAa,EAAEC,UAAU,QAAQ;AAEjD,OAAO,MAAMC,YAAA,gBAAeF,aAAA,CAAc;AAE1C,OAAO,MAAMG,aAAA,GAAiFA,CAAC;EAC7FC,QAAQ;EACRC,WAAA,GAAc;AAAI,CACnB;EACC,oBAAOC,IAAA,CAACJ,YAAA,CAAaK,QAAQ;IAACC,KAAA,EAAOH,WAAA;cAAcD;;AACrD;AAEA,OAAO,MAAMK,QAAA,GAAWA,CAAA;EAAA,OAAeR,UAAA,CAAAC,YAAW;AAAA","ignoreList":[]}

package/dist/fields/Hidden/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Hidden/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAE/C,OAAO,KAAoB,MAAM,OAAO,CAAA;AA0CxC,eAAO,MAAM,WAAW,4BAAsC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Hidden/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAE/C,OAAO,KAAoB,MAAM,OAAO,CAAA;AAiCxC,eAAO,MAAM,WAAW,4BAAsC,CAAA"}

package/dist/fields/Hidden/index.js

@@ -1,35 +1,75 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useEffect } from 'react';
-import { useFieldProps } from '../../forms/FieldPropsProvider/index.js';
 import { useField } from '../../forms/useField/index.js';
 import { withCondition } from '../../forms/withCondition/index.js';
 /**
  * This is mainly used to save a value on the form that is not visible to the user.
  * For example, this sets the `ìd` property of a block in the Blocks field.
- */ const HiddenFieldComponent = (props)=>{
-    const { name, disableModifyingForm = true, forceUsePathFromProps, path: pathFromProps, value: valueFromProps } = props;
-    const { path: pathFromContext } = useFieldProps();
-    const { path, setValue, value } = useField({
-        path: (!forceUsePathFromProps ? pathFromContext : null) || pathFromProps || name
-    });
-    useEffect(()=>{
-        if (valueFromProps !== undefined) {
-            setValue(valueFromProps, disableModifyingForm);
-        }
-    }, [
-        valueFromProps,
-        setValue,
-        disableModifyingForm
-    ]);
-    return /*#__PURE__*/ _jsx("input", {
-        id: `field-${path?.replace(/\./g, '__')}`,
-        name: path,
-        onChange: setValue,
-        type: "hidden",
-        value: value || ''
+ */
+const HiddenFieldComponent = props => {
+  const $ = _c(12);
+  const {
+    disableModifyingForm: t0,
+    path,
+    value: valueFromProps
+  } = props;
+  const disableModifyingForm = t0 === undefined ? true : t0;
+  let t1;
+  if ($[0] !== path) {
+    t1 = {
+      path
+    };
+    $[0] = path;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const {
+    setValue,
+    value
+  } = useField(t1);
+  let t2;
+  let t3;
+  if ($[2] !== valueFromProps || $[3] !== setValue || $[4] !== disableModifyingForm) {
+    t2 = () => {
+      if (valueFromProps !== undefined) {
+        setValue(valueFromProps, disableModifyingForm);
+      }
+    };
+    t3 = [valueFromProps, setValue, disableModifyingForm];
+    $[2] = valueFromProps;
+    $[3] = setValue;
+    $[4] = disableModifyingForm;
+    $[5] = t2;
+    $[6] = t3;
+  } else {
+    t2 = $[5];
+    t3 = $[6];
+  }
+  useEffect(t2, t3);
+  const t4 = `field-${path?.replace(/\./g, "__")}`;
+  const t5 = value || "";
+  let t6;
+  if ($[7] !== t4 || $[8] !== path || $[9] !== setValue || $[10] !== t5) {
+    t6 = _jsx("input", {
+      id: t4,
+      name: path,
+      onChange: setValue,
+      type: "hidden",
+      value: t5
     });
+    $[7] = t4;
+    $[8] = path;
+    $[9] = setValue;
+    $[10] = t5;
+    $[11] = t6;
+  } else {
+    t6 = $[11];
+  }
+  return t6;
 };
 export const HiddenField = withCondition(HiddenFieldComponent);
-
 //# sourceMappingURL=index.js.map

package/dist/fields/Hidden/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/fields/Hidden/index.tsx"],"sourcesContent":["'use client'\n\nimport type { HiddenFieldProps } from 'payload'\n\nimport React, { useEffect } from 'react'\n\nimport { useFieldProps } from '../../forms/FieldPropsProvider/index.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\n\n/**\n * This is mainly used to save a value on the form that is not visible to the user.\n * For example, this sets the `ìd` property of a block in the Blocks field.\n */\nconst HiddenFieldComponent: React.FC<HiddenFieldProps> = (props) => {\n  const {\n    name,\n    disableModifyingForm = true,\n    forceUsePathFromProps,\n    path: pathFromProps,\n    value: valueFromProps,\n  } = props\n\n  const { path: pathFromContext } = useFieldProps()\n\n  const { path, setValue, value } = useField({\n    path: (!forceUsePathFromProps ? pathFromContext : null) || pathFromProps || name,\n  })\n\n  useEffect(() => {\n    if (valueFromProps !== undefined) {\n      setValue(valueFromProps, disableModifyingForm)\n    }\n  }, [valueFromProps, setValue, disableModifyingForm])\n\n  return (\n    <input\n      id={`field-${path?.replace(/\\./g, '__')}`}\n      name={path}\n      onChange={setValue}\n      type=\"hidden\"\n      value={(value as string) || ''}\n    />\n  )\n}\n\nexport const HiddenField = withCondition(HiddenFieldComponent)\n"],"names":["React","useEffect","useFieldProps","useField","withCondition","HiddenFieldComponent","props","name","disableModifyingForm","forceUsePathFromProps","path","pathFromProps","value","valueFromProps","pathFromContext","setValue","undefined","input","id","replace","onChange","type","HiddenField"],"mappings":"AAAA;;AAIA,OAAOA,SAASC,SAAS,QAAQ,QAAO;AAExC,SAASC,aAAa,QAAQ,0CAAyC;AACvE,SAASC,QAAQ,QAAQ,gCAA+B;AACxD,SAASC,aAAa,QAAQ,qCAAoC;AAElE;;;CAGC,GACD,MAAMC,uBAAmD,CAACC;IACxD,MAAM,EACJC,IAAI,EACJC,uBAAuB,IAAI,EAC3BC,qBAAqB,EACrBC,MAAMC,aAAa,EACnBC,OAAOC,cAAc,EACtB,GAAGP;IAEJ,MAAM,EAAEI,MAAMI,eAAe,EAAE,GAAGZ;IAElC,MAAM,EAAEQ,IAAI,EAAEK,QAAQ,EAAEH,KAAK,EAAE,GAAGT,SAAS;QACzCO,MAAM,AAAC,CAAA,CAACD,wBAAwBK,kBAAkB,IAAG,KAAMH,iBAAiBJ;IAC9E;IAEAN,UAAU;QACR,IAAIY,mBAAmBG,WAAW;YAChCD,SAASF,gBAAgBL;QAC3B;IACF,GAAG;QAACK;QAAgBE;QAAUP;KAAqB;IAEnD,qBACE,KAACS;QACCC,IAAI,CAAC,MAAM,EAAER,MAAMS,QAAQ,OAAO,MAAM,CAAC;QACzCZ,MAAMG;QACNU,UAAUL;QACVM,MAAK;QACLT,OAAO,AAACA,SAAoB;;AAGlC;AAEA,OAAO,MAAMU,cAAclB,cAAcC,sBAAqB"}
+{"version":3,"file":"index.js","names":["c","_c","React","useEffect","useField","withCondition","HiddenFieldComponent","props","$","disableModifyingForm","t0","path","value","valueFromProps","undefined","t1","setValue","t2","t3","t4","replace","t5","t6","_jsx","id","name","onChange","type","HiddenField"],"sources":["../../../src/fields/Hidden/index.tsx"],"sourcesContent":["'use client'\n\nimport type { HiddenFieldProps } from 'payload'\n\nimport React, { useEffect } from 'react'\n\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\n\n/**\n * This is mainly used to save a value on the form that is not visible to the user.\n * For example, this sets the `ìd` property of a block in the Blocks field.\n */\nconst HiddenFieldComponent: React.FC<HiddenFieldProps> = (props) => {\n  const { disableModifyingForm = true, path, value: valueFromProps } = props\n\n  const { setValue, value } = useField({\n    path,\n  })\n\n  useEffect(() => {\n    if (valueFromProps !== undefined) {\n      setValue(valueFromProps, disableModifyingForm)\n    }\n  }, [valueFromProps, setValue, disableModifyingForm])\n\n  return (\n    <input\n      id={`field-${path?.replace(/\\./g, '__')}`}\n      name={path}\n      onChange={setValue}\n      type=\"hidden\"\n      value={(value as string) || ''}\n    />\n  )\n}\n\nexport const HiddenField = withCondition(HiddenFieldComponent)\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAIA,OAAOC,KAAA,IAASC,SAAS,QAAQ;AAEjC,SAASC,QAAQ,QAAQ;AACzB,SAASC,aAAa,QAAQ;AAE9B;;;;AAIA,MAAMC,oBAAA,GAAmDC,KAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EACvD;IAAAQ,oBAAA,EAAAC,EAAA;IAAAC,IAAA;IAAAC,KAAA,EAAAC;EAAA,IAAqEN,KAAA;EAA7D,MAAAE,oBAAA,GAAAC,EAA2B,KAAAI,SAAA,UAA3BJ,EAA2B;EAAA,IAAAK,EAAA;EAAA,IAAAP,CAAA,QAAAG,IAAA;IAEEI,EAAA;MAAAJ;IAAA;IAErCH,CAAA,MAAAG,IAAA;IAAAH,CAAA,MAAAO,EAAA;EAAA;IAAAA,EAAA,GAAAP,CAAA;EAAA;EAFA;IAAAQ,QAAA;IAAAJ;EAAA,IAA4BR,QAAA,CAASW,EAErC;EAAA,IAAAE,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAV,CAAA,QAAAK,cAAA,IAAAL,CAAA,QAAAQ,QAAA,IAAAR,CAAA,QAAAC,oBAAA;IAEUQ,EAAA,GAAAA,CAAA;MAAA,IACJJ,cAAA,KAAAC,SAAmB;QACrBE,QAAA,CAASH,cAAA,EAAgBJ,oBAAA;MAAA;IAAA;IAE1BS,EAAA,IAACL,cAAA,EAAgBG,QAAA,EAAUP,oBAAA;IAAqBD,CAAA,MAAAK,cAAA;IAAAL,CAAA,MAAAQ,QAAA;IAAAR,CAAA,MAAAC,oBAAA;IAAAD,CAAA,MAAAS,EAAA;IAAAT,CAAA,MAAAU,EAAA;EAAA;IAAAD,EAAA,GAAAT,CAAA;IAAAU,EAAA,GAAAV,CAAA;EAAA;EAJnDL,SAAA,CAAUc,EAIV,EAAGC,EAAgD;EAI3C,MAAAC,EAAA,YAASR,IAAA,EAAAS,OAAA,QAAqB,OAAO;EAIlC,MAAAC,EAAA,GAAAT,KAAC,IAAoB;EAAA,IAAAU,EAAA;EAAA,IAAAd,CAAA,QAAAW,EAAA,IAAAX,CAAA,QAAAG,IAAA,IAAAH,CAAA,QAAAQ,QAAA,IAAAR,CAAA,SAAAa,EAAA;IAL9BC,EAAA,GAAAC,IAAA,CAAC;MAAAC,EAAA,EACKL,EAAqC;MAAAM,IAAA,EACnCd,IAAA;MAAAe,QAAA,EACIV,QAAA;MAAAW,IAAA,EACL;MAAAf,KAAA,EACES;IAAqB,C;;;;;;;;;SAL9BC,E;CAQJ;AAEA,OAAO,MAAMM,WAAA,GAAcvB,aAAA,CAAcC,oBAAA","ignoreList":[]}

package/dist/fields/JSON/index.d.ts

@@ -1,5 +1,9 @@
-import type { JSONFieldProps } from 'payload';
 import React from 'react';
 import './index.scss';
-export declare const JSONField: React.FC<JSONFieldProps>;
+export declare const JSONField: React.FC<{
+    readonly path: string;
+    readonly validate?: import("payload").JSONFieldValidation;
+} & {
+    readonly field: Omit<import("payload").JSONFieldClient, "type"> & Partial<Pick<import("payload").JSONFieldClient, "type">>;
+} & Omit<import("payload").ClientComponentProps, "field" | "customComponents">>;
 //# sourceMappingURL=index.d.ts.map

package/dist/fields/JSON/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/JSON/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAE7C,OAAO,KAA2C,MAAM,OAAO,CAAA;AAO/D,OAAO,cAAc,CAAA;AA8IrB,eAAO,MAAM,SAAS,0BAAoC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/JSON/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAoD,MAAM,OAAO,CAAA;AAUxE,OAAO,cAAc,CAAA;AA6IrB,eAAO,MAAM,SAAS;;;;;+EAAoC,CAAA"}