@eifi1/ui-kit 0.15.4 → 0.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +20 -15
- package/dist/chart.d.ts +3 -4
- package/dist/components/alert-banner.js +1 -1
- package/dist/components/alert-banner.js.map +1 -1
- package/dist/components/amount-input.d.ts +13 -4
- package/dist/components/amount-input.js +166 -157
- package/dist/components/amount-input.js.map +1 -1
- package/dist/components/authed-image.d.ts +14 -3
- package/dist/components/authed-image.js +32 -23
- package/dist/components/authed-image.js.map +1 -1
- package/dist/components/button-group.d.ts +3 -4
- package/dist/components/calculator.d.ts +3 -4
- package/dist/components/checkbox.js +1 -1
- package/dist/components/checkbox.js.map +1 -1
- package/dist/components/choice-card.js +1 -1
- package/dist/components/choice-card.js.map +1 -1
- package/dist/components/copy-button.d.ts +3 -4
- package/dist/components/error-boundary.js +1 -1
- package/dist/components/error-boundary.js.map +1 -1
- package/dist/components/facing-pair.d.ts +3 -4
- package/dist/components/file-button.d.ts +3 -4
- package/dist/components/file-button.js +64 -31
- package/dist/components/file-button.js.map +1 -1
- package/dist/components/file-dropzone.d.ts +3 -4
- package/dist/components/file-dropzone.js +1 -1
- package/dist/components/file-dropzone.js.map +1 -1
- package/dist/components/form-actions.d.ts +4 -5
- package/dist/components/form-actions.js +18 -6
- package/dist/components/form-actions.js.map +1 -1
- package/dist/components/line-items.d.ts +53 -2
- package/dist/components/line-items.js +73 -7
- package/dist/components/line-items.js.map +1 -1
- package/dist/components/list.d.ts +99 -5
- package/dist/components/list.js +103 -38
- package/dist/components/list.js.map +1 -1
- package/dist/components/loading-state.d.ts +19 -3
- package/dist/components/loading-state.js +14 -3
- package/dist/components/loading-state.js.map +1 -1
- package/dist/components/money-field.d.ts +3 -4
- package/dist/components/number-field.d.ts +3 -4
- package/dist/components/number-input.d.ts +3 -4
- package/dist/components/number-input.js +4 -2
- package/dist/components/number-input.js.map +1 -1
- package/dist/components/numpad-sheet.d.ts +3 -4
- package/dist/components/passkeys-setting.d.ts +30 -10
- package/dist/components/passkeys-setting.js +19 -11
- package/dist/components/passkeys-setting.js.map +1 -1
- package/dist/components/progress-bar.d.ts +12 -3
- package/dist/components/progress-bar.js +21 -11
- package/dist/components/progress-bar.js.map +1 -1
- package/dist/components/series-chart.d.ts +3 -4
- package/dist/components/settings-fields.d.ts +3 -4
- package/dist/components/signed-amount.d.ts +28 -4
- package/dist/components/signed-amount.js +17 -8
- package/dist/components/signed-amount.js.map +1 -1
- package/dist/components/stat-tile.d.ts +31 -2
- package/dist/components/stat-tile.js +37 -6
- package/dist/components/stat-tile.js.map +1 -1
- package/dist/components/status-dot.d.ts +4 -1
- package/dist/components/status-dot.js +20 -1
- package/dist/components/status-dot.js.map +1 -1
- package/dist/components/swatch-picker.d.ts +3 -1
- package/dist/components/swatch-picker.js.map +1 -1
- package/dist/components/table.d.ts +18 -13
- package/dist/components/table.js +20 -5
- package/dist/components/table.js.map +1 -1
- package/dist/components/text-link.d.ts +3 -4
- package/dist/components/time-input.d.ts +3 -4
- package/dist/components/toggle-legend.d.ts +12 -1
- package/dist/components/toggle-legend.js +6 -2
- package/dist/components/toggle-legend.js.map +1 -1
- package/dist/components/ui.d.ts +3 -4
- package/dist/components/ui.js +156 -52
- package/dist/components/ui.js.map +1 -1
- package/dist/feedback/feedback-attachment.d.ts +2 -82
- package/dist/feedback/feedback-attachment.js +285 -55
- package/dist/feedback/feedback-attachment.js.map +1 -1
- package/dist/feedback/feedback-dialog.d.ts +2 -105
- package/dist/feedback/feedback-dialog.js +57 -25
- package/dist/feedback/feedback-dialog.js.map +1 -1
- package/dist/feedback/feedback-inbox.d.ts +1 -1
- package/dist/feedback/feedback-thread.d.ts +2 -2
- package/dist/feedback-attachment-WFiXJ8We.d.ts +302 -0
- package/dist/feedback.d.ts +1 -2
- package/dist/hooks/use-file-drop.d.ts +3 -4
- package/dist/i18n/defaults.d.ts +3 -4
- package/dist/i18n/kit-labels.d.ts +2 -3
- package/dist/i18n/locales/de-CH-informal.d.ts +3 -4
- package/dist/i18n/locales/de-CH.d.ts +3 -4
- package/dist/i18n/locales/de-informal.d.ts +3 -4
- package/dist/i18n/locales/de.d.ts +3 -4
- package/dist/i18n/locales/de.js +5 -1
- package/dist/i18n/locales/de.js.map +1 -1
- package/dist/i18n/locales/es.d.ts +3 -4
- package/dist/i18n/locales/es.js +5 -1
- package/dist/i18n/locales/es.js.map +1 -1
- package/dist/i18n/locales/fr.d.ts +3 -4
- package/dist/i18n/locales/fr.js +5 -1
- package/dist/i18n/locales/fr.js.map +1 -1
- package/dist/i18n/locales/hu.d.ts +3 -4
- package/dist/i18n/locales/hu.js +5 -1
- package/dist/i18n/locales/hu.js.map +1 -1
- package/dist/i18n/locales/it.d.ts +3 -4
- package/dist/i18n/locales/it.js +5 -1
- package/dist/i18n/locales/it.js.map +1 -1
- package/dist/i18n/locales/zh.d.ts +3 -4
- package/dist/i18n/locales/zh.js +5 -1
- package/dist/i18n/locales/zh.js.map +1 -1
- package/dist/index.d.ts +10 -11
- package/dist/{kit-labels-CnnBd-2N.d.ts → kit-labels-DE--LmCk.d.ts} +154 -14
- package/dist/lib/format.d.ts +18 -3
- package/dist/lib/format.js +2 -1
- package/dist/lib/format.js.map +1 -1
- package/dist/rhf/fields.d.ts +3 -4
- package/dist/rhf/form.d.ts +3 -4
- package/dist/rhf/line-items.js.map +1 -1
- package/dist/rhf.d.ts +3 -4
- package/dist/shell/app-shell.d.ts +3 -4
- package/dist/shell/top-bar-brand.d.ts +3 -4
- package/dist/shell.d.ts +3 -4
- package/dist/theme/palette-derive.d.ts +3 -0
- package/dist/theme/palette-derive.js +7 -0
- package/dist/theme/palette-derive.js.map +1 -1
- package/dist/wizard/stepper-nav.d.ts +3 -4
- package/dist/wizard.d.ts +3 -4
- package/package.json +4 -2
- package/src/components/alert-banner.tsx +1 -1
- package/src/components/amount-input.tsx +47 -16
- package/src/components/authed-image.tsx +20 -2
- package/src/components/checkbox.tsx +1 -1
- package/src/components/choice-card.tsx +1 -1
- package/src/components/error-boundary.tsx +1 -1
- package/src/components/file-button.tsx +77 -27
- package/src/components/file-dropzone.tsx +1 -1
- package/src/components/form-actions.tsx +86 -8
- package/src/components/line-items.tsx +131 -14
- package/src/components/list.tsx +240 -50
- package/src/components/loading-state.tsx +35 -4
- package/src/components/number-input.tsx +18 -2
- package/src/components/passkeys-setting.tsx +45 -18
- package/src/components/progress-bar.tsx +46 -21
- package/src/components/signed-amount.tsx +47 -8
- package/src/components/stat-tile.tsx +76 -6
- package/src/components/status-dot.tsx +31 -0
- package/src/components/swatch-picker.tsx +3 -1
- package/src/components/table.tsx +42 -15
- package/src/components/toggle-legend.tsx +21 -4
- package/src/components/ui.tsx +280 -70
- package/src/feedback/feedback-attachment.tsx +472 -96
- package/src/feedback/feedback-dialog.tsx +162 -50
- package/src/i18n/locales/de.ts +4 -0
- package/src/i18n/locales/es.ts +4 -0
- package/src/i18n/locales/fr.ts +4 -0
- package/src/i18n/locales/hu.ts +4 -0
- package/src/i18n/locales/it.ts +4 -0
- package/src/i18n/locales/zh.ts +4 -0
- package/src/lib/format.ts +24 -3
- package/src/rhf/line-items.tsx +6 -0
- package/src/theme/palette-derive.ts +10 -0
- package/tokens.css +9 -1
|
@@ -1,105 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
interface FeedbackCategoryOption {
|
|
5
|
-
value: string;
|
|
6
|
-
label: string;
|
|
7
|
-
}
|
|
8
|
-
interface FeedbackAttachmentLabels {
|
|
9
|
-
/** The heading over the field. Optional: a note editor puts the buttons
|
|
10
|
-
* straight under its textarea, where a second heading is noise. */
|
|
11
|
-
attachment?: string;
|
|
12
|
-
attachmentAdd: string;
|
|
13
|
-
/** Label for the "capture screenshot" button. Optional — falls back to the provider's
|
|
14
|
-
* `feedbackAttachment.attachmentCapture`, then English. */
|
|
15
|
-
attachmentCapture?: string;
|
|
16
|
-
/** The line under the attachment buttons saying a screenshot can be pasted
|
|
17
|
-
* straight in. Optional — falls back to the provider's `feedbackAttachment`, then English. */
|
|
18
|
-
attachmentPaste?: string;
|
|
19
|
-
attachmentRemove: string;
|
|
20
|
-
}
|
|
21
|
-
interface FeedbackDialogLabels extends FeedbackAttachmentLabels {
|
|
22
|
-
title: string;
|
|
23
|
-
category: string;
|
|
24
|
-
subject: string;
|
|
25
|
-
body: string;
|
|
26
|
-
attachment: string;
|
|
27
|
-
submitHint: string;
|
|
28
|
-
cancel: string;
|
|
29
|
-
save: string;
|
|
30
|
-
}
|
|
31
|
-
/**
|
|
32
|
-
* The dialog's own strings — the `feedbackDialog` namespace of `<UiKitProvider
|
|
33
|
-
* labels>` (0.12.0). The attachment keys are not repeated here: they are the
|
|
34
|
-
* `feedbackAttachment` namespace's, which the field inside already reads.
|
|
35
|
-
*
|
|
36
|
-
* Before, every key was required at the call site, so each app restated ten strings
|
|
37
|
-
* wherever it mounted the dialog (kastlan feedback-button.tsx built the object inline).
|
|
38
|
-
*/
|
|
39
|
-
interface FeedbackDialogTextLabels {
|
|
40
|
-
title: string;
|
|
41
|
-
category: string;
|
|
42
|
-
subject: string;
|
|
43
|
-
body: string;
|
|
44
|
-
/** The body's label when `requireBody={false}`: "What happened? (optional)".
|
|
45
|
-
* Optional, so a complete `UiKitLabels` typed before 0.14.2 still compiles. */
|
|
46
|
-
bodyOptional?: string;
|
|
47
|
-
/** The heading over the attachment buttons. */
|
|
48
|
-
attachment: string;
|
|
49
|
-
/** The line beside the buttons naming the shortcut. */
|
|
50
|
-
submitHint: string;
|
|
51
|
-
cancel: string;
|
|
52
|
-
save: string;
|
|
53
|
-
}
|
|
54
|
-
declare const DEFAULT_FEEDBACK_DIALOG_LABELS: FeedbackDialogTextLabels;
|
|
55
|
-
interface FeedbackSubmission {
|
|
56
|
-
title: string;
|
|
57
|
-
body: string;
|
|
58
|
-
category: string;
|
|
59
|
-
attachment: File | null;
|
|
60
|
-
}
|
|
61
|
-
/**
|
|
62
|
-
* The generic feedback form dialog: category + subject + body + an optional image
|
|
63
|
-
* attachment, with Ctrl/Cmd+Enter to submit. Domain-free — the app supplies the
|
|
64
|
-
* category options, labels and an `onSubmit` that talks to its own backend, plus
|
|
65
|
-
* an optional `contextSlot` for app-specific context (user, current URL, …).
|
|
66
|
-
*
|
|
67
|
-
* **A screenshot can be pasted straight in.** Ctrl/Cmd+V anywhere in the dialog
|
|
68
|
-
* takes an image off the clipboard and makes it the attachment, through the same
|
|
69
|
-
* validation and the same preview as the file picker. It is the gesture the two
|
|
70
|
-
* ways in did not cover: `onCaptureScreenshot` snapshots the *whole* app view,
|
|
71
|
-
* and the file picker needs a file — so somebody who wanted to show one panel,
|
|
72
|
-
* or one region of one, had to save a crop to disk first and then find it again
|
|
73
|
-
* (Steering Design feedback #39). The clipboard is where a region snip already
|
|
74
|
-
* is on every platform.
|
|
75
|
-
*/
|
|
76
|
-
declare function FeedbackDialog({ open, onClose, categories, category, onCategoryChange, labels: labelsProp, onSubmit, submitting, contextSlot, attachmentAccept, maxAttachmentBytes, onAttachmentError, onCaptureScreenshot, requireBody, }: {
|
|
77
|
-
open: boolean;
|
|
78
|
-
onClose: () => void;
|
|
79
|
-
categories: FeedbackCategoryOption[];
|
|
80
|
-
category: string;
|
|
81
|
-
onCategoryChange: (value: string) => void;
|
|
82
|
-
/** Prop > `<UiKitProvider labels={{ feedbackDialog, feedbackAttachment }}>` >
|
|
83
|
-
* English. Optional since 0.12.0; a whole `FeedbackDialogLabels` still fits. */
|
|
84
|
-
labels?: Partial<FeedbackDialogLabels>;
|
|
85
|
-
onSubmit: (data: FeedbackSubmission) => void | Promise<void>;
|
|
86
|
-
submitting?: boolean;
|
|
87
|
-
contextSlot?: ReactNode;
|
|
88
|
-
attachmentAccept?: string[];
|
|
89
|
-
maxAttachmentBytes?: number;
|
|
90
|
-
onAttachmentError?: (kind: "type" | "size") => void;
|
|
91
|
-
/**
|
|
92
|
-
* Optional: capture a screenshot of the underlying app view and return it as a
|
|
93
|
-
* File. When provided, a "Capture screenshot" button is shown next to "Add
|
|
94
|
-
* attachment"; the returned file is fed through the same validation + preview.
|
|
95
|
-
*/
|
|
96
|
-
onCaptureScreenshot?: () => Promise<File | null>;
|
|
97
|
-
/**
|
|
98
|
-
* `false`: a report with only a subject can be sent, and the body's label says it is
|
|
99
|
-
* optional (`bodyOptional`, unless `labels.body` is passed). Default `true`, the
|
|
100
|
-
* dialog's behaviour until 0.14.2 (keksdose K1: its backend takes title-only reports).
|
|
101
|
-
*/
|
|
102
|
-
requireBody?: boolean;
|
|
103
|
-
}): react.JSX.Element | null;
|
|
104
|
-
|
|
105
|
-
export { DEFAULT_FEEDBACK_DIALOG_LABELS, type FeedbackAttachmentLabels, type FeedbackCategoryOption, FeedbackDialog, type FeedbackDialogLabels, type FeedbackDialogTextLabels, type FeedbackSubmission };
|
|
1
|
+
import 'react';
|
|
2
|
+
export { b as DEFAULT_FEEDBACK_DIALOG_LABELS, j as FeedbackAttachmentLabels, k as FeedbackCategoryOption, l as FeedbackDialog, m as FeedbackDialogLabels, n as FeedbackDialogMultipleProps, o as FeedbackDialogProps, p as FeedbackDialogSingleProps, q as FeedbackDialogTextLabels, r as FeedbackMultipleSubmission, s as FeedbackSubmission } from '../feedback-attachment-WFiXJ8We.js';
|
|
@@ -7,6 +7,7 @@ import { useMediaQuery } from "../hooks/use-media-query.js";
|
|
|
7
7
|
import { useKitLabels } from "../i18n/kit-labels.js";
|
|
8
8
|
import {
|
|
9
9
|
DEFAULT_ATTACHMENT_ACCEPT,
|
|
10
|
+
DEFAULT_FEEDBACK_ATTACHMENT_LABELS,
|
|
10
11
|
DEFAULT_MAX_ATTACHMENT_BYTES,
|
|
11
12
|
FeedbackAttachmentField
|
|
12
13
|
} from "./feedback-attachment.js";
|
|
@@ -17,32 +18,37 @@ const DEFAULT_FEEDBACK_DIALOG_LABELS = {
|
|
|
17
18
|
body: "What happened?",
|
|
18
19
|
bodyOptional: "What happened? (optional)",
|
|
19
20
|
attachment: "Screenshot",
|
|
21
|
+
// No `attachments`: the multiple-mode heading is `feedbackAttachment.attachmentList`,
|
|
22
|
+
// and a default here would shadow a provider that translated only that one.
|
|
20
23
|
submitHint: "Ctrl/\u2318 + Enter to send",
|
|
21
24
|
cancel: "Cancel",
|
|
22
25
|
save: "Send"
|
|
23
26
|
};
|
|
24
|
-
function FeedbackDialog({
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
}) {
|
|
27
|
+
function FeedbackDialog(props) {
|
|
28
|
+
const {
|
|
29
|
+
open,
|
|
30
|
+
onClose,
|
|
31
|
+
categories,
|
|
32
|
+
category,
|
|
33
|
+
onCategoryChange,
|
|
34
|
+
labels: labelsProp,
|
|
35
|
+
submitting = false,
|
|
36
|
+
contextSlot,
|
|
37
|
+
attachmentAccept = DEFAULT_ATTACHMENT_ACCEPT,
|
|
38
|
+
maxAttachmentBytes = DEFAULT_MAX_ATTACHMENT_BYTES,
|
|
39
|
+
onCaptureScreenshot,
|
|
40
|
+
requireBody = true
|
|
41
|
+
} = props;
|
|
40
42
|
const [title, setTitle] = useState("");
|
|
41
43
|
const [body, setBody] = useState("");
|
|
42
44
|
const [attachment, setAttachment] = useState(null);
|
|
45
|
+
const [screenshot, setScreenshot] = useState(null);
|
|
46
|
+
const [files, setFiles] = useState([]);
|
|
43
47
|
const isMobile = useMediaQuery(PHONE_QUERY, false);
|
|
44
48
|
const labels = useKitLabels("feedbackDialog", DEFAULT_FEEDBACK_DIALOG_LABELS, labelsProp);
|
|
45
|
-
const
|
|
49
|
+
const attachmentText = useKitLabels("feedbackAttachment", DEFAULT_FEEDBACK_ATTACHMENT_LABELS, labelsProp);
|
|
50
|
+
const listHeading = labelsProp?.attachmentList ?? labels.attachments ?? attachmentText.attachmentList ?? DEFAULT_FEEDBACK_ATTACHMENT_LABELS.attachmentList;
|
|
51
|
+
const attachmentLabels = props.attachments === "multiple" ? { ...labelsProp, attachment: listHeading, attachmentList: listHeading } : { ...labelsProp, attachment: labels.attachment };
|
|
46
52
|
const [wasOpen, setWasOpen] = useState(open);
|
|
47
53
|
if (open !== wasOpen) {
|
|
48
54
|
setWasOpen(open);
|
|
@@ -50,11 +56,18 @@ function FeedbackDialog({
|
|
|
50
56
|
setTitle("");
|
|
51
57
|
setBody("");
|
|
52
58
|
setAttachment(null);
|
|
59
|
+
setScreenshot(null);
|
|
60
|
+
setFiles([]);
|
|
53
61
|
}
|
|
54
62
|
}
|
|
55
63
|
const canSubmit = !!title.trim() && (!requireBody || !!body.trim()) && !submitting;
|
|
56
64
|
const trySubmit = () => {
|
|
57
|
-
if (canSubmit)
|
|
65
|
+
if (!canSubmit) return;
|
|
66
|
+
if (props.attachments === "multiple") {
|
|
67
|
+
void props.onSubmit({ title, body, category, screenshot, attachments: files });
|
|
68
|
+
} else {
|
|
69
|
+
void props.onSubmit({ title, body, category, attachment });
|
|
70
|
+
}
|
|
58
71
|
};
|
|
59
72
|
if (!open) return null;
|
|
60
73
|
const categoryField = /* @__PURE__ */ jsx(Select, { label: labels.category, value: category, onChange: (e) => onCategoryChange(e.target.value), children: categories.map((c) => /* @__PURE__ */ jsx("option", { value: c.value, children: c.label }, c.value)) });
|
|
@@ -68,17 +81,36 @@ function FeedbackDialog({
|
|
|
68
81
|
onChange: (e) => setBody(e.target.value)
|
|
69
82
|
}
|
|
70
83
|
);
|
|
71
|
-
const
|
|
84
|
+
const fieldProps = {
|
|
85
|
+
labels: attachmentLabels,
|
|
86
|
+
accept: attachmentAccept,
|
|
87
|
+
maxBytes: maxAttachmentBytes,
|
|
88
|
+
onCaptureScreenshot,
|
|
89
|
+
// On `document`, not on the panel: the Modal focuses its own panel on open
|
|
90
|
+
// and traps Tab inside it, so while this dialog is up every paste in the
|
|
91
|
+
// page is meant for it — including the one made with nothing in
|
|
92
|
+
// particular focused, which never reaches a React `onPaste` on a child.
|
|
93
|
+
documentPaste: open
|
|
94
|
+
};
|
|
95
|
+
const attachmentField = props.attachments === "multiple" ? /* @__PURE__ */ jsx(
|
|
96
|
+
FeedbackAttachmentField,
|
|
97
|
+
{
|
|
98
|
+
...fieldProps,
|
|
99
|
+
multiple: true,
|
|
100
|
+
value: files,
|
|
101
|
+
onChange: setFiles,
|
|
102
|
+
max: props.maxAttachments,
|
|
103
|
+
screenshot,
|
|
104
|
+
onScreenshotChange: setScreenshot,
|
|
105
|
+
onError: props.onAttachmentError
|
|
106
|
+
}
|
|
107
|
+
) : /* @__PURE__ */ jsx(
|
|
72
108
|
FeedbackAttachmentField,
|
|
73
109
|
{
|
|
110
|
+
...fieldProps,
|
|
74
111
|
value: attachment,
|
|
75
112
|
onChange: setAttachment,
|
|
76
|
-
|
|
77
|
-
accept: attachmentAccept,
|
|
78
|
-
maxBytes: maxAttachmentBytes,
|
|
79
|
-
onError: onAttachmentError,
|
|
80
|
-
onCaptureScreenshot,
|
|
81
|
-
documentPaste: open
|
|
113
|
+
onError: props.onAttachmentError
|
|
82
114
|
}
|
|
83
115
|
);
|
|
84
116
|
return /* @__PURE__ */ jsxs(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/feedback/feedback-dialog.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { Button, Input, PHONE_QUERY, Select, Textarea } from \"../components/ui\";\nimport { Modal } from \"../components/modal\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport {\n DEFAULT_ATTACHMENT_ACCEPT,\n DEFAULT_MAX_ATTACHMENT_BYTES,\n FeedbackAttachmentField,\n} from \"./feedback-attachment\";\n\nexport interface FeedbackCategoryOption {\n value: string;\n label: string;\n}\n\nexport interface FeedbackAttachmentLabels {\n /** The heading over the field. Optional: a note editor puts the buttons\n * straight under its textarea, where a second heading is noise. */\n attachment?: string;\n attachmentAdd: string;\n /** Label for the \"capture screenshot\" button. Optional — falls back to the provider's\n * `feedbackAttachment.attachmentCapture`, then English. */\n attachmentCapture?: string;\n /** The line under the attachment buttons saying a screenshot can be pasted\n * straight in. Optional — falls back to the provider's `feedbackAttachment`, then English. */\n attachmentPaste?: string;\n attachmentRemove: string;\n}\n\nexport interface FeedbackDialogLabels extends FeedbackAttachmentLabels {\n title: string;\n category: string;\n subject: string;\n body: string;\n attachment: string;\n submitHint: string;\n cancel: string;\n save: string;\n}\n\n/**\n * The dialog's own strings — the `feedbackDialog` namespace of `<UiKitProvider\n * labels>` (0.12.0). The attachment keys are not repeated here: they are the\n * `feedbackAttachment` namespace's, which the field inside already reads.\n *\n * Before, every key was required at the call site, so each app restated ten strings\n * wherever it mounted the dialog (kastlan feedback-button.tsx built the object inline).\n */\nexport interface FeedbackDialogTextLabels {\n title: string;\n category: string;\n subject: string;\n body: string;\n /** The body's label when `requireBody={false}`: \"What happened? (optional)\".\n * Optional, so a complete `UiKitLabels` typed before 0.14.2 still compiles. */\n bodyOptional?: string;\n /** The heading over the attachment buttons. */\n attachment: string;\n /** The line beside the buttons naming the shortcut. */\n submitHint: string;\n cancel: string;\n save: string;\n}\n\nexport const DEFAULT_FEEDBACK_DIALOG_LABELS: FeedbackDialogTextLabels = {\n title: \"Send feedback\",\n category: \"Category\",\n subject: \"Subject\",\n body: \"What happened?\",\n bodyOptional: \"What happened? (optional)\",\n attachment: \"Screenshot\",\n submitHint: \"Ctrl/⌘ + Enter to send\",\n cancel: \"Cancel\",\n save: \"Send\",\n};\n\nexport interface FeedbackSubmission {\n title: string;\n body: string;\n category: string;\n attachment: File | null;\n}\n\n/**\n * The generic feedback form dialog: category + subject + body + an optional image\n * attachment, with Ctrl/Cmd+Enter to submit. Domain-free — the app supplies the\n * category options, labels and an `onSubmit` that talks to its own backend, plus\n * an optional `contextSlot` for app-specific context (user, current URL, …).\n *\n * **A screenshot can be pasted straight in.** Ctrl/Cmd+V anywhere in the dialog\n * takes an image off the clipboard and makes it the attachment, through the same\n * validation and the same preview as the file picker. It is the gesture the two\n * ways in did not cover: `onCaptureScreenshot` snapshots the *whole* app view,\n * and the file picker needs a file — so somebody who wanted to show one panel,\n * or one region of one, had to save a crop to disk first and then find it again\n * (Steering Design feedback #39). The clipboard is where a region snip already\n * is on every platform.\n */\nexport function FeedbackDialog({\n open,\n onClose,\n categories,\n category,\n onCategoryChange,\n labels: labelsProp,\n onSubmit,\n submitting = false,\n contextSlot,\n attachmentAccept = DEFAULT_ATTACHMENT_ACCEPT,\n maxAttachmentBytes = DEFAULT_MAX_ATTACHMENT_BYTES,\n onAttachmentError,\n onCaptureScreenshot,\n requireBody = true,\n}: {\n open: boolean;\n onClose: () => void;\n categories: FeedbackCategoryOption[];\n category: string;\n onCategoryChange: (value: string) => void;\n /** Prop > `<UiKitProvider labels={{ feedbackDialog, feedbackAttachment }}>` >\n * English. Optional since 0.12.0; a whole `FeedbackDialogLabels` still fits. */\n labels?: Partial<FeedbackDialogLabels>;\n onSubmit: (data: FeedbackSubmission) => void | Promise<void>;\n submitting?: boolean;\n contextSlot?: ReactNode;\n attachmentAccept?: string[];\n maxAttachmentBytes?: number;\n onAttachmentError?: (kind: \"type\" | \"size\") => void;\n /**\n * Optional: capture a screenshot of the underlying app view and return it as a\n * File. When provided, a \"Capture screenshot\" button is shown next to \"Add\n * attachment\"; the returned file is fed through the same validation + preview.\n */\n onCaptureScreenshot?: () => Promise<File | null>;\n /**\n * `false`: a report with only a subject can be sent, and the body's label says it is\n * optional (`bodyOptional`, unless `labels.body` is passed). Default `true`, the\n * dialog's behaviour until 0.14.2 (keksdose K1: its backend takes title-only reports).\n */\n requireBody?: boolean;\n}) {\n const [title, setTitle] = useState(\"\");\n const [body, setBody] = useState(\"\");\n const [attachment, setAttachment] = useState<File | null>(null);\n const isMobile = useMediaQuery(PHONE_QUERY, false);\n const labels = useKitLabels(\"feedbackDialog\", DEFAULT_FEEDBACK_DIALOG_LABELS, labelsProp);\n // The attachment field resolves its own keys from `feedbackAttachment`; it gets the\n // prop's (so a caller's `attachmentAdd` still wins) plus the resolved heading.\n const attachmentLabels = { ...labelsProp, attachment: labels.attachment };\n\n // Reset the form whenever the dialog is (re)opened — during render, on the\n // closed-to-open transition, so the old draft never paints for a frame.\n const [wasOpen, setWasOpen] = useState(open);\n if (open !== wasOpen) {\n setWasOpen(open);\n if (open) {\n setTitle(\"\");\n setBody(\"\");\n setAttachment(null);\n }\n }\n\n // Trimmed: a subject or body of spaces is empty (keksdose's API answers a blank title\n // with a 422, and a blank report is no report).\n const canSubmit = !!title.trim() && (!requireBody || !!body.trim()) && !submitting;\n const trySubmit = () => {\n if (canSubmit) void onSubmit({ title, body, category, attachment });\n };\n\n if (!open) return null;\n\n const categoryField = (\n <Select label={labels.category} value={category} onChange={(e) => onCategoryChange(e.target.value)}>\n {categories.map((c) => (\n <option key={c.value} value={c.value}>\n {c.label}\n </option>\n ))}\n </Select>\n );\n // On a phone the subject leads as a heading rather than as the second of two\n // identical boxes under a select (Keksdose feedback #179). `variant=\"display\"`\n // is a no-op above the phone breakpoint, so the desktop dialog is unchanged.\n const subjectField = (\n <Input label={labels.subject} value={title} onChange={(e) => setTitle(e.target.value)} variant=\"display\" />\n );\n const bodyField = (\n <Textarea\n rows={5}\n label={requireBody ? labels.body : (labelsProp?.body ?? labels.bodyOptional ?? labels.body)}\n value={body}\n onChange={(e) => setBody(e.target.value)}\n />\n );\n const attachmentField = (\n <FeedbackAttachmentField\n value={attachment}\n onChange={setAttachment}\n labels={attachmentLabels}\n accept={attachmentAccept}\n maxBytes={maxAttachmentBytes}\n onError={onAttachmentError}\n onCaptureScreenshot={onCaptureScreenshot}\n // On `document`, not on the panel: the Modal focuses its own panel on open\n // and traps Tab inside it, so while this dialog is up every paste in the\n // page is meant for it — including the one made with nothing in\n // particular focused, which never reaches a React `onPaste` on a child.\n documentPaste={open}\n />\n );\n\n return (\n <Modal\n onClose={onClose}\n // The one dialog whose subject is the page behind it (Keksdose dev#460: \"Make\n // the feedback dialog draggable so I can see behind it if it blocks\n // something\") — you are describing what is under it while you type.\n draggable\n onKeyDown={(e) => {\n if ((e.ctrlKey || e.metaKey) && e.key === \"Enter\") {\n e.preventDefault();\n trySubmit();\n }\n }}\n >\n {/* Also the drag handle: pressing anywhere on the panel's own chrome moves it,\n and the heading is the strip a user reaches for. */}\n <h2 className=\"mb-3 text-lg font-semibold\">{labels.title}</h2>\n <div className=\"space-y-3\">\n {isMobile ? (\n // Phone shape, the same reasoning as the transaction editor's (#177):\n // the desktop order is the DATA MODEL's order — category, then subject,\n // then body — but nobody opens this dialog to pick a category. What they\n // came to do is say the thing, so that leads; the classification and the\n // evidence follow, a tier down.\n <>\n {subjectField}\n {bodyField}\n <div className=\"space-y-3 border-t border-[var(--border)] pt-3\">\n {categoryField}\n {attachmentField}\n {contextSlot}\n </div>\n </>\n ) : (\n <>\n {categoryField}\n {subjectField}\n {bodyField}\n {attachmentField}\n {contextSlot}\n </>\n )}\n <div className=\"flex items-center justify-between gap-2\">\n <div className=\"text-xs text-[var(--text-placeholder)]\">{labels.submitHint}</div>\n <div className=\"flex gap-2\">\n <Button variant=\"ghost\" onClick={onClose}>\n {labels.cancel}\n </Button>\n <Button onClick={trySubmit} disabled={!canSubmit}>\n {labels.save}\n </Button>\n </div>\n </div>\n </div>\n </Modal>\n );\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../src/feedback/feedback-dialog.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { Button, Input, PHONE_QUERY, Select, Textarea } from \"../components/ui\";\nimport { Modal } from \"../components/modal\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport {\n DEFAULT_ATTACHMENT_ACCEPT,\n DEFAULT_FEEDBACK_ATTACHMENT_LABELS,\n DEFAULT_MAX_ATTACHMENT_BYTES,\n FeedbackAttachmentField,\n type FeedbackAttachmentError,\n} from \"./feedback-attachment\";\n\nexport interface FeedbackCategoryOption {\n value: string;\n label: string;\n}\n\nexport interface FeedbackAttachmentLabels {\n /** The heading over the field. Optional: a note editor puts the buttons\n * straight under its textarea, where a second heading is noise. */\n attachment?: string;\n attachmentAdd: string;\n /** Label for the \"capture screenshot\" button. Optional — falls back to the provider's\n * `feedbackAttachment.attachmentCapture`, then English. */\n attachmentCapture?: string;\n /** The line under the attachment buttons saying a screenshot can be pasted\n * straight in. Optional — falls back to the provider's `feedbackAttachment`, then English. */\n attachmentPaste?: string;\n attachmentRemove: string;\n /** `multiple` mode (0.15.5): the chip list's accessible name — and, in\n * `<FeedbackDialog attachments=\"multiple\">`, the heading over it (0.16.0). Optional,\n * as are the keys below — they fall back to the provider's `feedbackAttachment`,\n * then English. */\n attachmentList?: string;\n /** `multiple` mode (0.16.0): the screenshot slot's chip title, in place of its file name. */\n attachmentScreenshot?: string;\n /** `multiple` mode: one chip's remove button, given the file's name. */\n attachmentRemoveFile?: (name: string) => string;\n /** `multiple` mode: the line shown once `max` files are attached. */\n attachmentLimit?: (max: number) => string;\n}\n\nexport interface FeedbackDialogLabels extends FeedbackAttachmentLabels {\n title: string;\n category: string;\n subject: string;\n body: string;\n attachment: string;\n submitHint: string;\n cancel: string;\n save: string;\n /** @deprecated since 0.16.0 — use `attachmentList`, the one key for the heading and\n * the chip list it names. Still honoured: set, it wins over the provider's\n * `attachmentList` (but not over an `attachmentList` passed beside it). */\n attachments?: string;\n}\n\n/**\n * The dialog's own strings — the `feedbackDialog` namespace of `<UiKitProvider\n * labels>` (0.12.0). The attachment keys are not repeated here: they are the\n * `feedbackAttachment` namespace's, which the field inside already reads.\n *\n * Before, every key was required at the call site, so each app restated ten strings\n * wherever it mounted the dialog (kastlan feedback-button.tsx built the object inline).\n */\nexport interface FeedbackDialogTextLabels {\n title: string;\n category: string;\n subject: string;\n body: string;\n /** The body's label when `requireBody={false}`: \"What happened? (optional)\".\n * Optional, so a complete `UiKitLabels` typed before 0.14.2 still compiles. */\n bodyOptional?: string;\n /** The heading over the attachment buttons. */\n attachment: string;\n /** The line beside the buttons naming the shortcut. */\n submitHint: string;\n cancel: string;\n save: string;\n /** @deprecated since 0.16.0 — use `feedbackAttachment.attachmentList`. It and this\n * key were two names for one heading (\"Attachments\" over the chips that list names\n * \"Attachments\"), and a catalogue that translated one left the other English. Still\n * honoured when set: it wins over `feedbackAttachment.attachmentList`. */\n attachments?: string;\n}\n\nexport const DEFAULT_FEEDBACK_DIALOG_LABELS: FeedbackDialogTextLabels = {\n title: \"Send feedback\",\n category: \"Category\",\n subject: \"Subject\",\n body: \"What happened?\",\n bodyOptional: \"What happened? (optional)\",\n attachment: \"Screenshot\",\n // No `attachments`: the multiple-mode heading is `feedbackAttachment.attachmentList`,\n // and a default here would shadow a provider that translated only that one.\n submitHint: \"Ctrl/⌘ + Enter to send\",\n cancel: \"Cancel\",\n save: \"Send\",\n};\n\nexport interface FeedbackSubmission {\n title: string;\n body: string;\n category: string;\n attachment: File | null;\n}\n\n/**\n * What `onSubmit` gets under `attachments=\"multiple\"` (0.15.5): the screenshot and\n * the picked/pasted files apart, because an app files them differently — keksdose\n * attaches the screenshot to the report and the photos as its evidence list. No\n * `attachment`: there is no one file it could name.\n */\nexport interface FeedbackMultipleSubmission {\n title: string;\n body: string;\n category: string;\n /** What `onCaptureScreenshot` returned, or `null` — at most one. */\n screenshot: File | null;\n /** Picked and pasted files, in the order they were added; at most `maxAttachments`. */\n attachments: File[];\n}\n\ninterface FeedbackDialogBaseProps {\n open: boolean;\n onClose: () => void;\n categories: FeedbackCategoryOption[];\n category: string;\n onCategoryChange: (value: string) => void;\n /** Prop > `<UiKitProvider labels={{ feedbackDialog, feedbackAttachment }}>` >\n * English. Optional since 0.12.0; a whole `FeedbackDialogLabels` still fits. */\n labels?: Partial<FeedbackDialogLabels>;\n submitting?: boolean;\n contextSlot?: ReactNode;\n attachmentAccept?: string[];\n maxAttachmentBytes?: number;\n /**\n * Optional: capture a screenshot of the underlying app view and return it as a\n * File. When provided, a \"Capture screenshot\" button is shown next to \"Add\n * attachment\"; the returned file is fed through the same validation + preview.\n */\n onCaptureScreenshot?: () => Promise<File | null>;\n /**\n * `false`: a report with only a subject can be sent, and the body's label says it is\n * optional (`bodyOptional`, unless `labels.body` is passed). Default `true`, the\n * dialog's behaviour until 0.14.2 (keksdose K1: its backend takes title-only reports).\n */\n requireBody?: boolean;\n}\n\n/** One attachment — a screenshot, a picked or a pasted image; a second replaces\n * nothing, it has to wait for the first to be removed. The default. */\nexport interface FeedbackDialogSingleProps extends FeedbackDialogBaseProps {\n attachments?: \"single\";\n onSubmit: (data: FeedbackSubmission) => void | Promise<void>;\n onAttachmentError?: (kind: \"type\" | \"size\") => void;\n /** Multiple mode only — refused here rather than silently ignored. */\n maxAttachments?: never;\n}\n\n/**\n * One screenshot plus up to `maxAttachments` picked or pasted files (0.15.5, keksdose\n * dev#578: \"pasted two photos, the second overwrote the first\"). The capture button is\n * offered while there is no screenshot yet; the add button while there is room.\n */\nexport interface FeedbackDialogMultipleProps extends FeedbackDialogBaseProps {\n attachments: \"multiple\";\n /** Default `DEFAULT_MAX_ATTACHMENTS` (5). The screenshot does not count. */\n maxAttachments?: number;\n onSubmit: (data: FeedbackMultipleSubmission) => void | Promise<void>;\n /** `\"count\"`: more files arrived at once than there was room for; the surplus was dropped. */\n onAttachmentError?: (kind: FeedbackAttachmentError) => void;\n}\n\nexport type FeedbackDialogProps = FeedbackDialogSingleProps | FeedbackDialogMultipleProps;\n\n/**\n * The generic feedback form dialog: category + subject + body + an optional image\n * attachment, with Ctrl/Cmd+Enter to submit. Domain-free — the app supplies the\n * category options, labels and an `onSubmit` that talks to its own backend, plus\n * an optional `contextSlot` for app-specific context (user, current URL, …).\n *\n * **A screenshot can be pasted straight in.** Ctrl/Cmd+V anywhere in the dialog\n * takes an image off the clipboard and makes it the attachment, through the same\n * validation and the same preview as the file picker. It is the gesture the two\n * ways in did not cover: `onCaptureScreenshot` snapshots the *whole* app view,\n * and the file picker needs a file — so somebody who wanted to show one panel,\n * or one region of one, had to save a crop to disk first and then find it again\n * (Steering Design feedback #39). The clipboard is where a region snip already\n * is on every platform.\n *\n * **`attachments=\"multiple\"`** (0.15.5) takes several: every paste and pick adds a\n * chip, and `onSubmit` gets `{ screenshot, attachments }` ({@link\n * FeedbackMultipleSubmission}) instead of `attachment`. Opt-in, so a caller typed\n * against the one-file submission keeps compiling and behaving as before.\n */\nexport function FeedbackDialog(props: FeedbackDialogProps) {\n const {\n open,\n onClose,\n categories,\n category,\n onCategoryChange,\n labels: labelsProp,\n submitting = false,\n contextSlot,\n attachmentAccept = DEFAULT_ATTACHMENT_ACCEPT,\n maxAttachmentBytes = DEFAULT_MAX_ATTACHMENT_BYTES,\n onCaptureScreenshot,\n requireBody = true,\n } = props;\n const [title, setTitle] = useState(\"\");\n const [body, setBody] = useState(\"\");\n const [attachment, setAttachment] = useState<File | null>(null);\n // `attachments=\"multiple\"` only: the capture, apart from the picked/pasted files.\n const [screenshot, setScreenshot] = useState<File | null>(null);\n const [files, setFiles] = useState<File[]>([]);\n const isMobile = useMediaQuery(PHONE_QUERY, false);\n const labels = useKitLabels(\"feedbackDialog\", DEFAULT_FEEDBACK_DIALOG_LABELS, labelsProp);\n const attachmentText = useKitLabels(\"feedbackAttachment\", DEFAULT_FEEDBACK_ATTACHMENT_LABELS, labelsProp);\n // Under `multiple` the heading is `attachmentList` — a screenshot AND photos — which\n // also names the chip list beneath it: one string, so the two cannot disagree. The\n // deprecated `feedbackDialog.attachments` (prop or provider) still wins over the\n // provider's `attachmentList`, as it did before 0.16.0; an `attachmentList` prop wins\n // over both.\n const listHeading =\n labelsProp?.attachmentList ??\n labels.attachments ??\n attachmentText.attachmentList ??\n DEFAULT_FEEDBACK_ATTACHMENT_LABELS.attachmentList!;\n // The attachment field resolves its own keys from `feedbackAttachment`; it gets the\n // prop's (so a caller's `attachmentAdd` still wins) plus the resolved heading.\n const attachmentLabels =\n props.attachments === \"multiple\"\n ? { ...labelsProp, attachment: listHeading, attachmentList: listHeading }\n : { ...labelsProp, attachment: labels.attachment };\n\n // Reset the form whenever the dialog is (re)opened — during render, on the\n // closed-to-open transition, so the old draft never paints for a frame.\n const [wasOpen, setWasOpen] = useState(open);\n if (open !== wasOpen) {\n setWasOpen(open);\n if (open) {\n setTitle(\"\");\n setBody(\"\");\n setAttachment(null);\n setScreenshot(null);\n setFiles([]);\n }\n }\n\n // Trimmed: a subject or body of spaces is empty (keksdose's API answers a blank title\n // with a 422, and a blank report is no report).\n const canSubmit = !!title.trim() && (!requireBody || !!body.trim()) && !submitting;\n const trySubmit = () => {\n if (!canSubmit) return;\n if (props.attachments === \"multiple\") {\n void props.onSubmit({ title, body, category, screenshot, attachments: files });\n } else {\n void props.onSubmit({ title, body, category, attachment });\n }\n };\n\n if (!open) return null;\n\n const categoryField = (\n <Select label={labels.category} value={category} onChange={(e) => onCategoryChange(e.target.value)}>\n {categories.map((c) => (\n <option key={c.value} value={c.value}>\n {c.label}\n </option>\n ))}\n </Select>\n );\n // On a phone the subject leads as a heading rather than as the second of two\n // identical boxes under a select (Keksdose feedback #179). `variant=\"display\"`\n // is a no-op above the phone breakpoint, so the desktop dialog is unchanged.\n const subjectField = (\n <Input label={labels.subject} value={title} onChange={(e) => setTitle(e.target.value)} variant=\"display\" />\n );\n const bodyField = (\n <Textarea\n rows={5}\n label={requireBody ? labels.body : (labelsProp?.body ?? labels.bodyOptional ?? labels.body)}\n value={body}\n onChange={(e) => setBody(e.target.value)}\n />\n );\n const fieldProps = {\n labels: attachmentLabels,\n accept: attachmentAccept,\n maxBytes: maxAttachmentBytes,\n onCaptureScreenshot,\n // On `document`, not on the panel: the Modal focuses its own panel on open\n // and traps Tab inside it, so while this dialog is up every paste in the\n // page is meant for it — including the one made with nothing in\n // particular focused, which never reaches a React `onPaste` on a child.\n documentPaste: open,\n };\n const attachmentField =\n props.attachments === \"multiple\" ? (\n <FeedbackAttachmentField\n {...fieldProps}\n multiple\n value={files}\n onChange={setFiles}\n max={props.maxAttachments}\n // The capture goes to its own slot, so it is offered once and never crowds\n // out a photo; a paste is a photo (a region snip is chosen evidence, not \"the\n // screenshot\").\n screenshot={screenshot}\n onScreenshotChange={setScreenshot}\n onError={props.onAttachmentError}\n />\n ) : (\n <FeedbackAttachmentField\n {...fieldProps}\n value={attachment}\n onChange={setAttachment}\n onError={props.onAttachmentError}\n />\n );\n\n return (\n <Modal\n onClose={onClose}\n // The one dialog whose subject is the page behind it (Keksdose dev#460: \"Make\n // the feedback dialog draggable so I can see behind it if it blocks\n // something\") — you are describing what is under it while you type.\n draggable\n onKeyDown={(e) => {\n if ((e.ctrlKey || e.metaKey) && e.key === \"Enter\") {\n e.preventDefault();\n trySubmit();\n }\n }}\n >\n {/* Also the drag handle: pressing anywhere on the panel's own chrome moves it,\n and the heading is the strip a user reaches for. */}\n <h2 className=\"mb-3 text-lg font-semibold\">{labels.title}</h2>\n <div className=\"space-y-3\">\n {isMobile ? (\n // Phone shape, the same reasoning as the transaction editor's (#177):\n // the desktop order is the DATA MODEL's order — category, then subject,\n // then body — but nobody opens this dialog to pick a category. What they\n // came to do is say the thing, so that leads; the classification and the\n // evidence follow, a tier down.\n <>\n {subjectField}\n {bodyField}\n <div className=\"space-y-3 border-t border-[var(--border)] pt-3\">\n {categoryField}\n {attachmentField}\n {contextSlot}\n </div>\n </>\n ) : (\n <>\n {categoryField}\n {subjectField}\n {bodyField}\n {attachmentField}\n {contextSlot}\n </>\n )}\n <div className=\"flex items-center justify-between gap-2\">\n <div className=\"text-xs text-[var(--text-placeholder)]\">{labels.submitHint}</div>\n <div className=\"flex gap-2\">\n <Button variant=\"ghost\" onClick={onClose}>\n {labels.cancel}\n </Button>\n <Button onClick={trySubmit} disabled={!canSubmit}>\n {labels.save}\n </Button>\n </div>\n </div>\n </div>\n </Modal>\n );\n}\n"],"mappings":";AA8QQ,SA+EE,UA/EF,KAkFI,YAlFJ;AA9QR,SAAS,gBAAgB;AAEzB,SAAS,QAAQ,OAAO,aAAa,QAAQ,gBAAgB;AAC7D,SAAS,aAAa;AACtB,SAAS,qBAAqB;AAC9B,SAAS,oBAAoB;AAC7B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AA4EA,MAAM,iCAA2D;AAAA,EACtE,OAAO;AAAA,EACP,UAAU;AAAA,EACV,SAAS;AAAA,EACT,MAAM;AAAA,EACN,cAAc;AAAA,EACd,YAAY;AAAA;AAAA;AAAA,EAGZ,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,MAAM;AACR;AAkGO,SAAS,eAAe,OAA4B;AACzD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,aAAa;AAAA,IACb;AAAA,IACA,mBAAmB;AAAA,IACnB,qBAAqB;AAAA,IACrB;AAAA,IACA,cAAc;AAAA,EAChB,IAAI;AACJ,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,EAAE;AACrC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,EAAE;AACnC,QAAM,CAAC,YAAY,aAAa,IAAI,SAAsB,IAAI;AAE9D,QAAM,CAAC,YAAY,aAAa,IAAI,SAAsB,IAAI;AAC9D,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAiB,CAAC,CAAC;AAC7C,QAAM,WAAW,cAAc,aAAa,KAAK;AACjD,QAAM,SAAS,aAAa,kBAAkB,gCAAgC,UAAU;AACxF,QAAM,iBAAiB,aAAa,sBAAsB,oCAAoC,UAAU;AAMxG,QAAM,cACJ,YAAY,kBACZ,OAAO,eACP,eAAe,kBACf,mCAAmC;AAGrC,QAAM,mBACJ,MAAM,gBAAgB,aAClB,EAAE,GAAG,YAAY,YAAY,aAAa,gBAAgB,YAAY,IACtE,EAAE,GAAG,YAAY,YAAY,OAAO,WAAW;AAIrD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,IAAI;AAC3C,MAAI,SAAS,SAAS;AACpB,eAAW,IAAI;AACf,QAAI,MAAM;AACR,eAAS,EAAE;AACX,cAAQ,EAAE;AACV,oBAAc,IAAI;AAClB,oBAAc,IAAI;AAClB,eAAS,CAAC,CAAC;AAAA,IACb;AAAA,EACF;AAIA,QAAM,YAAY,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,eAAe,CAAC,CAAC,KAAK,KAAK,MAAM,CAAC;AACxE,QAAM,YAAY,MAAM;AACtB,QAAI,CAAC,UAAW;AAChB,QAAI,MAAM,gBAAgB,YAAY;AACpC,WAAK,MAAM,SAAS,EAAE,OAAO,MAAM,UAAU,YAAY,aAAa,MAAM,CAAC;AAAA,IAC/E,OAAO;AACL,WAAK,MAAM,SAAS,EAAE,OAAO,MAAM,UAAU,WAAW,CAAC;AAAA,IAC3D;AAAA,EACF;AAEA,MAAI,CAAC,KAAM,QAAO;AAElB,QAAM,gBACJ,oBAAC,UAAO,OAAO,OAAO,UAAU,OAAO,UAAU,UAAU,CAAC,MAAM,iBAAiB,EAAE,OAAO,KAAK,GAC9F,qBAAW,IAAI,CAAC,MACf,oBAAC,YAAqB,OAAO,EAAE,OAC5B,YAAE,SADQ,EAAE,KAEf,CACD,GACH;AAKF,QAAM,eACJ,oBAAC,SAAM,OAAO,OAAO,SAAS,OAAO,OAAO,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK,GAAG,SAAQ,WAAU;AAE3G,QAAM,YACJ;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN,OAAO,cAAc,OAAO,OAAQ,YAAY,QAAQ,OAAO,gBAAgB,OAAO;AAAA,MACtF,OAAO;AAAA,MACP,UAAU,CAAC,MAAM,QAAQ,EAAE,OAAO,KAAK;AAAA;AAAA,EACzC;AAEF,QAAM,aAAa;AAAA,IACjB,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,UAAU;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,eAAe;AAAA,EACjB;AACA,QAAM,kBACJ,MAAM,gBAAgB,aACpB;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,UAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,MACV,KAAK,MAAM;AAAA,MAIX;AAAA,MACA,oBAAoB;AAAA,MACpB,SAAS,MAAM;AAAA;AAAA,EACjB,IAEA;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAO;AAAA,MACP,UAAU;AAAA,MACV,SAAS,MAAM;AAAA;AAAA,EACjB;AAGJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MAIA,WAAS;AAAA,MACT,WAAW,CAAC,MAAM;AAChB,aAAK,EAAE,WAAW,EAAE,YAAY,EAAE,QAAQ,SAAS;AACjD,YAAE,eAAe;AACjB,oBAAU;AAAA,QACZ;AAAA,MACF;AAAA,MAIA;AAAA,4BAAC,QAAG,WAAU,8BAA8B,iBAAO,OAAM;AAAA,QACzD,qBAAC,SAAI,WAAU,aACZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAMC,iCACG;AAAA;AAAA,cACA;AAAA,cACD,qBAAC,SAAI,WAAU,kDACZ;AAAA;AAAA,gBACA;AAAA,gBACA;AAAA,iBACH;AAAA,eACF;AAAA,cAEA,iCACG;AAAA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,aACH;AAAA,UAEF,qBAAC,SAAI,WAAU,2CACb;AAAA,gCAAC,SAAI,WAAU,0CAA0C,iBAAO,YAAW;AAAA,YAC3E,qBAAC,SAAI,WAAU,cACb;AAAA,kCAAC,UAAO,SAAQ,SAAQ,SAAS,SAC9B,iBAAO,QACV;AAAA,cACA,oBAAC,UAAO,SAAS,WAAW,UAAU,CAAC,WACpC,iBAAO,MACV;AAAA,eACF;AAAA,aACF;AAAA,WACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { ReactNode } from 'react';
|
|
3
3
|
import { LucideIcon } from 'lucide-react';
|
|
4
|
-
import { FeedbackAttachmentLabels } from '
|
|
4
|
+
import { j as FeedbackAttachmentLabels } from '../feedback-attachment-WFiXJ8We.js';
|
|
5
5
|
|
|
6
6
|
/**
|
|
7
7
|
* The feedback **inbox**, as the parts two apps were each writing separately.
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
+
import { j as FeedbackAttachmentLabels } from '../feedback-attachment-WFiXJ8We.js';
|
|
2
|
+
import { FeedbackNoteAttachment } from './feedback-inbox.js';
|
|
1
3
|
import * as react from 'react';
|
|
2
4
|
import { ReactNode, Ref } from 'react';
|
|
3
|
-
import { FeedbackNoteAttachment } from './feedback-inbox.js';
|
|
4
|
-
import { FeedbackAttachmentLabels } from './feedback-dialog.js';
|
|
5
5
|
import 'lucide-react';
|
|
6
6
|
|
|
7
7
|
/**
|
|
@@ -0,0 +1,302 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { ReactNode, RefObject } from 'react';
|
|
3
|
+
|
|
4
|
+
interface FeedbackCategoryOption {
|
|
5
|
+
value: string;
|
|
6
|
+
label: string;
|
|
7
|
+
}
|
|
8
|
+
interface FeedbackAttachmentLabels {
|
|
9
|
+
/** The heading over the field. Optional: a note editor puts the buttons
|
|
10
|
+
* straight under its textarea, where a second heading is noise. */
|
|
11
|
+
attachment?: string;
|
|
12
|
+
attachmentAdd: string;
|
|
13
|
+
/** Label for the "capture screenshot" button. Optional — falls back to the provider's
|
|
14
|
+
* `feedbackAttachment.attachmentCapture`, then English. */
|
|
15
|
+
attachmentCapture?: string;
|
|
16
|
+
/** The line under the attachment buttons saying a screenshot can be pasted
|
|
17
|
+
* straight in. Optional — falls back to the provider's `feedbackAttachment`, then English. */
|
|
18
|
+
attachmentPaste?: string;
|
|
19
|
+
attachmentRemove: string;
|
|
20
|
+
/** `multiple` mode (0.15.5): the chip list's accessible name — and, in
|
|
21
|
+
* `<FeedbackDialog attachments="multiple">`, the heading over it (0.16.0). Optional,
|
|
22
|
+
* as are the keys below — they fall back to the provider's `feedbackAttachment`,
|
|
23
|
+
* then English. */
|
|
24
|
+
attachmentList?: string;
|
|
25
|
+
/** `multiple` mode (0.16.0): the screenshot slot's chip title, in place of its file name. */
|
|
26
|
+
attachmentScreenshot?: string;
|
|
27
|
+
/** `multiple` mode: one chip's remove button, given the file's name. */
|
|
28
|
+
attachmentRemoveFile?: (name: string) => string;
|
|
29
|
+
/** `multiple` mode: the line shown once `max` files are attached. */
|
|
30
|
+
attachmentLimit?: (max: number) => string;
|
|
31
|
+
}
|
|
32
|
+
interface FeedbackDialogLabels extends FeedbackAttachmentLabels {
|
|
33
|
+
title: string;
|
|
34
|
+
category: string;
|
|
35
|
+
subject: string;
|
|
36
|
+
body: string;
|
|
37
|
+
attachment: string;
|
|
38
|
+
submitHint: string;
|
|
39
|
+
cancel: string;
|
|
40
|
+
save: string;
|
|
41
|
+
/** @deprecated since 0.16.0 — use `attachmentList`, the one key for the heading and
|
|
42
|
+
* the chip list it names. Still honoured: set, it wins over the provider's
|
|
43
|
+
* `attachmentList` (but not over an `attachmentList` passed beside it). */
|
|
44
|
+
attachments?: string;
|
|
45
|
+
}
|
|
46
|
+
/**
|
|
47
|
+
* The dialog's own strings — the `feedbackDialog` namespace of `<UiKitProvider
|
|
48
|
+
* labels>` (0.12.0). The attachment keys are not repeated here: they are the
|
|
49
|
+
* `feedbackAttachment` namespace's, which the field inside already reads.
|
|
50
|
+
*
|
|
51
|
+
* Before, every key was required at the call site, so each app restated ten strings
|
|
52
|
+
* wherever it mounted the dialog (kastlan feedback-button.tsx built the object inline).
|
|
53
|
+
*/
|
|
54
|
+
interface FeedbackDialogTextLabels {
|
|
55
|
+
title: string;
|
|
56
|
+
category: string;
|
|
57
|
+
subject: string;
|
|
58
|
+
body: string;
|
|
59
|
+
/** The body's label when `requireBody={false}`: "What happened? (optional)".
|
|
60
|
+
* Optional, so a complete `UiKitLabels` typed before 0.14.2 still compiles. */
|
|
61
|
+
bodyOptional?: string;
|
|
62
|
+
/** The heading over the attachment buttons. */
|
|
63
|
+
attachment: string;
|
|
64
|
+
/** The line beside the buttons naming the shortcut. */
|
|
65
|
+
submitHint: string;
|
|
66
|
+
cancel: string;
|
|
67
|
+
save: string;
|
|
68
|
+
/** @deprecated since 0.16.0 — use `feedbackAttachment.attachmentList`. It and this
|
|
69
|
+
* key were two names for one heading ("Attachments" over the chips that list names
|
|
70
|
+
* "Attachments"), and a catalogue that translated one left the other English. Still
|
|
71
|
+
* honoured when set: it wins over `feedbackAttachment.attachmentList`. */
|
|
72
|
+
attachments?: string;
|
|
73
|
+
}
|
|
74
|
+
declare const DEFAULT_FEEDBACK_DIALOG_LABELS: FeedbackDialogTextLabels;
|
|
75
|
+
interface FeedbackSubmission {
|
|
76
|
+
title: string;
|
|
77
|
+
body: string;
|
|
78
|
+
category: string;
|
|
79
|
+
attachment: File | null;
|
|
80
|
+
}
|
|
81
|
+
/**
|
|
82
|
+
* What `onSubmit` gets under `attachments="multiple"` (0.15.5): the screenshot and
|
|
83
|
+
* the picked/pasted files apart, because an app files them differently — keksdose
|
|
84
|
+
* attaches the screenshot to the report and the photos as its evidence list. No
|
|
85
|
+
* `attachment`: there is no one file it could name.
|
|
86
|
+
*/
|
|
87
|
+
interface FeedbackMultipleSubmission {
|
|
88
|
+
title: string;
|
|
89
|
+
body: string;
|
|
90
|
+
category: string;
|
|
91
|
+
/** What `onCaptureScreenshot` returned, or `null` — at most one. */
|
|
92
|
+
screenshot: File | null;
|
|
93
|
+
/** Picked and pasted files, in the order they were added; at most `maxAttachments`. */
|
|
94
|
+
attachments: File[];
|
|
95
|
+
}
|
|
96
|
+
interface FeedbackDialogBaseProps {
|
|
97
|
+
open: boolean;
|
|
98
|
+
onClose: () => void;
|
|
99
|
+
categories: FeedbackCategoryOption[];
|
|
100
|
+
category: string;
|
|
101
|
+
onCategoryChange: (value: string) => void;
|
|
102
|
+
/** Prop > `<UiKitProvider labels={{ feedbackDialog, feedbackAttachment }}>` >
|
|
103
|
+
* English. Optional since 0.12.0; a whole `FeedbackDialogLabels` still fits. */
|
|
104
|
+
labels?: Partial<FeedbackDialogLabels>;
|
|
105
|
+
submitting?: boolean;
|
|
106
|
+
contextSlot?: ReactNode;
|
|
107
|
+
attachmentAccept?: string[];
|
|
108
|
+
maxAttachmentBytes?: number;
|
|
109
|
+
/**
|
|
110
|
+
* Optional: capture a screenshot of the underlying app view and return it as a
|
|
111
|
+
* File. When provided, a "Capture screenshot" button is shown next to "Add
|
|
112
|
+
* attachment"; the returned file is fed through the same validation + preview.
|
|
113
|
+
*/
|
|
114
|
+
onCaptureScreenshot?: () => Promise<File | null>;
|
|
115
|
+
/**
|
|
116
|
+
* `false`: a report with only a subject can be sent, and the body's label says it is
|
|
117
|
+
* optional (`bodyOptional`, unless `labels.body` is passed). Default `true`, the
|
|
118
|
+
* dialog's behaviour until 0.14.2 (keksdose K1: its backend takes title-only reports).
|
|
119
|
+
*/
|
|
120
|
+
requireBody?: boolean;
|
|
121
|
+
}
|
|
122
|
+
/** One attachment — a screenshot, a picked or a pasted image; a second replaces
|
|
123
|
+
* nothing, it has to wait for the first to be removed. The default. */
|
|
124
|
+
interface FeedbackDialogSingleProps extends FeedbackDialogBaseProps {
|
|
125
|
+
attachments?: "single";
|
|
126
|
+
onSubmit: (data: FeedbackSubmission) => void | Promise<void>;
|
|
127
|
+
onAttachmentError?: (kind: "type" | "size") => void;
|
|
128
|
+
/** Multiple mode only — refused here rather than silently ignored. */
|
|
129
|
+
maxAttachments?: never;
|
|
130
|
+
}
|
|
131
|
+
/**
|
|
132
|
+
* One screenshot plus up to `maxAttachments` picked or pasted files (0.15.5, keksdose
|
|
133
|
+
* dev#578: "pasted two photos, the second overwrote the first"). The capture button is
|
|
134
|
+
* offered while there is no screenshot yet; the add button while there is room.
|
|
135
|
+
*/
|
|
136
|
+
interface FeedbackDialogMultipleProps extends FeedbackDialogBaseProps {
|
|
137
|
+
attachments: "multiple";
|
|
138
|
+
/** Default `DEFAULT_MAX_ATTACHMENTS` (5). The screenshot does not count. */
|
|
139
|
+
maxAttachments?: number;
|
|
140
|
+
onSubmit: (data: FeedbackMultipleSubmission) => void | Promise<void>;
|
|
141
|
+
/** `"count"`: more files arrived at once than there was room for; the surplus was dropped. */
|
|
142
|
+
onAttachmentError?: (kind: FeedbackAttachmentError) => void;
|
|
143
|
+
}
|
|
144
|
+
type FeedbackDialogProps = FeedbackDialogSingleProps | FeedbackDialogMultipleProps;
|
|
145
|
+
/**
|
|
146
|
+
* The generic feedback form dialog: category + subject + body + an optional image
|
|
147
|
+
* attachment, with Ctrl/Cmd+Enter to submit. Domain-free — the app supplies the
|
|
148
|
+
* category options, labels and an `onSubmit` that talks to its own backend, plus
|
|
149
|
+
* an optional `contextSlot` for app-specific context (user, current URL, …).
|
|
150
|
+
*
|
|
151
|
+
* **A screenshot can be pasted straight in.** Ctrl/Cmd+V anywhere in the dialog
|
|
152
|
+
* takes an image off the clipboard and makes it the attachment, through the same
|
|
153
|
+
* validation and the same preview as the file picker. It is the gesture the two
|
|
154
|
+
* ways in did not cover: `onCaptureScreenshot` snapshots the *whole* app view,
|
|
155
|
+
* and the file picker needs a file — so somebody who wanted to show one panel,
|
|
156
|
+
* or one region of one, had to save a crop to disk first and then find it again
|
|
157
|
+
* (Steering Design feedback #39). The clipboard is where a region snip already
|
|
158
|
+
* is on every platform.
|
|
159
|
+
*
|
|
160
|
+
* **`attachments="multiple"`** (0.15.5) takes several: every paste and pick adds a
|
|
161
|
+
* chip, and `onSubmit` gets `{ screenshot, attachments }` ({@link
|
|
162
|
+
* FeedbackMultipleSubmission}) instead of `attachment`. Opt-in, so a caller typed
|
|
163
|
+
* against the one-file submission keeps compiling and behaving as before.
|
|
164
|
+
*/
|
|
165
|
+
declare function FeedbackDialog(props: FeedbackDialogProps): react.JSX.Element | null;
|
|
166
|
+
|
|
167
|
+
declare const DEFAULT_ATTACHMENT_ACCEPT: string[];
|
|
168
|
+
declare const DEFAULT_MAX_ATTACHMENT_BYTES: number;
|
|
169
|
+
/** How many files `<FeedbackAttachmentField multiple>` takes when `max` is not given
|
|
170
|
+
* (0.15.5). Five photos of one problem is already a lot to look through; a report
|
|
171
|
+
* that needs more is a conversation, which the thread is for. */
|
|
172
|
+
declare const DEFAULT_MAX_ATTACHMENTS = 5;
|
|
173
|
+
/**
|
|
174
|
+
* The field's own strings — the `feedbackAttachment` namespace of `<UiKitProvider
|
|
175
|
+
* labels>`. The keys are {@link FeedbackAttachmentLabels}' own, so the `labels` prop
|
|
176
|
+
* (and a whole `FeedbackDialogLabels` handed down by the dialog) merges over them
|
|
177
|
+
* one to one. The optional heading, `attachment`, stays a prop: a note editor puts
|
|
178
|
+
* the buttons straight under its textarea and wants none.
|
|
179
|
+
*
|
|
180
|
+
* Before 0.7.0 the two optional keys fell back to hard-coded English, so a German app
|
|
181
|
+
* that relied on its provider got "Capture screenshot" under a German form.
|
|
182
|
+
*
|
|
183
|
+
* The three keys added in 0.15.5 for `multiple` mode are optional, so a complete
|
|
184
|
+
* `UiKitLabels` typed before it still compiles; they fall back to English. So is
|
|
185
|
+
* `attachmentScreenshot` (0.16.0).
|
|
186
|
+
*/
|
|
187
|
+
interface FeedbackAttachmentFieldLabels {
|
|
188
|
+
attachmentAdd: string;
|
|
189
|
+
attachmentCapture: string;
|
|
190
|
+
attachmentPaste: string;
|
|
191
|
+
attachmentRemove: string;
|
|
192
|
+
/** `multiple` mode: the accessible name of the list of chosen files — and, since
|
|
193
|
+
* 0.16.0, the heading `<FeedbackDialog attachments="multiple">` puts over it. */
|
|
194
|
+
attachmentList?: string;
|
|
195
|
+
/** `multiple` mode (0.16.0): what the screenshot slot's chip is called — "Screenshot"
|
|
196
|
+
* rather than the capture's file name ("screenshot.webp"), which says nothing a
|
|
197
|
+
* reporter chose. The file name stays as the chip's second line. */
|
|
198
|
+
attachmentScreenshot?: string;
|
|
199
|
+
/** `multiple` mode: one chip's remove button — "Remove photo.jpg". Named per file,
|
|
200
|
+
* because five buttons all called "Remove attachment" say nothing about which. */
|
|
201
|
+
attachmentRemoveFile?: (name: string) => string;
|
|
202
|
+
/** `multiple` mode: the line shown in place of the add buttons once `max` is reached. */
|
|
203
|
+
attachmentLimit?: (max: number) => string;
|
|
204
|
+
}
|
|
205
|
+
declare const DEFAULT_FEEDBACK_ATTACHMENT_LABELS: FeedbackAttachmentFieldLabels;
|
|
206
|
+
/** Why a file was turned away. `"count"` only ever comes from `multiple` mode: more
|
|
207
|
+
* files arrived at once than `max` left room for, and the surplus was dropped. */
|
|
208
|
+
type FeedbackAttachmentError = "type" | "size" | "count";
|
|
209
|
+
interface FeedbackAttachmentFieldBaseProps {
|
|
210
|
+
/** Prop > `<UiKitProvider labels={{ feedbackAttachment }}>` > English. Optional
|
|
211
|
+
* since 0.7.0; `attachment` (the heading) is only ever read from here. */
|
|
212
|
+
labels?: Partial<FeedbackAttachmentLabels>;
|
|
213
|
+
accept?: string[];
|
|
214
|
+
maxBytes?: number;
|
|
215
|
+
/** Snapshot the app view behind this and return it as a File. A "Capture
|
|
216
|
+
* screenshot" button appears only when it is given. */
|
|
217
|
+
onCaptureScreenshot?: () => Promise<File | null>;
|
|
218
|
+
/** Listen for the paste on `document` rather than on this field's own
|
|
219
|
+
* subtree. For a modal, which owns the whole page while it is up. */
|
|
220
|
+
documentPaste?: boolean;
|
|
221
|
+
/** Listen for the paste within this element's subtree rather than this
|
|
222
|
+
* field's own — for a field standing *beside* the text box a paste is made
|
|
223
|
+
* in, whose common parent is where the event bubbles to. Ignored when
|
|
224
|
+
* `documentPaste` is set. */
|
|
225
|
+
pasteFrom?: RefObject<HTMLElement | null>;
|
|
226
|
+
className?: string;
|
|
227
|
+
}
|
|
228
|
+
/** One file: choosing a second means removing the first. The field's only mode until 0.15.5. */
|
|
229
|
+
interface FeedbackAttachmentFieldSingleProps extends FeedbackAttachmentFieldBaseProps {
|
|
230
|
+
multiple?: false;
|
|
231
|
+
value: File | null;
|
|
232
|
+
onChange: (file: File | null) => void;
|
|
233
|
+
onError?: (kind: "type" | "size") => void;
|
|
234
|
+
max?: never;
|
|
235
|
+
screenshot?: never;
|
|
236
|
+
onScreenshotChange?: never;
|
|
237
|
+
}
|
|
238
|
+
/**
|
|
239
|
+
* Several files (0.15.5, keksdose dev#578: "pasted two photos, the second overwrote
|
|
240
|
+
* the first"). Every way in ADDS — a pick of several files, a paste, a capture — up to
|
|
241
|
+
* `max`, and each file is a removable chip.
|
|
242
|
+
*/
|
|
243
|
+
interface FeedbackAttachmentFieldMultipleProps extends FeedbackAttachmentFieldBaseProps {
|
|
244
|
+
multiple: true;
|
|
245
|
+
value: File[];
|
|
246
|
+
onChange: (files: File[]) => void;
|
|
247
|
+
/** How many files `value` may hold. Default {@link DEFAULT_MAX_ATTACHMENTS} (5). The
|
|
248
|
+
* add buttons and the paste hint are offered only while there is room. */
|
|
249
|
+
max?: number;
|
|
250
|
+
/** Per file: a rejected one is reported and the others are still added. */
|
|
251
|
+
onError?: (kind: FeedbackAttachmentError) => void;
|
|
252
|
+
/**
|
|
253
|
+
* A separate slot for THE screenshot, outside `value` and `max`. Given
|
|
254
|
+
* `onScreenshotChange`, what `onCaptureScreenshot` returns lands here instead of in
|
|
255
|
+
* `value`, shown as the first chip, and the capture button is offered only while the
|
|
256
|
+
* slot is empty — a second snapshot of the same view is not more evidence. This is
|
|
257
|
+
* how `<FeedbackDialog attachments="multiple">` keeps the screenshot apart from the
|
|
258
|
+
* photos; a form built from the parts can do the same.
|
|
259
|
+
*/
|
|
260
|
+
screenshot?: File | null;
|
|
261
|
+
onScreenshotChange?: (file: File | null) => void;
|
|
262
|
+
}
|
|
263
|
+
type FeedbackAttachmentFieldProps = FeedbackAttachmentFieldSingleProps | FeedbackAttachmentFieldMultipleProps;
|
|
264
|
+
/**
|
|
265
|
+
* Picking one picture: the file dialog, a capture of the app view, or a paste.
|
|
266
|
+
* With `multiple`, picking several (see {@link FeedbackAttachmentFieldMultipleProps}).
|
|
267
|
+
*
|
|
268
|
+
* Lifted out of {@link FeedbackDialog} so the *reply* half of the feature can
|
|
269
|
+
* have it too (Steering Design feedback #128). A report is a conversation — it
|
|
270
|
+
* is filed, it is answered, and the reporter sends it back saying that is not
|
|
271
|
+
* what they meant — and the screenshot showing what they mean is taken at
|
|
272
|
+
* whichever of those points they looked. Only the first of them had a way to
|
|
273
|
+
* attach one, so everything after it had to be described in words.
|
|
274
|
+
*
|
|
275
|
+
* **Three ways in, and they are three because no one of them covers the others.**
|
|
276
|
+
* The file dialog needs a file on disk; `onCaptureScreenshot` snapshots the
|
|
277
|
+
* *whole* app view; and the clipboard is where a region snip already is on every
|
|
278
|
+
* platform (Steering Design feedback #39). Somebody who wanted to show one panel
|
|
279
|
+
* had to save a crop and then find it again.
|
|
280
|
+
*
|
|
281
|
+
* `documentPaste` and `pasteFrom` decide where the paste is listened for, and
|
|
282
|
+
* it is a real choice rather than a flag with a default. A modal traps focus,
|
|
283
|
+
* so while it is up every paste in the page is meant for it — including one
|
|
284
|
+
* made with nothing in particular focused, which never reaches a React
|
|
285
|
+
* `onPaste` on a child: that is `documentPaste`. An editor **inline on a
|
|
286
|
+
* page** is not that: the page around it has its own fields, so it listens
|
|
287
|
+
* within its own subtree and a paste elsewhere stays where it was aimed. But
|
|
288
|
+
* "its own subtree" has to include the text box the paste is actually made in,
|
|
289
|
+
* and that box is this field's *sibling*, not its child — a paste in it bubbles
|
|
290
|
+
* to their common parent and never through here. `pasteFrom` is that parent
|
|
291
|
+
* (Steering Design feedback #140): the element whose subtree is listened to,
|
|
292
|
+
* handed in by whoever renders both the box and this field side by side.
|
|
293
|
+
*/
|
|
294
|
+
declare function FeedbackAttachmentField(props: FeedbackAttachmentFieldProps): react.JSX.Element;
|
|
295
|
+
/** What a pasted image is called once it is an attachment.
|
|
296
|
+
*
|
|
297
|
+
* The extension is read off the mime type rather than assumed to be `.png`:
|
|
298
|
+
* Safari puts TIFF on the clipboard and a file called `pasted.png` that is not
|
|
299
|
+
* a PNG is one the receiving end opens wrong. */
|
|
300
|
+
declare function pastedName(type: string): string;
|
|
301
|
+
|
|
302
|
+
export { DEFAULT_ATTACHMENT_ACCEPT as D, type FeedbackAttachmentError as F, DEFAULT_FEEDBACK_ATTACHMENT_LABELS as a, DEFAULT_FEEDBACK_DIALOG_LABELS as b, DEFAULT_MAX_ATTACHMENTS as c, DEFAULT_MAX_ATTACHMENT_BYTES as d, FeedbackAttachmentField as e, type FeedbackAttachmentFieldLabels as f, type FeedbackAttachmentFieldMultipleProps as g, type FeedbackAttachmentFieldProps as h, type FeedbackAttachmentFieldSingleProps as i, type FeedbackAttachmentLabels as j, type FeedbackCategoryOption as k, FeedbackDialog as l, type FeedbackDialogLabels as m, type FeedbackDialogMultipleProps as n, type FeedbackDialogProps as o, type FeedbackDialogSingleProps as p, type FeedbackDialogTextLabels as q, type FeedbackMultipleSubmission as r, type FeedbackSubmission as s, pastedName as t };
|
package/dist/feedback.d.ts
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
export { DEFAULT_ATTACHMENT_ACCEPT, DEFAULT_FEEDBACK_ATTACHMENT_LABELS, DEFAULT_MAX_ATTACHMENT_BYTES, FeedbackAttachmentField, FeedbackAttachmentFieldLabels, pastedName } from './feedback
|
|
2
|
-
export { DEFAULT_FEEDBACK_DIALOG_LABELS, FeedbackAttachmentLabels, FeedbackCategoryOption, FeedbackDialog, FeedbackDialogLabels, FeedbackDialogTextLabels, FeedbackSubmission } from './feedback/feedback-dialog.js';
|
|
1
|
+
export { D as DEFAULT_ATTACHMENT_ACCEPT, a as DEFAULT_FEEDBACK_ATTACHMENT_LABELS, b as DEFAULT_FEEDBACK_DIALOG_LABELS, c as DEFAULT_MAX_ATTACHMENTS, d as DEFAULT_MAX_ATTACHMENT_BYTES, F as FeedbackAttachmentError, e as FeedbackAttachmentField, f as FeedbackAttachmentFieldLabels, g as FeedbackAttachmentFieldMultipleProps, h as FeedbackAttachmentFieldProps, i as FeedbackAttachmentFieldSingleProps, j as FeedbackAttachmentLabels, k as FeedbackCategoryOption, l as FeedbackDialog, m as FeedbackDialogLabels, n as FeedbackDialogMultipleProps, o as FeedbackDialogProps, p as FeedbackDialogSingleProps, q as FeedbackDialogTextLabels, r as FeedbackMultipleSubmission, s as FeedbackSubmission, t as pastedName } from './feedback-attachment-WFiXJ8We.js';
|
|
3
2
|
export { FEEDBACK_CATEGORY_META, FEEDBACK_CATEGORY_ORDER, FEEDBACK_STATUS_META, FEEDBACK_STATUS_ORDER, FeedbackCategory, FeedbackCategoryBadge, FeedbackDetail, FeedbackDetailSection, FeedbackNoteAttachment, FeedbackNoteEditor, FeedbackProse, FeedbackStatus, FeedbackStatusBadge, FeedbackStatusTransitions, feedbackCategoryRank, nextFeedbackStatus, selectableFeedbackStatuses, visibleFeedbackStatuses } from './feedback/feedback-inbox.js';
|
|
4
3
|
export { DEFAULT_FEEDBACK_COMPOSER_LABELS, DEFAULT_FEEDBACK_THREAD_LABELS, FeedbackComposer, FeedbackComposerAttachment, FeedbackComposerHandle, FeedbackComposerLabels, FeedbackComposerProps, FeedbackThread, FeedbackThreadAttachment, FeedbackThreadEvent, FeedbackThreadItem, FeedbackThreadLabels, FeedbackThreadMessage, FeedbackThreadProps } from './feedback/feedback-thread.js';
|
|
5
4
|
import 'react';
|