@enonic/ui-kit 0.4.0 → 0.5.1

package/dist/dialog/delete-confirm.js

@@ -0,0 +1,80 @@
+import { useActionDialog } from "./action-dialog-context.js";
+import { useUiKitPhrases } from "../i18n/use-phrases.js";
+import { ActionDialog } from "./action-dialog.js";
+import { deleteExpectation } from "./delete-expectation.js";
+import { Gate } from "./gate.js";
+import { useEffect, useRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/dialog/delete-confirm.tsx
+const DELETE_CONFIRM_NAME = "DeleteConfirm";
+/**
+* The delete view: the question, the targets, the gate, and a red button that enables once the
+* name or the count is typed back. A `Content` — the first view of a dialog opened from a
+* screen, or the view after a list.
+*/
+const DeleteConfirm = ({ title, question, targets, expected = deleteExpectation(targets), confirmLabel, size = "medium", onConfirm, onCancel, closeOnConfirm = true, closeOnCancel = true, "data-component": componentName = DELETE_CONFIRM_NAME }) => {
+	const gateInputRef = useRef(null);
+	return /* @__PURE__ */ jsx(ActionDialog.Content, {
+		"data-component": componentName,
+		size,
+		defaultConfirmEnabled: expected === null,
+		onOpenAutoFocus: (event) => {
+			if (expected !== null) {
+				event.preventDefault();
+				gateInputRef.current?.focus();
+			}
+		},
+		children: /* @__PURE__ */ jsx(DeleteConfirmParts, {
+			title,
+			question,
+			targets,
+			expected,
+			confirmLabel,
+			gateInputRef,
+			onConfirm,
+			onCancel,
+			closeOnConfirm,
+			closeOnCancel
+		})
+	});
+};
+DeleteConfirm.displayName = DELETE_CONFIRM_NAME;
+const DeleteConfirmParts = ({ title, question, targets, expected, confirmLabel, gateInputRef, onConfirm, onCancel, closeOnConfirm, closeOnCancel }) => {
+	const t = useUiKitPhrases();
+	const { confirmEnabled, setConfirmEnabled } = useActionDialog();
+	const confirmRef = useRef(null);
+	useEffect(() => {
+		if (expected === null) setConfirmEnabled(true);
+	}, [expected, setConfirmEnabled]);
+	useEffect(() => {
+		if (expected !== null && confirmEnabled) confirmRef.current?.focus();
+	}, [expected, confirmEnabled]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(ActionDialog.DefaultHeader, { title }),
+		/* @__PURE__ */ jsxs(ActionDialog.Body, { children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-2.5",
+			children: [/* @__PURE__ */ jsx("div", { children: question }), targets.length > 0 && /* @__PURE__ */ jsx("ul", {
+				className: "flex flex-col gap-2.5 py-1.5",
+				children: targets.map(({ key, label }) => /* @__PURE__ */ jsx("li", { children: label }, key))
+			})]
+		}), expected !== null && /* @__PURE__ */ jsxs(Gate, { children: [/* @__PURE__ */ jsx(Gate.Hint, { value: expected }), /* @__PURE__ */ jsx(Gate.Input, {
+			ref: gateInputRef,
+			expected
+		})] })] }),
+		/* @__PURE__ */ jsx(ActionDialog.Footer, {
+			intent: "danger",
+			cancelVariant: "outline",
+			confirmLabel: confirmLabel ?? t("enonic.uiKit.dialog.delete"),
+			confirmRef,
+			onConfirm,
+			onCancel,
+			closeOnConfirm,
+			closeOnCancel
+		})
+	] });
+};
+DeleteConfirmParts.displayName = "DeleteConfirm.Parts";
+//#endregion
+export { DeleteConfirm };
+
+//# sourceMappingURL=delete-confirm.js.map

