@payloadcms/ui 4.0.0-canary.1 → 4.0.0-canary.2

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","getTranslation","fieldIsHiddenOrDisabled","fieldIsID","isFieldDisabled","React","useCallback","useId","useLayoutEffect","useMemo","useRef","useState","AlignJustifiedIcon","SearchIcon","XIcon","useEditDepth","useTableColumns","useTranslation","Button","DraggableSortable","useDraggableSortable","Switch","baseClass","parseNestedLabel","label","includes","segments","split","length","NestedLabel","_jsx","_Fragment","map","segment","index","_jsxs","Fragment","className","ColumnItem","t0","$","id","active","labelText","onToggle","t","t1","attributes","isDragging","isOver","isSorting","listeners","setNodeRef","transform","t2","t3","t4","t5","filter","Boolean","t6","join","t7","undefined","t8","ref","style","children","size","checked","onChange","ColumnSelector","collectionSlug","onClose","columns","moveColumn","toggleColumn","i18n","uuid","editDepth","searchQuery","setSearchQuery","containerRef","lockedWidth","setLockedWidth","current","offsetWidth","filteredColumns","col","field","columnItems","all","hidden","shown","items","i","accessor","labelWithPrefix","name","filtered","item","toLowerCase","handleDragEnd","moveFromIndex","moveToIndex","allItems","shownCount","fromItem","toItem","fromIsShown","toIsShown","fromIndex","toIndex","allIds","containerStyle","buttonStyle","icon","onClick","e","target","value","placeholder","type","ids","onDragEnd"],"sources":["../../../src/elements/ColumnSelector/index.tsx"],"sourcesContent":["'use client'\n\nimport type { SanitizedCollectionConfig, StaticLabel } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { fieldIsHiddenOrDisabled, fieldIsID, isFieldDisabled } from 'payload/shared'\nimport React, { useCallback, useId, useLayoutEffect, useMemo, useRef, useState } from 'react'\n\nimport { AlignJustifiedIcon } from '../../icons/AlignJustified/index.js'\nimport { SearchIcon } from '../../icons/Search/index.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\nimport { useTableColumns } from '../../providers/TableColumns/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { DraggableSortable } from '../DraggableSortable/index.js'\nimport { useDraggableSortable } from '../DraggableSortable/useDraggableSortable/index.js'\nimport { Switch } from '../Switch/index.js'\nimport './index.css'\n\nconst baseClass = 'column-selector'\n\n/**\n * Parses a nested field label and returns segments for rendering.\n * - For deeply nested paths (more than 3 segments), truncates to [First, \"...\", Last]\n */\nfunction parseNestedLabel(label: string): string[] {\n  if (!label.includes(' > ')) {\n    return [label]\n  }\n\n  const segments = label.split(' > ')\n\n  if (segments.length <= 3) {\n    return segments\n  }\n\n  // For deep nesting, show: First / ... / Last\n  return [segments[0], '...', segments[segments.length - 1]]\n}\n\ntype NestedLabelProps = {\n  readonly label: string\n}\n\nconst NestedLabel: React.FC<NestedLabelProps> = ({ label }) => {\n  const segments = parseNestedLabel(label)\n\n  if (segments.length === 1) {\n    return <>{segments[0]}</>\n  }\n\n  return (\n    <>\n      {segments.map((segment, index) => (\n        <React.Fragment key={index}>\n          {index > 0 && <span className={`${baseClass}__separator`}>/</span>}\n          {segment}\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n\nexport type Props = {\n  readonly collectionSlug: SanitizedCollectionConfig['slug']\n  readonly onClose?: () => void\n}\n\ntype ColumnItemProps = {\n  readonly active: boolean\n  readonly id: string\n  readonly labelText: string\n  readonly onToggle: () => void\n}\n\nconst ColumnItem: React.FC<ColumnItemProps> = ({ id, active, labelText, onToggle }) => {\n  const { t } = useTranslation()\n  const { attributes, isDragging, isOver, isSorting, listeners, setNodeRef, transform } =\n    useDraggableSortable({\n      id,\n    })\n\n  return (\n    <div\n      aria-label={labelText}\n      className={[\n        `${baseClass}__item`,\n        !active && `${baseClass}__item--inactive`,\n        isDragging && `${baseClass}__item--dragging`,\n        isOver && isSorting && !isDragging && `${baseClass}__item--over`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      ref={setNodeRef}\n      style={{\n        // Keep item in place while dragging - don't apply transform\n        transform: isDragging ? undefined : transform,\n        ...attributes.style,\n      }}\n      {...attributes}\n    >\n      <span\n        aria-label={t('general:dragToReorder')}\n        className={`${baseClass}__drag-handle`}\n        {...listeners}\n      >\n        <AlignJustifiedIcon size={16} />\n      </span>\n      <span className={`${baseClass}__item-label`}>\n        <NestedLabel label={labelText} />\n      </span>\n      <Switch checked={active} onChange={onToggle} />\n    </div>\n  )\n}\n\nexport const ColumnSelector: React.FC<Props> = ({ collectionSlug, onClose }) => {\n  const { columns, moveColumn, toggleColumn } = useTableColumns()\n  const { i18n, t } = useTranslation()\n\n  const uuid = useId()\n  const editDepth = useEditDepth()\n  const [searchQuery, setSearchQuery] = useState('')\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [lockedWidth, setLockedWidth] = useState<null | number>(null)\n\n  // Lock the width when search starts to prevent layout shift\n  useLayoutEffect(() => {\n    if (!containerRef.current) {\n      return\n    }\n\n    if (searchQuery && lockedWidth === null) {\n      // Capture width when search starts\n      setLockedWidth(containerRef.current.offsetWidth)\n    } else if (!searchQuery && lockedWidth !== null) {\n      // Release width lock when search is cleared\n      setLockedWidth(null)\n    }\n  }, [searchQuery, lockedWidth])\n\n  const filteredColumns = useMemo(\n    () =>\n      columns?.filter(\n        (col) =>\n          !(fieldIsHiddenOrDisabled(col.field) && !fieldIsID(col.field)) &&\n          !isFieldDisabled(col.field, 'column'),\n      ),\n    [columns],\n  )\n\n  const columnItems = useMemo(() => {\n    if (!filteredColumns) {\n      return { all: [], hidden: [], shown: [] }\n    }\n\n    const items = filteredColumns.map((col, i) => {\n      const { accessor, active, field } = col\n\n      const label =\n        'labelWithPrefix' in field && field.labelWithPrefix !== undefined\n          ? field.labelWithPrefix\n          : 'label' in field && field.label !== undefined\n            ? field.label\n            : 'name' in field && field.name !== undefined\n              ? field.name\n              : accessor\n\n      const labelText =\n        typeof label === 'string' ? label : getTranslation(label as StaticLabel, i18n)\n\n      return {\n        id: `${collectionSlug}-${accessor}-${i}${editDepth ? `-${editDepth}-` : ''}${uuid}`,\n        accessor,\n        active,\n        index: i,\n        label,\n        labelText,\n      }\n    })\n\n    // Filter by search query\n    const filtered = searchQuery\n      ? items.filter((item) => item.labelText.toLowerCase().includes(searchQuery.toLowerCase()))\n      : items\n\n    return {\n      all: items,\n      hidden: filtered.filter((item) => !item.active),\n      shown: filtered.filter((item) => item.active),\n    }\n  }, [collectionSlug, editDepth, filteredColumns, i18n, searchQuery, uuid])\n\n  const handleDragEnd = useCallback(\n    ({ moveFromIndex, moveToIndex }: { moveFromIndex: number; moveToIndex: number }) => {\n      if (moveFromIndex === moveToIndex) {\n        return\n      }\n\n      // All shown items first, then all hidden items\n      const allItems = [...columnItems.shown, ...columnItems.hidden]\n      const shownCount = columnItems.shown.length\n      const fromItem = allItems[moveFromIndex]\n      const toItem = allItems[moveToIndex]\n\n      if (!fromItem || !toItem) {\n        return\n      }\n\n      // Determine if crossing sections\n      const fromIsShown = moveFromIndex < shownCount\n      const toIsShown = moveToIndex < shownCount\n\n      if (fromIsShown !== toIsShown) {\n        // Cross-section move: just toggle the column's active state (show/hide)\n        void toggleColumn(fromItem.accessor)\n        // Don't reorder when crossing sections - the toggle handles the change\n        return\n      }\n\n      // Same-section move: perform the reorder\n      void moveColumn({\n        fromIndex: fromItem.index,\n        toIndex: toItem.index,\n      })\n    },\n    [columnItems.shown, columnItems.hidden, moveColumn, toggleColumn],\n  )\n\n  if (!filteredColumns) {\n    return null\n  }\n\n  // Combined IDs: shown items first, then hidden items\n  const allIds = [...columnItems.shown, ...columnItems.hidden].map((item) => item.id)\n\n  const containerStyle = lockedWidth\n    ? ({ '--column-selector-locked-width': `${lockedWidth}px` } as React.CSSProperties)\n    : undefined\n\n  return (\n    <div\n      className={baseClass}\n      data-popup-prevent-close\n      data-width-locked={lockedWidth ? 'true' : undefined}\n      ref={containerRef}\n      style={containerStyle}\n    >\n      <div className={`${baseClass}__header`}>\n        <span className={`${baseClass}__title`}>{t('general:editColumns')}</span>\n        {onClose && (\n          <Button\n            aria-label={t('general:close')}\n            buttonStyle=\"ghost\"\n            className={`${baseClass}__close`}\n            icon={<XIcon size={24} />}\n            onClick={onClose}\n          />\n        )}\n      </div>\n      <div className={`${baseClass}__search`}>\n        <div className={`${baseClass}__search-bar`}>\n          <SearchIcon size={24} />\n          <input\n            aria-label={t('general:searchColumns')}\n            className={`${baseClass}__search-input`}\n            onChange={(e) => setSearchQuery(e.target.value)}\n            placeholder={t('general:searchColumns')}\n            type=\"text\"\n            value={searchQuery}\n          />\n        </div>\n      </div>\n      <div className={`${baseClass}__content`}>\n        <DraggableSortable ids={allIds} onDragEnd={handleDragEnd}>\n          {columnItems.shown.length === 0 && columnItems.hidden.length === 0 && searchQuery && (\n            <div className={`${baseClass}__no-results`}>{t('general:noMatchesFound')}</div>\n          )}\n          {columnItems.shown.length > 0 && (\n            <div className={`${baseClass}__section`}>\n              <div className={`${baseClass}__section-header`}>{t('general:shownInTable')}</div>\n              {columnItems.shown.map((item) => (\n                <ColumnItem\n                  active={item.active}\n                  id={item.id}\n                  key={item.id}\n                  labelText={item.labelText}\n                  onToggle={() => {\n                    void toggleColumn(item.accessor)\n                  }}\n                />\n              ))}\n            </div>\n          )}\n          {columnItems.hidden.length > 0 && (\n            <div className={`${baseClass}__section`}>\n              <div className={`${baseClass}__section-header`}>{t('general:notShownInTable')}</div>\n              {columnItems.hidden.map((item) => (\n                <ColumnItem\n                  active={item.active}\n                  id={item.id}\n                  key={item.id}\n                  labelText={item.labelText}\n                  onToggle={() => {\n                    void toggleColumn(item.accessor)\n                  }}\n                />\n              ))}\n            </div>\n          )}\n        </DraggableSortable>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","getTranslation","fieldIsHiddenOrDisabled","fieldIsID","isFieldDisabled","React","useCallback","useId","useLayoutEffect","useMemo","useRef","useState","AlignJustifiedIcon","SearchIcon","XIcon","useEditDepth","useTableColumns","useTranslation","Button","DraggableSortable","useDraggableSortable","Switch","baseClass","parseNestedLabel","label","includes","segments","split","length","NestedLabel","_jsx","_Fragment","map","segment","index","_jsxs","Fragment","className","ColumnItem","t0","$","id","active","labelText","onToggle","t","t1","attributes","isDragging","isOver","isSorting","listeners","setNodeRef","transform","t2","t3","t4","t5","filter","Boolean","t6","join","t7","undefined","t8","ref","style","children","size","checked","onChange","ColumnSelector","collectionSlug","onClose","columns","moveColumn","toggleColumn","i18n","uuid","editDepth","searchQuery","setSearchQuery","containerRef","lockedWidth","setLockedWidth","current","offsetWidth","filteredColumns","col","field","columnItems","all","hidden","shown","items","i","accessor","labelWithPrefix","name","filtered","item","toLowerCase","handleDragEnd","moveFromIndex","moveToIndex","allItems","shownCount","fromItem","toItem","fromIsShown","toIsShown","fromIndex","toIndex","allIds","containerStyle","buttonStyle","icon","onClick","e","target","value","placeholder","type","ids","onDragEnd"],"sources":["../../../src/elements/ColumnSelector/index.tsx"],"sourcesContent":["'use client'\n\nimport type { SanitizedCollectionConfig, StaticLabel } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { fieldIsHiddenOrDisabled, fieldIsID, isFieldDisabled } from 'payload/shared'\nimport React, { useCallback, useId, useLayoutEffect, useMemo, useRef, useState } from 'react'\n\nimport { AlignJustifiedIcon } from '../../icons/AlignJustified/index.js'\nimport { SearchIcon } from '../../icons/Search/index.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\nimport { useTableColumns } from '../../providers/TableColumns/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { DraggableSortable } from '../DraggableSortable/index.js'\nimport { useDraggableSortable } from '../DraggableSortable/useDraggableSortable/index.js'\nimport { Switch } from '../Switch/index.js'\nimport './index.css'\n\nconst baseClass = 'column-selector'\n\n/**\n * Parses a nested field label and returns segments for rendering.\n * - For deeply nested paths (more than 3 segments), truncates to [First, \"...\", Last]\n */\nfunction parseNestedLabel(label: string): string[] {\n  if (!label.includes(' > ')) {\n    return [label]\n  }\n\n  const segments = label.split(' > ')\n\n  if (segments.length <= 3) {\n    return segments\n  }\n\n  // For deep nesting, show: First / ... / Last\n  return [segments[0], '...', segments[segments.length - 1]]\n}\n\ntype NestedLabelProps = {\n  readonly label: string\n}\n\nconst NestedLabel: React.FC<NestedLabelProps> = ({ label }) => {\n  const segments = parseNestedLabel(label)\n\n  if (segments.length === 1) {\n    return <>{segments[0]}</>\n  }\n\n  return (\n    <>\n      {segments.map((segment, index) => (\n        <React.Fragment key={index}>\n          {index > 0 && <span className={`${baseClass}__separator`}>/</span>}\n          {segment}\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n\nexport type Props = {\n  readonly collectionSlug: SanitizedCollectionConfig['slug']\n  readonly onClose?: () => void\n}\n\ntype ColumnItemProps = {\n  readonly active: boolean\n  readonly id: string\n  readonly labelText: string\n  readonly onToggle: () => void\n}\n\nconst ColumnItem: React.FC<ColumnItemProps> = ({ id, active, labelText, onToggle }) => {\n  const { t } = useTranslation()\n  const { attributes, isDragging, isOver, isSorting, listeners, setNodeRef, transform } =\n    useDraggableSortable({\n      id,\n    })\n\n  return (\n    <div\n      aria-label={labelText}\n      className={[\n        `${baseClass}__item`,\n        !active && `${baseClass}__item--inactive`,\n        isDragging && `${baseClass}__item--dragging`,\n        isOver && isSorting && !isDragging && `${baseClass}__item--over`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      ref={setNodeRef}\n      style={{\n        // Keep item in place while dragging - don't apply transform\n        transform: isDragging ? undefined : transform,\n        ...attributes.style,\n      }}\n      {...attributes}\n    >\n      <span\n        aria-label={t('general:dragToReorder')}\n        className={`${baseClass}__drag-handle`}\n        {...listeners}\n      >\n        <AlignJustifiedIcon size={16} />\n      </span>\n      <span className={`${baseClass}__item-label`}>\n        <NestedLabel label={labelText} />\n      </span>\n      <Switch checked={active} onChange={onToggle} />\n    </div>\n  )\n}\n\nexport const ColumnSelector: React.FC<Props> = ({ collectionSlug, onClose }) => {\n  const { columns, moveColumn, toggleColumn } = useTableColumns()\n  const { i18n, t } = useTranslation()\n\n  const uuid = useId()\n  const editDepth = useEditDepth()\n  const [searchQuery, setSearchQuery] = useState('')\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [lockedWidth, setLockedWidth] = useState<null | number>(null)\n\n  // Lock the width when search starts to prevent layout shift\n  useLayoutEffect(() => {\n    if (!containerRef.current) {\n      return\n    }\n\n    if (searchQuery && lockedWidth === null) {\n      // Capture width when search starts\n      setLockedWidth(containerRef.current.offsetWidth)\n    } else if (!searchQuery && lockedWidth !== null) {\n      // Release width lock when search is cleared\n      setLockedWidth(null)\n    }\n  }, [searchQuery, lockedWidth])\n\n  const filteredColumns = useMemo(\n    () =>\n      columns?.filter(\n        (col) =>\n          !(fieldIsHiddenOrDisabled(col.field) && !fieldIsID(col.field)) &&\n          !isFieldDisabled(col.field, 'column'),\n      ),\n    [columns],\n  )\n\n  const columnItems = useMemo(() => {\n    if (!filteredColumns) {\n      return { all: [], hidden: [], shown: [] }\n    }\n\n    const items = filteredColumns.map((col, i) => {\n      const { accessor, active, field } = col\n\n      const label =\n        'labelWithPrefix' in field && field.labelWithPrefix !== undefined\n          ? field.labelWithPrefix\n          : 'label' in field && field.label !== undefined && field.label !== false\n            ? field.label\n            : 'name' in field && field.name !== undefined\n              ? field.name\n              : accessor\n\n      const labelText =\n        typeof label === 'string' ? label : getTranslation(label as StaticLabel, i18n)\n\n      return {\n        id: `${collectionSlug}-${accessor}-${i}${editDepth ? `-${editDepth}-` : ''}${uuid}`,\n        accessor,\n        active,\n        index: i,\n        label,\n        labelText,\n      }\n    })\n\n    // Filter by search query\n    const filtered = searchQuery\n      ? items.filter((item) => item.labelText.toLowerCase().includes(searchQuery.toLowerCase()))\n      : items\n\n    return {\n      all: items,\n      hidden: filtered.filter((item) => !item.active),\n      shown: filtered.filter((item) => item.active),\n    }\n  }, [collectionSlug, editDepth, filteredColumns, i18n, searchQuery, uuid])\n\n  const handleDragEnd = useCallback(\n    ({ moveFromIndex, moveToIndex }: { moveFromIndex: number; moveToIndex: number }) => {\n      if (moveFromIndex === moveToIndex) {\n        return\n      }\n\n      // All shown items first, then all hidden items\n      const allItems = [...columnItems.shown, ...columnItems.hidden]\n      const shownCount = columnItems.shown.length\n      const fromItem = allItems[moveFromIndex]\n      const toItem = allItems[moveToIndex]\n\n      if (!fromItem || !toItem) {\n        return\n      }\n\n      // Determine if crossing sections\n      const fromIsShown = moveFromIndex < shownCount\n      const toIsShown = moveToIndex < shownCount\n\n      if (fromIsShown !== toIsShown) {\n        // Cross-section move: just toggle the column's active state (show/hide)\n        void toggleColumn(fromItem.accessor)\n        // Don't reorder when crossing sections - the toggle handles the change\n        return\n      }\n\n      // Same-section move: perform the reorder\n      void moveColumn({\n        fromIndex: fromItem.index,\n        toIndex: toItem.index,\n      })\n    },\n    [columnItems.shown, columnItems.hidden, moveColumn, toggleColumn],\n  )\n\n  if (!filteredColumns) {\n    return null\n  }\n\n  // Combined IDs: shown items first, then hidden items\n  const allIds = [...columnItems.shown, ...columnItems.hidden].map((item) => item.id)\n\n  const containerStyle = lockedWidth\n    ? ({ '--column-selector-locked-width': `${lockedWidth}px` } as React.CSSProperties)\n    : undefined\n\n  return (\n    <div\n      className={baseClass}\n      data-popup-prevent-close\n      data-width-locked={lockedWidth ? 'true' : undefined}\n      ref={containerRef}\n      style={containerStyle}\n    >\n      <div className={`${baseClass}__header`}>\n        <span className={`${baseClass}__title`}>{t('general:editColumns')}</span>\n        {onClose && (\n          <Button\n            aria-label={t('general:close')}\n            buttonStyle=\"ghost\"\n            className={`${baseClass}__close`}\n            icon={<XIcon size={24} />}\n            onClick={onClose}\n          />\n        )}\n      </div>\n      <div className={`${baseClass}__search`}>\n        <div className={`${baseClass}__search-bar`}>\n          <SearchIcon size={24} />\n          <input\n            aria-label={t('general:searchColumns')}\n            className={`${baseClass}__search-input`}\n            onChange={(e) => setSearchQuery(e.target.value)}\n            placeholder={t('general:searchColumns')}\n            type=\"text\"\n            value={searchQuery}\n          />\n        </div>\n      </div>\n      <div className={`${baseClass}__content`}>\n        <DraggableSortable ids={allIds} onDragEnd={handleDragEnd}>\n          {columnItems.shown.length === 0 && columnItems.hidden.length === 0 && searchQuery && (\n            <div className={`${baseClass}__no-results`}>{t('general:noMatchesFound')}</div>\n          )}\n          {columnItems.shown.length > 0 && (\n            <div className={`${baseClass}__section`}>\n              <div className={`${baseClass}__section-header`}>{t('general:shownInTable')}</div>\n              {columnItems.shown.map((item) => (\n                <ColumnItem\n                  active={item.active}\n                  id={item.id}\n                  key={item.id}\n                  labelText={item.labelText}\n                  onToggle={() => {\n                    void toggleColumn(item.accessor)\n                  }}\n                />\n              ))}\n            </div>\n          )}\n          {columnItems.hidden.length > 0 && (\n            <div className={`${baseClass}__section`}>\n              <div className={`${baseClass}__section-header`}>{t('general:notShownInTable')}</div>\n              {columnItems.hidden.map((item) => (\n                <ColumnItem\n                  active={item.active}\n                  id={item.id}\n                  key={item.id}\n                  labelText={item.labelText}\n                  onToggle={() => {\n                    void toggleColumn(item.accessor)\n                  }}\n                />\n              ))}\n            </div>\n          )}\n        </DraggableSortable>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/DocumentFields/index.css

@@ -94,7 +94,7 @@
     display: flex;
     flex-direction: column;
     gap: var(--spacer-3);
-    padding-top: var(--spacer-5);
+    padding-top: var(--spacer-4);
     padding-left: var(--gutter-h);
     padding-right: var(--gutter-h);
     padding-bottom: var(--spacing-view-bottom);

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

@@ -14,4 +14,29 @@ export declare const DrawerDepthProvider: React.FC<{
     children: React.ReactNode;
 }>;
 export declare const useDrawerDepth: () => number;
+type DrawerStackContextType = {
+    /** Depths of every currently-open drawer, used to compute layer offsets. */
+    openDrawerDepths: number[];
+    registerDrawer: (uid: string, depth: number) => void;
+    unregisterDrawer: (uid: string) => void;
+};
+/**
+ * Tracks the depths of all currently-open drawers so each drawer can compute
+ * its leftward offset relative to the rest of the open stack.
+ *
+ * Why this is needed: drawers are anchored to the right edge and stack as real
+ * layers. When a child drawer opens on top of its parent(s), every drawer
+ * beneath it must slide left to peek out from underneath the active (topmost)
+ * drawer — and slide back when that child closes. A drawer's own depth is
+ * static, so it cannot know on its own whether something deeper is currently
+ * open; that requires shared runtime state about the whole open stack.
+ *
+ * We track real `Drawer` instances (rather than scanning modal state by slug
+ * name) so confirmation modals like `leave-without-saving-...` never count, and
+ * so stacking never depends on slug naming conventions.
+ */
+export declare const DrawerStackProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export declare const useDrawerStack: () => DrawerStackContextType;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Drawer/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqE,MAAM,OAAO,CAAA;AAEzF,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAKrD,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,WAAW,MAAM,CAAA;AAO9B,eAAO,MAAM,gBAAgB,GAAI,iBAAiB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,KAAG,MACzD,CAAA;AAE3B,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAElD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAwChD,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAIlC,CAAA;AAwGD,eAAO,MAAM,kBAAkB,uBAAmB,CAAA;AAElD,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAKvE,CAAA;AAED,eAAO,MAAM,cAAc,QAAO,MAAiC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Drawer/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KASN,MAAM,OAAO,CAAA;AAEd,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAKrD,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,WAAW,MAAM,CAAA;AAE9B,eAAO,MAAM,gBAAgB,GAAI,iBAAiB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,KAAG,MACzD,CAAA;AAE3B,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAElD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAwChD,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAIlC,CAAA;AA2GD,eAAO,MAAM,kBAAkB,uBAAmB,CAAA;AAElD,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAKvE,CAAA;AAED,eAAO,MAAM,cAAc,QAAO,MAAiC,CAAA;AAEnE,KAAK,sBAAsB,GAAG;IAC5B,4EAA4E;IAC5E,gBAAgB,EAAE,MAAM,EAAE,CAAA;IAC1B,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACpD,gBAAgB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;CACxC,CAAA;AAQD;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CA6BvE,CAAA;AAED,eAAO,MAAM,cAAc,QAAO,sBAAiD,CAAA"}

package/dist/elements/Drawer/index.js

@@ -3,17 +3,13 @@
 import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Modal, useModal } from '@faceless-ui/modal';
