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

package/dist/views/HierarchyList/HierarchyTable/SlotTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"SlotTable.js","names":["React","Locked","CheckboxInput","AlignJustifiedIcon","baseClass","SlotTable","appearance","className","collectionSlug","columns","data","enableCheckbox","enableDragHandle","enableHeader","enableSelectAll","getRowId","row","index","id","getRowLockedUser","mergeCheckboxHeader","onCheckboxChange","onRowClick","onSelectAllChange","parentId","selectedIds","Set","allSelected","length","every","i","has","someSelected","some","handleSelectAll","handleRowCheckbox","isSelected","handleRowClick","handleRowKeyDown","e","key","preventDefault","_jsx","filter","Boolean","join","_jsxs","cellPadding","cellSpacing","checked","onToggle","partialChecked","map","col","colIndex","colSpan","undefined","heading","accessor","rowIndex","rowId","isClickable","onClick","onKeyDown","tabIndex","lockedUser","user","Cell","column"],"sources":["../../../../src/views/HierarchyList/HierarchyTable/SlotTable.tsx"],"sourcesContent":["'use client'\n\nimport type { ClientUser } from 'payload'\n\nimport React from 'react'\n\nimport { Locked } from '../../../elements/Locked/index.js'\nimport { CheckboxInput } from '../../../fields/Checkbox/Input.js'\nimport { AlignJustifiedIcon } from '../../../icons/AlignJustified/index.js'\nimport './SlotTable.scss'\n\nconst baseClass = 'slot-table'\n\nexport type SlotColumn<TRow = Record<string, unknown>> = {\n  /**\n   * Unique identifier for the column\n   */\n  accessor: string\n  /**\n   * Cell component that receives the row data\n   */\n  Cell: React.FC<{ column: SlotColumn<TRow>; row: TRow; rowIndex: number }>\n  /**\n   * Optional class name for the column cells\n   */\n  className?: string\n  /**\n   * Column header content\n   */\n  heading: React.ReactNode\n}\n\nexport type SlotTableProps<TRow = Record<string, unknown>> = {\n  /**\n   * Table appearance\n   */\n  appearance?: 'condensed' | 'default'\n  /**\n   * Additional class name\n   */\n  className?: string\n  /**\n   * Collection slug for the table\n   */\n  collectionSlug?: string\n  /**\n   * Column definitions with Cell components\n   */\n  columns: SlotColumn<TRow>[]\n  /**\n   * Data array - table loops over this\n   */\n  data: TRow[]\n  /**\n   * Show checkbox column (default: true)\n   */\n  enableCheckbox?: boolean\n  /**\n   * Show drag handle column (default: true)\n   */\n  enableDragHandle?: boolean\n  /**\n   * Show header row with column headings (default: true)\n   */\n  enableHeader?: boolean\n  /**\n   * Show select-all checkbox in header (default: true, requires enableCheckbox and enableHeader)\n   */\n  enableSelectAll?: boolean\n  /**\n   * Get unique ID for each row\n   */\n  getRowId?: (row: TRow, index: number) => number | string\n  /**\n   * Returns the user who is editing/locking a row, or undefined if not locked.\n   * When a user is returned, a lock icon replaces the checkbox for that row.\n   */\n  getRowLockedUser?: (row: TRow, index: number) => ClientUser | undefined\n  /**\n   * Merge checkbox header with first column header using colspan (default: false)\n   * The first column header will span both checkbox and content cells\n   */\n  mergeCheckboxHeader?: boolean\n  /**\n   * Callback when checkbox is toggled\n   */\n  onCheckboxChange?: (row: TRow, checked: boolean, index: number) => void\n  /**\n   * Row click handler (for navigation)\n   */\n  onRowClick?: (row: TRow, index: number) => void\n  /**\n   * Callback when \"select all\" checkbox is toggled\n   */\n  onSelectAllChange?: (checked: boolean) => void\n  /**\n   * Parent ID for the table\n   */\n  parentId?: null | number | string\n  /**\n   * Currently selected row IDs\n   */\n  selectedIds?: Set<number | string>\n}\n\nexport function SlotTable<TRow extends Record<string, unknown> = Record<string, unknown>>({\n  appearance = 'default',\n  className,\n  collectionSlug,\n  columns,\n  data,\n  enableCheckbox = true,\n  enableDragHandle = true,\n  enableHeader = true,\n  enableSelectAll = true,\n  getRowId = (row, index) => (row.id as number | string) ?? index,\n  getRowLockedUser,\n  mergeCheckboxHeader = false,\n  onCheckboxChange,\n  onRowClick,\n  onSelectAllChange,\n  parentId,\n  selectedIds = new Set(),\n}: SlotTableProps<TRow>) {\n  const allSelected = data.length > 0 && data.every((row, i) => selectedIds.has(getRowId(row, i)))\n  const someSelected = data.some((row, i) => selectedIds.has(getRowId(row, i)))\n\n  const handleSelectAll = () => {\n    onSelectAllChange?.(!allSelected)\n  }\n\n  const handleRowCheckbox = (row: TRow, index: number, isSelected: boolean) => {\n    onCheckboxChange?.(row, !isSelected, index)\n  }\n\n  const handleRowClick = (row: TRow, index: number) => {\n    onRowClick?.(row, index)\n  }\n\n  const handleRowKeyDown = (row: TRow, index: number, e: React.KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault()\n      onRowClick?.(row, index)\n    }\n  }\n\n  return (\n    <div\n      className={[baseClass, appearance && `${baseClass}--appearance-${appearance}`, className]\n        .filter(Boolean)\n        .join(' ')}\n      key={`${collectionSlug}-${parentId}`}\n    >\n      <table cellPadding=\"0\" cellSpacing=\"0\">\n        {enableHeader && (\n          <thead>\n            <tr>\n              {enableDragHandle && (\n                <th className={`${baseClass}__th ${baseClass}__th--drag`}>\n                  <span className={`${baseClass}__drag-header`} />\n                </th>\n              )}\n              {enableCheckbox && !mergeCheckboxHeader && (\n                <th className={`${baseClass}__th ${baseClass}__th--checkbox`}>\n                  {enableSelectAll && (\n                    <CheckboxInput\n                      checked={allSelected}\n                      className={`${baseClass}__checkbox`}\n                      onToggle={handleSelectAll}\n                      partialChecked={someSelected && !allSelected}\n                    />\n                  )}\n                </th>\n              )}\n              {columns.map((col, colIndex) => (\n                <th\n                  className={[`${baseClass}__th`, col.className].filter(Boolean).join(' ')}\n                  colSpan={colIndex === 0 && enableCheckbox && mergeCheckboxHeader ? 2 : undefined}\n                  key={col.accessor}\n                >\n                  {col.heading}\n                </th>\n              ))}\n            </tr>\n          </thead>\n        )}\n        <tbody>\n          {data.map((row, rowIndex) => {\n            const rowId = getRowId(row, rowIndex)\n            const isSelected = selectedIds.has(rowId)\n            const isClickable = Boolean(onRowClick)\n\n            return (\n              <tr\n                className={[\n                  `${baseClass}__tr`,\n                  isSelected && `${baseClass}__tr--selected`,\n                  isClickable && `${baseClass}__tr--clickable`,\n                ]\n                  .filter(Boolean)\n                  .join(' ')}\n                data-id={rowId}\n                key={rowId}\n                onClick={isClickable ? () => handleRowClick(row, rowIndex) : undefined}\n                onKeyDown={isClickable ? (e) => handleRowKeyDown(row, rowIndex, e) : undefined}\n                tabIndex={isClickable ? 0 : undefined}\n              >\n                {enableDragHandle && (\n                  <td className={`${baseClass}__td ${baseClass}__td--drag`}>\n                    <span className={`${baseClass}__drag-handle`}>\n                      <AlignJustifiedIcon />\n                    </span>\n                  </td>\n                )}\n                {enableCheckbox && (\n                  <td className={`${baseClass}__td ${baseClass}__td--checkbox`}>\n                    {(() => {\n                      const lockedUser = getRowLockedUser?.(row, rowIndex)\n\n                      if (lockedUser) {\n                        return <Locked user={lockedUser} />\n                      }\n\n                      return (\n                        <CheckboxInput\n                          checked={isSelected}\n                          className={`${baseClass}__checkbox`}\n                          onToggle={() => handleRowCheckbox(row, rowIndex, isSelected)}\n                        />\n                      )\n                    })()}\n                  </td>\n                )}\n                {columns.map((col) => (\n                  <td\n                    className={[`${baseClass}__td`, col.className].filter(Boolean).join(' ')}\n                    key={col.accessor}\n                  >\n                    <col.Cell column={col} row={row} rowIndex={rowIndex} />\n                  </td>\n                ))}\n              </tr>\n            )\n          })}\n        </tbody>\n      </table>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SlotTable.js","names":["React","Locked","CheckboxInput","AlignJustifiedIcon","baseClass","SlotTable","appearance","className","collectionSlug","columns","data","enableCheckbox","enableDragHandle","enableHeader","enableSelectAll","getRowId","row","index","id","getRowLockedUser","mergeCheckboxHeader","onCheckboxChange","onRowClick","onSelectAllChange","parentId","selectedIds","Set","allSelected","length","every","i","has","someSelected","some","handleSelectAll","handleRowCheckbox","isSelected","handleRowClick","handleRowKeyDown","e","key","preventDefault","_jsx","filter","Boolean","join","_jsxs","cellPadding","cellSpacing","checked","onToggle","partialChecked","variant","map","col","colIndex","isMergedCheckboxColumn","colSpan","undefined","heading","accessor","rowIndex","rowId","isClickable","onClick","onKeyDown","tabIndex","lockedUser","user","Cell","column"],"sources":["../../../../src/views/HierarchyList/HierarchyTable/SlotTable.tsx"],"sourcesContent":["'use client'\n\nimport type { ClientUser } from 'payload'\n\nimport React from 'react'\n\nimport { Locked } from '../../../elements/Locked/index.js'\nimport { CheckboxInput } from '../../../fields/Checkbox/Input.js'\nimport { AlignJustifiedIcon } from '../../../icons/AlignJustified/index.js'\nimport './SlotTable.css'\n\nconst baseClass = 'slot-table'\n\nexport type SlotColumn<TRow = Record<string, unknown>> = {\n  /**\n   * Unique identifier for the column\n   */\n  accessor: string\n  /**\n   * Cell component that receives the row data\n   */\n  Cell: React.FC<{ column: SlotColumn<TRow>; row: TRow; rowIndex: number }>\n  /**\n   * Optional class name for the column cells\n   */\n  className?: string\n  /**\n   * Column header content\n   */\n  heading: React.ReactNode\n}\n\nexport type SlotTableProps<TRow = Record<string, unknown>> = {\n  /**\n   * Table appearance\n   */\n  appearance?: 'condensed' | 'default'\n  /**\n   * Additional class name\n   */\n  className?: string\n  /**\n   * Collection slug for the table\n   */\n  collectionSlug?: string\n  /**\n   * Column definitions with Cell components\n   */\n  columns: SlotColumn<TRow>[]\n  /**\n   * Data array - table loops over this\n   */\n  data: TRow[]\n  /**\n   * Show checkbox column (default: true)\n   */\n  enableCheckbox?: boolean\n  /**\n   * Show drag handle column (default: true)\n   */\n  enableDragHandle?: boolean\n  /**\n   * Show header row with column headings (default: true)\n   */\n  enableHeader?: boolean\n  /**\n   * Show select-all checkbox in header (default: true, requires enableCheckbox and enableHeader)\n   */\n  enableSelectAll?: boolean\n  /**\n   * Get unique ID for each row\n   */\n  getRowId?: (row: TRow, index: number) => number | string\n  /**\n   * Returns the user who is editing/locking a row, or undefined if not locked.\n   * When a user is returned, a lock icon replaces the checkbox for that row.\n   */\n  getRowLockedUser?: (row: TRow, index: number) => ClientUser | undefined\n  /**\n   * Merge checkbox header with first column header using colspan (default: false)\n   * The first column header will span both checkbox and content cells\n   */\n  mergeCheckboxHeader?: boolean\n  /**\n   * Callback when checkbox is toggled\n   */\n  onCheckboxChange?: (row: TRow, checked: boolean, index: number) => void\n  /**\n   * Row click handler (for navigation)\n   */\n  onRowClick?: (row: TRow, index: number) => void\n  /**\n   * Callback when \"select all\" checkbox is toggled\n   */\n  onSelectAllChange?: (checked: boolean) => void\n  /**\n   * Parent ID for the table\n   */\n  parentId?: null | number | string\n  /**\n   * Currently selected row IDs\n   */\n  selectedIds?: Set<number | string>\n}\n\nexport function SlotTable<TRow extends Record<string, unknown> = Record<string, unknown>>({\n  appearance = 'default',\n  className,\n  collectionSlug,\n  columns,\n  data,\n  enableCheckbox = true,\n  enableDragHandle = true,\n  enableHeader = true,\n  enableSelectAll = true,\n  getRowId = (row, index) => (row.id as number | string) ?? index,\n  getRowLockedUser,\n  mergeCheckboxHeader = false,\n  onCheckboxChange,\n  onRowClick,\n  onSelectAllChange,\n  parentId,\n  selectedIds = new Set(),\n}: SlotTableProps<TRow>) {\n  const allSelected = data.length > 0 && data.every((row, i) => selectedIds.has(getRowId(row, i)))\n  const someSelected = data.some((row, i) => selectedIds.has(getRowId(row, i)))\n\n  const handleSelectAll = () => {\n    onSelectAllChange?.(!allSelected)\n  }\n\n  const handleRowCheckbox = (row: TRow, index: number, isSelected: boolean) => {\n    onCheckboxChange?.(row, !isSelected, index)\n  }\n\n  const handleRowClick = (row: TRow, index: number) => {\n    onRowClick?.(row, index)\n  }\n\n  const handleRowKeyDown = (row: TRow, index: number, e: React.KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault()\n      onRowClick?.(row, index)\n    }\n  }\n\n  return (\n    <div\n      className={[baseClass, appearance && `${baseClass}--appearance-${appearance}`, className]\n        .filter(Boolean)\n        .join(' ')}\n      key={`${collectionSlug}-${parentId}`}\n    >\n      <table cellPadding=\"0\" cellSpacing=\"0\">\n        {enableHeader && (\n          <thead>\n            <tr>\n              {enableCheckbox && !mergeCheckboxHeader && (\n                <th className={`${baseClass}__th ${baseClass}__th--checkbox`}>\n                  {enableSelectAll && (\n                    <CheckboxInput\n                      checked={allSelected}\n                      className={`${baseClass}__checkbox`}\n                      onToggle={handleSelectAll}\n                      partialChecked={someSelected && !allSelected}\n                      variant=\"muted\"\n                    />\n                  )}\n                </th>\n              )}\n              {enableDragHandle && (\n                <th className={`${baseClass}__th ${baseClass}__th--drag`}>\n                  <span className={`${baseClass}__drag-header`} />\n                </th>\n              )}\n              {columns.map((col, colIndex) => {\n                const isMergedCheckboxColumn =\n                  colIndex === 0 && enableCheckbox && mergeCheckboxHeader\n\n                return (\n                  <th\n                    className={[`${baseClass}__th`, col.className].filter(Boolean).join(' ')}\n                    colSpan={isMergedCheckboxColumn ? 2 : undefined}\n                    key={col.accessor}\n                  >\n                    {isMergedCheckboxColumn && enableSelectAll ? (\n                      <span className={`${baseClass}__th-merged`}>\n                        <CheckboxInput\n                          checked={allSelected}\n                          className={`${baseClass}__checkbox`}\n                          onToggle={handleSelectAll}\n                          partialChecked={someSelected && !allSelected}\n                          variant=\"muted\"\n                        />\n                        {col.heading}\n                      </span>\n                    ) : (\n                      col.heading\n                    )}\n                  </th>\n                )\n              })}\n            </tr>\n          </thead>\n        )}\n        <tbody>\n          {data.map((row, rowIndex) => {\n            const rowId = getRowId(row, rowIndex)\n            const isSelected = selectedIds.has(rowId)\n            const isClickable = Boolean(onRowClick)\n\n            return (\n              <tr\n                className={[\n                  `${baseClass}__tr`,\n                  isSelected && `${baseClass}__tr--selected`,\n                  isClickable && `${baseClass}__tr--clickable`,\n                ]\n                  .filter(Boolean)\n                  .join(' ')}\n                data-id={rowId}\n                key={rowId}\n                onClick={isClickable ? () => handleRowClick(row, rowIndex) : undefined}\n                onKeyDown={isClickable ? (e) => handleRowKeyDown(row, rowIndex, e) : undefined}\n                tabIndex={isClickable ? 0 : undefined}\n              >\n                {enableCheckbox && (\n                  <td className={`${baseClass}__td ${baseClass}__td--checkbox`}>\n                    {(() => {\n                      const lockedUser = getRowLockedUser?.(row, rowIndex)\n\n                      if (lockedUser) {\n                        return <Locked user={lockedUser} />\n                      }\n\n                      return (\n                        <CheckboxInput\n                          checked={isSelected}\n                          className={`${baseClass}__checkbox`}\n                          onToggle={() => handleRowCheckbox(row, rowIndex, isSelected)}\n                          variant=\"muted\"\n                        />\n                      )\n                    })()}\n                  </td>\n                )}\n                {enableDragHandle && (\n                  <td className={`${baseClass}__td ${baseClass}__td--drag`}>\n                    <span className={`${baseClass}__drag-handle`}>\n                      <AlignJustifiedIcon />\n                    </span>\n                  </td>\n                )}\n                {columns.map((col) => (\n                  <td\n                    className={[`${baseClass}__td`, col.className].filter(Boolean).join(' ')}\n                    key={col.accessor}\n                  >\n                    <col.Cell column={col} row={row} rowIndex={rowIndex} />\n                  </td>\n                ))}\n              </tr>\n            )\n          })}\n        </tbody>\n      </table>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,124 @@
+@layer payload-default {
+  .hierarchy-tables__name-cell {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-1);
+  }
+
+  .hierarchy-tables__edit-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-text);
+    flex-shrink: 0;
+    padding: 0;
+    background: none;
+    border: none;
+    cursor: pointer;
+    border-radius: var(--radius-small);
+    border: var(--stroke-width-small) solid transparent;
+
+    &:hover,
+    &:focus-visible {
+      color: var(--color-text);
+      background-color: var(--color-bg-hover);
+      border-color: var(--color-border);
+    }
+  }
+
+  .hierarchy-tables__name-link {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-2);
+    color: var(--color-text);
+    text-decoration: none;
+    background: none;
+    border: none;
+    padding: var(--spacer-2) 0;
+    padding-inline-start: var(--spacer-2);
+    font: inherit;
+    cursor: pointer;
+    text-align: left;
+    min-height: calc(var(--spacer-4) * 2);
+
+    &:hover {
+      color: var(--color-text);
+      text-decoration: underline;
+    }
+  }
+
+  .hierarchy-tables__thumbnail {
+    display: inline-block;
+    max-width: var(--spacer-3);
+    height: var(--spacer-3);
+    border-radius: var(--radius-small);
+    flex-shrink: 0;
+  }
+
+  .hierarchy-tables__name-icon {
+    display: flex;
+    flex-shrink: 0;
+  }
+
+  .hierarchy-tables__name-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    line-height: var(--spacer-3);
+  }
+
+  .hierarchy-tables__chevron {
+    margin-inline-start: auto;
+    padding-inline-start: var(--spacer-2);
+
+    svg {
+      width: var(--spacer-2-5);
+      height: var(--spacer-2-5);
+      color: var(--color-icon-tertiary);
+    }
+  }
+
+  .hierarchy-tables__col-name {
+    width: auto;
+    min-width: 200px;
+
+    /* Move padding to link for full-cell clickability */
+    &:has(.hierarchy-tables__name-link) {
+      padding: 0;
+    }
+  }
+
+  .hierarchy-tables__col-collection {
+    width: 140px;
+    min-width: 100px;
+  }
+
+  .hierarchy-tables__col-date {
+    width: 150px;
+    min-width: 120px;
+  }
+
+  .hierarchy-tables__col-type {
+    width: 120px;
+    min-width: 100px;
+
+    &:not(.slot-table__th) {
+      color: var(--color-text-secondary);
+    }
+  }
+
+  .hierarchy-tables__section-title {
+    margin: 0;
+    font-weight: var(--text-body-medium-strong-font-weight);
+    color: var(--color-text);
+  }
+
+  .hierarchy-tables__group-label {
+    color: var(--color-text);
+    letter-spacing: var(--text-body-large-letter-spacing);
+    font-family: var(--text-body-large-strong-font-family);
+    font-size: var(--text-body-large-strong-font-size);
+    font-weight: var(--text-body-large-strong-font-weight);
+    line-height: var(--text-body-large-strong-line-height);
+  }
+}

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

