@eifi1/ui-kit 0.22.0 → 0.23.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 +42 -25
- package/dist/chart.d.ts +11 -8
- package/dist/components/amount-input.d.ts +28 -8
- package/dist/components/amount-input.js +3 -1
- package/dist/components/amount-input.js.map +1 -1
- package/dist/components/autocomplete.d.ts +21 -0
- package/dist/components/autocomplete.js +128 -103
- package/dist/components/autocomplete.js.map +1 -1
- package/dist/components/button-group.d.ts +11 -8
- package/dist/components/calculator.d.ts +11 -8
- package/dist/components/column-mapper.d.ts +182 -0
- package/dist/components/column-mapper.js +375 -0
- package/dist/components/column-mapper.js.map +1 -0
- package/dist/components/combobox-core.d.ts +39 -2
- package/dist/components/combobox-core.js +29 -6
- package/dist/components/combobox-core.js.map +1 -1
- package/dist/components/combobox.d.ts +80 -2
- package/dist/components/combobox.js +448 -311
- package/dist/components/combobox.js.map +1 -1
- package/dist/components/confirm-dialog.d.ts +11 -8
- package/dist/components/confirm-dialog.js +7 -8
- package/dist/components/confirm-dialog.js.map +1 -1
- package/dist/components/copy-button.d.ts +8 -5
- package/dist/components/country-select.d.ts +50 -7
- package/dist/components/country-select.js +65 -9
- package/dist/components/country-select.js.map +1 -1
- package/dist/components/danger-confirm.d.ts +11 -8
- package/dist/components/danger-confirm.js +13 -3
- package/dist/components/danger-confirm.js.map +1 -1
- package/dist/components/date-picker.d.ts +41 -0
- package/dist/components/date-picker.js +269 -8
- package/dist/components/date-picker.js.map +1 -1
- package/dist/components/entity-combobox.d.ts +35 -1
- package/dist/components/entity-combobox.js +148 -112
- package/dist/components/entity-combobox.js.map +1 -1
- package/dist/components/facing-pair.d.ts +11 -8
- package/dist/components/field-parts.d.ts +116 -6
- package/dist/components/field-parts.js +84 -0
- package/dist/components/field-parts.js.map +1 -1
- package/dist/components/field-strip.d.ts +105 -0
- package/dist/components/field-strip.js +46 -0
- package/dist/components/field-strip.js.map +1 -0
- package/dist/components/file-button.d.ts +11 -8
- package/dist/components/file-dropzone.d.ts +11 -8
- package/dist/components/form-actions.d.ts +10 -7
- package/dist/components/form-actions.js +8 -2
- package/dist/components/form-actions.js.map +1 -1
- package/dist/components/iban-input.d.ts +11 -8
- package/dist/components/icon-picker.d.ts +10 -1
- package/dist/components/icon-picker.js +12 -4
- package/dist/components/icon-picker.js.map +1 -1
- package/dist/components/language-select.d.ts +11 -8
- package/dist/components/money-field.d.ts +14 -8
- package/dist/components/money-field.js.map +1 -1
- package/dist/components/month-picker.js +2 -1
- package/dist/components/month-picker.js.map +1 -1
- package/dist/components/multi-entity-combobox.d.ts +26 -1
- package/dist/components/multi-entity-combobox.js +143 -102
- package/dist/components/multi-entity-combobox.js.map +1 -1
- package/dist/components/number-field.d.ts +11 -8
- package/dist/components/number-input.d.ts +11 -8
- package/dist/components/numpad-sheet.d.ts +11 -8
- package/dist/components/phone-input.d.ts +11 -8
- package/dist/components/reauth-dialog.d.ts +2 -2
- package/dist/components/reauth-dialog.js +6 -8
- package/dist/components/reauth-dialog.js.map +1 -1
- package/dist/components/series-chart.d.ts +11 -8
- package/dist/components/settings-fields.d.ts +11 -8
- package/dist/components/share-card.d.ts +10 -7
- package/dist/components/swatch-picker.d.ts +17 -1
- package/dist/components/swatch-picker.js +10 -4
- package/dist/components/swatch-picker.js.map +1 -1
- package/dist/components/text-link.d.ts +10 -7
- package/dist/components/tile-radio.d.ts +20 -0
- package/dist/components/tile-radio.js +25 -8
- package/dist/components/tile-radio.js.map +1 -1
- package/dist/components/time-input.d.ts +11 -8
- package/dist/components/toggle-group.js +2 -2
- package/dist/components/toggle-group.js.map +1 -1
- package/dist/components/trigger-aria.d.ts +3 -0
- package/dist/components/trigger-aria.js +3 -1
- package/dist/components/trigger-aria.js.map +1 -1
- package/dist/components/ui.d.ts +8 -5
- package/dist/components/ui.js +5 -11
- package/dist/components/ui.js.map +1 -1
- package/dist/feedback/feedback-attachment.d.ts +1 -1
- package/dist/feedback/feedback-attachment.js +156 -56
- package/dist/feedback/feedback-attachment.js.map +1 -1
- package/dist/feedback/feedback-dialog.d.ts +1 -1
- package/dist/feedback/feedback-dialog.js.map +1 -1
- package/dist/feedback/feedback-inbox.d.ts +3 -2
- package/dist/feedback/feedback-inbox.js.map +1 -1
- package/dist/feedback/feedback-thread.d.ts +68 -287
- package/dist/feedback/feedback-thread.js +8 -1
- package/dist/feedback/feedback-thread.js.map +1 -1
- package/dist/{kit-labels-R8mIAc9N.d.ts → feedback-BxeQVzwq.d.ts} +405 -22
- package/dist/{feedback-attachment-NhUm7Zga.d.ts → feedback-attachment-fGAzZPf0.d.ts} +112 -10
- package/dist/feedback.d.ts +66 -2
- package/dist/hooks/use-file-drop.d.ts +11 -8
- package/dist/i18n/defaults.d.ts +11 -8
- package/dist/i18n/defaults.js +3 -1
- package/dist/i18n/defaults.js.map +1 -1
- package/dist/i18n/german.d.ts +11 -8
- package/dist/i18n/german.js +36 -2
- package/dist/i18n/german.js.map +1 -1
- package/dist/i18n/kit-labels.d.ts +7 -4
- package/dist/i18n/kit-labels.js.map +1 -1
- package/dist/i18n/languages.d.ts +11 -8
- package/dist/i18n/locales/de-CH.d.ts +11 -8
- package/dist/i18n/locales/en.d.ts +11 -8
- package/dist/i18n/locales/en.js +7 -0
- package/dist/i18n/locales/en.js.map +1 -1
- package/dist/i18n/locales/es.d.ts +11 -8
- package/dist/i18n/locales/es.js +37 -2
- package/dist/i18n/locales/es.js.map +1 -1
- package/dist/i18n/locales/fr.d.ts +11 -8
- package/dist/i18n/locales/fr.js +36 -2
- package/dist/i18n/locales/fr.js.map +1 -1
- package/dist/i18n/locales/hu.d.ts +11 -8
- package/dist/i18n/locales/hu.js +38 -2
- package/dist/i18n/locales/hu.js.map +1 -1
- package/dist/i18n/locales/it.d.ts +11 -8
- package/dist/i18n/locales/it.js +37 -2
- package/dist/i18n/locales/it.js.map +1 -1
- package/dist/i18n/locales/zh.d.ts +11 -8
- package/dist/i18n/locales/zh.js +34 -2
- package/dist/i18n/locales/zh.js.map +1 -1
- package/dist/i18n/review.d.ts +11 -8
- package/dist/i18n/review.js +20 -1
- package/dist/i18n/review.js.map +1 -1
- package/dist/index.d.ts +7 -3
- package/dist/index.js +16 -0
- package/dist/index.js.map +1 -1
- package/dist/lib/column-mapping.d.ts +81 -0
- package/dist/lib/column-mapping.js +108 -0
- package/dist/lib/column-mapping.js.map +1 -0
- package/dist/lib/table-text.d.ts +109 -1
- package/dist/lib/table-text.js +122 -1
- package/dist/lib/table-text.js.map +1 -1
- package/dist/rhf/fields.d.ts +89 -11
- package/dist/rhf/fields.js +124 -0
- package/dist/rhf/fields.js.map +1 -1
- package/dist/rhf/form.d.ts +11 -8
- package/dist/rhf.d.ts +12 -9
- package/dist/rhf.js.map +1 -1
- package/dist/shell/app-shell.d.ts +10 -7
- package/dist/shell/top-bar-brand.d.ts +11 -8
- package/dist/shell/topbar-action-menu.d.ts +36 -3
- package/dist/shell/topbar-action-menu.js +74 -33
- package/dist/shell/topbar-action-menu.js.map +1 -1
- package/dist/shell.d.ts +10 -7
- package/dist/table-text.d.ts +1 -1
- package/dist/wizard/stepper-nav.d.ts +41 -10
- package/dist/wizard/stepper-nav.js +4 -0
- package/dist/wizard/stepper-nav.js.map +1 -1
- package/dist/wizard.d.ts +11 -8
- package/package.json +1 -1
- package/src/components/amount-input.tsx +20 -1
- package/src/components/autocomplete.tsx +172 -111
- package/src/components/column-mapper.tsx +666 -0
- package/src/components/combobox-core.tsx +82 -9
- package/src/components/combobox.tsx +614 -332
- package/src/components/confirm-dialog.tsx +12 -8
- package/src/components/country-select.tsx +135 -22
- package/src/components/danger-confirm.tsx +91 -12
- package/src/components/date-picker.tsx +423 -10
- package/src/components/entity-combobox.tsx +217 -126
- package/src/components/field-parts.tsx +224 -5
- package/src/components/field-strip.tsx +149 -0
- package/src/components/form-actions.tsx +32 -4
- package/src/components/icon-picker.tsx +23 -4
- package/src/components/money-field.tsx +3 -0
- package/src/components/month-picker.tsx +2 -1
- package/src/components/multi-entity-combobox.tsx +207 -120
- package/src/components/reauth-dialog.tsx +17 -18
- package/src/components/swatch-picker.tsx +29 -5
- package/src/components/tile-radio.tsx +74 -13
- package/src/components/toggle-group.tsx +2 -2
- package/src/components/trigger-aria.ts +5 -0
- package/src/components/ui.tsx +7 -33
- package/src/feedback/feedback-attachment.tsx +308 -61
- package/src/feedback/feedback-dialog.tsx +7 -3
- package/src/feedback/feedback-inbox.tsx +3 -2
- package/src/feedback/feedback-thread.tsx +47 -4
- package/src/i18n/defaults.ts +2 -0
- package/src/i18n/german.ts +42 -0
- package/src/i18n/kit-labels.tsx +4 -0
- package/src/i18n/locales/en.ts +27 -5
- package/src/i18n/locales/es.ts +41 -0
- package/src/i18n/locales/fr.ts +42 -0
- package/src/i18n/locales/hu.ts +37 -0
- package/src/i18n/locales/it.ts +41 -0
- package/src/i18n/locales/zh.ts +32 -0
- package/src/i18n/review.ts +19 -0
- package/src/index.ts +18 -0
- package/src/lib/column-mapping.ts +234 -0
- package/src/lib/table-text.ts +271 -0
- package/src/rhf/fields.tsx +254 -0
- package/src/rhf.ts +2 -1
- package/src/shell/topbar-action-menu.tsx +134 -38
- package/src/wizard/stepper-nav.tsx +35 -1
- package/dist/components/field-anatomy.d.ts +0 -95
- package/dist/components/field-anatomy.js +0 -84
- package/dist/components/field-anatomy.js.map +0 -1
- package/src/components/field-anatomy.tsx +0 -190
|
@@ -1,12 +1,14 @@
|
|
|
1
|
+
import { l as FeedbackAttachmentLabels, k as FeedbackAttachmentFieldSingleProps, g as FeedbackAttachmentFieldLabels, u as FeedbackDialogTextLabels } from './feedback-attachment-fGAzZPf0.js';
|
|
2
|
+
import { FeedbackNoteAttachment } from './feedback/feedback-inbox.js';
|
|
1
3
|
import * as react from 'react';
|
|
2
4
|
import { InputHTMLAttributes, ReactNode, AnchorHTMLAttributes, Ref, ReactElement, ButtonHTMLAttributes, SelectHTMLAttributes, ComponentPropsWithoutRef, TextareaHTMLAttributes } from 'react';
|
|
5
|
+
import { TooltipSide } from './components/tooltip.js';
|
|
3
6
|
import { f as DataTableLabels } from './data-table-labels-B7OdnM0S.js';
|
|
4
7
|
import { MiniCalendarLabels, WeekDay } from './components/mini-calendar.js';
|
|
5
8
|
import { CalendarHeatmapLabels } from './components/calendar-heatmap.js';
|
|
6
9
|
import { PopoverLabels } from './components/popover.js';
|
|
7
10
|
import { ChipInputLabels } from './components/chip.js';
|
|
8
11
|
import { FieldSyncLabels } from './components/field-sync.js';
|
|
9
|
-
import { TooltipSide } from './components/tooltip.js';
|
|
10
12
|
import { WizardLabels } from './wizard/types.js';
|
|
11
13
|
import { TourLabels } from './tour/tour.js';
|
|
12
14
|
import { CommandPaletteLabels } from './search/command-palette.js';
|
|
@@ -23,8 +25,6 @@ import { SwatchPickerLabels } from './components/swatch-picker.js';
|
|
|
23
25
|
import { IconPickerLabels } from './components/icon-picker.js';
|
|
24
26
|
import { DialogFrameProps, DialogFrameLabels } from './components/dialog-frame.js';
|
|
25
27
|
import { MeasuredGridLabels } from './components/measured-grid.js';
|
|
26
|
-
import { f as FeedbackAttachmentFieldLabels, t as FeedbackDialogTextLabels } from './feedback-attachment-NhUm7Zga.js';
|
|
27
|
-
import { FeedbackThreadLabels, FeedbackComposerLabels } from './feedback/feedback-thread.js';
|
|
28
28
|
import { AccountSettingsLabels } from './components/account-settings-labels.js';
|
|
29
29
|
import { FloatingPanelLabels } from './components/floating-panel.js';
|
|
30
30
|
import { BulkActionBarLabels } from './components/bulk-action-bar.js';
|
|
@@ -51,6 +51,8 @@ import { InlineEditLabels } from './components/inline-edit-field.js';
|
|
|
51
51
|
import { IbanKind } from './lib/iban.js';
|
|
52
52
|
import { PhoneCountry, PhoneCountryCode } from './lib/phone.js';
|
|
53
53
|
import { SignChipLabels } from './components/sign-chip.js';
|
|
54
|
+
import { ColumnMapperLabels } from './components/column-mapper.js';
|
|
55
|
+
import './components/field-parts.js';
|
|
54
56
|
|
|
55
57
|
type ButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "brand" | "link";
|
|
56
58
|
type ButtonSize = "sm" | "md";
|
|
@@ -568,7 +570,6 @@ type FieldChevronProps = Omit<ComponentPropsWithoutRef<"svg">, "children">;
|
|
|
568
570
|
* what was picked. */
|
|
569
571
|
declare function FieldChevron({ className, ...rest }: FieldChevronProps): react.JSX.Element;
|
|
570
572
|
declare const FLOATING_LABEL_CLASS: string;
|
|
571
|
-
declare const FLOATING_LABEL_STATIC: string;
|
|
572
573
|
/**
|
|
573
574
|
* The one place that assembles a labelled field: a `relative` wrapper around the
|
|
574
575
|
* control (`children`) plus a floating label inside the top strip. Pass `staticLabel`
|
|
@@ -625,15 +626,6 @@ interface FieldHintProps extends Omit<ComponentPropsWithoutRef<"button">, "child
|
|
|
625
626
|
side?: TooltipSide;
|
|
626
627
|
}
|
|
627
628
|
declare function FieldHint({ label, side, className, "aria-label": ariaLabel, ...rest }: FieldHintProps): react.JSX.Element;
|
|
628
|
-
/**
|
|
629
|
-
* The floating label for a custom-dropdown trigger (a `<span>`, since the trigger is a
|
|
630
|
-
* button not a labelable input). Same placement as {@link FloatingField}'s static label,
|
|
631
|
-
* so every labelled field lines up. Render inside a `relative` wrapper, before the trigger.
|
|
632
|
-
*/
|
|
633
|
-
interface FieldLabelProps extends ComponentPropsWithoutRef<"span"> {
|
|
634
|
-
children: ReactNode;
|
|
635
|
-
}
|
|
636
|
-
declare function FieldLabel({ children, className, ...rest }: FieldLabelProps): react.JSX.Element;
|
|
637
629
|
interface LabelProps extends ComponentPropsWithoutRef<"label"> {
|
|
638
630
|
/** Draw the required mark after the text. The mark is `aria-hidden`: what a
|
|
639
631
|
* screen reader hears is the control's own `required` / `aria-required`, which
|
|
@@ -1416,6 +1408,18 @@ interface DangerConfirmLabels {
|
|
|
1416
1408
|
/** 0.22: the checkbox `requireAcknowledge={true}` shows — "I have read what this does
|
|
1417
1409
|
* and want to continue" (keksdose's `admin.users.confirm_ack`). */
|
|
1418
1410
|
acknowledge: string;
|
|
1411
|
+
/**
|
|
1412
|
+
* 0.23: why the armed confirm is held while the typed phrase does not match yet — in
|
|
1413
|
+
* the confirm's tooltip and its description (keksdose G4a). A FUNCTION of the phrase
|
|
1414
|
+
* by default ("Type “DELETE” to confirm"), or a finished STRING, as `phrase`.
|
|
1415
|
+
*/
|
|
1416
|
+
needsPhrase: string | ((phrase: string) => string);
|
|
1417
|
+
/** 0.23: why the armed confirm is held while the `requireAcknowledge` box is unticked
|
|
1418
|
+
* — "Tick the box to confirm". */
|
|
1419
|
+
needsAcknowledge: string;
|
|
1420
|
+
/** 0.23: why the armed confirm is held while the `requirePassword` field is empty —
|
|
1421
|
+
* "Enter your password to confirm". */
|
|
1422
|
+
needsPassword: string;
|
|
1419
1423
|
}
|
|
1420
1424
|
/** `satisfies` rather than a type annotation, so `DEFAULT_DANGER_CONFIRM_LABELS.phrase`
|
|
1421
1425
|
* stays callable for a caller that composes its own label from it. */
|
|
@@ -1427,7 +1431,31 @@ declare const DEFAULT_DANGER_CONFIRM_LABELS: {
|
|
|
1427
1431
|
password: string;
|
|
1428
1432
|
phrase: (phrase: string) => string;
|
|
1429
1433
|
acknowledge: string;
|
|
1434
|
+
needsPhrase: (phrase: string) => string;
|
|
1435
|
+
needsAcknowledge: string;
|
|
1436
|
+
needsPassword: string;
|
|
1430
1437
|
};
|
|
1438
|
+
/**
|
|
1439
|
+
* What the guards were answered with — the second argument of
|
|
1440
|
+
* {@link DangerConfirmProps.onConfirm} (0.23, keksdose G4b). A key is there only when its
|
|
1441
|
+
* guard was asked for, so the object can go into a request body as it is.
|
|
1442
|
+
*/
|
|
1443
|
+
interface DangerConfirmValues {
|
|
1444
|
+
/**
|
|
1445
|
+
* The text typed into the `phrase` field — as the match rule compared it: trimmed
|
|
1446
|
+
* under `phraseMatch` `"trim"` and `"caseless"` (the spaces a phone keyboard adds are
|
|
1447
|
+
* not part of it), exactly as typed under `"exact"`. The case is the user's, even
|
|
1448
|
+
* under `"caseless"`: a server that re-checks applies its own rule to it. Absent
|
|
1449
|
+
* without a `phrase`.
|
|
1450
|
+
*/
|
|
1451
|
+
typed?: string;
|
|
1452
|
+
/** The entered password — the same value as the first argument. Absent without
|
|
1453
|
+
* `requirePassword`. */
|
|
1454
|
+
password?: string;
|
|
1455
|
+
/** `true` when the `requireAcknowledge` box was shown — it was ticked, since the
|
|
1456
|
+
* confirm is held until it is. Absent without one. */
|
|
1457
|
+
acknowledged?: true;
|
|
1458
|
+
}
|
|
1431
1459
|
/**
|
|
1432
1460
|
* One line of {@link DangerConfirmProps.consequences}: what the action will do. A plain
|
|
1433
1461
|
* string, or this, for a key of its own and the `severe` mark.
|
|
@@ -1449,12 +1477,25 @@ interface DangerConfirmProps extends Omit<ComponentPropsWithoutRef<"div">, "onCh
|
|
|
1449
1477
|
* (fields wiped) when it resolves, still armed when it rejects — so the user can
|
|
1450
1478
|
* correct a wrong password and retry. The rejection is not swallowed for you to
|
|
1451
1479
|
* miss: handle it (and show why) in the caller, as with any mutation.
|
|
1480
|
+
*
|
|
1481
|
+
* 0.23: the second argument is what every guard was answered with — the typed phrase,
|
|
1482
|
+
* the password, the tick ({@link DangerConfirmValues}). keksdose G4b: its admin
|
|
1483
|
+
* actions send the address the admin TYPED, and the server re-checks it against the
|
|
1484
|
+
* account (`assert_confirmed`), so a client that put the wrong row's id in the request
|
|
1485
|
+
* is refused rather than obeyed; the tile kept the text to itself.
|
|
1486
|
+
*
|
|
1487
|
+
* onConfirm={(_password, { typed }) =>
|
|
1488
|
+
* reset.mutateAsync({ id, confirm: { acknowledged: true, confirm_email: typed ?? null } })}
|
|
1489
|
+
*
|
|
1490
|
+
* A second argument rather than one object in place of the password: every
|
|
1491
|
+
* `(password) => …` and `() => …` handler, and a `mutation.mutate` passed as it is,
|
|
1492
|
+
* keeps working unchanged, and a handler that needs one guard's answer names it.
|
|
1452
1493
|
*/
|
|
1453
|
-
onConfirm: (password
|
|
1454
|
-
/** Show a password field; confirm
|
|
1494
|
+
onConfirm: (password: string | undefined, values: DangerConfirmValues) => void | Promise<unknown>;
|
|
1495
|
+
/** Show a password field; confirm is held until it is filled. */
|
|
1455
1496
|
requirePassword?: boolean;
|
|
1456
1497
|
/**
|
|
1457
|
-
* Show an "I understand" checkbox; confirm
|
|
1498
|
+
* Show an "I understand" checkbox; confirm is held until it is ticked
|
|
1458
1499
|
* (keksdose K7). `true` words it with `labels.acknowledge`; any other node IS the
|
|
1459
1500
|
* checkbox's label ("I understand Anna will be signed out everywhere").
|
|
1460
1501
|
*
|
|
@@ -1475,8 +1516,8 @@ interface DangerConfirmProps extends Omit<ComponentPropsWithoutRef<"div">, "onCh
|
|
|
1475
1516
|
* who reads the same paragraph on every row stops reading it (keksdose dev#488).
|
|
1476
1517
|
*/
|
|
1477
1518
|
consequences?: readonly (string | DangerConsequence)[];
|
|
1478
|
-
/** Show a "type <phrase> to confirm" field; confirm
|
|
1479
|
-
*
|
|
1519
|
+
/** Show a "type <phrase> to confirm" field; confirm is held until the field matches
|
|
1520
|
+
* (case-sensitive; surrounding spaces ignored unless `phraseMatch="exact"`). */
|
|
1480
1521
|
phrase?: string;
|
|
1481
1522
|
/**
|
|
1482
1523
|
* How the typed text is compared with `phrase`. `"trim"` (default) ignores spaces
|
|
@@ -1534,8 +1575,17 @@ interface DangerConfirmProps extends Omit<ComponentPropsWithoutRef<"div">, "onCh
|
|
|
1534
1575
|
/**
|
|
1535
1576
|
* An "arm → confirm" tile for destructive actions: one button, which expands into a
|
|
1536
1577
|
* warning, an optional list of consequences, an optional "I understand" tick, an
|
|
1537
|
-
* optional type-to-confirm field, an optional password field and a confirm that
|
|
1538
|
-
*
|
|
1578
|
+
* optional type-to-confirm field, an optional password field and a confirm that is held
|
|
1579
|
+
* until every guard is satisfied.
|
|
1580
|
+
*
|
|
1581
|
+
* A held confirm SAYS which guard is still open (0.23, keksdose G4a): it is
|
|
1582
|
+
* `aria-disabled` rather than `disabled` — still focusable, so a keyboard user can land
|
|
1583
|
+
* on it — with the reason in the kit {@link Tooltip} and its description ("Type
|
|
1584
|
+
* “DELETE” to confirm", "Tick the box to confirm", "Enter your password to confirm";
|
|
1585
|
+
* `labels.needs*`), the first open guard in the order they are drawn. FormActions'
|
|
1586
|
+
* `submitDisabledReason` does the same for a form's Save. Pressing it, or Enter in a
|
|
1587
|
+
* field, does nothing. A lock's reason wins over a guard's; while the action runs the
|
|
1588
|
+
* confirm is plainly disabled, its spinner saying why.
|
|
1539
1589
|
*
|
|
1540
1590
|
* Keksdose hand-rolled it three times (load demo data, wipe everything, reset a
|
|
1541
1591
|
* budget) and then as `shared/components/danger-confirm.tsx`; the only app-specific
|
|
@@ -1777,6 +1827,315 @@ interface FileButtonProps extends Omit<UseFilePickerOptions, "disabled">, Omit<B
|
|
|
1777
1827
|
*/
|
|
1778
1828
|
declare const FileButton: react.ForwardRefExoticComponent<FileButtonProps & react.RefAttributes<HTMLButtonElement>>;
|
|
1779
1829
|
|
|
1830
|
+
/**
|
|
1831
|
+
* The conversation under a report: who said what, when, with what attached — and the
|
|
1832
|
+
* box to answer in.
|
|
1833
|
+
*
|
|
1834
|
+
* Both apps had written it by hand. kastlan's feedback page grew a comment list of
|
|
1835
|
+
* bordered boxes with `slate-*` literals (feedback-page.tsx, "keksdose left this
|
|
1836
|
+
* unbuilt"), and keksdose built the same thing a second time for support
|
|
1837
|
+
* (support-thread.tsx) with sides, bubbles and a composer that clears only what it
|
|
1838
|
+
* sent. This is that second one, generalised: the kit owns the look and the
|
|
1839
|
+
* behaviour, the app owns the data, the upload and every word it does not share.
|
|
1840
|
+
*
|
|
1841
|
+
* **Own vs other** is the caller's per message (`own`), not a comparison the kit makes
|
|
1842
|
+
* against a user id: whose message sits at the END side depends on who is reading,
|
|
1843
|
+
* and only the app knows that (keksdose's support thread labelled a member's question
|
|
1844
|
+
* "Du" in the admin panel the first time round, by reading the wrong field).
|
|
1845
|
+
*
|
|
1846
|
+
* **Redaction.** A thread is somebody's words about their own data — exactly what a
|
|
1847
|
+
* host's demo / screen-share mode blurs. Bodies, authors and attachments carry
|
|
1848
|
+
* `data-private` (the attribute `Tooltip redact` and `StatTile sensitive` use) unless
|
|
1849
|
+
* `redact={false}`.
|
|
1850
|
+
*
|
|
1851
|
+
* **RTL.** Sides are logical — `justify-end` is the reading end, and the bubble's
|
|
1852
|
+
* tucked corner is `rounded-ee` / `rounded-es` — and each body is `dir="auto"`, so a
|
|
1853
|
+
* Hebrew reply in an English thread (or the reverse) lays out as its own language.
|
|
1854
|
+
*
|
|
1855
|
+
* **A chat, too** (keksdose G4/G5). keksdose's support chat is the same conversation
|
|
1856
|
+
* read the chat way: status lines between the messages ("Closed automatically",
|
|
1857
|
+
* "Reopened"), a day line where the date changes, clock times under it, Enter to send
|
|
1858
|
+
* and several files uploaded ahead of the send. Each of those is an opt-in here
|
|
1859
|
+
* (`kind: "event"`, `daySeparators`, `timeFormat="clock"`, `sendOn="enter"`,
|
|
1860
|
+
* `attachmentSlot` + `canSend`), so the feedback thread's defaults stay as they were.
|
|
1861
|
+
*/
|
|
1862
|
+
/** The `feedbackThread` namespace of `<UiKitProvider labels>`. */
|
|
1863
|
+
interface FeedbackThreadLabels {
|
|
1864
|
+
/** Accessible name of the message list. */
|
|
1865
|
+
thread: string;
|
|
1866
|
+
empty: string;
|
|
1867
|
+
loading: string;
|
|
1868
|
+
/** Author line of an `own` message that has no `author` of its own. */
|
|
1869
|
+
you: string;
|
|
1870
|
+
/** The badge beside a `staff` author. */
|
|
1871
|
+
staff: string;
|
|
1872
|
+
/** Accessible name of a message's attachment list. */
|
|
1873
|
+
attachments: string;
|
|
1874
|
+
}
|
|
1875
|
+
declare const DEFAULT_FEEDBACK_THREAD_LABELS: FeedbackThreadLabels;
|
|
1876
|
+
/** The `feedbackComposer` namespace of `<UiKitProvider labels>`. The attach buttons'
|
|
1877
|
+
* words are `feedbackAttachment`'s, shared with the dialog and the note editor. */
|
|
1878
|
+
interface FeedbackComposerLabels {
|
|
1879
|
+
/** Accessible name of the text box. */
|
|
1880
|
+
field: string;
|
|
1881
|
+
placeholder: string;
|
|
1882
|
+
send: string;
|
|
1883
|
+
/** The shortcut line, given the platform's modifier ("Ctrl" or "⌘"). */
|
|
1884
|
+
sendHint: (modifier: string) => string;
|
|
1885
|
+
/** The shortcut line under `sendOn="enter"` (keksdose G5): Enter sends, so say how a
|
|
1886
|
+
* new line is made. */
|
|
1887
|
+
sendHintEnter: string;
|
|
1888
|
+
}
|
|
1889
|
+
declare const DEFAULT_FEEDBACK_COMPOSER_LABELS: FeedbackComposerLabels;
|
|
1890
|
+
interface FeedbackThreadAttachment {
|
|
1891
|
+
id?: string | number;
|
|
1892
|
+
name: string;
|
|
1893
|
+
/** Where to open it. Left out, the attachment is listed by name only. */
|
|
1894
|
+
url?: string;
|
|
1895
|
+
/** MIME type; an `image/*` with a `url` is shown as a thumbnail. */
|
|
1896
|
+
type?: string;
|
|
1897
|
+
/** Bytes, shown beside a non-image. */
|
|
1898
|
+
size?: number;
|
|
1899
|
+
}
|
|
1900
|
+
interface FeedbackThreadMessage {
|
|
1901
|
+
/** Leave out, or `"message"`. `"event"` is a {@link FeedbackThreadEvent}. */
|
|
1902
|
+
kind?: "message";
|
|
1903
|
+
id: string | number;
|
|
1904
|
+
/** Who wrote it. Left out on an `own` message, it reads "You". */
|
|
1905
|
+
author?: ReactNode;
|
|
1906
|
+
/** A `Date`, an ISO string or epoch ms. */
|
|
1907
|
+
createdAt: Date | string | number;
|
|
1908
|
+
body: string;
|
|
1909
|
+
attachments?: readonly FeedbackThreadAttachment[];
|
|
1910
|
+
/** Written by whoever is reading: sits at the end side, in the brand tint. */
|
|
1911
|
+
own?: boolean;
|
|
1912
|
+
/** Written by the team rather than a user: gets the "Staff" badge. */
|
|
1913
|
+
staff?: boolean;
|
|
1914
|
+
}
|
|
1915
|
+
/**
|
|
1916
|
+
* A line in the thread that nobody wrote — "Closed automatically", "Marked as
|
|
1917
|
+
* resolved", "Reopened" — drawn centred and muted with its time, no author, no side,
|
|
1918
|
+
* no bubble.
|
|
1919
|
+
*
|
|
1920
|
+
* keksdose G4: its support chat interleaves these with the messages, and as a message
|
|
1921
|
+
* they came out as a bubble from nobody at the start side, which reads as the member
|
|
1922
|
+
* having said "resolved". Word it for the READER, as with `own`: the app knows whether
|
|
1923
|
+
* "you reopened it" or "Anna reopened it" is true for the person looking.
|
|
1924
|
+
*
|
|
1925
|
+
* The text is the app's, not somebody's words about their data, so it is NOT tagged
|
|
1926
|
+
* `data-private`; one that names a person can wrap the name in its own
|
|
1927
|
+
* `<span data-private>` (`body` is a node for that reason).
|
|
1928
|
+
*/
|
|
1929
|
+
interface FeedbackThreadEvent {
|
|
1930
|
+
kind: "event";
|
|
1931
|
+
id: string | number;
|
|
1932
|
+
/** A `Date`, an ISO string or epoch ms. */
|
|
1933
|
+
createdAt: Date | string | number;
|
|
1934
|
+
body: ReactNode;
|
|
1935
|
+
}
|
|
1936
|
+
/** One row of a {@link FeedbackThread}: a message, or an event line between them. */
|
|
1937
|
+
type FeedbackThreadItem = FeedbackThreadMessage | FeedbackThreadEvent;
|
|
1938
|
+
interface FeedbackThreadProps {
|
|
1939
|
+
/** Oldest first. Event lines ({@link FeedbackThreadEvent}) sit among the messages. */
|
|
1940
|
+
messages: readonly FeedbackThreadItem[];
|
|
1941
|
+
loading?: boolean;
|
|
1942
|
+
/** Replaces the default "No comments yet". */
|
|
1943
|
+
empty?: ReactNode;
|
|
1944
|
+
/**
|
|
1945
|
+
* Draw one attachment yourself — for files behind auth, which a plain `<img src>`
|
|
1946
|
+
* cannot fetch (kastlan's `AuthedImage`), or a lightbox. The default is a thumbnail
|
|
1947
|
+
* link for an image with a `url`, a file link otherwise.
|
|
1948
|
+
*/
|
|
1949
|
+
renderAttachment?: (attachment: FeedbackThreadAttachment, message: FeedbackThreadMessage) => ReactNode;
|
|
1950
|
+
/** Tag bodies, authors and attachments `data-private`. Default true. */
|
|
1951
|
+
redact?: boolean;
|
|
1952
|
+
/**
|
|
1953
|
+
* How a row's time reads. `"relative"` (default): "5 minutes ago", a date past six
|
|
1954
|
+
* days — right for a report's comments, read days apart. `"clock"`: the time of day
|
|
1955
|
+
* in the locale ("14:05", "2:05 PM") — the chat look, keksdose G4; pair it with
|
|
1956
|
+
* `daySeparators`, which say which day that clock time is on. Either way the full
|
|
1957
|
+
* date and time is in the Tooltip.
|
|
1958
|
+
*/
|
|
1959
|
+
timeFormat?: "relative" | "clock";
|
|
1960
|
+
/**
|
|
1961
|
+
* A centred day line before the first row and wherever the next row is on another
|
|
1962
|
+
* calendar day (the device's zone): "Today", "Yesterday", else the date — keksdose
|
|
1963
|
+
* G4. "Today" / "Yesterday" are `Intl.RelativeTimeFormat`'s own words in the kit
|
|
1964
|
+
* locale, so there is no label to translate. Default false.
|
|
1965
|
+
*/
|
|
1966
|
+
daySeparators?: boolean;
|
|
1967
|
+
/** "Now" for the relative times and the day lines — pin it in tests and stories.
|
|
1968
|
+
* Default: the clock. */
|
|
1969
|
+
now?: Date | number;
|
|
1970
|
+
/** Overrides the provider's locale for the times. */
|
|
1971
|
+
locale?: string;
|
|
1972
|
+
labels?: Partial<FeedbackThreadLabels>;
|
|
1973
|
+
className?: string;
|
|
1974
|
+
}
|
|
1975
|
+
declare function FeedbackThread({ messages, loading, empty, renderAttachment, redact, now, locale: localeProp, timeFormat, daySeparators, labels: labelsProp, className, }: FeedbackThreadProps): react.JSX.Element;
|
|
1976
|
+
/** What the composer's attach control takes — {@link FeedbackNoteAttachment} with the
|
|
1977
|
+
* labels optional, since the field reads `feedbackAttachment` from the provider, and
|
|
1978
|
+
* `onError` the field's own (0.23.0): it is handed the refused file and the limit too
|
|
1979
|
+
* (`FeedbackAttachmentErrorInfo`), and a `(kind) => …` handler still fits. */
|
|
1980
|
+
type FeedbackComposerAttachment = Omit<FeedbackNoteAttachment, "labels" | "onError"> & {
|
|
1981
|
+
labels?: Partial<FeedbackAttachmentLabels>;
|
|
1982
|
+
onError?: FeedbackAttachmentFieldSingleProps["onError"];
|
|
1983
|
+
};
|
|
1984
|
+
interface FeedbackComposerProps {
|
|
1985
|
+
/**
|
|
1986
|
+
* Send the comment. Return the promise: the box clears when it RESOLVES, and only of
|
|
1987
|
+
* what was sent — text typed while it was in flight stays. A rejection keeps
|
|
1988
|
+
* everything for a retry (surface the error yourself; the composer stays quiet).
|
|
1989
|
+
*
|
|
1990
|
+
* `attachment` is the built-in field's one picture. Files the host uploaded ahead
|
|
1991
|
+
* (`attachmentSlot`) are the host's state, read by the host here — and `body` may be
|
|
1992
|
+
* `""` when `canSend` let an attachments-only message go.
|
|
1993
|
+
*/
|
|
1994
|
+
onSend: (body: string, attachment: File | null) => void | Promise<unknown>;
|
|
1995
|
+
/** The send is in flight: a spinner on the button and no second send. */
|
|
1996
|
+
pending?: boolean;
|
|
1997
|
+
/** Offer one picture with the comment (file, paste or `onCaptureScreenshot`).
|
|
1998
|
+
* `true` for the defaults. Left out, the composer is text only. */
|
|
1999
|
+
attachment?: boolean | FeedbackComposerAttachment;
|
|
2000
|
+
/**
|
|
2001
|
+
* The host's own attach control, in the row with Send where the built-in field sits
|
|
2002
|
+
* (after it, if both are on) — keksdose G5: its support chat uploads up to N files
|
|
2003
|
+
* AHEAD of the send and sends their refs, which one `File` in `onSend` cannot carry.
|
|
2004
|
+
* The slot is the host's picker plus the chips of what is uploaded; the upload, the
|
|
2005
|
+
* refs and clearing them once `onSend` resolves stay with the host. Pair it with
|
|
2006
|
+
* `canSend`.
|
|
2007
|
+
*/
|
|
2008
|
+
attachmentSlot?: ReactNode;
|
|
2009
|
+
/**
|
|
2010
|
+
* Whether Send is enabled, over the composer's own rule (some text in the box) —
|
|
2011
|
+
* for state the composer cannot see, i.e. `attachmentSlot`'s (keksdose G5): `true`
|
|
2012
|
+
* with files ready makes an empty draft sendable (`onSend("", null)`), `false` while
|
|
2013
|
+
* an upload is still running holds even a written reply back. Left out, the text
|
|
2014
|
+
* decides. `pending` blocks a send either way, as does a draft past `maxLength`.
|
|
2015
|
+
*/
|
|
2016
|
+
canSend?: boolean;
|
|
2017
|
+
/**
|
|
2018
|
+
* Which key sends. `"mod-enter"` (default): Ctrl/⌘+Enter, the report dialog's and
|
|
2019
|
+
* note editor's shortcut, with plain Enter a new line — feedback is written in
|
|
2020
|
+
* paragraphs. `"enter"`: the chat way (keksdose G5) — Enter sends, Shift+Enter is a
|
|
2021
|
+
* new line, Ctrl/⌘+Enter still sends; an Enter that confirms an IME composition
|
|
2022
|
+
* (Japanese, Chinese input) is the IME's, never a send.
|
|
2023
|
+
*/
|
|
2024
|
+
sendOn?: "mod-enter" | "enter";
|
|
2025
|
+
/** Rendered INSTEAD of the composer — the thread is closed, or read-only for this
|
|
2026
|
+
* reader. */
|
|
2027
|
+
disabledReason?: ReactNode;
|
|
2028
|
+
rows?: number;
|
|
2029
|
+
/**
|
|
2030
|
+
* The longest draft the box takes, in UTF-16 code units as the browser counts — the
|
|
2031
|
+
* server's limit, so a reply too long for it is cut off while it is typed rather than
|
|
2032
|
+
* refused by a 422 after the press (keksdose G6: its support replies are capped at
|
|
2033
|
+
* 4,000 on the server, and its other text fields already count against that with
|
|
2034
|
+
* Textarea's `maxLength` + `showCount` since 0.22; the reply box, a composer, could
|
|
2035
|
+
* not). The box's own `maxLength`, so typing and pasting stop at it.
|
|
2036
|
+
*
|
|
2037
|
+
* {@link FeedbackComposerHandle.insertText} is not stopped by it — the browser limits
|
|
2038
|
+
* typing, not a script — and a canned reply is not cut mid-sentence to fit. A draft
|
|
2039
|
+
* past the limit therefore holds Send back (whatever `canSend` says, as `pending`
|
|
2040
|
+
* does) until it is trimmed; with `showCount` the counter, red at the limit, says by
|
|
2041
|
+
* how much.
|
|
2042
|
+
*/
|
|
2043
|
+
maxLength?: number;
|
|
2044
|
+
/**
|
|
2045
|
+
* A live "12/4000" under the box, with `maxLength` — Textarea's `showCount`, the same
|
|
2046
|
+
* counter (keksdose G6): the count is part of the box's description, read with it on
|
|
2047
|
+
* focus, and a polite live region speaks only on entering the last stretch and at the
|
|
2048
|
+
* limit, never per keystroke. Under `size="sm"` the hidden send hint stays the box's
|
|
2049
|
+
* description too, before the count. Ignored without `maxLength`.
|
|
2050
|
+
*/
|
|
2051
|
+
showCount?: boolean;
|
|
2052
|
+
/** The counter's words — the `characterCount` namespace, as on Textarea. */
|
|
2053
|
+
countLabels?: Partial<CharacterCountLabels>;
|
|
2054
|
+
/**
|
|
2055
|
+
* The box's hint, over the `placeholder` label — keksdose F9: an admin answering a
|
|
2056
|
+
* support ticket is asked something else ("Reply to Anna…") than a member adding to
|
|
2057
|
+
* their own report, and one provider-wide label cannot say both.
|
|
2058
|
+
*/
|
|
2059
|
+
placeholder?: string;
|
|
2060
|
+
/**
|
|
2061
|
+
* The draft, controlled — for a host that keeps it itself (saves it per ticket,
|
|
2062
|
+
* prefills a template). Left out, the composer keeps its own. Either way a send
|
|
2063
|
+
* that resolves clears only what was sent: controlled, that is an
|
|
2064
|
+
* `onValueChange("")` the host receives like any keystroke, and only if the draft
|
|
2065
|
+
* is still the one that went out.
|
|
2066
|
+
*/
|
|
2067
|
+
value?: string;
|
|
2068
|
+
/** Every change to the draft — typing, {@link FeedbackComposerHandle.insertText}, the
|
|
2069
|
+
* clear after a send. Required to change a controlled `value`. */
|
|
2070
|
+
onValueChange?: (value: string) => void;
|
|
2071
|
+
/** {@link FeedbackComposerHandle}: put text into the draft from outside (canned-reply
|
|
2072
|
+
* chips) or focus the box. */
|
|
2073
|
+
ref?: Ref<FeedbackComposerHandle>;
|
|
2074
|
+
labels?: Partial<FeedbackComposerLabels>;
|
|
2075
|
+
className?: string;
|
|
2076
|
+
/**
|
|
2077
|
+
* `"sm"` for a narrow host — keksdose's assistant launcher, a small floating panel
|
|
2078
|
+
* (0.22): a small Send button, and the send hint ("Enter to send, Shift + Enter for a
|
|
2079
|
+
* new line") hidden from view but kept as the box's description, so a keyboard or
|
|
2080
|
+
* screen-reader user still learns the shortcut. Default `"md"`.
|
|
2081
|
+
*/
|
|
2082
|
+
size?: "md" | "sm";
|
|
2083
|
+
/**
|
|
2084
|
+
* On the composer's root — the box, or the `disabledReason` line in its place —
|
|
2085
|
+
* with any `data-*` attribute beside it (keksdose K17). keksdose's assistant tour
|
|
2086
|
+
* points at the chat box with `[data-tour="assistant-ask"]`, and a composer that
|
|
2087
|
+
* dropped every attribute it was not told about left the anchor nowhere: the
|
|
2088
|
+
* assistant kept its hand-built box rather than lose the tour step.
|
|
2089
|
+
*/
|
|
2090
|
+
id?: string;
|
|
2091
|
+
/** `data-*` attributes for the root, as `id` — a tour anchor, a test id. */
|
|
2092
|
+
[dataAttribute: `data-${string}`]: string | number | boolean | undefined;
|
|
2093
|
+
}
|
|
2094
|
+
/**
|
|
2095
|
+
* What a {@link FeedbackComposer} `ref` holds.
|
|
2096
|
+
*
|
|
2097
|
+
* keksdose F9: the support admin answers the same five questions all day and wants
|
|
2098
|
+
* chips above the box ("Thanks, fixed in the next release") that drop their text in
|
|
2099
|
+
* where the caret is. A controlled `value` alone cannot do that well — the host sees
|
|
2100
|
+
* the string, not the caret, so it could only append — so the composer, which owns
|
|
2101
|
+
* the textarea, does the splice.
|
|
2102
|
+
*/
|
|
2103
|
+
interface FeedbackComposerHandle {
|
|
2104
|
+
/**
|
|
2105
|
+
* Insert `text` at the caret, replacing any selection (the caret the box last had:
|
|
2106
|
+
* a click on a chip blurs it, and the selection survives the blur), then focus the
|
|
2107
|
+
* box with the caret after the inserted text so the reply can go on. Nothing is
|
|
2108
|
+
* added around it — put a space or a newline in `text` if the reply needs one. A
|
|
2109
|
+
* no-op while `disabledReason` replaces the box.
|
|
2110
|
+
*/
|
|
2111
|
+
insertText: (text: string) => void;
|
|
2112
|
+
focus: () => void;
|
|
2113
|
+
}
|
|
2114
|
+
/**
|
|
2115
|
+
* The answer box under a {@link FeedbackThread}: a textarea, an optional picture,
|
|
2116
|
+
* and Send — Ctrl/⌘+Enter sends, the shortcut the report dialog and the note editor
|
|
2117
|
+
* use, so the habit carries across the feature. Plain Enter is a new line: feedback is
|
|
2118
|
+
* written in paragraphs, unlike a chat — which `sendOn="enter"` is for (keksdose G5).
|
|
2119
|
+
*/
|
|
2120
|
+
declare function FeedbackComposer({ onSend, pending, attachment, attachmentSlot, canSend: canSendProp, sendOn, disabledReason, rows, maxLength, showCount, countLabels, placeholder, value, onValueChange, ref, labels: labelsProp, className, id, size, ...rest }: FeedbackComposerProps): react.JSX.Element;
|
|
2121
|
+
/**
|
|
2122
|
+
* {@link FeedbackComposer} under a name that is not about feedback (keksdose K17).
|
|
2123
|
+
*
|
|
2124
|
+
* The component was never feedback-specific: a textarea, an optional picture or a
|
|
2125
|
+
* host's upload slot, Send, `sendOn="enter"` for the chat way. keksdose's assistant
|
|
2126
|
+
* and support chat are chats, not reports, and an import of `FeedbackComposer` there
|
|
2127
|
+
* reads as a mistake to the next person. The same function, not a wrapper, so the
|
|
2128
|
+
* two names cannot drift.
|
|
2129
|
+
*/
|
|
2130
|
+
declare const ChatComposer: typeof FeedbackComposer;
|
|
2131
|
+
/** {@link FeedbackComposerProps}, for {@link ChatComposer}. */
|
|
2132
|
+
type ChatComposerProps = FeedbackComposerProps;
|
|
2133
|
+
/** {@link FeedbackComposerHandle}, for {@link ChatComposer}. */
|
|
2134
|
+
type ChatComposerHandle = FeedbackComposerHandle;
|
|
2135
|
+
/** {@link FeedbackComposerLabels}, for {@link ChatComposer} — still the `feedbackComposer`
|
|
2136
|
+
* namespace of the provider. */
|
|
2137
|
+
type ChatComposerLabels = FeedbackComposerLabels;
|
|
2138
|
+
|
|
1780
2139
|
/**
|
|
1781
2140
|
* The `confirmDialog` namespace of `<UiKitProvider labels>`: the two buttons' fallback
|
|
1782
2141
|
* text. A call that knows what it is confirming says so per call (`confirmLabel:
|
|
@@ -2116,6 +2475,27 @@ interface FormActionsProps extends Omit<ComponentPropsWithoutRef<"div">, "childr
|
|
|
2116
2475
|
/** The save button's variant. Default `brand`; `danger` for a save that destroys
|
|
2117
2476
|
* (kastlan's `destructive` flag on its own FormActions). */
|
|
2118
2477
|
submitVariant?: ButtonVariant;
|
|
2478
|
+
/**
|
|
2479
|
+
* The Cancel button's variant. Default `secondary` (the outlined button, as before).
|
|
2480
|
+
* `ghost` for a row where Cancel should step back further than an outline — keksdose
|
|
2481
|
+
* G3: a quiet inline row (a confirm under a table row, a card's own small editor)
|
|
2482
|
+
* whose Cancel was a ghost button before it moved onto FormActions, which drew every
|
|
2483
|
+
* Cancel outlined.
|
|
2484
|
+
*/
|
|
2485
|
+
cancelVariant?: ButtonVariant;
|
|
2486
|
+
/**
|
|
2487
|
+
* The size of every button the row draws itself — Save, Cancel and the
|
|
2488
|
+
* `{ label, onClick }` form of {@link destructive}: Button's `size`. Default `md`.
|
|
2489
|
+
* `sm` (12px text, `px-2 py-1`) for a dense row: a confirm inside a table's expansion
|
|
2490
|
+
* row, a toolbar card. keksdose G3: two such rows had small hand-built buttons and lost
|
|
2491
|
+
* them on adopting FormActions, which had no size. At `sm` the spinner and
|
|
2492
|
+
* {@link submitIcon} shrink with the text.
|
|
2493
|
+
*
|
|
2494
|
+
* Your own elements (`children`, an element passed as `destructive`, `start`) are
|
|
2495
|
+
* yours to size — pass them `size="sm"` too. A `size` in {@link submitProps} still
|
|
2496
|
+
* wins for Save, as it always has.
|
|
2497
|
+
*/
|
|
2498
|
+
size?: ButtonSize;
|
|
2119
2499
|
/**
|
|
2120
2500
|
* A destructive action at the START of the row, apart from Save and Cancel — the
|
|
2121
2501
|
* "Delete" of an edit dialog. Pass `{ label, onClick }` for the kit's quiet danger
|
|
@@ -2223,7 +2603,7 @@ interface FormActionsProps extends Omit<ComponentPropsWithoutRef<"div">, "childr
|
|
|
2223
2603
|
* The spinner is the kit's {@link Spinner}, drawn inside the button with `label={null}`
|
|
2224
2604
|
* so the button's name stays its text; `aria-busy` is what says it is working.
|
|
2225
2605
|
*/
|
|
2226
|
-
declare function FormActions({ onCancel, onSubmit, submitLabel, cancelLabel, pendingLabel, submitIcon: SubmitIcon, submitProps, pending, submitDisabled, submitDisabledReason, commit, submitVariant, destructive, start: startSlot, align, placement: placementProp, stickyWithin, bleed, form, submitShortcut, submitShortcutHint, children, className, style, ...rest }: FormActionsProps): react.JSX.Element;
|
|
2606
|
+
declare function FormActions({ onCancel, onSubmit, submitLabel, cancelLabel, pendingLabel, submitIcon: SubmitIcon, submitProps, pending, submitDisabled, submitDisabledReason, commit, submitVariant, cancelVariant, size, destructive, start: startSlot, align, placement: placementProp, stickyWithin, bleed, form, submitShortcut, submitShortcutHint, children, className, style, ...rest }: FormActionsProps): react.JSX.Element;
|
|
2227
2607
|
|
|
2228
2608
|
/**
|
|
2229
2609
|
* Who holds one record, and the owner's every way of changing that — Kurvenschmiede's
|
|
@@ -2784,6 +3164,9 @@ interface UiKitLabels {
|
|
|
2784
3164
|
phoneInput: PhoneInputLabels;
|
|
2785
3165
|
/** 0.22.0: `SignChip` — the outflow / inflow toggle beside an amount. */
|
|
2786
3166
|
signChip: SignChipLabels;
|
|
3167
|
+
/** 0.23.0: `ColumnMapper` / `ColumnRoleTable` — a pasted or dropped table, a role per
|
|
3168
|
+
* column. */
|
|
3169
|
+
columnMapper: ColumnMapperLabels;
|
|
2787
3170
|
}
|
|
2788
3171
|
/**
|
|
2789
3172
|
* A label override, as deep as the labels go: an object of labels (a namespace, or a
|
|
@@ -2978,4 +3361,4 @@ declare function useKitFileLabels(prop?: Partial<FileLabels>): FileLabels;
|
|
|
2978
3361
|
*/
|
|
2979
3362
|
declare function missingKitLabels(labels: UiKitLabelOverrides | undefined, reference: UiKitLabels): string[];
|
|
2980
3363
|
|
|
2981
|
-
export {
|
|
3364
|
+
export { DEFAULT_COPY_BUTTON_LABELS as $, type AppShellLabels as A, Button as B, type CalculatorLabels as C, type ChatComposerHandle as D, type ChatComposerLabels as E, type ChatComposerProps as F, type ComboboxLabels as G, type CommonLabels as H, type ConfirmDialogLabels as I, type ConfirmFn as J, type ConfirmOptions as K, ConfirmProvider as L, type ConfirmProviderProps as M, type ConfirmTone as N, CopyButton as O, type CopyButtonLabels as P, type CopyButtonProps as Q, type CurrencyLabels as R, CurrentPasswordInput as S, type CurrentPasswordInputLabels as T, type CurrentPasswordInputProps as U, DEFAULT_APP_SHELL_LABELS as V, DEFAULT_CALCULATOR_LABELS as W, DEFAULT_CHARACTER_COUNT_LABELS as X, DEFAULT_COMBOBOX_LABELS as Y, DEFAULT_COMMON_LABELS as Z, DEFAULT_CONFIRM_DIALOG_LABELS as _, type ButtonClassesOptions as a, type FormActionsProps as a$, DEFAULT_CURRENCY_LABELS as a0, DEFAULT_DANGER_CONFIRM_LABELS as a1, DEFAULT_DATE_PICKER_LABELS as a2, DEFAULT_FEEDBACK_COMPOSER_LABELS as a3, DEFAULT_FEEDBACK_THREAD_LABELS as a4, DEFAULT_FILE_LABELS as a5, DEFAULT_FILE_PICKER_LABELS as a6, DEFAULT_FORM_ACTIONS_LABELS as a7, DEFAULT_IBAN_INPUT_LABELS as a8, DEFAULT_MULTI_SELECT_LABELS as a9, type FeedbackComposerLabels as aA, type FeedbackComposerProps as aB, FeedbackThread as aC, type FeedbackThreadAttachment as aD, type FeedbackThreadEvent as aE, type FeedbackThreadItem as aF, type FeedbackThreadLabels as aG, type FeedbackThreadMessage as aH, type FeedbackThreadProps as aI, FieldChevron as aJ, type FieldChevronProps as aK, FieldHint as aL, type FieldHintProps as aM, FileButton as aN, type FileButtonProps as aO, type FileLabels as aP, type FilePickerLabels as aQ, type FileRejection as aR, type FileRejectionReason as aS, type FileScreenOptions as aT, FloatingField as aU, type FloatingFieldProps as aV, FormActions as aW, type FormActionsAlign as aX, type FormActionsDestructive as aY, type FormActionsLabels as aZ, type FormActionsPlacement as a_, DEFAULT_PASSWORD_REVEAL_LABELS as aa, DEFAULT_PHONE_INPUT_LABELS as ab, DEFAULT_PICKER_SHEET_LABELS as ac, DEFAULT_SHARE_CARD_LABELS as ad, DEFAULT_SWIPEABLE_ROW_LABELS as ae, DEFAULT_TABS_LABELS as af, DEFAULT_TOP_BAR_LABELS as ag, DangerConfirm as ah, type DangerConfirmLabels as ai, type DangerConfirmProps as aj, type DangerConfirmValues as ak, type DangerConsequence as al, type DatePickerLabels as am, EmptyState as an, type EmptyStateProps as ao, FIELD_BASE as ap, FIELD_DISPLAY as aq, FIELD_FLOATING_PAD as ar, FIELD_INVALID as as, FIELD_TRIGGER as at, FIELD_WRITABLE_LOOK as au, FLOATING_INPUT_CLASS as av, FLOATING_LABEL_CLASS as aw, FeedbackComposer as ax, type FeedbackComposerAttachment as ay, type FeedbackComposerHandle as az, type ButtonLinkProps as b, type UseFilePickerOptions as b$, type FormActionsStickyWithin as b0, type FormActionsSubmitProps as b1, type FormActionsSubmitShortcut as b2, IbanInput as b3, type IbanInputLabels as b4, type IbanInputProps as b5, IconButton as b6, type IconButtonGlyphSize as b7, type IconButtonLinkProps as b8, type IconButtonProps as b9, type ShareCardLabels as bA, type ShareCardProps as bB, ShareDialog as bC, type ShareDialogProps as bD, type ShareGrantee as bE, SharePanel as bF, type SharePanelProps as bG, type SharePendingGrant as bH, type ShareRole as bI, Spinner as bJ, type SpinnerProps as bK, type SwipeableRowLabels as bL, type TabItem as bM, Tabs as bN, type TabsLabels as bO, type TabsProps as bP, Textarea as bQ, type TextareaProps as bR, type TopBarLabels as bS, TypedConfirmField as bT, type TypedConfirmFieldLabels as bU, type TypedConfirmFieldProps as bV, type TypedMatch as bW, type UiKitLabelOverrides as bX, type UiKitLabels as bY, UiKitProvider as bZ, type UiKitProviderProps as b_, type IconButtonSize as ba, type IconButtonTone as bb, type IconButtonToneColor as bc, type IconButtonVariant as bd, Input as be, type InputProps as bf, type KitDateFormatContext as bg, type KitDateFormatter as bh, type KitLinkComponent as bi, type KitLinkProps as bj, Label as bk, type LabelOverride as bl, type LabelProps as bm, type MultiSelectLabels as bn, PHONE_QUERY as bo, type PasswordRevealLabels as bp, PhoneInput as bq, type PhoneInputLabels as br, type PhoneInputProps as bs, type PickerSheetLabels as bt, type ResponsiveFormActionsPlacement as bu, Select as bv, type SelectProps as bw, type ShareAddRequest as bx, type ShareCandidate as by, ShareCard as bz, type ButtonProps as c, type UseFilePickerReturn as c0, buttonClasses as c1, formatFileSize as c2, matchesAccept as c3, missingKitLabels as c4, resolvePasswordRevealLabels as c5, typedMatches as c6, useConfirm as c7, useFilePicker as c8, useKitChartTooltipPlacement as c9, useKitDateFormatter as ca, useKitFileLabels as cb, useKitLabelOverrides as cc, useKitLabels as cd, useKitLink as ce, useKitLocale as cf, useKitWeekStart as cg, type FilePickHandler as ch, usePromisePending as ci, formatAccept as cj, judgePick as ck, screenFiles as cl, summariseRejections as cm, type ButtonSize as d, type ButtonTone as e, type ButtonVariant as f, Card as g, CardAction as h, type CardActionProps as i, CardContent as j, type CardContentProps as k, type CardDensity as l, CardDescription as m, type CardDescriptionProps as n, CardFooter as o, type CardFooterProps as p, CardHeader as q, type CardHeaderProps as r, type CardProps as s, CardTitle as t, type CardTitleLevel as u, type CardTitleProps as v, type CardTone as w, type CharacterCountLabels as x, type ChartTooltipPlacement as y, ChatComposer as z };
|