style,

[47000] Fix | Delete

overlayClassName,

[47001] Fix | Delete

className,

[47002] Fix | Delete

contentLabel,

[47003] Fix | Delete

onKeyDown,

[47004] Fix | Delete

isFullScreen = false,

[47005] Fix | Delete

size,

[47006] Fix | Delete

headerActions = null,

[47007] Fix | Delete

__experimentalHideHeader = false

[47008] Fix | Delete

} = props;

[47009] Fix | Delete

const ref = (0,external_wp_element_namespaceObject.useRef)();

[47010] Fix | Delete

const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(Modal);

[47011] Fix | Delete

const headingId = title ? `components-modal-header-${instanceId}` : aria.labelledby;

[47012] Fix | Delete

[47013] Fix | Delete

// The focus hook does not support 'firstContentElement' but this is a valid

[47014] Fix | Delete

// value for the Modal's focusOnMount prop. The following code ensures the focus

[47015] Fix | Delete

// hook will focus the first focusable node within the element to which it is applied.

[47016] Fix | Delete

// When `firstContentElement` is passed as the value of the focusOnMount prop,

[47017] Fix | Delete

// the focus hook is applied to the Modal's content element.

[47018] Fix | Delete

// Otherwise, the focus hook is applied to the Modal's ref. This ensures that the

[47019] Fix | Delete

// focus hook will focus the first element in the Modal's **content** when

[47020] Fix | Delete

// `firstContentElement` is passed.

[47021] Fix | Delete

const focusOnMountRef = (0,external_wp_compose_namespaceObject.useFocusOnMount)(focusOnMount === 'firstContentElement' ? 'firstElement' : focusOnMount);

[47022] Fix | Delete

const constrainedTabbingRef = (0,external_wp_compose_namespaceObject.useConstrainedTabbing)();

[47023] Fix | Delete

const focusReturnRef = (0,external_wp_compose_namespaceObject.useFocusReturn)();

[47024] Fix | Delete

const contentRef = (0,external_wp_element_namespaceObject.useRef)(null);

[47025] Fix | Delete

const childrenContainerRef = (0,external_wp_element_namespaceObject.useRef)(null);

[47026] Fix | Delete

const [hasScrolledContent, setHasScrolledContent] = (0,external_wp_element_namespaceObject.useState)(false);

[47027] Fix | Delete

const [hasScrollableContent, setHasScrollableContent] = (0,external_wp_element_namespaceObject.useState)(false);

[47028] Fix | Delete

let sizeClass;

[47029] Fix | Delete

if (isFullScreen || size === 'fill') {

[47030] Fix | Delete

sizeClass = 'is-full-screen';

[47031] Fix | Delete

} else if (size) {

[47032] Fix | Delete

sizeClass = `has-size-${size}`;

[47033] Fix | Delete

}

[47034] Fix | Delete

[47035] Fix | Delete

// Determines whether the Modal content is scrollable and updates the state.

[47036] Fix | Delete

const isContentScrollable = (0,external_wp_element_namespaceObject.useCallback)(() => {

[47037] Fix | Delete

if (!contentRef.current) {

[47038] Fix | Delete

return;

[47039] Fix | Delete

}

[47040] Fix | Delete

const closestScrollContainer = (0,external_wp_dom_namespaceObject.getScrollContainer)(contentRef.current);

[47041] Fix | Delete

if (contentRef.current === closestScrollContainer) {

[47042] Fix | Delete

setHasScrollableContent(true);

[47043] Fix | Delete

} else {

[47044] Fix | Delete

setHasScrollableContent(false);

[47045] Fix | Delete

}

[47046] Fix | Delete

}, [contentRef]);

[47047] Fix | Delete

[47048] Fix | Delete

// Accessibly isolates/unisolates the modal.

[47049] Fix | Delete

(0,external_wp_element_namespaceObject.useEffect)(() => {

[47050] Fix | Delete

modalize(ref.current);

[47051] Fix | Delete

return () => unmodalize();

[47052] Fix | Delete

}, []);

[47053] Fix | Delete

[47054] Fix | Delete

// Keeps a fresh ref for the subsequent effect.

[47055] Fix | Delete

const refOnRequestClose = (0,external_wp_element_namespaceObject.useRef)();

[47056] Fix | Delete

(0,external_wp_element_namespaceObject.useEffect)(() => {

[47057] Fix | Delete

refOnRequestClose.current = onRequestClose;

[47058] Fix | Delete

}, [onRequestClose]);

[47059] Fix | Delete

[47060] Fix | Delete

// The list of `onRequestClose` callbacks of open (non-nested) Modals. Only

