@payloadcms/ui 3.84.1 → 4.0.0-internal.38b7f1d

package/dist/views/HierarchyList/HierarchyTable/SlotTable.scss

@@ -0,0 +1,214 @@
+@import '../../../scss/styles.scss';
+
+@layer payload-default {
+  .slot-table {
+    overflow: auto;
+    max-width: 100%;
+
+    table {
+      min-width: 100%;
+      border-collapse: separate;
+      border-spacing: 0;
+    }
+
+    thead {
+      color: var(--theme-elevation-400);
+    }
+
+    tbody {
+      color: var(--theme-elevation-550);
+    }
+
+    &__th {
+      font-weight: normal;
+      text-align: left;
+      vertical-align: middle;
+      padding: calc(var(--base) * 0.6);
+      padding-block-start: 0;
+      min-width: 150px;
+      position: relative;
+
+      [dir='rtl'] & {
+        text-align: right;
+      }
+
+      &:first-child {
+        padding-inline-start: calc(var(--base) * 0.8);
+      }
+
+      &:last-child {
+        padding-inline-end: calc(var(--base) * 0.8);
+      }
+
+      &--drag {
+        width: calc(var(--base) * 2);
+        min-width: calc(var(--base) * 2);
+        padding: 0;
+      }
+
+      &--checkbox {
+        width: calc(var(--base) * 2);
+        min-width: calc(var(--base) * 2);
+        padding: calc(var(--base) * 0.6);
+        text-align: center;
+      }
+    }
+
+    &__tr {
+      position: relative;
+      line-height: 1;
+
+      // Zebra striping
+      &:nth-child(odd) {
+        background: var(--theme-elevation-50);
+
+        td:first-child {
+          border-top-left-radius: var(--style-radius-s);
+          border-bottom-left-radius: var(--style-radius-s);
+        }
+
+        td:last-child {
+          border-top-right-radius: var(--style-radius-s);
+          border-bottom-right-radius: var(--style-radius-s);
+        }
+      }
+
+      &--clickable {
+        cursor: pointer;
+
+        &:hover {
+          background: var(--theme-elevation-100);
+        }
+
+        &:focus {
+          outline: none;
+          background: var(--theme-elevation-100);
+        }
+      }
+
+      &--selected {
+        background: var(--theme-elevation-100) !important;
+      }
+    }
+
+    &__td {
+      vertical-align: middle;
+      padding: calc(var(--base) * 0.6);
+      min-width: 150px;
+      position: relative;
+
+      &:first-child {
+        padding-inline-start: calc(var(--base) * 0.8);
+      }
+
+      &:last-child {
+        padding-inline-end: calc(var(--base) * 0.8);
+      }
+
+      &--drag {
+        width: calc(var(--base) * 2);
+        min-width: calc(var(--base) * 2);
+        padding: 0;
+        text-align: center;
+      }
+
+      &--checkbox {
+        width: calc(var(--base) * 2);
+        min-width: calc(var(--base) * 2);
+        padding: calc(var(--base) * 0.6);
+        text-align: center;
+      }
+    }
+
+    &__drag-handle {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: grab;
+      color: var(--theme-elevation-400);
+      padding: calc(var(--base) * 0.25);
+
+      &:hover {
+        color: var(--theme-elevation-550);
+      }
+
+      svg {
+        width: 16px;
+        height: 16px;
+      }
+    }
+
+    &__drag-header {
+      display: block;
+      width: 16px;
+      height: 16px;
+    }
+
+    &__checkbox {
+      // Uses CheckboxInput component - no additional styles needed
+    }
+
+    // Condensed appearance
+    &--appearance-condensed {
+      border-radius: var(--style-radius-s);
+
+      table {
+        border-collapse: collapse;
+      }
+
+      thead {
+        background: var(--theme-elevation-50);
+
+        th:first-child {
+          border-top-left-radius: var(--style-radius-s);
+        }
+
+        th:last-child {
+          border-top-right-radius: var(--style-radius-s);
+        }
+      }
+
+      tbody tr {
+        &:nth-child(odd) {
+          background: transparent;
+
+          td:first-child,
+          td:last-child {
+            border-radius: 0;
+          }
+        }
+
+        &:last-child {
+          td:first-child {
+            border-bottom-left-radius: var(--style-radius-s);
+          }
+
+          td:last-child {
+            border-bottom-right-radius: var(--style-radius-s);
+          }
+        }
+      }
+
+      .slot-table__th,
+      .slot-table__td {
+        padding: calc(var(--base) * 0.3);
+        border: 0.5px solid var(--theme-elevation-100);
+
+        &:first-child {
+          padding-inline-start: calc(var(--base) * 0.6);
+        }
+
+        &:last-child {
+          padding-inline-end: calc(var(--base) * 0.6);
+        }
+      }
+    }
+
+    @include mid-break {
+      &__th,
+      &__td {
+        max-width: 70vw;
+      }
+    }
+  }
+}