package/dist/dialog/delete-confirm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"delete-confirm.js","names":[],"sources":["../../src/dialog/delete-confirm.tsx"],"sourcesContent":["import { type ReactElement, type ReactNode, type RefObject, useEffect, useRef } from 'react';\n\nimport { useUiKitPhrases } from '../i18n/use-phrases';\nimport { ActionDialog, type DialogSize } from './action-dialog';\nimport { useActionDialog } from './action-dialog-context';\nimport { deleteExpectation, type DeleteTarget } from './delete-expectation';\nimport { Gate } from './gate';\n\nexport type DeleteConfirmProps = {\n  title: string;\n  /** The question, already worded for one target or many; the targets are listed under it. */\n  question: ReactNode;\n  targets: readonly DeleteTarget[];\n  /**\n   * What is typed back before the button enables: `deleteExpectation(targets)` by default, the\n   * one name or the count. `null` asks for nothing, and the button is enabled from the start.\n   */\n  expected?: string | number | null;\n  /** Defaults to the kit's \"Delete\". */\n  confirmLabel?: string;\n  size?: DialogSize;\n  onConfirm: () => void;\n  onCancel?: () => void;\n  /** Off for a caller that moves on to a progress view instead of closing. */\n  closeOnConfirm?: boolean;\n  /** Off for a caller whose Cancel goes back to the view before — a list the delete was picked from. */\n  closeOnCancel?: boolean;\n  'data-component'?: string;\n};\n\nconst DELETE_CONFIRM_NAME = 'DeleteConfirm';\n\n/**\n * The delete view: the question, the targets, the gate, and a red button that enables once the\n * name or the count is typed back. A `Content` — the first view of a dialog opened from a\n * screen, or the view after a list.\n */\nconst DeleteConfirm = ({\n  title,\n  question,\n  targets,\n  expected = deleteExpectation(targets),\n  confirmLabel,\n  size = 'medium',\n  onConfirm,\n  onCancel,\n  closeOnConfirm = true,\n  closeOnCancel = true,\n  'data-component': componentName = DELETE_CONFIRM_NAME,\n}: DeleteConfirmProps): ReactElement => {\n  const gateInputRef = useRef<HTMLInputElement>(null);\n\n  return (\n    <ActionDialog.Content\n      data-component={componentName}\n      size={size}\n      defaultConfirmEnabled={expected === null}\n      onOpenAutoFocus={(event) => {\n        if (expected !== null) {\n          event.preventDefault();\n          gateInputRef.current?.focus();\n        }\n      }}\n    >\n      <DeleteConfirmParts\n        title={title}\n        question={question}\n        targets={targets}\n        expected={expected}\n        confirmLabel={confirmLabel}\n        gateInputRef={gateInputRef}\n        onConfirm={onConfirm}\n        onCancel={onCancel}\n        closeOnConfirm={closeOnConfirm}\n        closeOnCancel={closeOnCancel}\n      />\n    </ActionDialog.Content>\n  );\n};\nDeleteConfirm.displayName = DELETE_CONFIRM_NAME;\n\ntype DeleteConfirmPartsProps = Required<\n  Pick<DeleteConfirmProps, 'expected' | 'closeOnConfirm' | 'closeOnCancel'>\n> &\n  Pick<\n    DeleteConfirmProps,\n    'title' | 'question' | 'targets' | 'confirmLabel' | 'onConfirm' | 'onCancel'\n  > & {\n    gateInputRef: RefObject<HTMLInputElement>;\n  };\n\n// Inside `Content`, where the confirm state is: a match moves the focus onto the button, so Enter confirms.\nconst DeleteConfirmParts = ({\n  title,\n  question,\n  targets,\n  expected,\n  confirmLabel,\n  gateInputRef,\n  onConfirm,\n  onCancel,\n  closeOnConfirm,\n  closeOnCancel,\n}: DeleteConfirmPartsProps): ReactElement => {\n  const t = useUiKitPhrases();\n  const { confirmEnabled, setConfirmEnabled } = useActionDialog();\n  const confirmRef = useRef<HTMLButtonElement>(null);\n\n  // With no gate asked for, nothing else enables the button — including after a gate went away.\n  useEffect(() => {\n    if (expected === null) {\n      setConfirmEnabled(true);\n    }\n  }, [expected, setConfirmEnabled]);\n\n  useEffect(() => {\n    if (expected !== null && confirmEnabled) {\n      confirmRef.current?.focus();\n    }\n  }, [expected, confirmEnabled]);\n\n  return (\n    <>\n      <ActionDialog.DefaultHeader title={title} />\n      <ActionDialog.Body>\n        <div className=\"flex flex-col gap-2.5\">\n          <div>{question}</div>\n          {targets.length > 0 && (\n            <ul className=\"flex flex-col gap-2.5 py-1.5\">\n              {targets.map(({ key, label }) => (\n                <li key={key}>{label}</li>\n              ))}\n            </ul>\n          )}\n        </div>\n        {expected !== null && (\n          <Gate>\n            <Gate.Hint value={expected} />\n            <Gate.Input ref={gateInputRef} expected={expected} />\n          </Gate>\n        )}\n      </ActionDialog.Body>\n      <ActionDialog.Footer\n        intent=\"danger\"\n        cancelVariant=\"outline\"\n        confirmLabel={confirmLabel ?? t('enonic.uiKit.dialog.delete')}\n        confirmRef={confirmRef}\n        onConfirm={onConfirm}\n        onCancel={onCancel}\n        closeOnConfirm={closeOnConfirm}\n        closeOnCancel={closeOnCancel}\n      />\n    </>\n  );\n};\nDeleteConfirmParts.displayName = 'DeleteConfirm.Parts';\n\nexport { DeleteConfirm };\n"],"mappings":";;;;;;;;AA8BA,MAAM,sBAAsB;;;;;;AAO5B,MAAM,iBAAiB,EACrB,OACA,UACA,SACA,WAAW,kBAAkB,OAAO,GACpC,cACA,OAAO,UACP,WACA,UACA,iBAAiB,MACjB,gBAAgB,MAChB,kBAAkB,gBAAgB,0BACI;CACtC,MAAM,eAAe,OAAyB,IAAI;CAElD,OACE,oBAAC,aAAa,SAAd;EACE,kBAAgB;EACV;EACN,uBAAuB,aAAa;EACpC,kBAAkB,UAAU;GAC1B,IAAI,aAAa,MAAM;IACrB,MAAM,eAAe;IACrB,aAAa,SAAS,MAAM;GAC9B;EACF;EAEA,UAAA,oBAAC,oBAAD;GACS;GACG;GACD;GACC;GACI;GACA;GACH;GACD;GACM;GACD;EAChB,CAAA;CACmB,CAAA;AAE1B;AACA,cAAc,cAAc;AAa5B,MAAM,sBAAsB,EAC1B,OACA,UACA,SACA,UACA,cACA,cACA,WACA,UACA,gBACA,oBAC2C;CAC3C,MAAM,IAAI,gBAAgB;CAC1B,MAAM,EAAE,gBAAgB,sBAAsB,gBAAgB;CAC9D,MAAM,aAAa,OAA0B,IAAI;CAGjD,gBAAgB;EACd,IAAI,aAAa,MACf,kBAAkB,IAAI;CAE1B,GAAG,CAAC,UAAU,iBAAiB,CAAC;CAEhC,gBAAgB;EACd,IAAI,aAAa,QAAQ,gBACvB,WAAW,SAAS,MAAM;CAE9B,GAAG,CAAC,UAAU,cAAc,CAAC;CAE7B,OACE,qBAAA,UAAA,EAAA,UAAA;EACE,oBAAC,aAAa,eAAd,EAAmC,MAAQ,CAAA;EAC3C,qBAAC,aAAa,MAAd,EAAA,UAAA,CACE,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,oBAAC,OAAD,EAAA,UAAM,SAAc,CAAA,GACnB,QAAQ,SAAS,KAChB,oBAAC,MAAD;IAAI,WAAU;IACX,UAAA,QAAQ,KAAK,EAAE,KAAK,YACnB,oBAAC,MAAD,EAAA,UAAe,MAAU,GAAhB,GAAgB,CAC1B;GACC,CAAA,CAEH;EACJ,CAAA,GAAA,aAAa,QACZ,qBAAC,MAAD,EAAA,UAAA,CACE,oBAAC,KAAK,MAAN,EAAW,OAAO,SAAW,CAAA,GAC7B,oBAAC,KAAK,OAAN;GAAY,KAAK;GAAwB;EAAW,CAAA,CAChD,EAAA,CAAA,CAES,EAAA,CAAA;EACnB,oBAAC,aAAa,QAAd;GACE,QAAO;GACP,eAAc;GACd,cAAc,gBAAgB,EAAE,4BAA4B;GAChD;GACD;GACD;GACM;GACD;EAChB,CAAA;CACD,EAAA,CAAA;AAEN;AACA,mBAAmB,cAAc"}

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

@@ -0,0 +1,17 @@
+import { ReactNode } from "react";
+//#region src/dialog/delete-expectation.d.ts
+type DeleteTarget = {
+  key: string;
+  /** What has to be typed back to delete this one. */
+  name: string;
+  /** How the item reads elsewhere in the application; the caller renders it, so the dialog knows no domain. */
+  label: ReactNode;
+};
+/**
+ * What to type back: the one item's name, or the count of a batch nobody would retype name by name
+ * — and of an item with no name to type.
+ */
+declare function deleteExpectation(targets: readonly DeleteTarget[]): string | number;
+//#endregion
+export { DeleteTarget, deleteExpectation };
+//# sourceMappingURL=delete-expectation.d.ts.map

package/dist/dialog/delete-expectation.js

@@ -0,0 +1,13 @@
+//#region src/dialog/delete-expectation.ts
+/**
+* What to type back: the one item's name, or the count of a batch nobody would retype name by name
+* — and of an item with no name to type.
+*/
+function deleteExpectation(targets) {
+	const [only] = targets;
+	return targets.length === 1 && only !== void 0 && only.name.trim() !== "" ? only.name : targets.length;
+}
+//#endregion
+export { deleteExpectation };
+
+//# sourceMappingURL=delete-expectation.js.map

package/dist/dialog/delete-expectation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"delete-expectation.js","names":[],"sources":["../../src/dialog/delete-expectation.ts"],"sourcesContent":["import type { ReactNode } from 'react';\n\nexport type DeleteTarget = {\n  key: string;\n  /** What has to be typed back to delete this one. */\n  name: string;\n  /** How the item reads elsewhere in the application; the caller renders it, so the dialog knows no domain. */\n  label: ReactNode;\n};\n\n/**\n * What to type back: the one item's name, or the count of a batch nobody would retype name by name\n * — and of an item with no name to type.\n */\nexport function deleteExpectation(targets: readonly DeleteTarget[]): string | number {\n  const [only] = targets;\n\n  return targets.length === 1 && only !== undefined && only.name.trim() !== ''\n    ? only.name\n    : targets.length;\n}\n"],"mappings":";;;;;AAcA,SAAgB,kBAAkB,SAAmD;CACnF,MAAM,CAAC,QAAQ;CAEf,OAAO,QAAQ,WAAW,KAAK,SAAS,KAAA,KAAa,KAAK,KAAK,KAAK,MAAM,KACtE,KAAK,OACL,QAAQ;AACd"}

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

