@payloadcms/ui 4.0.0-internal.532221d → 4.0.0-internal.567a487

package/dist/elements/ClipboardAction/mergeFormStateFromClipboard.js

@@ -1,4 +1,5 @@
 import ObjectIdImport from 'bson-objectid';
+import { flattenRows, separateRows } from '../../forms/Form/rows.js';
 const ObjectId = 'default' in ObjectIdImport ? ObjectIdImport.default : ObjectIdImport;
 export function reduceFormStateByPath({
   formState,
@@ -147,4 +148,58 @@ export function mergeFormStateFromClipboard({
   }
   return formState;
 }
+/**
+ * Inserts a new row at `rowIndex`, populated with clipboard data, without disturbing
+ * any existing rows. Existing rows at and after `rowIndex` are shifted down by one.
+ */
+export function insertRowFromClipboard({
+  dataFromClipboard: clipboardData,
+  formState,
+  path,
+  rowIndex
+}) {
+  const {
+    path: pathFromClipboard,
+    rowIndex: rowIndexFromClipboard
+  } = clipboardData;
+  const sourceRowPath = typeof rowIndexFromClipboard === 'number' ? `${pathFromClipboard}.${rowIndexFromClipboard}` : pathFromClipboard;
+  const blockType = clipboardData.data[`${sourceRowPath}.blockType`]?.value;
+  const newRowID = new ObjectId().toHexString();
+  const {
+    remainingFields,
+    rows
+  } = separateRows(path, formState);
+  rows.splice(rowIndex, 0, {
+    id: {
+      initialValue: newRowID,
+      valid: true,
+      value: newRowID
+    }
+  });
+  const newRows = [...(formState[path].rows || [])];
+  const newRow = {
+    id: newRowID,
+    isLoading: false
+  };
+  if (blockType) {
+    newRow.blockType = blockType;
+  }
+  newRows.splice(rowIndex, 0, newRow);
+  const formStateWithNewRow = {
+    ...remainingFields,
+    ...flattenRows(path, rows),
+    [path]: {
+      ...formState[path],
+      disableFormData: true,
+      rows: newRows,
+      value: rows.length
+    }
+  };
+  return mergeFormStateFromClipboard({
+    dataFromClipboard: clipboardData,
+    formState: formStateWithNewRow,
+    path,
+    rowIndex
+  });
+}
 //# sourceMappingURL=mergeFormStateFromClipboard.js.map

package/dist/elements/ClipboardAction/mergeFormStateFromClipboard.js.map

@@ -1 +1 @@
-{"version":3,"file":"mergeFormStateFromClipboard.js","names":["ObjectIdImport","ObjectId","default","reduceFormStateByPath","formState","path","rowIndex","filteredState","prefix","key","startsWith","customComponents","_","validate","__","field","Array","isArray","rows","map","row","serializableRow","mergeFormStateFromClipboard","dataFromClipboard","clipboardData","type","typeFromClipboard","data","pathFromClipboard","rowIndexFromClipboard","copyFromField","pasteIntoField","fromRowToField","pathToReplace","targetSegment","lastRenderedPath","rowIDFromClipboard","value","hasRows","length","id","isLoading","initialValue","disableFormData","fieldPath","idReplacements","Map","clipboardPath","newPath","replace","undefined","endsWith","oldID","isValid","newID","toHexString","set","relativePath","segments","split","parseInt","parentFieldPath","slice","join","fullParentPath","parentRows","isNaN","targetParts","lastPart","rowIndexFromTarget"],"sources":["../../../src/elements/ClipboardAction/mergeFormStateFromClipboard.ts"],"sourcesContent":["import type { FieldState, FormState } from 'payload'\n\nimport ObjectIdImport from 'bson-objectid'\n\nimport type { ClipboardPasteData } from './types.js'\n\nconst ObjectId = 'default' in ObjectIdImport ? ObjectIdImport.default : ObjectIdImport\n\nexport function reduceFormStateByPath({\n  formState,\n  path,\n  rowIndex,\n}: {\n  formState: FormState\n  path: string\n  rowIndex?: number\n}) {\n  const filteredState: Record<string, FieldState> = {}\n  const prefix = typeof rowIndex !== 'number' ? path : `${path}.${rowIndex}`\n\n  for (const key in formState) {\n    if (!key.startsWith(prefix)) {\n      continue\n    }\n\n    const { customComponents: _, validate: __, ...field } = formState[key]\n\n    if (Array.isArray(field.rows)) {\n      field.rows = field.rows.map((row) => {\n        if (!row || typeof row !== 'object') {\n          return row\n        }\n        const { customComponents: _, ...serializableRow } = row\n        return serializableRow\n      })\n    }\n\n    filteredState[key] = field\n  }\n\n  return filteredState\n}\n\nexport function mergeFormStateFromClipboard({\n  dataFromClipboard: clipboardData,\n  formState,\n  path,\n  rowIndex,\n}: {\n  dataFromClipboard: ClipboardPasteData\n  formState: FormState\n  path: string\n  rowIndex?: number\n}) {\n  const {\n    type: typeFromClipboard,\n    data: dataFromClipboard,\n    path: pathFromClipboard,\n    rowIndex: rowIndexFromClipboard,\n  } = clipboardData\n\n  const copyFromField = typeof rowIndexFromClipboard !== 'number'\n  const pasteIntoField = typeof rowIndex !== 'number'\n  const fromRowToField = !copyFromField && pasteIntoField\n  const isArray = typeFromClipboard === 'array'\n\n  let pathToReplace: string\n  if (copyFromField && pasteIntoField) {\n    pathToReplace = pathFromClipboard\n  } else if (copyFromField) {\n    pathToReplace = `${pathFromClipboard}.${rowIndex}`\n  } else {\n    pathToReplace = `${pathFromClipboard}.${rowIndexFromClipboard}`\n  }\n\n  let targetSegment: string\n  if (!pasteIntoField) {\n    targetSegment = `${path}.${rowIndex}`\n  } else if (fromRowToField) {\n    targetSegment = `${path}.0`\n  } else {\n    targetSegment = path\n  }\n\n  if (fromRowToField) {\n    const lastRenderedPath = `${path}.0`\n    const rowIDFromClipboard = dataFromClipboard[`${pathToReplace}.id`]?.value as string\n    const hasRows = formState[path].rows?.length\n\n    formState[path].rows = [\n      {\n        ...(hasRows && isArray ? formState[path].rows[0] : {}),\n        id: rowIDFromClipboard,\n        isLoading: false,\n        lastRenderedPath,\n      },\n    ]\n    formState[path].value = 1\n    formState[path].initialValue = 1\n    formState[path].disableFormData = true\n\n    for (const fieldPath in formState) {\n      if (\n        fieldPath !== path &&\n        !fieldPath.startsWith(lastRenderedPath) &&\n        fieldPath.startsWith(path)\n      ) {\n        delete formState[fieldPath]\n      }\n    }\n  }\n\n  // Map to track old IDs to new IDs for regenerating nested IDs\n  const idReplacements: Map<string, string> = new Map()\n\n  for (const clipboardPath in dataFromClipboard) {\n    // When pasting into a specific row, skip only the direct row ID to avoid overwriting\n    // the target row's identity. Nested IDs (array item IDs within the block) should\n    // still be processed so they get regenerated below, preventing server-side duplication.\n    if (\n      (!pasteIntoField && clipboardPath === `${pathToReplace}.id`) ||\n      !clipboardPath.startsWith(pathToReplace)\n    ) {\n      continue\n    }\n\n    const newPath = clipboardPath.replace(pathToReplace, targetSegment)\n\n    const customComponents = isArray ? formState[newPath]?.customComponents : undefined\n    const validate = isArray ? formState[newPath]?.validate : undefined\n\n    // If this is an ID field, generate a new ID to prevent duplicates\n    if (clipboardPath.endsWith('.id') && dataFromClipboard[clipboardPath]?.value) {\n      const oldID = dataFromClipboard[clipboardPath].value as string\n      if (typeof oldID === 'string' && ObjectId.isValid(oldID)) {\n        const newID = new ObjectId().toHexString()\n        idReplacements.set(clipboardPath, newID)\n\n        formState[newPath] = {\n          customComponents,\n          validate,\n          ...dataFromClipboard[clipboardPath],\n          initialValue: newID,\n          value: newID,\n        }\n        continue\n      }\n    }\n\n    formState[newPath] = {\n      customComponents,\n      validate,\n      ...dataFromClipboard[clipboardPath],\n    }\n  }\n\n  // Update parent field rows with new IDs\n  for (const [clipboardPath, newID] of idReplacements) {\n    const relativePath = clipboardPath.replace(`${pathToReplace}.`, '')\n    const segments = relativePath.split('.')\n\n    if (segments.length >= 2) {\n      const rowIndex = parseInt(segments[segments.length - 2], 10)\n      const parentFieldPath = segments.slice(0, segments.length - 2).join('.')\n      const fullParentPath = parentFieldPath ? `${targetSegment}.${parentFieldPath}` : targetSegment\n\n      if (formState[fullParentPath] && Array.isArray(formState[fullParentPath].rows)) {\n        const parentRows = formState[fullParentPath].rows\n        if (!isNaN(rowIndex) && parentRows[rowIndex]) {\n          parentRows[rowIndex].id = newID\n        }\n      }\n    } else if (segments.length === 1 && segments[0] === 'id') {\n      // Top-level block ID - extract field path and row index from targetSegment\n      const targetParts = targetSegment.split('.')\n      const lastPart = targetParts[targetParts.length - 1]\n      const rowIndexFromTarget = !isNaN(parseInt(lastPart, 10)) ? parseInt(lastPart, 10) : 0\n      const fieldPath = !isNaN(parseInt(lastPart, 10))\n        ? targetParts.slice(0, -1).join('.')\n        : targetSegment\n\n      if (formState[fieldPath] && Array.isArray(formState[fieldPath].rows)) {\n        const rows = formState[fieldPath].rows\n        if (rows[rowIndexFromTarget]) {\n          rows[rowIndexFromTarget].id = newID\n        }\n      }\n    }\n  }\n\n  return formState\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"mergeFormStateFromClipboard.js","names":["ObjectIdImport","flattenRows","separateRows","ObjectId","default","reduceFormStateByPath","formState","path","rowIndex","filteredState","prefix","key","startsWith","customComponents","_","validate","__","field","Array","isArray","rows","map","row","serializableRow","mergeFormStateFromClipboard","dataFromClipboard","clipboardData","type","typeFromClipboard","data","pathFromClipboard","rowIndexFromClipboard","copyFromField","pasteIntoField","fromRowToField","pathToReplace","targetSegment","lastRenderedPath","rowIDFromClipboard","value","hasRows","length","id","isLoading","initialValue","disableFormData","fieldPath","idReplacements","Map","clipboardPath","newPath","replace","undefined","endsWith","oldID","isValid","newID","toHexString","set","relativePath","segments","split","parseInt","parentFieldPath","slice","join","fullParentPath","parentRows","isNaN","targetParts","lastPart","rowIndexFromTarget","insertRowFromClipboard","sourceRowPath","blockType","newRowID","remainingFields","splice","valid","newRows","newRow","formStateWithNewRow"],"sources":["../../../src/elements/ClipboardAction/mergeFormStateFromClipboard.ts"],"sourcesContent":["import type { FieldState, FormState, Row } from 'payload'\n\nimport ObjectIdImport from 'bson-objectid'\n\nimport type { ClipboardPasteData } from './types.js'\n\nimport { flattenRows, separateRows } from '../../forms/Form/rows.js'\n\nconst ObjectId = 'default' in ObjectIdImport ? ObjectIdImport.default : ObjectIdImport\n\nexport function reduceFormStateByPath({\n  formState,\n  path,\n  rowIndex,\n}: {\n  formState: FormState\n  path: string\n  rowIndex?: number\n}) {\n  const filteredState: Record<string, FieldState> = {}\n  const prefix = typeof rowIndex !== 'number' ? path : `${path}.${rowIndex}`\n\n  for (const key in formState) {\n    if (!key.startsWith(prefix)) {\n      continue\n    }\n\n    const { customComponents: _, validate: __, ...field } = formState[key]\n\n    if (Array.isArray(field.rows)) {\n      field.rows = field.rows.map((row) => {\n        if (!row || typeof row !== 'object') {\n          return row\n        }\n        const { customComponents: _, ...serializableRow } = row\n        return serializableRow\n      })\n    }\n\n    filteredState[key] = field\n  }\n\n  return filteredState\n}\n\nexport function mergeFormStateFromClipboard({\n  dataFromClipboard: clipboardData,\n  formState,\n  path,\n  rowIndex,\n}: {\n  dataFromClipboard: ClipboardPasteData\n  formState: FormState\n  path: string\n  rowIndex?: number\n}) {\n  const {\n    type: typeFromClipboard,\n    data: dataFromClipboard,\n    path: pathFromClipboard,\n    rowIndex: rowIndexFromClipboard,\n  } = clipboardData\n\n  const copyFromField = typeof rowIndexFromClipboard !== 'number'\n  const pasteIntoField = typeof rowIndex !== 'number'\n  const fromRowToField = !copyFromField && pasteIntoField\n  const isArray = typeFromClipboard === 'array'\n\n  let pathToReplace: string\n  if (copyFromField && pasteIntoField) {\n    pathToReplace = pathFromClipboard\n  } else if (copyFromField) {\n    pathToReplace = `${pathFromClipboard}.${rowIndex}`\n  } else {\n    pathToReplace = `${pathFromClipboard}.${rowIndexFromClipboard}`\n  }\n\n  let targetSegment: string\n  if (!pasteIntoField) {\n    targetSegment = `${path}.${rowIndex}`\n  } else if (fromRowToField) {\n    targetSegment = `${path}.0`\n  } else {\n    targetSegment = path\n  }\n\n  if (fromRowToField) {\n    const lastRenderedPath = `${path}.0`\n    const rowIDFromClipboard = dataFromClipboard[`${pathToReplace}.id`]?.value as string\n    const hasRows = formState[path].rows?.length\n\n    formState[path].rows = [\n      {\n        ...(hasRows && isArray ? formState[path].rows[0] : {}),\n        id: rowIDFromClipboard,\n        isLoading: false,\n        lastRenderedPath,\n      },\n    ]\n    formState[path].value = 1\n    formState[path].initialValue = 1\n    formState[path].disableFormData = true\n\n    for (const fieldPath in formState) {\n      if (\n        fieldPath !== path &&\n        !fieldPath.startsWith(lastRenderedPath) &&\n        fieldPath.startsWith(path)\n      ) {\n        delete formState[fieldPath]\n      }\n    }\n  }\n\n  // Map to track old IDs to new IDs for regenerating nested IDs\n  const idReplacements: Map<string, string> = new Map()\n\n  for (const clipboardPath in dataFromClipboard) {\n    // When pasting into a specific row, skip only the direct row ID to avoid overwriting\n    // the target row's identity. Nested IDs (array item IDs within the block) should\n    // still be processed so they get regenerated below, preventing server-side duplication.\n    if (\n      (!pasteIntoField && clipboardPath === `${pathToReplace}.id`) ||\n      !clipboardPath.startsWith(pathToReplace)\n    ) {\n      continue\n    }\n\n    const newPath = clipboardPath.replace(pathToReplace, targetSegment)\n\n    const customComponents = isArray ? formState[newPath]?.customComponents : undefined\n    const validate = isArray ? formState[newPath]?.validate : undefined\n\n    // If this is an ID field, generate a new ID to prevent duplicates\n    if (clipboardPath.endsWith('.id') && dataFromClipboard[clipboardPath]?.value) {\n      const oldID = dataFromClipboard[clipboardPath].value as string\n      if (typeof oldID === 'string' && ObjectId.isValid(oldID)) {\n        const newID = new ObjectId().toHexString()\n        idReplacements.set(clipboardPath, newID)\n\n        formState[newPath] = {\n          customComponents,\n          validate,\n          ...dataFromClipboard[clipboardPath],\n          initialValue: newID,\n          value: newID,\n        }\n        continue\n      }\n    }\n\n    formState[newPath] = {\n      customComponents,\n      validate,\n      ...dataFromClipboard[clipboardPath],\n    }\n  }\n\n  // Update parent field rows with new IDs\n  for (const [clipboardPath, newID] of idReplacements) {\n    const relativePath = clipboardPath.replace(`${pathToReplace}.`, '')\n    const segments = relativePath.split('.')\n\n    if (segments.length >= 2) {\n      const rowIndex = parseInt(segments[segments.length - 2], 10)\n      const parentFieldPath = segments.slice(0, segments.length - 2).join('.')\n      const fullParentPath = parentFieldPath ? `${targetSegment}.${parentFieldPath}` : targetSegment\n\n      if (formState[fullParentPath] && Array.isArray(formState[fullParentPath].rows)) {\n        const parentRows = formState[fullParentPath].rows\n        if (!isNaN(rowIndex) && parentRows[rowIndex]) {\n          parentRows[rowIndex].id = newID\n        }\n      }\n    } else if (segments.length === 1 && segments[0] === 'id') {\n      // Top-level block ID - extract field path and row index from targetSegment\n      const targetParts = targetSegment.split('.')\n      const lastPart = targetParts[targetParts.length - 1]\n      const rowIndexFromTarget = !isNaN(parseInt(lastPart, 10)) ? parseInt(lastPart, 10) : 0\n      const fieldPath = !isNaN(parseInt(lastPart, 10))\n        ? targetParts.slice(0, -1).join('.')\n        : targetSegment\n\n      if (formState[fieldPath] && Array.isArray(formState[fieldPath].rows)) {\n        const rows = formState[fieldPath].rows\n        if (rows[rowIndexFromTarget]) {\n          rows[rowIndexFromTarget].id = newID\n        }\n      }\n    }\n  }\n\n  return formState\n}\n\n/**\n * Inserts a new row at `rowIndex`, populated with clipboard data, without disturbing\n * any existing rows. Existing rows at and after `rowIndex` are shifted down by one.\n */\nexport function insertRowFromClipboard({\n  dataFromClipboard: clipboardData,\n  formState,\n  path,\n  rowIndex,\n}: {\n  dataFromClipboard: ClipboardPasteData\n  formState: FormState\n  path: string\n  rowIndex: number\n}): FormState {\n  const { path: pathFromClipboard, rowIndex: rowIndexFromClipboard } = clipboardData\n\n  const sourceRowPath =\n    typeof rowIndexFromClipboard === 'number'\n      ? `${pathFromClipboard}.${rowIndexFromClipboard}`\n      : pathFromClipboard\n\n  const blockType = clipboardData.data[`${sourceRowPath}.blockType`]?.value as string | undefined\n\n  const newRowID = new ObjectId().toHexString()\n\n  const { remainingFields, rows } = separateRows(path, formState)\n\n  rows.splice(rowIndex, 0, {\n    id: { initialValue: newRowID, valid: true, value: newRowID },\n  })\n\n  const newRows = [...(formState[path].rows || [])]\n  const newRow: Row = { id: newRowID, isLoading: false }\n  if (blockType) {\n    newRow.blockType = blockType\n  }\n  newRows.splice(rowIndex, 0, newRow)\n\n  const formStateWithNewRow: FormState = {\n    ...remainingFields,\n    ...flattenRows(path, rows),\n    [path]: { ...formState[path], disableFormData: true, rows: newRows, value: rows.length },\n  }\n\n  return mergeFormStateFromClipboard({\n    dataFromClipboard: clipboardData,\n    formState: formStateWithNewRow,\n    path,\n    rowIndex,\n  })\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/ColumnSelection/Popup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popup.d.ts","sourceRoot":"","sources":["../../../src/elements/ColumnSelection/Popup.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,yBAAyB,EAAe,MAAM,SAAS,CAAA;AAI7E,OAAO,KAAyE,MAAM,OAAO,CAAA;AAY7F,OAAO,aAAa,CAAA;AA8CpB,MAAM,MAAM,yBAAyB,GAAG;IACtC,QAAQ,CAAC,cAAc,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAA;IAC1D,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,CAAA;IAC1B,mFAAmF;IACnF,QAAQ,CAAC,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IAC9C,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CAC9B,CAAA;AAkDD,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CA+NpE,CAAA"}
+{"version":3,"file":"Popup.d.ts","sourceRoot":"","sources":["../../../src/elements/ColumnSelection/Popup.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,yBAAyB,EAAe,MAAM,SAAS,CAAA;AAI7E,OAAO,KAAyE,MAAM,OAAO,CAAA;AAY7F,OAAO,aAAa,CAAA;AA8CpB,MAAM,MAAM,yBAAyB,GAAG;IACtC,QAAQ,CAAC,cAAc,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAA;IAC1D,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,CAAA;IAC1B,mFAAmF;IACnF,QAAQ,CAAC,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IAC9C,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CAC9B,CAAA;AAkDD,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CA6NpE,CAAA"}

package/dist/elements/ColumnSelection/Popup.js

@@ -10,11 +10,11 @@ import { SearchIcon } from '../../icons/Search/index.js';
 import { XIcon } from '../../icons/X/index.js';
 import { useEditDepth } from '../../providers/EditDepth/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
+import { matchesSearchQuery } from '../../utilities/matchesSearchQuery.js';
 import { Button } from '../Button/index.js';
 import { DraggableSortable } from '../DraggableSortable/index.js';
 import { useDraggableSortable } from '../DraggableSortable/useDraggableSortable/index.js';
 import { Switch } from '../Switch/index.js';
-import { matchesColumnSearch } from './matchesColumnSearch.js';
 import './Popup.css';
 const baseClass = 'column-selector';
 /**
@@ -208,8 +208,8 @@ export const ColumnSelectionPopup = ({
       };
     });
     // Filter by search query
-    const filtered = searchQuery ? items.filter(item => matchesColumnSearch({
-      labelText: item.labelText,
+    const filtered = searchQuery ? items.filter(item => matchesSearchQuery({
+      label: item.labelText,
       query: searchQuery
     })) : items;
     return {

package/dist/elements/ColumnSelection/Popup.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popup.js","names":["c","_c","getTranslation","fieldIsHiddenOrDisabled","fieldIsID","isFieldDisabled","React","useCallback","useId","useLayoutEffect","useMemo","useRef","useState","AlignJustifiedIcon","SearchIcon","XIcon","useEditDepth","useTranslation","Button","DraggableSortable","useDraggableSortable","Switch","matchesColumnSearch","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","ColumnSelectionPopup","collectionSlug","columns","onClose","i18n","toggleColumn","column","col","accessor","moveColumn","fromIndex","toIndex","next","moved","splice","uuid","editDepth","searchQuery","setSearchQuery","containerRef","lockedWidth","setLockedWidth","current","offsetWidth","filteredColumns","field","columnItems","all","hidden","shown","items","i","labelWithPrefix","name","filtered","item","query","handleDragEnd","moveFromIndex","moveToIndex","allItems","shownCount","fromItem","toItem","fromIsShown","toIsShown","allIds","containerStyle","buttonStyle","icon","onClick","e","target","value","placeholder","type","ids","onDragEnd"],"sources":["../../../src/elements/ColumnSelection/Popup.tsx"],"sourcesContent":["'use client'\n\nimport type { Column, 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 { 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 { matchesColumnSearch } from './matchesColumnSearch.js'\nimport './Popup.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 ColumnSelectionPopupProps = {\n  readonly collectionSlug: SanitizedCollectionConfig['slug']\n  readonly columns: Column[]\n  /** Called with the next column state whenever a column is toggled or reordered. */\n  readonly onChange: (columns: Column[]) => void\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 ColumnSelectionPopup: React.FC<ColumnSelectionPopupProps> = ({\n  collectionSlug,\n  columns,\n  onChange,\n  onClose,\n}) => {\n  const { i18n, t } = useTranslation()\n\n  const toggleColumn = useCallback(\n    (column: string) => {\n      onChange(\n        columns.map((col) => (col.accessor === column ? { ...col, active: !col.active } : col)),\n      )\n    },\n    [columns, onChange],\n  )\n\n  const moveColumn = useCallback(\n    ({ fromIndex, toIndex }: { fromIndex: number; toIndex: number }) => {\n      const next = [...columns]\n      const [moved] = next.splice(fromIndex, 1)\n      next.splice(toIndex, 0, moved)\n      onChange(next)\n    },\n    [columns, onChange],\n  )\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) =>\n          matchesColumnSearch({ labelText: item.labelText, query: searchQuery }),\n        )\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":"Popup.js","names":["c","_c","getTranslation","fieldIsHiddenOrDisabled","fieldIsID","isFieldDisabled","React","useCallback","useId","useLayoutEffect","useMemo","useRef","useState","AlignJustifiedIcon","SearchIcon","XIcon","useEditDepth","useTranslation","matchesSearchQuery","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","ColumnSelectionPopup","collectionSlug","columns","onClose","i18n","toggleColumn","column","col","accessor","moveColumn","fromIndex","toIndex","next","moved","splice","uuid","editDepth","searchQuery","setSearchQuery","containerRef","lockedWidth","setLockedWidth","current","offsetWidth","filteredColumns","field","columnItems","all","hidden","shown","items","i","labelWithPrefix","name","filtered","item","query","handleDragEnd","moveFromIndex","moveToIndex","allItems","shownCount","fromItem","toItem","fromIsShown","toIsShown","allIds","containerStyle","buttonStyle","icon","onClick","e","target","value","placeholder","type","ids","onDragEnd"],"sources":["../../../src/elements/ColumnSelection/Popup.tsx"],"sourcesContent":["'use client'\n\nimport type { Column, 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 { useTranslation } from '../../providers/Translation/index.js'\nimport { matchesSearchQuery } from '../../utilities/matchesSearchQuery.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 './Popup.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 ColumnSelectionPopupProps = {\n  readonly collectionSlug: SanitizedCollectionConfig['slug']\n  readonly columns: Column[]\n  /** Called with the next column state whenever a column is toggled or reordered. */\n  readonly onChange: (columns: Column[]) => void\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 ColumnSelectionPopup: React.FC<ColumnSelectionPopupProps> = ({\n  collectionSlug,\n  columns,\n  onChange,\n  onClose,\n}) => {\n  const { i18n, t } = useTranslation()\n\n  const toggleColumn = useCallback(\n    (column: string) => {\n      onChange(\n        columns.map((col) => (col.accessor === column ? { ...col, active: !col.active } : col)),\n      )\n    },\n    [columns, onChange],\n  )\n\n  const moveColumn = useCallback(\n    ({ fromIndex, toIndex }: { fromIndex: number; toIndex: number }) => {\n      const next = [...columns]\n      const [moved] = next.splice(fromIndex, 1)\n      next.splice(toIndex, 0, moved)\n      onChange(next)\n    },\n    [columns, onChange],\n  )\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) => matchesSearchQuery({ label: item.labelText, query: searchQuery }))\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/Combobox/index.css

@@ -1,7 +1,16 @@
 @layer payload-default {
+  /* The combobox supplies its own padding so the search bar can span the full
+     width and sit flush against its dividing border. */
+  .popup__scroll-container:has(.combobox__content) {
+    padding: 0;
+  }
+
   .combobox__content {
+    --combobox-min-width: 240px;
+
     display: flex;
     flex-direction: column;
+    min-width: var(--combobox-min-width);
     scrollbar-width: none;
     -ms-overflow-style: none;
 
@@ -10,44 +19,96 @@
     }
   }
 
-  .combobox__search-wrapper {
-    display: none;
-    padding-top: var(--popup-padding);
-    padding-bottom: var(--spacer-2);
-    border-bottom: var(--stroke-width-small) solid var(--color-border);
-    margin-bottom: var(--spacer-2);
+  /* Held steady while searching so the popup doesn't resize as entries filter out */
+  .combobox__content[data-width-locked] {
+    min-width: var(--combobox-locked-width);
   }
 
-  .combobox__search-wrapper--no-results {
-    border-bottom: none;
-    margin-bottom: 0;
+  .combobox__search {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    height: calc(var(--spacer-5) + var(--spacer-2) + var(--stroke-width-small));
+    padding-inline: var(--spacer-2-5);
+    border-bottom: var(--stroke-width-small) solid var(--color-border);
   }
 
-  .combobox__search-input {
-    width: 100%;
+  .combobox__search-bar {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    height: var(--spacer-4);
+    padding-inline-end: var(--spacer-2);
     background: var(--color-bg-secondary);
-    color: var(--color-text);
-    border: none;
     border-radius: var(--button-radius);
-    padding: var(--spacer-1) var(--spacer-2);
-    outline: none;
-    box-shadow: none;
   }
 
-  .combobox__search-input::placeholder {
-    color: var(--color-text-tertiary);
+  .combobox__search-bar svg {
+    display: block;
+    flex-shrink: 0;
+    color: var(--color-icon-secondary);
   }
 
-  .combobox__search-input:focus,
-  .combobox__search-input:focus-visible {
-    background: var(--color-bg-secondary-hover);
-    outline: none;
+  .combobox__search-input {
+    flex: 1;
+    height: 100%;
+    padding: 0;
+    background: transparent;
     border: none;
-    box-shadow: none;
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+    color: var(--color-text);
+
+    &::placeholder {
+      color: var(--color-text-tertiary);
+    }
+
+    &:focus,
+    &:focus-visible {
+      outline: none;
+      box-shadow: none;
+    }
+  }
+
+  .combobox__entries {
+    padding-block: var(--spacer-2);
+    overflow-y: auto;
   }
 
   .combobox__entry {
     cursor: pointer;
     display: flex;
   }
+
+  .combobox__header {
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    padding-block: var(--spacer-2);
+    border-bottom: var(--stroke-width-small) solid var(--color-border);
+  }
+
+  .combobox__footer {
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    padding-block: var(--spacer-2);
+    border-top: var(--stroke-width-small) solid var(--color-border);
+  }
+
+  .combobox__no-results {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: calc(var(--spacer-6) + var(--spacer-2));
+    padding-block: var(--spacer-2);
+    padding-inline: var(--spacer-3);
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+    color: var(--color-text-secondary);
+  }
 }

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

@@ -17,10 +17,31 @@ export type ComboboxProps = {
     /** Accessible label for the list of entries */
     'aria-label'?: string;
     entries: ComboboxEntry[];
+    /**
+     * Pinned below the entries, outside the scroll area and unaffected by search.
+     * For actions that belong to the list as a whole, such as "create new".
+     */
+    footer?: (args: {
+        close: () => void;
+    }) => React.ReactNode;
+    /**
+     * Pinned above the search, outside the scroll area and unaffected by it. For
+     * the one entry the list is about, such as the item already selected.
+     */
+    header?: (args: {
+        close: () => void;
+    }) => React.ReactNode;
     /** Minimum number of entries required to show search */
     minEntriesForSearch?: number;
     onSelect?: (entry: ComboboxEntry) => void;
     searchPlaceholder?: string;
+    /**
+     * Whether to say so when a search matches nothing.
+     *
+     * Off for a list that is empty to begin with: there is no search to have failed,
+     * so the message describes something that did not happen.
+     */
+    showEmptyMessage?: boolean;
 } & Omit<PopupProps, 'children' | 'render'>;
 /**
  * A wrapper on top of Popup + PopupList.ButtonGroup that adds search functionality.

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Combobox/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoC,MAAM,OAAO,CAAA;AAExD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAGnD,OAAO,aAAa,CAAA;AAIpB;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,+CAA+C;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,OAAO,EAAE,aAAa,EAAE,CAAA;IACxB,wDAAwD;IACxD,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IACzC,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,GAAG,IAAI,CAAC,UAAU,EAAE,UAAU,GAAG,QAAQ,CAAC,CAAA;AAE3C;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAuG5C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Combobox/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkE,MAAM,OAAO,CAAA;AAEtF,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAMnD,OAAO,aAAa,CAAA;AAIpB;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,+CAA+C;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,OAAO,EAAE,aAAa,EAAE,CAAA;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAA;IACzD;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAA;IACzD,wDAAwD;IACxD,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IACzC,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B,GAAG,IAAI,CAAC,UAAU,EAAE,UAAU,GAAG,QAAQ,CAAC,CAAA;AAE3C;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA6I5C,CAAA"}

package/dist/elements/Combobox/index.js

@@ -1,7 +1,10 @@
 'use client';
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useMemo, useRef, useState } from 'react';
+import React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { SearchIcon } from '../../icons/Search/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import { matchesSearchQuery } from '../../utilities/matchesSearchQuery.js';
 import { Popup, PopupList } from '../Popup/index.js';
 import './index.css';
 const baseClass = 'combobox';
@@ -15,26 +18,43 @@ export const Combobox = props => {
   const {
     'aria-label': ariaLabel,
     entries,
+    footer,
+    header,
     minEntriesForSearch = 8,
     onSelect,
     onToggleClose,
     onToggleOpen,
     searchPlaceholder = 'Search...',
+    showEmptyMessage = true,
     ...popupProps
   } = props;
+  const {
+    t
+  } = useTranslation();
   const [searchValue, setSearchValue] = useState('');
   const isOpenRef = useRef(false);
   const searchInputRef = useRef(null);
-  const filteredEntries = useMemo(() => {
-    if (!searchValue) {
-      return entries;
-    }
-    const search = searchValue.toLowerCase();
-    return entries.filter(entry => entry.name.toLowerCase().includes(search));
-  }, [entries, searchValue]);
+  const contentRef = useRef(null);
+  const filteredEntries = useMemo(() => entries.filter(entry => matchesSearchQuery({
+    label: entry.name,
+    query: searchValue
+  })), [entries, searchValue]);
   const showSearch = entries.length >= minEntriesForSearch;
   const hasResults = filteredEntries.length > 0;
-  const handleToggleOpen = React.useCallback(active => {
+  // Locking the width the moment searching begins keeps the popup from
+  // resizing around the cursor as entries filter out from under it.
+  const [lockedWidth, setLockedWidth] = useState(null);
+  useLayoutEffect(() => {
+    if (!contentRef.current) {
+      return;
+    }
+    if (searchValue && lockedWidth === null) {
+      setLockedWidth(contentRef.current.offsetWidth);
+    } else if (!searchValue && lockedWidth !== null) {
+      setLockedWidth(null);
+    }
+  }, [searchValue, lockedWidth]);
+  const handleToggleOpen = useCallback(active => {
     isOpenRef.current = active;
     if (active && showSearch) {
       setTimeout(() => {
@@ -43,9 +63,10 @@ export const Combobox = props => {
     }
     onToggleOpen?.(active);
   }, [showSearch, onToggleOpen]);
-  const handleToggleClose = React.useCallback(() => {
+  const handleToggleClose = useCallback(() => {
     isOpenRef.current = false;
     setSearchValue('');
+    setLockedWidth(null);
     onToggleClose?.();
   }, [onToggleClose]);
   return /*#__PURE__*/_jsx(Popup, {
@@ -57,18 +78,34 @@ export const Combobox = props => {
       close
     }) => /*#__PURE__*/_jsxs("div", {
       className: `${baseClass}__content`,
-      children: [showSearch && /*#__PURE__*/_jsx("div", {
-        className: `${baseClass}__search-wrapper${!hasResults ? ` ${baseClass}__search-wrapper--no-results` : ''}`,
-        children: /*#__PURE__*/_jsx("input", {
-          "aria-label": searchPlaceholder,
-          className: `${baseClass}__search-input`,
-          onChange: e => setSearchValue(e.target.value),
-          placeholder: searchPlaceholder,
-          ref: searchInputRef,
-          type: "text",
-          value: searchValue
+      "data-width-locked": lockedWidth ? 'true' : undefined,
+      ref: contentRef,
+      style: lockedWidth ? {
+        '--combobox-locked-width': `${lockedWidth}px`
+      } : undefined,
+      children: [header && /*#__PURE__*/_jsx("div", {
+        className: `${baseClass}__header`,
+        children: header({
+          close
+        })
+      }), showSearch && /*#__PURE__*/_jsx("div", {
+        className: `${baseClass}__search`,
+        children: /*#__PURE__*/_jsxs("div", {
+          className: `${baseClass}__search-bar`,
+          children: [/*#__PURE__*/_jsx(SearchIcon, {
+            size: 24
+          }), /*#__PURE__*/_jsx("input", {
+            "aria-label": searchPlaceholder,
+            className: `${baseClass}__search-input`,
+            onChange: e => setSearchValue(e.target.value),
+            placeholder: searchPlaceholder,
+            ref: searchInputRef,
+            type: "text",
+            value: searchValue
+          })]
         })
-      }), /*#__PURE__*/_jsx(PopupList.ButtonGroup, {
+      }), hasResults ? /*#__PURE__*/_jsx(PopupList.ButtonGroup, {
+        className: `${baseClass}__entries`,
         children: /*#__PURE__*/_jsx("div", {
           "aria-label": ariaLabel,
           role: "menu",
@@ -95,6 +132,14 @@ export const Combobox = props => {
             }, `${entry_0.name}-${index}`);
           })
         })
+      }) : showEmptyMessage && /*#__PURE__*/_jsx("div", {
+        className: `${baseClass}__no-results`,
+        children: t('general:noMatchesFound')
+      }), footer && /*#__PURE__*/_jsx("div", {
+        className: `${baseClass}__footer`,
+        children: footer({
+          close
+        })
       })]
     })
   });

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useMemo","useRef","useState","Popup","PopupList","baseClass","Combobox","props","ariaLabel","entries","minEntriesForSearch","onSelect","onToggleClose","onToggleOpen","searchPlaceholder","popupProps","searchValue","setSearchValue","isOpenRef","searchInputRef","filteredEntries","search","toLowerCase","filter","entry","name","includes","showSearch","length","hasResults","handleToggleOpen","useCallback","active","current","setTimeout","focus","handleToggleClose","_jsx","className","render","close","_jsxs","onChange","e","target","value","placeholder","ref","type","ButtonGroup","role","map","index","handleClick","onClick","onKeyDown","key","preventDefault","tabIndex","Component"],"sources":["../../../src/elements/Combobox/index.tsx"],"sourcesContent":["'use client'\nimport React, { useMemo, useRef, useState } from 'react'\n\nimport type { PopupProps } from '../Popup/index.js'\n\nimport { Popup, PopupList } from '../Popup/index.js'\nimport './index.css'\n\nconst baseClass = 'combobox'\n\n/**\n * @internal\n * @experimental\n */\nexport type ComboboxEntry = {\n  Component: React.ReactNode\n  name: string\n}\n\n/**\n * @internal\n * @experimental\n */\nexport type ComboboxProps = {\n  /** Accessible label for the list of entries */\n  'aria-label'?: string\n  entries: ComboboxEntry[]\n  /** Minimum number of entries required to show search */\n  minEntriesForSearch?: number\n  onSelect?: (entry: ComboboxEntry) => void\n  searchPlaceholder?: string\n} & Omit<PopupProps, 'children' | 'render'>\n\n/**\n * A wrapper on top of Popup + PopupList.ButtonGroup that adds search functionality.\n *\n * @internal - this component may be removed or receive breaking changes in minor releases.\n * @experimental\n */\nexport const Combobox: React.FC<ComboboxProps> = (props) => {\n  const {\n    'aria-label': ariaLabel,\n    entries,\n    minEntriesForSearch = 8,\n    onSelect,\n    onToggleClose,\n    onToggleOpen,\n    searchPlaceholder = 'Search...',\n    ...popupProps\n  } = props\n  const [searchValue, setSearchValue] = useState('')\n  const isOpenRef = useRef(false)\n  const searchInputRef = useRef<HTMLInputElement>(null)\n\n  const filteredEntries = useMemo(() => {\n    if (!searchValue) {\n      return entries\n    }\n    const search = searchValue.toLowerCase()\n    return entries.filter((entry) => entry.name.toLowerCase().includes(search))\n  }, [entries, searchValue])\n\n  const showSearch = entries.length >= minEntriesForSearch\n  const hasResults = filteredEntries.length > 0\n\n  const handleToggleOpen = React.useCallback(\n    (active: boolean) => {\n      isOpenRef.current = active\n      if (active && showSearch) {\n        setTimeout(() => {\n          searchInputRef.current?.focus()\n        }, 100)\n      }\n      onToggleOpen?.(active)\n    },\n    [showSearch, onToggleOpen],\n  )\n\n  const handleToggleClose = React.useCallback(() => {\n    isOpenRef.current = false\n    setSearchValue('')\n    onToggleClose?.()\n  }, [onToggleClose])\n\n  return (\n    <Popup\n      {...popupProps}\n      className={`${baseClass} ${popupProps.className || ''}`}\n      onToggleClose={handleToggleClose}\n      onToggleOpen={handleToggleOpen}\n      render={({ close }) => (\n        <div className={`${baseClass}__content`}>\n          {showSearch && (\n            <div\n              className={`${baseClass}__search-wrapper${!hasResults ? ` ${baseClass}__search-wrapper--no-results` : ''}`}\n            >\n              <input\n                aria-label={searchPlaceholder}\n                className={`${baseClass}__search-input`}\n                onChange={(e) => setSearchValue(e.target.value)}\n                placeholder={searchPlaceholder}\n                ref={searchInputRef}\n                type=\"text\"\n                value={searchValue}\n              />\n            </div>\n          )}\n          <PopupList.ButtonGroup>\n            <div aria-label={ariaLabel} role=\"menu\">\n              {filteredEntries.map((entry, index) => {\n                const handleClick = () => {\n                  if (onSelect) {\n                    onSelect(entry)\n                  }\n                  close()\n                }\n\n                return (\n                  <div\n                    className={`${baseClass}__entry`}\n                    data-popup-prevent-close\n                    key={`${entry.name}-${index}`}\n                    onClick={handleClick}\n                    onKeyDown={(e) => {\n                      if (e.key === 'Enter' || e.key === ' ') {\n                        e.preventDefault()\n                        handleClick()\n                      }\n                    }}\n                    role=\"menuitem\"\n                    tabIndex={0}\n                  >\n                    {entry.Component}\n                  </div>\n                )\n              })}\n            </div>\n          </PopupList.ButtonGroup>\n        </div>\n      )}\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useCallback","useLayoutEffect","useMemo","useRef","useState","SearchIcon","useTranslation","matchesSearchQuery","Popup","PopupList","baseClass","Combobox","props","ariaLabel","entries","footer","header","minEntriesForSearch","onSelect","onToggleClose","onToggleOpen","searchPlaceholder","showEmptyMessage","popupProps","t","searchValue","setSearchValue","isOpenRef","searchInputRef","contentRef","filteredEntries","filter","entry","label","name","query","showSearch","length","hasResults","lockedWidth","setLockedWidth","current","offsetWidth","handleToggleOpen","active","setTimeout","focus","handleToggleClose","_jsx","className","render","close","_jsxs","undefined","ref","style","size","onChange","e","target","value","placeholder","type","ButtonGroup","role","map","index","handleClick","onClick","onKeyDown","key","preventDefault","tabIndex","Component"],"sources":["../../../src/elements/Combobox/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react'\n\nimport type { PopupProps } from '../Popup/index.js'\n\nimport { SearchIcon } from '../../icons/Search/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { matchesSearchQuery } from '../../utilities/matchesSearchQuery.js'\nimport { Popup, PopupList } from '../Popup/index.js'\nimport './index.css'\n\nconst baseClass = 'combobox'\n\n/**\n * @internal\n * @experimental\n */\nexport type ComboboxEntry = {\n  Component: React.ReactNode\n  name: string\n}\n\n/**\n * @internal\n * @experimental\n */\nexport type ComboboxProps = {\n  /** Accessible label for the list of entries */\n  'aria-label'?: string\n  entries: ComboboxEntry[]\n  /**\n   * Pinned below the entries, outside the scroll area and unaffected by search.\n   * For actions that belong to the list as a whole, such as \"create new\".\n   */\n  footer?: (args: { close: () => void }) => React.ReactNode\n  /**\n   * Pinned above the search, outside the scroll area and unaffected by it. For\n   * the one entry the list is about, such as the item already selected.\n   */\n  header?: (args: { close: () => void }) => React.ReactNode\n  /** Minimum number of entries required to show search */\n  minEntriesForSearch?: number\n  onSelect?: (entry: ComboboxEntry) => void\n  searchPlaceholder?: string\n  /**\n   * Whether to say so when a search matches nothing.\n   *\n   * Off for a list that is empty to begin with: there is no search to have failed,\n   * so the message describes something that did not happen.\n   */\n  showEmptyMessage?: boolean\n} & Omit<PopupProps, 'children' | 'render'>\n\n/**\n * A wrapper on top of Popup + PopupList.ButtonGroup that adds search functionality.\n *\n * @internal - this component may be removed or receive breaking changes in minor releases.\n * @experimental\n */\nexport const Combobox: React.FC<ComboboxProps> = (props) => {\n  const {\n    'aria-label': ariaLabel,\n    entries,\n    footer,\n    header,\n    minEntriesForSearch = 8,\n    onSelect,\n    onToggleClose,\n    onToggleOpen,\n    searchPlaceholder = 'Search...',\n    showEmptyMessage = true,\n    ...popupProps\n  } = props\n\n  const { t } = useTranslation()\n  const [searchValue, setSearchValue] = useState('')\n  const isOpenRef = useRef(false)\n  const searchInputRef = useRef<HTMLInputElement>(null)\n  const contentRef = useRef<HTMLDivElement>(null)\n\n  const filteredEntries = useMemo(\n    () => entries.filter((entry) => matchesSearchQuery({ label: entry.name, query: searchValue })),\n    [entries, searchValue],\n  )\n\n  const showSearch = entries.length >= minEntriesForSearch\n  const hasResults = filteredEntries.length > 0\n\n  // Locking the width the moment searching begins keeps the popup from\n  // resizing around the cursor as entries filter out from under it.\n  const [lockedWidth, setLockedWidth] = useState<null | number>(null)\n\n  useLayoutEffect(() => {\n    if (!contentRef.current) {\n      return\n    }\n\n    if (searchValue && lockedWidth === null) {\n      setLockedWidth(contentRef.current.offsetWidth)\n    } else if (!searchValue && lockedWidth !== null) {\n      setLockedWidth(null)\n    }\n  }, [searchValue, lockedWidth])\n\n  const handleToggleOpen = useCallback(\n    (active: boolean) => {\n      isOpenRef.current = active\n      if (active && showSearch) {\n        setTimeout(() => {\n          searchInputRef.current?.focus()\n        }, 100)\n      }\n      onToggleOpen?.(active)\n    },\n    [showSearch, onToggleOpen],\n  )\n\n  const handleToggleClose = useCallback(() => {\n    isOpenRef.current = false\n    setSearchValue('')\n    setLockedWidth(null)\n    onToggleClose?.()\n  }, [onToggleClose])\n\n  return (\n    <Popup\n      {...popupProps}\n      className={`${baseClass} ${popupProps.className || ''}`}\n      onToggleClose={handleToggleClose}\n      onToggleOpen={handleToggleOpen}\n      render={({ close }) => (\n        <div\n          className={`${baseClass}__content`}\n          data-width-locked={lockedWidth ? 'true' : undefined}\n          ref={contentRef}\n          style={\n            lockedWidth\n              ? ({ '--combobox-locked-width': `${lockedWidth}px` } as React.CSSProperties)\n              : undefined\n          }\n        >\n          {header && <div className={`${baseClass}__header`}>{header({ close })}</div>}\n          {showSearch && (\n            <div className={`${baseClass}__search`}>\n              <div className={`${baseClass}__search-bar`}>\n                <SearchIcon size={24} />\n                <input\n                  aria-label={searchPlaceholder}\n                  className={`${baseClass}__search-input`}\n                  onChange={(e) => setSearchValue(e.target.value)}\n                  placeholder={searchPlaceholder}\n                  ref={searchInputRef}\n                  type=\"text\"\n                  value={searchValue}\n                />\n              </div>\n            </div>\n          )}\n          {hasResults ? (\n            <PopupList.ButtonGroup className={`${baseClass}__entries`}>\n              <div aria-label={ariaLabel} role=\"menu\">\n                {filteredEntries.map((entry, index) => {\n                  const handleClick = () => {\n                    if (onSelect) {\n                      onSelect(entry)\n                    }\n                    close()\n                  }\n\n                  return (\n                    <div\n                      className={`${baseClass}__entry`}\n                      data-popup-prevent-close\n                      key={`${entry.name}-${index}`}\n                      onClick={handleClick}\n                      onKeyDown={(e) => {\n                        if (e.key === 'Enter' || e.key === ' ') {\n                          e.preventDefault()\n                          handleClick()\n                        }\n                      }}\n                      role=\"menuitem\"\n                      tabIndex={0}\n                    >\n                      {entry.Component}\n                    </div>\n                  )\n                })}\n              </div>\n            </PopupList.ButtonGroup>\n          ) : (\n            showEmptyMessage && (\n              <div className={`${baseClass}__no-results`}>{t('general:noMatchesFound')}</div>\n            )\n          )}\n          {footer && <div className={`${baseClass}__footer`}>{footer({ close })}</div>}\n        </div>\n      )}\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}