@wordpress/block-library/build-module/search/view.js

Block library for the WordPress editor.

/**
 * WordPress dependencies
 */
import { store, getContext, getElement, withSyncEvent } from '@wordpress/interactivity';
const {
  actions
} = store('core/search', {
  state: {
    get ariaLabel() {
      const {
        isSearchInputVisible,
        ariaLabelCollapsed,
        ariaLabelExpanded
      } = getContext();
      return isSearchInputVisible ? ariaLabelExpanded : ariaLabelCollapsed;
    },
    get ariaControls() {
      const {
        isSearchInputVisible,
        inputId
      } = getContext();
      return isSearchInputVisible ? null : inputId;
    },
    get type() {
      const {
        isSearchInputVisible
      } = getContext();
      return isSearchInputVisible ? 'submit' : 'button';
    },
    get tabindex() {
      const {
        isSearchInputVisible
      } = getContext();
      return isSearchInputVisible ? '0' : '-1';
    }
  },
  actions: {
    openSearchInput: withSyncEvent(event => {
      const ctx = getContext();
      const {
        ref
      } = getElement();
      if (!ctx.isSearchInputVisible) {
        event.preventDefault();
        ctx.isSearchInputVisible = true;
        ref.parentElement.querySelector('input').focus();
      }
    }),
    closeSearchInput() {
      const ctx = getContext();
      ctx.isSearchInputVisible = false;
    },
    handleSearchKeydown(event) {
      const {
        ref
      } = getElement();
      // If Escape close the menu.
      if (event?.key === 'Escape') {
        actions.closeSearchInput();
        ref.querySelector('button').focus();
      }
    },
    handleSearchFocusout(event) {
      const {
        ref
      } = getElement();
      // If focus is outside search form, and in the document, close menu
      // event.target === The element losing focus
      // event.relatedTarget === The element receiving focus (if any)
      // When focusout is outside the document,
      // `window.document.activeElement` doesn't change.
      if (!ref.contains(event.relatedTarget) && event.target !== window.document.activeElement) {
        actions.closeSearchInput();
      }
    }
  }
}, {
  lock: true
});
//# sourceMappingURL=view.js.map