@payloadcms/ui 4.0.0-internal.011fd46 → 4.0.0-internal.016994f

package/dist/elements/Table/OrderableTable.js

@@ -9,11 +9,14 @@ import { toast } from 'sonner';
 import { useConfig } from '../../providers/Config/index.js';
 import { useListQuery } from '../../providers/ListQuery/index.js';
 import { useLocale } from '../../providers/Locale/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
 import { DraggableSortableItem } from '../DraggableSortable/DraggableSortableItem/index.js';
 import { DraggableSortable } from '../DraggableSortable/index.js';
 import { OrderableRow } from './OrderableRow.js';
 import { OrderableRowDragPreview } from './OrderableRowDragPreview.js';
 const baseClass = 'table';
+// A stable id so repeated attempts (e.g. holding Space) update the same toast instead of stacking new ones
+const mustSortByOrderToastId = 'orderable-table-must-sort-by-order';
 export const OrderableTable = ({
   appearance = 'default',
   BeforeTable,
@@ -32,8 +35,12 @@ export const OrderableTable = ({
   const {
     code: localeCode
   } = useLocale();
+  const {
+    t
+  } = useTranslation();
   // Use the data from ListQueryProvider if available, otherwise use the props
   const serverData = listQueryData?.docs || initialData;
+  const isOrderable = query.sort === orderableFieldName || query.sort === `-${orderableFieldName}`;
   // Local state to track the current order of rows
   const [localData, setLocalData] = useState(serverData);
   // id -> index for each column
@@ -54,8 +61,10 @@ export const OrderableTable = ({
     moveFromIndex,
     moveToIndex
   }) => {
-    if (query.sort !== orderableFieldName && query.sort !== `-${orderableFieldName}`) {
-      toast.warning('To reorder the rows you must first sort them by the "Order" column');
+    if (!isOrderable) {
+      toast.warning(t('general:sortByOrderToReorder'), {
+        id: mustSortByOrderToastId
+      });
       setDragActiveRowId(undefined);
       return;
     }
@@ -127,6 +136,11 @@ export const OrderableTable = ({
   }) => {
     setDragActiveRowId(id);
   };
+  const handleDisabledDragAttempt = () => {
+    toast.warning(t('general:sortByOrderToReorder'), {
+      id: mustSortByOrderToastId
+    });
+  };
   const rowIds = localData.map(row => row.id ?? row._id);
   return /*#__PURE__*/_jsxs("div", {
     className: [baseClass, appearance && `${baseClass}--appearance-${appearance}`].filter(Boolean).join(' '),
@@ -146,6 +160,7 @@ export const OrderableTable = ({
           })
         }), /*#__PURE__*/_jsx("tbody", {
           children: localData.map((row_0, rowIndex) => /*#__PURE__*/_jsx(DraggableSortableItem, {
+            disabled: !isOrderable,
             id: rowIds[rowIndex],
             children: ({
               attributes,
@@ -160,6 +175,8 @@ export const OrderableTable = ({
               columns: activeColumns,
               dragAttributes: attributes,
               dragListeners: listeners,
+              isOrderable: isOrderable,
+              onDisabledDragAttempt: handleDisabledDragAttempt,
               ref: setNodeRef,
               rowId: row_0.id ?? row_0._id,
               style: {

package/dist/elements/Table/OrderableTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"OrderableTable.js","names":["DragOverlay","formatAdminURL","React","useEffect","useState","toast","useConfig","useListQuery","useLocale","DraggableSortableItem","DraggableSortable","OrderableRow","OrderableRowDragPreview","baseClass","OrderableTable","appearance","BeforeTable","collection","columns","data","initialData","config","listQueryData","orderableFieldName","query","code","localeCode","serverData","docs","localData","setLocalData","cellMap","setCellMap","dragActiveRowId","setDragActiveRowId","Object","fromEntries","map","item","index","String","id","_id","activeColumns","filter","col","active","includes","accessor","length","_jsx","handleDragEnd","moveFromIndex","moveToIndex","sort","warning","undefined","movedId","newBeforeRow","newAfterRow","previousData","currentData","newData","splice","target","key","newKeyWillBe","jsonBody","collectionSlug","slug","docsToMove","response","fetch","apiRoute","routes","api","path","body","JSON","stringify","credentials","headers","method","status","Error","ok","json","err","error","message","handleDragStart","rowIds","row","_jsxs","className","Boolean","join","ids","onDragEnd","onDragStart","cellPadding","cellSpacing","i","Heading","rowIndex","children","attributes","isDragging","listeners","setNodeRef","transform","transition","dragAttributes","dragListeners","ref","rowId","style","opacity"],"sources":["../../../src/elements/Table/OrderableTable.tsx"],"sourcesContent":["'use client'\n\nimport type { ClientCollectionConfig, Column, OrderableEndpointBody } from 'payload'\n\nimport './index.css'\n\nimport { DragOverlay } from '@dnd-kit/core'\nimport { formatAdminURL } from 'payload/shared'\nimport React, { useEffect, useState } from 'react'\nimport { toast } from 'sonner'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { DraggableSortableItem } from '../DraggableSortable/DraggableSortableItem/index.js'\nimport { DraggableSortable } from '../DraggableSortable/index.js'\nimport { OrderableRow } from './OrderableRow.js'\nimport { OrderableRowDragPreview } from './OrderableRowDragPreview.js'\n\nconst baseClass = 'table'\n\nexport type Props = {\n  readonly appearance?: 'condensed' | 'default'\n  readonly BeforeTable?: React.ReactNode\n  readonly collection: ClientCollectionConfig\n  readonly columns?: Column[]\n  readonly data: Record<string, unknown>[]\n  readonly heading?: React.ReactNode\n}\n\nexport const OrderableTable: React.FC<Props> = ({\n  appearance = 'default',\n  BeforeTable,\n  collection,\n  columns,\n  data: initialData,\n}) => {\n  const { config } = useConfig()\n  const { data: listQueryData, orderableFieldName, query } = useListQuery()\n  const { code: localeCode } = useLocale()\n  // Use the data from ListQueryProvider if available, otherwise use the props\n  const serverData = listQueryData?.docs || initialData\n\n  // Local state to track the current order of rows\n  const [localData, setLocalData] = useState(serverData)\n\n  // id -> index for each column\n  const [cellMap, setCellMap] = useState<Record<string, number>>({})\n\n  const [dragActiveRowId, setDragActiveRowId] = useState<number | string | undefined>()\n\n  // Update local data when server data changes\n  useEffect(() => {\n    setLocalData(serverData)\n    setCellMap(\n      Object.fromEntries(serverData.map((item, index) => [String(item.id ?? item._id), index])),\n    )\n  }, [serverData])\n\n  const activeColumns = columns?.filter((col) => col?.active)\n\n  if (\n    !activeColumns ||\n    activeColumns.filter((col) => !['_dragHandle', '_select'].includes(col.accessor)).length === 0\n  ) {\n    return <div>No columns selected</div>\n  }\n\n  const handleDragEnd = async ({ moveFromIndex, moveToIndex }) => {\n    if (query.sort !== orderableFieldName && query.sort !== `-${orderableFieldName}`) {\n      toast.warning('To reorder the rows you must first sort them by the \"Order\" column')\n      setDragActiveRowId(undefined)\n      return\n    }\n\n    if (moveFromIndex === moveToIndex) {\n      setDragActiveRowId(undefined)\n      return\n    }\n\n    const movedId = localData[moveFromIndex].id ?? localData[moveFromIndex]._id\n    const newBeforeRow =\n      moveToIndex > moveFromIndex ? localData[moveToIndex] : localData[moveToIndex - 1]\n    const newAfterRow =\n      moveToIndex > moveFromIndex ? localData[moveToIndex + 1] : localData[moveToIndex]\n\n    // Store the original data for rollback\n    const previousData = [...localData]\n\n    // Optimisitc update of local state to reorder the rows\n    setLocalData((currentData) => {\n      const newData = [...currentData]\n      // Update the rendered cell for the moved row to show \"pending\"\n      newData[moveFromIndex][orderableFieldName] = `pending`\n      // Move the item in the array\n      newData.splice(moveToIndex, 0, newData.splice(moveFromIndex, 1)[0])\n      return newData\n    })\n\n    try {\n      const target: OrderableEndpointBody['target'] = newBeforeRow\n        ? {\n            id: newBeforeRow.id ?? newBeforeRow._id,\n            key: newBeforeRow[orderableFieldName],\n          }\n        : {\n            id: newAfterRow.id ?? newAfterRow._id,\n            key: newAfterRow[orderableFieldName],\n          }\n\n      const newKeyWillBe =\n        (newBeforeRow && query.sort === orderableFieldName) ||\n        (!newBeforeRow && query.sort === `-${orderableFieldName}`)\n          ? 'greater'\n          : 'less'\n\n      const jsonBody: OrderableEndpointBody = {\n        collectionSlug: collection.slug,\n        docsToMove: [movedId],\n        newKeyWillBe,\n        orderableFieldName,\n        target,\n      }\n\n      const response = await fetch(\n        formatAdminURL({\n          apiRoute: config.routes.api,\n          path: `/reorder?locale=${localeCode}`,\n        }),\n        {\n          body: JSON.stringify(jsonBody),\n          credentials: 'include',\n          headers: {\n            'Content-Type': 'application/json',\n          },\n          method: 'POST',\n        },\n      )\n\n      if (response.status === 403) {\n        throw new Error('You do not have permission to reorder these rows')\n      }\n\n      if (!response.ok) {\n        throw new Error(\n          'Failed to reorder. This can happen if you reorder several rows too quickly. Please try again.',\n        )\n      }\n\n      if (response.status === 200 && (await response.json())['message'] === 'initial migration') {\n        throw new Error(\n          'You have enabled \"orderable\" on a collection with existing documents' +\n            'and this is the first time you have sorted documents. We have run an automatic migration ' +\n            'to add an initial order to the documents. Please refresh the page and try again.',\n        )\n      }\n    } catch (err) {\n      const error = err instanceof Error ? err.message : String(err)\n      // Rollback to previous state if the request fails\n      setLocalData(previousData)\n      toast.error(error)\n    } finally {\n      setDragActiveRowId(undefined)\n    }\n  }\n\n  const handleDragStart = ({ id }) => {\n    setDragActiveRowId(id)\n  }\n\n  const rowIds = localData.map((row) => row.id ?? row._id)\n\n  return (\n    <div\n      className={[baseClass, appearance && `${baseClass}--appearance-${appearance}`]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {BeforeTable}\n      <DraggableSortable ids={rowIds} onDragEnd={handleDragEnd} onDragStart={handleDragStart}>\n        <table cellPadding=\"0\" cellSpacing=\"0\">\n          <thead>\n            <tr>\n              {activeColumns.map((col, i) => (\n                <th id={`heading-${col.accessor}`} key={i}>\n                  {col.Heading}\n                </th>\n              ))}\n            </tr>\n          </thead>\n          <tbody>\n            {localData.map((row, rowIndex) => (\n              <DraggableSortableItem id={rowIds[rowIndex]} key={rowIds[rowIndex]}>\n                {({ attributes, isDragging, listeners, setNodeRef, transform, transition }) => (\n                  <OrderableRow\n                    cellMap={cellMap}\n                    className={`row-${rowIndex + 1}`}\n                    columns={activeColumns}\n                    dragAttributes={attributes}\n                    dragListeners={listeners}\n                    ref={setNodeRef}\n                    rowId={row.id ?? row._id}\n                    style={{\n                      opacity: isDragging ? 0 : 1,\n                      transform,\n                      transition,\n                    }}\n                  />\n                )}\n              </DraggableSortableItem>\n            ))}\n          </tbody>\n        </table>\n\n        <DragOverlay>\n          <OrderableRowDragPreview\n            className={[baseClass, `${baseClass}--drag-preview`].join(' ')}\n            rowId={dragActiveRowId}\n          >\n            <OrderableRow cellMap={cellMap} columns={activeColumns} rowId={dragActiveRowId} />\n          </OrderableRowDragPreview>\n        </DragOverlay>\n      </DraggableSortable>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"OrderableTable.js","names":["DragOverlay","formatAdminURL","React","useEffect","useState","toast","useConfig","useListQuery","useLocale","useTranslation","DraggableSortableItem","DraggableSortable","OrderableRow","OrderableRowDragPreview","baseClass","mustSortByOrderToastId","OrderableTable","appearance","BeforeTable","collection","columns","data","initialData","config","listQueryData","orderableFieldName","query","code","localeCode","t","serverData","docs","isOrderable","sort","localData","setLocalData","cellMap","setCellMap","dragActiveRowId","setDragActiveRowId","Object","fromEntries","map","item","index","String","id","_id","activeColumns","filter","col","active","includes","accessor","length","_jsx","handleDragEnd","moveFromIndex","moveToIndex","warning","undefined","movedId","newBeforeRow","newAfterRow","previousData","currentData","newData","splice","target","key","newKeyWillBe","jsonBody","collectionSlug","slug","docsToMove","response","fetch","apiRoute","routes","api","path","body","JSON","stringify","credentials","headers","method","status","Error","ok","json","err","error","message","handleDragStart","handleDisabledDragAttempt","rowIds","row","_jsxs","className","Boolean","join","ids","onDragEnd","onDragStart","cellPadding","cellSpacing","i","Heading","rowIndex","disabled","children","attributes","isDragging","listeners","setNodeRef","transform","transition","dragAttributes","dragListeners","onDisabledDragAttempt","ref","rowId","style","opacity"],"sources":["../../../src/elements/Table/OrderableTable.tsx"],"sourcesContent":["'use client'\n\nimport type { ClientCollectionConfig, Column, OrderableEndpointBody } from 'payload'\n\nimport './index.css'\n\nimport { DragOverlay } from '@dnd-kit/core'\nimport { formatAdminURL } from 'payload/shared'\nimport React, { useEffect, useState } from 'react'\nimport { toast } from 'sonner'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { DraggableSortableItem } from '../DraggableSortable/DraggableSortableItem/index.js'\nimport { DraggableSortable } from '../DraggableSortable/index.js'\nimport { OrderableRow } from './OrderableRow.js'\nimport { OrderableRowDragPreview } from './OrderableRowDragPreview.js'\n\nconst baseClass = 'table'\n\n// A stable id so repeated attempts (e.g. holding Space) update the same toast instead of stacking new ones\nconst mustSortByOrderToastId = 'orderable-table-must-sort-by-order'\n\nexport type Props = {\n  readonly appearance?: 'condensed' | 'default'\n  readonly BeforeTable?: React.ReactNode\n  readonly collection: ClientCollectionConfig\n  readonly columns?: Column[]\n  readonly data: Record<string, unknown>[]\n  readonly heading?: React.ReactNode\n}\n\nexport const OrderableTable: React.FC<Props> = ({\n  appearance = 'default',\n  BeforeTable,\n  collection,\n  columns,\n  data: initialData,\n}) => {\n  const { config } = useConfig()\n  const { data: listQueryData, orderableFieldName, query } = useListQuery()\n  const { code: localeCode } = useLocale()\n  const { t } = useTranslation()\n  // Use the data from ListQueryProvider if available, otherwise use the props\n  const serverData = listQueryData?.docs || initialData\n\n  const isOrderable = query.sort === orderableFieldName || query.sort === `-${orderableFieldName}`\n\n  // Local state to track the current order of rows\n  const [localData, setLocalData] = useState(serverData)\n\n  // id -> index for each column\n  const [cellMap, setCellMap] = useState<Record<string, number>>({})\n\n  const [dragActiveRowId, setDragActiveRowId] = useState<number | string | undefined>()\n\n  // Update local data when server data changes\n  useEffect(() => {\n    setLocalData(serverData)\n    setCellMap(\n      Object.fromEntries(serverData.map((item, index) => [String(item.id ?? item._id), index])),\n    )\n  }, [serverData])\n\n  const activeColumns = columns?.filter((col) => col?.active)\n\n  if (\n    !activeColumns ||\n    activeColumns.filter((col) => !['_dragHandle', '_select'].includes(col.accessor)).length === 0\n  ) {\n    return <div>No columns selected</div>\n  }\n\n  const handleDragEnd = async ({ moveFromIndex, moveToIndex }) => {\n    if (!isOrderable) {\n      toast.warning(t('general:sortByOrderToReorder'), { id: mustSortByOrderToastId })\n      setDragActiveRowId(undefined)\n      return\n    }\n\n    if (moveFromIndex === moveToIndex) {\n      setDragActiveRowId(undefined)\n      return\n    }\n\n    const movedId = localData[moveFromIndex].id ?? localData[moveFromIndex]._id\n    const newBeforeRow =\n      moveToIndex > moveFromIndex ? localData[moveToIndex] : localData[moveToIndex - 1]\n    const newAfterRow =\n      moveToIndex > moveFromIndex ? localData[moveToIndex + 1] : localData[moveToIndex]\n\n    // Store the original data for rollback\n    const previousData = [...localData]\n\n    // Optimisitc update of local state to reorder the rows\n    setLocalData((currentData) => {\n      const newData = [...currentData]\n      // Update the rendered cell for the moved row to show \"pending\"\n      newData[moveFromIndex][orderableFieldName] = `pending`\n      // Move the item in the array\n      newData.splice(moveToIndex, 0, newData.splice(moveFromIndex, 1)[0])\n      return newData\n    })\n\n    try {\n      const target: OrderableEndpointBody['target'] = newBeforeRow\n        ? {\n            id: newBeforeRow.id ?? newBeforeRow._id,\n            key: newBeforeRow[orderableFieldName],\n          }\n        : {\n            id: newAfterRow.id ?? newAfterRow._id,\n            key: newAfterRow[orderableFieldName],\n          }\n\n      const newKeyWillBe =\n        (newBeforeRow && query.sort === orderableFieldName) ||\n        (!newBeforeRow && query.sort === `-${orderableFieldName}`)\n          ? 'greater'\n          : 'less'\n\n      const jsonBody: OrderableEndpointBody = {\n        collectionSlug: collection.slug,\n        docsToMove: [movedId],\n        newKeyWillBe,\n        orderableFieldName,\n        target,\n      }\n\n      const response = await fetch(\n        formatAdminURL({\n          apiRoute: config.routes.api,\n          path: `/reorder?locale=${localeCode}`,\n        }),\n        {\n          body: JSON.stringify(jsonBody),\n          credentials: 'include',\n          headers: {\n            'Content-Type': 'application/json',\n          },\n          method: 'POST',\n        },\n      )\n\n      if (response.status === 403) {\n        throw new Error('You do not have permission to reorder these rows')\n      }\n\n      if (!response.ok) {\n        throw new Error(\n          'Failed to reorder. This can happen if you reorder several rows too quickly. Please try again.',\n        )\n      }\n\n      if (response.status === 200 && (await response.json())['message'] === 'initial migration') {\n        throw new Error(\n          'You have enabled \"orderable\" on a collection with existing documents' +\n            'and this is the first time you have sorted documents. We have run an automatic migration ' +\n            'to add an initial order to the documents. Please refresh the page and try again.',\n        )\n      }\n    } catch (err) {\n      const error = err instanceof Error ? err.message : String(err)\n      // Rollback to previous state if the request fails\n      setLocalData(previousData)\n      toast.error(error)\n    } finally {\n      setDragActiveRowId(undefined)\n    }\n  }\n\n  const handleDragStart = ({ id }) => {\n    setDragActiveRowId(id)\n  }\n\n  const handleDisabledDragAttempt = () => {\n    toast.warning(t('general:sortByOrderToReorder'), { id: mustSortByOrderToastId })\n  }\n\n  const rowIds = localData.map((row) => row.id ?? row._id)\n\n  return (\n    <div\n      className={[baseClass, appearance && `${baseClass}--appearance-${appearance}`]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {BeforeTable}\n      <DraggableSortable ids={rowIds} onDragEnd={handleDragEnd} onDragStart={handleDragStart}>\n        <table cellPadding=\"0\" cellSpacing=\"0\">\n          <thead>\n            <tr>\n              {activeColumns.map((col, i) => (\n                <th id={`heading-${col.accessor}`} key={i}>\n                  {col.Heading}\n                </th>\n              ))}\n            </tr>\n          </thead>\n          <tbody>\n            {localData.map((row, rowIndex) => (\n              <DraggableSortableItem\n                disabled={!isOrderable}\n                id={rowIds[rowIndex]}\n                key={rowIds[rowIndex]}\n              >\n                {({ attributes, isDragging, listeners, setNodeRef, transform, transition }) => (\n                  <OrderableRow\n                    cellMap={cellMap}\n                    className={`row-${rowIndex + 1}`}\n                    columns={activeColumns}\n                    dragAttributes={attributes}\n                    dragListeners={listeners}\n                    isOrderable={isOrderable}\n                    onDisabledDragAttempt={handleDisabledDragAttempt}\n                    ref={setNodeRef}\n                    rowId={row.id ?? row._id}\n                    style={{\n                      opacity: isDragging ? 0 : 1,\n                      transform,\n                      transition,\n                    }}\n                  />\n                )}\n              </DraggableSortableItem>\n            ))}\n          </tbody>\n        </table>\n\n        <DragOverlay>\n          <OrderableRowDragPreview\n            className={[baseClass, `${baseClass}--drag-preview`].join(' ')}\n            rowId={dragActiveRowId}\n          >\n            <OrderableRow cellMap={cellMap} columns={activeColumns} rowId={dragActiveRowId} />\n          </OrderableRowDragPreview>\n        </DragOverlay>\n      </DraggableSortable>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Table/index.css

@@ -75,6 +75,29 @@
       padding-inline-start: var(--spacer-3);
     }
 
+    /* Underline treatment for a cell's primary link. Linked cells get it for free; a table that
+     * renders its own anchor inside the cell (e.g. the hierarchy tables) opts in with `cell-link`. */
+    td.cell--linked > :is(a, button),
+    .cell-link {
+      font-weight: var(--text-body-medium-strong-font-weight);
+      text-decoration-line: underline;
+      text-decoration-style: solid;
+      text-decoration-skip-ink: none;
+      text-decoration-color: var(--color-border);
+      text-decoration-thickness: auto;
+      text-underline-offset: 2px;
+      text-underline-position: from-font;
+
+      &:hover {
+        text-decoration-color: var(--color-text);
+      }
+    }
+
+    /* The ID cell renders its own pill with a hover background instead of an underline */
+    td.cell--linked > :is(a, button):has(.id-label) {
+      text-decoration-line: none;
+    }
+
     #heading-_select,
     .cell-_select {
       width: var(--spacer-5);
@@ -84,6 +107,18 @@
       text-align: center;
     }
 
+    /* Size the locked-row lock icon to the checkbox's 16px box (keeping the column
+     * width stable) and center it like the checkbox; the larger icon overflows. */
+    .cell-_select .locked {
+      display: flex;
+      height: var(--spacer-3);
+      width: var(--spacer-3);
+
+      svg {
+        flex-shrink: 0;
+      }
+    }
+
     #heading-_dragHandle {
       display: flex;
       align-items: center;
@@ -99,6 +134,12 @@
       vertical-align: middle;
     }
 
+    .cell-_dragHandle > div {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
     tbody tr {
       position: relative;
       border-top: var(--stroke-width-small) solid var(--color-border);
@@ -130,7 +171,10 @@
 
   /* Condensed appearance */
   .table--appearance-condensed {
+    border: var(--stroke-width-small) solid var(--color-border);
     border-radius: var(--radius-medium);
+    scrollbar-width: thin;
+    scrollbar-color: var(--scrollbar-color) transparent;
 
     table {
       border-collapse: collapse;
@@ -200,16 +244,19 @@
         padding: 0;
       }
 
-      > :is(a, button) {
+      > :is(a, button, .drawer-link) {
         display: flex;
         align-items: center;
         width: 100%;
         padding: 0 var(--spacer-2-5);
         min-height: var(--spacer-5);
+      }
+
+      > :is(a, button) {
         cursor: pointer;
       }
 
-      &:first-child > :is(a, button) {
+      &:first-child > :is(a, button, .drawer-link) {
         padding-inline-start: var(--spacer-2-5);
       }
     }

package/dist/elements/TableSection/index.css

@@ -49,7 +49,6 @@
     }
 
     .table-section__content {
-      padding: 0 calc(var(--spacer-3) - var(--spacer-2));
       padding-bottom: var(--spacer-2);
     }
 

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Tabs/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,OAAO,CAAC,MAAM,SAAS,MAAM,GAAG,MAAM,IAAI;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,SAAS,CAAC,MAAM,SAAS,MAAM,GAAG,MAAM,IAAI;IACtD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC,EAAE,CAAA;IACvB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,eAAO,MAAM,IAAI,GAAI,MAAM,SAAS,MAAM,GAAG,MAAM,EAAE,uCAKlD,SAAS,CAAC,MAAM,CAAC,sBAgBnB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,CAaA,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,CAiCA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Tabs/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,OAAO,CAAC,MAAM,SAAS,MAAM,GAAG,MAAM,IAAI;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,SAAS,CAAC,MAAM,SAAS,MAAM,GAAG,MAAM,IAAI;IACtD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC,EAAE,CAAA;IACvB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,eAAO,MAAM,IAAI,GAAI,MAAM,SAAS,MAAM,GAAG,MAAM,yCAKhD,SAAS,CAAC,MAAM,CAAC,sBAgBnB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,CAaA,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,CAiCA,CAAA"}

package/dist/elements/Thumbnail/createThumbnail.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createThumbnail.d.ts","sourceRoot":"","sources":["../../../src/elements/Thumbnail/createThumbnail.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,eAAe,GAAI,MAAM,IAAI,KAAG,OAAO,CAAC,MAAM,CAoD1D,CAAA"}
+{"version":3,"file":"createThumbnail.d.ts","sourceRoot":"","sources":["../../../src/elements/Thumbnail/createThumbnail.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,eAAe,SAAU,IAAI,KAAG,OAAO,CAAC,MAAM,CAoD1D,CAAA"}

package/dist/elements/Thumbnail/index.css

@@ -0,0 +1,41 @@
+@layer payload-default {
+  .thumbnail:not(.thumbnail--size-none) {
+    min-height: 100%;
+    flex-shrink: 0;
+    align-self: stretch;
+    overflow: hidden;
+  }
+
+  .thumbnail:not(.thumbnail--size-none) img,
+  .thumbnail:not(.thumbnail--size-none) svg {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .thumbnail--size-expand {
+    max-height: 100%;
+    width: 100%;
+  }
+
+  .thumbnail--size-large {
+    max-height: calc(var(--spacer-6) * 4.5);
+    width: calc(var(--spacer-6) * 4.5);
+  }
+
+  .thumbnail--size-medium {
+    max-height: calc(var(--spacer-6) * 3.5);
+    width: calc(var(--spacer-6) * 3.5);
+  }
+
+  .thumbnail--size-small {
+    max-height: calc(var(--spacer-6) * 2.5);
+    width: calc(var(--spacer-6) * 2.5);
+  }
+
+  @media (max-width: 1440px) {
+    .thumbnail .thumbnail {
+      width: calc(var(--spacer-6) * 2.5);
+    }
+  }
+}

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import './index.scss';
+import './index.css';
 import type { SanitizedCollectionConfig } from 'payload';
 export type ThumbnailProps = {
     className?: string;
@@ -7,9 +7,9 @@ export type ThumbnailProps = {
     doc?: Record<string, unknown>;
     fileSrc?: string;
     height?: number;
-    imageCacheTag?: string;
+    imageCacheTag?: false | string;
     size?: 'expand' | 'large' | 'medium' | 'none' | 'small';
-    uploadConfig?: SanitizedCollectionConfig['upload'];
+    uploadConfig?: Omit<SanitizedCollectionConfig['upload'], 'uploadInstructions'>;
     width?: number;
 };
 export declare const Thumbnail: React.FC<ThumbnailProps>;
@@ -18,7 +18,7 @@ type ThumbnailComponentProps = {
     readonly className?: string;
     readonly filename: string;
     readonly fileSrc: string;
-    readonly imageCacheTag?: string;
+    readonly imageCacheTag?: false | string;
     readonly size?: 'expand' | 'large' | 'medium' | 'none' | 'small';
 };
 export declare function ThumbnailComponent(props: ThumbnailComponentProps): React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Thumbnail/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAIrB,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAMxD,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IACvD,YAAY,CAAC,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;IAClD,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA2C9C,CAAA;AAED,KAAK,uBAAuB,GAAG;IAC7B,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAA;IAC/B,QAAQ,CAAC,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;CACjE,CAAA;AACD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,qBAmChE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Thumbnail/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,CAAA;AAIpB,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAMxD,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,aAAa,CAAC,EAAE,KAAK,GAAG,MAAM,CAAA;IAC9B,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IACvD,YAAY,CAAC,EAAE,IAAI,CAAC,yBAAyB,CAAC,QAAQ,CAAC,EAAE,oBAAoB,CAAC,CAAA;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA2C9C,CAAA;AAED,KAAK,uBAAuB,GAAG;IAC7B,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,GAAG,MAAM,CAAA;IACvC,QAAQ,CAAC,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;CACjE,CAAA;AACD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,qBAmChE"}

package/dist/elements/Thumbnail/index.js

@@ -2,7 +2,7 @@
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import './index.scss';
+import './index.css';
 const baseClass = 'thumbnail';
 import { File } from '../../graphics/File/index.js';
 import { appendCacheTag } from '../../utilities/appendCacheTag.js';

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","baseClass","File","appendCacheTag","ShimmerEffect","Thumbnail","props","className","doc","filename","fileSrc","height","imageCacheTag","size","width","fileExists","setFileExists","useState","undefined","classNames","join","src","useMemo","useEffect","img","Image","onload","onerror","_jsxs","_jsx","alt","ThumbnailComponent"],"sources":["../../../src/elements/Thumbnail/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'thumbnail'\n\nimport type { SanitizedCollectionConfig } from 'payload'\n\nimport { File } from '../../graphics/File/index.js'\nimport { appendCacheTag } from '../../utilities/appendCacheTag.js'\nimport { ShimmerEffect } from '../ShimmerEffect/index.js'\n\nexport type ThumbnailProps = {\n  className?: string\n  collectionSlug?: string\n  doc?: Record<string, unknown>\n  fileSrc?: string\n  height?: number\n  imageCacheTag?: string\n  size?: 'expand' | 'large' | 'medium' | 'none' | 'small'\n  uploadConfig?: SanitizedCollectionConfig['upload']\n  width?: number\n}\n\nexport const Thumbnail: React.FC<ThumbnailProps> = (props) => {\n  const {\n    className = '',\n    doc: { filename } = {},\n    fileSrc,\n    height,\n    imageCacheTag,\n    size,\n    width,\n  } = props\n  const [fileExists, setFileExists] = React.useState(undefined)\n\n  const classNames = [baseClass, `${baseClass}--size-${size || 'medium'}`, className].join(' ')\n\n  const src = React.useMemo(\n    () => (fileSrc ? appendCacheTag(fileSrc, imageCacheTag) : null),\n    [fileSrc, imageCacheTag],\n  )\n\n  React.useEffect(() => {\n    if (!src) {\n      setFileExists(false)\n      return\n    }\n    setFileExists(undefined)\n\n    const img = new Image()\n    img.src = src\n    img.onload = () => {\n      setFileExists(true)\n    }\n    img.onerror = () => {\n      setFileExists(false)\n    }\n  }, [src])\n\n  return (\n    <div className={classNames}>\n      {fileExists === undefined && <ShimmerEffect height=\"100%\" />}\n      {fileExists && <img alt={filename as string} height={height} src={src} width={width} />}\n      {fileExists === false && <File />}\n    </div>\n  )\n}\n\ntype ThumbnailComponentProps = {\n  readonly alt?: string\n  readonly className?: string\n  readonly filename: string\n  readonly fileSrc: string\n  readonly imageCacheTag?: string\n  readonly size?: 'expand' | 'large' | 'medium' | 'none' | 'small'\n}\nexport function ThumbnailComponent(props: ThumbnailComponentProps) {\n  const { alt, className = '', filename, fileSrc, imageCacheTag, size } = props\n  const [fileExists, setFileExists] = React.useState(undefined)\n\n  const classNames = [baseClass, `${baseClass}--size-${size || 'medium'}`, className].join(' ')\n\n  const src = React.useMemo(\n    () => (fileSrc ? appendCacheTag(fileSrc, imageCacheTag) : null),\n    [fileSrc, imageCacheTag],\n  )\n\n  React.useEffect(() => {\n    if (!src) {\n      setFileExists(false)\n      return\n    }\n    setFileExists(undefined)\n\n    const img = new Image()\n    img.src = src\n    img.onload = () => {\n      setFileExists(true)\n    }\n    img.onerror = () => {\n      setFileExists(false)\n    }\n  }, [src])\n\n  return (\n    <div className={classNames}>\n      {fileExists === undefined && <ShimmerEffect height=\"100%\" />}\n      {fileExists && <img alt={alt || filename} src={src} />}\n      {fileExists === false && <File />}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","baseClass","File","appendCacheTag","ShimmerEffect","Thumbnail","props","className","doc","filename","fileSrc","height","imageCacheTag","size","width","fileExists","setFileExists","useState","undefined","classNames","join","src","useMemo","useEffect","img","Image","onload","onerror","_jsxs","_jsx","alt","ThumbnailComponent"],"sources":["../../../src/elements/Thumbnail/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport './index.css'\n\nconst baseClass = 'thumbnail'\n\nimport type { SanitizedCollectionConfig } from 'payload'\n\nimport { File } from '../../graphics/File/index.js'\nimport { appendCacheTag } from '../../utilities/appendCacheTag.js'\nimport { ShimmerEffect } from '../ShimmerEffect/index.js'\n\nexport type ThumbnailProps = {\n  className?: string\n  collectionSlug?: string\n  doc?: Record<string, unknown>\n  fileSrc?: string\n  height?: number\n  imageCacheTag?: false | string\n  size?: 'expand' | 'large' | 'medium' | 'none' | 'small'\n  uploadConfig?: Omit<SanitizedCollectionConfig['upload'], 'uploadInstructions'>\n  width?: number\n}\n\nexport const Thumbnail: React.FC<ThumbnailProps> = (props) => {\n  const {\n    className = '',\n    doc: { filename } = {},\n    fileSrc,\n    height,\n    imageCacheTag,\n    size,\n    width,\n  } = props\n  const [fileExists, setFileExists] = React.useState(undefined)\n\n  const classNames = [baseClass, `${baseClass}--size-${size || 'medium'}`, className].join(' ')\n\n  const src = React.useMemo(\n    () => (fileSrc ? appendCacheTag(fileSrc, imageCacheTag) : null),\n    [fileSrc, imageCacheTag],\n  )\n\n  React.useEffect(() => {\n    if (!src) {\n      setFileExists(false)\n      return\n    }\n    setFileExists(undefined)\n\n    const img = new Image()\n    img.src = src\n    img.onload = () => {\n      setFileExists(true)\n    }\n    img.onerror = () => {\n      setFileExists(false)\n    }\n  }, [src])\n\n  return (\n    <div className={classNames}>\n      {fileExists === undefined && <ShimmerEffect height=\"100%\" />}\n      {fileExists && <img alt={filename as string} height={height} src={src} width={width} />}\n      {fileExists === false && <File />}\n    </div>\n  )\n}\n\ntype ThumbnailComponentProps = {\n  readonly alt?: string\n  readonly className?: string\n  readonly filename: string\n  readonly fileSrc: string\n  readonly imageCacheTag?: false | string\n  readonly size?: 'expand' | 'large' | 'medium' | 'none' | 'small'\n}\nexport function ThumbnailComponent(props: ThumbnailComponentProps) {\n  const { alt, className = '', filename, fileSrc, imageCacheTag, size } = props\n  const [fileExists, setFileExists] = React.useState(undefined)\n\n  const classNames = [baseClass, `${baseClass}--size-${size || 'medium'}`, className].join(' ')\n\n  const src = React.useMemo(\n    () => (fileSrc ? appendCacheTag(fileSrc, imageCacheTag) : null),\n    [fileSrc, imageCacheTag],\n  )\n\n  React.useEffect(() => {\n    if (!src) {\n      setFileExists(false)\n      return\n    }\n    setFileExists(undefined)\n\n    const img = new Image()\n    img.src = src\n    img.onload = () => {\n      setFileExists(true)\n    }\n    img.onerror = () => {\n      setFileExists(false)\n    }\n  }, [src])\n\n  return (\n    <div className={classNames}>\n      {fileExists === undefined && <ShimmerEffect height=\"100%\" />}\n      {fileExists && <img alt={alt || filename} src={src} />}\n      {fileExists === false && <File />}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/TimezonePicker/index.css

@@ -6,7 +6,7 @@
     align-items: center;
     position: relative;
 
-    --field-min-height: var(--text-body-medium-line-height);
+    --field-min-height-large: var(--text-body-medium-line-height);
 
     .shimmer-effect {
       max-width: calc(2 * var(--spacer-4));

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/TimezonePicker/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAa9B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAQvC,OAAO,aAAa,CAAA;AAgEpB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAuE1C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/TimezonePicker/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAa9B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAQvC,OAAO,aAAa,CAAA;AAqEpB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAuE1C,CAAA"}

package/dist/elements/TimezonePicker/index.js

@@ -15,8 +15,12 @@ const SmallDropdownIndicator = props => {
     innerProps: {
       ref,
       ...restInnerProps
-    }
+    },
+    isDisabled
   } = props;
+  if (isDisabled) {
+    return null;
+  }
   return /*#__PURE__*/_jsx("button", {
     className: "timezone-picker__dropdown-indicator",
     ref: ref,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useMemo","components","rsComponents","CheckIcon","ChevronIcon","CircledXIcon","useTranslation","ReactSelect","formatOptions","SmallDropdownIndicator","props","innerProps","ref","restInnerProps","_jsx","className","onKeyDown","e","key","type","size","SmallClearIndicator","clearValue","stopPropagation","role","tabIndex","TimezoneOption","children","_jsxs","Option","TimezonePicker","id","onChange","onChangeFromProps","options","optionsFromProps","readOnly","readOnlyFromProps","required","selectedTimezone","selectedTimezoneFromProps","t","find","value","Boolean","length","classNames","menu","menuList","ClearIndicator","DropdownIndicator","customProps","menuPortalTheme","disabled","inputId","isClearable","isCreatable","val","placeholder","styles","control","base","flexWrap","option","alignItems","display","gap","minWidth"],"sources":["../../../src/elements/TimezonePicker/index.tsx"],"sourcesContent":["'use client'\n\nimport type { OptionObject } from 'payload'\nimport type React from 'react'\nimport type { JSX } from 'react'\nimport type {\n  ClearIndicatorProps,\n  DropdownIndicatorProps,\n  OptionProps,\n  StylesConfig,\n} from 'react-select'\n\nimport { useMemo } from 'react'\nimport { components as rsComponents } from 'react-select'\n\nimport type { Option as OptionType } from '../ReactSelect/types.js'\nimport type { Props } from './types.js'\n\nimport { CheckIcon } from '../../icons/Check/index.js'\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { CircledXIcon } from '../../icons/CircledX/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { ReactSelect } from '../ReactSelect/index.js'\nimport { formatOptions } from '../WhereBuilder/Condition/Select/formatOptions.js'\nimport './index.css'\n\nconst SmallDropdownIndicator: React.FC<\n  {\n    innerProps: JSX.IntrinsicElements['button']\n  } & DropdownIndicatorProps<OptionType, true>\n> = (props) => {\n  const {\n    innerProps: { ref, ...restInnerProps },\n  } = props\n\n  return (\n    <button\n      className=\"timezone-picker__dropdown-indicator\"\n      ref={ref}\n      {...restInnerProps}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter') {\n          e.key = ' '\n        }\n      }}\n      type=\"button\"\n    >\n      <ChevronIcon size={16} />\n    </button>\n  )\n}\n\nconst SmallClearIndicator: React.FC<ClearIndicatorProps<OptionType, true>> = (props) => {\n  const {\n    clearValue,\n    innerProps: { ref, ...restInnerProps },\n  } = props\n\n  return (\n    <div\n      className=\"timezone-picker__clear-indicator\"\n      ref={typeof ref === 'string' ? null : ref}\n      {...restInnerProps}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter') {\n          clearValue()\n          e.stopPropagation()\n        }\n      }}\n      role=\"button\"\n      tabIndex={0}\n    >\n      <CircledXIcon size={24} />\n    </div>\n  )\n}\n\nconst TimezoneOption: React.FC<OptionProps<OptionType, false>> = (props) => {\n  const { children } = props\n\n  return (\n    <rsComponents.Option {...props}>\n      <CheckIcon className=\"timezone-picker__option-check\" size={16} />\n      <span className=\"timezone-picker__option-label\">{children}</span>\n    </rsComponents.Option>\n  )\n}\n\nexport const TimezonePicker: React.FC<Props> = (props) => {\n  const {\n    id,\n    onChange: onChangeFromProps,\n    options: optionsFromProps,\n    readOnly: readOnlyFromProps,\n    required,\n    selectedTimezone: selectedTimezoneFromProps,\n  } = props\n\n  const { t } = useTranslation()\n\n  const options = formatOptions(optionsFromProps)\n\n  const selectedTimezone = useMemo(() => {\n    return options.find((t) => {\n      const value = typeof t === 'string' ? t : t.value\n      return value === selectedTimezoneFromProps\n    })\n  }, [options, selectedTimezoneFromProps])\n\n  const readOnly = Boolean(readOnlyFromProps) || options.length === 1\n\n  return (\n    <div className=\"timezone-picker-wrapper\">\n      <span className=\"timezone-picker__label\">\n        {t('general:timezone')}\n        {required && <span className=\"timezone-picker__required\">*</span>}\n      </span>\n      <ReactSelect\n        className=\"timezone-picker\"\n        classNames={{\n          menu: () => 'timezone-picker__menu',\n          menuList: () => 'timezone-picker__menu-list',\n        }}\n        components={{\n          ClearIndicator: SmallClearIndicator,\n          DropdownIndicator: SmallDropdownIndicator,\n          Option: TimezoneOption,\n        }}\n        customProps={{ menuPortalTheme: 'dark' }}\n        disabled={readOnly}\n        inputId={id}\n        isClearable={!required}\n        isCreatable={false}\n        onChange={(val: OptionObject) => {\n          if (onChangeFromProps) {\n            onChangeFromProps(val?.value || '')\n          }\n        }}\n        options={options}\n        placeholder={t('general:none')}\n        styles={\n          {\n            control: (base) => ({\n              ...base,\n              flexWrap: 'nowrap',\n            }),\n            option: (base) => ({\n              ...base,\n              alignItems: 'center',\n              display: 'flex',\n              gap: 'var(--spacer-1)',\n              minWidth: 0,\n            }),\n          } as StylesConfig<OptionType>\n        }\n        value={selectedTimezone}\n      />\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["useMemo","components","rsComponents","CheckIcon","ChevronIcon","CircledXIcon","useTranslation","ReactSelect","formatOptions","SmallDropdownIndicator","props","innerProps","ref","restInnerProps","isDisabled","_jsx","className","onKeyDown","e","key","type","size","SmallClearIndicator","clearValue","stopPropagation","role","tabIndex","TimezoneOption","children","_jsxs","Option","TimezonePicker","id","onChange","onChangeFromProps","options","optionsFromProps","readOnly","readOnlyFromProps","required","selectedTimezone","selectedTimezoneFromProps","t","find","value","Boolean","length","classNames","menu","menuList","ClearIndicator","DropdownIndicator","customProps","menuPortalTheme","disabled","inputId","isClearable","isCreatable","val","placeholder","styles","control","base","flexWrap","option","alignItems","display","gap","minWidth"],"sources":["../../../src/elements/TimezonePicker/index.tsx"],"sourcesContent":["'use client'\n\nimport type { OptionObject } from 'payload'\nimport type React from 'react'\nimport type { JSX } from 'react'\nimport type {\n  ClearIndicatorProps,\n  DropdownIndicatorProps,\n  OptionProps,\n  StylesConfig,\n} from 'react-select'\n\nimport { useMemo } from 'react'\nimport { components as rsComponents } from 'react-select'\n\nimport type { Option as OptionType } from '../ReactSelect/types.js'\nimport type { Props } from './types.js'\n\nimport { CheckIcon } from '../../icons/Check/index.js'\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { CircledXIcon } from '../../icons/CircledX/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { ReactSelect } from '../ReactSelect/index.js'\nimport { formatOptions } from '../WhereBuilder/Condition/Select/formatOptions.js'\nimport './index.css'\n\nconst SmallDropdownIndicator: React.FC<\n  {\n    innerProps: JSX.IntrinsicElements['button']\n  } & DropdownIndicatorProps<OptionType, true>\n> = (props) => {\n  const {\n    innerProps: { ref, ...restInnerProps },\n    isDisabled,\n  } = props\n\n  if (isDisabled) {\n    return null\n  }\n\n  return (\n    <button\n      className=\"timezone-picker__dropdown-indicator\"\n      ref={ref}\n      {...restInnerProps}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter') {\n          e.key = ' '\n        }\n      }}\n      type=\"button\"\n    >\n      <ChevronIcon size={16} />\n    </button>\n  )\n}\n\nconst SmallClearIndicator: React.FC<ClearIndicatorProps<OptionType, true>> = (props) => {\n  const {\n    clearValue,\n    innerProps: { ref, ...restInnerProps },\n  } = props\n\n  return (\n    <div\n      className=\"timezone-picker__clear-indicator\"\n      ref={typeof ref === 'string' ? null : ref}\n      {...restInnerProps}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter') {\n          clearValue()\n          e.stopPropagation()\n        }\n      }}\n      role=\"button\"\n      tabIndex={0}\n    >\n      <CircledXIcon size={24} />\n    </div>\n  )\n}\n\nconst TimezoneOption: React.FC<OptionProps<OptionType, false>> = (props) => {\n  const { children } = props\n\n  return (\n    <rsComponents.Option {...props}>\n      <CheckIcon className=\"timezone-picker__option-check\" size={16} />\n      <span className=\"timezone-picker__option-label\">{children}</span>\n    </rsComponents.Option>\n  )\n}\n\nexport const TimezonePicker: React.FC<Props> = (props) => {\n  const {\n    id,\n    onChange: onChangeFromProps,\n    options: optionsFromProps,\n    readOnly: readOnlyFromProps,\n    required,\n    selectedTimezone: selectedTimezoneFromProps,\n  } = props\n\n  const { t } = useTranslation()\n\n  const options = formatOptions(optionsFromProps)\n\n  const selectedTimezone = useMemo(() => {\n    return options.find((t) => {\n      const value = typeof t === 'string' ? t : t.value\n      return value === selectedTimezoneFromProps\n    })\n  }, [options, selectedTimezoneFromProps])\n\n  const readOnly = Boolean(readOnlyFromProps) || options.length === 1\n\n  return (\n    <div className=\"timezone-picker-wrapper\">\n      <span className=\"timezone-picker__label\">\n        {t('general:timezone')}\n        {required && <span className=\"timezone-picker__required\">*</span>}\n      </span>\n      <ReactSelect\n        className=\"timezone-picker\"\n        classNames={{\n          menu: () => 'timezone-picker__menu',\n          menuList: () => 'timezone-picker__menu-list',\n        }}\n        components={{\n          ClearIndicator: SmallClearIndicator,\n          DropdownIndicator: SmallDropdownIndicator,\n          Option: TimezoneOption,\n        }}\n        customProps={{ menuPortalTheme: 'dark' }}\n        disabled={readOnly}\n        inputId={id}\n        isClearable={!required}\n        isCreatable={false}\n        onChange={(val: OptionObject) => {\n          if (onChangeFromProps) {\n            onChangeFromProps(val?.value || '')\n          }\n        }}\n        options={options}\n        placeholder={t('general:none')}\n        styles={\n          {\n            control: (base) => ({\n              ...base,\n              flexWrap: 'nowrap',\n            }),\n            option: (base) => ({\n              ...base,\n              alignItems: 'center',\n              display: 'flex',\n              gap: 'var(--spacer-1)',\n              minWidth: 0,\n            }),\n          } as StylesConfig<OptionType>\n        }\n        value={selectedTimezone}\n      />\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Tooltip/index.css

@@ -4,15 +4,18 @@
     --caret-height: 7px;
     --caret-offset: 4px;
     --caret-border-color: var(--color-border);
-    --tooltip-x: -50%;
     --tooltip-caret-x: 0px;
+    --tooltip-caret-y: 0px;
     --tooltip-max-width: none;
 
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: var(--z-portal-element);
+    pointer-events: none;
+
     opacity: 0;
     background-color: var(--color-bg-tooltip);
-    position: absolute;
-    z-index: 3;
-    left: 50%;
     max-width: var(--tooltip-max-width);
     padding: var(--spacer-1);
     color: var(--color-text-ontooltip);
@@ -26,6 +29,11 @@
     box-shadow: var(--elevation-300-tooltip);
     visibility: hidden;
 
+    &[data-wrap] {
+      white-space: normal;
+      overflow-wrap: break-word;
+    }
+
     &.field-error {
       background-color: var(--color-bg-danger);
       color: var(--color-text-ondanger);
@@ -51,11 +59,6 @@
     }
   }
 
-  .tooltip--wrap {
-    white-space: normal;
-    overflow-wrap: break-word;
-  }
-
   .tooltip__caret {
     position: absolute;
     pointer-events: none;
@@ -76,7 +79,6 @@
   .tooltip--show {
     visibility: visible;
     opacity: 1;
-    transition: opacity 0.2s ease-in-out;
     cursor: default;
   }
 
@@ -94,13 +96,6 @@
   }
 
   .tooltip--position-top {
-    top: 0;
-    transform: translate3d(
-      var(--tooltip-x),
-      calc(-100% - var(--caret-height) - var(--caret-offset) + 1px),
-      0
-    );
-
     .tooltip__caret {
       --color-border: var(--ramp-grey-700);
       top: calc(100% - 0.5px);
@@ -112,13 +107,6 @@
   }
 
   .tooltip--position-bottom {
-    top: 100%;
-    transform: translate3d(
-      var(--tooltip-x),
-      calc(var(--caret-height) + var(--caret-offset) - 1px),
-      0
-    );
-
     .tooltip__caret {
       bottom: calc(100% - 0.5px);
       transform: rotate(180deg);
@@ -134,28 +122,21 @@
   }
 
   .tooltip--position-left {
-    top: 50%;
-    left: 0;
-    transform: translate3d(calc(-100% - var(--caret-height) - var(--caret-offset)), -50%, 0);
-
     .tooltip__caret {
       top: calc(50% + 0.5px);
       left: calc(100% - 0.5px);
-      transform: translateY(calc(1 * var(--caret-width) / 2)) rotate(-90deg);
+      transform: translateY(calc(1 * var(--caret-width) / 2 + var(--tooltip-caret-y)))
+        rotate(-90deg);
       transform-origin: top left;
     }
   }
 
   .tooltip--position-right {
-    top: 50%;
-    left: 100%;
-    transform: translate3d(calc(var(--caret-height) + var(--caret-offset)), -50%, 0);
-
     .tooltip__caret {
       top: calc(50% + 0.5px);
       left: unset;
       right: calc(100% - 0.5px);
-      transform: translateY(calc(1 * var(--caret-width) / 2)) rotate(90deg);
+      transform: translateY(calc(1 * var(--caret-width) / 2 + var(--tooltip-caret-y))) rotate(90deg);
       transform-origin: top right;
     }
   }

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

@@ -1,17 +1,25 @@
 import React from 'react';
 import './index.css';
+type Side = 'bottom' | 'left' | 'right' | 'top';
 export type Props = {
     alignCaret?: 'center' | 'left' | 'right';
-    boundingRef?: React.RefObject<HTMLElement | null>;
     children: React.ReactNode;
     className?: string;
     delay?: number;
-    position?: 'bottom' | 'left' | 'right' | 'top';
+    /**
+     * Applied to the portaled tooltip element, so it can be located independent of its
+     * position in the DOM (e.g. by tests).
+     */
+    id?: string;
+    position?: Side;
     show?: boolean;
     /**
-     * If the tooltip position should not change depending on if the toolbar is outside the boundingRef. @default false
+     * Disables adaptive placement: the tooltip always renders on `position` (or its
+     * default) instead of flipping to whichever side has room. It does not affect
+     * portaling - every tooltip is portaled to `document.body` regardless. @default false
      */
     staticPositioning?: boolean;
 };
 export declare const Tooltip: React.FC<Props>;
+export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Tooltip/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4D,MAAM,OAAO,CAAA;AAGhF,OAAO,aAAa,CAAA;AAwBpB,MAAM,MAAM,KAAK,GAAG;IAClB,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IACxC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IACjD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,CAAA;IAC9C,IAAI,CAAC,EAAE,OAAO,CAAA;IACd;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;CAC5B,CAAA;AAsBD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAsJnC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Tooltip/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoE,MAAM,OAAO,CAAA;AAGxF,OAAO,aAAa,CAAA;AAOpB,KAAK,IAAI,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,CAAA;AAE/C,MAAM,MAAM,KAAK,GAAG;IAClB,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,CAAC,EAAE,IAAI,CAAA;IACf,IAAI,CAAC,EAAE,OAAO,CAAA;IACd;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;CAC5B,CAAA;AAwCD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAyOnC,CAAA"}