@payloadcms/ui 3.0.0-canary.518fabe → 3.0.0-canary.51be7be

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","React","useCallback","useEffect","useState","AnimateHeightImport","AnimateHeight","default","getTranslation","Button","Pill","usePayloadAPI","ChevronIcon","useAuth","useConfig","useDocumentInfo","ListQueryProvider","useTranslation","ColumnSelector","useDocumentDrawer","hoistQueryParamsToAnd","RelationshipProvider","TableColumnsProvider","DrawerLink","RelationshipTableWrapper","baseClass","RelationshipTable","props","$","field","filterOptions","initialData","initialDataFromProps","initialDrawerState","Label","relationTo","config","t0","getEntityConfig","routes","t1","serverURL","api","id","docID","permissions","t2","docs","Array","isArray","reduce","acc","doc","setInitialData","i18n","t","limit","setLimit","sort","setSort","undefined","page","setPage","where","setWhere","search","setSearch","openColumnSelector","setOpenColumnSelector","t3","collectionSlug","collectionConfig","apiURL","slug","t4","Symbol","for","depth","t5","initialParams","t6","t7","data","setParams","t8","admin","t9","versions","listSearchableFields","useAsTitle","params","copyOfWhere","searchAsConditions","map","fieldName","like","length","searchFilter","or","drafts","draft","t10","DocumentDrawer","DocumentDrawerToggler","t11","closeDrawer","openDrawer","t12","args","foundDocIndex","findIndex","doc_0","newDocs","onDrawerSave","t13","args_0","onDrawerCreate","preferenceKey","hasCreatePermission","collections","create","permission","t14","_jsx","children","t15","t16","t17","t18","t19","_jsxs","className","label","labels","plural","onClick","singular","t20","defaultLimit","pagination","defaultSort","handlePageChange","handlePerPageChange","handleSearchChange","handleSortChange","handleWhereChange","modifySearchParams","beforeRows","accessor","active","cellProps","components","Cell","type","RenderedComponent","sortColumnProps","appearance","height","icon","direction","pillStyle","category","initialState","onSave"],"sources":["../../../src/elements/RelationshipTable/index.tsx"],"sourcesContent":["'use client'\nimport type {\n  ClientCollectionConfig,\n  ClientField,\n  JoinFieldClient,\n  PaginatedDocs,\n  Where,\n} from 'payload'\n\nimport React, { useCallback, useEffect, useState } from 'react'\nimport AnimateHeightImport from 'react-animate-height'\n\nconst AnimateHeight = AnimateHeightImport.default || AnimateHeightImport\n\nimport { getTranslation } from '@payloadcms/translations'\n\nimport type { DocumentDrawerProps } from '../DocumentDrawer/types.js'\n\nimport { Button } from '../../elements/Button/index.js'\nimport { Pill } from '../../elements/Pill/index.js'\nimport { usePayloadAPI } from '../../hooks/usePayloadAPI.js'\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { useAuth } from '../../providers/Auth/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { ListQueryProvider } from '../../providers/ListQuery/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { ColumnSelector } from '../ColumnSelector/index.js'\nimport { useDocumentDrawer } from '../DocumentDrawer/index.js'\nimport { hoistQueryParamsToAnd } from '../ListDrawer/DrawerContent.js'\nimport { RelationshipProvider } from '../Table/RelationshipProvider/index.js'\nimport { TableColumnsProvider } from '../TableColumns/index.js'\nimport { DrawerLink } from './cells/DrawerLink/index.js'\nimport './index.scss'\nimport { RelationshipTableWrapper } from './TableWrapper.js'\n\nconst baseClass = 'relationship-table'\n\ntype RelationshipTableComponentProps = {\n  readonly field: JoinFieldClient\n  readonly filterOptions?: boolean | Where\n  readonly initialData?: PaginatedDocs\n  readonly initialDrawerState?: DocumentDrawerProps['initialState']\n  readonly Label?: React.ReactNode\n  readonly relationTo: string\n}\n\nexport const RelationshipTable: React.FC<RelationshipTableComponentProps> = (props) => {\n  const {\n    field,\n    filterOptions,\n    initialData: initialDataFromProps,\n    initialDrawerState,\n    Label,\n    relationTo,\n  } = props\n\n  const {\n    config: {\n      routes: { api },\n      serverURL,\n    },\n    getEntityConfig,\n  } = useConfig()\n\n  const { id: docID } = useDocumentInfo()\n\n  const { permissions } = useAuth()\n\n  const [initialData, setInitialData] = useState<PaginatedDocs>(() => {\n    if (initialDataFromProps) {\n      return {\n        ...initialDataFromProps,\n        docs: Array.isArray(initialDataFromProps.docs)\n          ? initialDataFromProps.docs.reduce((acc, doc) => {\n              if (typeof doc === 'string') {\n                return acc\n              }\n              return [...acc, doc]\n            }, [])\n          : [],\n      }\n    }\n  })\n\n  const { i18n, t } = useTranslation()\n\n  const [limit, setLimit] = useState<number>()\n  const [sort, setSort] = useState<string | undefined>(undefined)\n  const [page, setPage] = useState<number>(1)\n  const [where, setWhere] = useState<null | Where>(null)\n  const [search, setSearch] = useState<string>('')\n  const [openColumnSelector, setOpenColumnSelector] = useState(false)\n\n  const [collectionConfig] = useState(\n    () => getEntityConfig({ collectionSlug: relationTo }) as ClientCollectionConfig,\n  )\n\n  const apiURL = `${serverURL}${api}/${collectionConfig.slug}`\n\n  const [{ data }, { setParams }] = usePayloadAPI(apiURL, {\n    initialData,\n    initialParams: {\n      depth: 0,\n    },\n  })\n\n  useEffect(() => {\n    const {\n      admin: { listSearchableFields, useAsTitle } = {} as ClientCollectionConfig['admin'],\n      versions,\n    } = collectionConfig\n\n    const params: {\n      cacheBust?: number\n      depth?: number\n      draft?: string\n      limit?: number\n      page?: number\n      search?: string\n      sort?: string\n      where?: unknown\n    } = {\n      depth: 0,\n    }\n\n    let copyOfWhere = { ...(where || {}) }\n\n    if (filterOptions && typeof filterOptions !== 'boolean') {\n      copyOfWhere = hoistQueryParamsToAnd(copyOfWhere, filterOptions)\n    }\n\n    if (search) {\n      const searchAsConditions = (listSearchableFields || [useAsTitle]).map((fieldName) => {\n        return {\n          [fieldName]: {\n            like: search,\n          },\n        }\n      }, [])\n\n      if (searchAsConditions.length > 0) {\n        const searchFilter: Where = {\n          or: [...searchAsConditions],\n        }\n\n        copyOfWhere = hoistQueryParamsToAnd(copyOfWhere, searchFilter)\n      }\n    }\n\n    if (limit) {\n      params.limit = limit\n    }\n    if (page) {\n      params.page = page\n    }\n    if (sort) {\n      params.sort = sort\n    }\n    if (copyOfWhere) {\n      params.where = copyOfWhere\n    }\n    if (versions?.drafts) {\n      params.draft = 'true'\n    }\n\n    setParams(params)\n  }, [page, sort, where, search, collectionConfig, filterOptions, initialData, limit, setParams])\n\n  const [DocumentDrawer, DocumentDrawerToggler, { closeDrawer, openDrawer }] = useDocumentDrawer({\n    collectionSlug: relationTo,\n  })\n\n  const onDrawerSave = useCallback<DocumentDrawerProps['onSave']>(\n    (args) => {\n      const foundDocIndex = data?.docs?.findIndex((doc) => doc.id === args.doc.id)\n\n      if (foundDocIndex !== -1) {\n        const newDocs = [...data.docs]\n        newDocs[foundDocIndex] = args.doc\n        setInitialData({\n          ...data,\n          docs: newDocs,\n        })\n      } else {\n        setInitialData({\n          ...data,\n          docs: [args.doc, ...data.docs],\n        })\n      }\n    },\n    [data],\n  )\n\n  const onDrawerCreate = useCallback<DocumentDrawerProps['onSave']>(\n    (args) => {\n      closeDrawer()\n      void onDrawerSave(args)\n    },\n    [closeDrawer, onDrawerSave],\n  )\n\n  const preferenceKey = `${relationTo}-list`\n\n  const hasCreatePermission = permissions?.collections?.[relationTo]?.create?.permission\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__header`}>\n        {Label}\n        <div className={`${baseClass}__actions`}>\n          {hasCreatePermission && (\n            <DocumentDrawerToggler>{i18n.t('fields:addNew')}</DocumentDrawerToggler>\n          )}\n          <Pill\n            aria-controls={`${baseClass}-columns`}\n            aria-expanded={openColumnSelector}\n            className={`${baseClass}__toggle-columns ${\n              openColumnSelector ? `${baseClass}__buttons-active` : ''\n            }`}\n            icon={<ChevronIcon direction={openColumnSelector ? 'up' : 'down'} />}\n            onClick={() => setOpenColumnSelector(!openColumnSelector)}\n            pillStyle=\"light\"\n          >\n            {t('general:columns')}\n          </Pill>\n        </div>\n      </div>\n      {data.docs && data.docs.length === 0 && (\n        <div className={`${baseClass}__no-results`}>\n          <p>\n            {i18n.t('general:noResults', {\n              label: getTranslation(collectionConfig?.labels?.plural, i18n),\n            })}\n          </p>\n          {hasCreatePermission && (\n            <Button onClick={openDrawer}>\n              {i18n.t('general:createNewLabel', {\n                label: getTranslation(collectionConfig?.labels?.singular, i18n),\n              })}\n            </Button>\n          )}\n        </div>\n      )}\n      {data.docs && data.docs.length > 0 && (\n        <RelationshipProvider>\n          <ListQueryProvider\n            data={data}\n            defaultLimit={limit || collectionConfig?.admin?.pagination?.defaultLimit}\n            defaultSort={sort}\n            handlePageChange={setPage}\n            handlePerPageChange={setLimit}\n            handleSearchChange={setSearch}\n            handleSortChange={setSort}\n            handleWhereChange={setWhere}\n            modifySearchParams={false}\n            preferenceKey={preferenceKey}\n          >\n            <TableColumnsProvider\n              beforeRows={[\n                {\n                  accessor: 'collection',\n                  active: true,\n                  cellProps: {\n                    field: {\n                      admin: {\n                        components: {\n                          Cell: {\n                            type: 'client',\n                            RenderedComponent: (\n                              <Pill>{getTranslation(collectionConfig.labels.singular, i18n)}</Pill>\n                            ),\n                          },\n                          Label: null,\n                        },\n                      },\n                    } as ClientField,\n                  },\n                  Heading: i18n.t('version:type'),\n                },\n              ]}\n              cellProps={[\n                {},\n                {\n                  field: {\n                    admin: {\n                      components: {\n                        Cell: {\n                          type: 'client',\n                          RenderedComponent: (\n                            <DrawerLink field={field} onDrawerSave={onDrawerSave} />\n                          ),\n                        },\n                      },\n                    },\n                  } as ClientField,\n                  link: false,\n                },\n              ]}\n              collectionSlug={relationTo}\n              preferenceKey={preferenceKey}\n              sortColumnProps={{\n                appearance: 'condensed',\n              }}\n            >\n              {/* @ts-expect-error TODO: get this CJS import to work, eslint keeps removing the type assertion */}\n              <AnimateHeight\n                className={`${baseClass}__columns`}\n                height={openColumnSelector ? 'auto' : 0}\n                id={`${baseClass}-columns`}\n              >\n                <div className={`${baseClass}__columns-inner`}>\n                  <ColumnSelector collectionSlug={collectionConfig.slug} />\n                </div>\n              </AnimateHeight>\n              <RelationshipTableWrapper collectionConfig={collectionConfig} />\n            </TableColumnsProvider>\n          </ListQueryProvider>\n        </RelationshipProvider>\n      )}\n      <DocumentDrawer\n        initialData={{\n          category: docID,\n        }}\n        initialState={initialDrawerState}\n        onSave={onDrawerCreate}\n      />\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/RelationshipTable/index.scss

@@ -0,0 +1,28 @@
+@layer payload-default {
+  .relationship-table {
+    position: relative;
+
+    &__header {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: var(--base);
+    }
+
+    &__actions {
+      display: flex;
+      align-items: center;
+      gap: var(--base);
+    }
+
+    &__columns-inner {
+      padding-bottom: var(--base);
+    }
+
+    .table {
+      th,
+      td:first-child {
+        min-width: 0;
+      }
+    }
+  }
+}

package/dist/elements/RenderTitle/index.scss

@@ -1,9 +1,11 @@
 @import '../../scss/styles.scss';
 
-.render-title {
-  display: inline-block;
-  &__id {
-    vertical-align: middle;
-    position: relative;
+@layer payload-default {
+  .render-title {
+    display: inline-block;
+    &__id {
+      vertical-align: middle;
+      position: relative;
+    }
   }
 }

package/dist/elements/SearchFilter/index.scss

@@ -1,36 +1,39 @@
 @import '../../scss/styles';
-[dir='rtl'] .search-filter {
-  svg {
-    right: base(0.5);
-    left: 0;
-  }
-  &__input {
-    padding-right: base(2);
-    padding-left: 0;
-  }
-}
-.search-filter {
-  position: relative;
 
-  svg {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    left: base(0.5);
+@layer payload-default {
+  [dir='rtl'] .search-filter {
+    svg {
+      right: base(0.5);
+      left: 0;
+    }
+    &__input {
+      padding-right: base(2);
+      padding-left: 0;
+    }
   }
+  .search-filter {
+    position: relative;
+
+    svg {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      left: base(0.5);
+    }
 
-  &__input {
-    @include formInput;
-    height: auto;
-    padding: 0;
-    box-shadow: none;
-    background-color: var(--theme-elevation-50);
-    border: none;
+    &__input {
+      @include formInput;
+      height: auto;
+      padding: 0;
+      box-shadow: none;
+      background-color: var(--theme-elevation-50);
+      border: none;
 
-    &:not(:disabled) {
-      &:hover,
-      &:focus {
-        box-shadow: none;
+      &:not(:disabled) {
+        &:hover,
+        &:focus {
+          box-shadow: none;
+        }
       }
     }
   }

package/dist/elements/SelectAll/index.scss

@@ -1,5 +1,7 @@
-.select-all {
-  &__checkbox {
-    display: block;
+@layer payload-default {
+  .select-all {
+    &__checkbox {
+      display: block;
+    }
   }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/SelectRow/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAW7B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/SelectRow/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAmB7B,CAAA"}

package/dist/elements/SelectRow/index.js

@@ -5,11 +5,16 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { useTableCell } from '../../elements/Table/TableCellProvider/index.js';
 import { CheckboxInput } from '../../fields/Checkbox/Input.js';
+import { useAuth } from '../../providers/Auth/index.js';
 import { useSelection } from '../../providers/Selection/index.js';
+import { Locked } from '../Locked/index.js';
 import './index.scss';
 const baseClass = 'select-row';
 export const SelectRow = () => {
-  const $ = _c(7);
+  const $ = _c(14);
+  const {
+    user
+  } = useAuth();
   const {
     selected,
     setSelection
@@ -17,36 +22,71 @@ export const SelectRow = () => {
   const {
     rowData
   } = useTableCell();
-  const t0 = selected?.[rowData?.id];
-  let t1;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = [baseClass, `${baseClass}__checkbox`];
-    $[0] = t1;
+  let t0;
+  if ($[0] !== rowData) {
+    t0 = rowData || {};
+    $[0] = rowData;
+    $[1] = t0;
   } else {
-    t1 = $[0];
+    t0 = $[1];
   }
-  let t2;
-  if ($[1] !== setSelection || $[2] !== rowData.id) {
-    t2 = () => setSelection(rowData.id);
-    $[1] = setSelection;
-    $[2] = rowData.id;
-    $[3] = t2;
+  const {
+    _isLocked,
+    _userEditing
+  } = t0;
+  const documentIsLocked = _isLocked && _userEditing;
+  if (documentIsLocked && _userEditing.id !== user?.id) {
+    let t1;
+    if ($[2] !== _userEditing) {
+      t1 = _jsx(Locked, {
+        user: _userEditing
+      });
+      $[2] = _userEditing;
+      $[3] = t1;
+    } else {
+      t1 = $[3];
+    }
+    return t1;
+  }
+  let t1;
+  if ($[4] !== selected || $[5] !== rowData.id) {
+    t1 = selected.get(rowData.id);
+    $[4] = selected;
+    $[5] = rowData.id;
+    $[6] = t1;
   } else {
-    t2 = $[3];
+    t1 = $[6];
   }
+  const t2 = Boolean(t1);
   let t3;
-  if ($[4] !== t0 || $[5] !== t2) {
-    t3 = _jsx(CheckboxInput, {
-      checked: t0,
-      className: t1.join(" "),
-      onToggle: t2
+  if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = [baseClass, `${baseClass}__checkbox`];
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  let t4;
+  if ($[8] !== setSelection || $[9] !== rowData.id) {
+    t4 = () => setSelection(rowData.id);
+    $[8] = setSelection;
+    $[9] = rowData.id;
+    $[10] = t4;
+  } else {
+    t4 = $[10];
+  }
+  let t5;
+  if ($[11] !== t2 || $[12] !== t4) {
+    t5 = _jsx(CheckboxInput, {
+      checked: t2,
+      className: t3.join(" "),
+      onToggle: t4
     });
-    $[4] = t0;
-    $[5] = t2;
-    $[6] = t3;
+    $[11] = t2;
+    $[12] = t4;
+    $[13] = t5;
   } else {
-    t3 = $[6];
+    t5 = $[13];
   }
-  return t3;
+  return t5;
 };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useTableCell","CheckboxInput","useSelection","baseClass","SelectRow","$","selected","setSelection","rowData","t0","id","t1","Symbol","for","t2","t3","_jsx","checked","className","join","onToggle"],"sources":["../../../src/elements/SelectRow/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useTableCell } from '../../elements/Table/TableCellProvider/index.js'\nimport { CheckboxInput } from '../../fields/Checkbox/Input.js'\nimport { useSelection } from '../../providers/Selection/index.js'\nimport './index.scss'\n\nconst baseClass = 'select-row'\n\nexport const SelectRow: React.FC = () => {\n  const { selected, setSelection } = useSelection()\n  const { rowData } = useTableCell()\n\n  return (\n    <CheckboxInput\n      checked={selected?.[rowData?.id]}\n      className={[baseClass, `${baseClass}__checkbox`].join(' ')}\n      onToggle={() => setSelection(rowData.id)}\n    />\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAElB,SAASC,YAAY,QAAQ;AAC7B,SAASC,aAAa,QAAQ;AAC9B,SAASC,YAAY,QAAQ;AAC7B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,SAAA,GAAsBA,CAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EACjC;IAAAQ,QAAA;IAAAC;EAAA,IAAmCL,YAAA;EACnC;IAAAM;EAAA,IAAoBR,YAAA;EAIP,MAAAS,EAAA,GAAAH,QAAA,GAAWE,OAAA,EAAAE,EAAA;EAAY,IAAAC,EAAA;EAAA,IAAAN,CAAA,QAAAO,MAAA,CAAAC,GAAA;IACrBF,EAAA,IAAAR,SAAA,EAAY,GAAAA,SAAA,YAAwB;IAACE,CAAA,MAAAM,EAAA;EAAA;IAAAA,EAAA,GAAAN,CAAA;EAAA;EAAA,IAAAS,EAAA;EAAA,IAAAT,CAAA,QAAAE,YAAA,IAAAF,CAAA,QAAAG,OAAA,CAAAE,EAAA;IACtCI,EAAA,GAAAA,CAAA,KAAMP,YAAA,CAAaC,OAAA,CAAAE,EAAU;IAAAL,CAAA,MAAAE,YAAA;IAAAF,CAAA,MAAAG,OAAA,CAAAE,EAAA;IAAAL,CAAA,MAAAS,EAAA;EAAA;IAAAA,EAAA,GAAAT,CAAA;EAAA;EAAA,IAAAU,EAAA;EAAA,IAAAV,CAAA,QAAAI,EAAA,IAAAJ,CAAA,QAAAS,EAAA;IAHzCC,EAAA,GAAAC,IAAA,CAAAf,aAAA;MAAAgB,OAAA,EACWR,EAAuB;MAAAS,SAAA,EACrBP,EAAqC,CAAAQ,IAAA,CAAM;MAAAC,QAAA,EAC5CN;IAA6B,C;;;;;;;SAHzCC,E;CAMJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useTableCell","CheckboxInput","useAuth","useSelection","Locked","baseClass","SelectRow","$","user","selected","setSelection","rowData","t0","_isLocked","_userEditing","documentIsLocked","id","t1","_jsx","get","t2","Boolean","t3","Symbol","for","t4","t5","checked","className","join","onToggle"],"sources":["../../../src/elements/SelectRow/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useTableCell } from '../../elements/Table/TableCellProvider/index.js'\nimport { CheckboxInput } from '../../fields/Checkbox/Input.js'\nimport { useAuth } from '../../providers/Auth/index.js'\nimport { useSelection } from '../../providers/Selection/index.js'\nimport { Locked } from '../Locked/index.js'\nimport './index.scss'\n\nconst baseClass = 'select-row'\n\nexport const SelectRow: React.FC = () => {\n  const { user } = useAuth()\n  const { selected, setSelection } = useSelection()\n  const { rowData } = useTableCell()\n  const { _isLocked, _userEditing } = rowData || {}\n\n  const documentIsLocked = _isLocked && _userEditing\n\n  if (documentIsLocked && _userEditing.id !== user?.id) {\n    return <Locked user={_userEditing} />\n  }\n\n  return (\n    <CheckboxInput\n      checked={Boolean(selected.get(rowData.id))}\n      className={[baseClass, `${baseClass}__checkbox`].join(' ')}\n      onToggle={() => setSelection(rowData.id)}\n    />\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAElB,SAASC,YAAY,QAAQ;AAC7B,SAASC,aAAa,QAAQ;AAC9B,SAASC,OAAO,QAAQ;AACxB,SAASC,YAAY,QAAQ;AAC7B,SAASC,MAAM,QAAQ;AACvB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,SAAA,GAAsBA,CAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EACjC;IAAAU;EAAA,IAAiBN,OAAA;EACjB;IAAAO,QAAA;IAAAC;EAAA,IAAmCP,YAAA;EACnC;IAAAQ;EAAA,IAAoBX,YAAA;EAAA,IAAAY,EAAA;EAAA,IAAAL,CAAA,QAAAI,OAAA;IACgBC,EAAA,GAAAD,OAAA,MAAY;IAAAJ,CAAA,MAAAI,OAAA;IAAAJ,CAAA,MAAAK,EAAA;EAAA;IAAAA,EAAA,GAAAL,CAAA;EAAA;EAAhD;IAAAM,SAAA;IAAAC;EAAA,IAAoCF,EAAY;EAEhD,MAAAG,gBAAA,GAAyBF,SAAA,IAAaC,YAAA;EAAA,IAElCC,gBAAA,IAAoBD,YAAA,CAAAE,EAAA,KAAoBR,IAAA,EAAAQ,EAAM;IAAA,IAAAC,EAAA;IAAA,IAAAV,CAAA,QAAAO,YAAA;MACzCG,EAAA,GAAAC,IAAA,CAAAd,MAAA;QAAAI,IAAA,EAAcM;MAAA,C;;;;;;WAAdG,E;;;;IAKYA,EAAA,GAAAR,QAAA,CAAAU,GAAA,CAAaR,OAAA,CAAAK,EAAU;IAAAT,CAAA,MAAAE,QAAA;IAAAF,CAAA,MAAAI,OAAA,CAAAK,EAAA;IAAAT,CAAA,MAAAU,EAAA;EAAA;IAAAA,EAAA,GAAAV,CAAA;EAAA;EAA/B,MAAAa,EAAA,GAAAC,OAAA,CAAQJ,EAAuB;EAAA,IAAAK,EAAA;EAAA,IAAAf,CAAA,QAAAgB,MAAA,CAAAC,GAAA;IAC7BF,EAAA,IAAAjB,SAAA,EAAY,GAAAA,SAAA,YAAwB;IAACE,CAAA,MAAAe,EAAA;EAAA;IAAAA,EAAA,GAAAf,CAAA;EAAA;EAAA,IAAAkB,EAAA;EAAA,IAAAlB,CAAA,QAAAG,YAAA,IAAAH,CAAA,QAAAI,OAAA,CAAAK,EAAA;IACtCS,EAAA,GAAAA,CAAA,KAAMf,YAAA,CAAaC,OAAA,CAAAK,EAAU;IAAAT,CAAA,MAAAG,YAAA;IAAAH,CAAA,MAAAI,OAAA,CAAAK,EAAA;IAAAT,CAAA,OAAAkB,EAAA;EAAA;IAAAA,EAAA,GAAAlB,CAAA;EAAA;EAAA,IAAAmB,EAAA;EAAA,IAAAnB,CAAA,SAAAa,EAAA,IAAAb,CAAA,SAAAkB,EAAA;IAHzCC,EAAA,GAAAR,IAAA,CAAAjB,aAAA;MAAA0B,OAAA,EACWP,EAA+B;MAAAQ,SAAA,EAC7BN,EAAqC,CAAAO,IAAA,CAAM;MAAAC,QAAA,EAC5CL;IAA6B,C;;;;;;;SAHzCC,E;CAMJ","ignoreList":[]}

package/dist/elements/SelectRow/index.scss

@@ -1,6 +1,8 @@
-.select-row {
-  &__checkbox {
-    display: block;
-    width: min-content;
+@layer payload-default {
+  .select-row {
+    &__checkbox {
+      display: block;
+      width: min-content;
+    }
   }
 }

package/dist/elements/ShimmerEffect/index.scss

@@ -1,29 +1,31 @@
-.shimmer-effect {
-  position: relative;
-  overflow: hidden;
-  background-color: var(--theme-elevation-50);
+@layer payload-default {
+  .shimmer-effect {
+    position: relative;
+    overflow: hidden;
+    background-color: var(--theme-elevation-50);
 
-  &__shine {
-    position: absolute;
-    scale: 1.5;
-    width: 100%;
-    height: 100%;
-    transform: translateX(-100%);
-    animation: shimmer 1.75s infinite;
-    opacity: 0.75;
-    background: linear-gradient(
-      100deg,
-      var(--theme-elevation-50) 0%,
-      var(--theme-elevation-50) 15%,
-      var(--theme-elevation-150) 50%,
-      var(--theme-elevation-50) 85%,
-      var(--theme-elevation-50) 100%
-    );
+    &__shine {
+      position: absolute;
+      scale: 1.5;
+      width: 100%;
+      height: 100%;
+      transform: translateX(-100%);
+      animation: shimmer 1.75s infinite;
+      opacity: 0.75;
+      background: linear-gradient(
+        100deg,
+        var(--theme-elevation-50) 0%,
+        var(--theme-elevation-50) 15%,
+        var(--theme-elevation-150) 50%,
+        var(--theme-elevation-50) 85%,
+        var(--theme-elevation-50) 100%
+      );
+    }
   }
-}
 
-@keyframes shimmer {
-  100% {
-    transform: translate3d(100%, 0, 0);
+  @keyframes shimmer {
+    100% {
+      transform: translate3d(100%, 0, 0);
+    }
   }
 }

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

@@ -2,6 +2,7 @@ import type { FieldBase } from 'payload';
 import React from 'react';
 import './index.scss';
 export type SortColumnProps = {
+    readonly appearance?: 'condensed' | 'default';
     readonly disable?: boolean;
     readonly Label: React.ReactNode;
     readonly label?: FieldBase['label'];

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/SortColumn/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAExC,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,cAAc,CAAA;AAErB,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAA;IAC1B,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IAC/B,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAA;IACnC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;CACtB,CAAA;AAID,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAmDhD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/SortColumn/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAExC,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,cAAc,CAAA;AAErB,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,CAAC,UAAU,CAAC,EAAE,WAAW,GAAG,SAAS,CAAA;IAC7C,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAA;IAC1B,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IAC/B,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAA;IACnC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;CACtB,CAAA;AAID,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAuDhD,CAAA"}

package/dist/elements/SortColumn/index.js

@@ -9,9 +9,10 @@ import { useTranslation } from '../../providers/Translation/index.js';
 import './index.scss';
 const baseClass = 'sort-column';
 export const SortColumn = props => {
-  const $ = _c(16);
+  const $ = _c(19);
   const {
     name,
+    appearance,
     disable: t0,
     Label,
     label
@@ -53,10 +54,20 @@ export const SortColumn = props => {
   } else {
     descClasses = $[5];
   }
-  let t1;
-  if ($[6] !== Label || $[7] !== disable || $[8] !== t || $[9] !== label || $[10] !== ascClasses || $[11] !== handleSortChange || $[12] !== asc || $[13] !== descClasses || $[14] !== desc) {
-    t1 = _jsxs("div", {
-      className: baseClass,
+  const t1 = appearance && `${baseClass}--appearance-${appearance}`;
+  let t2;
+  if ($[6] !== t1) {
+    t2 = [baseClass, t1].filter(Boolean);
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  const t3 = t2.join(" ");
+  let t4;
+  if ($[8] !== Label || $[9] !== disable || $[10] !== t || $[11] !== label || $[12] !== ascClasses || $[13] !== handleSortChange || $[14] !== asc || $[15] !== descClasses || $[16] !== desc || $[17] !== t3) {
+    t4 = _jsxs("div", {
+      className: t3,
       children: [_jsx("span", {
         className: `${baseClass}__label`,
         children: Label
@@ -85,19 +96,20 @@ export const SortColumn = props => {
         })]
       })]
     });
-    $[6] = Label;
-    $[7] = disable;
-    $[8] = t;
-    $[9] = label;
-    $[10] = ascClasses;
-    $[11] = handleSortChange;
-    $[12] = asc;
-    $[13] = descClasses;
-    $[14] = desc;
-    $[15] = t1;
+    $[8] = Label;
+    $[9] = disable;
+    $[10] = t;
+    $[11] = label;
+    $[12] = ascClasses;
+    $[13] = handleSortChange;
+    $[14] = asc;
+    $[15] = descClasses;
+    $[16] = desc;
+    $[17] = t3;
+    $[18] = t4;
   } else {
-    t1 = $[15];
+    t4 = $[18];
   }
-  return t1;
+  return t4;
 };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","ChevronIcon","useListQuery","useTranslation","baseClass","SortColumn","props","$","name","disable","t0","Label","label","undefined","handleSortChange","params","t","sort","desc","asc","ascClasses","push","descClasses","t1","_jsxs","className","children","_jsx","direction","filter","Boolean","join","onClick","type"],"sources":["../../../src/elements/SortColumn/index.tsx"],"sourcesContent":["'use client'\nimport type { FieldBase } from 'payload'\n\nimport React from 'react'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\n\nexport type SortColumnProps = {\n  readonly disable?: boolean\n  readonly Label: React.ReactNode\n  readonly label?: FieldBase['label']\n  readonly name: string\n}\n\nconst baseClass = 'sort-column'\n\nexport const SortColumn: React.FC<SortColumnProps> = (props) => {\n  const { name, disable = false, Label, label } = props\n  const { handleSortChange, params } = useListQuery()\n  const { t } = useTranslation()\n\n  const { sort } = params\n\n  const desc = `-${name}`\n  const asc = name\n\n  const ascClasses = [`${baseClass}__asc`]\n  if (sort === asc) {\n    ascClasses.push(`${baseClass}--active`)\n  }\n\n  const descClasses = [`${baseClass}__desc`]\n  if (sort === desc) {\n    descClasses.push(`${baseClass}--active`)\n  }\n\n  return (\n    <div className={baseClass}>\n      <span className={`${baseClass}__label`}>{Label}</span>\n      {!disable && (\n        <div className={`${baseClass}__buttons`}>\n          <button\n            aria-label={t('general:sortByLabelDirection', {\n              direction: t('general:ascending'),\n              label,\n            })}\n            className={[...ascClasses, `${baseClass}__button`].filter(Boolean).join(' ')}\n            onClick={() => void handleSortChange(asc)}\n            type=\"button\"\n          >\n            <ChevronIcon direction=\"up\" />\n          </button>\n          <button\n            aria-label={t('general:sortByLabelDirection', {\n              direction: t('general:descending'),\n              label,\n            })}\n            className={[...descClasses, `${baseClass}__button`].filter(Boolean).join(' ')}\n            onClick={() => void handleSortChange(desc)}\n            type=\"button\"\n          >\n            <ChevronIcon />\n          </button>\n        </div>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","ChevronIcon","useListQuery","useTranslation","baseClass","SortColumn","props","$","name","appearance","disable","t0","Label","label","undefined","handleSortChange","params","t","sort","desc","asc","ascClasses","push","descClasses","t1","t2","filter","Boolean","t3","join","t4","_jsxs","className","children","_jsx","direction","onClick","type"],"sources":["../../../src/elements/SortColumn/index.tsx"],"sourcesContent":["'use client'\nimport type { FieldBase } from 'payload'\n\nimport React from 'react'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\n\nexport type SortColumnProps = {\n  readonly appearance?: 'condensed' | 'default'\n  readonly disable?: boolean\n  readonly Label: React.ReactNode\n  readonly label?: FieldBase['label']\n  readonly name: string\n}\n\nconst baseClass = 'sort-column'\n\nexport const SortColumn: React.FC<SortColumnProps> = (props) => {\n  const { name, appearance, disable = false, Label, label } = props\n  const { handleSortChange, params } = useListQuery()\n  const { t } = useTranslation()\n\n  const { sort } = params\n\n  const desc = `-${name}`\n  const asc = name\n\n  const ascClasses = [`${baseClass}__asc`]\n  if (sort === asc) {\n    ascClasses.push(`${baseClass}--active`)\n  }\n\n  const descClasses = [`${baseClass}__desc`]\n  if (sort === desc) {\n    descClasses.push(`${baseClass}--active`)\n  }\n\n  return (\n    <div\n      className={[baseClass, appearance && `${baseClass}--appearance-${appearance}`]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <span className={`${baseClass}__label`}>{Label}</span>\n      {!disable && (\n        <div className={`${baseClass}__buttons`}>\n          <button\n            aria-label={t('general:sortByLabelDirection', {\n              direction: t('general:ascending'),\n              label,\n            })}\n            className={[...ascClasses, `${baseClass}__button`].filter(Boolean).join(' ')}\n            onClick={() => void handleSortChange(asc)}\n            type=\"button\"\n          >\n            <ChevronIcon direction=\"up\" />\n          </button>\n          <button\n            aria-label={t('general:sortByLabelDirection', {\n              direction: t('general:descending'),\n              label,\n            })}\n            className={[...descClasses, `${baseClass}__button`].filter(Boolean).join(' ')}\n            onClick={() => void handleSortChange(desc)}\n            type=\"button\"\n          >\n            <ChevronIcon />\n          </button>\n        </div>\n      )}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,OAAOC,KAAA,MAAW;AAElB,SAASC,WAAW,QAAQ;AAC5B,SAASC,YAAY,QAAQ;AAC7B,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAUP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,UAAA,GAAwCC,KAAA;EAAA,MAAAC,CAAA,GAAAR,EAAA;EACnD;IAAAS,IAAA;IAAAC,UAAA;IAAAC,OAAA,EAAAC,EAAA;IAAAC,KAAA;IAAAC;EAAA,IAA4DP,KAAA;EAAlC,MAAAI,OAAA,GAAAC,EAAe,KAAAG,SAAA,WAAfH,EAAe;EACzC;IAAAI,gBAAA;IAAAC;EAAA,IAAqCd,YAAA;EACrC;IAAAe;EAAA,IAAcd,cAAA;EAEd;IAAAe;EAAA,IAAiBF,MAAA;EAEjB,MAAAG,IAAA,GAAa,IAAIX,IAAA,EAAM;EACvB,MAAAY,GAAA,GAAYZ,IAAA;EAAA,IAAAa,UAAA;EAAA,IAAAd,CAAA,QAAAW,IAAA,IAAAX,CAAA,QAAAa,GAAA;IAEZC,UAAA,IAAoB,GAAAjB,SAAA,OAAmB;IAAC,IACpCc,IAAA,KAASE,GAAA;MACXC,UAAA,CAAAC,IAAA,CAAgB,GAAAlB,SAAA,UAAsB;IAAA;IAAAG,CAAA,MAAAW,IAAA;IAAAX,CAAA,MAAAa,GAAA;IAAAb,CAAA,MAAAc,UAAA;EAAA;IAAAA,UAAA,GAAAd,CAAA;EAAA;EAAA,IAAAgB,WAAA;EAAA,IAAAhB,CAAA,QAAAW,IAAA,IAAAX,CAAA,QAAAY,IAAA;IAGxCI,WAAA,IAAqB,GAAAnB,SAAA,QAAoB;IAAC,IACtCc,IAAA,KAASC,IAAA;MACXI,WAAA,CAAAD,IAAA,CAAiB,GAAAlB,SAAA,UAAsB;IAAA;IAAAG,CAAA,MAAAW,IAAA;IAAAX,CAAA,MAAAY,IAAA;IAAAZ,CAAA,MAAAgB,WAAA;EAAA;IAAAA,WAAA,GAAAhB,CAAA;EAAA;EAKd,MAAAiB,EAAA,GAAAf,UAAA,IAAc,GAAAL,SAAA,gBAA4BK,UAAA,EAAY;EAAA,IAAAgB,EAAA;EAAA,IAAAlB,CAAA,QAAAiB,EAAA;IAAlEC,EAAA,IAAArB,SAAA,EAAYoB,EAAsD,EAAAE,MAAA,CAAAC,OACnE;IAAApB,CAAA,MAAAiB,EAAA;IAAAjB,CAAA,MAAAkB,EAAA;EAAA;IAAAA,EAAA,GAAAlB,CAAA;EAAA;EADC,MAAAqB,EAAA,GAAAH,EACD,CAAAI,IAAA,CACF;EAAA,IAAAC,EAAA;EAAA,IAAAvB,CAAA,QAAAK,KAAA,IAAAL,CAAA,QAAAG,OAAA,IAAAH,CAAA,SAAAU,CAAA,IAAAV,CAAA,SAAAM,KAAA,IAAAN,CAAA,SAAAc,UAAA,IAAAd,CAAA,SAAAQ,gBAAA,IAAAR,CAAA,SAAAa,GAAA,IAAAb,CAAA,SAAAgB,WAAA,IAAAhB,CAAA,SAAAY,IAAA,IAAAZ,CAAA,SAAAqB,EAAA;IAHVE,EAAA,GAAAC,KAAA,CAAC;MAAAC,SAAA,EACYJ,EAEH;MAAAK,QAAA,GAERC,IAAA,CAAC;QAAAF,SAAA,EAAgB,GAAA5B,SAAA,SAAqB;QAAA6B,QAAA,EAAGrB;MAAA,C,GACxC,CAACF,OAAA,IACAqB,KAAA,CAAC;QAAAC,SAAA,EAAe,GAAA5B,SAAA,WAAuB;QAAA6B,QAAA,GACrCC,IAAA,CAAC;UAAA,cACajB,CAAA,CAAE;YAAAkB,SAAA,EACDlB,CAAA,CAAE;YAAAJ;UAAA,CAEf;UAAAmB,SAAA,EACW,IAAIX,UAAA,EAAY,GAAAjB,SAAA,UAAsB,EAAAsB,MAAA,CAAAC,OAAS,EAAAE,IAAA,CAAc;UAAAO,OAAA,EAAAA,CAAA,UACpDrB,gBAAA,CAAiBK,GAAA;UAAAiB,IAAA,EAChC;UAAAJ,QAAA,EAELC,IAAA,CAAAjC,WAAA;YAAAkC,SAAA,EAAuB;UAAA,C;YAEzBD,IAAA,CAAC;UAAA,cACajB,CAAA,CAAE;YAAAkB,SAAA,EACDlB,CAAA,CAAE;YAAAJ;UAAA,CAEf;UAAAmB,SAAA,EACW,IAAIT,WAAA,EAAa,GAAAnB,SAAA,UAAsB,EAAAsB,MAAA,CAAAC,OAAS,EAAAE,IAAA,CAAc;UAAAO,OAAA,EAAAA,CAAA,UACrDrB,gBAAA,CAAiBI,IAAA;UAAAkB,IAAA,EAChC;UAAAJ,QAAA,EAELC,IAAA,CAAAjC,WAAA,IAAC;QAAA,C;;;;;;;;;;;;;;;;;SA5BT6B,E;CAkCJ","ignoreList":[]}

package/dist/elements/SortColumn/index.scss

@@ -1,57 +1,68 @@
 @import '../../scss/styles.scss';
 
-.sort-column {
-  display: flex;
-  gap: calc(var(--base) / 4);
-  align-items: center;
-
-  &__label {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
+@layer payload-default {
+  .sort-column {
+    display: flex;
+    gap: calc(var(--base) / 2);
+    align-items: center;
 
-  &__label,
-  .btn {
-    vertical-align: middle;
-    display: inline-block;
-  }
+    &__label {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
 
-  &__label {
-    cursor: default;
-  }
+    &__label,
+    .btn {
+      vertical-align: middle;
+      display: inline-block;
+    }
 
-  &__buttons {
-    display: flex;
-    align-items: center;
-  }
+    &__label {
+      cursor: default;
+    }
 
-  &__button {
-    margin: 0;
-    opacity: 0.3;
-    padding: calc(var(--base) / 4);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    background: transparent;
-    border: none;
-    outline: none;
-    cursor: pointer;
-
-    &.sort-column--active {
-      opacity: 1;
-      visibility: visible;
+    &__buttons {
+      display: flex;
+      align-items: center;
+      gap: calc(var(--base) / 4);
+    }
+
+    &__button {
+      margin: 0;
+      opacity: 0.3;
+      padding: calc(var(--base) / 4);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      background: transparent;
+      border: none;
+      outline: none;
+      cursor: pointer;
+
+      &.sort-column--active {
+        opacity: 1;
+        visibility: visible;
+      }
+
+      &:hover {
+        opacity: 0.7;
+      }
     }
 
     &:hover {
-      opacity: 0.7;
+      .btn {
+        opacity: 0.4;
+        visibility: visible;
+      }
     }
-  }
 
-  &:hover {
-    .btn {
-      opacity: 0.4;
-      visibility: visible;
+    &--appearance-condensed {
+      gap: calc(var(--base) / 4);
+
+      .sort-column__buttons {
+        gap: 0;
+      }
     }
   }
 }