@webority/ui-react 0.88.1 → 0.90.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/dist/canvas-kit/kit.css +0 -0
- package/dist/canvas-kit/kit.js +155261 -0
- package/dist/canvas-kit/manifest.json +26177 -0
- package/dist/canvas-kit/release.json +25 -0
- package/dist/components/AppAutocomplete.js +1 -1
- package/dist/components/AppAvatarPicker.js +1 -1
- package/dist/components/AppChipGroup.js +1 -1
- package/dist/components/AppColorField.js +1 -1
- package/dist/components/AppCommandPalette.js +1 -1
- package/dist/components/AppCountrySelect.js +1 -1
- package/dist/components/AppDatePicker.js +1 -1
- package/dist/components/AppDateRangePicker.js +1 -1
- package/dist/components/AppDropZone.js +1 -1
- package/dist/components/AppFileAttachment.js +1 -1
- package/dist/components/AppFilePicker.js +1 -1
- package/dist/components/AppIcon.js +1 -1
- package/dist/components/AppInput.js +1 -1
- package/dist/components/AppLogoPicker.js +1 -1
- package/dist/components/AppMentionInput.js +1 -1
- package/dist/components/AppMeter.js +1 -1
- package/dist/components/AppModal.js +1 -1
- package/dist/components/AppMultiSelect.js +1 -1
- package/dist/components/AppNumberInput.js +1 -1
- package/dist/components/AppOtpInput.js +1 -1
- package/dist/components/AppPhoneNumberInput.js +1 -1
- package/dist/components/AppProgress.js +1 -1
- package/dist/components/AppRadioGroup.js +1 -1
- package/dist/components/AppRating.js +1 -1
- package/dist/components/AppRichText.js +1 -1
- package/dist/components/AppSearch.js +1 -1
- package/dist/components/AppSegmented.js +1 -1
- package/dist/components/AppSelect.js +1 -1
- package/dist/components/AppSidebarMenu.js +1 -1
- package/dist/components/AppSlider.js +1 -1
- package/dist/components/AppSplitView.js +1 -1
- package/dist/components/AppTabs.js +1 -1
- package/dist/components/AppTagInput.js +1 -1
- package/dist/components/AppTextarea.js +1 -1
- package/dist/components/AppTimePicker.js +1 -1
- package/dist/guidance.json +9623 -0
- package/dist/lib/wuiMarker.js +1 -1
- package/dist/types/components/AppAccordion.d.ts +14 -4
- package/dist/types/components/AppActionIcon.d.ts +40 -15
- package/dist/types/components/AppAlert.d.ts +50 -17
- package/dist/types/components/AppAsyncBlock.d.ts +19 -9
- package/dist/types/components/AppAutocomplete.d.ts +36 -0
- package/dist/types/components/AppAvatar.d.ts +48 -12
- package/dist/types/components/AppAvatarGroup.d.ts +14 -4
- package/dist/types/components/AppAvatarPicker.d.ts +50 -19
- package/dist/types/components/AppBadge.d.ts +14 -3
- package/dist/types/components/AppBanner.d.ts +13 -3
- package/dist/types/components/AppBreadcrumbs.d.ts +3 -3
- package/dist/types/components/AppButton.d.ts +72 -20
- package/dist/types/components/AppButtonGroup.d.ts +18 -4
- package/dist/types/components/AppCalendar.d.ts +13 -0
- package/dist/types/components/AppCard.d.ts +60 -21
- package/dist/types/components/AppCarousel.d.ts +56 -14
- package/dist/types/components/AppChart.d.ts +38 -0
- package/dist/types/components/AppChartCard.d.ts +13 -5
- package/dist/types/components/AppCheckbox.d.ts +9 -0
- package/dist/types/components/AppChip.d.ts +29 -10
- package/dist/types/components/AppChipGroup.d.ts +16 -3
- package/dist/types/components/AppChoiceCard.d.ts +55 -14
- package/dist/types/components/AppChoiceChip.d.ts +26 -6
- package/dist/types/components/AppCodeBlock.d.ts +27 -7
- package/dist/types/components/AppColorField.d.ts +36 -8
- package/dist/types/components/AppColumnMenu.d.ts +17 -4
- package/dist/types/components/AppCommandPalette.d.ts +72 -29
- package/dist/types/components/AppCommentThread.d.ts +25 -7
- package/dist/types/components/AppCompareTable.d.ts +9 -4
- package/dist/types/components/AppConfirmDialog.d.ts +54 -15
- package/dist/types/components/AppConsentBanner.d.ts +45 -12
- package/dist/types/components/AppContextMenu.d.ts +23 -10
- package/dist/types/components/AppCopyButton.d.ts +39 -9
- package/dist/types/components/AppCountrySelect.d.ts +50 -1
- package/dist/types/components/AppDashboardCell.d.ts +10 -2
- package/dist/types/components/AppDashboardGrid.d.ts +5 -1
- package/dist/types/components/AppDataTable.d.ts +103 -50
- package/dist/types/components/AppDatePicker.d.ts +32 -0
- package/dist/types/components/AppDateRangePicker.d.ts +31 -0
- package/dist/types/components/AppDescriptions.d.ts +28 -8
- package/dist/types/components/AppDrawer.d.ts +54 -13
- package/dist/types/components/AppDropZone.d.ts +34 -11
- package/dist/types/components/AppDropdown.d.ts +27 -20
- package/dist/types/components/AppDueDate.d.ts +16 -5
- package/dist/types/components/AppEmptyState.d.ts +22 -6
- package/dist/types/components/AppErrorSummary.d.ts +17 -4
- package/dist/types/components/AppFileAttachment.d.ts +30 -14
- package/dist/types/components/AppFilePicker.d.ts +39 -13
- package/dist/types/components/AppFileViewer.d.ts +21 -0
- package/dist/types/components/AppFilterBar.d.ts +23 -8
- package/dist/types/components/AppFloatingDock.d.ts +20 -6
- package/dist/types/components/AppFormActions.d.ts +11 -2
- package/dist/types/components/AppFormRow.d.ts +11 -2
- package/dist/types/components/AppFormSection.d.ts +25 -9
- package/dist/types/components/AppHoverCard.d.ts +25 -8
- package/dist/types/components/AppIcon.d.ts +18 -8
- package/dist/types/components/AppInfoList.d.ts +2 -0
- package/dist/types/components/AppInfoTip.d.ts +17 -4
- package/dist/types/components/AppInlineEdit.d.ts +22 -11
- package/dist/types/components/AppInput.d.ts +81 -2
- package/dist/types/components/AppInputGroup.d.ts +19 -6
- package/dist/types/components/AppKanban.d.ts +51 -23
- package/dist/types/components/AppKbd.d.ts +1 -0
- package/dist/types/components/AppKpiTile.d.ts +61 -31
- package/dist/types/components/AppLightbox.d.ts +12 -6
- package/dist/types/components/AppLink.d.ts +38 -17
- package/dist/types/components/AppLogoPicker.d.ts +88 -23
- package/dist/types/components/AppMarkdown.d.ts +3 -1
- package/dist/types/components/AppMentionInput.d.ts +35 -0
- package/dist/types/components/AppMenubar.d.ts +9 -7
- package/dist/types/components/AppMeter.d.ts +39 -10
- package/dist/types/components/AppMetricStrip.d.ts +11 -2
- package/dist/types/components/AppModal.d.ts +48 -19
- package/dist/types/components/AppMultiSelect.d.ts +44 -0
- package/dist/types/components/AppNavigationMenu.d.ts +6 -3
- package/dist/types/components/AppNotificationCenter.d.ts +23 -8
- package/dist/types/components/AppNumberInput.d.ts +38 -1
- package/dist/types/components/AppOnboardingChecklist.d.ts +27 -8
- package/dist/types/components/AppOtpInput.d.ts +24 -0
- package/dist/types/components/AppPageHeader.d.ts +60 -19
- package/dist/types/components/AppPagination.d.ts +21 -7
- package/dist/types/components/AppPhoneNumberInput.d.ts +37 -0
- package/dist/types/components/AppPopover.d.ts +23 -16
- package/dist/types/components/AppPricingCard.d.ts +27 -8
- package/dist/types/components/AppProgress.d.ts +44 -10
- package/dist/types/components/AppQrCode.d.ts +13 -5
- package/dist/types/components/AppRadio.d.ts +10 -0
- package/dist/types/components/AppRadioGroup.d.ts +47 -17
- package/dist/types/components/AppRating.d.ts +52 -15
- package/dist/types/components/AppRecordPager.d.ts +24 -8
- package/dist/types/components/AppRelativeTime.d.ts +9 -5
- package/dist/types/components/AppRepeater.d.ts +34 -8
- package/dist/types/components/AppResizable.d.ts +11 -3
- package/dist/types/components/AppResizableHandle.d.ts +9 -1
- package/dist/types/components/AppResizablePanel.d.ts +10 -3
- package/dist/types/components/AppResourceCard.d.ts +14 -2
- package/dist/types/components/AppResult.d.ts +23 -7
- package/dist/types/components/AppRichText.d.ts +34 -0
- package/dist/types/components/AppRollingNumber.d.ts +17 -7
- package/dist/types/components/AppRouteError.d.ts +22 -5
- package/dist/types/components/AppScoreScale.d.ts +40 -12
- package/dist/types/components/AppScrollbar.d.ts +7 -3
- package/dist/types/components/AppSearch.d.ts +32 -7
- package/dist/types/components/AppSectionCallToAction.d.ts +27 -7
- package/dist/types/components/AppSectionFaq.d.ts +27 -7
- package/dist/types/components/AppSectionFeatures.d.ts +34 -8
- package/dist/types/components/AppSectionHero.d.ts +29 -8
- package/dist/types/components/AppSectionLogos.d.ts +29 -7
- package/dist/types/components/AppSectionPricing.d.ts +25 -6
- package/dist/types/components/AppSectionTestimonials.d.ts +29 -7
- package/dist/types/components/AppSegmented.d.ts +41 -13
- package/dist/types/components/AppSelect.d.ts +53 -1
- package/dist/types/components/AppSelectMini.d.ts +28 -11
- package/dist/types/components/AppShell.d.ts +81 -35
- package/dist/types/components/AppShortcutLegend.d.ts +12 -4
- package/dist/types/components/AppShowMore.d.ts +26 -5
- package/dist/types/components/AppSidebarMenu.d.ts +59 -18
- package/dist/types/components/AppSkeleton.d.ts +33 -4
- package/dist/types/components/AppSlider.d.ts +43 -0
- package/dist/types/components/AppSortableList.d.ts +20 -0
- package/dist/types/components/AppSparkline.d.ts +19 -5
- package/dist/types/components/AppSpinner.d.ts +14 -3
- package/dist/types/components/AppSplash.d.ts +24 -7
- package/dist/types/components/AppSplitButton.d.ts +47 -14
- package/dist/types/components/AppSplitView.d.ts +53 -27
- package/dist/types/components/AppStatusBadge.d.ts +11 -3
- package/dist/types/components/AppStepper.d.ts +36 -11
- package/dist/types/components/AppSwitch.d.ts +16 -0
- package/dist/types/components/AppTableEmptyState.d.ts +7 -3
- package/dist/types/components/AppTablePagination.d.ts +23 -9
- package/dist/types/components/AppTableToolbar.d.ts +24 -10
- package/dist/types/components/AppTabs.d.ts +47 -18
- package/dist/types/components/AppTagInput.d.ts +38 -0
- package/dist/types/components/AppTextarea.d.ts +46 -0
- package/dist/types/components/AppThemeToggle.d.ts +58 -12
- package/dist/types/components/AppTimePicker.d.ts +38 -1
- package/dist/types/components/AppTimeline.d.ts +22 -20
- package/dist/types/components/AppToast.d.ts +30 -12
- package/dist/types/components/AppToolbar.d.ts +24 -9
- package/dist/types/components/AppTooltip.d.ts +24 -14
- package/dist/types/components/AppTour.d.ts +10 -0
- package/dist/types/components/AppTreeView.d.ts +23 -0
- package/dist/types/components/AppTruncate.d.ts +11 -2
- package/dist/types/components/AppUpdateBar.d.ts +10 -2
- package/dist/types/components/AppWhatsNew.d.ts +26 -7
- package/dist/types/components/AppWizard.d.ts +79 -0
- package/dist/types/components/AppWorkspaceSwitcher.d.ts +36 -17
- package/dist/types/lib/wuiMarker.d.ts +4 -0
- package/package.json +10 -7
|
@@ -8,49 +8,79 @@
|
|
|
8
8
|
* sit apart from every other field on the form.
|
|
9
9
|
*
|
|
10
10
|
* @param {object} props
|
|
11
|
-
* @param {import('react').ReactNode} props.label
|
|
11
|
+
* @param {import('react').ReactNode} props.label
|
|
12
12
|
* @param {{ value: string, label: import('react').ReactNode, description?: import('react').ReactNode, disabled?: boolean }[]} props.options
|
|
13
|
-
*
|
|
14
|
-
* @param {string} [props.
|
|
15
|
-
* @param {string} [props.
|
|
16
|
-
* @param {string} [props.defaultValue] Initially selected value (uncontrolled).
|
|
13
|
+
* @param {string} [props.name]
|
|
14
|
+
* @param {string} [props.value]
|
|
15
|
+
* @param {string} [props.defaultValue]
|
|
17
16
|
* @param {(value: string) => void} [props.onChange]
|
|
18
|
-
* @param {'default'|'card'} [props.variant
|
|
19
|
-
*
|
|
20
|
-
* @param {boolean} [props.
|
|
21
|
-
* @param {boolean} [props.
|
|
22
|
-
* @param {
|
|
23
|
-
* @param {string} [props.
|
|
24
|
-
* @param {
|
|
25
|
-
* @param {
|
|
26
|
-
* @param {string} [props.helpLabel="More information"] aria-label for the info-tip button.
|
|
17
|
+
* @param {'default'|'card'} [props.variant]
|
|
18
|
+
* @param {boolean} [props.inline]
|
|
19
|
+
* @param {boolean} [props.required]
|
|
20
|
+
* @param {boolean} [props.disabled]
|
|
21
|
+
* @param {string} [props.error]
|
|
22
|
+
* @param {string} [props.hint]
|
|
23
|
+
* @param {import('react').ReactNode} [props.help]
|
|
24
|
+
* @param {string} [props.helpLabel]
|
|
27
25
|
* @param {string} [props.id]
|
|
28
|
-
* @param {string} [props.className]
|
|
29
|
-
* @param {import('react').CSSProperties} [props.style]
|
|
30
|
-
* @param {string} [props.fieldClassName]
|
|
26
|
+
* @param {string} [props.className]
|
|
27
|
+
* @param {import('react').CSSProperties} [props.style]
|
|
28
|
+
* @param {string} [props.fieldClassName]
|
|
31
29
|
*/
|
|
32
30
|
export default function AppRadioGroup(props: {
|
|
31
|
+
/** Visible group label; also the group's accessible name. */
|
|
33
32
|
label: import('react').ReactNode;
|
|
33
|
+
/** The choices, in order. Each option has a value, a label, an optional description and an optional disabled flag. */
|
|
34
34
|
options: {
|
|
35
35
|
value: string;
|
|
36
36
|
label: import('react').ReactNode;
|
|
37
37
|
description?: import('react').ReactNode;
|
|
38
38
|
disabled?: boolean;
|
|
39
39
|
}[];
|
|
40
|
+
/** Shared name of the radios. Defaults to a generated one. */
|
|
40
41
|
name?: string;
|
|
42
|
+
/** Selected value (controlled). */
|
|
41
43
|
value?: string;
|
|
44
|
+
/** Initially selected value (uncontrolled). */
|
|
42
45
|
defaultValue?: string;
|
|
43
46
|
onChange?: (value: string) => void;
|
|
47
|
+
/**
|
|
48
|
+
* Draws each option as a bordered card the whole of which selects it; the chosen card takes the primary border and a tinted fill.
|
|
49
|
+
* @default "default"
|
|
50
|
+
*/
|
|
44
51
|
variant?: 'default' | 'card';
|
|
52
|
+
/**
|
|
53
|
+
* Options in a row (wrapping) instead of a column.
|
|
54
|
+
* @default false
|
|
55
|
+
*/
|
|
45
56
|
inline?: boolean;
|
|
57
|
+
/**
|
|
58
|
+
* Marks the group and each option as required: the label shows the required mark, the group takes aria-required and each input the required attribute.
|
|
59
|
+
* @default false
|
|
60
|
+
*/
|
|
46
61
|
required?: boolean;
|
|
62
|
+
/**
|
|
63
|
+
* Disables every option.
|
|
64
|
+
* @default false
|
|
65
|
+
*/
|
|
47
66
|
disabled?: boolean;
|
|
67
|
+
/** Error message below the group. Replaces the hint. */
|
|
48
68
|
error?: string;
|
|
69
|
+
/** Helper text below the group. */
|
|
49
70
|
hint?: string;
|
|
71
|
+
/** Content for the label info-tip. */
|
|
50
72
|
help?: import('react').ReactNode;
|
|
73
|
+
/**
|
|
74
|
+
* aria-label for the info-tip button.
|
|
75
|
+
* @default "More information"
|
|
76
|
+
*/
|
|
51
77
|
helpLabel?: string;
|
|
78
|
+
/** The group's id; generated when left out. Option ids and the label and message ids derive from it. */
|
|
52
79
|
id?: string;
|
|
80
|
+
/** Class on the group (the control). */
|
|
53
81
|
className?: string;
|
|
82
|
+
/** Inline style; lands on the group with className. */
|
|
54
83
|
style?: import('react').CSSProperties;
|
|
84
|
+
/** Class on the .field wrapper. */
|
|
55
85
|
fieldClassName?: string;
|
|
56
86
|
}): import("react").JSX.Element;
|
|
@@ -9,40 +9,77 @@ import "@webority/ui-elements/elements/rating";
|
|
|
9
9
|
* let it hold its own value (`defaultValue` seeds it).
|
|
10
10
|
*
|
|
11
11
|
* @param {object} props
|
|
12
|
-
* @param {number} [props.value]
|
|
13
|
-
* @param {number} [props.defaultValue]
|
|
12
|
+
* @param {number} [props.value]
|
|
13
|
+
* @param {number} [props.defaultValue]
|
|
14
14
|
* @param {(value: number) => void} [props.onChange] Called with the chosen rating (input only).
|
|
15
|
-
* @param {number} [props.max
|
|
16
|
-
* @param {boolean} [props.readOnly
|
|
17
|
-
* @param {boolean} [props.half
|
|
18
|
-
* @param {boolean} [props.showValue
|
|
19
|
-
* @param {"sm"|"md"|"lg"} [props.size
|
|
20
|
-
* @param {import('react').ReactNode} [props.label]
|
|
21
|
-
* @param {string} [props.name]
|
|
22
|
-
* @param {boolean} [props.required
|
|
23
|
-
* @param {boolean} [props.disabled
|
|
24
|
-
* @param {string} [props.error]
|
|
25
|
-
* @param {string} [props.hint]
|
|
15
|
+
* @param {number} [props.max]
|
|
16
|
+
* @param {boolean} [props.readOnly]
|
|
17
|
+
* @param {boolean} [props.half]
|
|
18
|
+
* @param {boolean} [props.showValue]
|
|
19
|
+
* @param {"sm"|"md"|"lg"} [props.size]
|
|
20
|
+
* @param {import('react').ReactNode} [props.label]
|
|
21
|
+
* @param {string} [props.name]
|
|
22
|
+
* @param {boolean} [props.required]
|
|
23
|
+
* @param {boolean} [props.disabled]
|
|
24
|
+
* @param {string} [props.error]
|
|
25
|
+
* @param {string} [props.hint]
|
|
26
26
|
* @param {string} [props.id]
|
|
27
|
-
* @param {string} [props.className]
|
|
28
|
-
* @param {string} [props.fieldClassName]
|
|
27
|
+
* @param {string} [props.className]
|
|
28
|
+
* @param {string} [props.fieldClassName]
|
|
29
29
|
*/
|
|
30
30
|
export default function AppRating(props: {
|
|
31
|
+
/** The rating (controlled as an input). A display may hold a fraction such as 4.3; an input rounds to a whole star. */
|
|
31
32
|
value?: number;
|
|
33
|
+
/** Initial rating of an uncontrolled input. */
|
|
32
34
|
defaultValue?: number;
|
|
33
35
|
onChange?: (value: number) => void;
|
|
36
|
+
/**
|
|
37
|
+
* How many stars.
|
|
38
|
+
* @default 5
|
|
39
|
+
*/
|
|
34
40
|
max?: number;
|
|
41
|
+
/**
|
|
42
|
+
* A display, not an input.
|
|
43
|
+
* @default false
|
|
44
|
+
*/
|
|
35
45
|
readOnly?: boolean;
|
|
46
|
+
/**
|
|
47
|
+
* Display only: draw the value to the nearest half star.
|
|
48
|
+
* @default false
|
|
49
|
+
*/
|
|
36
50
|
half?: boolean;
|
|
51
|
+
/**
|
|
52
|
+
* Display only: print the number beside the stars.
|
|
53
|
+
* @default false
|
|
54
|
+
*/
|
|
37
55
|
showValue?: boolean;
|
|
56
|
+
/**
|
|
57
|
+
* The star size: 16, 20 or 28 pixels.
|
|
58
|
+
* @default "md"
|
|
59
|
+
*/
|
|
38
60
|
size?: "sm" | "md" | "lg";
|
|
61
|
+
/** Input: the visible group label and its name. Display: prefix of the spoken text, such as Quality: 4.5 out of 5; a string. */
|
|
39
62
|
label?: import('react').ReactNode;
|
|
63
|
+
/** Input only: the form field name. Defaults to a generated one. */
|
|
40
64
|
name?: string;
|
|
65
|
+
/**
|
|
66
|
+
* Input only: shows the required mark beside the label, and sets aria-required on the group and required on each star's input.
|
|
67
|
+
* @default false
|
|
68
|
+
*/
|
|
41
69
|
required?: boolean;
|
|
70
|
+
/**
|
|
71
|
+
* Input only: disables every star's input and sets the disabled attribute on the control.
|
|
72
|
+
* @default false
|
|
73
|
+
*/
|
|
42
74
|
disabled?: boolean;
|
|
75
|
+
/** Input only: message below the stars. Replaces the hint. */
|
|
43
76
|
error?: string;
|
|
77
|
+
/** Input only: helper text below the stars. */
|
|
44
78
|
hint?: string;
|
|
79
|
+
/** The rating control's id; generated when left out. */
|
|
45
80
|
id?: string;
|
|
81
|
+
/** Class on the stars (the control). */
|
|
46
82
|
className?: string;
|
|
83
|
+
/** Input only: class on the .field wrapper. */
|
|
47
84
|
fieldClassName?: string;
|
|
48
85
|
}): import("react").JSX.Element;
|
|
@@ -12,27 +12,43 @@ import "@webority/ui-elements/elements/record-pager";
|
|
|
12
12
|
* `<wui-record-pager>`, which Razor `<app-record-pager>` renders too.
|
|
13
13
|
*
|
|
14
14
|
* @param {object} props
|
|
15
|
-
* @param {number} [props.index]
|
|
16
|
-
*
|
|
17
|
-
* @param {
|
|
18
|
-
* @param {string} [props.prevHref] The previous record's URL.
|
|
15
|
+
* @param {number} [props.index]
|
|
16
|
+
* @param {number} [props.total]
|
|
17
|
+
* @param {string} [props.prevHref]
|
|
19
18
|
* @param {(event: import('react').MouseEvent) => void} [props.onPrev] Called on previous.
|
|
20
|
-
* @param {string} [props.nextHref]
|
|
19
|
+
* @param {string} [props.nextHref]
|
|
21
20
|
* @param {(event: import('react').MouseEvent) => void} [props.onNext] Called on next.
|
|
22
|
-
* @param {string} [props.prevLabel
|
|
23
|
-
* @param {string} [props.nextLabel
|
|
24
|
-
* @param {boolean} [props.keys
|
|
21
|
+
* @param {string} [props.prevLabel]
|
|
22
|
+
* @param {string} [props.nextLabel]
|
|
23
|
+
* @param {boolean} [props.keys]
|
|
25
24
|
* @param {string} [props.className]
|
|
26
25
|
*/
|
|
27
26
|
export default function AppRecordPager(props: {
|
|
27
|
+
/** The position of this record, from 1. Without it (nothing open) the label is empty and both icons are disabled. */
|
|
28
28
|
index?: number;
|
|
29
|
+
/** How many records the list holds. */
|
|
29
30
|
total?: number;
|
|
31
|
+
/** The previous record URL. */
|
|
30
32
|
prevHref?: string;
|
|
31
33
|
onPrev?: (event: import('react').MouseEvent) => void;
|
|
34
|
+
/** The next record URL. */
|
|
32
35
|
nextHref?: string;
|
|
33
36
|
onNext?: (event: import('react').MouseEvent) => void;
|
|
37
|
+
/**
|
|
38
|
+
* The previous icon name and tooltip, such as Previous invoice.
|
|
39
|
+
* @default "Previous"
|
|
40
|
+
*/
|
|
34
41
|
prevLabel?: string;
|
|
42
|
+
/**
|
|
43
|
+
* The next icon name and tooltip, such as Next invoice.
|
|
44
|
+
* @default "Next"
|
|
45
|
+
*/
|
|
35
46
|
nextLabel?: string;
|
|
47
|
+
/**
|
|
48
|
+
* J and K press next and previous.
|
|
49
|
+
* @default false
|
|
50
|
+
*/
|
|
36
51
|
keys?: boolean;
|
|
52
|
+
/** Extra CSS class on the pager. */
|
|
37
53
|
className?: string;
|
|
38
54
|
}): import("react").JSX.Element;
|
|
@@ -5,14 +5,18 @@
|
|
|
5
5
|
* `<wui-relative-time>`, which Razor `<app-relative-time>` renders too.
|
|
6
6
|
*
|
|
7
7
|
* @param {object} props
|
|
8
|
-
* @param {string|number
|
|
9
|
-
*
|
|
10
|
-
* unreadable value shows "-" and no tooltip.
|
|
11
|
-
* @param {'auto'|'top'|'bottom'|'start'|'end'} [props.tooltipPlacement='auto'] Preferred side of the exact-time tooltip.
|
|
8
|
+
* @param {string|number} props.value
|
|
9
|
+
* @param {'auto'|'top'|'bottom'|'start'|'end'} [props.tooltipPlacement]
|
|
12
10
|
* @param {string} [props.className]
|
|
13
11
|
*/
|
|
14
12
|
export default function AppRelativeTime(props: {
|
|
15
|
-
|
|
13
|
+
/** The moment as an ISO string with its zone (Z or an offset) or epoch milliseconds; write a Date as an ISO string. A bare 2026-10-04 is midnight IST; a missing or unreadable value shows a dash and no tooltip. */
|
|
14
|
+
value: string | number;
|
|
15
|
+
/**
|
|
16
|
+
* Preferred side of the exact-time tooltip.
|
|
17
|
+
* @default "auto"
|
|
18
|
+
*/
|
|
16
19
|
tooltipPlacement?: 'auto' | 'top' | 'bottom' | 'start' | 'end';
|
|
20
|
+
/** Extra class on the relative time element. */
|
|
17
21
|
className?: string;
|
|
18
22
|
}): any;
|
|
@@ -20,17 +20,17 @@
|
|
|
20
20
|
* `<app-repeater-row label="…">`.
|
|
21
21
|
* @param {() => void} props.onAdd
|
|
22
22
|
* @param {(index: number) => void} [props.onRemove] Omit to make rows non-removable.
|
|
23
|
-
* @param {string} [props.addLabel
|
|
24
|
-
* @param {string} [props.addVariant
|
|
25
|
-
*
|
|
26
|
-
* @param {string} [props.
|
|
27
|
-
* @param {
|
|
28
|
-
* @param {number} [props.
|
|
29
|
-
* @param {
|
|
30
|
-
* @param {boolean} [props.numbered=true] Show the row index.
|
|
23
|
+
* @param {string} [props.addLabel]
|
|
24
|
+
* @param {string} [props.addVariant]
|
|
25
|
+
* @param {string} [props.removeLabel]
|
|
26
|
+
* @param {string} [props.emptyText]
|
|
27
|
+
* @param {number} [props.min]
|
|
28
|
+
* @param {number} [props.max]
|
|
29
|
+
* @param {boolean} [props.numbered]
|
|
31
30
|
* @param {string} [props.className]
|
|
32
31
|
*/
|
|
33
32
|
export default function AppRepeater(props: {
|
|
33
|
+
/** The rows, one entry per row. The caller draws each row's fields. */
|
|
34
34
|
rows: {
|
|
35
35
|
id?: string | number;
|
|
36
36
|
}[];
|
|
@@ -38,12 +38,38 @@ export default function AppRepeater(props: {
|
|
|
38
38
|
rowLabel?: (row: object, index: number) => import('react').ReactNode;
|
|
39
39
|
onAdd: () => void;
|
|
40
40
|
onRemove?: (index: number) => void;
|
|
41
|
+
/**
|
|
42
|
+
* Text of the add button.
|
|
43
|
+
* @default "Add another"
|
|
44
|
+
*/
|
|
41
45
|
addLabel?: string;
|
|
46
|
+
/**
|
|
47
|
+
* The add button's variant, such as primary, outline or ghost. An unknown value warns in development.
|
|
48
|
+
* @default "secondary"
|
|
49
|
+
*/
|
|
42
50
|
addVariant?: string;
|
|
51
|
+
/**
|
|
52
|
+
* Accessible name of each remove control. The row number is added, as in "Remove row 2".
|
|
53
|
+
* @default "Remove row"
|
|
54
|
+
*/
|
|
43
55
|
removeLabel?: string;
|
|
56
|
+
/** Shown in place of the rows when there are none. */
|
|
44
57
|
emptyText?: string;
|
|
58
|
+
/**
|
|
59
|
+
* Rows at or below this count cannot be removed.
|
|
60
|
+
* @default 0
|
|
61
|
+
*/
|
|
45
62
|
min?: number;
|
|
63
|
+
/** Adding is disabled at this count. */
|
|
46
64
|
max?: number;
|
|
65
|
+
/**
|
|
66
|
+
* Show the row index.
|
|
67
|
+
* @default true
|
|
68
|
+
*/
|
|
47
69
|
numbered?: boolean;
|
|
70
|
+
/**
|
|
71
|
+
* Extra classes on the repeater.
|
|
72
|
+
* @default ""
|
|
73
|
+
*/
|
|
48
74
|
className?: string;
|
|
49
75
|
}): import("react").JSX.Element;
|
|
@@ -13,18 +13,26 @@ export declare const ResizableDirection: import("react").Context<string>;
|
|
|
13
13
|
* parent one. Wraps `<wui-resizable>`, which Razor `<app-resizable>` renders too.
|
|
14
14
|
*
|
|
15
15
|
* @param {object} props
|
|
16
|
-
* @param {'horizontal'|'vertical'} [props.direction
|
|
17
|
-
*
|
|
18
|
-
* @param {string} [props.storageKey] Remember the sizes under this name (one per screen).
|
|
16
|
+
* @param {'horizontal'|'vertical'} [props.direction]
|
|
17
|
+
* @param {string} [props.storageKey]
|
|
19
18
|
* @param {(sizes: number[]) => void} [props.onChange] Called with every panel's size in percent after a
|
|
20
19
|
* drag, key press or reset that changed the layout, not while a drag is still moving.
|
|
21
20
|
* @param {import('react').ReactNode} [props.children] `AppResizablePanel`s with an `AppResizableHandle` between each pair.
|
|
22
21
|
* @param {string} [props.className]
|
|
23
22
|
*/
|
|
24
23
|
export default function AppResizable(props: {
|
|
24
|
+
/**
|
|
25
|
+
* Horizontal puts the panels side by side, vertical stacks them. A vertical group needs a height from its parent.
|
|
26
|
+
* @default "horizontal"
|
|
27
|
+
*/
|
|
25
28
|
direction?: 'horizontal' | 'vertical';
|
|
29
|
+
/** Remember the sizes under this name, one per screen. */
|
|
26
30
|
storageKey?: string;
|
|
27
31
|
onChange?: (sizes: number[]) => void;
|
|
28
32
|
children?: import('react').ReactNode;
|
|
33
|
+
/**
|
|
34
|
+
* Extra classes on the group.
|
|
35
|
+
* @default ""
|
|
36
|
+
*/
|
|
29
37
|
className?: string;
|
|
30
38
|
}): import("react").JSX.Element;
|
|
@@ -4,10 +4,18 @@
|
|
|
4
4
|
* size and limits are announced to assistive technology.
|
|
5
5
|
*
|
|
6
6
|
* @param {object} props
|
|
7
|
-
* @param {string} [props.label
|
|
7
|
+
* @param {string} [props.label]
|
|
8
8
|
* @param {string} [props.className]
|
|
9
9
|
*/
|
|
10
10
|
export default function AppResizableHandle(props: {
|
|
11
|
+
/**
|
|
12
|
+
* Its accessible name. Say what it resizes, such as "Resize the list".
|
|
13
|
+
* @default "Resize panels"
|
|
14
|
+
*/
|
|
11
15
|
label?: string;
|
|
16
|
+
/**
|
|
17
|
+
* Extra classes on the handle.
|
|
18
|
+
* @default ""
|
|
19
|
+
*/
|
|
12
20
|
className?: string;
|
|
13
21
|
}): import("react").JSX.Element;
|
|
@@ -3,18 +3,25 @@
|
|
|
3
3
|
* room the panels share.
|
|
4
4
|
*
|
|
5
5
|
* @param {object} props
|
|
6
|
-
* @param {number} [props.defaultSize]
|
|
7
|
-
* @param {number} [props.minSize
|
|
8
|
-
* @param {number} [props.maxSize
|
|
6
|
+
* @param {number} [props.defaultSize]
|
|
7
|
+
* @param {number} [props.minSize]
|
|
8
|
+
* @param {number} [props.maxSize]
|
|
9
9
|
* @param {import('react').ReactNode} [props.children]
|
|
10
10
|
* @param {string} [props.className]
|
|
11
11
|
* @param {import('react').CSSProperties} [props.style]
|
|
12
12
|
*/
|
|
13
13
|
export default function AppResizablePanel(props: {
|
|
14
|
+
/** The starting size in percent. Panels without one share what the sized ones leave. */
|
|
14
15
|
defaultSize?: number;
|
|
16
|
+
/** The smallest the person can make it, in percent. 10 when not set. */
|
|
15
17
|
minSize?: number;
|
|
18
|
+
/** The largest the person can make it, in percent. 100 when not set. */
|
|
16
19
|
maxSize?: number;
|
|
17
20
|
children?: import('react').ReactNode;
|
|
21
|
+
/**
|
|
22
|
+
* Extra classes on the panel.
|
|
23
|
+
* @default ""
|
|
24
|
+
*/
|
|
18
25
|
className?: string;
|
|
19
26
|
style?: import('react').CSSProperties;
|
|
20
27
|
}): import("react").JSX.Element;
|
|
@@ -9,20 +9,32 @@
|
|
|
9
9
|
* @param {object} props
|
|
10
10
|
* @param {string} props.icon
|
|
11
11
|
* @param {string} props.title
|
|
12
|
-
* @param {string} [props.text]
|
|
12
|
+
* @param {string} [props.text]
|
|
13
13
|
* @param {string} props.href
|
|
14
|
-
* @param {boolean} [props.external
|
|
14
|
+
* @param {boolean} [props.external]
|
|
15
15
|
* @param {import('react').ElementType} [props.linkComponent] Router link (e.g. react-router's
|
|
16
16
|
* `Link`) for an in-app destination; it receives `to` instead of `href`. Keeps the
|
|
17
17
|
* library router-agnostic.
|
|
18
18
|
* @param {string} [props.className]
|
|
19
19
|
*/
|
|
20
20
|
export default function AppResourceCard(props: {
|
|
21
|
+
/** The glyph in the tile: a library icon name. */
|
|
21
22
|
icon: string;
|
|
23
|
+
/** The resource's name. It is the link text. */
|
|
22
24
|
title: string;
|
|
25
|
+
/** One line of supporting detail. */
|
|
23
26
|
text?: string;
|
|
27
|
+
/** Where the card links to. */
|
|
24
28
|
href: string;
|
|
29
|
+
/**
|
|
30
|
+
* Open in a new tab.
|
|
31
|
+
* @default false
|
|
32
|
+
*/
|
|
25
33
|
external?: boolean;
|
|
26
34
|
linkComponent?: import('react').ElementType;
|
|
35
|
+
/**
|
|
36
|
+
* Extra classes on the card.
|
|
37
|
+
* @default ""
|
|
38
|
+
*/
|
|
27
39
|
className?: string;
|
|
28
40
|
}): import("react").JSX.Element;
|
|
@@ -10,22 +10,38 @@
|
|
|
10
10
|
* code as a large figure instead of an icon.
|
|
11
11
|
*
|
|
12
12
|
* @param {object} props
|
|
13
|
-
* @param {'success'|'error'|'warning'|'info'|'403'|'404'|'500'} [props.status
|
|
14
|
-
* @param {string} props.title
|
|
15
|
-
* @param {import('react').ReactNode} [props.subtitle]
|
|
16
|
-
* @param {string|import('react').ReactNode} [props.icon]
|
|
17
|
-
* @param {import('react').ReactNode} [props.actions]
|
|
13
|
+
* @param {'success'|'error'|'warning'|'info'|'403'|'404'|'500'} [props.status]
|
|
14
|
+
* @param {string} props.title
|
|
15
|
+
* @param {import('react').ReactNode} [props.subtitle]
|
|
16
|
+
* @param {string|import('react').ReactNode} [props.icon]
|
|
17
|
+
* @param {import('react').ReactNode} [props.actions]
|
|
18
18
|
* @param {import('react').ReactNode} [props.children] Extra content below the actions.
|
|
19
|
-
* @param {1|2|3} [props.headingLevel
|
|
20
|
-
* @param {string} [props.className]
|
|
19
|
+
* @param {1|2|3} [props.headingLevel]
|
|
20
|
+
* @param {string} [props.className]
|
|
21
21
|
*/
|
|
22
22
|
export default function AppResult(props: {
|
|
23
|
+
/**
|
|
24
|
+
* The outcome. It picks the default icon and tone; 403, 404 and 500 show the code as a large figure instead of an icon.
|
|
25
|
+
* @default "info"
|
|
26
|
+
*/
|
|
23
27
|
status?: 'success' | 'error' | 'warning' | 'info' | '403' | '404' | '500';
|
|
28
|
+
/** The heading: what happened. */
|
|
24
29
|
title: string;
|
|
30
|
+
/** Supporting message below the title. */
|
|
25
31
|
subtitle?: import('react').ReactNode;
|
|
32
|
+
/** Overrides the status default icon: a library icon name or any node. */
|
|
26
33
|
icon?: string | import('react').ReactNode;
|
|
34
|
+
/** Usually one or two buttons. */
|
|
27
35
|
actions?: import('react').ReactNode;
|
|
28
36
|
children?: import('react').ReactNode;
|
|
37
|
+
/**
|
|
38
|
+
* The title's heading level: 1 when the result is the whole page.
|
|
39
|
+
* @default 2
|
|
40
|
+
*/
|
|
29
41
|
headingLevel?: 1 | 2 | 3;
|
|
42
|
+
/**
|
|
43
|
+
* Extra classes on the result container.
|
|
44
|
+
* @default ""
|
|
45
|
+
*/
|
|
30
46
|
className?: string;
|
|
31
47
|
}): import("react").JSX.Element;
|
|
@@ -1,20 +1,54 @@
|
|
|
1
1
|
declare const AppRichText: import("react").ForwardRefExoticComponent<{
|
|
2
|
+
/** The content, in `format`. */
|
|
2
3
|
value?: string;
|
|
3
4
|
onChange?: (value: string) => void;
|
|
5
|
+
/** What `value` is. HTML is used when it is left out. It is read when the editor mounts, so changing it remounts the editor. */
|
|
4
6
|
format?: 'html' | 'markdown';
|
|
7
|
+
/** Shown while the editor is empty. */
|
|
5
8
|
placeholder?: string;
|
|
9
|
+
/** Posted under this name with a form. */
|
|
6
10
|
name?: string;
|
|
11
|
+
/** The visible label above the editor. A string label also names the editor for screen readers. */
|
|
7
12
|
label?: import('react').ReactNode;
|
|
13
|
+
/** Message below the editor. It replaces the hint. */
|
|
8
14
|
error?: string;
|
|
15
|
+
/** Helper text below the editor. */
|
|
9
16
|
hint?: string;
|
|
17
|
+
/**
|
|
18
|
+
* Marks the field required; an empty editor is invalid.
|
|
19
|
+
* @default false
|
|
20
|
+
*/
|
|
10
21
|
required?: boolean;
|
|
22
|
+
/**
|
|
23
|
+
* Locks the editor and keeps it out of the form post.
|
|
24
|
+
* @default false
|
|
25
|
+
*/
|
|
11
26
|
disabled?: boolean;
|
|
27
|
+
/**
|
|
28
|
+
* Locks the editor; the value still posts.
|
|
29
|
+
* @default false
|
|
30
|
+
*/
|
|
12
31
|
readOnly?: boolean;
|
|
32
|
+
/** The id of the editor; the hint and error ids derive from it. Generated when omitted. */
|
|
13
33
|
id?: string;
|
|
34
|
+
/** Accessible name for the editor; defaults to a string `label`. */
|
|
14
35
|
ariaLabel?: string;
|
|
36
|
+
/**
|
|
37
|
+
* Class on the `<wui-rich-text>` element.
|
|
38
|
+
* @default ""
|
|
39
|
+
*/
|
|
15
40
|
className?: string;
|
|
41
|
+
/**
|
|
42
|
+
* Class on the wrapper field div.
|
|
43
|
+
* @default ""
|
|
44
|
+
*/
|
|
16
45
|
fieldClassName?: string;
|
|
46
|
+
/** Help content shown in an info tip beside the label. */
|
|
17
47
|
help?: import('react').ReactNode;
|
|
48
|
+
/**
|
|
49
|
+
* Accessible name for that info tip.
|
|
50
|
+
* @default "More information"
|
|
51
|
+
*/
|
|
18
52
|
helpLabel?: string;
|
|
19
53
|
} & import("react").RefAttributes<HTMLElement>>;
|
|
20
54
|
export default AppRichText;
|
|
@@ -8,20 +8,30 @@ import "@webority/ui-elements/elements/rolling-number";
|
|
|
8
8
|
* renders too.
|
|
9
9
|
*
|
|
10
10
|
* @param {object} props
|
|
11
|
-
* @param {number} [props.value]
|
|
12
|
-
* @param {'number'|'currency'|'percent'} [props.format
|
|
13
|
-
*
|
|
14
|
-
* @param {
|
|
15
|
-
* @param {number} [props.
|
|
16
|
-
* for `number` (default 2) and `percent` (default 1).
|
|
17
|
-
* @param {number} [props.duration=600] How long the roll takes, in milliseconds.
|
|
11
|
+
* @param {number} [props.value]
|
|
12
|
+
* @param {'number'|'currency'|'percent'} [props.format]
|
|
13
|
+
* @param {'rupees'|'paise'} [props.unit]
|
|
14
|
+
* @param {number} [props.decimals]
|
|
15
|
+
* @param {number} [props.duration]
|
|
18
16
|
* @param {string} [props.className]
|
|
19
17
|
*/
|
|
20
18
|
export default function AppRollingNumber(props: {
|
|
19
|
+
/** The figure. Without a number it shows a hyphen. */
|
|
21
20
|
value?: number;
|
|
21
|
+
/**
|
|
22
|
+
* How the figure is written. `currency` is rupees (₹12,55,015); `percent` takes a ratio (0.125 is 12.5%).
|
|
23
|
+
* @default "number"
|
|
24
|
+
*/
|
|
22
25
|
format?: 'number' | 'currency' | 'percent';
|
|
26
|
+
/** What `value` counts, for `currency`. Rupees are used when it is left out. */
|
|
23
27
|
unit?: 'rupees' | 'paise';
|
|
28
|
+
/** Fraction digits: fixed for `currency` (default 0), the most shown for `number` (default 2) and `percent` (default 1). */
|
|
24
29
|
decimals?: number;
|
|
30
|
+
/** How long the roll takes, in milliseconds. It is 600 when left out. */
|
|
25
31
|
duration?: number;
|
|
32
|
+
/**
|
|
33
|
+
* Extra classes on the figure.
|
|
34
|
+
* @default ""
|
|
35
|
+
*/
|
|
26
36
|
className?: string;
|
|
27
37
|
}): import("react").JSX.Element;
|
|
@@ -13,20 +13,37 @@
|
|
|
13
13
|
* is mounted, above it in the root error boundary.
|
|
14
14
|
*
|
|
15
15
|
* @param {object} props
|
|
16
|
-
* @param {'error'|'stale-build'|'not-found'} [props.kind
|
|
17
|
-
* @param {string} [props.homeHref
|
|
16
|
+
* @param {'error'|'stale-build'|'not-found'} [props.kind]
|
|
17
|
+
* @param {string} [props.homeHref]
|
|
18
18
|
* @param {() => void} [props.onRetry] What "Try again" and "Reload" do. Default: reload the page.
|
|
19
|
-
* @param {import('react').ReactNode} [props.brand]
|
|
20
|
-
* @param {boolean} [props.fullPage
|
|
19
|
+
* @param {import('react').ReactNode} [props.brand]
|
|
20
|
+
* @param {boolean} [props.fullPage]
|
|
21
21
|
* @param {import('react').ReactNode} [props.children] Extra content below the actions, such as a support link.
|
|
22
|
-
* @param {string} [props.className]
|
|
22
|
+
* @param {string} [props.className]
|
|
23
23
|
*/
|
|
24
24
|
export default function AppRouteError(props: {
|
|
25
|
+
/**
|
|
26
|
+
* What went wrong. An error offers Try again and the home page, a stale build offers Reload, and a missing page offers the home page.
|
|
27
|
+
* @default "error"
|
|
28
|
+
*/
|
|
25
29
|
kind?: 'error' | 'stale-build' | 'not-found';
|
|
30
|
+
/**
|
|
31
|
+
* Where "Go to the home page" leads.
|
|
32
|
+
* @default "/"
|
|
33
|
+
*/
|
|
26
34
|
homeHref?: string;
|
|
27
35
|
onRetry?: () => void;
|
|
36
|
+
/** Shown above the result, usually the product's logo. */
|
|
28
37
|
brand?: import('react').ReactNode;
|
|
38
|
+
/**
|
|
39
|
+
* Fills the viewport and centres the result. Pass false for an error inside a page layout.
|
|
40
|
+
* @default true
|
|
41
|
+
*/
|
|
29
42
|
fullPage?: boolean;
|
|
30
43
|
children?: import('react').ReactNode;
|
|
44
|
+
/**
|
|
45
|
+
* Extra classes on the outer container.
|
|
46
|
+
* @default ""
|
|
47
|
+
*/
|
|
31
48
|
className?: string;
|
|
32
49
|
}): import("react").JSX.Element;
|