@payloadcms/ui 4.0.0-internal.f05c47f → 4.0.0-internal.f15737c

package/dist/elements/ColumnSelection/index.js

@@ -10,7 +10,7 @@ import { Popup } from '../Popup/index.js';
 import { ColumnSelectionPopup } from './Popup.js';
 const baseClass = 'columns-button';
 export const ColumnSelectionButton = t0 => {
-  const $ = _c(9);
+  const $ = _c(11);
   const {
     collectionSlug,
     columns,
@@ -20,66 +20,70 @@ export const ColumnSelectionButton = t0 => {
     t
   } = useTranslation();
   let t1;
-  if ($[0] !== collectionSlug || $[1] !== columns || $[2] !== onChange) {
-    t1 = t2 => {
-      const {
-        close
-      } = t2;
-      return _jsx(ColumnSelectionPopup, {
-        collectionSlug,
-        columns,
-        onChange,
-        onClose: close
-      });
-    };
-    $[0] = collectionSlug;
-    $[1] = columns;
-    $[2] = onChange;
-    $[3] = t1;
-  } else {
-    t1 = $[3];
-  }
-  let t2;
-  if ($[4] !== t) {
-    t2 = t3 => {
-      const {
-        active,
-        ...props
-      } = t3;
-      return _jsx(Button, {
-        ...props,
-        buttonStyle: "secondary",
-        className: `${baseClass}__button`,
-        icon: _jsx(ChevronIcon, {
-          direction: active ? "up" : "down",
-          size: 16
-        }),
-        selected: active,
-        size: "medium",
-        children: t("general:columns")
-      });
-    };
-    $[4] = t;
-    $[5] = t2;
-  } else {
-    t2 = $[5];
-  }
-  let t3;
-  if ($[6] !== t1 || $[7] !== t2) {
-    t3 = _jsx(Popup, {
+  if ($[0] !== collectionSlug || $[1] !== columns || $[2] !== onChange || $[3] !== t) {
+    let t2;
+    if ($[5] !== collectionSlug || $[6] !== columns || $[7] !== onChange) {
+      t2 = t3 => {
+        const {
+          close
+        } = t3;
+        return _jsx(ColumnSelectionPopup, {
+          collectionSlug,
+          columns,
+          onChange,
+          onClose: close
+        });
+      };
+      $[5] = collectionSlug;
+      $[6] = columns;
+      $[7] = onChange;
+      $[8] = t2;
+    } else {
+      t2 = $[8];
+    }
+    let t3;
+    if ($[9] !== t) {
+      t3 = t4 => {
+        const {
+          active,
+          ...props
+        } = t4;
+        return _jsx(Button, {
+          ...props,
+          buttonStyle: "secondary",
+          className: `${baseClass}__button`,
+          icon: _jsx(ChevronIcon, {
+            direction: active ? "up" : "down",
+            size: 16
+          }),
+          selected: active,
+          size: "medium",
+          children: t("general:columns")
+        });
+      };
+      $[9] = t;
+      $[10] = t3;
+    } else {
+      t3 = $[10];
+    }
+    t1 = _jsx(Popup, {
       className: baseClass,
       horizontalAlign: "right",
-      render: t1,
-      renderButton: t2,
+      popupAriaLabel: t("general:columns"),
+      popupType: "dialog",
+      render: t2,
+      renderButton: t3,
       theme: "auto",
       verticalAlign: "bottom"
     });
-    $[6] = t1;
-    $[7] = t2;
-    $[8] = t3;
+    $[0] = collectionSlug;
+    $[1] = columns;
+    $[2] = onChange;
+    $[3] = t;
+    $[4] = t1;
   } else {
-    t3 = $[8];
+    t1 = $[4];
   }
-  return t3;
+  return t1;
 };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","ChevronIcon","useTranslation","Button","Popup","ColumnSelectionPopup","baseClass","ColumnSelectionButton","t0","$","collectionSlug","columns","onChange","t","t1","t2","close","_jsx","onClose","t3","active","props","buttonStyle","className","icon","direction","size","children","horizontalAlign","render","verticalAlign"],"sources":["../../../src/elements/ColumnSelection/index.tsx"],"sourcesContent":["'use client'\n\nimport type { Column, SanitizedCollectionConfig } from 'payload'\n\nimport React from 'react'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { Popup } from '../Popup/index.js'\nimport { ColumnSelectionPopup } from './Popup.js'\n\nexport type ColumnSelectionButtonProps = {\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}\n\nconst baseClass = 'columns-button'\n\nexport const ColumnSelectionButton: React.FC<ColumnSelectionButtonProps> = ({\n  collectionSlug,\n  columns,\n  onChange,\n}) => {\n  const { t } = useTranslation()\n\n  return (\n    <Popup\n      className={baseClass}\n      horizontalAlign=\"right\"\n      render={({ close }) => (\n        <ColumnSelectionPopup\n          collectionSlug={collectionSlug}\n          columns={columns}\n          onChange={onChange}\n          onClose={close}\n        />\n      )}\n      renderButton={({ active, ...props }) => (\n        <Button\n          {...props}\n          buttonStyle=\"secondary\"\n          className={`${baseClass}__button`}\n          icon={<ChevronIcon direction={active ? 'up' : 'down'} size={16} />}\n          selected={active}\n          size=\"medium\"\n        >\n          {t('general:columns')}\n        </Button>\n      )}\n      theme=\"auto\"\n      verticalAlign=\"bottom\"\n    />\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAIA,OAAOC,KAAA,MAAW;AAElB,SAASC,WAAW,QAAQ;AAC5B,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,SAASC,KAAK,QAAQ;AACtB,SAASC,oBAAoB,QAAQ;AASrC,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,qBAAA,GAA8DC,EAAA;EAAA,MAAAC,CAAA,GAAAV,EAAA;EAAC;IAAAW,cAAA;IAAAC,OAAA;IAAAC;EAAA,IAAAJ,EAI3E;EACC;IAAAK;EAAA,IAAcX,cAAA;EAAA,IAAAY,EAAA;EAAA,IAAAL,CAAA,QAAAC,cAAA,IAAAD,CAAA,QAAAE,OAAA,IAAAF,CAAA,QAAAG,QAAA;IAMFE,EAAA,GAAAC,EAAA;MAAC;QAAAC;MAAA,IAAAD,EAAS;MAAA,OAChBE,IAAA,CAAAZ,oBAAA;QAAAK,cAAA;QAAAC,OAAA;QAAAC,QAAA;QAAAM,OAAA,EAIWF;MAAA,C;;;;;;;;;;;IAGCD,EAAA,GAAAI,EAAA;MAAC;QAAAC,MAAA;QAAA,GAAAC;MAAA,IAAAF,EAAoB;MAAA,OACjCF,IAAA,CAAAd,MAAA;QAAA,GACMkB,KAAK;QAAAC,WAAA,EACG;QAAAC,SAAA,EACD,GAAAjB,SAAA,UAAsB;QAAAkB,IAAA,EAC3BP,IAAA,CAAAhB,WAAA;UAAAwB,SAAA,EAAwBL,MAAA,GAAS,OAAO;UAAAM,IAAA;QAAA,C;kBACpCN,MAAA;QAAAM,IAAA,EACL;QAAAC,QAAA,EAEJd,CAAA,CAAE;MAAA,C;;;;;;;;;IApBTM,EAAA,GAAAF,IAAA,CAAAb,KAAA;MAAAmB,SAAA,EAAAjB,SAAA;MAAAsB,eAAA,EAEkB;MAAAC,MAAA,EACRf,E;oBAQMC,E;aAYR;MAAAe,aAAA,EACQ;IAAA,C;;;;;;;SAxBhBX,E;CA2BJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","ChevronIcon","useTranslation","Button","Popup","ColumnSelectionPopup","baseClass","ColumnSelectionButton","t0","$","collectionSlug","columns","onChange","t","t1","t2","t3","close","_jsx","onClose","t4","active","props","buttonStyle","className","icon","direction","size","children","horizontalAlign","popupAriaLabel","popupType","render","verticalAlign"],"sources":["../../../src/elements/ColumnSelection/index.tsx"],"sourcesContent":["'use client'\n\nimport type { Column, SanitizedCollectionConfig } from 'payload'\n\nimport React from 'react'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { Popup } from '../Popup/index.js'\nimport { ColumnSelectionPopup } from './Popup.js'\n\nexport type ColumnSelectionButtonProps = {\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}\n\nconst baseClass = 'columns-button'\n\nexport const ColumnSelectionButton: React.FC<ColumnSelectionButtonProps> = ({\n  collectionSlug,\n  columns,\n  onChange,\n}) => {\n  const { t } = useTranslation()\n\n  return (\n    <Popup\n      className={baseClass}\n      horizontalAlign=\"right\"\n      popupAriaLabel={t('general:columns')}\n      popupType=\"dialog\"\n      render={({ close }) => (\n        <ColumnSelectionPopup\n          collectionSlug={collectionSlug}\n          columns={columns}\n          onChange={onChange}\n          onClose={close}\n        />\n      )}\n      renderButton={({ active, ...props }) => (\n        <Button\n          {...props}\n          buttonStyle=\"secondary\"\n          className={`${baseClass}__button`}\n          icon={<ChevronIcon direction={active ? 'up' : 'down'} size={16} />}\n          selected={active}\n          size=\"medium\"\n        >\n          {t('general:columns')}\n        </Button>\n      )}\n      theme=\"auto\"\n      verticalAlign=\"bottom\"\n    />\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAIA,OAAOC,KAAA,MAAW;AAElB,SAASC,WAAW,QAAQ;AAC5B,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,SAASC,KAAK,QAAQ;AACtB,SAASC,oBAAoB,QAAQ;AASrC,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,qBAAA,GAA8DC,EAAA;EAAA,MAAAC,CAAA,GAAAV,EAAA;EAAC;IAAAW,cAAA;IAAAC,OAAA;IAAAC;EAAA,IAAAJ,EAI3E;EACC;IAAAK;EAAA,IAAcX,cAAA;EAAA,IAAAY,EAAA;EAAA,IAAAL,CAAA,QAAAC,cAAA,IAAAD,CAAA,QAAAE,OAAA,IAAAF,CAAA,QAAAG,QAAA,IAAAH,CAAA,QAAAI,CAAA;IAAA,IAAAE,EAAA;IAAA,IAAAN,CAAA,QAAAC,cAAA,IAAAD,CAAA,QAAAE,OAAA,IAAAF,CAAA,QAAAG,QAAA;MAQFG,EAAA,GAAAC,EAAA;QAAC;UAAAC;QAAA,IAAAD,EAAS;QAAA,OAChBE,IAAA,CAAAb,oBAAA;UAAAK,cAAA;UAAAC,OAAA;UAAAC,QAAA;UAAAO,OAAA,EAIWF;QAAA,C;;;;;;;;;;;MAGCD,EAAA,GAAAI,EAAA;QAAC;UAAAC,MAAA;UAAA,GAAAC;QAAA,IAAAF,EAAoB;QAAA,OACjCF,IAAA,CAAAf,MAAA;UAAA,GACMmB,KAAK;UAAAC,WAAA,EACG;UAAAC,SAAA,EACD,GAAAlB,SAAA,UAAsB;UAAAmB,IAAA,EAC3BP,IAAA,CAAAjB,WAAA;YAAAyB,SAAA,EAAwBL,MAAA,GAAS,OAAO;YAAAM,IAAA;UAAA,C;oBACpCN,MAAA;UAAAM,IAAA,EACL;UAAAC,QAAA,EAEJf,CAAA,CAAE;QAAA,C;;;;;;;IAtBTC,EAAA,GAAAI,IAAA,CAAAd,KAAA;MAAAoB,SAAA,EAAAlB,SAAA;MAAAuB,eAAA,EAEkB;MAAAC,cAAA,EACAjB,CAAA,CAAE;MAAAkB,SAAA,EACR;MAAAC,MAAA,EACFjB,E;oBAQMC,E;aAYR;MAAAiB,aAAA,EACQ;IAAA,C;;;;;;;;;SA1BhBnB,E;CA6BJ","ignoreList":[]}

package/dist/elements/ColumnSelection/matchesColumnSearch.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Matches a column label against a search query. Single-character queries only
+ * match the start of a word, keeping single-letter searches low-noise; queries
+ * of two or more characters match anywhere in the label.
+ */
+export declare function matchesColumnSearch({ labelText, query, }: {
+    labelText: string;
+    query: string;
+}): boolean;
+//# sourceMappingURL=matchesColumnSearch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"matchesColumnSearch.d.ts","sourceRoot":"","sources":["../../../src/elements/ColumnSelection/matchesColumnSearch.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,KAAK,GACN,EAAE;IACD,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;CACd,GAAG,OAAO,CAcV"}

package/dist/elements/ColumnSelection/matchesColumnSearch.js

@@ -0,0 +1,21 @@
+const WORD_SPLIT_REGEX = /[^\p{L}\p{N}]+/u;
+/**
+ * Matches a column label against a search query. Single-character queries only
+ * match the start of a word, keeping single-letter searches low-noise; queries
+ * of two or more characters match anywhere in the label.
+ */
+export function matchesColumnSearch({
+  labelText,
+  query
+}) {
+  const normalizedQuery = query.trim().toLowerCase();
+  if (!normalizedQuery) {
+    return true;
+  }
+  const normalizedLabel = labelText.toLowerCase();
+  if (normalizedQuery.length === 1) {
+    return normalizedLabel.split(WORD_SPLIT_REGEX).some(word => word.startsWith(normalizedQuery));
+  }
+  return normalizedLabel.includes(normalizedQuery);
+}
+//# sourceMappingURL=matchesColumnSearch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"matchesColumnSearch.js","names":["WORD_SPLIT_REGEX","matchesColumnSearch","labelText","query","normalizedQuery","trim","toLowerCase","normalizedLabel","length","split","some","word","startsWith","includes"],"sources":["../../../src/elements/ColumnSelection/matchesColumnSearch.ts"],"sourcesContent":["const WORD_SPLIT_REGEX = /[^\\p{L}\\p{N}]+/u\n\n/**\n * Matches a column label against a search query. Single-character queries only\n * match the start of a word, keeping single-letter searches low-noise; queries\n * of two or more characters match anywhere in the label.\n */\nexport function matchesColumnSearch({\n  labelText,\n  query,\n}: {\n  labelText: string\n  query: string\n}): boolean {\n  const normalizedQuery = query.trim().toLowerCase()\n\n  if (!normalizedQuery) {\n    return true\n  }\n\n  const normalizedLabel = labelText.toLowerCase()\n\n  if (normalizedQuery.length === 1) {\n    return normalizedLabel.split(WORD_SPLIT_REGEX).some((word) => word.startsWith(normalizedQuery))\n  }\n\n  return normalizedLabel.includes(normalizedQuery)\n}\n"],"mappings":"AAAA,MAAMA,gBAAA,GAAmB;AAEzB;;;;;AAKA,OAAO,SAASC,oBAAoB;EAClCC,SAAS;EACTC;AAAK,CAIN;EACC,MAAMC,eAAA,GAAkBD,KAAA,CAAME,IAAI,GAAGC,WAAW;EAEhD,IAAI,CAACF,eAAA,EAAiB;IACpB,OAAO;EACT;EAEA,MAAMG,eAAA,GAAkBL,SAAA,CAAUI,WAAW;EAE7C,IAAIF,eAAA,CAAgBI,MAAM,KAAK,GAAG;IAChC,OAAOD,eAAA,CAAgBE,KAAK,CAACT,gBAAA,EAAkBU,IAAI,CAAEC,IAAA,IAASA,IAAA,CAAKC,UAAU,CAACR,eAAA;EAChF;EAEA,OAAOG,eAAA,CAAgBM,QAAQ,CAACT,eAAA;AAClC","ignoreList":[]}

package/dist/elements/Combobox/index.css

@@ -1,16 +1,7 @@
 @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;
 
@@ -19,88 +10,44 @@
     }
   }
 
-  /* 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 {
+    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);
   }
 
-  .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-wrapper--no-results {
+    border-bottom: none;
+    margin-bottom: 0;
   }
 
-  .combobox__search-bar {
-    display: flex;
-    align-items: center;
-    flex: 1;
-    height: var(--spacer-4);
-    padding-inline-end: var(--spacer-2);
+  .combobox__search-input {
+    width: 100%;
     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-bar svg {
-    display: block;
-    flex-shrink: 0;
-    color: var(--color-icon-secondary);
+  .combobox__search-input::placeholder {
+    color: var(--color-text-tertiary);
   }
 
-  .combobox__search-input {
-    flex: 1;
-    height: 100%;
-    padding: 0;
-    background: transparent;
+  .combobox__search-input:focus,
+  .combobox__search-input:focus-visible {
+    background: var(--color-bg-secondary-hover);
+    outline: none;
     border: 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;
+    box-shadow: none;
   }
 
   .combobox__entry {
     cursor: pointer;
     display: flex;
   }
-
-  .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,13 +17,6 @@ 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;
     /** Minimum number of entries required to show search */
     minEntriesForSearch?: number;
     onSelect?: (entry: ComboboxEntry) => void;

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,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,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,CAwI5C,CAAA"}
+{"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,CAyG5C,CAAA"}

package/dist/elements/Combobox/index.js

@@ -1,10 +1,7 @@
 'use client';
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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 React, { useMemo, useRef, useState } from 'react';
 import { Popup, PopupList } from '../Popup/index.js';
 import './index.css';
 const baseClass = 'combobox';
@@ -18,7 +15,6 @@ export const Combobox = props => {
   const {
     'aria-label': ariaLabel,
     entries,
-    footer,
     minEntriesForSearch = 8,
     onSelect,
     onToggleClose,
@@ -26,33 +22,19 @@ export const Combobox = props => {
     searchPlaceholder = 'Search...',
     ...popupProps
   } = props;
-  const {
-    t
-  } = useTranslation();
   const [searchValue, setSearchValue] = useState('');
   const isOpenRef = useRef(false);
   const searchInputRef = useRef(null);
-  const contentRef = useRef(null);
-  const filteredEntries = useMemo(() => entries.filter(entry => matchesSearchQuery({
-    label: entry.name,
-    query: searchValue
-  })), [entries, searchValue]);
+  const filteredEntries = useMemo(() => {
+    if (!searchValue) {
+      return entries;
+    }
+    const search = searchValue.toLowerCase();
+    return entries.filter(entry => entry.name.toLowerCase().includes(search));
+  }, [entries, searchValue]);
   const showSearch = entries.length >= minEntriesForSearch;
   const hasResults = filteredEntries.length > 0;
-  // 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 => {
+  const handleToggleOpen = React.useCallback(active => {
     isOpenRef.current = active;
     if (active && showSearch) {
       setTimeout(() => {
@@ -61,10 +43,9 @@ export const Combobox = props => {
     }
     onToggleOpen?.(active);
   }, [showSearch, onToggleOpen]);
-  const handleToggleClose = useCallback(() => {
+  const handleToggleClose = React.useCallback(() => {
     isOpenRef.current = false;
     setSearchValue('');
-    setLockedWidth(null);
     onToggleClose?.();
   }, [onToggleClose]);
   return /*#__PURE__*/_jsx(Popup, {
@@ -72,33 +53,24 @@ export const Combobox = props => {
     className: `${baseClass} ${popupProps.className || ''}`,
     onToggleClose: handleToggleClose,
     onToggleOpen: handleToggleOpen,
+    popupAriaLabel: ariaLabel || searchPlaceholder,
+    popupType: "dialog",
     render: ({
       close
     }) => /*#__PURE__*/_jsxs("div", {
       className: `${baseClass}__content`,
-      "data-width-locked": lockedWidth ? 'true' : undefined,
-      ref: contentRef,
-      style: lockedWidth ? {
-        '--combobox-locked-width': `${lockedWidth}px`
-      } : undefined,
       children: [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
-          })]
+        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
         })
-      }), hasResults ? /*#__PURE__*/_jsx(PopupList.ButtonGroup, {
-        className: `${baseClass}__entries`,
+      }), /*#__PURE__*/_jsx(PopupList.ButtonGroup, {
         children: /*#__PURE__*/_jsx("div", {
           "aria-label": ariaLabel,
           role: "menu",
@@ -125,14 +97,6 @@ export const Combobox = props => {
             }, `${entry_0.name}-${index}`);
           })
         })
-      }) : /*#__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","useCallback","useLayoutEffect","useMemo","useRef","useState","SearchIcon","useTranslation","matchesSearchQuery","Popup","PopupList","baseClass","Combobox","props","ariaLabel","entries","footer","minEntriesForSearch","onSelect","onToggleClose","onToggleOpen","searchPlaceholder","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  /** 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    footer,\n    minEntriesForSearch = 8,\n    onSelect,\n    onToggleClose,\n    onToggleOpen,\n    searchPlaceholder = 'Search...',\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          {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            <div className={`${baseClass}__no-results`}>{t('general:noMatchesFound')}</div>\n          )}\n          {footer && <div className={`${baseClass}__footer`}>{footer({ close })}</div>}\n        </div>\n      )}\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"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","popupAriaLabel","popupType","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      popupAriaLabel={ariaLabel || searchPlaceholder}\n      popupType=\"dialog\"\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":[]}

package/dist/elements/CommandPalette/index.css

@@ -20,7 +20,6 @@
 
   .cmd-palette__input {
     padding: var(--spacer-3) var(--spacer-4);
-    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);
@@ -59,9 +58,8 @@
 
   .cmd-palette__group-label {
     padding: var(--spacer-1) var(--spacer-4);
-    font-family: var(--text-body-medium-strong-font-family);
     font-size: var(--text-body-medium-font-size);
-    font-weight: var(--text-body-medium-strong-font-weight);
+    font-weight: var(--text-body-medium-bold-font-weight);
     text-transform: uppercase;
     letter-spacing: 0.06em;
     /* Tertiary + bold reads as a non-interactive section header, distinct from
@@ -79,7 +77,6 @@
        each side ≈ 1.375rem total; 2.25rem gives comfortable breathing room). */
     height: 2.25rem;
     padding: 0 var(--spacer-4);
-    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);
@@ -101,14 +98,13 @@
   }
 
   .cmd-palette__option-match {
-    font-weight: var(--text-body-medium-strong-font-weight);
+    font-weight: var(--text-body-medium-bold-font-weight);
     color: var(--color-text);
   }
 
   .cmd-palette__empty {
     padding: var(--spacer-4);
     text-align: center;
-    font-family: var(--text-body-medium-font-family);
     font-size: var(--text-body-medium-font-size);
     color: var(--color-text-secondary);
   }
@@ -122,7 +118,6 @@
     gap: var(--spacer-2);
     padding: var(--spacer-2) var(--spacer-4);
     border-top: var(--stroke-width-small) solid var(--color-border);
-    font-family: var(--text-body-medium-font-family);
     font-size: var(--text-body-medium-font-size);
     color: var(--color-text-secondary);
   }
@@ -152,7 +147,7 @@
   /* The primary action (Enter): emphasized so it reads as the default. Selector is
      element-qualified to outrank button.cmd-palette__hint's `font`/`color: inherit`. */
   button.cmd-palette__hint--primary {
-    font-weight: var(--text-body-medium-strong-font-weight);
+    font-weight: var(--text-body-medium-bold-font-weight);
     color: var(--color-text);
 
     & .cmd-palette__key {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/CopyLocaleData/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAiB1C,OAAO,aAAa,CAAA;AAKpB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAgMlC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/CopyLocaleData/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAiB1C,OAAO,aAAa,CAAA;AAKpB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAkMlC,CAAA"}

package/dist/elements/CopyLocaleData/index.js

@@ -36,9 +36,8 @@ export const CopyLocaleData = () => {
   const {
     admin
   } = t1;
-  const {
-    code
-  } = useLocale();
+  const locale = useLocale();
+  const code = locale?.code;
   const {
     id,
     collectionSlug,
@@ -62,7 +61,7 @@ export const CopyLocaleData = () => {
   const localeOptions = localization && localization.locales.map(_temp) || [];
   let t2;
   if ($[0] !== code) {
-    t2 = locale_0 => locale_0.value !== code;
+    t2 = locale_1 => locale_1.value !== code;
     $[0] = code;
     $[1] = t2;
   } else {
@@ -72,8 +71,8 @@ export const CopyLocaleData = () => {
   let t3;
   if ($[2] !== i18n || $[3] !== localization) {
     t3 = code_0 => {
-      const locale_1 = localization && localization.locales.find(l => l.code === code_0);
-      return locale_1 && locale_1.label ? getTranslation(locale_1.label, i18n) : code_0;
+      const locale_2 = localization && localization.locales.find(l => l.code === code_0);
+      return locale_2 && locale_2.label ? getTranslation(locale_2.label, i18n) : code_0;
     };
     $[2] = i18n;
     $[3] = localization;
@@ -128,6 +127,7 @@ export const CopyLocaleData = () => {
           path: `/${collectionSlug ? `collections/${collectionSlug}/${id}` : `globals/${globalSlug}`}`
         }) + `?locale=${to}`));
         toggleModal(drawerSlug);
+        toast.success(t("general:copied"));
       } catch (t8) {
         const error = t8;
         setCopying(false);
@@ -292,10 +292,10 @@ export const CopyLocaleData = () => {
     })]
   });
 };
-function _temp(locale) {
+function _temp(locale_0) {
   return {
-    label: locale.label,
-    value: locale.code
+    label: locale_0.label,
+    value: locale_0.code
   };
 }
 //# sourceMappingURL=index.js.map