@@ -0,0 +1,34 @@
+import { DialogIntent, DialogSize } from "./action-dialog.js";
+import { ReactElement, ReactNode } from "react";
+//#region src/dialog/dialog-preset.d.ts
+type DialogPresetConfirmProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: string;
+  description?: ReactNode;
+  question?: ReactNode;
+  intent?: DialogIntent;
+  size?: DialogSize;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  onConfirm: () => void;
+  /** Cancel, `Escape`, the mask and the close button alike. */
+  onCancel?: () => void;
+  /** Why the dialog is still open after a confirm that did not close it. */
+  error?: string;
+  /** Off for a caller that closes after its own work, or reports an `error` instead. */
+  closeOnConfirm?: boolean;
+  children?: ReactNode;
+  'data-component'?: string;
+};
+/** The plain question: a title, the question, and the two answers with equal weight. */
+declare const DialogPresetConfirm: {
+  ({ open, onOpenChange, title, description, question, intent, size, confirmLabel, cancelLabel, onConfirm, onCancel, error, closeOnConfirm, children, 'data-component': componentName }: DialogPresetConfirmProps): ReactElement;
+  displayName: string;
+};
+declare const DialogPreset: {
+  Confirm: typeof DialogPresetConfirm;
+};
+//#endregion
+export { DialogPreset, DialogPresetConfirmProps };
+//# sourceMappingURL=dialog-preset.d.ts.map

package/dist/dialog/dialog-preset.js

@@ -0,0 +1,38 @@
+import { ActionDialog } from "./action-dialog.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/dialog/dialog-preset.tsx
+const CONFIRM_NAME = "DialogPreset.Confirm";
+/** The plain question: a title, the question, and the two answers with equal weight. */
+const DialogPresetConfirm = ({ open, onOpenChange, title, description, question, intent = "default", size = "default", confirmLabel, cancelLabel, onConfirm, onCancel, error, closeOnConfirm = true, children, "data-component": componentName = CONFIRM_NAME }) => /* @__PURE__ */ jsx(ActionDialog.Root, {
+	open,
+	onOpenChange: (next, details) => {
+		if (!next && details === void 0) onCancel?.();
+		onOpenChange(next);
+	},
+	children: /* @__PURE__ */ jsxs(ActionDialog.Portal, { children: [/* @__PURE__ */ jsx(ActionDialog.Overlay, {}), /* @__PURE__ */ jsxs(ActionDialog.Content, {
+		"data-component": componentName,
+		size,
+		children: [
+			/* @__PURE__ */ jsx(ActionDialog.DefaultHeader, {
+				title,
+				description
+			}),
+			(question !== void 0 || children !== void 0) && /* @__PURE__ */ jsxs(ActionDialog.Body, { children: [question !== void 0 && /* @__PURE__ */ jsx("div", { children: question }), children] }),
+			/* @__PURE__ */ jsx(ActionDialog.Footer, {
+				intent,
+				cancelVariant: "outline",
+				confirmLabel,
+				cancelLabel,
+				onConfirm,
+				error,
+				closeOnConfirm
+			})
+		]
+	})] })
+});
+DialogPresetConfirm.displayName = CONFIRM_NAME;
+const DialogPreset = { Confirm: DialogPresetConfirm };
+//#endregion
+export { DialogPreset };
+
+//# sourceMappingURL=dialog-preset.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-preset.js","names":[],"sources":["../../src/dialog/dialog-preset.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react';\n\nimport { ActionDialog, type DialogIntent, type DialogSize } from './action-dialog';\n\nexport type DialogPresetConfirmProps = {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  title: string;\n  description?: ReactNode;\n  question?: ReactNode;\n  intent?: DialogIntent;\n  size?: DialogSize;\n  confirmLabel?: string;\n  cancelLabel?: string;\n  onConfirm: () => void;\n  /** Cancel, `Escape`, the mask and the close button alike. */\n  onCancel?: () => void;\n  /** Why the dialog is still open after a confirm that did not close it. */\n  error?: string;\n  /** Off for a caller that closes after its own work, or reports an `error` instead. */\n  closeOnConfirm?: boolean;\n  children?: ReactNode;\n  'data-component'?: string;\n};\n\nconst CONFIRM_NAME = 'DialogPreset.Confirm';\n\n/** The plain question: a title, the question, and the two answers with equal weight. */\nconst DialogPresetConfirm = ({\n  open,\n  onOpenChange,\n  title,\n  description,\n  question,\n  intent = 'default',\n  size = 'default',\n  confirmLabel,\n  cancelLabel,\n  onConfirm,\n  onCancel,\n  error,\n  closeOnConfirm = true,\n  children,\n  'data-component': componentName = CONFIRM_NAME,\n}: DialogPresetConfirmProps): ReactElement => (\n  <ActionDialog.Root\n    open={open}\n    onOpenChange={(next, details) => {\n      if (!next && details === undefined) {\n        onCancel?.();\n      }\n      onOpenChange(next);\n    }}\n  >\n    <ActionDialog.Portal>\n      <ActionDialog.Overlay />\n      <ActionDialog.Content data-component={componentName} size={size}>\n        <ActionDialog.DefaultHeader title={title} description={description} />\n        {(question !== undefined || children !== undefined) && (\n          <ActionDialog.Body>\n            {question !== undefined && <div>{question}</div>}\n            {children}\n          </ActionDialog.Body>\n        )}\n        <ActionDialog.Footer\n          intent={intent}\n          cancelVariant=\"outline\"\n          confirmLabel={confirmLabel}\n          cancelLabel={cancelLabel}\n          onConfirm={onConfirm}\n          error={error}\n          closeOnConfirm={closeOnConfirm}\n        />\n      </ActionDialog.Content>\n    </ActionDialog.Portal>\n  </ActionDialog.Root>\n);\nDialogPresetConfirm.displayName = CONFIRM_NAME;\n\nexport const DialogPreset = {\n  Confirm: DialogPresetConfirm,\n};\n"],"mappings":";;;AAyBA,MAAM,eAAe;;AAGrB,MAAM,uBAAuB,EAC3B,MACA,cACA,OACA,aACA,UACA,SAAS,WACT,OAAO,WACP,cACA,aACA,WACA,UACA,OACA,iBAAiB,MACjB,UACA,kBAAkB,gBAAgB,mBAElC,oBAAC,aAAa,MAAd;CACQ;CACN,eAAe,MAAM,YAAY;EAC/B,IAAI,CAAC,QAAQ,YAAY,KAAA,GACvB,WAAW;EAEb,aAAa,IAAI;CACnB;CAEA,UAAA,qBAAC,aAAa,QAAd,EAAA,UAAA,CACE,oBAAC,aAAa,SAAd,CAAuB,CAAA,GACvB,qBAAC,aAAa,SAAd;EAAsB,kBAAgB;EAAqB;EAA3D,UAAA;GACE,oBAAC,aAAa,eAAd;IAAmC;IAAoB;GAAc,CAAA;IACnE,aAAa,KAAA,KAAa,aAAa,KAAA,MACvC,qBAAC,aAAa,MAAd,EAAA,UAAA,CACG,aAAa,KAAA,KAAa,oBAAC,OAAD,EAAA,UAAM,SAAc,CAAA,GAC9C,QACgB,EAAA,CAAA;GAErB,oBAAC,aAAa,QAAd;IACU;IACR,eAAc;IACA;IACD;IACF;IACJ;IACS;GACjB,CAAA;EACmB;CACH,CAAA,CAAA,EAAA,CAAA;AACJ,CAAA;AAErB,oBAAoB,cAAc;AAElC,MAAa,eAAe,EAC1B,SAAS,oBACX"}

