nautobot 2.4.21__py3-none-any.whl → 3.0.0a3__py3-none-any.whl

nautobot/ui/src/js/search.js

@@ -0,0 +1,274 @@
+import { createElement, rem } from './utils.js';
+
+const FORM_CONTROL_PADDING_X = rem(12);
+const GAP = rem(6);
+const ICON_SIZE = rem(20);
+
+const BASE_SEARCH_INPUT_PADDING_X = `${FORM_CONTROL_PADDING_X + ICON_SIZE + GAP}rem`;
+
+const MAX_BADGE_COUNT = 1;
+
+export const initializeSearch = () => {
+  const headerSearch = document.getElementById('header_search');
+
+  // Do nothing and `return` early when there is no `#header_search` element in the page.
+  if (!headerSearch) {
+    return () => {};
+  }
+
+  const NAV_MENU = (() => {
+    try {
+      const navMenu = document.getElementById('nav_menu');
+      return navMenu ? JSON.parse(navMenu.textContent) : {};
+      // eslint-disable-next-line no-unused-vars
+    } catch (exception) {
+      return {};
+    }
+  })();
+
+  /*
+   * Pick only the lowest level of nested `nav_menu` object. In TypeScript, it would be manifested as the following type:
+   * `{ [item_link: string]: { name: string; weight: number } };`.
+   */
+  const SEARCHABLE_MODELS = Object.fromEntries(
+    Object.entries(NAV_MENU.tabs).flatMap(([, tab_details]) =>
+      Object.entries(tab_details.groups).flatMap(([, group_details]) =>
+        Object.entries(group_details.items).map(([item_link, item_details]) => [item_link, item_details]),
+      ),
+    ),
+  );
+
+  const BADGE_REG_EXP = new RegExp(
+    `^\\s*in\\s*:\\s*(${Object.entries(SEARCHABLE_MODELS)
+      // Extend simple vanilla model name match with more word delimiter variants (or no word delimiters at all).
+      .flatMap(([, { name }]) => [name, ...['', '_', '\\-'].map((delimiter) => name.replace(/\s+/g, delimiter))])
+      .join('|')})\\s+`,
+    'i',
+  );
+
+  const headerSearchInput = headerSearch.querySelector('input');
+
+  const closeSearchPopup = () => {
+    const searchPopup = document.getElementById('search_popup');
+
+    if (searchPopup) {
+      searchPopup.remove();
+      document.body.classList.toggle('overflow-y-hidden', false);
+    }
+  };
+
+  // Focus search input on Cmd+K or Ctrl+K shortcut and close search popup on Escape.
+  const onKeyDown = (event) => {
+    const isPressedCmd = event.getModifierState?.('Meta');
+    const isPressedCtrl = event.ctrlKey;
+
+    if ((isPressedCmd || isPressedCtrl) && event.key === 'k') {
+      event.preventDefault();
+      headerSearchInput.focus();
+    } else if (event.key === 'Escape') {
+      closeSearchPopup();
+    }
+  };
+
+  document.addEventListener('keydown', onKeyDown);
+
+  const openSearchPopup = () => {
+    const searchPopup = document.getElementById('search_popup');
+
+    // Just focus an existing search popup `input` and `return` early if `#searchPopup` is already open.
+    if (searchPopup) {
+      const input = searchPopup.querySelector('input');
+      input?.focus();
+      input?.setSelectionRange(-1, -1);
+      return;
+    }
+
+    document.body.classList.toggle('overflow-y-hidden', true);
+
+    const { left: mainLeft = 0, right: mainRight = 0 } = document.querySelector('main')?.getBoundingClientRect() ?? {};
+    const { top: headerSearchInputTop } = headerSearchInput.getBoundingClientRect();
+
+    const icon = createElement('span', {
+      'aria-hidden': 'true',
+      className:
+        'mdi mdi-magnify d-inline-flex ms-12 mt-6 pe-none position-absolute start-0 text-secondary top-0 user-select-none',
+      style: `height: ${ICON_SIZE}rem; width: ${ICON_SIZE}rem;`,
+    });
+
+    const badges = createElement('span', {
+      className: 'd-inline-flex gap-6 left-0 my-6 position-absolute top-0',
+      style: `left: ${BASE_SEARCH_INPUT_PADDING_X};`,
+    });
+
+    const input = createElement('input', {
+      className: 'form-control w-100',
+      name: 'q',
+      required: 'true',
+      style: `padding-inline: ${BASE_SEARCH_INPUT_PADDING_X};`,
+      type: 'search',
+      value: headerSearchInput.value,
+    });
+
+    const clear = createElement(
+      'button',
+      {
+        className: `btn mdi mdi-close bg-transparent border-0 end-0 hstack justify-content-center me-12 mt-6 p-0 position-absolute text-secondary top-0 nb-transition-base${input.value === '' ? ' invisible opacity-0' : ''}`,
+        style: `height: ${ICON_SIZE}rem; width: ${ICON_SIZE}rem;`,
+        type: 'button',
+      },
+      createElement('span', { className: 'visually-hidden' }, 'Clear'),
+    );
+
+    clear.addEventListener('click', () => {
+      input.value = '';
+      input.dispatchEvent(new InputEvent('input'));
+      input.focus();
+    });
+
+    input.addEventListener('input', () => {
+      const shouldHideClear = input.value === '';
+      clear.classList.toggle('invisible', shouldHideClear);
+      clear.classList.toggle('opacity-0', shouldHideClear);
+    });
+
+    const submit = createElement('input', { className: 'd-none', type: 'submit' });
+
+    const form = createElement(
+      'form',
+      { action: headerSearch.getAttribute('action'), className: 'position-relative w-100', role: 'search' },
+      icon,
+      badges,
+      input,
+      clear,
+      submit,
+    );
+
+    /* In case there is no badge, use global search. Otherwise, navigate to badge specific model list view. */
+    form.addEventListener('submit', () => {
+      const badge = form.querySelector('[data-nb-link]:last-child');
+
+      if (badge) {
+        form.setAttribute('action', badge.dataset.nbLink);
+      }
+    });
+
+    const results = createElement('div');
+
+    const popup = createElement(
+      'div',
+      { className: 'mx-auto w-100', style: `max-width: ${rem(720)}rem;` },
+      form,
+      results,
+    );
+
+    const overlay = createElement(
+      'div',
+      {
+        className: 'overflow-auto pb-20 position-fixed top-0 end-0 bottom-0 start-0 nb-z-modal-backdrop',
+        id: 'search_popup',
+        role: 'dialog',
+        style: `background-color: rgba(0, 0, 0, .5); padding-block-start: ${headerSearchInputTop}px; padding-inline-start: calc(${mainLeft}px + ${rem(20)}rem); padding-inline-end: calc(100% - ${mainRight}px + ${rem(20)}rem);`,
+      },
+      popup,
+    );
+
+    // Close search popup on direct overlay click.
+    overlay.addEventListener('click', (event) => {
+      if (event.target === overlay) {
+        closeSearchPopup();
+      }
+    });
+
+    document.body.appendChild(overlay);
+
+    const addBadge = (link) => {
+      const name = Object.entries(SEARCHABLE_MODELS).find(([item_link]) => item_link === link)?.[1]?.name ?? link;
+
+      const removeButton = createElement(
+        'button',
+        { type: 'button' },
+        createElement('span', { 'aria-hidden': 'true', class: 'mdi mdi-close' }),
+        createElement('span', { class: 'visually-hidden' }, 'Remove'),
+      );
+
+      const badge = createElement(
+        'span',
+        { className: 'badge border', 'data-nb-link': link },
+        `in: ${name}`,
+        removeButton,
+      );
+
+      removeButton.addEventListener('click', () => {
+        badge.remove();
+        input.focus();
+      });
+
+      // Before adding a new badge, remove existing badges with the same `link` to prevent duplicates.
+      [...badges.querySelectorAll(`[data-nb-link="${link}"]`)].forEach((existing) => existing.remove());
+
+      badges.appendChild(badge);
+
+      // Obey the `MAX_BADGE_COUNT` constraint.
+      [...badges.children].slice(0, -1 * MAX_BADGE_COUNT).forEach((child) => child.remove());
+    };
+
+    // Recalculate search input left padding when badges container size changes, i.e. a badge is added or removed.
+    const resizeObserver = new ResizeObserver(() => {
+      const { width } = badges.getBoundingClientRect();
+      input.style.paddingInlineStart = width
+        ? `calc(${BASE_SEARCH_INPUT_PADDING_X} + ${width}px + ${GAP}rem)`
+        : BASE_SEARCH_INPUT_PADDING_X;
+    });
+
+    resizeObserver.observe(badges);
+
+    input.addEventListener('input', () => {
+      const match = input.value.match(BADGE_REG_EXP);
+
+      if (match) {
+        const [phrase, model] = match;
+
+        const normalize = (text) =>
+          text
+            .trim()
+            .toLowerCase()
+            .replace(/\s|_|-/g, '');
+        const link = Object.entries(SEARCHABLE_MODELS).find(
+          ([, { name }]) => normalize(name) === normalize(model),
+        )?.[0];
+
+        if (link) {
+          // Remove phrase that matched the badge-specific regular expression and replace it with a corresponding badge.
+          input.value = input.value.replace(phrase, '');
+          input.dispatchEvent(new InputEvent('input'));
+          addBadge(link);
+        }
+      }
+    });
+
+    // Remove the first badge on the right-hand side when `'Backspace'` key is pressed on the input start position.
+    input.addEventListener('keydown', (event) => {
+      const isBackspace = event.key === 'Backspace';
+      const isInputStart = input.selectionEnd === 0 && input.selectionStart === 0;
+
+      if (isBackspace && isInputStart) {
+        badges.querySelector(':last-child')?.remove();
+      }
+    });
+
+    // When search popup is open, copy existing badges from `#header_search` to search popup input.
+    headerSearch.querySelectorAll('[data-nb-link]').forEach((badge) => addBadge(badge.dataset.nbLink));
+
+    // Automatically focus search popup input when opened and move cursor to the end of input field.
+    input.focus();
+    input.setSelectionRange(-1, -1);
+  };
+
+  headerSearchInput.addEventListener('focus', openSearchPopup);
+
+  return () => {
+    closeSearchPopup();
+    document.removeEventListener('keydown', onKeyDown);
+    headerSearchInput.removeEventListener('focus', openSearchPopup);
+  };
+};