@@ -3,7 +3,7 @@ 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';
+import './index.css';
 export type HierarchyTableProps = {
     /** Base filter applied to hierarchy collection queries (e.g., tenant filter) */
     baseFilter?: Where;

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

@@ -1 +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"}
+{"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;AAexD,OAAO,aAAa,CAAA;AAcpB,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,qBAydrB"}

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

@@ -1,13 +1,14 @@
 'use client';
 
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } 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 { SimplePagination } from '../../../elements/Pagination/SimplePagination/index.js';
+import { TableSection } from '../../../elements/TableSection/index.js';
 import { useConfig } from '../../../providers/Config/index.js';
 import { useDocumentSelection } from '../../../providers/DocumentSelection/index.js';
 import { useRouteCache } from '../../../providers/RouteCache/index.js';
@@ -17,7 +18,7 @@ import { DateCell } from './DateCell.js';
 import { RelatedNameCell } from './RelatedNameCell.js';
 import { SlotTable } from './SlotTable.js';
 import { baseClass } from './types.js';
-import './index.scss';
+import './index.css';
 // Top-level cell components to avoid nested component eslint errors
 const NameCell = props => props.row._hasChildren !== undefined ? /*#__PURE__*/_jsx(ChildNameCell, {
   ...props
@@ -62,9 +63,15 @@ export function HierarchyTable({
   } = 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 [childPaginationData, setChildPaginationData] = useState({
+    hasNextPage: childrenData?.hasNextPage || false,
+    hasPrevPage: childrenData?.hasPrevPage || false,
+    limit: childrenData?.limit || DEFAULT_HIERARCHY_LIST_LIMIT,
+    page: childrenData?.page || 1,
+    pagingCounter: childrenData?.pagingCounter || 1,
+    totalDocs: childrenData?.totalDocs || 0,
+    totalPages: childrenData?.totalPages || 1
+  });
   const [childLoading, setChildLoading] = useState(false);
   // Related groups pagination state (per collection)
   const [relatedState, setRelatedState] = useState(() => {
@@ -73,9 +80,13 @@ export function HierarchyTable({
       initial[group.collectionSlug] = {
         docs: group.data.docs,
         hasNextPage: group.data.hasNextPage,
+        hasPrevPage: group.data.hasPrevPage || false,
         isLoading: false,
+        limit: group.data.limit || DEFAULT_HIERARCHY_LIST_LIMIT,
         page: group.data.page || 1,
-        totalDocs: group.data.totalDocs
+        pagingCounter: group.data.pagingCounter || 1,
+        totalDocs: group.data.totalDocs,
+        totalPages: group.data.totalPages || 1
       };
     }
     return initial;
@@ -84,6 +95,7 @@ export function HierarchyTable({
   const {
     isLocked,
     isSelected,
+    toggleAllInCollection,
     toggleSelection
   } = useDocumentSelection();
   // Get the user who is locking a row (for SlotTable to show lock icon instead of checkbox)
@@ -94,9 +106,9 @@ export function HierarchyTable({
     });
     return locked ? row._userEditing : undefined;
   }, [isLocked]);
-  // Load more children
-  const handleLoadMoreChildren = useCallback(async () => {
-    if (childLoading || !childHasNext) {
+  // Page change for children
+  const handlePageChangeChildren = useCallback(async page => {
+    if (childLoading) {
       return;
     }
     setChildLoading(true);
@@ -124,7 +136,7 @@ export function HierarchyTable({
       const where = combineWhereConstraints([parentCondition, searchCondition, baseFilter]);
       const queryString = qs.stringify({
         limit: DEFAULT_HIERARCHY_LIST_LIMIT,
-        page: childPage + 1,
+        page,
         where
       }, {
         addQueryPrefix: true
@@ -138,23 +150,29 @@ export function HierarchyTable({
         credentials: 'include'
       });
       if (!response.ok) {
-        throw new Error('Failed to load more');
+        throw new Error('Failed to load page');
       }
       const result = await response.json();
-      setChildDocs(prev => [...prev, ...result.docs]);
-      setChildHasNext(result.hasNextPage);
-      setChildPage(result.page || childPage + 1);
-      setChildTotal(result.totalDocs);
+      setChildDocs(result.docs);
+      setChildPaginationData({
+        hasNextPage: result.hasNextPage,
+        hasPrevPage: result.hasPrevPage,
+        limit: result.limit,
+        page: result.page,
+        pagingCounter: result.pagingCounter,
+        totalDocs: result.totalDocs,
+        totalPages: result.totalPages
+      });
     } 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 => {
+  }, [apiRoute, baseFilter, childLoading, collectionSlug, parentFieldName, parentId, search, serverURL, useAsTitle]);
+  // Page change for a related collection
+  const handlePageChangeRelated = useCallback(async (relatedSlug, page_0) => {
     const state = relatedState[relatedSlug];
-    if (!state || state.isLoading || !state.hasNextPage) {
+    if (!state || state.isLoading) {
       return;
     }
     // Find the group to get field info
@@ -162,22 +180,47 @@ export function HierarchyTable({
     if (!group_0) {
       return;
     }
-    setRelatedState(prev_0 => ({
-      ...prev_0,
+    setRelatedState(prev => ({
+      ...prev,
       [relatedSlug]: {
-        ...prev_0[relatedSlug],
+        ...prev[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]
+      // Build relationship condition based on whether we're at root or in a parent
+      let relationshipCondition;
+      if (parentId) {
+        // Nested level: find documents assigned to this hierarchy item
+        // "in" operator works for both hasMany and single relationship fields
+        relationshipCondition = {
+          [group_0.fieldName]: {
+            in: [parentId]
+          }
+        };
+      } else {
+        // Root level: find documents where hierarchy field doesn't exist, is null, or is empty array
+        const conditions = [{
+          [group_0.fieldName]: {
+            exists: false
+          }
+        }, {
+          [group_0.fieldName]: {
+            equals: null
+          }
+        }];
+        if (group_0.hasMany) {
+          // hasMany fields store cleared values as empty arrays
+          conditions.push({
+            [group_0.fieldName]: {
+              equals: []
+            }
+          });
         }
-      };
+        relationshipCondition = {
+          or: conditions
+        };
+      }
       const relatedConfig = getEntityConfig({
         collectionSlug: relatedSlug
       });
@@ -191,7 +234,7 @@ export function HierarchyTable({
       const where_0 = combineWhereConstraints([relationshipCondition, searchCondition_0, relatedBaseFilter]);
       const queryString_0 = qs.stringify({
         limit: DEFAULT_HIERARCHY_LIST_LIMIT,
-        page: state.page + 1,
+        page: page_0,
         where: where_0
       }, {
         addQueryPrefix: true
@@ -205,29 +248,33 @@ export function HierarchyTable({
         credentials: 'include'
       });
       if (!response_0.ok) {
-        throw new Error('Failed to load more');
+        throw new Error('Failed to load page');
       }
       const result_0 = await response_0.json();
-      setRelatedState(prev_2 => ({
-        ...prev_2,
+      setRelatedState(prev_1 => ({
+        ...prev_1,
         [relatedSlug]: {
-          docs: [...prev_2[relatedSlug].docs, ...result_0.docs],
+          docs: result_0.docs,
           hasNextPage: result_0.hasNextPage,
+          hasPrevPage: result_0.hasPrevPage,
           isLoading: false,
-          page: result_0.page || prev_2[relatedSlug].page + 1,
-          totalDocs: result_0.totalDocs
+          limit: result_0.limit,
+          page: result_0.page,
+          pagingCounter: result_0.pagingCounter,
+          totalDocs: result_0.totalDocs,
+          totalPages: result_0.totalPages
         }
       }));
     } catch (_error_0) {
-      setRelatedState(prev_1 => ({
-        ...prev_1,
+      setRelatedState(prev_0 => ({
+        ...prev_0,
         [relatedSlug]: {
-          ...prev_1[relatedSlug],
+          ...prev_0[relatedSlug],
           isLoading: false
         }
       }));
     }
-  }, [apiRoute, collectionSlug, getEntityConfig, parentId, relatedBaseFilters, relatedGroups, relatedState, search, serverURL]);
+  }, [apiRoute, getEntityConfig, parentFieldName, parentId, relatedBaseFilters, relatedGroups, relatedState, search, serverURL]);
   // Get allowedCollections field name from hierarchy config
   const allowedCollectionsFieldName = useMemo(() => {
     const config = getEntityConfig({
@@ -253,9 +300,8 @@ export function HierarchyTable({
     _hasChildren: Boolean(doc._hasChildren),
     _hierarchyIcon: HierarchyIcon
   })), [HierarchyIcon, allowedCollectionsFieldName, childDocs, childrenLabel, collectionSlug]);
-  const hasChildren = childTotal > 0;
+  const hasChildren = (childPaginationData.totalDocs || 0) > 0;
   const hasRelated = relatedGroups.some(g_0 => relatedState[g_0.collectionSlug]?.totalDocs > 0);
-  // Unified groups array
   const allGroups = useMemo(() => {
     const groups = [];
     // Children group
@@ -263,7 +309,6 @@ export function HierarchyTable({
       groups.push({
         slug: collectionSlug,
         docs: childTableData,
-        hasNextPage: childHasNext,
         isChildren: true,
         isHierarchyEnabled: true,
         isLoading: childLoading,
@@ -275,8 +320,20 @@ export function HierarchyTable({
             allowedCollections: row_0._allowedCollections
           }
         }),
-        onLoadMore: () => void handleLoadMoreChildren(),
-        totalDocs: childTotal
+        onPageChange: page_1 => void handlePageChangeChildren(page_1),
+        onSelectAllChange: () => toggleAllInCollection({
+          collectionSlug
+        }),
+        paginationData: {
+          docs: childDocs,
+          hasNextPage: childPaginationData.hasNextPage || false,
+          hasPrevPage: childPaginationData.hasPrevPage || false,
+          limit: childPaginationData.limit || DEFAULT_HIERARCHY_LIST_LIMIT,
+          page: childPaginationData.page || 1,
+          pagingCounter: childPaginationData.pagingCounter || 1,
+          totalDocs: childPaginationData.totalDocs || 0,
+          totalPages: childPaginationData.totalPages || 1
+        }
       });
     }
     // Related groups
@@ -298,7 +355,6 @@ export function HierarchyTable({
       groups.push({
         slug: group_1.collectionSlug,
         docs: relatedTableData,
-        hasNextPage: state_0.hasNextPage,
         isChildren: false,
         isHierarchyEnabled: false,
         isLoading: state_0.isLoading,
@@ -308,12 +364,24 @@ export function HierarchyTable({
           collectionSlug: group_1.collectionSlug,
           metadata: {}
         }),
-        onLoadMore: () => void handleLoadMoreRelated(group_1.collectionSlug),
-        totalDocs: state_0.totalDocs
+        onPageChange: page_2 => void handlePageChangeRelated(group_1.collectionSlug, page_2),
+        onSelectAllChange: () => toggleAllInCollection({
+          collectionSlug: group_1.collectionSlug
+        }),
+        paginationData: {
+          docs: state_0.docs || [],
+          hasNextPage: state_0.hasNextPage || false,
+          hasPrevPage: state_0.hasPrevPage || false,
+          limit: state_0.limit || DEFAULT_HIERARCHY_LIST_LIMIT,
+          page: state_0.page || 1,
+          pagingCounter: state_0.pagingCounter || 1,
+          totalDocs: state_0.totalDocs || 0,
+          totalPages: state_0.totalPages || 1
+        }
       });
     }
     return groups;
-  }, [childHasNext, childLoading, childrenLabel, childTableData, childTotal, collectionSlug, getEntityConfig, handleLoadMoreChildren, handleLoadMoreRelated, hasChildren, i18n, relatedGroups, relatedState, toggleSelection]);
+  }, [childDocs, childLoading, childPaginationData, childrenLabel, childTableData, collectionSlug, getEntityConfig, handlePageChangeChildren, handlePageChangeRelated, hasChildren, i18n, relatedGroups, relatedState, toggleAllInCollection, toggleSelection]);
   // Column definitions
   const columns = useMemo(() => [{
     accessor: 'name',
@@ -339,47 +407,38 @@ export function HierarchyTable({
         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')
-        })]
-      })
+      description: t('general:noResultsDescription'),
+      title: t('general:noResultsFound'),
+      withMargin: true
     });
   }
   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
+    children: allGroups.map(group_2 => /*#__PURE__*/_jsxs(TableSection, {
+      children: [/*#__PURE__*/_jsx(TableSection.Header, {
+        heading: group_2.label,
+        children: /*#__PURE__*/_jsx(SimplePagination, {
+          data: group_2.paginationData,
+          onChange: group_2.onPageChange
         })
-      }), /*#__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
+      }), /*#__PURE__*/_jsx(TableSection.Content, {
+        children: /*#__PURE__*/_jsx(SlotTable, {
+          collectionSlug: group_2.slug,
+          columns: columns,
+          data: group_2.docs,
+          enableCheckbox: true,
+          enableDragHandle: false,
+          enableHeader: true,
+          enableSelectAll: true,
+          getRowLockedUser: getRowLockedUser,
+          mergeCheckboxHeader: false,
+          onCheckboxChange: group_2.onCheckboxChange,
+          onSelectAllChange: group_2.onSelectAllChange,
+          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))
         })
       })]
     }, group_2.slug))