@payloadcms/ui 3.0.0-alpha.0

package/dist/elements/FileDetails/index.scss

@@ -0,0 +1,115 @@
+@import '../../scss/styles.scss';
+
+.file-details {
+  background-color: var(--theme-elevation-50);
+
+  header {
+    display: flex;
+    align-items: flex-start;
+    border-bottom: 1px solid var(--theme-elevation-0);
+  }
+
+  &__remove {
+    margin: $baseline $baseline $baseline 0;
+  }
+
+  &__main-detail {
+    padding: $baseline base(1.5);
+    width: auto;
+    flex-grow: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    align-self: center;
+    gap: base(0.25);
+  }
+
+  &__toggle-more-info {
+    font-weight: 600;
+    text-decoration: none;
+
+    &:hover,
+    &:focus-visible {
+      text-decoration: underline;
+    }
+  }
+
+  &__toggle-icon {
+    padding: calc(var(--base) / 4);
+  }
+
+  &__sizes {
+    margin: 0;
+    padding: base(1.5) $baseline 0;
+    list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+
+    li {
+      width: 50%;
+      padding: 0 base(0.5);
+      margin-bottom: $baseline;
+    }
+  }
+
+  &__size-label {
+    color: var(--theme-elevation-400);
+  }
+
+  &__file-mutation {
+    display: flex;
+    margin-top: base(0.25);
+    gap: calc(var(--base) / 2);
+  }
+
+  &__edit {
+    cursor: pointer;
+    background-color: var(--theme-elevation-150);
+    border: none;
+    border-radius: $style-radius-s;
+    padding: base(0.25) base(0.5);
+
+    &:hover {
+      background-color: var(--theme-elevation-100);
+    }
+  }
+
+  @include large-break {
+    &__main-detail {
+      padding: $baseline;
+    }
+
+    &__sizes {
+      display: block;
+      padding: $baseline $baseline base(0.5);
+
+      li {
+        padding: 0;
+        width: 100%;
+      }
+    }
+  }
+
+  @include mid-break {
+    header {
+      flex-wrap: wrap;
+    }
+
+    .thumbnail {
+      width: 50%;
+      order: 1;
+    }
+
+    &__remove {
+      order: 2;
+      margin-left: auto;
+      margin-right: $baseline;
+    }
+
+    &__main-detail {
+      border-top: $style-stroke-width-m solid var(--theme-elevation-0);
+      order: 3;
+      width: 100%;
+    }
+  }
+}

package/dist/elements/FileDetails/types.d.ts

