: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
className: "__focus-trap-outer-before",
const fromOuter = event.relatedTarget === outerAfterRef.current;
if (!fromOuter && isFocusEventOutside(event, portalNode)) {
queueFocus(innerBeforeRef.current);
queueFocus(getPreviousTabbable());
preserveTabOrder && // We're using position: fixed here so that the browser doesn't
// add margin to the element when setting gap on a parent element.
/* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)("span", { "aria-owns": portalNode == null ? void 0 : portalNode.id, style: { position: "fixed" } }),
preserveTabOrder && portalNode && /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(
className: "__focus-trap-outer-after",
if (isFocusEventOutside(event, portalNode)) {
queueFocus(innerAfterRef.current);
const nextTabbable = getNextTabbable();
if (nextTabbable === innerBeforeRef.current) {
requestAnimationFrame(() => {
return (_a2 = getNextTabbable()) == null ? void 0 : _a2.focus();
queueFocus(nextTabbable);
if (anchorPortalNode && preserveTabOrder) {
preserveTabOrderElement = (0,external_ReactDOM_namespaceObject.createPortal)(
return /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { children: [
props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), {
var Portal = createComponent((props) => {
const htmlProps = usePortal(props);
return _3ORBWXWF_createElement("div", htmlProps);
;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/NERBASET.js
var NERBASET_isSafariBrowser = isSafari();
function isAlreadyFocusingAnotherElement(dialog) {
const activeElement = getActiveElement();
if (dialog && contains(dialog, activeElement))
if (isFocusable(activeElement))
function getElementFromProp(prop, focusable = false) {
const element = "current" in prop ? prop.current : prop;
return isFocusable(element) ? element : null;
var useDialog = createHook(
hideOnInteractOutside = true,
preventBodyScroll = !!modal,
} = _b, props = __objRest(_b, [
const context = useDialogProviderContext();
const ref = (0,external_React_.useRef)(null);
const store = useDialogStore({
store: storeProp || context,
const dialog = ref.current;
const event = new Event("close", { bubbles: false, cancelable: true });
dialog.addEventListener("close", onClose, { once: true });
dialog.dispatchEvent(event);
if (!event.defaultPrevented)
const { portalRef, domReady } = usePortalRef(portal, props.portalRef);
const preserveTabOrderProp = props.preserveTabOrder;
const preserveTabOrder = store.useState(
(state) => preserveTabOrderProp && !modal && state.mounted
const id = useId(props.id);
const open = store.useState("open");
const mounted = store.useState("mounted");
const contentElement = store.useState("contentElement");
const hidden = isHidden(mounted, props.hidden, props.alwaysVisible);
usePreventBodyScroll(contentElement, id, preventBodyScroll && !hidden);
useHideOnInteractOutside(store, hideOnInteractOutside, domReady);
const { wrapElement, nestedDialogs } = useNestedDialogs(store);
props = useWrapElement(props, wrapElement, [wrapElement]);
useSafeLayoutEffect(() => {
const dialog = ref.current;
const activeElement = getActiveElement(dialog, true);
if (activeElement.tagName === "BODY")
if (dialog && contains(dialog, activeElement))
store.setDisclosureElement(activeElement);
if (NERBASET_isSafariBrowser) {
(0,external_React_.useEffect)(() => {
const { disclosureElement } = store.getState();
if (!isButton(disclosureElement))
const onMouseDown = () => {
let receivedFocus = false;
const options = { capture: true, once: true };
disclosureElement.addEventListener("focusin", onFocus, options);
queueBeforeEvent(disclosureElement, "mouseup", () => {
disclosureElement.removeEventListener("focusin", onFocus, true);
focusIfNeeded(disclosureElement);
disclosureElement.addEventListener("mousedown", onMouseDown);
disclosureElement.removeEventListener("mousedown", onMouseDown);
(0,external_React_.useEffect)(() => {
const dialog = ref.current;
const existingDismiss = dialog.querySelector("[data-dialog-dismiss]");
return prependHiddenDismiss(dialog, store.hide);
}, [store, modal, mounted, domReady]);
useSafeLayoutEffect(() => {
const dialog = ref.current;
return disableTree(dialog);
}, [open, mounted, domReady]);
const canTakeTreeSnapshot = open && domReady;
useSafeLayoutEffect(() => {
if (!canTakeTreeSnapshot)
const dialog = ref.current;
return createWalkTreeSnapshot(id, [dialog]);
}, [id, canTakeTreeSnapshot]);
const getPersistentElementsProp = useEvent(getPersistentElements);
useSafeLayoutEffect(() => {
if (!canTakeTreeSnapshot)
const { disclosureElement } = store.getState();
const dialog = ref.current;
const persistentElements = getPersistentElementsProp() || [];
...nestedDialogs.map((dialog2) => dialog2.getState().contentElement)
markTreeOutside(id, allElements),
disableTreeOutside(id, allElements)
return markTreeOutside(id, [disclosureElement, ...allElements]);
getPersistentElementsProp,
const mayAutoFocusOnShow = !!autoFocusOnShow;
const autoFocusOnShowProp = useBooleanEvent(autoFocusOnShow);
const [autoFocusEnabled, setAutoFocusEnabled] = (0,external_React_.useState)(false);
(0,external_React_.useEffect)(() => {
if (!(contentElement == null ? void 0 : contentElement.isConnected))
const element = getElementFromProp(initialFocus, true) || // If no initial focus is specified, we try to focus the first element
// with the autofocus attribute. If it's an Ariakit component, the
// Focusable component will consume the autoFocus prop and add the
// data-autofocus attribute to the element instead.
contentElement.querySelector(
"[data-autofocus=true],[autofocus]"
) || // We have to fallback to the first focusable element otherwise portaled
// dialogs with preserveTabOrder set to true will not receive focus
// properly because the elements aren't tabbable until the dialog
getFirstTabbableIn(contentElement, true, portal && preserveTabOrder) || // Finally, we fallback to the dialog element itself.
const isElementFocusable = isFocusable(element);
if (!autoFocusOnShowProp(isElementFocusable ? element : null))
setAutoFocusEnabled(true);
if (!NERBASET_isSafariBrowser)
element.scrollIntoView({ block: "nearest", inline: "nearest" });
const mayAutoFocusOnHide = !!autoFocusOnHide;
const autoFocusOnHideProp = useBooleanEvent(autoFocusOnHide);
const [hasOpened, setHasOpened] = (0,external_React_.useState)(false);
(0,external_React_.useEffect)(() => {
return () => setHasOpened(false);
const focusOnHide = (0,external_React_.useCallback)(
(dialog, retry = true) => {
const { disclosureElement } = store.getState();
if (isAlreadyFocusingAnotherElement(dialog))
let element = getElementFromProp(finalFocus) || disclosureElement;
if (element == null ? void 0 : element.id) {
const doc = DLOEKDPY_getDocument(element);
const selector = `[aria-activedescendant="${element.id}"]`;
const composite = doc.querySelector(selector);
if (element && !isFocusable(element)) {
const maybeParentDialog = DLOEKDPY_closest(element, "[data-dialog]");
if (maybeParentDialog && maybeParentDialog.id) {
const doc = DLOEKDPY_getDocument(maybeParentDialog);
const selector = `[aria-controls~="${maybeParentDialog.id}"]`;
const control = doc.querySelector(selector);
const isElementFocusable = element && isFocusable(element);
if (!isElementFocusable && retry) {
requestAnimationFrame(() => focusOnHide(dialog, false));
if (!autoFocusOnHideProp(isElementFocusable ? element : null))
element == null ? void 0 : element.focus();
[store, finalFocus, autoFocusOnHideProp]
useSafeLayoutEffect(() => {
const dialog = ref.current;
}, [open, hasOpened, domReady, mayAutoFocusOnHide, focusOnHide]);
(0,external_React_.useEffect)(() => {
const dialog = ref.current;
return () => focusOnHide(dialog);
}, [hasOpened, mayAutoFocusOnHide, focusOnHide]);
const hideOnEscapeProp = useBooleanEvent(hideOnEscape);
(0,external_React_.useEffect)(() => {
const onKeyDown = (event) => {
if (event.key !== "Escape")
if (event.defaultPrevented)
const dialog = ref.current;
if (isElementMarked(dialog))
const target = event.target;
const { disclosureElement } = store.getState();
const isValidTarget = () => {
if (target.tagName === "BODY")
if (contains(dialog, target))
if (contains(disclosureElement, target))
if (!hideOnEscapeProp(event))
return addGlobalEventListener("keydown", onKeyDown, true);
}, [store, domReady, mounted, hideOnEscapeProp]);
(element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(HeadingLevel, { level: modal ? 1 : void 0, children: element }),
const hiddenProp = props.hidden;
const alwaysVisible = props.alwaysVisible;
return /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { children: [
/* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(
[store, backdrop, backdropProps, hiddenProp, alwaysVisible]
const [headingId, setHeadingId] = (0,external_React_.useState)();
const [descriptionId, setDescriptionId] = (0,external_React_.useState)();
(element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(DialogScopedContextProvider, { value: store, children: /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(DialogHeadingContext.Provider, { value: setHeadingId, children: /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(DialogDescriptionContext.Provider, { value: setDescriptionId, children: element }) }) }),
props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({
tabIndex: focusable ? -1 : void 0,
"aria-labelledby": headingId,
"aria-describedby": descriptionId
ref: useMergeRefs(ref, props.ref)
props = useFocusableContainer(_4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), {