package/dist/views/HierarchyList/HierarchyTable/index.d.ts

@@ -0,0 +1,27 @@
+import type { PaginatedDocs, Where } from 'payload';
+import React from 'react';
+import type { CollectionOption } from '../../../elements/CreateDocumentButton/index.js';
+import type { HierarchyDocument } from '../../../elements/Hierarchy/Tree/types.js';
+import type { RelatedGroup } from './types.js';
+import './index.scss';
+export type HierarchyTableProps = {
+    /** Base filter applied to hierarchy collection queries (e.g., tenant filter) */
+    baseFilter?: Where;
+    childrenData?: PaginatedDocs<HierarchyDocument>;
+    /** Collections available for creation (for empty state) */
+    collections?: CollectionOption[];
+    collectionSlug: string;
+    hasCreatePermission?: boolean;
+    /** Resolved hierarchy icon component */
+    HierarchyIcon?: React.ReactNode;
+    hierarchyLabel: string;
+    parentFieldName?: string;
+    parentId: null | number | string;
+    /** Base filters for related collections (keyed by collection slug) */
+    relatedBaseFilters?: Record<string, Where>;
+    relatedGroups: RelatedGroup[];
+    search?: string;
+    useAsTitle: string;
+};
+export declare function HierarchyTable({ baseFilter, childrenData, collections, collectionSlug, hasCreatePermission, HierarchyIcon, hierarchyLabel, parentFieldName, parentId, relatedBaseFilters, relatedGroups, search, useAsTitle, }: HierarchyTableProps): React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/views/HierarchyList/HierarchyTable/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/HierarchyList/HierarchyTable/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AASnD,OAAO,KAAyC,MAAM,OAAO,CAAA;AAE7D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iDAAiD,CAAA;AACvF,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2CAA2C,CAAA;AAElF,OAAO,KAAK,EAAE,YAAY,EAAY,MAAM,YAAY,CAAA;AAcxD,OAAO,cAAc,CAAA;AAcrB,MAAM,MAAM,mBAAmB,GAAG;IAChC,gFAAgF;IAChF,UAAU,CAAC,EAAE,KAAK,CAAA;IAClB,YAAY,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAA;IAC/C,2DAA2D;IAC3D,WAAW,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAChC,cAAc,EAAE,MAAM,CAAA;IACtB,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,wCAAwC;IACxC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC/B,cAAc,EAAE,MAAM,CAAA;IACtB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,QAAQ,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAA;IAChC,sEAAsE;IACtE,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;IAC1C,aAAa,EAAE,YAAY,EAAE,CAAA;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,UAAU,EAAE,MAAM,CAAA;CACnB,CAAA;AAeD,wBAAgB,cAAc,CAAC,EAC7B,UAAU,EACV,YAAY,EACZ,WAAW,EACX,cAAc,EACd,mBAAmB,EACnB,aAAa,EACb,cAAc,EACd,eAAe,EACf,QAAQ,EACR,kBAAkB,EAClB,aAAa,EACb,MAAM,EACN,UAAU,GACX,EAAE,mBAAmB,qBA0ZrB"}

package/dist/views/HierarchyList/HierarchyTable/index.js