-import React, { createContext, use, useCallback, useLayoutEffect, useState } from 'react';
+import React, { createContext, use, useCallback, useEffect, useId, useLayoutEffect, useMemo, useState } from 'react';
 import { ChevronIcon } from '../../icons/Chevron/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { Button } from '../Button/index.js';
 import './index.css';
 const baseClass = 'drawer';
 export const drawerZBase = 100;
-// Slug prefixes for every real drawer variant (base, document, list). Used to
-// count stacked drawers without matching confirmation modals like
-// `leave-without-saving-...`.
-const drawerSlugPrefixes = ['drawer_', 'doc-drawer_', 'list-drawer_'];
 export const formatDrawerSlug = ({
   slug,
   depth
@@ -74,7 +70,7 @@ export const Drawer = props => /*#__PURE__*/_jsx(DrawerDepthProvider, {
   })
 });
 const DrawerInner = t0 => {
-  const $ = _c(21);
+  const $ = _c(28);
   const {
     slug,
     children,
@@ -92,57 +88,84 @@ const DrawerInner = t0 => {
     modalState
   } = useModal();
   const drawerDepth = useDrawerDepth();
+  const uid = useId();
+  const {
+    openDrawerDepths,
+    registerDrawer,
+    unregisterDrawer
+  } = useDrawerStack();
   const isOpen = !!modalState[slug]?.isOpen;
-  const openDrawerCount = Object.entries(modalState).filter(_temp).length;
-  const layersFromTop = Math.max(openDrawerCount - drawerDepth, 0);
-  const [animateIn, setAnimateIn] = useState(isOpen);
   let t1;
   let t2;
-  if ($[0] !== isOpen) {
+  if ($[0] !== drawerDepth || $[1] !== isOpen || $[2] !== registerDrawer || $[3] !== uid || $[4] !== unregisterDrawer) {
     t1 = () => {
+      if (isOpen) {
+        registerDrawer(uid, drawerDepth);
+        return () => unregisterDrawer(uid);
+      }
+    };
+    t2 = [isOpen, uid, drawerDepth, registerDrawer, unregisterDrawer];
+    $[0] = drawerDepth;
+    $[1] = isOpen;
+    $[2] = registerDrawer;
+    $[3] = uid;
+    $[4] = unregisterDrawer;
+    $[5] = t1;
+    $[6] = t2;
+  } else {
+    t1 = $[5];
+    t2 = $[6];
+  }
+  useEffect(t1, t2);
+  const layersFromTop = openDrawerDepths.filter(depth => depth > drawerDepth).length;
+  const [animateIn, setAnimateIn] = useState(isOpen);
+  let t3;
+  let t4;
+  if ($[7] !== isOpen) {
+    t3 = () => {
       setAnimateIn(isOpen);
     };
-    t2 = [isOpen];
-    $[0] = isOpen;
-    $[1] = t1;
-    $[2] = t2;
+    t4 = [isOpen];
+    $[7] = isOpen;
+    $[8] = t3;
+    $[9] = t4;
   } else {
-    t1 = $[1];
-    t2 = $[2];
+    t3 = $[8];
+    t4 = $[9];
   }
-  useLayoutEffect(t1, t2);
+  useLayoutEffect(t3, t4);
   if (isOpen) {
-    const t3 = animateIn && `${baseClass}--is-open`;
-    let t4;
-    if ($[3] !== className || $[4] !== t3) {
-      t4 = [className, baseClass, t3].filter(Boolean);
-      $[3] = className;
-      $[4] = t3;
-      $[5] = t4;
+    const t5 = animateIn && `${baseClass}--is-open`;
+    let t6;
+    if ($[10] !== className || $[11] !== t5) {
+      t6 = [className, baseClass, t5].filter(Boolean);
+      $[10] = className;
+      $[11] = t5;
+      $[12] = t6;
     } else {
-      t4 = $[5];
+      t6 = $[12];
     }
-    const t5 = t4.join(" ");
-    const t6 = `calc(${layersFromTop} * var(--spacer-3))`;
-    const t7 = drawerZBase + drawerDepth;
-    let t8;
-    if ($[6] !== Header || $[7] !== children || $[8] !== closeModal || $[9] !== headerActions || $[10] !== hoverTitle || $[11] !== slug || $[12] !== t || $[13] !== t5 || $[14] !== t6 || $[15] !== t7 || $[16] !== title) {
-      let t9;
-      if ($[18] !== closeModal || $[19] !== slug) {
-        t9 = () => closeModal(slug);
-        $[18] = closeModal;
-        $[19] = slug;
-        $[20] = t9;
+    const t7 = t6.join(" ");
+    const t8 = `calc(${layersFromTop} * var(--spacer-3))`;
+    const t9 = drawerZBase + drawerDepth;
+    let t10;
+    if ($[13] !== Header || $[14] !== children || $[15] !== closeModal || $[16] !== headerActions || $[17] !== hoverTitle || $[18] !== slug || $[19] !== t || $[20] !== t7 || $[21] !== t8 || $[22] !== t9 || $[23] !== title) {
+      let t11;
+      if ($[25] !== closeModal || $[26] !== slug) {
+        t11 = () => closeModal(slug);
+        $[25] = closeModal;
+        $[26] = slug;
+        $[27] = t11;
       } else {
-        t9 = $[20];
+        t11 = $[27];
       }
-      t8 = _jsxs(Modal, {
-        className: t5,
+      t10 = _jsxs(Modal, {
+        className: t7,
         closeOnBlur: false,
         slug,
         style: {
-          "--drawer-layer-offset": t6,
-          zIndex: t7
+          "--drawer-layer-offset": t8,
+          zIndex: t9
         },
         children: [_jsx("div", {
           className: `${baseClass}__blur-bg`
@@ -150,7 +173,7 @@ const DrawerInner = t0 => {
           "aria-label": t("general:close"),
           className: `${baseClass}__close`,
           id: `close-drawer__${slug}`,
-          onClick: t9,
+          onClick: t11,
           type: "button"
         }), _jsxs("div", {
           className: `${baseClass}__content`,
@@ -175,28 +198,28 @@ const DrawerInner = t0 => {
                 children: title
               }), headerActions && headerActions.length > 0 && _jsx("div", {
                 className: `${baseClass}__header__actions`,
-                children: headerActions.map(_temp2)
+                children: headerActions.map(_temp)
               })]
             }), children]
           })]
         })]
       });
-      $[6] = Header;
-      $[7] = children;
-      $[8] = closeModal;
-      $[9] = headerActions;
-      $[10] = hoverTitle;
-      $[11] = slug;
-      $[12] = t;
-      $[13] = t5;
-      $[14] = t6;
-      $[15] = t7;
-      $[16] = title;
-      $[17] = t8;
+      $[13] = Header;
+      $[14] = children;
+      $[15] = closeModal;
+      $[16] = headerActions;
+      $[17] = hoverTitle;
+      $[18] = slug;
+      $[19] = t;
+      $[20] = t7;
+      $[21] = t8;
+      $[22] = t9;
+      $[23] = title;
+      $[24] = t10;
     } else {
-      t8 = $[17];
+      t10 = $[24];
     }
-    return t8;
+    return t10;
   }
   return null;
 };
