@enonic/ui-kit 0.3.0 → 0.5.0

package/README.md

@@ -1,24 +1,21 @@
 # @enonic/ui-kit
 
 Composite React components for Enonic applications — what
-[`@enonic/ui`](https://www.npmjs.com/package/@enonic/ui) would be if its parts carried behaviour:
-layouts, split panels, toolbars, browse screens with their list and details columns, dialog and
-form shells.
+[`@enonic/ui`](https://www.npmjs.com/package/@enonic/ui) would be if its parts carried behaviour.
+The dialog with an outcome and its confirmations are here, and the filter input of a browse screen;
+layouts, toolbars and the rest of the browse screen follow.
 
 A component belongs here when it holds state, coordinates several base components, or encodes a
 screen pattern more than one application repeats. Props in, callbacks out: nothing here reaches
 into a host application's configuration, stores, router or phrase keys.
 
-> **Status**: scaffolding, pre-1.0. The build and release path work end to end; the components
-> land package by package.
-
 ## Install
 
 Pick one framework — the same contract as `@enonic/ui`:
 
 ```sh
-pnpm add @enonic/ui-kit react react-dom   # React
-pnpm add @enonic/ui-kit preact            # Preact
+pnpm add @enonic/ui-kit @enonic/ui react react-dom   # React
+pnpm add @enonic/ui-kit @enonic/ui preact            # Preact
 ```
 
 The components are written as React code. On Preact, map React's names to `preact/compat` in the
@@ -35,4 +32,77 @@ resolve: {
 },
 ```
 
+## Styles
+
+The components carry Tailwind classes and ship no CSS: the application's Tailwind build generates
+what they use. Import the kit's preset after `@enonic/ui`'s — it points the build at the package's
+`dist`, and the tokens the classes use are `@enonic/ui`'s:
+
+```css
+@import 'tailwindcss';
+@import '@enonic/ui/preset.css';
+@import '@enonic/ui-kit/preset.css';
+```
+
+## Labels
+
+Every text a component renders on its own — a Cancel, a Confirm, the gate's hint — is English in
+`uiKitPhrases`, keyed `enonic.uiKit.<area>.<name>`, and goes through the `Translate` the
+application hands `@enonic/ui`'s `I18nProvider`; a key the application has no text for renders the
+English. Titles, questions and target labels are props. `comparePhrases` from `@enonic/ui-utils`
+tells an application which keys its bundle lacks.
+
+## What is here
+
+| Export                                         | What it does                                                                                                                                                                                                                            |
+| ---------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `ActionDialog`                                 | `Dialog` from `@enonic/ui` plus an outcome: a `Content` that holds whether the action may be taken, a `Body` that goes inert while the footer asks, a `Footer` that takes the action or asks                                            |
+| `ActionDialog.Footer`                          | Cancel and Confirm when given `onConfirm`, or the controls it is given as children — a wizard's step indicator; `intent`, `error`, `confirmRef`; `question` asks in place of the controls                                               |
+| `ActionDialog.Action`                          | a further button of the footer, enabled by the content like Confirm; `intent`, `closeOnClick`                                                                                                                                           |
+| `useCloseGuard({ dirty, open, onOpenChange })` | the dirty-close question: the mask, the X, `Escape` and Cancel ask before a close that would lose something; `asking` feeds the footer's `question`, `keep` returns the focus                                                           |
+| `Gate`                                         | `Root`, `Hint` naming what to type back, `Input` that enables the confirm button on a match and locks                                                                                                                                   |
+| `DialogPreset.Confirm`                         | the plain question: title, question, two answers of equal weight                                                                                                                                                                        |
+| `DeleteConfirm`                                | the delete view: question, targets, the gate asking for the one name or the count, a red button — the first view, or the view after a list, with `closeOnCancel` off to go back to it                                                   |
+| `deleteExpectation(targets)`                   | the one name, or the count                                                                                                                                                                                                              |
+| `matchesExpected(typed, expected)`             | the gate's comparison, spaces around the entry forgiven                                                                                                                                                                                 |
+| `fillPhrase(phrase, values)`                   | a phrase with its `{n}` placeholders replaced by nodes                                                                                                                                                                                  |
+| `uiKitPhrases`, `useUiKitPhrases()`            | the catalogue, and the hook that resolves it through the application's `Translate`                                                                                                                                                      |
+| `useActionDialog()`                            | the content's state, for anything inside it that enables the action                                                                                                                                                                     |
+| `FilterInput`                                  | one input for a list's filter: values of predefined `fields` combined with free text, every term a `Tag`; `value`/`onChange` or `defaultValue`; `disabled`, `readOnly` (the tags alone, no input), `error`; the ref is the text input's |
+| `FilterField`, `FilterValue`                   | what the dropdown offers: a field with an id, a label, an icon, its values, `multiple` and a `notice`; a value with a `count`, a `group` and `disabled`                                                                                 |
+| `FilterQuery`, `FilterTerm`                    | what the list is narrowed by: `FieldTerm` and `TextTerm`, discriminated by `kind`, ids never labels, in the order they were added; `fieldTerm`, `textTerm`, `termKey`                                                                   |
+| `textOf(query)`, `valuesOf(query, field)`      | the two readings a list takes of a query: the free text as one string, and every value picked for a field — empty narrows nothing                                                                                                       |
+| `withTerm`, `withoutTerm`, `toggledTerm`       | the pure operations on a query the input is built from, with `sameTerm`, `isTextTerm`, `isFieldTerm` and `EMPTY_FILTER`                                                                                                                 |
+| `filterInputPhrases`                           | the input's English, for an application's `comparePhrases`                                                                                                                                                                              |
+
+## The filter
+
+`FilterInput` is the GitHub-style filter of a browse screen. Its dropdown offers the `fields` the
+caller passes — each with an id, a label, an icon and the values it can take; a value carries a
+`count` where the list knows its hits, a `group` where values are listed under a labelled heading,
+and `disabled` where it is withheld for another reason; a field with `multiple: false` holds one
+value at a time, one with a `notice` says above its values why they may be short or stale, and one
+with `loading` says its values are still on their way. The
+dropdown opens on a click, a keystroke or an arrow, not on focus. The fields come first; picking
+one, or typing its label and a colon — or pasting `Field: value` whole — opens its values ordered by
+hits, the empty ones last and disabled, with a `No matches` row when the typed text finds none.
+Enter picks the highlighted value, and the values stay open so several can be ticked; a tick picked
+again, or the tag's cross, takes the term back. Typed text with no field entered becomes a tag on
+Enter. Backspace in the empty input steps out of a field, or takes the last tag back; ArrowLeft at
+the start of the input walks onto the tags, where arrows move between them and Backspace or Delete
+removes one. The right-hand cross clears everything, and leaving the filter drops a field no value
+was picked for. Every add, remove and clearing is announced to assistive technology.
+
+The query is a list of terms, and the component decides nothing about what they mean. The reading
+the helpers encode, and the one the list should match by, is: values of one field are ORed, fields
+are ANDed, and free text is ANDed with everything, word by word, without regard to case.
+
+```tsx
+const [query, setQuery] = useState<FilterQuery>(EMPTY_FILTER);
+const providers = valuesOf(query, 'idProvider'); // a Set of ids; empty narrows nothing
+const text = textOf(query); // 'alice ward'
+
+<FilterInput fields={fields} value={query} onChange={setQuery} placeholder="Search users" />;
+```
+
 Part of the [Enonic UI Toolkit](https://github.com/enonic/npm-enonic-ui-toolkit).

package/dist/dialog/action-dialog-context.d.ts

@@ -0,0 +1,22 @@
+import { MutableRefObject, ReactElement, ReactNode } from "react";
+//#region src/dialog/action-dialog-context.d.ts
+type ActionDialogContextValue = {
+  /** Whether the action may be taken: anything inside the content may decide, a gate does. */
+  confirmEnabled: boolean;
+  setConfirmEnabled: (next: boolean) => void;
+  /** Whether the footer is asking its question, during which the body is inert. */
+  asking: boolean;
+  setAsking: (next: boolean) => void;
+  /** The way back from the question, for `Escape`. */
+  keepRef: MutableRefObject<(() => void) | undefined>;
+  /** The element inside the content that last had the focus, for the way back from the question. */
+  lastFocusRef: MutableRefObject<HTMLElement | null>;
+};
+declare const useActionDialog: () => ActionDialogContextValue;
+/** Why `onOpenChange` closes: `action` when an `Action` or the footer's Confirm took the outcome. */
+type ActionDialogOpenChangeDetails = {
+  reason: 'action';
+};
+//#endregion
+export { ActionDialogContextValue, ActionDialogOpenChangeDetails, useActionDialog };
+//# sourceMappingURL=action-dialog-context.d.ts.map

package/dist/dialog/action-dialog-context.js

@@ -0,0 +1,21 @@
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/dialog/action-dialog-context.tsx
+const ActionDialogContext = createContext(void 0);
+const ActionDialogProvider = ({ value, children }) => /* @__PURE__ */ jsx(ActionDialogContext.Provider, {
+	value,
+	children
+});
+ActionDialogProvider.displayName = "ActionDialogProvider";
+const useActionDialog = () => {
+	const context = useContext(ActionDialogContext);
+	if (context === void 0) throw new Error("useActionDialog must be used within ActionDialog.Content");
+	return context;
+};
+const ActionDialogRootContext = createContext(void 0);
+const ActionDialogRootProvider = ActionDialogRootContext.Provider;
+const useActionDialogRoot = () => useContext(ActionDialogRootContext);
+//#endregion
+export { ActionDialogProvider, ActionDialogRootProvider, useActionDialog, useActionDialogRoot };
+
+//# sourceMappingURL=action-dialog-context.js.map

package/dist/dialog/action-dialog-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-dialog-context.js","names":[],"sources":["../../src/dialog/action-dialog-context.tsx"],"sourcesContent":["import {\n  createContext,\n  type MutableRefObject,\n  type ReactElement,\n  type ReactNode,\n  useContext,\n} from 'react';\n\nexport type ActionDialogContextValue = {\n  /** Whether the action may be taken: anything inside the content may decide, a gate does. */\n  confirmEnabled: boolean;\n  setConfirmEnabled: (next: boolean) => void;\n  /** Whether the footer is asking its question, during which the body is inert. */\n  asking: boolean;\n  setAsking: (next: boolean) => void;\n  /** The way back from the question, for `Escape`. */\n  keepRef: MutableRefObject<(() => void) | undefined>;\n  /** The element inside the content that last had the focus, for the way back from the question. */\n  lastFocusRef: MutableRefObject<HTMLElement | null>;\n};\n\nconst ActionDialogContext = createContext<ActionDialogContextValue | undefined>(undefined);\n\nexport type ActionDialogProviderProps = {\n  value: ActionDialogContextValue;\n  children?: ReactNode;\n};\n\nexport const ActionDialogProvider = ({\n  value,\n  children,\n}: ActionDialogProviderProps): ReactElement => (\n  <ActionDialogContext.Provider value={value}>{children}</ActionDialogContext.Provider>\n);\nActionDialogProvider.displayName = 'ActionDialogProvider';\n\nexport const useActionDialog = (): ActionDialogContextValue => {\n  const context = useContext(ActionDialogContext);\n  if (context === undefined) {\n    throw new Error('useActionDialog must be used within ActionDialog.Content');\n  }\n  return context;\n};\n\n/** Why `onOpenChange` closes: `action` when an `Action` or the footer's Confirm took the outcome. */\nexport type ActionDialogOpenChangeDetails = { reason: 'action' };\n\nexport type ActionDialogRootContextValue = {\n  /** Set by an action that closes, read by the close it causes. */\n  actionCloseRef: MutableRefObject<boolean>;\n};\n\nconst ActionDialogRootContext = createContext<ActionDialogRootContextValue | undefined>(undefined);\n\nexport const ActionDialogRootProvider = ActionDialogRootContext.Provider;\n\nexport const useActionDialogRoot = (): ActionDialogRootContextValue | undefined =>\n  useContext(ActionDialogRootContext);\n"],"mappings":";;;AAqBA,MAAM,sBAAsB,cAAoD,KAAA,CAAS;AAOzF,MAAa,wBAAwB,EACnC,OACA,eAEA,oBAAC,oBAAoB,UAArB;CAAqC;CAAQ;AAAuC,CAAA;AAEtF,qBAAqB,cAAc;AAEnC,MAAa,wBAAkD;CAC7D,MAAM,UAAU,WAAW,mBAAmB;CAC9C,IAAI,YAAY,KAAA,GACd,MAAM,IAAI,MAAM,0DAA0D;CAE5E,OAAO;AACT;AAUA,MAAM,0BAA0B,cAAwD,KAAA,CAAS;AAEjG,MAAa,2BAA2B,wBAAwB;AAEhE,MAAa,4BACX,WAAW,uBAAuB"}

package/dist/dialog/action-dialog.d.ts

@@ -0,0 +1,135 @@
+import { ActionDialogOpenChangeDetails } from "./action-dialog-context.js";
+import { ComponentPropsWithoutRef, ReactElement, ReactNode, Ref } from "react";
+import { Button, ButtonVariant, Dialog, DialogRootProps } from "@enonic/ui";
+//#region src/dialog/action-dialog.d.ts
+type DialogIntent = 'default' | 'danger';
+/** A question needs no more room than its own text; `medium` carries a control, `wide` a form. */
+type DialogSize = 'default' | 'medium' | 'wide';
+type ActionDialogRootProps = Omit<DialogRootProps, 'onOpenChange'> & {
+  /** `details` tells a close an action took from one that would leave without it. */
+  onOpenChange?: (open: boolean, details?: ActionDialogOpenChangeDetails) => void;
+};
+declare const ActionDialogRoot: {
+  ({ onOpenChange, ...props }: ActionDialogRootProps): ReactElement;
+  displayName: string;
+};
+type ActionDialogContentProps = {
+  size?: DialogSize;
+  /** Whether the action starts enabled; a content with a gate starts it disabled. */
+  defaultConfirmEnabled?: boolean;
+} & ComponentPropsWithoutRef<typeof Dialog.Content>;
+type ActionDialogBodyProps = ComponentPropsWithoutRef<typeof Dialog.Body>;
+type ActionDialogActionProps = {
+  label: string;
+  /** `danger` paints the button red, for an action there is no undoing. */
+  intent?: DialogIntent;
+  /** Enabled while the content allows the action — a gate matched, a form valid — unless disabled outright. */
+  disabled?: boolean;
+  /** Close the dialog on click; off for a caller that moves on to a progress view instead. */
+  closeOnClick?: boolean;
+  variant?: ButtonVariant;
+} & Omit<ComponentPropsWithoutRef<typeof Button>, 'label' | 'variant' | 'disabled'>;
+/** A question the footer asks in place of its controls. */
+type FooterQuestion = {
+  text: ReactNode;
+  intent?: DialogIntent;
+  /** Defaults to the kit's "Confirm". */
+  confirmLabel?: string;
+  /** The way back; defaults to the kit's "Keep editing". */
+  keepLabel?: string;
+  onConfirm: () => void;
+  onKeep: () => void;
+};
+type ActionDialogFooterProps = {
+  /** Given `onConfirm`, the footer renders Cancel and Confirm; without it, its children are the controls. */
+  onConfirm?: () => void;
+  onCancel?: () => void;
+  /** Defaults to the kit's "Confirm". */
+  confirmLabel?: string;
+  /** Defaults to the kit's "Cancel". */
+  cancelLabel?: string;
+  /** `danger` paints the confirm button red, for an action there is no undoing. */
+  intent?: DialogIntent;
+  /** Why the dialog is still open, shown beside its controls — a rejected save is the case. */
+  error?: string;
+  /** For a caller that moves the focus onto the confirm button once it means something. */
+  confirmRef?: Ref<HTMLButtonElement>;
+  /** `outline` gives the two answers of a question equal weight; a form's Cancel stays quiet. */
+  cancelVariant?: ButtonVariant;
+  /** Close the dialog on Cancel; off for a caller that closes it itself. */
+  closeOnCancel?: boolean;
+  /** Close the dialog on Confirm; off for a caller that moves on to a progress view instead. */
+  closeOnConfirm?: boolean;
+  /**
+   * While set, the footer asks this instead of showing its controls: the body goes inert, `Escape`
+   * is `onKeep`, and the focus goes to the way back. `useCloseGuard` is the usual source.
+   */
+  question?: FooterQuestion;
+} & ComponentPropsWithoutRef<typeof Dialog.Footer>;
+/**
+ * `Dialog` from `@enonic/ui` plus an outcome: a `Content` that holds whether the action may be
+ * taken, a `Body` that goes inert while the footer asks a question, a `Footer` that takes the
+ * action or asks the question, and `Action` for a further button the content enables. Stacks
+ * nothing: a question goes to the footer, content with room of its own is another `Content` under
+ * the same `Root`.
+ */
+declare const ActionDialog: {
+  displayName: string;
+  Trigger: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<import("@enonic/ui").DialogTriggerProps> & {
+    ref?: import('preact').Ref<HTMLButtonElement> | undefined;
+  }>;
+  Portal: {
+    ({ children, container, forceMount }: import("@enonic/ui").DialogPortalProps): ReactElement | null;
+    displayName: string;
+  };
+  Overlay: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<import("@enonic/ui").DialogOverlayProps> & {
+    ref?: import('preact').Ref<HTMLDivElement> | undefined;
+  }>;
+  Header: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<import("@enonic/ui").DialogHeaderProps> & {
+    ref?: import('preact').Ref<HTMLElement> | undefined;
+  }>;
+  Close: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<import("@enonic/ui").DialogCloseProps> & {
+    ref?: import('preact').Ref<HTMLButtonElement> | undefined;
+  }>;
+  Title: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<import("@enonic/ui").DialogTitleProps> & {
+    ref?: import('preact').Ref<HTMLHeadingElement> | undefined;
+  }>;
+  Description: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<import("@enonic/ui").DialogDescriptionProps> & {
+    ref?: import('preact').Ref<HTMLParagraphElement> | undefined;
+  }>;
+  DefaultClose: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<Partial<ComponentPropsWithoutRef<import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<import("@enonic/ui").IconButtonProps> & {
+    ref?: import('preact').Ref<HTMLButtonElement> | undefined;
+  }>>>> & {
+    ref?: import('preact').Ref<HTMLButtonElement> | undefined;
+  }>;
+  DefaultHeader: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<import("@enonic/ui").DialogDefaultHeaderProps> & {
+    ref?: import('preact').Ref<HTMLElement> | undefined;
+  }>;
+  StepHeader: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<import("@enonic/ui").DialogStepHeaderProps> & {
+    ref?: import('preact').Ref<HTMLElement> | undefined;
+  }>;
+  StepContent: {
+    ({ step, locked, children }: import("@enonic/ui").DialogStepContentProps): ReactElement;
+    displayName: string;
+  };
+  StepIndicator: {
+    ({ previousLabel, nextLabel, lastStepLabel, onLastStep, dots, disabled, pending, renderDot }: import("@enonic/ui").DialogStepIndicatorProps): ReactElement;
+    displayName: string;
+  };
+  Root: typeof ActionDialogRoot;
+  Content: import("preact").FunctionalComponent<import("preact/compat").PropsWithoutRef<ActionDialogContentProps> & {
+    ref?: Ref<HTMLDivElement> | undefined;
+  }>;
+  Body: import("preact").FunctionalComponent<import("preact/compat").PropsWithoutRef<ActionDialogBodyProps> & {
+    ref?: Ref<HTMLDivElement> | undefined;
+  }>;
+  Footer: import("preact").FunctionalComponent<import("preact/compat").PropsWithoutRef<ActionDialogFooterProps> & {
+    ref?: Ref<HTMLElement> | undefined;
+  }>;
+  Action: import("preact").FunctionalComponent<import("preact/compat").PropsWithoutRef<ActionDialogActionProps> & {
+    ref?: Ref<HTMLButtonElement> | undefined;
+  }>;
+};
+//#endregion
+export { ActionDialog, ActionDialogActionProps, ActionDialogBodyProps, ActionDialogContentProps, ActionDialogFooterProps, ActionDialogRootProps, DialogIntent, DialogSize, FooterQuestion };
+//# sourceMappingURL=action-dialog.d.ts.map

package/dist/dialog/action-dialog.js

@@ -0,0 +1,213 @@
+import { ActionDialogProvider, ActionDialogRootProvider, useActionDialog, useActionDialogRoot } from "./action-dialog-context.js";
+import { useUiKitPhrases } from "../i18n/use-phrases.js";
+import { forwardRef, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, Dialog, cn, usePrefixedId } from "@enonic/ui";
+import { TriangleAlert } from "lucide-react";
+//#region src/dialog/action-dialog.tsx
+const SIZES = {
+	default: "max-w-lg",
+	medium: "max-w-180 sm:min-w-152",
+	wide: "max-w-4xl"
+};
+const DANGER_BUTTON_CLASS_NAME = "bg-btn-error text-alt hover:bg-btn-error-hover active:bg-btn-error-active focus-visible:ring-error/50";
+const ActionDialogRoot = ({ onOpenChange, ...props }) => {
+	const actionCloseRef = useRef(false);
+	const value = useMemo(() => ({ actionCloseRef }), []);
+	return /* @__PURE__ */ jsx(ActionDialogRootProvider, {
+		value,
+		children: /* @__PURE__ */ jsx(Dialog.Root, {
+			...props,
+			onOpenChange: (open) => {
+				const byAction = actionCloseRef.current;
+				actionCloseRef.current = false;
+				onOpenChange?.(open, !open && byAction ? { reason: "action" } : void 0);
+			}
+		})
+	});
+};
+ActionDialogRoot.displayName = "ActionDialog.Root";
+const CONTENT_NAME = "ActionDialog.Content";
+const QUESTION_NAME = "ActionDialog.Question";
+const ActionDialogContent = forwardRef(({ size = "default", defaultConfirmEnabled = true, className, children, onEscapeKeyDown, onFocusCapture, ...props }, ref) => {
+	const [confirmEnabled, setConfirmEnabled] = useState(defaultConfirmEnabled);
+	const [asking, setAsking] = useState(false);
+	const keepRef = useRef(void 0);
+	const lastFocusRef = useRef(null);
+	const wasAskingRef = useRef(false);
+	const context = useMemo(() => ({
+		confirmEnabled,
+		setConfirmEnabled,
+		asking,
+		setAsking,
+		keepRef,
+		lastFocusRef
+	}), [confirmEnabled, asking]);
+	useLayoutEffect(() => {
+		const target = lastFocusRef.current;
+		const answered = wasAskingRef.current && !asking;
+		wasAskingRef.current = asking;
+		if (!answered || target === null) return;
+		const frame = requestAnimationFrame(() => target.focus());
+		return () => cancelAnimationFrame(frame);
+	}, [asking]);
+	return /* @__PURE__ */ jsx(Dialog.Content, {
+		ref,
+		"data-component": CONTENT_NAME,
+		className: cn("gap-5 p-5 md:p-7.5", SIZES[size], className),
+		onFocusCapture: (event) => {
+			onFocusCapture?.(event);
+			if (event.target instanceof HTMLElement && event.target.closest(`[data-component="${QUESTION_NAME}"]`) === null) lastFocusRef.current = event.target;
+		},
+		onEscapeKeyDown: (event) => {
+			onEscapeKeyDown?.(event);
+			if (asking && !event.defaultPrevented) {
+				event.preventDefault();
+				keepRef.current?.();
+			}
+		},
+		...props,
+		children: /* @__PURE__ */ jsx(ActionDialogProvider, {
+			value: context,
+			children
+		})
+	});
+});
+ActionDialogContent.displayName = CONTENT_NAME;
+const BODY_NAME = "ActionDialog.Body";
+const ActionDialogBody = forwardRef(({ className, ...props }, ref) => {
+	const { asking } = useActionDialog();
+	return /* @__PURE__ */ jsx(Dialog.Body, {
+		ref,
+		"data-component": BODY_NAME,
+		className: cn("-mx-2 flex flex-col gap-7 px-2 py-1 transition-opacity", asking && "opacity-50", className),
+		...props,
+		inert: asking || props.inert
+	});
+});
+ActionDialogBody.displayName = BODY_NAME;
+const ACTION_NAME = "ActionDialog.Action";
+/** An action of the footer: enabled by the content, red for a destructive one. */
+const ActionDialogAction = forwardRef(({ label, intent = "default", disabled = false, closeOnClick = true, variant = "solid", className, onClick, ...props }, ref) => {
+	const { confirmEnabled } = useActionDialog();
+	const root = useActionDialogRoot();
+	const button = /* @__PURE__ */ jsx(Button, {
+		ref,
+		"data-component": ACTION_NAME,
+		variant,
+		size: "lg",
+		label,
+		disabled: disabled || !confirmEnabled,
+		className: cn(intent === "danger" && DANGER_BUTTON_CLASS_NAME, className),
+		onClick: (event) => {
+			onClick?.(event);
+			if (closeOnClick && root !== void 0 && !event.defaultPrevented) root.actionCloseRef.current = true;
+		},
+		...props
+	});
+	return closeOnClick ? /* @__PURE__ */ jsx(Dialog.Close, {
+		asChild: true,
+		children: button
+	}) : button;
+});
+ActionDialogAction.displayName = ACTION_NAME;
+const FOOTER_NAME = "ActionDialog.Footer";
+/**
+* The footer: Cancel and Confirm, or the controls it is given. While it asks a question, every
+* control hides — hidden, not unmounted, so the one the focus returns to is still there.
+*/
+const ActionDialogFooter = forwardRef(({ onConfirm, onCancel, confirmLabel, cancelLabel, intent = "default", error, confirmRef, cancelVariant = "text", closeOnCancel = true, closeOnConfirm = true, question, className, children, ...props }, ref) => {
+	const t = useUiKitPhrases();
+	const { setAsking, keepRef } = useActionDialog();
+	const asking = question !== void 0;
+	const keepButtonRef = useRef(null);
+	const questionId = usePrefixedId();
+	keepRef.current = question?.onKeep;
+	useLayoutEffect(() => {
+		setAsking(asking);
+		return () => setAsking(false);
+	}, [asking, setAsking]);
+	useEffect(() => {
+		if (asking) keepButtonRef.current?.focus();
+	}, [asking]);
+	const cancel = /* @__PURE__ */ jsx(Button, {
+		variant: cancelVariant,
+		size: "lg",
+		label: cancelLabel ?? t("enonic.uiKit.dialog.cancel"),
+		onClick: onCancel
+	});
+	return /* @__PURE__ */ jsxs(Dialog.Footer, {
+		ref,
+		"data-component": FOOTER_NAME,
+		className: cn("items-center", className),
+		...props,
+		children: [question !== void 0 && /* @__PURE__ */ jsxs("div", {
+			"data-component": QUESTION_NAME,
+			className: "flex flex-1 flex-wrap items-center justify-end gap-x-5 gap-y-2.5",
+			children: [/* @__PURE__ */ jsxs("div", {
+				id: questionId,
+				role: "alert",
+				className: "mr-auto flex items-center gap-2 text-sm",
+				children: [/* @__PURE__ */ jsx(TriangleAlert, { className: cn("size-4 shrink-0", question.intent === "danger" ? "text-error" : "text-subtle") }), question.text]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex shrink-0 gap-2.5",
+				children: [/* @__PURE__ */ jsx(Button, {
+					ref: keepButtonRef,
+					"aria-describedby": questionId,
+					variant: "outline",
+					size: "lg",
+					label: question.keepLabel ?? t("enonic.uiKit.dialog.keep"),
+					onClick: question.onKeep
+				}), /* @__PURE__ */ jsx(Button, {
+					"aria-describedby": questionId,
+					variant: "solid",
+					size: "lg",
+					label: question.confirmLabel ?? t("enonic.uiKit.dialog.confirm"),
+					className: cn(question.intent === "danger" && DANGER_BUTTON_CLASS_NAME),
+					onClick: question.onConfirm
+				})]
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: cn("flex flex-1 items-center justify-end gap-2.5", asking && "hidden"),
+			children: [
+				error !== void 0 && /* @__PURE__ */ jsx("p", {
+					className: "text-error mr-auto text-sm",
+					role: "alert",
+					children: error
+				}),
+				children,
+				onConfirm !== void 0 && (closeOnCancel ? /* @__PURE__ */ jsx(Dialog.Close, {
+					asChild: true,
+					children: cancel
+				}) : cancel),
+				onConfirm !== void 0 && /* @__PURE__ */ jsx(ActionDialogAction, {
+					ref: confirmRef,
+					label: confirmLabel ?? t("enonic.uiKit.dialog.confirm"),
+					intent,
+					closeOnClick: closeOnConfirm,
+					onClick: onConfirm
+				})
+			]
+		})]
+	});
+});
+ActionDialogFooter.displayName = FOOTER_NAME;
+/**
+* `Dialog` from `@enonic/ui` plus an outcome: a `Content` that holds whether the action may be
+* taken, a `Body` that goes inert while the footer asks a question, a `Footer` that takes the
+* action or asks the question, and `Action` for a further button the content enables. Stacks
+* nothing: a question goes to the footer, content with room of its own is another `Content` under
+* the same `Root`.
+*/
+const ActionDialog = {
+	...Dialog,
+	Root: ActionDialogRoot,
+	Content: ActionDialogContent,
+	Body: ActionDialogBody,
+	Footer: ActionDialogFooter,
+	Action: ActionDialogAction
+};
+//#endregion
+export { ActionDialog };
+
+//# sourceMappingURL=action-dialog.js.map

package/dist/dialog/action-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-dialog.js","names":[],"sources":["../../src/dialog/action-dialog.tsx"],"sourcesContent":["import {\n  Button,\n  type ButtonVariant,\n  cn,\n  Dialog,\n  type DialogRootProps,\n  usePrefixedId,\n} from '@enonic/ui';\nimport { TriangleAlert } from 'lucide-react';\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useUiKitPhrases } from '../i18n/use-phrases';\nimport {\n  type ActionDialogContextValue,\n  type ActionDialogOpenChangeDetails,\n  ActionDialogProvider,\n  ActionDialogRootProvider,\n  useActionDialog,\n  useActionDialogRoot,\n} from './action-dialog-context';\n\nexport type DialogIntent = 'default' | 'danger';\n\n/** A question needs no more room than its own text; `medium` carries a control, `wide` a form. */\nexport type DialogSize = 'default' | 'medium' | 'wide';\n\nconst SIZES: Record<DialogSize, string> = {\n  default: 'max-w-lg',\n  medium: 'max-w-180 sm:min-w-152',\n  wide: 'max-w-4xl',\n};\n\nconst DANGER_BUTTON_CLASS_NAME =\n  'bg-btn-error text-alt hover:bg-btn-error-hover active:bg-btn-error-active focus-visible:ring-error/50';\n\n//\n// * Root\n//\n\nexport type ActionDialogRootProps = Omit<DialogRootProps, 'onOpenChange'> & {\n  /** `details` tells a close an action took from one that would leave without it. */\n  onOpenChange?: (open: boolean, details?: ActionDialogOpenChangeDetails) => void;\n};\n\nconst ActionDialogRoot = ({ onOpenChange, ...props }: ActionDialogRootProps): ReactElement => {\n  const actionCloseRef = useRef(false);\n  const value = useMemo(() => ({ actionCloseRef }), []);\n\n  return (\n    <ActionDialogRootProvider value={value}>\n      <Dialog.Root\n        {...props}\n        onOpenChange={(open) => {\n          const byAction = actionCloseRef.current;\n          actionCloseRef.current = false;\n          onOpenChange?.(open, !open && byAction ? { reason: 'action' } : undefined);\n        }}\n      />\n    </ActionDialogRootProvider>\n  );\n};\nActionDialogRoot.displayName = 'ActionDialog.Root';\n\n//\n// * Content\n//\n\nexport type ActionDialogContentProps = {\n  size?: DialogSize;\n  /** Whether the action starts enabled; a content with a gate starts it disabled. */\n  defaultConfirmEnabled?: boolean;\n} & ComponentPropsWithoutRef<typeof Dialog.Content>;\n\nconst CONTENT_NAME = 'ActionDialog.Content';\nconst QUESTION_NAME = 'ActionDialog.Question';\n\nconst ActionDialogContent = forwardRef<HTMLDivElement, ActionDialogContentProps>(\n  (\n    {\n      size = 'default',\n      defaultConfirmEnabled = true,\n      className,\n      children,\n      onEscapeKeyDown,\n      onFocusCapture,\n      ...props\n    },\n    ref,\n  ): ReactElement => {\n    const [confirmEnabled, setConfirmEnabled] = useState(defaultConfirmEnabled);\n    const [asking, setAsking] = useState(false);\n    const keepRef = useRef<(() => void) | undefined>(undefined);\n    const lastFocusRef = useRef<HTMLElement | null>(null);\n    const wasAskingRef = useRef(false);\n\n    const context = useMemo<ActionDialogContextValue>(\n      () => ({ confirmEnabled, setConfirmEnabled, asking, setAsking, keepRef, lastFocusRef }),\n      [confirmEnabled, asking],\n    );\n\n    // Answered, the focus goes back to the control the question left. The last focus, not the active\n    // element: a mask click has already blurred the field to the body.\n    useLayoutEffect(() => {\n      const target = lastFocusRef.current;\n      const answered = wasAskingRef.current && !asking;\n      wasAskingRef.current = asking;\n      if (!answered || target === null) {\n        return;\n      }\n      // ! A frame later: under Preact the body reads `asking` through context and lifts its `inert`\n      // ! in a render after this one, and an inert field takes no focus.\n      const frame = requestAnimationFrame(() => target.focus());\n      return () => cancelAnimationFrame(frame);\n    }, [asking]);\n\n    return (\n      <Dialog.Content\n        ref={ref}\n        data-component={CONTENT_NAME}\n        className={cn('gap-5 p-5 md:p-7.5', SIZES[size], className)}\n        onFocusCapture={(event) => {\n          onFocusCapture?.(event);\n          if (\n            event.target instanceof HTMLElement &&\n            event.target.closest(`[data-component=\"${QUESTION_NAME}\"]`) === null\n          ) {\n            lastFocusRef.current = event.target;\n          }\n        }}\n        onEscapeKeyDown={(event) => {\n          onEscapeKeyDown?.(event);\n          // While the footer asks its question, `Escape` is the way back, not the way out.\n          if (asking && !event.defaultPrevented) {\n            event.preventDefault();\n            keepRef.current?.();\n          }\n        }}\n        {...props}\n      >\n        <ActionDialogProvider value={context}>{children}</ActionDialogProvider>\n      </Dialog.Content>\n    );\n  },\n);\nActionDialogContent.displayName = CONTENT_NAME;\n\n//\n// * Body\n//\n\nexport type ActionDialogBodyProps = ComponentPropsWithoutRef<typeof Dialog.Body>;\n\nconst BODY_NAME = 'ActionDialog.Body';\n\nconst ActionDialogBody = forwardRef<HTMLDivElement, ActionDialogBodyProps>(\n  ({ className, ...props }, ref): ReactElement => {\n    const { asking } = useActionDialog();\n\n    return (\n      <Dialog.Body\n        ref={ref}\n        data-component={BODY_NAME}\n        className={cn(\n          '-mx-2 flex flex-col gap-7 px-2 py-1 transition-opacity',\n          asking && 'opacity-50',\n          className,\n        )}\n        {...props}\n        // ! `inert`, not a disabled overlay: the form stays in sight but takes no click, no focus.\n        inert={asking || props.inert}\n      />\n    );\n  },\n);\nActionDialogBody.displayName = BODY_NAME;\n\n//\n// * Action — a button that takes the dialog's outcome\n//\n\nexport type ActionDialogActionProps = {\n  label: string;\n  /** `danger` paints the button red, for an action there is no undoing. */\n  intent?: DialogIntent;\n  /** Enabled while the content allows the action — a gate matched, a form valid — unless disabled outright. */\n  disabled?: boolean;\n  /** Close the dialog on click; off for a caller that moves on to a progress view instead. */\n  closeOnClick?: boolean;\n  variant?: ButtonVariant;\n} & Omit<ComponentPropsWithoutRef<typeof Button>, 'label' | 'variant' | 'disabled'>;\n\nconst ACTION_NAME = 'ActionDialog.Action';\n\n/** An action of the footer: enabled by the content, red for a destructive one. */\nconst ActionDialogAction = forwardRef<HTMLButtonElement, ActionDialogActionProps>(\n  (\n    {\n      label,\n      intent = 'default',\n      disabled = false,\n      closeOnClick = true,\n      variant = 'solid',\n      className,\n      onClick,\n      ...props\n    },\n    ref,\n  ): ReactElement => {\n    const { confirmEnabled } = useActionDialog();\n    const root = useActionDialogRoot();\n    const button = (\n      <Button\n        ref={ref}\n        data-component={ACTION_NAME}\n        variant={variant}\n        size=\"lg\"\n        label={label}\n        disabled={disabled || !confirmEnabled}\n        className={cn(intent === 'danger' && DANGER_BUTTON_CLASS_NAME, className)}\n        onClick={(event) => {\n          onClick?.(event);\n          // ! Runs before `Dialog.Close` closes: the close guard reads this to let the action through.\n          if (closeOnClick && root !== undefined && !event.defaultPrevented) {\n            root.actionCloseRef.current = true;\n          }\n        }}\n        {...props}\n      />\n    );\n\n    return closeOnClick ? <Dialog.Close asChild>{button}</Dialog.Close> : button;\n  },\n);\nActionDialogAction.displayName = ACTION_NAME;\n\n//\n// * Footer\n//\n\n/** A question the footer asks in place of its controls. */\nexport type FooterQuestion = {\n  text: ReactNode;\n  intent?: DialogIntent;\n  /** Defaults to the kit's \"Confirm\". */\n  confirmLabel?: string;\n  /** The way back; defaults to the kit's \"Keep editing\". */\n  keepLabel?: string;\n  onConfirm: () => void;\n  onKeep: () => void;\n};\n\nexport type ActionDialogFooterProps = {\n  /** Given `onConfirm`, the footer renders Cancel and Confirm; without it, its children are the controls. */\n  onConfirm?: () => void;\n  onCancel?: () => void;\n  /** Defaults to the kit's \"Confirm\". */\n  confirmLabel?: string;\n  /** Defaults to the kit's \"Cancel\". */\n  cancelLabel?: string;\n  /** `danger` paints the confirm button red, for an action there is no undoing. */\n  intent?: DialogIntent;\n  /** Why the dialog is still open, shown beside its controls — a rejected save is the case. */\n  error?: string;\n  /** For a caller that moves the focus onto the confirm button once it means something. */\n  confirmRef?: Ref<HTMLButtonElement>;\n  /** `outline` gives the two answers of a question equal weight; a form's Cancel stays quiet. */\n  cancelVariant?: ButtonVariant;\n  /** Close the dialog on Cancel; off for a caller that closes it itself. */\n  closeOnCancel?: boolean;\n  /** Close the dialog on Confirm; off for a caller that moves on to a progress view instead. */\n  closeOnConfirm?: boolean;\n  /**\n   * While set, the footer asks this instead of showing its controls: the body goes inert, `Escape`\n   * is `onKeep`, and the focus goes to the way back. `useCloseGuard` is the usual source.\n   */\n  question?: FooterQuestion;\n} & ComponentPropsWithoutRef<typeof Dialog.Footer>;\n\nconst FOOTER_NAME = 'ActionDialog.Footer';\n\n/**\n * The footer: Cancel and Confirm, or the controls it is given. While it asks a question, every\n * control hides — hidden, not unmounted, so the one the focus returns to is still there.\n */\nconst ActionDialogFooter = forwardRef<HTMLElement, ActionDialogFooterProps>(\n  (\n    {\n      onConfirm,\n      onCancel,\n      confirmLabel,\n      cancelLabel,\n      intent = 'default',\n      error,\n      confirmRef,\n      cancelVariant = 'text',\n      closeOnCancel = true,\n      closeOnConfirm = true,\n      question,\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ): ReactElement => {\n    const t = useUiKitPhrases();\n    const { setAsking, keepRef } = useActionDialog();\n    const asking = question !== undefined;\n    const keepButtonRef = useRef<HTMLButtonElement>(null);\n    const questionId = usePrefixedId();\n\n    keepRef.current = question?.onKeep;\n\n    useLayoutEffect(() => {\n      setAsking(asking);\n      return () => setAsking(false);\n    }, [asking, setAsking]);\n\n    useEffect(() => {\n      if (asking) {\n        keepButtonRef.current?.focus();\n      }\n    }, [asking]);\n\n    const cancel = (\n      <Button\n        variant={cancelVariant}\n        size=\"lg\"\n        label={cancelLabel ?? t('enonic.uiKit.dialog.cancel')}\n        onClick={onCancel}\n      />\n    );\n\n    return (\n      <Dialog.Footer\n        ref={ref}\n        data-component={FOOTER_NAME}\n        className={cn('items-center', className)}\n        {...props}\n      >\n        {question !== undefined && (\n          <div\n            data-component={QUESTION_NAME}\n            className=\"flex flex-1 flex-wrap items-center justify-end gap-x-5 gap-y-2.5\"\n          >\n            {/* Announced as it appears, and read with either answer the focus lands on. */}\n            <div id={questionId} role=\"alert\" className=\"mr-auto flex items-center gap-2 text-sm\">\n              <TriangleAlert\n                className={cn(\n                  'size-4 shrink-0',\n                  question.intent === 'danger' ? 'text-error' : 'text-subtle',\n                )}\n              />\n              {question.text}\n            </div>\n            <div className=\"flex shrink-0 gap-2.5\">\n              <Button\n                ref={keepButtonRef}\n                aria-describedby={questionId}\n                variant=\"outline\"\n                size=\"lg\"\n                label={question.keepLabel ?? t('enonic.uiKit.dialog.keep')}\n                onClick={question.onKeep}\n              />\n              <Button\n                aria-describedby={questionId}\n                variant=\"solid\"\n                size=\"lg\"\n                label={question.confirmLabel ?? t('enonic.uiKit.dialog.confirm')}\n                className={cn(question.intent === 'danger' && DANGER_BUTTON_CLASS_NAME)}\n                onClick={question.onConfirm}\n              />\n            </div>\n          </div>\n        )}\n        <div className={cn('flex flex-1 items-center justify-end gap-2.5', asking && 'hidden')}>\n          {error !== undefined && (\n            <p className=\"text-error mr-auto text-sm\" role=\"alert\">\n              {error}\n            </p>\n          )}\n          {children}\n          {onConfirm !== undefined &&\n            (closeOnCancel ? <Dialog.Close asChild>{cancel}</Dialog.Close> : cancel)}\n          {onConfirm !== undefined && (\n            <ActionDialogAction\n              ref={confirmRef}\n              label={confirmLabel ?? t('enonic.uiKit.dialog.confirm')}\n              intent={intent}\n              closeOnClick={closeOnConfirm}\n              onClick={onConfirm}\n            />\n          )}\n        </div>\n      </Dialog.Footer>\n    );\n  },\n);\nActionDialogFooter.displayName = FOOTER_NAME;\n\n//\n// * Compound\n//\n\n/**\n * `Dialog` from `@enonic/ui` plus an outcome: a `Content` that holds whether the action may be\n * taken, a `Body` that goes inert while the footer asks a question, a `Footer` that takes the\n * action or asks the question, and `Action` for a further button the content enables. Stacks\n * nothing: a question goes to the footer, content with room of its own is another `Content` under\n * the same `Root`.\n */\nexport const ActionDialog = {\n  ...Dialog,\n  Root: ActionDialogRoot,\n  Content: ActionDialogContent,\n  Body: ActionDialogBody,\n  Footer: ActionDialogFooter,\n  Action: ActionDialogAction,\n};\n"],"mappings":";;;;;;;AAqCA,MAAM,QAAoC;CACxC,SAAS;CACT,QAAQ;CACR,MAAM;AACR;AAEA,MAAM,2BACJ;AAWF,MAAM,oBAAoB,EAAE,cAAc,GAAG,YAAiD;CAC5F,MAAM,iBAAiB,OAAO,KAAK;CACnC,MAAM,QAAQ,eAAe,EAAE,eAAe,IAAI,CAAC,CAAC;CAEpD,OACE,oBAAC,0BAAD;EAAiC;EAC/B,UAAA,oBAAC,OAAO,MAAR;GACE,GAAI;GACJ,eAAe,SAAS;IACtB,MAAM,WAAW,eAAe;IAChC,eAAe,UAAU;IACzB,eAAe,MAAM,CAAC,QAAQ,WAAW,EAAE,QAAQ,SAAS,IAAI,KAAA,CAAS;GAC3E;EACD,CAAA;CACuB,CAAA;AAE9B;AACA,iBAAiB,cAAc;AAY/B,MAAM,eAAe;AACrB,MAAM,gBAAgB;AAEtB,MAAM,sBAAsB,YAExB,EACE,OAAO,WACP,wBAAwB,MACxB,WACA,UACA,iBACA,gBACA,GAAG,SAEL,QACiB;CACjB,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,qBAAqB;CAC1E,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAC1C,MAAM,UAAU,OAAiC,KAAA,CAAS;CAC1D,MAAM,eAAe,OAA2B,IAAI;CACpD,MAAM,eAAe,OAAO,KAAK;CAEjC,MAAM,UAAU,eACP;EAAE;EAAgB;EAAmB;EAAQ;EAAW;EAAS;CAAa,IACrF,CAAC,gBAAgB,MAAM,CACzB;CAIA,sBAAsB;EACpB,MAAM,SAAS,aAAa;EAC5B,MAAM,WAAW,aAAa,WAAW,CAAC;EAC1C,aAAa,UAAU;EACvB,IAAI,CAAC,YAAY,WAAW,MAC1B;EAIF,MAAM,QAAQ,4BAA4B,OAAO,MAAM,CAAC;EACxD,aAAa,qBAAqB,KAAK;CACzC,GAAG,CAAC,MAAM,CAAC;CAEX,OACE,oBAAC,OAAO,SAAR;EACO;EACL,kBAAgB;EAChB,WAAW,GAAG,sBAAsB,MAAM,OAAO,SAAS;EAC1D,iBAAiB,UAAU;GACzB,iBAAiB,KAAK;GACtB,IACE,MAAM,kBAAkB,eACxB,MAAM,OAAO,QAAQ,oBAAoB,cAAc,GAAG,MAAM,MAEhE,aAAa,UAAU,MAAM;EAEjC;EACA,kBAAkB,UAAU;GAC1B,kBAAkB,KAAK;GAEvB,IAAI,UAAU,CAAC,MAAM,kBAAkB;IACrC,MAAM,eAAe;IACrB,QAAQ,UAAU;GACpB;EACF;EACA,GAAI;EAEJ,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAAU;EAA+B,CAAA;CACxD,CAAA;AAEpB,CACF;AACA,oBAAoB,cAAc;AAQlC,MAAM,YAAY;AAElB,MAAM,mBAAmB,YACtB,EAAE,WAAW,GAAG,SAAS,QAAsB;CAC9C,MAAM,EAAE,WAAW,gBAAgB;CAEnC,OACE,oBAAC,OAAO,MAAR;EACO;EACL,kBAAgB;EAChB,WAAW,GACT,0DACA,UAAU,cACV,SACF;EACA,GAAI;EAEJ,OAAO,UAAU,MAAM;CACxB,CAAA;AAEL,CACF;AACA,iBAAiB,cAAc;AAiB/B,MAAM,cAAc;;AAGpB,MAAM,qBAAqB,YAEvB,EACE,OACA,SAAS,WACT,WAAW,OACX,eAAe,MACf,UAAU,SACV,WACA,SACA,GAAG,SAEL,QACiB;CACjB,MAAM,EAAE,mBAAmB,gBAAgB;CAC3C,MAAM,OAAO,oBAAoB;CACjC,MAAM,SACJ,oBAAC,QAAD;EACO;EACL,kBAAgB;EACP;EACT,MAAK;EACE;EACP,UAAU,YAAY,CAAC;EACvB,WAAW,GAAG,WAAW,YAAY,0BAA0B,SAAS;EACxE,UAAU,UAAU;GAClB,UAAU,KAAK;GAEf,IAAI,gBAAgB,SAAS,KAAA,KAAa,CAAC,MAAM,kBAC/C,KAAK,eAAe,UAAU;EAElC;EACA,GAAI;CACL,CAAA;CAGH,OAAO,eAAe,oBAAC,OAAO,OAAR;EAAc,SAAA;EAAS,UAAA;CAAqB,CAAA,IAAI;AACxE,CACF;AACA,mBAAmB,cAAc;AA6CjC,MAAM,cAAc;;;;;AAMpB,MAAM,qBAAqB,YAEvB,EACE,WACA,UACA,cACA,aACA,SAAS,WACT,OACA,YACA,gBAAgB,QAChB,gBAAgB,MAChB,iBAAiB,MACjB,UACA,WACA,UACA,GAAG,SAEL,QACiB;CACjB,MAAM,IAAI,gBAAgB;CAC1B,MAAM,EAAE,WAAW,YAAY,gBAAgB;CAC/C,MAAM,SAAS,aAAa,KAAA;CAC5B,MAAM,gBAAgB,OAA0B,IAAI;CACpD,MAAM,aAAa,cAAc;CAEjC,QAAQ,UAAU,UAAU;CAE5B,sBAAsB;EACpB,UAAU,MAAM;EAChB,aAAa,UAAU,KAAK;CAC9B,GAAG,CAAC,QAAQ,SAAS,CAAC;CAEtB,gBAAgB;EACd,IAAI,QACF,cAAc,SAAS,MAAM;CAEjC,GAAG,CAAC,MAAM,CAAC;CAEX,MAAM,SACJ,oBAAC,QAAD;EACE,SAAS;EACT,MAAK;EACL,OAAO,eAAe,EAAE,4BAA4B;EACpD,SAAS;CACV,CAAA;CAGH,OACE,qBAAC,OAAO,QAAR;EACO;EACL,kBAAgB;EAChB,WAAW,GAAG,gBAAgB,SAAS;EACvC,GAAI;EAJN,UAAA,CAMG,aAAa,KAAA,KACZ,qBAAC,OAAD;GACE,kBAAgB;GAChB,WAAU;GAFZ,UAAA,CAKE,qBAAC,OAAD;IAAK,IAAI;IAAY,MAAK;IAAQ,WAAU;IAA5C,UAAA,CACE,oBAAC,eAAD,EACE,WAAW,GACT,mBACA,SAAS,WAAW,WAAW,eAAe,aAChD,EACD,CAAA,GACA,SAAS,IACP;GACL,CAAA,GAAA,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,oBAAC,QAAD;KACE,KAAK;KACL,oBAAkB;KAClB,SAAQ;KACR,MAAK;KACL,OAAO,SAAS,aAAa,EAAE,0BAA0B;KACzD,SAAS,SAAS;IACnB,CAAA,GACD,oBAAC,QAAD;KACE,oBAAkB;KAClB,SAAQ;KACR,MAAK;KACL,OAAO,SAAS,gBAAgB,EAAE,6BAA6B;KAC/D,WAAW,GAAG,SAAS,WAAW,YAAY,wBAAwB;KACtE,SAAS,SAAS;IACnB,CAAA,CACE;GACF,CAAA,CAAA;EAEP,CAAA,GAAA,qBAAC,OAAD;GAAK,WAAW,GAAG,gDAAgD,UAAU,QAAQ;GAArF,UAAA;IACG,UAAU,KAAA,KACT,oBAAC,KAAD;KAAG,WAAU;KAA6B,MAAK;KAC5C,UAAA;IACA,CAAA;IAEJ;IACA,cAAc,KAAA,MACZ,gBAAgB,oBAAC,OAAO,OAAR;KAAc,SAAA;KAAS,UAAA;IAAqB,CAAA,IAAI;IAClE,cAAc,KAAA,KACb,oBAAC,oBAAD;KACE,KAAK;KACL,OAAO,gBAAgB,EAAE,6BAA6B;KAC9C;KACR,cAAc;KACd,SAAS;IACV,CAAA;GAEA;EACQ,CAAA,CAAA;;AAEnB,CACF;AACA,mBAAmB,cAAc;;;;;;;;AAajC,MAAa,eAAe;CAC1B,GAAG;CACH,MAAM;CACN,SAAS;CACT,MAAM;CACN,QAAQ;CACR,QAAQ;AACV"}

package/dist/dialog/delete-confirm.d.ts

@@ -0,0 +1,33 @@
+import { DialogSize } from "./action-dialog.js";
+import { DeleteTarget } from "./delete-expectation.js";
+import { ReactElement, ReactNode } from "react";
+//#region src/dialog/delete-confirm.d.ts
+type DeleteConfirmProps = {
+  title: string;
+  /** The question, already worded for one target or many; the targets are listed under it. */
+  question: ReactNode;
+  targets: readonly DeleteTarget[];
+  /**
+   * What is typed back before the button enables: `deleteExpectation(targets)` by default, the
+   * one name or the count. `null` asks for nothing, and the button is enabled from the start.
+   */
+  expected?: string | number | null;
+  /** Defaults to the kit's "Delete". */
+  confirmLabel?: string;
+  size?: DialogSize;
+  onConfirm: () => void;
+  onCancel?: () => void;
+  /** Off for a caller that moves on to a progress view instead of closing. */
+  closeOnConfirm?: boolean;
+  /** Off for a caller whose Cancel goes back to the view before — a list the delete was picked from. */
+  closeOnCancel?: boolean;
+  'data-component'?: string;
+};
+declare const DELETE_CONFIRM_NAME = "DeleteConfirm";
+declare function DeleteConfirm({ title, question, targets, expected, confirmLabel, size, onConfirm, onCancel, closeOnConfirm, closeOnCancel, 'data-component': componentName }: DeleteConfirmProps): ReactElement;
+declare namespace DeleteConfirm {
+  export { DELETE_CONFIRM_NAME as displayName };
+}
+//#endregion
+export { DeleteConfirm, DeleteConfirmProps };
+//# sourceMappingURL=delete-confirm.d.ts.map