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

package/dist/elements/BranchSelector/NewBranchModal/index.js

@@ -0,0 +1,174 @@
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { branchesCollectionSlug, formatAdminURL, MAIN_BRANCH } from 'payload/shared';
+import React, { useCallback, useState } from 'react';
+import { toast } from 'sonner';
+import { TextInput } from '../../../fields/Text/Input.js';
+import { BranchIcon } from '../../../icons/Branch/index.js';
+import { useBranch } from '../../../providers/Branch/index.js';
+import { useConfig } from '../../../providers/Config/index.js';
+import { useTranslation } from '../../../providers/Translation/index.js';
+import { requests } from '../../../utilities/api.js';
+import { Button } from '../../Button/index.js';
+import { DialogBody, DialogFooter, DialogHeader, DialogModal } from '../../Dialog/index.js';
+import { useModal } from '../../Modal/index.js';
+import { Pill } from '../../Pill/index.js';
+import './index.css';
+export const newBranchModalSlug = 'new-branch';
+const baseClass = 'new-branch-modal';
+/**
+ * Creates a branch without leaving the current view.
+ *
+ * The slug is derived from the name server-side rather than asked for, so the
+ * only thing required here is a name — which is why this is a modal rather than
+ * a trip to the collection's create view.
+ */
+export const NewBranchModal = () => {
+  const {
+    t
+  } = useTranslation();
+  const {
+    closeModal
+  } = useModal();
+  const {
+    setBranch
+  } = useBranch();
+  const {
+    config: {
+      routes: {
+        api
+      },
+      serverURL
+    }
+  } = useConfig();
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+  const [isCreating, setIsCreating] = useState(false);
+  const trimmedName = name.trim();
+  const reset = useCallback(() => {
+    setName('');
+    setDescription('');
+  }, []);
+  const handleCreate = useCallback(async () => {
+    if (!trimmedName || isCreating) {
+      return;
+    }
+    setIsCreating(true);
+    try {
+      const trimmedDescription = description.trim();
+      const response = await requests.post(formatAdminURL({
+        apiRoute: api,
+        path: `/${branchesCollectionSlug}`,
+        serverURL
+      }), {
+        body: JSON.stringify({
+          name: trimmedName,
+          ...(trimmedDescription ? {
+            description: trimmedDescription
+          } : {})
+        }),
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      });
+      const json = await response.json();
+      if (!response.ok) {
+        const fieldErrors = json?.errors?.flatMap(({
+          data
+        }) => data?.errors ?? []) ?? [];
+        // Field errors are reported against `slug`, which is derived rather than
+        // typed — naming it would point the editor at a field they never saw. The
+        // name is what they control, so that is what the message names.
+        const messages = fieldErrors.length ? fieldErrors.map(({
+          message,
+          path
+        }) => path === 'slug' ? `${t('branching:branchName')}: ${message}` : message) : json?.errors?.map(({
+          message: message_0
+        }) => message_0) ?? [];
+        if (messages.length) {
+          messages.forEach(message_1 => toast.error(message_1));
+        } else {
+          toast.error(t('error:unknown'));
+        }
+        return;
+      }
+      closeModal(newBranchModalSlug);
+      reset();
+      // Creating a branch is a declaration of intent to work on it, so the
+      // switch follows the save.
+      if (json?.doc?.slug) {
+        setBranch(json.doc.slug);
+      }
+    } catch (_err) {
+      toast.error(t('error:unknown'));
+    } finally {
+      setIsCreating(false);
+    }
+  }, [api, closeModal, description, isCreating, reset, serverURL, setBranch, t, trimmedName]);
+  return /*#__PURE__*/_jsxs(DialogModal, {
+    className: baseClass,
+    closeOnBlur: true,
+    slug: newBranchModalSlug,
+    children: [/*#__PURE__*/_jsx(DialogHeader, {
+      showClose: true,
+      title: t('branching:createNewBranch')
+    }), /*#__PURE__*/_jsx(DialogBody, {
+      children: /*#__PURE__*/_jsxs("form", {
+        className: `${baseClass}__form`,
+        onSubmit: e => {
+          e.preventDefault();
+          void handleCreate();
+        },
+        children: [/*#__PURE__*/_jsx(TextInput, {
+          label: t('branching:branchName'),
+          onChange: e_0 => setName(e_0.target.value),
+          path: "name",
+          required: true,
+          value: name
+        }), /*#__PURE__*/_jsx(TextInput, {
+          label: t('branching:branchDescription'),
+          onChange: e_1 => setDescription(e_1.target.value),
+          path: "description",
+          value: description
+        }), /*#__PURE__*/_jsxs("div", {
+          className: `${baseClass}__source`,
+          children: [/*#__PURE__*/_jsx("span", {
+            className: `${baseClass}__source-label`,
+            children: t('branching:branchedFrom')
+          }), /*#__PURE__*/_jsxs("div", {
+            className: `${baseClass}__source-value`,
+            children: [/*#__PURE__*/_jsx(BranchIcon, {
+              size: 24
+            }), /*#__PURE__*/_jsx("span", {
+              className: `${baseClass}__source-name`,
+              children: MAIN_BRANCH
+            }), /*#__PURE__*/_jsx(Pill, {
+              pillStyle: "light-gray",
+              size: "small",
+              children: t('branching:defaultBranch')
+            })]
+          })]
+        })]
+      })
+    }), /*#__PURE__*/_jsxs(DialogFooter, {
+      children: [/*#__PURE__*/_jsx(Button, {
+        buttonStyle: "secondary",
+        disabled: isCreating,
+        onClick: () => {
+          closeModal(newBranchModalSlug);
+          reset();
+        },
+        size: "medium",
+        children: t('general:cancel')
+      }), /*#__PURE__*/_jsx(Button, {
+        buttonStyle: "primary",
+        disabled: !trimmedName || isCreating,
+        onClick: () => void handleCreate(),
+        size: "medium",
+        children: isCreating ? t('general:creating') : t('branching:createAndSwitch')
+      })]
+    })]
+  });
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/BranchSelector/NewBranchModal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["branchesCollectionSlug","formatAdminURL","MAIN_BRANCH","React","useCallback","useState","toast","TextInput","BranchIcon","useBranch","useConfig","useTranslation","requests","Button","DialogBody","DialogFooter","DialogHeader","DialogModal","useModal","Pill","newBranchModalSlug","baseClass","NewBranchModal","t","closeModal","setBranch","config","routes","api","serverURL","name","setName","description","setDescription","isCreating","setIsCreating","trimmedName","trim","reset","handleCreate","trimmedDescription","response","post","apiRoute","path","body","JSON","stringify","headers","json","ok","fieldErrors","errors","flatMap","data","messages","length","map","message","forEach","error","doc","slug","_err","_jsxs","className","closeOnBlur","_jsx","showClose","title","onSubmit","e","preventDefault","label","onChange","target","value","required","size","pillStyle","buttonStyle","disabled","onClick"],"sources":["../../../../src/elements/BranchSelector/NewBranchModal/index.tsx"],"sourcesContent":["'use client'\n\nimport { branchesCollectionSlug, formatAdminURL, MAIN_BRANCH } from 'payload/shared'\nimport React, { useCallback, useState } from 'react'\nimport { toast } from 'sonner'\n\nimport { TextInput } from '../../../fields/Text/Input.js'\nimport { BranchIcon } from '../../../icons/Branch/index.js'\nimport { useBranch } from '../../../providers/Branch/index.js'\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { requests } from '../../../utilities/api.js'\nimport { Button } from '../../Button/index.js'\nimport { DialogBody, DialogFooter, DialogHeader, DialogModal } from '../../Dialog/index.js'\nimport { useModal } from '../../Modal/index.js'\nimport { Pill } from '../../Pill/index.js'\nimport './index.css'\n\nexport const newBranchModalSlug = 'new-branch'\n\nconst baseClass = 'new-branch-modal'\n\n/**\n * Creates a branch without leaving the current view.\n *\n * The slug is derived from the name server-side rather than asked for, so the\n * only thing required here is a name — which is why this is a modal rather than\n * a trip to the collection's create view.\n */\nexport const NewBranchModal: React.FC = () => {\n  const { t } = useTranslation()\n  const { closeModal } = useModal()\n  const { setBranch } = useBranch()\n\n  const {\n    config: {\n      routes: { api },\n      serverURL,\n    },\n  } = useConfig()\n\n  const [name, setName] = useState('')\n  const [description, setDescription] = useState('')\n  const [isCreating, setIsCreating] = useState(false)\n\n  const trimmedName = name.trim()\n\n  const reset = useCallback(() => {\n    setName('')\n    setDescription('')\n  }, [])\n\n  const handleCreate = useCallback(async () => {\n    if (!trimmedName || isCreating) {\n      return\n    }\n\n    setIsCreating(true)\n\n    try {\n      const trimmedDescription = description.trim()\n\n      const response = await requests.post(\n        formatAdminURL({ apiRoute: api, path: `/${branchesCollectionSlug}`, serverURL }),\n        {\n          body: JSON.stringify({\n            name: trimmedName,\n            ...(trimmedDescription ? { description: trimmedDescription } : {}),\n          }),\n          headers: { 'Content-Type': 'application/json' },\n        },\n      )\n\n      const json = (await response.json()) as {\n        doc?: { slug?: string }\n        errors?: {\n          data?: { errors?: { message: string; path: string }[] }\n          message: string\n        }[]\n      }\n\n      if (!response.ok) {\n        const fieldErrors = json?.errors?.flatMap(({ data }) => data?.errors ?? []) ?? []\n\n        // Field errors are reported against `slug`, which is derived rather than\n        // typed — naming it would point the editor at a field they never saw. The\n        // name is what they control, so that is what the message names.\n        const messages = fieldErrors.length\n          ? fieldErrors.map(({ message, path }) =>\n              path === 'slug' ? `${t('branching:branchName')}: ${message}` : message,\n            )\n          : (json?.errors?.map(({ message }) => message) ?? [])\n\n        if (messages.length) {\n          messages.forEach((message) => toast.error(message))\n        } else {\n          toast.error(t('error:unknown'))\n        }\n\n        return\n      }\n\n      closeModal(newBranchModalSlug)\n      reset()\n\n      // Creating a branch is a declaration of intent to work on it, so the\n      // switch follows the save.\n      if (json?.doc?.slug) {\n        setBranch(json.doc.slug)\n      }\n    } catch (_err) {\n      toast.error(t('error:unknown'))\n    } finally {\n      setIsCreating(false)\n    }\n  }, [api, closeModal, description, isCreating, reset, serverURL, setBranch, t, trimmedName])\n\n  return (\n    <DialogModal className={baseClass} closeOnBlur slug={newBranchModalSlug}>\n      <DialogHeader showClose title={t('branching:createNewBranch')} />\n      <DialogBody>\n        <form\n          className={`${baseClass}__form`}\n          onSubmit={(e) => {\n            e.preventDefault()\n            void handleCreate()\n          }}\n        >\n          <TextInput\n            label={t('branching:branchName')}\n            onChange={(e) => setName(e.target.value)}\n            path=\"name\"\n            required\n            value={name}\n          />\n          <TextInput\n            label={t('branching:branchDescription')}\n            onChange={(e) => setDescription(e.target.value)}\n            path=\"description\"\n            value={description}\n          />\n          {/* Display-only: branching from a branch is not supported, so `main` is\n              the only possible source and there is nothing here to choose. */}\n          <div className={`${baseClass}__source`}>\n            <span className={`${baseClass}__source-label`}>{t('branching:branchedFrom')}</span>\n            <div className={`${baseClass}__source-value`}>\n              <BranchIcon size={24} />\n              <span className={`${baseClass}__source-name`}>{MAIN_BRANCH}</span>\n              <Pill pillStyle=\"light-gray\" size=\"small\">\n                {t('branching:defaultBranch')}\n              </Pill>\n            </div>\n          </div>\n        </form>\n      </DialogBody>\n      <DialogFooter>\n        <Button\n          buttonStyle=\"secondary\"\n          disabled={isCreating}\n          onClick={() => {\n            closeModal(newBranchModalSlug)\n            reset()\n          }}\n          size=\"medium\"\n        >\n          {t('general:cancel')}\n        </Button>\n        <Button\n          buttonStyle=\"primary\"\n          disabled={!trimmedName || isCreating}\n          onClick={() => void handleCreate()}\n          size=\"medium\"\n        >\n          {isCreating ? t('general:creating') : t('branching:createAndSwitch')}\n        </Button>\n      </DialogFooter>\n    </DialogModal>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/BranchSelector/index.css

@@ -0,0 +1,172 @@
+@layer payload-default {
+  .branch-selector {
+    flex-shrink: 0;
+  }
+
+  /* The chevron lives inside the label rather than in the button's own icon
+     slot, which is taken by the branch icon, so close the end padding by hand. */
+  .branch-selector__trigger.btn--size-medium {
+    padding-inline-end: var(--spacer-1);
+  }
+
+  .branch-selector__trigger .btn__label {
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .branch-selector__trigger-label {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-1);
+    min-width: 0;
+    /* Matches `.step-nav__item`: a branch name gets the same room as a crumb
+       before it starts costing the trail beside it. */
+    max-width: calc(var(--spacer-6) * 4);
+  }
+
+  .branch-selector__trigger-name {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  .branch-selector__popup .combobox__entry {
+    flex-direction: column;
+  }
+
+  .branch-selector__option {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--spacer-3);
+    width: 100%;
+    padding-inline: var(--spacer-3);
+    padding-block: var(--spacer-1);
+    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);
+
+    &:hover {
+      background: var(--color-bg-secondary);
+    }
+  }
+
+  .branch-selector__option svg {
+    flex-shrink: 0;
+    color: var(--color-icon);
+  }
+
+  .branch-selector__option-labels {
+    display: flex;
+    align-items: baseline;
+    gap: var(--spacer-2);
+    min-width: 0;
+    white-space: nowrap;
+  }
+
+  .branch-selector__option-name {
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  /* The branch you are on, pinned above the list of the ones you are not. */
+  .branch-selector__current {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--spacer-3);
+    padding-inline: var(--spacer-3);
+    padding-block: var(--spacer-1);
+  }
+
+  .branch-selector__current-name {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-family: var(--text-body-medium-strong-font-family);
+    font-weight: var(--text-body-medium-strong-font-weight);
+    color: var(--color-text);
+  }
+
+  /* On a branch the name is the way into its manage view. The icon is the standing
+     affordance, so the underline is held back for hover — a permanently underlined
+     name reads as decoration on what is otherwise the row's heading. */
+  .branch-selector__current-link {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--spacer-1);
+    min-width: 0;
+    text-decoration: none;
+
+    &:hover {
+      color: var(--color-text-brand);
+    }
+
+    &:hover .branch-selector__current-text {
+      text-decoration: underline;
+    }
+  }
+
+  .branch-selector__current-text {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .branch-selector__current-icon {
+    flex-shrink: 0;
+    color: var(--color-icon);
+  }
+
+  .branch-selector__current-link:hover .branch-selector__current-icon {
+    color: var(--color-text-brand);
+  }
+
+  /* Reads as a state to notice rather than a footnote, so it takes the same green
+     the banner on the branch page does. */
+  .branch-selector__option-scheduled {
+    flex-shrink: 0;
+    font-family: var(--text-body-small-font-family);
+    font-size: var(--text-body-small-font-size);
+    color: var(--color-text-success);
+  }
+
+  /* Muted and small: it qualifies the name rather than competing with it. */
+  .branch-selector__option-merged {
+    flex-shrink: 0;
+    font-family: var(--text-body-small-font-family);
+    font-size: var(--text-body-small-font-size);
+    color: var(--color-text-secondary);
+  }
+
+  /* Shared by the pinned footer rows, which are a link and a button rather than
+     combobox entries and so arrive with their own user-agent styling. */
+  .branch-selector__action {
+    background: none;
+    border: none;
+    font: inherit;
+    text-align: start;
+    text-decoration: none;
+    color: var(--color-text);
+    cursor: pointer;
+  }
+
+  .branch-selector__action .branch-selector__option-labels {
+    align-items: center;
+    gap: var(--spacer-1);
+  }
+
+  .branch-selector__footer-divider {
+    height: var(--stroke-width-small);
+    margin-block: var(--spacer-2);
+    background: var(--color-border);
+  }
+
+  .branch-selector__option--active .branch-selector__option-name {
+    font-family: var(--text-body-medium-strong-font-family);
+    font-weight: var(--text-body-medium-strong-font-weight);
+  }
+}

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import './index.css';
+/**
+ * Switcher for the active content branch, sitting to the left of the breadcrumb
+ * trail — everything after it is scoped to the branch it names.
+ *
+ * Renders nothing when branching is off, and nothing while `main` is the only
+ * branch there is — until a branch exists there is nothing to switch to.
+ */
+export declare const BranchSelector: React.FC<{
+    className?: string;
+}>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/BranchSelector/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAkBhD,OAAO,aAAa,CAAA;AAIpB;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CA+M3D,CAAA"}

package/dist/elements/BranchSelector/index.js

@@ -0,0 +1,255 @@
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { branchesCollectionSlug, formatAdminURL, MAIN_BRANCH } from 'payload/shared';
+import React, { Fragment, useMemo } from 'react';
+import { BranchIcon } from '../../icons/Branch/index.js';
+import { ChevronIcon } from '../../icons/Chevron/index.js';
+import { NewTabIcon } from '../../icons/NewTab/index.js';
+import { PlusIcon } from '../../icons/Plus/index.js';
+import { useBranch, useShowBranchSelector } from '../../providers/Branch/index.js';
+import { useConfig } from '../../providers/Config/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import { Button } from '../Button/index.js';
+import { Combobox } from '../Combobox/index.js';
+import { Link } from '../Link/index.js';
+import { useMergeBranch } from '../MergeBranch/context.js';
+import { useModal } from '../Modal/index.js';
+import { NewBranchModal, newBranchModalSlug } from './NewBranchModal/index.js';
+import './index.css';
+const baseClass = 'branch-selector';
+/**
+ * Switcher for the active content branch, sitting to the left of the breadcrumb
+ * trail — everything after it is scoped to the branch it names.
+ *
+ * Renders nothing when branching is off, and nothing while `main` is the only
+ * branch there is — until a branch exists there is nothing to switch to.
+ */
+export const BranchSelector = ({
+  className
+}) => {
+  const {
+    activeBranch,
+    branches,
+    setBranch
+  } = useBranch();
+  const showSelector = useShowBranchSelector();
+  const {
+    t
+  } = useTranslation();
+  const {
+    openModal
+  } = useModal();
+  const {
+    openMerge
+  } = useMergeBranch();
+  const {
+    config: {
+      routes: {
+        admin: adminRoute
+      }
+    }
+  } = useConfig();
+  const manageBranchesURL = formatAdminURL({
+    adminRoute,
+    path: `/collections/${branchesCollectionSlug}`
+  });
+  // A branch that was merged, closed or made unreadable while it was still
+  // selected is no longer in the list. It is still what the request resolved to,
+  // so the switcher names it — and pinning it at the top is also the way out.
+  const activeOption = activeBranch === MAIN_BRANCH ? {
+    name: MAIN_BRANCH,
+    slug: MAIN_BRANCH
+  } : branches.find(({
+    slug
+  }) => slug === activeBranch) ?? {
+    name: activeBranch,
+    slug: activeBranch
+  };
+  const {
+    entries: entries_0,
+    slugByEntry: slugByEntry_0
+  } = useMemo(() => {
+    // Everything except where you already are: the active branch is pinned above
+    // the search, so listing it again would offer switching to it.
+    const options = [{
+      name: MAIN_BRANCH,
+      slug: MAIN_BRANCH
+    }, ...branches].filter(({
+      slug: slug_0
+    }) => slug_0 !== activeBranch);
+    const slugByEntry = new Map();
+    const entries = options.map(option => {
+      const hasDistinctName = option.name !== option.slug;
+      const entry = {
+        Component: /*#__PURE__*/_jsx("span", {
+          className: `${baseClass}__option`,
+          children: /*#__PURE__*/_jsxs("span", {
+            className: `${baseClass}__option-labels`,
+            children: [/*#__PURE__*/_jsx("span", {
+              className: `${baseClass}__option-name`,
+              children: option.name
+            }), option.isScheduled ? /*#__PURE__*/_jsx("span", {
+              className: `${baseClass}__option-scheduled`,
+              children: t('branching:scheduledToMerge')
+            }) : option.isMerged && /*#__PURE__*/_jsx("span", {
+              className: `${baseClass}__option-merged`,
+              children: t('branching:status_merged')
+            })]
+          })
+        }),
+        // The slug is not rendered — editors name branches, the slug is derived —
+        // but it stays searchable, since it is what URLs and the API expose.
+        name: hasDistinctName ? `${option.name} ${option.slug}` : option.name
+      };
+      slugByEntry.set(entry, option.slug);
+      return entry;
+    });
+    return {
+      entries,
+      slugByEntry
+    };
+  }, [activeBranch, branches, t]);
+  if (!showSelector) {
+    return null;
+  }
+  const activeLabel = branches.find(({
+    slug: slug_1
+  }) => slug_1 === activeBranch)?.name ?? activeBranch ?? MAIN_BRANCH;
+  return /*#__PURE__*/_jsxs(Fragment, {
+    children: [/*#__PURE__*/_jsx(Combobox, {
+      "aria-label": t('branching:branches'),
+      className: [baseClass, className].filter(Boolean).join(' '),
+      entries: entries_0,
+      // Pinned rather than listed, so both stay reachable no matter what the
+      // search has filtered the list down to.
+      footer: ({
+        close
+      }) => /*#__PURE__*/_jsxs(Fragment, {
+        children: [/*#__PURE__*/_jsx(Link, {
+          className: `${baseClass}__option ${baseClass}__action ${baseClass}__manage`,
+          href: manageBranchesURL,
+          onClick: close,
+          children: /*#__PURE__*/_jsx("span", {
+            className: `${baseClass}__option-labels`,
+            children: t('branching:manageBranches')
+          })
+        }), /*#__PURE__*/_jsx("div", {
+          className: `${baseClass}__footer-divider`
+        }), /*#__PURE__*/_jsx("button", {
+          className: `${baseClass}__option ${baseClass}__action ${baseClass}__create`,
+          onClick: () => {
+            close();
+            openModal(newBranchModalSlug);
+          },
+          type: "button",
+          children: /*#__PURE__*/_jsxs("span", {
+            className: `${baseClass}__option-labels`,
+            children: [/*#__PURE__*/_jsx(PlusIcon, {
+              size: 16
+            }), t('branching:createNewBranch')]
+          })
+        })]
+      }),
+      // Where you are, before what you could switch to. On a branch the name
+      // itself is the way to manage it, so the row carries only the name and the
+      // one action that is not reachable from anywhere else.
+      header: ({
+        close: close_0
+      }) => /*#__PURE__*/_jsxs("div", {
+        className: `${baseClass}__current`,
+        children: [activeOption.id === undefined ? /*#__PURE__*/_jsx("span", {
+          className: `${baseClass}__current-name`,
+          children: activeOption.name
+        }) :
+        // Opens in a new tab, which is what the icon promises. Reviewing a
+        // branch is a detour from whatever you were editing when you opened
+        // the switcher, so it should not cost you that place.
+        /*#__PURE__*/
+        _jsxs(Link, {
+          className: `${baseClass}__current-name ${baseClass}__current-link`,
+          href: formatAdminURL({
+            adminRoute,
+            path: `/collections/${branchesCollectionSlug}/${activeOption.id}`
+          }),
+          onClick: close_0,
+          rel: "noopener noreferrer",
+          target: "_blank",
+          children: [/*#__PURE__*/_jsx("span", {
+            className: `${baseClass}__current-text`,
+            children: activeOption.name
+          }), /*#__PURE__*/_jsx(NewTabIcon, {
+            className: `${baseClass}__current-icon`,
+            size: 16
+          })]
+        }), activeOption.id !== undefined && /*#__PURE__*/_jsx(Button, {
+          buttonStyle: "primary",
+          onClick: () => {
+            close_0();
+            // No selection to pass: from the switcher, merging means the whole
+            // branch — so it hands over the way to narrow that instead, and
+            // lets the modal count what is pending.
+            openMerge({
+              branchID: activeOption.id,
+              branchName: activeOption.name,
+              branchSlug: activeOption.slug,
+              reviewURL: formatAdminURL({
+                adminRoute,
+                path: `/collections/${branchesCollectionSlug}/${activeOption.id}`
+              })
+            });
+          },
+          size: "medium",
+          children: t('branching:merge')
+        })]
+      }),
+      horizontalAlign: "left",
+      // Searchable as soon as there is anything to search. With nothing to switch
+      // to, a search box and a "no matches" message describe a search nobody ran —
+      // the popup is then only its two actions.
+      minEntriesForSearch: entries_0.length ? 0 : 1,
+      onSelect: entry_0 => {
+        const slug_2 = slugByEntry_0.get(entry_0);
+        if (slug_2) {
+          setBranch(slug_2);
+        }
+      },
+      portalClassName: `${baseClass}__popup`,
+      renderButton: ({
+        active,
+        onClick,
+        onKeyDown,
+        ...ariaProps
+      }) => /*#__PURE__*/_jsx(Button, {
+        "aria-label": t('branching:selectBranch'),
+        buttonStyle: "secondary",
+        className: `${baseClass}__trigger`,
+        extraButtonProps: {
+          onKeyDown
+        },
+        icon: /*#__PURE__*/_jsx(BranchIcon, {}),
+        iconPosition: "left",
+        onClick: onClick,
+        selected: active,
+        size: "medium",
+        ...ariaProps,
+        children: /*#__PURE__*/_jsxs("span", {
+          className: `${baseClass}__trigger-label`,
+          children: [/*#__PURE__*/_jsx("span", {
+            className: `${baseClass}__trigger-name`,
+            children: activeLabel
+          }), /*#__PURE__*/_jsx(ChevronIcon, {
+            direction: active ? 'up' : 'down',
+            size: 16
+          })]
+        })
+      }),
+      searchPlaceholder: t('branching:searchBranches'),
+      // Suppressed only when there is nothing to match against in the first place;
+      // a search that filters everything out still says so.
+      showEmptyMessage: entries_0.length > 0,
+      size: "fit-content"
+    }), /*#__PURE__*/_jsx(NewBranchModal, {})]
+  });
+};
+//# sourceMappingURL=index.js.map