@@ -0,0 +1,13 @@
+import type { Data, FileSizes, SanitizedCollectionConfig } from 'payload/types';
+export type Props = {
+    canEdit?: boolean;
+    collectionSlug: string;
+    doc: Data & {
+        sizes?: FileSizes;
+    };
+    handleRemove?: () => void;
+    hasImageSizes?: boolean;
+    imageCacheTag?: string;
+    uploadConfig: SanitizedCollectionConfig['upload'];
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/elements/FileDetails/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/FileDetails/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAA;AAE/E,MAAM,MAAM,KAAK,GAAG;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,cAAc,EAAE,MAAM,CAAA;IACtB,GAAG,EAAE,IAAI,GAAG;QACV,KAAK,CAAC,EAAE,SAAS,CAAA;KAClB,CAAA;IACD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;IACzB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,YAAY,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;CAClD,CAAA"}

package/dist/elements/GenerateConfirmation/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { Props } from './types';
+import './index.scss';
+declare const GenerateConfirmation: React.FC<Props>;
+export default GenerateConfirmation;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/GenerateConfirmation/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAOpC,OAAO,cAAc,CAAA;AAIrB,QAAA,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAsDzC,CAAA;AAED,eAAe,oBAAoB,CAAA"}

package/dist/elements/GenerateConfirmation/index.scss

@@ -0,0 +1,17 @@
+@import '../../scss/styles.scss';
+
+.generate-confirmation {
+  @include blur-bg;
+  display: flex;
+  align-items: center;
+  height: 100%;
+
+  &__template {
+    position: relative;
+    z-index: 1;
+  }
+
+  .btn {
+    margin-right: $baseline;
+  }
+}

package/dist/elements/GenerateConfirmation/types.d.ts

@@ -0,0 +1,5 @@
+export type Props = {
+    highlightField: (Boolean: any) => void;
+    setKey: () => void;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/elements/GenerateConfirmation/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/GenerateConfirmation/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,KAAK,GAAG;IAClB,cAAc,EAAE,CAAC,OAAO,KAAA,KAAK,IAAI,CAAA;IACjC,MAAM,EAAE,MAAM,IAAI,CAAA;CACnB,CAAA"}

package/dist/elements/GetFilterOptions/index.d.ts

@@ -0,0 +1,12 @@
+import type { FilterOptions } from 'payload/types';
+import type { FilterOptionsResult } from '../../forms/fields/Relationship/types';
+type Args = {
+    filterOptions: FilterOptions;
+    filterOptionsResult: FilterOptionsResult;
+    path: string;
+    relationTo: string | string[];
+    setFilterOptionsResult: (optionFilters: FilterOptionsResult) => void;
+};
+export declare const GetFilterOptions: ({ filterOptions, filterOptionsResult, path, relationTo, setFilterOptionsResult, }: Args) => null;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/GetFilterOptions/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAKlD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uCAAuC,CAAA;AAShF,KAAK,IAAI,GAAG;IACV,aAAa,EAAE,aAAa,CAAA;IAC5B,mBAAmB,EAAE,mBAAmB,CAAA;IACxC,IAAI,EAAE,MAAM,CAAA;IACZ,UAAU,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IAC7B,sBAAsB,EAAE,CAAC,aAAa,EAAE,mBAAmB,KAAK,IAAI,CAAA;CACrE,CAAA;AAED,eAAO,MAAM,gBAAgB,sFAM1B,IAAI,KAAG,IAmCT,CAAA"}

package/dist/elements/Gutter/index.d.ts

@@ -0,0 +1,15 @@
+import type { Ref } from 'react';
+import React from 'react';
+import './index.scss';
+type Props = {
+    children: React.ReactNode;
+    className?: string;
+    left?: boolean;
+    negativeLeft?: boolean;
+    negativeRight?: boolean;
+    ref?: Ref<HTMLDivElement>;
+    right?: boolean;
+};
+export declare const Gutter: React.FC<Props>;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Gutter/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,OAAO,cAAc,CAAA;AAErB,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;IACzB,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AAID,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA6BjC,CAAA"}

package/dist/elements/Gutter/index.scss

@@ -0,0 +1,19 @@
+@import '../../scss/styles.scss';
+
+.gutter {
+  &--left {
+    padding-left: var(--gutter-h);
+  }
+
+  &--right {
+    padding-right: var(--gutter-h);
+  }
+
+  &--negative-left {
+    margin-left: calc(-1 * var(--gutter-h));
+  }
+
+  &--negative-right {
+    margin-right: calc(-1 * var(--gutter-h));
+  }
+}

package/dist/elements/Hamburger/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import './index.scss';
+export declare const Hamburger: React.FC<{
+    closeIcon?: 'collapse' | 'x';
+    isActive?: boolean;
+}>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Hamburger/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAC/B,SAAS,CAAC,EAAE,UAAU,GAAG,GAAG,CAAA;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAoCA,CAAA"}

package/dist/elements/Hamburger/index.scss

@@ -0,0 +1,120 @@
+@import '../../scss/styles';
+
+.hamburger {
+  padding: 0;
+  border: 0;
+  cursor: pointer;
+  background-color: transparent;
+  outline: none;
+  position: relative;
+  @include blur-bg;
+
+  --hamburger-padding: 8px;
+  --hamburger-size: 9px;
+  --hamburger-line-gap: 3px;
+
+  color: var(--theme-text);
+
+  &__wrapper {
+    border: 1px solid var(--theme-elevation-150);
+    padding: var(--hamburger-padding);
+    border-radius: 3px;
+    position: relative;
+    z-index: 1;
+    height: 100%;
+    width: 100%;
+
+    &:hover {
+      border: 1px solid var(--theme-elevation-500);
+      background-color: var(--theme-elevation-100);
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  &__icon {
+    position: relative;
+    z-index: 1;
+    height: var(--hamburger-size);
+    width: var(--hamburger-size);
+    display: flex;
+    .stroke {
+      stroke: currentColor;
+      stroke-width: 1px;
+    }
+
+    svg {
+      height: 100%;
+    }
+  }
+
+  &__close-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    height: 100%;
+    transform: translate3d(-50%, -50%, 0);
+  }
+
+  &__lines {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hamburger-line-gap);
+    width: 100%;
+    margin: auto;
+  }
+
+  &__line {
+    background-color: currentColor;
+    width: 100%;
+    height: 1px;
+  }
+
+  &__x-left {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate3d(-50%, -50%, 0) rotate(45deg);
+  }
+
+  &__x-right {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate3d(-50%, -50%, 0) rotate(-45deg);
+  }
+
+  &__collapse-chevron {
+    left: -1px;
+    position: relative;
+  }
+
+  &--active {
+    .hamburger {
+      &__x,
+      &__collapse,
+      &__collapse-label {
+        display: block;
+        opacity: 1;
+      }
+
+      &__icon {
+        display: none;
+        opacity: 0;
+      }
+    }
+  }
+
+  @include mid-break {
+    &__collapse-chevron {
+      top: 1px;
+      left: 0px;
+    }
+  }
+}

package/dist/elements/Header/index.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Header/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAY1D,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAgF7B,CAAA"}

package/dist/elements/Header/index.scss

@@ -0,0 +1,192 @@
+@import '../../scss/styles.scss';
+
+.app-header {
+  position: relative;
+  width: 100%;
+  height: var(--app-header-height);
+  z-index: var(--z-modal);
+
+  &__mobile-nav-toggler {
+    display: none;
+  }
+
+  // place the localizer outside the `overflow: hidden` container so that the popup is visible
+  // this means we need to use a placeholder div so that the space is retained in the DOM
+[dir='rtl'] &__localizer {
+    right: unset;
+    left:  base(4.5)
+  }
+  &__localizer {
+    position: absolute;
+    top: 50%;
+    right: base(4.5);
+    transform: translate3d(0, -50%, 0);
+  }
+
+  &__localizer-spacing {
+    visibility: hidden;
+  }
+
+  &__bg {
+    opacity: 0;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  }
+
+  &--show-bg {
+    opacity: 1;
+  }
+
+  &__content {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    padding: 0 var(--gutter-h);
+    position: relative;
+    flex-grow: 1;
+  }
+
+  &__wrapper {
+    display: flex;
+    gap: calc(var(--base) / 2);
+    align-items: center;
+    height: 100%;
+    flex-grow: 1;
+    justify-content: space-between;
+    overflow: hidden;
+  }
+
+  &__account {
+    position: relative;
+
+    &:focus:not(:focus-visible) {
+      opacity: 1;
+    }
+
+    // Use a pseudo element for the accessability so that it doesn't take up DOM space
+    // Also because the parent element has `overflow: hidden` which would clip an outline
+    &:focus-visible {
+      outline: none;
+
+      &::after {
+        content: '';
+        border: var(--accessibility-outline);
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        pointer-events: none;
+      }
+    }
+  }
+
+  &__controls-wrapper {
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+    overflow: hidden;
+  }
+
+  &__step-nav-wrapper {
+    flex: 1;
+    overflow: auto;
+    display: flex;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  &__actions-wrapper {
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    gap: calc(var(--base) / 2);
+    margin-right: var(--base);
+  }
+
+  &__gradient-placeholder {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: var(--base);
+    height: var(--base);
+    background: linear-gradient(to right, transparent, var(--theme-bg));
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--base) / 2);
+    flex-shrink: 0;
+    max-width: 600px;
+    overflow: auto;
+    white-space: nowrap;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  &__last-action {
+    margin-right: var(--base);
+  }
+
+  @include large-break {
+    &__actions {
+      max-width: 500px;
+    }
+  }
+
+  @include mid-break {
+    &__gradient-placeholder {
+      right: var(--base);
+    }
+
+    &__actions {
+      max-width: 300px;
+      margin-right: var(--base);
+    }
+  }
+
+  @include small-break {
+    &__localizer {
+      right: base(2);
+    }
+
+    &--nav-open {
+      .app-header__localizer {
+        display: none;
+      }
+    }
+
+    &__mobile-nav-toggler {
+      display: flex;
+      align-items: center;
+
+      &.nav-toggler--is-open {
+        opacity: 0.5;
+      }
+    }
+
+    &__step-header {
+      // TODO: overflow the step header instead of hide it
+      display: none;
+    }
+
+    &__gradient-placeholder {
+      right: 0;
+    }
+
+    &__actions {
+      max-width: 150px;
+      margin-right: 0;
+    }
+  }
+}

package/dist/elements/HydrateClientUser/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { Permissions, User } from 'payload/auth';
+export declare const HydrateClientUser: React.FC<{
+    permissions: Permissions;
+    user: User;
+}>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/HydrateClientUser/index.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAMrD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,WAAW,EAAE,WAAW,CAAC;IAAC,IAAI,EAAE,IAAI,CAAA;CAAE,CAYhF,CAAA"}

package/dist/elements/IDLabel/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import './index.scss';
+declare const IDLabel: React.FC<{
+    className?: string;
+    id: string;
+    prefix?: string;
+}>;
+export default IDLabel;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/IDLabel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAIrB,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAU1E,CAAA;AAED,eAAe,OAAO,CAAA"}

package/dist/elements/IDLabel/index.scss

@@ -0,0 +1,11 @@
+@import '../../scss/styles';
+
+.id-label {
+  font-size: base(0.75);
+  font-weight: normal;
+  color: var(--theme-elevation-400);
+  background: var(--theme-elevation-100);
+  padding: base(0.25) base(0.5);
+  border-radius: $style-radius-m;
+  display: inline-flex;
+}

package/dist/elements/ListControls/getTextFieldsToBeSearched.d.ts

@@ -0,0 +1,3 @@
+import type { Field, FieldAffectingData } from 'payload/types';
+export declare const getTextFieldsToBeSearched: (listSearchableFields: string[], fields: Field[]) => FieldAffectingData[];
+//# sourceMappingURL=getTextFieldsToBeSearched.d.ts.map

package/dist/elements/ListControls/getTextFieldsToBeSearched.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getTextFieldsToBeSearched.d.ts","sourceRoot":"","sources":["../../../src/elements/ListControls/getTextFieldsToBeSearched.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAK9D,eAAO,MAAM,yBAAyB,yBACd,MAAM,EAAE,UACtB,KAAK,EAAE,KACd,kBAAkB,EASpB,CAAA"}

package/dist/elements/ListControls/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { Props } from './types';
+import './index.scss';
+/**
+ * The ListControls component is used to render the controls (search, filter, where)
+ * for a collection's list view. You can find those directly above the table which lists
+ * the collection's documents.
+ */
+export declare const ListControls: React.FC<Props>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ListControls/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAGvC,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAgBpC,OAAO,cAAc,CAAA;AAIrB;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA8HxC,CAAA"}