@kopexa/alert-dialog
Version:
A modal dialog that interrupts the user with important content and expects a response.
301 lines (293 loc) • 9.26 kB
JavaScript
"use client";
;
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);
// src/index.ts
var index_exports = {};
__export(index_exports, {
AlertDialog: () => namespace_exports,
ConfirmDialogProvider: () => ConfirmDialogProvider,
useConfirm: () => useConfirm
});
module.exports = __toCommonJS(index_exports);
// src/confirm.tsx
var import_react = require("react");
// src/confirm.context.ts
var import_react_utils = require("@kopexa/react-utils");
var [ConfirmInternalProvider, useConfirm] = (0, import_react_utils.createContext)();
// src/namespace.ts
var namespace_exports = {};
__export(namespace_exports, {
Action: () => AlertDialogAction,
Cancel: () => AlertDialogCancel,
Content: () => AlertDialogContent,
Description: () => AlertDialogDescription,
Footer: () => AlertDialogFooter,
Header: () => AlertDialogHeader,
Overlay: () => AlertDialogOverlay,
Portal: () => AlertDialogPortal,
Root: () => AlertDialogRoot,
Title: () => AlertDialogTitle,
Trigger: () => AlertDialogTrigger
});
// src/alert-dialog.tsx
var import_react_utils2 = require("@kopexa/react-utils");
var import_theme = require("@kopexa/theme");
var AlertDialogPrimitive = __toESM(require("@radix-ui/react-alert-dialog"));
var import_jsx_runtime = require("react/jsx-runtime");
var [Provider, useAlertDialogContext] = (0, import_react_utils2.createContext)();
function AlertDialogRoot(props) {
const styles = (0, import_theme.alertDialog)();
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Provider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertDialogPrimitive.Root, { "data-slot": "alert-dialog", ...props }) });
}
function AlertDialogTrigger(props) {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertDialogPrimitive.Trigger, { "data-slot": "alert-dialog-trigger", ...props });
}
function AlertDialogPortal({ ...props }) {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertDialogPrimitive.Portal, { "data-slot": "alert-dialog-portal", ...props });
}
function AlertDialogOverlay({
className,
...props
}) {
const { styles } = useAlertDialogContext();
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
AlertDialogPrimitive.Overlay,
{
"data-slot": "alert-dialog-overlay",
className: styles.overlay(className),
...props
}
);
}
function AlertDialogContent({
className,
...props
}) {
const { styles } = useAlertDialogContext();
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AlertDialogPortal, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertDialogOverlay, {}),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
AlertDialogPrimitive.Content,
{
"data-slot": "alert-dialog-content",
className: styles.content(className),
...props
}
)
] });
}
function AlertDialogHeader({
className,
...props
}) {
const { styles } = useAlertDialogContext();
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"div",
{
"data-slot": "alert-dialog-header",
className: styles.header(className),
...props
}
);
}
function AlertDialogFooter({
className,
...props
}) {
const { styles } = useAlertDialogContext();
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"div",
{
"data-slot": "alert-dialog-footer",
className: styles.footer(className),
...props
}
);
}
function AlertDialogTitle({
className,
...props
}) {
const { styles } = useAlertDialogContext();
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
AlertDialogPrimitive.Title,
{
"data-slot": "alert-dialog-title",
className: styles.title(className),
...props
}
);
}
function AlertDialogDescription({
className,
...props
}) {
const { styles } = useAlertDialogContext();
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
AlertDialogPrimitive.Description,
{
"data-slot": "alert-dialog-description",
className: styles.description(className),
...props
}
);
}
function AlertDialogAction({
className,
color,
variant,
...props
}) {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
AlertDialogPrimitive.Action,
{
className: (0, import_theme.button)({ className, color, variant }),
...props
}
);
}
function AlertDialogCancel({
className,
...props
}) {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
AlertDialogPrimitive.Cancel,
{
className: (0, import_theme.button)({ variant: "ghost", className }),
...props
}
);
}
// src/confirm.dialog.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var ConfirmDialog = (props) => {
const { isOpen, onOpenChange, config, onCancel, onConfirm } = props;
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AlertDialogRoot, { open: isOpen, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(AlertDialogContent, { children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(AlertDialogHeader, { children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AlertDialogTitle, { children: config.title }),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AlertDialogDescription, { children: config.children })
] }),
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(AlertDialogFooter, { children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AlertDialogCancel, { onClick: onCancel, children: config.cancelButtonContent }),
!config.hideConfirmButton && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
AlertDialogAction,
{
onClick: onConfirm,
color: config.confirmButtonType,
variant: config.confirmButtonVariant,
children: config.confirmButtonContent
}
)
] })
] }) });
};
// src/confirm.tsx
var import_jsx_runtime3 = require("react/jsx-runtime");
var defaultOptions = {
title: "Are you sure?",
children: "This action cannot be undone.",
confirmButtonContent: "OK",
cancelButtonContent: "Cancel",
confirmButtonType: "destructive",
confirmButtonVariant: "solid"
};
var ConfirmDialogProvider = ({
children
}) => {
const [dialogState, setDialogState] = (0, import_react.useState)({
isOpen: false,
config: defaultOptions,
resolver: null
});
const confirm = (0, import_react.useCallback)((options) => {
setDialogState((prev) => ({
isOpen: true,
config: { ...defaultOptions, ...options },
resolver: prev.resolver
}));
return new Promise((resolve) => {
setDialogState((prev) => ({
...prev,
resolver: resolve
}));
});
}, []);
const handleCancel = (0, import_react.useCallback)(() => {
setDialogState((prev) => {
if (prev.resolver) {
prev.resolver(false);
}
return {
...prev,
isOpen: false,
resolver: null
};
});
}, []);
const handleOpenChange = (0, import_react.useCallback)(
(open) => {
if (!open) {
handleCancel();
}
},
[handleCancel]
);
const handleConfirm = (0, import_react.useCallback)(() => {
setDialogState((prev) => {
if (prev.resolver) {
prev.resolver(true);
}
return {
...prev,
isOpen: false,
resolver: null
};
});
}, []);
const context = (0, import_react.useMemo)(() => ({ confirm }), [confirm]);
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(ConfirmInternalProvider, { value: context, children: [
children,
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
ConfirmDialog,
{
isOpen: dialogState.isOpen,
onOpenChange: handleOpenChange,
onConfirm: handleConfirm,
onCancel: handleCancel,
config: dialogState.config || {}
}
)
] });
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
AlertDialog,
ConfirmDialogProvider,
useConfirm
});