[Summary view] [Print] [Text view]

   1  // packages/block-library/build-module/search/view.js
   2  import {
   3    store,
   4    getContext,
   5    getElement,
   6    withSyncEvent
   7  } from "@wordpress/interactivity";
   8  var { actions } = store(
   9    "core/search",
  10    {
  11      state: {
  12        get ariaLabel() {
  13          const {
  14            isSearchInputVisible,
  15            ariaLabelCollapsed,
  16            ariaLabelExpanded
  17          } = getContext();
  18          return isSearchInputVisible ? ariaLabelExpanded : ariaLabelCollapsed;
  19        },
  20        get ariaControls() {
  21          const { isSearchInputVisible, inputId } = getContext();
  22          return isSearchInputVisible ? null : inputId;
  23        },
  24        get type() {
  25          const { isSearchInputVisible } = getContext();
  26          return isSearchInputVisible ? "submit" : "button";
  27        },
  28        get tabindex() {
  29          const { isSearchInputVisible } = getContext();
  30          return isSearchInputVisible ? "0" : "-1";
  31        }
  32      },
  33      actions: {
  34        openSearchInput: withSyncEvent((event) => {
  35          const ctx = getContext();
  36          const { ref } = getElement();
  37          if (!ctx.isSearchInputVisible) {
  38            event.preventDefault();
  39            ctx.isSearchInputVisible = true;
  40            ref.parentElement.querySelector("input").focus();
  41          }
  42        }),
  43        closeSearchInput() {
  44          const ctx = getContext();
  45          ctx.isSearchInputVisible = false;
  46        },
  47        handleSearchKeydown: withSyncEvent((event) => {
  48          const { ref } = getElement();
  49          if (event?.key === "Escape") {
  50            actions.closeSearchInput();
  51            ref.querySelector("button").focus();
  52          }
  53        }),
  54        handleSearchFocusout: withSyncEvent((event) => {
  55          const { ref } = getElement();
  56          if (!ref.contains(event.relatedTarget) && event.target !== window.document.activeElement) {
  57            actions.closeSearchInput();
  58          }
  59        })
  60      }
  61    },
  62    { lock: true }
  63  );