[47061] Fix | Delete

// one should remain open at a time and the list enables closing prior ones.

[47062] Fix | Delete

const dismissers = (0,external_wp_element_namespaceObject.useContext)(ModalContext);

[47063] Fix | Delete

// Used for the tracking and dismissing any nested modals.

[47064] Fix | Delete

const nestedDismissers = (0,external_wp_element_namespaceObject.useRef)([]);

[47065] Fix | Delete

[47066] Fix | Delete

// Updates the stack tracking open modals at this level and calls

[47067] Fix | Delete

// onRequestClose for any prior and/or nested modals as applicable.

[47068] Fix | Delete

(0,external_wp_element_namespaceObject.useEffect)(() => {

[47069] Fix | Delete

dismissers.push(refOnRequestClose);

[47070] Fix | Delete

const [first, second] = dismissers;

[47071] Fix | Delete

if (second) {

[47072] Fix | Delete

first?.current?.();

[47073] Fix | Delete

}

[47074] Fix | Delete

const nested = nestedDismissers.current;

[47075] Fix | Delete

return () => {

[47076] Fix | Delete

nested[0]?.current?.();

[47077] Fix | Delete

dismissers.shift();

[47078] Fix | Delete

};

[47079] Fix | Delete

}, [dismissers]);

[47080] Fix | Delete

[47081] Fix | Delete

// Adds/removes the value of bodyOpenClassName to body element.

[47082] Fix | Delete

(0,external_wp_element_namespaceObject.useEffect)(() => {

[47083] Fix | Delete

var _bodyOpenClasses$get;

[47084] Fix | Delete

const theClass = bodyOpenClassName;

[47085] Fix | Delete

const oneMore = 1 + ((_bodyOpenClasses$get = bodyOpenClasses.get(theClass)) !== null && _bodyOpenClasses$get !== void 0 ? _bodyOpenClasses$get : 0);

[47086] Fix | Delete

bodyOpenClasses.set(theClass, oneMore);

[47087] Fix | Delete

document.body.classList.add(bodyOpenClassName);

[47088] Fix | Delete

return () => {

[47089] Fix | Delete

const oneLess = bodyOpenClasses.get(theClass) - 1;

[47090] Fix | Delete

if (oneLess === 0) {

[47091] Fix | Delete

document.body.classList.remove(theClass);

[47092] Fix | Delete

bodyOpenClasses.delete(theClass);

[47093] Fix | Delete

} else {

[47094] Fix | Delete

bodyOpenClasses.set(theClass, oneLess);

[47095] Fix | Delete

}

[47096] Fix | Delete

};

[47097] Fix | Delete

}, [bodyOpenClassName]);

[47098] Fix | Delete

[47099] Fix | Delete

// Calls the isContentScrollable callback when the Modal children container resizes.

[47100] Fix | Delete

(0,external_wp_element_namespaceObject.useLayoutEffect)(() => {

[47101] Fix | Delete

if (!window.ResizeObserver || !childrenContainerRef.current) {

[47102] Fix | Delete

return;

[47103] Fix | Delete

}

[47104] Fix | Delete

const resizeObserver = new ResizeObserver(isContentScrollable);

[47105] Fix | Delete

resizeObserver.observe(childrenContainerRef.current);

[47106] Fix | Delete

isContentScrollable();

[47107] Fix | Delete

return () => {

[47108] Fix | Delete

resizeObserver.disconnect();

[47109] Fix | Delete

};

[47110] Fix | Delete

}, [isContentScrollable, childrenContainerRef]);

[47111] Fix | Delete

function handleEscapeKeyDown(event) {

[47112] Fix | Delete

if (shouldCloseOnEsc && (event.code === 'Escape' || event.key === 'Escape') && !event.defaultPrevented) {

[47113] Fix | Delete

event.preventDefault();

[47114] Fix | Delete

if (onRequestClose) {

[47115] Fix | Delete

onRequestClose(event);

[47116] Fix | Delete

}

[47117] Fix | Delete

}

[47118] Fix | Delete

}

[47119] Fix | Delete

const onContentContainerScroll = (0,external_wp_element_namespaceObject.useCallback)(e => {

[47120] Fix | Delete

var _e$currentTarget$scro;

[47121] Fix | Delete

const scrollY = (_e$currentTarget$scro = e?.currentTarget?.scrollTop) !== null && _e$currentTarget$scro !== void 0 ? _e$currentTarget$scro : -1;

[47122] Fix | Delete

if (!hasScrolledContent && scrollY > 0) {

[47123] Fix | Delete

setHasScrolledContent(true);

[47124] Fix | Delete

} else if (hasScrolledContent && scrollY <= 0) {

[47125] Fix | Delete

setHasScrolledContent(false);

[47126] Fix | Delete

}

[47127] Fix | Delete

}, [hasScrolledContent]);

