@wordpress/block-library
Version:
Block library for the WordPress editor.
57 lines (56 loc) • 1.77 kB
JavaScript
// packages/block-library/src/navigation-link/link-ui/dialog-wrapper.js
import { Button, VisuallyHidden } from "@wordpress/components";
import { __, isRTL } from "@wordpress/i18n";
import { chevronLeftSmall, chevronRightSmall } from "@wordpress/icons";
import { useInstanceId, useFocusOnMount } from "@wordpress/compose";
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.js.map