@payloadcms/ui 4.0.0-internal.40de3ec → 4.0.0-internal.4cbdd50

package/dist/elements/Hierarchy/Tree/TreeFocusContext.js

@@ -2,7 +2,7 @@
 
 import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, use, useCallback, useEffect, useRef, useState } from 'react';
+import { createContext, use, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 const TreeFocusContext = /*#__PURE__*/createContext(undefined);
 export const TreeFocusProvider = ({
   children
@@ -77,7 +77,7 @@ export const useTreeFocus = () => {
   return context;
 };
 export const useFocusableItem = t0 => {
-  const $ = _c(14);
+  const $ = _c(18);
   const {
     id,
     type,
@@ -91,6 +91,7 @@ export const useFocusableItem = t0 => {
   } = useTreeFocus();
   const isFocused = focusedId === id;
   const isFirstItemEver = focusedId === null;
+  const wasFocusedRef = useRef(false);
   let t1;
   let t2;
   if ($[0] !== id || $[1] !== ref || $[2] !== registerItem || $[3] !== type || $[4] !== unregisterItem) {
@@ -118,32 +119,51 @@ export const useFocusableItem = t0 => {
   }
   useEffect(t1, t2);
   let t3;
-  if ($[7] !== id || $[8] !== setFocusedId) {
+  let t4;
+  if ($[7] !== isFocused || $[8] !== ref) {
     t3 = () => {
-      setFocusedId(id);
+      if (isFocused && !wasFocusedRef.current && ref.current && document.activeElement !== ref.current) {
+        ref.current.focus();
+      }
+      wasFocusedRef.current = isFocused;
     };
-    $[7] = id;
-    $[8] = setFocusedId;
+    t4 = [isFocused, ref];
+    $[7] = isFocused;
+    $[8] = ref;
     $[9] = t3;
+    $[10] = t4;
   } else {
     t3 = $[9];
+    t4 = $[10];
+  }
+  useLayoutEffect(t3, t4);
+  let t5;
+  if ($[11] !== id || $[12] !== setFocusedId) {
+    t5 = () => {
+      setFocusedId(id);
+    };
+    $[11] = id;
+    $[12] = setFocusedId;
+    $[13] = t5;
+  } else {
+    t5 = $[13];
   }
-  const handleFocus = t3;
+  const handleFocus = t5;
   const tabIndex = isFocused ? 0 : isFirstItemEver ? 0 : -1;
-  let t4;
-  if ($[10] !== handleFocus || $[11] !== isFocused || $[12] !== tabIndex) {
-    t4 = {
+  let t6;
+  if ($[14] !== handleFocus || $[15] !== isFocused || $[16] !== tabIndex) {
+    t6 = {
       handleFocus,
       isFocused,
       tabIndex
     };
-    $[10] = handleFocus;
-    $[11] = isFocused;
-    $[12] = tabIndex;
-    $[13] = t4;
+    $[14] = handleFocus;
+    $[15] = isFocused;
+    $[16] = tabIndex;
+    $[17] = t6;
   } else {
-    t4 = $[13];
+    t6 = $[17];
   }
-  return t4;
+  return t6;
 };
 //# sourceMappingURL=TreeFocusContext.js.map

package/dist/elements/Hierarchy/Tree/TreeFocusContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeFocusContext.js","names":["c","_c","createContext","use","useCallback","useEffect","useRef","useState","TreeFocusContext","undefined","TreeFocusProvider","children","focusedId","setFocusedIdState","itemsRef","Map","setFocusedId","id","item","current","get","ref","document","activeElement","focus","registerItem","set","unregisterItem","delete","moveFocus","direction","items","Array","from","values","length","sortedItems","filter","sort","a","b","aElement","bElement","position","compareDocumentPosition","Node","DOCUMENT_POSITION_FOLLOWING","DOCUMENT_POSITION_PRECEDING","currentIndex","findIndex","nextIndex","Math","min","max","nextItem","_jsx","value","useTreeFocus","context","Error","useFocusableItem","t0","$","type","isFocused","isFirstItemEver","t1","t2","t3","handleFocus","tabIndex","t4"],"sources":["../../../../src/elements/Hierarchy/Tree/TreeFocusContext.tsx"],"sourcesContent":["'use client'\n\nimport type React from 'react'\n\nimport { createContext, use, useCallback, useEffect, useRef, useState } from 'react'\n\ntype FocusableItem = {\n  id: string\n  ref: React.RefObject<HTMLElement>\n  type: 'load-more' | 'node'\n}\n\ntype TreeFocusContextType = {\n  focusedId: null | string\n  moveFocus: (direction: 'down' | 'up') => void\n  registerItem: (item: FocusableItem) => void\n  setFocusedId: (id: null | string) => void\n  unregisterItem: (id: string) => void\n}\n\nconst TreeFocusContext = createContext<TreeFocusContextType | undefined>(undefined)\n\nexport const TreeFocusProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n  const [focusedId, setFocusedIdState] = useState<null | string>(null)\n  const itemsRef = useRef<Map<string, FocusableItem>>(new Map())\n\n  const setFocusedId = useCallback((id: null | string) => {\n    setFocusedIdState(id)\n    if (id) {\n      const item = itemsRef.current.get(id)\n      if (item?.ref.current && document.activeElement !== item.ref.current) {\n        item.ref.current.focus()\n      }\n    }\n  }, [])\n\n  const registerItem = useCallback((item: FocusableItem) => {\n    itemsRef.current.set(item.id, item)\n  }, [])\n\n  const unregisterItem = useCallback((id: string) => {\n    itemsRef.current.delete(id)\n  }, [])\n\n  const moveFocus = useCallback(\n    (direction: 'down' | 'up') => {\n      const items = Array.from(itemsRef.current.values())\n      if (items.length === 0) {\n        return\n      }\n\n      // Sort items by their DOM position to ensure correct navigation order\n      const sortedItems = items\n        .filter((item) => item.ref.current)\n        .sort((a, b) => {\n          const aElement = a.ref.current\n          const bElement = b.ref.current\n          if (!aElement || !bElement) {\n            return 0\n          }\n\n          const position = aElement.compareDocumentPosition(bElement)\n          if (position & Node.DOCUMENT_POSITION_FOLLOWING) {\n            return -1\n          }\n          if (position & Node.DOCUMENT_POSITION_PRECEDING) {\n            return 1\n          }\n          return 0\n        })\n\n      const currentIndex = focusedId ? sortedItems.findIndex((item) => item.id === focusedId) : -1\n\n      let nextIndex: number\n      if (direction === 'down') {\n        nextIndex = currentIndex === -1 ? 0 : Math.min(currentIndex + 1, sortedItems.length - 1)\n      } else {\n        nextIndex = Math.max(currentIndex - 1, 0)\n      }\n\n      const nextItem = sortedItems[nextIndex]\n      if (nextItem && nextItem.ref.current) {\n        nextItem.ref.current.focus()\n        setFocusedId(nextItem.id)\n      }\n    },\n    [focusedId, setFocusedId],\n  )\n\n  return (\n    <TreeFocusContext\n      value={{\n        focusedId,\n        moveFocus,\n        registerItem,\n        setFocusedId,\n        unregisterItem,\n      }}\n    >\n      {children}\n    </TreeFocusContext>\n  )\n}\n\nexport const useTreeFocus = () => {\n  const context = use(TreeFocusContext)\n  if (!context) {\n    throw new Error('useTreeFocus must be used within TreeFocusProvider')\n  }\n  return context\n}\n\nexport const useFocusableItem = ({\n  id,\n  type,\n  ref,\n}: {\n  id: string\n  ref: React.RefObject<HTMLElement>\n  type: 'load-more' | 'node'\n}) => {\n  const { focusedId, registerItem, setFocusedId, unregisterItem } = useTreeFocus()\n  const isFocused = focusedId === id\n  const isFirstItemEver = focusedId === null\n\n  useEffect(() => {\n    registerItem({ id, type, ref })\n    return () => {\n      unregisterItem(id)\n    }\n  }, [id, ref, type, registerItem, unregisterItem])\n\n  const handleFocus = useCallback(() => {\n    setFocusedId(id)\n  }, [id, setFocusedId])\n\n  // Roving tabindex: focused item gets 0, first item (when nothing focused) gets 0, all others get -1\n  const tabIndex = isFocused ? 0 : isFirstItemEver ? 0 : -1\n\n  return {\n    handleFocus,\n    isFocused,\n    tabIndex,\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"TreeFocusContext.js","names":["c","_c","createContext","use","useCallback","useEffect","useLayoutEffect","useRef","useState","TreeFocusContext","undefined","TreeFocusProvider","children","focusedId","setFocusedIdState","itemsRef","Map","setFocusedId","id","item","current","get","ref","document","activeElement","focus","registerItem","set","unregisterItem","delete","moveFocus","direction","items","Array","from","values","length","sortedItems","filter","sort","a","b","aElement","bElement","position","compareDocumentPosition","Node","DOCUMENT_POSITION_FOLLOWING","DOCUMENT_POSITION_PRECEDING","currentIndex","findIndex","nextIndex","Math","min","max","nextItem","_jsx","value","useTreeFocus","context","Error","useFocusableItem","t0","$","type","isFocused","isFirstItemEver","wasFocusedRef","t1","t2","t3","t4","t5","handleFocus","tabIndex","t6"],"sources":["../../../../src/elements/Hierarchy/Tree/TreeFocusContext.tsx"],"sourcesContent":["'use client'\n\nimport type React from 'react'\n\nimport {\n  createContext,\n  use,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react'\n\ntype FocusableItem = {\n  id: string\n  ref: React.RefObject<HTMLElement>\n  type: 'load-more' | 'node'\n}\n\ntype TreeFocusContextType = {\n  focusedId: null | string\n  moveFocus: (direction: 'down' | 'up') => void\n  registerItem: (item: FocusableItem) => void\n  setFocusedId: (id: null | string) => void\n  unregisterItem: (id: string) => void\n}\n\nconst TreeFocusContext = createContext<TreeFocusContextType | undefined>(undefined)\n\nexport const TreeFocusProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n  const [focusedId, setFocusedIdState] = useState<null | string>(null)\n  const itemsRef = useRef<Map<string, FocusableItem>>(new Map())\n\n  const setFocusedId = useCallback((id: null | string) => {\n    setFocusedIdState(id)\n    if (id) {\n      const item = itemsRef.current.get(id)\n      if (item?.ref.current && document.activeElement !== item.ref.current) {\n        item.ref.current.focus()\n      }\n    }\n  }, [])\n\n  const registerItem = useCallback((item: FocusableItem) => {\n    itemsRef.current.set(item.id, item)\n  }, [])\n\n  const unregisterItem = useCallback((id: string) => {\n    itemsRef.current.delete(id)\n  }, [])\n\n  const moveFocus = useCallback(\n    (direction: 'down' | 'up') => {\n      const items = Array.from(itemsRef.current.values())\n      if (items.length === 0) {\n        return\n      }\n\n      // Sort items by their DOM position to ensure correct navigation order\n      const sortedItems = items\n        .filter((item) => item.ref.current)\n        .sort((a, b) => {\n          const aElement = a.ref.current\n          const bElement = b.ref.current\n          if (!aElement || !bElement) {\n            return 0\n          }\n\n          const position = aElement.compareDocumentPosition(bElement)\n          if (position & Node.DOCUMENT_POSITION_FOLLOWING) {\n            return -1\n          }\n          if (position & Node.DOCUMENT_POSITION_PRECEDING) {\n            return 1\n          }\n          return 0\n        })\n\n      const currentIndex = focusedId ? sortedItems.findIndex((item) => item.id === focusedId) : -1\n\n      let nextIndex: number\n      if (direction === 'down') {\n        nextIndex = currentIndex === -1 ? 0 : Math.min(currentIndex + 1, sortedItems.length - 1)\n      } else {\n        nextIndex = Math.max(currentIndex - 1, 0)\n      }\n\n      const nextItem = sortedItems[nextIndex]\n      if (nextItem && nextItem.ref.current) {\n        nextItem.ref.current.focus()\n        setFocusedId(nextItem.id)\n      }\n    },\n    [focusedId, setFocusedId],\n  )\n\n  return (\n    <TreeFocusContext\n      value={{\n        focusedId,\n        moveFocus,\n        registerItem,\n        setFocusedId,\n        unregisterItem,\n      }}\n    >\n      {children}\n    </TreeFocusContext>\n  )\n}\n\nexport const useTreeFocus = () => {\n  const context = use(TreeFocusContext)\n  if (!context) {\n    throw new Error('useTreeFocus must be used within TreeFocusProvider')\n  }\n  return context\n}\n\nexport const useFocusableItem = ({\n  id,\n  type,\n  ref,\n}: {\n  id: string\n  ref: React.RefObject<HTMLElement>\n  type: 'load-more' | 'node'\n}) => {\n  const { focusedId, registerItem, setFocusedId, unregisterItem } = useTreeFocus()\n  const isFocused = focusedId === id\n  const isFirstItemEver = focusedId === null\n  const wasFocusedRef = useRef(false)\n\n  useEffect(() => {\n    registerItem({ id, type, ref })\n    return () => {\n      unregisterItem(id)\n    }\n  }, [id, ref, type, registerItem, unregisterItem])\n\n  useLayoutEffect(() => {\n    if (\n      isFocused &&\n      !wasFocusedRef.current &&\n      ref.current &&\n      document.activeElement !== ref.current\n    ) {\n      ref.current.focus()\n    }\n\n    wasFocusedRef.current = isFocused\n  }, [isFocused, ref])\n\n  const handleFocus = useCallback(() => {\n    setFocusedId(id)\n  }, [id, setFocusedId])\n\n  // Roving tabindex: focused item gets 0, first item (when nothing focused) gets 0, all others get -1\n  const tabIndex = isFocused ? 0 : isFirstItemEver ? 0 : -1\n\n  return {\n    handleFocus,\n    isFocused,\n    tabIndex,\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Hierarchy/Tree/TreeNode/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/Hierarchy/Tree/TreeNode/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAElD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAQhD,OAAO,aAAa,CAAA;AAqBpB,eAAO,MAAM,QAAQ,GAAI,uNAkBtB,aAAa,sBAmMf,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/Hierarchy/Tree/TreeNode/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAElD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAQhD,OAAO,aAAa,CAAA;AAqBpB,eAAO,MAAM,QAAQ,GAAI,uNAkBtB,aAAa,sBA0Mf,CAAA"}

package/dist/elements/Hierarchy/Tree/TreeNode/index.js

@@ -75,7 +75,9 @@ export const TreeNode = ({
     if (newDocs && newDocs.length > 0) {
       const firstNewDoc = newDocs[0];
       const docId = firstNewDoc.id;
-      setFocusedId(`node-${docId}`);
+      window.requestAnimationFrame(() => {
+        setFocusedId(`node-${docId}`);
+      });
     }
   }, [loadMoreFromHook, setFocusedId]);
   const {
@@ -92,21 +94,22 @@ export const TreeNode = ({
   // - If expanded and loaded, check the actual children
   // - Otherwise, assume it might have children (show chevron until proven otherwise)
   const hasChildren = node.hasChildren === true || (expanded && children !== null ? children.length > 0 : true);
-  const handleToggleClick = useCallback(e => {
-    e.stopPropagation();
-    if (!expanded) {
-      void load();
-    }
+  const handleToggle = useCallback(e => {
+    e?.stopPropagation();
+    void load();
     onToggle({
       id: node.id
     });
-  }, [node.id, onToggle, expanded, load]);
+  }, [load, node.id, onToggle]);
   const handleSelectClick = useCallback(() => {
     onSelect?.({
       id: node.id
     });
   }, [node.id, onSelect]);
   const handleKeyDown = useCallback(e_0 => {
+    if (e_0.target !== e_0.currentTarget) {
+      return;
+    }
     switch (e_0.key) {
       case ' ':
       case 'Enter':
@@ -127,19 +130,21 @@ export const TreeNode = ({
         e_0.preventDefault();
         e_0.stopPropagation();
         if (hasChildren && !expanded) {
-          onToggle({
-            id: node.id
-          });
+          handleToggle();
         }
         break;
     }
-  }, [hasChildren, expanded, handleSelectClick, onToggle, node.id]);
+  }, [expanded, handleSelectClick, handleToggle, hasChildren, node.id, onToggle]);
   return /*#__PURE__*/_jsxs("div", {
     "aria-expanded": hasChildren ? expanded : undefined,
     "aria-level": depth + 1,
     "aria-selected": selected,
     className: baseClass,
-    onFocus: handleFocus,
+    onFocus: e_1 => {
+      if (e_1.target === e_1.currentTarget) {
+        handleFocus();
+      }
+    },
     onKeyDown: handleKeyDown,
     ref: nodeRef,
     role: "treeitem",
@@ -152,8 +157,8 @@ export const TreeNode = ({
       children: [hasChildren ? /*#__PURE__*/_jsx("button", {
         "aria-label": expanded ? t('general:collapse') : t('general:open'),
         className: `${baseClass}__toggle`,
-        onClick: handleToggleClick,
-        onMouseDown: e_1 => e_1.preventDefault(),
+        onClick: handleToggle,
+        onMouseDown: e_2 => e_2.preventDefault(),
         tabIndex: -1,
         type: "button",
         children: /*#__PURE__*/_jsx(ChevronIcon, {
@@ -167,7 +172,7 @@ export const TreeNode = ({
       }), /*#__PURE__*/_jsx("span", {
         className: `${baseClass}__title sidebar-row__title`,
         onClick: handleSelectClick,
-        onMouseDown: e_2 => e_2.preventDefault(),
+        onMouseDown: e_3 => e_3.preventDefault(),
         title: node.title,
         children: node.title
       }), isLoading && expanded && /*#__PURE__*/_jsx("span", {

package/dist/elements/Hierarchy/Tree/TreeNode/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useRef","Spinner","ChevronIcon","useTranslation","LoadMore","useFocusableItem","useTreeFocus","useChildren","DEFAULT_TREE_LIMIT","baseClass","getDocumentTitle","doc","useAsTitle","docId","id","idStr","String","value","TreeNode","allPossibleTypeValues","baseFilter","cache","collectionSlug","depth","expandedNodes","filterByCollections","icon","limit","node","onSelect","onToggle","parentFieldName","selected","selectedNodeId","typeFieldName","t","expanded","has","nodeRef","setFocusedId","children","hasMore","isLoading","load","loadMore","loadMoreFromHook","totalDocs","enabled","parentId","handleLoadMore","newDocs","length","firstNewDoc","handleFocus","isFocused","tabIndex","type","ref","hasChildren","handleToggleClick","e","stopPropagation","handleSelectClick","handleKeyDown","key","preventDefault","_jsxs","undefined","className","onFocus","onKeyDown","role","style","filter","Boolean","join","_jsx","onClick","onMouseDown","direction","title","loadingText","size","_Fragment","map","child","childData","childId","childTitle","currentCount","onLoadMore"],"sources":["../../../../../src/elements/Hierarchy/Tree/TreeNode/index.tsx"],"sourcesContent":["'use client'\n\nimport React, { useCallback, useRef } from 'react'\n\nimport type { TreeNodeProps } from '../types.js'\n\nimport { Spinner } from '../../../../elements/Spinner/index.js'\nimport { ChevronIcon } from '../../../../icons/Chevron/index.js'\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport { LoadMore } from '../LoadMore/index.js'\nimport { useFocusableItem, useTreeFocus } from '../TreeFocusContext.js'\nimport { useChildren } from '../useChildren.js'\nimport './index.css'\n\nconst DEFAULT_TREE_LIMIT = 10\n\nconst baseClass = 'tree-node'\n\nconst getDocumentTitle = (doc: Record<string, unknown>, useAsTitle: string | undefined): string => {\n  const docId: number | string = doc.id as number | string\n  const idStr = typeof docId === 'number' ? String(docId) : docId\n\n  if (!useAsTitle) {\n    return idStr\n  }\n\n  const value = doc[useAsTitle]\n  if (value && (typeof value === 'string' || typeof value === 'number')) {\n    return String(value)\n  }\n  return idStr\n}\n\nexport const TreeNode = ({\n  allPossibleTypeValues,\n  baseFilter,\n  cache,\n  collectionSlug,\n  depth = 0,\n  expandedNodes,\n  filterByCollections,\n  icon,\n  limit = DEFAULT_TREE_LIMIT,\n  node,\n  onSelect,\n  onToggle,\n  parentFieldName,\n  selected,\n  selectedNodeId,\n  typeFieldName,\n  useAsTitle,\n}: TreeNodeProps) => {\n  const { t } = useTranslation()\n  const expanded = expandedNodes.has(node.id)\n  const nodeRef = useRef<HTMLDivElement>(null)\n  const { setFocusedId } = useTreeFocus()\n\n  const {\n    children,\n    hasMore,\n    isLoading,\n    load,\n    loadMore: loadMoreFromHook,\n    totalDocs,\n  } = useChildren({\n    allPossibleTypeValues,\n    baseFilter,\n    cache,\n    collectionSlug,\n    enabled: expanded,\n    filterByCollections,\n    limit,\n    parentFieldName,\n    parentId: node.id,\n    typeFieldName,\n    useAsTitle,\n  })\n\n  const handleLoadMore = React.useCallback(async () => {\n    const newDocs = await loadMoreFromHook()\n\n    if (newDocs && newDocs.length > 0) {\n      const firstNewDoc = newDocs[0]\n      const docId: number | string = (firstNewDoc as { id: number | string }).id\n      setFocusedId(`node-${docId}`)\n    }\n  }, [loadMoreFromHook, setFocusedId])\n\n  const { handleFocus, isFocused, tabIndex } = useFocusableItem({\n    id: `node-${node.id}`,\n    type: 'node',\n    ref: nodeRef,\n  })\n\n  // Determine if node has children:\n  // - If explicitly set in data, use that\n  // - If expanded and loaded, check the actual children\n  // - Otherwise, assume it might have children (show chevron until proven otherwise)\n  const hasChildren =\n    node.hasChildren === true || (expanded && children !== null ? children.length > 0 : true)\n\n  const handleToggleClick = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation()\n      if (!expanded) {\n        void load()\n      }\n      onToggle({ id: node.id })\n    },\n    [node.id, onToggle, expanded, load],\n  )\n\n  const handleSelectClick = useCallback(() => {\n    onSelect?.({ id: node.id })\n  }, [node.id, onSelect])\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      switch (e.key) {\n        case ' ':\n        case 'Enter':\n          e.preventDefault()\n          e.stopPropagation()\n          handleSelectClick()\n          break\n        case 'ArrowLeft':\n          e.preventDefault()\n          e.stopPropagation()\n          if (hasChildren && expanded) {\n            onToggle({ id: node.id })\n          }\n          break\n        case 'ArrowRight':\n          e.preventDefault()\n          e.stopPropagation()\n          if (hasChildren && !expanded) {\n            onToggle({ id: node.id })\n          }\n          break\n      }\n    },\n    [hasChildren, expanded, handleSelectClick, onToggle, node.id],\n  )\n\n  return (\n    <div\n      aria-expanded={hasChildren ? expanded : undefined}\n      aria-level={depth + 1}\n      aria-selected={selected}\n      className={baseClass}\n      onFocus={handleFocus}\n      onKeyDown={handleKeyDown}\n      ref={nodeRef}\n      role=\"treeitem\"\n      style={{ '--tree-depth': depth } as React.CSSProperties}\n      tabIndex={tabIndex}\n    >\n      <div\n        className={[\n          `${baseClass}__content`,\n          'sidebar-row',\n          selected && `${baseClass}__content--selected`,\n          selected && 'sidebar-row--selected',\n        ]\n          .filter(Boolean)\n          .join(' ')}\n      >\n        {hasChildren ? (\n          <button\n            aria-label={expanded ? t('general:collapse') : t('general:open')}\n            className={`${baseClass}__toggle`}\n            onClick={handleToggleClick}\n            onMouseDown={(e) => e.preventDefault()}\n            tabIndex={-1}\n            type=\"button\"\n          >\n            <ChevronIcon direction={expanded ? 'down' : 'right'} />\n          </button>\n        ) : (\n          <div className={`${baseClass}__toggle-spacer`} />\n        )}\n        {Boolean(icon) && <span className=\"sidebar-row__icon\">{icon}</span>}\n        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- keyboard handled by parent */}\n        <span\n          className={`${baseClass}__title sidebar-row__title`}\n          onClick={handleSelectClick}\n          onMouseDown={(e) => e.preventDefault()}\n          title={node.title}\n        >\n          {node.title}\n        </span>\n        {isLoading && expanded && (\n          <span className={`${baseClass}__loading`}>\n            <Spinner loadingText={null} size=\"sm\" />\n          </span>\n        )}\n      </div>\n\n      {expanded && children && children.length > 0 && (\n        <>\n          <div className={`${baseClass}__children`} role=\"group\">\n            {children.map((child) => {\n              const childData = child as { id: number | string }\n              const childId = childData.id\n              const childTitle = getDocumentTitle(child, useAsTitle)\n              return (\n                <TreeNode\n                  allPossibleTypeValues={allPossibleTypeValues}\n                  baseFilter={baseFilter}\n                  cache={cache}\n                  collectionSlug={collectionSlug}\n                  depth={depth + 1}\n                  expandedNodes={expandedNodes}\n                  filterByCollections={filterByCollections}\n                  icon={icon}\n                  key={String(childId)}\n                  limit={limit}\n                  node={{\n                    id: childId,\n                    hasChildren: true,\n                    title: childTitle,\n                  }}\n                  onSelect={onSelect}\n                  onToggle={onToggle}\n                  parentFieldName={parentFieldName}\n                  selected={String(childId) === String(selectedNodeId)}\n                  selectedNodeId={selectedNodeId}\n                  typeFieldName={typeFieldName}\n                  useAsTitle={useAsTitle}\n                />\n              )\n            })}\n          </div>\n          {hasMore && (\n            <LoadMore\n              currentCount={children.length}\n              depth={depth + 1}\n              id={`load-more-${node.id}`}\n              onLoadMore={handleLoadMore}\n              totalDocs={totalDocs}\n            />\n          )}\n        </>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useCallback","useRef","Spinner","ChevronIcon","useTranslation","LoadMore","useFocusableItem","useTreeFocus","useChildren","DEFAULT_TREE_LIMIT","baseClass","getDocumentTitle","doc","useAsTitle","docId","id","idStr","String","value","TreeNode","allPossibleTypeValues","baseFilter","cache","collectionSlug","depth","expandedNodes","filterByCollections","icon","limit","node","onSelect","onToggle","parentFieldName","selected","selectedNodeId","typeFieldName","t","expanded","has","nodeRef","setFocusedId","children","hasMore","isLoading","load","loadMore","loadMoreFromHook","totalDocs","enabled","parentId","handleLoadMore","newDocs","length","firstNewDoc","window","requestAnimationFrame","handleFocus","isFocused","tabIndex","type","ref","hasChildren","handleToggle","e","stopPropagation","handleSelectClick","handleKeyDown","target","currentTarget","key","preventDefault","_jsxs","undefined","className","onFocus","onKeyDown","role","style","filter","Boolean","join","_jsx","onClick","onMouseDown","direction","title","loadingText","size","_Fragment","map","child","childData","childId","childTitle","currentCount","onLoadMore"],"sources":["../../../../../src/elements/Hierarchy/Tree/TreeNode/index.tsx"],"sourcesContent":["'use client'\n\nimport React, { useCallback, useRef } from 'react'\n\nimport type { TreeNodeProps } from '../types.js'\n\nimport { Spinner } from '../../../../elements/Spinner/index.js'\nimport { ChevronIcon } from '../../../../icons/Chevron/index.js'\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport { LoadMore } from '../LoadMore/index.js'\nimport { useFocusableItem, useTreeFocus } from '../TreeFocusContext.js'\nimport { useChildren } from '../useChildren.js'\nimport './index.css'\n\nconst DEFAULT_TREE_LIMIT = 10\n\nconst baseClass = 'tree-node'\n\nconst getDocumentTitle = (doc: Record<string, unknown>, useAsTitle: string | undefined): string => {\n  const docId: number | string = doc.id as number | string\n  const idStr = typeof docId === 'number' ? String(docId) : docId\n\n  if (!useAsTitle) {\n    return idStr\n  }\n\n  const value = doc[useAsTitle]\n  if (value && (typeof value === 'string' || typeof value === 'number')) {\n    return String(value)\n  }\n  return idStr\n}\n\nexport const TreeNode = ({\n  allPossibleTypeValues,\n  baseFilter,\n  cache,\n  collectionSlug,\n  depth = 0,\n  expandedNodes,\n  filterByCollections,\n  icon,\n  limit = DEFAULT_TREE_LIMIT,\n  node,\n  onSelect,\n  onToggle,\n  parentFieldName,\n  selected,\n  selectedNodeId,\n  typeFieldName,\n  useAsTitle,\n}: TreeNodeProps) => {\n  const { t } = useTranslation()\n  const expanded = expandedNodes.has(node.id)\n  const nodeRef = useRef<HTMLDivElement>(null)\n  const { setFocusedId } = useTreeFocus()\n\n  const {\n    children,\n    hasMore,\n    isLoading,\n    load,\n    loadMore: loadMoreFromHook,\n    totalDocs,\n  } = useChildren({\n    allPossibleTypeValues,\n    baseFilter,\n    cache,\n    collectionSlug,\n    enabled: expanded,\n    filterByCollections,\n    limit,\n    parentFieldName,\n    parentId: node.id,\n    typeFieldName,\n    useAsTitle,\n  })\n\n  const handleLoadMore = React.useCallback(async () => {\n    const newDocs = await loadMoreFromHook()\n\n    if (newDocs && newDocs.length > 0) {\n      const firstNewDoc = newDocs[0]\n      const docId: number | string = (firstNewDoc as { id: number | string }).id\n      window.requestAnimationFrame(() => {\n        setFocusedId(`node-${docId}`)\n      })\n    }\n  }, [loadMoreFromHook, setFocusedId])\n\n  const { handleFocus, isFocused, tabIndex } = useFocusableItem({\n    id: `node-${node.id}`,\n    type: 'node',\n    ref: nodeRef,\n  })\n\n  // Determine if node has children:\n  // - If explicitly set in data, use that\n  // - If expanded and loaded, check the actual children\n  // - Otherwise, assume it might have children (show chevron until proven otherwise)\n  const hasChildren =\n    node.hasChildren === true || (expanded && children !== null ? children.length > 0 : true)\n\n  const handleToggle = useCallback(\n    (e?: React.SyntheticEvent) => {\n      e?.stopPropagation()\n      void load()\n      onToggle({ id: node.id })\n    },\n    [load, node.id, onToggle],\n  )\n\n  const handleSelectClick = useCallback(() => {\n    onSelect?.({ id: node.id })\n  }, [node.id, onSelect])\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.target !== e.currentTarget) {\n        return\n      }\n      switch (e.key) {\n        case ' ':\n        case 'Enter':\n          e.preventDefault()\n          e.stopPropagation()\n          handleSelectClick()\n          break\n        case 'ArrowLeft':\n          e.preventDefault()\n          e.stopPropagation()\n          if (hasChildren && expanded) {\n            onToggle({ id: node.id })\n          }\n          break\n        case 'ArrowRight':\n          e.preventDefault()\n          e.stopPropagation()\n          if (hasChildren && !expanded) {\n            handleToggle()\n          }\n          break\n      }\n    },\n    [expanded, handleSelectClick, handleToggle, hasChildren, node.id, onToggle],\n  )\n\n  return (\n    <div\n      aria-expanded={hasChildren ? expanded : undefined}\n      aria-level={depth + 1}\n      aria-selected={selected}\n      className={baseClass}\n      onFocus={(e) => {\n        if (e.target === e.currentTarget) {\n          handleFocus()\n        }\n      }}\n      onKeyDown={handleKeyDown}\n      ref={nodeRef}\n      role=\"treeitem\"\n      style={{ '--tree-depth': depth } as React.CSSProperties}\n      tabIndex={tabIndex}\n    >\n      <div\n        className={[\n          `${baseClass}__content`,\n          'sidebar-row',\n          selected && `${baseClass}__content--selected`,\n          selected && 'sidebar-row--selected',\n        ]\n          .filter(Boolean)\n          .join(' ')}\n      >\n        {hasChildren ? (\n          <button\n            aria-label={expanded ? t('general:collapse') : t('general:open')}\n            className={`${baseClass}__toggle`}\n            onClick={handleToggle}\n            onMouseDown={(e) => e.preventDefault()}\n            tabIndex={-1}\n            type=\"button\"\n          >\n            <ChevronIcon direction={expanded ? 'down' : 'right'} />\n          </button>\n        ) : (\n          <div className={`${baseClass}__toggle-spacer`} />\n        )}\n        {Boolean(icon) && <span className=\"sidebar-row__icon\">{icon}</span>}\n        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- keyboard handled by parent */}\n        <span\n          className={`${baseClass}__title sidebar-row__title`}\n          onClick={handleSelectClick}\n          onMouseDown={(e) => e.preventDefault()}\n          title={node.title}\n        >\n          {node.title}\n        </span>\n        {isLoading && expanded && (\n          <span className={`${baseClass}__loading`}>\n            <Spinner loadingText={null} size=\"sm\" />\n          </span>\n        )}\n      </div>\n\n      {expanded && children && children.length > 0 && (\n        <>\n          <div className={`${baseClass}__children`} role=\"group\">\n            {children.map((child) => {\n              const childData = child as { id: number | string }\n              const childId = childData.id\n              const childTitle = getDocumentTitle(child, useAsTitle)\n              return (\n                <TreeNode\n                  allPossibleTypeValues={allPossibleTypeValues}\n                  baseFilter={baseFilter}\n                  cache={cache}\n                  collectionSlug={collectionSlug}\n                  depth={depth + 1}\n                  expandedNodes={expandedNodes}\n                  filterByCollections={filterByCollections}\n                  icon={icon}\n                  key={String(childId)}\n                  limit={limit}\n                  node={{\n                    id: childId,\n                    hasChildren: true,\n                    title: childTitle,\n                  }}\n                  onSelect={onSelect}\n                  onToggle={onToggle}\n                  parentFieldName={parentFieldName}\n                  selected={String(childId) === String(selectedNodeId)}\n                  selectedNodeId={selectedNodeId}\n                  typeFieldName={typeFieldName}\n                  useAsTitle={useAsTitle}\n                />\n              )\n            })}\n          </div>\n          {hasMore && (\n            <LoadMore\n              currentCount={children.length}\n              depth={depth + 1}\n              id={`load-more-${node.id}`}\n              onLoadMore={handleLoadMore}\n              totalDocs={totalDocs}\n            />\n          )}\n        </>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/LeaveWithoutSaving/usePreventLeave.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePreventLeave.js","names":["c","_c","useCallback","useEffect","useRef","useRouter","useRouteTransition","on","obj","args","addEventListener","off","removeEventListener","useBeforeUnload","t0","message","$","enabled","undefined","t1","event","finalEnabled","preventDefault","returnValue","handler","t2","t3","window","usePreventLeave","hasAccepted","onAccept","onPrevent","prevent","startRouteTransition","router","cancelledURL","isAnchorOfCurrentUrl","currentUrl","newUrl","currentUrlObj","URL","newUrlObj","hostname","pathname","search","currentHash","hash","newHash","href","replace","err","console","log","findClosestAnchor","element","tagName","toLowerCase","parentElement","handleClick","target","anchor","location","isAnchor","isDownloadLink","download","isNewTab","metaKey","ctrlKey","isPageLeaving","confirm","current","stopPropagation","document","push"],"sources":["../../../src/elements/LeaveWithoutSaving/usePreventLeave.tsx"],"sourcesContent":["'use client'\nimport { useCallback, useEffect, useRef } from 'react'\n\n// Credit: @Taiki92777\n//    - Source: https://github.com/vercel/next.js/discussions/32231#discussioncomment-7284386\n// Credit: `react-use` maintainers\n//    -  Source: https://github.com/streamich/react-use/blob/ade8d3905f544305515d010737b4ae604cc51024/src/useBeforeUnload.ts#L2\nimport { useRouter } from '../../providers/RouterAdapter/index.js'\nimport { useRouteTransition } from '../../providers/RouteTransition/index.js'\n\nfunction on<T extends Document | EventTarget | HTMLElement | Window>(\n  obj: null | T,\n  ...args: [string, (() => void) | null, ...any] | Parameters<T['addEventListener']>\n): void {\n  if (obj && obj.addEventListener) {\n    obj.addEventListener(...(args as Parameters<HTMLElement['addEventListener']>))\n  }\n}\n\nfunction off<T extends Document | EventTarget | HTMLElement | Window>(\n  obj: null | T,\n  ...args: [string, (() => void) | null, ...any] | Parameters<T['removeEventListener']>\n): void {\n  if (obj && obj.removeEventListener) {\n    obj.removeEventListener(...(args as Parameters<HTMLElement['removeEventListener']>))\n  }\n}\n\nexport const useBeforeUnload = (enabled: (() => boolean) | boolean = true, message?: string) => {\n  const handler = useCallback(\n    (event: BeforeUnloadEvent) => {\n      const finalEnabled = typeof enabled === 'function' ? enabled() : true\n\n      if (!finalEnabled) {\n        return\n      }\n\n      event.preventDefault()\n\n      if (message) {\n        event.returnValue = message\n      }\n\n      return message\n    },\n    [enabled, message],\n  )\n\n  useEffect(() => {\n    if (!enabled) {\n      return\n    }\n\n    on(window, 'beforeunload', handler)\n\n    return () => off(window, 'beforeunload', handler)\n  }, [enabled, handler])\n}\n\nexport const usePreventLeave = ({\n  hasAccepted = false,\n  message = 'Are you sure you want to leave this page?',\n  onAccept,\n  onPrevent,\n  prevent = true,\n}: {\n  hasAccepted: boolean\n  // if no `onPrevent` is provided, the message will be displayed in a confirm dialog\n  message?: string\n  onAccept?: () => void\n  // to use a custom confirmation dialog, provide a function that returns a boolean\n  onPrevent?: () => void\n  prevent: boolean\n}) => {\n  // check when page is about to be reloaded\n  useBeforeUnload(prevent, message)\n  const { startRouteTransition } = useRouteTransition()\n\n  const router = useRouter()\n  const cancelledURL = useRef<string>('')\n\n  // check when page is about to be changed\n  useEffect(() => {\n    function isAnchorOfCurrentUrl(currentUrl: string, newUrl: string) {\n      try {\n        const currentUrlObj = new URL(currentUrl)\n        const newUrlObj = new URL(newUrl)\n        // Compare hostname, pathname, and search parameters\n        if (\n          currentUrlObj.hostname === newUrlObj.hostname &&\n          currentUrlObj.pathname === newUrlObj.pathname &&\n          currentUrlObj.search === newUrlObj.search\n        ) {\n          // Check if the new URL is just an anchor of the current URL page\n          const currentHash = currentUrlObj.hash\n          const newHash = newUrlObj.hash\n          return (\n            currentHash !== newHash &&\n            currentUrlObj.href.replace(currentHash, '') === newUrlObj.href.replace(newHash, '')\n          )\n        }\n      } catch (err) {\n        // eslint-disable-next-line no-console\n        console.log('Unexpected exception thrown in LeaveWithoutSaving:isAnchorOfCurrentUrl', err)\n      }\n      return false\n    }\n\n    function findClosestAnchor(element: HTMLElement | null): HTMLAnchorElement | null {\n      while (element && element.tagName.toLowerCase() !== 'a') {\n        element = element.parentElement\n      }\n      return element as HTMLAnchorElement\n    }\n\n    function handleClick(event: MouseEvent) {\n      try {\n        const target = event.target as HTMLElement\n        const anchor = findClosestAnchor(target)\n        if (anchor) {\n          const currentUrl = window.location.href\n          const newUrl = anchor.href\n          const isAnchor = isAnchorOfCurrentUrl(currentUrl, newUrl)\n          const isDownloadLink = anchor.download !== ''\n          const isNewTab = anchor.target === '_blank' || event.metaKey || event.ctrlKey\n\n          const isPageLeaving = !(newUrl === currentUrl || isAnchor || isDownloadLink || isNewTab)\n\n          if (isPageLeaving && prevent && (!onPrevent ? !window.confirm(message) : true)) {\n            // Keep a reference of the href\n            cancelledURL.current = newUrl\n\n            // Cancel the route change\n            event.preventDefault()\n            event.stopPropagation()\n\n            if (typeof onPrevent === 'function') {\n              onPrevent()\n            }\n          }\n        }\n      } catch (err) {\n        // eslint-disable-next-line no-console\n        console.log('Unexpected exception thrown in LeaveWithoutSaving:usePreventLeave', err)\n      }\n    }\n\n    if (prevent) {\n      // Add the global click event listener\n      document.addEventListener('click', handleClick, true)\n    }\n\n    // Clean up the global click event listener when the component is unmounted\n    return () => {\n      document.removeEventListener('click', handleClick, true)\n    }\n  }, [onPrevent, prevent, message])\n\n  useEffect(() => {\n    if (hasAccepted && cancelledURL.current) {\n      if (onAccept) {\n        onAccept()\n      }\n\n      startRouteTransition(() => router.push(cancelledURL.current))\n    }\n  }, [hasAccepted, onAccept, router, startRouteTransition])\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"usePreventLeave.js","names":["c","_c","useCallback","useEffect","useRef","useRouter","useRouteTransition","on","obj","args","addEventListener","off","removeEventListener","useBeforeUnload","t0","message","$","enabled","undefined","t1","event","finalEnabled","preventDefault","returnValue","handler","t2","t3","window","usePreventLeave","hasAccepted","onAccept","onPrevent","prevent","startRouteTransition","router","cancelledURL","isAnchorOfCurrentUrl","currentUrl","newUrl","currentUrlObj","URL","newUrlObj","hostname","pathname","search","currentHash","hash","newHash","href","replace","err","console","log","findClosestAnchor","element","tagName","toLowerCase","parentElement","handleClick","target","anchor","location","isAnchor","isDownloadLink","download","isNewTab","metaKey","ctrlKey","isPageLeaving","confirm","current","stopPropagation","document","push"],"sources":["../../../src/elements/LeaveWithoutSaving/usePreventLeave.tsx"],"sourcesContent":["'use client'\nimport { useCallback, useEffect, useRef } from 'react'\n\n// Credit: @Taiki92777\n//    - Source: https://github.com/vercel/next.js/discussions/32231#discussioncomment-7284386\n// Credit: `react-use` maintainers\n//    -  Source: https://github.com/streamich/react-use/blob/ade8d3905f544305515d010737b4ae604cc51024/src/useBeforeUnload.ts#L2\nimport { useRouter } from '../../providers/RouterAdapter/index.js'\nimport { useRouteTransition } from '../../providers/RouteTransition/index.js'\n\nfunction on<T extends Document | EventTarget | HTMLElement | Window>(\n  obj: null | T,\n  ...args: [string, (() => void) | null, ...any] | Parameters<T['addEventListener']>\n): void {\n  if (obj && obj.addEventListener) {\n    obj.addEventListener(...(args as Parameters<HTMLElement['addEventListener']>))\n  }\n}\n\nfunction off<T extends Document | EventTarget | HTMLElement | Window>(\n  obj: null | T,\n  ...args: [string, (() => void) | null, ...any] | Parameters<T['removeEventListener']>\n): void {\n  if (obj && obj.removeEventListener) {\n    obj.removeEventListener(...(args as Parameters<HTMLElement['removeEventListener']>))\n  }\n}\n\nexport const useBeforeUnload = (enabled: (() => boolean) | boolean = true, message?: string) => {\n  const handler = useCallback(\n    (event: BeforeUnloadEvent) => {\n      const finalEnabled = typeof enabled === 'function' ? enabled() : true\n\n      if (!finalEnabled) {\n        return\n      }\n\n      event.preventDefault()\n\n      if (message) {\n        event.returnValue = message\n      }\n\n      return message\n    },\n    [enabled, message],\n  )\n\n  useEffect(() => {\n    if (!enabled) {\n      return\n    }\n\n    on(window, 'beforeunload', handler)\n\n    return () => off(window, 'beforeunload', handler)\n  }, [enabled, handler])\n}\n\nexport const usePreventLeave = ({\n  hasAccepted = false,\n  message = 'Are you sure you want to leave this page?',\n  onAccept,\n  onPrevent,\n  prevent = true,\n}: {\n  hasAccepted: boolean\n  // if no `onPrevent` is provided, the message will be displayed in a confirm dialog\n  message?: string\n  onAccept?: () => void\n  // to use a custom confirmation dialog, provide a function that returns a boolean\n  onPrevent?: () => void\n  prevent: boolean\n}) => {\n  // check when page is about to be reloaded\n  useBeforeUnload(prevent, message)\n  const { startRouteTransition } = useRouteTransition()\n\n  const router = useRouter()\n  const cancelledURL = useRef<string>('')\n\n  // check when page is about to be changed\n  useEffect(() => {\n    function isAnchorOfCurrentUrl(currentUrl: string, newUrl: string) {\n      try {\n        const currentUrlObj = new URL(currentUrl)\n        const newUrlObj = new URL(newUrl)\n        // Compare hostname, pathname, and search parameters\n        if (\n          currentUrlObj.hostname === newUrlObj.hostname &&\n          currentUrlObj.pathname === newUrlObj.pathname &&\n          currentUrlObj.search === newUrlObj.search\n        ) {\n          // Check if the new URL is just an anchor of the current URL page\n          const currentHash = currentUrlObj.hash\n          const newHash = newUrlObj.hash\n          return (\n            currentHash !== newHash &&\n            currentUrlObj.href.replace(currentHash, '') === newUrlObj.href.replace(newHash, '')\n          )\n        }\n      } catch (err) {\n        // eslint-disable-next-line no-console\n        console.log('Unexpected exception thrown in LeaveWithoutSaving:isAnchorOfCurrentUrl', err)\n      }\n      return false\n    }\n\n    function findClosestAnchor(element: HTMLElement | null): HTMLAnchorElement | null {\n      while (element && element.tagName.toLowerCase() !== 'a') {\n        element = element.parentElement\n      }\n      return element as HTMLAnchorElement\n    }\n\n    function handleClick(event: MouseEvent) {\n      try {\n        const target = event.target as HTMLElement\n        const anchor = findClosestAnchor(target)\n        if (anchor) {\n          const currentUrl = window.location.href\n          const newUrl = anchor.href\n          const isAnchor = isAnchorOfCurrentUrl(currentUrl, newUrl)\n          const isDownloadLink = anchor.download !== ''\n          const isNewTab = anchor.target === '_blank' || event.metaKey || event.ctrlKey\n\n          const isPageLeaving = !(newUrl === currentUrl || isAnchor || isDownloadLink || isNewTab)\n\n          if (isPageLeaving && prevent && (!onPrevent ? !window.confirm(message) : true)) {\n            // Keep a reference of the href\n            cancelledURL.current = newUrl\n\n            // Cancel the route change\n            event.preventDefault()\n            event.stopPropagation()\n\n            if (typeof onPrevent === 'function') {\n              onPrevent()\n            }\n          }\n        }\n      } catch (err) {\n        // eslint-disable-next-line no-console\n        console.log('Unexpected exception thrown in LeaveWithoutSaving:usePreventLeave', err)\n      }\n    }\n\n    if (prevent) {\n      // Add the global click event listener\n      document.addEventListener('click', handleClick, true)\n    }\n\n    // Clean up the global click event listener when the component is unmounted\n    return () => {\n      document.removeEventListener('click', handleClick, true)\n    }\n  }, [onPrevent, prevent, message])\n\n  useEffect(() => {\n    if (hasAccepted && cancelledURL.current) {\n      if (onAccept) {\n        onAccept()\n      }\n\n      startRouteTransition(() => router.push(cancelledURL.current))\n    }\n  }, [hasAccepted, onAccept, router, startRouteTransition])\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;AACA,SAASC,WAAW,EAAEC,SAAS,EAAEC,MAAM,QAAQ;AAE/C;AACA;AACA;AACA;AACA,SAASC,SAAS,QAAQ;AAC1B,SAASC,kBAAkB,QAAQ;AAEnC,SAASC,GACPC,GAAa,EACb,GAAGC,IAA+E;EAElF,IAAID,GAAA,IAAOA,GAAA,CAAIE,gBAAgB,EAAE;IAC/BF,GAAA,CAAIE,gBAAgB,IAAKD,IAAA;EAC3B;AACF;AAEA,SAASE,IACPH,GAAa,EACb,GAAGC,IAAkF;EAErF,IAAID,GAAA,IAAOA,GAAA,CAAII,mBAAmB,EAAE;IAClCJ,GAAA,CAAII,mBAAmB,IAAKH,IAAA;EAC9B;AACF;AAEA,OAAO,MAAMI,eAAA,GAAkBA,CAAAC,EAAA,EAAAC,OAAA;EAAA,MAAAC,CAAA,GAAAf,EAAA;EAAC,MAAAgB,OAAA,GAAAA,EAAyC,KAAAC,SAAA,UAAzCD,EAAyC;EAAA,IAAAE,EAAA;EAAA,IAAAH,CAAA,QAAAC,OAAA,IAAAD,CAAA,QAAAD,OAAA;IAErEI,EAAA,GAAAC,KAAA;MACE,MAAAC,YAAA,GAAqB,OAAOJ,OAAA,KAAY,aAAaA,OAAA,SAAY;MAAA,KAE5DI,YAAA;QAAA;MAAA;MAILD,KAAA,CAAAE,cAAA,CAAoB;MAAA,IAEhBP,OAAA;QACFK,KAAA,CAAAG,WAAA,GAAoBR,OAAA;MAAA;MAAA,OAGfA,OAAA;IAAA;IACTC,CAAA,MAAAC,OAAA;IAAAD,CAAA,MAAAD,OAAA;IAAAC,CAAA,MAAAG,EAAA;EAAA;IAAAA,EAAA,GAAAH,CAAA;EAAA;EAfF,MAAAQ,OAAA,GAAgBL,EAgBI;EAAA,IAAAM,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAV,CAAA,QAAAC,OAAA,IAAAD,CAAA,QAAAQ,OAAA;IAGVC,EAAA,GAAAA,CAAA;MAAA,KACHR,OAAA;QAAA;MAAA;MAILV,EAAA,CAAAoB,MAAA,EAAW,gBAAgBH,OAAA;MAAA,aAEdb,GAAA,CAAAgB,MAAA,EAAY,gBAAgBH,OAAA;IAAA;IACxCE,EAAA,IAACT,OAAA,EAASO,OAAA;IAAQR,CAAA,MAAAC,OAAA;IAAAD,CAAA,MAAAQ,OAAA;IAAAR,CAAA,MAAAS,EAAA;IAAAT,CAAA,MAAAU,EAAA;EAAA;IAAAD,EAAA,GAAAT,CAAA;IAAAU,EAAA,GAAAV,CAAA;EAAA;EARrBb,SAAA,CAAUsB,EAQV,EAAGC,EAAkB;AAAA,CACvB;AAEA,OAAO,MAAME,eAAA,GAAkBA,CAAC;EAC9BC,WAAA,GAAc,KAAK;EACnBd,OAAA,GAAU,2CAA2C;EACrDe,QAAQ;EACRC,SAAS;EACTC,OAAA,GAAU;AAAI,CASf;EACC;EACAnB,eAAA,CAAgBmB,OAAA,EAASjB,OAAA;EACzB,MAAM;IAAEkB;EAAoB,CAAE,GAAG3B,kBAAA;EAEjC,MAAM4B,MAAA,GAAS7B,SAAA;EACf,MAAM8B,YAAA,GAAe/B,MAAA,CAAe;EAEpC;EACAD,SAAA,CAAU;IACR,SAASiC,qBAAqBC,UAAkB,EAAEC,MAAc;MAC9D,IAAI;QACF,MAAMC,aAAA,GAAgB,IAAIC,GAAA,CAAIH,UAAA;QAC9B,MAAMI,SAAA,GAAY,IAAID,GAAA,CAAIF,MAAA;QAC1B;QACA,IACEC,aAAA,CAAcG,QAAQ,KAAKD,SAAA,CAAUC,QAAQ,IAC7CH,aAAA,CAAcI,QAAQ,KAAKF,SAAA,CAAUE,QAAQ,IAC7CJ,aAAA,CAAcK,MAAM,KAAKH,SAAA,CAAUG,MAAM,EACzC;UACA;UACA,MAAMC,WAAA,GAAcN,aAAA,CAAcO,IAAI;UACtC,MAAMC,OAAA,GAAUN,SAAA,CAAUK,IAAI;UAC9B,OACED,WAAA,KAAgBE,OAAA,IAChBR,aAAA,CAAcS,IAAI,CAACC,OAAO,CAACJ,WAAA,EAAa,QAAQJ,SAAA,CAAUO,IAAI,CAACC,OAAO,CAACF,OAAA,EAAS;QAEpF;MACF,EAAE,OAAOG,GAAA,EAAK;QACZ;QACAC,OAAA,CAAQC,GAAG,CAAC,0EAA0EF,GAAA;MACxF;MACA,OAAO;IACT;IAEA,SAASG,kBAAkBC,OAA2B;MACpD,OAAOA,OAAA,IAAWA,OAAA,CAAQC,OAAO,CAACC,WAAW,OAAO,KAAK;QACvDF,OAAA,GAAUA,OAAA,CAAQG,aAAa;MACjC;MACA,OAAOH,OAAA;IACT;IAEA,SAASI,YAAYtC,KAAiB;MACpC,IAAI;QACF,MAAMuC,MAAA,GAASvC,KAAA,CAAMuC,MAAM;QAC3B,MAAMC,MAAA,GAASP,iBAAA,CAAkBM,MAAA;QACjC,IAAIC,MAAA,EAAQ;UACV,MAAMvB,YAAA,GAAaV,MAAA,CAAOkC,QAAQ,CAACb,IAAI;UACvC,MAAMV,QAAA,GAASsB,MAAA,CAAOZ,IAAI;UAC1B,MAAMc,QAAA,GAAW1B,oBAAA,CAAqBC,YAAA,EAAYC,QAAA;UAClD,MAAMyB,cAAA,GAAiBH,MAAA,CAAOI,QAAQ,KAAK;UAC3C,MAAMC,QAAA,GAAWL,MAAA,CAAOD,MAAM,KAAK,YAAYvC,KAAA,CAAM8C,OAAO,IAAI9C,KAAA,CAAM+C,OAAO;UAE7E,MAAMC,aAAA,GAAgB,EAAE9B,QAAA,KAAWD,YAAA,IAAcyB,QAAA,IAAYC,cAAA,IAAkBE,QAAO;UAEtF,IAAIG,aAAA,IAAiBpC,OAAA,KAAY,CAACD,SAAA,GAAY,CAACJ,MAAA,CAAO0C,OAAO,CAACtD,OAAA,IAAW,IAAG,GAAI;YAC9E;YACAoB,YAAA,CAAamC,OAAO,GAAGhC,QAAA;YAEvB;YACAlB,KAAA,CAAME,cAAc;YACpBF,KAAA,CAAMmD,eAAe;YAErB,IAAI,OAAOxC,SAAA,KAAc,YAAY;cACnCA,SAAA;YACF;UACF;QACF;MACF,EAAE,OAAOmB,KAAA,EAAK;QACZ;QACAC,OAAA,CAAQC,GAAG,CAAC,qEAAqEF,KAAA;MACnF;IACF;IAEA,IAAIlB,OAAA,EAAS;MACX;MACAwC,QAAA,CAAS9D,gBAAgB,CAAC,SAASgD,WAAA,EAAa;IAClD;IAEA;IACA,OAAO;MACLc,QAAA,CAAS5D,mBAAmB,CAAC,SAAS8C,WAAA,EAAa;IACrD;EACF,GAAG,CAAC3B,SAAA,EAAWC,OAAA,EAASjB,OAAA,CAAQ;EAEhCZ,SAAA,CAAU;IACR,IAAI0B,WAAA,IAAeM,YAAA,CAAamC,OAAO,EAAE;MACvC,IAAIxC,QAAA,EAAU;QACZA,QAAA;MACF;MAEAG,oBAAA,CAAqB,MAAMC,MAAA,CAAOuC,IAAI,CAACtC,YAAA,CAAamC,OAAO;IAC7D;EACF,GAAG,CAACzC,WAAA,EAAaC,QAAA,EAAUI,MAAA,EAAQD,oBAAA,CAAqB;AAC1D","ignoreList":[]}

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

@@ -0,0 +1,11 @@
+import type { SanitizedCollectionConfig } from 'payload';
+import React from 'react';
+export type ListColumnSelectionButtonProps = {
+    readonly collectionSlug: SanitizedCollectionConfig['slug'];
+};
+/**
+ * Connects the presentational {@link ColumnSelectionButton} to the table columns state, so the
+ * button itself stays unaware of where its column state is stored.
+ */
+export declare const ListColumnSelectionButton: React.FC<ListColumnSelectionButtonProps>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ListColumnSelectionButton/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAExD,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,MAAM,MAAM,8BAA8B,GAAG;IAC3C,QAAQ,CAAC,cAAc,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAA;CAC3D,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,yBAAyB,EAAE,KAAK,CAAC,EAAE,CAAC,8BAA8B,CAY9E,CAAA"}

package/dist/elements/ListColumnSelectionButton/index.js

@@ -0,0 +1,37 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { useTableColumns } from '../../providers/TableColumns/index.js';
+import { ColumnSelectionButton } from '../ColumnSelection/index.js';
+/**
+ * Connects the presentational {@link ColumnSelectionButton} to the table columns state, so the
+ * button itself stays unaware of where its column state is stored.
+ */
+export const ListColumnSelectionButton = t0 => {
+  const $ = _c(4);
+  const {
+    collectionSlug
+  } = t0;
+  const {
+    columns,
+    setColumns
+  } = useTableColumns();
+  let t1;
+  if ($[0] !== collectionSlug || $[1] !== columns || $[2] !== setColumns) {
+    t1 = _jsx(ColumnSelectionButton, {
+      collectionSlug,
+      columns,
+      onChange: setColumns
+    });
+    $[0] = collectionSlug;
+    $[1] = columns;
+    $[2] = setColumns;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","React","useTableColumns","ColumnSelectionButton","ListColumnSelectionButton","t0","$","collectionSlug","columns","setColumns","t1","_jsx","onChange"],"sources":["../../../src/elements/ListColumnSelectionButton/index.tsx"],"sourcesContent":["'use client'\n\nimport type { SanitizedCollectionConfig } from 'payload'\n\nimport React from 'react'\n\nimport { useTableColumns } from '../../providers/TableColumns/index.js'\nimport { ColumnSelectionButton } from '../ColumnSelection/index.js'\n\nexport type ListColumnSelectionButtonProps = {\n  readonly collectionSlug: SanitizedCollectionConfig['slug']\n}\n\n/**\n * Connects the presentational {@link ColumnSelectionButton} to the table columns state, so the\n * button itself stays unaware of where its column state is stored.\n */\nexport const ListColumnSelectionButton: React.FC<ListColumnSelectionButtonProps> = ({\n  collectionSlug,\n}) => {\n  const { columns, setColumns } = useTableColumns()\n\n  return (\n    <ColumnSelectionButton\n      collectionSlug={collectionSlug}\n      columns={columns}\n      onChange={setColumns}\n    />\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAIA,OAAOC,KAAA,MAAW;AAElB,SAASC,eAAe,QAAQ;AAChC,SAASC,qBAAqB,QAAQ;AAMtC;;;;AAIA,OAAO,MAAMC,yBAAA,GAAsEC,EAAA;EAAA,MAAAC,CAAA,GAAAN,EAAA;EAAC;IAAAO;EAAA,IAAAF,EAEnF;EACC;IAAAG,OAAA;IAAAC;EAAA,IAAgCP,eAAA;EAAA,IAAAQ,EAAA;EAAA,IAAAJ,CAAA,QAAAC,cAAA,IAAAD,CAAA,QAAAE,OAAA,IAAAF,CAAA,QAAAG,UAAA;IAG9BC,EAAA,GAAAC,IAAA,CAAAR,qBAAA;MAAAI,cAAA;MAAAC,OAAA;MAAAI,QAAA,EAGYH;IAAA,C;;;;;;;;SAHZC,E;CAMJ","ignoreList":[]}

package/dist/elements/ListControls/index.css

@@ -12,6 +12,11 @@
     }
   }
 
+  .drawer .list-controls {
+    padding-left: var(--spacer-3);
+    padding-right: var(--spacer-3);
+  }
+
   .list-controls__search-row {
     display: flex;
     gap: var(--spacer-2);

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ListControls/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAgD,MAAM,OAAO,CAAA;AAEpE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAanD,OAAO,aAAa,CAAA;AAIpB;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAwJpD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ListControls/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAgD,MAAM,OAAO,CAAA;AAEpE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAanD,OAAO,aAAa,CAAA;AAIpB;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA2JpD,CAAA"}

package/dist/elements/ListControls/index.js

@@ -10,11 +10,11 @@ import { Dots } from '../../icons/Dots/index.js';
 import { useListQuery } from '../../providers/ListQuery/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { Button } from '../Button/index.js';
-import { ColumnsButton } from '../ColumnsButton/index.js';
-import { GroupByControl } from '../GroupByControl/index.js';
+import { ListColumnSelectionButton } from '../ListColumnSelectionButton/index.js';
+import { ListGroupByButton } from '../ListGroupByButton/index.js';
+import { ListWhereBuilder } from '../ListWhereBuilder/index.js';
 import { QueryPresetBar } from '../QueryPresets/QueryPresetBar/index.js';
 import { ListSearchFilter } from '../Search/ListSearchFilter/index.js';
-import { WhereBuilder } from '../WhereBuilder/index.js';
 import './index.css';
 const baseClass = 'list-controls';
 /**
@@ -138,10 +138,10 @@ export const ListControls = props => {
           selected: isWhereOpen || hasActiveFilters,
           size: "medium",
           children: t("general:filters")
-        }), _jsx(GroupByControl, {
+        }), _jsx(ListGroupByButton, {
           collectionSlug: collectionConfig.slug,
           fields: collectionConfig.fields
-        }), enableColumns && _jsx(ColumnsButton, {
+        }), enableColumns && _jsx(ListColumnSelectionButton, {
           collectionSlug: collectionConfig.slug
         }), enableSort && _jsx(Button, {
           buttonStyle: "secondary",
@@ -182,11 +182,11 @@ export const ListControls = props => {
     }), !isControlled && isWhereOpen && _jsx("div", {
       className: `${baseClass}__where`,
       id: `${baseClass}-where`,
-      children: _jsx(WhereBuilder, {
+      children: _jsx(ListWhereBuilder, {
         collectionPluralLabel: collectionConfig?.labels?.plural,
         collectionSlug: collectionConfig.slug,
         fields: collectionConfig?.fields,
-        onClose: () => setVisibleDrawer(undefined),
+        onEmptyRemove: () => setVisibleDrawer(undefined),
         renderedFilters,
         resolvedFilterOptions
       })

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","useWindowInfo","React","Fragment","useEffect","useRef","useState","Popup","PopupList","ChevronIcon","Dots","useListQuery","useTranslation","Button","ColumnsButton","GroupByControl","QueryPresetBar","ListSearchFilter","WhereBuilder","baseClass","ListControls","props","$","beforeActions","collectionConfig","collectionSlug","disableQueryPresets","enableColumns","t0","enableFilters","t1","enableSort","t2","hasCreatePermission","isWhereOpen","isWhereOpenFromProps","listMenuItems","newDocumentURL","onWhereToggle","queryPreset","activePreset","queryPresetPermissions","renderedFilters","resolvedFilterOptions","undefined","isControlled","handleSearchChange","hasActiveFilters","query","t","breakpoints","t3","s","smallBreak","searchLabelTranslated","label","split","hasWhereParam","Boolean","where","visibleDrawer","setVisibleDrawer","t4","current","t5","t6","t7","handleWhereToggle","_jsxs","className","children","_jsx","onSearchChange","searchQueryParam","search","enableQueryPresets","buttonStyle","extraButtonProps","icon","direction","size","onClick","selected","slug","fields","el","id","to","Array","isArray","length","button","ariaLabel","horizontalAlign","verticalAlign","ButtonGroup","map","_temp","collectionPluralLabel","labels","plural","onClose","item","i"],"sources":["../../../src/elements/ListControls/index.tsx"],"sourcesContent":["'use client'\n\nimport { useWindowInfo } from '@faceless-ui/window-info'\nimport React, { Fragment, useEffect, useRef, useState } from 'react'\n\nimport type { ListControlsProps } from './types.js'\n\nimport { Popup, PopupList } from '../../elements/Popup/index.js'\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { Dots } from '../../icons/Dots/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { ColumnsButton } from '../ColumnsButton/index.js'\nimport { GroupByControl } from '../GroupByControl/index.js'\nimport { QueryPresetBar } from '../QueryPresets/QueryPresetBar/index.js'\nimport { ListSearchFilter } from '../Search/ListSearchFilter/index.js'\nimport { WhereBuilder } from '../WhereBuilder/index.js'\nimport './index.css'\n\nconst baseClass = 'list-controls'\n\n/**\n * The ListControls component is used to render the controls (search, filter, where)\n * for a collection's list view. You can find those directly above the table which lists\n * the collection's documents.\n */\nexport const ListControls: React.FC<ListControlsProps> = (props) => {\n  const {\n    beforeActions,\n    collectionConfig,\n    collectionSlug,\n    disableQueryPresets,\n    enableColumns = true,\n    enableFilters = true,\n    enableSort = false,\n    hasCreatePermission,\n    isWhereOpen: isWhereOpenFromProps,\n    listMenuItems,\n    newDocumentURL,\n    onWhereToggle,\n    queryPreset: activePreset,\n    queryPresetPermissions,\n    renderedFilters,\n    resolvedFilterOptions,\n  } = props\n\n  const isControlled = typeof onWhereToggle === 'function'\n\n  const { handleSearchChange, hasActiveFilters, query } = useListQuery()\n\n  const { t } = useTranslation()\n\n  const {\n    breakpoints: { s: smallBreak },\n  } = useWindowInfo()\n\n  // Simplified placeholder - just \"Search\" instead of \"Search by X, Y, Z\"\n  const searchLabelTranslated = t('general:searchBy', { label: '' }).split(' ')[0]\n\n  const hasWhereParam = useRef(Boolean(query?.where))\n\n  const [visibleDrawer, setVisibleDrawer] = useState<'columns' | 'sort' | 'where'>(\n    hasActiveFilters ? 'where' : undefined,\n  )\n\n  useEffect(() => {\n    if (hasWhereParam.current && !query?.where) {\n      hasWhereParam.current = false\n    } else if (query?.where) {\n      hasWhereParam.current = true\n    }\n  }, [setVisibleDrawer, query?.where])\n\n  const isWhereOpen = isControlled ? Boolean(isWhereOpenFromProps) : visibleDrawer === 'where'\n  const handleWhereToggle = isControlled\n    ? onWhereToggle\n    : () => setVisibleDrawer(visibleDrawer !== 'where' ? 'where' : undefined)\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__search-row`}>\n        <div className={`${baseClass}__left`}>\n          <ListSearchFilter\n            key={collectionSlug}\n            label={searchLabelTranslated}\n            onSearchChange={handleSearchChange}\n            searchQueryParam={query?.search}\n          />\n          {collectionConfig?.enableQueryPresets && !disableQueryPresets && (\n            <QueryPresetBar\n              activePreset={activePreset}\n              collectionSlug={collectionSlug}\n              queryPresetPermissions={queryPresetPermissions}\n            />\n          )}\n        </div>\n        <div className={`${baseClass}__spacer`} />\n        <div className={`${baseClass}__actions`}>\n          {!smallBreak && beforeActions}\n          {enableFilters && (\n            <Button\n              buttonStyle=\"secondary\"\n              className={`${baseClass}__toggle-where`}\n              extraButtonProps={{\n                'aria-controls': `${baseClass}-where`,\n                'aria-expanded': visibleDrawer === 'where',\n              }}\n              icon={<ChevronIcon direction={isWhereOpen ? 'up' : 'down'} size={16} />}\n              id=\"toggle-list-filters\"\n              onClick={handleWhereToggle}\n              selected={isWhereOpen || hasActiveFilters}\n              size=\"medium\"\n            >\n              {t('general:filters')}\n            </Button>\n          )}\n          <GroupByControl collectionSlug={collectionConfig.slug} fields={collectionConfig.fields} />\n          {enableColumns && <ColumnsButton collectionSlug={collectionConfig.slug} />}\n          {enableSort && (\n            <Button\n              buttonStyle=\"secondary\"\n              className={`${baseClass}__toggle-sort`}\n              extraButtonProps={{\n                'aria-controls': `${baseClass}-sort`,\n                'aria-expanded': visibleDrawer === 'sort',\n              }}\n              icon={<ChevronIcon size={16} />}\n              id=\"toggle-list-sort\"\n              onClick={() => setVisibleDrawer(visibleDrawer !== 'sort' ? 'sort' : undefined)}\n              size=\"medium\"\n            >\n              {t('general:sort')}\n            </Button>\n          )}\n          {hasCreatePermission && newDocumentURL && (\n            <Button\n              buttonStyle=\"primary\"\n              className={`${baseClass}__create-new`}\n              el=\"link\"\n              id=\"create-new-doc\"\n              size=\"medium\"\n              to={newDocumentURL}\n            >\n              {t('general:createNew')}\n            </Button>\n          )}\n          {listMenuItems && Array.isArray(listMenuItems) && listMenuItems.length > 0 && (\n            <Popup\n              button={<Dots ariaLabel={t('general:moreOptions')} />}\n              className={`${baseClass}__popup`}\n              horizontalAlign=\"right\"\n              id=\"list-menu\"\n              size=\"medium\"\n              verticalAlign=\"bottom\"\n            >\n              <PopupList.ButtonGroup>\n                {listMenuItems.map((item, i) => (\n                  <Fragment key={`list-menu-item-${i}`}>{item}</Fragment>\n                ))}\n              </PopupList.ButtonGroup>\n            </Popup>\n          )}\n        </div>\n      </div>\n      {!isControlled && isWhereOpen && (\n        <div className={`${baseClass}__where`} id={`${baseClass}-where`}>\n          <WhereBuilder\n            collectionPluralLabel={collectionConfig?.labels?.plural}\n            collectionSlug={collectionConfig.slug}\n            fields={collectionConfig?.fields}\n            onClose={() => setVisibleDrawer(undefined)}\n            renderedFilters={renderedFilters}\n            resolvedFilterOptions={resolvedFilterOptions}\n          />\n        </div>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","useWindowInfo","React","Fragment","useEffect","useRef","useState","Popup","PopupList","ChevronIcon","Dots","useListQuery","useTranslation","Button","ListColumnSelectionButton","ListGroupByButton","ListWhereBuilder","QueryPresetBar","ListSearchFilter","baseClass","ListControls","props","$","beforeActions","collectionConfig","collectionSlug","disableQueryPresets","enableColumns","t0","enableFilters","t1","enableSort","t2","hasCreatePermission","isWhereOpen","isWhereOpenFromProps","listMenuItems","newDocumentURL","onWhereToggle","queryPreset","activePreset","queryPresetPermissions","renderedFilters","resolvedFilterOptions","undefined","isControlled","handleSearchChange","hasActiveFilters","query","t","breakpoints","t3","s","smallBreak","searchLabelTranslated","label","split","hasWhereParam","Boolean","where","visibleDrawer","setVisibleDrawer","t4","current","t5","t6","t7","handleWhereToggle","_jsxs","className","children","_jsx","onSearchChange","searchQueryParam","search","enableQueryPresets","buttonStyle","extraButtonProps","icon","direction","size","onClick","selected","slug","fields","el","id","to","Array","isArray","length","button","ariaLabel","horizontalAlign","verticalAlign","ButtonGroup","map","_temp","collectionPluralLabel","labels","plural","onEmptyRemove","item","i"],"sources":["../../../src/elements/ListControls/index.tsx"],"sourcesContent":["'use client'\n\nimport { useWindowInfo } from '@faceless-ui/window-info'\nimport React, { Fragment, useEffect, useRef, useState } from 'react'\n\nimport type { ListControlsProps } from './types.js'\n\nimport { Popup, PopupList } from '../../elements/Popup/index.js'\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { Dots } from '../../icons/Dots/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { ListColumnSelectionButton } from '../ListColumnSelectionButton/index.js'\nimport { ListGroupByButton } from '../ListGroupByButton/index.js'\nimport { ListWhereBuilder } from '../ListWhereBuilder/index.js'\nimport { QueryPresetBar } from '../QueryPresets/QueryPresetBar/index.js'\nimport { ListSearchFilter } from '../Search/ListSearchFilter/index.js'\nimport './index.css'\n\nconst baseClass = 'list-controls'\n\n/**\n * The ListControls component is used to render the controls (search, filter, where)\n * for a collection's list view. You can find those directly above the table which lists\n * the collection's documents.\n */\nexport const ListControls: React.FC<ListControlsProps> = (props) => {\n  const {\n    beforeActions,\n    collectionConfig,\n    collectionSlug,\n    disableQueryPresets,\n    enableColumns = true,\n    enableFilters = true,\n    enableSort = false,\n    hasCreatePermission,\n    isWhereOpen: isWhereOpenFromProps,\n    listMenuItems,\n    newDocumentURL,\n    onWhereToggle,\n    queryPreset: activePreset,\n    queryPresetPermissions,\n    renderedFilters,\n    resolvedFilterOptions,\n  } = props\n\n  const isControlled = typeof onWhereToggle === 'function'\n\n  const { handleSearchChange, hasActiveFilters, query } = useListQuery()\n\n  const { t } = useTranslation()\n\n  const {\n    breakpoints: { s: smallBreak },\n  } = useWindowInfo()\n\n  // Simplified placeholder - just \"Search\" instead of \"Search by X, Y, Z\"\n  const searchLabelTranslated = t('general:searchBy', { label: '' }).split(' ')[0]\n\n  const hasWhereParam = useRef(Boolean(query?.where))\n\n  const [visibleDrawer, setVisibleDrawer] = useState<'columns' | 'sort' | 'where'>(\n    hasActiveFilters ? 'where' : undefined,\n  )\n\n  useEffect(() => {\n    if (hasWhereParam.current && !query?.where) {\n      hasWhereParam.current = false\n    } else if (query?.where) {\n      hasWhereParam.current = true\n    }\n  }, [setVisibleDrawer, query?.where])\n\n  const isWhereOpen = isControlled ? Boolean(isWhereOpenFromProps) : visibleDrawer === 'where'\n  const handleWhereToggle = isControlled\n    ? onWhereToggle\n    : () => setVisibleDrawer(visibleDrawer !== 'where' ? 'where' : undefined)\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__search-row`}>\n        <div className={`${baseClass}__left`}>\n          <ListSearchFilter\n            key={collectionSlug}\n            label={searchLabelTranslated}\n            onSearchChange={handleSearchChange}\n            searchQueryParam={query?.search}\n          />\n          {collectionConfig?.enableQueryPresets && !disableQueryPresets && (\n            <QueryPresetBar\n              activePreset={activePreset}\n              collectionSlug={collectionSlug}\n              queryPresetPermissions={queryPresetPermissions}\n            />\n          )}\n        </div>\n        <div className={`${baseClass}__spacer`} />\n        <div className={`${baseClass}__actions`}>\n          {!smallBreak && beforeActions}\n          {enableFilters && (\n            <Button\n              buttonStyle=\"secondary\"\n              className={`${baseClass}__toggle-where`}\n              extraButtonProps={{\n                'aria-controls': `${baseClass}-where`,\n                'aria-expanded': visibleDrawer === 'where',\n              }}\n              icon={<ChevronIcon direction={isWhereOpen ? 'up' : 'down'} size={16} />}\n              id=\"toggle-list-filters\"\n              onClick={handleWhereToggle}\n              selected={isWhereOpen || hasActiveFilters}\n              size=\"medium\"\n            >\n              {t('general:filters')}\n            </Button>\n          )}\n          <ListGroupByButton\n            collectionSlug={collectionConfig.slug}\n            fields={collectionConfig.fields}\n          />\n          {enableColumns && <ListColumnSelectionButton collectionSlug={collectionConfig.slug} />}\n          {enableSort && (\n            <Button\n              buttonStyle=\"secondary\"\n              className={`${baseClass}__toggle-sort`}\n              extraButtonProps={{\n                'aria-controls': `${baseClass}-sort`,\n                'aria-expanded': visibleDrawer === 'sort',\n              }}\n              icon={<ChevronIcon size={16} />}\n              id=\"toggle-list-sort\"\n              onClick={() => setVisibleDrawer(visibleDrawer !== 'sort' ? 'sort' : undefined)}\n              size=\"medium\"\n            >\n              {t('general:sort')}\n            </Button>\n          )}\n          {hasCreatePermission && newDocumentURL && (\n            <Button\n              buttonStyle=\"primary\"\n              className={`${baseClass}__create-new`}\n              el=\"link\"\n              id=\"create-new-doc\"\n              size=\"medium\"\n              to={newDocumentURL}\n            >\n              {t('general:createNew')}\n            </Button>\n          )}\n          {listMenuItems && Array.isArray(listMenuItems) && listMenuItems.length > 0 && (\n            <Popup\n              button={<Dots ariaLabel={t('general:moreOptions')} />}\n              className={`${baseClass}__popup`}\n              horizontalAlign=\"right\"\n              id=\"list-menu\"\n              size=\"medium\"\n              verticalAlign=\"bottom\"\n            >\n              <PopupList.ButtonGroup>\n                {listMenuItems.map((item, i) => (\n                  <Fragment key={`list-menu-item-${i}`}>{item}</Fragment>\n                ))}\n              </PopupList.ButtonGroup>\n            </Popup>\n          )}\n        </div>\n      </div>\n      {!isControlled && isWhereOpen && (\n        <div className={`${baseClass}__where`} id={`${baseClass}-where`}>\n          <ListWhereBuilder\n            collectionPluralLabel={collectionConfig?.labels?.plural}\n            collectionSlug={collectionConfig.slug}\n            fields={collectionConfig?.fields}\n            onEmptyRemove={() => setVisibleDrawer(undefined)}\n            renderedFilters={renderedFilters}\n            resolvedFilterOptions={resolvedFilterOptions}\n          />\n        </div>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/ListDrawer/DrawerContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerContent.d.ts","sourceRoot":"","sources":["../../../src/elements/ListDrawer/DrawerContent.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAG/D,OAAO,KAAK,EACV,eAAe,EAGhB,MAAM,YAAY,CAAA;AAUnB,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA4LvD,CAAA"}
+{"version":3,"file":"DrawerContent.d.ts","sourceRoot":"","sources":["../../../src/elements/ListDrawer/DrawerContent.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAG/D,OAAO,KAAK,EACV,eAAe,EAGhB,MAAM,YAAY,CAAA;AAUnB,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA6LvD,CAAA"}

package/dist/elements/ListDrawer/DrawerContent.js

@@ -1,6 +1,6 @@
 'use client';
 
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useModal } from '@faceless-ui/modal';
 import { hoistQueryParamsToAnd } from 'payload/shared';
 import React, { useCallback, useEffect, useState } from 'react';
@@ -162,9 +162,6 @@ export const ListDrawerContent = ({
       slug: selectedOption.value || incomingCollectionSlug
     });
   }, [getEntityConfig, refresh, selectedOption.value]);
-  if (isLoading) {
-    return /*#__PURE__*/_jsx(LoadingOverlay, {});
-  }
   return /*#__PURE__*/_jsxs(ListDrawerContextProvider, {
     allowCreate: allowCreate,
     createNewDrawerSlug: documentDrawerSlug,
@@ -177,8 +174,17 @@ export const ListDrawerContent = ({
     refresh: refreshSelf,
     selectedOption: selectedOption,
     setSelectedOption: setMySelectedOption,
-    children: [ListView, /*#__PURE__*/_jsx(DocumentDrawer, {
-      onSave: onCreateNew
+    children: [!isLoading && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "drawer__fade-in",
+        children: ListView
+      }), /*#__PURE__*/_jsx(DocumentDrawer, {
+        onSave: onCreateNew
+      })]
+    }), /*#__PURE__*/_jsx(LoadingOverlay, {
+      animationDuration: "200ms",
+      overlayType: "drawer",
+      show: isLoading
     })]
   });
 };