[47128] Fix | Delete

let pressTarget = null;

[47129] Fix | Delete

const overlayPressHandlers = {

[47130] Fix | Delete

onPointerDown: event => {

[47131] Fix | Delete

if (event.target === event.currentTarget) {

[47132] Fix | Delete

pressTarget = event.target;

[47133] Fix | Delete

// Avoids focus changing so that focus return works as expected.

[47134] Fix | Delete

event.preventDefault();

[47135] Fix | Delete

}

[47136] Fix | Delete

},

[47137] Fix | Delete

// Closes the modal with two exceptions. 1. Opening the context menu on

[47138] Fix | Delete

// the overlay. 2. Pressing on the overlay then dragging the pointer

[47139] Fix | Delete

// over the modal and releasing. Due to the modal being a child of the

[47140] Fix | Delete

// overlay, such a gesture is a `click` on the overlay and cannot be

[47141] Fix | Delete

// excepted by a `click` handler. Thus the tactic of handling

[47142] Fix | Delete

// `pointerup` and comparing its target to that of the `pointerdown`.

[47143] Fix | Delete

onPointerUp: ({

[47144] Fix | Delete

target,

[47145] Fix | Delete

button

[47146] Fix | Delete

}) => {

[47147] Fix | Delete

const isSameTarget = target === pressTarget;

[47148] Fix | Delete

pressTarget = null;

[47149] Fix | Delete

if (button === 0 && isSameTarget) {

[47150] Fix | Delete

onRequestClose();

[47151] Fix | Delete

}

[47152] Fix | Delete

}

[47153] Fix | Delete

};

[47154] Fix | Delete

const modal =

[47155] Fix | Delete

/*#__PURE__*/

[47156] Fix | Delete

// eslint-disable-next-line jsx-a11y/no-static-element-interactions

[47157] Fix | Delete

(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {

[47158] Fix | Delete

ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([ref, forwardedRef]),

[47159] Fix | Delete

className: dist_clsx('components-modal__screen-overlay', overlayClassName),

[47160] Fix | Delete

onKeyDown: withIgnoreIMEEvents(handleEscapeKeyDown),

[47161] Fix | Delete

...(shouldCloseOnClickOutside ? overlayPressHandlers : {}),

[47162] Fix | Delete

children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(style_provider, {

[47163] Fix | Delete

document: document,

[47164] Fix | Delete

children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {

[47165] Fix | Delete

className: dist_clsx('components-modal__frame', sizeClass, className),

[47166] Fix | Delete

style: style,

[47167] Fix | Delete

ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([constrainedTabbingRef, focusReturnRef, focusOnMount !== 'firstContentElement' ? focusOnMountRef : null]),

[47168] Fix | Delete

role: role,

[47169] Fix | Delete

"aria-label": contentLabel,

[47170] Fix | Delete

"aria-labelledby": contentLabel ? undefined : headingId,

[47171] Fix | Delete

"aria-describedby": aria.describedby,

[47172] Fix | Delete

tabIndex: -1,

[47173] Fix | Delete

onKeyDown: onKeyDown,

[47174] Fix | Delete

children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {

[47175] Fix | Delete

className: dist_clsx('components-modal__content', {

[47176] Fix | Delete

'hide-header': __experimentalHideHeader,

[47177] Fix | Delete

'is-scrollable': hasScrollableContent,

[47178] Fix | Delete

'has-scrolled-content': hasScrolledContent

[47179] Fix | Delete

}),

[47180] Fix | Delete

role: "document",

[47181] Fix | Delete

onScroll: onContentContainerScroll,

[47182] Fix | Delete

ref: contentRef,

[47183] Fix | Delete

"aria-label": hasScrollableContent ? (0,external_wp_i18n_namespaceObject.__)('Scrollable section') : undefined,

[47184] Fix | Delete

tabIndex: hasScrollableContent ? 0 : undefined,

[47185] Fix | Delete

children: [!__experimentalHideHeader && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {

[47186] Fix | Delete

className: "components-modal__header",

[47187] Fix | Delete

children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {

[47188] Fix | Delete

className: "components-modal__header-heading-container",

[47189] Fix | Delete

children: [icon && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {

[47190] Fix | Delete

className: "components-modal__icon-container",

[47191] Fix | Delete

"aria-hidden": true,

[47192] Fix | Delete

children: icon

[47193] Fix | Delete

}), title && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("h1", {

[47194] Fix | Delete

id: headingId,

[47195] Fix | Delete

className: "components-modal__header-heading",

[47196] Fix | Delete

children: title

[47197] Fix | Delete

})]

[47198] Fix | Delete

}), headerActions, isDismissible && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {

[47199] Fix | Delete

onClick: onRequestClose,

[47200] Fix | Delete

icon: library_close,

[47201] Fix | Delete

label: closeButtonLabel || (0,external_wp_i18n_namespaceObject.__)('Close')

[47202] Fix | Delete

})]

[47203] Fix | Delete

}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {

[47204] Fix | Delete

ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([childrenContainerRef, focusOnMount === 'firstContentElement' ? focusOnMountRef : null]),

[47205] Fix | Delete

children: children

[47206] Fix | Delete

})]

[47207] Fix | Delete

})