@@ -223,11 +246,60 @@ export const DrawerDepthProvider = t0 => {
   return t1;
 };
 export const useDrawerDepth = () => use(DrawerDepthContext);
-function _temp(t0) {
-  const [modalSlug, state] = t0;
-  return state?.isOpen && drawerSlugPrefixes.some(p => modalSlug.startsWith(p));
-}
-function _temp2(action, i) {
+const DrawerStackContext = /*#__PURE__*/createContext({
+  openDrawerDepths: [],
+  registerDrawer: () => {},
+  unregisterDrawer: () => {}
+});
+/**
+ * Tracks the depths of all currently-open drawers so each drawer can compute
+ * its leftward offset relative to the rest of the open stack.
+ *
+ * Why this is needed: drawers are anchored to the right edge and stack as real
+ * layers. When a child drawer opens on top of its parent(s), every drawer
+ * beneath it must slide left to peek out from underneath the active (topmost)
+ * drawer — and slide back when that child closes. A drawer's own depth is
+ * static, so it cannot know on its own whether something deeper is currently
+ * open; that requires shared runtime state about the whole open stack.
+ *
+ * We track real `Drawer` instances (rather than scanning modal state by slug
+ * name) so confirmation modals like `leave-without-saving-...` never count, and
+ * so stacking never depends on slug naming conventions.
+ */
+export const DrawerStackProvider = ({
+  children
+}) => {
+  const [openDrawers, setOpenDrawers] = useState({});
+  const registerDrawer = useCallback((uid, depth) => {
+    setOpenDrawers(prev => prev[uid] === depth ? prev : {
+      ...prev,
+      [uid]: depth
+    });
+  }, []);
+  const unregisterDrawer = useCallback(uid_0 => {
+    setOpenDrawers(prev_0 => {
+      if (!(uid_0 in prev_0)) {
+        return prev_0;
+      }
+      const next = {
+        ...prev_0
+      };
+      delete next[uid_0];
+      return next;
+    });
+  }, []);
+  const value = useMemo(() => ({
+    openDrawerDepths: Object.values(openDrawers),
+    registerDrawer,
+    unregisterDrawer
+  }), [openDrawers, registerDrawer, unregisterDrawer]);
+  return /*#__PURE__*/_jsx(DrawerStackContext, {
+    value: value,
+    children: children
+  });
+};
+export const useDrawerStack = () => use(DrawerStackContext);
+function _temp(action, i) {
   return _jsx(Button, {
     buttonStyle: action.style || "secondary",
     disabled: action.disabled,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","Modal","useModal","React","createContext","use","useCallback","useLayoutEffect","useState","ChevronIcon","useTranslation","Button","baseClass","drawerZBase","drawerSlugPrefixes","formatDrawerSlug","slug","depth","useDrawerSlug","DrawerToggler","t0","$","buttonStyle","children","className","disabled","onClick","rest","openModal","t1","e","handleClick","_jsx","type","Drawer","props","DrawerDepthProvider","DrawerInner","Header","headerActions","hoverTitle","title","t","closeModal","modalState","drawerDepth","useDrawerDepth","isOpen","openDrawerCount","Object","entries","filter","_temp","length","layersFromTop","Math","max","animateIn","setAnimateIn","t2","t3","t4","Boolean","t5","join","t6","t7","t8","t9","_jsxs","closeOnBlur","style","zIndex","id","undefined","icon","direction","size","map","_temp2","DrawerDepthContext","parentDepth","value","modalSlug","state","some","p","startsWith","action","i","margin","label"],"sources":["../../../src/elements/Drawer/index.tsx"],"sourcesContent":["'use client'\nimport { Modal, useModal } from '@faceless-ui/modal'\nimport React, { createContext, use, useCallback, useLayoutEffect, useState } from 'react'\n\nimport type { Props, TogglerProps } from './types.js'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport './index.css'\n\nconst baseClass = 'drawer'\n\nexport const drawerZBase = 100\n\n// Slug prefixes for every real drawer variant (base, document, list). Used to\n// count stacked drawers without matching confirmation modals like\n// `leave-without-saving-...`.\nconst drawerSlugPrefixes = ['drawer_', 'doc-drawer_', 'list-drawer_']\n\nexport const formatDrawerSlug = ({ slug, depth }: { depth: number; slug: string }): string =>\n  `drawer_${depth}_${slug}`\n\nexport { useDrawerSlug } from './useDrawerSlug.js'\n\nexport const DrawerToggler: React.FC<TogglerProps> = ({\n  slug,\n  buttonStyle,\n  children,\n  className,\n  disabled,\n  onClick,\n  ...rest\n}) => {\n  const { openModal } = useModal()\n\n  const handleClick = useCallback(\n    (e) => {\n      openModal(slug)\n      if (typeof onClick === 'function') {\n        onClick(e)\n      }\n    },\n    [openModal, slug, onClick],\n  )\n\n  if (buttonStyle) {\n    return (\n      <Button\n        buttonStyle={buttonStyle}\n        className={className}\n        disabled={disabled}\n        onClick={handleClick}\n        {...rest}\n      >\n        {children}\n      </Button>\n    )\n  }\n\n  return (\n    <button className={className} disabled={disabled} onClick={handleClick} type=\"button\" {...rest}>\n      {children}\n    </button>\n  )\n}\n\nexport const Drawer: React.FC<Props> = (props) => (\n  <DrawerDepthProvider>\n    <DrawerInner {...props} />\n  </DrawerDepthProvider>\n)\n\nconst DrawerInner: React.FC<Props> = ({\n  slug,\n  children,\n  className,\n  Header,\n  headerActions,\n  hoverTitle,\n  title,\n}) => {\n  const { t } = useTranslation()\n  const { closeModal, modalState } = useModal()\n  const drawerDepth = useDrawerDepth()\n\n  const isOpen = !!modalState[slug]?.isOpen\n\n  // Nested drawers stack as real layers: each ancestor stays visible and is\n  // pushed 16px left per drawer on top of it. Every drawer paints its own\n  // backdrop scrim, so deeper layers stack more scrims and appear darker.\n  const openDrawerCount = Object.entries(modalState).filter(\n    ([modalSlug, state]) =>\n      state?.isOpen && drawerSlugPrefixes.some((p) => modalSlug.startsWith(p)),\n  ).length\n  const layersFromTop = Math.max(openDrawerCount - drawerDepth, 0)\n\n  const [animateIn, setAnimateIn] = useState(isOpen)\n\n  useLayoutEffect(() => {\n    setAnimateIn(isOpen)\n  }, [isOpen])\n\n  if (isOpen) {\n    // IMPORTANT: do not render the drawer until it is explicitly open, this is to avoid large html trees especially when nesting drawers\n    return (\n      <Modal\n        className={[className, baseClass, animateIn && `${baseClass}--is-open`]\n          .filter(Boolean)\n          .join(' ')}\n        // Fixes https://github.com/payloadcms/payload/issues/13778\n        closeOnBlur={false}\n        slug={slug}\n        style={\n          {\n            '--drawer-layer-offset': `calc(${layersFromTop} * var(--spacer-3))`,\n            zIndex: drawerZBase + drawerDepth,\n          } as React.CSSProperties\n        }\n      >\n        <div className={`${baseClass}__blur-bg`} />\n        <button\n          aria-label={t('general:close')}\n          className={`${baseClass}__close`}\n          id={`close-drawer__${slug}`}\n          onClick={() => closeModal(slug)}\n          type=\"button\"\n        />\n        <div className={`${baseClass}__content`}>\n          <div className={`${baseClass}__blur-bg-content`} />\n          <div className={`${baseClass}__content-children`}>\n            {Header}\n            {Header === undefined && (\n              <div className={`${baseClass}__header`}>\n                {/* TODO: the `button` HTML element breaks CSS transitions on the drawer for some reason...\n                  i.e. changing to a `div` element will fix the animation issue but will break accessibility\n                */}\n                <Button\n                  aria-label={t('general:close')}\n                  buttonStyle=\"ghost\"\n                  className={`${baseClass}__header__close`}\n                  icon={<ChevronIcon direction=\"left\" size={24} />}\n                  onClick={() => closeModal(slug)}\n                />\n                <h2 className={`${baseClass}__header__title`} title={hoverTitle ? title : null}>\n                  {title}\n                </h2>\n                {headerActions && headerActions.length > 0 && (\n                  <div className={`${baseClass}__header__actions`}>\n                    {headerActions.map((action, i) => (\n                      <Button\n                        buttonStyle={action.style || 'secondary'}\n                        disabled={action.disabled}\n                        key={i}\n                        margin={false}\n                        onClick={action.onClick}\n                        size=\"medium\"\n                      >\n                        {action.label}\n                      </Button>\n                    ))}\n                  </div>\n                )}\n              </div>\n            )}\n            {children}\n          </div>\n        </div>\n      </Modal>\n    )\n  }\n\n  return null\n}\n\nexport const DrawerDepthContext = createContext(0)\n\nexport const DrawerDepthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n  const parentDepth = useDrawerDepth()\n  const depth = parentDepth + 1\n\n  return <DrawerDepthContext value={depth}>{children}</DrawerDepthContext>\n}\n\nexport const useDrawerDepth = (): number => use(DrawerDepthContext)\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","Modal","useModal","React","createContext","use","useCallback","useEffect","useId","useLayoutEffect","useMemo","useState","ChevronIcon","useTranslation","Button","baseClass","drawerZBase","formatDrawerSlug","slug","depth","useDrawerSlug","DrawerToggler","t0","$","buttonStyle","children","className","disabled","onClick","rest","openModal","t1","e","handleClick","_jsx","type","Drawer","props","DrawerDepthProvider","DrawerInner","Header","headerActions","hoverTitle","title","t","closeModal","modalState","drawerDepth","useDrawerDepth","uid","openDrawerDepths","registerDrawer","unregisterDrawer","useDrawerStack","isOpen","t2","layersFromTop","filter","length","animateIn","setAnimateIn","t3","t4","t5","t6","Boolean","t7","join","t8","t9","t10","t11","_jsxs","closeOnBlur","style","zIndex","id","undefined","icon","direction","size","map","_temp","DrawerDepthContext","parentDepth","value","DrawerStackContext","DrawerStackProvider","openDrawers","setOpenDrawers","prev","next","Object","values","action","i","margin","label"],"sources":["../../../src/elements/Drawer/index.tsx"],"sourcesContent":["'use client'\nimport { Modal, useModal } from '@faceless-ui/modal'\nimport React, {\n  createContext,\n  use,\n  useCallback,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useMemo,\n  useState,\n} from 'react'\n\nimport type { Props, TogglerProps } from './types.js'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport './index.css'\n\nconst baseClass = 'drawer'\n\nexport const drawerZBase = 100\n\nexport const formatDrawerSlug = ({ slug, depth }: { depth: number; slug: string }): string =>\n  `drawer_${depth}_${slug}`\n\nexport { useDrawerSlug } from './useDrawerSlug.js'\n\nexport const DrawerToggler: React.FC<TogglerProps> = ({\n  slug,\n  buttonStyle,\n  children,\n  className,\n  disabled,\n  onClick,\n  ...rest\n}) => {\n  const { openModal } = useModal()\n\n  const handleClick = useCallback(\n    (e) => {\n      openModal(slug)\n      if (typeof onClick === 'function') {\n        onClick(e)\n      }\n    },\n    [openModal, slug, onClick],\n  )\n\n  if (buttonStyle) {\n    return (\n      <Button\n        buttonStyle={buttonStyle}\n        className={className}\n        disabled={disabled}\n        onClick={handleClick}\n        {...rest}\n      >\n        {children}\n      </Button>\n    )\n  }\n\n  return (\n    <button className={className} disabled={disabled} onClick={handleClick} type=\"button\" {...rest}>\n      {children}\n    </button>\n  )\n}\n\nexport const Drawer: React.FC<Props> = (props) => (\n  <DrawerDepthProvider>\n    <DrawerInner {...props} />\n  </DrawerDepthProvider>\n)\n\nconst DrawerInner: React.FC<Props> = ({\n  slug,\n  children,\n  className,\n  Header,\n  headerActions,\n  hoverTitle,\n  title,\n}) => {\n  const { t } = useTranslation()\n  const { closeModal, modalState } = useModal()\n  const drawerDepth = useDrawerDepth()\n  const uid = useId()\n  const { openDrawerDepths, registerDrawer, unregisterDrawer } = useDrawerStack()\n\n  const isOpen = !!modalState[slug]?.isOpen\n\n  useEffect(() => {\n    if (isOpen) {\n      registerDrawer(uid, drawerDepth)\n\n      return () => unregisterDrawer(uid)\n    }\n  }, [isOpen, uid, drawerDepth, registerDrawer, unregisterDrawer])\n\n  const layersFromTop = openDrawerDepths.filter((depth) => depth > drawerDepth).length\n\n  const [animateIn, setAnimateIn] = useState(isOpen)\n\n  useLayoutEffect(() => {\n    setAnimateIn(isOpen)\n  }, [isOpen])\n\n  if (isOpen) {\n    // IMPORTANT: do not render the drawer until it is explicitly open, this is to avoid large html trees especially when nesting drawers\n    return (\n      <Modal\n        className={[className, baseClass, animateIn && `${baseClass}--is-open`]\n          .filter(Boolean)\n          .join(' ')}\n        // Fixes https://github.com/payloadcms/payload/issues/13778\n        closeOnBlur={false}\n        slug={slug}\n        style={\n          {\n            '--drawer-layer-offset': `calc(${layersFromTop} * var(--spacer-3))`,\n            zIndex: drawerZBase + drawerDepth,\n          } as React.CSSProperties\n        }\n      >\n        <div className={`${baseClass}__blur-bg`} />\n        <button\n          aria-label={t('general:close')}\n          className={`${baseClass}__close`}\n          id={`close-drawer__${slug}`}\n          onClick={() => closeModal(slug)}\n          type=\"button\"\n        />\n        <div className={`${baseClass}__content`}>\n          <div className={`${baseClass}__blur-bg-content`} />\n          <div className={`${baseClass}__content-children`}>\n            {Header}\n            {Header === undefined && (\n              <div className={`${baseClass}__header`}>\n                {/* TODO: the `button` HTML element breaks CSS transitions on the drawer for some reason...\n                  i.e. changing to a `div` element will fix the animation issue but will break accessibility\n                */}\n                <Button\n                  aria-label={t('general:close')}\n                  buttonStyle=\"ghost\"\n                  className={`${baseClass}__header__close`}\n                  icon={<ChevronIcon direction=\"left\" size={24} />}\n                  onClick={() => closeModal(slug)}\n                />\n                <h2 className={`${baseClass}__header__title`} title={hoverTitle ? title : null}>\n                  {title}\n                </h2>\n                {headerActions && headerActions.length > 0 && (\n                  <div className={`${baseClass}__header__actions`}>\n                    {headerActions.map((action, i) => (\n                      <Button\n                        buttonStyle={action.style || 'secondary'}\n                        disabled={action.disabled}\n                        key={i}\n                        margin={false}\n                        onClick={action.onClick}\n                        size=\"medium\"\n                      >\n                        {action.label}\n                      </Button>\n                    ))}\n                  </div>\n                )}\n              </div>\n            )}\n            {children}\n          </div>\n        </div>\n      </Modal>\n    )\n  }\n\n  return null\n}\n\nexport const DrawerDepthContext = createContext(0)\n\nexport const DrawerDepthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n  const parentDepth = useDrawerDepth()\n  const depth = parentDepth + 1\n\n  return <DrawerDepthContext value={depth}>{children}</DrawerDepthContext>\n}\n\nexport const useDrawerDepth = (): number => use(DrawerDepthContext)\n\ntype DrawerStackContextType = {\n  /** Depths of every currently-open drawer, used to compute layer offsets. */\n  openDrawerDepths: number[]\n  registerDrawer: (uid: string, depth: number) => void\n  unregisterDrawer: (uid: string) => void\n}\n\nconst DrawerStackContext = createContext<DrawerStackContextType>({\n  openDrawerDepths: [],\n  registerDrawer: () => {},\n  unregisterDrawer: () => {},\n})\n\n/**\n * Tracks the depths of all currently-open drawers so each drawer can compute\n * its leftward offset relative to the rest of the open stack.\n *\n * Why this is needed: drawers are anchored to the right edge and stack as real\n * layers. When a child drawer opens on top of its parent(s), every drawer\n * beneath it must slide left to peek out from underneath the active (topmost)\n * drawer — and slide back when that child closes. A drawer's own depth is\n * static, so it cannot know on its own whether something deeper is currently\n * open; that requires shared runtime state about the whole open stack.\n *\n * We track real `Drawer` instances (rather than scanning modal state by slug\n * name) so confirmation modals like `leave-without-saving-...` never count, and\n * so stacking never depends on slug naming conventions.\n */\nexport const DrawerStackProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n  const [openDrawers, setOpenDrawers] = useState<Record<string, number>>({})\n\n  const registerDrawer = useCallback((uid: string, depth: number) => {\n    setOpenDrawers((prev) => (prev[uid] === depth ? prev : { ...prev, [uid]: depth }))\n  }, [])\n\n  const unregisterDrawer = useCallback((uid: string) => {\n    setOpenDrawers((prev) => {\n      if (!(uid in prev)) {\n        return prev\n      }\n\n      const next = { ...prev }\n      delete next[uid]\n      return next\n    })\n  }, [])\n\n  const value = useMemo<DrawerStackContextType>(\n    () => ({\n      openDrawerDepths: Object.values(openDrawers),\n      registerDrawer,\n      unregisterDrawer,\n    }),\n    [openDrawers, registerDrawer, unregisterDrawer],\n  )\n\n  return <DrawerStackContext value={value}>{children}</DrawerStackContext>\n}\n\nexport const useDrawerStack = (): DrawerStackContextType => use(DrawerStackContext)\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/FileDetails/DraggableFileDetails/index.css

@@ -0,0 +1,32 @@
+@layer payload-default {
+  .file-details-draggable {
+    display: flex;
+    gap: var(--spacer-2);
+    align-items: center;
+    background: var(--color-bg-secondary);
+    border-radius: var(--radius-small);
+    padding: var(--spacer-2-5);
+  }
+
+  .file-details-draggable--drag-wrapper {
+    display: flex;
+    gap: var(--spacer-2);
+    align-items: center;
+  }
+
+  .file-details-draggable__thumbnail {
+    max-width: var(--spacer-4);
+  }
+
+  .file-details-draggable__actions {
+    flex-grow: 2;
+    display: flex;
+    gap: var(--spacer-2);
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  .file-details-draggable__remove.btn--style-icon-label {
+    margin: 0;
+  }
+}

package/dist/elements/FileDetails/DraggableFileDetails/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import './index.scss';
+import './index.css';
 import type { Data, FileSizes, SanitizedCollectionConfig } from 'payload';
 export type DraggableFileDetailsProps = {
     collectionSlug: string;

package/dist/elements/FileDetails/DraggableFileDetails/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/FileDetails/DraggableFileDetails/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,cAAc,CAAA;AAIrB,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAOzE,MAAM,MAAM,yBAAyB,GAAG;IACtC,cAAc,EAAE,MAAM,CAAA;IACtB,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IACvC,GAAG,EAAE;QACH,KAAK,CAAC,EAAE,SAAS,CAAA;KAClB,GAAG,IAAI,CAAA;IACR,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,OAAO,EAAE,OAAO,CAAA;IAChB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,QAAQ,EAAE,MAAM,CAAA;IAChB,YAAY,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;CAClD,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CA4EpE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/FileDetails/DraggableFileDetails/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,aAAa,CAAA;AAIpB,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAOzE,MAAM,MAAM,yBAAyB,GAAG;IACtC,cAAc,EAAE,MAAM,CAAA;IACtB,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IACvC,GAAG,EAAE;QACH,KAAK,CAAC,EAAE,SAAS,CAAA;KAClB,GAAG,IAAI,CAAA;IACR,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,OAAO,EAAE,OAAO,CAAA;IAChB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,QAAQ,EAAE,MAAM,CAAA;IAChB,YAAY,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;CAClD,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CA6EpE,CAAA"}

package/dist/elements/FileDetails/DraggableFileDetails/index.js

@@ -5,14 +5,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { Button } from '../../Button/index.js';
 import { Thumbnail } from '../../Thumbnail/index.js';
-import './index.scss';
+import './index.css';
 const baseClass = 'file-details-draggable';
 import { DraggableSortableItem } from '../../../elements/DraggableSortable/DraggableSortableItem/index.js';
 import { AlignJustifiedIcon } from '../../../icons/AlignJustified/index.js';
 import { EditIcon } from '../../../icons/Edit/index.js';
 import { useDocumentDrawer } from '../../DocumentDrawer/index.js';
 export const DraggableFileDetails = props => {
-  const $ = _c(20);
+  const $ = _c(21);
   const {
     collectionSlug,
     doc,
@@ -43,7 +43,7 @@ export const DraggableFileDetails = props => {
   }
   const [DocumentDrawer, DocumentDrawerToggler] = useDocumentDrawer(t0);
   let t1;
-  if ($[3] !== DocumentDrawer || $[4] !== DocumentDrawerToggler || $[5] !== collectionSlug || $[6] !== doc || $[7] !== filename || $[8] !== hideRemoveFile || $[9] !== imageCacheTag || $[10] !== isSortable || $[11] !== removeItem || $[12] !== rowIndex || $[13] !== thumbnailURL || $[14] !== uploadConfig || $[15] !== url) {
+  if ($[3] !== DocumentDrawer || $[4] !== DocumentDrawerToggler || $[5] !== collectionSlug || $[6] !== doc || $[7] !== filename || $[8] !== hideRemoveFile || $[9] !== id || $[10] !== imageCacheTag || $[11] !== isSortable || $[12] !== removeItem || $[13] !== rowIndex || $[14] !== thumbnailURL || $[15] !== uploadConfig || $[16] !== url) {
     t1 = draggableSortableItemProps => _jsxs("div", {
       className: [baseClass, draggableSortableItemProps && isSortable && `${baseClass}--has-drag-handle`].filter(Boolean).join(" "),
       ref: draggableSortableItemProps.setNodeRef,
@@ -82,35 +82,36 @@ export const DraggableFileDetails = props => {
           round: true
         })]
       })]
-    });
+    }, id);
     $[3] = DocumentDrawer;
     $[4] = DocumentDrawerToggler;
     $[5] = collectionSlug;
     $[6] = doc;
     $[7] = filename;
     $[8] = hideRemoveFile;
-    $[9] = imageCacheTag;
-    $[10] = isSortable;
-    $[11] = removeItem;
-    $[12] = rowIndex;
-    $[13] = thumbnailURL;
-    $[14] = uploadConfig;
-    $[15] = url;
-    $[16] = t1;
+    $[9] = id;
+    $[10] = imageCacheTag;
+    $[11] = isSortable;
+    $[12] = removeItem;
+    $[13] = rowIndex;
+    $[14] = thumbnailURL;
+    $[15] = uploadConfig;
+    $[16] = url;
+    $[17] = t1;
   } else {
-    t1 = $[16];
+    t1 = $[17];
   }
   let t2;
-  if ($[17] !== id || $[18] !== t1) {
+  if ($[18] !== id || $[19] !== t1) {
     t2 = _jsx(DraggableSortableItem, {
       id,
       children: t1
     }, id);
-    $[17] = id;
-    $[18] = t1;
-    $[19] = t2;
+    $[18] = id;
+    $[19] = t1;
+    $[20] = t2;
   } else {
-    t2 = $[19];
+    t2 = $[20];
   }
   return t2;
 };