@shopify/polaris/dist/esm/components/TopBar/TopBar.js

Shopify’s product component library

import React$1 from 'react';
import { useTheme } from '../../utilities/theme/hooks.js';
import { useFeatures } from '../../utilities/features/hooks.js';
import { useI18n } from '../../utilities/i18n/hooks.js';
import { classNames } from '../../utilities/css.js';
import { Image as Image$1 } from '../Image/Image.js';
import { MobileHamburgerMajor } from '@shopify/polaris-icons';
import { Icon as Icon$1 } from '../Icon/Icon.js';
import { UnstyledLink as UnstyledLink$1 } from '../UnstyledLink/UnstyledLink.js';
import { useToggle as useToggle$1 } from '../../utilities/use-toggle.js';
import { getWidth as getWidth$1 } from '../../utilities/get-width.js';
import { Search as Search$1 } from './components/Search/Search.js';
import { SearchField as SearchField$1 } from './components/SearchField/SearchField.js';
import { Menu as Menu$1 } from './components/Menu/Menu.js';
import { UserMenu as UserMenu$1 } from './components/UserMenu/UserMenu.js';
import styles from './TopBar.scss.js';

var _ref = /*#__PURE__*/React$1.createElement(Icon$1, {
  source: MobileHamburgerMajor
});

// TypeScript can't generate types that correctly infer the typing of
// subcomponents so explicitly state the subcomponents in the type definition.
// Letting this be implicit works in this project but fails in projects that use
// generated *.d.ts files.
var TopBar = function TopBar({
  showNavigationToggle,
  userMenu,
  searchResults,
  searchField,
  secondaryMenu,
  searchResultsVisible,
  searchResultsOverlayVisible = false,
  onNavigationToggle,
  onSearchResultsDismiss,
  contextControl
}) {
  var i18n = useI18n();
  var {
    logo
  } = useTheme();
  var {
    newDesignLanguage
  } = useFeatures();
  var {
    value: focused,
    setTrue: forceTrueFocused,
    setFalse: forceFalseFocused
  } = useToggle$1(false);
  var iconClassName = classNames(styles.NavigationIcon, focused && styles.focused);
  var navigationButtonMarkup = showNavigationToggle ? /*#__PURE__*/React$1.createElement("button", {
    type: "button",
    className: iconClassName,
    onClick: onNavigationToggle,
    onFocus: forceTrueFocused,
    onBlur: forceFalseFocused,
    "aria-label": i18n.translate('Polaris.TopBar.toggleMenuLabel')
  }, _ref) : null;
  var width = getWidth$1(logo, 104);
  var contextMarkup;

  if (contextControl) {
    contextMarkup = /*#__PURE__*/React$1.createElement("div", {
      className: styles.ContextControl
    }, contextControl);
  } else if (logo) {
    contextMarkup = /*#__PURE__*/React$1.createElement("div", {
      className: styles.LogoContainer
    }, /*#__PURE__*/React$1.createElement(UnstyledLink$1, {
      url: logo.url || '',
      className: styles.LogoLink,
      style: {
        width
      }
    }, /*#__PURE__*/React$1.createElement(Image$1, {
      source: logo.topBarSource || '',
      alt: logo.accessibilityLabel || '',
      className: styles.Logo,
      style: {
        width
      }
    })));
  }

  var searchMarkup = searchField ? /*#__PURE__*/React$1.createElement(React$1.Fragment, null, searchField, /*#__PURE__*/React$1.createElement(Search$1, {
    visible: searchResultsVisible,
    onDismiss: onSearchResultsDismiss,
    overlayVisible: searchResultsOverlayVisible
  }, searchResults)) : null;
  var className = classNames(styles.TopBar, newDesignLanguage && styles['TopBar-newDesignLanguage']);
  return /*#__PURE__*/React$1.createElement("div", {
    className: className
  }, navigationButtonMarkup, contextMarkup, /*#__PURE__*/React$1.createElement("div", {
    className: styles.Contents
  }, /*#__PURE__*/React$1.createElement("div", {
    className: styles.SearchField
  }, searchMarkup), /*#__PURE__*/React$1.createElement("div", {
    className: styles.SecondaryMenu
  }, secondaryMenu), userMenu));
};
TopBar.Menu = Menu$1;
TopBar.SearchField = SearchField$1;
TopBar.UserMenu = UserMenu$1;

export { TopBar };