@@ -0,0 +1,388 @@
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { getTranslation } from '@payloadcms/translations';
+import { combineWhereConstraints, DEFAULT_HIERARCHY_LIST_LIMIT, formatAdminURL } from 'payload/shared';
+import * as qs from 'qs-esm';
+import React, { useCallback, useMemo, useState } from 'react';
+import { CreateDocumentButton } from '../../../elements/CreateDocumentButton/index.js';
+import { LoadMoreRow } from '../../../elements/LoadMoreRow/index.js';
+import { NoListResults } from '../../../elements/NoListResults/index.js';
+import { useConfig } from '../../../providers/Config/index.js';
+import { useDocumentSelection } from '../../../providers/DocumentSelection/index.js';
+import { useRouteCache } from '../../../providers/RouteCache/index.js';
+import { useTranslation } from '../../../providers/Translation/index.js';
+import { ChildNameCell } from './ChildNameCell.js';
+import { DateCell } from './DateCell.js';
+import { RelatedNameCell } from './RelatedNameCell.js';
+import { SlotTable } from './SlotTable.js';
+import { baseClass } from './types.js';
+import './index.scss';
+// Top-level cell components to avoid nested component eslint errors
+const NameCell = props => props.row._hasChildren !== undefined ? /*#__PURE__*/_jsx(ChildNameCell, {
+  ...props
+}) : /*#__PURE__*/_jsx(RelatedNameCell, {
+  ...props
+});
+const CollectionCell = ({
+  row
+}) => /*#__PURE__*/_jsx("span", {
+  children: row._collectionLabel
+});
+export function HierarchyTable({
+  baseFilter,
+  childrenData,
+  collections,
+  collectionSlug,
+  hasCreatePermission,
+  HierarchyIcon,
+  hierarchyLabel,
+  parentFieldName,
+  parentId,
+  relatedBaseFilters,
+  relatedGroups,
+  search,
+  useAsTitle
+}) {
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  const {
+    clearRouteCache
+  } = useRouteCache();
+  const {
+    config: {
+      routes: {
+        api: apiRoute
+      },
+      serverURL
+    },
+    getEntityConfig
+  } = useConfig();
+  // Children pagination state
+  const [childDocs, setChildDocs] = useState(childrenData?.docs || []);
+  const [childHasNext, setChildHasNext] = useState(childrenData?.hasNextPage || false);
+  const [childPage, setChildPage] = useState(childrenData?.page || 1);
+  const [childTotal, setChildTotal] = useState(childrenData?.totalDocs || 0);
+  const [childLoading, setChildLoading] = useState(false);
+  // Related groups pagination state (per collection)
+  const [relatedState, setRelatedState] = useState(() => {
+    const initial = {};
+    for (const group of relatedGroups) {
+      initial[group.collectionSlug] = {
+        docs: group.data.docs,
+        hasNextPage: group.data.hasNextPage,
+        isLoading: false,
+        page: group.data.page || 1,
+        totalDocs: group.data.totalDocs
+      };
+    }
+    return initial;
+  });
+  // Get selection functions from context
+  const {
+    isLocked,
+    isSelected,
+    toggleSelection
+  } = useDocumentSelection();
+  // Get the user who is locking a row (for SlotTable to show lock icon instead of checkbox)
+  const getRowLockedUser = useCallback(row => {
+    const locked = isLocked({
+      id: row.id,
+      collectionSlug: row._collectionSlug
+    });
+    return locked ? row._userEditing : undefined;
+  }, [isLocked]);
+  // Load more children
+  const handleLoadMoreChildren = useCallback(async () => {
+    if (childLoading || !childHasNext) {
+      return;
+    }
+    setChildLoading(true);
+    try {
+      const parentCondition = parentId ? {
+        [parentFieldName]: {
+          equals: parentId
+        }
+      } : {
+        or: [{
+          [parentFieldName]: {
+            exists: false
+          }
+        }, {
+          [parentFieldName]: {
+            equals: null
+          }
+        }]
+      };
+      const searchCondition = search ? {
+        [useAsTitle]: {
+          like: search
+        }
+      } : undefined;
+      const where = combineWhereConstraints([parentCondition, searchCondition, baseFilter]);
+      const queryString = qs.stringify({
+        limit: DEFAULT_HIERARCHY_LIST_LIMIT,
+        page: childPage + 1,
+        where
+      }, {
+        addQueryPrefix: true
+      });
+      const url = formatAdminURL({
+        apiRoute,
+        path: `/${collectionSlug}${queryString}`,
+        serverURL
+      });
+      const response = await fetch(url, {
+        credentials: 'include'
+      });
+      if (!response.ok) {
+        throw new Error('Failed to load more');
+      }
+      const result = await response.json();
+      setChildDocs(prev => [...prev, ...result.docs]);
+      setChildHasNext(result.hasNextPage);
+      setChildPage(result.page || childPage + 1);
+      setChildTotal(result.totalDocs);
+    } catch (_error) {
+      // Silently fail
+    } finally {
+      setChildLoading(false);
+    }
+  }, [apiRoute, baseFilter, childHasNext, childLoading, childPage, collectionSlug, parentFieldName, parentId, search, serverURL, useAsTitle]);
+  // Load more for a related collection
+  const handleLoadMoreRelated = useCallback(async relatedSlug => {
+    const state = relatedState[relatedSlug];
+    if (!state || state.isLoading || !state.hasNextPage) {
+      return;
+    }
+    // Find the group to get field info
+    const group_0 = relatedGroups.find(g => g.collectionSlug === relatedSlug);
+    if (!group_0) {
+      return;
+    }
+    setRelatedState(prev_0 => ({
+      ...prev_0,
+      [relatedSlug]: {
+        ...prev_0[relatedSlug],
+        isLoading: true
+      }
+    }));
+    try {
+      // Field name is always _t_{hierarchySlug} by convention
+      const fieldName = `_t_${collectionSlug}`;
+      // "in" operator works for both hasMany and single relationship fields
+      const relationshipCondition = {
+        [fieldName]: {
+          in: [parentId]
+        }
+      };
+      const relatedConfig = getEntityConfig({
+        collectionSlug: relatedSlug
+      });
+      const relatedUseAsTitle = relatedConfig?.admin?.useAsTitle || 'id';
+      const searchCondition_0 = search ? {
+        [relatedUseAsTitle]: {
+          like: search
+        }
+      } : undefined;
+      const relatedBaseFilter = relatedBaseFilters?.[relatedSlug];
+      const where_0 = combineWhereConstraints([relationshipCondition, searchCondition_0, relatedBaseFilter]);
+      const queryString_0 = qs.stringify({
+        limit: DEFAULT_HIERARCHY_LIST_LIMIT,
+        page: state.page + 1,
+        where: where_0
+      }, {
+        addQueryPrefix: true
+      });
+      const url_0 = formatAdminURL({
+        apiRoute,
+        path: `/${relatedSlug}${queryString_0}`,
+        serverURL
+      });
+      const response_0 = await fetch(url_0, {
+        credentials: 'include'
+      });
+      if (!response_0.ok) {
+        throw new Error('Failed to load more');
+      }
+      const result_0 = await response_0.json();
+      setRelatedState(prev_2 => ({
+        ...prev_2,
+        [relatedSlug]: {
+          docs: [...prev_2[relatedSlug].docs, ...result_0.docs],
+          hasNextPage: result_0.hasNextPage,
+          isLoading: false,
+          page: result_0.page || prev_2[relatedSlug].page + 1,
+          totalDocs: result_0.totalDocs
+        }
+      }));
+    } catch (_error_0) {
+      setRelatedState(prev_1 => ({
+        ...prev_1,
+        [relatedSlug]: {
+          ...prev_1[relatedSlug],
+          isLoading: false
+        }
+      }));
+    }
+  }, [apiRoute, collectionSlug, getEntityConfig, parentId, relatedBaseFilters, relatedGroups, relatedState, search, serverURL]);
+  // Get allowedCollections field name from hierarchy config
+  const allowedCollectionsFieldName = useMemo(() => {
+    const config = getEntityConfig({
+      collectionSlug
+    });
+    const hierarchy = config?.hierarchy;
+    if (hierarchy && typeof hierarchy === 'object' && hierarchy.collectionSpecific) {
+      return hierarchy.collectionSpecific.fieldName;
+    }
+    return undefined;
+  }, [collectionSlug, getEntityConfig]);
+  // Compute collection label for children (once)
+  const childrenLabel = useMemo(() => getTranslation(getEntityConfig({
+    collectionSlug
+  })?.labels?.plural, i18n) || hierarchyLabel, [collectionSlug, getEntityConfig, hierarchyLabel, i18n]);
+  // Build children data for table
+  const childTableData = useMemo(() => childDocs.map(doc => ({
+    ...doc,
+    id: doc.id,
+    _allowedCollections: allowedCollectionsFieldName ? doc[allowedCollectionsFieldName] : undefined,
+    _collectionLabel: childrenLabel,
+    _collectionSlug: collectionSlug,
+    _hasChildren: Boolean(doc._hasChildren),
+    _hierarchyIcon: HierarchyIcon
+  })), [HierarchyIcon, allowedCollectionsFieldName, childDocs, childrenLabel, collectionSlug]);
+  const hasChildren = childTotal > 0;
+  const hasRelated = relatedGroups.some(g_0 => relatedState[g_0.collectionSlug]?.totalDocs > 0);
+  // Unified groups array
+  const allGroups = useMemo(() => {
+    const groups = [];
+    // Children group
+    if (hasChildren) {
+      groups.push({
+        slug: collectionSlug,
+        docs: childTableData,
+        hasNextPage: childHasNext,
+        isChildren: true,
+        isHierarchyEnabled: true,
+        isLoading: childLoading,
+        label: childrenLabel,
+        onCheckboxChange: row_0 => toggleSelection({
+          id: row_0.id,
+          collectionSlug,
+          metadata: {
+            allowedCollections: row_0._allowedCollections
+          }
+        }),
+        onLoadMore: () => void handleLoadMoreChildren(),
+        totalDocs: childTotal
+      });
+    }
+    // Related groups
+    for (const group_1 of relatedGroups) {
+      const state_0 = relatedState[group_1.collectionSlug];
+      if (!state_0 || state_0.totalDocs === 0) {
+        continue;
+      }
+      const relatedConfig_0 = getEntityConfig({
+        collectionSlug: group_1.collectionSlug
+      });
+      const relatedLabel = getTranslation(relatedConfig_0?.labels?.plural, i18n) || group_1.label;
+      const relatedTableData = state_0.docs.map(doc_0 => ({
+        ...doc_0,
+        id: doc_0.id,
+        _collectionLabel: relatedLabel,
+        _collectionSlug: group_1.collectionSlug
+      }));
+      groups.push({
+        slug: group_1.collectionSlug,
+        docs: relatedTableData,
+        hasNextPage: state_0.hasNextPage,
+        isChildren: false,
+        isHierarchyEnabled: false,
+        isLoading: state_0.isLoading,
+        label: relatedLabel,
+        onCheckboxChange: row_1 => toggleSelection({
+          id: row_1.id,
+          collectionSlug: group_1.collectionSlug,
+          metadata: {}
+        }),
+        onLoadMore: () => void handleLoadMoreRelated(group_1.collectionSlug),
+        totalDocs: state_0.totalDocs
+      });
+    }
+    return groups;
+  }, [childHasNext, childLoading, childrenLabel, childTableData, childTotal, collectionSlug, getEntityConfig, handleLoadMoreChildren, handleLoadMoreRelated, hasChildren, i18n, relatedGroups, relatedState, toggleSelection]);
+  // Column definitions
+  const columns = useMemo(() => [{
+    accessor: 'name',
+    Cell: NameCell,
+    className: `${baseClass}__col-name`,
+    heading: t('general:name')
+  }, {
+    accessor: 'collection',
+    Cell: CollectionCell,
+    className: `${baseClass}__col-collection`,
+    heading: t('general:collection')
+  }, {
+    accessor: 'updatedAt',
+    Cell: DateCell,
+    className: `${baseClass}__col-date`,
+    heading: t('general:updatedAt')
+  }], [t]);
+  if (!hasChildren && !hasRelated) {
+    const canShowCreateButton = hasCreatePermission && collections && collections.length > 0;
+    return /*#__PURE__*/_jsx(NoListResults, {
+      Actions: canShowCreateButton ? [/*#__PURE__*/_jsx(CreateDocumentButton, {
+        collections: collections,
+        drawerSlug: `hierarchy-create-empty-${collectionSlug}`,
+        onSave: clearRouteCache
+      }, "create")] : undefined,
+      Message: /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx("h3", {
+          children: t('general:noResultsFound')
+        }), /*#__PURE__*/_jsx("p", {
+          children: t('general:noResultsDescription')
+        })]
+      })
+    });
+  }
+  return /*#__PURE__*/_jsx("div", {
+    className: baseClass,
+    children: allGroups.map(group_2 => /*#__PURE__*/_jsxs("div", {
+      children: [/*#__PURE__*/_jsx("div", {
+        className: `${baseClass}__group-label`,
+        children: /*#__PURE__*/_jsx("span", {
+          children: group_2.label
+        })
+      }), /*#__PURE__*/_jsx(SlotTable, {
+        collectionSlug: group_2.slug,
+        columns: columns,
+        data: group_2.docs,
+        enableCheckbox: true,
+        enableDragHandle: false,
+        enableHeader: true,
+        enableSelectAll: false,
+        getRowLockedUser: getRowLockedUser,
+        mergeCheckboxHeader: true,
+        onCheckboxChange: group_2.onCheckboxChange,
+        parentId: parentId,
+        selectedIds: new Set(group_2.docs.filter(row_2 => isSelected({
+          id: row_2.id,
+          collectionSlug: group_2.slug
+        })).map(row_3 => row_3.id))
+      }), /*#__PURE__*/_jsx("div", {
+        className: `${baseClass}__load-more-wrap`,
+        children: /*#__PURE__*/_jsx(LoadMoreRow, {
+          currentCount: group_2.docs.length,
+          hasMore: group_2.hasNextPage,
+          isLoading: group_2.isLoading,
+          onLoadMore: group_2.onLoadMore,
+          totalDocs: group_2.totalDocs
+        })
+      })]
+    }, group_2.slug))
+  });
+}
+//# sourceMappingURL=index.js.map