nautobot/ui/src/js/select2.js

@@ -0,0 +1,318 @@
+import get from 'lodash.get';
+
+/**
+ * Get HTML `element`. This function accepts input as native `Document` and `Element` object and `jQuery` collection.
+ * It should no longer be required after migrating away from jQuery.
+ * @param {Document|Element|jQuery} `element` - `element` in question.
+ * @returns {Document|Element} Native `element` object.
+ */
+const getElement = (element) => (element instanceof Document || element instanceof Element ? element : element[0]);
+
+/**
+ * Get `select` element value.
+ * @param {HTMLSelectElement} select - `select` element in question.
+ * @returns {string|string[]} `string` value for single combobox, an array of `string` values for multiple combobox.
+ */
+const getValue = (select) =>
+  select?.getAttribute('multiple') === null ? select?.value : [...select.selectedOptions].map((option) => option.value);
+
+/**
+ * Set Select2 combobox value(s).
+ * @param {HTMLSelectElement} select2 - Select2 combobox HTML element.
+ * @param {{ text: string, value: string }[]|null} value - Array of objects containing `text` and `value` key-value
+ *   pairs; `null` to reset the field value.
+ */
+export const setSelect2Value = (select2, value) => {
+  $(select2).val(null);
+
+  (value ?? []).forEach((attributes) => {
+    if (!select2.querySelector(`option[value="${attributes.value}"]`)) {
+      const option = document.createElement('option');
+      option.innerText = attributes.text;
+      option.setAttribute('selected', 'true');
+      option.setAttribute('value', attributes.value);
+      select2.appendChild(option);
+    }
+  });
+
+  const nextValue = (() => {
+    if (value.length > 0) {
+      const isMultiple = select2?.getAttribute('multiple') !== null;
+      return isMultiple ? value.map((attributes) => attributes.value) : value?.[0]?.value;
+    }
+
+    return null;
+  })();
+
+  $(select2).val(nextValue).trigger('change');
+};
+
+/**
+ * Parse URLs which may contain variable references to other field values.
+ * @param {string} url - URL template string.
+ * @returns {string} URL with interpolated dynamic values.
+ */
+const parseURL = (url) => {
+  const filter_regex = /\{\{([a-z_]+)}}/g;
+
+  let match; // eslint-disable-line init-declarations
+  let rendered_url = url;
+
+  while ((match = filter_regex.exec(url))) {
+    const filter_field = document.querySelector(`#id_${match[1]}`);
+    const custom_attribute = filter_field?.selectedOptions?.[0]?.getAttribute('api-value');
+    const replace =
+      custom_attribute || filter_field.value || (filter_field.getAttribute('data-null-option') ? 'null' : undefined);
+
+    rendered_url = replace ? rendered_url.replace(match[0], replace) : rendered_url;
+  }
+
+  return rendered_url;
+};
+
+/**
+ * Initialize given Select2 components in passed `context` by `selector`, optionally with `options`.
+ * @param {Document|Element|jQuery} context - Context root element.
+ * @param {string} selector - CSS query selector of `select` elements to be initialized as Select2 components.
+ * @param {object} [options] - Optional Select2 components initialization options.
+ * @returns {void} Do not return any value, just initialize given Select2 components.
+ */
+const initializeSelect2 = (context, selector, options) =>
+  [...getElement(context).querySelectorAll(selector)].forEach((element) =>
+    $(element).select2({
+      allowClear: true,
+      placeholder: element.getAttribute('placeholder') || '---------',
+      selectionCssClass: 'select2--small',
+      theme: 'bootstrap-5',
+      width: 'off',
+      ...options,
+    }),
+  );
+
+const initializeColorPicker = (context, dropdownParent = null) => {
+  // Assign color picker selection classes.
+  const colorPickerClassCopy = (data, container) => {
+    if (data.element) {
+      // Swap the style.
+      const containerElement = getElement(container);
+      containerElement.setAttribute('style', data.element.getAttribute('style'));
+    }
+
+    return data.text;
+  };
+
+  initializeSelect2(context, '.nautobot-select2-color-picker', {
+    dropdownParent,
+    templateResult: colorPickerClassCopy,
+    templateSelection: colorPickerClassCopy,
+  });
+};
+
+const initializeDynamicChoiceSelection = (context, dropdownParent = null) => {
+  initializeSelect2(context, '.nautobot-select2-api', {
+    ajax: {
+      data: function data(params) {
+        const [element] = this;
+
+        // Paging. Note that `params.page` indexes at 1.
+        const offset = (params.page - 1) * 50 || 0;
+
+        // Base query params.
+        const limit = 50;
+        const q = params.term;
+
+        // Get search query param name, defaults to `'q'`.
+        const search_field = element.getAttribute('search-field') || 'q';
+
+        // Set api_version.
+        const api_version = element.getAttribute('data-api-version');
+
+        // Allow for controlling the depth setting from within APISelect.
+        const depth = parseInt(element.getAttribute('data-depth'), 10) || 0;
+
+        // Attach content_type to parameters.
+        const content_type = element.getAttribute('data-contenttype');
+
+        // Attach any extra query parameters
+        const extra_query_parameters = Object.fromEntries(
+          [...element.attributes]
+            .filter((attribute) => attribute.name.includes('data-query-param-'))
+            .flatMap((attribute) => {
+              const [, param_name] = attribute.name.split('data-query-param-');
+
+              const values = (() => {
+                try {
+                  return JSON.parse(attribute.value);
+                  // eslint-disable-next-line no-unused-vars
+                } catch (exception) {
+                  return [];
+                }
+              })();
+
+              return values.flatMap((value) => {
+                const has_ref_field = value.startsWith('$');
+
+                // Referencing the value of another form field.
+                const ref_field = has_ref_field
+                  ? (() => {
+                      const name = value.slice(1);
+
+                      if (element.id.includes('id_form-')) {
+                        const [id_prefix] = element.id.match(/id_form-[0-9]+-/i, '');
+                        return document.querySelector(`#${id_prefix}${name}`);
+                      }
+
+                      /*
+                       * If the element is in a table row with a class containing "dynamic-formset" we need to find the
+                       * reference field in the same row.
+                       */
+                      if (element.closest('tr')?.classList.contains('dynamic-formset')) {
+                        return element.closest('tr').querySelector(`select[id*="${name}"]`);
+                      }
+
+                      return document.querySelector(`#id_${name}`);
+                    })()
+                  : null;
+
+                const ref_field_value = ref_field
+                  ? (() => {
+                      const field_value = getValue(ref_field);
+                      const style = window.getComputedStyle(ref_field);
+
+                      if (field_value && style.opacity !== '0' && style.visibility !== 'hidden') {
+                        return field_value;
+                      }
+
+                      if (ref_field.getAttribute('required') && ref_field.getAttribute('data-null-option')) {
+                        return 'null';
+                      }
+
+                      return undefined;
+                    })()
+                  : null;
+
+                const param_value = has_ref_field ? ref_field_value : value;
+                return param_value !== null && param_value !== undefined
+                  ? [[param_name, ref_field_value || value]]
+                  : [];
+              });
+            }),
+        );
+
+        const parameters = {
+          depth: String(depth),
+          limit: String(limit),
+          offset: String(offset),
+          ...(api_version ? { api_version } : undefined),
+          ...(content_type ? { content_type } : undefined),
+          ...(q ? { [search_field]: q } : undefined),
+          ...extra_query_parameters,
+        };
+
+        // This will handle params with multiple values (i.e. for list filter forms).
+        return new URLSearchParams(parameters).toString();
+      },
+      delay: 500,
+      processResults: function processResults(data) {
+        const [element] = this.$element;
+        [...element.querySelectorAll('option')].forEach((child) => child.removeAttribute('disabled'));
+
+        const results = [
+          // Handle the null option, but only add it once.
+          ...(element.getAttribute('data-null-option') && data.previous === null
+            ? [{ id: 'null', text: element.getAttribute('data-null-option') }]
+            : []),
+          ...Object.values(
+            data.results.reduce((accumulator, record, index) => {
+              // The disabled-indicator equated to true, so we disable this option.
+              const disabled = Boolean(record?.[element.getAttribute('disabled-indicator')]);
+              const id = get(record, element.getAttribute('value-field')) || record.id;
+              const text = get(record, element.getAttribute('display-field')) || record.name;
+
+              const item = { ...record, disabled, id, text };
+              const { group, site, url } = item;
+
+              /*
+               * `DynamicGroupSerializer` has a `children` field which fits an inappropriate if condition in
+               * `select2.min.js`, which will result in the incorrect rendering of `DynamicGroup` `DynamicChoiceField`.
+               * So we nullify the field here since we do not need this field.
+               */
+              const should_nullify_children = Boolean(url?.includes('dynamic-groups'));
+
+              const collection = (() => {
+                switch (true) {
+                  case group !== undefined && group !== null && site !== undefined && site !== null:
+                    return { property: `${site.name}:${group.name}`, text: `${site.name} / ${group.name}` };
+
+                  case group !== undefined && group !== null:
+                    return { property: group.name, text: group.name };
+
+                  case site !== undefined && site !== null:
+                    return { property: site.name, text: site.name };
+
+                  case group === null && site === null:
+                    return { property: 'global', text: 'Global' };
+
+                  default:
+                    return undefined;
+                }
+              })();
+
+              return {
+                ...accumulator,
+                ...(collection
+                  ? {
+                      [collection.property]: {
+                        ...accumulator[collection.property],
+                        ...(accumulator[collection.property] ? undefined : { text: collection.text }),
+                        children: should_nullify_children
+                          ? undefined
+                          : [...(accumulator[collection.property]?.children ?? []), item],
+                      },
+                    }
+                  : { [index]: item }),
+              };
+            }, {}),
+          ),
+        ];
+
+        // Check if there are more results to page.
+        const has_next_page = data.next !== null;
+        return { pagination: { more: has_next_page }, results };
+      },
+      url: function url() {
+        const [element] = this;
+        const dataUrl = parseURL(element.getAttribute('data-url'));
+
+        // If URL is not fully rendered yet, abort the request.
+        return !dataUrl.includes('{{') && dataUrl;
+      },
+    },
+    dropdownParent,
+  });
+};
+
+const initializeMultiValueChar = (context, dropdownParent = null) =>
+  initializeSelect2(context, '.nautobot-select2-multi-value-char', {
+    dropdownParent,
+    language: { noResults: () => 'Type something to add it as an option' },
+    multiple: true,
+    tags: true,
+  });
+
+const initializeStaticChoiceSelection = (context, dropdownParent = null) =>
+  initializeSelect2(context, '.nautobot-select2-static', { dropdownParent });
+
+export const initializeSelect2Fields = (context) => {
+  initializeColorPicker(context);
+  initializeDynamicChoiceSelection(context);
+  initializeMultiValueChar(context);
+  initializeStaticChoiceSelection(context);
+
+  [...getElement(context).querySelectorAll('.modal')].forEach((modal) => {
+    initializeColorPicker(modal, modal);
+    initializeDynamicChoiceSelection(modal, modal);
+    initializeMultiValueChar(modal, modal);
+    initializeStaticChoiceSelection(modal, modal);
+  });
+};