package/dist/dialog/gate-match.d.ts

@@ -0,0 +1,6 @@
+//#region src/dialog/gate-match.d.ts
+/** Whether what was typed is the name or the count asked for; spaces around it do not count, nothing never matches. */
+declare function matchesExpected(typed: string, expected: string | number, normalize?: (typed: string) => string): boolean;
+//#endregion
+export { matchesExpected };
+//# sourceMappingURL=gate-match.d.ts.map

package/dist/dialog/gate-match.js

@@ -0,0 +1,11 @@
+//#region src/dialog/gate-match.ts
+const normalizeTyped = (typed) => typed.trim();
+/** Whether what was typed is the name or the count asked for; spaces around it do not count, nothing never matches. */
+function matchesExpected(typed, expected, normalize = normalizeTyped) {
+	const entered = normalize(typed);
+	return entered !== "" && entered === String(expected);
+}
+//#endregion
+export { matchesExpected, normalizeTyped };
+
+//# sourceMappingURL=gate-match.js.map

package/dist/dialog/gate-match.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gate-match.js","names":[],"sources":["../../src/dialog/gate-match.ts"],"sourcesContent":["export const normalizeTyped = (typed: string): string => typed.trim();\n\n/** Whether what was typed is the name or the count asked for; spaces around it do not count, nothing never matches. */\nexport function matchesExpected(\n  typed: string,\n  expected: string | number,\n  normalize: (typed: string) => string = normalizeTyped,\n): boolean {\n  const entered = normalize(typed);\n  return entered !== '' && entered === String(expected);\n}\n"],"mappings":";AAAA,MAAa,kBAAkB,UAA0B,MAAM,KAAK;;AAGpE,SAAgB,gBACd,OACA,UACA,YAAuC,gBAC9B;CACT,MAAM,UAAU,UAAU,KAAK;CAC/B,OAAO,YAAY,MAAM,YAAY,OAAO,QAAQ;AACtD"}

package/dist/dialog/gate.d.ts

@@ -0,0 +1,31 @@
+import { ComponentPropsWithoutRef } from "react";
+import { InputProps } from "@enonic/ui";
+//#region src/dialog/gate.d.ts
+type GateHintProps = {
+  /** What has to be typed back, shown in bold inside the sentence. */
+  value: string | number;
+} & ComponentPropsWithoutRef<'p'>;
+type GateInputProps = {
+  expected: string | number;
+  /** In place of the comparison with `expected`. */
+  validate?: (typed: string) => boolean;
+  /** Applied to what was typed before the comparison; trims by default. */
+  normalize?: (typed: string) => string;
+} & Omit<InputProps, 'value' | 'onChange' | 'error' | 'readOnly'>;
+/** The typed-back confirmation: a hint naming what to type, and the field it is typed into. */
+declare const Gate: import("preact").FunctionalComponent<import("preact/compat").PropsWithoutRef<ComponentPropsWithoutRef<"div">> & {
+  ref?: import("preact").Ref<HTMLDivElement> | undefined;
+}> & {
+  Root: import("preact").FunctionalComponent<import("preact/compat").PropsWithoutRef<ComponentPropsWithoutRef<"div">> & {
+    ref?: import("preact").Ref<HTMLDivElement> | undefined;
+  }>;
+  Hint: import("preact").FunctionalComponent<import("preact/compat").PropsWithoutRef<GateHintProps> & {
+    ref?: import("preact").Ref<HTMLParagraphElement> | undefined;
+  }>;
+  Input: import("preact").FunctionalComponent<import("preact/compat").PropsWithoutRef<GateInputProps> & {
+    ref?: import("preact").Ref<HTMLInputElement> | undefined;
+  }>;
+};
+//#endregion
+export { Gate, GateHintProps, GateInputProps };
+//# sourceMappingURL=gate.d.ts.map

package/dist/dialog/gate.js

@@ -0,0 +1,72 @@
+import { useActionDialog } from "./action-dialog-context.js";
+import { useUiKitPhrases } from "../i18n/use-phrases.js";
+import { fillPhrase } from "../i18n/fill-phrase.js";
+import { matchesExpected, normalizeTyped } from "./gate-match.js";
+import { forwardRef, useEffect, useLayoutEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Input, cn } from "@enonic/ui";
+//#region src/dialog/gate.tsx
+const ERROR_DELAY_MS = 500;
+const VALUE = Symbol("value");
+const ROOT_NAME = "Gate.Root";
+const GateRoot = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	"data-component": ROOT_NAME,
+	className: cn("bg-surface-primary flex flex-col gap-2.5 rounded-lg p-7.5", className),
+	...props
+}));
+GateRoot.displayName = ROOT_NAME;
+const HINT_NAME = "Gate.Hint";
+const GateHint = forwardRef(({ value, className, ...props }, ref) => {
+	const t = useUiKitPhrases();
+	return /* @__PURE__ */ jsx("p", {
+		ref,
+		"data-component": HINT_NAME,
+		className: cn("text-xl", className),
+		...props,
+		children: fillPhrase(t("enonic.uiKit.gate.hint"), [VALUE]).map((part, index) => part === VALUE ? /* @__PURE__ */ jsx("strong", { children: value }, index) : part)
+	});
+});
+GateHint.displayName = HINT_NAME;
+const INPUT_NAME = "Gate.Input";
+/** The field to type the name or the count into; the dialog's confirm button follows it. */
+const GateInput = forwardRef(({ expected, validate, normalize = normalizeTyped, className, ...props }, ref) => {
+	const t = useUiKitPhrases();
+	const { setConfirmEnabled } = useActionDialog();
+	const [typed, setTyped] = useState("");
+	const [showError, setShowError] = useState(false);
+	const entered = normalize(typed);
+	const matched = validate ? validate(entered) : matchesExpected(typed, expected, normalize);
+	useLayoutEffect(() => {
+		setConfirmEnabled(matched);
+	}, [matched, setConfirmEnabled]);
+	useEffect(() => {
+		setShowError(false);
+		if (entered === "" || matched) return;
+		const timer = setTimeout(() => setShowError(true), ERROR_DELAY_MS);
+		return () => clearTimeout(timer);
+	}, [entered, matched]);
+	return /* @__PURE__ */ jsx(Input, {
+		ref,
+		"data-component": INPUT_NAME,
+		value: typed,
+		inputMode: typeof expected === "number" ? "numeric" : void 0,
+		"aria-label": t("enonic.uiKit.gate.hint", expected),
+		error: showError ? t("enonic.uiKit.gate.mismatch", expected, entered) : void 0,
+		readOnly: matched,
+		className: cn("w-3/5 max-w-sm", className),
+		onChange: (event) => setTyped(event.currentTarget.value),
+		...props
+	});
+});
+GateInput.displayName = INPUT_NAME;
+/** The typed-back confirmation: a hint naming what to type, and the field it is typed into. */
+const Gate = Object.assign(GateRoot, {
+	Root: GateRoot,
+	Hint: GateHint,
+	Input: GateInput
+});
+//#endregion
+export { Gate };
+
+//# sourceMappingURL=gate.js.map

