@mackin.com/styleguide 8.0.0-beta.7 → 8.0.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/index.d.ts +159 -92
- package/index.js +1209 -893
- package/package.json +1 -1
package/index.d.ts
CHANGED
|
@@ -3,13 +3,39 @@ import * as React from 'react';
|
|
|
3
3
|
import React__default, { ReactNode } from 'react';
|
|
4
4
|
import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
|
|
5
5
|
|
|
6
|
-
|
|
6
|
+
declare type HeaderVariant = 'label' | 'link' | 'primary' | 'secondary' | 'omg' | 'primary2' | 'positive' | 'negative';
|
|
7
|
+
interface AccordianProps {
|
|
8
|
+
header: JSX.Element | string;
|
|
9
|
+
children: React.ReactNode;
|
|
10
|
+
variant?: HeaderVariant;
|
|
11
|
+
/** Defaults to 'true'. */
|
|
12
|
+
block?: boolean;
|
|
13
|
+
className?: string;
|
|
14
|
+
/** If true, padding will not be added to the expanded content */
|
|
15
|
+
noPad?: boolean;
|
|
16
|
+
/** The initial state of the Accordian. Defaults to 'false'.
|
|
17
|
+
* Use with onChange to control the state from outside the Accordian.
|
|
18
|
+
*/
|
|
19
|
+
open?: boolean;
|
|
20
|
+
disabled?: boolean;
|
|
21
|
+
/** Defaults to 1020px. */
|
|
22
|
+
maxHeight?: string | undefined;
|
|
23
|
+
/** Defaults to 250ms. */
|
|
24
|
+
expandTimeMs?: number;
|
|
25
|
+
/** Defaults to 'ease-in-out'. */
|
|
26
|
+
transitionTimingFunction?: string;
|
|
27
|
+
onChange?: (open: boolean) => void;
|
|
28
|
+
}
|
|
29
|
+
declare const Accordian: (props: AccordianProps) => JSX.Element;
|
|
30
|
+
declare const useAccordianState: (count: number, openIndex?: number | undefined) => [boolean[], (index: number, open: boolean) => void];
|
|
31
|
+
|
|
32
|
+
interface AutoCompleteEntity {
|
|
7
33
|
id: string | number;
|
|
8
34
|
name: string;
|
|
9
35
|
}
|
|
10
|
-
declare type AutocompleteValue = string |
|
|
11
|
-
interface AutocompleteProps {
|
|
12
|
-
value:
|
|
36
|
+
declare type AutocompleteValue = string | AutoCompleteEntity;
|
|
37
|
+
interface AutocompleteProps<T extends AutocompleteValue> {
|
|
38
|
+
value: T | undefined;
|
|
13
39
|
round?: boolean;
|
|
14
40
|
rightControl?: JSX.Element;
|
|
15
41
|
placeholder?: string;
|
|
@@ -28,11 +54,12 @@ interface AutocompleteProps {
|
|
|
28
54
|
/** Defaults to 0ms. */
|
|
29
55
|
getOptionsDebounceMs?: number;
|
|
30
56
|
onChange: (value: string) => void;
|
|
31
|
-
getOptions: (value: string) => Promise<
|
|
32
|
-
onPick: (value:
|
|
57
|
+
getOptions: (value: string) => Promise<T[]>;
|
|
58
|
+
onPick: (value: T) => void;
|
|
33
59
|
onKeyPress?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
|
|
60
|
+
onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
|
|
34
61
|
}
|
|
35
|
-
declare const Autocomplete: (p: AutocompleteProps) => JSX.Element;
|
|
62
|
+
declare const Autocomplete: <T extends AutocompleteValue>(p: AutocompleteProps<T>) => JSX.Element;
|
|
36
63
|
|
|
37
64
|
/** @deprecated Use Backdrop2 going forward. */
|
|
38
65
|
declare const Backdrop$1: (props: {
|
|
@@ -55,15 +82,12 @@ declare const Backdrop: (p: {
|
|
|
55
82
|
children: React__default.ReactNode;
|
|
56
83
|
/** Fade in time. Defaults to 250ms. */
|
|
57
84
|
showTimeMs?: number;
|
|
58
|
-
|
|
85
|
+
__debug?: boolean;
|
|
59
86
|
}) => JSX.Element;
|
|
60
87
|
|
|
61
88
|
declare type ButtonVariant = 'label' | 'circle' | 'icon' | 'link' | 'inlineLink' | 'primary' | 'secondary' | 'omg' | 'primary2' | 'positive' | 'negative';
|
|
62
89
|
interface ButtonProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
|
|
63
90
|
variant?: ButtonVariant;
|
|
64
|
-
/** Defaults to 'center'. */
|
|
65
|
-
textAlign?: 'left' | 'center' | 'right';
|
|
66
|
-
block?: boolean;
|
|
67
91
|
/** As round as can be. */
|
|
68
92
|
round?: boolean;
|
|
69
93
|
rightIcon?: JSX.Element;
|
|
@@ -72,12 +96,12 @@ interface ButtonProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes
|
|
|
72
96
|
iconBlock?: boolean;
|
|
73
97
|
small?: boolean;
|
|
74
98
|
/** The button will not respond to click or mouse events, but it will appear normal. */
|
|
75
|
-
|
|
99
|
+
readOnly?: boolean;
|
|
76
100
|
waiting?: boolean;
|
|
77
101
|
/** The minimum button size will be set to the themes' formButtonMinWidth. */
|
|
78
102
|
enforceMinWidth?: boolean;
|
|
79
103
|
}
|
|
80
|
-
declare const Button:
|
|
104
|
+
declare const Button: React.ForwardRefExoticComponent<Pick<ButtonProps, "form" | "variant" | "round" | "rightIcon" | "leftIcon" | "iconBlock" | "small" | "readOnly" | "waiting" | "enforceMinWidth" | "key" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<HTMLButtonElement>>;
|
|
81
105
|
|
|
82
106
|
interface CalendarProps {
|
|
83
107
|
month: number;
|
|
@@ -111,7 +135,7 @@ declare const Calendar: (p: CalendarProps) => JSX.Element;
|
|
|
111
135
|
interface CheckboxProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, 'checked' | 'onChange' | 'type'> {
|
|
112
136
|
checked: boolean;
|
|
113
137
|
onChange: (checked: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
114
|
-
|
|
138
|
+
readOnly?: boolean;
|
|
115
139
|
label?: string;
|
|
116
140
|
checkedIcon?: string;
|
|
117
141
|
uncheckedIcon?: string;
|
|
@@ -133,7 +157,7 @@ interface ConfirmModalProps {
|
|
|
133
157
|
className?: string;
|
|
134
158
|
variant?: 'omg';
|
|
135
159
|
id?: string;
|
|
136
|
-
|
|
160
|
+
__debug?: boolean;
|
|
137
161
|
}
|
|
138
162
|
declare const ConfirmModal: (props: ConfirmModalProps) => JSX.Element;
|
|
139
163
|
|
|
@@ -144,46 +168,13 @@ interface CopyButtonProps {
|
|
|
144
168
|
}
|
|
145
169
|
declare const CopyButton: (props: CopyButtonProps) => JSX.Element;
|
|
146
170
|
|
|
147
|
-
|
|
148
|
-
rightControl?: JSX.Element;
|
|
149
|
-
round?: boolean;
|
|
150
|
-
/** The class applied to the wrapping element without this component. Use 'className' to style the input directly. */
|
|
151
|
-
wrapperClassName?: string;
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
interface DateInputProps extends Omit<BaseInputProps, 'type' | 'value' | 'onBlur' | 'min' | 'max' | 'step' | 'pattern' | 'maxLength'> {
|
|
155
|
-
/** The epoch timestamp. Equivalent to Date.valueOf(). */
|
|
156
|
-
value?: number;
|
|
157
|
-
/** The min epoch timestamp. */
|
|
158
|
-
min?: number;
|
|
159
|
-
/** The max epoch timestamp. */
|
|
160
|
-
max?: number;
|
|
161
|
-
/** Callbacks to be tested on change. Will call setCustomValidity(...) internally. All native validity states can be pulled off of the event.target as normal. */
|
|
162
|
-
customValidityChecks?: ((value: string | undefined) => string | undefined)[];
|
|
163
|
-
/** Will try to fix any validity errors onBlur (min, max, etc). If it cannot, the value will be cleared. Requires the onBlur callback to be passed in. Defaults to 'true'. */
|
|
164
|
-
constrainOnBlur?: boolean;
|
|
165
|
-
onBlur?: (value: number | undefined, event: React.FocusEvent<HTMLInputElement>) => void;
|
|
166
|
-
}
|
|
167
|
-
|
|
168
|
-
interface DatePickerProps extends Omit<DateInputProps, 'rightControl' | 'ref'> {
|
|
169
|
-
/** This is the ms from Date.valueOf(). */
|
|
170
|
-
min?: number;
|
|
171
|
-
/** This is the ms from Date.valueOf(). */
|
|
172
|
-
max?: number;
|
|
173
|
-
/** Whether to move the popover on collision with the parent's bounds. Default is true. */
|
|
174
|
-
reposition?: boolean;
|
|
175
|
-
/** Fired when a value is picked in the calendar. */
|
|
176
|
-
onPick?: (date: number) => void;
|
|
177
|
-
}
|
|
178
|
-
declare const DatePicker: (p: DatePickerProps) => JSX.Element;
|
|
179
|
-
|
|
180
|
-
declare const Divider: () => JSX.Element;
|
|
171
|
+
declare const Divider: (p: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHRElement>, HTMLHRElement>) => JSX.Element;
|
|
181
172
|
|
|
182
173
|
declare const ErrorModal: (props: {
|
|
183
174
|
message: string;
|
|
184
175
|
show: boolean;
|
|
185
176
|
id?: string;
|
|
186
|
-
|
|
177
|
+
__debug?: boolean;
|
|
187
178
|
close: () => void;
|
|
188
179
|
}) => JSX.Element;
|
|
189
180
|
|
|
@@ -206,17 +197,21 @@ interface FileUploaderProps {
|
|
|
206
197
|
instructionMessage?: string;
|
|
207
198
|
/** For additional info below the instructionMessage. */
|
|
208
199
|
infoMessage?: string | JSX.Element;
|
|
200
|
+
/** If false, the 'infoMessage' will be hidden when a file is picked. Defaults to 'true' */
|
|
201
|
+
showInfoOnPick?: boolean;
|
|
202
|
+
disabled?: boolean;
|
|
209
203
|
}
|
|
210
|
-
declare const FileUploader: (p: FileUploaderProps) => JSX.Element;
|
|
204
|
+
declare const FileUploader: (p: FileUploaderProps) => JSX.Element;
|
|
205
|
+
declare const getFileSizeDisplay: (size: number) => string;
|
|
211
206
|
|
|
212
|
-
declare type
|
|
213
|
-
interface
|
|
207
|
+
declare type BaseProps$3 = React.ClassAttributes<HTMLFormElement> & React.FormHTMLAttributes<HTMLFormElement>;
|
|
208
|
+
interface FormProps extends BaseProps$3 {
|
|
214
209
|
inline?: boolean;
|
|
215
210
|
/** If true, preventDefault and stopPropagation will be applied prior to onSubmit being called. Defaults to true. */
|
|
216
211
|
ajax?: boolean;
|
|
217
212
|
}
|
|
218
213
|
/** Use this instead of <form> directly. If we need to fight Chrome's autofill, we can do so at a global level. */
|
|
219
|
-
declare const Form: React.ForwardRefExoticComponent<Pick<
|
|
214
|
+
declare const Form: React.ForwardRefExoticComponent<Pick<FormProps, "inline" | "ajax" | "key" | "acceptCharset" | "action" | "autoComplete" | "encType" | "method" | "name" | "noValidate" | "target" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<HTMLFormElement>>;
|
|
220
215
|
declare const FormFlexRow: (props: {
|
|
221
216
|
children: React.ReactNode;
|
|
222
217
|
className?: string;
|
|
@@ -287,16 +282,53 @@ interface InfoTipProps {
|
|
|
287
282
|
onClose?: () => void;
|
|
288
283
|
/** Defaults to 'info'. */
|
|
289
284
|
variant?: 'info' | 'modal';
|
|
290
|
-
modalHeader?: string;
|
|
291
285
|
/** Defaults to nav color. */
|
|
292
286
|
bgColor?: string;
|
|
293
287
|
/** Defaults to nav font color. */
|
|
294
288
|
fontColor?: string;
|
|
289
|
+
/** For variant=modal only. */
|
|
290
|
+
modalHeader?: string;
|
|
291
|
+
/** For variant=modal only. */
|
|
295
292
|
modalId?: string;
|
|
296
|
-
|
|
293
|
+
/** For variant=modal only. */
|
|
294
|
+
__modalDebug?: boolean;
|
|
295
|
+
/** Whether to move the popover on collision with the parent's bounds. Default is false. For variant=info only. */
|
|
296
|
+
reposition?: boolean;
|
|
297
|
+
/** Order of positions as the Popover colides with the window edge. The default order is ['right', 'top', 'left', 'bottom']. For variant=info only. */
|
|
298
|
+
positions?: ("bottom" | "left" | "right" | "top")[] | undefined;
|
|
297
299
|
}
|
|
298
300
|
declare const InfoTip: (props: InfoTipProps) => JSX.Element;
|
|
299
301
|
|
|
302
|
+
interface BaseInputProps extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
|
|
303
|
+
rightControl?: JSX.Element;
|
|
304
|
+
round?: boolean;
|
|
305
|
+
/** The class applied to the wrapping element without this component. Use 'className' to style the input directly. */
|
|
306
|
+
wrapperClassName?: string;
|
|
307
|
+
/** An error message to display below the input. */
|
|
308
|
+
error?: string;
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
interface ValidationMessageProps {
|
|
312
|
+
/** Will mark the input as invalid and show this as the validation failed message. */
|
|
313
|
+
customError?: string;
|
|
314
|
+
/** If 'pattern' is present, this message will be displayed as the validation failed message. */
|
|
315
|
+
patternErrorMessage?: string;
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
declare type BaseProps$2 = Omit<BaseInputProps, 'type' | 'value' | 'min' | 'max' | 'step' | 'pattern' | 'maxLength' | 'rightControl' | 'ref'> & Omit<ValidationMessageProps, 'pattern'>;
|
|
319
|
+
interface DateInputProps extends BaseProps$2 {
|
|
320
|
+
/** The epoch timestamp. Equivalent to Date.valueOf(). */
|
|
321
|
+
value?: number;
|
|
322
|
+
/** The min epoch timestamp. */
|
|
323
|
+
min?: number;
|
|
324
|
+
/** The max epoch timestamp. */
|
|
325
|
+
max?: number;
|
|
326
|
+
/** Whether to move the popover on collision with the parent's bounds. Default is true. */
|
|
327
|
+
reposition?: boolean;
|
|
328
|
+
onValueChange: (value: number | undefined) => void;
|
|
329
|
+
}
|
|
330
|
+
declare const DateInput: React.ForwardRefExoticComponent<DateInputProps & React.RefAttributes<HTMLInputElement>>;
|
|
331
|
+
|
|
300
332
|
declare type InputValue = string | number | undefined;
|
|
301
333
|
declare type InputType = 'text' | 'number' | 'textarea' | 'date' | 'password' | 'url' | 'email';
|
|
302
334
|
interface InputProps {
|
|
@@ -341,30 +373,34 @@ interface InputProps {
|
|
|
341
373
|
/** @deprecated Use DateInput, NumberInput, or TextInput instead. */
|
|
342
374
|
declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<any>>;
|
|
343
375
|
|
|
344
|
-
|
|
376
|
+
declare type BaseProps$1 = Omit<BaseInputProps, 'type' | 'value' | 'min' | 'max' | 'step' | 'maxLength' | 'error' | 'pattern'> & Omit<ValidationMessageProps, 'pattern'>;
|
|
377
|
+
interface NumberInputProps extends BaseProps$1 {
|
|
345
378
|
value?: number;
|
|
346
379
|
min?: number;
|
|
347
380
|
max?: number;
|
|
381
|
+
/** WARNING! At least in Chrome (2022-03-03), step is buggy. Stick to 1, 0, or fractional 10ths (0.1, 0.01, etc).
|
|
382
|
+
* Failure to do this will cause the input to be marked as invalid. We will not be attempting to fix this issue.
|
|
383
|
+
*/
|
|
348
384
|
step?: number;
|
|
349
|
-
|
|
350
|
-
customValidityChecks?: ((value: number | undefined) => string | undefined)[];
|
|
351
|
-
/** Will try to fix any validity errors onBlur (min, max, step, etc). If it cannot, the value will be cleared. Requires the onBlur callback to be passed in. Defaults to 'true'. */
|
|
352
|
-
constrainOnBlur?: boolean;
|
|
353
|
-
onChange?: (value: number | undefined, event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
354
|
-
onBlur?: (value: number | undefined, event: React.FocusEvent<HTMLInputElement>) => void;
|
|
385
|
+
onValueChange: (value: number | undefined) => void;
|
|
355
386
|
}
|
|
356
|
-
declare const NumberInput: React.ForwardRefExoticComponent<Pick<NumberInputProps, "value" | "
|
|
387
|
+
declare const NumberInput: React.ForwardRefExoticComponent<Pick<NumberInputProps, "value" | "min" | "max" | "step" | "rightControl" | "round" | "wrapperClassName" | "key" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "enterKeyHint" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "minLength" | "multiple" | "name" | "placeholder" | "readOnly" | "required" | "size" | "src" | "width" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "customError" | "patternErrorMessage" | "onValueChange"> & React.RefAttributes<HTMLInputElement>>;
|
|
357
388
|
|
|
358
|
-
|
|
389
|
+
declare type BaseProps = Omit<BaseInputProps, 'type' | 'value' | 'max' | 'min' | 'step' | 'error'> & ValidationMessageProps;
|
|
390
|
+
interface TextInputProps extends BaseProps {
|
|
359
391
|
value?: string;
|
|
360
392
|
/** Defaults to 'text'. */
|
|
361
393
|
type?: 'text' | 'email' | 'url' | 'password';
|
|
362
|
-
/**
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
394
|
+
/** Clears all leading and trailing whitespace on blur. Defaults to true. */
|
|
395
|
+
trim?: boolean;
|
|
396
|
+
/** If true, an empty input will return and empty string (''). Default value is undefined. */
|
|
397
|
+
emptyString?: boolean;
|
|
398
|
+
onValueChange: (value: string | undefined) => void;
|
|
366
399
|
}
|
|
367
|
-
declare const TextInput: React.ForwardRefExoticComponent<Pick<TextInputProps, "type" | "value" | "
|
|
400
|
+
declare const TextInput: React.ForwardRefExoticComponent<Pick<TextInputProps, "type" | "value" | "rightControl" | "round" | "wrapperClassName" | "key" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "enterKeyHint" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "maxLength" | "minLength" | "multiple" | "name" | "pattern" | "placeholder" | "readOnly" | "required" | "size" | "src" | "width" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "trim" | "emptyString" | "onValueChange" | "customError" | "patternErrorMessage"> & React.RefAttributes<HTMLInputElement>>;
|
|
401
|
+
|
|
402
|
+
/** useEffect but ignores the first call on component mount. */
|
|
403
|
+
declare const useIgnoreMount: (effect: React__default.EffectCallback, deps?: React__default.DependencyList | undefined) => void;
|
|
368
404
|
|
|
369
405
|
interface LabelProps {
|
|
370
406
|
text: string | JSX.Element;
|
|
@@ -414,7 +450,7 @@ interface ModalProps {
|
|
|
414
450
|
scrollable?: boolean;
|
|
415
451
|
id?: string;
|
|
416
452
|
className?: string;
|
|
417
|
-
|
|
453
|
+
__debug?: boolean;
|
|
418
454
|
onClick?: () => void;
|
|
419
455
|
}
|
|
420
456
|
declare const Modal: (p: ModalProps) => React__default.ReactPortal | null;
|
|
@@ -422,9 +458,11 @@ declare const Modal: (p: ModalProps) => React__default.ReactPortal | null;
|
|
|
422
458
|
declare const Nav: (props: {
|
|
423
459
|
show: boolean;
|
|
424
460
|
toggle: (show: boolean) => void;
|
|
461
|
+
id?: string | undefined;
|
|
425
462
|
children?: React.ReactNode;
|
|
426
463
|
responsive?: boolean | undefined;
|
|
427
464
|
className?: string | undefined;
|
|
465
|
+
__debug?: boolean | undefined;
|
|
428
466
|
}) => JSX.Element;
|
|
429
467
|
|
|
430
468
|
interface OmniLinkProps {
|
|
@@ -468,7 +506,7 @@ interface PagerOptions<TItem> {
|
|
|
468
506
|
sortOptions?: PagerSortOption<TItem>[];
|
|
469
507
|
previous?: ItemPager<TItem>;
|
|
470
508
|
}
|
|
471
|
-
/**
|
|
509
|
+
/** In-memory pager. */
|
|
472
510
|
declare class ItemPager<TItem> {
|
|
473
511
|
constructor(allItems: TItem[], options?: PagerOptions<TItem>);
|
|
474
512
|
get allItems(): TItem[];
|
|
@@ -584,6 +622,7 @@ interface Props<T> extends PagerStyleProps {
|
|
|
584
622
|
}
|
|
585
623
|
declare const BoundStaticPager: <T>(p: Props<T>) => JSX.Element;
|
|
586
624
|
|
|
625
|
+
/** A page of data with helpers props. */
|
|
587
626
|
declare class PagedResult<T> {
|
|
588
627
|
constructor(items?: T[], total?: number, page?: number, limit?: number);
|
|
589
628
|
static fromDto<T>(dto: {
|
|
@@ -621,17 +660,20 @@ declare class PagedResult<T> {
|
|
|
621
660
|
}
|
|
622
661
|
|
|
623
662
|
declare type PickerValue = string | number;
|
|
624
|
-
|
|
663
|
+
declare type PickerOption<T> = T | {
|
|
664
|
+
id: T;
|
|
665
|
+
name?: string;
|
|
666
|
+
};
|
|
667
|
+
interface SelectProps extends Omit<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, 'value' | 'options'> {
|
|
625
668
|
}
|
|
626
669
|
interface PickerProps<T extends PickerValue> extends SelectProps {
|
|
627
670
|
value: T;
|
|
628
|
-
options:
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
})[];
|
|
632
|
-
onChange: (value: T, event: React.ChangeEvent<HTMLSelectElement>) => void;
|
|
633
|
-
readonly?: boolean;
|
|
671
|
+
options: PickerOption<T>[];
|
|
672
|
+
onValueChange: (value: T) => void;
|
|
673
|
+
readOnly?: boolean;
|
|
634
674
|
round?: boolean;
|
|
675
|
+
/** If true, bottom padding will be added to account for other inputs having space for error messages. */
|
|
676
|
+
controlAlign?: boolean;
|
|
635
677
|
}
|
|
636
678
|
declare const Picker: <T extends PickerValue>(props: PickerProps<T>) => JSX.Element;
|
|
637
679
|
|
|
@@ -651,7 +693,7 @@ interface PopoverProps {
|
|
|
651
693
|
border?: string;
|
|
652
694
|
/** Popover background. Defaults to theme.colors.bg. */
|
|
653
695
|
backgroundColor?: string;
|
|
654
|
-
/** Order of positions as the Popover colides with the window edge. */
|
|
696
|
+
/** Order of positions as the Popover colides with the window edge. The default order is ['right', 'top', 'left', 'bottom']. */
|
|
655
697
|
positions?: ("bottom" | "left" | "right" | "top")[] | undefined;
|
|
656
698
|
}
|
|
657
699
|
declare const Popover: (p: PopoverProps) => JSX.Element;
|
|
@@ -686,7 +728,14 @@ declare type Alignment = 'left' | 'right' | 'center';
|
|
|
686
728
|
|
|
687
729
|
declare const GlobalStyles: () => null;
|
|
688
730
|
|
|
689
|
-
declare const getCurrencyDisplay: (value: number, isCents?: boolean | undefined, denomination?: string) => string;
|
|
731
|
+
declare const getCurrencyDisplay: (value: number, isCents?: boolean | undefined, denomination?: string) => string;
|
|
732
|
+
/** Converts an enum to an array of entities with id and name. The enum can be an integer or string enum.*/
|
|
733
|
+
declare const enumToEntities: <T extends {
|
|
734
|
+
[key: string]: string | number;
|
|
735
|
+
}>(enumObj: T) => {
|
|
736
|
+
id: string | number;
|
|
737
|
+
name: string;
|
|
738
|
+
}[];
|
|
690
739
|
|
|
691
740
|
interface MackinTheme {
|
|
692
741
|
colors: {
|
|
@@ -757,6 +806,7 @@ interface MackinTheme {
|
|
|
757
806
|
dividerMargin: string;
|
|
758
807
|
dividerBorder: string;
|
|
759
808
|
headerBoxShadow: string;
|
|
809
|
+
inputErrorMinHeight: string;
|
|
760
810
|
};
|
|
761
811
|
zIndexes: {
|
|
762
812
|
header: number;
|
|
@@ -775,6 +825,10 @@ interface MackinTheme {
|
|
|
775
825
|
desktop: string;
|
|
776
826
|
tablet: string;
|
|
777
827
|
};
|
|
828
|
+
mediaQueries: {
|
|
829
|
+
desktop: string;
|
|
830
|
+
tablet: string;
|
|
831
|
+
};
|
|
778
832
|
}
|
|
779
833
|
/** Call this on your theme after messing with the props. It will re-build things that depend on sizes and colors. */
|
|
780
834
|
declare const calcDynamicThemeProps: <T extends MackinTheme>(theme: T) => void;
|
|
@@ -785,6 +839,9 @@ declare const ThemeProvider: <T extends MackinTheme>(p: {
|
|
|
785
839
|
theme: T;
|
|
786
840
|
}) => JSX.Element;
|
|
787
841
|
|
|
842
|
+
/** React wrapper around window resizing and window.matchMedia.
|
|
843
|
+
* https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
|
|
844
|
+
*/
|
|
788
845
|
declare const useMediaQuery: (query: string) => boolean;
|
|
789
846
|
|
|
790
847
|
/** Returns a user-provided theme if ThemeProvider was used correctly, or the default theme. */
|
|
@@ -898,14 +955,15 @@ declare const Text: (props: TextProps) => React.DetailedReactHTMLElement<{
|
|
|
898
955
|
className: string;
|
|
899
956
|
}, HTMLElement>;
|
|
900
957
|
|
|
901
|
-
interface TextAreaProps extends Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, 'value'
|
|
958
|
+
interface TextAreaProps extends Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, 'value'> {
|
|
902
959
|
value?: string;
|
|
903
|
-
/**
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
960
|
+
/** By default all leading and trailing whitespace will be cleared on blur. */
|
|
961
|
+
noTrim?: boolean;
|
|
962
|
+
/** Will mark the input as invalid and show this as the validation failed message. */
|
|
963
|
+
customError?: string;
|
|
964
|
+
onValueChange: (value: string | undefined) => void;
|
|
907
965
|
}
|
|
908
|
-
declare const TextArea: React.ForwardRefExoticComponent<Pick<TextAreaProps, "value" | "
|
|
966
|
+
declare const TextArea: React.ForwardRefExoticComponent<Pick<TextAreaProps, "value" | "key" | "autoComplete" | "autoFocus" | "cols" | "dirName" | "disabled" | "form" | "maxLength" | "minLength" | "name" | "placeholder" | "readOnly" | "required" | "rows" | "wrap" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "noTrim" | "customError" | "onValueChange"> & React.RefAttributes<HTMLTextAreaElement>>;
|
|
909
967
|
|
|
910
968
|
declare type ToggleButtonVariant = 'primary' | 'secondary' | 'omg' | 'primary2' | 'positive' | 'negative';
|
|
911
969
|
interface ToggleButtonProps {
|
|
@@ -946,15 +1004,24 @@ interface ToggleButtonGroupProps {
|
|
|
946
1004
|
}
|
|
947
1005
|
declare const ToggleButtonGroup: (props: ToggleButtonGroupProps) => JSX.Element;
|
|
948
1006
|
|
|
949
|
-
|
|
950
|
-
}
|
|
951
|
-
declare const TogglePasswordInput: (p: TogglePasswordInputProps) => JSX.Element;
|
|
1007
|
+
declare const TogglePasswordInput: React.ForwardRefExoticComponent<Pick<TextInputProps, "type" | "rightControl" | "value" | "round" | "wrapperClassName" | "key" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "enterKeyHint" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "maxLength" | "minLength" | "multiple" | "name" | "pattern" | "placeholder" | "readOnly" | "required" | "size" | "src" | "width" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "trim" | "emptyString" | "onValueChange" | "customError" | "patternErrorMessage"> & React.RefAttributes<HTMLInputElement>>;
|
|
952
1008
|
|
|
953
1009
|
declare const WaitingIndicator: (p: {
|
|
954
1010
|
show: boolean;
|
|
955
1011
|
minShowTimeMs?: number;
|
|
956
1012
|
id?: string;
|
|
957
|
-
|
|
1013
|
+
__debug?: boolean;
|
|
958
1014
|
}) => JSX.Element;
|
|
959
1015
|
|
|
960
|
-
|
|
1016
|
+
/** Tells you actual width of the scroll bar. This can vary by browser. */
|
|
1017
|
+
declare const useScrollbarSize: (recalc?: boolean | undefined) => number;
|
|
1018
|
+
|
|
1019
|
+
/** Provides stateful notifications around async calls. */
|
|
1020
|
+
declare const useWaiting: <TArgs extends any[], TReturn>(func: (...args: TArgs) => Promise<TReturn>) => [boolean, (...args: TArgs) => Promise<TReturn>];
|
|
1021
|
+
|
|
1022
|
+
/** useEffect but it will only fire when the actual truthiness of the value changes.
|
|
1023
|
+
* Use for comparing previous states to next states without all the bullshit around useEffect and component mounting.
|
|
1024
|
+
*/
|
|
1025
|
+
declare const useBooleanChanged: (effect: (current: boolean, previous: boolean) => void, dep: boolean | undefined) => void;
|
|
1026
|
+
|
|
1027
|
+
export { Accordian, AccordianProps, Alignment, Autocomplete, AutocompleteProps, AutocompleteValue, Backdrop$1 as Backdrop, Backdrop as Backdrop2, BoundMemoryPager, BoundStaticPager, Button, ButtonProps, Calendar, CalendarProps, Checkbox, CheckboxProps, ConfirmModal, ConfirmModalProps, CopyButton, DateInput, DateInputProps, Divider, ErrorModal, FileUploader, Form, FormColumnRow, FormFlexRow, FormProps, GlobalStyles, Header, Highlight, ICONS, Icon, Image, InfoPanel, InfoTip, InfoTipProps, Input, InputProps, ItemPager, Label, LabelProps, List, ListItem, ListItemProps, ListProps, MackinTheme, Modal, Nav, NumberInput, NumberInputProps, OmniLink, OmniLinkProps, PagedResult, Pager, PagerProps, Picker, PickerOption, PickerProps, PickerValue, Popover, ProgressBar, ProgressBarProps, SearchBox, SearchBoxProps, Slider, TabHeader, TabHeaderProps, TabLocker, Table, Td, TdCurrency, TdNumber, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, Th, ThSort, ThemeProvider, ToggleButton, ToggleButtonGroup, ToggleButtonGroupProps, ToggleButtonProps, TogglePasswordInput, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, enumToEntities, getCurrencyDisplay, getFileSizeDisplay, useAccordianState, useBooleanChanged, useIgnoreMount, useMediaQuery, useScrollbarSize, useThemeSafely, useWaiting };
|