[47208] Fix | Delete

})

[47209] Fix | Delete

})

[47210] Fix | Delete

});

[47211] Fix | Delete

return (0,external_wp_element_namespaceObject.createPortal)( /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ModalContext.Provider, {

[47212] Fix | Delete

value: nestedDismissers.current,

[47213] Fix | Delete

children: modal

[47214] Fix | Delete

}), document.body);

[47215] Fix | Delete

}

[47216] Fix | Delete

[47217] Fix | Delete

/**

[47218] Fix | Delete

* Modals give users information and choices related to a task they’re trying to

[47219] Fix | Delete

* accomplish. They can contain critical information, require decisions, or

[47220] Fix | Delete

* involve multiple tasks.

[47221] Fix | Delete

*

[47222] Fix | Delete

* ```jsx

[47223] Fix | Delete

* import { Button, Modal } from '@wordpress/components';

[47224] Fix | Delete

* import { useState } from '@wordpress/element';

[47225] Fix | Delete

*

[47226] Fix | Delete

* const MyModal = () => {

[47227] Fix | Delete

* const [ isOpen, setOpen ] = useState( false );

[47228] Fix | Delete

* const openModal = () => setOpen( true );

[47229] Fix | Delete

* const closeModal = () => setOpen( false );

[47230] Fix | Delete

*

[47231] Fix | Delete

* return (

[47232] Fix | Delete

* <>

[47233] Fix | Delete

* <Button variant="secondary" onClick={ openModal }>

[47234] Fix | Delete

* Open Modal

[47235] Fix | Delete

* </Button>

[47236] Fix | Delete

* { isOpen && (

[47237] Fix | Delete

* <Modal title="This is my modal" onRequestClose={ closeModal }>

[47238] Fix | Delete

* <Button variant="secondary" onClick={ closeModal }>

[47239] Fix | Delete

* My custom close button

[47240] Fix | Delete

* </Button>

[47241] Fix | Delete

* </Modal>

[47242] Fix | Delete

* ) }

[47243] Fix | Delete

* </>

[47244] Fix | Delete

* );

[47245] Fix | Delete

* };

[47246] Fix | Delete

* ```

[47247] Fix | Delete

*/

[47248] Fix | Delete

const Modal = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedModal);

[47249] Fix | Delete

/* harmony default export */ const modal = (Modal);

[47250] Fix | Delete

[47251] Fix | Delete

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/confirm-dialog/styles.js

[47252] Fix | Delete

function confirm_dialog_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }

[47253] Fix | Delete

/**

[47254] Fix | Delete

* External dependencies

[47255] Fix | Delete

*/

[47256] Fix | Delete

[47257] Fix | Delete

[47258] Fix | Delete

/**

[47259] Fix | Delete

* The z-index for ConfirmDialog is being set here instead of in

[47260] Fix | Delete

* packages/base-styles/_z-index.scss, because this component uses

[47261] Fix | Delete

* emotion instead of sass.

[47262] Fix | Delete

*

[47263] Fix | Delete

* ConfirmDialog needs this higher z-index to ensure it renders on top of

[47264] Fix | Delete

* any parent Popover component.

[47265] Fix | Delete

*/

[47266] Fix | Delete

const styles_wrapper = true ? {

[47267] Fix | Delete

name: "7g5ii0",

[47268] Fix | Delete

styles: "&&{z-index:1000001;}"

[47269] Fix | Delete

} : 0;

[47270] Fix | Delete

[47271] Fix | Delete

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/confirm-dialog/component.js

[47272] Fix | Delete

/**

[47273] Fix | Delete

* WordPress dependencies

[47274] Fix | Delete

*/

[47275] Fix | Delete

[47276] Fix | Delete

[47277] Fix | Delete