package/dist/dialog/gate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gate.js","names":[],"sources":["../../src/dialog/gate.tsx"],"sourcesContent":["import { cn, Input, type InputProps } from '@enonic/ui';\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactElement,\n  useEffect,\n  useLayoutEffect,\n  useState,\n} from 'react';\n\nimport { fillPhrase } from '../i18n/fill-phrase';\nimport { useUiKitPhrases } from '../i18n/use-phrases';\nimport { useActionDialog } from './action-dialog-context';\nimport { matchesExpected, normalizeTyped } from './gate-match';\n\n// Held back: a wrong entry is what a right one looks like halfway through.\nconst ERROR_DELAY_MS = 500;\n\n// A translation may repeat `{0}`; each occurrence renders its own keyed node.\nconst VALUE = Symbol('value');\n\n//\n// * Root\n//\n\nconst ROOT_NAME = 'Gate.Root';\n\nconst GateRoot = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(\n  ({ className, ...props }, ref): ReactElement => (\n    <div\n      ref={ref}\n      data-component={ROOT_NAME}\n      className={cn('bg-surface-primary flex flex-col gap-2.5 rounded-lg p-7.5', className)}\n      {...props}\n    />\n  ),\n);\nGateRoot.displayName = ROOT_NAME;\n\n//\n// * Hint\n//\n\nexport type GateHintProps = {\n  /** What has to be typed back, shown in bold inside the sentence. */\n  value: string | number;\n} & ComponentPropsWithoutRef<'p'>;\n\nconst HINT_NAME = 'Gate.Hint';\n\nconst GateHint = forwardRef<HTMLParagraphElement, GateHintProps>(\n  ({ value, className, ...props }, ref): ReactElement => {\n    const t = useUiKitPhrases();\n\n    return (\n      <p ref={ref} data-component={HINT_NAME} className={cn('text-xl', className)} {...props}>\n        {fillPhrase(t('enonic.uiKit.gate.hint'), [VALUE]).map((part, index) =>\n          part === VALUE ? <strong key={index}>{value}</strong> : part,\n        )}\n      </p>\n    );\n  },\n);\nGateHint.displayName = HINT_NAME;\n\n//\n// * Input\n//\n\nexport type GateInputProps = {\n  expected: string | number;\n  /** In place of the comparison with `expected`. */\n  validate?: (typed: string) => boolean;\n  /** Applied to what was typed before the comparison; trims by default. */\n  normalize?: (typed: string) => string;\n} & Omit<InputProps, 'value' | 'onChange' | 'error' | 'readOnly'>;\n\nconst INPUT_NAME = 'Gate.Input';\n\n/** The field to type the name or the count into; the dialog's confirm button follows it. */\nconst GateInput = forwardRef<HTMLInputElement, GateInputProps>(\n  ({ expected, validate, normalize = normalizeTyped, className, ...props }, ref): ReactElement => {\n    const t = useUiKitPhrases();\n    const { setConfirmEnabled } = useActionDialog();\n    const [typed, setTyped] = useState('');\n    const [showError, setShowError] = useState(false);\n\n    const entered = normalize(typed);\n    const matched = validate ? validate(entered) : matchesExpected(typed, expected, normalize);\n\n    // Layout effect: the button follows the field in the same frame the field appears or changes.\n    useLayoutEffect(() => {\n      setConfirmEnabled(matched);\n    }, [matched, setConfirmEnabled]);\n\n    useEffect(() => {\n      setShowError(false);\n      if (entered === '' || matched) {\n        return;\n      }\n      const timer = setTimeout(() => setShowError(true), ERROR_DELAY_MS);\n      return () => clearTimeout(timer);\n    }, [entered, matched]);\n\n    return (\n      <Input\n        ref={ref}\n        data-component={INPUT_NAME}\n        value={typed}\n        inputMode={typeof expected === 'number' ? 'numeric' : undefined}\n        aria-label={t('enonic.uiKit.gate.hint', expected)}\n        error={showError ? t('enonic.uiKit.gate.mismatch', expected, entered) : undefined}\n        // Matched, the field locks: what was typed cannot drift from what the button now acts on.\n        readOnly={matched}\n        className={cn('w-3/5 max-w-sm', className)}\n        onChange={(event) => setTyped(event.currentTarget.value)}\n        {...props}\n      />\n    );\n  },\n);\nGateInput.displayName = INPUT_NAME;\n\n/** The typed-back confirmation: a hint naming what to type, and the field it is typed into. */\nexport const Gate = Object.assign(GateRoot, {\n  Root: GateRoot,\n  Hint: GateHint,\n  Input: GateInput,\n});\n"],"mappings":";;;;;;;;AAgBA,MAAM,iBAAiB;AAGvB,MAAM,QAAQ,OAAO,OAAO;AAM5B,MAAM,YAAY;AAElB,MAAM,WAAW,YACd,EAAE,WAAW,GAAG,SAAS,QACxB,oBAAC,OAAD;CACO;CACL,kBAAgB;CAChB,WAAW,GAAG,6DAA6D,SAAS;CACpF,GAAI;AACL,CAAA,CAEL;AACA,SAAS,cAAc;AAWvB,MAAM,YAAY;AAElB,MAAM,WAAW,YACd,EAAE,OAAO,WAAW,GAAG,SAAS,QAAsB;CACrD,MAAM,IAAI,gBAAgB;CAE1B,OACE,oBAAC,KAAD;EAAQ;EAAK,kBAAgB;EAAW,WAAW,GAAG,WAAW,SAAS;EAAG,GAAI;EAC9E,UAAA,WAAW,EAAE,wBAAwB,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,MAAM,UAC3D,SAAS,QAAQ,oBAAC,UAAD,EAAA,UAAqB,MAAc,GAAtB,KAAsB,IAAI,IAC1D;CACC,CAAA;AAEP,CACF;AACA,SAAS,cAAc;AAcvB,MAAM,aAAa;;AAGnB,MAAM,YAAY,YACf,EAAE,UAAU,UAAU,YAAY,gBAAgB,WAAW,GAAG,SAAS,QAAsB;CAC9F,MAAM,IAAI,gBAAgB;CAC1B,MAAM,EAAE,sBAAsB,gBAAgB;CAC9C,MAAM,CAAC,OAAO,YAAY,SAAS,EAAE;CACrC,MAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;CAEhD,MAAM,UAAU,UAAU,KAAK;CAC/B,MAAM,UAAU,WAAW,SAAS,OAAO,IAAI,gBAAgB,OAAO,UAAU,SAAS;CAGzF,sBAAsB;EACpB,kBAAkB,OAAO;CAC3B,GAAG,CAAC,SAAS,iBAAiB,CAAC;CAE/B,gBAAgB;EACd,aAAa,KAAK;EAClB,IAAI,YAAY,MAAM,SACpB;EAEF,MAAM,QAAQ,iBAAiB,aAAa,IAAI,GAAG,cAAc;EACjE,aAAa,aAAa,KAAK;CACjC,GAAG,CAAC,SAAS,OAAO,CAAC;CAErB,OACE,oBAAC,OAAD;EACO;EACL,kBAAgB;EAChB,OAAO;EACP,WAAW,OAAO,aAAa,WAAW,YAAY,KAAA;EACtD,cAAY,EAAE,0BAA0B,QAAQ;EAChD,OAAO,YAAY,EAAE,8BAA8B,UAAU,OAAO,IAAI,KAAA;EAExE,UAAU;EACV,WAAW,GAAG,kBAAkB,SAAS;EACzC,WAAW,UAAU,SAAS,MAAM,cAAc,KAAK;EACvD,GAAI;CACL,CAAA;AAEL,CACF;AACA,UAAU,cAAc;;AAGxB,MAAa,OAAO,OAAO,OAAO,UAAU;CAC1C,MAAM;CACN,MAAM;CACN,OAAO;AACT,CAAC"}

