@vuu-ui/vuu-data-editing 5.0.0-alpha.2 → 5.0.0-alpha.3

package/src/edit-field/EditField.js

@@ -1,40 +1,77 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Checkbox, Dropdown, FormField, FormFieldLabel, Input, Option } from "@salt-ds/core";
-import { useCallback } from "react";
+import { Checkbox, Dropdown, FormField, FormFieldHelperText, FormFieldLabel, Input, Option } from "@salt-ds/core";
+import { useCallback, useEffect, useState } from "react";
 import { useEditField } from "./useEditField.js";
-import { useEditSession } from "../DataEditingProvider.js";
+import { useEditSession, useTableEditSession } from "../DataEditingProvider.js";
 import { dataDescriptorTypeToVuuRowDataItemType } from "@vuu-ui/vuu-utils";
 import { useEditMode } from "../EditModeProvider.js";
+import { getDataItemEditControl } from "../edit-control/index.js";
+import { DirectEditSession } from "../DirectEditSession.js";
+import { useEditFormContext } from "../edit-form/EditFormContext.js";
+import { useEditSessionState } from "../useEditSessionState.js";
 import { useLookupValues } from "../lookup-values/useLookupValues.js";
 import "./EditField.css";
 const classBase = "vuuEditField";
-const EditField = ({ dataRow, deferNewRow = false, label, name, readOnly = false, required, type, ...options })=>{
+const isColumnEditFieldProps = (props)=>void 0 !== props.column;
+const resolveDataRow = (dataRow)=>{
+    if (void 0 === dataRow) throw Error("EditField needs a dataRow prop or an enclosing EditForm");
+    return dataRow;
+};
+const EditField = (props)=>isColumnEditFieldProps(props) ? /*#__PURE__*/ jsx(ColumnEditField, {
+        ...props
+    }) : /*#__PURE__*/ jsx(TypedEditField, {
+        ...props
+    });
+const ColumnEditField = ({ column: descriptor, label = descriptor.label ?? descriptor.name, ...props })=>/*#__PURE__*/ jsx(TypedEditField, {
+        ...props,
+        descriptor: descriptor,
+        label: label,
+        name: descriptor.name,
+        required: descriptor.required,
+        serverDataType: descriptor.serverDataType
+    });
+const TypedEditField = ({ clientSideEditValidationCheck, dataRow: dataRowProp, deferNewRow: deferNewRowProp, descriptor, label, name, readOnly = false, required, serverDataType = "string", type, ...options })=>{
     const editSession = useEditSession();
+    const tableEditSession = useTableEditSession();
+    const form = useEditFormContext();
+    const dataRow = resolveDataRow(dataRowProp ?? form?.dataRow);
+    const deferNewRow = deferNewRowProp ?? form?.mode === "create";
     const { isEditMode } = useEditMode();
+    const formFieldErrors = form?.fieldErrors;
+    const isNewRow = editSession?.isNewRow(dataRow.key) ?? false;
+    const { newRowState } = useEditSessionState(isNewRow ? editSession : void 0);
     const lookupValues = useLookupValues({
-        enabled: "dropdown" === type,
+        enabled: void 0 === descriptor && "dropdown" === type,
         ...options
     });
+    const formSetValue = form?.setValue;
+    const setNewRowValue = useCallback((name, value)=>{
+        if (formSetValue) formSetValue(name, value);
+        else editSession?.setNewRowValue(name, value);
+    }, [
+        editSession,
+        formSetValue
+    ]);
     const onEdit = useCallback(async (editState, editPhase)=>{
         const { isValid = true, previousValue = "", value } = editState;
-        if ("commit" === editPhase && editSession) {
-            if (editSession.isNewRow(dataRow.key)) {
+        if ("commit" === editPhase && tableEditSession) {
+            if (editSession?.isNewRow(dataRow.key)) {
                 const isEmptyValue = "string" == typeof value && "" === value.trim();
                 if (!isValid && !isEmptyValue) return {
                     errorMessage: "Invalid value",
                     type: "ERROR_RESULT"
                 };
-                editSession.setNewRowValue(name, value);
+                setNewRowValue(name, value);
                 if (!deferNewRow && (editSession.isNewRowFinalColumn(name) || editSession.isNewRowComplete())) return editSession.addNewRow();
                 return {
                     data: void 0,
                     type: "SUCCESS_RESULT"
                 };
             }
-            return editSession.commit(dataRow.key, name, previousValue, value, isValid);
+            return tableEditSession.commit(dataRow.key, name, previousValue, value, isValid);
         }
         if ("change" === editPhase && deferNewRow && editSession?.isNewRow(dataRow.key)) {
-            editSession.setNewRowValue(name, value);
+            setNewRowValue(name, value);
             return {
                 data: void 0,
                 type: "SUCCESS_RESULT"
@@ -44,29 +81,52 @@ const EditField = ({ dataRow, deferNewRow = false, label, name, readOnly = false
         dataRow,
         deferNewRow,
         editSession,
-        name
+        name,
+        setNewRowValue,
+        tableEditSession
     ]);
-    const onCommit = useCallback(()=>{
-        console.log("onCommit");
-    }, []);
     const necessity = required ? "asterisk" : void 0;
     const dataValue = dataRow?.[name] ?? "";
+    const [checked, setChecked] = useState(Boolean(dataValue));
+    useEffect(()=>{
+        setChecked(Boolean(dataValue));
+    }, [
+        dataValue
+    ]);
+    const handleCheckboxChange = useCallback(async (evt)=>{
+        const previousValue = checked;
+        const value = evt.target.checked;
+        setChecked(value);
+        const response = await onEdit({
+            editType: "commit",
+            isValid: true,
+            previousValue,
+            value
+        }, "commit");
+        if (response?.type === "ERROR_RESULT") setChecked(previousValue);
+    }, [
+        checked,
+        onEdit
+    ]);
     const column = {
+        clientSideEditValidationCheck,
         label,
         name,
-        serverDataType: "string"
+        serverDataType: "checkbox" === type && "string" === serverDataType ? "boolean" : serverDataType
     };
-    const { inputProps, onChange, onDropdownSelectionChange, onKeyDown, value } = useEditField({
+    const { commit, inputProps, onChange, onDropdownSelectionChange, onKeyDown, value, warningMessage: fieldMessage } = useEditField({
         column,
         textType: "checkbox" !== type && "dropdown" !== type ? type : void 0,
         onEdit,
         type: dataDescriptorTypeToVuuRowDataItemType(column),
         value: dataValue
     });
+    const warningMessage = isEditMode ? fieldMessage ?? (formFieldErrors ? formFieldErrors[name] : newRowState.errors[name]) : void 0;
     return /*#__PURE__*/ jsxs(FormField, {
         className: classBase,
         "data-field": name,
         necessity: necessity,
+        validationStatus: warningMessage ? "error" : void 0,
         children: [
             /*#__PURE__*/ jsx(FormFieldLabel, {
                 children: label
@@ -77,9 +137,28 @@ const EditField = ({ dataRow, deferNewRow = false, label, name, readOnly = false
                     readOnly: true
                 },
                 value: String(dataValue)
+            }) : descriptor ? getDataItemEditControl({
+                InputProps: {
+                    bordered: true,
+                    inputProps: {
+                        ...inputProps,
+                        onChange,
+                        value
+                    },
+                    onKeyDown,
+                    value
+                },
+                commitOnBlur: true,
+                dataDescriptor: descriptor,
+                editOperation: isNewRow ? "insert" : "update",
+                onCommit: (_evt, committedValue)=>{
+                    commit(String(committedValue));
+                },
+                table: tableEditSession instanceof DirectEditSession ? tableEditSession.dataSource.table : editSession?.sourceDataSource?.table
             }) : "checkbox" === type ? /*#__PURE__*/ jsx(Checkbox, {
-                checked: Boolean(dataValue),
-                onChange: onCommit
+                checked: checked,
+                disabled: readOnly,
+                onChange: handleCheckboxChange
             }) : "dropdown" === type ? /*#__PURE__*/ jsx(Dropdown, {
                 "data-icon": "triangle-down",
                 onSelectionChange: onDropdownSelectionChange,
@@ -98,7 +177,10 @@ const EditField = ({ dataRow, deferNewRow = false, label, name, readOnly = false
                 onKeyDown: onKeyDown,
                 readOnly: readOnly,
                 value: value
-            })
+            }),
+            warningMessage ? /*#__PURE__*/ jsx(FormFieldHelperText, {
+                children: warningMessage
+            }) : null
         ]
     });
 };

package/src/edit-field/useEditField.js

@@ -201,6 +201,7 @@ const useEditField = ({ column, value, onEdit, textType, type = "string" })=>{
         commit
     ]);
     return {
+        commit,
         editing: editState.editing,
         inputProps: {
             onBlur: handleBlur,

package/src/edit-form/CreateRowForm.js

@@ -0,0 +1,37 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { EditSession } from "../EditSession.js";
+import { EditField } from "../edit-field/EditField.js";
+import { EditForm } from "./EditForm.js";
+const NEW_ROW = {
+    key: EditSession.newRowKey
+};
+const NO_FIELDS = [];
+const CreateRowForm = ({ children, fields = NO_FIELDS, ...props })=>{
+    const fieldNames = fields.map(({ name })=>name).join();
+    const requiredNames = fields.filter(({ required })=>false !== required).map(({ name })=>name).join();
+    const columns = useMemo(()=>fieldNames ? fieldNames.split(",") : [], [
+        fieldNames
+    ]);
+    const requiredColumns = useMemo(()=>requiredNames ? requiredNames.split(",") : [], [
+        requiredNames
+    ]);
+    return /*#__PURE__*/ jsxs(EditForm, {
+        ...props,
+        columns: columns,
+        mode: "create",
+        requiredColumns: requiredColumns,
+        children: [
+            fields.map((field)=>/*#__PURE__*/ jsx(EditField, {
+                    column: false === field.required ? field : {
+                        ...field,
+                        required: true
+                    },
+                    dataRow: NEW_ROW,
+                    deferNewRow: true
+                }, field.name)),
+            children
+        ]
+    });
+};
+export { CreateRowForm };

package/src/edit-form/EditForm.css.js

@@ -0,0 +1,32 @@
+const css = `
+.vuuEditForm {
+  gap: var(--salt-spacing-200);
+  flex-direction: column;
+  min-height: 0;
+  display: flex;
+}
+
+.vuuEditForm-title {
+  font-size: var(--salt-text-h3-fontSize);
+  font-weight: var(--salt-text-h3-fontWeight);
+  line-height: var(--salt-text-h3-lineHeight);
+  margin: 0;
+}
+
+.vuuEditForm-fields {
+  gap: var(--salt-spacing-200);
+  flex-direction: column;
+  flex: auto;
+  display: flex;
+  overflow: auto;
+}
+
+.vuuEditForm-buttons {
+  gap: var(--salt-spacing-100);
+  justify-content: flex-end;
+  display: flex;
+}
+
+
+`;
+export default css;

package/src/edit-form/EditForm.js

@@ -0,0 +1,85 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Banner, BannerContent } from "@salt-ds/core";
+import { useCallback } from "react";
+import { DataEditingProvider } from "../DataEditingProvider.js";
+import { EditModeProvider } from "../EditModeProvider.js";
+import { useEditForm } from "../useEditForm.js";
+import { EditFormButtons } from "./EditFormButtons.js";
+import { EditFormContext } from "./EditFormContext.js";
+import "./EditForm.css";
+const classBase = "vuuEditForm";
+const EditForm = ({ children, className, columns, confirmCancel, dataRow, dataSource, deleteMode, editModel, editSession: sharedEditSession, editSessionApi, hideCancel = false, isEditMode, mode = "edit", onCancelled, onError, onSaved, requiredColumns, rowDefaults, saveLabel, showButtons = true, title, validate, ...htmlAttributes })=>{
+    const form = useEditForm({
+        columns,
+        dataRow,
+        dataSource,
+        deleteMode,
+        editModel,
+        editSession: sharedEditSession,
+        editSessionApi,
+        isEditMode,
+        mode,
+        onCancelled,
+        onError,
+        onSaved,
+        requiredColumns,
+        rowDefaults,
+        validate
+    });
+    const { canSave, error, fieldEditSession, saving, submit } = form;
+    const handleSubmit = useCallback((e)=>{
+        e.preventDefault();
+        if (canSave) submit();
+    }, [
+        canSave,
+        submit
+    ]);
+    const content = /*#__PURE__*/ jsxs("form", {
+        ...htmlAttributes,
+        "aria-busy": saving || void 0,
+        className: [
+            classBase,
+            `${classBase}-${mode}`,
+            className
+        ].filter(Boolean).join(" "),
+        noValidate: true,
+        onSubmit: handleSubmit,
+        children: [
+            title ? /*#__PURE__*/ jsx("h2", {
+                className: `${classBase}-title`,
+                children: title
+            }) : null,
+            error ? /*#__PURE__*/ jsx(Banner, {
+                className: `${classBase}-error`,
+                status: "error",
+                children: /*#__PURE__*/ jsx(BannerContent, {
+                    children: error.message
+                })
+            }) : null,
+            /*#__PURE__*/ jsx("div", {
+                className: `${classBase}-fields`,
+                children: "function" == typeof children ? children(form) : children
+            }),
+            showButtons && form.isEditMode ? /*#__PURE__*/ jsx("div", {
+                className: `${classBase}-buttons`,
+                children: /*#__PURE__*/ jsx(EditFormButtons, {
+                    confirmCancel: confirmCancel,
+                    hideCancel: hideCancel,
+                    saveLabel: saveLabel
+                })
+            }) : null
+        ]
+    });
+    const ownsEditMode = "create" === mode || void 0 !== isEditMode;
+    return /*#__PURE__*/ jsx(EditFormContext.Provider, {
+        value: form,
+        children: /*#__PURE__*/ jsx(DataEditingProvider, {
+            editSession: fieldEditSession,
+            children: ownsEditMode ? /*#__PURE__*/ jsx(EditModeProvider, {
+                isEditMode: form.isEditMode,
+                children: content
+            }) : content
+        })
+    });
+};
+export { EditForm };

package/src/edit-form/EditFormButtons.js

@@ -0,0 +1,48 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@salt-ds/core";
+import { useCallback } from "react";
+import { EditButtons } from "../EditButtons.js";
+import { useEditFormContext } from "./EditFormContext.js";
+const assertForm = (form)=>{
+    if (void 0 === form) throw Error("EditFormButtons must be rendered within an EditForm");
+    return form;
+};
+const EditFormButtons = ({ confirmCancel, hideCancel = false, saveLabel: saveLabelProp })=>{
+    const { cancel, canSave, editModel, editSession, isDirty, isSharedSession, mode, saving, submit } = assertForm(useEditFormContext());
+    const saveLabel = saveLabelProp ?? ("create" === mode ? isSharedSession ? "Add" : "Create" : "direct" === editModel ? "Done" : "Save");
+    const handleCancel = useCallback(async ()=>{
+        if (confirmCancel && isDirty && !await confirmCancel()) return;
+        cancel();
+    }, [
+        cancel,
+        confirmCancel,
+        isDirty
+    ]);
+    if ("direct" === editModel) return /*#__PURE__*/ jsx(Button, {
+        onClick: ()=>submit(),
+        sentiment: "accented",
+        children: saveLabel
+    });
+    return "edit" === mode ? /*#__PURE__*/ jsx(EditButtons, {
+        canSave: canSave,
+        editSession: editSession,
+        onCancel: hideCancel ? void 0 : handleCancel,
+        onSave: submit,
+        saveLabel: saveLabel
+    }) : /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Button, {
+                disabled: !canSave,
+                sentiment: "accented",
+                type: "submit",
+                children: saveLabel
+            }),
+            hideCancel ? null : /*#__PURE__*/ jsx(Button, {
+                disabled: saving,
+                onClick: handleCancel,
+                children: "Cancel"
+            })
+        ]
+    });
+};
+export { EditFormButtons };

package/src/edit-form/EditFormContext.js

@@ -0,0 +1,4 @@
+import { createContext, useContext } from "react";
+const EditFormContext = createContext(void 0);
+const useEditFormContext = ()=>useContext(EditFormContext);
+export { EditFormContext, useEditFormContext };

package/src/edit-form/index.js

@@ -0,0 +1,4 @@
+export { CreateRowForm } from "./CreateRowForm.js";
+export { EditForm } from "./EditForm.js";
+export { EditFormButtons } from "./EditFormButtons.js";
+export { useEditFormContext } from "./EditFormContext.js";

package/src/form-fields.js

@@ -0,0 +1,40 @@
+import { isDataValueEditable } from "@vuu-ui/vuu-utils";
+import { DEFAULT_READ_ONLY_COLUMNS, narrowEditable } from "./useEditableColumns.js";
+const isServerMaintained = (name)=>DEFAULT_READ_ONLY_COLUMNS.includes(name);
+const toDescriptor = (name, schemaColumn, ...overlays)=>{
+    const descriptor = {
+        name,
+        serverDataType: schemaColumn?.serverDataType
+    };
+    let editable = schemaColumn?.editable;
+    for (const overlay of overlays)if (overlay) {
+        const { label, editor, required, serverDataType, type } = overlay;
+        if (void 0 !== label) descriptor.label = label;
+        if (void 0 !== editor) descriptor.editor = editor;
+        if (void 0 !== required) descriptor.required = required;
+        if (void 0 !== type) descriptor.type = type;
+        if (void 0 !== serverDataType && void 0 === schemaColumn) descriptor.serverDataType = serverDataType;
+        editable = narrowEditable(editable, overlay.editable);
+    }
+    if (void 0 === descriptor.required && schemaColumn?.required) descriptor.required = true;
+    if (void 0 !== editable) descriptor.editable = editable;
+    return descriptor;
+};
+const getFormFields = ({ columns = [], fields, operation = "update", schema })=>{
+    const schemaColumns = new Map(schema?.columns.map((column)=>[
+            column.name,
+            column
+        ]));
+    const tableColumns = new Map(columns.map((column)=>[
+            column.name,
+            column
+        ]));
+    let descriptors;
+    if (fields) descriptors = fields.map((field)=>toDescriptor(field.name, schemaColumns.get(field.name), tableColumns.get(field.name), field));
+    else {
+        const names = schema ? columns.map(({ name })=>name).filter((name)=>schemaColumns.has(name)).concat(schema.columns.map(({ name })=>name).filter((name)=>!tableColumns.has(name))) : columns.map(({ name })=>name);
+        descriptors = names.filter((name)=>!isServerMaintained(name)).map((name)=>toDescriptor(name, schemaColumns.get(name), tableColumns.get(name)));
+    }
+    return "insert" === operation ? descriptors.filter((descriptor)=>isDataValueEditable(descriptor, "insert", true)) : descriptors;
+};
+export { getFormFields };

package/src/index.js

@@ -1,7 +1,10 @@
+export * from "./edit-form/index.js";
+export * from "./edit-control/index.js";
 export { DataEditingProvider, useEditSession, useTableEditSession } from "./DataEditingProvider.js";
 export { DirectEditSession } from "./DirectEditSession.js";
 export { useCellEdited } from "./useCellEdited.js";
 export { useEditState } from "./useEditState.js";
+export { useEditSessionState } from "./useEditSessionState.js";
 export { getVuuEditMessage, isEditRowReadOnly, isInlineEditingSession, withDataRowEditErrors } from "./edit-utils.js";
 export { EditButtons } from "./EditButtons.js";
 export { EditField } from "./edit-field/EditField.js";
@@ -14,3 +17,9 @@ export { useEditable } from "./useEditable.js";
 export { EDIT_ACTION_ROW_CLASS_NAME_GENERATOR, editActionRowClassNameGenerator } from "./editActionRowClassNameGenerator.js";
 export { UNDO_CELL_RENDERER, UndoCellRenderer, getUndoButtonContent, getUndoTooltipContent } from "./UndoCellRenderer.js";
 export { useEditableTable } from "./useEditableTable.js";
+export { DEFAULT_READ_ONLY_COLUMNS, UNDO_COLUMN, getEditableColumns, narrowEditable, useEditableColumns } from "./useEditableColumns.js";
+export { getDataRowValues, useEditForm } from "./useEditForm.js";
+export { useLookupOptions } from "./lookup-values/useLookupOptions.js";
+export { useCustomEditField } from "./useCustomEditField.js";
+export { useConfirmDiscard } from "./useConfirmDiscard.js";
+export { getFormFields } from "./form-fields.js";

package/src/lookup-values/useLookupOptions.js

@@ -0,0 +1,106 @@
+import { Range, useData } from "@vuu-ui/vuu-utils";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { lookupOptionsFromRows } from "./useLookupValues.js";
+const DATA_ROW_COLUMN_OFFSET = 10;
+const rowToRecord = (columns, row)=>Object.fromEntries(columns.map((column, i)=>[
+            column,
+            row[i + DATA_ROW_COLUMN_OFFSET]
+        ]));
+const useLookupOptions = ({ columns: columnsProp, enabled = true, filter, mapRow, maxRows = 100, optionMap, table })=>{
+    const { VuuDataSource } = useData();
+    const [state, setState] = useState({
+        loading: false,
+        options: []
+    });
+    const mapRowRef = useRef(mapRow);
+    mapRowRef.current = mapRow;
+    const columns = useMemo(()=>{
+        if (columnsProp) return [
+            ...columnsProp
+        ];
+        if (optionMap) return [
+            optionMap.value,
+            optionMap.label,
+            ...optionMap.additionalFields ?? []
+        ];
+        return [];
+    }, [
+        columnsProp,
+        optionMap
+    ]);
+    const dataSource = useMemo(()=>enabled && table && columns.length > 0 ? new VuuDataSource({
+            columns,
+            filterSpec: filter ? {
+                filter
+            } : void 0,
+            table
+        }) : void 0, [
+        VuuDataSource,
+        columns,
+        enabled,
+        filter,
+        table
+    ]);
+    useEffect(()=>{
+        if (!dataSource) return void setState({
+            loading: false,
+            options: []
+        });
+        if (!mapRowRef.current && !optionMap) return void setState({
+            error: new Error("[useLookupOptions] either optionMap or mapRow must be provided"),
+            loading: false,
+            options: []
+        });
+        setState({
+            loading: true,
+            options: []
+        });
+        let active = true;
+        let subscribedColumns;
+        const fail = (error)=>{
+            if (active) setState({
+                error,
+                loading: false,
+                options: []
+            });
+        };
+        const subscribe = (message)=>{
+            if (!active) return;
+            if ("subscribed" === message.type) subscribedColumns = message.columns;
+            else if ("viewport-update" === message.type && subscribedColumns) {
+                if (void 0 === message.rows) {
+                    if (0 === message.size) setState({
+                        loading: false,
+                        options: []
+                    });
+                    return;
+                }
+                try {
+                    const rows = message.rows.slice(0, maxRows);
+                    const mapper = mapRowRef.current;
+                    const options = mapper ? rows.map((row)=>mapper(rowToRecord(subscribedColumns, row))) : lookupOptionsFromRows(subscribedColumns, rows, optionMap);
+                    setState({
+                        loading: false,
+                        options
+                    });
+                } catch (cause) {
+                    fail(cause instanceof Error ? cause : new Error(String(cause)));
+                }
+            } else if ("subscribe-failed" === message.type) fail(new Error(`[useLookupOptions] subscription to ${table?.table} failed: ${message.msg}`));
+        };
+        dataSource.subscribe({
+            range: Range(0, maxRows)
+        }, subscribe).catch((cause)=>fail(cause instanceof Error ? cause : new Error(String(cause))));
+        return ()=>{
+            active = false;
+            dataSource.unsubscribe();
+        };
+    }, [
+        dataSource,
+        maxRows,
+        optionMap,
+        table
+    ]);
+    return state;
+};
+export { useLookupOptions };

package/src/useConfirmDiscard.js

@@ -0,0 +1,34 @@
+import { useModal } from "@vuu-ui/core";
+import { createElement, useCallback } from "react";
+const useConfirmDiscard = ({ cancelButtonLabel = "Keep editing", confirmButtonLabel = "Discard", message = "You have unsaved changes. Discard them?", title = "Discard changes?" } = {})=>{
+    const { closePrompt, showPrompt } = useModal();
+    return useCallback(()=>new Promise((resolve)=>{
+            let resolved = false;
+            const settle = (confirmed)=>{
+                if (!resolved) {
+                    resolved = true;
+                    resolve(confirmed);
+                }
+            };
+            showPrompt(createElement("span", null, message), {
+                cancelButtonLabel,
+                confirmButtonLabel,
+                initialFocusedItem: "cancel",
+                onCancel: ()=>settle(false),
+                onConfirm: ()=>settle(true),
+                onOpenChange: (open)=>{
+                    if (!open) settle(false);
+                },
+                status: "warning",
+                title
+            });
+        }).finally(closePrompt), [
+        cancelButtonLabel,
+        closePrompt,
+        confirmButtonLabel,
+        message,
+        showPrompt,
+        title
+    ]);
+};
+export { useConfirmDiscard };