[47278] Fix | Delete

/**

[47279] Fix | Delete

* Internal dependencies

[47280] Fix | Delete

*/

[47281] Fix | Delete

[47282] Fix | Delete

[47283] Fix | Delete

[47284] Fix | Delete

[47285] Fix | Delete

[47286] Fix | Delete

[47287] Fix | Delete

[47288] Fix | Delete

[47289] Fix | Delete

[47290] Fix | Delete

[47291] Fix | Delete

[47292] Fix | Delete

const UnconnectedConfirmDialog = (props, forwardedRef) => {

[47293] Fix | Delete

const {

[47294] Fix | Delete

isOpen: isOpenProp,

[47295] Fix | Delete

onConfirm,

[47296] Fix | Delete

onCancel,

[47297] Fix | Delete

children,

[47298] Fix | Delete

confirmButtonText,

[47299] Fix | Delete

cancelButtonText,

[47300] Fix | Delete

...otherProps

[47301] Fix | Delete

} = useContextSystem(props, 'ConfirmDialog');

[47302] Fix | Delete

const cx = useCx();

[47303] Fix | Delete

const wrapperClassName = cx(styles_wrapper);

[47304] Fix | Delete

const cancelButtonRef = (0,external_wp_element_namespaceObject.useRef)();

[47305] Fix | Delete

const confirmButtonRef = (0,external_wp_element_namespaceObject.useRef)();

[47306] Fix | Delete

const [isOpen, setIsOpen] = (0,external_wp_element_namespaceObject.useState)();

[47307] Fix | Delete

const [shouldSelfClose, setShouldSelfClose] = (0,external_wp_element_namespaceObject.useState)();

[47308] Fix | Delete

(0,external_wp_element_namespaceObject.useEffect)(() => {

[47309] Fix | Delete

// We only allow the dialog to close itself if `isOpenProp` is *not* set.

[47310] Fix | Delete

// If `isOpenProp` is set, then it (probably) means it's controlled by a

[47311] Fix | Delete

// parent component. In that case, `shouldSelfClose` might do more harm than

[47312] Fix | Delete

// good, so we disable it.

[47313] Fix | Delete

const isIsOpenSet = typeof isOpenProp !== 'undefined';

[47314] Fix | Delete

setIsOpen(isIsOpenSet ? isOpenProp : true);

[47315] Fix | Delete

setShouldSelfClose(!isIsOpenSet);

[47316] Fix | Delete

}, [isOpenProp]);

[47317] Fix | Delete

const handleEvent = (0,external_wp_element_namespaceObject.useCallback)(callback => event => {

[47318] Fix | Delete

callback?.(event);

[47319] Fix | Delete

if (shouldSelfClose) {

[47320] Fix | Delete

setIsOpen(false);

[47321] Fix | Delete

}

[47322] Fix | Delete

}, [shouldSelfClose, setIsOpen]);

[47323] Fix | Delete

const handleEnter = (0,external_wp_element_namespaceObject.useCallback)(event => {

[47324] Fix | Delete

// Avoid triggering the 'confirm' action when a button is focused,

[47325] Fix | Delete

// as this can cause a double submission.

[47326] Fix | Delete

const isConfirmOrCancelButton = event.target === cancelButtonRef.current || event.target === confirmButtonRef.current;

[47327] Fix | Delete

if (!isConfirmOrCancelButton && event.key === 'Enter') {

[47328] Fix | Delete

handleEvent(onConfirm)(event);

[47329] Fix | Delete

}

[47330] Fix | Delete

}, [handleEvent, onConfirm]);

[47331] Fix | Delete

const cancelLabel = cancelButtonText !== null && cancelButtonText !== void 0 ? cancelButtonText : (0,external_wp_i18n_namespaceObject.__)('Cancel');

[47332] Fix | Delete

const confirmLabel = confirmButtonText !== null && confirmButtonText !== void 0 ? confirmButtonText : (0,external_wp_i18n_namespaceObject.__)('OK');

[47333] Fix | Delete

return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, {

[47334] Fix | Delete

children: isOpen && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(modal, {

[47335] Fix | Delete

onRequestClose: handleEvent(onCancel),

[47336] Fix | Delete

onKeyDown: handleEnter,

[47337] Fix | Delete

closeButtonLabel: cancelLabel,

[47338] Fix | Delete

isDismissible: true,

[47339] Fix | Delete

ref: forwardedRef,

[47340] Fix | Delete

overlayClassName: wrapperClassName,

[47341] Fix | Delete

__experimentalHideHeader: true,

[47342] Fix | Delete

...otherProps,

[47343] Fix | Delete

children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(v_stack_component, {

[47344] Fix | Delete

spacing: 8,

[47345] Fix | Delete

children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(text_component, {

[47346] Fix | Delete

children: children

[47347] Fix | Delete

}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(flex_component, {

[47348] Fix | Delete

direction: "row",

[47349] Fix | Delete

justify: "flex-end",

[47350] Fix | Delete

children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {

[47351] Fix | Delete

__next40pxDefaultSize: true,

[47352] Fix | Delete

ref: cancelButtonRef,

[47353] Fix | Delete

variant: "tertiary",

[47354] Fix | Delete

onClick: handleEvent(onCancel),

[47355] Fix | Delete

children: cancelLabel

[47356] Fix | Delete

}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {

[47357] Fix | Delete

__next40pxDefaultSize: true,

[47358] Fix | Delete

ref: confirmButtonRef,

[47359] Fix | Delete

variant: "primary",

[47360] Fix | Delete

onClick: handleEvent(onConfirm),

[47361] Fix | Delete

children: confirmLabel

[47362] Fix | Delete

})]

[47363] Fix | Delete

})]

[47364] Fix | Delete

})

[47365] Fix | Delete

})

