// packages/block-library/src/navigation-link/link-ui/dialog-wrapper.js
import { Button } from "@wordpress/components";
import { __, isRTL } from "@wordpress/i18n";
import { chevronLeftSmall, chevronRightSmall } from "@wordpress/icons";
import { useInstanceId, useFocusOnMount } from "@wordpress/compose";
import { VisuallyHidden } from "@wordpress/ui";
import { jsx, jsxs } from "react/jsx-runtime";
function BackButton({ className, onBack }) {
  return /* @__PURE__ */ jsx(
    Button,
    {
      className,
      icon: isRTL() ? chevronRightSmall : chevronLeftSmall,
      onClick: (e) => {
        e.preventDefault();
        onBack();
      },
      size: "small",
      children: __("Back")
    }
  );
}
function DialogWrapper({ className, title, description, onBack, children }) {
  const dialogTitleId = useInstanceId(
    DialogWrapper,
    "link-ui-dialog-title"
  );
  const dialogDescriptionId = useInstanceId(
    DialogWrapper,
    "link-ui-dialog-description"
  );
  const focusOnMountRef = useFocusOnMount("firstElement");
  const backButtonClassName = `${className}__back`;
  return /* @__PURE__ */ jsxs(
    "div",
    {
      className,
      role: "dialog",
      "aria-labelledby": dialogTitleId,
      "aria-describedby": dialogDescriptionId,
      ref: focusOnMountRef,
      children: [
        /* @__PURE__ */ jsxs(VisuallyHidden, { children: [
          /* @__PURE__ */ jsx("h2", { id: dialogTitleId, children: title }),
          /* @__PURE__ */ jsx("p", { id: dialogDescriptionId, children: description })
        ] }),
        /* @__PURE__ */ jsx(BackButton, { className: backButtonClassName, onBack }),
        children
      ]
    }
  );
}
var dialog_wrapper_default = DialogWrapper;
export {
  dialog_wrapper_default as default
};
//# sourceMappingURL=dialog-wrapper.mjs.map