package/dist/dialog/use-close-guard.d.ts

@@ -0,0 +1,34 @@
+import { ActionDialogOpenChangeDetails } from "./action-dialog-context.js";
+//#region src/dialog/use-close-guard.d.ts
+type CloseGuardOptions = {
+  /** Whether closing would lose something. */
+  dirty: boolean;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+};
+type CloseGuard = {
+  /** Whether the question is being asked. */
+  asking: boolean;
+  /**
+   * For `ActionDialog.Root`: lets an open through, and a close an action took; asks before any
+   * other close that would lose something.
+   */
+  onOpenChange: (open: boolean, details?: ActionDialogOpenChangeDetails) => void;
+  /** Asks, or closes when there is nothing to lose — a Cancel button. */
+  requestClose: () => void;
+  /** The way back: the question goes, and the footer returns the focus to the control it left. */
+  keep: () => void;
+  /** Closes, losing what there was. */
+  discard: () => void;
+};
+/**
+ * The dirty-close question of a dialog: `Escape`, the mask, the close button and Cancel all come
+ * through `onOpenChange(false)`, and a dialog with unsaved edits asks before it closes. A close
+ * from the footer's Confirm or an `Action` is the outcome itself and goes through unasked — its
+ * click runs before the render that would clear `dirty`. The footer renders the question; this
+ * decides when it is asked.
+ */
+declare function useCloseGuard({ dirty, open, onOpenChange }: CloseGuardOptions): CloseGuard;
+//#endregion
+export { CloseGuard, CloseGuardOptions, useCloseGuard };
+//# sourceMappingURL=use-close-guard.d.ts.map

package/dist/dialog/use-close-guard.js

@@ -0,0 +1,40 @@
+import { useEffect, useState } from "react";
+//#region src/dialog/use-close-guard.ts
+/**
+* The dirty-close question of a dialog: `Escape`, the mask, the close button and Cancel all come
+* through `onOpenChange(false)`, and a dialog with unsaved edits asks before it closes. A close
+* from the footer's Confirm or an `Action` is the outcome itself and goes through unasked — its
+* click runs before the render that would clear `dirty`. The footer renders the question; this
+* decides when it is asked.
+*/
+function useCloseGuard({ dirty, open, onOpenChange }) {
+	const [asking, setAsking] = useState(false);
+	useEffect(() => {
+		if (!open) setAsking(false);
+	}, [open]);
+	const requestClose = () => {
+		if (dirty) setAsking(true);
+		else onOpenChange(false);
+	};
+	const keep = () => setAsking(false);
+	const discard = () => {
+		setAsking(false);
+		onOpenChange(false);
+	};
+	return {
+		asking,
+		requestClose,
+		keep,
+		discard,
+		onOpenChange: (next, details) => {
+			if (next) onOpenChange(true);
+			else if (details?.reason === "action") discard();
+			else if (asking) keep();
+			else requestClose();
+		}
+	};
+}
+//#endregion
+export { useCloseGuard };
+
+//# sourceMappingURL=use-close-guard.js.map

package/dist/dialog/use-close-guard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-close-guard.js","names":[],"sources":["../../src/dialog/use-close-guard.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport type { ActionDialogOpenChangeDetails } from './action-dialog-context';\n\nexport type CloseGuardOptions = {\n  /** Whether closing would lose something. */\n  dirty: boolean;\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n};\n\nexport type CloseGuard = {\n  /** Whether the question is being asked. */\n  asking: boolean;\n  /**\n   * For `ActionDialog.Root`: lets an open through, and a close an action took; asks before any\n   * other close that would lose something.\n   */\n  onOpenChange: (open: boolean, details?: ActionDialogOpenChangeDetails) => void;\n  /** Asks, or closes when there is nothing to lose — a Cancel button. */\n  requestClose: () => void;\n  /** The way back: the question goes, and the footer returns the focus to the control it left. */\n  keep: () => void;\n  /** Closes, losing what there was. */\n  discard: () => void;\n};\n\n/**\n * The dirty-close question of a dialog: `Escape`, the mask, the close button and Cancel all come\n * through `onOpenChange(false)`, and a dialog with unsaved edits asks before it closes. A close\n * from the footer's Confirm or an `Action` is the outcome itself and goes through unasked — its\n * click runs before the render that would clear `dirty`. The footer renders the question; this\n * decides when it is asked.\n */\nexport function useCloseGuard({ dirty, open, onOpenChange }: CloseGuardOptions): CloseGuard {\n  const [asking, setAsking] = useState(false);\n\n  useEffect(() => {\n    if (!open) {\n      setAsking(false);\n    }\n  }, [open]);\n\n  const requestClose = (): void => {\n    if (dirty) {\n      setAsking(true);\n    } else {\n      onOpenChange(false);\n    }\n  };\n  const keep = (): void => setAsking(false);\n  const discard = (): void => {\n    setAsking(false);\n    onOpenChange(false);\n  };\n\n  return {\n    asking,\n    requestClose,\n    keep,\n    discard,\n    onOpenChange: (next, details) => {\n      if (next) {\n        onOpenChange(true);\n      } else if (details?.reason === 'action') {\n        discard();\n      } else if (asking) {\n        keep();\n      } else {\n        requestClose();\n      }\n    },\n  };\n}\n"],"mappings":";;;;;;;;;AAkCA,SAAgB,cAAc,EAAE,OAAO,MAAM,gBAA+C;CAC1F,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAE1C,gBAAgB;EACd,IAAI,CAAC,MACH,UAAU,KAAK;CAEnB,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,qBAA2B;EAC/B,IAAI,OACF,UAAU,IAAI;OAEd,aAAa,KAAK;CAEtB;CACA,MAAM,aAAmB,UAAU,KAAK;CACxC,MAAM,gBAAsB;EAC1B,UAAU,KAAK;EACf,aAAa,KAAK;CACpB;CAEA,OAAO;EACL;EACA;EACA;EACA;EACA,eAAe,MAAM,YAAY;GAC/B,IAAI,MACF,aAAa,IAAI;QACZ,IAAI,SAAS,WAAW,UAC7B,QAAQ;QACH,IAAI,QACT,KAAK;QAEL,aAAa;EAEjB;CACF;AACF"}

package/dist/filter/filter-fields.d.ts

@@ -0,0 +1,33 @@
+import { LucideIcon } from "lucide-react";
+//#region src/filter/filter-fields.d.ts
+type FilterValue = {
+  id: string;
+  label: string;
+  /**
+   * How many rows fall under this value, where that is knowable.
+   *
+   * ! Absent, not zero, where nothing can count: a value without a count is always offered — there is
+   * ! nothing to tell it apart from an empty one.
+   */
+  count?: number;
+  /** Values sharing a group are listed together under its label, after the ungrouped ones. */
+  group?: string;
+  /** Withheld for a reason other than an empty count; the caller says why, if anywhere. */
+  disabled?: boolean;
+};
+/** A field the filter offers, with the values it can take. */
+type FilterField = {
+  id: string;
+  label: string;
+  icon?: LucideIcon;
+  values: readonly FilterValue[];
+  /** Whether several values can be picked at once, ORed. Off, a pick replaces the field's value. */
+  multiple?: boolean;
+  /** Shown above the values: why the list may be short or stale, such as a count request that failed. */
+  notice?: string;
+  /** The values are still being fetched; the dropdown says so instead of "no matches". */
+  loading?: boolean;
+};
+//#endregion
+export { FilterField, FilterValue };
+//# sourceMappingURL=filter-fields.d.ts.map