[47366] Fix | Delete

});

[47367] Fix | Delete

};

[47368] Fix | Delete

[47369] Fix | Delete

/**

[47370] Fix | Delete

* `ConfirmDialog` is built of top of [`Modal`](/packages/components/src/modal/README.md)

[47371] Fix | Delete

* and displays a confirmation dialog, with _confirm_ and _cancel_ buttons.

[47372] Fix | Delete

* The dialog is confirmed by clicking the _confirm_ button or by pressing the `Enter` key.

[47373] Fix | Delete

* It is cancelled (closed) by clicking the _cancel_ button, by pressing the `ESC` key, or by

[47374] Fix | Delete

* clicking outside the dialog focus (i.e, the overlay).

[47375] Fix | Delete

*

[47376] Fix | Delete

* `ConfirmDialog` has two main implicit modes: controlled and uncontrolled.

[47377] Fix | Delete

*

[47378] Fix | Delete

* UnControlled:

[47379] Fix | Delete

*

[47380] Fix | Delete

* Allows the component to be used standalone, just by declaring it as part of another React's component render method:

[47381] Fix | Delete

* - It will be automatically open (displayed) upon mounting;

[47382] Fix | Delete

* - It will be automatically closed when clicking the _cancel_ button, by pressing the `ESC` key, or by clicking outside the dialog focus (i.e, the overlay);

[47383] Fix | Delete

* - `onCancel` is not mandatory but can be passed. Even if passed, the dialog will still be able to close itself.

[47384] Fix | Delete

*

[47385] Fix | Delete

* Activating this mode is as simple as omitting the `isOpen` prop. The only mandatory prop, in this case, is the `onConfirm` callback. The message is passed as the `children`. You can pass any JSX you'd like, which allows to further format the message or include sub-component if you'd like:

[47386] Fix | Delete

*

[47387] Fix | Delete

* ```jsx

[47388] Fix | Delete

* import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';

[47389] Fix | Delete

*

[47390] Fix | Delete

* function Example() {

[47391] Fix | Delete

* return (

[47392] Fix | Delete

* <ConfirmDialog onConfirm={ () => console.debug( ' Confirmed! ' ) }>

[47393] Fix | Delete

* Are you sure? <strong>This action cannot be undone!</strong>

[47394] Fix | Delete

* </ConfirmDialog>

[47395] Fix | Delete

* );

[47396] Fix | Delete

* }

[47397] Fix | Delete

* ```

[47398] Fix | Delete

*

[47399] Fix | Delete

*

[47400] Fix | Delete

* Controlled mode:

[47401] Fix | Delete

* Let the parent component control when the dialog is open/closed. It's activated when a

[47402] Fix | Delete

* boolean value is passed to `isOpen`:

[47403] Fix | Delete

* - It will not be automatically closed. You need to let it know when to open/close by updating the value of the `isOpen` prop;

[47404] Fix | Delete

* - Both `onConfirm` and the `onCancel` callbacks are mandatory props in this mode;

[47405] Fix | Delete

* - You'll want to update the state that controls `isOpen` by updating it from the `onCancel` and `onConfirm` callbacks.

[47406] Fix | Delete

*

[47407] Fix | Delete

*```jsx

[47408] Fix | Delete

* import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';

[47409] Fix | Delete

* import { useState } from '@wordpress/element';

[47410] Fix | Delete

*

[47411] Fix | Delete

* function Example() {

[47412] Fix | Delete

* const [ isOpen, setIsOpen ] = useState( true );

[47413] Fix | Delete

*

[47414] Fix | Delete

* const handleConfirm = () => {

[47415] Fix | Delete

* console.debug( 'Confirmed!' );

[47416] Fix | Delete

* setIsOpen( false );

[47417] Fix | Delete

* };

[47418] Fix | Delete

*

[47419] Fix | Delete

* const handleCancel = () => {

[47420] Fix | Delete

* console.debug( 'Cancelled!' );

[47421] Fix | Delete

* setIsOpen( false );

[47422] Fix | Delete

* };

[47423] Fix | Delete

*

[47424] Fix | Delete

* return (

[47425] Fix | Delete

* <ConfirmDialog

[47426] Fix | Delete

* isOpen={ isOpen }

[47427] Fix | Delete

* onConfirm={ handleConfirm }

[47428] Fix | Delete

* onCancel={ handleCancel }

[47429] Fix | Delete

* >

[47430] Fix | Delete

* Are you sure? <strong>This action cannot be undone!</strong>

[47431] Fix | Delete

* </ConfirmDialog>

[47432] Fix | Delete

* );

[47433] Fix | Delete

* }

[47434] Fix | Delete

* ```

[47435] Fix | Delete

*/

