@payloadcms/ui 3.0.0-canary.96477cf → 3.0.0-canary.98e0119

package/dist/providers/ServerFunctions/index.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { createContext, useCallback } from 'react';
+export const ServerFunctionsContext = /*#__PURE__*/createContext(undefined);
+export const useServerFunctions = () => {
+  const context = React.useContext(ServerFunctionsContext);
+  if (context === undefined) {
+    throw new Error('useServerFunctions must be used within a ServerFunctionsProvider');
+  }
+  return context;
+};
+export const ServerFunctionsProvider = ({
+  children,
+  serverFunction
+}) => {
+  if (!serverFunction) {
+    throw new Error('ServerFunctionsProvider requires a serverFunction prop');
+  }
+  const getDocumentSlots = useCallback(async args => await serverFunction({
+    name: 'render-document-slots',
+    args
+  }), [serverFunction]);
+  const getFormState = useCallback(async args => {
+    const {
+      signal: remoteSignal,
+      ...rest
+    } = args || {};
+    try {
+      if (!remoteSignal?.aborted) {
+        const result = await serverFunction({
+          name: 'form-state',
+          args: {
+            fallbackLocale: false,
+            ...rest
+          }
+        });
+        // TODO: infer this type when `strictNullChecks` is enabled
+        if (!remoteSignal?.aborted) {
+          return result;
+        }
+      }
+    } catch (_err) {
+      console.error(_err) // eslint-disable-line no-console
+      ;
+    }
+    return {
+      state: null
+    };
+  }, [serverFunction]);
+  const getTableState = useCallback(async args => {
+    const {
+      signal: remoteSignal,
+      ...rest
+    } = args || {};
+    try {
+      if (!remoteSignal?.aborted) {
+        const result = await serverFunction({
+          name: 'table-state',
+          args: {
+            fallbackLocale: false,
+            ...rest
+          }
+        });
+        // TODO: infer this type when `strictNullChecks` is enabled
+        if (!remoteSignal?.aborted) {
+          return result;
+        }
+      }
+    } catch (_err) {
+      console.error(_err) // eslint-disable-line no-console
+      ;
+    }
+    // return { state: args.formState }
+  }, [serverFunction]);
+  const renderDocument = useCallback(async args => {
+    const {
+      signal: remoteSignal,
+      ...rest
+    } = args || {};
+    try {
+      if (!remoteSignal?.aborted) {
+        const result = await serverFunction({
+          name: 'render-document',
+          args: {
+            fallbackLocale: false,
+            ...rest
+          }
+        });
+        if (!remoteSignal?.aborted) {
+          return result;
+        }
+      }
+    } catch (_err) {
+      console.error(_err) // eslint-disable-line no-console
+      ;
+    }
+  }, [serverFunction]);
+  return /*#__PURE__*/_jsx(ServerFunctionsContext.Provider, {
+    value: {
+      getDocumentSlots,
+      getFormState,
+      getTableState,
+      renderDocument,
+      serverFunction
+    },
+    children: children
+  });
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","createContext","useCallback","ServerFunctionsContext","undefined","useServerFunctions","context","useContext","Error","ServerFunctionsProvider","children","serverFunction","getDocumentSlots","args","name","getFormState","signal","remoteSignal","rest","aborted","result","fallbackLocale","_err","console","error","state","getTableState","renderDocument","_jsx","Provider","value"],"sources":["../../../src/providers/ServerFunctions/index.tsx"],"sourcesContent":["import type {\n  BuildFormStateArgs,\n  BuildTableStateArgs,\n  Data,\n  DocumentSlots,\n  ServerFunctionClient,\n} from 'payload'\n\nimport React, { createContext, useCallback } from 'react'\n\nimport type { buildFormStateHandler } from '../../utilities/buildFormState.js'\nimport type { buildTableStateHandler } from '../../utilities/buildTableState.js'\n\ntype GetFormStateClient = (\n  args: {\n    signal?: AbortSignal\n  } & Omit<BuildFormStateArgs, 'clientConfig' | 'req'>,\n) => ReturnType<typeof buildFormStateHandler>\n\ntype GetTableStateClient = (\n  args: {\n    signal?: AbortSignal\n  } & Omit<BuildTableStateArgs, 'clientConfig' | 'req'>,\n) => ReturnType<typeof buildTableStateHandler>\n\ntype RenderDocument = (args: {\n  collectionSlug: string\n  disableActions?: boolean\n  docID?: number | string\n  drawerSlug?: string\n  initialData?: Data\n  redirectAfterDelete?: boolean\n  redirectAfterDuplicate?: boolean\n  signal?: AbortSignal\n}) => Promise<{ docID: string; Document: React.ReactNode }>\n\ntype GetDocumentSlots = (args: {\n  collectionSlug: string\n  signal?: AbortSignal\n}) => Promise<DocumentSlots>\n\ntype ServerFunctionsContextType = {\n  getDocumentSlots: GetDocumentSlots\n  getFormState: GetFormStateClient\n  getTableState: GetTableStateClient\n  renderDocument: RenderDocument\n  serverFunction: ServerFunctionClient\n}\n\nexport const ServerFunctionsContext = createContext<ServerFunctionsContextType | undefined>(\n  undefined,\n)\n\nexport const useServerFunctions = () => {\n  const context = React.useContext(ServerFunctionsContext)\n  if (context === undefined) {\n    throw new Error('useServerFunctions must be used within a ServerFunctionsProvider')\n  }\n  return context\n}\n\nexport const ServerFunctionsProvider: React.FC<{\n  children: React.ReactNode\n  serverFunction: ServerFunctionClient\n}> = ({ children, serverFunction }) => {\n  if (!serverFunction) {\n    throw new Error('ServerFunctionsProvider requires a serverFunction prop')\n  }\n\n  const getDocumentSlots = useCallback<GetDocumentSlots>(\n    async (args) =>\n      await serverFunction({\n        name: 'render-document-slots',\n        args,\n      }),\n    [serverFunction],\n  )\n\n  const getFormState = useCallback<GetFormStateClient>(\n    async (args) => {\n      const { signal: remoteSignal, ...rest } = args || {}\n\n      try {\n        if (!remoteSignal?.aborted) {\n          const result = (await serverFunction({\n            name: 'form-state',\n            args: { fallbackLocale: false, ...rest },\n          })) as ReturnType<typeof buildFormStateHandler> // TODO: infer this type when `strictNullChecks` is enabled\n\n          if (!remoteSignal?.aborted) {\n            return result\n          }\n        }\n      } catch (_err) {\n        console.error(_err) // eslint-disable-line no-console\n      }\n\n      return { state: null }\n    },\n    [serverFunction],\n  )\n\n  const getTableState = useCallback<GetTableStateClient>(\n    async (args) => {\n      const { signal: remoteSignal, ...rest } = args || {}\n\n      try {\n        if (!remoteSignal?.aborted) {\n          const result = (await serverFunction({\n            name: 'table-state',\n            args: { fallbackLocale: false, ...rest },\n          })) as ReturnType<typeof buildTableStateHandler> // TODO: infer this type when `strictNullChecks` is enabled\n\n          if (!remoteSignal?.aborted) {\n            return result\n          }\n        }\n      } catch (_err) {\n        console.error(_err) // eslint-disable-line no-console\n      }\n\n      // return { state: args.formState }\n    },\n    [serverFunction],\n  )\n\n  const renderDocument = useCallback<RenderDocument>(\n    async (args) => {\n      const { signal: remoteSignal, ...rest } = args || {}\n\n      try {\n        if (!remoteSignal?.aborted) {\n          const result = (await serverFunction({\n            name: 'render-document',\n            args: { fallbackLocale: false, ...rest },\n          })) as { docID: string; Document: React.ReactNode }\n\n          if (!remoteSignal?.aborted) {\n            return result\n          }\n        }\n      } catch (_err) {\n        console.error(_err) // eslint-disable-line no-console\n      }\n    },\n    [serverFunction],\n  )\n\n  return (\n    <ServerFunctionsContext.Provider\n      value={{\n        getDocumentSlots,\n        getFormState,\n        getTableState,\n        renderDocument,\n        serverFunction,\n      }}\n    >\n      {children}\n    </ServerFunctionsContext.Provider>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/scss/app.scss

@@ -1,203 +1,207 @@
+@layer payload-default, payload;
+
 @import 'styles';
 @import './toasts.scss';
 @import './colors.scss';
 
-:root {
-  --base-px: 20;
-  --base-body-size: 13;
-  --base: calc((var(--base-px) / var(--base-body-size)) * 1rem);
-
-  --breakpoint-xs-width: #{$breakpoint-xs-width};
-  --breakpoint-s-width: #{$breakpoint-s-width};
-  --breakpoint-m-width: #{$breakpoint-m-width};
-  --breakpoint-l-width: #{$breakpoint-l-width};
-  --scrollbar-width: 17px;
-
-  --theme-bg: var(--theme-elevation-0);
-  --theme-input-bg: var(--theme-elevation-0);
-  --theme-text: var(--theme-elevation-800);
-  --theme-overlay: rgba(5, 5, 5, 0.5);
-  --theme-baseline: #{$baseline-px};
-  --theme-baseline-body-size: #{$baseline-body-size};
-  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
-    sans-serif;
-  --font-serif: 'Georgia', 'Bitstream Charter', 'Charis SIL', Utopia, 'URW Bookman L', serif;
-  --font-mono: 'SF Mono', Menlo, Consolas, Monaco, monospace;
-
-  --style-radius-s: #{$style-radius-s};
-  --style-radius-m: #{$style-radius-m};
-  --style-radius-l: #{$style-radius-l};
-
-  --z-popup: 10;
-  --z-nav: 20;
-  --z-modal: 30;
-  --z-status: 40;
-
-  --accessibility-outline: 2px solid var(--theme-text);
-  --accessibility-outline-offset: 2px;
-
-  --gutter-h: #{base(3)};
-  --spacing-view-bottom: var(--gutter-h);
-  --doc-controls-height: calc(var(--base) * 2.8);
-  --app-header-height: calc(var(--base) * 2.8);
-  --nav-width: 275px;
-  --nav-trans-time: 150ms;
-
-  @include mid-break {
-    --gutter-h: #{base(2)};
-    --app-header-height: calc(var(--base) * 2.4);
-    --doc-controls-height: calc(var(--base) * 2.4);
-  }
-
-  @include small-break {
-    --gutter-h: #{base(0.8)};
-    --spacing-view-bottom: calc(var(--base) * 2);
-    --nav-width: 100vw;
-  }
-}
+@layer payload-default {
+  :root {
+    --base-px: 20;
+    --base-body-size: 13;
+    --base: calc((var(--base-px) / var(--base-body-size)) * 1rem);
 
-/////////////////////////////
-// GLOBAL STYLES
-/////////////////////////////
+    --breakpoint-xs-width: #{$breakpoint-xs-width};
+    --breakpoint-s-width: #{$breakpoint-s-width};
+    --breakpoint-m-width: #{$breakpoint-m-width};
+    --breakpoint-l-width: #{$breakpoint-l-width};
+    --scrollbar-width: 17px;
 
-* {
-  box-sizing: border-box;
-}
+    --theme-bg: var(--theme-elevation-0);
+    --theme-input-bg: var(--theme-elevation-0);
+    --theme-text: var(--theme-elevation-800);
+    --theme-overlay: rgba(5, 5, 5, 0.5);
+    --theme-baseline: #{$baseline-px};
+    --theme-baseline-body-size: #{$baseline-body-size};
+    --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+      sans-serif;
+    --font-serif: 'Georgia', 'Bitstream Charter', 'Charis SIL', Utopia, 'URW Bookman L', serif;
+    --font-mono: 'SF Mono', Menlo, Consolas, Monaco, monospace;
+
+    --style-radius-s: #{$style-radius-s};
+    --style-radius-m: #{$style-radius-m};
+    --style-radius-l: #{$style-radius-l};
+
+    --z-popup: 10;
+    --z-nav: 20;
+    --z-modal: 30;
+    --z-status: 40;
+
+    --accessibility-outline: 2px solid var(--theme-text);
+    --accessibility-outline-offset: 2px;
+
+    --gutter-h: #{base(3)};
+    --spacing-view-bottom: var(--gutter-h);
+    --doc-controls-height: calc(var(--base) * 2.8);
+    --app-header-height: calc(var(--base) * 2.8);
+    --nav-width: 275px;
+    --nav-trans-time: 150ms;
+
+    @include mid-break {
+      --gutter-h: #{base(2)};
+      --app-header-height: calc(var(--base) * 2.4);
+      --doc-controls-height: calc(var(--base) * 2.4);
+    }
 
-html {
-  @extend %body;
-  background: var(--theme-bg);
-  -webkit-font-smoothing: antialiased;
+    @include small-break {
+      --gutter-h: #{base(0.8)};
+      --spacing-view-bottom: calc(var(--base) * 2);
+      --nav-width: 100vw;
+    }
+  }
 
-  &[data-theme='dark'] {
-    --theme-bg: var(--theme-elevation-0);
-    --theme-text: var(--theme-elevation-1000);
-    --theme-input-bg: var(--theme-elevation-50);
-    --theme-overlay: rgba(5, 5, 5, 0.75);
-    color-scheme: dark;
+  /////////////////////////////
+  // GLOBAL STYLES
+  /////////////////////////////
+
+  * {
+    box-sizing: border-box;
+  }
 
-    ::selection {
-      color: var(--color-base-1000);
+  html {
+    @extend %body;
+    background: var(--theme-bg);
+    -webkit-font-smoothing: antialiased;
+
+    &[data-theme='dark'] {
+      --theme-bg: var(--theme-elevation-0);
+      --theme-text: var(--theme-elevation-1000);
+      --theme-input-bg: var(--theme-elevation-50);
+      --theme-overlay: rgba(5, 5, 5, 0.75);
+      color-scheme: dark;
+
+      ::selection {
+        color: var(--color-base-1000);
+      }
+
+      ::-moz-selection {
+        color: var(--color-base-1000);
+      }
     }
 
-    ::-moz-selection {
-      color: var(--color-base-1000);
+    @include mid-break {
+      font-size: 12px;
     }
   }
 
-  @include mid-break {
-    font-size: 12px;
+  html,
+  body,
+  #app {
+    height: 100%;
   }
-}
 
-html,
-body,
-#app {
-  height: 100%;
-}
+  body {
+    font-family: var(--font-body);
+    font-weight: 400;
+    color: var(--theme-text);
+    margin: 0;
+    // this is for the nav to be able to push the document over
+    overflow-x: hidden;
+  }
 
-body {
-  font-family: var(--font-body);
-  font-weight: 400;
-  color: var(--theme-text);
-  margin: 0;
-  // this is for the nav to be able to push the document over
-  overflow-x: hidden;
-}
+  ::selection {
+    background: var(--color-success-250);
+    color: var(--theme-base-800);
+  }
 
-::selection {
-  background: var(--color-success-250);
-  color: var(--theme-base-800);
-}
+  ::-moz-selection {
+    background: var(--color-success-250);
+    color: var(--theme-base-800);
+  }
 
-::-moz-selection {
-  background: var(--color-success-250);
-  color: var(--theme-base-800);
-}
+  img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+  }
 
-img {
-  max-width: 100%;
-  height: auto;
-  display: block;
-}
+  h1 {
+    @extend %h1;
+  }
 
-h1 {
-  @extend %h1;
-}
+  h2 {
+    @extend %h2;
+  }
 
-h2 {
-  @extend %h2;
-}
+  h3 {
+    @extend %h3;
+  }
 
-h3 {
-  @extend %h3;
-}
+  h4 {
+    @extend %h4;
+  }
 
-h4 {
-  @extend %h4;
-}
+  h5 {
+    @extend %h5;
+  }
 
-h5 {
-  @extend %h5;
-}
+  h6 {
+    @extend %h6;
+  }
 
-h6 {
-  @extend %h6;
-}
+  p {
+    margin: 0;
+  }
 
-p {
-  margin: 0;
-}
+  ul,
+  ol {
+    padding-left: $baseline;
+    margin: 0;
+  }
 
-ul,
-ol {
-  padding-left: $baseline;
-  margin: 0;
-}
+  :focus-visible {
+    outline: var(--accessibility-outline);
+  }
 
-:focus-visible {
-  outline: var(--accessibility-outline);
-}
+  a {
+    color: currentColor;
 
-a {
-  color: currentColor;
+    &:focus {
+      &:not(:focus-visible) {
+        opacity: 0.8;
+      }
+      outline: none;
+    }
 
-  &:focus {
-    &:not(:focus-visible) {
-      opacity: 0.8;
+    &:active {
+      opacity: 0.7;
+      outline: none;
     }
-    outline: none;
   }
 
-  &:active {
-    opacity: 0.7;
-    outline: none;
+  svg {
+    vertical-align: middle;
   }
-}
 
-svg {
-  vertical-align: middle;
-}
+  dialog {
+    width: 100%;
+    border: 0;
+    padding: 0;
+    color: currentColor;
+  }
 
-dialog {
-  width: 100%;
-  border: 0;
-  padding: 0;
-  color: currentColor;
-}
+  .payload__modal-item {
+    min-height: 100%;
+    background: transparent;
+  }
 
-.payload__modal-item {
-  min-height: 100%;
-  background: transparent;
-}
+  .payload__modal-container--enterDone {
+    overflow: auto;
+  }
 
-.payload__modal-container--enterDone {
-  overflow: auto;
-}
+  .payload__modal-item--enter,
+  .payload__modal-item--enterDone {
+    z-index: var(--z-modal);
+  }
 
-.payload__modal-item--enter,
-.payload__modal-item--enterDone {
-  z-index: var(--z-modal);
+  // @import '~payload-user-css'; TODO: re-enable this
 }
-
-// @import '~payload-user-css'; TODO: re-enable this