package/dist/filter/filter-fields.js

@@ -0,0 +1,72 @@
+import { isTextTerm } from "./filter-query.js";
+//#region src/filter/filter-fields.ts
+/** Whether a value can be picked: one with a count of zero would narrow the list to nothing. */
+function isOffered({ count, disabled }) {
+	return disabled !== true && (count === void 0 || count > 0);
+}
+/**
+* The values by hits, most first, the ones with none last. A value without a count comes first: it is
+* offered whatever the rows, so it must not sink below the empty ones. Ties keep the field's own order.
+*/
+function orderedValues(values) {
+	return [...values].sort((a, b) => rank(b) - rank(a));
+}
+function rank({ count }) {
+	return count ?? Number.POSITIVE_INFINITY;
+}
+/**
+* The values as the dropdown lists them: the ungrouped ones first, then every group in the order it
+* first appears, each run ordered by hits on its own — a group's empty values sink to its end, not
+* to the end of the list, or the group would lose them to the one below.
+*/
+function groupedValues(values) {
+	const runs = /* @__PURE__ */ new Map([[void 0, []]]);
+	for (const value of values) {
+		const run = runs.get(value.group);
+		if (run === void 0) runs.set(value.group, [value]);
+		else run.push(value);
+	}
+	return [...runs].filter(([, run]) => run.length > 0).map(([label, run]) => ({
+		label,
+		values: orderedValues(run)
+	}));
+}
+/** The fields whose label contains what was typed, case-insensitive; every field for a blank. */
+function matchingFields(fields, typed) {
+	const needle = typed.trim().toLowerCase();
+	return needle.length === 0 ? [...fields] : fields.filter(({ label }) => label.toLowerCase().includes(needle));
+}
+function matchingValues(values, typed) {
+	const needle = typed.trim().toLowerCase();
+	return needle.length === 0 ? [...values] : values.filter(({ label }) => label.toLowerCase().includes(needle));
+}
+const ASCII_PREFIXES = (label) => [`${label}:`];
+/**
+* The field a typed prefix names, case-insensitive, with the text after it: what was typed up to the
+* colon, or a whole `Label: value` pasted in. The longest prefix wins where one is a prefix of another.
+*/
+function fieldTyped(fields, typed, prefixesOf = ASCII_PREFIXES) {
+	const text = typed.trimStart();
+	const needle = text.toLowerCase();
+	const longest = fields.flatMap((field) => prefixesOf(field.label).filter((prefix) => prefix.length > 0 && needle.startsWith(prefix.toLowerCase())).map((prefix) => ({
+		field,
+		prefix
+	}))).sort((a, b) => b.prefix.length - a.prefix.length)[0];
+	return longest === void 0 ? void 0 : {
+		field: longest.field,
+		text: text.slice(longest.prefix.length).trim()
+	};
+}
+function termLabel(term, fields) {
+	if (isTextTerm(term)) return { value: term.text };
+	const field = fields.find(({ id }) => id === term.field);
+	const value = field?.values.find(({ id }) => id === term.value);
+	return {
+		field: field?.label ?? term.field,
+		value: value?.label ?? term.value
+	};
+}
+//#endregion
+export { fieldTyped, groupedValues, isOffered, matchingFields, matchingValues, orderedValues, termLabel };
+
+//# sourceMappingURL=filter-fields.js.map

