@wordpress/components/build/snackbar/index.js

UI components for WordPress.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.Snackbar = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _a11y = require("@wordpress/a11y");
var _element = require("@wordpress/element");
var _i18n = require("@wordpress/i18n");
var _warning = _interopRequireDefault(require("@wordpress/warning"));
var _button = _interopRequireDefault(require("../button"));
var _externalLink = _interopRequireDefault(require("../external-link"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const NOTICE_TIMEOUT = 10000;

/**
 * Custom hook which announces the message with the given politeness, if a
 * valid message is provided.
 *
 * @param message    Message to announce.
 * @param politeness Politeness to announce.
 */
function useSpokenMessage(message, politeness) {
  const spokenMessage = typeof message === 'string' ? message : (0, _element.renderToString)(message);
  (0, _element.useEffect)(() => {
    if (spokenMessage) {
      (0, _a11y.speak)(spokenMessage, politeness);
    }
  }, [spokenMessage, politeness]);
}
function UnforwardedSnackbar({
  className,
  children,
  spokenMessage = children,
  politeness = 'polite',
  actions = [],
  onRemove,
  icon = null,
  explicitDismiss = false,
  // onDismiss is a callback executed when the snackbar is dismissed.
  // It is distinct from onRemove, which _looks_ like a callback but is
  // actually the function to call to remove the snackbar from the UI.
  onDismiss,
  listRef
}, ref) {
  function dismissMe(event) {
    if (event && event.preventDefault) {
      event.preventDefault();
    }

    // Prevent focus loss by moving it to the list element.
    listRef?.current?.focus();
    onDismiss?.();
    onRemove?.();
  }
  function onActionClick(event, onClick) {
    event.stopPropagation();
    onRemove?.();
    if (onClick) {
      onClick(event);
    }
  }
  useSpokenMessage(spokenMessage, politeness);

  // The `onDismiss/onRemove` can have unstable references,
  // trigger side-effect cleanup, and reset timers.
  const callbacksRef = (0, _element.useRef)({
    onDismiss,
    onRemove
  });
  (0, _element.useLayoutEffect)(() => {
    callbacksRef.current = {
      onDismiss,
      onRemove
    };
  });
  (0, _element.useEffect)(() => {
    // Only set up the timeout dismiss if we're not explicitly dismissing.
    const timeoutHandle = setTimeout(() => {
      if (!explicitDismiss) {
        callbacksRef.current.onDismiss?.();
        callbacksRef.current.onRemove?.();
      }
    }, NOTICE_TIMEOUT);
    return () => clearTimeout(timeoutHandle);
  }, [explicitDismiss]);
  const classes = (0, _clsx.default)(className, 'components-snackbar', {
    'components-snackbar-explicit-dismiss': !!explicitDismiss
  });
  if (actions && actions.length > 1) {
    // We need to inform developers that snackbar only accepts 1 action.
    globalThis.SCRIPT_DEBUG === true ? (0, _warning.default)('Snackbar can only have one action. Use Notice if your message requires many actions.') : void 0;
    // return first element only while keeping it inside an array
    actions = [actions[0]];
  }
  const snackbarContentClassnames = (0, _clsx.default)('components-snackbar__content', {
    'components-snackbar__content-with-icon': !!icon
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    ref: ref,
    className: classes,
    onClick: !explicitDismiss ? dismissMe : undefined,
    tabIndex: 0,
    role: !explicitDismiss ? 'button' : undefined,
    onKeyPress: !explicitDismiss ? dismissMe : undefined,
    "aria-label": !explicitDismiss ? (0, _i18n.__)('Dismiss this notice') : undefined,
    "data-testid": "snackbar",
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: snackbarContentClassnames,
      children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: "components-snackbar__icon",
        children: icon
      }), children, actions.map(({
        label,
        onClick,
        url,
        openInNewTab = false
      }, index) => url !== undefined && openInNewTab ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_externalLink.default, {
        href: url,
        onClick: event => onActionClick(event, onClick),
        className: "components-snackbar__action",
        children: label
      }, index) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
        __next40pxDefaultSize: true,
        href: url,
        variant: "link",
        onClick: event => onActionClick(event, onClick),
        className: "components-snackbar__action",
        children: label
      }, index)), explicitDismiss && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
        role: "button",
        "aria-label": (0, _i18n.__)('Dismiss this notice'),
        tabIndex: 0,
        className: "components-snackbar__dismiss-button",
        onClick: dismissMe,
        onKeyPress: dismissMe,
        children: "\u2715"
      })]
    })
  });
}

/**
 * A Snackbar displays a succinct message that is cleared out after a small delay.
 *
 * It can also offer the user options, like viewing a published post.
 * But these options should also be available elsewhere in the UI.
 *
 * ```jsx
 * const MySnackbarNotice = () => (
 *   <Snackbar>Post published successfully.</Snackbar>
 * );
 * ```
 */
const Snackbar = exports.Snackbar = (0, _element.forwardRef)(UnforwardedSnackbar);
var _default = exports.default = Snackbar;
//# sourceMappingURL=index.js.map