"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// packages/components/src/confirm-dialog/component.tsx
var component_exports = {};
__export(component_exports, {
  ConfirmDialog: () => ConfirmDialog,
  default: () => component_default
});
module.exports = __toCommonJS(component_exports);
var import_i18n = require("@wordpress/i18n");
var import_element = require("@wordpress/element");
var import_modal = __toESM(require("../modal/index.cjs"), 1);
var import_context = require("../context/index.cjs");
var import_flex = require("../flex/index.cjs");
var import_button = __toESM(require("../button/index.cjs"), 1);
var import_text = require("../text/index.cjs");
var import_v_stack = require("../v-stack/index.cjs");
var styles = __toESM(require("./styles.cjs"), 1);
var import_use_cx = require("../utils/hooks/use-cx.cjs");
var import_jsx_runtime = require("react/jsx-runtime");
var UnconnectedConfirmDialog = (props, forwardedRef) => {
  const {
    isOpen: isOpenProp,
    onConfirm,
    onCancel,
    children,
    confirmButtonText,
    cancelButtonText,
    isBusy,
    ...otherProps
  } = (0, import_context.useContextSystem)(props, "ConfirmDialog");
  const cx = (0, import_use_cx.useCx)();
  const wrapperClassName = cx(styles.wrapper);
  const cancelButtonRef = (0, import_element.useRef)();
  const confirmButtonRef = (0, import_element.useRef)();
  const [isOpen, setIsOpen] = (0, import_element.useState)();
  const [shouldSelfClose, setShouldSelfClose] = (0, import_element.useState)();
  (0, import_element.useEffect)(() => {
    const isIsOpenSet = typeof isOpenProp !== "undefined";
    setIsOpen(isIsOpenSet ? isOpenProp : true);
    setShouldSelfClose(!isIsOpenSet);
  }, [isOpenProp]);
  const handleEvent = (0, import_element.useCallback)((callback) => (event) => {
    callback?.(event);
    if (shouldSelfClose) {
      setIsOpen(false);
    }
  }, [shouldSelfClose, setIsOpen]);
  const handleEnter = (0, import_element.useCallback)((event) => {
    const isConfirmOrCancelButton = event.target === cancelButtonRef.current || event.target === confirmButtonRef.current;
    if (!isConfirmOrCancelButton && event.key === "Enter") {
      handleEvent(onConfirm)(event);
    }
  }, [handleEvent, onConfirm]);
  const cancelLabel = cancelButtonText !== null && cancelButtonText !== void 0 ? cancelButtonText : (0, import_i18n.__)("Cancel");
  const confirmLabel = confirmButtonText !== null && confirmButtonText !== void 0 ? confirmButtonText : (0, import_i18n.__)("OK");
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
    children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_modal.default, {
      onRequestClose: handleEvent(onCancel),
      onKeyDown: handleEnter,
      closeButtonLabel: cancelLabel,
      isDismissible: true,
      ref: forwardedRef,
      overlayClassName: wrapperClassName,
      __experimentalHideHeader: true,
      ...otherProps,
      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_v_stack.VStack, {
        spacing: 8,
        children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_text.Text, {
          children
        }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_flex.Flex, {
          direction: "row",
          justify: "flex-end",
          children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.default, {
            __next40pxDefaultSize: true,
            ref: cancelButtonRef,
            variant: "tertiary",
            onClick: handleEvent(onCancel),
            accessibleWhenDisabled: true,
            disabled: isBusy,
            children: cancelLabel
          }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.default, {
            __next40pxDefaultSize: true,
            ref: confirmButtonRef,
            variant: "primary",
            onClick: handleEvent(onConfirm),
            accessibleWhenDisabled: true,
            disabled: isBusy,
            isBusy,
            children: confirmLabel
          })]
        })]
      })
    })
  });
};
var ConfirmDialog = (0, import_context.contextConnect)(UnconnectedConfirmDialog, "ConfirmDialog");
var component_default = ConfirmDialog;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  ConfirmDialog
});
//# sourceMappingURL=component.cjs.map