package/dist/filter/filter-fields.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-fields.js","names":[],"sources":["../../src/filter/filter-fields.ts"],"sourcesContent":["import type { LucideIcon } from 'lucide-react';\n\nimport { isTextTerm, type FilterTerm } from './filter-query';\n\nexport type FilterValue = {\n  id: string;\n  label: string;\n  /**\n   * How many rows fall under this value, where that is knowable.\n   *\n   * ! Absent, not zero, where nothing can count: a value without a count is always offered — there is\n   * ! nothing to tell it apart from an empty one.\n   */\n  count?: number;\n  /** Values sharing a group are listed together under its label, after the ungrouped ones. */\n  group?: string;\n  /** Withheld for a reason other than an empty count; the caller says why, if anywhere. */\n  disabled?: boolean;\n};\n\n/** A run of values the dropdown lists together: the ungrouped ones first and unlabelled, then each group. */\nexport type FilterValueGroup = {\n  label?: string;\n  values: readonly FilterValue[];\n};\n\n/** A field the filter offers, with the values it can take. */\nexport type FilterField = {\n  id: string;\n  label: string;\n  icon?: LucideIcon;\n  values: readonly FilterValue[];\n  /** Whether several values can be picked at once, ORed. Off, a pick replaces the field's value. */\n  multiple?: boolean;\n  /** Shown above the values: why the list may be short or stale, such as a count request that failed. */\n  notice?: string;\n  /** The values are still being fetched; the dropdown says so instead of \"no matches\". */\n  loading?: boolean;\n};\n\n/** A field named by what was typed, and whatever followed its label — `State: Started` pasted whole. */\nexport type TypedField = {\n  field: FilterField;\n  text: string;\n};\n\n/** What a tag shows for a term: the labels, falling back to the ids for a field or value no longer offered. */\nexport type TermLabel = {\n  field?: string;\n  value: string;\n};\n\n/** Whether a value can be picked: one with a count of zero would narrow the list to nothing. */\nexport function isOffered({ count, disabled }: FilterValue): boolean {\n  return disabled !== true && (count === undefined || count > 0);\n}\n\n/**\n * The values by hits, most first, the ones with none last. A value without a count comes first: it is\n * offered whatever the rows, so it must not sink below the empty ones. Ties keep the field's own order.\n */\nexport function orderedValues(values: readonly FilterValue[]): FilterValue[] {\n  return [...values].sort((a, b) => rank(b) - rank(a));\n}\n\nfunction rank({ count }: FilterValue): number {\n  return count ?? Number.POSITIVE_INFINITY;\n}\n\n/**\n * The values as the dropdown lists them: the ungrouped ones first, then every group in the order it\n * first appears, each run ordered by hits on its own — a group's empty values sink to its end, not\n * to the end of the list, or the group would lose them to the one below.\n */\nexport function groupedValues(values: readonly FilterValue[]): FilterValueGroup[] {\n  const runs = new Map<string | undefined, FilterValue[]>([[undefined, []]]);\n  for (const value of values) {\n    const run = runs.get(value.group);\n    if (run === undefined) {\n      runs.set(value.group, [value]);\n    } else {\n      run.push(value);\n    }\n  }\n\n  return [...runs]\n    .filter(([, run]) => run.length > 0)\n    .map(([label, run]) => ({ label, values: orderedValues(run) }));\n}\n\n/** The fields whose label contains what was typed, case-insensitive; every field for a blank. */\nexport function matchingFields(fields: readonly FilterField[], typed: string): FilterField[] {\n  const needle = typed.trim().toLowerCase();\n  return needle.length === 0\n    ? [...fields]\n    : fields.filter(({ label }) => label.toLowerCase().includes(needle));\n}\n\nexport function matchingValues(values: readonly FilterValue[], typed: string): FilterValue[] {\n  const needle = typed.trim().toLowerCase();\n  return needle.length === 0\n    ? [...values]\n    : values.filter(({ label }) => label.toLowerCase().includes(needle));\n}\n\n/** The forms a field's label is typed in to enter it: `Label:` always, plus what the tags show, as a locale punctuates it. */\nexport type FieldPrefixes = (label: string) => readonly string[];\n\nconst ASCII_PREFIXES: FieldPrefixes = (label) => [`${label}:`];\n\n/**\n * The field a typed prefix names, case-insensitive, with the text after it: what was typed up to the\n * colon, or a whole `Label: value` pasted in. The longest prefix wins where one is a prefix of another.\n */\nexport function fieldTyped(\n  fields: readonly FilterField[],\n  typed: string,\n  prefixesOf: FieldPrefixes = ASCII_PREFIXES,\n): TypedField | undefined {\n  const text = typed.trimStart();\n  const needle = text.toLowerCase();\n  const matches = fields.flatMap((field) =>\n    prefixesOf(field.label)\n      .filter((prefix) => prefix.length > 0 && needle.startsWith(prefix.toLowerCase()))\n      .map((prefix) => ({ field, prefix })),\n  );\n  const longest = matches.sort((a, b) => b.prefix.length - a.prefix.length)[0];\n\n  return longest === undefined\n    ? undefined\n    : { field: longest.field, text: text.slice(longest.prefix.length).trim() };\n}\n\nexport function termLabel(term: FilterTerm, fields: readonly FilterField[]): TermLabel {\n  if (isTextTerm(term)) {\n    return { value: term.text };\n  }\n\n  const field = fields.find(({ id }) => id === term.field);\n  const value = field?.values.find(({ id }) => id === term.value);\n\n  return { field: field?.label ?? term.field, value: value?.label ?? term.value };\n}\n"],"mappings":";;;AAqDA,SAAgB,UAAU,EAAE,OAAO,YAAkC;CACnE,OAAO,aAAa,SAAS,UAAU,KAAA,KAAa,QAAQ;AAC9D;;;;;AAMA,SAAgB,cAAc,QAA+C;CAC3E,OAAO,CAAC,GAAG,MAAM,CAAC,CAAC,MAAM,GAAG,MAAM,KAAK,CAAC,IAAI,KAAK,CAAC,CAAC;AACrD;AAEA,SAAS,KAAK,EAAE,SAA8B;CAC5C,OAAO,SAAS,OAAO;AACzB;;;;;;AAOA,SAAgB,cAAc,QAAoD;CAChF,MAAM,uBAAO,IAAI,IAAuC,CAAC,CAAC,KAAA,GAAW,CAAC,CAAC,CAAC,CAAC;CACzE,KAAK,MAAM,SAAS,QAAQ;EAC1B,MAAM,MAAM,KAAK,IAAI,MAAM,KAAK;EAChC,IAAI,QAAQ,KAAA,GACV,KAAK,IAAI,MAAM,OAAO,CAAC,KAAK,CAAC;OAE7B,IAAI,KAAK,KAAK;CAElB;CAEA,OAAO,CAAC,GAAG,IAAI,CAAC,CACb,QAAQ,GAAG,SAAS,IAAI,SAAS,CAAC,CAAC,CACnC,KAAK,CAAC,OAAO,UAAU;EAAE;EAAO,QAAQ,cAAc,GAAG;CAAE,EAAE;AAClE;;AAGA,SAAgB,eAAe,QAAgC,OAA8B;CAC3F,MAAM,SAAS,MAAM,KAAK,CAAC,CAAC,YAAY;CACxC,OAAO,OAAO,WAAW,IACrB,CAAC,GAAG,MAAM,IACV,OAAO,QAAQ,EAAE,YAAY,MAAM,YAAY,CAAC,CAAC,SAAS,MAAM,CAAC;AACvE;AAEA,SAAgB,eAAe,QAAgC,OAA8B;CAC3F,MAAM,SAAS,MAAM,KAAK,CAAC,CAAC,YAAY;CACxC,OAAO,OAAO,WAAW,IACrB,CAAC,GAAG,MAAM,IACV,OAAO,QAAQ,EAAE,YAAY,MAAM,YAAY,CAAC,CAAC,SAAS,MAAM,CAAC;AACvE;AAKA,MAAM,kBAAiC,UAAU,CAAC,GAAG,MAAM,EAAE;;;;;AAM7D,SAAgB,WACd,QACA,OACA,aAA4B,gBACJ;CACxB,MAAM,OAAO,MAAM,UAAU;CAC7B,MAAM,SAAS,KAAK,YAAY;CAMhC,MAAM,UALU,OAAO,SAAS,UAC9B,WAAW,MAAM,KAAK,CAAC,CACpB,QAAQ,WAAW,OAAO,SAAS,KAAK,OAAO,WAAW,OAAO,YAAY,CAAC,CAAC,CAAC,CAChF,KAAK,YAAY;EAAE;EAAO;CAAO,EAAE,CAElB,CAAC,CAAC,MAAM,GAAG,MAAM,EAAE,OAAO,SAAS,EAAE,OAAO,MAAM,CAAC,CAAC;CAE1E,OAAO,YAAY,KAAA,IACf,KAAA,IACA;EAAE,OAAO,QAAQ;EAAO,MAAM,KAAK,MAAM,QAAQ,OAAO,MAAM,CAAC,CAAC,KAAK;CAAE;AAC7E;AAEA,SAAgB,UAAU,MAAkB,QAA2C;CACrF,IAAI,WAAW,IAAI,GACjB,OAAO,EAAE,OAAO,KAAK,KAAK;CAG5B,MAAM,QAAQ,OAAO,MAAM,EAAE,SAAS,OAAO,KAAK,KAAK;CACvD,MAAM,QAAQ,OAAO,OAAO,MAAM,EAAE,SAAS,OAAO,KAAK,KAAK;CAE9D,OAAO;EAAE,OAAO,OAAO,SAAS,KAAK;EAAO,OAAO,OAAO,SAAS,KAAK;CAAM;AAChF"}

package/dist/filter/filter-input.d.ts

@@ -0,0 +1,35 @@
+import { FilterQuery } from "./filter-query.js";
+import { FilterField } from "./filter-fields.js";
+import { Ref } from "react";
+//#region src/filter/filter-input.d.ts
+type FilterInputProps = {
+  /** What the dropdown offers. None leaves the input a free-text search. */
+  fields: readonly FilterField[];
+  /** The query, controlled; leave it out and the input keeps its own, starting from `defaultValue`. */
+  value?: FilterQuery;
+  defaultValue?: FilterQuery;
+  onChange?: (query: FilterQuery) => void;
+  /** What the empty input invites, named for the list: `Search users`. Defaults to the kit's "Search". */
+  placeholder?: string;
+  disabled?: boolean;
+  /** The tags are the whole content: no input, no crosses, no clearing. */
+  readOnly?: boolean;
+  /** The box reads as invalid; what is wrong with the query is the caller's to say beside it. */
+  error?: boolean;
+  className?: string;
+  'data-component'?: string;
+};
+/**
+ * The filter of a list: values of predefined fields combined with free text, every term a
+ * tag. The dropdown opens on a click, a keystroke or an arrow — not on focus, so the focus the
+ * library returns to the input on Escape does not reopen it. The fields come first; picking one, or
+ * typing its label and a colon, opens its values with their hit counts, and the values stay open
+ * across picks so several can be ticked. Enter picks the highlighted option, or adds typed text as
+ * a tag when no field is entered. The ref is the text input's.
+ */
+declare const FilterInput: import("preact").FunctionalComponent<import("preact/compat").PropsWithoutRef<FilterInputProps> & {
+  ref?: Ref<HTMLInputElement> | undefined;
+}>;
+//#endregion
+export { FilterInput, FilterInputProps };
+//# sourceMappingURL=filter-input.d.ts.map