@wordpress/block-library/build/navigation/edit/responsive-wrapper.js

Block library for the WordPress editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = ResponsiveWrapper;
var _clsx = _interopRequireDefault(require("clsx"));
var _icons = require("@wordpress/icons");
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _blockEditor = require("@wordpress/block-editor");
var _overlayMenuIcon = _interopRequireDefault(require("./overlay-menu-icon"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function ResponsiveWrapper({
  children,
  id,
  isOpen,
  isResponsive,
  onToggle,
  isHiddenByDefault,
  overlayBackgroundColor,
  overlayTextColor,
  hasIcon,
  icon
}) {
  if (!isResponsive) {
    return children;
  }
  const responsiveContainerClasses = (0, _clsx.default)('wp-block-navigation__responsive-container', {
    'has-text-color': !!overlayTextColor.color || !!overlayTextColor?.class,
    [(0, _blockEditor.getColorClassName)('color', overlayTextColor?.slug)]: !!overlayTextColor?.slug,
    'has-background': !!overlayBackgroundColor.color || overlayBackgroundColor?.class,
    [(0, _blockEditor.getColorClassName)('background-color', overlayBackgroundColor?.slug)]: !!overlayBackgroundColor?.slug,
    'is-menu-open': isOpen,
    'hidden-by-default': isHiddenByDefault
  });
  const styles = {
    color: !overlayTextColor?.slug && overlayTextColor?.color,
    backgroundColor: !overlayBackgroundColor?.slug && overlayBackgroundColor?.color && overlayBackgroundColor.color
  };
  const openButtonClasses = (0, _clsx.default)('wp-block-navigation__responsive-container-open', {
    'always-shown': isHiddenByDefault
  });
  const modalId = `${id}-modal`;
  const dialogProps = {
    className: 'wp-block-navigation__responsive-dialog',
    ...(isOpen && {
      role: 'dialog',
      'aria-modal': true,
      'aria-label': (0, _i18n.__)('Menu')
    })
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [!isOpen && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Button, {
      __next40pxDefaultSize: true,
      "aria-haspopup": "true",
      "aria-label": hasIcon && (0, _i18n.__)('Open menu'),
      className: openButtonClasses,
      onClick: () => onToggle(true),
      children: [hasIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_overlayMenuIcon.default, {
        icon: icon
      }), !hasIcon && (0, _i18n.__)('Menu')]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: responsiveContainerClasses,
      style: styles,
      id: modalId,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: "wp-block-navigation__responsive-close",
        tabIndex: "-1",
        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
          ...dialogProps,
          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Button, {
            __next40pxDefaultSize: true,
            className: "wp-block-navigation__responsive-container-close",
            "aria-label": hasIcon && (0, _i18n.__)('Close menu'),
            onClick: () => onToggle(false),
            children: [hasIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
              icon: _icons.close
            }), !hasIcon && (0, _i18n.__)('Close')]
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
            className: "wp-block-navigation__responsive-container-content",
            id: `${modalId}-content`,
            children: children
          })]
        })
      })
    })]
  });
}
//# sourceMappingURL=responsive-wrapper.js.map