[47436] Fix | Delete

const ConfirmDialog = contextConnect(UnconnectedConfirmDialog, 'ConfirmDialog');

[47437] Fix | Delete

/* harmony default export */ const confirm_dialog_component = (ConfirmDialog);

[47438] Fix | Delete

[47439] Fix | Delete

// EXTERNAL MODULE: ./node_modules/prop-types/index.js

[47440] Fix | Delete

var prop_types = __webpack_require__(5826);

[47441] Fix | Delete

var prop_types_default = /*#__PURE__*/__webpack_require__.n(prop_types);

[47442] Fix | Delete

// EXTERNAL MODULE: ./node_modules/downshift/node_modules/react-is/index.js

[47443] Fix | Delete

var react_is = __webpack_require__(1915);

[47444] Fix | Delete

;// CONCATENATED MODULE: ./node_modules/compute-scroll-into-view/dist/index.mjs

[47445] Fix | Delete

function dist_t(t){return"object"==typeof t&&null!=t&&1===t.nodeType}function dist_e(t,e){return(!e||"hidden"!==t)&&"visible"!==t&&"clip"!==t}function dist_n(t,n){if(t.clientHeight<t.scrollHeight||t.clientWidth<t.scrollWidth){var r=getComputedStyle(t,null);return dist_e(r.overflowY,n)||dist_e(r.overflowX,n)||function(t){var e=function(t){if(!t.ownerDocument||!t.ownerDocument.defaultView)return null;try{return t.ownerDocument.defaultView.frameElement}catch(t){return null}}(t);return!!e&&(e.clientHeight<t.scrollHeight||e.clientWidth<t.scrollWidth)}(t)}return!1}function dist_r(t,e,n,r,i,o,l,d){return o<t&&l>e||o>t&&l<e?0:o<=t&&d<=n||l>=e&&d>=n?o-t-r:l>e&&d<n||o<t&&d>n?l-e+i:0}var compute_scroll_into_view_dist_i=function(e,i){var o=window,l=i.scrollMode,d=i.block,f=i.inline,h=i.boundary,u=i.skipOverflowHiddenElements,s="function"==typeof h?h:function(t){return t!==h};if(!dist_t(e))throw new TypeError("Invalid target");for(var a,c,g=document.scrollingElement||document.documentElement,p=[],m=e;dist_t(m)&&s(m);){if((m=null==(c=(a=m).parentElement)?a.getRootNode().host||null:c)===g){p.push(m);break}null!=m&&m===document.body&&dist_n(m)&&!dist_n(document.documentElement)||null!=m&&dist_n(m,u)&&p.push(m)}for(var w=o.visualViewport?o.visualViewport.width:innerWidth,v=o.visualViewport?o.visualViewport.height:innerHeight,W=window.scrollX||pageXOffset,H=window.scrollY||pageYOffset,b=e.getBoundingClientRect(),y=b.height,E=b.width,M=b.top,V=b.right,x=b.bottom,I=b.left,C="start"===d||"nearest"===d?M:"end"===d?x:M+y/2,R="center"===f?I+E/2:"end"===f?V:I,T=[],k=0;k<p.length;k++){var B=p[k],D=B.getBoundingClientRect(),O=D.height,X=D.width,Y=D.top,L=D.right,S=D.bottom,j=D.left;if("if-needed"===l&&M>=0&&I>=0&&x<=v&&V<=w&&M>=Y&&x<=S&&I>=j&&V<=L)return T;var N=getComputedStyle(B),q=parseInt(N.borderLeftWidth,10),z=parseInt(N.borderTopWidth,10),A=parseInt(N.borderRightWidth,10),F=parseInt(N.borderBottomWidth,10),G=0,J=0,K="offsetWidth"in B?B.offsetWidth-B.clientWidth-q-A:0,P="offsetHeight"in B?B.offsetHeight-B.clientHeight-z-F:0,Q="offsetWidth"in B?0===B.offsetWidth?0:X/B.offsetWidth:0,U="offsetHeight"in B?0===B.offsetHeight?0:O/B.offsetHeight:0;if(g===B)G="start"===d?C:"end"===d?C-v:"nearest"===d?dist_r(H,H+v,v,z,F,H+C,H+C+y,y):C-v/2,J="start"===f?R:"center"===f?R-w/2:"end"===f?R-w:dist_r(W,W+w,w,q,A,W+R,W+R+E,E),G=Math.max(0,G+H),J=Math.max(0,J+W);else{G="start"===d?C-Y-z:"end"===d?C-S+F+P:"nearest"===d?dist_r(Y,S,O,z,F+P,C,C+y,y):C-(Y+O/2)+P/2,J="start"===f?R-j-q:"center"===f?R-(j+X/2)+K/2:"end"===f?R-L+A+K:dist_r(j,L,X,q,A+K,R,R+E,E);var Z=B.scrollLeft,$=B.scrollTop;C+=$-(G=Math.max(0,Math.min($+G/U,B.scrollHeight-O/U+P))),R+=Z-(J=Math.max(0,Math.min(Z+J/Q,B.scrollWidth-X/Q+K)))}T.push({el:B,top:G,left:J})}return T};