nautobot/ui/src/js/sidenav.js

@@ -0,0 +1,87 @@
+import { getCookie, removeCookie, setCookie } from './cookie.js';
+
+const SIDENAV_COLLAPSED_KEY = 'sidenav_collapsed';
+
+/**
+ * Expand/collapse sidenav.
+ * @returns {void} Do not return any value, modify existing HTML elements, cookies and localStorage in-place.
+ */
+export const toggleSidenav = () => {
+  const toggler = document.querySelector('.nb-sidenav-toggler');
+
+  const controls = toggler.getAttribute('aria-controls');
+  const expanded = toggler.getAttribute('aria-expanded') === 'true';
+
+  toggler.setAttribute('aria-expanded', String(!expanded));
+
+  const sidenav = document.getElementById(controls);
+  sidenav.classList.toggle('nb-sidenav-collapsed', expanded);
+
+  if (expanded) {
+    setCookie(SIDENAV_COLLAPSED_KEY, 'true');
+    window.localStorage?.setItem(SIDENAV_COLLAPSED_KEY, 'true');
+  } else {
+    removeCookie(SIDENAV_COLLAPSED_KEY);
+    window.localStorage?.removeItem(SIDENAV_COLLAPSED_KEY);
+  }
+};
+
+/**
+ * Initialize sidenav mechanisms, i.e. expand/collapse, fly-outs, and optionally version control branch picker.
+ * @returns {void} Do not return any value, attach event listeners.
+ */
+export const initializeSidenav = () => {
+  const toggler = document.querySelector('.nb-sidenav-toggler');
+
+  if (toggler) {
+    /*
+     * Check if sidenav expanded/collapsed initial state is valid. If not, amend it by calling `toggleSidenav()`. This
+     * should not happen due to template code properly handling the initial render, but we're being extra careful here.
+     */
+    const sidenavCollapsedInitialState =
+      getCookie(SIDENAV_COLLAPSED_KEY) ?? window.localStorage?.getItem(SIDENAV_COLLAPSED_KEY) ?? 'false';
+    const shouldToggleSidenav =
+      (sidenavCollapsedInitialState === 'true' && toggler.getAttribute('aria-expanded') === 'true') ||
+      (sidenavCollapsedInitialState === 'false' && toggler.getAttribute('aria-expanded') === 'false');
+    if (shouldToggleSidenav) {
+      toggleSidenav();
+    }
+
+    toggler.addEventListener('click', toggleSidenav);
+  }
+
+  [...document.querySelectorAll('.nb-sidenav-list-item:not(.nb-flat)')].forEach((sidenavListItem) => {
+    sidenavListItem.addEventListener('click', () => {
+      const controls = sidenavListItem.getAttribute('aria-controls');
+      const expanded = sidenavListItem.getAttribute('aria-expanded') === 'true';
+
+      sidenavListItem.setAttribute('aria-expanded', String(!expanded));
+
+      const onClickDocument = (documentClickEvent) => {
+        const { target: documentClickTarget } = documentClickEvent;
+        const sidenavFlyout = document.getElementById(controls);
+
+        const isClickOutside =
+          !sidenavListItem.contains(documentClickTarget) && !sidenavFlyout.contains(documentClickTarget);
+
+        if (isClickOutside) {
+          sidenavListItem.setAttribute('aria-expanded', 'false');
+          document.removeEventListener('click', onClickDocument);
+        }
+      };
+
+      if (expanded) {
+        document.removeEventListener('click', onClickDocument);
+      } else {
+        document.addEventListener('click', onClickDocument);
+      }
+    });
+  });
+
+  const sidenavBranchPickerSelect = $('#sidenav-branch-picker-select');
+  sidenavBranchPickerSelect.on('change', (event) => event.currentTarget.form.submit());
+  sidenavBranchPickerSelect.on('select2:open', () => {
+    document.querySelector('.select2-dropdown').setAttribute('data-bs-theme', 'dark');
+    document.querySelector('.select2-dropdown .select2-search__field').setAttribute('placeholder', 'Find a branch...');
+  });
+};