[47446] Fix | Delete

//# sourceMappingURL=index.mjs.map

[47447] Fix | Delete

[47448] Fix | Delete

;// CONCATENATED MODULE: ./node_modules/downshift/dist/downshift.esm.js

[47449] Fix | Delete

[47450] Fix | Delete

[47451] Fix | Delete

[47452] Fix | Delete

[47453] Fix | Delete

[47454] Fix | Delete

[47455] Fix | Delete

let idCounter = 0;

[47456] Fix | Delete

/**

[47457] Fix | Delete

* Accepts a parameter and returns it if it's a function

[47458] Fix | Delete

* or a noop function if it's not. This allows us to

[47459] Fix | Delete

* accept a callback, but not worry about it if it's not

[47460] Fix | Delete

* passed.

[47461] Fix | Delete

* @param {Function} cb the callback

[47462] Fix | Delete

* @return {Function} a function

[47463] Fix | Delete

*/

[47464] Fix | Delete

[47465] Fix | Delete

function cbToCb(cb) {

[47466] Fix | Delete

return typeof cb === 'function' ? cb : downshift_esm_noop;

[47467] Fix | Delete

}

[47468] Fix | Delete

[47469] Fix | Delete

function downshift_esm_noop() {}

[47470] Fix | Delete

/**

[47471] Fix | Delete

* Scroll node into view if necessary

[47472] Fix | Delete

* @param {HTMLElement} node the element that should scroll into view

[47473] Fix | Delete

* @param {HTMLElement} menuNode the menu element of the component

[47474] Fix | Delete

*/

[47475] Fix | Delete

[47476] Fix | Delete

[47477] Fix | Delete

function scrollIntoView(node, menuNode) {

[47478] Fix | Delete

if (!node) {

[47479] Fix | Delete

return;

[47480] Fix | Delete

}

[47481] Fix | Delete

[47482] Fix | Delete

const actions = compute_scroll_into_view_dist_i(node, {

[47483] Fix | Delete

boundary: menuNode,

[47484] Fix | Delete

block: 'nearest',

[47485] Fix | Delete

scrollMode: 'if-needed'

[47486] Fix | Delete

});

[47487] Fix | Delete

actions.forEach(_ref => {

[47488] Fix | Delete

let {

[47489] Fix | Delete

el,

[47490] Fix | Delete

top,

[47491] Fix | Delete

left

[47492] Fix | Delete

} = _ref;

[47493] Fix | Delete

el.scrollTop = top;

[47494] Fix | Delete

el.scrollLeft = left;

[47495] Fix | Delete

});

[47496] Fix | Delete

}

[47497] Fix | Delete

/**

[47498] Fix | Delete

* @param {HTMLElement} parent the parent node

[47499] Fix | Delete